From 80ca6636fc85cebdf5bfa7f5cfea8ff9786dd970 Mon Sep 17 00:00:00 2001
From: aleversn <aleversn@users.noreply.github.com>
Date: Sun, 17 Mar 2024 13:36:35 +0000
Subject: [PATCH] deploy: 8c7419f98253a93141270b362523b62a74c43067

---
 404.html                                      |  16 +-
 ....woff => Segoe-Fluent-Icons.Cum4Jb-a.woff} | Bin
 assets/app.CSutcJ2E.js                        |   7 +
 assets/app.d60fa8c3.js                        |   5 -
 assets/chunks/framework.DvIFzl91.js           |  17 +
 assets/chunks/index.9dba9c16.js               |   1 -
 assets/chunks/index.CvzShnhD.js               |   1 +
 assets/chunks/theme.CgqFBnN_.js               |  21 ++
 ...off => fabricmdl2icons-3.54.D1Viihrr.woff} | Bin
 ...ponents_animated-icon_index.md.yZDMzCFe.js |  46 +++
 ...ts_animated-icon_index.md.yZDMzCFe.lean.js |   1 +
 ...uide_components_badge_index.md.Bb4crrJn.js |  17 +
 ...components_badge_index.md.Bb4crrJn.lean.js |   1 +
 ...components_breadcrumb_index.md.DyDm7PeP.js |  10 +
 ...nents_breadcrumb_index.md.DyDm7PeP.lean.js |  10 +
 ...ide_components_button_emits.md.d682bf18.js |   1 -
 ...omponents_button_emits.md.d682bf18.lean.js |   1 -
 ...ide_components_button_index.md.23a8eb54.js |  34 --
 ...omponents_button_index.md.23a8eb54.lean.js |  34 --
 ...ide_components_button_index.md.7sqT2MQP.js |   3 +
 ...omponents_button_index.md.7sqT2MQP.lean.js |   1 +
 ...omponents_button_properties.md.cd4004b6.js |   1 -
 ...ents_button_properties.md.cd4004b6.lean.js |   1 -
 ..._calendar-date-picker_emits.md.D5OkfR8j.js |   1 +
 ...ndar-date-picker_emits.md.D5OkfR8j.lean.js |   1 +
 ..._calendar-date-picker_index.md.BdHjrurh.js |   1 +
 ...ndar-date-picker_index.md.BdHjrurh.lean.js |   1 +
 ...ndar-date-picker_properties.md.DXRjmMG8.js |   1 +
 ...date-picker_properties.md.DXRjmMG8.lean.js |   1 +
 ...ponents_calendar-view_index.md.zdoRYVx1.js |   1 +
 ...ts_calendar-view_index.md.zdoRYVx1.lean.js |   1 +
 ...de_components_callout_index.md.D9RU33w6.js |  17 +
 ...mponents_callout_index.md.D9RU33w6.lean.js |   1 +
 ..._components_check-box_emits.md.31609794.js |   1 -
 ...onents_check-box_emits.md.31609794.lean.js |   1 -
 ..._components_check-box_index.md.32046814.js |  41 ---
 ...onents_check-box_index.md.32046814.lean.js |  41 ---
 ..._components_check-box_index.md.FYgdu4oq.js |   1 +
 ...onents_check-box_index.md.FYgdu4oq.lean.js |   1 +
 ...onents_check-box_properties.md.8f33ac0c.js |   1 -
 ...s_check-box_properties.md.8f33ac0c.lean.js |   1 -
 ...e_components_collapse_index.md.N9Iu5-2v.js |  39 +++
 ...ponents_collapse_index.md.N9Iu5-2v.lean.js |   1 +
 ...mponents_color-picker_emits.md.00983cd0.js |   1 -
 ...nts_color-picker_emits.md.00983cd0.lean.js |   1 -
 ...mponents_color-picker_emits.md.BHDXVtBQ.js |   1 +
 ...nts_color-picker_emits.md.BHDXVtBQ.lean.js |   1 +
 ...mponents_color-picker_index.md.DCc4ixcU.js |   3 +
 ...nts_color-picker_index.md.DCc4ixcU.lean.js |   3 +
 ...mponents_color-picker_index.md.b2d62612.js |   5 -
 ...nts_color-picker_index.md.b2d62612.lean.js |   5 -
 ...nts_color-picker_properties.md.5466ba72.js |   1 -
 ...olor-picker_properties.md.5466ba72.lean.js |   1 -
 ...nts_color-picker_properties.md.wcXK29Vl.js |   1 +
 ...olor-picker_properties.md.wcXK29Vl.lean.js |   1 +
 ..._components_combo-box_emits.md.Dh5R-qEv.js |   1 +
 ...onents_combo-box_emits.md.Dh5R-qEv.lean.js |   1 +
 ..._components_combo-box_emits.md.d5ffda50.js |   1 -
 ...onents_combo-box_emits.md.d5ffda50.lean.js |   1 -
 ..._components_combo-box_index.md.1c4364f5.js |  24 --
 ...onents_combo-box_index.md.1c4364f5.lean.js |  24 --
 ..._components_combo-box_index.md.DTyu3eNd.js |  21 ++
 ...onents_combo-box_index.md.DTyu3eNd.lean.js |  21 ++
 ...onents_combo-box_properties.md.2e1d6060.js |   1 -
 ...s_combo-box_properties.md.2e1d6060.lean.js |   1 -
 ...onents_combo-box_properties.md.AWfHzV6x.js |   1 +
 ...s_combo-box_properties.md.AWfHzV6x.lean.js |   1 +
 ...e_components_combobox_emits.md.CGB6WLt8.js |   1 +
 ...ponents_combobox_emits.md.CGB6WLt8.lean.js |   1 +
 ...e_components_combobox_index.md.CsPkY6YB.js |  32 ++
 ...ponents_combobox_index.md.CsPkY6YB.lean.js |  13 +
 ...ponents_combobox_properties.md.Bja0hMou.js |   1 +
 ...ts_combobox_properties.md.Bja0hMou.lean.js |   1 +
 ...omponents_command-bar_index.md.Cp4_rrGB.js |  60 ++++
 ...ents_command-bar_index.md.Cp4_rrGB.lean.js |   1 +
 ...omponents_date-picker_index.md.12vmUIup.js |  26 ++
 ...ents_date-picker_index.md.12vmUIup.lean.js |   1 +
 ...mponents_details-list_index.md.CcgOCIyt.js | 280 ++++++++++++++++
 ...nts_details-list_index.md.CcgOCIyt.lean.js |   1 +
 ...ide_components_drawer_index.md.D_vpnCpE.js |   5 +
 ...omponents_drawer_index.md.D_vpnCpE.lean.js |   3 +
 ..._components_drop-down_emits.md.BE95TdKW.js |   1 +
 ...onents_drop-down_emits.md.BE95TdKW.lean.js |   1 +
 ..._components_drop-down_index.md.BZzJZQWq.js |  41 +++
 ...onents_drop-down_index.md.BZzJZQWq.lean.js |   1 +
 ...onents_drop-down_properties.md.Bwlkpr1q.js |   1 +
 ...s_drop-down_properties.md.Bwlkpr1q.lean.js |   1 +
 ...e_components_expander_index.md.BKgcUJzQ.js |  34 ++
 ...ponents_expander_index.md.BKgcUJzQ.lean.js |   1 +
 ..._components_flip-view_emits.md.DCheHjDj.js |   1 +
 ...onents_flip-view_emits.md.DCheHjDj.lean.js |   1 +
 ..._components_flip-view_index.md.DefnDOv6.js |  32 ++
 ...onents_flip-view_index.md.DefnDOv6.lean.js |   1 +
 ...onents_flip-view_properties.md.BqZ4hhgU.js |   1 +
 ...s_flip-view_properties.md.BqZ4hhgU.lean.js |   1 +
 ...mponents_icon-element_emits.md.D5TXFdTZ.js |   1 +
 ...nts_icon-element_emits.md.D5TXFdTZ.lean.js |   1 +
 ...mponents_icon-element_index.md.DQ8K7JNn.js |  55 ++++
 ...nts_icon-element_index.md.DQ8K7JNn.lean.js |  18 ++
 ...nts_icon-element_properties.md.8Oakruwc.js |   1 +
 ...con-element_properties.md.8Oakruwc.lean.js |   1 +
 ...uide_components_image_emits.md.lmlz2xJd.js |   1 +
 ...components_image_emits.md.lmlz2xJd.lean.js |   1 +
 ...uide_components_image_index.md.B7X6cWAZ.js |   1 +
 ...components_image_index.md.B7X6cWAZ.lean.js |   1 +
 ...components_image_properties.md.DGanRzCb.js |   1 +
 ...nents_image_properties.md.DGanRzCb.lean.js |   1 +
 ...de_components_img-box_index.md.DYtggkf_.js |   1 +
 ...mponents_img-box_index.md.DYtggkf_.lean.js |   1 +
 .../guide_components_img_emits.md.6237adb4.js |   1 -
 ...e_components_img_emits.md.6237adb4.lean.js |   1 -
 .../guide_components_img_emits.md.BlE7jvZQ.js |   1 +
 ...e_components_img_emits.md.BlE7jvZQ.lean.js |   1 +
 .../guide_components_img_index.md.Bm9FiuU4.js |   1 +
 ...e_components_img_index.md.Bm9FiuU4.lean.js |   1 +
 .../guide_components_img_index.md.fa51a3a1.js |  26 --
 ...e_components_img_index.md.fa51a3a1.lean.js |  26 --
 ...e_components_img_properties.md.8d321b5e.js |   1 -
 ...ponents_img_properties.md.8d321b5e.lean.js |   1 -
 ...e_components_img_properties.md.B42YSocI.js |   1 +
 ...ponents_img_properties.md.B42YSocI.lean.js |   1 +
 ..._infinite-scroll-view_index.md.yAuD807x.js |   6 +
 ...nite-scroll-view_index.md.yAuD807x.lean.js |   1 +
 ...e_components_info-box_emits.md.DlEwpkkq.js |   1 +
 ...ponents_info-box_emits.md.DlEwpkkq.lean.js |   1 +
 ...e_components_info-box_emits.md.c2e71eec.js |   1 -
 ...ponents_info-box_emits.md.c2e71eec.lean.js |   1 -
 ...e_components_info-box_index.md.06175fed.js |  69 ----
 ...ponents_info-box_index.md.06175fed.lean.js |  69 ----
 ...e_components_info-box_index.md.vXh-_DsL.js |  85 +++++
 ...ponents_info-box_index.md.vXh-_DsL.lean.js |   1 +
 ...ponents_info-box_properties.md.314dbb00.js |   1 -
 ...ts_info-box_properties.md.314dbb00.lean.js |   1 -
 ...ponents_info-box_properties.md.BI7Nvk-E.js |   1 +
 ...ts_info-box_properties.md.BI7Nvk-E.lean.js |   1 +
 ..._components_list-view_index.md.BoYvMzb0.js |  35 ++
 ...onents_list-view_index.md.BoYvMzb0.lean.js |   1 +
 ...omponents_menu-flyout_index.md.Csa7irPj.js |  39 +++
 ...ents_menu-flyout_index.md.Csa7irPj.lean.js |   1 +
 ...omponents_message-bar_emits.md.e89a5a22.js |   1 -
 ...ents_message-bar_emits.md.e89a5a22.lean.js |   1 -
 ...omponents_message-bar_index.md.3f0b01d6.js |  91 ------
 ...ents_message-bar_index.md.3f0b01d6.lean.js |  91 ------
 ...omponents_message-bar_index.md.AEtAWlF8.js |  82 +++++
 ...ents_message-bar_index.md.AEtAWlF8.lean.js |   1 +
 ...ents_message-bar_properties.md.ee3838d9.js |   1 -
 ...message-bar_properties.md.ee3838d9.lean.js |   1 -
 ...ents_navigation-panel_index.md.6mO__sSK.js |   8 +
 ...navigation-panel_index.md.6mO__sSK.lean.js |   1 +
 ...nents_navigation-view_index.md.4AQRiz1k.js |  37 +++
 ..._navigation-view_index.md.4AQRiz1k.lean.js |   1 +
 ...components_pagination_emits.md.Dng86A22.js |   1 +
 ...nents_pagination_emits.md.Dng86A22.lean.js |   1 +
 ...components_pagination_index.md.CnW2zAht.js |   7 +
 ...nents_pagination_index.md.CnW2zAht.lean.js |   1 +
 ...nents_pagination_properties.md.JUAPvcTL.js |   1 +
 ..._pagination_properties.md.JUAPvcTL.lean.js |   1 +
 ...uide_components_panel_emits.md.DG0REDq8.js |   1 +
 ...components_panel_emits.md.DG0REDq8.lean.js |   1 +
 ...uide_components_panel_index.md.CsTu0bXo.js |  16 +
 ...components_panel_index.md.CsTu0bXo.lean.js |   1 +
 ...components_panel_properties.md.BaxoCYKq.js |   1 +
 ...nents_panel_properties.md.BaxoCYKq.lean.js |   1 +
 ...de_components_persona_emits.md.CnsDPKRU.js |   1 +
 ...mponents_persona_emits.md.CnsDPKRU.lean.js |   1 +
 ...de_components_persona_index.md.DT00jby4.js |  66 ++++
 ...mponents_persona_index.md.DT00jby4.lean.js |   1 +
 ...mponents_persona_properties.md.DUTPhPMp.js |   1 +
 ...nts_persona_properties.md.DUTPhPMp.lean.js |   1 +
 ...uide_components_pivot_emits.md.BTJPgNpy.js |   1 +
 ...components_pivot_emits.md.BTJPgNpy.lean.js |   1 +
 ...uide_components_pivot_index.md.B_vwQL-5.js |  12 +
 ...components_pivot_index.md.B_vwQL-5.lean.js |   7 +
 ...components_pivot_properties.md.BmoLpPi1.js |   1 +
 ...nents_pivot_properties.md.BmoLpPi1.lean.js |   1 +
 ...mponents_progress-bar_emits.md.5b611e3b.js |   1 -
 ...nts_progress-bar_emits.md.5b611e3b.lean.js |   1 -
 ...mponents_progress-bar_emits.md.BcwXUpsF.js |   1 +
 ...nts_progress-bar_emits.md.BcwXUpsF.lean.js |   1 +
 ...mponents_progress-bar_index.md.689c3241.js |  36 ---
 ...nts_progress-bar_index.md.689c3241.lean.js |  36 ---
 ...mponents_progress-bar_index.md.D8vHQw5V.js |   8 +
 ...nts_progress-bar_index.md.D8vHQw5V.lean.js |   1 +
 ...nts_progress-bar_properties.md.39af7fb2.js |   1 -
 ...rogress-bar_properties.md.39af7fb2.lean.js |   1 -
 ...nts_progress-bar_properties.md.TxiS9ZMA.js |   1 +
 ...rogress-bar_properties.md.TxiS9ZMA.lean.js |   1 +
 ...ponents_progress-ring_emits.md.67e4644e.js |   1 -
 ...ts_progress-ring_emits.md.67e4644e.lean.js |   1 -
 ...ponents_progress-ring_emits.md.D2Y6hIZ9.js |   1 +
 ...ts_progress-ring_emits.md.D2Y6hIZ9.lean.js |   1 +
 ...ponents_progress-ring_index.md.9a33542b.js |  44 ---
 ...ts_progress-ring_index.md.9a33542b.lean.js |  44 ---
 ...ponents_progress-ring_index.md.CPb-ZEPE.js |  27 ++
 ...ts_progress-ring_index.md.CPb-ZEPE.lean.js |   1 +
 ...ts_progress-ring_properties.md.Dc08Uiff.js |   1 +
 ...ogress-ring_properties.md.Dc08Uiff.lean.js |   1 +
 ...ts_progress-ring_properties.md.c897c4bb.js |   1 -
 ...ogress-ring_properties.md.c897c4bb.lean.js |   1 -
 ...omponents_radio-group_emits.md.cEDzKVnN.js |   1 +
 ...ents_radio-group_emits.md.cEDzKVnN.lean.js |   1 +
 ...omponents_radio-group_index.md.CVfh3h5H.js |  33 ++
 ...ents_radio-group_index.md.CVfh3h5H.lean.js |   1 +
 ...ents_radio-group_properties.md.BnPxoKsQ.js |   1 +
 ...radio-group_properties.md.BnPxoKsQ.lean.js |   1 +
 ...uide_components_radio_emits.md.28506857.js |   1 -
 ...components_radio_emits.md.28506857.lean.js |   1 -
 ...uide_components_radio_index.md.90as5QGp.js |  26 ++
 ...components_radio_index.md.90as5QGp.lean.js |   1 +
 ...uide_components_radio_index.md.e5a479ce.js |  96 ------
 ...components_radio_index.md.e5a479ce.lean.js |  96 ------
 ...components_radio_properties.md.f8e55d2f.js |   1 -
 ...nents_radio_properties.md.f8e55d2f.lean.js |   1 -
 ...onents_rating-control_emits.md.blvomSeC.js |   1 +
 ...s_rating-control_emits.md.blvomSeC.lean.js |   1 +
 ...onents_rating-control_index.md.Q9l5Lfrr.js |   6 +
 ...s_rating-control_index.md.Q9l5Lfrr.lean.js |   1 +
 ...s_rating-control_properties.md.DKprnl0i.js |   1 +
 ...ing-control_properties.md.DKprnl0i.lean.js |   1 +
 ...ents_reveal-container_index.md.Cut2r4tV.js |   9 +
 ...reveal-container_index.md.Cut2r4tV.lean.js |   9 +
 ...mponents_scroll-story_index.md.Vpgb1HSV.js |   7 +
 ...nts_scroll-story_index.md.Vpgb1HSV.lean.js |   1 +
 ...components_search-box_emits.md.-d9sWNNt.js |   1 +
 ...nents_search-box_emits.md.-d9sWNNt.lean.js |   1 +
 ...components_search-box_index.md.DgkrY0oY.js |  90 ++++++
 ...nents_search-box_index.md.DgkrY0oY.lean.js |   1 +
 ...nents_search-box_properties.md.DEKFfPFw.js |   1 +
 ..._search-box_properties.md.DEKFfPFw.lean.js |   1 +
 ...de_components_shimmer_emits.md.CTMInlI3.js |   1 +
 ...mponents_shimmer_emits.md.CTMInlI3.lean.js |   1 +
 ...de_components_shimmer_index.md.iZlHuTxw.js |  43 +++
 ...mponents_shimmer_index.md.iZlHuTxw.lean.js |   1 +
 ...mponents_shimmer_properties.md.CdkU1o6H.js |   1 +
 ...nts_shimmer_properties.md.CdkU1o6H.lean.js |   1 +
 ...ide_components_slider_index.md.C7zZ2d-W.js |  19 ++
 ...omponents_slider_index.md.C7zZ2d-W.lean.js |   1 +
 ...ponents_swipe-control_index.md.DwrDVPc1.js | 125 ++++++++
 ...ts_swipe-control_index.md.DwrDVPc1.lean.js |   1 +
 .../guide_components_tag_index.md.BhhxkcHn.js |   8 +
 ...e_components_tag_index.md.BhhxkcHn.lean.js |   1 +
 ...e_components_text-box_emits.md.0bf89ef8.js |   1 -
 ...ponents_text-box_emits.md.0bf89ef8.lean.js |   1 -
 ...e_components_text-box_index.md.7ccfc637.js |  69 ----
 ...ponents_text-box_index.md.7ccfc637.lean.js |  69 ----
 ...e_components_text-box_index.md.C5moAPfB.js |   9 +
 ...ponents_text-box_index.md.C5moAPfB.lean.js |   1 +
 ...ponents_text-box_properties.md.aab3a89e.js |   1 -
 ...ts_text-box_properties.md.aab3a89e.lean.js |   1 -
 ...components_text-field_index.md.CXSimJtj.js |   5 +
 ...nents_text-field_index.md.CXSimJtj.lean.js |   1 +
 ...omponents_time-picker_index.md.CQJdRRaG.js |   9 +
 ...ents_time-picker_index.md.CQJdRRaG.lean.js |   9 +
 ...ponents_toggle-switch_emits.md.5146435f.js |   1 -
 ...ts_toggle-switch_emits.md.5146435f.lean.js |   1 -
 ...ponents_toggle-switch_emits.md.CLGzrNut.js |   1 +
 ...ts_toggle-switch_emits.md.CLGzrNut.lean.js |   1 +
 ...ponents_toggle-switch_index.md.61en_q9-.js |   7 +
 ...ts_toggle-switch_index.md.61en_q9-.lean.js |   7 +
 ...ponents_toggle-switch_index.md.8be48081.js |  52 ---
 ...ts_toggle-switch_index.md.8be48081.lean.js |  52 ---
 ...ts_toggle-switch_properties.md.54984c3a.js |   1 -
 ...ggle-switch_properties.md.54984c3a.lean.js |   1 -
 ...ts_toggle-switch_properties.md.tFppK_IS.js |   1 +
 ...ggle-switch_properties.md.tFppK_IS.lean.js |   1 +
 ..._components_tree-view_index.md.CUrwan4q.js | 103 ++++++
 ...onents_tree-view_index.md.CUrwan4q.lean.js |   1 +
 ...components_verify-box_emits.md.DT17Iazx.js |   1 +
 ...nents_verify-box_emits.md.DT17Iazx.lean.js |   1 +
 ...components_verify-box_index.md.DwSB40wR.js |   4 +
 ...nents_verify-box_index.md.DwSB40wR.lean.js |   4 +
 ...nents_verify-box_properties.md.CW6W8fFf.js |   1 +
 ..._verify-box_properties.md.CW6W8fFf.lean.js |   1 +
 ...components_web-window_index.md.Bxc8vEeI.js |  12 +
 ...nents_web-window_index.md.Bxc8vEeI.lean.js |  10 +
 assets/guide_index.md.Bndlt3sL.js             |   1 +
 assets/guide_index.md.Bndlt3sL.lean.js        |   1 +
 assets/guide_index.md.e3dca1d7.js             |   2 -
 assets/guide_index.md.e3dca1d7.lean.js        |   1 -
 assets/index.md.1e9773d5.js                   |   1 -
 assets/index.md.1e9773d5.lean.js              |   1 -
 assets/index.md.MTRqI42u.js                   |   1 +
 assets/index.md.MTRqI42u.lean.js              |   1 +
 assets/inter-cyrillic-ext.0877b0d9.woff2      | Bin 38664 -> 0 bytes
 assets/inter-cyrillic.f8750142.woff2          | Bin 24680 -> 0 bytes
 assets/inter-greek-ext.3e6f6728.woff2         | Bin 16820 -> 0 bytes
 assets/inter-greek.117e1956.woff2             | Bin 31884 -> 0 bytes
 ... inter-italic-cyrillic-ext.5XJwZIOp.woff2} | Bin
 ...2 => inter-italic-cyrillic.D6csxwjC.woff2} | Bin
 ... => inter-italic-greek-ext.CHOfFY1k.woff2} | Bin
 ...off2 => inter-italic-greek.9J96vYpw.woff2} | Bin
 ... => inter-italic-latin-ext.BGcWXLrn.woff2} | Bin
 ...off2 => inter-italic-latin.DbsTr1gm.woff2} | Bin
 ...=> inter-italic-vietnamese.DHNAd7Wr.woff2} | Bin
 assets/inter-latin-ext.7cc429bc.woff2         | Bin 87212 -> 0 bytes
 assets/inter-latin.4fe6132f.woff2             | Bin 61412 -> 0 bytes
 ...> inter-roman-cyrillic-ext.DxP3Awbn.woff2} | Bin
 ...f2 => inter-roman-cyrillic.CMhn1ESj.woff2} | Bin
 ...2 => inter-roman-greek-ext.D0mI3NpI.woff2} | Bin
 ...woff2 => inter-roman-greek.JvnBZ4YD.woff2} | Bin
 ...2 => inter-roman-latin-ext.ZlYT4o7i.woff2} | Bin
 ...woff2 => inter-roman-latin.Bu8hRsVA.woff2} | Bin
 ... => inter-roman-vietnamese.ClpjcLMQ.woff2} | Bin
 assets/inter-vietnamese.2c644a25.woff2        | Bin 11812 -> 0 bytes
 assets/style.0a1d87af.css                     |   1 -
 assets/style.BabQegKX.css                     |   1 +
 guide/components/animated-icon/index.html     |  69 ++++
 guide/components/badge/index.html             |  40 +++
 guide/components/breadcrumb/index.html        |  42 +++
 guide/components/button/emits.html            |  20 --
 guide/components/button/index.html            |  56 +---
 guide/components/button/properties.html       |  20 --
 .../calendar-date-picker/emits.html           |  24 ++
 .../calendar-date-picker/index.html           |  24 ++
 .../calendar-date-picker/properties.html      |  24 ++
 guide/components/calendar-view/index.html     |  24 ++
 guide/components/callout/index.html           |  44 +++
 guide/components/check-box/emits.html         |  20 --
 guide/components/check-box/index.html         |  61 +---
 guide/components/check-box/properties.html    |  20 --
 guide/components/collapse/index.html          |  62 ++++
 guide/components/color-picker/emits.html      |  22 +-
 guide/components/color-picker/index.html      |  28 +-
 guide/components/color-picker/properties.html |  22 +-
 guide/components/combo-box/emits.html         |  22 +-
 guide/components/combo-box/index.html         |  65 ++--
 guide/components/combo-box/properties.html    |  22 +-
 guide/components/combobox/emits.html          |  24 ++
 guide/components/combobox/index.html          |  43 +++
 guide/components/combobox/properties.html     |  24 ++
 guide/components/command-bar/index.html       |  83 +++++
 guide/components/date-picker/index.html       |  49 +++
 guide/components/details-list/index.html      | 303 ++++++++++++++++++
 guide/components/drawer/index.html            |  26 ++
 guide/components/drop-down/emits.html         |  24 ++
 guide/components/drop-down/index.html         |  64 ++++
 guide/components/drop-down/properties.html    |  24 ++
 guide/components/expander/index.html          |  57 ++++
 guide/components/flip-view/emits.html         |  24 ++
 guide/components/flip-view/index.html         |  55 ++++
 guide/components/flip-view/properties.html    |  24 ++
 guide/components/icon-element/emits.html      |  24 ++
 guide/components/icon-element/index.html      |  61 ++++
 guide/components/icon-element/properties.html |  24 ++
 guide/components/image/emits.html             |  24 ++
 guide/components/image/index.html             |  24 ++
 guide/components/image/properties.html        |  24 ++
 guide/components/img-box/index.html           |  24 ++
 guide/components/img/emits.html               |  22 +-
 guide/components/img/index.html               |  46 +--
 guide/components/img/properties.html          |  22 +-
 .../infinite-scroll-view/index.html           |  29 ++
 guide/components/info-box/emits.html          |  22 +-
 guide/components/info-box/index.html          | 167 +++++-----
 guide/components/info-box/properties.html     |  22 +-
 guide/components/list-view/index.html         |  58 ++++
 guide/components/menu-flyout/index.html       |  62 ++++
 guide/components/message-bar/emits.html       |  20 --
 guide/components/message-bar/index.html       | 188 ++++++-----
 guide/components/message-bar/properties.html  |  20 --
 guide/components/navigation-panel/index.html  |  31 ++
 guide/components/navigation-view/index.html   |  60 ++++
 guide/components/pagination/emits.html        |  24 ++
 guide/components/pagination/index.html        |  30 ++
 guide/components/pagination/properties.html   |  24 ++
 guide/components/panel/emits.html             |  24 ++
 guide/components/panel/index.html             |  39 +++
 guide/components/panel/properties.html        |  24 ++
 guide/components/persona/emits.html           |  24 ++
 guide/components/persona/index.html           |  89 +++++
 guide/components/persona/properties.html      |  24 ++
 guide/components/pivot/emits.html             |  24 ++
 guide/components/pivot/index.html             |  29 ++
 guide/components/pivot/properties.html        |  24 ++
 guide/components/progress-bar/emits.html      |  22 +-
 guide/components/progress-bar/index.html      |  63 ++--
 guide/components/progress-bar/properties.html |  22 +-
 guide/components/progress-ring/emits.html     |  22 +-
 guide/components/progress-ring/index.html     |  90 +++---
 .../components/progress-ring/properties.html  |  22 +-
 guide/components/radio-group/emits.html       |  24 ++
 guide/components/radio-group/index.html       |  56 ++++
 guide/components/radio-group/properties.html  |  24 ++
 guide/components/radio/emits.html             |  20 --
 guide/components/radio/index.html             | 139 +++-----
 guide/components/radio/properties.html        |  20 --
 guide/components/rating-control/emits.html    |  24 ++
 guide/components/rating-control/index.html    |  29 ++
 .../components/rating-control/properties.html |  24 ++
 guide/components/reveal-container/index.html  |  33 ++
 guide/components/scroll-story/index.html      |  30 ++
 guide/components/search-box/emits.html        |  24 ++
 guide/components/search-box/index.html        | 113 +++++++
 guide/components/search-box/properties.html   |  24 ++
 guide/components/shimmer/emits.html           |  24 ++
 guide/components/shimmer/index.html           |  66 ++++
 guide/components/shimmer/properties.html      |  24 ++
 guide/components/slider/index.html            |  42 +++
 guide/components/swipe-control/index.html     | 148 +++++++++
 guide/components/tag/index.html               |  31 ++
 guide/components/text-box/emits.html          |  20 --
 guide/components/text-box/index.html          |  77 ++---
 guide/components/text-box/properties.html     |  20 --
 guide/components/text-field/index.html        |  28 ++
 guide/components/time-picker/index.html       |  24 ++
 guide/components/toggle-switch/emits.html     |  22 +-
 guide/components/toggle-switch/index.html     |  72 +----
 .../components/toggle-switch/properties.html  |  22 +-
 guide/components/tree-view/index.html         | 126 ++++++++
 guide/components/verify-box/emits.html        |  24 ++
 guide/components/verify-box/index.html        |  24 ++
 guide/components/verify-box/properties.html   |  24 ++
 guide/components/web-window/index.html        |  26 ++
 guide/index.html                              |  21 +-
 hashmap.json                                  |   2 +-
 index.html                                    |  20 +-
 416 files changed, 5592 insertions(+), 2242 deletions(-)
 rename assets/{Segoe-Fluent-Icons.1e8b3a65.woff => Segoe-Fluent-Icons.Cum4Jb-a.woff} (100%)
 create mode 100644 assets/app.CSutcJ2E.js
 delete mode 100644 assets/app.d60fa8c3.js
 create mode 100644 assets/chunks/framework.DvIFzl91.js
 delete mode 100644 assets/chunks/index.9dba9c16.js
 create mode 100644 assets/chunks/index.CvzShnhD.js
 create mode 100644 assets/chunks/theme.CgqFBnN_.js
 rename assets/{fabricmdl2icons-3.54.c196bd11.woff => fabricmdl2icons-3.54.D1Viihrr.woff} (100%)
 create mode 100644 assets/guide_components_animated-icon_index.md.yZDMzCFe.js
 create mode 100644 assets/guide_components_animated-icon_index.md.yZDMzCFe.lean.js
 create mode 100644 assets/guide_components_badge_index.md.Bb4crrJn.js
 create mode 100644 assets/guide_components_badge_index.md.Bb4crrJn.lean.js
 create mode 100644 assets/guide_components_breadcrumb_index.md.DyDm7PeP.js
 create mode 100644 assets/guide_components_breadcrumb_index.md.DyDm7PeP.lean.js
 delete mode 100644 assets/guide_components_button_emits.md.d682bf18.js
 delete mode 100644 assets/guide_components_button_emits.md.d682bf18.lean.js
 delete mode 100644 assets/guide_components_button_index.md.23a8eb54.js
 delete mode 100644 assets/guide_components_button_index.md.23a8eb54.lean.js
 create mode 100644 assets/guide_components_button_index.md.7sqT2MQP.js
 create mode 100644 assets/guide_components_button_index.md.7sqT2MQP.lean.js
 delete mode 100644 assets/guide_components_button_properties.md.cd4004b6.js
 delete mode 100644 assets/guide_components_button_properties.md.cd4004b6.lean.js
 create mode 100644 assets/guide_components_calendar-date-picker_emits.md.D5OkfR8j.js
 create mode 100644 assets/guide_components_calendar-date-picker_emits.md.D5OkfR8j.lean.js
 create mode 100644 assets/guide_components_calendar-date-picker_index.md.BdHjrurh.js
 create mode 100644 assets/guide_components_calendar-date-picker_index.md.BdHjrurh.lean.js
 create mode 100644 assets/guide_components_calendar-date-picker_properties.md.DXRjmMG8.js
 create mode 100644 assets/guide_components_calendar-date-picker_properties.md.DXRjmMG8.lean.js
 create mode 100644 assets/guide_components_calendar-view_index.md.zdoRYVx1.js
 create mode 100644 assets/guide_components_calendar-view_index.md.zdoRYVx1.lean.js
 create mode 100644 assets/guide_components_callout_index.md.D9RU33w6.js
 create mode 100644 assets/guide_components_callout_index.md.D9RU33w6.lean.js
 delete mode 100644 assets/guide_components_check-box_emits.md.31609794.js
 delete mode 100644 assets/guide_components_check-box_emits.md.31609794.lean.js
 delete mode 100644 assets/guide_components_check-box_index.md.32046814.js
 delete mode 100644 assets/guide_components_check-box_index.md.32046814.lean.js
 create mode 100644 assets/guide_components_check-box_index.md.FYgdu4oq.js
 create mode 100644 assets/guide_components_check-box_index.md.FYgdu4oq.lean.js
 delete mode 100644 assets/guide_components_check-box_properties.md.8f33ac0c.js
 delete mode 100644 assets/guide_components_check-box_properties.md.8f33ac0c.lean.js
 create mode 100644 assets/guide_components_collapse_index.md.N9Iu5-2v.js
 create mode 100644 assets/guide_components_collapse_index.md.N9Iu5-2v.lean.js
 delete mode 100644 assets/guide_components_color-picker_emits.md.00983cd0.js
 delete mode 100644 assets/guide_components_color-picker_emits.md.00983cd0.lean.js
 create mode 100644 assets/guide_components_color-picker_emits.md.BHDXVtBQ.js
 create mode 100644 assets/guide_components_color-picker_emits.md.BHDXVtBQ.lean.js
 create mode 100644 assets/guide_components_color-picker_index.md.DCc4ixcU.js
 create mode 100644 assets/guide_components_color-picker_index.md.DCc4ixcU.lean.js
 delete mode 100644 assets/guide_components_color-picker_index.md.b2d62612.js
 delete mode 100644 assets/guide_components_color-picker_index.md.b2d62612.lean.js
 delete mode 100644 assets/guide_components_color-picker_properties.md.5466ba72.js
 delete mode 100644 assets/guide_components_color-picker_properties.md.5466ba72.lean.js
 create mode 100644 assets/guide_components_color-picker_properties.md.wcXK29Vl.js
 create mode 100644 assets/guide_components_color-picker_properties.md.wcXK29Vl.lean.js
 create mode 100644 assets/guide_components_combo-box_emits.md.Dh5R-qEv.js
 create mode 100644 assets/guide_components_combo-box_emits.md.Dh5R-qEv.lean.js
 delete mode 100644 assets/guide_components_combo-box_emits.md.d5ffda50.js
 delete mode 100644 assets/guide_components_combo-box_emits.md.d5ffda50.lean.js
 delete mode 100644 assets/guide_components_combo-box_index.md.1c4364f5.js
 delete mode 100644 assets/guide_components_combo-box_index.md.1c4364f5.lean.js
 create mode 100644 assets/guide_components_combo-box_index.md.DTyu3eNd.js
 create mode 100644 assets/guide_components_combo-box_index.md.DTyu3eNd.lean.js
 delete mode 100644 assets/guide_components_combo-box_properties.md.2e1d6060.js
 delete mode 100644 assets/guide_components_combo-box_properties.md.2e1d6060.lean.js
 create mode 100644 assets/guide_components_combo-box_properties.md.AWfHzV6x.js
 create mode 100644 assets/guide_components_combo-box_properties.md.AWfHzV6x.lean.js
 create mode 100644 assets/guide_components_combobox_emits.md.CGB6WLt8.js
 create mode 100644 assets/guide_components_combobox_emits.md.CGB6WLt8.lean.js
 create mode 100644 assets/guide_components_combobox_index.md.CsPkY6YB.js
 create mode 100644 assets/guide_components_combobox_index.md.CsPkY6YB.lean.js
 create mode 100644 assets/guide_components_combobox_properties.md.Bja0hMou.js
 create mode 100644 assets/guide_components_combobox_properties.md.Bja0hMou.lean.js
 create mode 100644 assets/guide_components_command-bar_index.md.Cp4_rrGB.js
 create mode 100644 assets/guide_components_command-bar_index.md.Cp4_rrGB.lean.js
 create mode 100644 assets/guide_components_date-picker_index.md.12vmUIup.js
 create mode 100644 assets/guide_components_date-picker_index.md.12vmUIup.lean.js
 create mode 100644 assets/guide_components_details-list_index.md.CcgOCIyt.js
 create mode 100644 assets/guide_components_details-list_index.md.CcgOCIyt.lean.js
 create mode 100644 assets/guide_components_drawer_index.md.D_vpnCpE.js
 create mode 100644 assets/guide_components_drawer_index.md.D_vpnCpE.lean.js
 create mode 100644 assets/guide_components_drop-down_emits.md.BE95TdKW.js
 create mode 100644 assets/guide_components_drop-down_emits.md.BE95TdKW.lean.js
 create mode 100644 assets/guide_components_drop-down_index.md.BZzJZQWq.js
 create mode 100644 assets/guide_components_drop-down_index.md.BZzJZQWq.lean.js
 create mode 100644 assets/guide_components_drop-down_properties.md.Bwlkpr1q.js
 create mode 100644 assets/guide_components_drop-down_properties.md.Bwlkpr1q.lean.js
 create mode 100644 assets/guide_components_expander_index.md.BKgcUJzQ.js
 create mode 100644 assets/guide_components_expander_index.md.BKgcUJzQ.lean.js
 create mode 100644 assets/guide_components_flip-view_emits.md.DCheHjDj.js
 create mode 100644 assets/guide_components_flip-view_emits.md.DCheHjDj.lean.js
 create mode 100644 assets/guide_components_flip-view_index.md.DefnDOv6.js
 create mode 100644 assets/guide_components_flip-view_index.md.DefnDOv6.lean.js
 create mode 100644 assets/guide_components_flip-view_properties.md.BqZ4hhgU.js
 create mode 100644 assets/guide_components_flip-view_properties.md.BqZ4hhgU.lean.js
 create mode 100644 assets/guide_components_icon-element_emits.md.D5TXFdTZ.js
 create mode 100644 assets/guide_components_icon-element_emits.md.D5TXFdTZ.lean.js
 create mode 100644 assets/guide_components_icon-element_index.md.DQ8K7JNn.js
 create mode 100644 assets/guide_components_icon-element_index.md.DQ8K7JNn.lean.js
 create mode 100644 assets/guide_components_icon-element_properties.md.8Oakruwc.js
 create mode 100644 assets/guide_components_icon-element_properties.md.8Oakruwc.lean.js
 create mode 100644 assets/guide_components_image_emits.md.lmlz2xJd.js
 create mode 100644 assets/guide_components_image_emits.md.lmlz2xJd.lean.js
 create mode 100644 assets/guide_components_image_index.md.B7X6cWAZ.js
 create mode 100644 assets/guide_components_image_index.md.B7X6cWAZ.lean.js
 create mode 100644 assets/guide_components_image_properties.md.DGanRzCb.js
 create mode 100644 assets/guide_components_image_properties.md.DGanRzCb.lean.js
 create mode 100644 assets/guide_components_img-box_index.md.DYtggkf_.js
 create mode 100644 assets/guide_components_img-box_index.md.DYtggkf_.lean.js
 delete mode 100644 assets/guide_components_img_emits.md.6237adb4.js
 delete mode 100644 assets/guide_components_img_emits.md.6237adb4.lean.js
 create mode 100644 assets/guide_components_img_emits.md.BlE7jvZQ.js
 create mode 100644 assets/guide_components_img_emits.md.BlE7jvZQ.lean.js
 create mode 100644 assets/guide_components_img_index.md.Bm9FiuU4.js
 create mode 100644 assets/guide_components_img_index.md.Bm9FiuU4.lean.js
 delete mode 100644 assets/guide_components_img_index.md.fa51a3a1.js
 delete mode 100644 assets/guide_components_img_index.md.fa51a3a1.lean.js
 delete mode 100644 assets/guide_components_img_properties.md.8d321b5e.js
 delete mode 100644 assets/guide_components_img_properties.md.8d321b5e.lean.js
 create mode 100644 assets/guide_components_img_properties.md.B42YSocI.js
 create mode 100644 assets/guide_components_img_properties.md.B42YSocI.lean.js
 create mode 100644 assets/guide_components_infinite-scroll-view_index.md.yAuD807x.js
 create mode 100644 assets/guide_components_infinite-scroll-view_index.md.yAuD807x.lean.js
 create mode 100644 assets/guide_components_info-box_emits.md.DlEwpkkq.js
 create mode 100644 assets/guide_components_info-box_emits.md.DlEwpkkq.lean.js
 delete mode 100644 assets/guide_components_info-box_emits.md.c2e71eec.js
 delete mode 100644 assets/guide_components_info-box_emits.md.c2e71eec.lean.js
 delete mode 100644 assets/guide_components_info-box_index.md.06175fed.js
 delete mode 100644 assets/guide_components_info-box_index.md.06175fed.lean.js
 create mode 100644 assets/guide_components_info-box_index.md.vXh-_DsL.js
 create mode 100644 assets/guide_components_info-box_index.md.vXh-_DsL.lean.js
 delete mode 100644 assets/guide_components_info-box_properties.md.314dbb00.js
 delete mode 100644 assets/guide_components_info-box_properties.md.314dbb00.lean.js
 create mode 100644 assets/guide_components_info-box_properties.md.BI7Nvk-E.js
 create mode 100644 assets/guide_components_info-box_properties.md.BI7Nvk-E.lean.js
 create mode 100644 assets/guide_components_list-view_index.md.BoYvMzb0.js
 create mode 100644 assets/guide_components_list-view_index.md.BoYvMzb0.lean.js
 create mode 100644 assets/guide_components_menu-flyout_index.md.Csa7irPj.js
 create mode 100644 assets/guide_components_menu-flyout_index.md.Csa7irPj.lean.js
 delete mode 100644 assets/guide_components_message-bar_emits.md.e89a5a22.js
 delete mode 100644 assets/guide_components_message-bar_emits.md.e89a5a22.lean.js
 delete mode 100644 assets/guide_components_message-bar_index.md.3f0b01d6.js
 delete mode 100644 assets/guide_components_message-bar_index.md.3f0b01d6.lean.js
 create mode 100644 assets/guide_components_message-bar_index.md.AEtAWlF8.js
 create mode 100644 assets/guide_components_message-bar_index.md.AEtAWlF8.lean.js
 delete mode 100644 assets/guide_components_message-bar_properties.md.ee3838d9.js
 delete mode 100644 assets/guide_components_message-bar_properties.md.ee3838d9.lean.js
 create mode 100644 assets/guide_components_navigation-panel_index.md.6mO__sSK.js
 create mode 100644 assets/guide_components_navigation-panel_index.md.6mO__sSK.lean.js
 create mode 100644 assets/guide_components_navigation-view_index.md.4AQRiz1k.js
 create mode 100644 assets/guide_components_navigation-view_index.md.4AQRiz1k.lean.js
 create mode 100644 assets/guide_components_pagination_emits.md.Dng86A22.js
 create mode 100644 assets/guide_components_pagination_emits.md.Dng86A22.lean.js
 create mode 100644 assets/guide_components_pagination_index.md.CnW2zAht.js
 create mode 100644 assets/guide_components_pagination_index.md.CnW2zAht.lean.js
 create mode 100644 assets/guide_components_pagination_properties.md.JUAPvcTL.js
 create mode 100644 assets/guide_components_pagination_properties.md.JUAPvcTL.lean.js
 create mode 100644 assets/guide_components_panel_emits.md.DG0REDq8.js
 create mode 100644 assets/guide_components_panel_emits.md.DG0REDq8.lean.js
 create mode 100644 assets/guide_components_panel_index.md.CsTu0bXo.js
 create mode 100644 assets/guide_components_panel_index.md.CsTu0bXo.lean.js
 create mode 100644 assets/guide_components_panel_properties.md.BaxoCYKq.js
 create mode 100644 assets/guide_components_panel_properties.md.BaxoCYKq.lean.js
 create mode 100644 assets/guide_components_persona_emits.md.CnsDPKRU.js
 create mode 100644 assets/guide_components_persona_emits.md.CnsDPKRU.lean.js
 create mode 100644 assets/guide_components_persona_index.md.DT00jby4.js
 create mode 100644 assets/guide_components_persona_index.md.DT00jby4.lean.js
 create mode 100644 assets/guide_components_persona_properties.md.DUTPhPMp.js
 create mode 100644 assets/guide_components_persona_properties.md.DUTPhPMp.lean.js
 create mode 100644 assets/guide_components_pivot_emits.md.BTJPgNpy.js
 create mode 100644 assets/guide_components_pivot_emits.md.BTJPgNpy.lean.js
 create mode 100644 assets/guide_components_pivot_index.md.B_vwQL-5.js
 create mode 100644 assets/guide_components_pivot_index.md.B_vwQL-5.lean.js
 create mode 100644 assets/guide_components_pivot_properties.md.BmoLpPi1.js
 create mode 100644 assets/guide_components_pivot_properties.md.BmoLpPi1.lean.js
 delete mode 100644 assets/guide_components_progress-bar_emits.md.5b611e3b.js
 delete mode 100644 assets/guide_components_progress-bar_emits.md.5b611e3b.lean.js
 create mode 100644 assets/guide_components_progress-bar_emits.md.BcwXUpsF.js
 create mode 100644 assets/guide_components_progress-bar_emits.md.BcwXUpsF.lean.js
 delete mode 100644 assets/guide_components_progress-bar_index.md.689c3241.js
 delete mode 100644 assets/guide_components_progress-bar_index.md.689c3241.lean.js
 create mode 100644 assets/guide_components_progress-bar_index.md.D8vHQw5V.js
 create mode 100644 assets/guide_components_progress-bar_index.md.D8vHQw5V.lean.js
 delete mode 100644 assets/guide_components_progress-bar_properties.md.39af7fb2.js
 delete mode 100644 assets/guide_components_progress-bar_properties.md.39af7fb2.lean.js
 create mode 100644 assets/guide_components_progress-bar_properties.md.TxiS9ZMA.js
 create mode 100644 assets/guide_components_progress-bar_properties.md.TxiS9ZMA.lean.js
 delete mode 100644 assets/guide_components_progress-ring_emits.md.67e4644e.js
 delete mode 100644 assets/guide_components_progress-ring_emits.md.67e4644e.lean.js
 create mode 100644 assets/guide_components_progress-ring_emits.md.D2Y6hIZ9.js
 create mode 100644 assets/guide_components_progress-ring_emits.md.D2Y6hIZ9.lean.js
 delete mode 100644 assets/guide_components_progress-ring_index.md.9a33542b.js
 delete mode 100644 assets/guide_components_progress-ring_index.md.9a33542b.lean.js
 create mode 100644 assets/guide_components_progress-ring_index.md.CPb-ZEPE.js
 create mode 100644 assets/guide_components_progress-ring_index.md.CPb-ZEPE.lean.js
 create mode 100644 assets/guide_components_progress-ring_properties.md.Dc08Uiff.js
 create mode 100644 assets/guide_components_progress-ring_properties.md.Dc08Uiff.lean.js
 delete mode 100644 assets/guide_components_progress-ring_properties.md.c897c4bb.js
 delete mode 100644 assets/guide_components_progress-ring_properties.md.c897c4bb.lean.js
 create mode 100644 assets/guide_components_radio-group_emits.md.cEDzKVnN.js
 create mode 100644 assets/guide_components_radio-group_emits.md.cEDzKVnN.lean.js
 create mode 100644 assets/guide_components_radio-group_index.md.CVfh3h5H.js
 create mode 100644 assets/guide_components_radio-group_index.md.CVfh3h5H.lean.js
 create mode 100644 assets/guide_components_radio-group_properties.md.BnPxoKsQ.js
 create mode 100644 assets/guide_components_radio-group_properties.md.BnPxoKsQ.lean.js
 delete mode 100644 assets/guide_components_radio_emits.md.28506857.js
 delete mode 100644 assets/guide_components_radio_emits.md.28506857.lean.js
 create mode 100644 assets/guide_components_radio_index.md.90as5QGp.js
 create mode 100644 assets/guide_components_radio_index.md.90as5QGp.lean.js
 delete mode 100644 assets/guide_components_radio_index.md.e5a479ce.js
 delete mode 100644 assets/guide_components_radio_index.md.e5a479ce.lean.js
 delete mode 100644 assets/guide_components_radio_properties.md.f8e55d2f.js
 delete mode 100644 assets/guide_components_radio_properties.md.f8e55d2f.lean.js
 create mode 100644 assets/guide_components_rating-control_emits.md.blvomSeC.js
 create mode 100644 assets/guide_components_rating-control_emits.md.blvomSeC.lean.js
 create mode 100644 assets/guide_components_rating-control_index.md.Q9l5Lfrr.js
 create mode 100644 assets/guide_components_rating-control_index.md.Q9l5Lfrr.lean.js
 create mode 100644 assets/guide_components_rating-control_properties.md.DKprnl0i.js
 create mode 100644 assets/guide_components_rating-control_properties.md.DKprnl0i.lean.js
 create mode 100644 assets/guide_components_reveal-container_index.md.Cut2r4tV.js
 create mode 100644 assets/guide_components_reveal-container_index.md.Cut2r4tV.lean.js
 create mode 100644 assets/guide_components_scroll-story_index.md.Vpgb1HSV.js
 create mode 100644 assets/guide_components_scroll-story_index.md.Vpgb1HSV.lean.js
 create mode 100644 assets/guide_components_search-box_emits.md.-d9sWNNt.js
 create mode 100644 assets/guide_components_search-box_emits.md.-d9sWNNt.lean.js
 create mode 100644 assets/guide_components_search-box_index.md.DgkrY0oY.js
 create mode 100644 assets/guide_components_search-box_index.md.DgkrY0oY.lean.js
 create mode 100644 assets/guide_components_search-box_properties.md.DEKFfPFw.js
 create mode 100644 assets/guide_components_search-box_properties.md.DEKFfPFw.lean.js
 create mode 100644 assets/guide_components_shimmer_emits.md.CTMInlI3.js
 create mode 100644 assets/guide_components_shimmer_emits.md.CTMInlI3.lean.js
 create mode 100644 assets/guide_components_shimmer_index.md.iZlHuTxw.js
 create mode 100644 assets/guide_components_shimmer_index.md.iZlHuTxw.lean.js
 create mode 100644 assets/guide_components_shimmer_properties.md.CdkU1o6H.js
 create mode 100644 assets/guide_components_shimmer_properties.md.CdkU1o6H.lean.js
 create mode 100644 assets/guide_components_slider_index.md.C7zZ2d-W.js
 create mode 100644 assets/guide_components_slider_index.md.C7zZ2d-W.lean.js
 create mode 100644 assets/guide_components_swipe-control_index.md.DwrDVPc1.js
 create mode 100644 assets/guide_components_swipe-control_index.md.DwrDVPc1.lean.js
 create mode 100644 assets/guide_components_tag_index.md.BhhxkcHn.js
 create mode 100644 assets/guide_components_tag_index.md.BhhxkcHn.lean.js
 delete mode 100644 assets/guide_components_text-box_emits.md.0bf89ef8.js
 delete mode 100644 assets/guide_components_text-box_emits.md.0bf89ef8.lean.js
 delete mode 100644 assets/guide_components_text-box_index.md.7ccfc637.js
 delete mode 100644 assets/guide_components_text-box_index.md.7ccfc637.lean.js
 create mode 100644 assets/guide_components_text-box_index.md.C5moAPfB.js
 create mode 100644 assets/guide_components_text-box_index.md.C5moAPfB.lean.js
 delete mode 100644 assets/guide_components_text-box_properties.md.aab3a89e.js
 delete mode 100644 assets/guide_components_text-box_properties.md.aab3a89e.lean.js
 create mode 100644 assets/guide_components_text-field_index.md.CXSimJtj.js
 create mode 100644 assets/guide_components_text-field_index.md.CXSimJtj.lean.js
 create mode 100644 assets/guide_components_time-picker_index.md.CQJdRRaG.js
 create mode 100644 assets/guide_components_time-picker_index.md.CQJdRRaG.lean.js
 delete mode 100644 assets/guide_components_toggle-switch_emits.md.5146435f.js
 delete mode 100644 assets/guide_components_toggle-switch_emits.md.5146435f.lean.js
 create mode 100644 assets/guide_components_toggle-switch_emits.md.CLGzrNut.js
 create mode 100644 assets/guide_components_toggle-switch_emits.md.CLGzrNut.lean.js
 create mode 100644 assets/guide_components_toggle-switch_index.md.61en_q9-.js
 create mode 100644 assets/guide_components_toggle-switch_index.md.61en_q9-.lean.js
 delete mode 100644 assets/guide_components_toggle-switch_index.md.8be48081.js
 delete mode 100644 assets/guide_components_toggle-switch_index.md.8be48081.lean.js
 delete mode 100644 assets/guide_components_toggle-switch_properties.md.54984c3a.js
 delete mode 100644 assets/guide_components_toggle-switch_properties.md.54984c3a.lean.js
 create mode 100644 assets/guide_components_toggle-switch_properties.md.tFppK_IS.js
 create mode 100644 assets/guide_components_toggle-switch_properties.md.tFppK_IS.lean.js
 create mode 100644 assets/guide_components_tree-view_index.md.CUrwan4q.js
 create mode 100644 assets/guide_components_tree-view_index.md.CUrwan4q.lean.js
 create mode 100644 assets/guide_components_verify-box_emits.md.DT17Iazx.js
 create mode 100644 assets/guide_components_verify-box_emits.md.DT17Iazx.lean.js
 create mode 100644 assets/guide_components_verify-box_index.md.DwSB40wR.js
 create mode 100644 assets/guide_components_verify-box_index.md.DwSB40wR.lean.js
 create mode 100644 assets/guide_components_verify-box_properties.md.CW6W8fFf.js
 create mode 100644 assets/guide_components_verify-box_properties.md.CW6W8fFf.lean.js
 create mode 100644 assets/guide_components_web-window_index.md.Bxc8vEeI.js
 create mode 100644 assets/guide_components_web-window_index.md.Bxc8vEeI.lean.js
 create mode 100644 assets/guide_index.md.Bndlt3sL.js
 create mode 100644 assets/guide_index.md.Bndlt3sL.lean.js
 delete mode 100644 assets/guide_index.md.e3dca1d7.js
 delete mode 100644 assets/guide_index.md.e3dca1d7.lean.js
 delete mode 100644 assets/index.md.1e9773d5.js
 delete mode 100644 assets/index.md.1e9773d5.lean.js
 create mode 100644 assets/index.md.MTRqI42u.js
 create mode 100644 assets/index.md.MTRqI42u.lean.js
 delete mode 100644 assets/inter-cyrillic-ext.0877b0d9.woff2
 delete mode 100644 assets/inter-cyrillic.f8750142.woff2
 delete mode 100644 assets/inter-greek-ext.3e6f6728.woff2
 delete mode 100644 assets/inter-greek.117e1956.woff2
 rename assets/{inter-italic-cyrillic-ext.33bd5a8e.woff2 => inter-italic-cyrillic-ext.5XJwZIOp.woff2} (100%)
 rename assets/{inter-italic-cyrillic.ea42a392.woff2 => inter-italic-cyrillic.D6csxwjC.woff2} (100%)
 rename assets/{inter-italic-greek-ext.4fbe9427.woff2 => inter-italic-greek-ext.CHOfFY1k.woff2} (100%)
 rename assets/{inter-italic-greek.8f4463c4.woff2 => inter-italic-greek.9J96vYpw.woff2} (100%)
 rename assets/{inter-italic-latin-ext.bd8920cc.woff2 => inter-italic-latin-ext.BGcWXLrn.woff2} (100%)
 rename assets/{inter-italic-latin.bd3b6f56.woff2 => inter-italic-latin.DbsTr1gm.woff2} (100%)
 rename assets/{inter-italic-vietnamese.6ce511fb.woff2 => inter-italic-vietnamese.DHNAd7Wr.woff2} (100%)
 delete mode 100644 assets/inter-latin-ext.7cc429bc.woff2
 delete mode 100644 assets/inter-latin.4fe6132f.woff2
 rename assets/{inter-roman-cyrillic-ext.e75737ce.woff2 => inter-roman-cyrillic-ext.DxP3Awbn.woff2} (100%)
 rename assets/{inter-roman-cyrillic.5f2c6c8c.woff2 => inter-roman-cyrillic.CMhn1ESj.woff2} (100%)
 rename assets/{inter-roman-greek-ext.ab0619bc.woff2 => inter-roman-greek-ext.D0mI3NpI.woff2} (100%)
 rename assets/{inter-roman-greek.d5a6d92a.woff2 => inter-roman-greek.JvnBZ4YD.woff2} (100%)
 rename assets/{inter-roman-latin-ext.0030eebd.woff2 => inter-roman-latin-ext.ZlYT4o7i.woff2} (100%)
 rename assets/{inter-roman-latin.2ed14f66.woff2 => inter-roman-latin.Bu8hRsVA.woff2} (100%)
 rename assets/{inter-roman-vietnamese.14ce25a6.woff2 => inter-roman-vietnamese.ClpjcLMQ.woff2} (100%)
 delete mode 100644 assets/inter-vietnamese.2c644a25.woff2
 delete mode 100644 assets/style.0a1d87af.css
 create mode 100644 assets/style.BabQegKX.css
 create mode 100644 guide/components/animated-icon/index.html
 create mode 100644 guide/components/badge/index.html
 create mode 100644 guide/components/breadcrumb/index.html
 delete mode 100644 guide/components/button/emits.html
 delete mode 100644 guide/components/button/properties.html
 create mode 100644 guide/components/calendar-date-picker/emits.html
 create mode 100644 guide/components/calendar-date-picker/index.html
 create mode 100644 guide/components/calendar-date-picker/properties.html
 create mode 100644 guide/components/calendar-view/index.html
 create mode 100644 guide/components/callout/index.html
 delete mode 100644 guide/components/check-box/emits.html
 delete mode 100644 guide/components/check-box/properties.html
 create mode 100644 guide/components/collapse/index.html
 create mode 100644 guide/components/combobox/emits.html
 create mode 100644 guide/components/combobox/index.html
 create mode 100644 guide/components/combobox/properties.html
 create mode 100644 guide/components/command-bar/index.html
 create mode 100644 guide/components/date-picker/index.html
 create mode 100644 guide/components/details-list/index.html
 create mode 100644 guide/components/drawer/index.html
 create mode 100644 guide/components/drop-down/emits.html
 create mode 100644 guide/components/drop-down/index.html
 create mode 100644 guide/components/drop-down/properties.html
 create mode 100644 guide/components/expander/index.html
 create mode 100644 guide/components/flip-view/emits.html
 create mode 100644 guide/components/flip-view/index.html
 create mode 100644 guide/components/flip-view/properties.html
 create mode 100644 guide/components/icon-element/emits.html
 create mode 100644 guide/components/icon-element/index.html
 create mode 100644 guide/components/icon-element/properties.html
 create mode 100644 guide/components/image/emits.html
 create mode 100644 guide/components/image/index.html
 create mode 100644 guide/components/image/properties.html
 create mode 100644 guide/components/img-box/index.html
 create mode 100644 guide/components/infinite-scroll-view/index.html
 create mode 100644 guide/components/list-view/index.html
 create mode 100644 guide/components/menu-flyout/index.html
 delete mode 100644 guide/components/message-bar/emits.html
 delete mode 100644 guide/components/message-bar/properties.html
 create mode 100644 guide/components/navigation-panel/index.html
 create mode 100644 guide/components/navigation-view/index.html
 create mode 100644 guide/components/pagination/emits.html
 create mode 100644 guide/components/pagination/index.html
 create mode 100644 guide/components/pagination/properties.html
 create mode 100644 guide/components/panel/emits.html
 create mode 100644 guide/components/panel/index.html
 create mode 100644 guide/components/panel/properties.html
 create mode 100644 guide/components/persona/emits.html
 create mode 100644 guide/components/persona/index.html
 create mode 100644 guide/components/persona/properties.html
 create mode 100644 guide/components/pivot/emits.html
 create mode 100644 guide/components/pivot/index.html
 create mode 100644 guide/components/pivot/properties.html
 create mode 100644 guide/components/radio-group/emits.html
 create mode 100644 guide/components/radio-group/index.html
 create mode 100644 guide/components/radio-group/properties.html
 delete mode 100644 guide/components/radio/emits.html
 delete mode 100644 guide/components/radio/properties.html
 create mode 100644 guide/components/rating-control/emits.html
 create mode 100644 guide/components/rating-control/index.html
 create mode 100644 guide/components/rating-control/properties.html
 create mode 100644 guide/components/reveal-container/index.html
 create mode 100644 guide/components/scroll-story/index.html
 create mode 100644 guide/components/search-box/emits.html
 create mode 100644 guide/components/search-box/index.html
 create mode 100644 guide/components/search-box/properties.html
 create mode 100644 guide/components/shimmer/emits.html
 create mode 100644 guide/components/shimmer/index.html
 create mode 100644 guide/components/shimmer/properties.html
 create mode 100644 guide/components/slider/index.html
 create mode 100644 guide/components/swipe-control/index.html
 create mode 100644 guide/components/tag/index.html
 delete mode 100644 guide/components/text-box/emits.html
 delete mode 100644 guide/components/text-box/properties.html
 create mode 100644 guide/components/text-field/index.html
 create mode 100644 guide/components/time-picker/index.html
 create mode 100644 guide/components/tree-view/index.html
 create mode 100644 guide/components/verify-box/emits.html
 create mode 100644 guide/components/verify-box/index.html
 create mode 100644 guide/components/verify-box/properties.html
 create mode 100644 guide/components/web-window/index.html

diff --git a/404.html b/404.html
index 6442675..0fc0df9 100644
--- a/404.html
+++ b/404.html
@@ -1,19 +1,21 @@
 <!DOCTYPE html>
-<html lang="en-US">
+<html lang="en-US" dir="ltr">
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1">
     <title>404 | vfluent3</title>
     <meta name="description" content="Not Found">
-    <link rel="stylesheet" href="/VFluent3/assets/style.0a1d87af.css">
-    <link rel="modulepreload" href="/VFluent3/assets/app.d60fa8c3.js">
+    <meta name="generator" content="VitePress v1.0.0-rc.45">
+    <link rel="preload stylesheet" href="/VFluent3/assets/style.BabQegKX.css" as="style">
     
-    <script>(()=>{const e=localStorage.getItem("vitepress-theme-appearance"),a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script type="module" src="/VFluent3/assets/app.CSutcJ2E.js"></script>
+    <link rel="preload" href="/VFluent3/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
   </head>
   <body>
-    <div id="app"><div class="Layout" data-v-058b7495><!--[--><!--]--><!--[--><span tabindex="-1" data-v-bea91388></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-bea91388> Skip to content </a><!--]--><!----><header class="VPNav" data-v-058b7495 data-v-2a0a2738><div class="VPNavBar has-sidebar" data-v-2a0a2738 data-v-45c9f423><div class="container" data-v-45c9f423><div class="VPNavBarTitle has-sidebar" data-v-45c9f423 data-v-011600ce><a class="title" href="/VFluent3/" data-v-011600ce><!----><!--[-->VFluent3<!--]--></a></div><div class="content" data-v-45c9f423><!----><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-45c9f423 data-v-4da4371d><span id="main-nav-aria-label" class="visually-hidden" data-v-4da4371d>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink active" href="/VFluent3/" data-v-4da4371d data-v-66f8d518 data-v-4d08dd3a><!--[-->Home<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" data-v-4da4371d data-v-66f8d518 data-v-4d08dd3a><!--[-->Guide<!--]--><!----></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-45c9f423 data-v-bf1c94ca><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" data-v-bf1c94ca data-v-d0ee0df2 data-v-55b931a0><span class="check" data-v-55b931a0><span class="icon" data-v-55b931a0><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-d0ee0df2><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-d0ee0df2><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-45c9f423 data-v-7cece6ac data-v-37af1650><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-37af1650><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-37af1650><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-37af1650><div class="VPMenu" data-v-37af1650 data-v-17dc081b><!----><!--[--><!--[--><!----><div class="group" data-v-7cece6ac><div class="item appearance" data-v-7cece6ac><p class="label" data-v-7cece6ac>Appearance</p><div class="appearance-action" data-v-7cece6ac><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" data-v-7cece6ac data-v-d0ee0df2 data-v-55b931a0><span class="check" data-v-55b931a0><span class="icon" data-v-55b931a0><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-d0ee0df2><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-d0ee0df2><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-45c9f423 data-v-5484e669><span class="container" data-v-5484e669><span class="top" data-v-5484e669></span><span class="middle" data-v-5484e669></span><span class="bottom" data-v-5484e669></span></span></button></div></div></div><!----></header><div class="VPLocalNav" data-v-058b7495 data-v-f623cd72><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-f623cd72><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-f623cd72><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-f623cd72>Menu</span></button><a class="top-link" href="#" data-v-f623cd72> Return to top </a></div><aside class="VPSidebar" data-v-058b7495 data-v-3b8ec0c7><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-3b8ec0c7><span class="visually-hidden" id="sidebar-aria-label" data-v-3b8ec0c7> Sidebar Navigation </span><!--[--><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Basic</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/button/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Button</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/check-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>CheckBox</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/radio/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Radio</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/progress-bar/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ProgressBar</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/progress-ring/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ProgressRing</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/toggle-switch/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ToggleSwitch</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/img/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Img</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/text-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>TextBox</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/combo-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ComboBox</span><!--]--><!----></a><!--]--></div></section></div><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Global</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/message-bar/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>MessageBar</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/info-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>InfoBox</span><!--]--><!----></a><!--]--></div></section></div><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Advance</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/color-picker/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ColorPicker</span><!--]--><!----></a><!--]--></div></section></div><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-058b7495 data-v-564173e9><div class="NotFound" data-v-564173e9 data-v-2b75f22f><p class="code" data-v-2b75f22f>404</p><h1 class="title" data-v-2b75f22f>PAGE NOT FOUND</h1><div class="divider" data-v-2b75f22f></div><blockquote class="quote" data-v-2b75f22f> But if you don&#39;t change your direction, and if you keep looking, you may end up where you are heading. </blockquote><div class="action" data-v-2b75f22f><a class="link" href="/VFluent3/" aria-label="go to home" data-v-2b75f22f> Take me home </a></div></div></div><footer class="VPFooter has-sidebar" data-v-058b7495 data-v-a6c8dde4><div class="container" data-v-a6c8dde4><p class="message" data-v-a6c8dde4>MIT Licensed</p><p class="copyright" data-v-a6c8dde4>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
-    <script>__VP_HASH_MAP__ = JSON.parse("{\"guide_components_button_emits.md\":\"d682bf18\",\"guide_components_button_index.md\":\"23a8eb54\",\"guide_components_button_properties.md\":\"cd4004b6\",\"guide_components_check-box_emits.md\":\"31609794\",\"guide_components_check-box_index.md\":\"32046814\",\"guide_components_check-box_properties.md\":\"8f33ac0c\",\"guide_components_color-picker_emits.md\":\"00983cd0\",\"guide_components_color-picker_index.md\":\"b2d62612\",\"guide_components_color-picker_properties.md\":\"5466ba72\",\"guide_components_combo-box_emits.md\":\"d5ffda50\",\"guide_components_combo-box_index.md\":\"1c4364f5\",\"guide_components_combo-box_properties.md\":\"2e1d6060\",\"guide_components_img_emits.md\":\"6237adb4\",\"guide_components_img_index.md\":\"fa51a3a1\",\"guide_components_img_properties.md\":\"8d321b5e\",\"guide_components_info-box_emits.md\":\"c2e71eec\",\"guide_components_info-box_index.md\":\"06175fed\",\"guide_components_info-box_properties.md\":\"314dbb00\",\"guide_components_message-bar_emits.md\":\"e89a5a22\",\"guide_components_message-bar_index.md\":\"3f0b01d6\",\"guide_components_message-bar_properties.md\":\"ee3838d9\",\"guide_components_progress-bar_emits.md\":\"5b611e3b\",\"guide_components_progress-bar_index.md\":\"689c3241\",\"guide_components_progress-bar_properties.md\":\"39af7fb2\",\"guide_components_progress-ring_emits.md\":\"67e4644e\",\"guide_components_progress-ring_index.md\":\"9a33542b\",\"guide_components_progress-ring_properties.md\":\"c897c4bb\",\"guide_components_radio_emits.md\":\"28506857\",\"guide_components_radio_index.md\":\"e5a479ce\",\"guide_components_radio_properties.md\":\"f8e55d2f\",\"guide_components_text-box_emits.md\":\"0bf89ef8\",\"guide_components_text-box_index.md\":\"7ccfc637\",\"guide_components_text-box_properties.md\":\"aab3a89e\",\"guide_components_toggle-switch_emits.md\":\"5146435f\",\"guide_components_toggle-switch_index.md\":\"8be48081\",\"guide_components_toggle-switch_properties.md\":\"54984c3a\",\"guide_index.md\":\"e3dca1d7\",\"index.md\":\"1e9773d5\"}")</script>
-    <script type="module" async src="/VFluent3/assets/app.d60fa8c3.js"></script>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar" data-v-ae24b3ad data-v-19c990f1><div class="wrapper" data-v-19c990f1><div class="container" data-v-19c990f1><div class="title" data-v-19c990f1><div class="VPNavBarTitle" data-v-19c990f1 data-v-ab179fa1><a class="title" href="/VFluent3/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>VFluent3</span><!--[--><!--]--></a></div></div><div class="content" data-v-19c990f1><div class="content-body" data-v-19c990f1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-19c990f1><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-19c990f1 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink active" href="/VFluent3/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Guide</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-19c990f1 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-19c990f1 data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-19c990f1 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-19c990f1><div class="divider-line" data-v-19c990f1></div></div></div><!----></header><div class="VPLocalNav empty fixed" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><!----><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-d2ecc192><button data-v-d2ecc192>Return to top</button><!----></div></div></div><!----><div class="VPContent" id="VPContent" data-v-5d98c3a5 data-v-1428d186><!--[--><div class="NotFound" data-v-1428d186 data-v-f87ff6e4><p class="code" data-v-f87ff6e4>404</p><h1 class="title" data-v-f87ff6e4>PAGE NOT FOUND</h1><div class="divider" data-v-f87ff6e4></div><blockquote class="quote" data-v-f87ff6e4>But if you don&#39;t change your direction, and if you keep looking, you may end up where you are heading.</blockquote><div class="action" data-v-f87ff6e4><a class="link" href="/VFluent3/" aria-label="go to home" data-v-f87ff6e4>Take me home</a></div></div><!--]--></div><footer class="VPFooter" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>MIT Licensed</p><p class="copyright" data-v-e315a0ad>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_calendar-date-picker_properties.md\":\"DXRjmMG8\",\"guide_components_image_properties.md\":\"DGanRzCb\",\"guide_components_img-box_index.md\":\"DYtggkf_\",\"guide_components_img_emits.md\":\"BlE7jvZQ\",\"guide_components_img_index.md\":\"Bm9FiuU4\",\"guide_components_icon-element_properties.md\":\"8Oakruwc\",\"guide_components_img_properties.md\":\"B42YSocI\",\"guide_components_drawer_index.md\":\"D_vpnCpE\",\"guide_components_verify-box_emits.md\":\"DT17Iazx\",\"guide_components_calendar-date-picker_index.md\":\"BdHjrurh\",\"guide_components_rating-control_index.md\":\"Q9l5Lfrr\",\"guide_components_rating-control_properties.md\":\"DKprnl0i\",\"guide_components_calendar-view_index.md\":\"zdoRYVx1\",\"guide_components_animated-icon_index.md\":\"yZDMzCFe\",\"guide_components_calendar-date-picker_emits.md\":\"D5OkfR8j\",\"guide_components_badge_index.md\":\"Bb4crrJn\",\"guide_components_image_index.md\":\"B7X6cWAZ\",\"guide_components_slider_index.md\":\"C7zZ2d-W\",\"guide_components_radio-group_index.md\":\"CVfh3h5H\",\"guide_components_swipe-control_index.md\":\"DwrDVPc1\",\"guide_components_color-picker_emits.md\":\"BHDXVtBQ\",\"guide_components_radio_index.md\":\"90as5QGp\",\"guide_components_pagination_properties.md\":\"JUAPvcTL\",\"guide_components_persona_properties.md\":\"DUTPhPMp\",\"guide_components_combo-box_emits.md\":\"Dh5R-qEv\",\"guide_components_pivot_emits.md\":\"BTJPgNpy\",\"guide_components_pagination_index.md\":\"CnW2zAht\",\"guide_components_flip-view_properties.md\":\"BqZ4hhgU\",\"guide_components_icon-element_emits.md\":\"D5TXFdTZ\",\"guide_components_flip-view_index.md\":\"DefnDOv6\",\"guide_components_navigation-panel_index.md\":\"6mO__sSK\",\"guide_components_rating-control_emits.md\":\"blvomSeC\",\"guide_components_icon-element_index.md\":\"DQ8K7JNn\",\"guide_components_navigation-view_index.md\":\"4AQRiz1k\",\"guide_components_toggle-switch_emits.md\":\"CLGzrNut\",\"guide_components_toggle-switch_index.md\":\"61en_q9-\",\"guide_components_scroll-story_index.md\":\"Vpgb1HSV\",\"guide_components_reveal-container_index.md\":\"Cut2r4tV\",\"guide_components_search-box_emits.md\":\"-d9sWNNt\",\"guide_components_search-box_properties.md\":\"DEKFfPFw\",\"guide_components_shimmer_emits.md\":\"CTMInlI3\",\"guide_components_tag_index.md\":\"BhhxkcHn\",\"guide_components_search-box_index.md\":\"DgkrY0oY\",\"guide_components_shimmer_index.md\":\"iZlHuTxw\",\"guide_components_shimmer_properties.md\":\"CdkU1o6H\",\"guide_components_tree-view_index.md\":\"CUrwan4q\",\"guide_components_text-field_index.md\":\"CXSimJtj\",\"guide_components_text-box_index.md\":\"C5moAPfB\",\"guide_components_progress-ring_properties.md\":\"Dc08Uiff\",\"guide_components_toggle-switch_properties.md\":\"tFppK_IS\",\"guide_components_radio-group_emits.md\":\"cEDzKVnN\",\"guide_components_collapse_index.md\":\"N9Iu5-2v\",\"guide_components_image_emits.md\":\"lmlz2xJd\",\"guide_components_callout_index.md\":\"D9RU33w6\",\"guide_components_pivot_index.md\":\"B_vwQL-5\",\"guide_components_command-bar_index.md\":\"Cp4_rrGB\",\"guide_components_pagination_emits.md\":\"Dng86A22\",\"guide_components_button_index.md\":\"7sqT2MQP\",\"guide_components_info-box_properties.md\":\"BI7Nvk-E\",\"guide_components_drop-down_emits.md\":\"BE95TdKW\",\"guide_components_expander_index.md\":\"BKgcUJzQ\",\"guide_components_message-bar_index.md\":\"AEtAWlF8\",\"guide_components_menu-flyout_index.md\":\"Csa7irPj\",\"guide_components_panel_index.md\":\"CsTu0bXo\",\"guide_components_panel_properties.md\":\"BaxoCYKq\",\"guide_components_progress-bar_emits.md\":\"BcwXUpsF\",\"guide_components_progress-bar_properties.md\":\"TxiS9ZMA\",\"guide_components_progress-ring_emits.md\":\"D2Y6hIZ9\",\"guide_components_color-picker_index.md\":\"DCc4ixcU\",\"guide_components_progress-ring_index.md\":\"CPb-ZEPE\",\"guide_components_color-picker_properties.md\":\"wcXK29Vl\",\"guide_components_time-picker_index.md\":\"CQJdRRaG\",\"guide_components_drop-down_properties.md\":\"Bwlkpr1q\",\"guide_components_infinite-scroll-view_index.md\":\"yAuD807x\",\"guide_components_check-box_index.md\":\"FYgdu4oq\",\"guide_components_progress-bar_index.md\":\"D8vHQw5V\",\"guide_components_combo-box_index.md\":\"DTyu3eNd\",\"guide_components_info-box_emits.md\":\"DlEwpkkq\",\"guide_components_drop-down_index.md\":\"BZzJZQWq\",\"guide_components_list-view_index.md\":\"BoYvMzb0\",\"guide_components_verify-box_properties.md\":\"CW6W8fFf\",\"guide_components_verify-box_index.md\":\"DwSB40wR\",\"guide_index.md\":\"Bndlt3sL\",\"guide_components_web-window_index.md\":\"Bxc8vEeI\",\"index.md\":\"MTRqI42u\",\"guide_components_combo-box_properties.md\":\"AWfHzV6x\",\"guide_components_combobox_emits.md\":\"CGB6WLt8\",\"guide_components_combobox_properties.md\":\"Bja0hMou\",\"guide_components_details-list_index.md\":\"CcgOCIyt\",\"guide_components_info-box_index.md\":\"vXh-_DsL\",\"guide_components_combobox_index.md\":\"CsPkY6YB\",\"guide_components_date-picker_index.md\":\"12vmUIup\",\"guide_components_flip-view_emits.md\":\"DCheHjDj\",\"guide_components_panel_emits.md\":\"DG0REDq8\",\"guide_components_breadcrumb_index.md\":\"DyDm7PeP\",\"guide_components_radio-group_properties.md\":\"BnPxoKsQ\",\"guide_components_persona_emits.md\":\"CnsDPKRU\",\"guide_components_pivot_properties.md\":\"BmoLpPi1\",\"guide_components_persona_index.md\":\"DT00jby4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vfluent3\",\"description\":\"A Vue3 component library for Fluent UI\",\"base\":\"/VFluent3/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"VFluent3\",\"footer\":{\"message\":\"MIT Licensed\",\"copyright\":\"Copyright © Creator SN - 2022\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/\"}],\"sidebar\":[{\"text\":\"Basic input\",\"collapsed\":true,\"items\":[{\"text\":\"Button\",\"link\":\"/guide/components/button/\"},{\"text\":\"CheckBox\",\"link\":\"/guide/components/check-box/\"},{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"},{\"text\":\"Combobox\",\"link\":\"/guide/components/combobox/\"},{\"text\":\"DetailsList\",\"link\":\"/guide/components/details-list/\"},{\"text\":\"DropDown\",\"link\":\"/guide/components/drop-down/\"},{\"text\":\"Radio\",\"link\":\"/guide/components/radio/\"},{\"text\":\"RadioGroup\",\"link\":\"/guide/components/radio-group/\"},{\"text\":\"RatingControl\",\"link\":\"/guide/components/rating-control/\"},{\"text\":\"Slider\",\"link\":\"/guide/components/slider/\"},{\"text\":\"ToggleSwitch\",\"link\":\"/guide/components/toggle-switch/\"},{\"text\":\"Tag\",\"link\":\"/guide/components/tag/\"}]},{\"text\":\"Collections\",\"collapsed\":true,\"items\":[{\"text\":\"FlipView\",\"link\":\"/guide/components/flip-view/\"},{\"text\":\"ListView\",\"link\":\"/guide/components/list-view/\"},{\"text\":\"TreeView\",\"link\":\"/guide/components/tree-view/\"}]},{\"text\":\"Date & Time\",\"collapsed\":true,\"items\":[{\"text\":\"CalendarDatePicker\",\"link\":\"/guide/components/calendar-date-picker/\"},{\"text\":\"CalendarView\",\"link\":\"/guide/components/calendar-view/\"},{\"text\":\"DatePicker\",\"link\":\"/guide/components/date-picker/\"},{\"text\":\"TimePicker\",\"link\":\"/guide/components/time-picker/\"}]},{\"text\":\"Dialogs & flyouts\",\"collapsed\":true,\"items\":[{\"text\":\"Callout\",\"link\":\"/guide/components/callout/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Layout\",\"collapsed\":true,\"items\":[{\"text\":\"Collapse\",\"link\":\"/guide/components/collapse/\"},{\"text\":\"Expander\",\"link\":\"/guide/components/expander/\"},{\"text\":\"Drawer\",\"link\":\"/guide/components/drawer/\"},{\"text\":\"Panel\",\"link\":\"/guide/components/panel/\"}]},{\"text\":\"Media\",\"collapsed\":true,\"items\":[{\"text\":\"Image\",\"link\":\"/guide/components/image/\"},{\"text\":\"Img\",\"link\":\"/guide/components/img/\"},{\"text\":\"ImgBox\",\"link\":\"/guide/components/img-box/\"},{\"text\":\"Persona\",\"link\":\"/guide/components/persona/\"}]},{\"text\":\"Menu & toolbars\",\"collapsed\":true,\"items\":[{\"text\":\"CommandBar\",\"link\":\"/guide/components/command-bar/\"},{\"text\":\"MenuFlyout\",\"link\":\"/guide/components/menu-flyout/\"},{\"text\":\"SwipeControl\",\"link\":\"/guide/components/swipe-control/\"}]},{\"text\":\"Navigation\",\"collapsed\":true,\"items\":[{\"text\":\"Breadcrumb\",\"link\":\"/guide/components/breadcrumb/\"},{\"text\":\"NavigationPanel\",\"link\":\"/guide/components/navigation-panel/\"},{\"text\":\"NavigationView\",\"link\":\"/guide/components/navigation-view/\"},{\"text\":\"Pivot\",\"link\":\"/guide/components/pivot/\"},{\"text\":\"Pagination\",\"link\":\"/guide/components/pagination/\"}]},{\"text\":\"Scrolling\",\"collapsed\":true,\"items\":[{\"text\":\"InfiniteScrollView\",\"link\":\"/guide/components/infinite-scroll-view/\"},{\"text\":\"ScrollStory\",\"link\":\"/guide/components/scroll-story/\"}]},{\"text\":\"Status & info\",\"collapsed\":true,\"items\":[{\"text\":\"Badge\",\"link\":\"/guide/components/badge/\"},{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"ProgressBar\",\"link\":\"/guide/components/progress-bar/\"},{\"text\":\"ProgressRing\",\"link\":\"/guide/components/progress-ring/\"}]},{\"text\":\"Styles\",\"collapsed\":true,\"items\":[{\"text\":\"AnimatedIcon\",\"link\":\"/guide/components/animated-icon/\"},{\"text\":\"IconElement\",\"link\":\"/guide/components/icon-element/\"},{\"text\":\"RevealContainer\",\"link\":\"/guide/components/reveal-container/\"},{\"text\":\"Shimmer\",\"link\":\"/guide/components/shimmer/\"}]},{\"text\":\"Text\",\"collapsed\":true,\"items\":[{\"text\":\"SearchBox\",\"link\":\"/guide/components/search-box/\"},{\"text\":\"TextBox\",\"link\":\"/guide/components/text-box/\"},{\"text\":\"TextField\",\"link\":\"/guide/components/text-field/\"},{\"text\":\"VerifyBox\",\"link\":\"/guide/components/verify-box/\"}]},{\"text\":\"Windowing\",\"collapsed\":true,\"items\":[{\"text\":\"WebWindow\",\"link\":\"/guide/components/web-window/\"}]},{\"text\":\"Global\",\"collapsed\":true,\"items\":[{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Advance\",\"collapsed\":true,\"items\":[{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
     
   </body>
 </html>
\ No newline at end of file
diff --git a/assets/Segoe-Fluent-Icons.1e8b3a65.woff b/assets/Segoe-Fluent-Icons.Cum4Jb-a.woff
similarity index 100%
rename from assets/Segoe-Fluent-Icons.1e8b3a65.woff
rename to assets/Segoe-Fluent-Icons.Cum4Jb-a.woff
diff --git a/assets/app.CSutcJ2E.js b/assets/app.CSutcJ2E.js
new file mode 100644
index 0000000..d4137c3
--- /dev/null
+++ b/assets/app.CSutcJ2E.js
@@ -0,0 +1,7 @@
+function __vite__mapDeps(indexes) {
+  if (!__vite__mapDeps.viteFileDeps) {
+    __vite__mapDeps.viteFileDeps = []
+  }
+  return indexes.map((i) => __vite__mapDeps.viteFileDeps[i])
+}
+import{F as o,ar as p,as as u,at as l,au as c,av as f,aw as d,ax as m,ay as h,az as A,aA as g,aB as v,k as P,B as _,G as w,N as y,aC as C,aD as E,aE as R,l as T}from"./chunks/framework.DvIFzl91.js";import{R as b}from"./chunks/theme.CgqFBnN_.js";function i(e){if(e.extends){const a=i(e.extends);return{...a,...e,async enhanceApp(t){a.enhanceApp&&await a.enhanceApp(t),e.enhanceApp&&await e.enhanceApp(t)}}}return e}const s=i(b),D=P({name:"VitePressApp",setup(){const{site:e,lang:a,dir:t}=_();return w(()=>{y(()=>{document.documentElement.lang=a.value,document.documentElement.dir=t.value})}),e.value.router.prefetchLinks&&C(),E(),R(),s.setup&&s.setup(),()=>T(s.Layout)}});async function S(){globalThis.__VITEPRESS__=!0;const e=F(),a=x();a.provide(u,e);const t=l(e.route);return a.provide(c,t),a.component("Content",f),a.component("ClientOnly",d),Object.defineProperties(a.config.globalProperties,{$frontmatter:{get(){return t.frontmatter.value}},$params:{get(){return t.page.value.params}}}),s.enhanceApp&&await s.enhanceApp({app:a,router:e,siteData:m}),{app:a,router:e,data:t}}function x(){return h(D)}function F(){let e=o,a;return A(t=>{let n=g(t),r=null;return n&&(e&&(a=n),(e||a===n)&&(n=n.replace(/\.js$/,".lean.js")),r=v(()=>import(n),__vite__mapDeps([]))),o&&(e=!1),r},s.NotFound)}o&&S().then(({app:e,router:a,data:t})=>{a.go().then(()=>{p(a.route,t.site),e.mount("#app")})});export{S as createApp};
diff --git a/assets/app.d60fa8c3.js b/assets/app.d60fa8c3.js
deleted file mode 100644
index 7c6230e..0000000
--- a/assets/app.d60fa8c3.js
+++ /dev/null
@@ -1,5 +0,0 @@
-const El="modulepreload",nr={},Tl="/VFluent3/",Ll=function(t,n){return!n||n.length===0?t():Promise.all(n.map(o=>{if(o=`${Tl}${o}`,o in nr)return;nr[o]=!0;const s=o.endsWith(".css"),r=s?'[rel="stylesheet"]':"";if(document.querySelector(`link[href="${o}"]${r}`))return;const i=document.createElement("link");if(i.rel=s?"stylesheet":El,s||(i.as="script",i.crossOrigin=""),i.href=o,document.head.appendChild(i),s)return new Promise((l,a)=>{i.addEventListener("load",l),i.addEventListener("error",()=>a(new Error(`Unable to preload CSS for ${o}`)))})})).then(()=>t())};function Vs(e,t){const n=Object.create(null),o=e.split(",");for(let s=0;s<o.length;s++)n[o[s]]=!0;return t?s=>!!n[s.toLowerCase()]:s=>!!n[s]}const Fl="itemscope,allowfullscreen,formnovalidate,ismap,nomodule,novalidate,readonly",Al=Vs(Fl);function ei(e){return!!e||e===""}function Ee(e){if(te(e)){const t={};for(let n=0;n<e.length;n++){const o=e[n],s=Ie(o)?Rl(o):Ee(o);if(s)for(const r in s)t[r]=s[r]}return t}else{if(Ie(e))return e;if(Ce(e))return e}}const Nl=/;(?![^(]*\))/g,Ol=/:(.+)/;function Rl(e){const t={};return e.split(Nl).forEach(n=>{if(n){const o=n.split(Ol);o.length>1&&(t[o[0].trim()]=o[1].trim())}}),t}function re(e){let t="";if(Ie(e))t=e;else if(te(e))for(let n=0;n<e.length;n++){const o=re(e[n]);o&&(t+=o+" ")}else if(Ce(e))for(const n in e)e[n]&&(t+=n+" ");return t.trim()}function Hl(e,t){if(e.length!==t.length)return!1;let n=!0;for(let o=0;n&&o<e.length;o++)n=on(e[o],t[o]);return n}function on(e,t){if(e===t)return!0;let n=or(e),o=or(t);if(n||o)return n&&o?e.getTime()===t.getTime():!1;if(n=Dn(e),o=Dn(t),n||o)return e===t;if(n=te(e),o=te(t),n||o)return n&&o?Hl(e,t):!1;if(n=Ce(e),o=Ce(t),n||o){if(!n||!o)return!1;const s=Object.keys(e).length,r=Object.keys(t).length;if(s!==r)return!1;for(const i in e){const l=e.hasOwnProperty(i),a=t.hasOwnProperty(i);if(l&&!a||!l&&a||!on(e[i],t[i]))return!1}}return String(e)===String(t)}function Is(e,t){return e.findIndex(n=>on(n,t))}const le=e=>Ie(e)?e:e==null?"":te(e)||Ce(e)&&(e.toString===oi||!fe(e.toString))?JSON.stringify(e,ti,2):String(e),ti=(e,t)=>t&&t.__v_isRef?ti(e,t.value):dn(t)?{[`Map(${t.size})`]:[...t.entries()].reduce((n,[o,s])=>(n[`${o} =>`]=s,n),{})}:mn(t)?{[`Set(${t.size})`]:[...t.values()]}:Ce(t)&&!te(t)&&!si(t)?String(t):t,we={},un=[],dt=()=>{},Dl=()=>!1,zl=/^on[^a-z]/,Xn=e=>zl.test(e),Ms=e=>e.startsWith("onUpdate:"),Le=Object.assign,Bs=(e,t)=>{const n=e.indexOf(t);n>-1&&e.splice(n,1)},jl=Object.prototype.hasOwnProperty,ve=(e,t)=>jl.call(e,t),te=Array.isArray,dn=e=>Jn(e)==="[object Map]",mn=e=>Jn(e)==="[object Set]",or=e=>Jn(e)==="[object Date]",fe=e=>typeof e=="function",Ie=e=>typeof e=="string",Dn=e=>typeof e=="symbol",Ce=e=>e!==null&&typeof e=="object",ni=e=>Ce(e)&&fe(e.then)&&fe(e.catch),oi=Object.prototype.toString,Jn=e=>oi.call(e),Ul=e=>Jn(e).slice(8,-1),si=e=>Jn(e)==="[object Object]",Es=e=>Ie(e)&&e!=="NaN"&&e[0]!=="-"&&""+parseInt(e,10)===e,Bn=Vs(",key,ref,ref_for,ref_key,onVnodeBeforeMount,onVnodeMounted,onVnodeBeforeUpdate,onVnodeUpdated,onVnodeBeforeUnmount,onVnodeUnmounted"),Bo=e=>{const t=Object.create(null);return n=>t[n]||(t[n]=e(n))},Wl=/-(\w)/g,vt=Bo(e=>e.replace(Wl,(t,n)=>n?n.toUpperCase():"")),Kl=/\B([A-Z])/g,gn=Bo(e=>e.replace(Kl,"-$1").toLowerCase()),Eo=Bo(e=>e.charAt(0).toUpperCase()+e.slice(1)),Yo=Bo(e=>e?`on${Eo(e)}`:""),zn=(e,t)=>!Object.is(e,t),_o=(e,t)=>{for(let n=0;n<e.length;n++)e[n](t)},bo=(e,t,n)=>{Object.defineProperty(e,t,{configurable:!0,enumerable:!1,value:n})},jn=e=>{const t=parseFloat(e);return isNaN(t)?e:t};let sr;const ql=()=>sr||(sr=typeof globalThis!="undefined"?globalThis:typeof self!="undefined"?self:typeof window!="undefined"?window:typeof global!="undefined"?global:{});let We;class ri{constructor(t=!1){this.active=!0,this.effects=[],this.cleanups=[],!t&&We&&(this.parent=We,this.index=(We.scopes||(We.scopes=[])).push(this)-1)}run(t){if(this.active){const n=We;try{return We=this,t()}finally{We=n}}}on(){We=this}off(){We=this.parent}stop(t){if(this.active){let n,o;for(n=0,o=this.effects.length;n<o;n++)this.effects[n].stop();for(n=0,o=this.cleanups.length;n<o;n++)this.cleanups[n]();if(this.scopes)for(n=0,o=this.scopes.length;n<o;n++)this.scopes[n].stop(!0);if(this.parent&&!t){const s=this.parent.scopes.pop();s&&s!==this&&(this.parent.scopes[this.index]=s,s.index=this.index)}this.active=!1}}}function ii(e){return new ri(e)}function Gl(e,t=We){t&&t.active&&t.effects.push(e)}function Yl(){return We}function Xl(e){We&&We.cleanups.push(e)}const Ts=e=>{const t=new Set(e);return t.w=0,t.n=0,t},li=e=>(e.w&zt)>0,ai=e=>(e.n&zt)>0,Jl=({deps:e})=>{if(e.length)for(let t=0;t<e.length;t++)e[t].w|=zt},Ql=e=>{const{deps:t}=e;if(t.length){let n=0;for(let o=0;o<t.length;o++){const s=t[o];li(s)&&!ai(s)?s.delete(e):t[n++]=s,s.w&=~zt,s.n&=~zt}t.length=n}},is=new WeakMap;let In=0,zt=1;const ls=30;let ct;const en=Symbol(""),as=Symbol("");class Ls{constructor(t,n=null,o){this.fn=t,this.scheduler=n,this.active=!0,this.deps=[],this.parent=void 0,Gl(this,o)}run(){if(!this.active)return this.fn();let t=ct,n=Rt;for(;t;){if(t===this)return;t=t.parent}try{return this.parent=ct,ct=this,Rt=!0,zt=1<<++In,In<=ls?Jl(this):rr(this),this.fn()}finally{In<=ls&&Ql(this),zt=1<<--In,ct=this.parent,Rt=n,this.parent=void 0,this.deferStop&&this.stop()}}stop(){ct===this?this.deferStop=!0:this.active&&(rr(this),this.onStop&&this.onStop(),this.active=!1)}}function rr(e){const{deps:t}=e;if(t.length){for(let n=0;n<t.length;n++)t[n].delete(e);t.length=0}}let Rt=!0;const ci=[];function bn(){ci.push(Rt),Rt=!1}function yn(){const e=ci.pop();Rt=e===void 0?!0:e}function Ge(e,t,n){if(Rt&&ct){let o=is.get(e);o||is.set(e,o=new Map);let s=o.get(n);s||o.set(n,s=Ts()),ui(s)}}function ui(e,t){let n=!1;In<=ls?ai(e)||(e.n|=zt,n=!li(e)):n=!e.has(ct),n&&(e.add(ct),ct.deps.push(e))}function St(e,t,n,o,s,r){const i=is.get(e);if(!i)return;let l=[];if(t==="clear")l=[...i.values()];else if(n==="length"&&te(e))i.forEach((a,d)=>{(d==="length"||d>=o)&&l.push(a)});else switch(n!==void 0&&l.push(i.get(n)),t){case"add":te(e)?Es(n)&&l.push(i.get("length")):(l.push(i.get(en)),dn(e)&&l.push(i.get(as)));break;case"delete":te(e)||(l.push(i.get(en)),dn(e)&&l.push(i.get(as)));break;case"set":dn(e)&&l.push(i.get(en));break}if(l.length===1)l[0]&&cs(l[0]);else{const a=[];for(const d of l)d&&a.push(...d);cs(Ts(a))}}function cs(e,t){const n=te(e)?e:[...e];for(const o of n)o.computed&&ir(o);for(const o of n)o.computed||ir(o)}function ir(e,t){(e!==ct||e.allowRecurse)&&(e.scheduler?e.scheduler():e.run())}const Zl=Vs("__proto__,__v_isRef,__isVue"),di=new Set(Object.getOwnPropertyNames(Symbol).filter(e=>e!=="arguments"&&e!=="caller").map(e=>Symbol[e]).filter(Dn)),ea=Fs(),ta=Fs(!1,!0),na=Fs(!0),lr=oa();function oa(){const e={};return["includes","indexOf","lastIndexOf"].forEach(t=>{e[t]=function(...n){const o=me(this);for(let r=0,i=this.length;r<i;r++)Ge(o,"get",r+"");const s=o[t](...n);return s===-1||s===!1?o[t](...n.map(me)):s}}),["push","pop","shift","unshift","splice"].forEach(t=>{e[t]=function(...n){bn();const o=me(this)[t].apply(this,n);return yn(),o}}),e}function Fs(e=!1,t=!1){return function(o,s,r){if(s==="__v_isReactive")return!e;if(s==="__v_isReadonly")return e;if(s==="__v_isShallow")return t;if(s==="__v_raw"&&r===(e?t?ba:_i:t?vi:pi).get(o))return o;const i=te(o);if(!e&&i&&ve(lr,s))return Reflect.get(lr,s,r);const l=Reflect.get(o,s,r);return(Dn(s)?di.has(s):Zl(s))||(e||Ge(o,"get",s),t)?l:he(l)?i&&Es(s)?l:l.value:Ce(l)?e?Os(l):Qn(l):l}}const sa=fi(),ra=fi(!0);function fi(e=!1){return function(n,o,s,r){let i=n[o];if(Un(i)&&he(i)&&!he(s))return!1;if(!e&&!Un(s)&&(us(s)||(s=me(s),i=me(i)),!te(n)&&he(i)&&!he(s)))return i.value=s,!0;const l=te(n)&&Es(o)?Number(o)<n.length:ve(n,o),a=Reflect.set(n,o,s,r);return n===me(r)&&(l?zn(s,i)&&St(n,"set",o,s):St(n,"add",o,s)),a}}function ia(e,t){const n=ve(e,t);e[t];const o=Reflect.deleteProperty(e,t);return o&&n&&St(e,"delete",t,void 0),o}function la(e,t){const n=Reflect.has(e,t);return(!Dn(t)||!di.has(t))&&Ge(e,"has",t),n}function aa(e){return Ge(e,"iterate",te(e)?"length":en),Reflect.ownKeys(e)}const hi={get:ea,set:sa,deleteProperty:ia,has:la,ownKeys:aa},ca={get:na,set(e,t){return!0},deleteProperty(e,t){return!0}},ua=Le({},hi,{get:ta,set:ra}),As=e=>e,To=e=>Reflect.getPrototypeOf(e);function so(e,t,n=!1,o=!1){e=e.__v_raw;const s=me(e),r=me(t);n||(t!==r&&Ge(s,"get",t),Ge(s,"get",r));const{has:i}=To(s),l=o?As:n?Hs:Wn;if(i.call(s,t))return l(e.get(t));if(i.call(s,r))return l(e.get(r));e!==s&&e.get(t)}function ro(e,t=!1){const n=this.__v_raw,o=me(n),s=me(e);return t||(e!==s&&Ge(o,"has",e),Ge(o,"has",s)),e===s?n.has(e):n.has(e)||n.has(s)}function io(e,t=!1){return e=e.__v_raw,!t&&Ge(me(e),"iterate",en),Reflect.get(e,"size",e)}function ar(e){e=me(e);const t=me(this);return To(t).has.call(t,e)||(t.add(e),St(t,"add",e,e)),this}function cr(e,t){t=me(t);const n=me(this),{has:o,get:s}=To(n);let r=o.call(n,e);r||(e=me(e),r=o.call(n,e));const i=s.call(n,e);return n.set(e,t),r?zn(t,i)&&St(n,"set",e,t):St(n,"add",e,t),this}function ur(e){const t=me(this),{has:n,get:o}=To(t);let s=n.call(t,e);s||(e=me(e),s=n.call(t,e)),o&&o.call(t,e);const r=t.delete(e);return s&&St(t,"delete",e,void 0),r}function dr(){const e=me(this),t=e.size!==0,n=e.clear();return t&&St(e,"clear",void 0,void 0),n}function lo(e,t){return function(o,s){const r=this,i=r.__v_raw,l=me(i),a=t?As:e?Hs:Wn;return!e&&Ge(l,"iterate",en),i.forEach((d,p)=>o.call(s,a(d),a(p),r))}}function ao(e,t,n){return function(...o){const s=this.__v_raw,r=me(s),i=dn(r),l=e==="entries"||e===Symbol.iterator&&i,a=e==="keys"&&i,d=s[e](...o),p=n?As:t?Hs:Wn;return!t&&Ge(r,"iterate",a?as:en),{next(){const{value:_,done:m}=d.next();return m?{value:_,done:m}:{value:l?[p(_[0]),p(_[1])]:p(_),done:m}},[Symbol.iterator](){return this}}}}function Bt(e){return function(...t){return e==="delete"?!1:this}}function da(){const e={get(r){return so(this,r)},get size(){return io(this)},has:ro,add:ar,set:cr,delete:ur,clear:dr,forEach:lo(!1,!1)},t={get(r){return so(this,r,!1,!0)},get size(){return io(this)},has:ro,add:ar,set:cr,delete:ur,clear:dr,forEach:lo(!1,!0)},n={get(r){return so(this,r,!0)},get size(){return io(this,!0)},has(r){return ro.call(this,r,!0)},add:Bt("add"),set:Bt("set"),delete:Bt("delete"),clear:Bt("clear"),forEach:lo(!0,!1)},o={get(r){return so(this,r,!0,!0)},get size(){return io(this,!0)},has(r){return ro.call(this,r,!0)},add:Bt("add"),set:Bt("set"),delete:Bt("delete"),clear:Bt("clear"),forEach:lo(!0,!0)};return["keys","values","entries",Symbol.iterator].forEach(r=>{e[r]=ao(r,!1,!1),n[r]=ao(r,!0,!1),t[r]=ao(r,!1,!0),o[r]=ao(r,!0,!0)}),[e,n,t,o]}const[fa,ha,pa,va]=da();function Ns(e,t){const n=t?e?va:pa:e?ha:fa;return(o,s,r)=>s==="__v_isReactive"?!e:s==="__v_isReadonly"?e:s==="__v_raw"?o:Reflect.get(ve(n,s)&&s in o?n:o,s,r)}const _a={get:Ns(!1,!1)},ma={get:Ns(!1,!0)},ga={get:Ns(!0,!1)},pi=new WeakMap,vi=new WeakMap,_i=new WeakMap,ba=new WeakMap;function ya(e){switch(e){case"Object":case"Array":return 1;case"Map":case"Set":case"WeakMap":case"WeakSet":return 2;default:return 0}}function xa(e){return e.__v_skip||!Object.isExtensible(e)?0:ya(Ul(e))}function Qn(e){return Un(e)?e:Rs(e,!1,hi,_a,pi)}function wa(e){return Rs(e,!1,ua,ma,vi)}function Os(e){return Rs(e,!0,ca,ga,_i)}function Rs(e,t,n,o,s){if(!Ce(e)||e.__v_raw&&!(t&&e.__v_isReactive))return e;const r=s.get(e);if(r)return r;const i=xa(e);if(i===0)return e;const l=new Proxy(e,i===2?o:n);return s.set(e,l),l}function Ht(e){return Un(e)?Ht(e.__v_raw):!!(e&&e.__v_isReactive)}function Un(e){return!!(e&&e.__v_isReadonly)}function us(e){return!!(e&&e.__v_isShallow)}function mi(e){return Ht(e)||Un(e)}function me(e){const t=e&&e.__v_raw;return t?me(t):e}function kt(e){return bo(e,"__v_skip",!0),e}const Wn=e=>Ce(e)?Qn(e):e,Hs=e=>Ce(e)?Os(e):e;function gi(e){Rt&&ct&&(e=me(e),ui(e.dep||(e.dep=Ts())))}function bi(e,t){e=me(e),e.dep&&cs(e.dep)}function he(e){return!!(e&&e.__v_isRef===!0)}function R(e){return yi(e,!1)}function $a(e){return yi(e,!0)}function yi(e,t){return he(e)?e:new ka(e,t)}class ka{constructor(t,n){this.__v_isShallow=n,this.dep=void 0,this.__v_isRef=!0,this._rawValue=n?t:me(t),this._value=n?t:Wn(t)}get value(){return gi(this),this._value}set value(t){t=this.__v_isShallow?t:me(t),zn(t,this._rawValue)&&(this._rawValue=t,this._value=this.__v_isShallow?t:Wn(t),bi(this))}}function c(e){return he(e)?e.value:e}const Ca={get:(e,t,n)=>c(Reflect.get(e,t,n)),set:(e,t,n,o)=>{const s=e[t];return he(s)&&!he(n)?(s.value=n,!0):Reflect.set(e,t,n,o)}};function xi(e){return Ht(e)?e:new Proxy(e,Ca)}function Sa(e){const t=te(e)?new Array(e.length):{};for(const n in e)t[n]=Va(e,n);return t}class Pa{constructor(t,n,o){this._object=t,this._key=n,this._defaultValue=o,this.__v_isRef=!0}get value(){const t=this._object[this._key];return t===void 0?this._defaultValue:t}set value(t){this._object[this._key]=t}}function Va(e,t,n){const o=e[t];return he(o)?o:new Pa(e,t,n)}class Ia{constructor(t,n,o,s){this._setter=n,this.dep=void 0,this.__v_isRef=!0,this._dirty=!0,this.effect=new Ls(t,()=>{this._dirty||(this._dirty=!0,bi(this))}),this.effect.computed=this,this.effect.active=this._cacheable=!s,this.__v_isReadonly=o}get value(){const t=me(this);return gi(t),(t._dirty||!t._cacheable)&&(t._dirty=!1,t._value=t.effect.run()),t._value}set value(t){this._setter(t)}}function Ma(e,t,n=!1){let o,s;const r=fe(e);return r?(o=e,s=dt):(o=e.get,s=e.set),new Ia(o,s,r||!s,n)}function Dt(e,t,n,o){let s;try{s=o?e(...o):e()}catch(r){Lo(r,t,n)}return s}function et(e,t,n,o){if(fe(e)){const r=Dt(e,t,n,o);return r&&ni(r)&&r.catch(i=>{Lo(i,t,n)}),r}const s=[];for(let r=0;r<e.length;r++)s.push(et(e[r],t,n,o));return s}function Lo(e,t,n,o=!0){const s=t?t.vnode:null;if(t){let r=t.parent;const i=t.proxy,l=n;for(;r;){const d=r.ec;if(d){for(let p=0;p<d.length;p++)if(d[p](e,i,l)===!1)return}r=r.parent}const a=t.appContext.config.errorHandler;if(a){Dt(a,null,10,[e,i,l]);return}}Ba(e,n,s,o)}function Ba(e,t,n,o=!0){console.error(e)}let yo=!1,ds=!1;const Ke=[];let wt=0;const En=[];let Mn=null,an=0;const Tn=[];let Ft=null,cn=0;const wi=Promise.resolve();let Ds=null,fs=null;function Ze(e){const t=Ds||wi;return e?t.then(this?e.bind(this):e):t}function Ea(e){let t=wt+1,n=Ke.length;for(;t<n;){const o=t+n>>>1;Kn(Ke[o])<e?t=o+1:n=o}return t}function $i(e){(!Ke.length||!Ke.includes(e,yo&&e.allowRecurse?wt+1:wt))&&e!==fs&&(e.id==null?Ke.push(e):Ke.splice(Ea(e.id),0,e),ki())}function ki(){!yo&&!ds&&(ds=!0,Ds=wi.then(Si))}function Ta(e){const t=Ke.indexOf(e);t>wt&&Ke.splice(t,1)}function Ci(e,t,n,o){te(e)?n.push(...e):(!t||!t.includes(e,e.allowRecurse?o+1:o))&&n.push(e),ki()}function La(e){Ci(e,Mn,En,an)}function Fa(e){Ci(e,Ft,Tn,cn)}function Fo(e,t=null){if(En.length){for(fs=t,Mn=[...new Set(En)],En.length=0,an=0;an<Mn.length;an++)Mn[an]();Mn=null,an=0,fs=null,Fo(e,t)}}function xo(e){if(Fo(),Tn.length){const t=[...new Set(Tn)];if(Tn.length=0,Ft){Ft.push(...t);return}for(Ft=t,Ft.sort((n,o)=>Kn(n)-Kn(o)),cn=0;cn<Ft.length;cn++)Ft[cn]();Ft=null,cn=0}}const Kn=e=>e.id==null?1/0:e.id;function Si(e){ds=!1,yo=!0,Fo(e),Ke.sort((n,o)=>Kn(n)-Kn(o));const t=dt;try{for(wt=0;wt<Ke.length;wt++){const n=Ke[wt];n&&n.active!==!1&&Dt(n,null,14)}}finally{wt=0,Ke.length=0,xo(),yo=!1,Ds=null,(Ke.length||En.length||Tn.length)&&Si(e)}}function Aa(e,t,...n){if(e.isUnmounted)return;const o=e.vnode.props||we;let s=n;const r=t.startsWith("update:"),i=r&&t.slice(7);if(i&&i in o){const p=`${i==="modelValue"?"model":i}Modifiers`,{number:_,trim:m}=o[p]||we;m&&(s=n.map(y=>y.trim())),_&&(s=n.map(jn))}let l,a=o[l=Yo(t)]||o[l=Yo(vt(t))];!a&&r&&(a=o[l=Yo(gn(t))]),a&&et(a,e,6,s);const d=o[l+"Once"];if(d){if(!e.emitted)e.emitted={};else if(e.emitted[l])return;e.emitted[l]=!0,et(d,e,6,s)}}function Pi(e,t,n=!1){const o=t.emitsCache,s=o.get(e);if(s!==void 0)return s;const r=e.emits;let i={},l=!1;if(!fe(e)){const a=d=>{const p=Pi(d,t,!0);p&&(l=!0,Le(i,p))};!n&&t.mixins.length&&t.mixins.forEach(a),e.extends&&a(e.extends),e.mixins&&e.mixins.forEach(a)}return!r&&!l?(o.set(e,null),null):(te(r)?r.forEach(a=>i[a]=null):Le(i,r),o.set(e,i),i)}function Ao(e,t){return!e||!Xn(t)?!1:(t=t.slice(2).replace(/Once$/,""),ve(e,t[0].toLowerCase()+t.slice(1))||ve(e,gn(t))||ve(e,t))}let Ne=null,No=null;function wo(e){const t=Ne;return Ne=e,No=e&&e.type.__scopeId||null,t}function tt(e){No=e}function nt(){No=null}function oe(e,t=Ne,n){if(!t||e._n)return e;const o=(...s)=>{o._d&&wr(-1);const r=wo(t),i=e(...s);return wo(r),o._d&&wr(1),i};return o._n=!0,o._c=!0,o._d=!0,o}function Xo(e){const{type:t,vnode:n,proxy:o,withProxy:s,props:r,propsOptions:[i],slots:l,attrs:a,emit:d,render:p,renderCache:_,data:m,setupState:y,ctx:k,inheritAttrs:M}=e;let S,w;const B=wo(e);try{if(n.shapeFlag&4){const Y=s||o;S=lt(p.call(Y,Y,_,r,y,m,k)),w=a}else{const Y=t;S=lt(Y.length>1?Y(r,{attrs:a,slots:l,emit:d}):Y(r,null)),w=t.props?a:Na(a)}}catch(Y){Fn.length=0,Lo(Y,e,1),S=T(qe)}let W=S;if(w&&M!==!1){const Y=Object.keys(w),{shapeFlag:K}=W;Y.length&&K&7&&(i&&Y.some(Ms)&&(w=Oa(w,i)),W=jt(W,w))}return n.dirs&&(W=jt(W),W.dirs=W.dirs?W.dirs.concat(n.dirs):n.dirs),n.transition&&(W.transition=n.transition),S=W,wo(B),S}const Na=e=>{let t;for(const n in e)(n==="class"||n==="style"||Xn(n))&&((t||(t={}))[n]=e[n]);return t},Oa=(e,t)=>{const n={};for(const o in e)(!Ms(o)||!(o.slice(9)in t))&&(n[o]=e[o]);return n};function Ra(e,t,n){const{props:o,children:s,component:r}=e,{props:i,children:l,patchFlag:a}=t,d=r.emitsOptions;if(t.dirs||t.transition)return!0;if(n&&a>=0){if(a&1024)return!0;if(a&16)return o?fr(o,i,d):!!i;if(a&8){const p=t.dynamicProps;for(let _=0;_<p.length;_++){const m=p[_];if(i[m]!==o[m]&&!Ao(d,m))return!0}}}else return(s||l)&&(!l||!l.$stable)?!0:o===i?!1:o?i?fr(o,i,d):!0:!!i;return!1}function fr(e,t,n){const o=Object.keys(t);if(o.length!==Object.keys(e).length)return!0;for(let s=0;s<o.length;s++){const r=o[s];if(t[r]!==e[r]&&!Ao(n,r))return!0}return!1}function Ha({vnode:e,parent:t},n){for(;t&&t.subTree===e;)(e=t.vnode).el=n,t=t.parent}const Da=e=>e.__isSuspense;function Vi(e,t){t&&t.pendingBranch?te(e)?t.effects.push(...e):t.effects.push(e):Fa(e)}function zs(e,t){if(Be){let n=Be.provides;const o=Be.parent&&Be.parent.provides;o===n&&(n=Be.provides=Object.create(o)),n[e]=t}}function Ct(e,t,n=!1){const o=Be||Ne;if(o){const s=o.parent==null?o.vnode.appContext&&o.vnode.appContext.provides:o.parent.provides;if(s&&e in s)return s[e];if(arguments.length>1)return n&&fe(t)?t.call(o.proxy):t}}function xn(e,t){return Oo(e,null,t)}function za(e,t){return Oo(e,null,{flush:"post"})}const hr={};function ze(e,t,n){return Oo(e,t,n)}function Oo(e,t,{immediate:n,deep:o,flush:s,onTrack:r,onTrigger:i}=we){const l=Be;let a,d=!1,p=!1;if(he(e)?(a=()=>e.value,d=us(e)):Ht(e)?(a=()=>e,o=!0):te(e)?(p=!0,d=e.some(w=>Ht(w)||us(w)),a=()=>e.map(w=>{if(he(w))return w.value;if(Ht(w))return Zt(w);if(fe(w))return Dt(w,l,2)})):fe(e)?t?a=()=>Dt(e,l,2):a=()=>{if(!(l&&l.isUnmounted))return _&&_(),et(e,l,3,[m])}:a=dt,t&&o){const w=a;a=()=>Zt(w())}let _,m=w=>{_=S.onStop=()=>{Dt(w,l,4)}};if(Yn)return m=dt,t?n&&et(t,l,3,[a(),p?[]:void 0,m]):a(),dt;let y=p?[]:hr;const k=()=>{if(!!S.active)if(t){const w=S.run();(o||d||(p?w.some((B,W)=>zn(B,y[W])):zn(w,y)))&&(_&&_(),et(t,l,3,[w,y===hr?void 0:y,m]),y=w)}else S.run()};k.allowRecurse=!!t;let M;s==="sync"?M=k:s==="post"?M=()=>He(k,l&&l.suspense):M=()=>La(k);const S=new Ls(a,M);return t?n?k():y=S.run():s==="post"?He(S.run.bind(S),l&&l.suspense):S.run(),()=>{S.stop(),l&&l.scope&&Bs(l.scope.effects,S)}}function ja(e,t,n){const o=this.proxy,s=Ie(e)?e.includes(".")?Ii(o,e):()=>o[e]:e.bind(o,o);let r;fe(t)?r=t:(r=t.handler,n=t);const i=Be;pn(this);const l=Oo(s,r.bind(o),n);return i?pn(i):tn(),l}function Ii(e,t){const n=t.split(".");return()=>{let o=e;for(let s=0;s<n.length&&o;s++)o=o[n[s]];return o}}function Zt(e,t){if(!Ce(e)||e.__v_skip||(t=t||new Set,t.has(e)))return e;if(t.add(e),he(e))Zt(e.value,t);else if(te(e))for(let n=0;n<e.length;n++)Zt(e[n],t);else if(mn(e)||dn(e))e.forEach(n=>{Zt(n,t)});else if(si(e))for(const n in e)Zt(e[n],t);return e}function Ua(){const e={isMounted:!1,isLeaving:!1,isUnmounting:!1,leavingVNodes:new Map};return Xe(()=>{e.isMounted=!0}),Ai(()=>{e.isUnmounting=!0}),e}const Je=[Function,Array],Wa={name:"BaseTransition",props:{mode:String,appear:Boolean,persisted:Boolean,onBeforeEnter:Je,onEnter:Je,onAfterEnter:Je,onEnterCancelled:Je,onBeforeLeave:Je,onLeave:Je,onAfterLeave:Je,onLeaveCancelled:Je,onBeforeAppear:Je,onAppear:Je,onAfterAppear:Je,onAppearCancelled:Je},setup(e,{slots:t}){const n=jo(),o=Ua();let s;return()=>{const r=t.default&&Ei(t.default(),!0);if(!r||!r.length)return;let i=r[0];if(r.length>1){for(const M of r)if(M.type!==qe){i=M;break}}const l=me(e),{mode:a}=l;if(o.isLeaving)return Jo(i);const d=pr(i);if(!d)return Jo(i);const p=hs(d,l,o,n);ps(d,p);const _=n.subTree,m=_&&pr(_);let y=!1;const{getTransitionKey:k}=d.type;if(k){const M=k();s===void 0?s=M:M!==s&&(s=M,y=!0)}if(m&&m.type!==qe&&(!Xt(d,m)||y)){const M=hs(m,l,o,n);if(ps(m,M),a==="out-in")return o.isLeaving=!0,M.afterLeave=()=>{o.isLeaving=!1,n.update()},Jo(i);a==="in-out"&&d.type!==qe&&(M.delayLeave=(S,w,B)=>{const W=Bi(o,m);W[String(m.key)]=m,S._leaveCb=()=>{w(),S._leaveCb=void 0,delete p.delayedLeave},p.delayedLeave=B})}return i}}},Mi=Wa;function Bi(e,t){const{leavingVNodes:n}=e;let o=n.get(t.type);return o||(o=Object.create(null),n.set(t.type,o)),o}function hs(e,t,n,o){const{appear:s,mode:r,persisted:i=!1,onBeforeEnter:l,onEnter:a,onAfterEnter:d,onEnterCancelled:p,onBeforeLeave:_,onLeave:m,onAfterLeave:y,onLeaveCancelled:k,onBeforeAppear:M,onAppear:S,onAfterAppear:w,onAppearCancelled:B}=t,W=String(e.key),Y=Bi(n,e),K=(V,D)=>{V&&et(V,o,9,D)},ie=(V,D)=>{const E=D[1];K(V,D),te(V)?V.every(Q=>Q.length<=1)&&E():V.length<=1&&E()},z={mode:r,persisted:i,beforeEnter(V){let D=l;if(!n.isMounted)if(s)D=M||l;else return;V._leaveCb&&V._leaveCb(!0);const E=Y[W];E&&Xt(e,E)&&E.el._leaveCb&&E.el._leaveCb(),K(D,[V])},enter(V){let D=a,E=d,Q=p;if(!n.isMounted)if(s)D=S||a,E=w||d,Q=B||p;else return;let N=!1;const C=V._enterCb=x=>{N||(N=!0,x?K(Q,[V]):K(E,[V]),z.delayedLeave&&z.delayedLeave(),V._enterCb=void 0)};D?ie(D,[V,C]):C()},leave(V,D){const E=String(e.key);if(V._enterCb&&V._enterCb(!0),n.isUnmounting)return D();K(_,[V]);let Q=!1;const N=V._leaveCb=C=>{Q||(Q=!0,D(),C?K(k,[V]):K(y,[V]),V._leaveCb=void 0,Y[E]===e&&delete Y[E])};Y[E]=e,m?ie(m,[V,N]):N()},clone(V){return hs(V,t,n,o)}};return z}function Jo(e){if(Ro(e))return e=jt(e),e.children=null,e}function pr(e){return Ro(e)?e.children?e.children[0]:void 0:e}function ps(e,t){e.shapeFlag&6&&e.component?ps(e.component.subTree,t):e.shapeFlag&128?(e.ssContent.transition=t.clone(e.ssContent),e.ssFallback.transition=t.clone(e.ssFallback)):e.transition=t}function Ei(e,t=!1,n){let o=[],s=0;for(let r=0;r<e.length;r++){let i=e[r];const l=n==null?i.key:String(n)+String(i.key!=null?i.key:r);i.type===ce?(i.patchFlag&128&&s++,o=o.concat(Ei(i.children,t,l))):(t||i.type!==qe)&&o.push(l!=null?jt(i,{key:l}):i)}if(s>1)for(let r=0;r<o.length;r++)o[r].patchFlag=-2;return o}function j(e){return fe(e)?{setup:e,name:e.name}:e}const fn=e=>!!e.type.__asyncLoader,Ro=e=>e.type.__isKeepAlive;function Ka(e,t){Ti(e,"a",t)}function qa(e,t){Ti(e,"da",t)}function Ti(e,t,n=Be){const o=e.__wdc||(e.__wdc=()=>{let s=n;for(;s;){if(s.isDeactivated)return;s=s.parent}return e()});if(Ho(t,o,n),n){let s=n.parent;for(;s&&s.parent;)Ro(s.parent.vnode)&&Ga(o,t,n,s),s=s.parent}}function Ga(e,t,n,o){const s=Ho(t,e,o,!0);mt(()=>{Bs(o[t],s)},n)}function Ho(e,t,n=Be,o=!1){if(n){const s=n[e]||(n[e]=[]),r=t.__weh||(t.__weh=(...i)=>{if(n.isUnmounted)return;bn(),pn(n);const l=et(t,n,e,i);return tn(),yn(),l});return o?s.unshift(r):s.push(r),r}}const Pt=e=>(t,n=Be)=>(!Yn||e==="sp")&&Ho(e,t,n),Li=Pt("bm"),Xe=Pt("m"),Ya=Pt("bu"),Fi=Pt("u"),Ai=Pt("bum"),mt=Pt("um"),Xa=Pt("sp"),Ja=Pt("rtg"),Qa=Pt("rtc");function Za(e,t=Be){Ho("ec",e,t)}function Se(e,t){const n=Ne;if(n===null)return e;const o=Uo(n)||n.proxy,s=e.dirs||(e.dirs=[]);for(let r=0;r<t.length;r++){let[i,l,a,d=we]=t[r];fe(i)&&(i={mounted:i,updated:i}),i.deep&&Zt(l),s.push({dir:i,instance:o,value:l,oldValue:void 0,arg:a,modifiers:d})}return e}function pt(e,t,n,o){const s=e.dirs,r=t&&t.dirs;for(let i=0;i<s.length;i++){const l=s[i];r&&(l.oldValue=r[i].value);let a=l.dir[o];a&&(bn(),et(a,n,8,[e.el,l,e,t]),yn())}}const js="components";function _t(e,t){return Oi(js,e,!0,t)||e}const Ni=Symbol();function Do(e){return Ie(e)?Oi(js,e,!1)||e:e||Ni}function Oi(e,t,n=!0,o=!1){const s=Ne||Be;if(s){const r=s.type;if(e===js){const l=Ic(r,!1);if(l&&(l===t||l===vt(t)||l===Eo(vt(t))))return r}const i=vr(s[e]||r[e],t)||vr(s.appContext[e],t);return!i&&o?r:i}}function vr(e,t){return e&&(e[t]||e[vt(t)]||e[Eo(vt(t))])}function Fe(e,t,n,o){let s;const r=n&&n[o];if(te(e)||Ie(e)){s=new Array(e.length);for(let i=0,l=e.length;i<l;i++)s[i]=t(e[i],i,void 0,r&&r[i])}else if(typeof e=="number"){s=new Array(e);for(let i=0;i<e;i++)s[i]=t(i+1,i,void 0,r&&r[i])}else if(Ce(e))if(e[Symbol.iterator])s=Array.from(e,(i,l)=>t(i,l,void 0,r&&r[l]));else{const i=Object.keys(e);s=new Array(i.length);for(let l=0,a=i.length;l<a;l++){const d=i[l];s[l]=t(e[d],d,l,r&&r[l])}}else s=[];return n&&(n[o]=s),s}function J(e,t,n={},o,s){if(Ne.isCE||Ne.parent&&fn(Ne.parent)&&Ne.parent.isCE)return T("slot",t==="default"?null:{name:t},o&&o());let r=e[t];r&&r._c&&(r._d=!1),v();const i=r&&Ri(r(n)),l=de(ce,{key:n.key||`_${t}`},i||(o?o():[]),i&&e._===1?64:-2);return!s&&l.scopeId&&(l.slotScopeIds=[l.scopeId+"-s"]),r&&r._c&&(r._d=!0),l}function Ri(e){return e.some(t=>So(t)?!(t.type===qe||t.type===ce&&!Ri(t.children)):!0)?e:null}const vs=e=>e?Qi(e)?Uo(e)||e.proxy:vs(e.parent):null,$o=Le(Object.create(null),{$:e=>e,$el:e=>e.vnode.el,$data:e=>e.data,$props:e=>e.props,$attrs:e=>e.attrs,$slots:e=>e.slots,$refs:e=>e.refs,$parent:e=>vs(e.parent),$root:e=>vs(e.root),$emit:e=>e.emit,$options:e=>Di(e),$forceUpdate:e=>e.f||(e.f=()=>$i(e.update)),$nextTick:e=>e.n||(e.n=Ze.bind(e.proxy)),$watch:e=>ja.bind(e)}),ec={get({_:e},t){const{ctx:n,setupState:o,data:s,props:r,accessCache:i,type:l,appContext:a}=e;let d;if(t[0]!=="$"){const y=i[t];if(y!==void 0)switch(y){case 1:return o[t];case 2:return s[t];case 4:return n[t];case 3:return r[t]}else{if(o!==we&&ve(o,t))return i[t]=1,o[t];if(s!==we&&ve(s,t))return i[t]=2,s[t];if((d=e.propsOptions[0])&&ve(d,t))return i[t]=3,r[t];if(n!==we&&ve(n,t))return i[t]=4,n[t];_s&&(i[t]=0)}}const p=$o[t];let _,m;if(p)return t==="$attrs"&&Ge(e,"get",t),p(e);if((_=l.__cssModules)&&(_=_[t]))return _;if(n!==we&&ve(n,t))return i[t]=4,n[t];if(m=a.config.globalProperties,ve(m,t))return m[t]},set({_:e},t,n){const{data:o,setupState:s,ctx:r}=e;return s!==we&&ve(s,t)?(s[t]=n,!0):o!==we&&ve(o,t)?(o[t]=n,!0):ve(e.props,t)||t[0]==="$"&&t.slice(1)in e?!1:(r[t]=n,!0)},has({_:{data:e,setupState:t,accessCache:n,ctx:o,appContext:s,propsOptions:r}},i){let l;return!!n[i]||e!==we&&ve(e,i)||t!==we&&ve(t,i)||(l=r[0])&&ve(l,i)||ve(o,i)||ve($o,i)||ve(s.config.globalProperties,i)},defineProperty(e,t,n){return n.get!=null?e._.accessCache[t]=0:ve(n,"value")&&this.set(e,t,n.value,null),Reflect.defineProperty(e,t,n)}};let _s=!0;function tc(e){const t=Di(e),n=e.proxy,o=e.ctx;_s=!1,t.beforeCreate&&_r(t.beforeCreate,e,"bc");const{data:s,computed:r,methods:i,watch:l,provide:a,inject:d,created:p,beforeMount:_,mounted:m,beforeUpdate:y,updated:k,activated:M,deactivated:S,beforeDestroy:w,beforeUnmount:B,destroyed:W,unmounted:Y,render:K,renderTracked:ie,renderTriggered:z,errorCaptured:V,serverPrefetch:D,expose:E,inheritAttrs:Q,components:N,directives:C,filters:x}=t;if(d&&nc(d,o,null,e.appContext.config.unwrapInjectedRef),i)for(const be in i){const ue=i[be];fe(ue)&&(o[be]=ue.bind(n))}if(s){const be=s.call(n,n);Ce(be)&&(e.data=Qn(be))}if(_s=!0,r)for(const be in r){const ue=r[be],Re=fe(ue)?ue.bind(n,n):fe(ue.get)?ue.get.bind(n,n):dt,Pe=!fe(ue)&&fe(ue.set)?ue.set.bind(n):dt,yt=se({get:Re,set:Pe});Object.defineProperty(o,be,{enumerable:!0,configurable:!0,get:()=>yt.value,set:It=>yt.value=It})}if(l)for(const be in l)Hi(l[be],o,n,be);if(a){const be=fe(a)?a.call(n):a;Reflect.ownKeys(be).forEach(ue=>{zs(ue,be[ue])})}p&&_r(p,e,"c");function q(be,ue){te(ue)?ue.forEach(Re=>be(Re.bind(n))):ue&&be(ue.bind(n))}if(q(Li,_),q(Xe,m),q(Ya,y),q(Fi,k),q(Ka,M),q(qa,S),q(Za,V),q(Qa,ie),q(Ja,z),q(Ai,B),q(mt,Y),q(Xa,D),te(E))if(E.length){const be=e.exposed||(e.exposed={});E.forEach(ue=>{Object.defineProperty(be,ue,{get:()=>n[ue],set:Re=>n[ue]=Re})})}else e.exposed||(e.exposed={});K&&e.render===dt&&(e.render=K),Q!=null&&(e.inheritAttrs=Q),N&&(e.components=N),C&&(e.directives=C)}function nc(e,t,n=dt,o=!1){te(e)&&(e=ms(e));for(const s in e){const r=e[s];let i;Ce(r)?"default"in r?i=Ct(r.from||s,r.default,!0):i=Ct(r.from||s):i=Ct(r),he(i)&&o?Object.defineProperty(t,s,{enumerable:!0,configurable:!0,get:()=>i.value,set:l=>i.value=l}):t[s]=i}}function _r(e,t,n){et(te(e)?e.map(o=>o.bind(t.proxy)):e.bind(t.proxy),t,n)}function Hi(e,t,n,o){const s=o.includes(".")?Ii(n,o):()=>n[o];if(Ie(e)){const r=t[e];fe(r)&&ze(s,r)}else if(fe(e))ze(s,e.bind(n));else if(Ce(e))if(te(e))e.forEach(r=>Hi(r,t,n,o));else{const r=fe(e.handler)?e.handler.bind(n):t[e.handler];fe(r)&&ze(s,r,e)}}function Di(e){const t=e.type,{mixins:n,extends:o}=t,{mixins:s,optionsCache:r,config:{optionMergeStrategies:i}}=e.appContext,l=r.get(t);let a;return l?a=l:!s.length&&!n&&!o?a=t:(a={},s.length&&s.forEach(d=>ko(a,d,i,!0)),ko(a,t,i)),r.set(t,a),a}function ko(e,t,n,o=!1){const{mixins:s,extends:r}=t;r&&ko(e,r,n,!0),s&&s.forEach(i=>ko(e,i,n,!0));for(const i in t)if(!(o&&i==="expose")){const l=oc[i]||n&&n[i];e[i]=l?l(e[i],t[i]):t[i]}return e}const oc={data:mr,props:Yt,emits:Yt,methods:Yt,computed:Yt,beforeCreate:Oe,created:Oe,beforeMount:Oe,mounted:Oe,beforeUpdate:Oe,updated:Oe,beforeDestroy:Oe,beforeUnmount:Oe,destroyed:Oe,unmounted:Oe,activated:Oe,deactivated:Oe,errorCaptured:Oe,serverPrefetch:Oe,components:Yt,directives:Yt,watch:rc,provide:mr,inject:sc};function mr(e,t){return t?e?function(){return Le(fe(e)?e.call(this,this):e,fe(t)?t.call(this,this):t)}:t:e}function sc(e,t){return Yt(ms(e),ms(t))}function ms(e){if(te(e)){const t={};for(let n=0;n<e.length;n++)t[e[n]]=e[n];return t}return e}function Oe(e,t){return e?[...new Set([].concat(e,t))]:t}function Yt(e,t){return e?Le(Le(Object.create(null),e),t):t}function rc(e,t){if(!e)return t;if(!t)return e;const n=Le(Object.create(null),e);for(const o in t)n[o]=Oe(e[o],t[o]);return n}function ic(e,t,n,o=!1){const s={},r={};bo(r,zo,1),e.propsDefaults=Object.create(null),zi(e,t,s,r);for(const i in e.propsOptions[0])i in s||(s[i]=void 0);n?e.props=o?s:wa(s):e.type.props?e.props=s:e.props=r,e.attrs=r}function lc(e,t,n,o){const{props:s,attrs:r,vnode:{patchFlag:i}}=e,l=me(s),[a]=e.propsOptions;let d=!1;if((o||i>0)&&!(i&16)){if(i&8){const p=e.vnode.dynamicProps;for(let _=0;_<p.length;_++){let m=p[_];if(Ao(e.emitsOptions,m))continue;const y=t[m];if(a)if(ve(r,m))y!==r[m]&&(r[m]=y,d=!0);else{const k=vt(m);s[k]=gs(a,l,k,y,e,!1)}else y!==r[m]&&(r[m]=y,d=!0)}}}else{zi(e,t,s,r)&&(d=!0);let p;for(const _ in l)(!t||!ve(t,_)&&((p=gn(_))===_||!ve(t,p)))&&(a?n&&(n[_]!==void 0||n[p]!==void 0)&&(s[_]=gs(a,l,_,void 0,e,!0)):delete s[_]);if(r!==l)for(const _ in r)(!t||!ve(t,_)&&!0)&&(delete r[_],d=!0)}d&&St(e,"set","$attrs")}function zi(e,t,n,o){const[s,r]=e.propsOptions;let i=!1,l;if(t)for(let a in t){if(Bn(a))continue;const d=t[a];let p;s&&ve(s,p=vt(a))?!r||!r.includes(p)?n[p]=d:(l||(l={}))[p]=d:Ao(e.emitsOptions,a)||(!(a in o)||d!==o[a])&&(o[a]=d,i=!0)}if(r){const a=me(n),d=l||we;for(let p=0;p<r.length;p++){const _=r[p];n[_]=gs(s,a,_,d[_],e,!ve(d,_))}}return i}function gs(e,t,n,o,s,r){const i=e[n];if(i!=null){const l=ve(i,"default");if(l&&o===void 0){const a=i.default;if(i.type!==Function&&fe(a)){const{propsDefaults:d}=s;n in d?o=d[n]:(pn(s),o=d[n]=a.call(null,t),tn())}else o=a}i[0]&&(r&&!l?o=!1:i[1]&&(o===""||o===gn(n))&&(o=!0))}return o}function ji(e,t,n=!1){const o=t.propsCache,s=o.get(e);if(s)return s;const r=e.props,i={},l=[];let a=!1;if(!fe(e)){const p=_=>{a=!0;const[m,y]=ji(_,t,!0);Le(i,m),y&&l.push(...y)};!n&&t.mixins.length&&t.mixins.forEach(p),e.extends&&p(e.extends),e.mixins&&e.mixins.forEach(p)}if(!r&&!a)return o.set(e,un),un;if(te(r))for(let p=0;p<r.length;p++){const _=vt(r[p]);gr(_)&&(i[_]=we)}else if(r)for(const p in r){const _=vt(p);if(gr(_)){const m=r[p],y=i[_]=te(m)||fe(m)?{type:m}:m;if(y){const k=xr(Boolean,y.type),M=xr(String,y.type);y[0]=k>-1,y[1]=M<0||k<M,(k>-1||ve(y,"default"))&&l.push(_)}}}const d=[i,l];return o.set(e,d),d}function gr(e){return e[0]!=="$"}function br(e){const t=e&&e.toString().match(/^\s*function (\w+)/);return t?t[1]:e===null?"null":""}function yr(e,t){return br(e)===br(t)}function xr(e,t){return te(t)?t.findIndex(n=>yr(n,e)):fe(t)&&yr(t,e)?0:-1}const Ui=e=>e[0]==="_"||e==="$stable",Us=e=>te(e)?e.map(lt):[lt(e)],ac=(e,t,n)=>{if(t._n)return t;const o=oe((...s)=>Us(t(...s)),n);return o._c=!1,o},Wi=(e,t,n)=>{const o=e._ctx;for(const s in e){if(Ui(s))continue;const r=e[s];if(fe(r))t[s]=ac(s,r,o);else if(r!=null){const i=Us(r);t[s]=()=>i}}},Ki=(e,t)=>{const n=Us(t);e.slots.default=()=>n},cc=(e,t)=>{if(e.vnode.shapeFlag&32){const n=t._;n?(e.slots=me(t),bo(t,"_",n)):Wi(t,e.slots={})}else e.slots={},t&&Ki(e,t);bo(e.slots,zo,1)},uc=(e,t,n)=>{const{vnode:o,slots:s}=e;let r=!0,i=we;if(o.shapeFlag&32){const l=t._;l?n&&l===1?r=!1:(Le(s,t),!n&&l===1&&delete s._):(r=!t.$stable,Wi(t,s)),i=t}else t&&(Ki(e,t),i={default:1});if(r)for(const l in s)!Ui(l)&&!(l in i)&&delete s[l]};function qi(){return{app:null,config:{isNativeTag:Dl,performance:!1,globalProperties:{},optionMergeStrategies:{},errorHandler:void 0,warnHandler:void 0,compilerOptions:{}},mixins:[],components:{},directives:{},provides:Object.create(null),optionsCache:new WeakMap,propsCache:new WeakMap,emitsCache:new WeakMap}}let dc=0;function fc(e,t){return function(o,s=null){fe(o)||(o=Object.assign({},o)),s!=null&&!Ce(s)&&(s=null);const r=qi(),i=new Set;let l=!1;const a=r.app={_uid:dc++,_component:o,_props:s,_container:null,_context:r,_instance:null,version:Bc,get config(){return r.config},set config(d){},use(d,...p){return i.has(d)||(d&&fe(d.install)?(i.add(d),d.install(a,...p)):fe(d)&&(i.add(d),d(a,...p))),a},mixin(d){return r.mixins.includes(d)||r.mixins.push(d),a},component(d,p){return p?(r.components[d]=p,a):r.components[d]},directive(d,p){return p?(r.directives[d]=p,a):r.directives[d]},mount(d,p,_){if(!l){const m=T(o,s);return m.appContext=r,p&&t?t(m,d):e(m,d,_),l=!0,a._container=d,d.__vue_app__=a,Uo(m.component)||m.component.proxy}},unmount(){l&&(e(null,a._container),delete a._container.__vue_app__)},provide(d,p){return r.provides[d]=p,a}};return a}}function Co(e,t,n,o,s=!1){if(te(e)){e.forEach((m,y)=>Co(m,t&&(te(t)?t[y]:t),n,o,s));return}if(fn(o)&&!s)return;const r=o.shapeFlag&4?Uo(o.component)||o.component.proxy:o.el,i=s?null:r,{i:l,r:a}=e,d=t&&t.r,p=l.refs===we?l.refs={}:l.refs,_=l.setupState;if(d!=null&&d!==a&&(Ie(d)?(p[d]=null,ve(_,d)&&(_[d]=null)):he(d)&&(d.value=null)),fe(a))Dt(a,l,12,[i,p]);else{const m=Ie(a),y=he(a);if(m||y){const k=()=>{if(e.f){const M=m?p[a]:a.value;s?te(M)&&Bs(M,r):te(M)?M.includes(r)||M.push(r):m?(p[a]=[r],ve(_,a)&&(_[a]=p[a])):(a.value=[r],e.k&&(p[e.k]=a.value))}else m?(p[a]=i,ve(_,a)&&(_[a]=i)):y&&(a.value=i,e.k&&(p[e.k]=i))};i?(k.id=-1,He(k,n)):k()}}}let Et=!1;const co=e=>/svg/.test(e.namespaceURI)&&e.tagName!=="foreignObject",uo=e=>e.nodeType===8;function hc(e){const{mt:t,p:n,o:{patchProp:o,createText:s,nextSibling:r,parentNode:i,remove:l,insert:a,createComment:d}}=e,p=(w,B)=>{if(!B.hasChildNodes()){n(null,w,B),xo(),B._vnode=w;return}Et=!1,_(B.firstChild,w,null,null,null),xo(),B._vnode=w,Et&&console.error("Hydration completed but contains mismatches.")},_=(w,B,W,Y,K,ie=!1)=>{const z=uo(w)&&w.data==="[",V=()=>M(w,B,W,Y,K,z),{type:D,ref:E,shapeFlag:Q,patchFlag:N}=B,C=w.nodeType;B.el=w,N===-2&&(ie=!1,B.dynamicChildren=null);let x=null;switch(D){case qn:C!==3?B.children===""?(a(B.el=s(""),i(w),w),x=w):x=V():(w.data!==B.children&&(Et=!0,w.data=B.children),x=r(w));break;case qe:C!==8||z?x=V():x=r(w);break;case Ln:if(C!==1&&C!==3)x=V();else{x=w;const ne=!B.children.length;for(let q=0;q<B.staticCount;q++)ne&&(B.children+=x.nodeType===1?x.outerHTML:x.data),q===B.staticCount-1&&(B.anchor=x),x=r(x);return x}break;case ce:z?x=k(w,B,W,Y,K,ie):x=V();break;default:if(Q&1)C!==1||B.type.toLowerCase()!==w.tagName.toLowerCase()?x=V():x=m(w,B,W,Y,K,ie);else if(Q&6){B.slotScopeIds=K;const ne=i(w);if(t(B,ne,null,W,Y,co(ne),ie),x=z?S(w):r(w),x&&uo(x)&&x.data==="teleport end"&&(x=r(x)),fn(B)){let q;z?(q=T(ce),q.anchor=x?x.previousSibling:ne.lastChild):q=w.nodeType===3?Me(""):T("div"),q.el=w,B.component.subTree=q}}else Q&64?C!==8?x=V():x=B.type.hydrate(w,B,W,Y,K,ie,e,y):Q&128&&(x=B.type.hydrate(w,B,W,Y,co(i(w)),K,ie,e,_))}return E!=null&&Co(E,null,Y,B),x},m=(w,B,W,Y,K,ie)=>{ie=ie||!!B.dynamicChildren;const{type:z,props:V,patchFlag:D,shapeFlag:E,dirs:Q}=B,N=z==="input"&&Q||z==="option";if(N||D!==-1){if(Q&&pt(B,null,W,"created"),V)if(N||!ie||D&48)for(const x in V)(N&&x.endsWith("value")||Xn(x)&&!Bn(x))&&o(w,x,null,V[x],!1,void 0,W);else V.onClick&&o(w,"onClick",null,V.onClick,!1,void 0,W);let C;if((C=V&&V.onVnodeBeforeMount)&&Qe(C,W,B),Q&&pt(B,null,W,"beforeMount"),((C=V&&V.onVnodeMounted)||Q)&&Vi(()=>{C&&Qe(C,W,B),Q&&pt(B,null,W,"mounted")},Y),E&16&&!(V&&(V.innerHTML||V.textContent))){let x=y(w.firstChild,B,w,W,Y,K,ie);for(;x;){Et=!0;const ne=x;x=x.nextSibling,l(ne)}}else E&8&&w.textContent!==B.children&&(Et=!0,w.textContent=B.children)}return w.nextSibling},y=(w,B,W,Y,K,ie,z)=>{z=z||!!B.dynamicChildren;const V=B.children,D=V.length;for(let E=0;E<D;E++){const Q=z?V[E]:V[E]=lt(V[E]);if(w)w=_(w,Q,Y,K,ie,z);else{if(Q.type===qn&&!Q.children)continue;Et=!0,n(null,Q,W,null,Y,K,co(W),ie)}}return w},k=(w,B,W,Y,K,ie)=>{const{slotScopeIds:z}=B;z&&(K=K?K.concat(z):z);const V=i(w),D=y(r(w),B,V,W,Y,K,ie);return D&&uo(D)&&D.data==="]"?r(B.anchor=D):(Et=!0,a(B.anchor=d("]"),V,D),D)},M=(w,B,W,Y,K,ie)=>{if(Et=!0,B.el=null,ie){const D=S(w);for(;;){const E=r(w);if(E&&E!==D)l(E);else break}}const z=r(w),V=i(w);return l(w),n(null,B,V,z,W,Y,co(V),K),z},S=w=>{let B=0;for(;w;)if(w=r(w),w&&uo(w)&&(w.data==="["&&B++,w.data==="]")){if(B===0)return r(w);B--}return w};return[p,_]}const He=Vi;function pc(e){return Gi(e)}function vc(e){return Gi(e,hc)}function Gi(e,t){const n=ql();n.__VUE__=!0;const{insert:o,remove:s,patchProp:r,createElement:i,createText:l,createComment:a,setText:d,setElementText:p,parentNode:_,nextSibling:m,setScopeId:y=dt,cloneNode:k,insertStaticContent:M}=e,S=(u,f,g,$=null,P=null,L=null,H=!1,F=null,O=!!f.dynamicChildren)=>{if(u===f)return;u&&!Xt(u,f)&&($=sn(u),ft(u,P,L,!0),u=null),f.patchFlag===-2&&(O=!1,f.dynamicChildren=null);const{type:I,ref:X,shapeFlag:G}=f;switch(I){case qn:w(u,f,g,$);break;case qe:B(u,f,g,$);break;case Ln:u==null&&W(f,g,$,H);break;case ce:C(u,f,g,$,P,L,H,F,O);break;default:G&1?ie(u,f,g,$,P,L,H,F,O):G&6?x(u,f,g,$,P,L,H,F,O):(G&64||G&128)&&I.process(u,f,g,$,P,L,H,F,O,Mt)}X!=null&&P&&Co(X,u&&u.ref,L,f||u,!f)},w=(u,f,g,$)=>{if(u==null)o(f.el=l(f.children),g,$);else{const P=f.el=u.el;f.children!==u.children&&d(P,f.children)}},B=(u,f,g,$)=>{u==null?o(f.el=a(f.children||""),g,$):f.el=u.el},W=(u,f,g,$)=>{[u.el,u.anchor]=M(u.children,f,g,$,u.el,u.anchor)},Y=({el:u,anchor:f},g,$)=>{let P;for(;u&&u!==f;)P=m(u),o(u,g,$),u=P;o(f,g,$)},K=({el:u,anchor:f})=>{let g;for(;u&&u!==f;)g=m(u),s(u),u=g;s(f)},ie=(u,f,g,$,P,L,H,F,O)=>{H=H||f.type==="svg",u==null?z(f,g,$,P,L,H,F,O):E(u,f,P,L,H,F,O)},z=(u,f,g,$,P,L,H,F)=>{let O,I;const{type:X,props:G,shapeFlag:Z,transition:ae,patchFlag:_e,dirs:ye}=u;if(u.el&&k!==void 0&&_e===-1)O=u.el=k(u.el);else{if(O=u.el=i(u.type,L,G&&G.is,G),Z&8?p(O,u.children):Z&16&&D(u.children,O,null,$,P,L&&X!=="foreignObject",H,F),ye&&pt(u,null,$,"created"),G){for(const $e in G)$e!=="value"&&!Bn($e)&&r(O,$e,null,G[$e],L,u.children,$,P,rt);"value"in G&&r(O,"value",null,G.value),(I=G.onVnodeBeforeMount)&&Qe(I,$,u)}V(O,u,u.scopeId,H,$)}ye&&pt(u,null,$,"beforeMount");const xe=(!P||P&&!P.pendingBranch)&&ae&&!ae.persisted;xe&&ae.beforeEnter(O),o(O,f,g),((I=G&&G.onVnodeMounted)||xe||ye)&&He(()=>{I&&Qe(I,$,u),xe&&ae.enter(O),ye&&pt(u,null,$,"mounted")},P)},V=(u,f,g,$,P)=>{if(g&&y(u,g),$)for(let L=0;L<$.length;L++)y(u,$[L]);if(P){let L=P.subTree;if(f===L){const H=P.vnode;V(u,H,H.scopeId,H.slotScopeIds,P.parent)}}},D=(u,f,g,$,P,L,H,F,O=0)=>{for(let I=O;I<u.length;I++){const X=u[I]=F?At(u[I]):lt(u[I]);S(null,X,f,g,$,P,L,H,F)}},E=(u,f,g,$,P,L,H)=>{const F=f.el=u.el;let{patchFlag:O,dynamicChildren:I,dirs:X}=f;O|=u.patchFlag&16;const G=u.props||we,Z=f.props||we;let ae;g&&Kt(g,!1),(ae=Z.onVnodeBeforeUpdate)&&Qe(ae,g,f,u),X&&pt(f,u,g,"beforeUpdate"),g&&Kt(g,!0);const _e=P&&f.type!=="foreignObject";if(I?Q(u.dynamicChildren,I,F,g,$,_e,L):H||Re(u,f,F,null,g,$,_e,L,!1),O>0){if(O&16)N(F,f,G,Z,g,$,P);else if(O&2&&G.class!==Z.class&&r(F,"class",null,Z.class,P),O&4&&r(F,"style",G.style,Z.style,P),O&8){const ye=f.dynamicProps;for(let xe=0;xe<ye.length;xe++){const $e=ye[xe],it=G[$e],rn=Z[$e];(rn!==it||$e==="value")&&r(F,$e,it,rn,P,u.children,g,$,rt)}}O&1&&u.children!==f.children&&p(F,f.children)}else!H&&I==null&&N(F,f,G,Z,g,$,P);((ae=Z.onVnodeUpdated)||X)&&He(()=>{ae&&Qe(ae,g,f,u),X&&pt(f,u,g,"updated")},$)},Q=(u,f,g,$,P,L,H)=>{for(let F=0;F<f.length;F++){const O=u[F],I=f[F],X=O.el&&(O.type===ce||!Xt(O,I)||O.shapeFlag&70)?_(O.el):g;S(O,I,X,null,$,P,L,H,!0)}},N=(u,f,g,$,P,L,H)=>{if(g!==$){for(const F in $){if(Bn(F))continue;const O=$[F],I=g[F];O!==I&&F!=="value"&&r(u,F,I,O,H,f.children,P,L,rt)}if(g!==we)for(const F in g)!Bn(F)&&!(F in $)&&r(u,F,g[F],null,H,f.children,P,L,rt);"value"in $&&r(u,"value",g.value,$.value)}},C=(u,f,g,$,P,L,H,F,O)=>{const I=f.el=u?u.el:l(""),X=f.anchor=u?u.anchor:l("");let{patchFlag:G,dynamicChildren:Z,slotScopeIds:ae}=f;ae&&(F=F?F.concat(ae):ae),u==null?(o(I,g,$),o(X,g,$),D(f.children,g,X,P,L,H,F,O)):G>0&&G&64&&Z&&u.dynamicChildren?(Q(u.dynamicChildren,Z,g,P,L,H,F),(f.key!=null||P&&f===P.subTree)&&Yi(u,f,!0)):Re(u,f,g,X,P,L,H,F,O)},x=(u,f,g,$,P,L,H,F,O)=>{f.slotScopeIds=F,u==null?f.shapeFlag&512?P.ctx.activate(f,g,$,H,O):ne(f,g,$,P,L,H,O):q(u,f,O)},ne=(u,f,g,$,P,L,H)=>{const F=u.component=kc(u,$,P);if(Ro(u)&&(F.ctx.renderer=Mt),Cc(F),F.asyncDep){if(P&&P.registerDep(F,be),!u.el){const O=F.subTree=T(qe);B(null,O,f,g)}return}be(F,u,f,g,P,L,H)},q=(u,f,g)=>{const $=f.component=u.component;if(Ra(u,f,g))if($.asyncDep&&!$.asyncResolved){ue($,f,g);return}else $.next=f,Ta($.update),$.update();else f.el=u.el,$.vnode=f},be=(u,f,g,$,P,L,H)=>{const F=()=>{if(u.isMounted){let{next:X,bu:G,u:Z,parent:ae,vnode:_e}=u,ye=X,xe;Kt(u,!1),X?(X.el=_e.el,ue(u,X,H)):X=_e,G&&_o(G),(xe=X.props&&X.props.onVnodeBeforeUpdate)&&Qe(xe,ae,X,_e),Kt(u,!0);const $e=Xo(u),it=u.subTree;u.subTree=$e,S(it,$e,_(it.el),sn(it),u,P,L),X.el=$e.el,ye===null&&Ha(u,$e.el),Z&&He(Z,P),(xe=X.props&&X.props.onVnodeUpdated)&&He(()=>Qe(xe,ae,X,_e),P)}else{let X;const{el:G,props:Z}=f,{bm:ae,m:_e,parent:ye}=u,xe=fn(f);if(Kt(u,!1),ae&&_o(ae),!xe&&(X=Z&&Z.onVnodeBeforeMount)&&Qe(X,ye,f),Kt(u,!0),G&&A){const $e=()=>{u.subTree=Xo(u),A(G,u.subTree,u,P,null)};xe?f.type.__asyncLoader().then(()=>!u.isUnmounted&&$e()):$e()}else{const $e=u.subTree=Xo(u);S(null,$e,g,$,u,P,L),f.el=$e.el}if(_e&&He(_e,P),!xe&&(X=Z&&Z.onVnodeMounted)){const $e=f;He(()=>Qe(X,ye,$e),P)}(f.shapeFlag&256||ye&&fn(ye.vnode)&&ye.vnode.shapeFlag&256)&&u.a&&He(u.a,P),u.isMounted=!0,f=g=$=null}},O=u.effect=new Ls(F,()=>$i(I),u.scope),I=u.update=()=>O.run();I.id=u.uid,Kt(u,!0),I()},ue=(u,f,g)=>{f.component=u;const $=u.vnode.props;u.vnode=f,u.next=null,lc(u,f.props,$,g),uc(u,f.children,g),bn(),Fo(void 0,u.update),yn()},Re=(u,f,g,$,P,L,H,F,O=!1)=>{const I=u&&u.children,X=u?u.shapeFlag:0,G=f.children,{patchFlag:Z,shapeFlag:ae}=f;if(Z>0){if(Z&128){yt(I,G,g,$,P,L,H,F,O);return}else if(Z&256){Pe(I,G,g,$,P,L,H,F,O);return}}ae&8?(X&16&&rt(I,P,L),G!==I&&p(g,G)):X&16?ae&16?yt(I,G,g,$,P,L,H,F,O):rt(I,P,L,!0):(X&8&&p(g,""),ae&16&&D(G,g,$,P,L,H,F,O))},Pe=(u,f,g,$,P,L,H,F,O)=>{u=u||un,f=f||un;const I=u.length,X=f.length,G=Math.min(I,X);let Z;for(Z=0;Z<G;Z++){const ae=f[Z]=O?At(f[Z]):lt(f[Z]);S(u[Z],ae,g,null,P,L,H,F,O)}I>X?rt(u,P,L,!0,!1,G):D(f,g,$,P,L,H,F,O,G)},yt=(u,f,g,$,P,L,H,F,O)=>{let I=0;const X=f.length;let G=u.length-1,Z=X-1;for(;I<=G&&I<=Z;){const ae=u[I],_e=f[I]=O?At(f[I]):lt(f[I]);if(Xt(ae,_e))S(ae,_e,g,null,P,L,H,F,O);else break;I++}for(;I<=G&&I<=Z;){const ae=u[G],_e=f[Z]=O?At(f[Z]):lt(f[Z]);if(Xt(ae,_e))S(ae,_e,g,null,P,L,H,F,O);else break;G--,Z--}if(I>G){if(I<=Z){const ae=Z+1,_e=ae<X?f[ae].el:$;for(;I<=Z;)S(null,f[I]=O?At(f[I]):lt(f[I]),g,_e,P,L,H,F,O),I++}}else if(I>Z)for(;I<=G;)ft(u[I],P,L,!0),I++;else{const ae=I,_e=I,ye=new Map;for(I=_e;I<=Z;I++){const je=f[I]=O?At(f[I]):lt(f[I]);je.key!=null&&ye.set(je.key,I)}let xe,$e=0;const it=Z-_e+1;let rn=!1,Zs=0;const Sn=new Array(it);for(I=0;I<it;I++)Sn[I]=0;for(I=ae;I<=G;I++){const je=u[I];if($e>=it){ft(je,P,L,!0);continue}let ht;if(je.key!=null)ht=ye.get(je.key);else for(xe=_e;xe<=Z;xe++)if(Sn[xe-_e]===0&&Xt(je,f[xe])){ht=xe;break}ht===void 0?ft(je,P,L,!0):(Sn[ht-_e]=I+1,ht>=Zs?Zs=ht:rn=!0,S(je,f[ht],g,null,P,L,H,F,O),$e++)}const er=rn?_c(Sn):un;for(xe=er.length-1,I=it-1;I>=0;I--){const je=_e+I,ht=f[je],tr=je+1<X?f[je+1].el:$;Sn[I]===0?S(null,ht,g,tr,P,L,H,F,O):rn&&(xe<0||I!==er[xe]?It(ht,g,tr,2):xe--)}}},It=(u,f,g,$,P=null)=>{const{el:L,type:H,transition:F,children:O,shapeFlag:I}=u;if(I&6){It(u.component.subTree,f,g,$);return}if(I&128){u.suspense.move(f,g,$);return}if(I&64){H.move(u,f,g,Mt);return}if(H===ce){o(L,f,g);for(let G=0;G<O.length;G++)It(O[G],f,g,$);o(u.anchor,f,g);return}if(H===Ln){Y(u,f,g);return}if($!==2&&I&1&&F)if($===0)F.beforeEnter(L),o(L,f,g),He(()=>F.enter(L),P);else{const{leave:G,delayLeave:Z,afterLeave:ae}=F,_e=()=>o(L,f,g),ye=()=>{G(L,()=>{_e(),ae&&ae()})};Z?Z(L,_e,ye):ye()}else o(L,f,g)},ft=(u,f,g,$=!1,P=!1)=>{const{type:L,props:H,ref:F,children:O,dynamicChildren:I,shapeFlag:X,patchFlag:G,dirs:Z}=u;if(F!=null&&Co(F,null,g,u,!0),X&256){f.ctx.deactivate(u);return}const ae=X&1&&Z,_e=!fn(u);let ye;if(_e&&(ye=H&&H.onVnodeBeforeUnmount)&&Qe(ye,f,u),X&6)Go(u.component,g,$);else{if(X&128){u.suspense.unmount(g,$);return}ae&&pt(u,null,f,"beforeUnmount"),X&64?u.type.remove(u,f,g,P,Mt,$):I&&(L!==ce||G>0&&G&64)?rt(I,f,g,!1,!0):(L===ce&&G&384||!P&&X&16)&&rt(O,f,g),$&&no(u)}(_e&&(ye=H&&H.onVnodeUnmounted)||ae)&&He(()=>{ye&&Qe(ye,f,u),ae&&pt(u,null,f,"unmounted")},g)},no=u=>{const{type:f,el:g,anchor:$,transition:P}=u;if(f===ce){oo(g,$);return}if(f===Ln){K(u);return}const L=()=>{s(g),P&&!P.persisted&&P.afterLeave&&P.afterLeave()};if(u.shapeFlag&1&&P&&!P.persisted){const{leave:H,delayLeave:F}=P,O=()=>H(g,L);F?F(u.el,L,O):O()}else L()},oo=(u,f)=>{let g;for(;u!==f;)g=m(u),s(u),u=g;s(f)},Go=(u,f,g)=>{const{bum:$,scope:P,update:L,subTree:H,um:F}=u;$&&_o($),P.stop(),L&&(L.active=!1,ft(H,u,f,g)),F&&He(F,f),He(()=>{u.isUnmounted=!0},f),f&&f.pendingBranch&&!f.isUnmounted&&u.asyncDep&&!u.asyncResolved&&u.suspenseId===f.pendingId&&(f.deps--,f.deps===0&&f.resolve())},rt=(u,f,g,$=!1,P=!1,L=0)=>{for(let H=L;H<u.length;H++)ft(u[H],f,g,$,P)},sn=u=>u.shapeFlag&6?sn(u.component.subTree):u.shapeFlag&128?u.suspense.next():m(u.anchor||u.el),kn=(u,f,g)=>{u==null?f._vnode&&ft(f._vnode,null,null,!0):S(f._vnode||null,u,f,null,null,null,g),xo(),f._vnode=u},Mt={p:S,um:ft,m:It,r:no,mt:ne,mc:D,pc:Re,pbc:Q,n:sn,o:e};let Cn,A;return t&&([Cn,A]=t(Mt)),{render:kn,hydrate:Cn,createApp:fc(kn,Cn)}}function Kt({effect:e,update:t},n){e.allowRecurse=t.allowRecurse=n}function Yi(e,t,n=!1){const o=e.children,s=t.children;if(te(o)&&te(s))for(let r=0;r<o.length;r++){const i=o[r];let l=s[r];l.shapeFlag&1&&!l.dynamicChildren&&((l.patchFlag<=0||l.patchFlag===32)&&(l=s[r]=At(s[r]),l.el=i.el),n||Yi(i,l))}}function _c(e){const t=e.slice(),n=[0];let o,s,r,i,l;const a=e.length;for(o=0;o<a;o++){const d=e[o];if(d!==0){if(s=n[n.length-1],e[s]<d){t[o]=s,n.push(o);continue}for(r=0,i=n.length-1;r<i;)l=r+i>>1,e[n[l]]<d?r=l+1:i=l;d<e[n[r]]&&(r>0&&(t[o]=n[r-1]),n[r]=o)}}for(r=n.length,i=n[r-1];r-- >0;)n[r]=i,i=t[i];return n}const mc=e=>e.__isTeleport,ce=Symbol(void 0),qn=Symbol(void 0),qe=Symbol(void 0),Ln=Symbol(void 0),Fn=[];let ut=null;function v(e=!1){Fn.push(ut=e?null:[])}function gc(){Fn.pop(),ut=Fn[Fn.length-1]||null}let Gn=1;function wr(e){Gn+=e}function Xi(e){return e.dynamicChildren=Gn>0?ut||un:null,gc(),Gn>0&&ut&&ut.push(e),e}function b(e,t,n,o,s,r){return Xi(h(e,t,n,o,s,r,!0))}function de(e,t,n,o,s){return Xi(T(e,t,n,o,s,!0))}function So(e){return e?e.__v_isVNode===!0:!1}function Xt(e,t){return e.type===t.type&&e.key===t.key}const zo="__vInternal",Ji=({key:e})=>e!=null?e:null,mo=({ref:e,ref_key:t,ref_for:n})=>e!=null?Ie(e)||he(e)||fe(e)?{i:Ne,r:e,k:t,f:!!n}:e:null;function h(e,t=null,n=null,o=0,s=null,r=e===ce?0:1,i=!1,l=!1){const a={__v_isVNode:!0,__v_skip:!0,type:e,props:t,key:t&&Ji(t),ref:t&&mo(t),scopeId:No,slotScopeIds:null,children:n,component:null,suspense:null,ssContent:null,ssFallback:null,dirs:null,transition:null,el:null,anchor:null,target:null,targetAnchor:null,staticCount:0,shapeFlag:r,patchFlag:o,dynamicProps:s,dynamicChildren:null,appContext:null};return l?(Ws(a,n),r&128&&e.normalize(a)):n&&(a.shapeFlag|=Ie(n)?8:16),Gn>0&&!i&&ut&&(a.patchFlag>0||r&6)&&a.patchFlag!==32&&ut.push(a),a}const T=bc;function bc(e,t=null,n=null,o=0,s=null,r=!1){if((!e||e===Ni)&&(e=qe),So(e)){const l=jt(e,t,!0);return n&&Ws(l,n),Gn>0&&!r&&ut&&(l.shapeFlag&6?ut[ut.indexOf(e)]=l:ut.push(l)),l.patchFlag|=-2,l}if(Mc(e)&&(e=e.__vccOpts),t){t=yc(t);let{class:l,style:a}=t;l&&!Ie(l)&&(t.class=re(l)),Ce(a)&&(mi(a)&&!te(a)&&(a=Le({},a)),t.style=Ee(a))}const i=Ie(e)?1:Da(e)?128:mc(e)?64:Ce(e)?4:fe(e)?2:0;return h(e,t,n,o,s,i,r,!0)}function yc(e){return e?mi(e)||zo in e?Le({},e):e:null}function jt(e,t,n=!1){const{props:o,ref:s,patchFlag:r,children:i}=e,l=t?go(o||{},t):o;return{__v_isVNode:!0,__v_skip:!0,type:e.type,props:l,key:l&&Ji(l),ref:t&&t.ref?n&&s?te(s)?s.concat(mo(t)):[s,mo(t)]:mo(t):s,scopeId:e.scopeId,slotScopeIds:e.slotScopeIds,children:i,target:e.target,targetAnchor:e.targetAnchor,staticCount:e.staticCount,shapeFlag:e.shapeFlag,patchFlag:t&&e.type!==ce?r===-1?16:r|16:r,dynamicProps:e.dynamicProps,dynamicChildren:e.dynamicChildren,appContext:e.appContext,dirs:e.dirs,transition:e.transition,component:e.component,suspense:e.suspense,ssContent:e.ssContent&&jt(e.ssContent),ssFallback:e.ssFallback&&jt(e.ssFallback),el:e.el,anchor:e.anchor}}function Me(e=" ",t=0){return T(qn,null,e,t)}function xc(e,t){const n=T(Ln,null,e);return n.staticCount=t,n}function ee(e="",t=!1){return t?(v(),de(qe,null,e)):T(qe,null,e)}function lt(e){return e==null||typeof e=="boolean"?T(qe):te(e)?T(ce,null,e.slice()):typeof e=="object"?At(e):T(qn,null,String(e))}function At(e){return e.el===null||e.memo?e:jt(e)}function Ws(e,t){let n=0;const{shapeFlag:o}=e;if(t==null)t=null;else if(te(t))n=16;else if(typeof t=="object")if(o&65){const s=t.default;s&&(s._c&&(s._d=!1),Ws(e,s()),s._c&&(s._d=!0));return}else{n=32;const s=t._;!s&&!(zo in t)?t._ctx=Ne:s===3&&Ne&&(Ne.slots._===1?t._=1:(t._=2,e.patchFlag|=1024))}else fe(t)?(t={default:t,_ctx:Ne},n=32):(t=String(t),o&64?(n=16,t=[Me(t)]):n=8);e.children=t,e.shapeFlag|=n}function go(...e){const t={};for(let n=0;n<e.length;n++){const o=e[n];for(const s in o)if(s==="class")t.class!==o.class&&(t.class=re([t.class,o.class]));else if(s==="style")t.style=Ee([t.style,o.style]);else if(Xn(s)){const r=t[s],i=o[s];i&&r!==i&&!(te(r)&&r.includes(i))&&(t[s]=r?[].concat(r,i):i)}else s!==""&&(t[s]=o[s])}return t}function Qe(e,t,n,o=null){et(e,t,7,[n,o])}const wc=qi();let $c=0;function kc(e,t,n){const o=e.type,s=(t?t.appContext:e.appContext)||wc,r={uid:$c++,vnode:e,type:o,parent:t,appContext:s,root:null,next:null,subTree:null,effect:null,update:null,scope:new ri(!0),render:null,proxy:null,exposed:null,exposeProxy:null,withProxy:null,provides:t?t.provides:Object.create(s.provides),accessCache:null,renderCache:[],components:null,directives:null,propsOptions:ji(o,s),emitsOptions:Pi(o,s),emit:null,emitted:null,propsDefaults:we,inheritAttrs:o.inheritAttrs,ctx:we,data:we,props:we,attrs:we,slots:we,refs:we,setupState:we,setupContext:null,suspense:n,suspenseId:n?n.pendingId:0,asyncDep:null,asyncResolved:!1,isMounted:!1,isUnmounted:!1,isDeactivated:!1,bc:null,c:null,bm:null,m:null,bu:null,u:null,um:null,bum:null,da:null,a:null,rtg:null,rtc:null,ec:null,sp:null};return r.ctx={_:r},r.root=t?t.root:r,r.emit=Aa.bind(null,r),e.ce&&e.ce(r),r}let Be=null;const jo=()=>Be||Ne,pn=e=>{Be=e,e.scope.on()},tn=()=>{Be&&Be.scope.off(),Be=null};function Qi(e){return e.vnode.shapeFlag&4}let Yn=!1;function Cc(e,t=!1){Yn=t;const{props:n,children:o}=e.vnode,s=Qi(e);ic(e,n,s,t),cc(e,o);const r=s?Sc(e,t):void 0;return Yn=!1,r}function Sc(e,t){const n=e.type;e.accessCache=Object.create(null),e.proxy=kt(new Proxy(e.ctx,ec));const{setup:o}=n;if(o){const s=e.setupContext=o.length>1?Vc(e):null;pn(e),bn();const r=Dt(o,e,0,[e.props,s]);if(yn(),tn(),ni(r)){if(r.then(tn,tn),t)return r.then(i=>{$r(e,i,t)}).catch(i=>{Lo(i,e,0)});e.asyncDep=r}else $r(e,r,t)}else Zi(e,t)}function $r(e,t,n){fe(t)?e.type.__ssrInlineRender?e.ssrRender=t:e.render=t:Ce(t)&&(e.setupState=xi(t)),Zi(e,n)}let kr;function Zi(e,t,n){const o=e.type;if(!e.render){if(!t&&kr&&!o.render){const s=o.template;if(s){const{isCustomElement:r,compilerOptions:i}=e.appContext.config,{delimiters:l,compilerOptions:a}=o,d=Le(Le({isCustomElement:r,delimiters:l},i),a);o.render=kr(s,d)}}e.render=o.render||dt}pn(e),bn(),tc(e),yn(),tn()}function Pc(e){return new Proxy(e.attrs,{get(t,n){return Ge(e,"get","$attrs"),t[n]}})}function Vc(e){const t=o=>{e.exposed=o||{}};let n;return{get attrs(){return n||(n=Pc(e))},slots:e.slots,emit:e.emit,expose:t}}function Uo(e){if(e.exposed)return e.exposeProxy||(e.exposeProxy=new Proxy(xi(kt(e.exposed)),{get(t,n){if(n in t)return t[n];if(n in $o)return $o[n](e)}}))}function Ic(e,t=!0){return fe(e)?e.displayName||e.name:e.name||t&&e.__name}function Mc(e){return fe(e)&&"__vccOpts"in e}const se=(e,t)=>Ma(e,t,Yn);function Ut(e,t,n){const o=arguments.length;return o===2?Ce(t)&&!te(t)?So(t)?T(e,null,[t]):T(e,t):T(e,null,t):(o>3?n=Array.prototype.slice.call(arguments,2):o===3&&So(n)&&(n=[n]),T(e,t,n))}const Bc="3.2.37",Ec="http://www.w3.org/2000/svg",Jt=typeof document!="undefined"?document:null,Cr=Jt&&Jt.createElement("template"),Tc={insert:(e,t,n)=>{t.insertBefore(e,n||null)},remove:e=>{const t=e.parentNode;t&&t.removeChild(e)},createElement:(e,t,n,o)=>{const s=t?Jt.createElementNS(Ec,e):Jt.createElement(e,n?{is:n}:void 0);return e==="select"&&o&&o.multiple!=null&&s.setAttribute("multiple",o.multiple),s},createText:e=>Jt.createTextNode(e),createComment:e=>Jt.createComment(e),setText:(e,t)=>{e.nodeValue=t},setElementText:(e,t)=>{e.textContent=t},parentNode:e=>e.parentNode,nextSibling:e=>e.nextSibling,querySelector:e=>Jt.querySelector(e),setScopeId(e,t){e.setAttribute(t,"")},cloneNode(e){const t=e.cloneNode(!0);return"_value"in e&&(t._value=e._value),t},insertStaticContent(e,t,n,o,s,r){const i=n?n.previousSibling:t.lastChild;if(s&&(s===r||s.nextSibling))for(;t.insertBefore(s.cloneNode(!0),n),!(s===r||!(s=s.nextSibling)););else{Cr.innerHTML=o?`<svg>${e}</svg>`:e;const l=Cr.content;if(o){const a=l.firstChild;for(;a.firstChild;)l.appendChild(a.firstChild);l.removeChild(a)}t.insertBefore(l,n)}return[i?i.nextSibling:t.firstChild,n?n.previousSibling:t.lastChild]}};function Lc(e,t,n){const o=e._vtc;o&&(t=(t?[t,...o]:[...o]).join(" ")),t==null?e.removeAttribute("class"):n?e.setAttribute("class",t):e.className=t}function Fc(e,t,n){const o=e.style,s=Ie(n);if(n&&!s){for(const r in n)bs(o,r,n[r]);if(t&&!Ie(t))for(const r in t)n[r]==null&&bs(o,r,"")}else{const r=o.display;s?t!==n&&(o.cssText=n):t&&e.removeAttribute("style"),"_vod"in e&&(o.display=r)}}const Sr=/\s*!important$/;function bs(e,t,n){if(te(n))n.forEach(o=>bs(e,t,o));else if(n==null&&(n=""),t.startsWith("--"))e.setProperty(t,n);else{const o=Ac(e,t);Sr.test(n)?e.setProperty(gn(o),n.replace(Sr,""),"important"):e[o]=n}}const Pr=["Webkit","Moz","ms"],Qo={};function Ac(e,t){const n=Qo[t];if(n)return n;let o=vt(t);if(o!=="filter"&&o in e)return Qo[t]=o;o=Eo(o);for(let s=0;s<Pr.length;s++){const r=Pr[s]+o;if(r in e)return Qo[t]=r}return t}const Vr="http://www.w3.org/1999/xlink";function Nc(e,t,n,o,s){if(o&&t.startsWith("xlink:"))n==null?e.removeAttributeNS(Vr,t.slice(6,t.length)):e.setAttributeNS(Vr,t,n);else{const r=Al(t);n==null||r&&!ei(n)?e.removeAttribute(t):e.setAttribute(t,r?"":n)}}function Oc(e,t,n,o,s,r,i){if(t==="innerHTML"||t==="textContent"){o&&i(o,s,r),e[t]=n==null?"":n;return}if(t==="value"&&e.tagName!=="PROGRESS"&&!e.tagName.includes("-")){e._value=n;const a=n==null?"":n;(e.value!==a||e.tagName==="OPTION")&&(e.value=a),n==null&&e.removeAttribute(t);return}let l=!1;if(n===""||n==null){const a=typeof e[t];a==="boolean"?n=ei(n):n==null&&a==="string"?(n="",l=!0):a==="number"&&(n=0,l=!0)}try{e[t]=n}catch{}l&&e.removeAttribute(t)}const[el,Rc]=(()=>{let e=Date.now,t=!1;if(typeof window!="undefined"){Date.now()>document.createEvent("Event").timeStamp&&(e=performance.now.bind(performance));const n=navigator.userAgent.match(/firefox\/(\d+)/i);t=!!(n&&Number(n[1])<=53)}return[e,t]})();let ys=0;const Hc=Promise.resolve(),Dc=()=>{ys=0},zc=()=>ys||(Hc.then(Dc),ys=el());function $t(e,t,n,o){e.addEventListener(t,n,o)}function jc(e,t,n,o){e.removeEventListener(t,n,o)}function Uc(e,t,n,o,s=null){const r=e._vei||(e._vei={}),i=r[t];if(o&&i)i.value=o;else{const[l,a]=Wc(t);if(o){const d=r[t]=Kc(o,s);$t(e,l,d,a)}else i&&(jc(e,l,i,a),r[t]=void 0)}}const Ir=/(?:Once|Passive|Capture)$/;function Wc(e){let t;if(Ir.test(e)){t={};let n;for(;n=e.match(Ir);)e=e.slice(0,e.length-n[0].length),t[n[0].toLowerCase()]=!0}return[gn(e.slice(2)),t]}function Kc(e,t){const n=o=>{const s=o.timeStamp||el();(Rc||s>=n.attached-1)&&et(qc(o,n.value),t,5,[o])};return n.value=e,n.attached=zc(),n}function qc(e,t){if(te(t)){const n=e.stopImmediatePropagation;return e.stopImmediatePropagation=()=>{n.call(e),e._stopped=!0},t.map(o=>s=>!s._stopped&&o&&o(s))}else return t}const Mr=/^on[a-z]/,Gc=(e,t,n,o,s=!1,r,i,l,a)=>{t==="class"?Lc(e,o,s):t==="style"?Fc(e,n,o):Xn(t)?Ms(t)||Uc(e,t,n,o,i):(t[0]==="."?(t=t.slice(1),!0):t[0]==="^"?(t=t.slice(1),!1):Yc(e,t,o,s))?Oc(e,t,o,r,i,l,a):(t==="true-value"?e._trueValue=o:t==="false-value"&&(e._falseValue=o),Nc(e,t,o,s))};function Yc(e,t,n,o){return o?!!(t==="innerHTML"||t==="textContent"||t in e&&Mr.test(t)&&fe(n)):t==="spellcheck"||t==="draggable"||t==="translate"||t==="form"||t==="list"&&e.tagName==="INPUT"||t==="type"&&e.tagName==="TEXTAREA"||Mr.test(t)&&Ie(n)?!1:t in e}const Tt="transition",Pn="animation",Vt=(e,{slots:t})=>Ut(Mi,Xc(e),t);Vt.displayName="Transition";const tl={name:String,type:String,css:{type:Boolean,default:!0},duration:[String,Number,Object],enterFromClass:String,enterActiveClass:String,enterToClass:String,appearFromClass:String,appearActiveClass:String,appearToClass:String,leaveFromClass:String,leaveActiveClass:String,leaveToClass:String};Vt.props=Le({},Mi.props,tl);const qt=(e,t=[])=>{te(e)?e.forEach(n=>n(...t)):e&&e(...t)},Br=e=>e?te(e)?e.some(t=>t.length>1):e.length>1:!1;function Xc(e){const t={};for(const N in e)N in tl||(t[N]=e[N]);if(e.css===!1)return t;const{name:n="v",type:o,duration:s,enterFromClass:r=`${n}-enter-from`,enterActiveClass:i=`${n}-enter-active`,enterToClass:l=`${n}-enter-to`,appearFromClass:a=r,appearActiveClass:d=i,appearToClass:p=l,leaveFromClass:_=`${n}-leave-from`,leaveActiveClass:m=`${n}-leave-active`,leaveToClass:y=`${n}-leave-to`}=e,k=Jc(s),M=k&&k[0],S=k&&k[1],{onBeforeEnter:w,onEnter:B,onEnterCancelled:W,onLeave:Y,onLeaveCancelled:K,onBeforeAppear:ie=w,onAppear:z=B,onAppearCancelled:V=W}=t,D=(N,C,x)=>{Gt(N,C?p:l),Gt(N,C?d:i),x&&x()},E=(N,C)=>{N._isLeaving=!1,Gt(N,_),Gt(N,y),Gt(N,m),C&&C()},Q=N=>(C,x)=>{const ne=N?z:B,q=()=>D(C,N,x);qt(ne,[C,q]),Er(()=>{Gt(C,N?a:r),Lt(C,N?p:l),Br(ne)||Tr(C,o,M,q)})};return Le(t,{onBeforeEnter(N){qt(w,[N]),Lt(N,r),Lt(N,i)},onBeforeAppear(N){qt(ie,[N]),Lt(N,a),Lt(N,d)},onEnter:Q(!1),onAppear:Q(!0),onLeave(N,C){N._isLeaving=!0;const x=()=>E(N,C);Lt(N,_),eu(),Lt(N,m),Er(()=>{!N._isLeaving||(Gt(N,_),Lt(N,y),Br(Y)||Tr(N,o,S,x))}),qt(Y,[N,x])},onEnterCancelled(N){D(N,!1),qt(W,[N])},onAppearCancelled(N){D(N,!0),qt(V,[N])},onLeaveCancelled(N){E(N),qt(K,[N])}})}function Jc(e){if(e==null)return null;if(Ce(e))return[Zo(e.enter),Zo(e.leave)];{const t=Zo(e);return[t,t]}}function Zo(e){return jn(e)}function Lt(e,t){t.split(/\s+/).forEach(n=>n&&e.classList.add(n)),(e._vtc||(e._vtc=new Set)).add(t)}function Gt(e,t){t.split(/\s+/).forEach(o=>o&&e.classList.remove(o));const{_vtc:n}=e;n&&(n.delete(t),n.size||(e._vtc=void 0))}function Er(e){requestAnimationFrame(()=>{requestAnimationFrame(e)})}let Qc=0;function Tr(e,t,n,o){const s=e._endId=++Qc,r=()=>{s===e._endId&&o()};if(n)return setTimeout(r,n);const{type:i,timeout:l,propCount:a}=Zc(e,t);if(!i)return o();const d=i+"end";let p=0;const _=()=>{e.removeEventListener(d,m),r()},m=y=>{y.target===e&&++p>=a&&_()};setTimeout(()=>{p<a&&_()},l+1),e.addEventListener(d,m)}function Zc(e,t){const n=window.getComputedStyle(e),o=k=>(n[k]||"").split(", "),s=o(Tt+"Delay"),r=o(Tt+"Duration"),i=Lr(s,r),l=o(Pn+"Delay"),a=o(Pn+"Duration"),d=Lr(l,a);let p=null,_=0,m=0;t===Tt?i>0&&(p=Tt,_=i,m=r.length):t===Pn?d>0&&(p=Pn,_=d,m=a.length):(_=Math.max(i,d),p=_>0?i>d?Tt:Pn:null,m=p?p===Tt?r.length:a.length:0);const y=p===Tt&&/\b(transform|all)(,|$)/.test(n[Tt+"Property"]);return{type:p,timeout:_,propCount:m,hasTransform:y}}function Lr(e,t){for(;e.length<t.length;)e=e.concat(e);return Math.max(...t.map((n,o)=>Fr(n)+Fr(e[o])))}function Fr(e){return Number(e.slice(0,-1).replace(",","."))*1e3}function eu(){return document.body.offsetHeight}const Wt=e=>{const t=e.props["onUpdate:modelValue"]||!1;return te(t)?n=>_o(t,n):t};function tu(e){e.target.composing=!0}function Ar(e){const t=e.target;t.composing&&(t.composing=!1,t.dispatchEvent(new Event("input")))}const xs={created(e,{modifiers:{lazy:t,trim:n,number:o}},s){e._assign=Wt(s);const r=o||s.props&&s.props.type==="number";$t(e,t?"change":"input",i=>{if(i.target.composing)return;let l=e.value;n&&(l=l.trim()),r&&(l=jn(l)),e._assign(l)}),n&&$t(e,"change",()=>{e.value=e.value.trim()}),t||($t(e,"compositionstart",tu),$t(e,"compositionend",Ar),$t(e,"change",Ar))},mounted(e,{value:t}){e.value=t==null?"":t},beforeUpdate(e,{value:t,modifiers:{lazy:n,trim:o,number:s}},r){if(e._assign=Wt(r),e.composing||document.activeElement===e&&e.type!=="range"&&(n||o&&e.value.trim()===t||(s||e.type==="number")&&jn(e.value)===t))return;const i=t==null?"":t;e.value!==i&&(e.value=i)}},Ks={deep:!0,created(e,t,n){e._assign=Wt(n),$t(e,"change",()=>{const o=e._modelValue,s=vn(e),r=e.checked,i=e._assign;if(te(o)){const l=Is(o,s),a=l!==-1;if(r&&!a)i(o.concat(s));else if(!r&&a){const d=[...o];d.splice(l,1),i(d)}}else if(mn(o)){const l=new Set(o);r?l.add(s):l.delete(s),i(l)}else i(ol(e,r))})},mounted:Nr,beforeUpdate(e,t,n){e._assign=Wt(n),Nr(e,t,n)}};function Nr(e,{value:t,oldValue:n},o){e._modelValue=t,te(t)?e.checked=Is(t,o.props.value)>-1:mn(t)?e.checked=t.has(o.props.value):t!==n&&(e.checked=on(t,ol(e,!0)))}const nl={created(e,{value:t},n){e.checked=on(t,n.props.value),e._assign=Wt(n),$t(e,"change",()=>{e._assign(vn(e))})},beforeUpdate(e,{value:t,oldValue:n},o){e._assign=Wt(o),t!==n&&(e.checked=on(t,o.props.value))}},nu={deep:!0,created(e,{value:t,modifiers:{number:n}},o){const s=mn(t);$t(e,"change",()=>{const r=Array.prototype.filter.call(e.options,i=>i.selected).map(i=>n?jn(vn(i)):vn(i));e._assign(e.multiple?s?new Set(r):r:r[0])}),e._assign=Wt(o)},mounted(e,{value:t}){Or(e,t)},beforeUpdate(e,t,n){e._assign=Wt(n)},updated(e,{value:t}){Or(e,t)}};function Or(e,t){const n=e.multiple;if(!(n&&!te(t)&&!mn(t))){for(let o=0,s=e.options.length;o<s;o++){const r=e.options[o],i=vn(r);if(n)te(t)?r.selected=Is(t,i)>-1:r.selected=t.has(i);else if(on(vn(r),t)){e.selectedIndex!==o&&(e.selectedIndex=o);return}}!n&&e.selectedIndex!==-1&&(e.selectedIndex=-1)}}function vn(e){return"_value"in e?e._value:e.value}function ol(e,t){const n=t?"_trueValue":"_falseValue";return n in e?e[n]:t}const ou={created(e,t,n){fo(e,t,n,null,"created")},mounted(e,t,n){fo(e,t,n,null,"mounted")},beforeUpdate(e,t,n,o){fo(e,t,n,o,"beforeUpdate")},updated(e,t,n,o){fo(e,t,n,o,"updated")}};function su(e,t){switch(e){case"SELECT":return nu;case"TEXTAREA":return xs;default:switch(t){case"checkbox":return Ks;case"radio":return nl;default:return xs}}}function fo(e,t,n,o,s){const i=su(e.tagName,n.props&&n.props.type)[s];i&&i(e,t,n,o)}const ru=["ctrl","shift","alt","meta"],iu={stop:e=>e.stopPropagation(),prevent:e=>e.preventDefault(),self:e=>e.target!==e.currentTarget,ctrl:e=>!e.ctrlKey,shift:e=>!e.shiftKey,alt:e=>!e.altKey,meta:e=>!e.metaKey,left:e=>"button"in e&&e.button!==0,middle:e=>"button"in e&&e.button!==1,right:e=>"button"in e&&e.button!==2,exact:(e,t)=>ru.some(n=>e[`${n}Key`]&&!t.includes(n))},at=(e,t)=>(n,...o)=>{for(let s=0;s<t.length;s++){const r=iu[t[s]];if(r&&r(n,t))return}return e(n,...o)},Ae={beforeMount(e,{value:t},{transition:n}){e._vod=e.style.display==="none"?"":e.style.display,n&&t?n.beforeEnter(e):Vn(e,t)},mounted(e,{value:t},{transition:n}){n&&t&&n.enter(e)},updated(e,{value:t,oldValue:n},{transition:o}){!t!=!n&&(o?t?(o.beforeEnter(e),Vn(e,!0),o.enter(e)):o.leave(e,()=>{Vn(e,!1)}):Vn(e,t))},beforeUnmount(e,{value:t}){Vn(e,t)}};function Vn(e,t){e.style.display=t?e._vod:"none"}const sl=Le({patchProp:Gc},Tc);let An,Rr=!1;function lu(){return An||(An=pc(sl))}function au(){return An=Rr?An:vc(sl),Rr=!0,An}const Ot=(...e)=>{lu().render(...e)},cu=(...e)=>{const t=au().createApp(...e),{mount:n}=t;return t.mount=o=>{const s=uu(o);if(s)return n(s,!0,s instanceof SVGElement)},t};function uu(e){return Ie(e)?document.querySelector(e):e}var du=JSON.parse('{"lang":"en-US","title":"vfluent3","description":"A Vue3 component library for Fluent UI","base":"/VFluent3/","head":[],"appearance":true,"themeConfig":{"siteTitle":"VFluent3","footer":{"message":"MIT Licensed","copyright":"Copyright \xA9 Creator SN - 2022"},"nav":[{"text":"Home","link":"/"},{"text":"Guide","link":"/guide/"}],"sidebar":[{"text":"Basic","collapsed":true,"items":[{"text":"Button","link":"/guide/components/button/"},{"text":"CheckBox","link":"/guide/components/check-box/"},{"text":"Radio","link":"/guide/components/radio/"},{"text":"ProgressBar","link":"/guide/components/progress-bar/"},{"text":"ProgressRing","link":"/guide/components/progress-ring/"},{"text":"ToggleSwitch","link":"/guide/components/toggle-switch/"},{"text":"Img","link":"/guide/components/img/"},{"text":"TextBox","link":"/guide/components/text-box/"},{"text":"ComboBox","link":"/guide/components/combo-box/"}]},{"text":"Global","collapsed":true,"items":[{"text":"MessageBar","link":"/guide/components/message-bar/"},{"text":"InfoBox","link":"/guide/components/info-box/"}]},{"text":"Advance","collapsed":true,"items":[{"text":"ColorPicker","link":"/guide/components/color-picker/"}]}]},"locales":{},"langs":{},"scrollOffset":90}');const fu=/^https?:/i,Hr="vitepress-theme-appearance",De=typeof window!="undefined",rl={relativePath:"",title:"404",description:"Not Found",headers:[],frontmatter:{},lastUpdated:0};function hu(e,t){t.sort((n,o)=>{const s=o.split("/").length-n.split("/").length;return s!==0?s:o.length-n.length});for(const n of t)if(e.startsWith(n))return n}function Dr(e,t){const n=hu(t,Object.keys(e));return n?e[n]:void 0}function pu(e){const{locales:t}=e.themeConfig||{},n=e.locales;return t&&n?Object.keys(t).reduce((o,s)=>(o[s]={label:t[s].label,lang:n[s].lang},o),{}):{}}function vu(e,t){t=mu(e,t);const n=Dr(e.locales||{},t),o=Dr(e.themeConfig.locales||{},t);return Object.assign({},e,n,{themeConfig:Object.assign({},e.themeConfig,o,{locales:{}}),lang:(n||e).lang,locales:{},langs:pu(e)})}function il(e,t){var r;const n=t.title||e.title,o=(r=t.titleTemplate)!=null?r:e.titleTemplate,s=_u(e.title,o);return`${n}${s}`}function _u(e,t){return t===!1?"":t===!0||t===void 0?` | ${e}`:e===t?"":` | ${t}`}function mu(e,t){if(!De)return t;const n=e.base,o=n.endsWith("/")?n.slice(0,-1):n;return t.slice(o.length)}function gu(e,t){return`${e}${t}`.replace(/\/+/g,"/")}function _n(e){return fu.test(e)?e:gu(Zn.value.base,e)}function ll(e){let t=e.replace(/\.html$/,"");if(t=decodeURIComponent(t),t.endsWith("/")&&(t+="index"),De){const n="/VFluent3/";t=t.slice(n.length).replace(/\//g,"_")+".md";const o=__VP_HASH_MAP__[t.toLowerCase()];t=`${n}assets/${t}.${o}.js`}else t=`./${t.slice(1).replace(/\//g,"_")}.md.js`;return t}const al=Symbol(),Zn=$a(du);function bu(e){const t=se(()=>vu(Zn.value,e.path));return{site:t,theme:se(()=>t.value.themeConfig),page:se(()=>e.data),frontmatter:se(()=>e.data.frontmatter),lang:se(()=>t.value.lang),localePath:se(()=>{const{langs:n,lang:o}=t.value,s=Object.keys(n).find(r=>n[r].lang===o);return _n(s||"/")}),title:se(()=>il(t.value,e.data)),description:se(()=>e.data.description||t.value.description)}}function ge(){const e=Ct(al);if(!e)throw new Error("vitepress data not properly injected in app");return e}const cl=Symbol(),zr="http://a.com",yu=()=>({path:"/",component:null,data:rl});function xu(e,t){const n=Qn(yu());function o(i=De?location.href:"/"){const l=new URL(i,zr);return!l.pathname.endsWith("/")&&!l.pathname.endsWith(".html")&&(l.pathname+=".html",i=l.pathname+l.search+l.hash),De&&(history.replaceState({scrollPosition:window.scrollY},document.title),history.pushState(null,"",i)),r(i)}let s=null;async function r(i,l=0,a=!1){const d=new URL(i,zr),p=s=d.pathname;try{let _=e(p);if("then"in _&&typeof _.then=="function"&&(_=await _),s===p){s=null;const{default:m,__pageData:y}=_;if(!m)throw new Error(`Invalid route component: ${m}`);n.path=De?p:_n(p),n.component=kt(m),n.data=kt(y),De&&Ze(()=>{if(d.hash&&!l){let k=null;try{k=document.querySelector(decodeURIComponent(d.hash))}catch(M){console.warn(M)}if(k){jr(k,d.hash);return}}window.scrollTo(0,l)})}}catch(_){if(!_.message.match(/fetch/)&&!i.match(/^[\\/]404\.html$/)&&console.error(_),!a)try{const m=await fetch(Zn.value.base+"hashmap.json");window.__VP_HASH_MAP__=await m.json(),await r(i,l,!0);return}catch{}s===p&&(s=null,n.path=De?p:_n(p),n.component=t?kt(t):null,n.data=rl)}}return De&&(window.addEventListener("click",i=>{const l=i.target.closest("a");if(l){const{href:a,protocol:d,hostname:p,pathname:_,hash:m,target:y}=l,k=window.location,M=_.match(/\.\w+$/);!i.ctrlKey&&!i.shiftKey&&!i.altKey&&!i.metaKey&&y!=="_blank"&&d===k.protocol&&p===k.hostname&&!(M&&M[0]!==".html")&&(i.preventDefault(),_===k.pathname?m&&m!==k.hash&&(history.pushState(null,"",m),window.dispatchEvent(new Event("hashchange")),jr(l,m,l.classList.contains("header-anchor"))):o(a))}},{capture:!0}),window.addEventListener("popstate",i=>{r(location.href,i.state&&i.state.scrollPosition||0)}),window.addEventListener("hashchange",i=>{i.preventDefault()})),{route:n,go:o}}function wu(){const e=Ct(cl);if(!e)throw new Error("useRouter() is called without provider.");return e}function wn(){return wu().route}function jr(e,t,n=!1){let o=null;try{o=e.classList.contains("header-anchor")?e:document.querySelector(decodeURIComponent(t))}catch(s){console.warn(s)}if(o){let s=Zn.value.scrollOffset;typeof s=="string"&&(s=document.querySelector(s).getBoundingClientRect().bottom+24);const r=parseInt(window.getComputedStyle(o).paddingTop,10),i=window.scrollY+o.getBoundingClientRect().top-s+r;!n||Math.abs(i-window.scrollY)>window.innerHeight?window.scrollTo(0,i):window.scrollTo({left:0,top:i,behavior:"smooth"})}}const $u=j({name:"VitePressContent",setup(){const e=wn();return()=>Ut("div",{style:{position:"relative"}},[e.component?Ut(e.component):null])}}),ul=/#.*$/,ku=/(index)?\.(md|html)$/,Cu=/^[a-z]+:/i,Su=typeof window!="undefined",Pu=R(Su?location.hash:"");function Vu(e){return Cu.test(e)}function Iu(e,t){let n,o=!1;return()=>{n&&clearTimeout(n),o?n=setTimeout(e,t):(e(),o=!0,setTimeout(()=>{o=!1},t))}}function eo(e,t,n=!1){if(t===void 0)return!1;if(e=Wr(`/${e}`),n)return new RegExp(t).test(e);if(Wr(t)!==e)return!1;const o=t.match(ul);return o?Pu.value===o[0]:!0}function Ur(e){return/^\//.test(e)?e:`/${e}`}function Wr(e){return decodeURI(e).replace(ul,"").replace(ku,"")}function ws(e){if(Vu(e))return e;const{pathname:t,search:n,hash:o}=new URL(e,"http://example.com"),s=t.endsWith("/")||t.endsWith(".html")?e:`${t.replace(/(\.md)?$/,".html")}${n}${o}`;return _n(s)}function dl(e,t){if(Array.isArray(e))return e;t=Ur(t);for(const n in e)if(t.startsWith(Ur(n)))return e[n];return[]}function Mu(e){const t=[];for(const n of e)for(const o of n.items)t.push(o);return t}function gt(){const e=wn(),{theme:t,frontmatter:n}=ge(),o=R(!1),s=se(()=>{const d=t.value.sidebar,p=e.data.relativePath;return d?dl(d,p):[]}),r=se(()=>n.value.sidebar!==!1&&s.value.length>0&&n.value.layout!=="home");function i(){o.value=!0}function l(){o.value=!1}function a(){o.value?l():i()}return{isOpen:o,sidebar:s,hasSidebar:r,open:i,close:l,toggle:a}}function Bu(e,t){let n;xn(()=>{n=e.value?document.activeElement:void 0}),Xe(()=>{window.addEventListener("keyup",o)}),mt(()=>{window.removeEventListener("keyup",o)});function o(s){s.key==="Escape"&&e.value&&(t(),n==null||n.focus())}}var U=(e,t)=>{const n=e.__vccOpts||e;for(const[o,s]of t)n[o]=s;return n};const Eu=j({__name:"VPSkipLink",setup(e){const t=wn(),n=R();ze(()=>t.path,()=>n.value.focus());function o({target:s}){const r=document.querySelector(s.hash);if(r){const i=()=>{r.removeAttribute("tabindex"),r.removeEventListener("blur",i)};r.setAttribute("tabindex","-1"),r.addEventListener("blur",i),r.focus(),window.scrollTo(0,0)}}return(s,r)=>(v(),b(ce,null,[h("span",{ref_key:"backToTop",ref:n,tabindex:"-1"},null,512),h("a",{href:"#VPContent",class:"VPSkipLink visually-hidden",onClick:o}," Skip to content ")],64))}});var Tu=U(Eu,[["__scopeId","data-v-bea91388"]]);const Lu={key:0,class:"VPBackdrop"},Fu=j({__name:"VPBackdrop",props:{show:{type:Boolean}},setup(e){return(t,n)=>(v(),de(Vt,{name:"fade"},{default:oe(()=>[e.show?(v(),b("div",Lu)):ee("",!0)]),_:1}))}});var Au=U(Fu,[["__scopeId","data-v-7832dbb0"]]);function Nu(){const e=R(!1);function t(){e.value=!0,window.addEventListener("resize",s)}function n(){e.value=!1,window.removeEventListener("resize",s)}function o(){e.value?n():t()}function s(){window.outerWidth>=768&&n()}return{isScreenOpen:e,openScreen:t,closeScreen:n,toggleScreen:o}}const Ou=["src"],Ru={inheritAttrs:!1},Hu=j({...Ru,__name:"VPImage",props:{image:null},setup(e){return(t,n)=>{const o=_t("VPImage",!0);return e.image?(v(),b(ce,{key:0},[typeof e.image=="string"||"src"in e.image?(v(),b("img",go({key:0,class:"VPImage"},typeof e.image=="string"?t.$attrs:{...e.image,...t.$attrs},{src:c(_n)(typeof e.image=="string"?e.image:e.image.src)}),null,16,Ou)):(v(),b(ce,{key:1},[T(o,go({class:"dark",image:e.image.dark},t.$attrs),null,16,["image"]),T(o,go({class:"light",image:e.image.light},t.$attrs),null,16,["image"])],64))],64)):ee("",!0)}}});var fl=U(Hu,[["__scopeId","data-v-1d7f37c8"]]);const Du=["href"],zu=j({__name:"VPNavBarTitle",setup(e){const{site:t,theme:n}=ge(),{hasSidebar:o}=gt();return(s,r)=>(v(),b("div",{class:re(["VPNavBarTitle",{"has-sidebar":c(o)}])},[h("a",{class:"title",href:c(t).base},[T(fl,{class:"logo",image:c(n).logo},null,8,["image"]),c(n).siteTitle?(v(),b(ce,{key:0},[Me(le(c(n).siteTitle),1)],64)):c(n).siteTitle===void 0?(v(),b(ce,{key:1},[Me(le(c(t).title),1)],64)):ee("",!0)],8,Du)],2))}});var ju=U(zu,[["__scopeId","data-v-011600ce"]]);const Uu={key:0,class:"VPNavBarSearch"},Wu={type:"button",class:"DocSearch DocSearch-Button","aria-label":"Search"},Ku=h("span",{class:"DocSearch-Button-Container"},[h("svg",{class:"DocSearch-Search-Icon",width:"20",height:"20",viewBox:"0 0 20 20"},[h("path",{d:"M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z",stroke:"currentColor",fill:"none","fill-rule":"evenodd","stroke-linecap":"round","stroke-linejoin":"round"})]),h("span",{class:"DocSearch-Button-Placeholder"},"Search")],-1),qu={class:"DocSearch-Button-Keys"},Gu=h("kbd",{class:"DocSearch-Button-Key"},"K",-1),Yu=j({__name:"VPNavBarSearch",setup(e){const t=()=>null,{theme:n}=ge(),o=R(!1),s=R();Xe(()=>{if(!n.value.algolia)return;s.value.textContent=/(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)?"\u2318":"Ctrl";const i=a=>{a.key==="k"&&(a.ctrlKey||a.metaKey)&&(a.preventDefault(),r(),l())},l=()=>{window.removeEventListener("keydown",i)};window.addEventListener("keydown",i),mt(l)});function r(){o.value||(o.value=!0)}return(i,l)=>c(n).algolia?(v(),b("div",Uu,[o.value?(v(),de(c(t),{key:0})):(v(),b("div",{key:1,id:"docsearch",onClick:r},[h("button",Wu,[Ku,h("span",qu,[h("kbd",{class:"DocSearch-Button-Key",ref_key:"metaKey",ref:s},"Meta",512),Gu])])]))])):ee("",!0)}}),Xu={},Ju={xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",focusable:"false",height:"24px",viewBox:"0 0 24 24",width:"24px"},Qu=h("path",{d:"M0 0h24v24H0V0z",fill:"none"},null,-1),Zu=h("path",{d:"M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"},null,-1),ed=[Qu,Zu];function td(e,t){return v(),b("svg",Ju,ed)}var nd=U(Xu,[["render",td]]);const od=j({__name:"VPLink",props:{href:null,noIcon:{type:Boolean}},setup(e){const t=e,n=se(()=>t.href&&/^[a-z]+:/i.test(t.href));return(o,s)=>(v(),de(Do(e.href?"a":"span"),{class:re(["VPLink",{link:e.href}]),href:e.href?c(ws)(e.href):void 0,target:c(n)?"_blank":void 0,rel:c(n)?"noopener noreferrer":void 0},{default:oe(()=>[J(o.$slots,"default",{},void 0,!0),c(n)&&!e.noIcon?(v(),de(nd,{key:0,class:"icon"})):ee("",!0)]),_:3},8,["class","href","target","rel"]))}});var $n=U(od,[["__scopeId","data-v-4d08dd3a"]]);const sd=j({__name:"VPNavBarMenuLink",props:{item:null},setup(e){const{page:t}=ge();return(n,o)=>(v(),de($n,{class:re({VPNavBarMenuLink:!0,active:c(eo)(c(t).relativePath,e.item.activeMatch||e.item.link,!!e.item.activeMatch)}),href:e.item.link,noIcon:!0},{default:oe(()=>[Me(le(e.item.text),1)]),_:1},8,["class","href"]))}});var rd=U(sd,[["__scopeId","data-v-66f8d518"]]);const qs=R();let hl=!1,es=0;function id(e){const t=R(!1);if(typeof window!="undefined"){!hl&&ld(),es++;const n=ze(qs,o=>{var s,r,i;o===e.el.value||((s=e.el.value)==null?void 0:s.contains(o))?(t.value=!0,(r=e.onFocus)==null||r.call(e)):(t.value=!1,(i=e.onBlur)==null||i.call(e))});mt(()=>{n(),es--,es||ad()})}return Os(t)}function ld(){document.addEventListener("focusin",pl),hl=!0,qs.value=document.activeElement}function ad(){document.removeEventListener("focusin",pl)}function pl(){qs.value=document.activeElement}const cd={},ud={xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",focusable:"false",viewBox:"0 0 24 24"},dd=h("path",{d:"M12,16c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-6,6C12.5,15.9,12.3,16,12,16z"},null,-1),fd=[dd];function hd(e,t){return v(),b("svg",ud,fd)}var vl=U(cd,[["render",hd]]);const pd={},vd={xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",focusable:"false",viewBox:"0 0 24 24"},_d=h("circle",{cx:"12",cy:"12",r:"2"},null,-1),md=h("circle",{cx:"19",cy:"12",r:"2"},null,-1),gd=h("circle",{cx:"5",cy:"12",r:"2"},null,-1),bd=[_d,md,gd];function yd(e,t){return v(),b("svg",vd,bd)}var xd=U(pd,[["render",yd]]);const wd={class:"VPMenuLink"},$d=j({__name:"VPMenuLink",props:{item:null},setup(e){const{page:t}=ge();return(n,o)=>(v(),b("div",wd,[T($n,{class:re({active:c(eo)(c(t).relativePath,e.item.activeMatch||e.item.link)}),href:e.item.link},{default:oe(()=>[Me(le(e.item.text),1)]),_:1},8,["class","href"])]))}});var Wo=U($d,[["__scopeId","data-v-55443fa2"]]);const kd={class:"VPMenuGroup"},Cd={key:0,class:"title"},Sd=j({__name:"VPMenuGroup",props:{text:null,items:null},setup(e){return(t,n)=>(v(),b("div",kd,[e.text?(v(),b("p",Cd,le(e.text),1)):ee("",!0),(v(!0),b(ce,null,Fe(e.items,o=>(v(),b(ce,null,["link"in o?(v(),de(Wo,{key:0,item:o},null,8,["item"])):ee("",!0)],64))),256))]))}});var Pd=U(Sd,[["__scopeId","data-v-1f0395f9"]]);const Vd={class:"VPMenu"},Id={key:0,class:"items"},Md=j({__name:"VPMenu",props:{items:null},setup(e){return(t,n)=>(v(),b("div",Vd,[e.items?(v(),b("div",Id,[(v(!0),b(ce,null,Fe(e.items,o=>(v(),b(ce,{key:o.text},["link"in o?(v(),de(Wo,{key:0,item:o},null,8,["item"])):(v(),de(Pd,{key:1,text:o.text,items:o.items},null,8,["text","items"]))],64))),128))])):ee("",!0),J(t.$slots,"default",{},void 0,!0)]))}});var Bd=U(Md,[["__scopeId","data-v-17dc081b"]]);const Ed=["aria-expanded","aria-label"],Td={key:0,class:"text"},Ld={class:"menu"},Fd=j({__name:"VPFlyout",props:{icon:null,button:null,label:null,items:null},setup(e){const t=R(!1),n=R();id({el:n,onBlur:o});function o(){t.value=!1}return(s,r)=>(v(),b("div",{class:"VPFlyout",ref_key:"el",ref:n,onMouseenter:r[1]||(r[1]=i=>t.value=!0),onMouseleave:r[2]||(r[2]=i=>t.value=!1)},[h("button",{type:"button",class:"button","aria-haspopup":"true","aria-expanded":t.value,"aria-label":e.label,onClick:r[0]||(r[0]=i=>t.value=!t.value)},[e.button||e.icon?(v(),b("span",Td,[e.icon?(v(),de(Do(e.icon),{key:0,class:"option-icon"})):ee("",!0),Me(" "+le(e.button)+" ",1),T(vl,{class:"text-icon"})])):(v(),de(xd,{key:1,class:"icon"}))],8,Ed),h("div",Ld,[T(Bd,{items:e.items},{default:oe(()=>[J(s.$slots,"default",{},void 0,!0)]),_:3},8,["items"])])],544))}});var Gs=U(Fd,[["__scopeId","data-v-37af1650"]]);const Ad=j({__name:"VPNavBarMenuGroup",props:{item:null},setup(e){const{page:t}=ge();return(n,o)=>(v(),de(Gs,{class:re({VPNavBarMenuGroup:!0,active:c(eo)(c(t).relativePath,e.item.activeMatch,!!e.item.activeMatch)}),button:e.item.text,items:e.item.items},null,8,["class","button","items"]))}});const Nd=e=>(tt("data-v-4da4371d"),e=e(),nt(),e),Od={key:0,"aria-labelledby":"main-nav-aria-label",class:"VPNavBarMenu"},Rd=Nd(()=>h("span",{id:"main-nav-aria-label",class:"visually-hidden"},"Main Navigation",-1)),Hd=j({__name:"VPNavBarMenu",setup(e){const{theme:t}=ge();return(n,o)=>c(t).nav?(v(),b("nav",Od,[Rd,(v(!0),b(ce,null,Fe(c(t).nav,s=>(v(),b(ce,{key:s.text},["link"in s?(v(),de(rd,{key:0,item:s},null,8,["item"])):(v(),de(Ad,{key:1,item:s},null,8,["item"]))],64))),128))])):ee("",!0)}});var Dd=U(Hd,[["__scopeId","data-v-4da4371d"]]);const zd={},jd={xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",focusable:"false",viewBox:"0 0 24 24"},Ud=h("path",{d:"M0 0h24v24H0z",fill:"none"},null,-1),Wd=h("path",{d:" M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z ",class:"css-c4d79v"},null,-1),Kd=[Ud,Wd];function qd(e,t){return v(),b("svg",jd,Kd)}var _l=U(zd,[["render",qd]]);const Gd={class:"items"},Yd={class:"title"},Xd=j({__name:"VPNavBarTranslations",setup(e){const{theme:t}=ge();return(n,o)=>c(t).localeLinks?(v(),de(Gs,{key:0,class:"VPNavBarTranslations",icon:_l},{default:oe(()=>[h("div",Gd,[h("p",Yd,le(c(t).localeLinks.text),1),(v(!0),b(ce,null,Fe(c(t).localeLinks.items,s=>(v(),de(Wo,{key:s.link,item:s},null,8,["item"]))),128))])]),_:1})):ee("",!0)}});var Jd=U(Xd,[["__scopeId","data-v-1d1091b2"]]);const Qd={},Zd={class:"VPSwitch",type:"button",role:"switch"},ef={class:"check"},tf={key:0,class:"icon"};function nf(e,t){return v(),b("button",Zd,[h("span",ef,[e.$slots.default?(v(),b("span",tf,[J(e.$slots,"default",{},void 0,!0)])):ee("",!0)])])}var of=U(Qd,[["render",nf],["__scopeId","data-v-55b931a0"]]);const sf={},rf={xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",focusable:"false",viewBox:"0 0 24 24"},lf=xc('<path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path>',9),af=[lf];function cf(e,t){return v(),b("svg",rf,af)}var uf=U(sf,[["render",cf]]);const df={},ff={xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",focusable:"false",viewBox:"0 0 24 24"},hf=h("path",{d:"M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"},null,-1),pf=[hf];function vf(e,t){return v(),b("svg",ff,pf)}var _f=U(df,[["render",vf]]);const mf=j({__name:"VPSwitchAppearance",setup(e){const t=typeof localStorage!="undefined"?n():()=>{};function n(){const o=window.matchMedia("(prefers-color-scheme: dark)"),s=document.documentElement.classList;let r=localStorage.getItem(Hr)||"auto",i=r==="auto"?o.matches:r==="dark";o.onchange=d=>{r==="auto"&&a(i=d.matches)};function l(){a(i=!i),r=i?o.matches?"auto":"dark":o.matches?"light":"auto",localStorage.setItem(Hr,r)}function a(d){s[d?"add":"remove"]("dark")}return l}return(o,s)=>(v(),de(of,{class:"VPSwitchAppearance","aria-label":"toggle dark mode",onClick:c(t)},{default:oe(()=>[T(uf,{class:"sun"}),T(_f,{class:"moon"})]),_:1},8,["onClick"]))}});var Ys=U(mf,[["__scopeId","data-v-d0ee0df2"]]);const gf={key:0,class:"VPNavBarAppearance"},bf=j({__name:"VPNavBarAppearance",setup(e){const{site:t}=ge();return(n,o)=>c(t).appearance?(v(),b("div",gf,[T(Ys)])):ee("",!0)}});var yf=U(bf,[["__scopeId","data-v-bf1c94ca"]]);const xf={},wf={xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",focusable:"false",viewBox:"0 0 24 24"},$f=h("path",{d:"M20.222 0c1.406 0 2.54 1.137 2.607 2.475V24l-2.677-2.273-1.47-1.338-1.604-1.398.67 2.205H3.71c-1.402 0-2.54-1.065-2.54-2.476V2.48C1.17 1.142 2.31.003 3.715.003h16.5L20.222 0zm-6.118 5.683h-.03l-.202.2c2.073.6 3.076 1.537 3.076 1.537-1.336-.668-2.54-1.002-3.744-1.137-.87-.135-1.74-.064-2.475 0h-.2c-.47 0-1.47.2-2.81.735-.467.203-.735.336-.735.336s1.002-1.002 3.21-1.537l-.135-.135s-1.672-.064-3.477 1.27c0 0-1.805 3.144-1.805 7.02 0 0 1 1.74 3.743 1.806 0 0 .4-.533.805-1.002-1.54-.468-2.14-1.404-2.14-1.404s.134.066.335.2h.06c.03 0 .044.015.06.03v.006c.016.016.03.03.06.03.33.136.66.27.93.4.466.202 1.065.403 1.8.536.93.135 1.996.2 3.21 0 .6-.135 1.2-.267 1.8-.535.39-.2.87-.4 1.397-.737 0 0-.6.936-2.205 1.404.33.466.795 1 .795 1 2.744-.06 3.81-1.8 3.87-1.726 0-3.87-1.815-7.02-1.815-7.02-1.635-1.214-3.165-1.26-3.435-1.26l.056-.02zm.168 4.413c.703 0 1.27.6 1.27 1.335 0 .74-.57 1.34-1.27 1.34-.7 0-1.27-.6-1.27-1.334.002-.74.573-1.338 1.27-1.338zm-4.543 0c.7 0 1.266.6 1.266 1.335 0 .74-.57 1.34-1.27 1.34-.7 0-1.27-.6-1.27-1.334 0-.74.57-1.338 1.27-1.338z"},null,-1),kf=[$f];function Cf(e,t){return v(),b("svg",wf,kf)}var Sf=U(xf,[["render",Cf]]);const Pf={},Vf={xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",focusable:"false",viewBox:"0 0 24 24"},If=h("path",{d:"M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"},null,-1),Mf=[If];function Bf(e,t){return v(),b("svg",Vf,Mf)}var Ef=U(Pf,[["render",Bf]]);const Tf={},Lf={xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",focusable:"false",viewBox:"0 0 24 24"},Ff=h("path",{d:"M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"},null,-1),Af=[Ff];function Nf(e,t){return v(),b("svg",Lf,Af)}var Of=U(Tf,[["render",Nf]]);const Rf={},Hf={xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",focusable:"false",viewBox:"0 0 24 24"},Df=h("path",{d:"M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"},null,-1),zf=[Df];function jf(e,t){return v(),b("svg",Hf,zf)}var Uf=U(Rf,[["render",jf]]);const Wf={},Kf={xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",focusable:"false",viewBox:"0 0 24 24"},qf=h("path",{d:"M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.306.788.717 1.459 1.384 2.126.667.666 1.336 1.079 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.788-.306 1.459-.718 2.126-1.384.666-.667 1.079-1.335 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319 1.347 20.651.935 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227-.224.562-.479.96-.899 1.382-.419.419-.824.679-1.38.896-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421-.569-.224-.96-.479-1.379-.899-.421-.419-.69-.824-.9-1.38-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678c-3.405 0-6.162 2.76-6.162 6.162 0 3.405 2.76 6.162 6.162 6.162 3.405 0 6.162-2.76 6.162-6.162 0-3.405-2.76-6.162-6.162-6.162zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405c0 .795-.646 1.44-1.44 1.44-.795 0-1.44-.646-1.44-1.44 0-.794.646-1.439 1.44-1.439.793-.001 1.44.645 1.44 1.439z"},null,-1),Gf=[qf];function Yf(e,t){return v(),b("svg",Kf,Gf)}var Xf=U(Wf,[["render",Yf]]);const Jf={},Qf={xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",focusable:"false",viewBox:"0 0 24 24"},Zf=h("path",{d:"M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zM6.313 15.165a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zM8.834 6.313a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312zM18.956 8.834a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522V8.834zM17.688 8.834a2.528 2.528 0 0 1-2.523 2.521 2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.165 0a2.528 2.528 0 0 1 2.523 2.522v6.312zM15.165 18.956a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.52-2.522v-2.522h2.52zM15.165 17.688a2.527 2.527 0 0 1-2.52-2.523 2.526 2.526 0 0 1 2.52-2.52h6.313A2.527 2.527 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.523h-6.313z"},null,-1),eh=[Zf];function th(e,t){return v(),b("svg",Qf,eh)}var nh=U(Jf,[["render",th]]);const oh={},sh={xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",focusable:"false",viewBox:"0 0 24 24"},rh=h("path",{d:"M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"},null,-1),ih=[rh];function lh(e,t){return v(),b("svg",sh,ih)}var ah=U(oh,[["render",lh]]);const ch={},uh={xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",focusable:"false",viewBox:"0 0 24 24"},dh=h("path",{d:"M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"},null,-1),fh=[dh];function hh(e,t){return v(),b("svg",uh,fh)}var ph=U(ch,[["render",hh]]);const vh=["href","title"],_h={class:"visually-hidden"},mh=j({__name:"VPSocialLink",props:{icon:null,link:null},setup(e){const t={discord:Sf,facebook:Ef,github:Of,instagram:Xf,linkedin:Uf,slack:nh,twitter:ah,youtube:ph};return(n,o)=>(v(),b("a",{class:"VPSocialLink",href:e.link,title:e.icon,target:"_blank",rel:"noopener noreferrer"},[(v(),de(Do(t[e.icon]),{class:"icon"})),h("span",_h,le(e.icon),1)],8,vh))}});var gh=U(mh,[["__scopeId","data-v-24097be2"]]);const bh={class:"VPSocialLinks"},yh=j({__name:"VPSocialLinks",props:{links:null},setup(e){return(t,n)=>(v(),b("div",bh,[(v(!0),b(ce,null,Fe(e.links,({link:o,icon:s})=>(v(),de(gh,{key:o,icon:s,link:o},null,8,["icon","link"]))),128))]))}});var Xs=U(yh,[["__scopeId","data-v-6bcc8b4f"]]);const xh=j({__name:"VPNavBarSocialLinks",setup(e){const{theme:t}=ge();return(n,o)=>c(t).socialLinks?(v(),de(Xs,{key:0,class:"VPNavBarSocialLinks",links:c(t).socialLinks},null,8,["links"])):ee("",!0)}});var wh=U(xh,[["__scopeId","data-v-0bf3de8b"]]);const $h=e=>(tt("data-v-7cece6ac"),e=e(),nt(),e),kh={key:0,class:"group"},Ch={class:"trans-title"},Sh={key:1,class:"group"},Ph={class:"item appearance"},Vh=$h(()=>h("p",{class:"label"},"Appearance",-1)),Ih={class:"appearance-action"},Mh={key:2,class:"group"},Bh={class:"item social-links"},Eh=j({__name:"VPNavBarExtra",setup(e){const{site:t,theme:n}=ge();return(o,s)=>(v(),de(Gs,{class:"VPNavBarExtra",label:"extra navigation"},{default:oe(()=>[c(n).localeLinks?(v(),b("div",kh,[h("p",Ch,le(c(n).localeLinks.text),1),(v(!0),b(ce,null,Fe(c(n).localeLinks.items,r=>(v(),de(Wo,{key:r.link,item:r},null,8,["item"]))),128))])):ee("",!0),c(t).appearance?(v(),b("div",Sh,[h("div",Ph,[Vh,h("div",Ih,[T(Ys)])])])):ee("",!0),c(n).socialLinks?(v(),b("div",Mh,[h("div",Bh,[T(Xs,{class:"social-links-list",links:c(n).socialLinks},null,8,["links"])])])):ee("",!0)]),_:1}))}});var Th=U(Eh,[["__scopeId","data-v-7cece6ac"]]);const Lh=e=>(tt("data-v-5484e669"),e=e(),nt(),e),Fh=["aria-expanded"],Ah=Lh(()=>h("span",{class:"container"},[h("span",{class:"top"}),h("span",{class:"middle"}),h("span",{class:"bottom"})],-1)),Nh=[Ah],Oh=j({__name:"VPNavBarHamburger",props:{active:{type:Boolean}},emits:["click"],setup(e){return(t,n)=>(v(),b("button",{type:"button",class:re(["VPNavBarHamburger",{active:e.active}]),"aria-label":"mobile navigation","aria-expanded":e.active,"aria-controls":"VPNavScreen",onClick:n[0]||(n[0]=o=>t.$emit("click"))},Nh,10,Fh))}});var Rh=U(Oh,[["__scopeId","data-v-5484e669"]]);const Hh={class:"container"},Dh={class:"content"},zh=j({__name:"VPNavBar",props:{isScreenOpen:{type:Boolean}},emits:["toggle-screen"],setup(e){const{hasSidebar:t}=gt();return(n,o)=>(v(),b("div",{class:re(["VPNavBar",{"has-sidebar":c(t)}])},[h("div",Hh,[T(ju),h("div",Dh,[T(Yu,{class:"search"}),T(Dd,{class:"menu"}),T(Jd,{class:"translations"}),T(yf,{class:"appearance"}),T(wh,{class:"social-links"}),T(Th,{class:"extra"}),T(Rh,{class:"hamburger",active:e.isScreenOpen,onClick:o[0]||(o[0]=s=>n.$emit("toggle-screen"))},null,8,["active"])])])],2))}});var jh=U(zh,[["__scopeId","data-v-45c9f423"]]);function Uh(e){if(Array.isArray(e)){for(var t=0,n=Array(e.length);t<e.length;t++)n[t]=e[t];return n}else return Array.from(e)}var Js=!1;if(typeof window!="undefined"){var Kr={get passive(){Js=!0}};window.addEventListener("testPassive",null,Kr),window.removeEventListener("testPassive",null,Kr)}var Po=typeof window!="undefined"&&window.navigator&&window.navigator.platform&&(/iP(ad|hone|od)/.test(window.navigator.platform)||window.navigator.platform==="MacIntel"&&window.navigator.maxTouchPoints>1),hn=[],Vo=!1,Qs=-1,Nn=void 0,Qt=void 0,On=void 0,ml=function(t){return hn.some(function(n){return!!(n.options.allowTouchMove&&n.options.allowTouchMove(t))})},Io=function(t){var n=t||window.event;return ml(n.target)||n.touches.length>1?!0:(n.preventDefault&&n.preventDefault(),!1)},Wh=function(t){if(On===void 0){var n=!!t&&t.reserveScrollBarGap===!0,o=window.innerWidth-document.documentElement.clientWidth;if(n&&o>0){var s=parseInt(window.getComputedStyle(document.body).getPropertyValue("padding-right"),10);On=document.body.style.paddingRight,document.body.style.paddingRight=s+o+"px"}}Nn===void 0&&(Nn=document.body.style.overflow,document.body.style.overflow="hidden")},Kh=function(){On!==void 0&&(document.body.style.paddingRight=On,On=void 0),Nn!==void 0&&(document.body.style.overflow=Nn,Nn=void 0)},qh=function(){return window.requestAnimationFrame(function(){if(Qt===void 0){Qt={position:document.body.style.position,top:document.body.style.top,left:document.body.style.left};var t=window,n=t.scrollY,o=t.scrollX,s=t.innerHeight;document.body.style.position="fixed",document.body.style.top=-n,document.body.style.left=-o,setTimeout(function(){return window.requestAnimationFrame(function(){var r=s-window.innerHeight;r&&n>=s&&(document.body.style.top=-(n+r))})},300)}})},Gh=function(){if(Qt!==void 0){var t=-parseInt(document.body.style.top,10),n=-parseInt(document.body.style.left,10);document.body.style.position=Qt.position,document.body.style.top=Qt.top,document.body.style.left=Qt.left,window.scrollTo(n,t),Qt=void 0}},Yh=function(t){return t?t.scrollHeight-t.scrollTop<=t.clientHeight:!1},Xh=function(t,n){var o=t.targetTouches[0].clientY-Qs;return ml(t.target)?!1:n&&n.scrollTop===0&&o>0||Yh(n)&&o<0?Io(t):(t.stopPropagation(),!0)},Jh=function(t,n){if(!t){console.error("disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.");return}if(!hn.some(function(s){return s.targetElement===t})){var o={targetElement:t,options:n||{}};hn=[].concat(Uh(hn),[o]),Po?qh():Wh(n),Po&&(t.ontouchstart=function(s){s.targetTouches.length===1&&(Qs=s.targetTouches[0].clientY)},t.ontouchmove=function(s){s.targetTouches.length===1&&Xh(s,t)},Vo||(document.addEventListener("touchmove",Io,Js?{passive:!1}:void 0),Vo=!0))}},Qh=function(){Po&&(hn.forEach(function(t){t.targetElement.ontouchstart=null,t.targetElement.ontouchmove=null}),Vo&&(document.removeEventListener("touchmove",Io,Js?{passive:!1}:void 0),Vo=!1),Qs=-1),Po?Gh():Kh(),hn=[]};const Zh=j({__name:"VPNavScreenMenuLink",props:{text:null,link:null},setup(e){const t=Ct("close-screen");return(n,o)=>(v(),de($n,{class:"VPNavScreenMenuLink",href:e.link,onClick:c(t)},{default:oe(()=>[Me(le(e.text),1)]),_:1},8,["href","onClick"]))}});var ep=U(Zh,[["__scopeId","data-v-628b2e6c"]]);const tp={},np={xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",focusable:"false",viewBox:"0 0 24 24"},op=h("path",{d:"M18.9,10.9h-6v-6c0-0.6-0.4-1-1-1s-1,0.4-1,1v6h-6c-0.6,0-1,0.4-1,1s0.4,1,1,1h6v6c0,0.6,0.4,1,1,1s1-0.4,1-1v-6h6c0.6,0,1-0.4,1-1S19.5,10.9,18.9,10.9z"},null,-1),sp=[op];function rp(e,t){return v(),b("svg",np,sp)}var ip=U(tp,[["render",rp]]);const lp=j({__name:"VPNavScreenMenuGroupLink",props:{text:null,link:null},setup(e){const t=Ct("close-screen");return(n,o)=>(v(),de($n,{class:"VPNavScreenMenuGroupLink",href:e.link,onClick:c(t)},{default:oe(()=>[Me(le(e.text),1)]),_:1},8,["href","onClick"]))}});var gl=U(lp,[["__scopeId","data-v-7e5c6cd0"]]);const ap={class:"VPNavScreenMenuGroupSection"},cp={key:0,class:"title"},up=j({__name:"VPNavScreenMenuGroupSection",props:{text:null,items:null},setup(e){return(t,n)=>(v(),b("div",ap,[e.text?(v(),b("p",cp,le(e.text),1)):ee("",!0),(v(!0),b(ce,null,Fe(e.items,o=>(v(),de(gl,{key:o.text,text:o.text,link:o.link},null,8,["text","link"]))),128))]))}});var dp=U(up,[["__scopeId","data-v-6696c11b"]]);const fp=["aria-controls","aria-expanded"],hp={class:"button-text"},pp=["id"],vp={key:1,class:"group"},_p=j({__name:"VPNavScreenMenuGroup",props:{text:null,items:null},setup(e){const t=e,n=R(!1),o=se(()=>`NavScreenGroup-${t.text.replace(" ","-").toLowerCase()}`);function s(){n.value=!n.value}return(r,i)=>(v(),b("div",{class:re(["VPNavScreenMenuGroup",{open:n.value}])},[h("button",{class:"button","aria-controls":c(o),"aria-expanded":n.value,onClick:s},[h("span",hp,le(e.text),1),T(ip,{class:"button-icon"})],8,fp),h("div",{id:c(o),class:"items"},[(v(!0),b(ce,null,Fe(e.items,l=>(v(),b(ce,{key:l.text},["link"in l?(v(),b("div",{key:l.text,class:"item"},[T(gl,{text:l.text,link:l.link},null,8,["text","link"])])):(v(),b("div",vp,[T(dp,{text:l.text,items:l.items},null,8,["text","items"])]))],64))),128))],8,pp)],2))}});var mp=U(_p,[["__scopeId","data-v-365c1f83"]]);const gp={key:0,class:"VPNavScreenMenu"},bp=j({__name:"VPNavScreenMenu",setup(e){const{theme:t}=ge();return(n,o)=>c(t).nav?(v(),b("nav",gp,[(v(!0),b(ce,null,Fe(c(t).nav,s=>(v(),b(ce,{key:s.text},["link"in s?(v(),de(ep,{key:0,text:s.text,link:s.link},null,8,["text","link"])):(v(),de(mp,{key:1,text:s.text||"",items:s.items},null,8,["text","items"]))],64))),128))])):ee("",!0)}});const yp=e=>(tt("data-v-473e18ac"),e=e(),nt(),e),xp={key:0,class:"VPNavScreenAppearance"},wp=yp(()=>h("p",{class:"text"},"Appearance",-1)),$p=j({__name:"VPNavScreenAppearance",setup(e){const{site:t}=ge();return(n,o)=>c(t).appearance?(v(),b("div",xp,[wp,T(Ys)])):ee("",!0)}});var kp=U($p,[["__scopeId","data-v-473e18ac"]]);const Cp={class:"list"},Sp=["href"],Pp=j({__name:"VPNavScreenTranslations",setup(e){const{theme:t}=ge(),n=R(!1);function o(){n.value=!n.value}return(s,r)=>c(t).localeLinks?(v(),b("div",{key:0,class:re(["VPNavScreenTranslations",{open:n.value}])},[h("button",{class:"title",onClick:o},[T(_l,{class:"icon lang"}),Me(" "+le(c(t).localeLinks.text)+" ",1),T(vl,{class:"icon chevron"})]),h("ul",Cp,[(v(!0),b(ce,null,Fe(c(t).localeLinks.items,i=>(v(),b("li",{key:i.link,class:"item"},[h("a",{class:"link",href:i.link},le(i.text),9,Sp)]))),128))])],2)):ee("",!0)}});var Vp=U(Pp,[["__scopeId","data-v-0300037a"]]);const Ip=j({__name:"VPNavScreenSocialLinks",setup(e){const{theme:t}=ge();return(n,o)=>c(t).socialLinks?(v(),de(Xs,{key:0,class:"VPNavScreenSocialLinks",links:c(t).socialLinks},null,8,["links"])):ee("",!0)}});const Mp={class:"container"},Bp=j({__name:"VPNavScreen",props:{open:{type:Boolean}},setup(e){const t=R(null);function n(){Jh(t.value,{reserveScrollBarGap:!0})}function o(){Qh()}return(s,r)=>(v(),de(Vt,{name:"fade",onEnter:n,onAfterLeave:o},{default:oe(()=>[e.open?(v(),b("div",{key:0,class:"VPNavScreen",ref_key:"screen",ref:t},[h("div",Mp,[T(bp,{class:"menu"}),T(Vp,{class:"translations"}),T(kp,{class:"appearance"}),T(Ip,{class:"social-links"})])],512)):ee("",!0)]),_:1}))}});var Ep=U(Bp,[["__scopeId","data-v-3e21354b"]]);const Tp=j({__name:"VPNav",setup(e){const{isScreenOpen:t,closeScreen:n,toggleScreen:o}=Nu(),{hasSidebar:s}=gt();return zs("close-screen",n),(r,i)=>(v(),b("header",{class:re(["VPNav",{"no-sidebar":!c(s)}])},[T(jh,{"is-screen-open":c(t),onToggleScreen:c(o)},null,8,["is-screen-open","onToggleScreen"]),T(Ep,{open:c(t)},null,8,["open"])],2))}});var Lp=U(Tp,[["__scopeId","data-v-2a0a2738"]]);const Fp={},Ap={xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",focusable:"false",viewBox:"0 0 24 24"},Np=h("path",{d:"M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"},null,-1),Op=h("path",{d:"M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"},null,-1),Rp=h("path",{d:"M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"},null,-1),Hp=h("path",{d:"M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"},null,-1),Dp=[Np,Op,Rp,Hp];function zp(e,t){return v(),b("svg",Ap,Dp)}var jp=U(Fp,[["render",zp]]);const Up=e=>(tt("data-v-f623cd72"),e=e(),nt(),e),Wp={key:0,class:"VPLocalNav"},Kp=["aria-expanded"],qp=Up(()=>h("span",{class:"menu-text"},"Menu",-1)),Gp=j({__name:"VPLocalNav",props:{open:{type:Boolean}},emits:["open-menu"],setup(e){const{hasSidebar:t}=gt();function n(){window.scrollTo({top:0,left:0,behavior:"smooth"})}return(o,s)=>c(t)?(v(),b("div",Wp,[h("button",{class:"menu","aria-expanded":e.open,"aria-controls":"VPSidebarNav",onClick:s[0]||(s[0]=r=>o.$emit("open-menu"))},[T(jp,{class:"menu-icon"}),qp],8,Kp),h("a",{class:"top-link",href:"#",onClick:n}," Return to top ")])):ee("",!0)}});var Yp=U(Gp,[["__scopeId","data-v-f623cd72"]]);const Xp={},Jp={version:"1.1",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},Qp=h("path",{d:"M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"},null,-1),Zp=h("path",{d:"M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"},null,-1),ev=[Qp,Zp];function tv(e,t){return v(),b("svg",Jp,ev)}var nv=U(Xp,[["render",tv]]);const ov={},sv={xmlns:"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink",viewBox:"0 0 24 24"},rv=h("path",{d:"M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"},null,-1),iv=h("path",{d:"M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"},null,-1),lv=[rv,iv];function av(e,t){return v(),b("svg",sv,lv)}var cv=U(ov,[["render",av]]);const uv={class:"link-text"},dv=j({__name:"VPSidebarLink",props:{item:null},setup(e){const{page:t}=ge(),n=Ct("close-sidebar");return(o,s)=>(v(),de($n,{class:re({active:c(eo)(c(t).relativePath,e.item.link)}),href:e.item.link,onClick:c(n)},{default:oe(()=>[h("span",uv,le(e.item.text),1)]),_:1},8,["class","href","onClick"]))}});var fv=U(dv,[["__scopeId","data-v-a4e3bb86"]]);const hv=["role"],pv={class:"title-text"},vv={class:"action"},_v={class:"items"},mv=j({__name:"VPSidebarGroup",props:{text:null,items:null,collapsible:{type:Boolean},collapsed:{type:Boolean}},setup(e){const t=e,n=R(!1);xn(()=>{n.value=!!(t.collapsible&&t.collapsed)});function o(){t.collapsible&&(n.value=!n.value)}return(s,r)=>(v(),b("section",{class:re(["VPSidebarGroup",{collapsible:e.collapsible,collapsed:n.value}])},[e.text?(v(),b("div",{key:0,class:"title",role:e.collapsible?"button":void 0,onClick:o},[h("h2",pv,le(e.text),1),h("div",vv,[T(cv,{class:"icon minus"}),T(nv,{class:"icon plus"})])],8,hv)):ee("",!0),h("div",_v,[(v(!0),b(ce,null,Fe(e.items,i=>(v(),de(fv,{key:i.link,item:i},null,8,["item"]))),128))])],2))}});var gv=U(mv,[["__scopeId","data-v-06b4ea4e"]]);const bv=e=>(tt("data-v-3b8ec0c7"),e=e(),nt(),e),yv={class:"nav",id:"VPSidebarNav","aria-labelledby":"sidebar-aria-label",tabindex:"-1"},xv=bv(()=>h("span",{class:"visually-hidden",id:"sidebar-aria-label"}," Sidebar Navigation ",-1)),wv=j({__name:"VPSidebar",props:{open:{type:Boolean}},setup(e){const t=e,{sidebar:n,hasSidebar:o}=gt();let s=R(null);return za(async()=>{var r;t.open&&(await Ze(),(r=s.value)==null||r.focus())}),(r,i)=>c(o)?(v(),b("aside",{key:0,class:re(["VPSidebar",{open:e.open}]),ref_key:"navEl",ref:s,onClick:i[0]||(i[0]=at(()=>{},["stop"]))},[h("nav",yv,[xv,(v(!0),b(ce,null,Fe(c(n),l=>(v(),b("div",{key:l.text,class:"group"},[T(gv,{text:l.text,items:l.items,collapsible:l.collapsible,collapsed:l.collapsed},null,8,["text","items","collapsible","collapsed"])]))),128))])],2)):ee("",!0)}});var $v=U(wv,[["__scopeId","data-v-3b8ec0c7"]]);function kv(){const{page:e}=ge();De&&ze(()=>e.value.relativePath,()=>{Ze(()=>{document.querySelectorAll('.vp-doc div[class*="language-"]>span.copy').forEach(Sv)})},{immediate:!0,flush:"post"})}async function Cv(e){try{return navigator.clipboard.writeText(e)}catch{const t=document.createElement("textarea"),n=document.activeElement;t.value=e,t.setAttribute("readonly",""),t.style.contain="strict",t.style.position="absolute",t.style.left="-9999px",t.style.fontSize="12pt";const o=document.getSelection(),s=o?o.rangeCount>0&&o.getRangeAt(0):null;document.body.appendChild(t),t.select(),t.selectionStart=0,t.selectionEnd=e.length,document.execCommand("copy"),document.body.removeChild(t),s&&(o.removeAllRanges(),o.addRange(s)),n&&n.focus()}}function Sv(e){e.onclick=()=>{const t=e.parentElement;if(!t)return;const n=t.classList.contains("language-sh")||t.classList.contains("language-bash");let{innerText:o=""}=t;n&&(o=o.replace(/^ *\$ /gm,"")),Cv(o).then(()=>{e.classList.add("copied"),setTimeout(()=>{e.classList.remove("copied")},3e3)})}}const Ko=e=>(tt("data-v-2b75f22f"),e=e(),nt(),e),Pv={class:"NotFound"},Vv=Ko(()=>h("p",{class:"code"},"404",-1)),Iv=Ko(()=>h("h1",{class:"title"},"PAGE NOT FOUND",-1)),Mv=Ko(()=>h("div",{class:"divider"},null,-1)),Bv=Ko(()=>h("blockquote",{class:"quote"}," But if you don't change your direction, and if you keep looking, you may end up where you are heading. ",-1)),Ev={class:"action"},Tv=["href"],Lv=j({__name:"NotFound",setup(e){const{site:t}=ge();return(n,o)=>(v(),b("div",Pv,[Vv,Iv,Mv,Bv,h("div",Ev,[h("a",{class:"link",href:c(t).base,"aria-label":"go to home"}," Take me home ",8,Tv)])]))}});var $s=U(Lv,[["__scopeId","data-v-2b75f22f"]]);const Fv={},Av={class:"VPPage"};function Nv(e,t){const n=_t("Content");return v(),b("div",Av,[T(n)])}var Ov=U(Fv,[["render",Nv]]);const Rv=j({__name:"VPButton",props:{tag:null,size:null,theme:null,text:null,href:null},setup(e){const t=e,n=se(()=>{var r,i;return[(r=t.size)!=null?r:"medium",(i=t.theme)!=null?i:"brand"]}),o=se(()=>t.href&&/^[a-z]+:/i.test(t.href)),s=se(()=>t.tag?t.tag:t.href?"a":"button");return(r,i)=>(v(),de(Do(c(s)),{class:re(["VPButton",c(n)]),href:e.href?c(_n)(e.href):void 0,target:c(o)?"_blank":void 0,rel:c(o)?"noopener noreferrer":void 0},{default:oe(()=>[Me(le(e.text),1)]),_:1},8,["class","href","target","rel"]))}});var Hv=U(Rv,[["__scopeId","data-v-5c4332d0"]]);const Dv=e=>(tt("data-v-4354fcca"),e=e(),nt(),e),zv={class:"container"},jv={class:"main"},Uv={key:0,class:"name"},Wv={class:"clip"},Kv={key:1,class:"text"},qv={key:2,class:"tagline"},Gv={key:3,class:"actions"},Yv={key:0,class:"image"},Xv={class:"image-container"},Jv=Dv(()=>h("div",{class:"image-bg"},null,-1)),Qv=j({__name:"VPHero",props:{name:null,text:null,tagline:null,image:null,actions:null},setup(e){return(t,n)=>(v(),b("div",{class:re(["VPHero",{"has-image":e.image}])},[h("div",zv,[h("div",jv,[e.name?(v(),b("h1",Uv,[h("span",Wv,le(e.name),1)])):ee("",!0),e.text?(v(),b("p",Kv,le(e.text),1)):ee("",!0),e.tagline?(v(),b("p",qv,le(e.tagline),1)):ee("",!0),e.actions?(v(),b("div",Gv,[(v(!0),b(ce,null,Fe(e.actions,o=>(v(),b("div",{key:o.link,class:"action"},[T(Hv,{tag:"a",size:"medium",theme:o.theme,text:o.text,href:o.link},null,8,["theme","text","href"])]))),128))])):ee("",!0)]),e.image?(v(),b("div",Yv,[h("div",Xv,[Jv,T(fl,{class:"image-src",image:e.image},null,8,["image"])])])):ee("",!0)])],2))}});var Zv=U(Qv,[["__scopeId","data-v-4354fcca"]]);const e_=j({__name:"VPHomeHero",setup(e){const{frontmatter:t}=ge();return(n,o)=>c(t).hero?(v(),de(Zv,{key:0,class:"VPHomeHero",name:c(t).hero.name,text:c(t).hero.text,tagline:c(t).hero.tagline,image:c(t).hero.image,actions:c(t).hero.actions},null,8,["name","text","tagline","image","actions"])):ee("",!0)}});const t_={class:"VPFeature"},n_={key:0,class:"icon"},o_={class:"title"},s_={class:"details"},r_=j({__name:"VPFeature",props:{icon:null,title:null,details:null},setup(e){return(t,n)=>(v(),b("article",t_,[e.icon?(v(),b("div",n_,le(e.icon),1)):ee("",!0),h("h2",o_,le(e.title),1),h("p",s_,le(e.details),1)]))}});var i_=U(r_,[["__scopeId","data-v-31a8085a"]]);const l_={key:0,class:"VPFeatures"},a_={class:"container"},c_={class:"items"},u_=j({__name:"VPFeatures",props:{features:null},setup(e){const t=e,n=se(()=>{const o=t.features.length;if(o){if(o===2)return"grid-2";if(o===3)return"grid-3";if(o%3===0)return"grid-6";if(o%2===0)return"grid-4"}else return});return(o,s)=>e.features?(v(),b("div",l_,[h("div",a_,[h("div",c_,[(v(!0),b(ce,null,Fe(e.features,r=>(v(),b("div",{key:r.title,class:re(["item",[c(n)]])},[T(i_,{icon:r.icon,title:r.title,details:r.details},null,8,["icon","title","details"])],2))),128))])])])):ee("",!0)}});var d_=U(u_,[["__scopeId","data-v-2fe38425"]]);const f_=j({__name:"VPHomeFeatures",setup(e){const{frontmatter:t}=ge();return(n,o)=>c(t).features?(v(),de(d_,{key:0,class:"VPHomeFeatures",features:c(t).features},null,8,["features"])):ee("",!0)}});const h_={class:"VPHome"},p_=j({__name:"VPHome",setup(e){return(t,n)=>{const o=_t("Content");return v(),b("div",h_,[J(t.$slots,"home-hero-before",{},void 0,!0),T(e_),J(t.$slots,"home-hero-after",{},void 0,!0),J(t.$slots,"home-features-before",{},void 0,!0),T(f_),J(t.$slots,"home-features-after",{},void 0,!0),T(o)])}}});var v_=U(p_,[["__scopeId","data-v-17fa2fa0"]]),__=!1,qr;const to=typeof window!="undefined";to&&((qr=window==null?void 0:window.navigator)==null?void 0:qr.userAgent)&&/iP(ad|hone|od)/.test(window.navigator.userAgent);function m_(e){return Yl()?(Xl(e),!0):!1}function g_(e,t=!0){jo()?Li(e):t?e():Ze(e)}const b_=to?window:void 0;to&&window.document;to&&window.navigator;to&&window.location;function Gr(e,t={}){const{window:n=b_}=t,o=Boolean(n&&"matchMedia"in n&&typeof n.matchMedia=="function");let s;const r=R(!1),i=()=>{!o||(s||(s=n.matchMedia(e)),r.value=s.matches)};return g_(()=>{i(),s&&("addEventListener"in s?s.addEventListener("change",i):s.addListener(i),m_(()=>{"removeEventListener"in s?s.removeEventListener("change",i):s.removeListener(i)}))}),r}const ks=typeof globalThis!="undefined"?globalThis:typeof window!="undefined"?window:typeof global!="undefined"?global:typeof self!="undefined"?self:{},Cs="__vueuse_ssr_handlers__";ks[Cs]=ks[Cs]||{};ks[Cs];var Yr;(function(e){e.UP="UP",e.RIGHT="RIGHT",e.DOWN="DOWN",e.LEFT="LEFT",e.NONE="NONE"})(Yr||(Yr={}));function y_(){const{hasSidebar:e}=gt(),t=Gr("(min-width: 960px)"),n=Gr("(min-width: 1280px)");return{isAsideEnabled:se(()=>!n.value&&!t.value?!1:e.value?n.value:t.value)}}const x_=56;function w_(){const{page:e}=ge();return{hasOutline:se(()=>e.value.headers.length>0)}}function $_(e){return bl(k_(e))}function k_(e){e=e.map(n=>Object.assign({},n));let t;for(const n of e)n.level===2?t=n:t&&n.level<=3&&(t.children||(t.children=[])).push(n);return e.filter(n=>n.level===2)}function bl(e){return e.map(t=>({text:t.title,link:`#${t.slug}`,children:t.children?bl(t.children):void 0,hidden:t.hidden}))}function C_(e,t){const{isAsideEnabled:n}=y_(),o=Iu(r,100);let s=null;Xe(()=>{requestAnimationFrame(r),window.addEventListener("scroll",o)}),Fi(()=>{i(location.hash)}),mt(()=>{window.removeEventListener("scroll",o)});function r(){if(!n.value)return;const l=[].slice.call(e.value.querySelectorAll(".outline-link")),a=[].slice.call(document.querySelectorAll(".content .header-anchor")).filter(y=>l.some(k=>k.hash===y.hash&&y.offsetParent!==null)),d=window.scrollY,p=window.innerHeight,_=document.body.offsetHeight,m=d+p===_;if(a.length&&m){i(a[a.length-1].hash);return}for(let y=0;y<a.length;y++){const k=a[y],M=a[y+1],[S,w]=S_(y,k,M);if(S){history.replaceState(null,document.title,w||" "),i(w);return}}}function i(l){s&&s.classList.remove("active"),l!==null&&(s=e.value.querySelector(`a[href="${decodeURIComponent(l)}"]`));const a=s;a?(a.classList.add("active"),t.value.style.top=a.offsetTop+33+"px",t.value.style.opacity="1"):(t.value.style.top="33px",t.value.style.opacity="0")}}function Xr(e){return e.parentElement.offsetTop-x_-15}function S_(e,t,n){const o=window.scrollY;return e===0&&o===0?[!0,null]:o<Xr(t)?[!1,null]:!n||o<Xr(n)?[!0,t.hash]:[!1,null]}const P_=e=>(tt("data-v-123cce62"),e=e(),nt(),e),V_={class:"content"},I_={class:"outline-title"},M_={"aria-labelledby":"doc-outline-aria-label"},B_=P_(()=>h("span",{class:"visually-hidden",id:"doc-outline-aria-label"}," Table of Contents for current page ",-1)),E_={class:"root"},T_=["href"],L_={key:0},F_=["href"],A_=j({__name:"VPDocAsideOutline",setup(e){const{page:t,frontmatter:n,theme:o}=ge(),{hasOutline:s}=w_(),r=R(),i=R();C_(r,i);const l=se(()=>$_(t.value.headers));function a({target:d}){const p="#"+d.href.split("#")[1],_=document.querySelector(p);_==null||_.focus()}return(d,p)=>(v(),b("div",{class:re(["VPDocAsideOutline",{"has-outline":c(s)}]),ref_key:"container",ref:r},[h("div",V_,[h("div",{class:"outline-marker",ref_key:"marker",ref:i},null,512),h("div",I_,le(c(o).outlineTitle||"On this page"),1),h("nav",M_,[B_,h("ul",E_,[(v(!0),b(ce,null,Fe(c(l),({text:_,link:m,children:y,hidden:k})=>Se((v(),b("li",null,[h("a",{class:"outline-link",href:m,onClick:a},le(_),9,T_),y&&c(n).outline==="deep"?(v(),b("ul",L_,[(v(!0),b(ce,null,Fe(y,({text:M,link:S,hidden:w})=>Se((v(),b("li",null,[h("a",{class:"outline-link nested",href:S,onClick:a},le(M),9,F_)],512)),[[Ae,!w]])),256))])):ee("",!0)],512)),[[Ae,!k]])),256))])])])],2))}});var N_=U(A_,[["__scopeId","data-v-123cce62"]]);const O_={class:"VPDocAsideCarbonAds"},R_=j({__name:"VPDocAsideCarbonAds",setup(e){const t=()=>null;return(n,o)=>(v(),b("div",O_,[T(c(t))]))}});const H_=e=>(tt("data-v-35c1bae1"),e=e(),nt(),e),D_={class:"VPDocAside"},z_=H_(()=>h("div",{class:"spacer"},null,-1)),j_=j({__name:"VPDocAside",setup(e){const{page:t,theme:n}=ge();return(o,s)=>(v(),b("div",D_,[J(o.$slots,"aside-top",{},void 0,!0),J(o.$slots,"aside-outline-before",{},void 0,!0),c(t).headers.length?(v(),de(N_,{key:0})):ee("",!0),J(o.$slots,"aside-outline-after",{},void 0,!0),z_,J(o.$slots,"aside-ads-before",{},void 0,!0),c(n).carbonAds?(v(),de(R_,{key:1})):ee("",!0),J(o.$slots,"aside-ads-after",{},void 0,!0),J(o.$slots,"aside-bottom",{},void 0,!0)]))}});var U_=U(j_,[["__scopeId","data-v-35c1bae1"]]);function W_(){const{theme:e,page:t}=ge();return se(()=>{const{text:n="Edit this page",pattern:o}=e.value.editLink||{},{relativePath:s}=t.value;return{url:o.replace(/:path/g,s),text:n}})}function K_(){const{page:e,theme:t}=ge();return se(()=>{const n=dl(t.value.sidebar,e.value.relativePath),o=Mu(n),s=o.findIndex(r=>eo(e.value.relativePath,r.link));return{prev:o[s-1],next:o[s+1]}})}const q_={},G_={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},Y_=h("path",{d:"M18,23H4c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h7c0.6,0,1,0.4,1,1s-0.4,1-1,1H4C3.4,5,3,5.4,3,6v14c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-7c0-0.6,0.4-1,1-1s1,0.4,1,1v7C21,21.7,19.7,23,18,23z"},null,-1),X_=h("path",{d:"M8,17c-0.3,0-0.5-0.1-0.7-0.3C7,16.5,6.9,16.1,7,15.8l1-4c0-0.2,0.1-0.3,0.3-0.5l9.5-9.5c1.2-1.2,3.2-1.2,4.4,0c1.2,1.2,1.2,3.2,0,4.4l-9.5,9.5c-0.1,0.1-0.3,0.2-0.5,0.3l-4,1C8.2,17,8.1,17,8,17zM9.9,12.5l-0.5,2.1l2.1-0.5l9.3-9.3c0.4-0.4,0.4-1.1,0-1.6c-0.4-0.4-1.2-0.4-1.6,0l0,0L9.9,12.5z M18.5,2.5L18.5,2.5L18.5,2.5z"},null,-1),J_=[Y_,X_];function Q_(e,t){return v(),b("svg",G_,J_)}var Z_=U(q_,[["render",Q_]]);const em={class:"VPLastUpdated"},tm=["datatime"],nm=j({__name:"VPDocFooterLastUpdated",setup(e){const{theme:t,page:n}=ge(),o=new Date(n.value.lastUpdated),s=o.toISOString(),r=R("");return Xe(()=>{xn(()=>{r.value=o.toLocaleString(window.navigator.language)})}),(i,l)=>{var a;return v(),b("p",em,[Me(le((a=c(t).lastUpdatedText)!=null?a:"Last updated")+": ",1),h("time",{datatime:c(s)},le(r.value),9,tm)])}}});var om=U(nm,[["__scopeId","data-v-819b7a18"]]);const yl=e=>(tt("data-v-cfaa3a6c"),e=e(),nt(),e),sm={class:"VPDocFooter"},rm={class:"edit-info"},im={key:0,class:"edit-link"},lm={key:1,class:"last-updated"},am={key:0,class:"prev-next"},cm={class:"pager"},um=["href"],dm=yl(()=>h("span",{class:"desc"},"Previous page",-1)),fm={class:"title"},hm=["href"],pm=yl(()=>h("span",{class:"desc"},"Next page",-1)),vm={class:"title"},_m=j({__name:"VPDocFooter",setup(e){const{theme:t,page:n,frontmatter:o}=ge(),s=W_(),r=K_(),i=se(()=>n.value.lastUpdated&&o.value.lastUpdated!==!1);return(l,a)=>(v(),b("footer",sm,[h("div",rm,[c(t).editLink&&c(o).editLink!==!1?(v(),b("div",im,[T($n,{class:"edit-link-button",href:c(s).url,"no-icon":!0},{default:oe(()=>[T(Z_,{class:"edit-link-icon"}),Me(" "+le(c(s).text),1)]),_:1},8,["href"])])):ee("",!0),c(i)?(v(),b("div",lm,[T(om)])):ee("",!0)]),c(r).prev||c(r).next?(v(),b("div",am,[h("div",cm,[c(r).prev?(v(),b("a",{key:0,class:"pager-link prev",href:c(ws)(c(r).prev.link)},[dm,h("span",fm,le(c(r).prev.text),1)],8,um)):ee("",!0)]),h("div",{class:re(["pager",{"has-prev":c(r).prev}])},[c(r).next?(v(),b("a",{key:0,class:"pager-link next",href:c(ws)(c(r).next.link)},[pm,h("span",vm,le(c(r).next.text),1)],8,hm)):ee("",!0)],2)])):ee("",!0)]))}});var mm=U(_m,[["__scopeId","data-v-cfaa3a6c"]]);const gm=e=>(tt("data-v-32b7ddf4"),e=e(),nt(),e),bm={class:"container"},ym={class:"aside"},xm=gm(()=>h("div",{class:"aside-curtain"},null,-1)),wm={class:"aside-container"},$m={class:"aside-content"},km={class:"content"},Cm={class:"content-container"},Sm={class:"main"},Pm=j({__name:"VPDoc",setup(e){const{path:t}=wn(),{hasSidebar:n}=gt(),o=t.replace(/[./]+/g,"_").replace(/_html$/,"");return(s,r)=>{const i=_t("Content");return v(),b("div",{class:re(["VPDoc",{"has-sidebar":c(n)}])},[h("div",bm,[h("div",ym,[xm,h("div",wm,[h("div",$m,[T(U_,null,{"aside-top":oe(()=>[J(s.$slots,"aside-top",{},void 0,!0)]),"aside-bottom":oe(()=>[J(s.$slots,"aside-bottom",{},void 0,!0)]),"aside-outline-before":oe(()=>[J(s.$slots,"aside-outline-before",{},void 0,!0)]),"aside-outline-after":oe(()=>[J(s.$slots,"aside-outline-after",{},void 0,!0)]),"aside-ads-before":oe(()=>[J(s.$slots,"aside-ads-before",{},void 0,!0)]),"aside-ads-after":oe(()=>[J(s.$slots,"aside-ads-after",{},void 0,!0)]),_:3})])])]),h("div",km,[h("div",Cm,[J(s.$slots,"doc-before",{},void 0,!0),h("main",Sm,[T(i,{class:re(["vp-doc",c(o)])},null,8,["class"])]),T(mm),J(s.$slots,"doc-after",{},void 0,!0)])])])],2)}}});var Vm=U(Pm,[["__scopeId","data-v-32b7ddf4"]]);const Im=j({__name:"VPContent",setup(e){const t=wn(),{frontmatter:n}=ge(),{hasSidebar:o}=gt();return kv(),(s,r)=>(v(),b("div",{class:re(["VPContent",{"has-sidebar":c(o),"is-home":c(n).layout==="home"}]),id:"VPContent"},[c(t).component===$s?(v(),de($s,{key:0})):c(n).layout==="page"?(v(),de(Ov,{key:1})):c(n).layout==="home"?(v(),de(v_,{key:2},{"home-hero-before":oe(()=>[J(s.$slots,"home-hero-before",{},void 0,!0)]),"home-hero-after":oe(()=>[J(s.$slots,"home-hero-after",{},void 0,!0)]),"home-features-before":oe(()=>[J(s.$slots,"home-features-before",{},void 0,!0)]),"home-features-after":oe(()=>[J(s.$slots,"home-features-after",{},void 0,!0)]),_:3})):(v(),de(Vm,{key:3},{"doc-before":oe(()=>[J(s.$slots,"doc-before",{},void 0,!0)]),"doc-after":oe(()=>[J(s.$slots,"doc-after",{},void 0,!0)]),"aside-top":oe(()=>[J(s.$slots,"aside-top",{},void 0,!0)]),"aside-outline-before":oe(()=>[J(s.$slots,"aside-outline-before",{},void 0,!0)]),"aside-outline-after":oe(()=>[J(s.$slots,"aside-outline-after",{},void 0,!0)]),"aside-ads-before":oe(()=>[J(s.$slots,"aside-ads-before",{},void 0,!0)]),"aside-ads-after":oe(()=>[J(s.$slots,"aside-ads-after",{},void 0,!0)]),"aside-bottom":oe(()=>[J(s.$slots,"aside-bottom",{},void 0,!0)]),_:3}))],2))}});var Mm=U(Im,[["__scopeId","data-v-564173e9"]]);const Bm={class:"container"},Em={class:"message"},Tm={class:"copyright"},Lm=j({__name:"VPFooter",setup(e){const{theme:t}=ge(),{hasSidebar:n}=gt();return(o,s)=>c(t).footer?(v(),b("footer",{key:0,class:re(["VPFooter",{"has-sidebar":c(n)}])},[h("div",Bm,[h("p",Em,le(c(t).footer.message),1),h("p",Tm,le(c(t).footer.copyright),1)])],2)):ee("",!0)}});var Fm=U(Lm,[["__scopeId","data-v-a6c8dde4"]]);const Am={class:"Layout"},Nm=j({__name:"Layout",setup(e){const{isOpen:t,open:n,close:o}=gt();return Bu(t,o),zs("close-sidebar",o),(s,r)=>(v(),b("div",Am,[J(s.$slots,"layout-top",{},void 0,!0),T(Tu),T(Au,{class:"backdrop",show:c(t),onClick:c(o)},null,8,["show","onClick"]),T(Lp),T(Yp,{open:c(t),onOpenMenu:c(n)},null,8,["open","onOpenMenu"]),T($v,{open:c(t)},null,8,["open"]),T(Mm,null,{"home-hero-before":oe(()=>[J(s.$slots,"home-hero-before",{},void 0,!0)]),"home-hero-after":oe(()=>[J(s.$slots,"home-hero-after",{},void 0,!0)]),"home-features-before":oe(()=>[J(s.$slots,"home-features-before",{},void 0,!0)]),"home-features-after":oe(()=>[J(s.$slots,"home-features-after",{},void 0,!0)]),"doc-before":oe(()=>[J(s.$slots,"doc-before",{},void 0,!0)]),"doc-after":oe(()=>[J(s.$slots,"doc-after",{},void 0,!0)]),"aside-top":oe(()=>[J(s.$slots,"aside-top",{},void 0,!0)]),"aside-bottom":oe(()=>[J(s.$slots,"aside-bottom",{},void 0,!0)]),"aside-outline-before":oe(()=>[J(s.$slots,"aside-outline-before",{},void 0,!0)]),"aside-outline-after":oe(()=>[J(s.$slots,"aside-outline-after",{},void 0,!0)]),"aside-ads-before":oe(()=>[J(s.$slots,"aside-ads-before",{},void 0,!0)]),"aside-ads-after":oe(()=>[J(s.$slots,"aside-ads-after",{},void 0,!0)]),_:3}),T(Fm),J(s.$slots,"layout-bottom",{},void 0,!0)]))}});var Om=U(Nm,[["__scopeId","data-v-058b7495"]]);const Rm={Layout:Om,NotFound:$s};const bt=e=>(e.install=t=>{t.component(e.name,e)},e),xl=(e,t)=>(e.install=n=>{if(n.component(e.name,e),Array.isArray(t))for(const o of t)n.use(o)},e);function Ve(e){return typeof e=="number"}function pe(e){return typeof e=="string"}function nn(e){return typeof e=="function"}function wl(e){return typeof e=="boolean"}function Jr(e){return Array.isArray(e)}function $l(e){return typeof e=="object"}const ot={theme:{type:String,default:"global"},disabled:{type:Boolean,default:!1},lang:{type:String,default:"global"}},Hm={...ot,icon:{type:String},foreground:{type:String},background:{type:String},borderRadius:{type:[Number,String],default:3},fontSize:{type:[Number,String]},fontWeight:{type:[Number,String],default:"normal"},isBoxShadow:{type:Boolean,default:!1},borderWidth:{type:[Number,String],default:2}},Dm={click(e){return!0}},zm=(e,t)=>({onClick:o=>{e.disabled||t("click",o)}});class ke{constructor(){this._constructorFunctions=[]}add(t,n){return this._constructorFunctions.push({name:t,value:n}),this}computed(){return{cls:se(()=>{const n={};for(let o of this._constructorFunctions){let s;pe(o.name)?s=o.name:nn(o.name)&&(s=o.name());let r;wl(o.value)?r=o.value:nn(o.value)?r=o.value():o.value==null&&(r=!0),s!==void 0&&r!==void 0&&(n[s]=r)}return n})}}}class Ye{constructor(){this._constructorFunctions=[]}add(t,n,o){return this._constructorFunctions.push({name:t,value:n,condition:o}),this}computed(){return{style:se(()=>{const n={};for(let o of this._constructorFunctions){if(o.condition!==void 0){if(wl(o.condition)&&o.condition===!1)continue;if(nn(o.condition)&&o.condition()===!1)continue}let s;pe(o.name)?s=o.name:nn(o.name)&&(s=o.name());let r;pe(o.value)?r=o.value:nn(o.value)&&(r=o.value()),pe(s)&&pe(r)&&(n[s]=r)}return n})}}}/*!
-  * pinia v2.0.17
-  * (c) 2022 Eduardo San Martin Morote
-  * @license MIT
-  */let kl;const qo=e=>kl=e,Cl=Symbol();function Ss(e){return e&&typeof e=="object"&&Object.prototype.toString.call(e)==="[object Object]"&&typeof e.toJSON!="function"}var Rn;(function(e){e.direct="direct",e.patchObject="patch object",e.patchFunction="patch function"})(Rn||(Rn={}));function jm(){const e=ii(!0),t=e.run(()=>R({}));let n=[],o=[];const s=kt({install(r){qo(s),s._a=r,r.provide(Cl,s),r.config.globalProperties.$pinia=s,o.forEach(i=>n.push(i)),o=[]},use(r){return!this._a&&!__?o.push(r):n.push(r),this},_p:n,_a:null,_e:e,_s:new Map,state:t});return s}const Sl=()=>{};function Qr(e,t,n,o=Sl){e.push(t);const s=()=>{const r=e.indexOf(t);r>-1&&(e.splice(r,1),o())};return!n&&jo()&&mt(s),s}function ln(e,...t){e.slice().forEach(n=>{n(...t)})}function Ps(e,t){for(const n in t){if(!t.hasOwnProperty(n))continue;const o=t[n],s=e[n];Ss(s)&&Ss(o)&&e.hasOwnProperty(n)&&!he(o)&&!Ht(o)?e[n]=Ps(s,o):e[n]=o}return e}const Um=Symbol();function Wm(e){return!Ss(e)||!e.hasOwnProperty(Um)}const{assign:xt}=Object;function Km(e){return!!(he(e)&&e.effect)}function qm(e,t,n,o){const{state:s,actions:r,getters:i}=t,l=n.state.value[e];let a;function d(){l||(n.state.value[e]=s?s():{});const p=Sa(n.state.value[e]);return xt(p,r,Object.keys(i||{}).reduce((_,m)=>(_[m]=kt(se(()=>{qo(n);const y=n._s.get(e);return i[m].call(y,y)})),_),{}))}return a=Pl(e,d,t,n,o,!0),a.$reset=function(){const _=s?s():{};this.$patch(m=>{xt(m,_)})},a}function Pl(e,t,n={},o,s,r){let i;const l=xt({actions:{}},n),a={deep:!0};let d,p,_=kt([]),m=kt([]),y;const k=o.state.value[e];!r&&!k&&(o.state.value[e]={}),R({});let M;function S(z){let V;d=p=!1,typeof z=="function"?(z(o.state.value[e]),V={type:Rn.patchFunction,storeId:e,events:y}):(Ps(o.state.value[e],z),V={type:Rn.patchObject,payload:z,storeId:e,events:y});const D=M=Symbol();Ze().then(()=>{M===D&&(d=!0)}),p=!0,ln(_,V,o.state.value[e])}const w=Sl;function B(){i.stop(),_=[],m=[],o._s.delete(e)}function W(z,V){return function(){qo(o);const D=Array.from(arguments),E=[],Q=[];function N(ne){E.push(ne)}function C(ne){Q.push(ne)}ln(m,{args:D,name:z,store:K,after:N,onError:C});let x;try{x=V.apply(this&&this.$id===e?this:K,D)}catch(ne){throw ln(Q,ne),ne}return x instanceof Promise?x.then(ne=>(ln(E,ne),ne)).catch(ne=>(ln(Q,ne),Promise.reject(ne))):(ln(E,x),x)}}const Y={_p:o,$id:e,$onAction:Qr.bind(null,m),$patch:S,$reset:w,$subscribe(z,V={}){const D=Qr(_,z,V.detached,()=>E()),E=i.run(()=>ze(()=>o.state.value[e],Q=>{(V.flush==="sync"?p:d)&&z({storeId:e,type:Rn.direct,events:y},Q)},xt({},a,V)));return D},$dispose:B},K=Qn(xt({},Y));o._s.set(e,K);const ie=o._e.run(()=>(i=ii(),i.run(()=>t())));for(const z in ie){const V=ie[z];if(he(V)&&!Km(V)||Ht(V))r||(k&&Wm(V)&&(he(V)?V.value=k[z]:Ps(V,k[z])),o.state.value[e][z]=V);else if(typeof V=="function"){const D=W(z,V);ie[z]=D,l.actions[z]=V}}return xt(K,ie),xt(me(K),ie),Object.defineProperty(K,"$state",{get:()=>o.state.value[e],set:z=>{S(V=>{xt(V,z)})}}),o._p.forEach(z=>{xt(K,i.run(()=>z({store:K,app:o._a,pinia:o,options:l})))}),k&&r&&n.hydrate&&n.hydrate(K.$state,k),d=!0,p=!0,K}function Vl(e,t,n){let o,s;const r=typeof t=="function";typeof e=="string"?(o=e,s=r?n:t):(s=e,o=e.id);function i(l,a){const d=jo();return l=l||d&&Ct(Cl),l&&qo(l),l=kl,l._s.has(o)||(r?Pl(o,t,s,l):qm(o,s,l)),l._s.get(o)}return i.$id=o,i}const Gm=Vl("FvConfig",()=>{const e=R("light"),t=R({});function n(s){e.value=s}function o(){if(document!==void 0){const s=Array.from(document.styleSheets).map(r=>Array.from(r.cssRules).map(i=>i.selectorText===":root"?i.cssText.split("{")[1].split("}")[0].split(";").filter(l=>l.trim().startsWith("--fv")).map(l=>{const[a,d]=l.split(":").map(p=>p.trim());return{name:a,value:d}}):[]).filter(i=>i.length>0)).filter(r=>r.length>0).flat(2);t.value={};for(const r of s)t.value[r.name]=r.value}}return{theme:e,changeTheme:n,refreshVariables:o}});function st(e){const t=Gm();return{theme:se(()=>e.theme==="global"&&e.theme!==void 0?t.theme:e.theme)}}function Ym(e,t){if(t==null||e===void 0||e===null)return!0;if(e===t||Jr(t)&&t.findIndex(n=>n==e)!==-1)return!1;for(;e!==null&&e!==document.body;)if(e=e.parentElement,e===t||Jr(t)&&t.findIndex(n=>n==e)!==-1)return!1;return!0}function ts(e){const{display:t,visibility:n,transition:o,animation:s}=e.style;return e.style.display="initial",e.style.visibility="hidden",e.style.transition="none",e.style.animation="none",{display:t,visibility:n,transition:o,animation:s}}function ns(e,{display:t,visibility:n,transition:o,animation:s}){e.style.display=t,e.style.visibility=n,e.style.transition=o,e.style.animation=s}function Te(e){if(e===void 0)return new DOMRect(0,0,0,0);let{display:t}=getComputedStyle(e);if(t!=="none"){let s=e.getBoundingClientRect();if(s.height===0&&s.width===0){const r=[];let i=e.parentElement;for(;i!==null&&i!==document.body;){if(t=getComputedStyle(i).display,t==="none"){const l=ts(i);r.push({el:i,style:l})}i=i.parentElement}s=e.getBoundingClientRect();for(const l of r)ns(l.el,l.style)}return s}const n=ts(e);let o=e.getBoundingClientRect();if(o.height===0&&o.width===0){const s=[];let r=e.parentElement;for(;r!==null&&r!==document.body;){if(t=getComputedStyle(r).display,t==="none"){const i=ts(r);s.push({el:r,style:i})}r=r.parentElement}o=e.getBoundingClientRect();for(const i of s)ns(i.el,i.style)}return ns(e,n),o}function ho(e){const t={left:e.left,top:e.top,bottom:0,right:0},n=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,o=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight;return t.right=n-e.left-e.width,t.bottom=o-e.top-e.height,t}function Ue(e,t,n){return Math.max(t,Math.min(e,n))}class Hn{constructor(t){this.channels={rgb:[0,0,0],hsv:[0,0,0]},this.valpha=1,pe(t)&&this.parse(t)}clone(){const t=new Hn;for(let n in this.channels)t.channels[n]=[...this.channels[n]];return t.valpha=this.valpha,t}parse(t){t=t.trim();let n=!0;if(/^#[0-9a-fA-F]{6}$/.test(t)){let[o,s,r]=[parseInt(t.substring(1,3),16),parseInt(t.substring(3,5),16),parseInt(t.substring(5,7),16)];this.channels.rgb=[o,s,r],this.valpha=1}else if(/^#[0-9a-fA-F]{8}$/.test(t)){let[o,s,r]=[parseInt(t.substring(1,3),16),parseInt(t.substring(3,5),16),parseInt(t.substring(5,7),16)];this.channels.rgb=[o,s,r],this.valpha=parseInt(t.substring(7,9),16)/255}else if(t.startsWith("rgb(")){t=t.substring(4,t.length-1);const o=t.split(",");o.length===3?this.channels.rgb=o.map(s=>parseInt(s)):n=!1}else if(t.startsWith("rgba(")){t=t.substring(5,t.length-1);const o=t.split(",");if(o.length===4){let[s,r,i,l]=o.map(a=>parseFloat(a));this.channels.rgb=[s,r,i],this.valpha=l}else n=!1}return n===!1&&console.error(`color ${t} parse error`),this.updateRGB2HSV(),this}updateRGB2HSV(){let[t,n,o]=this.channels.rgb;t/=255,n/=255,o/=255;let s=Math.max(t,n,o),r=Math.min(t,n,o),[i,l,a]=this.channels.hsv;return s===r?i=0:r===o?i=60*(n-t)/(s-r)+60:r===t?i=60*(o-n)/(s-r)+180:i=60*(t-o)/(s-r)+300,s==0?l=0:l=(s-r)/s*100,a=s*100,i=Ue(i,0,359),l=Ue(l,0,100),a=Ue(a,0,100),this.channels.hsv=[i,l,a],this}updateHSV2RGB(){let[t,n,o]=this.channels.hsv;n/=100,o/=100;let s=n,r=t/60,i=s*(1-Math.abs(r%2-1)),[l,a,d]=[o-s,o-s,o-s],p=[[s,i,0],[i,s,0],[0,s,i],[0,i,s],[i,0,s],[s,0,i]],[_,m,y]=p[Math.floor(r)];return l+=_,a+=m,d+=y,l=Ue(l,0,1),a=Ue(a,0,1),d=Ue(d,0,1),l*=255,a*=255,d*=255,l=Math.round(l),d=Math.round(d),a=Math.round(a),this.channels.rgb=[l,a,d],this}red(t){return t!==void 0?(this.channels.rgb[0]=Math.round(Ue(t,0,255)),this.updateRGB2HSV()):this.channels.rgb[0]}green(t){return t!==void 0?(this.channels.rgb[1]=Math.round(Ue(t,0,255)),this.updateRGB2HSV()):this.channels.rgb[1]}blue(t){return t!==void 0?(this.channels.rgb[2]=Math.round(Ue(t,0,255)),this.updateRGB2HSV()):this.channels.rgb[2]}hue(t){return t!==void 0?(this.channels.hsv[0]=Ue(t,0,359),this.updateHSV2RGB()):this.channels.hsv[0]}saturation(t){return t!==void 0?(this.channels.hsv[1]=Ue(t,0,100),this.updateHSV2RGB()):this.channels.hsv[1]}value(t){return t!==void 0?(this.channels.hsv[2]=Ue(t,0,100),this.updateHSV2RGB()):this.channels.hsv[2]}alpha(t){return t!==void 0?(this.valpha=Ue(t,0,1),this):this.valpha}hex(){let[t,n,o]=this.channels.rgb;return`#${t.toString(16).padStart(2,"0")}${n.toString(16).padStart(2,"0")}${o.toString(16).padStart(2,"0")}`.toUpperCase()}hexa(){return`${this.hex()}${Math.round(this.valpha*255).toString(16).padStart(2,"0")}`.toUpperCase()}cssrgb(){let[t,n,o]=this.channels.rgb;return`rgb(${t}, ${n}, ${o})`}cssrgba(){let[t,n,o]=this.channels.rgb;return`rgba(${t}, ${n}, ${o}, ${this.alpha()})`}isDark(){const[t,n,o]=this.channels.rgb;return .2126*t+.7152*n+.0722*o<128}isLight(){const[t,n,o]=this.channels.rgb;return .2126*t+.7152*n+.0722*o>=128}}function os(e,t){let n=!1;return function o(...s){n||(n=!0,window!==void 0&&t===void 0?window.requestAnimationFrame(()=>{e.apply(o,s),n=!1}):setTimeout(()=>{e.apply(o,s),n=!1},t===void 0?1/60:t))}}function Nt(){let e=!1;return function(t){(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(t)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(t.substr(0,4)))&&(e=!0)}(navigator.userAgent||navigator.vendor||window.opera),e}class ss{constructor(t){this.eventFunc=n=>{n==null||n.preventDefault(),t(n)}}listen(){if(window!==void 0){const t=this.destory();return Nt()?(window.addEventListener("touchmove",this.eventFunc,{passive:!1}),window.addEventListener("touchend",t)):(window.addEventListener("mousemove",this.eventFunc),window.addEventListener("mouseup",t),window.addEventListener("mouseleave",t)),{destory:t}}return{destory:()=>{}}}destory(){const t=this.eventFunc;return function n(){window!==void 0&&(Nt()?(window.removeEventListener("touchmove",t),window.removeEventListener("touchend",n)):(window.removeEventListener("mousemove",t),window.removeEventListener("mouseup",n),window.removeEventListener("mouseleave",n)))}}}const Xm={name:"FvButton"},Jm=j({...Xm,props:Hm,emits:Dm,setup(e,{emit:t}){const n=e,{theme:o}=st(n),{cls:s}=new ke().add("fv-button").add(()=>o.value).computed(),{cls:r}=new ke().add("button-container").add("disabled",()=>n.disabled).add("shadow",()=>n.isBoxShadow).computed(),{cls:i}=new ke().add("ms-Icon").add(()=>`ms-Icon--${n.icon}`,()=>pe(n.icon)).computed(),{style:l}=new Ye().add("color",()=>n.foreground,()=>pe(n.foreground)).add("background",()=>n.background,()=>pe(n.background)).add("borderWidth",()=>n.borderWidth,()=>pe(n.borderWidth)).add("borderWidth",()=>`${n.borderWidth}px`,()=>Ve(n.borderWidth)).add("borderRadius",()=>n.borderRadius,()=>pe(n.borderRadius)).add("borderRadius",()=>`${n.borderRadius}px`,()=>Ve(n.borderRadius)).computed(),{style:a}=new Ye().add("fontSize",()=>n.fontSize,()=>pe(n.fontSize)).add("fontSize",()=>`${n.fontSize}px`,()=>Ve(n.fontSize)).add("fontWeight",()=>`${n.fontWeight}px`,()=>Ve(n.fontWeight)).add("fontWeight",()=>n.fontWeight,()=>pe(n.fontWeight)).computed(),{onClick:d}=zm(n,t);return(p,_)=>(v(),b("div",{class:re(c(s)),onClick:_[0]||(_[0]=(...m)=>c(d)&&c(d)(...m))},[h("button",{type:"button",class:re(c(r)),style:Ee(c(l))},[h("span",{class:"content-block",style:Ee(c(a))},[n.icon?(v(),b("i",{key:0,class:re(c(i))},null,2)):ee("",!0),J(p.$slots,"default")],4)],6)],2))}}),Qm=bt(Jm);const Zm={...ot,modelValue:{type:[Boolean],default:void 0},borderWidth:{type:[Number,String],default:1.5},borderColor:{type:[String]},foreground:{type:[String]},background:{type:[String]},hoverColor:{type:[String]},boxSide:{type:[String],default:"start"}},e0={click(e){return!0},"update:modelValue"(e){return!0},change(e){return!0},focus(e){return!0},blur(e){return!0}};function t0(e,t){const n=R(),o=se({get:()=>e.modelValue===void 0?n.value:e.modelValue===null?void 0:e.modelValue,set:a=>{n.value=a,t("update:modelValue",a)}});return{onClick:a=>{e.disabled||a.target instanceof HTMLInputElement&&t("click",o.value!==void 0?!o.value:!0)},onChange:a=>{e.disabled||t("change",a===void 0?null:a)},onFocus:a=>{e.disabled||t("focus",a)},onBlur:a=>{e.disabled||t("blur",a)},computedChecked:o}}const n0=["checked","disabled"],o0={class:"icon-box"},s0={name:"FvCheckBox"},r0=j({...s0,props:Zm,emits:e0,setup(e,{emit:t}){const n=e,{theme:o}=st(n),{computedChecked:s,onClick:r,onChange:i,onFocus:l,onBlur:a}=t0(n,t),{cls:d}=new ke().add("fv-checkbox").add(()=>o.value).add("active",()=>s.value!==!1).add("disabled",()=>n.disabled).computed(),{cls:p}=new ke().add("ms-Icon").add("ms-Icon--CheckMark",()=>s.value===!0).add("ms-Icon--CheckboxIndeterminate",()=>s.value===void 0).computed(),{style:_}=new Ye().add("background",()=>n.background,()=>n.background!==void 0).add("--fv-checkbox-bgcolor",()=>n.hoverColor,()=>n.hoverColor!==void 0).add("borderWidth",()=>n.borderWidth,()=>pe(n.borderWidth)).add("borderWidth",()=>`${n.borderWidth}px`,()=>Ve(n.borderWidth)).add("borderColor",()=>n.borderColor,()=>n.borderColor!==void 0).computed(),{style:m}=new Ye().add("color",()=>n.foreground,()=>n.foreground!==void 0).computed();return(y,k)=>(v(),b("div",{class:re(c(d))},[h("label",{class:"label",onClick:k[4]||(k[4]=(...M)=>c(r)&&c(r)(...M))},[n.boxSide==="end"?(v(),b("span",{key:0,style:Ee(c(m))},[J(y.$slots,"default")],4)):ee("",!0),Se(h("input",{checked:c(s),onChange:k[0]||(k[0]=M=>c(i)(c(s))),onFocus:k[1]||(k[1]=(...M)=>c(l)&&c(l)(...M)),onBlur:k[2]||(k[2]=(...M)=>c(a)&&c(a)(...M)),disabled:n.disabled,type:"checkbox",class:"checkbox","onUpdate:modelValue":k[3]||(k[3]=M=>he(s)?s.value=M:null)},null,40,n0),[[Ks,c(s)]]),h("div",{class:"icon",style:Ee(c(_))},[T(Vt,{name:"font-clip-in"},{default:oe(()=>[Se(h("div",o0,null,512),[[Ae,c(s)!==!1]])]),_:1}),h("i",{class:re(c(p))},null,2)],4),n.boxSide==="start"?(v(),b("span",{key:1,style:Ee(c(m))},[J(y.$slots,"default")],4)):ee("",!0)])],2))}}),i0=bt(r0);const l0={...ot,modelValue:{type:[String]},type:{type:[String],default:"box"}},a0={"update:modelValue"(e){return!0}},c0=(e,t)=>{const n=["rgb(255, 0, 0)","rgb(255, 153, 0)","rgb(205, 255, 0)","rgb(53, 255, 0)","rgb(0, 255, 102)","rgb(0, 255, 253)","rgb(0, 102, 255)","rgb(50, 0, 255)","rgb(205, 0, 255)","rgb(255, 0, 153)","rgb(255, 0, 0)"],o=[{key:"HSV"},{key:"RGB"}],s=R(),r=R(),i=R(),l=R("RGB"),a=R("#000000FF"),d=R("0"),p=R("0"),_=R("0"),m=R("0"),y=R("0"),k=R("0"),M=R("100%"),S=R(new Hn(a.value)),w=R(0),B=R(0),W=R(0),Y=R(0),K=R(n.map(A=>new Hn(A))),ie=R(K.value.map(A=>A.cssrgb()).join(",")),z=A=>{a.value=A.hexa(),t("update:modelValue",a.value)},V=A=>{d.value=A.red().toString(),p.value=A.green().toString(),_.value=A.blue().toString()},D=A=>{m.value=Math.round(A.hue()).toString(),y.value=Math.round(A.saturation()).toString(),k.value=Math.round(A.value()).toString(),K.value=K.value.map(u=>u.clone().value(A.value())),ie.value=K.value.map(u=>u.cssrgb()).join();{const{width:u,height:f}=Te(s.value);if(e.type==="ring"){let g=A.hue()/360*Math.PI*2,$=u/2*A.saturation()/100;w.value=u/2+Math.cos(g)*$,B.value=f/2+Math.sin(g)*$}else w.value=A.hue()/359*u,B.value=(1-A.saturation()/100)*f}{const{width:u}=Te(r.value);W.value=u*.01*A.value()}},E=A=>{M.value=`${Math.round(A.alpha()*100)}%`;const{width:u}=Te(i.value);Y.value=A.alpha()*u},Q=se({get(){return e.modelValue===void 0?a.value:e.modelValue},set(A){a.value=A,/^#[0-9a-fA-F]{6}([0-9a-fA-F]{2})?$/.test(A)&&(S.value=S.value.parse(a.value).clone(),D(S.value),V(S.value),E(S.value)),t("update:modelValue",A)}}),N=se({get(){return d.value},set(A){d.value=A;let u=parseInt(A);isNaN(u)||(S.value=S.value.red(u).clone(),z(S.value),D(S.value))}}),C=se({get(){return p.value},set(A){p.value=A;let u=parseInt(A);isNaN(u)||(S.value=S.value.green(u).clone(),z(S.value),D(S.value))}}),x=se({get(){return _.value},set(A){_.value=A;let u=parseInt(A);isNaN(u)||(S.value=S.value.blue(u).clone(),z(S.value),D(S.value))}}),ne=se({get(){return m.value},set(A){m.value=A;let u=parseInt(A);if(!isNaN(u)){u=Math.min(359,Math.max(0,u)),S.value=S.value.hue(u).clone(),z(S.value),V(S.value);const{width:f,height:g}=Te(s.value);if(e.type==="ring"){let $=u/360*Math.PI*2,P=f/2*S.value.saturation()/100;w.value=f/2+Math.cos($)*P,B.value=g/2+Math.sin($)*P}else w.value=u/359*f}}}),q=se({get(){return y.value},set(A){y.value=A;let u=parseInt(A);if(!isNaN(u)){u=Math.max(Math.min(100,u),0),S.value=S.value.saturation(u).clone(),z(S.value),V(S.value);const{width:f,height:g}=Te(s.value);if(e.type==="ring"){let $=S.value.hue()/360*Math.PI*2,P=f/2*u/100;w.value=f/2+Math.cos($)*P,B.value=g/2+Math.sin($)*P}else B.value=(1-u/100)*g}}}),be=se({get(){return k.value},set(A){k.value=A;let u=parseInt(A);if(!isNaN(u)){u=Math.max(Math.min(100,u),0),S.value=S.value.value(u).clone(),z(S.value),V(S.value);const{width:f}=Te(r.value);W.value=f*.01*u,K.value=K.value.map(g=>g.clone().value(u)),ie.value=K.value.map(g=>g.cssrgb()).join(",")}}}),ue=se({get(){return M.value},set(A){M.value=A;let u=parseInt(A);if(!isNaN(u)){u=Math.max(Math.min(100,u),0),S.value=S.value.alpha(u/100).clone(),z(S.value);const{width:f}=Te(i.value);Y.value=f*.01*u}}}),Re=(A,u)=>{ne.value=Math.round(A*359).toString(),q.value=Math.round(u*100).toString()},Pe=os(A=>{const{left:u,top:f,height:g,width:$}=Te(s.value);let P=0,L=0,H=0,F=0;if(A instanceof TouchEvent?(H=A.touches[0].clientX,F=A.touches[0].clientY):(H=A.clientX,F=A.clientY),P=Math.max(Math.min(H-u,$),0),L=Math.max(Math.min(F-f,g),0),e.type==="ring"){const[O,I]=[$/2,g/2];let X=Math.sqrt(Math.pow(Math.abs(P-O),2)+Math.pow(Math.abs(L-I),2));if(X>$/2){let Z=X/($/2);P=O+(P-O)/Z,L=I+(L-I)/Z,X=$/2}let G=Math.atan2(L-I,P-O);G<0&&(G+=Math.PI*2),Re(G/(Math.PI*2),X/($/2))}else Re(P/$,1-L/g)}),yt=A=>{Pe(A)},It=new ss(yt),ft=A=>{A instanceof MouseEvent&&Nt()||A instanceof TouchEvent&&!Nt()||(It.listen(),yt(A))},no=os(A=>{if(A!==void 0){const{left:u,width:f}=Te(r.value);let g=0;A instanceof TouchEvent?g=A.touches[0].clientX:g=A.clientX;const $=Math.min(Math.max(0,g-u),f);be.value=`${Math.round($/f*100)}`}}),oo=A=>{no(A)},Go=new ss(oo),rt=A=>{A instanceof MouseEvent&&Nt()||A instanceof TouchEvent&&!Nt()||(Go.listen(),oo(A))},sn=os(A=>{if(A!==void 0){const{left:u,width:f}=Te(r.value);let g=0;A instanceof TouchEvent?g=A.touches[0].clientX:g=A.clientX;const $=Math.min(Math.max(0,g-u),f);ue.value=`${Math.round($/f*100)}%`}}),kn=A=>{sn(A)},Mt=new ss(kn),Cn=A=>{A instanceof MouseEvent&&Nt()||A instanceof TouchEvent&&!Nt()||(Mt.listen(),kn(A))};return Xe(()=>{S.value=new Hn(Q.value),D(S.value),E(S.value)}),ze(()=>e.type,()=>{D(S.value)}),{colorArea:s,colorValue:r,colorAlpha:i,colorLeft:w,colorTop:B,colorValueLeft:W,colorAlphaLeft:Y,colorObj:S,computedR:N,computedG:C,computedB:x,computedH:ne,computedS:q,computedV:be,computedAlpha:ue,computedText:Q,colorModeOptions:o,colorMode:l,onMousedown:ft,onValueMouseDown:rt,onAlphaMouseDown:Cn,colorListStr:ie}},u0={class:"color-picker"},d0=h("div",{class:"bg"},null,-1),f0=h("div",{class:"white-mask"},null,-1),h0=h("button",{class:"pointer"},null,-1),p0=[d0,f0,h0],v0=h("div",{class:"color"},[h("div",{class:"color-bg"})],-1),_0={class:"control vertical"},m0=h("div",{class:"color-value-bg"},null,-1),g0=h("div",{class:"color-value-mask"},null,-1),b0=h("div",{class:"color-value-btn"},null,-1),y0=[m0,g0,b0],x0=h("div",{class:"color-alpha-bg"},null,-1),w0=h("div",{class:"color-alpha-mask"},null,-1),$0=h("div",{class:"color-alpha-btn"},null,-1),k0=[x0,w0,$0],C0={class:"fields"},S0={class:"row"},P0={class:"cell"},V0={class:"cell"},I0={class:"row"},M0={class:"cell"},B0={class:"text"},E0={class:"row"},T0={class:"cell"},L0={class:"text"},F0={class:"row"},A0={class:"cell"},N0={class:"text"},O0={class:"row"},R0={class:"cell"},H0=h("span",{class:"text"},"Opacity",-1),D0={name:"FvColorPicker"},z0=j({...D0,props:l0,emits:a0,setup(e,{emit:t}){const n=e,{theme:o}=st(n),{colorMode:s,colorListStr:r,colorLeft:i,colorTop:l,colorObj:a,colorValueLeft:d,colorAlphaLeft:p,colorModeOptions:_,computedText:m,computedR:y,computedB:k,computedG:M,computedAlpha:S,computedH:w,computedS:B,computedV:W,colorArea:Y,colorValue:K,colorAlpha:ie,onMousedown:z,onValueMouseDown:V,onAlphaMouseDown:D}=c0(n,t),{cls:E}=new ke().add("fv-color-picker").computed(),{style:Q}=new Ye().add("--fv-color-picker--color-list",()=>r.value).add("--fv-color-picker--color",()=>a.value.cssrgba()).add("--fv-color-picker--color-alpha",()=>a.value.clone().cssrgb()).add("--fv-color-picker--color-value",()=>a.value.clone().value(100).cssrgb()).add("--fv-color-picker--pointer-left",()=>`${i.value}px`,()=>Ve(i.value)).add("--fv-color-picker--pointer-top",()=>`${l.value}px`,()=>Ve(l.value)).add("--fv-color-picker--color-value-left",()=>`${d.value}px`,()=>Ve(d.value)).add("--fv-color-picker--color-alpha-left",()=>`${p.value}px`,()=>Ve(p.value)).add("--fv-color-picker--color-value-empty",()=>a.value.clone().hue(0).saturation(0).cssrgb()).computed();return(N,C)=>{const x=_t("fv-combo-box"),ne=_t("fv-text-box");return v(),b("div",{class:re(c(E)),style:Ee(c(Q))},[h("div",u0,[h("div",{ref_key:"colorArea",ref:Y,draggable:"false",class:re(["color-area",{ring:n.type==="ring",box:n.type==="box"}]),onMousedown:C[0]||(C[0]=at((...q)=>c(z)&&c(z)(...q),["stop"])),onTouchstart:C[1]||(C[1]=at((...q)=>c(z)&&c(z)(...q),["stop"]))},p0,34),v0]),h("div",_0,[h("div",{class:"color-value",ref_key:"colorValue",ref:K,draggable:"false",onMousedown:C[2]||(C[2]=at((...q)=>c(V)&&c(V)(...q),["stop"])),onTouchstart:C[3]||(C[3]=at((...q)=>c(V)&&c(V)(...q),["stop"]))},y0,544),h("div",{class:"color-alpha",ref_key:"colorAlpha",ref:ie,draggable:"false",onMousedown:C[4]||(C[4]=at((...q)=>c(D)&&c(D)(...q),["stop"])),onTouchstart:C[5]||(C[5]=at((...q)=>c(D)&&c(D)(...q),["stop"]))},k0,544),h("div",C0,[h("div",S0,[h("div",P0,[T(x,{modelValue:c(s),"onUpdate:modelValue":C[6]||(C[6]=q=>he(s)?s.value=q:null),options:c(_),theme:c(o),style:{width:"118px"},"min-width":"118px"},null,8,["modelValue","options","theme"])]),h("div",V0,[T(ne,{placeholder:"#FFFFFF",modelValue:c(m),"onUpdate:modelValue":C[7]||(C[7]=q=>he(m)?m.value=q:null),"input-rules":/^#[0-9A-Fa-f]{0,8}$/,pattern:/^#[0-9A-Fa-f]{6}([0-9A-Fa-f]{2}){0,1}$/,theme:c(o),style:{width:"130px"},"min-width":"130px"},null,8,["modelValue","pattern","theme"])])]),h("div",I0,[h("div",M0,[Se(T(ne,{placeholder:"0","input-rules":/^[0-9]{0,3}$/,pattern:/^[0-9]{0,3}$/,style:{width:"118px"},"min-width":"118px",modelValue:c(y),"onUpdate:modelValue":C[8]||(C[8]=q=>he(y)?y.value=q:null),theme:c(o)},null,8,["modelValue","theme"]),[[Ae,c(s)==="RGB"]]),Se(T(ne,{placeholder:"0","input-rules":/^[0-9]{0,3}$/,pattern:/^[0-9]{0,3}$/,style:{width:"118px"},"min-width":"118px",modelValue:c(w),"onUpdate:modelValue":C[9]||(C[9]=q=>he(w)?w.value=q:null),theme:c(o)},null,8,["modelValue","theme"]),[[Ae,c(s)==="HSV"]]),h("span",B0,le(c(s)==="RGB"?"Red":"Hue"),1)])]),h("div",E0,[h("div",T0,[Se(T(ne,{placeholder:"0","input-rules":/^[0-9]{0,3}$/,pattern:/^[0-9]{0,3}$/,style:{width:"118px"},"min-width":"118px",modelValue:c(M),"onUpdate:modelValue":C[10]||(C[10]=q=>he(M)?M.value=q:null),theme:c(o)},null,8,["modelValue","theme"]),[[Ae,c(s)==="RGB"]]),Se(T(ne,{placeholder:"0","input-rules":/^[0-9]{0,3}$/,pattern:/^[0-9]{0,3}$/,style:{width:"118px"},"min-width":"118px",modelValue:c(B),"onUpdate:modelValue":C[11]||(C[11]=q=>he(B)?B.value=q:null),theme:c(o)},null,8,["modelValue","theme"]),[[Ae,c(s)==="HSV"]]),h("span",L0,le(c(s)==="RGB"?"Green":"Saturation"),1)])]),h("div",F0,[h("div",A0,[Se(T(ne,{placeholder:"0","input-rules":/^[0-9]{0,3}$/,pattern:/^[0-9]{0,3}$/,style:{width:"118px"},"min-width":"118px",modelValue:c(k),"onUpdate:modelValue":C[12]||(C[12]=q=>he(k)?k.value=q:null),theme:c(o)},null,8,["modelValue","theme"]),[[Ae,c(s)==="RGB"]]),Se(T(ne,{placeholder:"0","input-rules":/^[0-9]{0,3}$/,pattern:/^[0-9]{0,3}$/,style:{width:"118px"},"min-width":"118px",modelValue:c(W),"onUpdate:modelValue":C[13]||(C[13]=q=>he(W)?W.value=q:null),theme:c(o)},null,8,["modelValue","theme"]),[[Ae,c(s)==="HSV"]]),h("span",N0,le(c(s)==="RGB"?"Blue":"Value"),1)])]),h("div",O0,[h("div",R0,[T(ne,{placeholder:"0","input-rules":/^[0-9]{0,3}%$/,pattern:/^[0-9]{0,3}%$/,style:{width:"118px"},"min-width":"118px",modelValue:c(S),"onUpdate:modelValue":C[14]||(C[14]=q=>he(S)?S.value=q:null),theme:c(o)},null,8,["modelValue","theme"]),H0])])])])],6)}}}),j0=bt(z0);const U0={...ot,options:{type:Array,default:()=>[]},modelValue:{type:[String],default:void 0},editable:{type:[Boolean]},placeholder:{type:[String]},autofocus:{type:[Boolean]},hoverBorderColor:{type:[String]},errorBorderColor:{type:[String]},warningBorderColor:{type:[String]},maxlength:{type:[Number]},minlength:{type:[Number]},title:{type:[String],default:"input"},fontSize:{type:[Number],default:14},inputRules:{type:[Object,String,Function]},pattern:{type:[Object,String,Function]},required:{type:[Boolean]}},W0={change:e=>!0,"update:modelValue":e=>!0,focus:e=>!0,blur:e=>!0,keydown:e=>!0,keyup(e){return!0},keypress(e){return!0},input(e){return!0},errorInput(e){return!0},warningInput(e){return!0}},K0=(e,t)=>{const n=R(),o=R(!1),s=R(),r=R(),i=R(),l=R(),a=R(),d=R(),p=R(),_=R("center"),m=R(),y=()=>{o.value=!1},k=x=>{Ym(x.target,n.value)&&y()},M=se({get(){return e.modelValue===void 0?s.value:e.modelValue},set(x){s.value=x,x!==void 0&&t("update:modelValue",x)}}),S=async()=>{if(e.disabled!==!0&&e.options.length!==0){if(e.editable===!1){let x=e.options.findIndex(q=>q.key===M.value);x==-1&&(x=0),a.value!==void 0&&(d.value=-a.value*x-7.5),p.value="";let ne;await Ze(()=>{ne=ho(Te(i.value)),ne.bottom<0&&(Ve(d.value)?d.value+=ne.bottom-7.5:d.value=`calc( ${d.value} + ${ne.bottom}px - 7.5px)`)}),await Ze(()=>{ne=ho(Te(i.value)),ne.top<0&&(Ve(d.value)?d.value+=-ne.top+7.5:d.value=`calc( ${d.value} - ${ne.bottom}px + 7.5px)`)}),x===0?_.value="flex-start":x==e.options.length-1?_.value="flex-end":_.value="center"}else{d.value="calc(100% - 4px)",p.value="",_.value="flex-start";let x;await Ze(async()=>{x=ho(Te(i.value)),x.bottom<0&&(d.value="",p.value="100%",_.value="flex-end")}),await Ze(()=>{x=ho(Te(i.value)),x.top<0&&(d.value="calc(100% - 4px)",p.value=void 0,_.value="flex-start")})}await Ze(()=>{o.value=!0})}},w=()=>{e.editable!==!0&&S()},B=()=>{e.editable!==!1&&(o.value===!0?y():S())},W=x=>{M.value=x.key,y()},Y=x=>{t("change",x)},K=x=>{t("blur",x)},ie=x=>{t("focus",x)},z=x=>{t("keydown",x)},V=x=>{t("keyup",x)},D=x=>{t("keypress",x)},E=x=>{t("input",x)},Q=x=>{t("errorInput",x)},N=x=>{t("warningInput",x)},C=()=>{m.value!==void 0&&m.value.focus()};return ze(()=>e.options,()=>{const{height:x}=Te(i.value);l.value=x}),Xe(()=>{window!==void 0&&window.addEventListener("click",k);const{height:x}=Te(i.value);if(l.value=x,r.value!==void 0){const{height:ne}=Te(r.value[0]);a.value=ne}}),mt(()=>{window!==void 0&&window.removeEventListener("click",k)}),{input:m,effectPosition:_,optionsTop:d,optionsBottom:p,optionsHeight:l,options:i,option:r,computedValue:M,onSelectOption:W,onInputClick:w,onInputIconClick:B,onChange:Y,onFocus:ie,onBlur:K,onErrorInput:Q,onWarningInput:N,optionsShow:o,root:n,hide:y,show:S,focus:C,onInput:E,onKeydown:z,onKeypress:D,onKeyup:V}},q0={class:"fv-combo-box--options-wrapper"},G0=["onClick"],Y0={name:"FvComboBox"},X0=j({...Y0,props:U0,emits:W0,setup(e,{expose:t,emit:n}){const o=e,{theme:s}=st(o),{optionsShow:r,input:i,root:l,computedValue:a,onBlur:d,onFocus:p,onInput:_,onKeydown:m,onKeypress:y,onKeyup:k,onInputClick:M,focus:S,hide:w,show:B,onChange:W,onInputIconClick:Y,onSelectOption:K,onErrorInput:ie,onWarningInput:z,options:V,optionsBottom:D,optionsHeight:E,option:Q,optionsTop:N,effectPosition:C}=K0(o,n),{cls:x}=new ke().add("fv-combo-box").add("disabled",()=>o.disabled===!0).add(()=>s.value).computed(),{style:ne}=new Ye().add("--fv-combo-box-height",()=>`${E.value}px`).add("--fv-combo-box-top",()=>`${N.value}px`,()=>Ve(N.value)).add("--fv-combo-box-top",()=>N.value,()=>pe(N.value)).add("--fv-combo-box-bottom",()=>`${D.value}px`,()=>Ve(D.value)).add("--fv-combo-box-bottom",()=>D.value,()=>pe(D.value)).add("--fv-combo-box-effect-position",()=>C.value).computed(),{cls:q}=new ke().add("fv-combo-box--bg").add("fv-combo-box--bg-down",()=>o.editable===!0&&C.value==="flex-start").add("fv-combo-box--bg-up",()=>o.editable===!0&&C.value==="flex-end").computed();return t({focus:S,hide:w,show:B}),(be,ue)=>{const Re=_t("fv-text-box");return v(),b("div",{ref_key:"root",ref:l,class:re(c(x)),style:Ee(c(ne))},[T(Re,{ref_key:"input",ref:i,theme:c(s),modelValue:c(a),"onUpdate:modelValue":ue[0]||(ue[0]=Pe=>he(a)?a.value=Pe:null),rightIcon:"ChevronDown",readonly:o.editable===!1,class:"fv-combo-box--select-input",placeholder:o.placeholder,onClick:c(M),onBlur:c(d),onFocus:c(p),onChange:ue[1]||(ue[1]=Pe=>c(W)(c(a))),onRightIconClick:c(Y),autofocus:o.autofocus,onInput:ue[2]||(ue[2]=Pe=>c(_)(c(a))),onKeydown:ue[3]||(ue[3]=Pe=>c(m)(c(a))),onKeypress:ue[4]||(ue[4]=Pe=>c(y)(c(a))),onKeyup:ue[5]||(ue[5]=Pe=>c(k)(c(a))),required:o.required,maxlength:o.maxlength,minlength:o.minlength,"hover-border-color":o.hoverBorderColor,"error-border-color":o.errorBorderColor,"warning-border-color":o.warningBorderColor,title:o.title,"input-rules":o.inputRules,pattern:o.pattern,disabled:o.disabled,onErrorInput:c(ie),onWarningInput:c(z)},null,8,["theme","modelValue","readonly","placeholder","onClick","onBlur","onFocus","onRightIconClick","autofocus","required","maxlength","minlength","hover-border-color","error-border-color","warning-border-color","title","input-rules","pattern","disabled","onErrorInput","onWarningInput"]),T(Vt,{name:"fv-combo-box--fade-in"},{default:oe(()=>[Se(h("div",{class:re(["fv-combo-box--options",{"fv-combo-box--editable":o.editable===!0}]),ref_key:"options",ref:V},[h("div",{class:re(c(q))},[h("div",q0,[(v(!0),b(ce,null,Fe(o.options,Pe=>(v(),b("div",{class:"fv-combo-box--option",ref_for:!0,ref_key:"option",ref:Q,key:Pe.key,onClick:yt=>c(K)(Pe)},[h("div",{class:re(["fv-combo-box--option-text",{active:Pe.key===c(a)}])},[J(be.$slots,"default",{item:Pe},()=>[Me(le(Pe.text===void 0?Pe.key:Pe.text),1)])],2)],8,G0))),128))])],2)],2),[[Ae,c(r)]])]),_:3})],6)}}}),J0=bt(X0);class po{constructor({next:t,pre:n,value:o}){this.next=t,this.value=o,this.pre=n}}class Q0{constructor(){}pushFrond(t){return this.head===void 0?(this.head=new po({value:t}),this.tail=this.head):(this.head.pre=new po({value:t,next:this.head}),this.head=this.head.pre),this.head}pushEnd(t){return this.tail===void 0?(this.tail=new po({value:t}),this.head=this.tail):(this.tail.next=new po({value:t,pre:this.tail}),this.tail=this.tail.next),this.tail}popFrond(){if(this.head!==void 0){const t=this.head.value;return this.head=this.head.next,this.head!==void 0?this.head.pre=void 0:this.tail=this.head,t}}popEnd(){if(this.tail!==void 0){const t=this.tail.value;return this.tail=this.tail.pre,this.tail!==void 0?this.tail.next=void 0:this.head=this.tail,t}}remove(t){t.pre!==void 0?t.pre.next=t.next:(this.head=t.next,this.head===void 0&&(this.tail=this.head)),t.next!==void 0?t.next.pre=t.pre:(this.tail=t.pre,this.tail===void 0&&(this.head=this.tail))}destory(){let t=this.head,n;for(;t!==void 0;)n=t,t=t.next,n.pre=void 0,n.next=void 0;this.head=void 0,this.tail=void 0}}const Z0=Vl("FvImageCache",()=>{const e=R({}),t={},n=R(0),o=R(1e4),s=new Q0;function r(l,a){if(l=l.trim(),e.value[l]===void 0&&(n.value+=1,n.value>o.value)){const d=s.popFrond();d!==void 0&&(delete t[d],delete e.value[d])}e.value[l]=a,t[l]=s.pushEnd(l)}function i(l){l=l.trim();const a=e.value[l];return a!==void 0&&(s.remove(t[l]),t[l]=s.pushEnd(l)),a}return{cacheImage:r,getImage:i}});class e1{static imageElementToBase64(t){let n="";if(document!==void 0){const o=document.createElement("canvas");o.height=t.height,o.width=t.width;const s=o.getContext("2d");s!==null&&(s.drawImage(t,0,0),n=o.toDataURL()),o.remove()}return n}}const t1={...ot,src:{type:[String]},fit:{type:[String]},lazy:{type:[Boolean]},cache:{type:[Boolean]},crossorigin:{type:[String]},alt:{type:[String],default:""}},n1={loaded(e){return!0},error(e){return!0}},o1=(e,t)=>{const n=R(!0),o=R(),s=R(),{getImage:r,cacheImage:i}=Z0(),l=R(!1),a=R(),d=R();let p;function _(){if(e.src!==void 0){n.value=!0,s.value!==void 0&&s.value.remove();const k=()=>{if(e.src!==void 0){if(l.value=!1,s.value=new Image,s.value.alt=e.alt,e.crossorigin!==void 0&&(s.value.crossOrigin=e.crossorigin),e.cache===!0&&!e.src.trimStart().startsWith("data:")){const M=r(e.src);M!==void 0?(s.value.src=M,l.value=!0):s.value.src=e.src}else s.value.src=e.src;s.value.onload=M=>{if(e.cache&&e.src!==void 0&&s.value!==void 0&&l.value===!1&&!e.src.trimStart().startsWith("data:"))try{i(e.src,e1.imageElementToBase64(s.value));const S=r(e.src);l.value=!0,S!==void 0&&(s.value.src=S,l.value=!0)}catch{console.error("Caching failed. Please add the crossorigin property and set the Access-Control-Allow-Origin header to allow requests to cross origin. see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin",s.value)}n.value===!0&&(n.value=!1,o.value!==void 0&&o.value!==null&&s.value!==void 0&&(s.value.classList.add("image"),o.value.appendChild(s.value)),t("loaded",M))},s.value.onerror=M=>{console.error(M),t("error",M)}}};e.lazy===!0?d.value=()=>{n.value===!0&&k()}:n.value===!0&&k()}}function m(){e.src!==void 0&&_()}function y(){e.lazy===!0?(p===void 0&&(p=new IntersectionObserver(k=>{k[0].intersectionRatio>0&&d.value!==void 0&&d.value(k)},{threshold:.05})),a.value!==void 0&&p.observe(a.value)):a.value!==void 0&&(p==null||p.unobserve(a.value))}return ze(()=>e.src,()=>{m()}),ze(()=>e.lazy,()=>{y()}),Xe(()=>{m(),y()}),mt(()=>{var k;(k=s.value)==null||k.remove(),p==null||p.disconnect()}),{container:o,loading:n,imgContainer:a}},s1={class:"loading-container"},r1=h("div",{class:"bg"},null,-1),i1={name:"FvImg"},l1=j({...i1,props:t1,emits:n1,setup(e,{emit:t}){const n=e,{theme:o}=st(n),{container:s,loading:r,imgContainer:i}=o1(n,t),{cls:l}=new ke().add("fv-img").add(()=>o.value).computed(),{style:a}=new Ye().add("--fv-img-fit",()=>n.fit,()=>pe(n.fit)).computed();return(d,p)=>{const _=_t("fv-progress-ring");return v(),b("div",{ref_key:"imgContainer",ref:i,class:re(c(l)),style:Ee(c(a))},[Se(h("div",s1,[r1,T(_,{theme:c(o),indeterminate:""},null,8,["theme"])],512),[[Ae,c(r)]]),T(Vt,{name:"fv-img-fade-in"},{default:oe(()=>[Se(h("div",{class:"container",ref_key:"container",ref:s},null,512),[[Ae,!c(r)]])]),_:1})],6)}}}),a1=bt(l1);const c1={...ot,icon:{type:[String]},status:{type:[String],default:"info"},title:{type:[String],default:"Tip"},confirmTitle:{type:[String],default:"Confirm"},cancelTitle:{type:[String],default:"Cancel"}},u1={confirm:()=>!0,cancel:()=>!0},d1=(e,t)=>{const n={info:"Error",warning:"Warning",correct:"Completed",blocked:"Blocked12",error:"ErrorBadge"},o={info:"rgb(var(--fv-primary-color))",warning:"rgb(var(--fv-warning-color))",correct:"rgb(var(--fv-success-color))",blocked:"rgb(var(--fv-error-color))",error:"rgb(var(--fv-error-color))"},s=se(()=>{if(e.icon===void 0){if(n[e.status]!==void 0)return n[e.status];console.warn("Status must be one of 'info','warning','correct','blocked','error'")}return e.icon}),r=se(()=>o[e.status]!==void 0?o[e.status]:o.info);return{onCancel:()=>{t("cancel")},onConfirm:()=>{t("confirm")},computedButtonBackground:r,computedIcon:s}},f1={class:"title-bar"},h1={class:"text"},p1={class:"content"},v1={class:"control-panel"},_1={name:"FvInfoBox"},Il=j({..._1,props:c1,emits:u1,setup(e,{emit:t}){const n=e,{theme:o}=st(n),{computedButtonBackground:s,computedIcon:r,onCancel:i,onConfirm:l}=d1(n,t),{cls:a}=new ke().add("fv-info-box").add(()=>o.value).add(()=>n.status,()=>pe(n.status)).computed(),{cls:d}=new ke().add("icon").add("ms-Icon").add(()=>`ms-Icon--${r.value}`,()=>pe(r.value)).computed();return(p,_)=>{const m=_t("fv-button");return v(),b("div",{class:re(c(a))},[h("div",f1,[h("i",{class:re(c(d))},null,2),h("span",h1,le(n.title),1)]),h("div",p1,[J(p.$slots,"default")]),h("div",v1,[J(p.$slots,"control",{},()=>[T(m,{background:c(s),foreground:"white",onClick:at(c(l),["stop"]),"border-radius":6,class:"button confirm","is-box-shadow":"",theme:c(o)},{default:oe(()=>[Me(le(n.confirmTitle),1)]),_:1},8,["background","onClick","theme"]),T(m,{onClick:at(c(i),["stop"]),"border-radius":6,class:"button cancel","is-box-shadow":"",theme:c(o)},{default:oe(()=>[Me(le(n.cancelTitle),1)]),_:1},8,["onClick","theme"])])])],2)}}});function m1(e={},t={}){const n={status:"info",theme:"light"};$l(e)&&(e=Object.assign(n,e));const o=document.createElement("div");o.classList.add("fv-info-box--container"),e.theme!==void 0&&o.classList.add(e.theme);const s=l=>l.preventDefault();o.addEventListener("touchmove",s),o.addEventListener("scroll",s),document.body.classList.add("fv-info-box-mask"),document.body.appendChild(o);let r;const i=()=>{Ot(r(!1,t.context),o)};return r=(l=!1,a)=>{const d=Ut(Vt,{name:"fv-info-box-fade-in",onAfterLeave:()=>{Ot(null,o),o.removeEventListener("touchmove",s),o.removeEventListener("scroll",s),document.body.classList.remove("fv-info-box-mask"),o.remove()}},[l?Ut(Il,{title:e.title,icon:e.icon,status:e.status,theme:e.theme,cancelText:e.cancelTitle,confirmText:e.confirmTitle,onConfirm:()=>{e.confirm!==void 0&&e.confirm(),i()},onCancel:()=>{e.cancel!==void 0&&e.cancel(),i()}},{default:()=>e.message,control:()=>e.control}):void 0]);return a!==void 0&&(d.appContext=a),d},Ot(r(!1,t.context),o),Ot(r(!0,t.context),o),{close:i}}const g1=Symbol("$infoBox"),b1={install(e){const t=n=>m1(n,{context:e._context});e.config.globalProperties.$infoBox=t,e.provide(g1,t)}},y1=xl(Il,[b1]);const x1={...ot,icon:{type:[String]},showClose:{type:[Boolean],default:!0},status:{type:[String],default:"info"},showControl:{type:[Boolean]},confirmTitle:{type:[String],default:"Confirm"},cancelTitle:{type:[String],default:"Cancel"}},w1={close:()=>!0,confirm:()=>!0,cancel:()=>!0},$1=(e,t)=>{const n={info:"Error",warning:"Warning",correct:"Completed",blocked:"Blocked12",error:"ErrorBadge"},o=se(()=>{if(e.icon===void 0){if(n[e.status]!==void 0)return n[e.status];console.warn("Status must be one of 'info','warning','correct','blocked','error'")}return e.icon});return{onConfirm:()=>{t("confirm")},onCancel:()=>{t("cancel")},onClose:()=>{t("close")},computedIcon:o}},k1={class:"header"},C1=Me(" Message Bar. "),S1={key:0,class:"control"},P1={class:"right-panel"},V1={name:"FvMessageBar"},Ml=j({...V1,props:x1,emits:w1,setup(e,{emit:t}){const n=e,{theme:o}=st(n),{computedIcon:s,onClose:r,onConfirm:i,onCancel:l}=$1(n,t),{cls:a}=new ke().add("fv-message-bar").add(()=>o.value).add(()=>n.status,()=>pe(n.status)).computed(),{cls:d}=new ke().add("ms-Icon").add("icon").add(()=>`ms-Icon--${s.value}`,()=>pe(s.value)).computed(),{cls:p}=new ke().add("text").add("close",()=>n.showClose===!0).computed();return(_,m)=>{const y=_t("fv-button");return v(),b("div",{class:re(c(a))},[h("div",k1,[Se(h("i",{class:re(c(d))},null,2),[[Ae,c(s)!==void 0]]),h("div",{class:re(c(p))},[J(_.$slots,"default",{},()=>[C1])],2),n.showClose?(v(),b("i",{key:0,onClick:m[0]||(m[0]=(...k)=>c(r)&&c(r)(...k)),class:"ms-Icon ms-Icon--Cancel close-icon"})):ee("",!0)]),_.showControl?(v(),b("div",S1,[J(_.$slots,"control",{},()=>[h("div",P1,[T(y,{onClick:at(c(i),["stop"]),background:"transparent","is-box-shadow":"",theme:c(o),class:"button"},{default:oe(()=>[Me(le(n.confirmTitle),1)]),_:1},8,["onClick","theme"]),T(y,{onClick:at(c(l),["stop"]),background:"transparent","is-box-shadow":"",theme:c(o),class:"button"},{default:oe(()=>[Me(le(n.cancelTitle),1)]),_:1},8,["onClick","theme"])])])])):ee("",!0)],2)}}});function I1(e={},t={}){const n={status:"info",autoClose:3e3};$l(e)&&(e=Object.assign(n,e));const o=document.createElement("div");o.classList.add("fv-message-bar--container"),document.body.appendChild(o);let s,r;const i=()=>{s!==void 0&&clearTimeout(s),Ot(r(!1,t.context),o)};return r=(l=!1,a)=>{const d=Ut(Vt,{name:"fv-message-bar-fade-in",onAfterLeave:()=>{Ot(null,o),o.remove()}},[l?Ut(Ml,{icon:e.icon,status:e.status,theme:e.theme,showControl:e.showControl,cancelText:e.cancelTitle,confirmText:e.confirmTitle,onClose:i,onConfirm:e.confirm,onCancel:e.cancel},{default:()=>e.message,control:()=>e.control}):void 0]);return a!==void 0&&(d.appContext=a),d},Ot(r(!1,t.context),o),Ot(r(!0,t.context),o),Ve(e.autoClose)&&e.autoClose>0&&(s=setTimeout(()=>{i()},e.autoClose)),{close:i}}const M1=Symbol("$barWarning"),B1={install(e){const t=n=>I1(n,{context:e._context});e.config.globalProperties.$barWarning=t,e.provide(M1,t)}},E1=xl(Ml,[B1]);const T1={...ot,indeterminate:{type:[Boolean]},modelValue:{type:[Number]},foreground:{type:[String]},background:{type:[String]},pauseForeground:{type:[String]},errorForeground:{type:[String]},max:{type:[Number],default:100},error:{type:[Boolean]},pause:{type:[Boolean]}},L1={change:e=>!0,loaded:e=>!0,"update:modelValue":e=>!0},F1=(e,t)=>{const n=R(0),o=se({get(){return e.modelValue!==void 0?Math.max(Math.min(e.modelValue,e.max),0):Math.max(Math.min(n.value,e.max),0)},set(r){r=Math.max(Math.min(r,e.max),0),n.value=r,t("update:modelValue",r),t("change",r),r===e.max&&t("loaded",r)}});return xn(()=>{e.modelValue!==void 0&&(o.value=e.modelValue)}),{computedValue:se(()=>Math.round(o.value/e.max*100)),computedProgress:o}},A1={class:"label"},N1=["value","max"],O1=h("div",{class:"bg"},[h("div",{class:"bg-bar"})],-1),R1=h("div",{class:"bar"},null,-1),H1=[O1,R1],D1={name:"FvProgressBar"},z1=j({...D1,props:T1,emits:L1,setup(e,{emit:t}){const n=e,{theme:o}=st(n),{computedProgress:s,computedValue:r}=F1(n,t),{cls:i}=new ke().add("fv-progress-bar").add(()=>o.value).add("disabled",()=>n.disabled===!0).computed(),{cls:l}=new ke().add("container").add("indeterminate",()=>n.indeterminate===!0).add("determinate",()=>n.indeterminate===!1).add("running",()=>n.pause===!1&&n.error===!1).add("pause",()=>n.pause===!0).add("error",()=>n.error===!0).computed(),{style:a}=new Ye().add("--fv-progress-value",()=>`${-100+r.value}%`,()=>r.value!==void 0).add("--fv-progress-bar-normal-color",()=>n.foreground,()=>n.foreground!==void 0).add("--fv-progress-bar-warning-color",()=>n.pauseForeground,()=>n.pauseForeground!==void 0).add("--fv-progress-bar-error-color",()=>n.errorForeground,()=>n.errorForeground!==void 0).add("--fv-progress-bgcolor",()=>n.background,()=>n.background!==void 0).computed();return(d,p)=>(v(),b("div",{class:re(c(i)),style:Ee(c(a))},[h("label",A1,[h("progress",{class:"progress",value:c(s),max:n.max},null,8,N1),h("div",{class:re(c(l))},H1,2)])],6))}}),j1=bt(z1);const U1={...ot,indeterminate:{type:[Boolean]},modelValue:{type:[Number]},foreground:{type:[String]},pauseForeground:{type:[String]},errorForeground:{type:[String]},max:{type:[Number],default:100},error:{type:[Boolean]},pause:{type:[Boolean]},width:{type:[Number],default:60},borderWidth:{type:[Number],default:5}},W1={change:e=>!0,loaded:e=>!0,"update:modelValue":e=>!0},K1=(e,t)=>{const n=R(0),o=se({get(){return e.modelValue!==void 0?Math.max(Math.min(e.modelValue,e.max),0):Math.max(Math.min(n.value,e.max),0)},set(r){r=Math.max(Math.min(r,e.max),0),n.value=r,t("update:modelValue",r),t("change",r),r===e.max&&t("loaded",r)}});return xn(()=>{e.modelValue!==void 0&&(o.value=e.modelValue)}),{computedValue:se(()=>Math.round(o.value/e.max*100)),computedProgress:o}},q1={class:"label"},G1=["value","max"],Y1={class:"svg"},X1=["r"],J1={name:"FvProgressRing"},Q1=j({...J1,props:U1,emits:W1,setup(e,{emit:t}){const n=e,{theme:o}=st(n),{computedProgress:s,computedValue:r}=K1(n,t),{cls:i}=new ke().add("fv-progress-ring").add(()=>o.value).add("indeterminate",()=>n.indeterminate===!0).add("determinate",()=>n.indeterminate===!1).add("disabled",()=>n.disabled===!0).add("running",()=>n.pause===!1&&n.error===!1).add("pause",()=>n.pause===!0).add("error",()=>n.error===!0).computed(),{style:l}=new Ye().add("--fv-progress-ring-value",()=>`${r.value*.01}`,()=>n.indeterminate===!1).add("--fv-progress-ring-size",()=>`${n.width}px`,()=>Ve(n.width)).add("--fv-progress-ring-border-width",()=>`${n.borderWidth}px`,()=>Ve(n.borderWidth)).add("--fv-progress-ring-primary-color",()=>n.foreground,()=>pe(n.foreground)).add("--fv-progress-ring-pause-color",()=>n.pauseForeground,()=>pe(n.pauseForeground)).add("--fv-progress-ring-error-color",()=>n.errorForeground,()=>pe(n.errorForeground)).computed();return(a,d)=>(v(),b("div",{class:re(c(i)),style:Ee(c(l))},[h("label",q1,[h("progress",{class:"progress",value:c(s),max:n.max},null,8,G1),(v(),b("svg",Y1,[h("circle",{cx:"50%",cy:"50%",r:`calc(50% - ${n.borderWidth}px)`,class:"bar"},null,8,X1)]))])],6))}}),Z1=bt(Q1);const eg={...ot,modelValue:{type:[Boolean,Number,String],default:void 0},borderWidth:{type:[Number,String],default:1.5},borderColor:{type:[String]},foreground:{type:[String]},background:{type:[String]},hoverColor:{type:[String]},boxSide:{type:[String],default:"start"},group:{type:[String]},label:{type:[String,Number,Boolean],default:void 0}},tg={click(e){return!0},"update:modelValue"(e){return!0},change(e){return!0},focus(e){return!0},blur(e){return!0}};function ng(e,t){const n=se(()=>e.modelValue===e.label),o=se({get(){return e.modelValue},set(a){t("update:modelValue",a)}});return{onClick:a=>{e.disabled||a.target instanceof HTMLInputElement&&t("click",e.label)},onChange:a=>{e.disabled||t("change",a)},onFocus:a=>{e.disabled||t("focus",a)},onBlur:a=>{e.disabled||t("blur",a)},computedChecked:n,computedValue:o}}const og=["checked","disabled","value","name"],sg={name:"FvRadio"},rg=j({...sg,props:eg,emits:tg,setup(e,{emit:t}){const n=e,{computedChecked:o,computedValue:s,onClick:r,onBlur:i,onFocus:l,onChange:a}=ng(n,t),{theme:d}=st(n),{cls:p}=new ke().add("fv-radio").add(()=>d.value).add("active",()=>o.value!==!1).add("disabled",()=>n.disabled).computed(),{cls:_}=new ke().add("dot").computed(),{style:m}=new Ye().add("background",()=>n.background,()=>n.background!==void 0).add("--fv-radio-bgcolor",()=>n.hoverColor,()=>n.hoverColor!==void 0).add("borderWidth",()=>n.borderWidth,()=>pe(n.borderWidth)).add("borderWidth",()=>`${n.borderWidth}px`,()=>Ve(n.borderWidth)).add("borderColor",()=>n.borderColor,()=>n.borderColor!==void 0).computed(),{style:y}=new Ye().add("color",()=>n.foreground,()=>n.foreground!==void 0).computed();return(k,M)=>(v(),b("div",{class:re(c(p))},[h("label",{class:"label",onClick:M[4]||(M[4]=(...S)=>c(r)&&c(r)(...S))},[n.boxSide==="end"?(v(),b("span",{key:0,class:"text",style:Ee(c(y))},[J(k.$slots,"default")],4)):ee("",!0),Se(h("input",{checked:c(o),onChange:M[0]||(M[0]=S=>c(a)(c(s))),onFocus:M[1]||(M[1]=(...S)=>c(l)&&c(l)(...S)),onBlur:M[2]||(M[2]=(...S)=>c(i)&&c(i)(...S)),disabled:n.disabled,type:"radio",class:"radio",value:n.label,name:n.group,"onUpdate:modelValue":M[3]||(M[3]=S=>he(s)?s.value=S:null)},null,40,og),[[nl,c(s)]]),h("div",{class:"icon",style:Ee(c(m))},[Se(h("div",{class:re(c(_))},null,2),[[Ae,c(o)]])],4),n.boxSide==="start"?(v(),b("span",{key:1,class:"text",style:Ee(c(y))},[J(k.$slots,"default")],4)):ee("",!0)])],2))}}),ig=bt(rg);const lg={...ot,inputRules:{type:[Object,String,Function]},pattern:{type:[Object,String,Function]},modelValue:{type:[String]},required:{type:[Boolean]},readonly:{type:[Boolean]},placeholder:{type:[String]},multiline:{type:[Boolean]},fontSize:{type:[Number],default:14},title:{type:[String],default:"input"},password:{type:[Boolean]},maxlength:{type:[Number]},minlength:{type:[Number]},size:{type:[Number]},autofocus:{type:[Boolean]},hoverBorderColor:{type:[String]},errorBorderColor:{type:[String]},warningBorderColor:{type:[String]},rightIcon:{type:[String]}},ag={"update:modelValue":e=>!0,change:e=>!0,focus:e=>!0,blur:e=>!0,keydown:e=>!0,keyup(e){return!0},keypress(e){return!0},input(e){return!0},errorInput(e){return!0},warningInput(e){return!0},successInput(e){return!0},rightIconClick(e){return!0}},cg=(e,t)=>{const n=R("success"),o=R(),s=R(),r=R(pe(e.modelValue)?e.modelValue:""),i=R(r.value),l=R(r.value),a=se({get(){return e.modelValue===void 0?i.value:e.modelValue},set(E){i.value=E,t("update:modelValue",E)}}),d=se(()=>e.multiline===!0?"textarea":"text"),p=se(()=>e.rightIcon!==void 0),_=R(18),m=R(80),y=R(!1),k=R(!1);function M({h:E=0,w:Q=0}={}){k.value=!0,Ze(()=>{if(o.value!==void 0){let{width:N,height:C}=o.value.getBoundingClientRect();if(N=Math.ceil(N),C=Math.ceil(C),N===Q&&C===E){k.value=!1;return}m.value=N,_.value=C,M({h:C,w:N})}})}ze([a],()=>{M()}),Xe(()=>{M()});const S=E=>{t("change",E)},w=E=>{t("blur",E)},B=E=>{t("focus",E)},W=()=>{s.value!==void 0&&s.value.focus()},Y=()=>{a.value=l.value,r.value=l.value,W()};return{showCustomIcon:p,lockInput:k,showPassword:y,status:n,focus:W,clear:Y,input:s,pre:o,inputHeight:_,inputWidth:m,computedType:d,computedValue:a,onInput:E=>{const Q=E;n.value="success",e.inputRules instanceof RegExp?e.inputRules.test(E)?r.value=E:(a.value=r.value,E=r.value,n.value="warning",t("warningInput",Q)):pe(e.inputRules)?e.inputRules!==E?(n.value="warning",a.value=r.value,E=r.value,t("warningInput",Q)):r.value=E:nn(e.inputRules)&&(e.inputRules(E)?r.value=E:(n.value="warning",a.value=r.value,E=r.value,t("warningInput",Q))),e.pattern instanceof RegExp?e.pattern.test(E)?t("successInput",E):(n.value="error",t("errorInput",E)):pe(e.pattern)?e.pattern!==E?(n.value="error",t("errorInput",E)):t("successInput",E):nn(e.pattern)&&(e.pattern(E)?(n.value="error",t("errorInput",E)):t("successInput",E)),t("input",E)},onClickIcon:()=>{e.rightIcon===void 0?e.password===!0?(y.value=!y.value,W()):Y():t("rightIconClick",a.value)},onChange:S,onBlur:w,onFocus:B,onKeydown:E=>{t("keydown",E)},onKeyup:E=>{t("keyup",E)},onKeypress:E=>{t("keypress",E)}}},ug=["title","placeholder","disabled","type","readonly","autofocus","maxlength","minlength"],dg={class:"fv-text-box--icon"},fg=["title","placeholder","disabled","readonly","maxlength","minlength","autofocus"],hg={name:"FvTextBox"},pg=j({...hg,props:lg,emits:ag,setup(e,{expose:t,emit:n}){const o=e,{theme:s}=st(o),{computedValue:r,computedType:i,showPassword:l,input:a,pre:d,inputHeight:p,inputWidth:_,onChange:m,onBlur:y,onFocus:k,focus:M,clear:S,lockInput:w,onKeypress:B,onKeydown:W,onKeyup:Y,onClickIcon:K,onInput:ie,status:z,showCustomIcon:V}=cg(o,n),{cls:D}=new ke().add("fv-text-box").add(()=>s.value).add("disabled",()=>o.disabled===!0).add("readonly",()=>o.readonly===!0).add("fv-text-box--multiline",()=>o.multiline===!0).add("fv-text-box--singleline",()=>o.multiline===!1).add(()=>`fv-text-box--${z.value}`).computed(),{style:E}=new Ye().add("--fv-text-box-height",()=>`${p.value}px`,()=>Ve(p.value)).add("--fv-text-box-font-size",()=>`${o.fontSize}px`,()=>Ve(o.fontSize)).add("--fv-text-box-width",()=>`${_.value}px`,()=>Ve(_.value)).add("--fv-text-box-hover-border-color",()=>o.hoverBorderColor,()=>pe(o.hoverBorderColor)).add("--fv-text-box-error-border-color",()=>o.errorBorderColor,()=>pe(o.errorBorderColor)).add("--fv-text-box-warning-border-color",()=>o.warningBorderColor,()=>pe(o.warningBorderColor)).computed(),{cls:Q}=new ke().add("ms-Icon").add("ms-Icon--Cancel",()=>V.value===!1&&o.password===!1).add("ms-Icon--RedEye",()=>V.value===!1&&o.password===!0&&l.value===!1).add("ms-Icon--VisuallyImpaired",()=>V.value===!1&&o.password===!0&&l.value===!0).add(()=>`ms-Icon--${o.rightIcon}`,()=>V.value===!0&&pe(o.rightIcon)).computed();return t({focus:M,clear:S}),(N,C)=>(v(),b("div",{tabindex:"-1",class:re(c(D)),style:Ee(c(E))},[c(i)==="text"?(v(),b(ce,{key:0},[Se(h("input",{title:o.title,ref_key:"input",ref:a,class:re(["fv-text-box--input fv-text-box--text",{"fv-text-box--text-with-icon":c(V)}]),placeholder:o.placeholder,disabled:o.disabled,type:o.password?c(l)?"text":"password":"text",readonly:N.readonly===!0||c(w)===!0,"onUpdate:modelValue":C[0]||(C[0]=x=>he(r)?r.value=x:null),onChange:C[1]||(C[1]=x=>c(m)(c(r))),autofocus:N.autofocus,maxlength:o.maxlength,minlength:o.minlength,onFocus:C[2]||(C[2]=(...x)=>c(k)&&c(k)(...x)),onKeydown:C[3]||(C[3]=x=>c(W)(c(r))),onKeyup:C[4]||(C[4]=x=>c(Y)(c(r))),onKeypress:C[5]||(C[5]=x=>c(B)(c(r))),onInput:C[6]||(C[6]=x=>c(ie)(c(r)))},null,42,ug),[[ou,c(r)]]),h("div",dg,[h("i",{class:re(c(Q)),onClick:C[7]||(C[7]=(...x)=>c(K)&&c(K)(...x))},null,2)])],64)):ee("",!0),c(i)==="textarea"?Se((v(),b("textarea",{key:1,title:o.title,ref_key:"input",ref:a,class:"fv-text-box--input fv-text-box--textarea",placeholder:o.placeholder,disabled:o.disabled,readonly:N.readonly===!0||c(w)===!0,maxlength:o.maxlength,minlength:o.minlength,"onUpdate:modelValue":C[8]||(C[8]=x=>he(r)?r.value=x:null),onChange:C[9]||(C[9]=x=>c(m)(c(r))),onKeydown:C[10]||(C[10]=x=>c(W)(c(r))),onKeyup:C[11]||(C[11]=x=>c(Y)(c(r))),autofocus:N.autofocus,onFocus:C[12]||(C[12]=(...x)=>c(k)&&c(k)(...x)),onBlur:C[13]||(C[13]=(...x)=>c(y)&&c(y)(...x)),onKeypress:C[14]||(C[14]=x=>c(B)(c(r))),onInput:C[15]||(C[15]=x=>c(ie)(c(r)))},null,40,fg)),[[xs,c(r)]]):ee("",!0),h("pre",{ref_key:"pre",ref:d,class:"fv-text-box--pre-hidden"},le(c(r)+"0"),513)],6))}}),vg=bt(pg);const _g={...ot,modelValue:{type:[Boolean],default:void 0},on:{type:[String]},off:{type:[String]},boxSide:{type:[String],default:"start"},foreground:{type:[String]},offForeground:{type:[String]},onBackground:{type:[String]},onForeground:{type:[String]}},mg={click:e=>!0,change:e=>!0,"update:modelValue":e=>!0,focus:e=>!0,blur:e=>!0},gg=(e,t)=>{const n=R(!1),o=se({get(){return e.modelValue===void 0?n.value:e.modelValue},set(d){n.value=d,t("update:modelValue",d)}}),s=se(()=>o.value===!0?e.on:e.off);return{computedValue:o,computedLabel:s,onClick:d=>{e.disabled!==!0&&d.target instanceof HTMLInputElement&&t("click",!o.value)},onFocus:d=>{e.disabled!==!0&&t("focus",d)},onBlur:d=>{e.disabled!==!0&&t("blur",d)},onChange:d=>{e.disabled!==!0&&t("change",d)}}},bg=h("div",{class:"bg"},[h("div",{class:"circle"})],-1),yg={name:"FvToggleSwitch"},xg=j({...yg,props:_g,emits:mg,setup(e,{emit:t}){const n=e,{theme:o}=st(n),{computedValue:s,computedLabel:r,onClick:i,onBlur:l,onFocus:a,onChange:d}=gg(n,t),{cls:p}=new ke().add("fv-toggle-switch").add("disabled",()=>n.disabled===!0).add("active",()=>s.value===!0).add(()=>o.value).computed(),{style:_}=new Ye().add("--fv-toggle-switch-on-color",()=>n.onForeground,()=>pe(n.onForeground)).add("--fv-toggle-switch-off-bgcolor",()=>n.offForeground,()=>pe(n.offForeground)).add("--fv-toggle-switch-on-bgcolor",()=>n.onBackground,()=>pe(n.onBackground)).add("--fv-toggle-switch-color",()=>n.foreground,()=>pe(n.foreground)).computed();return(m,y)=>(v(),b("div",{class:re(c(p)),style:Ee(c(_))},[h("label",{class:"label",onClick:y[4]||(y[4]=(...k)=>c(i)&&c(i)(...k))},[n.boxSide==="end"?Se((v(),b("span",{key:0,class:"text"},le(c(r)),513)),[[Ae,c(r)!==void 0]]):ee("",!0),Se(h("input",{"onUpdate:modelValue":y[0]||(y[0]=k=>he(s)?s.value=k:null),onChange:y[1]||(y[1]=k=>c(d)(c(s))),onFocus:y[2]||(y[2]=(...k)=>c(a)&&c(a)(...k)),onBlur:y[3]||(y[3]=(...k)=>c(l)&&c(l)(...k)),type:"checkbox",class:"checkbox"},null,544),[[Ks,c(s)]]),bg,n.boxSide==="start"?Se((v(),b("span",{key:1,class:"text"},le(c(r)),513)),[[Ae,c(r)!==void 0]]):ee("",!0)])],6))}}),wg=bt(xg);const $g=[Qm,i0,j0,J0,a1,y1,E1,j1,Z1,ig,vg,wg],kg={install(e,t){const n=jm();e.use(n);for(const o of $g)e.use(o)}};var Mo={...Rm,enhanceApp:({app:e})=>{e.use(kg)}};function Cg(e,t){let n=[],o=!0;const s=r=>{if(o){o=!1;return}const i=[],l=Math.min(n.length,r.length);for(let a=0;a<l;a++){let d=n[a];const[p,_,m=""]=r[a];if(d.tagName.toLocaleLowerCase()===p){for(const y in _)d.getAttribute(y)!==_[y]&&d.setAttribute(y,_[y]);for(let y=0;y<d.attributes.length;y++){const k=d.attributes[y].name;k in _||d.removeAttribute(k)}d.innerHTML!==m&&(d.innerHTML=m)}else document.head.removeChild(d),d=Zr(r[a]),document.head.append(d);i.push(d)}n.slice(l).forEach(a=>document.head.removeChild(a)),r.slice(l).forEach(a=>{const d=Zr(a);document.head.appendChild(d),i.push(d)}),n=i};xn(()=>{const r=e.data,i=t.value,l=r&&r.description,a=r&&r.frontmatter.head;document.title=il(i,r),document.querySelector("meta[name=description]").setAttribute("content",l||i.description),s([...a?Pg(a):[]])})}function Zr([e,t,n]){const o=document.createElement(e);for(const s in t)o.setAttribute(s,t[s]);return n&&(o.innerHTML=n),o}function Sg(e){return e[0]==="meta"&&e[1]&&e[1].name==="description"}function Pg(e){return e.filter(t=>!Sg(t))}const rs=new Set,Bl=()=>document.createElement("link"),Vg=e=>{const t=Bl();t.rel="prefetch",t.href=e,document.head.appendChild(t)},Ig=e=>{const t=new XMLHttpRequest;t.open("GET",e,t.withCredentials=!0),t.send()};let vo;const Mg=De&&(vo=Bl())&&vo.relList&&vo.relList.supports&&vo.relList.supports("prefetch")?Vg:Ig;function Bg(){if(!De||!window.IntersectionObserver)return;let e;if((e=navigator.connection)&&(e.saveData||/2g/.test(e.effectiveType)))return;const t=window.requestIdleCallback||setTimeout;let n=null;const o=()=>{n&&n.disconnect(),n=new IntersectionObserver(r=>{r.forEach(i=>{if(i.isIntersecting){const l=i.target;n.unobserve(l);const{pathname:a}=l;if(!rs.has(a)){rs.add(a);const d=ll(a);Mg(d)}}})}),t(()=>{document.querySelectorAll("#app a").forEach(r=>{const{target:i,hostname:l,pathname:a}=r,d=a.match(/\.\w+$/);d&&d[0]!==".html"||i!=="_blank"&&l===location.hostname&&(a!==location.pathname?n.observe(r):rs.add(a))})})};Xe(o);const s=wn();ze(()=>s.path,o),mt(()=>{n&&n.disconnect()})}const Eg=j({setup(e,{slots:t}){const n=R(!1);return Xe(()=>{n.value=!0}),()=>n.value&&t.default?t.default():null}}),Tg=Mo.NotFound||(()=>"404 Not Found"),Lg={name:"VitePressApp",setup(){const{site:e}=ge();return Xe(()=>{ze(()=>e.value.lang,t=>{document.documentElement.lang=t},{immediate:!0})}),Bg(),()=>Ut(Mo.Layout)}};function Fg(){const e=Ng(),t=Ag();t.provide(cl,e);const n=bu(e.route);return t.provide(al,n),t.component("Content",$u),t.component("ClientOnly",Eg),Object.defineProperty(t.config.globalProperties,"$frontmatter",{get(){return n.frontmatter.value}}),Mo.enhanceApp&&Mo.enhanceApp({app:t,router:e,siteData:Zn}),{app:t,router:e,data:n}}function Ag(){return cu(Lg)}function Ng(){let e=De,t;return xu(n=>{let o=ll(n);return e&&(t=o),(e||t===o)&&(o=o.replace(/\.js$/,".lean.js")),De&&(e=!1),Ll(()=>import(o),[])},Tg)}if(De){const{app:e,router:t,data:n}=Fg();t.go().then(()=>{Cg(t.route,n.site),e.mount("#app")})}export{ce as F,g1 as I,M1 as M,U as _,xc as a,T as b,b as c,Fg as createApp,j as d,Me as e,R as f,Xe as g,Ai as h,Ct as i,pe as j,h as k,Fe as l,mt as m,v as o,_t as r,le as t,c as u,oe as w};
diff --git a/assets/chunks/framework.DvIFzl91.js b/assets/chunks/framework.DvIFzl91.js
new file mode 100644
index 0000000..6056f93
--- /dev/null
+++ b/assets/chunks/framework.DvIFzl91.js
@@ -0,0 +1,17 @@
+/**
+* @vue/shared v3.4.21
+* (c) 2018-present Yuxi (Evan) You and Vue contributors
+* @license MIT
+**/function Ls(e,t){const n=new Set(e.split(","));return t?s=>n.has(s.toLowerCase()):s=>n.has(s)}const ee={},wt=[],xe=()=>{},Wi=()=>!1,tn=e=>e.charCodeAt(0)===111&&e.charCodeAt(1)===110&&(e.charCodeAt(2)>122||e.charCodeAt(2)<97),Ps=e=>e.startsWith("onUpdate:"),se=Object.assign,Ns=(e,t)=>{const n=e.indexOf(t);n>-1&&e.splice(n,1)},qi=Object.prototype.hasOwnProperty,Y=(e,t)=>qi.call(e,t),$=Array.isArray,Et=e=>nn(e)==="[object Map]",Pt=e=>nn(e)==="[object Set]",ur=e=>nn(e)==="[object Date]",K=e=>typeof e=="function",ne=e=>typeof e=="string",nt=e=>typeof e=="symbol",Z=e=>e!==null&&typeof e=="object",ao=e=>(Z(e)||K(e))&&K(e.then)&&K(e.catch),uo=Object.prototype.toString,nn=e=>uo.call(e),Gi=e=>nn(e).slice(8,-1),fo=e=>nn(e)==="[object Object]",Fs=e=>ne(e)&&e!=="NaN"&&e[0]!=="-"&&""+parseInt(e,10)===e,Ct=Ls(",key,ref,ref_for,ref_key,onVnodeBeforeMount,onVnodeMounted,onVnodeBeforeUpdate,onVnodeUpdated,onVnodeBeforeUnmount,onVnodeUnmounted"),Un=e=>{const t=Object.create(null);return n=>t[n]||(t[n]=e(n))},zi=/-(\w)/g,Oe=Un(e=>e.replace(zi,(t,n)=>n?n.toUpperCase():"")),Xi=/\B([A-Z])/g,ot=Un(e=>e.replace(Xi,"-$1").toLowerCase()),Bn=Un(e=>e.charAt(0).toUpperCase()+e.slice(1)),xn=Un(e=>e?`on${Bn(e)}`:""),Fe=(e,t)=>!Object.is(e,t),Sn=(e,t)=>{for(let n=0;n<e.length;n++)e[n](t)},Mn=(e,t,n)=>{Object.defineProperty(e,t,{configurable:!0,enumerable:!1,value:n})},zt=e=>{const t=parseFloat(e);return isNaN(t)?e:t},Yi=e=>{const t=ne(e)?Number(e):NaN;return isNaN(t)?e:t};let fr;const ho=()=>fr||(fr=typeof globalThis<"u"?globalThis:typeof self<"u"?self:typeof window<"u"?window:typeof global<"u"?global:{});function $s(e){if($(e)){const t={};for(let n=0;n<e.length;n++){const s=e[n],r=ne(s)?el(s):$s(s);if(r)for(const o in r)t[o]=r[o]}return t}else if(ne(e)||Z(e))return e}const Ji=/;(?![^(]*\))/g,Qi=/:([^]+)/,Zi=/\/\*[^]*?\*\//g;function el(e){const t={};return e.replace(Zi,"").split(Ji).forEach(n=>{if(n){const s=n.split(Qi);s.length>1&&(t[s[0].trim()]=s[1].trim())}}),t}function Vs(e){let t="";if(ne(e))t=e;else if($(e))for(let n=0;n<e.length;n++){const s=Vs(e[n]);s&&(t+=s+" ")}else if(Z(e))for(const n in e)e[n]&&(t+=n+" ");return t.trim()}const tl="itemscope,allowfullscreen,formnovalidate,ismap,nomodule,novalidate,readonly",nl=Ls(tl);function po(e){return!!e||e===""}function sl(e,t){if(e.length!==t.length)return!1;let n=!0;for(let s=0;n&&s<e.length;s++)n=gt(e[s],t[s]);return n}function gt(e,t){if(e===t)return!0;let n=ur(e),s=ur(t);if(n||s)return n&&s?e.getTime()===t.getTime():!1;if(n=nt(e),s=nt(t),n||s)return e===t;if(n=$(e),s=$(t),n||s)return n&&s?sl(e,t):!1;if(n=Z(e),s=Z(t),n||s){if(!n||!s)return!1;const r=Object.keys(e).length,o=Object.keys(t).length;if(r!==o)return!1;for(const i in e){const l=e.hasOwnProperty(i),c=t.hasOwnProperty(i);if(l&&!c||!l&&c||!gt(e[i],t[i]))return!1}}return String(e)===String(t)}function Hs(e,t){return e.findIndex(n=>gt(n,t))}const xu=e=>ne(e)?e:e==null?"":$(e)||Z(e)&&(e.toString===uo||!K(e.toString))?JSON.stringify(e,go,2):String(e),go=(e,t)=>t&&t.__v_isRef?go(e,t.value):Et(t)?{[`Map(${t.size})`]:[...t.entries()].reduce((n,[s,r],o)=>(n[os(s,o)+" =>"]=r,n),{})}:Pt(t)?{[`Set(${t.size})`]:[...t.values()].map(n=>os(n))}:nt(t)?os(t):Z(t)&&!$(t)&&!fo(t)?String(t):t,os=(e,t="")=>{var n;return nt(e)?`Symbol(${(n=e.description)!=null?n:t})`:e};/**
+* @vue/reactivity v3.4.21
+* (c) 2018-present Yuxi (Evan) You and Vue contributors
+* @license MIT
+**/let be;class mo{constructor(t=!1){this.detached=t,this._active=!0,this.effects=[],this.cleanups=[],this.parent=be,!t&&be&&(this.index=(be.scopes||(be.scopes=[])).push(this)-1)}get active(){return this._active}run(t){if(this._active){const n=be;try{return be=this,t()}finally{be=n}}}on(){be=this}off(){be=this.parent}stop(t){if(this._active){let n,s;for(n=0,s=this.effects.length;n<s;n++)this.effects[n].stop();for(n=0,s=this.cleanups.length;n<s;n++)this.cleanups[n]();if(this.scopes)for(n=0,s=this.scopes.length;n<s;n++)this.scopes[n].stop(!0);if(!this.detached&&this.parent&&!t){const r=this.parent.scopes.pop();r&&r!==this&&(this.parent.scopes[this.index]=r,r.index=this.index)}this.parent=void 0,this._active=!1}}}function Su(e){return new mo(e)}function rl(e,t=be){t&&t.active&&t.effects.push(e)}function yo(){return be}function ol(e){be&&be.cleanups.push(e)}let dt;class js{constructor(t,n,s,r){this.fn=t,this.trigger=n,this.scheduler=s,this.active=!0,this.deps=[],this._dirtyLevel=4,this._trackId=0,this._runnings=0,this._shouldSchedule=!1,this._depsLength=0,rl(this,r)}get dirty(){if(this._dirtyLevel===2||this._dirtyLevel===3){this._dirtyLevel=1,mt();for(let t=0;t<this._depsLength;t++){const n=this.deps[t];if(n.computed&&(il(n.computed),this._dirtyLevel>=4))break}this._dirtyLevel===1&&(this._dirtyLevel=0),yt()}return this._dirtyLevel>=4}set dirty(t){this._dirtyLevel=t?4:0}run(){if(this._dirtyLevel=0,!this.active)return this.fn();let t=Ze,n=dt;try{return Ze=!0,dt=this,this._runnings++,dr(this),this.fn()}finally{hr(this),this._runnings--,dt=n,Ze=t}}stop(){var t;this.active&&(dr(this),hr(this),(t=this.onStop)==null||t.call(this),this.active=!1)}}function il(e){return e.value}function dr(e){e._trackId++,e._depsLength=0}function hr(e){if(e.deps.length>e._depsLength){for(let t=e._depsLength;t<e.deps.length;t++)_o(e.deps[t],e);e.deps.length=e._depsLength}}function _o(e,t){const n=e.get(t);n!==void 0&&t._trackId!==n&&(e.delete(t),e.size===0&&e.cleanup())}let Ze=!0,vs=0;const bo=[];function mt(){bo.push(Ze),Ze=!1}function yt(){const e=bo.pop();Ze=e===void 0?!0:e}function ks(){vs++}function Ds(){for(vs--;!vs&&ws.length;)ws.shift()()}function vo(e,t,n){if(t.get(e)!==e._trackId){t.set(e,e._trackId);const s=e.deps[e._depsLength];s!==t?(s&&_o(s,e),e.deps[e._depsLength++]=t):e._depsLength++}}const ws=[];function wo(e,t,n){ks();for(const s of e.keys()){let r;s._dirtyLevel<t&&(r??(r=e.get(s)===s._trackId))&&(s._shouldSchedule||(s._shouldSchedule=s._dirtyLevel===0),s._dirtyLevel=t),s._shouldSchedule&&(r??(r=e.get(s)===s._trackId))&&(s.trigger(),(!s._runnings||s.allowRecurse)&&s._dirtyLevel!==2&&(s._shouldSchedule=!1,s.scheduler&&ws.push(s.scheduler)))}Ds()}const Eo=(e,t)=>{const n=new Map;return n.cleanup=e,n.computed=t,n},On=new WeakMap,ht=Symbol(""),Es=Symbol("");function ye(e,t,n){if(Ze&&dt){let s=On.get(e);s||On.set(e,s=new Map);let r=s.get(n);r||s.set(n,r=Eo(()=>s.delete(n))),vo(dt,r)}}function De(e,t,n,s,r,o){const i=On.get(e);if(!i)return;let l=[];if(t==="clear")l=[...i.values()];else if(n==="length"&&$(e)){const c=Number(s);i.forEach((a,f)=>{(f==="length"||!nt(f)&&f>=c)&&l.push(a)})}else switch(n!==void 0&&l.push(i.get(n)),t){case"add":$(e)?Fs(n)&&l.push(i.get("length")):(l.push(i.get(ht)),Et(e)&&l.push(i.get(Es)));break;case"delete":$(e)||(l.push(i.get(ht)),Et(e)&&l.push(i.get(Es)));break;case"set":Et(e)&&l.push(i.get(ht));break}ks();for(const c of l)c&&wo(c,4);Ds()}function ll(e,t){var n;return(n=On.get(e))==null?void 0:n.get(t)}const cl=Ls("__proto__,__v_isRef,__isVue"),Co=new Set(Object.getOwnPropertyNames(Symbol).filter(e=>e!=="arguments"&&e!=="caller").map(e=>Symbol[e]).filter(nt)),pr=al();function al(){const e={};return["includes","indexOf","lastIndexOf"].forEach(t=>{e[t]=function(...n){const s=X(this);for(let o=0,i=this.length;o<i;o++)ye(s,"get",o+"");const r=s[t](...n);return r===-1||r===!1?s[t](...n.map(X)):r}}),["push","pop","shift","unshift","splice"].forEach(t=>{e[t]=function(...n){mt(),ks();const s=X(this)[t].apply(this,n);return Ds(),yt(),s}}),e}function ul(e){const t=X(this);return ye(t,"has",e),t.hasOwnProperty(e)}class xo{constructor(t=!1,n=!1){this._isReadonly=t,this._isShallow=n}get(t,n,s){const r=this._isReadonly,o=this._isShallow;if(n==="__v_isReactive")return!r;if(n==="__v_isReadonly")return r;if(n==="__v_isShallow")return o;if(n==="__v_raw")return s===(r?o?Cl:Ro:o?Ao:To).get(t)||Object.getPrototypeOf(t)===Object.getPrototypeOf(s)?t:void 0;const i=$(t);if(!r){if(i&&Y(pr,n))return Reflect.get(pr,n,s);if(n==="hasOwnProperty")return ul}const l=Reflect.get(t,n,s);return(nt(n)?Co.has(n):cl(n))||(r||ye(t,"get",n),o)?l:he(l)?i&&Fs(n)?l:l.value:Z(l)?r?qn(l):Wn(l):l}}class So extends xo{constructor(t=!1){super(!1,t)}set(t,n,s,r){let o=t[n];if(!this._isShallow){const c=Mt(o);if(!In(s)&&!Mt(s)&&(o=X(o),s=X(s)),!$(t)&&he(o)&&!he(s))return c?!1:(o.value=s,!0)}const i=$(t)&&Fs(n)?Number(n)<t.length:Y(t,n),l=Reflect.set(t,n,s,r);return t===X(r)&&(i?Fe(s,o)&&De(t,"set",n,s):De(t,"add",n,s)),l}deleteProperty(t,n){const s=Y(t,n);t[n];const r=Reflect.deleteProperty(t,n);return r&&s&&De(t,"delete",n,void 0),r}has(t,n){const s=Reflect.has(t,n);return(!nt(n)||!Co.has(n))&&ye(t,"has",n),s}ownKeys(t){return ye(t,"iterate",$(t)?"length":ht),Reflect.ownKeys(t)}}class fl extends xo{constructor(t=!1){super(!0,t)}set(t,n){return!0}deleteProperty(t,n){return!0}}const dl=new So,hl=new fl,pl=new So(!0),Us=e=>e,Kn=e=>Reflect.getPrototypeOf(e);function an(e,t,n=!1,s=!1){e=e.__v_raw;const r=X(e),o=X(t);n||(Fe(t,o)&&ye(r,"get",t),ye(r,"get",o));const{has:i}=Kn(r),l=s?Us:n?Ws:Xt;if(i.call(r,t))return l(e.get(t));if(i.call(r,o))return l(e.get(o));e!==r&&e.get(t)}function un(e,t=!1){const n=this.__v_raw,s=X(n),r=X(e);return t||(Fe(e,r)&&ye(s,"has",e),ye(s,"has",r)),e===r?n.has(e):n.has(e)||n.has(r)}function fn(e,t=!1){return e=e.__v_raw,!t&&ye(X(e),"iterate",ht),Reflect.get(e,"size",e)}function gr(e){e=X(e);const t=X(this);return Kn(t).has.call(t,e)||(t.add(e),De(t,"add",e,e)),this}function mr(e,t){t=X(t);const n=X(this),{has:s,get:r}=Kn(n);let o=s.call(n,e);o||(e=X(e),o=s.call(n,e));const i=r.call(n,e);return n.set(e,t),o?Fe(t,i)&&De(n,"set",e,t):De(n,"add",e,t),this}function yr(e){const t=X(this),{has:n,get:s}=Kn(t);let r=n.call(t,e);r||(e=X(e),r=n.call(t,e)),s&&s.call(t,e);const o=t.delete(e);return r&&De(t,"delete",e,void 0),o}function _r(){const e=X(this),t=e.size!==0,n=e.clear();return t&&De(e,"clear",void 0,void 0),n}function dn(e,t){return function(s,r){const o=this,i=o.__v_raw,l=X(i),c=t?Us:e?Ws:Xt;return!e&&ye(l,"iterate",ht),i.forEach((a,f)=>s.call(r,c(a),c(f),o))}}function hn(e,t,n){return function(...s){const r=this.__v_raw,o=X(r),i=Et(o),l=e==="entries"||e===Symbol.iterator&&i,c=e==="keys"&&i,a=r[e](...s),f=n?Us:t?Ws:Xt;return!t&&ye(o,"iterate",c?Es:ht),{next(){const{value:h,done:p}=a.next();return p?{value:h,done:p}:{value:l?[f(h[0]),f(h[1])]:f(h),done:p}},[Symbol.iterator](){return this}}}}function We(e){return function(...t){return e==="delete"?!1:e==="clear"?void 0:this}}function gl(){const e={get(o){return an(this,o)},get size(){return fn(this)},has:un,add:gr,set:mr,delete:yr,clear:_r,forEach:dn(!1,!1)},t={get(o){return an(this,o,!1,!0)},get size(){return fn(this)},has:un,add:gr,set:mr,delete:yr,clear:_r,forEach:dn(!1,!0)},n={get(o){return an(this,o,!0)},get size(){return fn(this,!0)},has(o){return un.call(this,o,!0)},add:We("add"),set:We("set"),delete:We("delete"),clear:We("clear"),forEach:dn(!0,!1)},s={get(o){return an(this,o,!0,!0)},get size(){return fn(this,!0)},has(o){return un.call(this,o,!0)},add:We("add"),set:We("set"),delete:We("delete"),clear:We("clear"),forEach:dn(!0,!0)};return["keys","values","entries",Symbol.iterator].forEach(o=>{e[o]=hn(o,!1,!1),n[o]=hn(o,!0,!1),t[o]=hn(o,!1,!0),s[o]=hn(o,!0,!0)}),[e,n,t,s]}const[ml,yl,_l,bl]=gl();function Bs(e,t){const n=t?e?bl:_l:e?yl:ml;return(s,r,o)=>r==="__v_isReactive"?!e:r==="__v_isReadonly"?e:r==="__v_raw"?s:Reflect.get(Y(n,r)&&r in s?n:s,r,o)}const vl={get:Bs(!1,!1)},wl={get:Bs(!1,!0)},El={get:Bs(!0,!1)},To=new WeakMap,Ao=new WeakMap,Ro=new WeakMap,Cl=new WeakMap;function xl(e){switch(e){case"Object":case"Array":return 1;case"Map":case"Set":case"WeakMap":case"WeakSet":return 2;default:return 0}}function Sl(e){return e.__v_skip||!Object.isExtensible(e)?0:xl(Gi(e))}function Wn(e){return Mt(e)?e:Ks(e,!1,dl,vl,To)}function Tl(e){return Ks(e,!1,pl,wl,Ao)}function qn(e){return Ks(e,!0,hl,El,Ro)}function Ks(e,t,n,s,r){if(!Z(e)||e.__v_raw&&!(t&&e.__v_isReactive))return e;const o=r.get(e);if(o)return o;const i=Sl(e);if(i===0)return e;const l=new Proxy(e,i===2?s:n);return r.set(e,l),l}function xt(e){return Mt(e)?xt(e.__v_raw):!!(e&&e.__v_isReactive)}function Mt(e){return!!(e&&e.__v_isReadonly)}function In(e){return!!(e&&e.__v_isShallow)}function Mo(e){return xt(e)||Mt(e)}function X(e){const t=e&&e.__v_raw;return t?X(t):e}function kt(e){return Object.isExtensible(e)&&Mn(e,"__v_skip",!0),e}const Xt=e=>Z(e)?Wn(e):e,Ws=e=>Z(e)?qn(e):e;class Oo{constructor(t,n,s,r){this.getter=t,this._setter=n,this.dep=void 0,this.__v_isRef=!0,this.__v_isReadonly=!1,this.effect=new js(()=>t(this._value),()=>Dt(this,this.effect._dirtyLevel===2?2:3)),this.effect.computed=this,this.effect.active=this._cacheable=!r,this.__v_isReadonly=s}get value(){const t=X(this);return(!t._cacheable||t.effect.dirty)&&Fe(t._value,t._value=t.effect.run())&&Dt(t,4),qs(t),t.effect._dirtyLevel>=2&&Dt(t,2),t._value}set value(t){this._setter(t)}get _dirty(){return this.effect.dirty}set _dirty(t){this.effect.dirty=t}}function Al(e,t,n=!1){let s,r;const o=K(e);return o?(s=e,r=xe):(s=e.get,r=e.set),new Oo(s,r,o||!r,n)}function qs(e){var t;Ze&&dt&&(e=X(e),vo(dt,(t=e.dep)!=null?t:e.dep=Eo(()=>e.dep=void 0,e instanceof Oo?e:void 0)))}function Dt(e,t=4,n){e=X(e);const s=e.dep;s&&wo(s,t)}function he(e){return!!(e&&e.__v_isRef===!0)}function de(e){return Lo(e,!1)}function Io(e){return Lo(e,!0)}function Lo(e,t){return he(e)?e:new Rl(e,t)}class Rl{constructor(t,n){this.__v_isShallow=n,this.dep=void 0,this.__v_isRef=!0,this._rawValue=n?t:X(t),this._value=n?t:Xt(t)}get value(){return qs(this),this._value}set value(t){const n=this.__v_isShallow||In(t)||Mt(t);t=n?t:X(t),Fe(t,this._rawValue)&&(this._rawValue=t,this._value=n?t:Xt(t),Dt(this,4))}}function Po(e){return he(e)?e.value:e}const Ml={get:(e,t,n)=>Po(Reflect.get(e,t,n)),set:(e,t,n,s)=>{const r=e[t];return he(r)&&!he(n)?(r.value=n,!0):Reflect.set(e,t,n,s)}};function No(e){return xt(e)?e:new Proxy(e,Ml)}class Ol{constructor(t){this.dep=void 0,this.__v_isRef=!0;const{get:n,set:s}=t(()=>qs(this),()=>Dt(this));this._get=n,this._set=s}get value(){return this._get()}set value(t){this._set(t)}}function Fo(e){return new Ol(e)}function Tu(e){const t=$(e)?new Array(e.length):{};for(const n in e)t[n]=$o(e,n);return t}class Il{constructor(t,n,s){this._object=t,this._key=n,this._defaultValue=s,this.__v_isRef=!0}get value(){const t=this._object[this._key];return t===void 0?this._defaultValue:t}set value(t){this._object[this._key]=t}get dep(){return ll(X(this._object),this._key)}}class Ll{constructor(t){this._getter=t,this.__v_isRef=!0,this.__v_isReadonly=!0}get value(){return this._getter()}}function Pl(e,t,n){return he(e)?e:K(e)?new Ll(e):Z(e)&&arguments.length>1?$o(e,t,n):de(e)}function $o(e,t,n){const s=e[t];return he(s)?s:new Il(e,t,n)}/**
+* @vue/runtime-core v3.4.21
+* (c) 2018-present Yuxi (Evan) You and Vue contributors
+* @license MIT
+**/function et(e,t,n,s){try{return s?e(...s):e()}catch(r){Gn(r,t,n)}}function Se(e,t,n,s){if(K(e)){const o=et(e,t,n,s);return o&&ao(o)&&o.catch(i=>{Gn(i,t,n)}),o}const r=[];for(let o=0;o<e.length;o++)r.push(Se(e[o],t,n,s));return r}function Gn(e,t,n,s=!0){const r=t?t.vnode:null;if(t){let o=t.parent;const i=t.proxy,l=`https://vuejs.org/error-reference/#runtime-${n}`;for(;o;){const a=o.ec;if(a){for(let f=0;f<a.length;f++)if(a[f](e,i,l)===!1)return}o=o.parent}const c=t.appContext.config.errorHandler;if(c){et(c,null,10,[e,i,l]);return}}Nl(e,n,r,s)}function Nl(e,t,n,s=!0){console.error(e)}let Yt=!1,Cs=!1;const fe=[];let Ne=0;const St=[];let Xe=null,at=0;const Vo=Promise.resolve();let Gs=null;function sn(e){const t=Gs||Vo;return e?t.then(this?e.bind(this):e):t}function Fl(e){let t=Ne+1,n=fe.length;for(;t<n;){const s=t+n>>>1,r=fe[s],o=Jt(r);o<e||o===e&&r.pre?t=s+1:n=s}return t}function zs(e){(!fe.length||!fe.includes(e,Yt&&e.allowRecurse?Ne+1:Ne))&&(e.id==null?fe.push(e):fe.splice(Fl(e.id),0,e),Ho())}function Ho(){!Yt&&!Cs&&(Cs=!0,Gs=Vo.then(jo))}function $l(e){const t=fe.indexOf(e);t>Ne&&fe.splice(t,1)}function Vl(e){$(e)?St.push(...e):(!Xe||!Xe.includes(e,e.allowRecurse?at+1:at))&&St.push(e),Ho()}function br(e,t,n=Yt?Ne+1:0){for(;n<fe.length;n++){const s=fe[n];if(s&&s.pre){if(e&&s.id!==e.uid)continue;fe.splice(n,1),n--,s()}}}function Ln(e){if(St.length){const t=[...new Set(St)].sort((n,s)=>Jt(n)-Jt(s));if(St.length=0,Xe){Xe.push(...t);return}for(Xe=t,at=0;at<Xe.length;at++)Xe[at]();Xe=null,at=0}}const Jt=e=>e.id==null?1/0:e.id,Hl=(e,t)=>{const n=Jt(e)-Jt(t);if(n===0){if(e.pre&&!t.pre)return-1;if(t.pre&&!e.pre)return 1}return n};function jo(e){Cs=!1,Yt=!0,fe.sort(Hl);try{for(Ne=0;Ne<fe.length;Ne++){const t=fe[Ne];t&&t.active!==!1&&et(t,null,14)}}finally{Ne=0,fe.length=0,Ln(),Yt=!1,Gs=null,(fe.length||St.length)&&jo()}}function jl(e,t,...n){if(e.isUnmounted)return;const s=e.vnode.props||ee;let r=n;const o=t.startsWith("update:"),i=o&&t.slice(7);if(i&&i in s){const f=`${i==="modelValue"?"model":i}Modifiers`,{number:h,trim:p}=s[f]||ee;p&&(r=n.map(v=>ne(v)?v.trim():v)),h&&(r=n.map(zt))}let l,c=s[l=xn(t)]||s[l=xn(Oe(t))];!c&&o&&(c=s[l=xn(ot(t))]),c&&Se(c,e,6,r);const a=s[l+"Once"];if(a){if(!e.emitted)e.emitted={};else if(e.emitted[l])return;e.emitted[l]=!0,Se(a,e,6,r)}}function ko(e,t,n=!1){const s=t.emitsCache,r=s.get(e);if(r!==void 0)return r;const o=e.emits;let i={},l=!1;if(!K(e)){const c=a=>{const f=ko(a,t,!0);f&&(l=!0,se(i,f))};!n&&t.mixins.length&&t.mixins.forEach(c),e.extends&&c(e.extends),e.mixins&&e.mixins.forEach(c)}return!o&&!l?(Z(e)&&s.set(e,null),null):($(o)?o.forEach(c=>i[c]=null):se(i,o),Z(e)&&s.set(e,i),i)}function zn(e,t){return!e||!tn(t)?!1:(t=t.slice(2).replace(/Once$/,""),Y(e,t[0].toLowerCase()+t.slice(1))||Y(e,ot(t))||Y(e,t))}let oe=null,Xn=null;function Pn(e){const t=oe;return oe=e,Xn=e&&e.type.__scopeId||null,t}function Au(e){Xn=e}function Ru(){Xn=null}function kl(e,t=oe,n){if(!t||e._n)return e;const s=(...r)=>{s._d&&Lr(-1);const o=Pn(t);let i;try{i=e(...r)}finally{Pn(o),s._d&&Lr(1)}return i};return s._n=!0,s._c=!0,s._d=!0,s}function is(e){const{type:t,vnode:n,proxy:s,withProxy:r,props:o,propsOptions:[i],slots:l,attrs:c,emit:a,render:f,renderCache:h,data:p,setupState:v,ctx:M,inheritAttrs:P}=e;let U,W;const J=Pn(e);try{if(n.shapeFlag&4){const y=r||s,I=y;U=Re(f.call(I,y,h,o,v,p,M)),W=c}else{const y=t;U=Re(y.length>1?y(o,{attrs:c,slots:l,emit:a}):y(o,null)),W=t.props?c:Dl(c)}}catch(y){Wt.length=0,Gn(y,e,1),U=ae(ve)}let g=U;if(W&&P!==!1){const y=Object.keys(W),{shapeFlag:I}=g;y.length&&I&7&&(i&&y.some(Ps)&&(W=Ul(W,i)),g=st(g,W))}return n.dirs&&(g=st(g),g.dirs=g.dirs?g.dirs.concat(n.dirs):n.dirs),n.transition&&(g.transition=n.transition),U=g,Pn(J),U}const Dl=e=>{let t;for(const n in e)(n==="class"||n==="style"||tn(n))&&((t||(t={}))[n]=e[n]);return t},Ul=(e,t)=>{const n={};for(const s in e)(!Ps(s)||!(s.slice(9)in t))&&(n[s]=e[s]);return n};function Bl(e,t,n){const{props:s,children:r,component:o}=e,{props:i,children:l,patchFlag:c}=t,a=o.emitsOptions;if(t.dirs||t.transition)return!0;if(n&&c>=0){if(c&1024)return!0;if(c&16)return s?vr(s,i,a):!!i;if(c&8){const f=t.dynamicProps;for(let h=0;h<f.length;h++){const p=f[h];if(i[p]!==s[p]&&!zn(a,p))return!0}}}else return(r||l)&&(!l||!l.$stable)?!0:s===i?!1:s?i?vr(s,i,a):!0:!!i;return!1}function vr(e,t,n){const s=Object.keys(t);if(s.length!==Object.keys(e).length)return!0;for(let r=0;r<s.length;r++){const o=s[r];if(t[o]!==e[o]&&!zn(n,o))return!0}return!1}function Kl({vnode:e,parent:t},n){for(;t;){const s=t.subTree;if(s.suspense&&s.suspense.activeBranch===e&&(s.el=e.el),s===e)(e=t.vnode).el=n,t=t.parent;else break}}const Xs="components",Wl="directives";function Mu(e,t){return Ys(Xs,e,!0,t)||e}const Do=Symbol.for("v-ndc");function Ou(e){return ne(e)?Ys(Xs,e,!1)||e:e||Do}function Iu(e){return Ys(Wl,e)}function Ys(e,t,n=!0,s=!1){const r=oe||ce;if(r){const o=r.type;if(e===Xs){const l=Uc(o,!1);if(l&&(l===t||l===Oe(t)||l===Bn(Oe(t))))return o}const i=wr(r[e]||o[e],t)||wr(r.appContext[e],t);return!i&&s?o:i}}function wr(e,t){return e&&(e[t]||e[Oe(t)]||e[Bn(Oe(t))])}const ql=e=>e.__isSuspense;function Uo(e,t){t&&t.pendingBranch?$(e)?t.effects.push(...e):t.effects.push(e):Vl(e)}const Gl=Symbol.for("v-scx"),zl=()=>Rt(Gl);function Bo(e,t){return rn(e,null,t)}function Lu(e,t){return rn(e,null,{flush:"post"})}function Xl(e,t){return rn(e,null,{flush:"sync"})}const pn={};function Ue(e,t,n){return rn(e,t,n)}function rn(e,t,{immediate:n,deep:s,flush:r,once:o,onTrack:i,onTrigger:l}=ee){if(t&&o){const R=t;t=(...N)=>{R(...N),I()}}const c=ce,a=R=>s===!0?R:ft(R,s===!1?1:void 0);let f,h=!1,p=!1;if(he(e)?(f=()=>e.value,h=In(e)):xt(e)?(f=()=>a(e),h=!0):$(e)?(p=!0,h=e.some(R=>xt(R)||In(R)),f=()=>e.map(R=>{if(he(R))return R.value;if(xt(R))return a(R);if(K(R))return et(R,c,2)})):K(e)?t?f=()=>et(e,c,2):f=()=>(v&&v(),Se(e,c,3,[M])):f=xe,t&&s){const R=f;f=()=>ft(R())}let v,M=R=>{v=g.onStop=()=>{et(R,c,4),v=g.onStop=void 0}},P;if(es)if(M=xe,t?n&&Se(t,c,3,[f(),p?[]:void 0,M]):f(),r==="sync"){const R=zl();P=R.__watcherHandles||(R.__watcherHandles=[])}else return xe;let U=p?new Array(e.length).fill(pn):pn;const W=()=>{if(!(!g.active||!g.dirty))if(t){const R=g.run();(s||h||(p?R.some((N,S)=>Fe(N,U[S])):Fe(R,U)))&&(v&&v(),Se(t,c,3,[R,U===pn?void 0:p&&U[0]===pn?[]:U,M]),U=R)}else g.run()};W.allowRecurse=!!t;let J;r==="sync"?J=W:r==="post"?J=()=>me(W,c&&c.suspense):(W.pre=!0,c&&(W.id=c.uid),J=()=>zs(W));const g=new js(f,xe,J),y=yo(),I=()=>{g.stop(),y&&Ns(y.effects,g)};return t?n?W():U=g.run():r==="post"?me(g.run.bind(g),c&&c.suspense):g.run(),P&&P.push(I),I}function Yl(e,t,n){const s=this.proxy,r=ne(e)?e.includes(".")?Ko(s,e):()=>s[e]:e.bind(s,s);let o;K(t)?o=t:(o=t.handler,n=t);const i=on(this),l=rn(r,o.bind(s),n);return i(),l}function Ko(e,t){const n=t.split(".");return()=>{let s=e;for(let r=0;r<n.length&&s;r++)s=s[n[r]];return s}}function ft(e,t,n=0,s){if(!Z(e)||e.__v_skip)return e;if(t&&t>0){if(n>=t)return e;n++}if(s=s||new Set,s.has(e))return e;if(s.add(e),he(e))ft(e.value,t,n,s);else if($(e))for(let r=0;r<e.length;r++)ft(e[r],t,n,s);else if(Pt(e)||Et(e))e.forEach(r=>{ft(r,t,n,s)});else if(fo(e))for(const r in e)ft(e[r],t,n,s);return e}function Pu(e,t){if(oe===null)return e;const n=ts(oe)||oe.proxy,s=e.dirs||(e.dirs=[]);for(let r=0;r<t.length;r++){let[o,i,l,c=ee]=t[r];o&&(K(o)&&(o={mounted:o,updated:o}),o.deep&&ft(i),s.push({dir:o,instance:n,value:i,oldValue:void 0,arg:l,modifiers:c}))}return e}function Pe(e,t,n,s){const r=e.dirs,o=t&&t.dirs;for(let i=0;i<r.length;i++){const l=r[i];o&&(l.oldValue=o[i].value);let c=l.dir[s];c&&(mt(),Se(c,n,8,[e.el,l,e,t]),yt())}}const Ye=Symbol("_leaveCb"),gn=Symbol("_enterCb");function Wo(){const e={isMounted:!1,isLeaving:!1,isUnmounting:!1,leavingVNodes:new Map};return Nt(()=>{e.isMounted=!0}),Jo(()=>{e.isUnmounting=!0}),e}const we=[Function,Array],qo={mode:String,appear:Boolean,persisted:Boolean,onBeforeEnter:we,onEnter:we,onAfterEnter:we,onEnterCancelled:we,onBeforeLeave:we,onLeave:we,onAfterLeave:we,onLeaveCancelled:we,onBeforeAppear:we,onAppear:we,onAfterAppear:we,onAppearCancelled:we},Jl={name:"BaseTransition",props:qo,setup(e,{slots:t}){const n=Ft(),s=Wo();return()=>{const r=t.default&&Js(t.default(),!0);if(!r||!r.length)return;let o=r[0];if(r.length>1){for(const p of r)if(p.type!==ve){o=p;break}}const i=X(e),{mode:l}=i;if(s.isLeaving)return ls(o);const c=Er(o);if(!c)return ls(o);const a=Qt(c,i,s,n);Zt(c,a);const f=n.subTree,h=f&&Er(f);if(h&&h.type!==ve&&!ut(c,h)){const p=Qt(h,i,s,n);if(Zt(h,p),l==="out-in")return s.isLeaving=!0,p.afterLeave=()=>{s.isLeaving=!1,n.update.active!==!1&&(n.effect.dirty=!0,n.update())},ls(o);l==="in-out"&&c.type!==ve&&(p.delayLeave=(v,M,P)=>{const U=Go(s,h);U[String(h.key)]=h,v[Ye]=()=>{M(),v[Ye]=void 0,delete a.delayedLeave},a.delayedLeave=P})}return o}}},Ql=Jl;function Go(e,t){const{leavingVNodes:n}=e;let s=n.get(t.type);return s||(s=Object.create(null),n.set(t.type,s)),s}function Qt(e,t,n,s){const{appear:r,mode:o,persisted:i=!1,onBeforeEnter:l,onEnter:c,onAfterEnter:a,onEnterCancelled:f,onBeforeLeave:h,onLeave:p,onAfterLeave:v,onLeaveCancelled:M,onBeforeAppear:P,onAppear:U,onAfterAppear:W,onAppearCancelled:J}=t,g=String(e.key),y=Go(n,e),I=(S,F)=>{S&&Se(S,s,9,F)},R=(S,F)=>{const w=F[1];I(S,F),$(S)?S.every(H=>H.length<=1)&&w():S.length<=1&&w()},N={mode:o,persisted:i,beforeEnter(S){let F=l;if(!n.isMounted)if(r)F=P||l;else return;S[Ye]&&S[Ye](!0);const w=y[g];w&&ut(e,w)&&w.el[Ye]&&w.el[Ye](),I(F,[S])},enter(S){let F=c,w=a,H=f;if(!n.isMounted)if(r)F=U||c,w=W||a,H=J||f;else return;let T=!1;const q=S[gn]=ie=>{T||(T=!0,ie?I(H,[S]):I(w,[S]),N.delayedLeave&&N.delayedLeave(),S[gn]=void 0)};F?R(F,[S,q]):q()},leave(S,F){const w=String(e.key);if(S[gn]&&S[gn](!0),n.isUnmounting)return F();I(h,[S]);let H=!1;const T=S[Ye]=q=>{H||(H=!0,F(),q?I(M,[S]):I(v,[S]),S[Ye]=void 0,y[w]===e&&delete y[w])};y[w]=e,p?R(p,[S,T]):T()},clone(S){return Qt(S,t,n,s)}};return N}function ls(e){if(Yn(e))return e=st(e),e.children=null,e}function Er(e){return Yn(e)?e.children?e.children[0]:void 0:e}function Zt(e,t){e.shapeFlag&6&&e.component?Zt(e.component.subTree,t):e.shapeFlag&128?(e.ssContent.transition=t.clone(e.ssContent),e.ssFallback.transition=t.clone(e.ssFallback)):e.transition=t}function Js(e,t=!1,n){let s=[],r=0;for(let o=0;o<e.length;o++){let i=e[o];const l=n==null?i.key:String(n)+String(i.key!=null?i.key:o);i.type===ge?(i.patchFlag&128&&r++,s=s.concat(Js(i.children,t,l))):(t||i.type!==ve)&&s.push(l!=null?st(i,{key:l}):i)}if(r>1)for(let o=0;o<s.length;o++)s[o].patchFlag=-2;return s}/*! #__NO_SIDE_EFFECTS__ */function zo(e,t){return K(e)?se({name:e.name},t,{setup:e}):e}const Tt=e=>!!e.type.__asyncLoader,Yn=e=>e.type.__isKeepAlive;function Zl(e,t){Xo(e,"a",t)}function ec(e,t){Xo(e,"da",t)}function Xo(e,t,n=ce){const s=e.__wdc||(e.__wdc=()=>{let r=n;for(;r;){if(r.isDeactivated)return;r=r.parent}return e()});if(Jn(t,s,n),n){let r=n.parent;for(;r&&r.parent;)Yn(r.parent.vnode)&&tc(s,t,n,r),r=r.parent}}function tc(e,t,n,s){const r=Jn(t,e,s,!0);Qn(()=>{Ns(s[t],r)},n)}function Jn(e,t,n=ce,s=!1){if(n){const r=n[e]||(n[e]=[]),o=t.__weh||(t.__weh=(...i)=>{if(n.isUnmounted)return;mt();const l=on(n),c=Se(t,n,e,i);return l(),yt(),c});return s?r.unshift(o):r.push(o),o}}const Ke=e=>(t,n=ce)=>(!es||e==="sp")&&Jn(e,(...s)=>t(...s),n),nc=Ke("bm"),Nt=Ke("m"),sc=Ke("bu"),Yo=Ke("u"),Jo=Ke("bum"),Qn=Ke("um"),rc=Ke("sp"),oc=Ke("rtg"),ic=Ke("rtc");function lc(e,t=ce){Jn("ec",e,t)}function Nu(e,t,n,s){let r;const o=n&&n[s];if($(e)||ne(e)){r=new Array(e.length);for(let i=0,l=e.length;i<l;i++)r[i]=t(e[i],i,void 0,o&&o[i])}else if(typeof e=="number"){r=new Array(e);for(let i=0;i<e;i++)r[i]=t(i+1,i,void 0,o&&o[i])}else if(Z(e))if(e[Symbol.iterator])r=Array.from(e,(i,l)=>t(i,l,void 0,o&&o[l]));else{const i=Object.keys(e);r=new Array(i.length);for(let l=0,c=i.length;l<c;l++){const a=i[l];r[l]=t(e[a],a,l,o&&o[l])}}else r=[];return n&&(n[s]=r),r}function Fu(e,t,n={},s,r){if(oe.isCE||oe.parent&&Tt(oe.parent)&&oe.parent.isCE)return t!=="default"&&(n.name=t),ae("slot",n,s&&s());let o=e[t];o&&o._c&&(o._d=!1),ui();const i=o&&Qo(o(n)),l=di(ge,{key:n.key||i&&i.key||`_${t}`},i||(s?s():[]),i&&e._===1?64:-2);return!r&&l.scopeId&&(l.slotScopeIds=[l.scopeId+"-s"]),o&&o._c&&(o._d=!0),l}function Qo(e){return e.some(t=>Vn(t)?!(t.type===ve||t.type===ge&&!Qo(t.children)):!0)?e:null}function $u(e,t){const n={};for(const s in e)n[t&&/[A-Z]/.test(s)?`on:${s}`:xn(s)]=e[s];return n}const xs=e=>e?mi(e)?ts(e)||e.proxy:xs(e.parent):null,Ut=se(Object.create(null),{$:e=>e,$el:e=>e.vnode.el,$data:e=>e.data,$props:e=>e.props,$attrs:e=>e.attrs,$slots:e=>e.slots,$refs:e=>e.refs,$parent:e=>xs(e.parent),$root:e=>xs(e.root),$emit:e=>e.emit,$options:e=>Qs(e),$forceUpdate:e=>e.f||(e.f=()=>{e.effect.dirty=!0,zs(e.update)}),$nextTick:e=>e.n||(e.n=sn.bind(e.proxy)),$watch:e=>Yl.bind(e)}),cs=(e,t)=>e!==ee&&!e.__isScriptSetup&&Y(e,t),cc={get({_:e},t){const{ctx:n,setupState:s,data:r,props:o,accessCache:i,type:l,appContext:c}=e;let a;if(t[0]!=="$"){const v=i[t];if(v!==void 0)switch(v){case 1:return s[t];case 2:return r[t];case 4:return n[t];case 3:return o[t]}else{if(cs(s,t))return i[t]=1,s[t];if(r!==ee&&Y(r,t))return i[t]=2,r[t];if((a=e.propsOptions[0])&&Y(a,t))return i[t]=3,o[t];if(n!==ee&&Y(n,t))return i[t]=4,n[t];Ss&&(i[t]=0)}}const f=Ut[t];let h,p;if(f)return t==="$attrs"&&ye(e,"get",t),f(e);if((h=l.__cssModules)&&(h=h[t]))return h;if(n!==ee&&Y(n,t))return i[t]=4,n[t];if(p=c.config.globalProperties,Y(p,t))return p[t]},set({_:e},t,n){const{data:s,setupState:r,ctx:o}=e;return cs(r,t)?(r[t]=n,!0):s!==ee&&Y(s,t)?(s[t]=n,!0):Y(e.props,t)||t[0]==="$"&&t.slice(1)in e?!1:(o[t]=n,!0)},has({_:{data:e,setupState:t,accessCache:n,ctx:s,appContext:r,propsOptions:o}},i){let l;return!!n[i]||e!==ee&&Y(e,i)||cs(t,i)||(l=o[0])&&Y(l,i)||Y(s,i)||Y(Ut,i)||Y(r.config.globalProperties,i)},defineProperty(e,t,n){return n.get!=null?e._.accessCache[t]=0:Y(n,"value")&&this.set(e,t,n.value,null),Reflect.defineProperty(e,t,n)}};function Vu(){return ac().slots}function ac(){const e=Ft();return e.setupContext||(e.setupContext=_i(e))}function Nn(e){return $(e)?e.reduce((t,n)=>(t[n]=null,t),{}):e}function Hu(e,t){return!e||!t?e||t:$(e)&&$(t)?e.concat(t):se({},Nn(e),Nn(t))}let Ss=!0;function uc(e){const t=Qs(e),n=e.proxy,s=e.ctx;Ss=!1,t.beforeCreate&&Cr(t.beforeCreate,e,"bc");const{data:r,computed:o,methods:i,watch:l,provide:c,inject:a,created:f,beforeMount:h,mounted:p,beforeUpdate:v,updated:M,activated:P,deactivated:U,beforeDestroy:W,beforeUnmount:J,destroyed:g,unmounted:y,render:I,renderTracked:R,renderTriggered:N,errorCaptured:S,serverPrefetch:F,expose:w,inheritAttrs:H,components:T,directives:q,filters:ie}=t;if(a&&fc(a,s,null),i)for(const z in i){const j=i[z];K(j)&&(s[z]=j.bind(n))}if(r){const z=r.call(n,n);Z(z)&&(e.data=Wn(z))}if(Ss=!0,o)for(const z in o){const j=o[z],Ve=K(j)?j.bind(n,n):K(j.get)?j.get.bind(n,n):xe,ln=!K(j)&&K(j.set)?j.set.bind(n):xe,it=re({get:Ve,set:ln});Object.defineProperty(s,z,{enumerable:!0,configurable:!0,get:()=>it.value,set:Ie=>it.value=Ie})}if(l)for(const z in l)Zo(l[z],s,n,z);if(c){const z=K(c)?c.call(n):c;Reflect.ownKeys(z).forEach(j=>{yc(j,z[j])})}f&&Cr(f,e,"c");function k(z,j){$(j)?j.forEach(Ve=>z(Ve.bind(n))):j&&z(j.bind(n))}if(k(nc,h),k(Nt,p),k(sc,v),k(Yo,M),k(Zl,P),k(ec,U),k(lc,S),k(ic,R),k(oc,N),k(Jo,J),k(Qn,y),k(rc,F),$(w))if(w.length){const z=e.exposed||(e.exposed={});w.forEach(j=>{Object.defineProperty(z,j,{get:()=>n[j],set:Ve=>n[j]=Ve})})}else e.exposed||(e.exposed={});I&&e.render===xe&&(e.render=I),H!=null&&(e.inheritAttrs=H),T&&(e.components=T),q&&(e.directives=q)}function fc(e,t,n=xe){$(e)&&(e=Ts(e));for(const s in e){const r=e[s];let o;Z(r)?"default"in r?o=Rt(r.from||s,r.default,!0):o=Rt(r.from||s):o=Rt(r),he(o)?Object.defineProperty(t,s,{enumerable:!0,configurable:!0,get:()=>o.value,set:i=>o.value=i}):t[s]=o}}function Cr(e,t,n){Se($(e)?e.map(s=>s.bind(t.proxy)):e.bind(t.proxy),t,n)}function Zo(e,t,n,s){const r=s.includes(".")?Ko(n,s):()=>n[s];if(ne(e)){const o=t[e];K(o)&&Ue(r,o)}else if(K(e))Ue(r,e.bind(n));else if(Z(e))if($(e))e.forEach(o=>Zo(o,t,n,s));else{const o=K(e.handler)?e.handler.bind(n):t[e.handler];K(o)&&Ue(r,o,e)}}function Qs(e){const t=e.type,{mixins:n,extends:s}=t,{mixins:r,optionsCache:o,config:{optionMergeStrategies:i}}=e.appContext,l=o.get(t);let c;return l?c=l:!r.length&&!n&&!s?c=t:(c={},r.length&&r.forEach(a=>Fn(c,a,i,!0)),Fn(c,t,i)),Z(t)&&o.set(t,c),c}function Fn(e,t,n,s=!1){const{mixins:r,extends:o}=t;o&&Fn(e,o,n,!0),r&&r.forEach(i=>Fn(e,i,n,!0));for(const i in t)if(!(s&&i==="expose")){const l=dc[i]||n&&n[i];e[i]=l?l(e[i],t[i]):t[i]}return e}const dc={data:xr,props:Sr,emits:Sr,methods:jt,computed:jt,beforeCreate:pe,created:pe,beforeMount:pe,mounted:pe,beforeUpdate:pe,updated:pe,beforeDestroy:pe,beforeUnmount:pe,destroyed:pe,unmounted:pe,activated:pe,deactivated:pe,errorCaptured:pe,serverPrefetch:pe,components:jt,directives:jt,watch:pc,provide:xr,inject:hc};function xr(e,t){return t?e?function(){return se(K(e)?e.call(this,this):e,K(t)?t.call(this,this):t)}:t:e}function hc(e,t){return jt(Ts(e),Ts(t))}function Ts(e){if($(e)){const t={};for(let n=0;n<e.length;n++)t[e[n]]=e[n];return t}return e}function pe(e,t){return e?[...new Set([].concat(e,t))]:t}function jt(e,t){return e?se(Object.create(null),e,t):t}function Sr(e,t){return e?$(e)&&$(t)?[...new Set([...e,...t])]:se(Object.create(null),Nn(e),Nn(t??{})):t}function pc(e,t){if(!e)return t;if(!t)return e;const n=se(Object.create(null),e);for(const s in t)n[s]=pe(e[s],t[s]);return n}function ei(){return{app:null,config:{isNativeTag:Wi,performance:!1,globalProperties:{},optionMergeStrategies:{},errorHandler:void 0,warnHandler:void 0,compilerOptions:{}},mixins:[],components:{},directives:{},provides:Object.create(null),optionsCache:new WeakMap,propsCache:new WeakMap,emitsCache:new WeakMap}}let gc=0;function mc(e,t){return function(s,r=null){K(s)||(s=se({},s)),r!=null&&!Z(r)&&(r=null);const o=ei(),i=new WeakSet;let l=!1;const c=o.app={_uid:gc++,_component:s,_props:r,_container:null,_context:o,_instance:null,version:Kc,get config(){return o.config},set config(a){},use(a,...f){return i.has(a)||(a&&K(a.install)?(i.add(a),a.install(c,...f)):K(a)&&(i.add(a),a(c,...f))),c},mixin(a){return o.mixins.includes(a)||o.mixins.push(a),c},component(a,f){return f?(o.components[a]=f,c):o.components[a]},directive(a,f){return f?(o.directives[a]=f,c):o.directives[a]},mount(a,f,h){if(!l){const p=ae(s,r);return p.appContext=o,h===!0?h="svg":h===!1&&(h=void 0),f&&t?t(p,a):e(p,a,h),l=!0,c._container=a,a.__vue_app__=c,ts(p.component)||p.component.proxy}},unmount(){l&&(e(null,c._container),delete c._container.__vue_app__)},provide(a,f){return o.provides[a]=f,c},runWithContext(a){const f=At;At=c;try{return a()}finally{At=f}}};return c}}let At=null;function yc(e,t){if(ce){let n=ce.provides;const s=ce.parent&&ce.parent.provides;s===n&&(n=ce.provides=Object.create(s)),n[e]=t}}function Rt(e,t,n=!1){const s=ce||oe;if(s||At){const r=s?s.parent==null?s.vnode.appContext&&s.vnode.appContext.provides:s.parent.provides:At._context.provides;if(r&&e in r)return r[e];if(arguments.length>1)return n&&K(t)?t.call(s&&s.proxy):t}}function ju(){return!!(ce||oe||At)}function _c(e,t,n,s=!1){const r={},o={};Mn(o,Zn,1),e.propsDefaults=Object.create(null),ti(e,t,r,o);for(const i in e.propsOptions[0])i in r||(r[i]=void 0);n?e.props=s?r:Tl(r):e.type.props?e.props=r:e.props=o,e.attrs=o}function bc(e,t,n,s){const{props:r,attrs:o,vnode:{patchFlag:i}}=e,l=X(r),[c]=e.propsOptions;let a=!1;if((s||i>0)&&!(i&16)){if(i&8){const f=e.vnode.dynamicProps;for(let h=0;h<f.length;h++){let p=f[h];if(zn(e.emitsOptions,p))continue;const v=t[p];if(c)if(Y(o,p))v!==o[p]&&(o[p]=v,a=!0);else{const M=Oe(p);r[M]=As(c,l,M,v,e,!1)}else v!==o[p]&&(o[p]=v,a=!0)}}}else{ti(e,t,r,o)&&(a=!0);let f;for(const h in l)(!t||!Y(t,h)&&((f=ot(h))===h||!Y(t,f)))&&(c?n&&(n[h]!==void 0||n[f]!==void 0)&&(r[h]=As(c,l,h,void 0,e,!0)):delete r[h]);if(o!==l)for(const h in o)(!t||!Y(t,h))&&(delete o[h],a=!0)}a&&De(e,"set","$attrs")}function ti(e,t,n,s){const[r,o]=e.propsOptions;let i=!1,l;if(t)for(let c in t){if(Ct(c))continue;const a=t[c];let f;r&&Y(r,f=Oe(c))?!o||!o.includes(f)?n[f]=a:(l||(l={}))[f]=a:zn(e.emitsOptions,c)||(!(c in s)||a!==s[c])&&(s[c]=a,i=!0)}if(o){const c=X(n),a=l||ee;for(let f=0;f<o.length;f++){const h=o[f];n[h]=As(r,c,h,a[h],e,!Y(a,h))}}return i}function As(e,t,n,s,r,o){const i=e[n];if(i!=null){const l=Y(i,"default");if(l&&s===void 0){const c=i.default;if(i.type!==Function&&!i.skipFactory&&K(c)){const{propsDefaults:a}=r;if(n in a)s=a[n];else{const f=on(r);s=a[n]=c.call(null,t),f()}}else s=c}i[0]&&(o&&!l?s=!1:i[1]&&(s===""||s===ot(n))&&(s=!0))}return s}function ni(e,t,n=!1){const s=t.propsCache,r=s.get(e);if(r)return r;const o=e.props,i={},l=[];let c=!1;if(!K(e)){const f=h=>{c=!0;const[p,v]=ni(h,t,!0);se(i,p),v&&l.push(...v)};!n&&t.mixins.length&&t.mixins.forEach(f),e.extends&&f(e.extends),e.mixins&&e.mixins.forEach(f)}if(!o&&!c)return Z(e)&&s.set(e,wt),wt;if($(o))for(let f=0;f<o.length;f++){const h=Oe(o[f]);Tr(h)&&(i[h]=ee)}else if(o)for(const f in o){const h=Oe(f);if(Tr(h)){const p=o[f],v=i[h]=$(p)||K(p)?{type:p}:se({},p);if(v){const M=Mr(Boolean,v.type),P=Mr(String,v.type);v[0]=M>-1,v[1]=P<0||M<P,(M>-1||Y(v,"default"))&&l.push(h)}}}const a=[i,l];return Z(e)&&s.set(e,a),a}function Tr(e){return e[0]!=="$"&&!Ct(e)}function Ar(e){return e===null?"null":typeof e=="function"?e.name||"":typeof e=="object"&&e.constructor&&e.constructor.name||""}function Rr(e,t){return Ar(e)===Ar(t)}function Mr(e,t){return $(t)?t.findIndex(n=>Rr(n,e)):K(t)&&Rr(t,e)?0:-1}const si=e=>e[0]==="_"||e==="$stable",Zs=e=>$(e)?e.map(Re):[Re(e)],vc=(e,t,n)=>{if(t._n)return t;const s=kl((...r)=>Zs(t(...r)),n);return s._c=!1,s},ri=(e,t,n)=>{const s=e._ctx;for(const r in e){if(si(r))continue;const o=e[r];if(K(o))t[r]=vc(r,o,s);else if(o!=null){const i=Zs(o);t[r]=()=>i}}},oi=(e,t)=>{const n=Zs(t);e.slots.default=()=>n},wc=(e,t)=>{if(e.vnode.shapeFlag&32){const n=t._;n?(e.slots=X(t),Mn(t,"_",n)):ri(t,e.slots={})}else e.slots={},t&&oi(e,t);Mn(e.slots,Zn,1)},Ec=(e,t,n)=>{const{vnode:s,slots:r}=e;let o=!0,i=ee;if(s.shapeFlag&32){const l=t._;l?n&&l===1?o=!1:(se(r,t),!n&&l===1&&delete r._):(o=!t.$stable,ri(t,r)),i=t}else t&&(oi(e,t),i={default:1});if(o)for(const l in r)!si(l)&&i[l]==null&&delete r[l]};function $n(e,t,n,s,r=!1){if($(e)){e.forEach((p,v)=>$n(p,t&&($(t)?t[v]:t),n,s,r));return}if(Tt(s)&&!r)return;const o=s.shapeFlag&4?ts(s.component)||s.component.proxy:s.el,i=r?null:o,{i:l,r:c}=e,a=t&&t.r,f=l.refs===ee?l.refs={}:l.refs,h=l.setupState;if(a!=null&&a!==c&&(ne(a)?(f[a]=null,Y(h,a)&&(h[a]=null)):he(a)&&(a.value=null)),K(c))et(c,l,12,[i,f]);else{const p=ne(c),v=he(c);if(p||v){const M=()=>{if(e.f){const P=p?Y(h,c)?h[c]:f[c]:c.value;r?$(P)&&Ns(P,o):$(P)?P.includes(o)||P.push(o):p?(f[c]=[o],Y(h,c)&&(h[c]=f[c])):(c.value=[o],e.k&&(f[e.k]=c.value))}else p?(f[c]=i,Y(h,c)&&(h[c]=i)):v&&(c.value=i,e.k&&(f[e.k]=i))};i?(M.id=-1,me(M,n)):M()}}}let qe=!1;const Cc=e=>e.namespaceURI.includes("svg")&&e.tagName!=="foreignObject",xc=e=>e.namespaceURI.includes("MathML"),mn=e=>{if(Cc(e))return"svg";if(xc(e))return"mathml"},yn=e=>e.nodeType===8;function Sc(e){const{mt:t,p:n,o:{patchProp:s,createText:r,nextSibling:o,parentNode:i,remove:l,insert:c,createComment:a}}=e,f=(g,y)=>{if(!y.hasChildNodes()){n(null,g,y),Ln(),y._vnode=g;return}qe=!1,h(y.firstChild,g,null,null,null),Ln(),y._vnode=g,qe&&console.error("Hydration completed but contains mismatches.")},h=(g,y,I,R,N,S=!1)=>{const F=yn(g)&&g.data==="[",w=()=>P(g,y,I,R,N,F),{type:H,ref:T,shapeFlag:q,patchFlag:ie}=y;let ue=g.nodeType;y.el=g,ie===-2&&(S=!1,y.dynamicChildren=null);let k=null;switch(H){case Ot:ue!==3?y.children===""?(c(y.el=r(""),i(g),g),k=g):k=w():(g.data!==y.children&&(qe=!0,g.data=y.children),k=o(g));break;case ve:J(g)?(k=o(g),W(y.el=g.content.firstChild,g,I)):ue!==8||F?k=w():k=o(g);break;case Kt:if(F&&(g=o(g),ue=g.nodeType),ue===1||ue===3){k=g;const z=!y.children.length;for(let j=0;j<y.staticCount;j++)z&&(y.children+=k.nodeType===1?k.outerHTML:k.data),j===y.staticCount-1&&(y.anchor=k),k=o(k);return F?o(k):k}else w();break;case ge:F?k=M(g,y,I,R,N,S):k=w();break;default:if(q&1)(ue!==1||y.type.toLowerCase()!==g.tagName.toLowerCase())&&!J(g)?k=w():k=p(g,y,I,R,N,S);else if(q&6){y.slotScopeIds=N;const z=i(g);if(F?k=U(g):yn(g)&&g.data==="teleport start"?k=U(g,g.data,"teleport end"):k=o(g),t(y,z,null,I,R,mn(z),S),Tt(y)){let j;F?(j=ae(ge),j.anchor=k?k.previousSibling:z.lastChild):j=g.nodeType===3?gi(""):ae("div"),j.el=g,y.component.subTree=j}}else q&64?ue!==8?k=w():k=y.type.hydrate(g,y,I,R,N,S,e,v):q&128&&(k=y.type.hydrate(g,y,I,R,mn(i(g)),N,S,e,h))}return T!=null&&$n(T,null,R,y),k},p=(g,y,I,R,N,S)=>{S=S||!!y.dynamicChildren;const{type:F,props:w,patchFlag:H,shapeFlag:T,dirs:q,transition:ie}=y,ue=F==="input"||F==="option";if(ue||H!==-1){q&&Pe(y,null,I,"created");let k=!1;if(J(g)){k=li(R,ie)&&I&&I.vnode.props&&I.vnode.props.appear;const j=g.content.firstChild;k&&ie.beforeEnter(j),W(j,g,I),y.el=g=j}if(T&16&&!(w&&(w.innerHTML||w.textContent))){let j=v(g.firstChild,y,g,I,R,N,S);for(;j;){qe=!0;const Ve=j;j=j.nextSibling,l(Ve)}}else T&8&&g.textContent!==y.children&&(qe=!0,g.textContent=y.children);if(w)if(ue||!S||H&48)for(const j in w)(ue&&(j.endsWith("value")||j==="indeterminate")||tn(j)&&!Ct(j)||j[0]===".")&&s(g,j,null,w[j],void 0,void 0,I);else w.onClick&&s(g,"onClick",null,w.onClick,void 0,void 0,I);let z;(z=w&&w.onVnodeBeforeMount)&&Ee(z,I,y),q&&Pe(y,null,I,"beforeMount"),((z=w&&w.onVnodeMounted)||q||k)&&Uo(()=>{z&&Ee(z,I,y),k&&ie.enter(g),q&&Pe(y,null,I,"mounted")},R)}return g.nextSibling},v=(g,y,I,R,N,S,F)=>{F=F||!!y.dynamicChildren;const w=y.children,H=w.length;for(let T=0;T<H;T++){const q=F?w[T]:w[T]=Re(w[T]);if(g)g=h(g,q,R,N,S,F);else{if(q.type===Ot&&!q.children)continue;qe=!0,n(null,q,I,null,R,N,mn(I),S)}}return g},M=(g,y,I,R,N,S)=>{const{slotScopeIds:F}=y;F&&(N=N?N.concat(F):F);const w=i(g),H=v(o(g),y,w,I,R,N,S);return H&&yn(H)&&H.data==="]"?o(y.anchor=H):(qe=!0,c(y.anchor=a("]"),w,H),H)},P=(g,y,I,R,N,S)=>{if(qe=!0,y.el=null,S){const H=U(g);for(;;){const T=o(g);if(T&&T!==H)l(T);else break}}const F=o(g),w=i(g);return l(g),n(null,y,w,F,I,R,mn(w),N),F},U=(g,y="[",I="]")=>{let R=0;for(;g;)if(g=o(g),g&&yn(g)&&(g.data===y&&R++,g.data===I)){if(R===0)return o(g);R--}return g},W=(g,y,I)=>{const R=y.parentNode;R&&R.replaceChild(g,y);let N=I;for(;N;)N.vnode.el===y&&(N.vnode.el=N.subTree.el=g),N=N.parent},J=g=>g.nodeType===1&&g.tagName.toLowerCase()==="template";return[f,h]}const me=Uo;function Tc(e){return ii(e)}function Ac(e){return ii(e,Sc)}function ii(e,t){const n=ho();n.__VUE__=!0;const{insert:s,remove:r,patchProp:o,createElement:i,createText:l,createComment:c,setText:a,setElementText:f,parentNode:h,nextSibling:p,setScopeId:v=xe,insertStaticContent:M}=e,P=(u,d,m,_=null,b=null,x=null,O=void 0,C=null,A=!!d.dynamicChildren)=>{if(u===d)return;u&&!ut(u,d)&&(_=cn(u),Ie(u,b,x,!0),u=null),d.patchFlag===-2&&(A=!1,d.dynamicChildren=null);const{type:E,ref:L,shapeFlag:D}=d;switch(E){case Ot:U(u,d,m,_);break;case ve:W(u,d,m,_);break;case Kt:u==null&&J(d,m,_,O);break;case ge:T(u,d,m,_,b,x,O,C,A);break;default:D&1?I(u,d,m,_,b,x,O,C,A):D&6?q(u,d,m,_,b,x,O,C,A):(D&64||D&128)&&E.process(u,d,m,_,b,x,O,C,A,_t)}L!=null&&b&&$n(L,u&&u.ref,x,d||u,!d)},U=(u,d,m,_)=>{if(u==null)s(d.el=l(d.children),m,_);else{const b=d.el=u.el;d.children!==u.children&&a(b,d.children)}},W=(u,d,m,_)=>{u==null?s(d.el=c(d.children||""),m,_):d.el=u.el},J=(u,d,m,_)=>{[u.el,u.anchor]=M(u.children,d,m,_,u.el,u.anchor)},g=({el:u,anchor:d},m,_)=>{let b;for(;u&&u!==d;)b=p(u),s(u,m,_),u=b;s(d,m,_)},y=({el:u,anchor:d})=>{let m;for(;u&&u!==d;)m=p(u),r(u),u=m;r(d)},I=(u,d,m,_,b,x,O,C,A)=>{d.type==="svg"?O="svg":d.type==="math"&&(O="mathml"),u==null?R(d,m,_,b,x,O,C,A):F(u,d,b,x,O,C,A)},R=(u,d,m,_,b,x,O,C)=>{let A,E;const{props:L,shapeFlag:D,transition:V,dirs:B}=u;if(A=u.el=i(u.type,x,L&&L.is,L),D&8?f(A,u.children):D&16&&S(u.children,A,null,_,b,as(u,x),O,C),B&&Pe(u,null,_,"created"),N(A,u,u.scopeId,O,_),L){for(const Q in L)Q!=="value"&&!Ct(Q)&&o(A,Q,null,L[Q],x,u.children,_,b,He);"value"in L&&o(A,"value",null,L.value,x),(E=L.onVnodeBeforeMount)&&Ee(E,_,u)}B&&Pe(u,null,_,"beforeMount");const G=li(b,V);G&&V.beforeEnter(A),s(A,d,m),((E=L&&L.onVnodeMounted)||G||B)&&me(()=>{E&&Ee(E,_,u),G&&V.enter(A),B&&Pe(u,null,_,"mounted")},b)},N=(u,d,m,_,b)=>{if(m&&v(u,m),_)for(let x=0;x<_.length;x++)v(u,_[x]);if(b){let x=b.subTree;if(d===x){const O=b.vnode;N(u,O,O.scopeId,O.slotScopeIds,b.parent)}}},S=(u,d,m,_,b,x,O,C,A=0)=>{for(let E=A;E<u.length;E++){const L=u[E]=C?Je(u[E]):Re(u[E]);P(null,L,d,m,_,b,x,O,C)}},F=(u,d,m,_,b,x,O)=>{const C=d.el=u.el;let{patchFlag:A,dynamicChildren:E,dirs:L}=d;A|=u.patchFlag&16;const D=u.props||ee,V=d.props||ee;let B;if(m&&lt(m,!1),(B=V.onVnodeBeforeUpdate)&&Ee(B,m,d,u),L&&Pe(d,u,m,"beforeUpdate"),m&&lt(m,!0),E?w(u.dynamicChildren,E,C,m,_,as(d,b),x):O||j(u,d,C,null,m,_,as(d,b),x,!1),A>0){if(A&16)H(C,d,D,V,m,_,b);else if(A&2&&D.class!==V.class&&o(C,"class",null,V.class,b),A&4&&o(C,"style",D.style,V.style,b),A&8){const G=d.dynamicProps;for(let Q=0;Q<G.length;Q++){const te=G[Q],le=D[te],Ae=V[te];(Ae!==le||te==="value")&&o(C,te,le,Ae,b,u.children,m,_,He)}}A&1&&u.children!==d.children&&f(C,d.children)}else!O&&E==null&&H(C,d,D,V,m,_,b);((B=V.onVnodeUpdated)||L)&&me(()=>{B&&Ee(B,m,d,u),L&&Pe(d,u,m,"updated")},_)},w=(u,d,m,_,b,x,O)=>{for(let C=0;C<d.length;C++){const A=u[C],E=d[C],L=A.el&&(A.type===ge||!ut(A,E)||A.shapeFlag&70)?h(A.el):m;P(A,E,L,null,_,b,x,O,!0)}},H=(u,d,m,_,b,x,O)=>{if(m!==_){if(m!==ee)for(const C in m)!Ct(C)&&!(C in _)&&o(u,C,m[C],null,O,d.children,b,x,He);for(const C in _){if(Ct(C))continue;const A=_[C],E=m[C];A!==E&&C!=="value"&&o(u,C,E,A,O,d.children,b,x,He)}"value"in _&&o(u,"value",m.value,_.value,O)}},T=(u,d,m,_,b,x,O,C,A)=>{const E=d.el=u?u.el:l(""),L=d.anchor=u?u.anchor:l("");let{patchFlag:D,dynamicChildren:V,slotScopeIds:B}=d;B&&(C=C?C.concat(B):B),u==null?(s(E,m,_),s(L,m,_),S(d.children||[],m,L,b,x,O,C,A)):D>0&&D&64&&V&&u.dynamicChildren?(w(u.dynamicChildren,V,m,b,x,O,C),(d.key!=null||b&&d===b.subTree)&&er(u,d,!0)):j(u,d,m,L,b,x,O,C,A)},q=(u,d,m,_,b,x,O,C,A)=>{d.slotScopeIds=C,u==null?d.shapeFlag&512?b.ctx.activate(d,m,_,O,A):ie(d,m,_,b,x,O,A):ue(u,d,A)},ie=(u,d,m,_,b,x,O)=>{const C=u.component=Hc(u,_,b);if(Yn(u)&&(C.ctx.renderer=_t),jc(C),C.asyncDep){if(b&&b.registerDep(C,k),!u.el){const A=C.subTree=ae(ve);W(null,A,d,m)}}else k(C,u,d,m,b,x,O)},ue=(u,d,m)=>{const _=d.component=u.component;if(Bl(u,d,m))if(_.asyncDep&&!_.asyncResolved){z(_,d,m);return}else _.next=d,$l(_.update),_.effect.dirty=!0,_.update();else d.el=u.el,_.vnode=d},k=(u,d,m,_,b,x,O)=>{const C=()=>{if(u.isMounted){let{next:L,bu:D,u:V,parent:B,vnode:G}=u;{const bt=ci(u);if(bt){L&&(L.el=G.el,z(u,L,O)),bt.asyncDep.then(()=>{u.isUnmounted||C()});return}}let Q=L,te;lt(u,!1),L?(L.el=G.el,z(u,L,O)):L=G,D&&Sn(D),(te=L.props&&L.props.onVnodeBeforeUpdate)&&Ee(te,B,L,G),lt(u,!0);const le=is(u),Ae=u.subTree;u.subTree=le,P(Ae,le,h(Ae.el),cn(Ae),u,b,x),L.el=le.el,Q===null&&Kl(u,le.el),V&&me(V,b),(te=L.props&&L.props.onVnodeUpdated)&&me(()=>Ee(te,B,L,G),b)}else{let L;const{el:D,props:V}=d,{bm:B,m:G,parent:Q}=u,te=Tt(d);if(lt(u,!1),B&&Sn(B),!te&&(L=V&&V.onVnodeBeforeMount)&&Ee(L,Q,d),lt(u,!0),D&&rs){const le=()=>{u.subTree=is(u),rs(D,u.subTree,u,b,null)};te?d.type.__asyncLoader().then(()=>!u.isUnmounted&&le()):le()}else{const le=u.subTree=is(u);P(null,le,m,_,u,b,x),d.el=le.el}if(G&&me(G,b),!te&&(L=V&&V.onVnodeMounted)){const le=d;me(()=>Ee(L,Q,le),b)}(d.shapeFlag&256||Q&&Tt(Q.vnode)&&Q.vnode.shapeFlag&256)&&u.a&&me(u.a,b),u.isMounted=!0,d=m=_=null}},A=u.effect=new js(C,xe,()=>zs(E),u.scope),E=u.update=()=>{A.dirty&&A.run()};E.id=u.uid,lt(u,!0),E()},z=(u,d,m)=>{d.component=u;const _=u.vnode.props;u.vnode=d,u.next=null,bc(u,d.props,_,m),Ec(u,d.children,m),mt(),br(u),yt()},j=(u,d,m,_,b,x,O,C,A=!1)=>{const E=u&&u.children,L=u?u.shapeFlag:0,D=d.children,{patchFlag:V,shapeFlag:B}=d;if(V>0){if(V&128){ln(E,D,m,_,b,x,O,C,A);return}else if(V&256){Ve(E,D,m,_,b,x,O,C,A);return}}B&8?(L&16&&He(E,b,x),D!==E&&f(m,D)):L&16?B&16?ln(E,D,m,_,b,x,O,C,A):He(E,b,x,!0):(L&8&&f(m,""),B&16&&S(D,m,_,b,x,O,C,A))},Ve=(u,d,m,_,b,x,O,C,A)=>{u=u||wt,d=d||wt;const E=u.length,L=d.length,D=Math.min(E,L);let V;for(V=0;V<D;V++){const B=d[V]=A?Je(d[V]):Re(d[V]);P(u[V],B,m,null,b,x,O,C,A)}E>L?He(u,b,x,!0,!1,D):S(d,m,_,b,x,O,C,A,D)},ln=(u,d,m,_,b,x,O,C,A)=>{let E=0;const L=d.length;let D=u.length-1,V=L-1;for(;E<=D&&E<=V;){const B=u[E],G=d[E]=A?Je(d[E]):Re(d[E]);if(ut(B,G))P(B,G,m,null,b,x,O,C,A);else break;E++}for(;E<=D&&E<=V;){const B=u[D],G=d[V]=A?Je(d[V]):Re(d[V]);if(ut(B,G))P(B,G,m,null,b,x,O,C,A);else break;D--,V--}if(E>D){if(E<=V){const B=V+1,G=B<L?d[B].el:_;for(;E<=V;)P(null,d[E]=A?Je(d[E]):Re(d[E]),m,G,b,x,O,C,A),E++}}else if(E>V)for(;E<=D;)Ie(u[E],b,x,!0),E++;else{const B=E,G=E,Q=new Map;for(E=G;E<=V;E++){const _e=d[E]=A?Je(d[E]):Re(d[E]);_e.key!=null&&Q.set(_e.key,E)}let te,le=0;const Ae=V-G+1;let bt=!1,lr=0;const $t=new Array(Ae);for(E=0;E<Ae;E++)$t[E]=0;for(E=B;E<=D;E++){const _e=u[E];if(le>=Ae){Ie(_e,b,x,!0);continue}let Le;if(_e.key!=null)Le=Q.get(_e.key);else for(te=G;te<=V;te++)if($t[te-G]===0&&ut(_e,d[te])){Le=te;break}Le===void 0?Ie(_e,b,x,!0):($t[Le-G]=E+1,Le>=lr?lr=Le:bt=!0,P(_e,d[Le],m,null,b,x,O,C,A),le++)}const cr=bt?Rc($t):wt;for(te=cr.length-1,E=Ae-1;E>=0;E--){const _e=G+E,Le=d[_e],ar=_e+1<L?d[_e+1].el:_;$t[E]===0?P(null,Le,m,ar,b,x,O,C,A):bt&&(te<0||E!==cr[te]?it(Le,m,ar,2):te--)}}},it=(u,d,m,_,b=null)=>{const{el:x,type:O,transition:C,children:A,shapeFlag:E}=u;if(E&6){it(u.component.subTree,d,m,_);return}if(E&128){u.suspense.move(d,m,_);return}if(E&64){O.move(u,d,m,_t);return}if(O===ge){s(x,d,m);for(let D=0;D<A.length;D++)it(A[D],d,m,_);s(u.anchor,d,m);return}if(O===Kt){g(u,d,m);return}if(_!==2&&E&1&&C)if(_===0)C.beforeEnter(x),s(x,d,m),me(()=>C.enter(x),b);else{const{leave:D,delayLeave:V,afterLeave:B}=C,G=()=>s(x,d,m),Q=()=>{D(x,()=>{G(),B&&B()})};V?V(x,G,Q):Q()}else s(x,d,m)},Ie=(u,d,m,_=!1,b=!1)=>{const{type:x,props:O,ref:C,children:A,dynamicChildren:E,shapeFlag:L,patchFlag:D,dirs:V}=u;if(C!=null&&$n(C,null,m,u,!0),L&256){d.ctx.deactivate(u);return}const B=L&1&&V,G=!Tt(u);let Q;if(G&&(Q=O&&O.onVnodeBeforeUnmount)&&Ee(Q,d,u),L&6)Ki(u.component,m,_);else{if(L&128){u.suspense.unmount(m,_);return}B&&Pe(u,null,d,"beforeUnmount"),L&64?u.type.remove(u,d,m,b,_t,_):E&&(x!==ge||D>0&&D&64)?He(E,d,m,!1,!0):(x===ge&&D&384||!b&&L&16)&&He(A,d,m),_&&or(u)}(G&&(Q=O&&O.onVnodeUnmounted)||B)&&me(()=>{Q&&Ee(Q,d,u),B&&Pe(u,null,d,"unmounted")},m)},or=u=>{const{type:d,el:m,anchor:_,transition:b}=u;if(d===ge){Bi(m,_);return}if(d===Kt){y(u);return}const x=()=>{r(m),b&&!b.persisted&&b.afterLeave&&b.afterLeave()};if(u.shapeFlag&1&&b&&!b.persisted){const{leave:O,delayLeave:C}=b,A=()=>O(m,x);C?C(u.el,x,A):A()}else x()},Bi=(u,d)=>{let m;for(;u!==d;)m=p(u),r(u),u=m;r(d)},Ki=(u,d,m)=>{const{bum:_,scope:b,update:x,subTree:O,um:C}=u;_&&Sn(_),b.stop(),x&&(x.active=!1,Ie(O,u,d,m)),C&&me(C,d),me(()=>{u.isUnmounted=!0},d),d&&d.pendingBranch&&!d.isUnmounted&&u.asyncDep&&!u.asyncResolved&&u.suspenseId===d.pendingId&&(d.deps--,d.deps===0&&d.resolve())},He=(u,d,m,_=!1,b=!1,x=0)=>{for(let O=x;O<u.length;O++)Ie(u[O],d,m,_,b)},cn=u=>u.shapeFlag&6?cn(u.component.subTree):u.shapeFlag&128?u.suspense.next():p(u.anchor||u.el);let ns=!1;const ir=(u,d,m)=>{u==null?d._vnode&&Ie(d._vnode,null,null,!0):P(d._vnode||null,u,d,null,null,null,m),ns||(ns=!0,br(),Ln(),ns=!1),d._vnode=u},_t={p:P,um:Ie,m:it,r:or,mt:ie,mc:S,pc:j,pbc:w,n:cn,o:e};let ss,rs;return t&&([ss,rs]=t(_t)),{render:ir,hydrate:ss,createApp:mc(ir,ss)}}function as({type:e,props:t},n){return n==="svg"&&e==="foreignObject"||n==="mathml"&&e==="annotation-xml"&&t&&t.encoding&&t.encoding.includes("html")?void 0:n}function lt({effect:e,update:t},n){e.allowRecurse=t.allowRecurse=n}function li(e,t){return(!e||e&&!e.pendingBranch)&&t&&!t.persisted}function er(e,t,n=!1){const s=e.children,r=t.children;if($(s)&&$(r))for(let o=0;o<s.length;o++){const i=s[o];let l=r[o];l.shapeFlag&1&&!l.dynamicChildren&&((l.patchFlag<=0||l.patchFlag===32)&&(l=r[o]=Je(r[o]),l.el=i.el),n||er(i,l)),l.type===Ot&&(l.el=i.el)}}function Rc(e){const t=e.slice(),n=[0];let s,r,o,i,l;const c=e.length;for(s=0;s<c;s++){const a=e[s];if(a!==0){if(r=n[n.length-1],e[r]<a){t[s]=r,n.push(s);continue}for(o=0,i=n.length-1;o<i;)l=o+i>>1,e[n[l]]<a?o=l+1:i=l;a<e[n[o]]&&(o>0&&(t[s]=n[o-1]),n[o]=s)}}for(o=n.length,i=n[o-1];o-- >0;)n[o]=i,i=t[i];return n}function ci(e){const t=e.subTree.component;if(t)return t.asyncDep&&!t.asyncResolved?t:ci(t)}const Mc=e=>e.__isTeleport,Bt=e=>e&&(e.disabled||e.disabled===""),Or=e=>typeof SVGElement<"u"&&e instanceof SVGElement,Ir=e=>typeof MathMLElement=="function"&&e instanceof MathMLElement,Rs=(e,t)=>{const n=e&&e.to;return ne(n)?t?t(n):null:n},Oc={name:"Teleport",__isTeleport:!0,process(e,t,n,s,r,o,i,l,c,a){const{mc:f,pc:h,pbc:p,o:{insert:v,querySelector:M,createText:P,createComment:U}}=a,W=Bt(t.props);let{shapeFlag:J,children:g,dynamicChildren:y}=t;if(e==null){const I=t.el=P(""),R=t.anchor=P("");v(I,n,s),v(R,n,s);const N=t.target=Rs(t.props,M),S=t.targetAnchor=P("");N&&(v(S,N),i==="svg"||Or(N)?i="svg":(i==="mathml"||Ir(N))&&(i="mathml"));const F=(w,H)=>{J&16&&f(g,w,H,r,o,i,l,c)};W?F(n,R):N&&F(N,S)}else{t.el=e.el;const I=t.anchor=e.anchor,R=t.target=e.target,N=t.targetAnchor=e.targetAnchor,S=Bt(e.props),F=S?n:R,w=S?I:N;if(i==="svg"||Or(R)?i="svg":(i==="mathml"||Ir(R))&&(i="mathml"),y?(p(e.dynamicChildren,y,F,r,o,i,l),er(e,t,!0)):c||h(e,t,F,w,r,o,i,l,!1),W)S?t.props&&e.props&&t.props.to!==e.props.to&&(t.props.to=e.props.to):_n(t,n,I,a,1);else if((t.props&&t.props.to)!==(e.props&&e.props.to)){const H=t.target=Rs(t.props,M);H&&_n(t,H,null,a,0)}else S&&_n(t,R,N,a,1)}ai(t)},remove(e,t,n,s,{um:r,o:{remove:o}},i){const{shapeFlag:l,children:c,anchor:a,targetAnchor:f,target:h,props:p}=e;if(h&&o(f),i&&o(a),l&16){const v=i||!Bt(p);for(let M=0;M<c.length;M++){const P=c[M];r(P,t,n,v,!!P.dynamicChildren)}}},move:_n,hydrate:Ic};function _n(e,t,n,{o:{insert:s},m:r},o=2){o===0&&s(e.targetAnchor,t,n);const{el:i,anchor:l,shapeFlag:c,children:a,props:f}=e,h=o===2;if(h&&s(i,t,n),(!h||Bt(f))&&c&16)for(let p=0;p<a.length;p++)r(a[p],t,n,2);h&&s(l,t,n)}function Ic(e,t,n,s,r,o,{o:{nextSibling:i,parentNode:l,querySelector:c}},a){const f=t.target=Rs(t.props,c);if(f){const h=f._lpa||f.firstChild;if(t.shapeFlag&16)if(Bt(t.props))t.anchor=a(i(e),t,l(e),n,s,r,o),t.targetAnchor=h;else{t.anchor=i(e);let p=h;for(;p;)if(p=i(p),p&&p.nodeType===8&&p.data==="teleport anchor"){t.targetAnchor=p,f._lpa=t.targetAnchor&&i(t.targetAnchor);break}a(h,t,f,n,s,r,o)}ai(t)}return t.anchor&&i(t.anchor)}const ku=Oc;function ai(e){const t=e.ctx;if(t&&t.ut){let n=e.children[0].el;for(;n&&n!==e.targetAnchor;)n.nodeType===1&&n.setAttribute("data-v-owner",t.uid),n=n.nextSibling;t.ut()}}const ge=Symbol.for("v-fgt"),Ot=Symbol.for("v-txt"),ve=Symbol.for("v-cmt"),Kt=Symbol.for("v-stc"),Wt=[];let Me=null;function ui(e=!1){Wt.push(Me=e?null:[])}function Lc(){Wt.pop(),Me=Wt[Wt.length-1]||null}let en=1;function Lr(e){en+=e}function fi(e){return e.dynamicChildren=en>0?Me||wt:null,Lc(),en>0&&Me&&Me.push(e),e}function Du(e,t,n,s,r,o){return fi(pi(e,t,n,s,r,o,!0))}function di(e,t,n,s,r){return fi(ae(e,t,n,s,r,!0))}function Vn(e){return e?e.__v_isVNode===!0:!1}function ut(e,t){return e.type===t.type&&e.key===t.key}const Zn="__vInternal",hi=({key:e})=>e??null,Tn=({ref:e,ref_key:t,ref_for:n})=>(typeof e=="number"&&(e=""+e),e!=null?ne(e)||he(e)||K(e)?{i:oe,r:e,k:t,f:!!n}:e:null);function pi(e,t=null,n=null,s=0,r=null,o=e===ge?0:1,i=!1,l=!1){const c={__v_isVNode:!0,__v_skip:!0,type:e,props:t,key:t&&hi(t),ref:t&&Tn(t),scopeId:Xn,slotScopeIds:null,children:n,component:null,suspense:null,ssContent:null,ssFallback:null,dirs:null,transition:null,el:null,anchor:null,target:null,targetAnchor:null,staticCount:0,shapeFlag:o,patchFlag:s,dynamicProps:r,dynamicChildren:null,appContext:null,ctx:oe};return l?(tr(c,n),o&128&&e.normalize(c)):n&&(c.shapeFlag|=ne(n)?8:16),en>0&&!i&&Me&&(c.patchFlag>0||o&6)&&c.patchFlag!==32&&Me.push(c),c}const ae=Pc;function Pc(e,t=null,n=null,s=0,r=null,o=!1){if((!e||e===Do)&&(e=ve),Vn(e)){const l=st(e,t,!0);return n&&tr(l,n),en>0&&!o&&Me&&(l.shapeFlag&6?Me[Me.indexOf(e)]=l:Me.push(l)),l.patchFlag|=-2,l}if(Bc(e)&&(e=e.__vccOpts),t){t=Nc(t);let{class:l,style:c}=t;l&&!ne(l)&&(t.class=Vs(l)),Z(c)&&(Mo(c)&&!$(c)&&(c=se({},c)),t.style=$s(c))}const i=ne(e)?1:ql(e)?128:Mc(e)?64:Z(e)?4:K(e)?2:0;return pi(e,t,n,s,r,i,o,!0)}function Nc(e){return e?Mo(e)||Zn in e?se({},e):e:null}function st(e,t,n=!1){const{props:s,ref:r,patchFlag:o,children:i}=e,l=t?Fc(s||{},t):s;return{__v_isVNode:!0,__v_skip:!0,type:e.type,props:l,key:l&&hi(l),ref:t&&t.ref?n&&r?$(r)?r.concat(Tn(t)):[r,Tn(t)]:Tn(t):r,scopeId:e.scopeId,slotScopeIds:e.slotScopeIds,children:i,target:e.target,targetAnchor:e.targetAnchor,staticCount:e.staticCount,shapeFlag:e.shapeFlag,patchFlag:t&&e.type!==ge?o===-1?16:o|16:o,dynamicProps:e.dynamicProps,dynamicChildren:e.dynamicChildren,appContext:e.appContext,dirs:e.dirs,transition:e.transition,component:e.component,suspense:e.suspense,ssContent:e.ssContent&&st(e.ssContent),ssFallback:e.ssFallback&&st(e.ssFallback),el:e.el,anchor:e.anchor,ctx:e.ctx,ce:e.ce}}function gi(e=" ",t=0){return ae(Ot,null,e,t)}function Uu(e,t){const n=ae(Kt,null,e);return n.staticCount=t,n}function Bu(e="",t=!1){return t?(ui(),di(ve,null,e)):ae(ve,null,e)}function Re(e){return e==null||typeof e=="boolean"?ae(ve):$(e)?ae(ge,null,e.slice()):typeof e=="object"?Je(e):ae(Ot,null,String(e))}function Je(e){return e.el===null&&e.patchFlag!==-1||e.memo?e:st(e)}function tr(e,t){let n=0;const{shapeFlag:s}=e;if(t==null)t=null;else if($(t))n=16;else if(typeof t=="object")if(s&65){const r=t.default;r&&(r._c&&(r._d=!1),tr(e,r()),r._c&&(r._d=!0));return}else{n=32;const r=t._;!r&&!(Zn in t)?t._ctx=oe:r===3&&oe&&(oe.slots._===1?t._=1:(t._=2,e.patchFlag|=1024))}else K(t)?(t={default:t,_ctx:oe},n=32):(t=String(t),s&64?(n=16,t=[gi(t)]):n=8);e.children=t,e.shapeFlag|=n}function Fc(...e){const t={};for(let n=0;n<e.length;n++){const s=e[n];for(const r in s)if(r==="class")t.class!==s.class&&(t.class=Vs([t.class,s.class]));else if(r==="style")t.style=$s([t.style,s.style]);else if(tn(r)){const o=t[r],i=s[r];i&&o!==i&&!($(o)&&o.includes(i))&&(t[r]=o?[].concat(o,i):i)}else r!==""&&(t[r]=s[r])}return t}function Ee(e,t,n,s=null){Se(e,t,7,[n,s])}const $c=ei();let Vc=0;function Hc(e,t,n){const s=e.type,r=(t?t.appContext:e.appContext)||$c,o={uid:Vc++,vnode:e,type:s,parent:t,appContext:r,root:null,next:null,subTree:null,effect:null,update:null,scope:new mo(!0),render:null,proxy:null,exposed:null,exposeProxy:null,withProxy:null,provides:t?t.provides:Object.create(r.provides),accessCache:null,renderCache:[],components:null,directives:null,propsOptions:ni(s,r),emitsOptions:ko(s,r),emit:null,emitted:null,propsDefaults:ee,inheritAttrs:s.inheritAttrs,ctx:ee,data:ee,props:ee,attrs:ee,slots:ee,refs:ee,setupState:ee,setupContext:null,attrsProxy:null,slotsProxy:null,suspense:n,suspenseId:n?n.pendingId:0,asyncDep:null,asyncResolved:!1,isMounted:!1,isUnmounted:!1,isDeactivated:!1,bc:null,c:null,bm:null,m:null,bu:null,u:null,um:null,bum:null,da:null,a:null,rtg:null,rtc:null,ec:null,sp:null};return o.ctx={_:o},o.root=t?t.root:o,o.emit=jl.bind(null,o),e.ce&&e.ce(o),o}let ce=null;const Ft=()=>ce||oe;let Hn,Ms;{const e=ho(),t=(n,s)=>{let r;return(r=e[n])||(r=e[n]=[]),r.push(s),o=>{r.length>1?r.forEach(i=>i(o)):r[0](o)}};Hn=t("__VUE_INSTANCE_SETTERS__",n=>ce=n),Ms=t("__VUE_SSR_SETTERS__",n=>es=n)}const on=e=>{const t=ce;return Hn(e),e.scope.on(),()=>{e.scope.off(),Hn(t)}},Pr=()=>{ce&&ce.scope.off(),Hn(null)};function mi(e){return e.vnode.shapeFlag&4}let es=!1;function jc(e,t=!1){t&&Ms(t);const{props:n,children:s}=e.vnode,r=mi(e);_c(e,n,r,t),wc(e,s);const o=r?kc(e,t):void 0;return t&&Ms(!1),o}function kc(e,t){const n=e.type;e.accessCache=Object.create(null),e.proxy=kt(new Proxy(e.ctx,cc));const{setup:s}=n;if(s){const r=e.setupContext=s.length>1?_i(e):null,o=on(e);mt();const i=et(s,e,0,[e.props,r]);if(yt(),o(),ao(i)){if(i.then(Pr,Pr),t)return i.then(l=>{Nr(e,l,t)}).catch(l=>{Gn(l,e,0)});e.asyncDep=i}else Nr(e,i,t)}else yi(e,t)}function Nr(e,t,n){K(t)?e.type.__ssrInlineRender?e.ssrRender=t:e.render=t:Z(t)&&(e.setupState=No(t)),yi(e,n)}let Fr;function yi(e,t,n){const s=e.type;if(!e.render){if(!t&&Fr&&!s.render){const r=s.template||Qs(e).template;if(r){const{isCustomElement:o,compilerOptions:i}=e.appContext.config,{delimiters:l,compilerOptions:c}=s,a=se(se({isCustomElement:o,delimiters:l},i),c);s.render=Fr(r,a)}}e.render=s.render||xe}{const r=on(e);mt();try{uc(e)}finally{yt(),r()}}}function Dc(e){return e.attrsProxy||(e.attrsProxy=new Proxy(e.attrs,{get(t,n){return ye(e,"get","$attrs"),t[n]}}))}function _i(e){const t=n=>{e.exposed=n||{}};return{get attrs(){return Dc(e)},slots:e.slots,emit:e.emit,expose:t}}function ts(e){if(e.exposed)return e.exposeProxy||(e.exposeProxy=new Proxy(No(kt(e.exposed)),{get(t,n){if(n in t)return t[n];if(n in Ut)return Ut[n](e)},has(t,n){return n in t||n in Ut}}))}function Uc(e,t=!0){return K(e)?e.displayName||e.name:e.name||t&&e.__name}function Bc(e){return K(e)&&"__vccOpts"in e}const re=(e,t)=>Al(e,t,es);function Ku(e,t,n=ee){const s=Ft(),r=Oe(t),o=ot(t),i=Fo((c,a)=>{let f;return Xl(()=>{const h=e[t];Fe(f,h)&&(f=h,a())}),{get(){return c(),n.get?n.get(f):f},set(h){const p=s.vnode.props;!(p&&(t in p||r in p||o in p)&&(`onUpdate:${t}`in p||`onUpdate:${r}`in p||`onUpdate:${o}`in p))&&Fe(h,f)&&(f=h,a()),s.emit(`update:${t}`,n.set?n.set(h):h)}}}),l=t==="modelValue"?"modelModifiers":`${t}Modifiers`;return i[Symbol.iterator]=()=>{let c=0;return{next(){return c<2?{value:c++?e[l]||{}:i,done:!1}:{done:!0}}}},i}function Os(e,t,n){const s=arguments.length;return s===2?Z(t)&&!$(t)?Vn(t)?ae(e,null,[t]):ae(e,t):ae(e,null,t):(s>3?n=Array.prototype.slice.call(arguments,2):s===3&&Vn(n)&&(n=[n]),ae(e,t,n))}const Kc="3.4.21";/**
+* @vue/runtime-dom v3.4.21
+* (c) 2018-present Yuxi (Evan) You and Vue contributors
+* @license MIT
+**/const Wc="http://www.w3.org/2000/svg",qc="http://www.w3.org/1998/Math/MathML",Qe=typeof document<"u"?document:null,$r=Qe&&Qe.createElement("template"),Gc={insert:(e,t,n)=>{t.insertBefore(e,n||null)},remove:e=>{const t=e.parentNode;t&&t.removeChild(e)},createElement:(e,t,n,s)=>{const r=t==="svg"?Qe.createElementNS(Wc,e):t==="mathml"?Qe.createElementNS(qc,e):Qe.createElement(e,n?{is:n}:void 0);return e==="select"&&s&&s.multiple!=null&&r.setAttribute("multiple",s.multiple),r},createText:e=>Qe.createTextNode(e),createComment:e=>Qe.createComment(e),setText:(e,t)=>{e.nodeValue=t},setElementText:(e,t)=>{e.textContent=t},parentNode:e=>e.parentNode,nextSibling:e=>e.nextSibling,querySelector:e=>Qe.querySelector(e),setScopeId(e,t){e.setAttribute(t,"")},insertStaticContent(e,t,n,s,r,o){const i=n?n.previousSibling:t.lastChild;if(r&&(r===o||r.nextSibling))for(;t.insertBefore(r.cloneNode(!0),n),!(r===o||!(r=r.nextSibling)););else{$r.innerHTML=s==="svg"?`<svg>${e}</svg>`:s==="mathml"?`<math>${e}</math>`:e;const l=$r.content;if(s==="svg"||s==="mathml"){const c=l.firstChild;for(;c.firstChild;)l.appendChild(c.firstChild);l.removeChild(c)}t.insertBefore(l,n)}return[i?i.nextSibling:t.firstChild,n?n.previousSibling:t.lastChild]}},Ge="transition",Vt="animation",It=Symbol("_vtc"),bi=(e,{slots:t})=>Os(Ql,wi(e),t);bi.displayName="Transition";const vi={name:String,type:String,css:{type:Boolean,default:!0},duration:[String,Number,Object],enterFromClass:String,enterActiveClass:String,enterToClass:String,appearFromClass:String,appearActiveClass:String,appearToClass:String,leaveFromClass:String,leaveActiveClass:String,leaveToClass:String},zc=bi.props=se({},qo,vi),ct=(e,t=[])=>{$(e)?e.forEach(n=>n(...t)):e&&e(...t)},Vr=e=>e?$(e)?e.some(t=>t.length>1):e.length>1:!1;function wi(e){const t={};for(const T in e)T in vi||(t[T]=e[T]);if(e.css===!1)return t;const{name:n="v",type:s,duration:r,enterFromClass:o=`${n}-enter-from`,enterActiveClass:i=`${n}-enter-active`,enterToClass:l=`${n}-enter-to`,appearFromClass:c=o,appearActiveClass:a=i,appearToClass:f=l,leaveFromClass:h=`${n}-leave-from`,leaveActiveClass:p=`${n}-leave-active`,leaveToClass:v=`${n}-leave-to`}=e,M=Xc(r),P=M&&M[0],U=M&&M[1],{onBeforeEnter:W,onEnter:J,onEnterCancelled:g,onLeave:y,onLeaveCancelled:I,onBeforeAppear:R=W,onAppear:N=J,onAppearCancelled:S=g}=t,F=(T,q,ie)=>{ze(T,q?f:l),ze(T,q?a:i),ie&&ie()},w=(T,q)=>{T._isLeaving=!1,ze(T,h),ze(T,v),ze(T,p),q&&q()},H=T=>(q,ie)=>{const ue=T?N:J,k=()=>F(q,T,ie);ct(ue,[q,k]),Hr(()=>{ze(q,T?c:o),je(q,T?f:l),Vr(ue)||jr(q,s,P,k)})};return se(t,{onBeforeEnter(T){ct(W,[T]),je(T,o),je(T,i)},onBeforeAppear(T){ct(R,[T]),je(T,c),je(T,a)},onEnter:H(!1),onAppear:H(!0),onLeave(T,q){T._isLeaving=!0;const ie=()=>w(T,q);je(T,h),Ci(),je(T,p),Hr(()=>{T._isLeaving&&(ze(T,h),je(T,v),Vr(y)||jr(T,s,U,ie))}),ct(y,[T,ie])},onEnterCancelled(T){F(T,!1),ct(g,[T])},onAppearCancelled(T){F(T,!0),ct(S,[T])},onLeaveCancelled(T){w(T),ct(I,[T])}})}function Xc(e){if(e==null)return null;if(Z(e))return[us(e.enter),us(e.leave)];{const t=us(e);return[t,t]}}function us(e){return Yi(e)}function je(e,t){t.split(/\s+/).forEach(n=>n&&e.classList.add(n)),(e[It]||(e[It]=new Set)).add(t)}function ze(e,t){t.split(/\s+/).forEach(s=>s&&e.classList.remove(s));const n=e[It];n&&(n.delete(t),n.size||(e[It]=void 0))}function Hr(e){requestAnimationFrame(()=>{requestAnimationFrame(e)})}let Yc=0;function jr(e,t,n,s){const r=e._endId=++Yc,o=()=>{r===e._endId&&s()};if(n)return setTimeout(o,n);const{type:i,timeout:l,propCount:c}=Ei(e,t);if(!i)return s();const a=i+"end";let f=0;const h=()=>{e.removeEventListener(a,p),o()},p=v=>{v.target===e&&++f>=c&&h()};setTimeout(()=>{f<c&&h()},l+1),e.addEventListener(a,p)}function Ei(e,t){const n=window.getComputedStyle(e),s=M=>(n[M]||"").split(", "),r=s(`${Ge}Delay`),o=s(`${Ge}Duration`),i=kr(r,o),l=s(`${Vt}Delay`),c=s(`${Vt}Duration`),a=kr(l,c);let f=null,h=0,p=0;t===Ge?i>0&&(f=Ge,h=i,p=o.length):t===Vt?a>0&&(f=Vt,h=a,p=c.length):(h=Math.max(i,a),f=h>0?i>a?Ge:Vt:null,p=f?f===Ge?o.length:c.length:0);const v=f===Ge&&/\b(transform|all)(,|$)/.test(s(`${Ge}Property`).toString());return{type:f,timeout:h,propCount:p,hasTransform:v}}function kr(e,t){for(;e.length<t.length;)e=e.concat(e);return Math.max(...t.map((n,s)=>Dr(n)+Dr(e[s])))}function Dr(e){return e==="auto"?0:Number(e.slice(0,-1).replace(",","."))*1e3}function Ci(){return document.body.offsetHeight}function Jc(e,t,n){const s=e[It];s&&(t=(t?[t,...s]:[...s]).join(" ")),t==null?e.removeAttribute("class"):n?e.setAttribute("class",t):e.className=t}const jn=Symbol("_vod"),xi=Symbol("_vsh"),Wu={beforeMount(e,{value:t},{transition:n}){e[jn]=e.style.display==="none"?"":e.style.display,n&&t?n.beforeEnter(e):Ht(e,t)},mounted(e,{value:t},{transition:n}){n&&t&&n.enter(e)},updated(e,{value:t,oldValue:n},{transition:s}){!t!=!n&&(s?t?(s.beforeEnter(e),Ht(e,!0),s.enter(e)):s.leave(e,()=>{Ht(e,!1)}):Ht(e,t))},beforeUnmount(e,{value:t}){Ht(e,t)}};function Ht(e,t){e.style.display=t?e[jn]:"none",e[xi]=!t}const Qc=Symbol(""),Zc=/(^|;)\s*display\s*:/;function ea(e,t,n){const s=e.style,r=ne(n);let o=!1;if(n&&!r){if(t)if(ne(t))for(const i of t.split(";")){const l=i.slice(0,i.indexOf(":")).trim();n[l]==null&&An(s,l,"")}else for(const i in t)n[i]==null&&An(s,i,"");for(const i in n)i==="display"&&(o=!0),An(s,i,n[i])}else if(r){if(t!==n){const i=s[Qc];i&&(n+=";"+i),s.cssText=n,o=Zc.test(n)}}else t&&e.removeAttribute("style");jn in e&&(e[jn]=o?s.display:"",e[xi]&&(s.display="none"))}const Ur=/\s*!important$/;function An(e,t,n){if($(n))n.forEach(s=>An(e,t,s));else if(n==null&&(n=""),t.startsWith("--"))e.setProperty(t,n);else{const s=ta(e,t);Ur.test(n)?e.setProperty(ot(s),n.replace(Ur,""),"important"):e[s]=n}}const Br=["Webkit","Moz","ms"],fs={};function ta(e,t){const n=fs[t];if(n)return n;let s=Oe(t);if(s!=="filter"&&s in e)return fs[t]=s;s=Bn(s);for(let r=0;r<Br.length;r++){const o=Br[r]+s;if(o in e)return fs[t]=o}return t}const Kr="http://www.w3.org/1999/xlink";function na(e,t,n,s,r){if(s&&t.startsWith("xlink:"))n==null?e.removeAttributeNS(Kr,t.slice(6,t.length)):e.setAttributeNS(Kr,t,n);else{const o=nl(t);n==null||o&&!po(n)?e.removeAttribute(t):e.setAttribute(t,o?"":n)}}function sa(e,t,n,s,r,o,i){if(t==="innerHTML"||t==="textContent"){s&&i(s,r,o),e[t]=n??"";return}const l=e.tagName;if(t==="value"&&l!=="PROGRESS"&&!l.includes("-")){const a=l==="OPTION"?e.getAttribute("value")||"":e.value,f=n??"";(a!==f||!("_value"in e))&&(e.value=f),n==null&&e.removeAttribute(t),e._value=n;return}let c=!1;if(n===""||n==null){const a=typeof e[t];a==="boolean"?n=po(n):n==null&&a==="string"?(n="",c=!0):a==="number"&&(n=0,c=!0)}try{e[t]=n}catch{}c&&e.removeAttribute(t)}function ke(e,t,n,s){e.addEventListener(t,n,s)}function ra(e,t,n,s){e.removeEventListener(t,n,s)}const Wr=Symbol("_vei");function oa(e,t,n,s,r=null){const o=e[Wr]||(e[Wr]={}),i=o[t];if(s&&i)i.value=s;else{const[l,c]=ia(t);if(s){const a=o[t]=aa(s,r);ke(e,l,a,c)}else i&&(ra(e,l,i,c),o[t]=void 0)}}const qr=/(?:Once|Passive|Capture)$/;function ia(e){let t;if(qr.test(e)){t={};let s;for(;s=e.match(qr);)e=e.slice(0,e.length-s[0].length),t[s[0].toLowerCase()]=!0}return[e[2]===":"?e.slice(3):ot(e.slice(2)),t]}let ds=0;const la=Promise.resolve(),ca=()=>ds||(la.then(()=>ds=0),ds=Date.now());function aa(e,t){const n=s=>{if(!s._vts)s._vts=Date.now();else if(s._vts<=n.attached)return;Se(ua(s,n.value),t,5,[s])};return n.value=e,n.attached=ca(),n}function ua(e,t){if($(t)){const n=e.stopImmediatePropagation;return e.stopImmediatePropagation=()=>{n.call(e),e._stopped=!0},t.map(s=>r=>!r._stopped&&s&&s(r))}else return t}const Gr=e=>e.charCodeAt(0)===111&&e.charCodeAt(1)===110&&e.charCodeAt(2)>96&&e.charCodeAt(2)<123,fa=(e,t,n,s,r,o,i,l,c)=>{const a=r==="svg";t==="class"?Jc(e,s,a):t==="style"?ea(e,n,s):tn(t)?Ps(t)||oa(e,t,n,s,i):(t[0]==="."?(t=t.slice(1),!0):t[0]==="^"?(t=t.slice(1),!1):da(e,t,s,a))?sa(e,t,s,o,i,l,c):(t==="true-value"?e._trueValue=s:t==="false-value"&&(e._falseValue=s),na(e,t,s,a))};function da(e,t,n,s){if(s)return!!(t==="innerHTML"||t==="textContent"||t in e&&Gr(t)&&K(n));if(t==="spellcheck"||t==="draggable"||t==="translate"||t==="form"||t==="list"&&e.tagName==="INPUT"||t==="type"&&e.tagName==="TEXTAREA")return!1;if(t==="width"||t==="height"){const r=e.tagName;if(r==="IMG"||r==="VIDEO"||r==="CANVAS"||r==="SOURCE")return!1}return Gr(t)&&ne(n)?!1:t in e}const Si=new WeakMap,Ti=new WeakMap,kn=Symbol("_moveCb"),zr=Symbol("_enterCb"),Ai={name:"TransitionGroup",props:se({},zc,{tag:String,moveClass:String}),setup(e,{slots:t}){const n=Ft(),s=Wo();let r,o;return Yo(()=>{if(!r.length)return;const i=e.moveClass||`${e.name||"v"}-move`;if(!ya(r[0].el,n.vnode.el,i))return;r.forEach(pa),r.forEach(ga);const l=r.filter(ma);Ci(),l.forEach(c=>{const a=c.el,f=a.style;je(a,i),f.transform=f.webkitTransform=f.transitionDuration="";const h=a[kn]=p=>{p&&p.target!==a||(!p||/transform$/.test(p.propertyName))&&(a.removeEventListener("transitionend",h),a[kn]=null,ze(a,i))};a.addEventListener("transitionend",h)})}),()=>{const i=X(e),l=wi(i);let c=i.tag||ge;r=o,o=t.default?Js(t.default()):[];for(let a=0;a<o.length;a++){const f=o[a];f.key!=null&&Zt(f,Qt(f,l,s,n))}if(r)for(let a=0;a<r.length;a++){const f=r[a];Zt(f,Qt(f,l,s,n)),Si.set(f,f.el.getBoundingClientRect())}return ae(c,null,o)}}},ha=e=>delete e.mode;Ai.props;const qu=Ai;function pa(e){const t=e.el;t[kn]&&t[kn](),t[zr]&&t[zr]()}function ga(e){Ti.set(e,e.el.getBoundingClientRect())}function ma(e){const t=Si.get(e),n=Ti.get(e),s=t.left-n.left,r=t.top-n.top;if(s||r){const o=e.el.style;return o.transform=o.webkitTransform=`translate(${s}px,${r}px)`,o.transitionDuration="0s",e}}function ya(e,t,n){const s=e.cloneNode(),r=e[It];r&&r.forEach(l=>{l.split(/\s+/).forEach(c=>c&&s.classList.remove(c))}),n.split(/\s+/).forEach(l=>l&&s.classList.add(l)),s.style.display="none";const o=t.nodeType===1?t:t.parentNode;o.appendChild(s);const{hasTransform:i}=Ei(s);return o.removeChild(s),i}const rt=e=>{const t=e.props["onUpdate:modelValue"]||!1;return $(t)?n=>Sn(t,n):t};function _a(e){e.target.composing=!0}function Xr(e){const t=e.target;t.composing&&(t.composing=!1,t.dispatchEvent(new Event("input")))}const Te=Symbol("_assign"),Yr={created(e,{modifiers:{lazy:t,trim:n,number:s}},r){e[Te]=rt(r);const o=s||r.props&&r.props.type==="number";ke(e,t?"change":"input",i=>{if(i.target.composing)return;let l=e.value;n&&(l=l.trim()),o&&(l=zt(l)),e[Te](l)}),n&&ke(e,"change",()=>{e.value=e.value.trim()}),t||(ke(e,"compositionstart",_a),ke(e,"compositionend",Xr),ke(e,"change",Xr))},mounted(e,{value:t}){e.value=t??""},beforeUpdate(e,{value:t,modifiers:{lazy:n,trim:s,number:r}},o){if(e[Te]=rt(o),e.composing)return;const i=r||e.type==="number"?zt(e.value):e.value,l=t??"";i!==l&&(document.activeElement===e&&e.type!=="range"&&(n||s&&e.value.trim()===l)||(e.value=l))}},ba={deep:!0,created(e,t,n){e[Te]=rt(n),ke(e,"change",()=>{const s=e._modelValue,r=Lt(e),o=e.checked,i=e[Te];if($(s)){const l=Hs(s,r),c=l!==-1;if(o&&!c)i(s.concat(r));else if(!o&&c){const a=[...s];a.splice(l,1),i(a)}}else if(Pt(s)){const l=new Set(s);o?l.add(r):l.delete(r),i(l)}else i(Ri(e,o))})},mounted:Jr,beforeUpdate(e,t,n){e[Te]=rt(n),Jr(e,t,n)}};function Jr(e,{value:t,oldValue:n},s){e._modelValue=t,$(t)?e.checked=Hs(t,s.props.value)>-1:Pt(t)?e.checked=t.has(s.props.value):t!==n&&(e.checked=gt(t,Ri(e,!0)))}const va={created(e,{value:t},n){e.checked=gt(t,n.props.value),e[Te]=rt(n),ke(e,"change",()=>{e[Te](Lt(e))})},beforeUpdate(e,{value:t,oldValue:n},s){e[Te]=rt(s),t!==n&&(e.checked=gt(t,s.props.value))}},wa={deep:!0,created(e,{value:t,modifiers:{number:n}},s){const r=Pt(t);ke(e,"change",()=>{const o=Array.prototype.filter.call(e.options,i=>i.selected).map(i=>n?zt(Lt(i)):Lt(i));e[Te](e.multiple?r?new Set(o):o:o[0]),e._assigning=!0,sn(()=>{e._assigning=!1})}),e[Te]=rt(s)},mounted(e,{value:t,modifiers:{number:n}}){Qr(e,t,n)},beforeUpdate(e,t,n){e[Te]=rt(n)},updated(e,{value:t,modifiers:{number:n}}){e._assigning||Qr(e,t,n)}};function Qr(e,t,n){const s=e.multiple,r=$(t);if(!(s&&!r&&!Pt(t))){for(let o=0,i=e.options.length;o<i;o++){const l=e.options[o],c=Lt(l);if(s)if(r){const a=typeof c;a==="string"||a==="number"?l.selected=t.includes(n?zt(c):c):l.selected=Hs(t,c)>-1}else l.selected=t.has(c);else if(gt(Lt(l),t)){e.selectedIndex!==o&&(e.selectedIndex=o);return}}!s&&e.selectedIndex!==-1&&(e.selectedIndex=-1)}}function Lt(e){return"_value"in e?e._value:e.value}function Ri(e,t){const n=t?"_trueValue":"_falseValue";return n in e?e[n]:t}const Gu={created(e,t,n){bn(e,t,n,null,"created")},mounted(e,t,n){bn(e,t,n,null,"mounted")},beforeUpdate(e,t,n,s){bn(e,t,n,s,"beforeUpdate")},updated(e,t,n,s){bn(e,t,n,s,"updated")}};function Ea(e,t){switch(e){case"SELECT":return wa;case"TEXTAREA":return Yr;default:switch(t){case"checkbox":return ba;case"radio":return va;default:return Yr}}}function bn(e,t,n,s,r){const i=Ea(e.tagName,n.props&&n.props.type)[r];i&&i(e,t,n,s)}const Ca=["ctrl","shift","alt","meta"],xa={stop:e=>e.stopPropagation(),prevent:e=>e.preventDefault(),self:e=>e.target!==e.currentTarget,ctrl:e=>!e.ctrlKey,shift:e=>!e.shiftKey,alt:e=>!e.altKey,meta:e=>!e.metaKey,left:e=>"button"in e&&e.button!==0,middle:e=>"button"in e&&e.button!==1,right:e=>"button"in e&&e.button!==2,exact:(e,t)=>Ca.some(n=>e[`${n}Key`]&&!t.includes(n))},zu=(e,t)=>{const n=e._withMods||(e._withMods={}),s=t.join(".");return n[s]||(n[s]=(r,...o)=>{for(let i=0;i<t.length;i++){const l=xa[t[i]];if(l&&l(r,t))return}return e(r,...o)})},Sa={esc:"escape",space:" ",up:"arrow-up",left:"arrow-left",right:"arrow-right",down:"arrow-down",delete:"backspace"},Xu=(e,t)=>{const n=e._withKeys||(e._withKeys={}),s=t.join(".");return n[s]||(n[s]=r=>{if(!("key"in r))return;const o=ot(r.key);if(t.some(i=>i===o||Sa[i]===o))return e(r)})},Mi=se({patchProp:fa},Gc);let qt,Zr=!1;function Ta(){return qt||(qt=Tc(Mi))}function Aa(){return qt=Zr?qt:Ac(Mi),Zr=!0,qt}const Yu=(...e)=>{Ta().render(...e)},Ju=(...e)=>{const t=Aa().createApp(...e),{mount:n}=t;return t.mount=s=>{const r=Ma(s);if(r)return n(r,!0,Ra(r))},t};function Ra(e){if(e instanceof SVGElement)return"svg";if(typeof MathMLElement=="function"&&e instanceof MathMLElement)return"mathml"}function Ma(e){return ne(e)?document.querySelector(e):e}const Qu=(e,t)=>{const n=e.__vccOpts||e;for(const[s,r]of t)n[s]=r;return n};var Zu=!1;const Oa="modulepreload",Ia=function(e){return"/VFluent3/"+e},eo={},ef=function(t,n,s){let r=Promise.resolve();if(n&&n.length>0){const o=document.getElementsByTagName("link");r=Promise.all(n.map(i=>{if(i=Ia(i),i in eo)return;eo[i]=!0;const l=i.endsWith(".css"),c=l?'[rel="stylesheet"]':"";if(!!s)for(let h=o.length-1;h>=0;h--){const p=o[h];if(p.href===i&&(!l||p.rel==="stylesheet"))return}else if(document.querySelector(`link[href="${i}"]${c}`))return;const f=document.createElement("link");if(f.rel=l?"stylesheet":Oa,l||(f.as="script",f.crossOrigin=""),f.href=i,document.head.appendChild(f),l)return new Promise((h,p)=>{f.addEventListener("load",h),f.addEventListener("error",()=>p(new Error(`Unable to preload CSS for ${i}`)))})}))}return r.then(()=>t()).catch(o=>{const i=new Event("vite:preloadError",{cancelable:!0});if(i.payload=o,window.dispatchEvent(i),!i.defaultPrevented)throw o})},La=window.__VP_SITE_DATA__;function nr(e){return yo()?(ol(e),!0):!1}function tt(e){return typeof e=="function"?e():Po(e)}const Oi=typeof window<"u"&&typeof document<"u";typeof WorkerGlobalScope<"u"&&globalThis instanceof WorkerGlobalScope;const Pa=Object.prototype.toString,Na=e=>Pa.call(e)==="[object Object]",Gt=()=>{},Is=Fa();function Fa(){var e,t;return Oi&&((e=window==null?void 0:window.navigator)==null?void 0:e.userAgent)&&(/iP(ad|hone|od)/.test(window.navigator.userAgent)||((t=window==null?void 0:window.navigator)==null?void 0:t.maxTouchPoints)>2&&/iPad|Macintosh/.test(window==null?void 0:window.navigator.userAgent))}function $a(e,t){function n(...s){return new Promise((r,o)=>{Promise.resolve(e(()=>t.apply(this,s),{fn:t,thisArg:this,args:s})).then(r).catch(o)})}return n}const Ii=e=>e();function Va(e=Ii){const t=de(!0);function n(){t.value=!1}function s(){t.value=!0}const r=(...o)=>{t.value&&e(...o)};return{isActive:qn(t),pause:n,resume:s,eventFilter:r}}function Ha(e){return e||Ft()}function Li(...e){if(e.length!==1)return Pl(...e);const t=e[0];return typeof t=="function"?qn(Fo(()=>({get:t,set:Gt}))):de(t)}function ja(e,t,n={}){const{eventFilter:s=Ii,...r}=n;return Ue(e,$a(s,t),r)}function ka(e,t,n={}){const{eventFilter:s,...r}=n,{eventFilter:o,pause:i,resume:l,isActive:c}=Va(s);return{stop:ja(e,t,{...r,eventFilter:o}),pause:i,resume:l,isActive:c}}function sr(e,t=!0,n){Ha()?Nt(e,n):t?e():sn(e)}function vt(e){var t;const n=tt(e);return(t=n==null?void 0:n.$el)!=null?t:n}const $e=Oi?window:void 0;function Be(...e){let t,n,s,r;if(typeof e[0]=="string"||Array.isArray(e[0])?([n,s,r]=e,t=$e):[t,n,s,r]=e,!t)return Gt;Array.isArray(n)||(n=[n]),Array.isArray(s)||(s=[s]);const o=[],i=()=>{o.forEach(f=>f()),o.length=0},l=(f,h,p,v)=>(f.addEventListener(h,p,v),()=>f.removeEventListener(h,p,v)),c=Ue(()=>[vt(t),tt(r)],([f,h])=>{if(i(),!f)return;const p=Na(h)?{...h}:h;o.push(...n.flatMap(v=>s.map(M=>l(f,v,M,p))))},{immediate:!0,flush:"post"}),a=()=>{c(),i()};return nr(a),a}let to=!1;function tf(e,t,n={}){const{window:s=$e,ignore:r=[],capture:o=!0,detectIframe:i=!1}=n;if(!s)return Gt;Is&&!to&&(to=!0,Array.from(s.document.body.children).forEach(p=>p.addEventListener("click",Gt)),s.document.documentElement.addEventListener("click",Gt));let l=!0;const c=p=>r.some(v=>{if(typeof v=="string")return Array.from(s.document.querySelectorAll(v)).some(M=>M===p.target||p.composedPath().includes(M));{const M=vt(v);return M&&(p.target===M||p.composedPath().includes(M))}}),f=[Be(s,"click",p=>{const v=vt(e);if(!(!v||v===p.target||p.composedPath().includes(v))){if(p.detail===0&&(l=!c(p)),!l){l=!0;return}t(p)}},{passive:!0,capture:o}),Be(s,"pointerdown",p=>{const v=vt(e);l=!c(p)&&!!(v&&!p.composedPath().includes(v))},{passive:!0}),i&&Be(s,"blur",p=>{setTimeout(()=>{var v;const M=vt(e);((v=s.document.activeElement)==null?void 0:v.tagName)==="IFRAME"&&!(M!=null&&M.contains(s.document.activeElement))&&t(p)},0)})].filter(Boolean);return()=>f.forEach(p=>p())}function Da(e){return typeof e=="function"?e:typeof e=="string"?t=>t.key===e:Array.isArray(e)?t=>e.includes(t.key):()=>!0}function nf(...e){let t,n,s={};e.length===3?(t=e[0],n=e[1],s=e[2]):e.length===2?typeof e[1]=="object"?(t=!0,n=e[0],s=e[1]):(t=e[0],n=e[1]):(t=!0,n=e[0]);const{target:r=$e,eventName:o="keydown",passive:i=!1,dedupe:l=!1}=s,c=Da(t);return Be(r,o,f=>{f.repeat&&tt(l)||c(f)&&n(f)},i)}function Ua(){const e=de(!1),t=Ft();return t&&Nt(()=>{e.value=!0},t),e}function Ba(e){const t=Ua();return re(()=>(t.value,!!e()))}function Pi(e,t={}){const{window:n=$e}=t,s=Ba(()=>n&&"matchMedia"in n&&typeof n.matchMedia=="function");let r;const o=de(!1),i=a=>{o.value=a.matches},l=()=>{r&&("removeEventListener"in r?r.removeEventListener("change",i):r.removeListener(i))},c=Bo(()=>{s.value&&(l(),r=n.matchMedia(tt(e)),"addEventListener"in r?r.addEventListener("change",i):r.addListener(i),o.value=r.matches)});return nr(()=>{c(),l(),r=void 0}),o}const vn=typeof globalThis<"u"?globalThis:typeof window<"u"?window:typeof global<"u"?global:typeof self<"u"?self:{},wn="__vueuse_ssr_handlers__",Ka=Wa();function Wa(){return wn in vn||(vn[wn]=vn[wn]||{}),vn[wn]}function Ni(e,t){return Ka[e]||t}function qa(e){return e==null?"any":e instanceof Set?"set":e instanceof Map?"map":e instanceof Date?"date":typeof e=="boolean"?"boolean":typeof e=="string"?"string":typeof e=="object"?"object":Number.isNaN(e)?"any":"number"}const Ga={boolean:{read:e=>e==="true",write:e=>String(e)},object:{read:e=>JSON.parse(e),write:e=>JSON.stringify(e)},number:{read:e=>Number.parseFloat(e),write:e=>String(e)},any:{read:e=>e,write:e=>String(e)},string:{read:e=>e,write:e=>String(e)},map:{read:e=>new Map(JSON.parse(e)),write:e=>JSON.stringify(Array.from(e.entries()))},set:{read:e=>new Set(JSON.parse(e)),write:e=>JSON.stringify(Array.from(e))},date:{read:e=>new Date(e),write:e=>e.toISOString()}},no="vueuse-storage";function za(e,t,n,s={}){var r;const{flush:o="pre",deep:i=!0,listenToStorageChanges:l=!0,writeDefaults:c=!0,mergeDefaults:a=!1,shallow:f,window:h=$e,eventFilter:p,onError:v=w=>{console.error(w)},initOnMounted:M}=s,P=(f?Io:de)(typeof t=="function"?t():t);if(!n)try{n=Ni("getDefaultStorage",()=>{var w;return(w=$e)==null?void 0:w.localStorage})()}catch(w){v(w)}if(!n)return P;const U=tt(t),W=qa(U),J=(r=s.serializer)!=null?r:Ga[W],{pause:g,resume:y}=ka(P,()=>R(P.value),{flush:o,deep:i,eventFilter:p});h&&l&&sr(()=>{Be(h,"storage",S),Be(h,no,F),M&&S()}),M||S();function I(w,H){h&&h.dispatchEvent(new CustomEvent(no,{detail:{key:e,oldValue:w,newValue:H,storageArea:n}}))}function R(w){try{const H=n.getItem(e);if(w==null)I(H,null),n.removeItem(e);else{const T=J.write(w);H!==T&&(n.setItem(e,T),I(H,T))}}catch(H){v(H)}}function N(w){const H=w?w.newValue:n.getItem(e);if(H==null)return c&&U!=null&&n.setItem(e,J.write(U)),U;if(!w&&a){const T=J.read(H);return typeof a=="function"?a(T,U):W==="object"&&!Array.isArray(T)?{...U,...T}:T}else return typeof H!="string"?H:J.read(H)}function S(w){if(!(w&&w.storageArea!==n)){if(w&&w.key==null){P.value=U;return}if(!(w&&w.key!==e)){g();try{(w==null?void 0:w.newValue)!==J.write(P.value)&&(P.value=N(w))}catch(H){v(H)}finally{w?sn(y):y()}}}}function F(w){S(w.detail)}return P}function Fi(e){return Pi("(prefers-color-scheme: dark)",e)}function Xa(e={}){const{selector:t="html",attribute:n="class",initialValue:s="auto",window:r=$e,storage:o,storageKey:i="vueuse-color-scheme",listenToStorageChanges:l=!0,storageRef:c,emitAuto:a,disableTransition:f=!0}=e,h={auto:"",light:"light",dark:"dark",...e.modes||{}},p=Fi({window:r}),v=re(()=>p.value?"dark":"light"),M=c||(i==null?Li(s):za(i,s,o,{window:r,listenToStorageChanges:l})),P=re(()=>M.value==="auto"?v.value:M.value),U=Ni("updateHTMLAttrs",(y,I,R)=>{const N=typeof y=="string"?r==null?void 0:r.document.querySelector(y):vt(y);if(!N)return;let S;if(f&&(S=r.document.createElement("style"),S.appendChild(document.createTextNode("*,*::before,*::after{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}")),r.document.head.appendChild(S)),I==="class"){const F=R.split(/\s/g);Object.values(h).flatMap(w=>(w||"").split(/\s/g)).filter(Boolean).forEach(w=>{F.includes(w)?N.classList.add(w):N.classList.remove(w)})}else N.setAttribute(I,R);f&&(r.getComputedStyle(S).opacity,document.head.removeChild(S))});function W(y){var I;U(t,n,(I=h[y])!=null?I:y)}function J(y){e.onChanged?e.onChanged(y,W):W(y)}Ue(P,J,{flush:"post",immediate:!0}),sr(()=>J(P.value));const g=re({get(){return a?M.value:P.value},set(y){M.value=y}});try{return Object.assign(g,{store:M,system:v,state:P})}catch{return g}}function Ya(e={}){const{valueDark:t="dark",valueLight:n="",window:s=$e}=e,r=Xa({...e,onChanged:(l,c)=>{var a;e.onChanged?(a=e.onChanged)==null||a.call(e,l==="dark",c,l):c(l)},modes:{dark:t,light:n}}),o=re(()=>r.system?r.system.value:Fi({window:s}).value?"dark":"light");return re({get(){return r.value==="dark"},set(l){const c=l?"dark":"light";o.value===c?r.value="auto":r.value=c}})}function hs(e){return typeof Window<"u"&&e instanceof Window?e.document.documentElement:typeof Document<"u"&&e instanceof Document?e.documentElement:e}function $i(e){const t=window.getComputedStyle(e);if(t.overflowX==="scroll"||t.overflowY==="scroll"||t.overflowX==="auto"&&e.clientWidth<e.scrollWidth||t.overflowY==="auto"&&e.clientHeight<e.scrollHeight)return!0;{const n=e.parentNode;return!n||n.tagName==="BODY"?!1:$i(n)}}function Ja(e){const t=e||window.event,n=t.target;return $i(n)?!1:t.touches.length>1?!0:(t.preventDefault&&t.preventDefault(),!1)}const En=new WeakMap;function sf(e,t=!1){const n=de(t);let s=null;Ue(Li(e),i=>{const l=hs(tt(i));if(l){const c=l;En.get(c)||En.set(c,c.style.overflow),n.value&&(c.style.overflow="hidden")}},{immediate:!0});const r=()=>{const i=hs(tt(e));!i||n.value||(Is&&(s=Be(i,"touchmove",l=>{Ja(l)},{passive:!1})),i.style.overflow="hidden",n.value=!0)},o=()=>{var i;const l=hs(tt(e));!l||!n.value||(Is&&(s==null||s()),l.style.overflow=(i=En.get(l))!=null?i:"",En.delete(l),n.value=!1)};return nr(o),re({get(){return n.value},set(i){i?r():o()}})}function rf(e={}){const{window:t=$e,behavior:n="auto"}=e;if(!t)return{x:de(0),y:de(0)};const s=de(t.scrollX),r=de(t.scrollY),o=re({get(){return s.value},set(l){scrollTo({left:l,behavior:n})}}),i=re({get(){return r.value},set(l){scrollTo({top:l,behavior:n})}});return Be(t,"scroll",()=>{s.value=t.scrollX,r.value=t.scrollY},{capture:!1,passive:!0}),{x:o,y:i}}function of(e={}){const{window:t=$e,initialWidth:n=Number.POSITIVE_INFINITY,initialHeight:s=Number.POSITIVE_INFINITY,listenOrientation:r=!0,includeScrollbar:o=!0}=e,i=de(n),l=de(s),c=()=>{t&&(o?(i.value=t.innerWidth,l.value=t.innerHeight):(i.value=t.document.documentElement.clientWidth,l.value=t.document.documentElement.clientHeight))};if(c(),sr(c),Be("resize",c,{passive:!0}),r){const a=Pi("(orientation: portrait)");Ue(a,()=>c())}return{width:i,height:l}}var ps={BASE_URL:"/VFluent3/",MODE:"production",DEV:!1,PROD:!0,SSR:!1},gs={};const Vi=/^(?:[a-z]+:|\/\/)/i,Qa="vitepress-theme-appearance",Za=/#.*$/,eu=/[?#].*$/,tu=/(?:(^|\/)index)?\.(?:md|html)$/,Ce=typeof document<"u",Hi={relativePath:"",filePath:"",title:"404",description:"Not Found",headers:[],frontmatter:{sidebar:!1,layout:"page"},lastUpdated:0,isNotFound:!0};function nu(e,t,n=!1){if(t===void 0)return!1;if(e=so(`/${e}`),n)return new RegExp(t).test(e);if(so(t)!==e)return!1;const s=t.match(Za);return s?(Ce?location.hash:"")===s[0]:!0}function so(e){return decodeURI(e).replace(eu,"").replace(tu,"$1")}function su(e){return Vi.test(e)}function ru(e,t){var s,r,o,i,l,c,a;const n=Object.keys(e.locales).find(f=>f!=="root"&&!su(f)&&nu(t,`/${f}/`,!0))||"root";return Object.assign({},e,{localeIndex:n,lang:((s=e.locales[n])==null?void 0:s.lang)??e.lang,dir:((r=e.locales[n])==null?void 0:r.dir)??e.dir,title:((o=e.locales[n])==null?void 0:o.title)??e.title,titleTemplate:((i=e.locales[n])==null?void 0:i.titleTemplate)??e.titleTemplate,description:((l=e.locales[n])==null?void 0:l.description)??e.description,head:ki(e.head,((c=e.locales[n])==null?void 0:c.head)??[]),themeConfig:{...e.themeConfig,...(a=e.locales[n])==null?void 0:a.themeConfig}})}function ji(e,t){const n=t.title||e.title,s=t.titleTemplate??e.titleTemplate;if(typeof s=="string"&&s.includes(":title"))return s.replace(/:title/g,n);const r=ou(e.title,s);return n===r.slice(3)?n:`${n}${r}`}function ou(e,t){return t===!1?"":t===!0||t===void 0?` | ${e}`:e===t?"":` | ${t}`}function iu(e,t){const[n,s]=t;if(n!=="meta")return!1;const r=Object.entries(s)[0];return r==null?!1:e.some(([o,i])=>o===n&&i[r[0]]===r[1])}function ki(e,t){return[...e.filter(n=>!iu(t,n)),...t]}const lu=/[\u0000-\u001F"#$&*+,:;<=>?[\]^`{|}\u007F]/g,cu=/^[a-z]:/i;function ro(e){const t=cu.exec(e),n=t?t[0]:"";return n+e.slice(n.length).replace(lu,"_").replace(/(^|\/)_+(?=[^/]*$)/,"$1")}const ms=new Set;function au(e){if(ms.size===0){const n=typeof process=="object"&&(gs==null?void 0:gs.VITE_EXTRA_EXTENSIONS)||(ps==null?void 0:ps.VITE_EXTRA_EXTENSIONS)||"";("3g2,3gp,aac,ai,apng,au,avif,bin,bmp,cer,class,conf,crl,css,csv,dll,doc,eps,epub,exe,gif,gz,ics,ief,jar,jpe,jpeg,jpg,js,json,jsonld,m4a,man,mid,midi,mjs,mov,mp2,mp3,mp4,mpe,mpeg,mpg,mpp,oga,ogg,ogv,ogx,opus,otf,p10,p7c,p7m,p7s,pdf,png,ps,qt,roff,rtf,rtx,ser,svg,t,tif,tiff,tr,ts,tsv,ttf,txt,vtt,wav,weba,webm,webp,woff,woff2,xhtml,xml,yaml,yml,zip"+(n&&typeof n=="string"?","+n:"")).split(",").forEach(s=>ms.add(s))}const t=e.split(".").pop();return t==null||!ms.has(t.toLowerCase())}const uu=Symbol(),pt=Io(La);function lf(e){const t=re(()=>ru(pt.value,e.data.relativePath)),n=t.value.appearance,s=n==="force-dark"?de(!0):n?Ya({storageKey:Qa,initialValue:()=>typeof n=="string"?n:"auto",...typeof n=="object"?n:{}}):de(!1);return{site:t,theme:re(()=>t.value.themeConfig),page:re(()=>e.data),frontmatter:re(()=>e.data.frontmatter),params:re(()=>e.data.params),lang:re(()=>t.value.lang),dir:re(()=>e.data.frontmatter.dir||t.value.dir),localeIndex:re(()=>t.value.localeIndex||"root"),title:re(()=>ji(t.value,e.data)),description:re(()=>e.data.description||t.value.description),isDark:s}}function fu(){const e=Rt(uu);if(!e)throw new Error("vitepress data not properly injected in app");return e}function du(e,t){return`${e}${t}`.replace(/\/+/g,"/")}function oo(e){return Vi.test(e)||!e.startsWith("/")?e:du(pt.value.base,e)}function hu(e){let t=e.replace(/\.html$/,"");if(t=decodeURIComponent(t),t=t.replace(/\/$/,"/index"),Ce){const n="/VFluent3/";t=ro(t.slice(n.length).replace(/\//g,"_")||"index")+".md";let s=__VP_HASH_MAP__[t.toLowerCase()];if(s||(t=t.endsWith("_index.md")?t.slice(0,-9)+".md":t.slice(0,-3)+"_index.md",s=__VP_HASH_MAP__[t.toLowerCase()]),!s)return null;t=`${n}assets/${t}.${s}.js`}else t=`./${ro(t.slice(1).replace(/\//g,"_"))}.md.js`;return t}let Rn=[];function cf(e){Rn.push(e),Qn(()=>{Rn=Rn.filter(t=>t!==e)})}function pu(){let e=pt.value.scrollOffset,t=0,n=24;if(typeof e=="object"&&"padding"in e&&(n=e.padding,e=e.selector),typeof e=="number")t=e;else if(typeof e=="string")t=io(e,n);else if(Array.isArray(e))for(const s of e){const r=io(s,n);if(r){t=r;break}}return t}function io(e,t){const n=document.querySelector(e);if(!n)return 0;const s=n.getBoundingClientRect().bottom;return s<0?0:s+t}const gu=Symbol(),rr="http://a.com",mu=()=>({path:"/",component:null,data:Hi});function af(e,t){const n=Wn(mu()),s={route:n,go:r};async function r(l=Ce?location.href:"/"){var c,a;l=Dn(l),await((c=s.onBeforeRouteChange)==null?void 0:c.call(s,l))!==!1&&(co(l),await i(l),await((a=s.onAfterRouteChanged)==null?void 0:a.call(s,l)))}let o=null;async function i(l,c=0,a=!1){var p;if(await((p=s.onBeforePageLoad)==null?void 0:p.call(s,l))===!1)return;const f=new URL(l,rr),h=o=f.pathname;try{let v=await e(h);if(!v)throw new Error(`Page not found: ${h}`);if(o===h){o=null;const{default:M,__pageData:P}=v;if(!M)throw new Error(`Invalid route component: ${M}`);n.path=Ce?h:oo(h),n.component=kt(M),n.data=kt(P),Ce&&sn(()=>{let U=pt.value.base+P.relativePath.replace(/(?:(^|\/)index)?\.md$/,"$1");if(!pt.value.cleanUrls&&!U.endsWith("/")&&(U+=".html"),U!==f.pathname&&(f.pathname=U,l=U+f.search+f.hash,history.replaceState(null,"",l)),f.hash&&!c){let W=null;try{W=document.getElementById(decodeURIComponent(f.hash).slice(1))}catch(J){console.warn(J)}if(W){lo(W,f.hash);return}}window.scrollTo(0,c)})}}catch(v){if(!/fetch|Page not found/.test(v.message)&&!/^\/404(\.html|\/)?$/.test(l)&&console.error(v),!a)try{const M=await fetch(pt.value.base+"hashmap.json");window.__VP_HASH_MAP__=await M.json(),await i(l,c,!0);return}catch{}o===h&&(o=null,n.path=Ce?h:oo(h),n.component=t?kt(t):null,n.data=Hi)}}return Ce&&(window.addEventListener("click",l=>{if(l.target.closest("button"))return;const a=l.target.closest("a");if(a&&!a.closest(".vp-raw")&&(a instanceof SVGElement||!a.download)){const{target:f}=a,{href:h,origin:p,pathname:v,hash:M,search:P}=new URL(a.href instanceof SVGAnimatedString?a.href.animVal:a.href,a.baseURI),U=new URL(window.location.href);!l.ctrlKey&&!l.shiftKey&&!l.altKey&&!l.metaKey&&!f&&p===U.origin&&au(v)&&(l.preventDefault(),v===U.pathname&&P===U.search?(M!==U.hash&&(history.pushState(null,"",M),window.dispatchEvent(new Event("hashchange"))),M?lo(a,M,a.classList.contains("header-anchor")):(co(h,!1),window.scrollTo(0,0))):r(h))}},{capture:!0}),window.addEventListener("popstate",async l=>{var c;await i(Dn(location.href),l.state&&l.state.scrollPosition||0),(c=s.onAfterRouteChanged)==null||c.call(s,location.href)}),window.addEventListener("hashchange",l=>{l.preventDefault()})),s}function yu(){const e=Rt(gu);if(!e)throw new Error("useRouter() is called without provider.");return e}function Di(){return yu().route}function lo(e,t,n=!1){let s=null;try{s=e.classList.contains("header-anchor")?e:document.getElementById(decodeURIComponent(t).slice(1))}catch(r){console.warn(r)}if(s){let r=function(){!n||Math.abs(i-window.scrollY)>window.innerHeight?window.scrollTo(0,i):window.scrollTo({left:0,top:i,behavior:"smooth"})};const o=parseInt(window.getComputedStyle(s).paddingTop,10),i=window.scrollY+s.getBoundingClientRect().top-pu()+o;requestAnimationFrame(r)}}function co(e,t=!0){if(Ce&&Dn(e)!==Dn(location.href)){const n=location.hash;history.replaceState({scrollPosition:window.scrollY},document.title),history.pushState(null,"",e),t&&new URL(e,rr).hash!==n&&window.dispatchEvent(new Event("hashchange"))}}function Dn(e){const t=new URL(e,rr);return t.pathname=t.pathname.replace(/(^|\/)index(\.html)?$/,"$1"),pt.value.cleanUrls?t.pathname=t.pathname.replace(/\.html$/,""):!t.pathname.endsWith("/")&&!t.pathname.endsWith(".html")&&(t.pathname+=".html"),t.pathname+t.search+t.hash}const ys=()=>Rn.forEach(e=>e()),uf=zo({name:"VitePressContent",props:{as:{type:[Object,String],default:"div"}},setup(e){const t=Di(),{site:n}=fu();return()=>Os(e.as,n.value.contentProps??{style:{position:"relative"}},[t.component?Os(t.component,{onVnodeMounted:ys,onVnodeUpdated:ys,onVnodeUnmounted:ys}):"404 Page Not Found"])}}),ff=zo({setup(e,{slots:t}){const n=de(!1);return Nt(()=>{n.value=!0}),()=>n.value&&t.default?t.default():null}});function df(){Ce&&window.addEventListener("click",e=>{var n;const t=e.target;if(t.matches(".vp-code-group input")){const s=(n=t.parentElement)==null?void 0:n.parentElement;if(!s)return;const r=Array.from(s.querySelectorAll("input")).indexOf(t);if(r<0)return;const o=s.querySelector(".blocks");if(!o)return;const i=Array.from(o.children).find(a=>a.classList.contains("active"));if(!i)return;const l=o.children[r];if(!l||i===l)return;i.classList.remove("active"),l.classList.add("active");const c=s==null?void 0:s.querySelector(`label[for="${t.id}"]`);c==null||c.scrollIntoView({block:"nearest"})}})}function hf(){if(Ce){const e=new WeakMap;window.addEventListener("click",t=>{var s;const n=t.target;if(n.matches('div[class*="language-"] > button.copy')){const r=n.parentElement,o=(s=n.nextElementSibling)==null?void 0:s.nextElementSibling;if(!r||!o)return;const i=/language-(shellscript|shell|bash|sh|zsh)/.test(r.className),l=[".vp-copy-ignore",".diff.remove"],c=o.cloneNode(!0);c.querySelectorAll(l.join(",")).forEach(f=>f.remove());let a=c.textContent||"";i&&(a=a.replace(/^ *(\$|>) /gm,"").trim()),_u(a).then(()=>{n.classList.add("copied"),clearTimeout(e.get(n));const f=setTimeout(()=>{n.classList.remove("copied"),n.blur(),e.delete(n)},2e3);e.set(n,f)})}})}}async function _u(e){try{return navigator.clipboard.writeText(e)}catch{const t=document.createElement("textarea"),n=document.activeElement;t.value=e,t.setAttribute("readonly",""),t.style.contain="strict",t.style.position="absolute",t.style.left="-9999px",t.style.fontSize="12pt";const s=document.getSelection(),r=s?s.rangeCount>0&&s.getRangeAt(0):null;document.body.appendChild(t),t.select(),t.selectionStart=0,t.selectionEnd=e.length,document.execCommand("copy"),document.body.removeChild(t),r&&(s.removeAllRanges(),s.addRange(r)),n&&n.focus()}}function pf(e,t){let n=!0,s=[];const r=o=>{if(n){n=!1,o.forEach(l=>{const c=_s(l);for(const a of document.head.children)if(a.isEqualNode(c)){s.push(a);return}});return}const i=o.map(_s);s.forEach((l,c)=>{const a=i.findIndex(f=>f==null?void 0:f.isEqualNode(l??null));a!==-1?delete i[a]:(l==null||l.remove(),delete s[c])}),i.forEach(l=>l&&document.head.appendChild(l)),s=[...s,...i].filter(Boolean)};Bo(()=>{const o=e.data,i=t.value,l=o&&o.description,c=o&&o.frontmatter.head||[],a=ji(i,o);a!==document.title&&(document.title=a);const f=l||i.description;let h=document.querySelector("meta[name=description]");h?h.getAttribute("content")!==f&&h.setAttribute("content",f):_s(["meta",{name:"description",content:f}]),r(ki(i.head,vu(c)))})}function _s([e,t,n]){const s=document.createElement(e);for(const r in t)s.setAttribute(r,t[r]);return n&&(s.innerHTML=n),e==="script"&&!t.async&&(s.async=!1),s}function bu(e){return e[0]==="meta"&&e[1]&&e[1].name==="description"}function vu(e){return e.filter(t=>!bu(t))}const bs=new Set,Ui=()=>document.createElement("link"),wu=e=>{const t=Ui();t.rel="prefetch",t.href=e,document.head.appendChild(t)},Eu=e=>{const t=new XMLHttpRequest;t.open("GET",e,t.withCredentials=!0),t.send()};let Cn;const Cu=Ce&&(Cn=Ui())&&Cn.relList&&Cn.relList.supports&&Cn.relList.supports("prefetch")?wu:Eu;function gf(){if(!Ce||!window.IntersectionObserver)return;let e;if((e=navigator.connection)&&(e.saveData||/2g/.test(e.effectiveType)))return;const t=window.requestIdleCallback||setTimeout;let n=null;const s=()=>{n&&n.disconnect(),n=new IntersectionObserver(o=>{o.forEach(i=>{if(i.isIntersecting){const l=i.target;n.unobserve(l);const{pathname:c}=l;if(!bs.has(c)){bs.add(c);const a=hu(c);a&&Cu(a)}}})}),t(()=>{document.querySelectorAll("#app a").forEach(o=>{const{hostname:i,pathname:l}=new URL(o.href instanceof SVGAnimatedString?o.href.animVal:o.href,o.baseURI),c=l.match(/\.\w+$/);c&&c[0]!==".html"||o.target!=="_blank"&&i===location.hostname&&(l!==location.pathname?n.observe(o):bs.add(l))})})};Nt(s);const r=Di();Ue(()=>r.path,s),Qn(()=>{n&&n.disconnect()})}export{Ou as $,Bu as A,fu as B,su as C,au as D,oo as E,Ce as F,Nt as G,pi as H,Po as I,Au as J,Ru as K,nu as L,Pi as M,Bo as N,Qn as O,Lu as P,Yo as Q,pu as R,Mu as S,bi as T,ge as U,Nu as V,Io as W,cf as X,ae as Y,Vi as Z,Qu as _,Wn as a,Di as a0,Fc as a1,of as a2,$s as a3,tf as a4,nf as a5,rf as a6,qn as a7,sf as a8,yc as a9,hu as aA,ef as aB,gf as aC,hf as aD,df as aE,$u as aa,Xu as ab,zu as ac,Vu as ad,Pu as ae,Wu as af,Yr as ag,qu as ah,Hu as ai,Ku as aj,Jo as ak,ku as al,Ft as am,Iu as an,Yu as ao,Gu as ap,Uu as aq,pf as ar,gu as as,lf as at,uu as au,uf as av,ff as aw,pt as ax,Ju as ay,af as az,he as b,re as c,xt as d,Su as e,Zu as f,yo as g,ju as h,Rt as i,Tu as j,zo as k,Os as l,kt as m,sn as n,ol as o,ui as p,Du as q,de as r,Fu as s,X as t,gi as u,xu as v,Ue as w,Vs as x,di as y,kl as z};
diff --git a/assets/chunks/index.9dba9c16.js b/assets/chunks/index.9dba9c16.js
deleted file mode 100644
index c290533..0000000
--- a/assets/chunks/index.9dba9c16.js
+++ /dev/null
@@ -1 +0,0 @@
-import{f as o,g as i,h as u,j as c}from"../app.d60fa8c3.js";function r(){const e=o("light");let t;const n=()=>{document!==void 0&&document.documentElement.classList.contains("dark")?e.value="dark":e.value="light"};return i(()=>{n(),t=new MutationObserver(n),t.observe(document.documentElement,{attributes:!0,attributeFilter:["class"]})}),u(()=>{t==null||t.disconnect()}),{theme:e}}function l(e,t,n="correct"){c(t)||(t=JSON.stringify(t,null,2)),e!==void 0&&e({status:n,message:t})}export{l as T,r as u};
diff --git a/assets/chunks/index.CvzShnhD.js b/assets/chunks/index.CvzShnhD.js
new file mode 100644
index 0000000..14086ae
--- /dev/null
+++ b/assets/chunks/index.CvzShnhD.js
@@ -0,0 +1 @@
+import"./theme.CgqFBnN_.js";import{r as o,G as s,ak as u}from"./framework.DvIFzl91.js";function i(){const t=o("light");let e;const n=()=>{document!==void 0&&document.documentElement.classList.contains("dark")?t.value="dark":t.value="light"};return s(()=>{n(),e=new MutationObserver(n),e.observe(document.documentElement,{attributes:!0,attributeFilter:["class"]})}),u(()=>{e==null||e.disconnect()}),{theme:t}}export{i as u};
diff --git a/assets/chunks/theme.CgqFBnN_.js b/assets/chunks/theme.CgqFBnN_.js
new file mode 100644
index 0000000..7314b9e
--- /dev/null
+++ b/assets/chunks/theme.CgqFBnN_.js
@@ -0,0 +1,21 @@
+var Io=Object.defineProperty;var Lo=(i,e,t)=>e in i?Io(i,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):i[e]=t;var Tt=(i,e,t)=>(Lo(i,typeof e!="symbol"?e+"":e,t),t);import{c as Q,i as vi,e as zn,r as U,m as An,w as et,a as $o,b as De,d as On,t as Po,h as Mo,f as Eo,n as Pt,g as Do,o as Bo,j as Ro,k as j,l as Di,p as f,q as g,s as w,u as ue,v as H,x as k,y as G,z as x,A as O,T as fe,_ as z,B as Nn,C as Fo,D as zo,E as Gs,F as Zt,G as at,H as h,I as y,J as Te,K as Ve,L as Bt,M as ws,N as Wi,O as Gi,P as Hn,Q as Ao,R as Oo,S as K,U as Y,V as Z,W as Wn,X as Ui,Y as L,Z as Gn,$ as Ut,a0 as Yi,a1 as $i,a2 as No,a3 as V,a4 as Ho,a5 as Wo,a6 as Un,a7 as Go,a8 as Yn,a9 as qn,aa as Uo,ab as Us,ac as Lt,ad as Xn,ae as P,af as R,ag as Kn,ah as qi,ai as Yo,aj as qo,ak as Xo,al as Ko,am as jo,an as jn,ao as Ht,ap as Jn}from"./framework.DvIFzl91.js";function pt(i){return typeof i=="number"}function vt(i){return typeof i=="string"}function ai(i){return typeof i=="function"}function Qn(i){return typeof i=="boolean"}function gn(i){return Array.isArray(i)}class ks{constructor(){Tt(this,"_constructorFunctions");this._constructorFunctions=[]}add(e,t){return this._constructorFunctions.push({name:e,value:t}),this}computed(){return{cls:Q(()=>{const t={};for(let s of this._constructorFunctions){let n;vt(s.name)?n=s.name:ai(s.name)&&(n=s.name());let r;Qn(s.value)?r=s.value:ai(s.value)?r=s.value():s.value==null&&(r=!0),n!==void 0&&r!==void 0&&(t[n]=r)}return t})}}}class Zn{constructor(){Tt(this,"_constructorFunctions");this._constructorFunctions=[]}add(e,t,s){return this._constructorFunctions.push({name:e,value:t,condition:s}),this}computed(){return{style:Q(()=>{const t={};for(let s of this._constructorFunctions){if(s.condition!==void 0){if(Qn(s.condition)&&s.condition===!1)continue;if(ai(s.condition)&&s.condition()===!1)continue}let n;vt(s.name)?n=s.name:ai(s.name)&&(n=s.name());let r;vt(s.value)?r=s.value:ai(s.value)&&(r=s.value()),vt(n)&&vt(r)&&(t[n]=r)}return t})}}}/*!
+ * pinia v2.1.7
+ * (c) 2023 Eduardo San Martin Morote
+ * @license MIT
+ */let er;const Xi=i=>er=i,tr=Symbol();function Cs(i){return i&&typeof i=="object"&&Object.prototype.toString.call(i)==="[object Object]"&&typeof i.toJSON!="function"}var li;(function(i){i.direct="direct",i.patchObject="patch object",i.patchFunction="patch function"})(li||(li={}));function Jo(){const i=zn(!0),e=i.run(()=>U({}));let t=[],s=[];const n=An({install(r){Xi(n),n._a=r,r.provide(tr,n),r.config.globalProperties.$pinia=n,s.forEach(o=>t.push(o)),s=[]},use(r){return!this._a&&!Eo?s.push(r):t.push(r),this},_p:t,_a:null,_e:i,_s:new Map,state:e});return n}const ir=()=>{};function pn(i,e,t,s=ir){i.push(e);const n=()=>{const r=i.indexOf(e);r>-1&&(i.splice(r,1),s())};return!t&&Do()&&Bo(n),n}function Ot(i,...e){i.slice().forEach(t=>{t(...e)})}const Qo=i=>i();function xs(i,e){i instanceof Map&&e instanceof Map&&e.forEach((t,s)=>i.set(s,t)),i instanceof Set&&e instanceof Set&&e.forEach(i.add,i);for(const t in e){if(!e.hasOwnProperty(t))continue;const s=e[t],n=i[t];Cs(n)&&Cs(s)&&i.hasOwnProperty(t)&&!De(s)&&!On(s)?i[t]=xs(n,s):i[t]=s}return i}const Zo=Symbol();function ea(i){return!Cs(i)||!i.hasOwnProperty(Zo)}const{assign:mt}=Object;function ta(i){return!!(De(i)&&i.effect)}function ia(i,e,t,s){const{state:n,actions:r,getters:o}=e,a=t.state.value[i];let l;function u(){a||(t.state.value[i]=n?n():{});const d=Ro(t.state.value[i]);return mt(d,r,Object.keys(o||{}).reduce((c,m)=>(c[m]=An(Q(()=>{Xi(t);const p=t._s.get(i);return o[m].call(p,p)})),c),{}))}return l=sr(i,u,e,t,s,!0),l}function sr(i,e,t={},s,n,r){let o;const a=mt({actions:{}},t),l={deep:!0};let u,d,c=[],m=[],p;const v=s.state.value[i];!r&&!v&&(s.state.value[i]={}),U({});let _;function b(D){let F;u=d=!1,typeof D=="function"?(D(s.state.value[i]),F={type:li.patchFunction,storeId:i,events:p}):(xs(s.state.value[i],D),F={type:li.patchObject,payload:D,storeId:i,events:p});const M=_=Symbol();Pt().then(()=>{_===M&&(u=!0)}),d=!0,Ot(c,F,s.state.value[i])}const T=r?function(){const{state:F}=t,M=F?F():{};this.$patch(B=>{mt(B,M)})}:ir;function S(){o.stop(),c=[],m=[],s._s.delete(i)}function $(D,F){return function(){Xi(s);const M=Array.from(arguments),B=[],J=[];function oe(ne){B.push(ne)}function N(ne){J.push(ne)}Ot(m,{args:M,name:D,store:E,after:oe,onError:N});let re;try{re=F.apply(this&&this.$id===i?this:E,M)}catch(ne){throw Ot(J,ne),ne}return re instanceof Promise?re.then(ne=>(Ot(B,ne),ne)).catch(ne=>(Ot(J,ne),Promise.reject(ne))):(Ot(B,re),re)}}const I={_p:s,$id:i,$onAction:pn.bind(null,m),$patch:b,$reset:T,$subscribe(D,F={}){const M=pn(c,D,F.detached,()=>B()),B=o.run(()=>et(()=>s.state.value[i],J=>{(F.flush==="sync"?d:u)&&D({storeId:i,type:li.direct,events:p},J)},mt({},l,F)));return M},$dispose:S},E=$o(I);s._s.set(i,E);const A=(s._a&&s._a.runWithContext||Qo)(()=>s._e.run(()=>(o=zn()).run(e)));for(const D in A){const F=A[D];if(De(F)&&!ta(F)||On(F))r||(v&&ea(F)&&(De(F)?F.value=v[D]:xs(F,v[D])),s.state.value[i][D]=F);else if(typeof F=="function"){const M=$(D,F);A[D]=M,a.actions[D]=F}}return mt(E,A),mt(Po(E),A),Object.defineProperty(E,"$state",{get:()=>s.state.value[i],set:D=>{b(F=>{mt(F,D)})}}),s._p.forEach(D=>{mt(E,o.run(()=>D({store:E,app:s._a,pinia:s,options:a})))}),v&&r&&t.hydrate&&t.hydrate(E.$state,v),u=!0,d=!0,E}function Ys(i,e,t){let s,n;const r=typeof e=="function";typeof i=="string"?(s=i,n=r?t:e):(n=i,s=i.id);function o(a,l){const u=Mo();return a=a||(u?vi(tr,null):null),a&&Xi(a),a=er,a._s.has(s)||(r?sr(s,e,n,a):ia(s,n,a)),a._s.get(s)}return o.$id=s,o}const qs=Ys("FvConfig",{state:()=>({theme:"light",variables:{}}),actions:{changeTheme(i){i?this.theme=i:this.theme=this.theme==="light"?"dark":"light"},refreshVariables(){if(document!==void 0){const i=Array.from(document.styleSheets).map(e=>Array.from(e.cssRules).map(t=>t.selectorText===":root"?t.cssText.split("{")[1].split("}")[0].split(";").filter(s=>s.trim().startsWith("--fv")).map(s=>{const[n,r]=s.split(":").map(o=>o.trim());return{name:n,value:r}}):[]).filter(t=>t.length>0)).filter(e=>e.length>0).flat(2);this.variables={};for(const e of i)this.variables[e.name]=e.value}}}});function q(i){const e=qs();return{theme:Q(()=>i.theme==="global"&&i.theme!==void 0?e.theme:i.theme)}}function sa(i,e){if(e==null||i===void 0||i===null)return!0;if(i===e||gn(e)&&e.findIndex(t=>t==i)!==-1)return!1;for(;i!==null&&i!==document.body;)if(i=i.parentElement,i===e||gn(e)&&e.findIndex(t=>t==i)!==-1)return!1;return!0}function is(i){const{display:e,visibility:t,transition:s,animation:n}=i.style;return i.style.display="initial",i.style.visibility="hidden",i.style.transition="none",i.style.animation="none",{display:e,visibility:t,transition:s,animation:n}}function ss(i,{display:e,visibility:t,transition:s,animation:n}){i.style.display=e,i.style.visibility=t,i.style.transition=s,i.style.animation=n}function we(i){if(i===void 0)return new DOMRect(0,0,0,0);let{display:e}=getComputedStyle(i);if(e!=="none"){let n=i.getBoundingClientRect();if(n.height===0&&n.width===0){const r=[];let o=i.parentElement;for(;o!==null&&o!==document.body;){if(e=getComputedStyle(o).display,e==="none"){const a=is(o);r.push({el:o,style:a})}o=o.parentElement}n=i.getBoundingClientRect();for(const a of r)ss(a.el,a.style)}return n}const t=is(i);let s=i.getBoundingClientRect();if(s.height===0&&s.width===0){const n=[];let r=i.parentElement;for(;r!==null&&r!==document.body;){if(e=getComputedStyle(r).display,e==="none"){const o=is(r);n.push({el:r,style:o})}r=r.parentElement}s=i.getBoundingClientRect();for(const o of n)ss(o.el,o.style)}return ss(i,t),s}function Si(i){const e={left:i.left,top:i.top,bottom:0,right:0},t=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,s=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight;return e.right=t-i.left-i.width,e.bottom=s-i.top-i.height,e}function Re(i,e,t){return Math.max(e,Math.min(i,t))}class ui{constructor(e){Tt(this,"channels",{rgb:[0,0,0],hsv:[0,0,0]});Tt(this,"valpha",1);vt(e)&&this.parse(e)}clone(){const e=new ui;for(let t in this.channels)e.channels[t]=[...this.channels[t]];return e.valpha=this.valpha,e}parse(e){e=e.trim();let t=!0;if(/^#[0-9a-fA-F]{6}$/.test(e)){let[s,n,r]=[parseInt(e.substring(1,3),16),parseInt(e.substring(3,5),16),parseInt(e.substring(5,7),16)];this.channels.rgb=[s,n,r],this.valpha=1}else if(/^#[0-9a-fA-F]{8}$/.test(e)){let[s,n,r]=[parseInt(e.substring(1,3),16),parseInt(e.substring(3,5),16),parseInt(e.substring(5,7),16)];this.channels.rgb=[s,n,r],this.valpha=parseInt(e.substring(7,9),16)/255}else if(e.startsWith("rgb(")){e=e.substring(4,e.length-1);const s=e.split(",");s.length===3?this.channels.rgb=s.map(n=>parseInt(n)):t=!1}else if(e.startsWith("rgba(")){e=e.substring(5,e.length-1);const s=e.split(",");if(s.length===4){let[n,r,o,a]=s.map(l=>parseFloat(l));this.channels.rgb=[n,r,o],this.valpha=a}else t=!1}return t===!1&&console.error(`color ${e} parse error`),this.updateRGB2HSV(),this}updateRGB2HSV(){let[e,t,s]=this.channels.rgb;e/=255,t/=255,s/=255;let n=Math.max(e,t,s),r=Math.min(e,t,s),[o,a,l]=this.channels.hsv;return n===r?o=0:r===s?o=60*(t-e)/(n-r)+60:r===e?o=60*(s-t)/(n-r)+180:o=60*(e-s)/(n-r)+300,n==0?a=0:a=(n-r)/n*100,l=n*100,o=Re(o,0,359),a=Re(a,0,100),l=Re(l,0,100),this.channels.hsv=[o,a,l],this}updateHSV2RGB(){let[e,t,s]=this.channels.hsv;t/=100,s/=100;let n=t,r=e/60,o=n*(1-Math.abs(r%2-1)),[a,l,u]=[s-n,s-n,s-n],d=[[n,o,0],[o,n,0],[0,n,o],[0,o,n],[o,0,n],[n,0,o]],[c,m,p]=d[Math.floor(r)];return a+=c,l+=m,u+=p,a=Re(a,0,1),l=Re(l,0,1),u=Re(u,0,1),a*=255,l*=255,u*=255,a=Math.round(a),u=Math.round(u),l=Math.round(l),this.channels.rgb=[a,l,u],this}red(e){return e!==void 0?(this.channels.rgb[0]=Math.round(Re(e,0,255)),this.updateRGB2HSV()):this.channels.rgb[0]}green(e){return e!==void 0?(this.channels.rgb[1]=Math.round(Re(e,0,255)),this.updateRGB2HSV()):this.channels.rgb[1]}blue(e){return e!==void 0?(this.channels.rgb[2]=Math.round(Re(e,0,255)),this.updateRGB2HSV()):this.channels.rgb[2]}hue(e){return e!==void 0?(this.channels.hsv[0]=Re(e,0,359),this.updateHSV2RGB()):this.channels.hsv[0]}saturation(e){return e!==void 0?(this.channels.hsv[1]=Re(e,0,100),this.updateHSV2RGB()):this.channels.hsv[1]}value(e){return e!==void 0?(this.channels.hsv[2]=Re(e,0,100),this.updateHSV2RGB()):this.channels.hsv[2]}alpha(e){return e!==void 0?(this.valpha=Re(e,0,1),this):this.valpha}hex(){let[e,t,s]=this.channels.rgb;return`#${e.toString(16).padStart(2,"0")}${t.toString(16).padStart(2,"0")}${s.toString(16).padStart(2,"0")}`.toUpperCase()}hexa(){return`${this.hex()}${Math.round(this.valpha*255).toString(16).padStart(2,"0")}`.toUpperCase()}cssrgb(){let[e,t,s]=this.channels.rgb;return`rgb(${e}, ${t}, ${s})`}cssrgba(){let[e,t,s]=this.channels.rgb;return`rgba(${e}, ${t}, ${s}, ${this.alpha()})`}isDark(){const[e,t,s]=this.channels.rgb;return .2126*e+.7152*t+.0722*s<128}isLight(){const[e,t,s]=this.channels.rgb;return .2126*e+.7152*t+.0722*s>=128}}function ns(i,e){let t=!1;return function s(...n){t||(t=!0,window!==void 0&&e===void 0?window.requestAnimationFrame(()=>{i.apply(s,n),t=!1}):setTimeout(()=>{i.apply(s,n),t=!1},e===void 0?1/60:e))}}function gt(){let i=!1;return function(e){(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(e)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(e.substr(0,4)))&&(i=!0)}(navigator.userAgent||navigator.vendor||window.opera),i}class rs{constructor(e){Tt(this,"eventFunc");this.eventFunc=t=>{t==null||t.preventDefault(),e(t)}}listen(){if(window!==void 0){const e=this.destory();return gt()?(window.addEventListener("touchmove",this.eventFunc,{passive:!1}),window.addEventListener("touchend",e)):(window.addEventListener("mousemove",this.eventFunc),window.addEventListener("mouseup",e),window.addEventListener("mouseleave",e)),{destory:e}}return{destory:()=>{}}}destory(){const e=this.eventFunc;return function t(){window!==void 0&&(gt()?(window.removeEventListener("touchmove",e),window.removeEventListener("touchend",t)):(window.removeEventListener("mousemove",e),window.removeEventListener("mouseup",t),window.removeEventListener("mouseleave",t)))}}}function na(i){return j({setup(e,t){const s=U(null);if(i.default&&i.default().length>0){const[n]=i.default();return t.expose({slotRef:s}),()=>Di(n,{ref:s})}else return()=>Di("div",{ref:s})}})}const ra=j({__name:"VPBadge",props:{text:{},type:{default:"tip"}},setup(i){return(e,t)=>(f(),g("span",{class:k(["VPBadge",e.type])},[w(e.$slots,"default",{},()=>[ue(H(e.text),1)])],2))}}),oa={key:0,class:"VPBackdrop"},aa=j({__name:"VPBackdrop",props:{show:{type:Boolean}},setup(i){return(e,t)=>(f(),G(fe,{name:"fade"},{default:x(()=>[e.show?(f(),g("div",oa)):O("",!0)]),_:1}))}}),la=z(aa,[["__scopeId","data-v-c79a1216"]]),ae=Nn;function ua(i,e){let t,s=!1;return()=>{t&&clearTimeout(t),s?t=setTimeout(i,e):(i(),(s=!0)&&setTimeout(()=>s=!1,e))}}function Ss(i){return/^\//.test(i)?i:`/${i}`}function Xs(i){const{pathname:e,search:t,hash:s,protocol:n}=new URL(i,"http://a.com");if(Fo(i)||i.startsWith("#")||!n.startsWith("http")||!zo(e))return i;const{site:r}=ae(),o=e.endsWith("/")||e.endsWith(".html")?i:i.replace(/(?:(^\.+)\/)?.*$/,`$1${e.replace(/(\.md)?$/,r.value.cleanUrls?"":".html")}${t}${s}`);return Gs(o)}const Ks=U(Zt?location.hash:"");Zt&&window.addEventListener("hashchange",()=>{Ks.value=location.hash});function bi({removeCurrent:i=!0,correspondingLink:e=!1}={}){const{site:t,localeIndex:s,page:n,theme:r}=ae(),o=Q(()=>{var l,u;return{label:(l=t.value.locales[s.value])==null?void 0:l.label,link:((u=t.value.locales[s.value])==null?void 0:u.link)||(s.value==="root"?"/":`/${s.value}/`)}});return{localeLinks:Q(()=>Object.entries(t.value.locales).flatMap(([l,u])=>i&&o.value.label===u.label?[]:{text:u.label,link:da(u.link||(l==="root"?"/":`/${l}/`),r.value.i18nRouting!==!1&&e,n.value.relativePath.slice(o.value.link.length-1),!t.value.cleanUrls)+Ks.value})),currentLang:o}}function da(i,e,t,s){return e?i.replace(/\/$/,"")+Ss(t.replace(/(^|\/)index\.md$/,"$1").replace(/\.md$/,s?".html":"")):i}const ha=i=>(Te("data-v-f87ff6e4"),i=i(),Ve(),i),ca={class:"NotFound"},fa={class:"code"},ma={class:"title"},ga=ha(()=>h("div",{class:"divider"},null,-1)),pa={class:"quote"},va={class:"action"},ba=["href","aria-label"],ya=j({__name:"NotFound",setup(i){const{site:e,theme:t}=ae(),{localeLinks:s}=bi({removeCurrent:!1}),n=U("/");return at(()=>{var o;const r=window.location.pathname.replace(e.value.base,"").replace(/(^.*?\/).*$/,"/$1");s.value.length&&(n.value=((o=s.value.find(({link:a})=>a.startsWith(r)))==null?void 0:o.link)||s.value[0].link)}),(r,o)=>{var a,l,u,d,c;return f(),g("div",ca,[h("p",fa,H(((a=y(t).notFound)==null?void 0:a.code)??"404"),1),h("h1",ma,H(((l=y(t).notFound)==null?void 0:l.title)??"PAGE NOT FOUND"),1),ga,h("blockquote",pa,H(((u=y(t).notFound)==null?void 0:u.quote)??"But if you don't change your direction, and if you keep looking, you may end up where you are heading."),1),h("div",va,[h("a",{class:"link",href:y(Gs)(n.value),"aria-label":((d=y(t).notFound)==null?void 0:d.linkLabel)??"go to home"},H(((c=y(t).notFound)==null?void 0:c.linkText)??"Take me home"),9,ba)])])}}}),_a=z(ya,[["__scopeId","data-v-f87ff6e4"]]);function nr(i,e){if(Array.isArray(i))return Pi(i);if(i==null)return[];e=Ss(e);const t=Object.keys(i).sort((n,r)=>r.split("/").length-n.split("/").length).find(n=>e.startsWith(Ss(n))),s=t?i[t]:[];return Array.isArray(s)?Pi(s):Pi(s.items,s.base)}function wa(i){const e=[];let t=0;for(const s in i){const n=i[s];if(n.items){t=e.push(n);continue}e[t]||e.push({items:[]}),e[t].items.push(n)}return e}function ka(i){const e=[];function t(s){for(const n of s)n.text&&n.link&&e.push({text:n.text,link:n.link,docFooterText:n.docFooterText}),n.items&&t(n.items)}return t(i),e}function Ts(i,e){return Array.isArray(e)?e.some(t=>Ts(i,t)):Bt(i,e.link)?!0:e.items?Ts(i,e.items):!1}function Pi(i,e){return[...i].map(t=>{const s={...t},n=s.base||e;return n&&s.link&&(s.link=n+s.link),s.items&&(s.items=Pi(s.items,n)),s})}function ft(){const{frontmatter:i,page:e,theme:t}=ae(),s=ws("(min-width: 960px)"),n=U(!1),r=Q(()=>{const _=t.value.sidebar,b=e.value.relativePath;return _?nr(_,b):[]}),o=U(r.value);et(r,(_,b)=>{JSON.stringify(_)!==JSON.stringify(b)&&(o.value=r.value)});const a=Q(()=>i.value.sidebar!==!1&&o.value.length>0&&i.value.layout!=="home"),l=Q(()=>u?i.value.aside==null?t.value.aside==="left":i.value.aside==="left":!1),u=Q(()=>i.value.layout==="home"?!1:i.value.aside!=null?!!i.value.aside:t.value.aside!==!1),d=Q(()=>a.value&&s.value),c=Q(()=>a.value?wa(o.value):[]);function m(){n.value=!0}function p(){n.value=!1}function v(){n.value?p():m()}return{isOpen:n,sidebar:o,sidebarGroups:c,hasSidebar:a,hasAside:u,leftAside:l,isSidebarEnabled:d,open:m,close:p,toggle:v}}function Ca(i,e){let t;Wi(()=>{t=i.value?document.activeElement:void 0}),at(()=>{window.addEventListener("keyup",s)}),Gi(()=>{window.removeEventListener("keyup",s)});function s(n){n.key==="Escape"&&i.value&&(e(),t==null||t.focus())}}function xa(i){const{page:e}=ae(),t=U(!1),s=Q(()=>i.value.collapsed!=null),n=Q(()=>!!i.value.link),r=U(!1),o=()=>{r.value=Bt(e.value.relativePath,i.value.link)};et([e,i,Ks],o),at(o);const a=Q(()=>r.value?!0:i.value.items?Ts(e.value.relativePath,i.value.items):!1),l=Q(()=>!!(i.value.items&&i.value.items.length));Wi(()=>{t.value=!!(s.value&&i.value.collapsed)}),Hn(()=>{(r.value||a.value)&&(t.value=!1)});function u(){s.value&&(t.value=!t.value)}return{collapsed:t,collapsible:s,isLink:n,isActiveLink:r,hasActiveLink:a,hasChildren:l,toggle:u}}function Sa(){const{hasSidebar:i}=ft(),e=ws("(min-width: 960px)"),t=ws("(min-width: 1280px)");return{isAsideEnabled:Q(()=>!t.value&&!e.value?!1:i.value?t.value:e.value)}}const Vs=[];function rr(i){return typeof i.outline=="object"&&!Array.isArray(i.outline)&&i.outline.label||i.outlineTitle||"On this page"}function js(i){const e=[...document.querySelectorAll(".VPDoc :where(h1,h2,h3,h4,h5,h6)")].filter(t=>t.id&&t.hasChildNodes()).map(t=>{const s=Number(t.tagName[1]);return{element:t,title:Ta(t),link:"#"+t.id,level:s}});return Va(e,i)}function Ta(i){let e="";for(const t of i.childNodes)if(t.nodeType===1){if(t.classList.contains("VPBadge")||t.classList.contains("header-anchor")||t.classList.contains("ignore-header"))continue;e+=t.textContent}else t.nodeType===3&&(e+=t.textContent);return e.trim()}function Va(i,e){if(e===!1)return[];const t=(typeof e=="object"&&!Array.isArray(e)?e.level:e)||2,[s,n]=typeof t=="number"?[t,t]:t==="deep"?[2,6]:t;i=i.filter(o=>o.level>=s&&o.level<=n),Vs.length=0;for(const{element:o,link:a}of i)Vs.push({element:o,link:a});const r=[];e:for(let o=0;o<i.length;o++){const a=i[o];if(o===0)r.push(a);else{for(let l=o-1;l>=0;l--){const u=i[l];if(u.level<a.level){(u.children||(u.children=[])).push(a);continue e}}r.push(a)}}return r}function Ia(i,e){const{isAsideEnabled:t}=Sa(),s=ua(r,100);let n=null;at(()=>{requestAnimationFrame(r),window.addEventListener("scroll",s)}),Ao(()=>{o(location.hash)}),Gi(()=>{window.removeEventListener("scroll",s)});function r(){if(!t.value)return;const a=window.scrollY,l=window.innerHeight,u=document.body.offsetHeight,d=Math.abs(a+l-u)<1,c=Vs.map(({element:p,link:v})=>({link:v,top:La(p)})).filter(({top:p})=>!Number.isNaN(p)).sort((p,v)=>p.top-v.top);if(!c.length){o(null);return}if(a<1){o(null);return}if(d){o(c[c.length-1].link);return}let m=null;for(const{link:p,top:v}of c){if(v>a+Oo()+4)break;m=p}o(m)}function o(a){n&&n.classList.remove("active"),a==null?n=null:n=i.value.querySelector(`a[href="${decodeURIComponent(a)}"]`);const l=n;l?(l.classList.add("active"),e.value.style.top=l.offsetTop+39+"px",e.value.style.opacity="1"):(e.value.style.top="33px",e.value.style.opacity="0")}}function La(i){let e=0;for(;i!==document.body;){if(i===null)return NaN;e+=i.offsetTop,i=i.offsetParent}return e}const $a=["href","title"],Pa=j({__name:"VPDocOutlineItem",props:{headers:{},root:{type:Boolean}},setup(i){function e({target:t}){const s=t.href.split("#")[1],n=document.getElementById(decodeURIComponent(s));n==null||n.focus({preventScroll:!0})}return(t,s)=>{const n=K("VPDocOutlineItem",!0);return f(),g("ul",{class:k(["VPDocOutlineItem",t.root?"root":"nested"])},[(f(!0),g(Y,null,Z(t.headers,({children:r,link:o,title:a})=>(f(),g("li",null,[h("a",{class:"outline-link",href:o,onClick:e,title:a},H(a),9,$a),r!=null&&r.length?(f(),G(n,{key:0,headers:r},null,8,["headers"])):O("",!0)]))),256))],2)}}}),or=z(Pa,[["__scopeId","data-v-b933a997"]]),Ma=i=>(Te("data-v-935f8a84"),i=i(),Ve(),i),Ea={class:"content"},Da={class:"outline-title",role:"heading","aria-level":"2"},Ba={"aria-labelledby":"doc-outline-aria-label"},Ra=Ma(()=>h("span",{class:"visually-hidden",id:"doc-outline-aria-label"}," Table of Contents for current page ",-1)),Fa=j({__name:"VPDocAsideOutline",setup(i){const{frontmatter:e,theme:t}=ae(),s=Wn([]);Ui(()=>{s.value=js(e.value.outline??t.value.outline)});const n=U(),r=U();return Ia(n,r),(o,a)=>(f(),g("div",{class:k(["VPDocAsideOutline",{"has-outline":s.value.length>0}]),ref_key:"container",ref:n,role:"navigation"},[h("div",Ea,[h("div",{class:"outline-marker",ref_key:"marker",ref:r},null,512),h("div",Da,H(y(rr)(y(t))),1),h("nav",Ba,[Ra,L(or,{headers:s.value,root:!0},null,8,["headers"])])])],2))}}),za=z(Fa,[["__scopeId","data-v-935f8a84"]]),Aa={class:"VPDocAsideCarbonAds"},Oa=j({__name:"VPDocAsideCarbonAds",props:{carbonAds:{}},setup(i){const e=()=>null;return(t,s)=>(f(),g("div",Aa,[L(y(e),{"carbon-ads":t.carbonAds},null,8,["carbon-ads"])]))}}),Na=i=>(Te("data-v-3f215769"),i=i(),Ve(),i),Ha={class:"VPDocAside"},Wa=Na(()=>h("div",{class:"spacer"},null,-1)),Ga=j({__name:"VPDocAside",setup(i){const{theme:e}=ae();return(t,s)=>(f(),g("div",Ha,[w(t.$slots,"aside-top",{},void 0,!0),w(t.$slots,"aside-outline-before",{},void 0,!0),L(za),w(t.$slots,"aside-outline-after",{},void 0,!0),Wa,w(t.$slots,"aside-ads-before",{},void 0,!0),y(e).carbonAds?(f(),G(Oa,{key:0,"carbon-ads":y(e).carbonAds},null,8,["carbon-ads"])):O("",!0),w(t.$slots,"aside-ads-after",{},void 0,!0),w(t.$slots,"aside-bottom",{},void 0,!0)]))}}),Ua=z(Ga,[["__scopeId","data-v-3f215769"]]);function Ya(){const{theme:i,page:e}=ae();return Q(()=>{const{text:t="Edit this page",pattern:s=""}=i.value.editLink||{};let n;return typeof s=="function"?n=s(e.value):n=s.replace(/:path/g,e.value.filePath),{url:n,text:t}})}function qa(){const{page:i,theme:e,frontmatter:t}=ae();return Q(()=>{var l,u,d,c,m,p,v,_;const s=nr(e.value.sidebar,i.value.relativePath),n=ka(s),r=n.findIndex(b=>Bt(i.value.relativePath,b.link)),o=((l=e.value.docFooter)==null?void 0:l.prev)===!1&&!t.value.prev||t.value.prev===!1,a=((u=e.value.docFooter)==null?void 0:u.next)===!1&&!t.value.next||t.value.next===!1;return{prev:o?void 0:{text:(typeof t.value.prev=="string"?t.value.prev:typeof t.value.prev=="object"?t.value.prev.text:void 0)??((d=n[r-1])==null?void 0:d.docFooterText)??((c=n[r-1])==null?void 0:c.text),link:(typeof t.value.prev=="object"?t.value.prev.link:void 0)??((m=n[r-1])==null?void 0:m.link)},next:a?void 0:{text:(typeof t.value.next=="string"?t.value.next:typeof t.value.next=="object"?t.value.next.text:void 0)??((p=n[r+1])==null?void 0:p.docFooterText)??((v=n[r+1])==null?void 0:v.text),link:(typeof t.value.next=="object"?t.value.next.link:void 0)??((_=n[r+1])==null?void 0:_.link)}}})}const rt=j({__name:"VPLink",props:{tag:{},href:{},noIcon:{type:Boolean},target:{},rel:{}},setup(i){const e=i,t=Q(()=>e.tag??(e.href?"a":"span")),s=Q(()=>e.href&&Gn.test(e.href));return(n,r)=>(f(),G(Ut(t.value),{class:k(["VPLink",{link:n.href,"vp-external-link-icon":s.value,"no-icon":n.noIcon}]),href:n.href?y(Xs)(n.href):void 0,target:n.target??(s.value?"_blank":void 0),rel:n.rel??(s.value?"noreferrer":void 0)},{default:x(()=>[w(n.$slots,"default")]),_:3},8,["class","href","target","rel"]))}}),Xa={class:"VPLastUpdated"},Ka=["datetime"],ja=j({__name:"VPDocFooterLastUpdated",setup(i){const{theme:e,page:t,frontmatter:s,lang:n}=ae(),r=Q(()=>new Date(s.value.lastUpdated??t.value.lastUpdated)),o=Q(()=>r.value.toISOString()),a=U("");return at(()=>{Wi(()=>{var l,u,d;a.value=new Intl.DateTimeFormat((u=(l=e.value.lastUpdated)==null?void 0:l.formatOptions)!=null&&u.forceLocale?n.value:void 0,((d=e.value.lastUpdated)==null?void 0:d.formatOptions)??{dateStyle:"short",timeStyle:"short"}).format(r.value)})}),(l,u)=>{var d;return f(),g("p",Xa,[ue(H(((d=y(e).lastUpdated)==null?void 0:d.text)||y(e).lastUpdatedText||"Last updated")+": ",1),h("time",{datetime:o.value},H(a.value),9,Ka)])}}}),Ja=z(ja,[["__scopeId","data-v-7e05ebdb"]]),Qa=i=>(Te("data-v-09de1c0f"),i=i(),Ve(),i),Za={key:0,class:"VPDocFooter"},el={key:0,class:"edit-info"},tl={key:0,class:"edit-link"},il=Qa(()=>h("span",{class:"vpi-square-pen edit-link-icon"},null,-1)),sl={key:1,class:"last-updated"},nl={key:1,class:"prev-next"},rl={class:"pager"},ol=["innerHTML"],al=["innerHTML"],ll={class:"pager"},ul=["innerHTML"],dl=["innerHTML"],hl=j({__name:"VPDocFooter",setup(i){const{theme:e,page:t,frontmatter:s}=ae(),n=Ya(),r=qa(),o=Q(()=>e.value.editLink&&s.value.editLink!==!1),a=Q(()=>t.value.lastUpdated&&s.value.lastUpdated!==!1),l=Q(()=>o.value||a.value||r.value.prev||r.value.next);return(u,d)=>{var c,m,p,v;return l.value?(f(),g("footer",Za,[w(u.$slots,"doc-footer-before",{},void 0,!0),o.value||a.value?(f(),g("div",el,[o.value?(f(),g("div",tl,[L(rt,{class:"edit-link-button",href:y(n).url,"no-icon":!0},{default:x(()=>[il,ue(" "+H(y(n).text),1)]),_:1},8,["href"])])):O("",!0),a.value?(f(),g("div",sl,[L(Ja)])):O("",!0)])):O("",!0),(c=y(r).prev)!=null&&c.link||(m=y(r).next)!=null&&m.link?(f(),g("nav",nl,[h("div",rl,[(p=y(r).prev)!=null&&p.link?(f(),G(rt,{key:0,class:"pager-link prev",href:y(r).prev.link},{default:x(()=>{var _;return[h("span",{class:"desc",innerHTML:((_=y(e).docFooter)==null?void 0:_.prev)||"Previous page"},null,8,ol),h("span",{class:"title",innerHTML:y(r).prev.text},null,8,al)]}),_:1},8,["href"])):O("",!0)]),h("div",ll,[(v=y(r).next)!=null&&v.link?(f(),G(rt,{key:0,class:"pager-link next",href:y(r).next.link},{default:x(()=>{var _;return[h("span",{class:"desc",innerHTML:((_=y(e).docFooter)==null?void 0:_.next)||"Next page"},null,8,ul),h("span",{class:"title",innerHTML:y(r).next.text},null,8,dl)]}),_:1},8,["href"])):O("",!0)])])):O("",!0)])):O("",!0)}}}),cl=z(hl,[["__scopeId","data-v-09de1c0f"]]),fl=i=>(Te("data-v-39a288b8"),i=i(),Ve(),i),ml={class:"container"},gl=fl(()=>h("div",{class:"aside-curtain"},null,-1)),pl={class:"aside-container"},vl={class:"aside-content"},bl={class:"content"},yl={class:"content-container"},_l={class:"main"},wl=j({__name:"VPDoc",setup(i){const{theme:e}=ae(),t=Yi(),{hasSidebar:s,hasAside:n,leftAside:r}=ft(),o=Q(()=>t.path.replace(/[./]+/g,"_").replace(/_html$/,""));return(a,l)=>{const u=K("Content");return f(),g("div",{class:k(["VPDoc",{"has-sidebar":y(s),"has-aside":y(n)}])},[w(a.$slots,"doc-top",{},void 0,!0),h("div",ml,[y(n)?(f(),g("div",{key:0,class:k(["aside",{"left-aside":y(r)}])},[gl,h("div",pl,[h("div",vl,[L(Ua,null,{"aside-top":x(()=>[w(a.$slots,"aside-top",{},void 0,!0)]),"aside-bottom":x(()=>[w(a.$slots,"aside-bottom",{},void 0,!0)]),"aside-outline-before":x(()=>[w(a.$slots,"aside-outline-before",{},void 0,!0)]),"aside-outline-after":x(()=>[w(a.$slots,"aside-outline-after",{},void 0,!0)]),"aside-ads-before":x(()=>[w(a.$slots,"aside-ads-before",{},void 0,!0)]),"aside-ads-after":x(()=>[w(a.$slots,"aside-ads-after",{},void 0,!0)]),_:3})])])],2)):O("",!0),h("div",bl,[h("div",yl,[w(a.$slots,"doc-before",{},void 0,!0),h("main",_l,[L(u,{class:k(["vp-doc",[o.value,y(e).externalLinkIcon&&"external-link-icon-enabled"]])},null,8,["class"])]),L(cl,null,{"doc-footer-before":x(()=>[w(a.$slots,"doc-footer-before",{},void 0,!0)]),_:3}),w(a.$slots,"doc-after",{},void 0,!0)])])]),w(a.$slots,"doc-bottom",{},void 0,!0)],2)}}}),kl=z(wl,[["__scopeId","data-v-39a288b8"]]),Cl=j({__name:"VPButton",props:{tag:{},size:{default:"medium"},theme:{default:"brand"},text:{},href:{},target:{},rel:{}},setup(i){const e=i,t=Q(()=>e.href&&Gn.test(e.href)),s=Q(()=>e.tag||e.href?"a":"button");return(n,r)=>(f(),G(Ut(s.value),{class:k(["VPButton",[n.size,n.theme]]),href:n.href?y(Xs)(n.href):void 0,target:e.target??(t.value?"_blank":void 0),rel:e.rel??(t.value?"noreferrer":void 0)},{default:x(()=>[ue(H(n.text),1)]),_:1},8,["class","href","target","rel"]))}}),xl=z(Cl,[["__scopeId","data-v-cad61b99"]]),Sl=["src","alt"],Tl={inheritAttrs:!1},Vl=j({...Tl,__name:"VPImage",props:{image:{},alt:{}},setup(i){return(e,t)=>{const s=K("VPImage",!0);return e.image?(f(),g(Y,{key:0},[typeof e.image=="string"||"src"in e.image?(f(),g("img",$i({key:0,class:"VPImage"},typeof e.image=="string"?e.$attrs:{...e.image,...e.$attrs},{src:y(Gs)(typeof e.image=="string"?e.image:e.image.src),alt:e.alt??(typeof e.image=="string"?"":e.image.alt||"")}),null,16,Sl)):(f(),g(Y,{key:1},[L(s,$i({class:"dark",image:e.image.dark,alt:e.image.alt},e.$attrs),null,16,["image","alt"]),L(s,$i({class:"light",image:e.image.light,alt:e.image.alt},e.$attrs),null,16,["image","alt"])],64))],64)):O("",!0)}}}),Bi=z(Vl,[["__scopeId","data-v-8b020169"]]),Il=i=>(Te("data-v-303bb580"),i=i(),Ve(),i),Ll={class:"container"},$l={class:"main"},Pl={key:0,class:"name"},Ml=["innerHTML"],El=["innerHTML"],Dl=["innerHTML"],Bl={key:0,class:"actions"},Rl={key:0,class:"image"},Fl={class:"image-container"},zl=Il(()=>h("div",{class:"image-bg"},null,-1)),Al=j({__name:"VPHero",props:{name:{},text:{},tagline:{},image:{},actions:{}},setup(i){const e=vi("hero-image-slot-exists");return(t,s)=>(f(),g("div",{class:k(["VPHero",{"has-image":t.image||y(e)}])},[h("div",Ll,[h("div",$l,[w(t.$slots,"home-hero-info-before",{},void 0,!0),w(t.$slots,"home-hero-info",{},()=>[t.name?(f(),g("h1",Pl,[h("span",{innerHTML:t.name,class:"clip"},null,8,Ml)])):O("",!0),t.text?(f(),g("p",{key:1,innerHTML:t.text,class:"text"},null,8,El)):O("",!0),t.tagline?(f(),g("p",{key:2,innerHTML:t.tagline,class:"tagline"},null,8,Dl)):O("",!0)],!0),w(t.$slots,"home-hero-info-after",{},void 0,!0),t.actions?(f(),g("div",Bl,[(f(!0),g(Y,null,Z(t.actions,n=>(f(),g("div",{key:n.link,class:"action"},[L(xl,{tag:"a",size:"medium",theme:n.theme,text:n.text,href:n.link,target:n.target,rel:n.rel},null,8,["theme","text","href","target","rel"])]))),128))])):O("",!0),w(t.$slots,"home-hero-actions-after",{},void 0,!0)]),t.image||y(e)?(f(),g("div",Rl,[h("div",Fl,[zl,w(t.$slots,"home-hero-image",{},()=>[t.image?(f(),G(Bi,{key:0,class:"image-src",image:t.image},null,8,["image"])):O("",!0)],!0)])])):O("",!0)])],2))}}),Ol=z(Al,[["__scopeId","data-v-303bb580"]]),Nl=j({__name:"VPHomeHero",setup(i){const{frontmatter:e}=ae();return(t,s)=>y(e).hero?(f(),G(Ol,{key:0,class:"VPHomeHero",name:y(e).hero.name,text:y(e).hero.text,tagline:y(e).hero.tagline,image:y(e).hero.image,actions:y(e).hero.actions},{"home-hero-info-before":x(()=>[w(t.$slots,"home-hero-info-before")]),"home-hero-info":x(()=>[w(t.$slots,"home-hero-info")]),"home-hero-info-after":x(()=>[w(t.$slots,"home-hero-info-after")]),"home-hero-actions-after":x(()=>[w(t.$slots,"home-hero-actions-after")]),"home-hero-image":x(()=>[w(t.$slots,"home-hero-image")]),_:3},8,["name","text","tagline","image","actions"])):O("",!0)}}),Hl=i=>(Te("data-v-a3976bdc"),i=i(),Ve(),i),Wl={class:"box"},Gl={key:0,class:"icon"},Ul=["innerHTML"],Yl=["innerHTML"],ql=["innerHTML"],Xl={key:4,class:"link-text"},Kl={class:"link-text-value"},jl=Hl(()=>h("span",{class:"vpi-arrow-right link-text-icon"},null,-1)),Jl=j({__name:"VPFeature",props:{icon:{},title:{},details:{},link:{},linkText:{},rel:{},target:{}},setup(i){return(e,t)=>(f(),G(rt,{class:"VPFeature",href:e.link,rel:e.rel,target:e.target,"no-icon":!0,tag:e.link?"a":"div"},{default:x(()=>[h("article",Wl,[typeof e.icon=="object"&&e.icon.wrap?(f(),g("div",Gl,[L(Bi,{image:e.icon,alt:e.icon.alt,height:e.icon.height||48,width:e.icon.width||48},null,8,["image","alt","height","width"])])):typeof e.icon=="object"?(f(),G(Bi,{key:1,image:e.icon,alt:e.icon.alt,height:e.icon.height||48,width:e.icon.width||48},null,8,["image","alt","height","width"])):e.icon?(f(),g("div",{key:2,class:"icon",innerHTML:e.icon},null,8,Ul)):O("",!0),h("h2",{class:"title",innerHTML:e.title},null,8,Yl),e.details?(f(),g("p",{key:3,class:"details",innerHTML:e.details},null,8,ql)):O("",!0),e.linkText?(f(),g("div",Xl,[h("p",Kl,[ue(H(e.linkText)+" ",1),jl])])):O("",!0)])]),_:1},8,["href","rel","target","tag"]))}}),Ql=z(Jl,[["__scopeId","data-v-a3976bdc"]]),Zl={key:0,class:"VPFeatures"},eu={class:"container"},tu={class:"items"},iu=j({__name:"VPFeatures",props:{features:{}},setup(i){const e=i,t=Q(()=>{const s=e.features.length;if(s){if(s===2)return"grid-2";if(s===3)return"grid-3";if(s%3===0)return"grid-6";if(s>3)return"grid-4"}else return});return(s,n)=>s.features?(f(),g("div",Zl,[h("div",eu,[h("div",tu,[(f(!0),g(Y,null,Z(s.features,r=>(f(),g("div",{key:r.title,class:k(["item",[t.value]])},[L(Ql,{icon:r.icon,title:r.title,details:r.details,link:r.link,"link-text":r.linkText,rel:r.rel,target:r.target},null,8,["icon","title","details","link","link-text","rel","target"])],2))),128))])])])):O("",!0)}}),su=z(iu,[["__scopeId","data-v-a6181336"]]),nu=j({__name:"VPHomeFeatures",setup(i){const{frontmatter:e}=ae();return(t,s)=>y(e).features?(f(),G(su,{key:0,class:"VPHomeFeatures",features:y(e).features},null,8,["features"])):O("",!0)}}),ru=j({__name:"VPHomeContent",setup(i){const{width:e}=No({includeScrollbar:!1});return(t,s)=>(f(),g("div",{class:"vp-doc container",style:V(y(e)?{"--vp-offset":`calc(50% - ${y(e)/2}px)`}:{})},[w(t.$slots,"default",{},void 0,!0)],4))}}),ou=z(ru,[["__scopeId","data-v-82d4af08"]]),au={class:"VPHome"},lu=j({__name:"VPHome",setup(i){const{frontmatter:e}=ae();return(t,s)=>{const n=K("Content");return f(),g("div",au,[w(t.$slots,"home-hero-before",{},void 0,!0),L(Nl,null,{"home-hero-info-before":x(()=>[w(t.$slots,"home-hero-info-before",{},void 0,!0)]),"home-hero-info":x(()=>[w(t.$slots,"home-hero-info",{},void 0,!0)]),"home-hero-info-after":x(()=>[w(t.$slots,"home-hero-info-after",{},void 0,!0)]),"home-hero-actions-after":x(()=>[w(t.$slots,"home-hero-actions-after",{},void 0,!0)]),"home-hero-image":x(()=>[w(t.$slots,"home-hero-image",{},void 0,!0)]),_:3}),w(t.$slots,"home-hero-after",{},void 0,!0),w(t.$slots,"home-features-before",{},void 0,!0),L(nu),w(t.$slots,"home-features-after",{},void 0,!0),y(e).markdownStyles!==!1?(f(),G(ou,{key:0},{default:x(()=>[L(n)]),_:1})):(f(),G(n,{key:1}))])}}}),uu=z(lu,[["__scopeId","data-v-686f80a6"]]),du={},hu={class:"VPPage"};function cu(i,e){const t=K("Content");return f(),g("div",hu,[w(i.$slots,"page-top"),L(t),w(i.$slots,"page-bottom")])}const fu=z(du,[["render",cu]]),mu=j({__name:"VPContent",setup(i){const{page:e,frontmatter:t}=ae(),{hasSidebar:s}=ft();return(n,r)=>(f(),g("div",{class:k(["VPContent",{"has-sidebar":y(s),"is-home":y(t).layout==="home"}]),id:"VPContent"},[y(e).isNotFound?w(n.$slots,"not-found",{key:0},()=>[L(_a)],!0):y(t).layout==="page"?(f(),G(fu,{key:1},{"page-top":x(()=>[w(n.$slots,"page-top",{},void 0,!0)]),"page-bottom":x(()=>[w(n.$slots,"page-bottom",{},void 0,!0)]),_:3})):y(t).layout==="home"?(f(),G(uu,{key:2},{"home-hero-before":x(()=>[w(n.$slots,"home-hero-before",{},void 0,!0)]),"home-hero-info-before":x(()=>[w(n.$slots,"home-hero-info-before",{},void 0,!0)]),"home-hero-info":x(()=>[w(n.$slots,"home-hero-info",{},void 0,!0)]),"home-hero-info-after":x(()=>[w(n.$slots,"home-hero-info-after",{},void 0,!0)]),"home-hero-actions-after":x(()=>[w(n.$slots,"home-hero-actions-after",{},void 0,!0)]),"home-hero-image":x(()=>[w(n.$slots,"home-hero-image",{},void 0,!0)]),"home-hero-after":x(()=>[w(n.$slots,"home-hero-after",{},void 0,!0)]),"home-features-before":x(()=>[w(n.$slots,"home-features-before",{},void 0,!0)]),"home-features-after":x(()=>[w(n.$slots,"home-features-after",{},void 0,!0)]),_:3})):y(t).layout&&y(t).layout!=="doc"?(f(),G(Ut(y(t).layout),{key:3})):(f(),G(kl,{key:4},{"doc-top":x(()=>[w(n.$slots,"doc-top",{},void 0,!0)]),"doc-bottom":x(()=>[w(n.$slots,"doc-bottom",{},void 0,!0)]),"doc-footer-before":x(()=>[w(n.$slots,"doc-footer-before",{},void 0,!0)]),"doc-before":x(()=>[w(n.$slots,"doc-before",{},void 0,!0)]),"doc-after":x(()=>[w(n.$slots,"doc-after",{},void 0,!0)]),"aside-top":x(()=>[w(n.$slots,"aside-top",{},void 0,!0)]),"aside-outline-before":x(()=>[w(n.$slots,"aside-outline-before",{},void 0,!0)]),"aside-outline-after":x(()=>[w(n.$slots,"aside-outline-after",{},void 0,!0)]),"aside-ads-before":x(()=>[w(n.$slots,"aside-ads-before",{},void 0,!0)]),"aside-ads-after":x(()=>[w(n.$slots,"aside-ads-after",{},void 0,!0)]),"aside-bottom":x(()=>[w(n.$slots,"aside-bottom",{},void 0,!0)]),_:3}))],2))}}),gu=z(mu,[["__scopeId","data-v-1428d186"]]),pu={class:"container"},vu=["innerHTML"],bu=["innerHTML"],yu=j({__name:"VPFooter",setup(i){const{theme:e,frontmatter:t}=ae(),{hasSidebar:s}=ft();return(n,r)=>y(e).footer&&y(t).footer!==!1?(f(),g("footer",{key:0,class:k(["VPFooter",{"has-sidebar":y(s)}])},[h("div",pu,[y(e).footer.message?(f(),g("p",{key:0,class:"message",innerHTML:y(e).footer.message},null,8,vu)):O("",!0),y(e).footer.copyright?(f(),g("p",{key:1,class:"copyright",innerHTML:y(e).footer.copyright},null,8,bu)):O("",!0)])],2)):O("",!0)}}),_u=z(yu,[["__scopeId","data-v-e315a0ad"]]);function ar(){const{theme:i,frontmatter:e}=ae(),t=Wn([]),s=Q(()=>t.value.length>0);return Ui(()=>{t.value=js(e.value.outline??i.value.outline)}),{headers:t,hasLocalNav:s}}const wu=i=>(Te("data-v-d2ecc192"),i=i(),Ve(),i),ku=wu(()=>h("span",{class:"vpi-chevron-right icon"},null,-1)),Cu={class:"header"},xu={class:"outline"},Su=j({__name:"VPLocalNavOutlineDropdown",props:{headers:{},navHeight:{}},setup(i){const e=i,{theme:t}=ae(),s=U(!1),n=U(0),r=U(),o=U();Ho(r,()=>{s.value=!1}),Wo("Escape",()=>{s.value=!1}),Ui(()=>{s.value=!1});function a(){s.value=!s.value,n.value=window.innerHeight+Math.min(window.scrollY-e.navHeight,0)}function l(d){d.target.classList.contains("outline-link")&&(o.value&&(o.value.style.transition="none"),Pt(()=>{s.value=!1}))}function u(){s.value=!1,window.scrollTo({top:0,left:0,behavior:"smooth"})}return(d,c)=>(f(),g("div",{class:"VPLocalNavOutlineDropdown",style:V({"--vp-vh":n.value+"px"}),ref_key:"main",ref:r},[d.headers.length>0?(f(),g("button",{key:0,onClick:a,class:k({open:s.value})},[ue(H(y(rr)(y(t)))+" ",1),ku],2)):(f(),g("button",{key:1,onClick:u},H(y(t).returnToTopLabel||"Return to top"),1)),L(fe,{name:"flyout"},{default:x(()=>[s.value?(f(),g("div",{key:0,ref_key:"items",ref:o,class:"items",onClick:l},[h("div",Cu,[h("a",{class:"top-link",href:"#",onClick:u},H(y(t).returnToTopLabel||"Return to top"),1)]),h("div",xu,[L(or,{headers:d.headers},null,8,["headers"])])],512)):O("",!0)]),_:1})],4))}}),Tu=z(Su,[["__scopeId","data-v-d2ecc192"]]),Vu=i=>(Te("data-v-a6f0e41e"),i=i(),Ve(),i),Iu={class:"container"},Lu=["aria-expanded"],$u=Vu(()=>h("span",{class:"vpi-align-left menu-icon"},null,-1)),Pu={class:"menu-text"},Mu=j({__name:"VPLocalNav",props:{open:{type:Boolean}},emits:["open-menu"],setup(i){const{theme:e,frontmatter:t}=ae(),{hasSidebar:s}=ft(),{headers:n}=ar(),{y:r}=Un(),o=U(0);at(()=>{o.value=parseInt(getComputedStyle(document.documentElement).getPropertyValue("--vp-nav-height"))}),Ui(()=>{n.value=js(t.value.outline??e.value.outline)});const a=Q(()=>n.value.length===0),l=Q(()=>a.value&&!s.value),u=Q(()=>({VPLocalNav:!0,"has-sidebar":s.value,empty:a.value,fixed:l.value}));return(d,c)=>y(t).layout!=="home"&&(!l.value||y(r)>=o.value)?(f(),g("div",{key:0,class:k(u.value)},[h("div",Iu,[y(s)?(f(),g("button",{key:0,class:"menu","aria-expanded":d.open,"aria-controls":"VPSidebarNav",onClick:c[0]||(c[0]=m=>d.$emit("open-menu"))},[$u,h("span",Pu,H(y(e).sidebarMenuLabel||"Menu"),1)],8,Lu)):O("",!0),L(Tu,{headers:y(n),navHeight:o.value},null,8,["headers","navHeight"])])],2)):O("",!0)}}),Eu=z(Mu,[["__scopeId","data-v-a6f0e41e"]]);function Du(){const i=U(!1);function e(){i.value=!0,window.addEventListener("resize",n)}function t(){i.value=!1,window.removeEventListener("resize",n)}function s(){i.value?t():e()}function n(){window.outerWidth>=768&&t()}const r=Yi();return et(()=>r.path,t),{isScreenOpen:i,openScreen:e,closeScreen:t,toggleScreen:s}}const Bu={},Ru={class:"VPSwitch",type:"button",role:"switch"},Fu={class:"check"},zu={key:0,class:"icon"};function Au(i,e){return f(),g("button",Ru,[h("span",Fu,[i.$slots.default?(f(),g("span",zu,[w(i.$slots,"default",{},void 0,!0)])):O("",!0)])])}const Ou=z(Bu,[["render",Au],["__scopeId","data-v-1d5665e3"]]),lr=i=>(Te("data-v-d1f28634"),i=i(),Ve(),i),Nu=lr(()=>h("span",{class:"vpi-sun sun"},null,-1)),Hu=lr(()=>h("span",{class:"vpi-moon moon"},null,-1)),Wu=j({__name:"VPSwitchAppearance",setup(i){const{isDark:e,theme:t}=ae(),s=vi("toggle-appearance",()=>{e.value=!e.value}),n=Q(()=>e.value?t.value.lightModeSwitchTitle||"Switch to light theme":t.value.darkModeSwitchTitle||"Switch to dark theme");return(r,o)=>(f(),G(Ou,{title:n.value,class:"VPSwitchAppearance","aria-checked":y(e),onClick:y(s)},{default:x(()=>[Nu,Hu]),_:1},8,["title","aria-checked","onClick"]))}}),Js=z(Wu,[["__scopeId","data-v-d1f28634"]]),Gu={key:0,class:"VPNavBarAppearance"},Uu=j({__name:"VPNavBarAppearance",setup(i){const{site:e}=ae();return(t,s)=>y(e).appearance&&y(e).appearance!=="force-dark"?(f(),g("div",Gu,[L(Js)])):O("",!0)}}),Yu=z(Uu,[["__scopeId","data-v-e6aabb21"]]),Qs=U();let ur=!1,os=0;function qu(i){const e=U(!1);if(Zt){!ur&&Xu(),os++;const t=et(Qs,s=>{var n,r,o;s===i.el.value||(n=i.el.value)!=null&&n.contains(s)?(e.value=!0,(r=i.onFocus)==null||r.call(i)):(e.value=!1,(o=i.onBlur)==null||o.call(i))});Gi(()=>{t(),os--,os||Ku()})}return Go(e)}function Xu(){document.addEventListener("focusin",dr),ur=!0,Qs.value=document.activeElement}function Ku(){document.removeEventListener("focusin",dr)}function dr(){Qs.value=document.activeElement}const ju={class:"VPMenuLink"},Ju=j({__name:"VPMenuLink",props:{item:{}},setup(i){const{page:e}=ae();return(t,s)=>(f(),g("div",ju,[L(rt,{class:k({active:y(Bt)(y(e).relativePath,t.item.activeMatch||t.item.link,!!t.item.activeMatch)}),href:t.item.link,target:t.item.target,rel:t.item.rel},{default:x(()=>[ue(H(t.item.text),1)]),_:1},8,["class","href","target","rel"])]))}}),Ki=z(Ju,[["__scopeId","data-v-43f1e123"]]),Qu={class:"VPMenuGroup"},Zu={key:0,class:"title"},ed=j({__name:"VPMenuGroup",props:{text:{},items:{}},setup(i){return(e,t)=>(f(),g("div",Qu,[e.text?(f(),g("p",Zu,H(e.text),1)):O("",!0),(f(!0),g(Y,null,Z(e.items,s=>(f(),g(Y,null,["link"in s?(f(),G(Ki,{key:0,item:s},null,8,["item"])):O("",!0)],64))),256))]))}}),td=z(ed,[["__scopeId","data-v-69e747b5"]]),id={class:"VPMenu"},sd={key:0,class:"items"},nd=j({__name:"VPMenu",props:{items:{}},setup(i){return(e,t)=>(f(),g("div",id,[e.items?(f(),g("div",sd,[(f(!0),g(Y,null,Z(e.items,s=>(f(),g(Y,{key:s.text},["link"in s?(f(),G(Ki,{key:0,item:s},null,8,["item"])):(f(),G(td,{key:1,text:s.text,items:s.items},null,8,["text","items"]))],64))),128))])):O("",!0),w(e.$slots,"default",{},void 0,!0)]))}}),rd=z(nd,[["__scopeId","data-v-e7ea1737"]]),od=i=>(Te("data-v-b6c34ac9"),i=i(),Ve(),i),ad=["aria-expanded","aria-label"],ld={key:0,class:"text"},ud=["innerHTML"],dd=od(()=>h("span",{class:"vpi-chevron-down text-icon"},null,-1)),hd={key:1,class:"vpi-more-horizontal icon"},cd={class:"menu"},fd=j({__name:"VPFlyout",props:{icon:{},button:{},label:{},items:{}},setup(i){const e=U(!1),t=U();qu({el:t,onBlur:s});function s(){e.value=!1}return(n,r)=>(f(),g("div",{class:"VPFlyout",ref_key:"el",ref:t,onMouseenter:r[1]||(r[1]=o=>e.value=!0),onMouseleave:r[2]||(r[2]=o=>e.value=!1)},[h("button",{type:"button",class:"button","aria-haspopup":"true","aria-expanded":e.value,"aria-label":n.label,onClick:r[0]||(r[0]=o=>e.value=!e.value)},[n.button||n.icon?(f(),g("span",ld,[n.icon?(f(),g("span",{key:0,class:k([n.icon,"option-icon"])},null,2)):O("",!0),n.button?(f(),g("span",{key:1,innerHTML:n.button},null,8,ud)):O("",!0),dd])):(f(),g("span",hd))],8,ad),h("div",cd,[L(rd,{items:n.items},{default:x(()=>[w(n.$slots,"default",{},void 0,!0)]),_:3},8,["items"])])],544))}}),Zs=z(fd,[["__scopeId","data-v-b6c34ac9"]]),md=["href","aria-label","innerHTML"],gd=j({__name:"VPSocialLink",props:{icon:{},link:{},ariaLabel:{}},setup(i){const e=i,t=Q(()=>typeof e.icon=="object"?e.icon.svg:`<span class="vpi-social-${e.icon}" />`);return(s,n)=>(f(),g("a",{class:"VPSocialLink no-icon",href:s.link,"aria-label":s.ariaLabel??(typeof s.icon=="string"?s.icon:""),target:"_blank",rel:"noopener",innerHTML:t.value},null,8,md))}}),pd=z(gd,[["__scopeId","data-v-eee4e7cb"]]),vd={class:"VPSocialLinks"},bd=j({__name:"VPSocialLinks",props:{links:{}},setup(i){return(e,t)=>(f(),g("div",vd,[(f(!0),g(Y,null,Z(e.links,({link:s,icon:n,ariaLabel:r})=>(f(),G(pd,{key:s,icon:n,link:s,ariaLabel:r},null,8,["icon","link","ariaLabel"]))),128))]))}}),en=z(bd,[["__scopeId","data-v-7bc22406"]]),yd={key:0,class:"group translations"},_d={class:"trans-title"},wd={key:1,class:"group"},kd={class:"item appearance"},Cd={class:"label"},xd={class:"appearance-action"},Sd={key:2,class:"group"},Td={class:"item social-links"},Vd=j({__name:"VPNavBarExtra",setup(i){const{site:e,theme:t}=ae(),{localeLinks:s,currentLang:n}=bi({correspondingLink:!0}),r=Q(()=>s.value.length&&n.value.label||e.value.appearance||t.value.socialLinks);return(o,a)=>r.value?(f(),G(Zs,{key:0,class:"VPNavBarExtra",label:"extra navigation"},{default:x(()=>[y(s).length&&y(n).label?(f(),g("div",yd,[h("p",_d,H(y(n).label),1),(f(!0),g(Y,null,Z(y(s),l=>(f(),G(Ki,{key:l.link,item:l},null,8,["item"]))),128))])):O("",!0),y(e).appearance&&y(e).appearance!=="force-dark"?(f(),g("div",wd,[h("div",kd,[h("p",Cd,H(y(t).darkModeSwitchLabel||"Appearance"),1),h("div",xd,[L(Js)])])])):O("",!0),y(t).socialLinks?(f(),g("div",Sd,[h("div",Td,[L(en,{class:"social-links-list",links:y(t).socialLinks},null,8,["links"])])])):O("",!0)]),_:1})):O("",!0)}}),Id=z(Vd,[["__scopeId","data-v-d0bd9dde"]]),Ld=i=>(Te("data-v-e5dd9c1c"),i=i(),Ve(),i),$d=["aria-expanded"],Pd=Ld(()=>h("span",{class:"container"},[h("span",{class:"top"}),h("span",{class:"middle"}),h("span",{class:"bottom"})],-1)),Md=[Pd],Ed=j({__name:"VPNavBarHamburger",props:{active:{type:Boolean}},emits:["click"],setup(i){return(e,t)=>(f(),g("button",{type:"button",class:k(["VPNavBarHamburger",{active:e.active}]),"aria-label":"mobile navigation","aria-expanded":e.active,"aria-controls":"VPNavScreen",onClick:t[0]||(t[0]=s=>e.$emit("click"))},Md,10,$d))}}),Dd=z(Ed,[["__scopeId","data-v-e5dd9c1c"]]),Bd=["innerHTML"],Rd=j({__name:"VPNavBarMenuLink",props:{item:{}},setup(i){const{page:e}=ae();return(t,s)=>(f(),G(rt,{class:k({VPNavBarMenuLink:!0,active:y(Bt)(y(e).relativePath,t.item.activeMatch||t.item.link,!!t.item.activeMatch)}),href:t.item.link,target:t.item.target,rel:t.item.rel,tabindex:"0"},{default:x(()=>[h("span",{innerHTML:t.item.text},null,8,Bd)]),_:1},8,["class","href","target","rel"]))}}),Fd=z(Rd,[["__scopeId","data-v-42ef59de"]]),zd=j({__name:"VPNavBarMenuGroup",props:{item:{}},setup(i){const e=i,{page:t}=ae(),s=r=>"link"in r?Bt(t.value.relativePath,r.link,!!e.item.activeMatch):r.items.some(s),n=Q(()=>s(e.item));return(r,o)=>(f(),G(Zs,{class:k({VPNavBarMenuGroup:!0,active:y(Bt)(y(t).relativePath,r.item.activeMatch,!!r.item.activeMatch)||n.value}),button:r.item.text,items:r.item.items},null,8,["class","button","items"]))}}),Ad=i=>(Te("data-v-7f418b0f"),i=i(),Ve(),i),Od={key:0,"aria-labelledby":"main-nav-aria-label",class:"VPNavBarMenu"},Nd=Ad(()=>h("span",{id:"main-nav-aria-label",class:"visually-hidden"},"Main Navigation",-1)),Hd=j({__name:"VPNavBarMenu",setup(i){const{theme:e}=ae();return(t,s)=>y(e).nav?(f(),g("nav",Od,[Nd,(f(!0),g(Y,null,Z(y(e).nav,n=>(f(),g(Y,{key:n.text},["link"in n?(f(),G(Fd,{key:0,item:n},null,8,["item"])):(f(),G(zd,{key:1,item:n},null,8,["item"]))],64))),128))])):O("",!0)}}),Wd=z(Hd,[["__scopeId","data-v-7f418b0f"]]);function Gd(i){const{localeIndex:e,theme:t}=ae();function s(n){var v,_,b;const r=n.split("."),o=(v=t.value.search)==null?void 0:v.options,a=o&&typeof o=="object",l=a&&((b=(_=o.locales)==null?void 0:_[e.value])==null?void 0:b.translations)||null,u=a&&o.translations||null;let d=l,c=u,m=i;const p=r.pop();for(const T of r){let S=null;const $=m==null?void 0:m[T];$&&(S=m=$);const I=c==null?void 0:c[T];I&&(S=c=I);const E=d==null?void 0:d[T];E&&(S=d=E),$||(m=S),I||(c=S),E||(d=S)}return(d==null?void 0:d[p])??(c==null?void 0:c[p])??(m==null?void 0:m[p])??""}return s}const Ud=["aria-label"],Yd={class:"DocSearch-Button-Container"},qd=h("span",{class:"vp-icon DocSearch-Search-Icon"},null,-1),Xd={class:"DocSearch-Button-Placeholder"},Kd=h("span",{class:"DocSearch-Button-Keys"},[h("kbd",{class:"DocSearch-Button-Key"}),h("kbd",{class:"DocSearch-Button-Key"},"K")],-1),vn=j({__name:"VPNavBarSearchButton",setup(i){const t=Gd({button:{buttonText:"Search",buttonAriaLabel:"Search"}});return(s,n)=>(f(),g("button",{type:"button",class:"DocSearch DocSearch-Button","aria-label":y(t)("button.buttonAriaLabel")},[h("span",Yd,[qd,h("span",Xd,H(y(t)("button.buttonText")),1)]),Kd],8,Ud))}}),jd={class:"VPNavBarSearch"},Jd={id:"local-search"},Qd={key:1,id:"docsearch"},Zd=j({__name:"VPNavBarSearch",setup(i){const e=()=>null,t=()=>null,{theme:s}=ae(),n=U(!1),r=U(!1);at(()=>{});function o(){n.value||(n.value=!0,setTimeout(a,16))}function a(){const d=new Event("keydown");d.key="k",d.metaKey=!0,window.dispatchEvent(d),setTimeout(()=>{document.querySelector(".DocSearch-Modal")||a()},16)}const l=U(!1),u="";return(d,c)=>{var m;return f(),g("div",jd,[y(u)==="local"?(f(),g(Y,{key:0},[l.value?(f(),G(y(e),{key:0,onClose:c[0]||(c[0]=p=>l.value=!1)})):O("",!0),h("div",Jd,[L(vn,{onClick:c[1]||(c[1]=p=>l.value=!0)})])],64)):y(u)==="algolia"?(f(),g(Y,{key:1},[n.value?(f(),G(y(t),{key:0,algolia:((m=y(s).search)==null?void 0:m.options)??y(s).algolia,onVnodeBeforeMount:c[2]||(c[2]=p=>r.value=!0)},null,8,["algolia"])):O("",!0),r.value?O("",!0):(f(),g("div",Qd,[L(vn,{onClick:o})]))],64)):O("",!0)])}}}),eh=j({__name:"VPNavBarSocialLinks",setup(i){const{theme:e}=ae();return(t,s)=>y(e).socialLinks?(f(),G(en,{key:0,class:"VPNavBarSocialLinks",links:y(e).socialLinks},null,8,["links"])):O("",!0)}}),th=z(eh,[["__scopeId","data-v-0394ad82"]]),ih=["href","rel","target"],sh={key:1},nh={key:2},rh=j({__name:"VPNavBarTitle",setup(i){const{site:e,theme:t}=ae(),{hasSidebar:s}=ft(),{currentLang:n}=bi(),r=Q(()=>{var l;return typeof t.value.logoLink=="string"?t.value.logoLink:(l=t.value.logoLink)==null?void 0:l.link}),o=Q(()=>{var l;return typeof t.value.logoLink=="string"||(l=t.value.logoLink)==null?void 0:l.rel}),a=Q(()=>{var l;return typeof t.value.logoLink=="string"||(l=t.value.logoLink)==null?void 0:l.target});return(l,u)=>(f(),g("div",{class:k(["VPNavBarTitle",{"has-sidebar":y(s)}])},[h("a",{class:"title",href:r.value??y(Xs)(y(n).link),rel:o.value,target:a.value},[w(l.$slots,"nav-bar-title-before",{},void 0,!0),y(t).logo?(f(),G(Bi,{key:0,class:"logo",image:y(t).logo},null,8,["image"])):O("",!0),y(t).siteTitle?(f(),g("span",sh,H(y(t).siteTitle),1)):y(t).siteTitle===void 0?(f(),g("span",nh,H(y(e).title),1)):O("",!0),w(l.$slots,"nav-bar-title-after",{},void 0,!0)],8,ih)],2))}}),oh=z(rh,[["__scopeId","data-v-ab179fa1"]]),ah={class:"items"},lh={class:"title"},uh=j({__name:"VPNavBarTranslations",setup(i){const{theme:e}=ae(),{localeLinks:t,currentLang:s}=bi({correspondingLink:!0});return(n,r)=>y(t).length&&y(s).label?(f(),G(Zs,{key:0,class:"VPNavBarTranslations",icon:"vpi-languages",label:y(e).langMenuLabel||"Change language"},{default:x(()=>[h("div",ah,[h("p",lh,H(y(s).label),1),(f(!0),g(Y,null,Z(y(t),o=>(f(),G(Ki,{key:o.link,item:o},null,8,["item"]))),128))])]),_:1},8,["label"])):O("",!0)}}),dh=z(uh,[["__scopeId","data-v-88af2de4"]]),hh=i=>(Te("data-v-19c990f1"),i=i(),Ve(),i),ch={class:"wrapper"},fh={class:"container"},mh={class:"title"},gh={class:"content"},ph={class:"content-body"},vh=hh(()=>h("div",{class:"divider"},[h("div",{class:"divider-line"})],-1)),bh=j({__name:"VPNavBar",props:{isScreenOpen:{type:Boolean}},emits:["toggle-screen"],setup(i){const{y:e}=Un(),{hasSidebar:t}=ft(),{hasLocalNav:s}=ar(),{frontmatter:n}=ae(),r=U({});return Hn(()=>{r.value={"has-sidebar":t.value,"has-local-nav":s.value,top:n.value.layout==="home"&&e.value===0}}),(o,a)=>(f(),g("div",{class:k(["VPNavBar",r.value])},[h("div",ch,[h("div",fh,[h("div",mh,[L(oh,null,{"nav-bar-title-before":x(()=>[w(o.$slots,"nav-bar-title-before",{},void 0,!0)]),"nav-bar-title-after":x(()=>[w(o.$slots,"nav-bar-title-after",{},void 0,!0)]),_:3})]),h("div",gh,[h("div",ph,[w(o.$slots,"nav-bar-content-before",{},void 0,!0),L(Zd,{class:"search"}),L(Wd,{class:"menu"}),L(dh,{class:"translations"}),L(Yu,{class:"appearance"}),L(th,{class:"social-links"}),L(Id,{class:"extra"}),w(o.$slots,"nav-bar-content-after",{},void 0,!0),L(Dd,{class:"hamburger",active:o.isScreenOpen,onClick:a[0]||(a[0]=l=>o.$emit("toggle-screen"))},null,8,["active"])])])])]),vh],2))}}),yh=z(bh,[["__scopeId","data-v-19c990f1"]]),_h={key:0,class:"VPNavScreenAppearance"},wh={class:"text"},kh=j({__name:"VPNavScreenAppearance",setup(i){const{site:e,theme:t}=ae();return(s,n)=>y(e).appearance&&y(e).appearance!=="force-dark"?(f(),g("div",_h,[h("p",wh,H(y(t).darkModeSwitchLabel||"Appearance"),1),L(Js)])):O("",!0)}}),Ch=z(kh,[["__scopeId","data-v-2d7af913"]]),xh=j({__name:"VPNavScreenMenuLink",props:{item:{}},setup(i){const e=vi("close-screen");return(t,s)=>(f(),G(rt,{class:"VPNavScreenMenuLink",href:t.item.link,target:t.item.target,rel:t.item.rel,onClick:y(e)},{default:x(()=>[ue(H(t.item.text),1)]),_:1},8,["href","target","rel","onClick"]))}}),Sh=z(xh,[["__scopeId","data-v-05f27b2a"]]),Th=j({__name:"VPNavScreenMenuGroupLink",props:{item:{}},setup(i){const e=vi("close-screen");return(t,s)=>(f(),G(rt,{class:"VPNavScreenMenuGroupLink",href:t.item.link,target:t.item.target,rel:t.item.rel,onClick:y(e)},{default:x(()=>[ue(H(t.item.text),1)]),_:1},8,["href","target","rel","onClick"]))}}),hr=z(Th,[["__scopeId","data-v-19976ae1"]]),Vh={class:"VPNavScreenMenuGroupSection"},Ih={key:0,class:"title"},Lh=j({__name:"VPNavScreenMenuGroupSection",props:{text:{},items:{}},setup(i){return(e,t)=>(f(),g("div",Vh,[e.text?(f(),g("p",Ih,H(e.text),1)):O("",!0),(f(!0),g(Y,null,Z(e.items,s=>(f(),G(hr,{key:s.text,item:s},null,8,["item"]))),128))]))}}),$h=z(Lh,[["__scopeId","data-v-8133b170"]]),Ph=i=>(Te("data-v-ff6087d4"),i=i(),Ve(),i),Mh=["aria-controls","aria-expanded"],Eh=["innerHTML"],Dh=Ph(()=>h("span",{class:"vpi-plus button-icon"},null,-1)),Bh=["id"],Rh={key:1,class:"group"},Fh=j({__name:"VPNavScreenMenuGroup",props:{text:{},items:{}},setup(i){const e=i,t=U(!1),s=Q(()=>`NavScreenGroup-${e.text.replace(" ","-").toLowerCase()}`);function n(){t.value=!t.value}return(r,o)=>(f(),g("div",{class:k(["VPNavScreenMenuGroup",{open:t.value}])},[h("button",{class:"button","aria-controls":s.value,"aria-expanded":t.value,onClick:n},[h("span",{class:"button-text",innerHTML:r.text},null,8,Eh),Dh],8,Mh),h("div",{id:s.value,class:"items"},[(f(!0),g(Y,null,Z(r.items,a=>(f(),g(Y,{key:a.text},["link"in a?(f(),g("div",{key:a.text,class:"item"},[L(hr,{item:a},null,8,["item"])])):(f(),g("div",Rh,[L($h,{text:a.text,items:a.items},null,8,["text","items"])]))],64))),128))],8,Bh)],2))}}),zh=z(Fh,[["__scopeId","data-v-ff6087d4"]]),Ah={key:0,class:"VPNavScreenMenu"},Oh=j({__name:"VPNavScreenMenu",setup(i){const{theme:e}=ae();return(t,s)=>y(e).nav?(f(),g("nav",Ah,[(f(!0),g(Y,null,Z(y(e).nav,n=>(f(),g(Y,{key:n.text},["link"in n?(f(),G(Sh,{key:0,item:n},null,8,["item"])):(f(),G(zh,{key:1,text:n.text||"",items:n.items},null,8,["text","items"]))],64))),128))])):O("",!0)}}),Nh=j({__name:"VPNavScreenSocialLinks",setup(i){const{theme:e}=ae();return(t,s)=>y(e).socialLinks?(f(),G(en,{key:0,class:"VPNavScreenSocialLinks",links:y(e).socialLinks},null,8,["links"])):O("",!0)}}),cr=i=>(Te("data-v-858fe1a4"),i=i(),Ve(),i),Hh=cr(()=>h("span",{class:"vpi-languages icon lang"},null,-1)),Wh=cr(()=>h("span",{class:"vpi-chevron-down icon chevron"},null,-1)),Gh={class:"list"},Uh=j({__name:"VPNavScreenTranslations",setup(i){const{localeLinks:e,currentLang:t}=bi({correspondingLink:!0}),s=U(!1);function n(){s.value=!s.value}return(r,o)=>y(e).length&&y(t).label?(f(),g("div",{key:0,class:k(["VPNavScreenTranslations",{open:s.value}])},[h("button",{class:"title",onClick:n},[Hh,ue(" "+H(y(t).label)+" ",1),Wh]),h("ul",Gh,[(f(!0),g(Y,null,Z(y(e),a=>(f(),g("li",{key:a.link,class:"item"},[L(rt,{class:"link",href:a.link},{default:x(()=>[ue(H(a.text),1)]),_:2},1032,["href"])]))),128))])],2)):O("",!0)}}),Yh=z(Uh,[["__scopeId","data-v-858fe1a4"]]),qh={class:"container"},Xh=j({__name:"VPNavScreen",props:{open:{type:Boolean}},setup(i){const e=U(null),t=Yn(Zt?document.body:null);return(s,n)=>(f(),G(fe,{name:"fade",onEnter:n[0]||(n[0]=r=>t.value=!0),onAfterLeave:n[1]||(n[1]=r=>t.value=!1)},{default:x(()=>[s.open?(f(),g("div",{key:0,class:"VPNavScreen",ref_key:"screen",ref:e,id:"VPNavScreen"},[h("div",qh,[w(s.$slots,"nav-screen-content-before",{},void 0,!0),L(Oh,{class:"menu"}),L(Yh,{class:"translations"}),L(Ch,{class:"appearance"}),L(Nh,{class:"social-links"}),w(s.$slots,"nav-screen-content-after",{},void 0,!0)])],512)):O("",!0)]),_:3}))}}),Kh=z(Xh,[["__scopeId","data-v-cc5739dd"]]),jh={key:0,class:"VPNav"},Jh=j({__name:"VPNav",setup(i){const{isScreenOpen:e,closeScreen:t,toggleScreen:s}=Du(),{frontmatter:n}=ae(),r=Q(()=>n.value.navbar!==!1);return qn("close-screen",t),Wi(()=>{Zt&&document.documentElement.classList.toggle("hide-nav",!r.value)}),(o,a)=>r.value?(f(),g("header",jh,[L(yh,{"is-screen-open":y(e),onToggleScreen:y(s)},{"nav-bar-title-before":x(()=>[w(o.$slots,"nav-bar-title-before",{},void 0,!0)]),"nav-bar-title-after":x(()=>[w(o.$slots,"nav-bar-title-after",{},void 0,!0)]),"nav-bar-content-before":x(()=>[w(o.$slots,"nav-bar-content-before",{},void 0,!0)]),"nav-bar-content-after":x(()=>[w(o.$slots,"nav-bar-content-after",{},void 0,!0)]),_:3},8,["is-screen-open","onToggleScreen"]),L(Kh,{open:y(e)},{"nav-screen-content-before":x(()=>[w(o.$slots,"nav-screen-content-before",{},void 0,!0)]),"nav-screen-content-after":x(()=>[w(o.$slots,"nav-screen-content-after",{},void 0,!0)]),_:3},8,["open"])])):O("",!0)}}),Qh=z(Jh,[["__scopeId","data-v-ae24b3ad"]]),fr=i=>(Te("data-v-93e7e794"),i=i(),Ve(),i),Zh=["role","tabindex"],ec=fr(()=>h("div",{class:"indicator"},null,-1)),tc=fr(()=>h("span",{class:"vpi-chevron-right caret-icon"},null,-1)),ic=[tc],sc={key:1,class:"items"},nc=j({__name:"VPSidebarItem",props:{item:{},depth:{}},setup(i){const e=i,{collapsed:t,collapsible:s,isLink:n,isActiveLink:r,hasActiveLink:o,hasChildren:a,toggle:l}=xa(Q(()=>e.item)),u=Q(()=>a.value?"section":"div"),d=Q(()=>n.value?"a":"div"),c=Q(()=>a.value?e.depth+2===7?"p":`h${e.depth+2}`:"p"),m=Q(()=>n.value?void 0:"button"),p=Q(()=>[[`level-${e.depth}`],{collapsible:s.value},{collapsed:t.value},{"is-link":n.value},{"is-active":r.value},{"has-active":o.value}]);function v(b){"key"in b&&b.key!=="Enter"||!e.item.link&&l()}function _(){e.item.link&&l()}return(b,T)=>{const S=K("VPSidebarItem",!0);return f(),G(Ut(u.value),{class:k(["VPSidebarItem",p.value])},{default:x(()=>[b.item.text?(f(),g("div",$i({key:0,class:"item",role:m.value},Uo(b.item.items?{click:v,keydown:v}:{},!0),{tabindex:b.item.items&&0}),[ec,b.item.link?(f(),G(rt,{key:0,tag:d.value,class:"link",href:b.item.link,rel:b.item.rel,target:b.item.target},{default:x(()=>[(f(),G(Ut(c.value),{class:"text",innerHTML:b.item.text},null,8,["innerHTML"]))]),_:1},8,["tag","href","rel","target"])):(f(),G(Ut(c.value),{key:1,class:"text",innerHTML:b.item.text},null,8,["innerHTML"])),b.item.collapsed!=null?(f(),g("div",{key:2,class:"caret",role:"button","aria-label":"toggle section",onClick:_,onKeydown:Us(_,["enter"]),tabindex:"0"},ic,32)):O("",!0)],16,Zh)):O("",!0),b.item.items&&b.item.items.length?(f(),g("div",sc,[b.depth<5?(f(!0),g(Y,{key:0},Z(b.item.items,$=>(f(),G(S,{key:$.text,item:$,depth:b.depth+1},null,8,["item","depth"]))),128)):O("",!0)])):O("",!0)]),_:1},8,["class"])}}}),rc=z(nc,[["__scopeId","data-v-93e7e794"]]),mr=i=>(Te("data-v-575e6a36"),i=i(),Ve(),i),oc=mr(()=>h("div",{class:"curtain"},null,-1)),ac={class:"nav",id:"VPSidebarNav","aria-labelledby":"sidebar-aria-label",tabindex:"-1"},lc=mr(()=>h("span",{class:"visually-hidden",id:"sidebar-aria-label"}," Sidebar Navigation ",-1)),uc=j({__name:"VPSidebar",props:{open:{type:Boolean}},setup(i){const{sidebarGroups:e,hasSidebar:t}=ft(),s=i,n=U(null),r=Yn(Zt?document.body:null);return et([s,n],()=>{var o;s.open?(r.value=!0,(o=n.value)==null||o.focus()):r.value=!1},{immediate:!0,flush:"post"}),(o,a)=>y(t)?(f(),g("aside",{key:0,class:k(["VPSidebar",{open:o.open}]),ref_key:"navEl",ref:n,onClick:a[0]||(a[0]=Lt(()=>{},["stop"]))},[oc,h("nav",ac,[lc,w(o.$slots,"sidebar-nav-before",{},void 0,!0),(f(!0),g(Y,null,Z(y(e),l=>(f(),g("div",{key:l.text,class:"group"},[L(rc,{item:l,depth:0},null,8,["item"])]))),128)),w(o.$slots,"sidebar-nav-after",{},void 0,!0)])],2)):O("",!0)}}),dc=z(uc,[["__scopeId","data-v-575e6a36"]]),hc=j({__name:"VPSkipLink",setup(i){const e=Yi(),t=U();et(()=>e.path,()=>t.value.focus());function s({target:n}){const r=document.getElementById(decodeURIComponent(n.hash).slice(1));if(r){const o=()=>{r.removeAttribute("tabindex"),r.removeEventListener("blur",o)};r.setAttribute("tabindex","-1"),r.addEventListener("blur",o),r.focus(),window.scrollTo(0,0)}}return(n,r)=>(f(),g(Y,null,[h("span",{ref_key:"backToTop",ref:t,tabindex:"-1"},null,512),h("a",{href:"#VPContent",class:"VPSkipLink visually-hidden",onClick:s}," Skip to content ")],64))}}),cc=z(hc,[["__scopeId","data-v-0f60ec36"]]),fc=j({__name:"Layout",setup(i){const{isOpen:e,open:t,close:s}=ft(),n=Yi();et(()=>n.path,s),Ca(e,s);const{frontmatter:r}=ae(),o=Xn(),a=Q(()=>!!o["home-hero-image"]);return qn("hero-image-slot-exists",a),(l,u)=>{const d=K("Content");return y(r).layout!==!1?(f(),g("div",{key:0,class:k(["Layout",y(r).pageClass])},[w(l.$slots,"layout-top",{},void 0,!0),L(cc),L(la,{class:"backdrop",show:y(e),onClick:y(s)},null,8,["show","onClick"]),L(Qh,null,{"nav-bar-title-before":x(()=>[w(l.$slots,"nav-bar-title-before",{},void 0,!0)]),"nav-bar-title-after":x(()=>[w(l.$slots,"nav-bar-title-after",{},void 0,!0)]),"nav-bar-content-before":x(()=>[w(l.$slots,"nav-bar-content-before",{},void 0,!0)]),"nav-bar-content-after":x(()=>[w(l.$slots,"nav-bar-content-after",{},void 0,!0)]),"nav-screen-content-before":x(()=>[w(l.$slots,"nav-screen-content-before",{},void 0,!0)]),"nav-screen-content-after":x(()=>[w(l.$slots,"nav-screen-content-after",{},void 0,!0)]),_:3}),L(Eu,{open:y(e),onOpenMenu:y(t)},null,8,["open","onOpenMenu"]),L(dc,{open:y(e)},{"sidebar-nav-before":x(()=>[w(l.$slots,"sidebar-nav-before",{},void 0,!0)]),"sidebar-nav-after":x(()=>[w(l.$slots,"sidebar-nav-after",{},void 0,!0)]),_:3},8,["open"]),L(gu,null,{"page-top":x(()=>[w(l.$slots,"page-top",{},void 0,!0)]),"page-bottom":x(()=>[w(l.$slots,"page-bottom",{},void 0,!0)]),"not-found":x(()=>[w(l.$slots,"not-found",{},void 0,!0)]),"home-hero-before":x(()=>[w(l.$slots,"home-hero-before",{},void 0,!0)]),"home-hero-info-before":x(()=>[w(l.$slots,"home-hero-info-before",{},void 0,!0)]),"home-hero-info":x(()=>[w(l.$slots,"home-hero-info",{},void 0,!0)]),"home-hero-info-after":x(()=>[w(l.$slots,"home-hero-info-after",{},void 0,!0)]),"home-hero-actions-after":x(()=>[w(l.$slots,"home-hero-actions-after",{},void 0,!0)]),"home-hero-image":x(()=>[w(l.$slots,"home-hero-image",{},void 0,!0)]),"home-hero-after":x(()=>[w(l.$slots,"home-hero-after",{},void 0,!0)]),"home-features-before":x(()=>[w(l.$slots,"home-features-before",{},void 0,!0)]),"home-features-after":x(()=>[w(l.$slots,"home-features-after",{},void 0,!0)]),"doc-footer-before":x(()=>[w(l.$slots,"doc-footer-before",{},void 0,!0)]),"doc-before":x(()=>[w(l.$slots,"doc-before",{},void 0,!0)]),"doc-after":x(()=>[w(l.$slots,"doc-after",{},void 0,!0)]),"doc-top":x(()=>[w(l.$slots,"doc-top",{},void 0,!0)]),"doc-bottom":x(()=>[w(l.$slots,"doc-bottom",{},void 0,!0)]),"aside-top":x(()=>[w(l.$slots,"aside-top",{},void 0,!0)]),"aside-bottom":x(()=>[w(l.$slots,"aside-bottom",{},void 0,!0)]),"aside-outline-before":x(()=>[w(l.$slots,"aside-outline-before",{},void 0,!0)]),"aside-outline-after":x(()=>[w(l.$slots,"aside-outline-after",{},void 0,!0)]),"aside-ads-before":x(()=>[w(l.$slots,"aside-ads-before",{},void 0,!0)]),"aside-ads-after":x(()=>[w(l.$slots,"aside-ads-after",{},void 0,!0)]),_:3}),L(_u),w(l.$slots,"layout-bottom",{},void 0,!0)],2)):(f(),G(d,{key:1}))}}}),mc=z(fc,[["__scopeId","data-v-5d98c3a5"]]),gc={Layout:mc,enhanceApp:({app:i})=>{i.component("Badge",ra)}},pc={__name:"custom",setup(i){const{Layout:e}=gc,t=qs(),s=Nn();return et(s.isDark,n=>{n?t.changeTheme("dark"):t.changeTheme("light")}),(n,r)=>(f(),G(y(e)))}},ie=i=>(i.install=e=>{e.component(i.name,i)},i),gr=(i,e)=>(i.install=t=>{if(t.component(i.name,i),Array.isArray(e))for(const s of e)t.use(s)},i),te={theme:{type:String,default:"global"},disabled:{type:Boolean,default:!1},lang:{type:String,default:"global"}},vc={...te},bc={name:"FvAnimatedIcon",emits:["update:modelValue","click"],props:{...vc,modelValue:{default:"scaleDown"},icon:{default:"Search"},customizeAnimation:{default:!1},background:{default:""},fontSize:{default:16},hideContent:{default:!1}},data(){return{thisValue:this.modelValue,animations:{scaleDown:{down:{transform:"scale(0.8)",transition:"transform 0.2s"},up:[{transform:"scale(1.1)",transition:"transform 0.2s"},{transform:"scale(1)",transition:"transform 0.05s ease-out"}],leave:[{transform:"scale(1)",transition:"transform 0.05s ease-out"}]},scaleXDown:{down:{transform:"scaleX(0.6)",transition:"transform 0.2s"},up:[{transform:"scaleX(1.1)",transition:"transform 0.2s"},{transform:"scaleX(1)",transition:"transform 0.05s ease-out"}],leave:[{transform:"scaleX(1)",transition:"transform 0.05s ease-out"}]},scaleYDown:{down:{transform:"scaleY(0.6)",transition:"transform 0.2s"},up:[{transform:"scaleY(1.1)",transition:"transform 0.2s"},{transform:"scaleY(1)",transition:"transform 0.05s ease-out"}],leave:[{transform:"scaleY(1)",transition:"transform 0.05s ease-out"}]},backScale:{down:{transform:"scale(0.8)","transform-origin":"100% 50%",transition:"transform 0.2s"},up:[{transform:"scale(1.1)","transform-origin":"100% 50%",transition:"transform 0.2s"},{transform:"scale(1)","transform-origin":"100% 50%",transition:"transform 0.05s ease-out"}],leave:[{transform:"scale(1)","transform-origin":"100% 50%",transition:"transform 0.05s ease-out"}]},bounceRotate:{down:{transform:"rotate(-15deg)",transition:"transform 0.1s"},up:[{transform:"rotate(360deg)",transition:"transform 0.3s"},{transform:"rotate(0deg)"}],leave:[{transform:"rotate(360deg)",transition:"transform 0.3s"},{transform:"rotate(0deg)"}]}},animatedStyle:{},animationsQueue:[]}},watch:{modelValue(i){this.thisValue=i},thisValue(i){this.$emit("update:modelValue",i)}},computed:{$theme(){return q(this.$props).theme.value}},mounted(){this.animationInit()},methods:{animationInit(){this.$el.addEventListener("transitionend",i=>{this.popAnimation()})},enter(){let i=this.getAnimation("enter");if(!i)return!1;i.length||(i=[i]),this.animationsQueue=[],this.animationsQueue=this.animationsQueue.concat(i),this.popAnimation()},move(){let i=this.getAnimation("move");if(!i)return!1;i.length||(i=[i]),this.animationsQueue=[],this.animationsQueue=this.animationsQueue.concat(i),this.popAnimation()},down(i){i.preventDefault();let e=this.getAnimation("down");if(!e)return!1;e.length||(e=[e]),this.animationsQueue=[],this.animationsQueue=this.animationsQueue.concat(e),this.popAnimation()},up(i){i.preventDefault(),this.onClick(i);let e=this.getAnimation("up");if(!e)return!1;e.length||(e=[e]),this.animationsQueue=[],this.animationsQueue=this.animationsQueue.concat(e),this.popAnimation()},leave(){let i=this.getAnimation("leave");if(!i)return!1;i.length||(i=[i]),this.animationsQueue=[],this.animationsQueue=this.animationsQueue.concat(i),this.popAnimation()},getAnimation(i){if(this.customizeAnimation)return this.customizeAnimation[i]?this.customizeAnimation[i]:!1;if(!this.animations[this.thisValue])return!1;let e=this.animations[this.thisValue];return e[i]?e[i]:!1},popAnimation(){if(this.animationsQueue.length==0)return 0;let i=this.animationsQueue[0];this.animatedStyle=i,this.animationsQueue.splice(0,1)},onClick(i){this.$emit("click",i)}}},yc={class:"fv-animated-content-block"};function _c(i,e,t,s,n,r){return f(),g("div",{class:k(["fv-AnimatedIcon",[r.$theme]]),style:V([{width:`${t.fontSize*1+3}px`,background:t.background,fontSize:`${t.fontSize}px`}]),onMousedown:e[0]||(e[0]=(...o)=>r.down&&r.down(...o)),onMouseup:e[1]||(e[1]=(...o)=>r.up&&r.up(...o)),onTouchstart:e[2]||(e[2]=(...o)=>r.down&&r.down(...o)),onTouchend:e[3]||(e[3]=(...o)=>r.up&&r.up(...o)),onMouseenter:e[4]||(e[4]=(...o)=>r.enter&&r.enter(...o)),onMousemove:e[5]||(e[5]=(...o)=>r.move&&r.move(...o)),onTouchmove:e[6]||(e[6]=(...o)=>r.move&&r.move(...o)),onMouseleave:e[7]||(e[7]=(...o)=>r.leave&&r.leave(...o))},[h("div",{draggable:"false",class:k(["fv-animated-icon-container",[{hideContent:t.hideContent}]]),style:V([n.animatedStyle])},[w(i.$slots,"default",{},()=>[h("i",{ref:"a",class:k(["ms-Icon",[`ms-Icon--${t.icon}`]])},null,2)])],6),P(h("div",yc,[w(i.$slots,"content")],512),[[R,!t.hideContent]])],38)}const wc=z(bc,[["render",_c]]),kc=ie(wc),Cc={...te},xc={name:"FvBadge",emits:["update:modelValue"],props:{...Cc,modelValue:{default:""},max:{default:1/0},isDot:{default:!1},hidden:{default:!1},type:{default:"default"}},data(){return{thisValue:this.modelValue,colorList:{default:"#f56c6c",primary:"#409eff",success:"rgba(0, 204, 153, 1)",warning:"#e6a23c",danger:"#f56c6c",info:"#909399"}}},watch:{modelValue(i){this.thisValue=i},thisValue(i){this.$emit("update:modelValue",i)}},computed:{finalValue(){return this.thisValue*1>this.max*1?`${this.max}+`:this.thisValue},finalColor(){return this.colorList[this.type]?this.colorList[this.type]:this.type},$theme(){return q(this.$props).theme.value}}},Sc=h("p",null,"Badge",-1),Tc={class:"badge-content"};function Vc(i,e,t,s,n,r){return f(),g("div",{class:k(["fv-Badge",[r.$theme]])},[w(i.$slots,"default",{},()=>[Sc]),P(h("sup",{class:k(["fv-badge-container",{dot:t.isDot}]),style:V({background:r.finalColor})},[h("p",Tc,H(r.finalValue),1)],6),[[R,!t.hidden]])],2)}const Ic=z(xc,[["render",Vc]]),Lc=ie(Ic),$c={...te},Pc={name:"FvBreadcrumb",emits:["update:modelValue","root-click","item-click"],props:{...$c,modelValue:{default:""},separator:{type:String,default:"/"},separatorChar:{type:String,default:"/"},showRoot:{default:!0},rootIcon:{default:"FolderHorizontal"},readOnly:{default:!0},borderColor:{default:""},disabled:{default:!1},borderRadius:{default:"2"}},data(){return{mode:"default",thisValue:this.modelValue,tempValue:""}},watch:{modelValue(i){this.thisValue=i},mode(i){if(i=="editor"){let e=this.thisValue;e[0]==this.separatorChar&&(e=e.slice(1,e.length)),this.tempValue=e}else{let e=this.tempValue;e[0]==this.separatorChar&&(e=e.slice(1,e.length)),this.thisValue[0]==this.separatorChar?this.thisValue=`${this.separatorChar}${e}`:this.thisValue=e}},thisValue(i){this.$emit("update:modelValue",i)}},computed:{separatorIcon(){return this.separator.length>1},routeList(){let i=this.thisValue;return i[0]==this.separatorChar&&(i=i.slice(1,i.length)),i==""?[]:i.split(this.separatorChar)},isDisabled(){return this.disabled.toString()=="true"||this.disabled=="disabled"||this.disabled===""},$theme(){return q(this.$props).theme.value}},mounted(){this.outSideClickInit()},methods:{outSideClickInit(){window.addEventListener("click",i=>{let e=i.target,t=!1;for(;e&&e.tagName&&e.tagName.toLowerCase()!="body";){if(e==this.$el){t=!0;break}e=e.parentNode}t||(this.mode="default")})},editorMode(i){if(this.isDisabled||this.readOnly||i.target!==this.$refs.main)return 0;i.preventDefault(),i.stopPropagation(),this.mode="editor",setTimeout(()=>{this.$refs.editor.focus(),this.$refs.editor.select()},300)},handleEnter(i){i.keyCode===13&&(this.mode="default")},routeClick(){if(this.isDisabled)return 0;this.$emit("root-click",{path:this.thisValue,pathList:this.routeList})},routeItemClick(i,e){if(this.isDisabled)return 0;let t="",s=[];for(let n=0;n<=e;n++)s.push(this.routeList[n]);s.forEach(n=>{t==""?t=n:t+=`${this.separatorChar}${n}`}),this.$emit("item-click",{path:t,fullPath:`${this.separatorChar}${t}`,pathList:s,current:i})}}},Mc=["onClick"],Ec={class:"fv-bc-separator-content"};function Dc(i,e,t,s,n,r){return f(),g("div",{class:k(["fv-Breadcrumb",[r.$theme,{readOnly:t.readOnly,"editor-mode":n.mode==="editor",disabled:r.isDisabled}]]),style:V({"border-radius":`${t.borderRadius}px`,"border-color":n.mode==="editor"?t.borderColor:"","outline-color":n.mode==="editor"?t.borderColor:""})},[h("div",{class:"fv-bc-route-list",ref:"main",onClick:e[3]||(e[3]=(...o)=>r.editorMode&&r.editorMode(...o))},[P(h("div",{class:"fv-bc-route-item",onClick:e[0]||(e[0]=(...o)=>r.routeClick&&r.routeClick(...o))},[w(i.$slots,"root",{rootIcon:t.rootIcon,separator:t.separator,separatorIcon:r.separatorIcon},()=>[h("i",{class:k(["fv-bc-separator-content ms-Icon",[`ms-Icon--${t.rootIcon}`]])},null,2),h("i",{class:k(["fv-bc-separator-icon ms-Icon",[r.separatorIcon?`ms-Icon--${t.separator}`:""]])},H(r.separatorIcon?"":t.separator),3)])],512),[[R,t.showRoot]]),(f(!0),g(Y,null,Z(r.routeList,(o,a)=>P((f(),g("div",{key:a,class:"fv-bc-route-item",onClick:l=>r.routeItemClick(o,a)},[w(i.$slots,"route-item",{item:o,index:a},()=>[h("p",Ec,H(o),1),h("i",{class:k(["fv-bc-separator-icon ms-Icon",[r.separatorIcon?`ms-Icon--${t.separator}`:""]])},H(r.separatorIcon?"":t.separator),3)])],8,Mc)),[[R,n.mode=="default"]])),128)),P(h("input",{"onUpdate:modelValue":e[1]||(e[1]=o=>n.tempValue=o),class:"fv-bc-route-text-box",type:"text",ref:"editor",onKeyup:e[2]||(e[2]=(...o)=>r.handleEnter&&r.handleEnter(...o))},null,544),[[R,n.mode=="editor"],[Kn,n.tempValue]])],512)],6)}const Bc=z(Pc,[["render",Dc]]),Rc=ie(Bc),Fc={...te},zc={name:"FvButton",emits:["click"],props:{...Fc,icon:{default:"",type:String},foreground:{default:"",type:String},background:{default:"",type:String},borderRadius:{default:3},borderColor:{default:""},fontSize:{default:13.3},fontWeight:{default:"normal",type:String},revealBorderColor:{default:!1},revealBackgroundColor:{default:!1},isBoxShadow:{default:!1},disabled:{default:!1},borderWidth:{default:1}},data(){return{}},watch:{},computed:{$theme(){return q(this.$props).theme.value},borderLightColor(){if(this.revealBorderColor)return this.revealBorderColor;if(this.$theme=="light")return"rgba(121, 119, 117, 0.6)";if(this.$theme=="dark"||this.$theme=="custom")return"rgba(255, 255, 255, 0.6)"},backgroundLightColor(){if(this.revealBackgroundColor)return this.revealBackgroundColor;if(this.$theme=="light")return"rgba(121, 119, 117, 0.1)";if(this.$theme=="dark"||this.$theme=="custom")return"rgba(255, 255, 255, 0.1)"},isDisabled(){return this.disabled.toString()=="true"||this.disabled=="disabled"||this.disabled===""}},mounted(){},methods:{onClick(i){if(i.preventDefault(),this.isDisabled)return 0;this.$emit("click",i)}},beforeUnmount(){}},Ac=["disabled"];function Oc(i,e,t,s,n,r){const o=K("fv-reveal-container");return f(),g("div",{class:k(["fv-Button",[r.$theme]]),onClick:e[0]||(e[0]=(...a)=>r.onClick&&r.onClick(...a))},[h("div",{class:k(["fv-button-main-container",[{disabled:r.isDisabled},{shadow:t.isBoxShadow}]]),style:V({borderRadius:`${t.borderRadius}px`})},[L(o,{parent:()=>i.$el,class:"fv-button-reveal-container",backgroundColor:r.backgroundLightColor,borderColor:r.borderLightColor,borderGradientSize:80,borderWidth:t.borderWidth,borderRadius:t.borderRadius,disabled:r.isDisabled},null,8,["parent","backgroundColor","borderColor","borderWidth","borderRadius","disabled"]),h("div",{disabled:t.disabled,class:"fv-button-container",style:V({background:t.background,"background-repeat":"no-repeat","background-clip":"content-box",borderColor:t.borderColor,borderWidth:`${t.borderWidth}px`,borderRadius:`${t.borderRadius}px`})},[h("span",{class:"fv-btn-content-block",style:V({color:t.foreground,"font-size":`${t.fontSize}px`,"font-weight":t.fontWeight})},[h("i",{class:k(["ms-Icon",`ms-Icon--${t.icon}`]),style:V({"margin-right":t.icon!=""?"5px":""})},null,6),w(i.$slots,"default",{},()=>[ue("Button")])],4)],12,Ac)],6)],2)}const Nc=z(zc,[["render",Oc]]),Hc=ie(Nc),Wc={...te},Gc={emits:["update:modelValue"],props:{modelValue:{default:()=>[]},borderWidth:{default:2},placeholder:{default:"Pick a day"},borderRadius:{default:"3"},inputForeground:{default:""},inputBackground:{default:""},dropDownIcon:{default:"CalendarDay"},dropDownIconForeground:{default:""},disabled:{default:!1},theme:{default:"global"}},data(){return{choosenValue:this.modelValue}},watch:{modelValue(i){this.choosenValue=i},choosenValue(i){this.$emit("update:modelValue",i)}},computed:{$theme(){return q(this.$props).theme.value},inputValue(){let i="";for(let e=0;e<this.choosenValue.length;e++)e>0&&(i+=","),i+=`${this.choosenValue[e].year}-${this.choosenValue[e].month+1}-${this.choosenValue[e].no}`;return i},borderLightColor(){return this.$theme=="light"?"rgba(121, 119, 117, 0.6)":this.$theme=="dark"||this.$theme=="custom"?"rgba(255, 255, 255, 0.6)":"rgba(121, 119, 117, 0.6)"},backgroundLightColor(){return this.$theme=="light"?"rgba(121, 119, 117, 0.3)":this.$theme=="dark"||this.$theme=="custom"?"rgba(255, 255, 255, 0.3)":"rgba(121, 119, 117, 0.3)"}},mounted(){},methods:{}},Uc=["title"],Yc=["placeholder","value"];function qc(i,e,t,s,n,r){const o=K("fv-reveal-container");return f(),g("div",{class:"calendar-picker-drop-down",style:V({borderRadius:`${t.borderRadius}px`}),title:r.inputValue},[L(o,{parent:()=>i.$el,class:"fv-calendar-date-picker-reveal-container",backgroundColor:r.backgroundLightColor,borderColor:r.borderLightColor,backgroundGradientSize:120,borderGradientSize:80,borderWidth:t.borderWidth,borderRadius:t.borderRadius,disabled:t.disabled},null,8,["parent","backgroundColor","borderColor","borderWidth","borderRadius","disabled"]),h("div",{class:"calendar-picker-drop-down-container",style:V({borderRadius:`${t.borderRadius}px`})},[w(i.$slots,"input",{placeholder:t.placeholder,value:r.inputValue},()=>[h("input",{class:"input",placeholder:t.placeholder,readonly:"",value:r.inputValue,style:V({color:t.inputForeground,background:t.inputBackground,borderRadius:`${t.borderRadius}px`})},null,12,Yc),h("i",{class:k(["right-icon ms-Icon",[`ms-Icon--${t.dropDownIcon}`]]),"aria-hidden":"true",style:V({color:t.dropDownIconForeground})},null,6)])],4)],12,Uc)}const Xc=z(Gc,[["render",qc]]),Kc={name:"FvCalendarDatePicker",emits:["update:modelValue"],components:{pickerInput:Xc},props:{...Wc,modelValue:{default:()=>new Date},start:{default:1900},end:{default:3e3},lan:{default:"en"},borderWidth:{default:2},placeholder:{default:"Pick a day"},borderRadius:{default:"3"},inputForeground:{default:""},inputBackground:{default:""},dropDownIcon:{default:"CalendarDay"},dropDownIconForeground:{default:""},multiple:{default:"single"},disabled:{default:!1}},data(){return{thisValue:this.$SDate.Parse(this.$SDate.DateToString(this.modelValue)),dates:[],show:{calendar:!1}}},watch:{value(i,e){this.$SDate.IsSameDate(i,e)||(this.thisValue=this.$SDate.Parse(this.$SDate.DateToString(i)),this.multiple=="single"&&(this.dates=[{year:i.getFullYear(),month:i.getMonth(),no:i.getDate()}]))},thisValue(i,e){this.$emit("update:modelValue",this.$SDate.Parse(this.$SDate.DateToString(this.thisValue)))}},computed:{isDisabled(){return this.disabled.toString()=="true"||this.disabled=="disabled"||this.disabled===""},$theme(){return q(this.$props).theme.value}},mounted(){this.outSideClickInit()},methods:{outSideClickInit(){window.addEventListener("click",i=>{let e=i.target,t=!1;for(;e&&e.tagName&&e.tagName.toLowerCase()!="body";){if(e==this.$el){t=!0;break}e=e.parentNode}t||(this.show.calendar=!1)}),window.addEventListener("touchend",i=>{let e=i.target,t=!1;for(;e&&e.tagName&&e.tagName.toLowerCase()!="body";){if(e==this.$el){t=!0;break}e=e.parentNode}t||(this.show.calendar=!1)})},chooseDates(i){this.dates=i,this.$emit("choosen-dates",i),this.multiple=="single"&&(this.show.calendar=!1)}}},jc={key:0,class:"calendar-container"};function Jc(i,e,t,s,n,r){const o=K("picker-input"),a=K("fv-calendar-view");return f(),g("div",{class:k(["fv-CalendarDatePicker",[r.$theme,{disabled:r.isDisabled}]])},[L(o,{modelValue:n.dates,"onUpdate:modelValue":e[0]||(e[0]=l=>n.dates=l),placeholder:t.placeholder,theme:r.$theme,disabled:r.isDisabled,borderWidth:t.borderWidth,borderRadius:t.borderRadius,inputForeground:t.inputForeground,inputBackground:t.inputBackground,dropDownIcon:t.dropDownIcon,dropDownIconForeground:t.dropDownIconForeground,onClick:e[1]||(e[1]=l=>n.show.calendar=r.isDisabled?!1:!n.show.calendar)},null,8,["modelValue","placeholder","theme","disabled","borderWidth","borderRadius","inputForeground","inputBackground","dropDownIcon","dropDownIconForeground"]),L(fe,{name:"fv-calendar-container"},{default:x(()=>[n.show.calendar?(f(),g("div",jc,[L(a,{modelValue:n.thisValue,"onUpdate:modelValue":e[2]||(e[2]=l=>n.thisValue=l),multiple:t.multiple,start:t.start,end:t.end,lan:t.lan,theme:i.theme,onChoosenDates:r.chooseDates},null,8,["modelValue","multiple","start","end","lan","theme","onChoosenDates"])])):O("",!0)]),_:1})],2)}const Qc=z(Kc,[["render",Jc]]),Zc=ie(Qc),ef={...te};let xe=class{static preProcessElements(e,t){let s=[];return e.forEach(n=>{n.hashCode||(n.hashCode=this.GuidWithoutDash());let r={oriBg:getComputedStyle(n)["background-image"],oriBorder:getComputedStyle(n)["border-image"],oriBgRepeat:getComputedStyle(n)["background-repeat"],isBindingClickEvent:!1,wave:0,clickWave:{},revealPosition:{x:0,y:0},options:{backgroundGradientSize:150,borderGradientSize:80,borderLightColor:"rgba(255, 255, 255, 0.25)",backgroundLightColor:"rgba(255, 255, 255, 0.25)",status:"enabled"},el:n};r.options=Object.assign(r.options,t),s.push(r)}),s}static getOffset(e){return{top:e.el.getBoundingClientRect().top,left:e.el.getBoundingClientRect().left}}static drawEffectBasic(e,t=!1,s="background"){let n,r;n=`radial-gradient(circle ${this.valueTrigger(e.options.borderGradientSize)}px at ${e.revealPosition.x}px ${e.revealPosition.y}px, ${this.valueTrigger(e.options.borderLightColor)}, rgba(255,255,255,0)) 5% 5% 5% 5%`,t===!1?r=`radial-gradient(circle ${this.valueTrigger(e.options.backgroundGradientSize)}px at ${e.revealPosition.x}px ${e.revealPosition.y}px, ${this.valueTrigger(e.options.backgroundLightColor)}, rgba(255,255,255,0))`:r=`radial-gradient(circle ${this.valueTrigger(e.options.backgroundGradientSize)}px at ${e.revealPosition.x}px ${e.revealPosition.y}px, ${this.valueTrigger(e.options.backgroundLightColor)}, rgba(255,255,255,0)), radial-gradient(circle ${e.wave}px at ${e.revealPosition.x}px ${e.revealPosition.y}px, rgba(255,255,255,0), ${this.valueTrigger(e.options.backgroundLightColor)}, rgba(255,255,255,0), rgba(255,255,255,0))`,s=="background"?t==!0?(e.wave=120,e.clickWave=setInterval(()=>{try{let o=e.wave,a=o/60+1;o+=a,o>=1e3?clearInterval(e.clickWave):(e.wave=o,r=`radial-gradient(circle ${this.valueTrigger(e.options.backgroundGradientSize)}px at ${e.revealPosition.x}px ${e.revealPosition.y}px, ${this.valueTrigger(e.options.backgroundLightColor)}, rgba(255,255,255,0)), radial-gradient(circle ${e.wave}px at ${e.revealPosition.x}px ${e.revealPosition.y}px, rgba(255,255,255,0), ${this.valueTrigger(e.options.backgroundLightColor)}, rgba(255,255,255,0), rgba(255,255,255,0))`,e.el.style.backgroundImage=r,e.el.style.backgroundRepeat="no-repeat")}catch{}},50)):(clearInterval(e.clickWave),e.wave=0,r=`radial-gradient(circle ${this.valueTrigger(e.options.backgroundGradientSize)}px at ${e.revealPosition.x}px ${e.revealPosition.y}px, ${this.valueTrigger(e.options.backgroundLightColor)}, rgba(255,255,255,0))`,e.el.style.backgroundImage=r,e.el.style.backgroundRepeat="no-repeat"):s=="border"&&(e.el.style.borderImage=n)}static drawEffectBorder(e,t=!1){this.drawEffectBasic(e,t,"border")}static drawEffectBackground(e,t=!1){this.drawEffectBasic(e,t,"background")}static clearBackground(e){e&&(clearInterval(e.clickWave),e.wave=0,e.el.style.backgroundImage=e.oriBg,e.el.style.backgroundRepeat=e.oriBgRepeat)}static clearBorder(e){e.el.style.borderImage=e.oriBorder}static isInsideElement(e,t,s){const n={left:e.el.getBoundingClientRect().left,right:e.el.getBoundingClientRect().right,top:e.el.getBoundingClientRect().top,bottom:e.el.getBoundingClientRect().bottom};return t>=n.left&&t<=n.right&&s>=n.top&&s<=n.bottom}static distanceOfElement(e,t,s){const n={left:e.el.getBoundingClientRect().left,right:e.el.getBoundingClientRect().right,top:e.el.getBoundingClientRect().top,bottom:e.el.getBoundingClientRect().bottom};return{left:n.left-t,right:t-n.right,top:n.top-s,bottom:s-n.bottom}}static GuidWithoutDash(){function e(){return((1+Math.random())*65536|0).toString(16).substring(1)}return e()+e()+e()+e()+e()+e()+e()+e()}static valueTrigger(e){return typeof e=="function"?e():e}static getOffset(e){return{top:e.el.getBoundingClientRect().top,left:e.el.getBoundingClientRect().left}}static typeObj(e){let t=Object.prototype.toString.call(e);return t.substring(8,t.length-1)}static GuidWithoutDash(){function e(){return((1+Math.random())*65536|0).toString(16).substring(1)}return e()+e()+e()+e()+e()+e()+e()+e()}};class tf{constructor(){this.FvRevealElementList={window:{}},this.windowEventBinded=!1,this.applyCommonEffects(),this.timer=setInterval(()=>{for(let e in this.FvRevealElementList.window)this.refreshChildren(e);for(let e in this.FvRevealElementList)e!="window"&&this.refreshChildren(e)},1e3)}apply(e,t){let s={key:xe.GuidWithoutDash(),selector:".eff-reveal-border",backgroundGradientSize:150,borderGradientSize:80,borderLightColor:"rgba(255, 255, 255, 0.25)",backgroundLightColor:"rgba(255, 255, 255, 0.25)",eventTriggerMode:"window",status:"enabled"};t=Object.assign(s,t);let n=this.getChildren(e,t);return t.eventTriggerMode==="window"?(this.FvRevealElementList.window[t.key]={key:t.key,el:e,options:t,children:this.getChildrenX(n,t)},this.applyCommonEffects()):(this.FvRevealElementList[t.key]={key:t.key,el:e,options:t,children:this.getChildrenX(n,t)},this.applyCommonEffects(t.key)),t.key}refreshChildren(e){let t=this.FvRevealElementList[e];t||(t=this.FvRevealElementList.window[e]);let s=[].slice.call(this.getChildren(t.el,t.options),0);t.children=[...t.children,...this.getChildrenX(s.filter(n=>!n.hashCode),t.options)]}getChildren(e,t){return e==null&&(e=document),t.selector?typeof t.selector=="string"?e.querySelectorAll(t.selector):Array.isArray(t.selector)?t.maskedSelector:xe.typeObj(t.selector)==="NodeList"?t.selector:[t.selector]:[]}getChildrenX(e,t){let s=xe.preProcessElements(e,t);for(let n of s)this.applyClickEffects(n);return s}applyCommonEffects(e="window"){if(typeof global<"u")return;let t;if(window!==void 0){if(t=window,this.windowEventBinded)return;this.windowEventBinded=!0}if(e!="window"&&(t=this.FvRevealElementList[e].el),t===void 0)return;let s=e==="window"?this.FvRevealElementList.window:{key:this.FvRevealElementList[e]},n=o=>{if(o.type.indexOf("mouse")<0&&(o=o.targetTouches[0]),!!s)for(let a in s){let l=s[a];for(let u of l.children){if(xe.valueTrigger(u.options.status)==="disabled")continue;let d=o.pageX-xe.getOffset(u).left-window.scrollX,c=o.pageY-xe.getOffset(u).top-window.scrollY;u.revealPosition.x=d,u.revealPosition.y=c;let m=xe.distanceOfElement(u,o.clientX,o.clientY);m.left>300||m.top>300||m.right>300||m.bottom>300||xe.drawEffectBorder(u),xe.isInsideElement(u,o.clientX,o.clientY)?u.wave==0&&xe.drawEffectBackground(u):xe.clearBackground(u)}}},r=o=>{if(s)for(let a in s){let l=s[a];for(let u of l.children)xe.clearBackground(u),xe.clearBorder(u)}};t.addEventListener("mousemove",n),t.addEventListener("touchmove",n),t.addEventListener("mouseleave",r),t.addEventListener("touchend",r)}applyClickEffects(e){let t=r=>{let o=r.target,a=!1;for(;o&&o.tagName&&o.tagName.toLowerCase()!="body";){if(o==e.el){a=!0;break}o=o.parentNode}return a},s=r=>{if(!t(r)||xe.valueTrigger(e.options.status)==="disabled")return;r.type.indexOf("mouse")<0&&(r=r.targetTouches[0]);let o=r.pageX-xe.getOffset(e).left-window.scrollX,a=r.pageY-xe.getOffset(e).top-window.scrollY;e.revealPosition.x=o,e.revealPosition.y=a,xe.drawEffectBackground(e,!0)},n=r=>{xe.drawEffectBackground(e)};e.isBindingClickEvent||(e.el.addEventListener("mousedown",s),e.el.addEventListener("touchstart",s),e.el.addEventListener("mouseup",n),e.isBindingClickEvent=!0)}destroy(e){let t=[];return this.FvRevealElementList.window[e]&&t.push("window"),this.FvRevealElementList[e]&&t.push("parent"),delete this.FvRevealElementList.window[e],delete this.FvRevealElementList[e],{exists:t,key:e}}}class ve{static preProcessElements(e,t,s="target"){let n=[];return e.forEach(r=>{r.hashCode||(r.hashCode=this.GuidWithoutDash());let o={oriBg:getComputedStyle(r)["background-image"],oriBorder:getComputedStyle(r)["border-image"],oriBgRepeat:getComputedStyle(r)["background-repeat"],isBindingClickEvent:!1,wave:0,clickWave:{},revealPosition:{x:0,y:0},options:{backgroundGradientSize:150,borderGradientSize:80,borderLightColor:"rgba(255, 255, 255, 0.25)",backgroundLightColor:"rgba(255, 255, 255, 0.25)",elementType:s,status:"enabled"},el:r};o.options=Object.assign(o.options,t),n.push(o)}),n}static getOffset(e){return{top:e.el.getBoundingClientRect().top,left:e.el.getBoundingClientRect().left}}static drawEffectBasic(e,t=!1,s="background"){let n,r;n=`radial-gradient(circle ${this.valueTrigger(e.options.borderGradientSize)}px at ${e.revealPosition.x}px ${e.revealPosition.y}px, ${this.valueTrigger(e.options.borderLightColor)}, rgba(255,255,255,0))`,t===!1?r=`radial-gradient(circle ${this.valueTrigger(e.options.backgroundGradientSize)}px at ${e.revealPosition.x}px ${e.revealPosition.y}px, ${this.valueTrigger(e.options.backgroundLightColor)}, rgba(255,255,255,0))`:r=`radial-gradient(circle ${this.valueTrigger(e.options.backgroundGradientSize)}px at ${e.revealPosition.x}px ${e.revealPosition.y}px, ${this.valueTrigger(e.options.backgroundLightColor)}, rgba(255,255,255,0)), radial-gradient(circle ${e.wave}px at ${e.revealPosition.x}px ${e.revealPosition.y}px, rgba(255,255,255,0), ${this.valueTrigger(e.options.backgroundLightColor)}, rgba(255,255,255,0), rgba(255,255,255,0))`,s=="background"?t==!0?(e.wave=120,e.clickWave=setInterval(()=>{try{let o=e.wave,a=o/60+1;o+=a,o>=1e3?clearInterval(e.clickWave):(e.wave=o,r=`radial-gradient(circle ${this.valueTrigger(e.options.backgroundGradientSize)}px at ${e.revealPosition.x}px ${e.revealPosition.y}px, ${this.valueTrigger(e.options.backgroundLightColor)}, rgba(255,255,255,0)), radial-gradient(circle ${e.wave}px at ${e.revealPosition.x}px ${e.revealPosition.y}px, rgba(255,255,255,0), ${this.valueTrigger(e.options.backgroundLightColor)}, rgba(255,255,255,0), rgba(255,255,255,0))`,e.el.style.backgroundImage=r,e.el.style.backgroundRepeat="no-repeat")}catch{}},50)):(clearInterval(e.clickWave),e.wave=0,r=`radial-gradient(circle ${this.valueTrigger(e.options.backgroundGradientSize)}px at ${e.revealPosition.x}px ${e.revealPosition.y}px, ${this.valueTrigger(e.options.backgroundLightColor)}, rgba(255,255,255,0))`,e.el.style.backgroundImage=r,e.el.style.backgroundRepeat="no-repeat"):s=="border"&&(e.el.style.backgroundImage=n,e.el.style.backgroundRepeat="no-repeat")}static drawEffectBorder(e,t=!1){this.drawEffectBasic(e,t,"border")}static drawEffectBackground(e,t=!1){this.drawEffectBasic(e,t,"background")}static clearBackground(e){e&&(clearInterval(e.clickWave),e.wave=0,e.el.style.backgroundImage=e.oriBg,e.el.style.backgroundRepeat=e.oriBgRepeat)}static isInsideElement(e,t,s){const n={left:e.el.getBoundingClientRect().left,right:e.el.getBoundingClientRect().right,top:e.el.getBoundingClientRect().top,bottom:e.el.getBoundingClientRect().bottom};return t>=n.left&&t<=n.right&&s>=n.top&&s<=n.bottom}static distanceOfElement(e,t,s){const n={left:e.el.getBoundingClientRect().left,right:e.el.getBoundingClientRect().right,top:e.el.getBoundingClientRect().top,bottom:e.el.getBoundingClientRect().bottom};return{left:n.left-t,right:t-n.right,top:n.top-s,bottom:s-n.bottom}}static GuidWithoutDash(){function e(){return((1+Math.random())*65536|0).toString(16).substring(1)}return e()+e()+e()+e()+e()+e()+e()+e()}static valueTrigger(e){return typeof e=="function"?e():e}static getOffset(e){return{top:e.el.getBoundingClientRect().top,left:e.el.getBoundingClientRect().left}}static typeObj(e){let t=Object.prototype.toString.call(e);return t.substring(8,t.length-1)}static GuidWithoutDash(){function e(){return((1+Math.random())*65536|0).toString(16).substring(1)}return e()+e()+e()+e()+e()+e()+e()+e()}}class sf{constructor(){this.FvRevealElementList={window:{}},this.windowEventBinded=!1,this.applyCommonEffects(),this.timer=setInterval(()=>{for(let e in this.FvRevealElementList.window)this.refreshChildren(e);for(let e in this.FvRevealElementList)e!="window"&&this.refreshChildren(e)},1e3)}apply(e,t){let s={key:ve.GuidWithoutDash(),selector:".eff-reveal-border",backgroundGradientSize:150,borderGradientSize:80,borderLightColor:"rgba(255, 255, 255, 0.25)",backgroundLightColor:"rgba(255, 255, 255, 0.25)",eventTriggerMode:"window",elementType:"target",status:"enabled"};t=Object.assign(s,t);let n=this.getTargetChildren(e,t),r=this.getMaskedChildren(e,t);return t.eventTriggerMode==="window"?(this.FvRevealElementList.window[t.key]={key:t.key,el:e,options:t,targetChildren:this.getChildrenX(n,t),maskedChildren:this.getChildrenX(r,t,"masked")},this.applyCommonEffects()):(this.FvRevealElementList[t.key]={key:t.key,el:e,options:t,targetChildren:this.getChildrenX(n,t),maskedChildren:this.getChildrenX(r,t,"masked")},this.applyCommonEffects(t.key)),t.key}refreshChildren(e){let t=this.FvRevealElementList[e];t||(t=this.FvRevealElementList.window[e]);let s=[].slice.call(this.getTargetChildren(parent,t.options),0),n=[].slice.call(this.getMaskedChildren(parent,t.options),0);t.targetChildren=[...t.targetChildren,...this.getChildrenX(s.filter(r=>!r.hashCode),t.options)],t.maskedChildren=[...t.maskedChildren,...this.getChildrenX(n.filter(r=>!r.hashCode),t.options,"masked")]}getMaskedChildren(e,t){return e==null&&(e=document),t.maskedSelector?typeof t.maskedSelector=="string"?e.querySelectorAll(t.maskedSelector):Array.isArray(t.maskedSelector)||ve.typeObj(t.maskedSelector)==="NodeList"?t.maskedSelector:[t.maskedSelector]:[]}getTargetChildren(e,t){return e==null&&(e=document),t.selector?typeof t.selector=="string"?e.querySelectorAll(t.selector):Array.isArray(t.selector)||ve.typeObj(t.selector)==="NodeList"?t.selector:[t.selector]:[]}getChildrenX(e,t,s="target"){let n=ve.preProcessElements(e,t,s);if(s==="target")for(let r of n)this.applyClickEffects(r);return n}applyCommonEffects(e="window"){if(typeof global<"u")return;let t;if(window!==void 0){if(t=window,this.windowEventBinded)return;this.windowEventBinded=!0}if(e!="window"&&(t=this.FvRevealElementList[e].el),t===void 0)return;let s=e==="window"?this.FvRevealElementList.window:{key:this.FvRevealElementList[e]},n=o=>{if(o.type.indexOf("mouse")<0&&(o=o.targetTouches[0]),!!s)for(let a in s){let l=s[a];for(let u of l.targetChildren){if(ve.valueTrigger(u.options.status)==="disabled")continue;let d=o.pageX-ve.getOffset(u).left-window.scrollX,c=o.pageY-ve.getOffset(u).top-window.scrollY;u.revealPosition.x=d,u.revealPosition.y=c,ve.isInsideElement(u,o.clientX,o.clientY)?u.wave==0&&ve.drawEffectBackground(u):ve.clearBackground(u)}for(let u of l.maskedChildren){if(ve.valueTrigger(u.options.status)==="disabled")continue;let d=o.pageX-ve.getOffset(u).left-window.scrollX,c=o.pageY-ve.getOffset(u).top-window.scrollY;u.revealPosition.x=d,u.revealPosition.y=c;let m=ve.distanceOfElement(u,o.clientX,o.clientY);m.left>300||m.top>300||m.right>300||m.bottom>300||ve.drawEffectBorder(u)}}},r=o=>{if(s)for(let a in s){let l=s[a];for(let u of l.targetChildren)ve.clearBackground(u);for(let u of l.maskedChildren)ve.clearBackground(u)}};t.addEventListener("mousemove",n),t.addEventListener("touchmove",n),t.addEventListener("mouseleave",r),t.addEventListener("touchend",r)}applyClickEffects(e){let t=r=>{let o=r.target,a=!1;for(;o&&o.tagName&&o.tagName.toLowerCase()!="body";){if(o==e.el){a=!0;break}o=o.parentNode}return a},s=r=>{if(!t(r)||ve.valueTrigger(e.options.status)==="disabled")return;r.type.indexOf("mouse")<0&&(r=r.targetTouches[0]);let o=r.pageX-ve.getOffset(e).left-window.scrollX,a=r.pageY-ve.getOffset(e).top-window.scrollY;e.revealPosition.x=o,e.revealPosition.y=a,ve.drawEffectBackground(e,!0)},n=r=>{ve.drawEffectBackground(e)};e.isBindingClickEvent||(e.el.addEventListener("mousedown",s),e.el.addEventListener("touchstart",s),e.el.addEventListener("mouseup",n),e.isBindingClickEvent=!0)}destroy(e){let t=[];return this.FvRevealElementList.window[e]&&t.push("window"),this.FvRevealElementList[e]&&t.push("parent"),delete this.FvRevealElementList.window[e],delete this.FvRevealElementList[e],{exists:t,key:e}}}const ei=Ys("RevealCache",{state:()=>({revealHandlerList:new Array,revealDirectJs:void 0,revealMaskedJs:void 0}),actions:{initRevealInstances(){this.revealDirectJs||(this.revealDirectJs=new tf),this.revealMaskedJs||(this.revealMaskedJs=new sf)},setRevealHandler(i){this.revealHandlerList.push(i)},removeRevealHandler(i){let e=this.revealHandlerList.findIndex(t=>i===t.id);e!=-1&&this.revealHandlerList.splice(e,1)}}}),nf={props:{value:{default:()=>new Date},start:{default:1900},end:{default:3e3},size:{default:72.5},theme:{default:"global"}},setup(){const i=ei();return i.initRevealInstances(),{uR:i}},data(){return{thisValue:this.$SDate.Parse(this.$SDate.DateToString(this.value)),years:[],currentRange:0,FR:null,timer:{updateRange:{},scroller:{}},lock:{slide:!0}}},watch:{currentRange(i){this.$emit("range-change",i)}},computed:{$theme(){return q(this.$props).theme.value},year(){return this.thisValue.getFullYear()},month(){return this.thisValue.getMonth()},date(){return this.thisValue.getDate()},nowYear(){return new Date().getFullYear()},nowMonth(){return new Date().getMonth()},nowDate(){return new Date().getDate()},borderLightColor(){return()=>this.$theme=="light"?"rgba(121, 119, 117, 0.3)":this.$theme=="dark"||this.$theme=="custom"?"rgba(255, 255, 255, 0.3)":"rgba(121, 119, 117, 0.3)"},backgroundLightColor(){return()=>this.$theme=="light"?"rgba(121, 119, 117, 0.1)":this.$theme=="dark"||this.$theme=="custom"?"rgba(255, 255, 255, 0.1)":"rgba(121, 119, 117, 0.1)"}},mounted(){this.FRInit(),this.yearsInit(),this.scrollBottomToLoadInit(80),this.scrollTopToLoadInit(),this.rangeTimerInit()},methods:{FRInit(){this.FR=this.uR.revealMaskedJs.apply(this.$el,{maskedSelector:this.$refs.main,selector:[],borderGradientSize:90,backgroundGradientSize:120,borderLightColor:this.borderLightColor,backgroundLightColor:this.backgroundLightColor})},yearsInit(){let i=[],e=this.year-8;for(let t=0;t<28;t++)i.push(e),e++;this.years=i},scrollBottomToLoadInit(i=0){let e=this.$refs.main;e.addEventListener("scroll",t=>{e.scrollTop+i>=e.scrollHeight-e.clientHeight&&this.loadNext()})},scrollTopToLoadInit(i=0){let e=this.$refs.main;e.addEventListener("scroll",t=>{e.scrollTop<=80&&this.loadPrev()})},rangeTimerInit(){clearInterval(this.timer.updateRange),this.timer.updateRange=setInterval(()=>{try{let i=this.$refs.main.scrollTop;i=i+this.size*2,i=i/this.size*4,i=Math.floor(i),this.currentRange=Math.floor(this.years[i]/10)*10}catch{this.currentRange=0}},300)},async loadPrev(){let i=this.years[0];if(i==this.start)return 0;for(let e=0;e<16;e++){if(i<=this.start)return 0;i--,this.years.splice(0,0,i)}await this.delay(30),this.$refs.main.scrollTop=this.$refs.main.scrollTop+16/4*this.size},async loadNext(){let i=this.years[this.years.length-1];if(i==this.end)return 0;for(let e=0;e<16;e++){if(i>=this.end)return 0;i++,this.years.push(i)}await this.delay(30)},async slide(i){return this.lock.slide?(this.lock.slide=!1,clearInterval(this.timer.scroller),await new Promise(e=>{this.timer.scroller=setInterval(()=>{let t=this.years.indexOf(i);t==-1&&(i<this.currentRange?this.loadPrev():this.loadNext());let s=Math.floor(t/4)*this.size,n=-Math.floor((this.$refs.main.scrollTop-s)/7);this.$refs.main.scrollTop=this.$refs.main.scrollTop+n,n==0&&(this.$refs.main.scrollTop=s,this.lock.slide=!0,e(0),clearInterval(this.timer.scroller))},30)})):0},async delay(i){return await new Promise(e=>{setTimeout(()=>{e(i)},i)})},choose(i){this.$emit("choose",i)}},beforeUnmount(){clearInterval(this.timer.updateRange),this.uR.revealMaskedJs.destroy(this.FR)}},rf={class:"picker-container",ref:"main"},of=["onClick"];function af(i,e,t,s,n,r){return f(),g("div",rf,[(f(!0),g(Y,null,Z(n.years,(o,a)=>(f(),g("button",{key:`year: ${a}`,class:k(["picker-btn",{range:o>=n.currentRange&&o-n.currentRange<10,current:o==r.nowYear}]),onClick:l=>r.choose(o)},H(o),11,of))),128))],512)}const lf=z(nf,[["render",af]]),uf={props:{value:{default:()=>new Date},start:{default:1900},end:{default:3e3},size:{default:72.5},lan:{default:"en"},theme:{default:"global"}},setup(){const i=ei();return i.initRevealInstances(),{uR:i}},data(){return{thisValue:this.$SDate.Parse(this.$SDate.DateToString(this.value)),months:[],monthList:[{en:"Jan",zh:"一月"},{en:"Feb",zh:"二月"},{en:"Mar",zh:"三月"},{en:"Apr",zh:"四月"},{en:"May",zh:"五月"},{en:"Jun",zh:"六月"},{en:"Jul",zh:"七月"},{en:"Aug",zh:"八月"},{en:"Set",zh:"九月"},{en:"Oct",zh:"十月"},{en:"Nov",zh:"十一月"},{en:"Dec",zh:"十二月"}],currentRange:0,FR:null,timer:{updateRange:{},scroller:{}},lock:{slide:!0}}},watch:{currentRange(i){this.$emit("range-change",i)}},computed:{$theme(){return q(this.$props).theme.value},year(){return this.thisValue.getFullYear()},month(){return this.thisValue.getMonth()},date(){return this.thisValue.getDate()},nowYear(){return new Date().getFullYear()},nowMonth(){return new Date().getMonth()},nowDate(){return new Date().getDate()},borderLightColor(){return()=>this.$theme=="light"?"rgba(121, 119, 117, 0.3)":this.$theme=="dark"||this.$theme=="custom"?"rgba(255, 255, 255, 0.3)":"rgba(121, 119, 117, 0.3)"},backgroundLightColor(){return()=>this.$theme=="light"?"rgba(121, 119, 117, 0.1)":this.$theme=="dark"||this.$theme=="custom"?"rgba(255, 255, 255, 0.1)":"rgba(121, 119, 117, 0.1)"}},mounted(){this.FRInit(),this.monthsInit(),this.scrollBottomToLoadInit(80),this.scrollTopToLoadInit(),this.rangeTimerInit()},methods:{FRInit(){this.FR=this.uR.revealMaskedJs.apply(this.$el,{maskedSelector:this.$refs.main,selector:[],borderGradientSize:90,backgroundGradientSize:120,borderLightColor:this.borderLightColor,backgroundLightColor:this.backgroundLightColor})},monthsInit(){let i=[],e=this.year-1;for(let t=0;t<3;t++){for(let s=0;s<this.monthList.length;s++)i.push({year:e,no:s,name:this.monthList[s][this.lan]});e++}this.months=i,setTimeout(()=>{this.$refs.main.scrollTop=this.$refs.main.scrollTop+this.size*3},50)},scrollBottomToLoadInit(i=0){let e=this.$refs.main;e.addEventListener("scroll",t=>{e.scrollTop+i>=e.scrollHeight-e.clientHeight&&this.loadNext()})},scrollTopToLoadInit(i=0){let e=this.$refs.main;e.addEventListener("scroll",t=>{e.scrollTop<=80&&this.loadPrev()})},rangeTimerInit(){clearInterval(this.timer.updateRange),this.timer.updateRange=setInterval(()=>{try{let i=this.$refs.main.scrollTop;i=i+this.size*2,i=i/this.size*4,i=Math.floor(i),this.currentRange=this.months[i+3]}catch{this.currentRange={year:0,no:0,name:this.monthList[0][this.lan]}}},300)},async loadPrev(){let i=this.months[0].year;if(i==this.start)return 0;i--;for(let e=this.monthList.length-1;e>=0;e--)this.months.splice(0,0,{year:i,no:e,name:this.monthList[e][this.lan]});await this.delay(30),this.$refs.main.scrollTop=this.$refs.main.scrollTop+12/4*this.size},async loadNext(){let i=this.months[this.months.length-1].year;if(i==this.end)return 0;i++;for(let e=0;e<this.monthList.length;e++)this.months.push({year:i,no:e,name:this.monthList[e][this.lan]});await this.delay(30)},async slide(i){return this.lock.slide?(this.lock.slide=!1,clearInterval(this.timer.scroller),await new Promise(e=>{this.timer.scroller=setInterval(()=>{let t=this.months.find(o=>o.year==i.year&&o.no==0);if(t==null)return i<this.currentRange.year?this.loadPrev():this.loadNext(),0;let s=this.months.indexOf(t),n=Math.floor(s/4)*this.size,r=-Math.floor((this.$refs.main.scrollTop-n)/7);this.$refs.main.scrollTop=this.$refs.main.scrollTop+r,r==0&&(this.$refs.main.scrollTop=n,this.lock.slide=!0,e(0),clearInterval(this.timer.scroller))},30)})):0},async delay(i){return await new Promise(e=>{setTimeout(()=>{e(i)},i)})},choose(i){this.$emit("choose",i)}},beforeUnmount(){clearInterval(this.timer.updateRange),this.uR.revealMaskedJs.destroy(this.FR)}},df={class:"picker-container",ref:"main"},hf=["onClick"];function cf(i,e,t,s,n,r){return f(),g("div",df,[(f(!0),g(Y,null,Z(n.months,(o,a)=>(f(),g("button",{key:`year: ${a}`,class:k(["picker-btn",{range:o.year===n.currentRange.year,current:o.year===r.nowYear&&o.no===r.nowMonth}]),onClick:l=>r.choose(o)},H(o.name),11,hf))),128))],512)}const ff=z(uf,[["render",cf]]),mf={props:{value:{default:()=>new Date},start:{default:1900},end:{default:3e3},multiple:{default:"single"},size:{default:41},lan:{default:"en"},theme:{default:"global"}},setup(){const i=ei();return i.initRevealInstances(),{uR:i}},data(){return{FR:null,thisValue:this.$SDate.Parse(this.$SDate.DateToString(this.value)),days:[],weekdays:{en:["Su","Mo","Tu","We","Th","Fr","Sa"],zh:["日","一","二","三","四","五","六"]},dayList:{leap:[31,29,31,30,31,30,31,31,30,31,30,31],default:[31,28,31,30,31,30,31,31,30,31,30,31]},currentRange:0,currentChoose:[],timer:{updateRange:{},scroller:{}},lock:{slide:!0}}},watch:{currentRange(i){this.$emit("range-change",i)},multiple(i){i=="single"&&(this.currentChoose=[this.currentChoose[0]])}},computed:{$theme(){return q(this.$props).theme.value},year(){return this.thisValue.getFullYear()},month(){return this.thisValue.getMonth()},date(){return this.thisValue.getDate()},nowYear(){return new Date().getFullYear()},nowMonth(){return new Date().getMonth()},nowDate(){return new Date().getDate()},borderLightColor(){return()=>this.$theme=="light"?"rgba(121, 119, 117, 0.3)":this.$theme=="dark"||this.$theme=="custom"?"rgba(255, 255, 255, 0.3)":"rgba(121, 119, 117, 0.3)"},backgroundLightColor(){return()=>this.$theme=="light"?"rgba(121, 119, 117, 0.1)":this.$theme=="dark"||this.$theme=="custom"?"rgba(255, 255, 255, 0.1)":"rgba(121, 119, 117, 0.1)"}},mounted(){this.FRInit(),this.daysInit(),this.scrollBottomToLoadInit(80),this.scrollTopToLoadInit(),this.rangeTimerInit()},methods:{FRInit(){this.FR=this.uR.revealMaskedJs.apply(this.$el,{maskedSelector:this.$refs.main,selector:[],borderGradientSize:90,backgroundGradientSize:120,borderLightColor:this.borderLightColor,backgroundLightColor:this.backgroundLightColor})},async daysInit(){let i=[],e=this.$SDate.Parse(this.$SDate.DateToString(this.thisValue));e.setDate(1);let t=this.$SDate.Parse(this.$SDate.DateToString(e));t.setMonth(t.getMonth()-1);let s=e.getDay()+14;for(let n=this.dayList[this.leapYear(t.getFullYear())][t.getMonth()]-s;n<this.dayList[this.leapYear(t.getFullYear())][t.getMonth()];n++)i.push({year:t.getFullYear(),month:t.getMonth(),no:n+1});for(let n=0;n<2;n++){for(let r=0;r<this.dayList[this.leapYear(e.getFullYear())][e.getMonth()];r++)i.push({year:e.getFullYear(),month:e.getMonth(),no:r+1});e.setMonth(e.getMonth()+1)}this.days=i,await this.delay(50),this.$refs.main.scrollTop=this.$refs.main.scrollTop+this.size*2,this.loadPrev()},scrollBottomToLoadInit(i=0){let e=this.$refs.main;e.addEventListener("scroll",t=>{e.scrollTop+i>=e.scrollHeight-e.clientHeight&&this.loadNext()})},scrollTopToLoadInit(i=0){let e=this.$refs.main;e.addEventListener("scroll",t=>{e.scrollTop<=80&&this.loadPrev()})},rangeTimerInit(){clearInterval(this.timer.updateRange),this.timer.updateRange=setInterval(()=>{try{let i=this.$refs.main.scrollTop;i=i+this.size*2,i=i/this.size*7,i=Math.floor(i),this.currentRange=this.days[i+6]}catch{this.currentRange={year:0,month:0,no:0}}},300)},async loadPrev(){let i=new Date,e=0;if(i.setDate(this.days[0].no),i.setMonth(this.days[0].month),i.setFullYear(this.days[0].year),i.getDate()!=1)for(let n=i.getDate()-2;n>=0;n--)this.days.splice(0,0,{year:i.getFullYear(),month:i.getMonth(),no:n+1}),e++;if(i.getFullYear()==this.start&&i.getMonth()==0)return 0;i.setDate(1),i.setMonth(this.days[0].month-1);for(let n=this.dayList[this.leapYear(i.getFullYear())][i.getMonth()]-1;n>=0;n--)this.days.splice(0,0,{year:i.getFullYear(),month:i.getMonth(),no:n+1}),e++;let t=this.$SDate.Parse(this.$SDate.DateToString(i));t.setMonth(t.getMonth()-1);let s=i.getDay()+14;for(let n=this.dayList[this.leapYear(t.getFullYear())][t.getMonth()]-1;n>=this.dayList[this.leapYear(t.getFullYear())][t.getMonth()]-s;n--)this.days.splice(0,0,{year:t.getFullYear(),month:t.getMonth(),no:n+1}),e++;e=Math.floor(e/7),await this.delay(30),this.$refs.main.scrollTop=this.$refs.main.scrollTop+e*this.size},async loadNext(){let i=new Date;if(i.setDate(1),i.setMonth(this.days[this.days.length-1].month),i.setFullYear(this.days[this.days.length-1].year),i.getFullYear()==this.end&&i.getMonth()==11)return 0;i.setMonth(this.days[this.days.length-1].month+1);for(let e=0;e<this.dayList[this.leapYear(i.getFullYear())][i.getMonth()];e++)this.days.push({year:i.getFullYear(),month:i.getMonth(),no:e+1});await this.delay(30)},async slide(i){if(!this.lock.slide)return 0;this.lock.slide=!1;let e=this.$SDate.Parse(`${i.year}-${i.month+1}-1 0:0:0`),t=this.$SDate.Parse(`${this.currentRange.year}-${this.currentRange.month+1}-${this.currentRange.no} 0:0:0`);return clearInterval(this.timer.scroller),await new Promise(s=>{this.timer.scroller=setInterval(()=>{let n=this.days.find(l=>l.year==i.year&&l.month==i.month&&l.no==1);if(n==null)return this.$SDate.DisTime(e,t)>0?this.loadPrev():this.loadNext(),0;let r=this.days.indexOf(n),o=Math.floor(r/7)*this.size,a=-Math.floor((this.$refs.main.scrollTop-o)/2);this.$refs.main.scrollTop=this.$refs.main.scrollTop+a,a==0&&(this.$refs.main.scrollTop=o,this.lock.slide=!0,s(0),clearInterval(this.timer.scroller))},60)})},leapYear(i){return i%4==0&&i%100!=0||i%400==0?"leap":"default"},choose(i){if(this.multiple=="single")this.currentChoose=[i];else if(this.multiple=="multiple")this.currentChoose.push(i);else if(this.multiple=="range"){let e=this.days.indexOf(i),t=this.days.indexOf(this.currentChoose[this.currentChoose.length-1]);if(this.currentChoose.length==0)this.currentChoose=[i];else if(e>=t)for(let s=t+1;s<=e;s++)this.currentChoose.push(this.days[s]);else this.currentChoose=[i]}this.$emit("choosen-dates",this.currentChoose),this.$emit("choose",i)},async delay(i){return await new Promise(e=>{setTimeout(()=>{e(i)},i)})},isChoose(i){return this.currentChoose.indexOf(i)>-1}},beforeUnmount(){clearInterval(this.timer.updateRange),clearInterval(this.timer.scroller),this.uR.revealMaskedJs.destroy(this.FR)}},gf={class:"day-block"},pf={class:"weekdays-block"},vf={class:"picker-container",ref:"main"},bf=["title","onClick"];function yf(i,e,t,s,n,r){return f(),g("div",gf,[h("div",pf,[(f(!0),g(Y,null,Z(n.weekdays[t.lan],(o,a)=>(f(),g("button",{class:"weekday",key:`weekday: ${a}`},H(o),1))),128))]),h("div",vf,[(f(!0),g(Y,null,Z(n.days,(o,a)=>(f(),g("button",{key:`day: ${a}`,class:k(["picker-btn day",{range:o.year==n.currentRange.year&&o.month==n.currentRange.month,current:o.year==r.nowYear&&o.month==r.nowMonth&&o.no==r.nowDate,choose:r.isChoose(o)}]),title:`${o.year}/${o.month+1}/${o.no}`,onClick:l=>r.choose(o)},H(o.no),11,bf))),128))],512)])}const _f=z(mf,[["render",yf]]),wf={name:"FvCalendarView",components:{yearBox:lf,monthBox:ff,dateBox:_f},emits:["update:modelValue","choosen-dates","choose-year","choose-month","choose-date"],props:{...ef,modelValue:{default:()=>new Date},start:{default:1900},end:{default:3e3},multiple:{default:"single"},lan:{default:"en"}},data(){return{status:"date",thisValue:this.modelValue,yearRange:new Date().getFullYear(),monthRange:{year:new Date().getFullYear(),no:new Date().getMonth()},dayRange:{year:new Date().getFullYear(),month:new Date().getMonth(),no:1},transitionName:"fv-calendar-scale-down",monthList:{en:["January","February","March","April","May","June","July","August","September","October","November","December"],zh:["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"]}}},watch:{modelValue(i,e){this.$SDate.IsSameDate(i,e)||(this.thisValue=this.$SDate.Parse(this.$SDate.DateToString(i)))}},computed:{$theme(){return q(this.$props).theme.value},statement(){return this.status=="date"?this.lan=="en"?`${this.monthList.en[this.dayRange.month]} ${this.dayRange.year}`:`${this.dayRange.year}年${this.dayRange.month+1}日`:this.status=="month"?this.lan=="en"?`${this.monthRange.year}`:`${this.monthRange.year}年`:`${this.yearRange} - ${this.yearRange+9}`}},methods:{slideUp(){this.status=="year"?this.$refs.year.slide(this.yearRange-10):this.status=="month"?(this.monthRange.year-=1,this.$refs.month.slide(this.monthRange)):this.daySlide(-1)},slideDown(){this.status=="year"?this.$refs.year.slide(this.yearRange+10):this.status=="month"?(this.monthRange.year+=1,this.$refs.month.slide(this.monthRange)):this.daySlide()},daySlide(i=1){let e=this.$SDate.Parse(`${this.dayRange.year}-${this.dayRange.month+1}-${this.dayRange.no} 0:0:0`);e.setDate(1),e.setMonth(e.getMonth()+i),this.$refs.day.slide({year:e.getFullYear(),month:e.getMonth(),no:e.getDate()})},switchView(){this.transitionName="fv-calendar-scale-down",this.status=="date"?this.status="month":this.status=="month"&&(this.status="year")},chooseYear(i){this.transitionName="fv-calendar-scale-up",this.thisValue.setFullYear(i),this.status="month",this.$emit("choose-year",i)},chooseMonth(i){this.transitionName="fv-calendar-scale-up",this.thisValue.setDate(1),this.thisValue.setMonth(i.no),this.thisValue.setFullYear(i.year),this.status="date",this.$emit("choose-month",this.thisValue)},chooseDate(i){this.thisValue.setDate(i.no),this.thisValue.setMonth(i.month),this.thisValue.setFullYear(i.year),this.$emit("choose-date",this.thisValue),this.$emit("update:modelValue",this.$SDate.Parse(this.$SDate.DateToString(this.thisValue)))}}},kf={class:"fv-calendar-control-block"},Cf=h("span",{class:"slider-btn"},[h("i",{class:"ms-Icon ms-Icon--CaretSolidUp"})],-1),xf=h("i",{class:"ms-Icon ms-Icon--CaretSolidDown"},null,-1),Sf=[xf],Tf={class:"container-block"};function Vf(i,e,t,s,n,r){const o=K("year-box"),a=K("month-box"),l=K("date-box");return f(),g("div",{class:k(["fv-CalendarView",[r.$theme]])},[h("div",kf,[h("p",{class:"calendar-switcher",onClick:e[0]||(e[0]=(...u)=>r.switchView&&r.switchView(...u))},H(r.statement),1),h("div",{class:"slider-bar",onClick:e[2]||(e[2]=(...u)=>r.slideUp&&r.slideUp(...u))},[Cf,h("span",{class:"slider-btn",onClick:e[1]||(e[1]=(...u)=>r.slideDown&&r.slideDown(...u))},Sf)])]),h("div",Tf,[L(qi,{name:n.transitionName},{default:x(()=>[n.status=="year"?(f(),G(o,{modelValue:n.thisValue,"onUpdate:modelValue":e[3]||(e[3]=u=>n.thisValue=u),theme:r.$theme,lan:t.lan,ref:"year",key:"1",onRangeChange:e[4]||(e[4]=u=>n.yearRange=u),onChoose:r.chooseYear},null,8,["modelValue","theme","lan","onChoose"])):O("",!0),n.status=="month"?(f(),G(a,{modelValue:n.thisValue,"onUpdate:modelValue":e[5]||(e[5]=u=>n.thisValue=u),theme:r.$theme,lan:t.lan,ref:"month",key:"2",onRangeChange:e[6]||(e[6]=u=>n.monthRange=u),onChoose:r.chooseMonth},null,8,["modelValue","theme","lan","onChoose"])):O("",!0),n.status=="date"?(f(),G(l,{modelValue:n.thisValue,"onUpdate:modelValue":e[7]||(e[7]=u=>n.thisValue=u),theme:r.$theme,lan:t.lan,multiple:t.multiple,ref:"day",key:"3",onRangeChange:e[8]||(e[8]=u=>n.dayRange=u),onChoosenDates:e[9]||(e[9]=u=>i.$emit("choosen-dates",u)),onChoose:r.chooseDate},null,8,["modelValue","theme","lan","multiple","onChoose"])):O("",!0)]),_:1},8,["name"])])],2)}const If=z(wf,[["render",Vf]]),Lf=ie(If),$f={...te,space:{type:Number,default:0},beak:{type:Number,default:0},position:{type:String,default:"bottomCenter"},lockScroll:{type:Boolean,default:!0},focusTrap:{type:Boolean,default:!0},delayClose:{type:Number,default:0},effect:{type:String,default:"hover"},popperStyle:{type:Object,default:()=>({})},popperClass:{type:Array,default:()=>[]},keepalive:{type:Boolean,default:!1}},Pf=(i,e,t)=>{const s=U({}),n=U([]),r=U({}),o=U(),a=U(!1),l=["topLeft","topCenter","topRight","bottomLeft","bottomCenter","bottomRight","leftTop","leftCenter","leftBottom","rightTop","rightCenter","rightBottom"],u=U(),d=Q({get(){return i.disabled===!0?!1:t.value!==void 0?t.value:a.value},set(E){E===!0&&i.position!==void 0&&c(i.position),i.disabled||(t.value=E),a.value=E}}),c=E=>{if(u.value===void 0||o.value===void 0)return;const C=we(o.value),{width:A,height:D}=C;let F=l.indexOf(E),M=[];for(let B=0;B<l.length;++B){let J=(F+B)%l.length,oe=l[J];const N=i.beak===void 0?i.space===void 0?0:i.space:i.space===void 0?i.beak:i.beak+i.space;let re=p(u.value,N,oe,D,A),ne=m(re);oe==E&&(ne|=1),M.push([ne,oe])}M=M.sort((B,J)=>J[0]-B[0]),v(M[0][1])},m=E=>{let C=0;return E.left>=0&&(C|=16),E.top>=0&&(C|=8),E.width+E.left<=window.innerWidth&&(C|=4),E.height+E.top<=window.innerHeight&&(C|=2),C},p=(E,C,A,D,F)=>{const M=we(E),B={top:0,left:0,height:D,width:F};switch(A){case"bottomLeft":B.left=M.left,B.top=M.bottom+C;break;case"bottomCenter":B.left=M.left+(M.width-B.width)/2,B.top=M.bottom+C;break;case"bottomRight":B.left=M.right-B.width,B.top=M.bottom+C;break;case"topLeft":B.left=M.left,B.top=M.top-C-B.height;break;case"topCenter":B.left=M.left+(M.width-B.width)/2,B.top=M.top-C-B.height;break;case"topRight":B.left=M.right-B.width,B.top=M.top-C-B.height;break;case"leftTop":B.left=M.left-C-B.width,B.top=M.top;break;case"leftCenter":B.left=M.left-C-B.width,B.top=M.top+(M.height-B.height)/2;break;case"leftBottom":B.left=M.left-C-B.width,B.top=M.bottom-B.height;break;case"rightTop":B.left=M.right+C,B.top=M.top;break;case"rightCenter":B.left=M.right+C,B.top=M.top+(M.height-B.height)/2;break;case"rightBottom":B.left=M.right+C,B.top=M.bottom-B.height;break}return B},v=E=>{const C=we(u.value);r.value={},i.beak===void 0||i.beak<10?r.value.display="none":(r.value.display="block",r.value.width=`${i.beak}px`,r.value.height=`${i.beak}px`);const A=i.beak===void 0?i.space===void 0?0:i.space:i.space===void 0?i.beak:i.beak+i.space;switch(delete s.value.right,delete s.value.left,delete s.value.top,delete s.value.bottom,n.value=[E],E){case"bottomLeft":s.value.top=`${C.top+C.height+A}px`,s.value.left=`${C.left}px`,r.value.top="0",r.value.left="0",r.value.transform="translate(50%, -50%) rotate(45deg)";break;case"bottomRight":s.value.top=`${C.top+C.height+A}px`,s.value.left=`${C.right}px`,r.value.top="0",r.value.left="100%",r.value.transform="translate(-140%, -50%) rotate(45deg)";break;case"bottomCenter":s.value.top=`${C.top+C.height+A}px`,s.value.left=`${C.left+C.width/2}px`,r.value.top="0",r.value.transform="translate(-50%, -50%) rotate(45deg)";break;case"topLeft":s.value.top=`${C.top-A}px`,s.value.left=`${C.left}px`,r.value.bottom="0",r.value.left="0",r.value.transform="translate(50%, 50%) rotate(45deg)";break;case"topRight":s.value.top=`${C.top-A}px`,s.value.left=`${C.right}px`,r.value.bottom="0",r.value.left="100%",r.value.transform="translate(-140%, 50%) rotate(45deg)";break;case"topCenter":s.value.top=`${C.top-A}px`,s.value.left=`${C.left+C.width/2}px`,r.value.bottom="0",r.value.transform="translate(-50%, 50%) rotate(45deg)";break;case"leftTop":s.value.left=`${C.left-A}px`,s.value.top=`${C.top}px`,r.value.left="100%",r.value.top="0",r.value.transform="translate(-50%, 50%) rotate(45deg)";break;case"leftBottom":s.value.left=`${C.left-A}px`,s.value.top=`${C.bottom}px`,r.value.left="100%",r.value.bottom="0",r.value.transform="translate(-50%, -80%) rotate(45deg)";break;case"leftCenter":s.value.left=`${C.left-A}px`,s.value.top=`${C.top+C.height/2}px`,r.value.left="100%",r.value.top="50%",r.value.transform="translate(-50%, -50%) rotate(45deg)";break;case"rightTop":s.value.left=`${C.right+A}px`,s.value.top=`${C.top}px`,r.value.left="0",r.value.top="0",r.value.transform="translate(-50%, 50%) rotate(45deg)";break;case"rightBottom":s.value.left=`${C.right+A}px`,s.value.top=`${C.bottom}px`,r.value.left="0",r.value.bottom="0",r.value.transform="translate(-50%, -80%) rotate(45deg)";break;case"rightCenter":s.value.left=`${C.right+A}px`,s.value.top=`${C.top+C.height/2}px`,r.value.left="0",r.value.top="50%",r.value.transform="translate(-50%, -50%) rotate(45deg)";break}},_={resize:()=>{c(i.position===void 0?"bottomCenter":i.position)},scroll:()=>{i.lockScroll?c(i.position===void 0?"bottomCenter":i.position):d.value=!1},click:E=>{if(!d.value)return;const C=A=>{let D=A;for(;D!==null;){if(D===u.value||D===o.value)return!1;D=D.parentElement}return!0};!i.focusTrap&&C(E.target)&&(d.value=!1)}},b={},T={},S=U({hoverClose:void 0}),$=U({popper:!1});return{windowEvents:_,initTargetEvents:E=>{i.disabled||(i.effect==="click"?b.click=()=>{d.value=!d.value}:i.effect==="hover"&&(b.mouseenter=()=>{$.value.popper=!0,clearInterval(S.value.hoverClose),d.value=!0},b.mouseleave=()=>{$.value.popper&&($.value.popper=!1,S.value.hoverClose=setInterval(()=>{d.value=!1,$.value.popper=!0,clearInterval(S.value.hoverClose)},300))},T.mouseenter=()=>{let C=E.parent;for(;C;)if(C.type.name==="FvCallout")if(C.exposed!==null&&!C.exposed.popperShow.value)C.exposed.popperShow.value=!0;else break;else C=C.parent;$.value.popper=!0,d.value=!0,clearInterval(S.value.hoverClose)},T.mouseleave=()=>{let C=E.parent;for(;C;)if(C.type.name==="FvCallout"&&C.props.effect==="hover")if(C.exposed!==null&&C.exposed.popperShow.value)C.exposed.popperShow.value=!1,C.exposed.popperEvents.mouseleave();else break;else C=C.parent;d.value=!1}))},targetEvents:b,popperEvents:T,popperShow:d,callout:s,calloutClass:n,beak:r,targetElement:u,popper:o}},Mf=h("div",{class:"fv-callout-bg"},null,-1),Ef={class:"header"},Df={class:"main"},Bf={class:"footer"},Rf={name:"FvCallout"},Ff=j({...Rf,props:Yo($f,{modelValue:{type:Boolean},modelModifiers:{}}),emits:["update:modelValue"],setup(i,{expose:e,emit:t}){const s=i,{theme:n}=q(s),r=t,o=qo(i,"modelValue"),a=Xn(),l=U(null),u=na(a),{popperShow:d,beak:c,callout:m,calloutClass:p,initTargetEvents:v,windowEvents:_,targetEvents:b,targetElement:T,popperEvents:S,popper:$}=Pf(s,r,o);return at(()=>{const I=jo();if(I!==null){l.value!==null&&(T.value=l.value.$el),v(I);for(const E in _)window.addEventListener(E,_[E]);if(T.value!==void 0)for(const E in b)T.value.addEventListener(E,b[E]);if($.value!==void 0)for(const E in S)$.value.addEventListener(E,S[E])}}),Xo(()=>{for(const I in _)window.removeEventListener(I,_[I]);if(T.value!==void 0)for(const I in b)T.value.removeEventListener(I,b[I]);if($.value!==void 0)for(const I in S)$.value.removeEventListener(I,S[I])}),e({popperShow:d,popperEvents:S}),(I,E)=>(f(),g(Y,null,[L(y(u),{ref_key:"slotRef",ref:l},null,512),(f(),G(Ko,{to:"body"},[L(fe,{name:"fv-callout-fade"},{default:x(()=>[P(h("div",{ref_key:"popper",ref:$,style:V([y(m),s.popperStyle]),class:k(["fv-Callout",y(n),s.popperClass,y(p)]),name:"fv-callout"},[Mf,h("div",{class:"beak",style:V(y(c))},null,4),h("div",Ef,[w(I.$slots,"header")]),h("div",Df,[w(I.$slots,"main")]),h("div",Bf,[w(I.$slots,"footer")])],6),[[R,y(d)]])]),_:3})]))],64))}}),zf=ie(Ff),Af={...te},Of={name:"FvCheckBox",emits:["update:modelValue","click"],props:{...Af,modelValue:{default:""},borderWidth:{default:1.5},borderColor:{type:String,default:""},foreground:{default:""},background:{type:String,default:"rgba(0, 90, 158, 1)"},boxSide:{default:"start"},disabled:{default:!1}},data(){return{thisValue:this.modelValue}},watch:{modelValue(i){this.thisValue=i},thisValue(i){this.$emit("update:modelValue",i)}},computed:{$theme(){return q(this.$props).theme.value},Indeterminate(){return!(this.thisValue===!0||this.thisValue===!1)},isDisabled(){return this.disabled.toString()=="true"||this.disabled=="disabled"||this.disabled===""}},mounted(){this.thisValue=this.modelValue},methods:{Checked(i){if(i.preventDefault(),this.isDisabled)return 0;this.thisValue=!this.thisValue,this.$emit("click",this.thisValue)}}},Nf={class:"fv-checkbox-content-block"},Hf=h("i",{class:"fv-checkbox-content ms-Icon ms-Icon--CheckMark"},null,-1),Wf=[Hf],Gf={class:"fv-checkbox-content-block"},Uf=h("i",{class:"fv-checkbox-content ms-Icon ms-Icon--CheckboxIndeterminate"},null,-1),Yf=[Uf];function qf(i,e,t,s,n,r){return f(),g("div",{class:k(["fv-CheckBox",[r.$theme,t.boxSide=="end"?"box-side-end":""]]),onClick:e[0]||(e[0]=(...o)=>r.Checked&&r.Checked(...o))},[h("div",{class:k(["fv-checkbox-rec",[{disabled:r.isDisabled,check:n.thisValue||r.Indeterminate}]]),style:V({background:n.thisValue||r.Indeterminate?t.background:""})},[h("p",{class:"fv-checkbox-border",style:V({borderColor:r.Indeterminate?"transparent":t.borderColor,borderWidth:`${t.borderWidth}px`})},null,4),L(fe,{name:"font-clip-in"},{default:x(()=>[P(h("div",Nf,Wf,512),[[R,n.thisValue&&!r.Indeterminate]])]),_:1}),L(fe,{name:"font-clip-in"},{default:x(()=>[P(h("div",Gf,Yf,512),[[R,r.Indeterminate]])]),_:1})],6),h("span",{class:"text-content-block",style:V({color:t.foreground})},[w(i.$slots,"default")],4)],2)}const Xf=z(Of,[["render",qf]]),Kf=ie(Xf),jf={...te};function Jf(i){return i&&i.__esModule&&Object.prototype.hasOwnProperty.call(i,"default")?i.default:i}var Is=[],Ls=function(i){return typeof i>"u"},as=/\s*(\.\d+|\d+(?:\.\d+)?)(%)?\s*/,Ti=/\s*(\.\d+|100|\d?\d(?:\.\d+)?)%\s*/,Qf=/\s*(\.\d+|\d+(?:\.\d+)?)\s*/,Zf=new RegExp("^(rgb|hsl|hsv)a?\\("+as.source+","+as.source+","+as.source+"(?:,"+Qf.source+")?\\)$","i");function de(i){if(Array.isArray(i)){if(typeof i[0]=="string"&&typeof de[i[0]]=="function")return new de[i[0]](i.slice(1,i.length));if(i.length===4)return new de.RGB(i[0]/255,i[1]/255,i[2]/255,i[3]/255)}else if(typeof i=="string"){var e=i.toLowerCase();de.namedColors[e]&&(i="#"+de.namedColors[e]),e==="transparent"&&(i="rgba(0,0,0,0)");var t=i.match(Zf);if(t){var s=t[1].toUpperCase(),n=Ls(t[8])?t[8]:parseFloat(t[8]),r=s[0]==="H",o=t[3]?100:r?360:255,a=t[5]||r?100:255,l=t[7]||r?100:255;if(Ls(de[s]))throw new Error("color."+s+" is not installed.");return new de[s](parseFloat(t[2])/o,parseFloat(t[4])/a,parseFloat(t[6])/l,n)}i.length<6&&(i=i.replace(/^#?([0-9a-f])([0-9a-f])([0-9a-f])$/i,"$1$1$2$2$3$3"));var u=i.match(/^#?([0-9a-f][0-9a-f])([0-9a-f][0-9a-f])([0-9a-f][0-9a-f])$/i);if(u)return new de.RGB(parseInt(u[1],16)/255,parseInt(u[2],16)/255,parseInt(u[3],16)/255);if(de.CMYK){var d=i.match(new RegExp("^cmyk\\("+Ti.source+","+Ti.source+","+Ti.source+","+Ti.source+"\\)$","i"));if(d)return new de.CMYK(parseFloat(d[1])/100,parseFloat(d[2])/100,parseFloat(d[3])/100,parseFloat(d[4])/100)}}else if(typeof i=="object"&&i.isColor)return i;return!1}de.namedColors={};de.installColorSpace=function(i,e,t){de[i]=function(a){var l=Array.isArray(a)?a:arguments;e.forEach(function(u,d){var c=l[d];if(u==="alpha")this._alpha=isNaN(c)||c>1?1:c<0?0:c;else{if(isNaN(c))throw new Error("["+i+"]: Invalid color: ("+e.join(",")+")");u==="hue"?this._hue=c<0?c-Math.floor(c):c%1:this["_"+u]=c<0?0:c>1?1:c}},this)},de[i].propertyNames=e;var s=de[i].prototype;["valueOf","hex","hexa","css","cssa"].forEach(function(a){s[a]=s[a]||(i==="RGB"?s.hex:function(){return this.rgb()[a]()})}),s.isColor=!0,s.equals=function(a,l){Ls(l)&&(l=1e-10),a=a[i.toLowerCase()]();for(var u=0;u<e.length;u=u+1)if(Math.abs(this["_"+e[u]]-a["_"+e[u]])>l)return!1;return!0},s.toJSON=function(){return[i].concat(e.map(function(a){return this["_"+a]},this))};for(var n in t)if(t.hasOwnProperty(n)){var r=n.match(/^from(.*)$/);r?de[r[1].toUpperCase()].prototype[i.toLowerCase()]=t[n]:s[n]=t[n]}s[i.toLowerCase()]=function(){return this},s.toString=function(){return"["+i+" "+e.map(function(a){return this["_"+a]},this).join(", ")+"]"},e.forEach(function(a){var l=a==="black"?"k":a.charAt(0);s[a]=s[l]=function(u,d){return typeof u>"u"?this["_"+a]:d?new this.constructor(e.map(function(c){return this["_"+c]+(a===c?u:0)},this)):new this.constructor(e.map(function(c){return a===c?u:this["_"+c]},this))}});function o(a,l){var u={};u[l.toLowerCase()]=function(){return this.rgb()[l.toLowerCase()]()},de[l].propertyNames.forEach(function(c){var m=c==="black"?"k":c.charAt(0);u[c]=u[m]=function(p,v){return this[l.toLowerCase()]()[c](p,v)}});for(var d in u)u.hasOwnProperty(d)&&de[a].prototype[d]===void 0&&(de[a].prototype[d]=u[d])}return Is.forEach(function(a){o(i,a),o(a,i)}),Is.push(i),de};de.pluginList=[];de.use=function(i){return de.pluginList.indexOf(i)===-1&&(this.pluginList.push(i),i(de)),de};de.installMethod=function(i,e){return Is.forEach(function(t){de[t].prototype[i]=e}),this};de.installColorSpace("RGB",["red","green","blue","alpha"],{hex:function(){var i=(Math.round(255*this._red)*65536+Math.round(255*this._green)*256+Math.round(255*this._blue)).toString(16);return"#"+"00000".substr(0,6-i.length)+i},hexa:function(){var i=Math.round(this._alpha*255).toString(16);return"#"+"00".substr(0,2-i.length)+i+this.hex().substr(1,6)},css:function(){return"rgb("+Math.round(255*this._red)+","+Math.round(255*this._green)+","+Math.round(255*this._blue)+")"},cssa:function(){return"rgba("+Math.round(255*this._red)+","+Math.round(255*this._green)+","+Math.round(255*this._blue)+","+this._alpha+")"}});var em=de,pr=function(e){e.installColorSpace("XYZ",["x","y","z","alpha"],{fromRgb:function(){var t=function(o){return o>.04045?Math.pow((o+.055)/1.055,2.4):o/12.92},s=t(this._red),n=t(this._green),r=t(this._blue);return new e.XYZ(s*.4124564+n*.3575761+r*.1804375,s*.2126729+n*.7151522+r*.072175,s*.0193339+n*.119192+r*.9503041,this._alpha)},rgb:function(){var t=this._x,s=this._y,n=this._z,r=function(o){return o>.0031308?1.055*Math.pow(o,1/2.4)-.055:12.92*o};return new e.RGB(r(t*3.2404542+s*-1.5371385+n*-.4985314),r(t*-.969266+s*1.8760108+n*.041556),r(t*.0556434+s*-.2040259+n*1.0572252),this._alpha)},lab:function(){var t=function(o){return o>.008856?Math.pow(o,.3333333333333333):7.787037*o+.13793103448275862},s=t(this._x/95.047),n=t(this._y/100),r=t(this._z/108.883);return new e.LAB(116*n-16,500*(s-n),200*(n-r),this._alpha)}})},tm=function(e){e.use(pr),e.installColorSpace("LAB",["l","a","b","alpha"],{fromRgb:function(){return this.xyz().lab()},rgb:function(){return this.xyz().rgb()},xyz:function(){var t=function(o){var a=Math.pow(o,3);return a>.008856?a:(o-.13793103448275862)/7.87},s=(this._l+16)/116,n=this._a/500+s,r=s-this._b/200;return new e.XYZ(t(n)*95.047,t(s)*100,t(r)*108.883,this._alpha)}})},vr=function(e){e.installColorSpace("HSV",["hue","saturation","value","alpha"],{rgb:function(){var t=this._hue,s=this._saturation,n=this._value,r=Math.min(5,Math.floor(t*6)),o=t*6-r,a=n*(1-s),l=n*(1-o*s),u=n*(1-(1-o)*s),d,c,m;switch(r){case 0:d=n,c=u,m=a;break;case 1:d=l,c=n,m=a;break;case 2:d=a,c=n,m=u;break;case 3:d=a,c=l,m=n;break;case 4:d=u,c=a,m=n;break;case 5:d=n,c=a,m=l;break}return new e.RGB(d,c,m,this._alpha)},hsl:function(){var t=(2-this._saturation)*this._value,s=this._saturation*this._value,n=t<=1?t:2-t,r;return n<1e-9?r=0:r=s/n,new e.HSL(this._hue,r,t/2,this._alpha)},fromRgb:function(){var t=this._red,s=this._green,n=this._blue,r=Math.max(t,s,n),o=Math.min(t,s,n),a=r-o,l,u=r===0?0:a/r,d=r;if(a===0)l=0;else switch(r){case t:l=(s-n)/a/6+(s<n?1:0);break;case s:l=(n-t)/a/6+1/3;break;case n:l=(t-s)/a/6+2/3;break}return new e.HSV(l,u,d,this._alpha)}})},ti=function(e){e.use(vr),e.installColorSpace("HSL",["hue","saturation","lightness","alpha"],{hsv:function(){var t=this._lightness*2,s=this._saturation*(t<=1?t:2-t),n;return t+s<1e-9?n=0:n=2*s/(t+s),new e.HSV(this._hue,n,(t+s)/2,this._alpha)},rgb:function(){return this.hsv().rgb()},fromRgb:function(){return this.hsv().hsl()}})},im=function(e){e.installColorSpace("CMYK",["cyan","magenta","yellow","black","alpha"],{rgb:function(){return new e.RGB(1-this._cyan*(1-this._black)-this._black,1-this._magenta*(1-this._black)-this._black,1-this._yellow*(1-this._black)-this._black,this._alpha)},fromRgb:function(){var t=this._red,s=this._green,n=this._blue,r=1-t,o=1-s,a=1-n,l=1;return t||s||n?(l=Math.min(r,Math.min(o,a)),r=(r-l)/(1-l),o=(o-l)/(1-l),a=(a-l)/(1-l)):l=1,new e.CMYK(r,o,a,l,this._alpha)}})},sm=function(e){e.namedColors={aliceblue:"f0f8ff",antiquewhite:"faebd7",aqua:"0ff",aquamarine:"7fffd4",azure:"f0ffff",beige:"f5f5dc",bisque:"ffe4c4",black:"000",blanchedalmond:"ffebcd",blue:"00f",blueviolet:"8a2be2",brown:"a52a2a",burlywood:"deb887",cadetblue:"5f9ea0",chartreuse:"7fff00",chocolate:"d2691e",coral:"ff7f50",cornflowerblue:"6495ed",cornsilk:"fff8dc",crimson:"dc143c",cyan:"0ff",darkblue:"00008b",darkcyan:"008b8b",darkgoldenrod:"b8860b",darkgray:"a9a9a9",darkgrey:"a9a9a9",darkgreen:"006400",darkkhaki:"bdb76b",darkmagenta:"8b008b",darkolivegreen:"556b2f",darkorange:"ff8c00",darkorchid:"9932cc",darkred:"8b0000",darksalmon:"e9967a",darkseagreen:"8fbc8f",darkslateblue:"483d8b",darkslategray:"2f4f4f",darkslategrey:"2f4f4f",darkturquoise:"00ced1",darkviolet:"9400d3",deeppink:"ff1493",deepskyblue:"00bfff",dimgray:"696969",dimgrey:"696969",dodgerblue:"1e90ff",firebrick:"b22222",floralwhite:"fffaf0",forestgreen:"228b22",fuchsia:"f0f",gainsboro:"dcdcdc",ghostwhite:"f8f8ff",gold:"ffd700",goldenrod:"daa520",gray:"808080",grey:"808080",green:"008000",greenyellow:"adff2f",honeydew:"f0fff0",hotpink:"ff69b4",indianred:"cd5c5c",indigo:"4b0082",ivory:"fffff0",khaki:"f0e68c",lavender:"e6e6fa",lavenderblush:"fff0f5",lawngreen:"7cfc00",lemonchiffon:"fffacd",lightblue:"add8e6",lightcoral:"f08080",lightcyan:"e0ffff",lightgoldenrodyellow:"fafad2",lightgray:"d3d3d3",lightgrey:"d3d3d3",lightgreen:"90ee90",lightpink:"ffb6c1",lightsalmon:"ffa07a",lightseagreen:"20b2aa",lightskyblue:"87cefa",lightslategray:"789",lightslategrey:"789",lightsteelblue:"b0c4de",lightyellow:"ffffe0",lime:"0f0",limegreen:"32cd32",linen:"faf0e6",magenta:"f0f",maroon:"800000",mediumaquamarine:"66cdaa",mediumblue:"0000cd",mediumorchid:"ba55d3",mediumpurple:"9370d8",mediumseagreen:"3cb371",mediumslateblue:"7b68ee",mediumspringgreen:"00fa9a",mediumturquoise:"48d1cc",mediumvioletred:"c71585",midnightblue:"191970",mintcream:"f5fffa",mistyrose:"ffe4e1",moccasin:"ffe4b5",navajowhite:"ffdead",navy:"000080",oldlace:"fdf5e6",olive:"808000",olivedrab:"6b8e23",orange:"ffa500",orangered:"ff4500",orchid:"da70d6",palegoldenrod:"eee8aa",palegreen:"98fb98",paleturquoise:"afeeee",palevioletred:"d87093",papayawhip:"ffefd5",peachpuff:"ffdab9",peru:"cd853f",pink:"ffc0cb",plum:"dda0dd",powderblue:"b0e0e6",purple:"800080",rebeccapurple:"639",red:"f00",rosybrown:"bc8f8f",royalblue:"4169e1",saddlebrown:"8b4513",salmon:"fa8072",sandybrown:"f4a460",seagreen:"2e8b57",seashell:"fff5ee",sienna:"a0522d",silver:"c0c0c0",skyblue:"87ceeb",slateblue:"6a5acd",slategray:"708090",slategrey:"708090",snow:"fffafa",springgreen:"00ff7f",steelblue:"4682b4",tan:"d2b48c",teal:"008080",thistle:"d8bfd8",tomato:"ff6347",turquoise:"40e0d0",violet:"ee82ee",wheat:"f5deb3",white:"fff",whitesmoke:"f5f5f5",yellow:"ff0",yellowgreen:"9acd32"}},nm=function(e){e.installMethod("clearer",function(t){return this.alpha(isNaN(t)?-.1:-t,!0)})},br=function(e){function t(s){return s<=.03928?s/12.92:Math.pow((s+.055)/1.055,2.4)}e.installMethod("luminance",function(){var s=this.rgb();return .2126*t(s._red)+.7152*t(s._green)+.0722*t(s._blue)})},rm=function(e){e.use(br),e.installMethod("contrast",function(t){var s=this.luminance(),n=t.luminance();return s>n?(s+.05)/(n+.05):(n+.05)/(s+.05)})},om=function(e){e.use(ti),e.installMethod("darken",function(t){return this.lightness(isNaN(t)?-.1:-t,!0)})},am=function(e){e.use(ti),e.installMethod("desaturate",function(t){return this.saturation(isNaN(t)?-.1:-t,!0)})},lm=function(e){function t(){var s=this.rgb(),n=s._red*.3+s._green*.59+s._blue*.11;return new e.RGB(n,n,n,s._alpha)}e.installMethod("greyscale",t).installMethod("grayscale",t)},yr=function(e){e.installMethod("isDark",function(){var t=this.rgb(),s=(t._red*255*299+t._green*255*587+t._blue*255*114)/1e3;return s<128})},um=function(e){e.use(yr),e.installMethod("isLight",function(){return!this.isDark()})},dm=function(e){e.use(ti),e.installMethod("lighten",function(t){return this.lightness(isNaN(t)?.1:t,!0)})},hm=function(e){e.installMethod("mix",function(t,s){t=e(t).rgb(),s=1-(isNaN(s)?.5:s);var n=s*2-1,r=this._alpha-t._alpha,o=((n*r===-1?n:(n+r)/(1+n*r))+1)/2,a=1-o,l=this.rgb();return new e.RGB(l._red*o+t._red*a,l._green*o+t._green*a,l._blue*o+t._blue*a,l._alpha*s+t._alpha*(1-s))})},cm=function(e){e.installMethod("negate",function(){var t=this.rgb();return new e.RGB(1-t._red,1-t._green,1-t._blue,this._alpha)})},fm=function(e){e.installMethod("opaquer",function(t){return this.alpha(isNaN(t)?.1:t,!0)})},mm=function(e){e.use(ti),e.installMethod("rotate",function(t){return this.hue((t||0)/360,!0)})},gm=function(e){e.use(ti),e.installMethod("saturate",function(t){return this.saturation(isNaN(t)?.1:t,!0)})},pm=function(e){e.installMethod("toAlpha",function(t){var s=this.rgb(),n=t(t).rgb(),r=1e-10,o=new t.RGB(0,0,0,s._alpha),a=["_red","_green","_blue"];return a.forEach(function(l){s[l]<r?o[l]=s[l]:s[l]>n[l]?o[l]=(s[l]-n[l])/(1-n[l]):s[l]>n[l]?o[l]=(n[l]-s[l])/n[l]:o[l]=0}),o._red>o._green?o._red>o._blue?s._alpha=o._red:s._alpha=o._blue:o._green>o._blue?s._alpha=o._green:s._alpha=o._blue,s._alpha<r||(a.forEach(function(l){s[l]=(s[l]-n[l])/s._alpha+n[l]}),s._alpha*=o._alpha),s})},vm=em.use(pr).use(tm).use(vr).use(ti).use(im).use(sm).use(nm).use(rm).use(om).use(am).use(lm).use(yr).use(um).use(dm).use(br).use(hm).use(cm).use(fm).use(mm).use(gm).use(pm);const tn=Jf(vm),bm={name:"FvCollapse",emits:["update:modelValue","item-click","left-icon-click","description-click","icon-click"],props:{...jf,modelValue:{default:!1},icon:{type:String,default:"Mail"},title:{type:String,default:"Title of Collapse."},content:{type:String,default:"Content information of Collapse."},background:{default:""},defaultHeight:{default:70},maxHeight:{default:300},disabledCollapse:{default:!1},visibleOverflow:{default:!0}},data(){return{thisValue:this.modelValue,hover:!1}},watch:{modelValue(i){this.thisValue=i},thisValue(i){this.$emit("update:modelValue",i)}},computed:{hoverBackground(){try{let i=tn(this.background),e=i.hue();return i.hue(e-.01).cssa()}catch{return""}},$theme(){return q(this.$props).theme.value}},methods:{itemClick(){this.disabledCollapse||(this.thisValue^=!0),this.$emit("item-click",this.thisValue)}}},ym={class:"collapse-icon-box-default"},_m={class:"collapse-description-box"},wm={class:"collapse-text"},km={class:"collapse-title"},Cm={class:"collapse-info"},xm={class:"collapse-description-extension-block"},Sm={class:"ms-Icon ms-Icon--ChevronUpMed"},Tm={class:"ms-Icon ms-Icon--ChevronDownMed"},Vm={class:"ms-Icon ms-Icon--ChevronRightMed"},Im={class:"collapse-detail"};function Lm(i,e,t,s,n,r){return f(),g("div",{class:k(["fv-Collapse",[r.$theme,{visibleOverflow:t.disabledCollapse&&t.visibleOverflow}]]),style:V({height:n.thisValue?`${t.maxHeight}px`:`${t.defaultHeight}px`,"max-height":`${t.maxHeight}px`,background:n.hover?r.hoverBackground:t.background}),onMouseenter:e[4]||(e[4]=o=>n.hover=!0),onTouchstart:e[5]||(e[5]=o=>n.hover=!0),onMouseleave:e[6]||(e[6]=o=>n.hover=!1),onTouchend:e[7]||(e[7]=o=>n.hover=!1)},[h("div",{class:"collapse-description-container",style:V({height:`${t.defaultHeight}px`}),onClick:e[3]||(e[3]=(...o)=>r.itemClick&&r.itemClick(...o))},[h("div",{class:"collapse-icon-box",onClick:e[0]||(e[0]=o=>i.$emit("left-icon-click"))},[w(i.$slots,"icon",{},()=>[h("div",ym,[h("i",{class:k(["ms-Icon",[`ms-Icon--${t.icon}`]])},null,2)])])]),h("div",_m,[h("div",{class:"collapse-description",onClick:e[1]||(e[1]=o=>i.$emit("description-click"))},[h("div",wm,[w(i.$slots,"container",{title:t.title,contnet:t.content},()=>[w(i.$slots,"title",{title:t.title},()=>[h("div",km,H(t.title),1)]),w(i.$slots,"content",{content:t.content},()=>[h("div",Cm,H(t.content),1)])])])]),h("div",xm,[w(i.$slots,"extension")])]),h("div",{class:"collapse-expand-icon-block",onClick:e[2]||(e[2]=o=>i.$emit("icon-click"))},[w(i.$slots,"expand-icon",{value:n.thisValue,disabledCollaspe:t.disabledCollapse},()=>[P(h("i",Sm,null,512),[[R,n.thisValue]]),P(h("i",Tm,null,512),[[R,!n.thisValue&&!t.disabledCollapse]]),P(h("i",Vm,null,512),[[R,!n.thisValue&&t.disabledCollapse]])])])],4),L(fe,{name:"collapse-expanded"},{default:x(()=>[P(h("div",Im,[w(i.$slots,"default")],512),[[R,n.thisValue]])]),_:3})],38)}const $m=z(bm,[["render",Lm]]),Pm=ie($m),Mm={...te,modelValue:{type:[String]},foreground:{type:[String],default:""},type:{type:[String],default:"box"}},Em={"update:modelValue"(i){return!0}},Dm=(i,e)=>{const t=["rgb(255, 0, 0)","rgb(255, 153, 0)","rgb(205, 255, 0)","rgb(53, 255, 0)","rgb(0, 255, 102)","rgb(0, 255, 253)","rgb(0, 102, 255)","rgb(50, 0, 255)","rgb(205, 0, 255)","rgb(255, 0, 153)","rgb(255, 0, 0)"],s=[{key:"HSV",text:"HSV"},{key:"RGB",text:"RGB"}],n=U(),r=U(),o=U(),a=U({key:"RGB",text:"RGB"}),l=U("#000000FF"),u=U("0"),d=U("0"),c=U("0"),m=U("0"),p=U("0"),v=U("0"),_=U("100%"),b=U(new ui(l.value)),T=U(0),S=U(0),$=U(0),I=U(0),E=U(t.map(W=>new ui(W))),C=U(E.value.map(W=>W.cssrgb()).join(",")),A=W=>{l.value=W.hexa(),e("update:modelValue",l.value)},D=W=>{u.value=W.red().toString(),d.value=W.green().toString(),c.value=W.blue().toString()},F=W=>{m.value=Math.round(W.hue()).toString(),p.value=Math.round(W.saturation()).toString(),v.value=Math.round(W.value()).toString(),E.value=E.value.map(ee=>ee.clone().value(W.value())),C.value=E.value.map(ee=>ee.cssrgb()).join();{const{width:ee,height:be}=we(n.value);if(i.type==="ring"){let pe=W.hue()/360*Math.PI*2,ye=ee/2*W.saturation()/100;T.value=ee/2+Math.cos(pe)*ye,S.value=be/2+Math.sin(pe)*ye}else T.value=W.hue()/359*ee,S.value=(1-W.saturation()/100)*be}{const{width:ee}=we(r.value);$.value=ee*.01*W.value()}},M=W=>{_.value=`${Math.round(W.alpha()*100)}%`;const{width:ee}=we(o.value);I.value=W.alpha()*ee},B=Q({get(){return i.modelValue===void 0?l.value:i.modelValue},set(W){l.value=W,/^#[0-9a-fA-F]{6}([0-9a-fA-F]{2})?$/.test(W)&&(b.value=b.value.parse(l.value).clone(),F(b.value),D(b.value),M(b.value)),e("update:modelValue",W)}}),J=Q({get(){return u.value},set(W){u.value=W;let ee=parseInt(W);isNaN(ee)||(b.value=b.value.red(ee).clone(),A(b.value),F(b.value))}}),oe=Q({get(){return d.value},set(W){d.value=W;let ee=parseInt(W);isNaN(ee)||(b.value=b.value.green(ee).clone(),A(b.value),F(b.value))}}),N=Q({get(){return c.value},set(W){c.value=W;let ee=parseInt(W);isNaN(ee)||(b.value=b.value.blue(ee).clone(),A(b.value),F(b.value))}}),re=Q({get(){return m.value},set(W){m.value=W;let ee=parseInt(W);if(!isNaN(ee)){ee=Math.min(359,Math.max(0,ee)),b.value=b.value.hue(ee).clone(),A(b.value),D(b.value);const{width:be,height:pe}=we(n.value);if(i.type==="ring"){let ye=ee/360*Math.PI*2,We=be/2*b.value.saturation()/100;T.value=be/2+Math.cos(ye)*We,S.value=pe/2+Math.sin(ye)*We}else T.value=ee/359*be}}}),ne=Q({get(){return p.value},set(W){p.value=W;let ee=parseInt(W);if(!isNaN(ee)){ee=Math.max(Math.min(100,ee),0),b.value=b.value.saturation(ee).clone(),A(b.value),D(b.value);const{width:be,height:pe}=we(n.value);if(i.type==="ring"){let ye=b.value.hue()/360*Math.PI*2,We=be/2*ee/100;T.value=be/2+Math.cos(ye)*We,S.value=pe/2+Math.sin(ye)*We}else S.value=(1-ee/100)*pe}}}),se=Q({get(){return v.value},set(W){v.value=W;let ee=parseInt(W);if(!isNaN(ee)){ee=Math.max(Math.min(100,ee),0),b.value=b.value.value(ee).clone(),A(b.value),D(b.value);const{width:be}=we(r.value);$.value=be*.01*ee,E.value=E.value.map(pe=>pe.clone().value(ee)),C.value=E.value.map(pe=>pe.cssrgb()).join(",")}}}),Ee=Q({get(){return _.value},set(W){_.value=W;let ee=parseInt(W);if(!isNaN(ee)){ee=Math.max(Math.min(100,ee),0),b.value=b.value.alpha(ee/100).clone(),A(b.value);const{width:be}=we(o.value);I.value=be*.01*ee}}}),ge=(W,ee)=>{re.value=Math.round(W*359).toString(),ne.value=Math.round(ee*100).toString()},He=ns(W=>{const{left:ee,top:be,height:pe,width:ye}=we(n.value);let We=0,At=0,Zi=0,es=0;if(W instanceof TouchEvent?(Zi=W.touches[0].clientX,es=W.touches[0].clientY):(Zi=W.clientX,es=W.clientY),We=Math.max(Math.min(Zi-ee,ye),0),At=Math.max(Math.min(es-be,pe),0),i.type==="ring"){const[ki,Ci]=[ye/2,pe/2];let xi=Math.sqrt(Math.pow(Math.abs(We-ki),2)+Math.pow(Math.abs(At-Ci),2));if(xi>ye/2){let mn=xi/(ye/2);We=ki+(We-ki)/mn,At=Ci+(At-Ci)/mn,xi=ye/2}let ts=Math.atan2(At-Ci,We-ki);ts<0&&(ts+=Math.PI*2),ge(ts/(Math.PI*2),xi/(ye/2))}else ge(We/ye,1-At/pe)}),he=W=>{He(W)},St=new rs(he),Je=W=>{W instanceof MouseEvent&&gt()||W instanceof TouchEvent&&!gt()||(St.listen(),he(W))},lt=ns(W=>{if(W!==void 0){const{left:ee,width:be}=we(r.value);let pe=0;W instanceof TouchEvent?pe=W.touches[0].clientX:pe=W.clientX;const ye=Math.min(Math.max(0,pe-ee),be);se.value=`${Math.round(ye/be*100)}`}}),cn=W=>{lt(W)},Co=new rs(cn),xo=W=>{W instanceof MouseEvent&&gt()||W instanceof TouchEvent&&!gt()||(Co.listen(),cn(W))},So=ns(W=>{if(W!==void 0){const{left:ee,width:be}=we(r.value);let pe=0;W instanceof TouchEvent?pe=W.touches[0].clientX:pe=W.clientX;const ye=Math.min(Math.max(0,pe-ee),be);Ee.value=`${Math.round(ye/be*100)}%`}}),fn=W=>{So(W)},To=new rs(fn),Vo=W=>{W instanceof MouseEvent&&gt()||W instanceof TouchEvent&&!gt()||(To.listen(),fn(W))};return at(()=>{b.value=new ui(B.value),F(b.value),M(b.value)}),et(()=>i.type,()=>{F(b.value)}),{colorArea:n,colorValue:r,colorAlpha:o,colorLeft:T,colorTop:S,colorValueLeft:$,colorAlphaLeft:I,colorObj:b,computedR:J,computedG:oe,computedB:N,computedH:re,computedS:ne,computedV:se,computedAlpha:Ee,computedText:B,colorModeOptions:s,colorMode:a,onMousedown:Je,onValueMouseDown:xo,onAlphaMouseDown:Vo,colorListStr:C}},Bm={class:"color-picker"},Rm=h("div",{class:"bg"},null,-1),Fm=h("div",{class:"white-mask"},null,-1),zm=h("button",{class:"pointer"},null,-1),Am=[Rm,Fm,zm],Om=h("div",{class:"color"},[h("div",{class:"color-bg"})],-1),Nm={class:"control vertical"},Hm=h("div",{class:"color-value-bg"},null,-1),Wm=h("div",{class:"color-value-mask"},null,-1),Gm=h("div",{class:"color-value-btn"},null,-1),Um=[Hm,Wm,Gm],Ym=h("div",{class:"color-alpha-bg"},null,-1),qm=h("div",{class:"color-alpha-mask"},null,-1),Xm=h("div",{class:"color-alpha-btn"},null,-1),Km=[Ym,qm,Xm],jm={class:"fields"},Jm={class:"row"},Qm={class:"cell"},Zm={class:"cell"},eg={class:"row"},tg={class:"cell"},ig={class:"fv-color-picker-text"},sg={class:"row"},ng={class:"cell"},rg={class:"fv-color-picker-text"},og={class:"row"},ag={class:"cell"},lg={class:"fv-color-picker-text"},ug={class:"row"},dg={class:"cell"},hg=h("span",{class:"fv-color-picker-text"},"Opacity",-1),cg={name:"FvColorPicker"},fg=j({...cg,props:Mm,emits:Em,setup(i,{emit:e}){const t=e,s=i,{theme:n}=q(s),{colorMode:r,colorListStr:o,colorLeft:a,colorTop:l,colorObj:u,colorValueLeft:d,colorAlphaLeft:c,colorModeOptions:m,computedText:p,computedR:v,computedB:_,computedG:b,computedAlpha:T,computedH:S,computedS:$,computedV:I,colorArea:E,colorValue:C,colorAlpha:A,onMousedown:D,onValueMouseDown:F,onAlphaMouseDown:M}=Dm(s,t),{cls:B}=new ks().add("fv-color-picker").computed(),{style:J}=new Zn().add("--fv-color-picker--color-list",()=>o.value).add("--fv-color-picker--color",()=>u.value.cssrgba()).add("--fv-color-picker--color-alpha",()=>u.value.clone().cssrgb()).add("--fv-color-picker--color-value",()=>u.value.clone().value(100).cssrgb()).add("--fv-color-picker--pointer-left",()=>`${a.value}px`,()=>pt(a.value)).add("--fv-color-picker--pointer-top",()=>`${l.value}px`,()=>pt(l.value)).add("--fv-color-picker--color-value-left",()=>`${d.value}px`,()=>pt(d.value)).add("--fv-color-picker--color-alpha-left",()=>`${c.value}px`,()=>pt(c.value)).add("--fv-color-picker--color-value-empty",()=>u.value.clone().hue(0).saturation(0).cssrgb()).computed();return(oe,N)=>{const re=K("fv-combobox"),ne=K("fv-text-box");return f(),g("div",{class:k(y(B)),style:V(y(J))},[h("div",Bm,[h("div",{ref_key:"colorArea",ref:E,draggable:"false",class:k(["color-area",{ring:s.type==="ring",box:s.type==="box"}]),onMousedown:N[0]||(N[0]=Lt((...se)=>y(D)&&y(D)(...se),["stop"])),onTouchstart:N[1]||(N[1]=Lt((...se)=>y(D)&&y(D)(...se),["stop"]))},Am,34),Om]),h("div",Nm,[h("div",{class:"color-value",ref_key:"colorValue",ref:C,draggable:"false",onMousedown:N[2]||(N[2]=Lt((...se)=>y(F)&&y(F)(...se),["stop"])),onTouchstart:N[3]||(N[3]=Lt((...se)=>y(F)&&y(F)(...se),["stop"]))},Um,544),h("div",{class:"color-alpha",ref_key:"colorAlpha",ref:A,draggable:"false",onMousedown:N[4]||(N[4]=Lt((...se)=>y(M)&&y(M)(...se),["stop"])),onTouchstart:N[5]||(N[5]=Lt((...se)=>y(M)&&y(M)(...se),["stop"]))},Km,544),h("div",jm,[h("div",Jm,[h("div",Qm,[L(re,{modelValue:y(r),"onUpdate:modelValue":N[6]||(N[6]=se=>De(r)?r.value=se:null),placeholder:"Color Mode",options:y(m),theme:y(n),style:{width:"118px"},"min-width":"118px",choosenSliderBackground:s.foreground},null,8,["modelValue","options","theme","choosenSliderBackground"])]),h("div",Zm,[L(ne,{placeholder:"#FFFFFF",modelValue:y(p),"onUpdate:modelValue":N[7]||(N[7]=se=>De(p)?p.value=se:null),maxlength:9,theme:y(n),style:{width:"130px"},"min-width":"130px",underline:"","border-width":"2","border-color":"rgba(120, 120, 120, 0.1)","focus-border-color":s.foreground},null,8,["modelValue","theme","focus-border-color"])])]),h("div",eg,[h("div",tg,[h("span",ig,H(y(r).key==="RGB"?"Red":"Hue"),1),P(L(ne,{placeholder:"0",maxlength:3,style:{width:"118px"},"min-width":"118px",modelValue:y(v),"onUpdate:modelValue":N[8]||(N[8]=se=>De(v)?v.value=se:null),theme:y(n),underline:"","border-width":"2","border-color":"rgba(120, 120, 120, 0.1)","focus-border-color":s.foreground},null,8,["modelValue","theme","focus-border-color"]),[[R,y(r).key==="RGB"]]),P(L(ne,{placeholder:"0",maxlength:3,style:{width:"118px"},"min-width":"118px",modelValue:y(S),"onUpdate:modelValue":N[9]||(N[9]=se=>De(S)?S.value=se:null),theme:y(n),underline:"","border-width":"2","border-color":"rgba(120, 120, 120, 0.1)","focus-border-color":s.foreground},null,8,["modelValue","theme","focus-border-color"]),[[R,y(r).key==="HSV"]])])]),h("div",sg,[h("div",ng,[h("span",rg,H(y(r).key==="RGB"?"Green":"Saturation"),1),P(L(ne,{placeholder:"0",maxlength:3,style:{width:"118px"},"min-width":"118px",modelValue:y(b),"onUpdate:modelValue":N[10]||(N[10]=se=>De(b)?b.value=se:null),theme:y(n),underline:"","border-width":"2","border-color":"rgba(120, 120, 120, 0.1)","focus-border-color":s.foreground},null,8,["modelValue","theme","focus-border-color"]),[[R,y(r).key==="RGB"]]),P(L(ne,{placeholder:"0",maxlength:3,style:{width:"118px"},"min-width":"118px",modelValue:y($),"onUpdate:modelValue":N[11]||(N[11]=se=>De($)?$.value=se:null),theme:y(n),underline:"","border-width":"2","border-color":"rgba(120, 120, 120, 0.1)","focus-border-color":s.foreground},null,8,["modelValue","theme","focus-border-color"]),[[R,y(r).key==="HSV"]])])]),h("div",og,[h("div",ag,[h("span",lg,H(y(r).key==="RGB"?"Blue":"Value"),1),P(L(ne,{placeholder:"0",maxlength:3,style:{width:"118px"},"min-width":"118px",modelValue:y(_),"onUpdate:modelValue":N[12]||(N[12]=se=>De(_)?_.value=se:null),theme:y(n),underline:"","border-width":"2","border-color":"rgba(120, 120, 120, 0.1)","focus-border-color":s.foreground},null,8,["modelValue","theme","focus-border-color"]),[[R,y(r).key==="RGB"]]),P(L(ne,{placeholder:"0",maxlength:3,style:{width:"118px"},"min-width":"118px",modelValue:y(I),"onUpdate:modelValue":N[13]||(N[13]=se=>De(I)?I.value=se:null),theme:y(n),underline:"","border-width":"2","border-color":"rgba(120, 120, 120, 0.1)","focus-border-color":s.foreground},null,8,["modelValue","theme","focus-border-color"]),[[R,y(r).key==="HSV"]])])]),h("div",ug,[h("div",dg,[hg,L(ne,{placeholder:"0",maxlength:3,style:{width:"118px"},"min-width":"118px",modelValue:y(T),"onUpdate:modelValue":N[14]||(N[14]=se=>De(T)?T.value=se:null),theme:y(n),underline:"","border-width":"2","border-color":"rgba(120, 120, 120, 0.1)","focus-border-color":s.foreground},null,8,["modelValue","theme","focus-border-color"])])])])])],6)}}}),mg=ie(fg),gg={...te,options:{type:Array,default:()=>[]},modelValue:{type:[String],default:void 0},editable:{type:[Boolean]},placeholder:{type:[String]},autofocus:{type:[Boolean]},hoverBorderColor:{type:[String]},errorBorderColor:{type:[String]},warningBorderColor:{type:[String]},maxlength:{type:[Number]},minlength:{type:[Number]},title:{type:[String],default:"input"},fontSize:{type:[Number],default:14},inputRules:{type:[Object,String,Function]},pattern:{type:[Object,String,Function]},required:{type:[Boolean]}},pg={change:i=>!0,"update:modelValue":i=>!0,focus:i=>!0,blur:i=>!0,keydown:i=>!0,keyup(i){return!0},keypress(i){return!0},input(i){return!0},errorInput(i){return!0},warningInput(i){return!0}},vg=(i,e)=>{const t=U(),s=U(!1),n=U(),r=U(),o=U(),a=U(),l=U(),u=U(),d=U(),c=U("center"),m=U(),p=()=>{s.value=!1},v=N=>{sa(N.target,t.value)&&p()},_=Q({get(){return i.modelValue===void 0?n.value:i.modelValue},set(N){n.value=N,N!==void 0&&e("update:modelValue",N)}}),b=async()=>{if(i.disabled!==!0&&i.options.length!==0){if(i.editable===!1){let N=i.options.findIndex(ne=>ne.key===_.value);N==-1&&(N=0),l.value!==void 0&&(u.value=-l.value*N-7.5),d.value="";let re;await Pt(()=>{re=Si(we(o.value)),re.bottom<0&&(pt(u.value)?u.value+=re.bottom-7.5:u.value=`calc( ${u.value} + ${re.bottom}px - 7.5px)`)}),await Pt(()=>{re=Si(we(o.value)),re.top<0&&(pt(u.value)?u.value+=-re.top+7.5:u.value=`calc( ${u.value} - ${re.bottom}px + 7.5px)`)}),N===0?c.value="flex-start":N==i.options.length-1?c.value="flex-end":c.value="center"}else{u.value="calc(100% - 4px)",d.value="",c.value="flex-start";let N;await Pt(async()=>{N=Si(we(o.value)),N.bottom<0&&(u.value="",d.value="100%",c.value="flex-end")}),await Pt(()=>{N=Si(we(o.value)),N.top<0&&(u.value="calc(100% - 4px)",d.value=void 0,c.value="flex-start")})}await Pt(()=>{s.value=!0})}},T=()=>{i.editable!==!0&&b()},S=()=>{i.editable!==!1&&(s.value===!0?p():b())},$=N=>{_.value=N.key,p()},I=N=>{e("change",N)},E=N=>{e("blur",N)},C=N=>{e("focus",N)},A=N=>{e("keydown",N)},D=N=>{e("keyup",N)},F=N=>{e("keypress",N)},M=N=>{e("input",N)},B=N=>{e("errorInput",N)},J=N=>{e("warningInput",N)},oe=()=>{m.value!==void 0&&m.value.focus()};return et(()=>i.options,()=>{const{height:N}=we(o.value);a.value=N}),at(()=>{window!==void 0&&window.addEventListener("click",v);const{height:N}=we(o.value);if(a.value=N,r.value!==void 0){const{height:re}=we(r.value[0]);l.value=re}}),Gi(()=>{window!==void 0&&window.removeEventListener("click",v)}),{input:m,effectPosition:c,optionsTop:u,optionsBottom:d,optionsHeight:a,options:o,option:r,computedValue:_,onSelectOption:$,onInputClick:T,onInputIconClick:S,onChange:I,onFocus:C,onBlur:E,onErrorInput:B,onWarningInput:J,optionsShow:s,root:t,hide:p,show:b,focus:oe,onInput:M,onKeydown:A,onKeypress:F,onKeyup:D}},bg={class:"fv-combo-box--options-wrapper"},yg=["onClick"],_g={name:"FvComboBox"},wg=j({..._g,props:gg,emits:pg,setup(i,{expose:e,emit:t}){const s=t,n=i,{theme:r}=q(n),{optionsShow:o,input:a,root:l,computedValue:u,onBlur:d,onFocus:c,onInput:m,onKeydown:p,onKeypress:v,onKeyup:_,onInputClick:b,focus:T,hide:S,show:$,onChange:I,onInputIconClick:E,onSelectOption:C,onErrorInput:A,onWarningInput:D,options:F,optionsBottom:M,optionsHeight:B,option:J,optionsTop:oe,effectPosition:N}=vg(n,s),{cls:re}=new ks().add("fv-combo-box").add("disabled",()=>n.disabled===!0).add(()=>r.value).computed(),{style:ne}=new Zn().add("--fv-combo-box-height",()=>`${B.value}px`).add("--fv-combo-box-top",()=>`${oe.value}px`,()=>pt(oe.value)).add("--fv-combo-box-top",()=>oe.value,()=>vt(oe.value)).add("--fv-combo-box-bottom",()=>`${M.value}px`,()=>pt(M.value)).add("--fv-combo-box-bottom",()=>M.value,()=>vt(M.value)).add("--fv-combo-box-effect-position",()=>N.value).computed(),{cls:se}=new ks().add("fv-combo-box--bg").add("fv-combo-box--bg-down",()=>n.editable===!0&&N.value==="flex-start").add("fv-combo-box--bg-up",()=>n.editable===!0&&N.value==="flex-end").computed();return e({focus:T,hide:S,show:$}),(Ee,ge)=>{const He=K("fv-text-box");return f(),g("div",{ref_key:"root",ref:l,class:k(y(re)),style:V(y(ne))},[L(He,{ref_key:"input",ref:a,theme:y(r),modelValue:y(u),"onUpdate:modelValue":ge[0]||(ge[0]=he=>De(u)?u.value=he:null),rightIcon:"ChevronDown",readonly:n.editable===!1,class:"fv-combo-box--select-input",placeholder:n.placeholder,onClick:y(b),onBlur:y(d),onFocus:y(c),onChange:ge[1]||(ge[1]=he=>y(I)(y(u))),onRightIconClick:y(E),autofocus:n.autofocus,onInput:ge[2]||(ge[2]=he=>y(m)(y(u))),onKeydown:ge[3]||(ge[3]=he=>y(p)(y(u))),onKeypress:ge[4]||(ge[4]=he=>y(v)(y(u))),onKeyup:ge[5]||(ge[5]=he=>y(_)(y(u))),required:n.required,maxlength:n.maxlength,minlength:n.minlength,"hover-border-color":n.hoverBorderColor,"error-border-color":n.errorBorderColor,"warning-border-color":n.warningBorderColor,title:n.title,"input-rules":n.inputRules,pattern:n.pattern,disabled:n.disabled,onErrorInput:y(A),onWarningInput:y(D)},null,8,["theme","modelValue","readonly","placeholder","onClick","onBlur","onFocus","onRightIconClick","autofocus","required","maxlength","minlength","hover-border-color","error-border-color","warning-border-color","title","input-rules","pattern","disabled","onErrorInput","onWarningInput"]),L(fe,{name:"fv-combo-box--fade-in"},{default:x(()=>[P(h("div",{class:k(["fv-combo-box--options",{"fv-combo-box--editable":n.editable===!0}]),ref_key:"options",ref:F},[h("div",{class:k(y(se))},[h("div",bg,[(f(!0),g(Y,null,Z(n.options,he=>(f(),g("div",{class:"fv-combo-box--option",ref_for:!0,ref_key:"option",ref:J,key:he.key,onClick:St=>y(C)(he)},[h("div",{class:k(["fv-combo-box--option-text",{active:he.key===y(u)}])},[w(Ee.$slots,"default",{item:he},()=>[ue(H(he.text===void 0?he.key:he.text),1)])],2)],8,yg))),128))])],2)],2),[[R,y(o)]])]),_:3})],6)}}}),kg=ie(wg),Cg={...te},xg={name:"FvCombobox",props:{...Cg,modelValue:{default:()=>({})},options:{default:()=>[]},borderWidth:{default:1},placeholder:{default:"Combobox"},borderRadius:{default:"3"},background:{default:""},choosenBackground:{default:""},choosenSliderBackground:{default:""},inputForeground:{default:""},inputBackground:{default:""},titleForeground:{default:""},itemHeight:{default:40},dropDownIcon:{default:"ChevronDown"},dropDownIconForeground:{default:""},revealBorderColor:{default:!1},revealBackgroundColor:{default:!1},disabled:{default:!1}},data(){return{thisValue:this.modelValue,status:!1}},watch:{modelValue(i){this.thisValue=i},thisValue(i){this.$emit("update:modelValue",i)}},computed:{isDisabled(){return this.options.length==0||this.disabled.toString()=="true"||this.disabled=="disabled"||this.disabled===""},borderLightColor(){return this.revealBorderColor?this.revealBorderColor:this.$theme=="light"?"rgba(121, 119, 117, 0.6)":this.$theme=="dark"||this.$theme=="custom"?"rgba(255, 255, 255, 0.6)":"rgba(121, 119, 117, 0.6)"},backgroundLightColor(){return this.revealBackgroundColor?this.revealBackgroundColor:this.$theme=="light"?"rgba(121, 119, 117, 0.3)":this.$theme=="dark"||this.$theme=="custom"?"rgba(255, 255, 255, 0.3)":"rgba(121, 119, 117, 0.3)"},$theme(){return q(this.$props).theme.value}},mounted(){this.outSideClickInit()},methods:{outSideClickInit(){window.addEventListener("click",i=>{let e=i.target,t=!1;for(;e&&e.tagName&&e.tagName.toLowerCase()!="body";){if(e==this.$el){t=!0;break}e=e.parentNode}t||(this.status=!1)}),window.addEventListener("touchend",i=>{let e=i.target,t=!1;for(;e&&e.tagName&&e.tagName.toLowerCase()!="body";){if(e==this.$el){t=!0;break}e=e.parentNode}t||(this.status=!1)})},valueTrigger(i){return typeof i=="function"?i():i},Choose(i,e){if(this.valueTrigger(e.disabled)||this.valueTrigger(e.type)=="header"||this.valueTrigger(e.type)=="divider")return 0;this.thisValue=e;let t=i.target;for(;!t.getAttribute("class")||t.getAttribute("class").indexOf("fv-combobox-item")<0;)t=t.parentNode;this.$refs.co_items.scrollTop=t.offsetTop,this.status=!1,this.$emit("choose-item",this.thisValue)}}},Sg=["placeholder","value"],Tg=["onClick","title"];function Vg(i,e,t,s,n,r){const o=K("fv-reveal-container");return f(),g("div",{class:k(["fv-Combobox",[r.$theme,{disabled:r.isDisabled}]]),style:V({background:t.background,padding:t.borderWidth,"border-radius":`${t.borderRadius}px`,"z-index":n.status?3:"",overflow:"visible"})},[h("div",{class:"combobox-container",onClick:e[0]||(e[0]=a=>n.status=r.isDisabled?!1:!n.status),style:V({background:t.inputBackground,"border-radius":`${t.borderRadius}px`})},[L(o,{parent:()=>i.$el,class:"fv-combobox-reveal-container",backgroundColor:r.backgroundLightColor,borderColor:r.borderLightColor,backgroundGradientSize:120,borderGradientSize:80,borderWidth:t.borderWidth,borderRadius:t.borderRadius,disabled:r.isDisabled},null,8,["parent","backgroundColor","borderColor","borderWidth","borderRadius","disabled"]),h("input",{class:"input",placeholder:t.placeholder,readonly:"",value:r.valueTrigger(n.thisValue.text),style:V({color:t.inputForeground,"border-radius":`${t.borderRadius}px`})},null,12,Sg),h("i",{class:k(["ms-Icon right-icon",[`ms-Icon--${t.dropDownIcon}`]]),style:V({color:t.dropDownIconForeground})},null,6)],4),L(fe,{name:"fv-combobox"},{default:x(()=>[P(h("div",{class:"combobox-item-container",style:V({background:t.background,overflow:"auto"}),ref:"co_items"},[(f(!0),g(Y,null,Z(t.options,(a,l)=>(f(),g("div",{class:k(["fv-combobox-item",{hr:r.valueTrigger(a.type)=="divider",normal:(r.valueTrigger(a.type)=="default"||r.valueTrigger(a.type)==null)&&!r.valueTrigger(a.disabled),disabled:r.valueTrigger(a.disabled),choose:a.key===n.thisValue.key,title:r.valueTrigger(a.type)=="header"}]),style:V({height:`${t.itemHeight}px`,background:a.key===n.thisValue.key?t.choosenBackground:"",color:r.valueTrigger(a.type)==="header"?t.titleForeground:""}),onClick:u=>r.Choose(u,a),key:l,title:r.valueTrigger(a.text)},[w(i.$slots,"default",{item:a},()=>[h("i",{class:"before-choosen",style:V({background:t.choosenSliderBackground})},null,4),ue(" "+H(r.valueTrigger(a.type)!=="divider"?r.valueTrigger(a.text):""),1)])],14,Tg))),128))],4),[[R,n.status]])]),_:3})],6)}const Ig=z(xg,[["render",Vg]]),Lg=ie(Ig),$g={...te},Pg={name:"FvCommandBar",emits:["update:modelValue","item-click"],props:{...$g,modelValue:{default:()=>({})},options:{default:()=>[]},toward:{default:"down"},background:{default:""},compact:{default:!1},revealBorderColor:{default:!1},revealBackgroundColor:{default:!1}},data(){return{thisValue:{},thisOptions:[],currentLeft:0}},watch:{modelValue(i){this.thisValue=i},thisValue(i){this.$emit("update:modelValue",i)},options(i){this.optionsInit()}},computed:{showDropDown(){return this.thisValue.choosen!==!0||this.thisValue.secondary===void 0?!1:this.thisValue.secondary.length>0},borderLightColor(){return this.revealBorderColor?this.revealBorderColor:this.$theme=="light"?"rgba(121, 119, 117, 0.1)":this.$theme=="dark"||this.$theme=="custom"?"rgba(255, 255, 255, 0.1)":"rgba(121, 119, 117, 0.1)"},backgroundLightColor(){return this.revealBackgroundColor?this.revealBackgroundColor:this.$theme=="light"?"rgba(121, 119, 117, 0.05)":this.$theme=="dark"||this.$theme=="custom"?"rgba(255, 255, 255, 0.05)":"rgba(121, 119, 117, 0.05)"},$theme(){return q(this.$props).theme.value}},mounted(){this.optionsInit(),this.outSideClickInit()},methods:{optionsInit(){let i={name:"",type:"normal",icon:"",show:!0,choosen:!1,secondary:[]},e=[];for(let t of this.options){let s=JSON.parse(JSON.stringify(i));s=Object.assign(s,t),e.push(s)}this.thisOptions=e},valueTrigger(i){return typeof i=="function"?i():i},outSideClickInit(){window.addEventListener("click",i=>{let e=i.target,t=!1;for(;e&&e.tagName&&e.tagName.toLowerCase()!="body";){if(e==this.$el){t=!0;break}e=e.parentNode}t||this.collapseAll()})},collapseAll(){for(let i=0;i<this.thisOptions.length;i++){let e=this.thisOptions[i];e.choosen=!1,this.thisOptions[i]=e}},itemClick(i,e){if(this.valueTrigger(e.disabled))return 0;let t=!e.choosen;this.collapseAll(),e.choosen=t,this.thisOptions[this.thisOptions.indexOf(e)]=e,this.thisValue=e,this.$emit("item-click",e),e.func!==void 0&&e.func(),this.leftFormat(i)},chooseItem(i){let e=i.item;this.thisValue=e,e.func!==void 0&&e.func(),this.$emit("item-click",e),this.collapseAll()},leftFormat(i){let e=i.target;for(;!e.getAttribute("class")||e.getAttribute("class").indexOf("command-bar-item")<0;)e=e.parentNode;let t=this.$el.getBoundingClientRect().left,s=this.$el.getBoundingClientRect().right,n=e.getBoundingClientRect().left;e.getBoundingClientRect().right;let r=200;n+r>s?this.currentLeft=s-t-r:this.currentLeft=n-t}},beforeUnmount(){this.$RevealDirect.destroy(this.FR)}},Mg={class:"left-command-bar-container"},Eg=["title","onClick"],Dg={class:"s1-container"},Bg={class:"ms-Icon ms-Icon--ChevronDown icon"},Rg={class:"s1-container"},Fg=h("i",{class:"ms-Icon ms-Icon--More icon"},null,-1),zg=[Fg],Ag={class:"right-command-bar-container"},Og={class:"name",style:{"font-size":"12px"}};function Ng(i,e,t,s,n,r){const o=K("fv-reveal-container"),a=K("fv-list-view");return f(),g("div",{class:k(["fv-CommandBar",[r.$theme]]),style:V({background:t.background})},[h("div",Mg,[(f(!0),g(Y,null,Z(n.thisOptions,(l,u)=>P((f(),g("span",{class:k(["command-bar-item",[r.valueTrigger(l.type)=="divider"?"hr":"normal",{not_disabled:!r.valueTrigger(l.disabled)},{disabled:r.valueTrigger(l.disabled)}]]),key:u,title:r.valueTrigger(l.name),onClick:d=>r.itemClick(d,l)},[P(h("span",Dg,[r.valueTrigger(l.type)!="divider"&&!r.valueTrigger(l.disabled)?(f(),G(o,{key:0,parent:()=>i.$el,class:"fv-command-bar-reveal-container",backgroundColor:r.backgroundLightColor,borderColor:r.borderLightColor,borderGradientSize:80,borderWidth:1,borderRadius:6},null,8,["parent","backgroundColor","borderColor"])):O("",!0),h("i",{class:k(["ms-Icon icon",[`ms-Icon--${r.valueTrigger(l.icon)}`]]),style:V({color:r.valueTrigger(l.iconColor)})},null,6),P(h("p",{class:"name"},H(r.valueTrigger(l.name)),513),[[R,!t.compact]]),P(h("i",Bg,null,512),[[R,l.secondary.length>0]])],512),[[R,r.valueTrigger(l.type)!=="more"]]),P(h("span",Rg,zg,512),[[R,r.valueTrigger(l.type)==="more"]])],10,Eg)),[[R,r.valueTrigger(l.show)]])),128))]),h("div",Ag,[w(i.$slots,"right-space")]),L(fe,{name:t.toward=="down"?"zoom-in-top":"zoom-in-bottom"},{default:x(()=>[P(h("div",{class:k(["command-bar-list-view-container",{"toward-up":t.toward=="up"}]),style:V({left:`${n.currentLeft}px`,background:t.background})},[L(a,{modelValue:n.thisValue.secondary,"onUpdate:modelValue":e[0]||(e[0]=l=>n.thisValue.secondary=l),style:{height:"auto"},onChooseItem:r.chooseItem},{listItem:x(l=>[P(h("i",{class:k(["ms-Icon icon",[`ms-Icon--${r.valueTrigger(l.item.icon)}`]]),style:V([{color:r.valueTrigger(l.item.iconColor)},{"font-size":"12px"}])},null,6),[[R,r.valueTrigger(l.item.icon)!==void 0]]),h("p",Og,H(r.valueTrigger(l.item.name)),1)]),_:1},8,["modelValue","onChooseItem"])],6),[[R,r.showDropDown]])]),_:1},8,["name"])],6)}const Hg=z(Pg,[["render",Ng]]),Wg=ie(Hg),Gg={...te},Ug={name:"FvDatePicker",emits:["update:modelValue","change","focus"],props:{...Gg,modelValue:{type:Date,default:()=>new Date(1970,0,1)},disabled:{type:Boolean,default:!1},hideMonth:{type:Boolean,default:!1},hideDay:{type:Boolean,default:!1},hideYear:{type:Boolean,default:!1},showWeek:{type:Boolean,default:!1},months:{type:Array,default:()=>["January","February","March","April","May","June","July","August","September","October","November","December"]},weeks:{type:Array,default:()=>["Sun.","Mon.","Tue.","Wed.","Thu.","Fri.","Sat."]},hoverColor:{type:String,default:void 0},inputBackground:{default:""},selectedBackground:{default:""},optionBackground:{default:""},innerBorderColor:{type:String,default:"#cccccc"}},directives:{hover:{bind(i,{value:e}){e!==void 0&&typeof e=="function"&&(i.enterFunction=()=>{e(!0,i)},i.leaveFunction=()=>{e(!1,i)},i.addEventListener("mouseover",i.enterFunction),i.addEventListener("mouseleave",i.leaveFunction))},unbind(i){i.enterFunction!==void 0&&typeof i.enterFunction=="function"&&(i.removeEventListener("mouseover",i.hoverFunction),i.removeEventListener("mouseleave",i.leaveFunction))}}},data(){return{popper:{show:!1,month:!0},selected:{date:new Date(this.modelValue)},options:{month:[],day:[],year:[]},optionsConfig:{month:{slideLock:!1},day:{slideLock:!1},year:{slideLock:!1}},config:{minDate:new Date(1970,0,1),maxDate:new Date(2099,12,31),buffer:5,clickLock:!1},style:{dayCol:{},monthCol:{},yearCol:{}},windowEvent:{click:i=>{if(!this.popper.show||this.config.clickLock)return;let e=i.target,t=!1;for(;e;){if(e==this.$el){t=!0;break}e=e.parentNode}t||(this.popper.show=!1)}}}},computed:{$theme(){return q(this.$props).theme.value}},mounted(){this.init();for(let i in this.windowEvent)window.addEventListener(i,this.windowEvent[i])},beforeUnmount(){this.$refs.day!==void 0&&this.$refs.day.removeEventListener("scroll",this.optionsConfig.day.scroll),this.$refs.month!==void 0&&this.$refs.month.removeEventListener("scroll",this.optionsConfig.month.scroll),this.$refs.year!==void 0&&this.$refs.year.removeEventListener("scroll",this.optionsConfig.year.scroll);for(let i in this.windowEvent)window.removeEventListener(i,this.windowEvent[i])},watch:{"popper.show"(i){i&&(this.selected.date=new Date(this.modelValue),this.$emit("focus"),this.init())}},methods:{init(){this.hideMonth||this.setMonthOptions(),this.hideDay||this.setDayOptions(),this.hideYear||this.setYearOptions()},nPrev(i,e,t=1,s=1){let n=t*e;return(i+n-s-t)%e+s},nNext(i,e,t=1,s=1){let n=s*e;return(i+n+t-s)%e+s},setMonthOptions(){let i=this.selected.date.getMonth(),e=this.nNext(i,12,this.config.buffer+1,0);this.options.month=[];for(let t=this.nPrev(i,12,this.config.buffer,0);t!=e;t=this.nNext(t,12,1,0))this.options.month.push(t);this.$nextTick(()=>{let t=this.$refs.month.scrollTop=(this.config.buffer-4)*40;this.optionsConfig.month.scroll&&this.$refs.month.removeEventListener("scroll",this.optionsConfig.month.scroll),this.optionsConfig.month.scroll=()=>{this.optionsConfig.month.slideLock||(this.slideCol(t,"month",()=>{this.options.month.shift();let s=this.selected.date.getMonth();this.adjustDay(this.selected.date,new Date(this.selected.date.getFullYear(),this.nNext(s,12,1,0))),this.selected.date.setMonth(this.nNext(s,12,1,0)),this.options.month.push(this.nNext(s,12,this.config.buffer+1,0))},()=>{this.options.month.pop();let s=this.selected.date.getMonth();this.adjustDay(this.selected.date,new Date(this.selected.date.getFullYear(),this.nPrev(s,12,1,0))),this.selected.date.setMonth(this.nPrev(s,12,1,0)),this.options.month.unshift(this.nPrev(s,12,this.config.buffer+1,0))}),this.setDayOptions())},this.$refs.month.addEventListener("scroll",this.optionsConfig.month.scroll)})},setDayOptions(){let i=this.dayRange(this.selected.date),e=this.selected.date.getDate(),t=this.nNext(e,i,this.config.buffer+1);this.options.day=[];for(let s=this.nPrev(e,i,this.config.buffer);s!=t;s=this.nNext(s,i))this.options.day.push(s);this.$nextTick(()=>{let s=this.$refs.day.scrollTop=40*(this.config.buffer-4);this.optionsConfig.day.scroll&&this.$refs.day.removeEventListener("scroll",this.optionsConfig.day.scroll),this.optionsConfig.day.scroll=()=>{this.optionsConfig.day.slideLock||this.slideCol(s,"day",()=>{this.options.day.shift();let n=this.selected.date.getDate();this.selected.date.setDate(this.nNext(n,i,1)),this.options.day.push(this.nNext(n,i,this.config.buffer+1))},()=>{this.options.day.pop();let n=this.selected.date.getDate();this.selected.date.setDate(this.nPrev(n,i,1)),this.options.day.unshift(this.nPrev(n,i,this.config.buffer+1))})},this.$refs.day.addEventListener("scroll",this.optionsConfig.day.scroll)})},setYearOptions(){let i=this.selected.date.getFullYear()-this.config.buffer,e=i+2*this.config.buffer+1;this.options.year=[];for(let t=i;t<e;++t)this.options.year.push(this.adjustYear(t));this.$nextTick(()=>{let t=this.$refs.year.scrollTop=(this.config.buffer-4)*40;this.optionsConfig.year.scroll&&this.$refs.year.removeEventListener("scroll",this.optionsConfig.year.scroll),this.optionsConfig.year.scroll=async()=>{if(!this.optionsConfig.year.slideLock){if(this.optionsConfig.year.slideLock=!0,this.$refs.year.scrollTop-t>0){if(this.adjustYear(this.selected.date.getFullYear()+1)<0){this.$refs.year.scrollTop=t,this.optionsConfig.year.slideLock=!1;return}}else if(this.adjustYear(this.selected.date.getFullYear()-1)<0){this.$refs.year.scrollTop=t,this.optionsConfig.year.slideLock=!1;return}await this.slideCol(t,"year",()=>{this.options.year.shift();let s=this.selected.date.getFullYear();this.adjustDay(this.selected.date,new Date(s+1,this.selected.date.getMonth())),this.selected.date.setYear(s+1),this.options.year.push(this.adjustYear(s+this.config.buffer+1))},()=>{this.options.year.pop();let s=this.selected.date.getFullYear();this.adjustDay(this.selected.date,new Date(s-1,this.selected.date.getMonth())),this.selected.date.setYear(s-1),this.options.year.unshift(this.adjustYear(s-this.config.buffer-1))}),this.setDayOptions(),this.optionsConfig.year.slideLock=!1}},this.$refs.year.addEventListener("scroll",this.optionsConfig.year.scroll)})},dayRange(i){return i=new Date(i),i.setDate(1),i.setMonth(i.getMonth()+1),i.setDate(0),i.getDate()},async slideCol(i,e,t,s){if(Math.abs(this.$refs[e].scrollTop-i)>=20)return this.$refs[e].scrollTop>i?t():s(),await new Promise(n=>this.$nextTick(()=>{this.$refs[e].scrollTop=i,n()}))},adjustDay(i,e){let t=this.dayRange(e);i.getDate()>t&&i.setDate(t)},adjustYear(i){return i<this.config.minDate.getFullYear()||i>this.config.maxDate.getFullYear()?-i:i},focus(){this.disabled||(this.popper.show=!0)},confirm(){this.$emit("update:modelValue",new Date(this.selected.date)),this.$emit("change",new Date(this.selected.date)),this.popper.show=!1},cancel(){this.popper.show=!1},async clickItem(i,e){if(this.config.clickLock)return;this.config.clickLock=!0,this.$refs[i].scrollTop=(this.config.buffer-4)*40;let t=this.$refs[i].scrollTop;this.$refs[i].scrollTop+=e-5;let s=Math.abs(e-5);if(s>0){let n=setInterval(()=>{if(this.$refs[i].scrollTop==t&&(--s,!s)){this.config.clickLock=!1,clearInterval(n);return}this.config.scrollLock=!0,this.$refs[i].scrollTop+=(e-5)*3},20)}else this.config.clickLock=!1},weekIndex(i){let e=new Date(this.selected.date);return e.setDate(i),e.getDay()},hover(i,e){this.hoverColor!==void 0&&(i?(e.hoverStatus===!1||e.hoverStatus===void 0)&&(e.style.backgroundColor&&(e.backgroundColor=e.style.backgroundColor),e.style.backgroundColor=this.hoverColor):e.backgroundColor!==void 0?e.style.backgroundColor=e.backgroundColor:e.style.backgroundColor=null,e.hoverStatus=i)},hoverUpAndDown(i,e){let t=e.querySelector(".fv-DatePicker__input-options-col-down"),s=e.querySelector(".fv-DatePicker__input-options-col-up");i?((t.hoverStatus===!1||t.hoverStatus===void 0)&&(t.style.backgroundColor&&(t.backgroundColor=t.style.backgroundColor),t.style.backgroundColor=this.hoverColor),(s.hoverStatus===!1||s.hoverStatus===void 0)&&(s.style.backgroundColor&&(s.backgroundColor=s.style.backgroundColor),s.style.backgroundColor=this.hoverColor)):(t.backgroundColor!==void 0?t.style.backgroundColor=t.backgroundColor:t.style.backgroundColor=null,s.backgroundColor!==void 0?s.style.backgroundColor=s.backgroundColor:s.style.backgroundColor=null),t.hoverStatus=i,s.hoverStatus=i}}},Yg={key:0,class:"fv-DatePicker__input-month"},qg={key:0},Xg={class:"fv-DatePicker__input-body"},Kg={class:"fv-DatePicker__input-options-col",key:"col1"},jg=h("i",{class:"ms-Icon ms-Icon--CaretUpSolid8"},null,-1),Jg=[jg],Qg=["onClick"],Zg=h("i",{class:"ms-Icon ms-Icon--CaretDownSolid8"},null,-1),ep=[Zg],tp={class:"fv-DatePicker__input-options-col",key:"col2"},ip=h("i",{class:"ms-Icon ms-Icon--CaretUpSolid8"},null,-1),sp=[ip],np=["onClick"],rp={key:0},op=h("i",{class:"ms-Icon ms-Icon--CaretDownSolid8"},null,-1),ap=[op],lp={class:"fv-DatePicker__input-options-col",key:"col3"},up=h("i",{class:"ms-Icon ms-Icon--CaretUpSolid8"},null,-1),dp=[up],hp={ref:"year",class:"fv-DatePicker__input-options-col-items"},cp=["onClick"],fp=h("i",{class:"ms-Icon ms-Icon--CaretDownSolid8"},null,-1),mp=[fp],gp={class:"fv-DatePicker__input-options-bottom-bar"},pp=h("i",{class:"ms-Icon ms-Icon--Accept"},null,-1),vp=[pp],bp=h("i",{class:"ms-Icon ms-Icon--Cancel"},null,-1),yp=[bp];function _p(i,e,t,s,n,r){const o=jn("hover");return f(),g("div",{class:k(["fv-DatePicker",[r.$theme,{disabled:t.disabled}]])},[h("div",{class:"fv-DatePicker__input",style:V({background:t.inputBackground}),onClick:e[0]||(e[0]=a=>r.focus())},[t.hideMonth?O("",!0):(f(),g("button",Yg,H(t.months[t.modelValue.getMonth()]),1)),t.hideDay?O("",!0):(f(),g("button",{key:1,class:"fv-DatePicker__input-day",style:V({borderColor:t.innerBorderColor})},[ue(H(t.modelValue.getDate())+" ",1),t.showWeek?(f(),g("span",qg,"("+H(t.weeks[t.modelValue.getDay()])+")",1)):O("",!0)],4)),t.hideYear?O("",!0):(f(),g("button",{key:2,style:V({borderColor:t.innerBorderColor}),class:"fv-DatePicker__input-year"},H(t.modelValue.getFullYear()),5))],4),L(fe,{name:"fv-DatePicker__options"},{default:x(()=>[P(h("div",{class:"fv-DatePicker__input-options",style:V({background:t.optionBackground})},[h("div",Xg,[h("div",{class:"fv-DatePicker__input-center-mask",style:V({background:t.selectedBackground})},null,4),t.hideMonth?O("",!0):P((f(),g("div",Kg,[h("div",{class:"fv-DatePicker__input-options-col-up",onClick:e[1]||(e[1]=a=>r.clickItem("month",n.config.buffer-1))},Jg),h("div",{ref:"month",style:V(n.style.monthCol),class:"fv-DatePicker__input-options-col-items"},[(f(!0),g(Y,null,Z(n.options.month,(a,l)=>P((f(),g("div",{class:"fv-DatePicker__input-options-col-item",key:`month${a}${l}`,onClick:u=>r.clickItem("month",l)},[ue(H(t.months[a]),1)],8,Qg)),[[o,r.hover]])),128))],4),h("div",{class:"fv-DatePicker__input-options-col-down",onClick:e[2]||(e[2]=a=>r.clickItem("month",n.config.buffer+1))},ep)])),[[o,r.hoverUpAndDown]]),t.hideDay?O("",!0):P((f(),g("div",tp,[h("div",{class:"fv-DatePicker__input-options-col-up",onClick:e[3]||(e[3]=a=>r.clickItem("day",n.config.buffer-1))},sp),h("div",{ref:"day",style:V(n.style.dayCol),class:"fv-DatePicker__input-options-col-items"},[(f(!0),g(Y,null,Z(n.options.day,(a,l)=>P((f(),g("div",{class:"fv-DatePicker__input-options-col-item",key:`day${a}${l}`,onClick:u=>r.clickItem("day",l)},[ue(H(a>0?a:"")+" ",1),t.showWeek?(f(),g("span",rp,"("+H(t.weeks[r.weekIndex(a)])+")",1)):O("",!0)],8,np)),[[o,r.hover]])),128))],4),h("div",{class:"fv-DatePicker__input-options-col-down",onClick:e[4]||(e[4]=a=>r.clickItem("day",n.config.buffer+1))},ap)])),[[o,r.hoverUpAndDown]]),t.hideYear?O("",!0):P((f(),g("div",lp,[h("div",{class:"fv-DatePicker__input-options-col-up",onClick:e[5]||(e[5]=a=>r.clickItem("year",n.config.buffer-1))},dp),h("div",hp,[(f(!0),g(Y,null,Z(n.options.year,(a,l)=>P((f(),g("div",{class:"fv-DatePicker__input-options-col-item",key:`year${a}${l}`,onClick:u=>r.clickItem("year",l)},[ue(H(a>0?a:""),1)],8,cp)),[[o,r.hover]])),128))],512),h("div",{class:"fv-DatePicker__input-options-col-down",onClick:e[6]||(e[6]=a=>r.clickItem("year",n.config.buffer+1))},mp)])),[[o,r.hoverUpAndDown]])]),h("div",gp,[P((f(),g("button",{class:"fv-DatePicker__input-options-accept",onClick:e[7]||(e[7]=(...a)=>r.confirm&&r.confirm(...a))},vp)),[[o,r.hover]]),P((f(),g("button",{class:"fv-DatePicker__input-options-cancel",onClick:e[8]||(e[8]=(...a)=>r.cancel&&r.cancel(...a))},yp)),[[o,r.hover]])])],4),[[R,n.popper.show]])]),_:1})],2)}const wp=z(Ug,[["render",_p]]),kp=ie(wp),Cp={...te},xp={emits:["mousedown","mouseup","mousemove","touchstart","touchend","touchmove"],props:{theme:{type:String,default:"global"}},data(){return{moveable:!1}},computed:{$theme(){return q(this.$props).theme.value}},mounted(){this.Init()},methods:{Init(){window.addEventListener("mousemove",i=>{this.moveable&&this.$emit("mousemove",i)}),window.addEventListener("mouseup",i=>{this.moveable&&this.stop()}),window.addEventListener("touchmove",i=>{this.moveable&&this.$emit("touchmove",i)}),window.addEventListener("touchend",i=>{this.moveable&&this.stop()})},forward(i){i.preventDefault(),this.moveable=!0,i.type==="mousedown"?this.$emit("mousedown",i):this.$emit("touchstart",i)},stop(i){this.moveable=!1,i&&(i.type==="mouseup"?this.$emit("mouseup",i):this.$emit("touchend",i))}}},Sp=h("i",null,null,-1),Tp=[Sp];function Vp(i,e,t,s,n,r){return f(),g("div",{class:"fv-details-list-spliter",onMousedown:e[0]||(e[0]=(...o)=>r.forward&&r.forward(...o)),onMouseup:e[1]||(e[1]=(...o)=>r.stop&&r.stop(...o)),onTouchstart:e[2]||(e[2]=(...o)=>r.forward&&r.forward(...o)),onTouchend:e[3]||(e[3]=(...o)=>r.stop&&r.stop(...o))},Tp,32)}const Ip=z(xp,[["render",Vp]]),Lp={props:{modelValue:{default:!1},color:{default:""}},data(){return{checked:this.modelValue}},watch:{modelValue(i){this.checked=i},checked(i){}}},$p=h("i",{class:"ms-Icon ms-Icon--StatusCircleCheckmark fv-details-list-icon-accept"},null,-1),Pp=[$p];function Mp(i,e,t,s,n,r){return f(),g("div",{class:k(["fv-details-list-selector",[{choosen:n.checked}]])},[h("div",{class:"fv-details-list-icon-ring",style:V({background:n.checked?t.color:""})},Pp,4)],2)}const Ep=z(Lp,[["render",Mp]]),Dp={name:"FvDetailsList",emits:["change-value","choose-items","lazyload","rightclick","drop-items"],components:{spliter:Ip,selector:Ep},setup(){const i=ei();return i.initRevealInstances(),{uR:i}},props:{...Cp,modelValue:{default:()=>[]},head:{default:()=>[]},group:{default:()=>[]},filter:{default:()=>({key:"any",value:""})},showGroup:{default:!1},autoHeight:{default:!1},foreground:{default:""},headBackground:{default:""},compact:{default:!1},multiSelection:{default:!1},allowDrag:{default:!1},rowCss:{default:""},rightMenuWidth:{default:200}},data(){return{thisValue:[],listWidth:0,thisHead:[],thisGroup:[],posX:0,posY:0,rightMenuHeight:0,windowResize:{trigger:!1,width:0},sort:{name:"",desc:!1},dragTransfer:{},FR_Table_Head:null,show:{rightMenu:!1},styles:{listHead:{background:""}},timer:{width:{},resize:{}}}},watch:{modelValue(i){if(this.valueInit(),this.sort.name!=""){let e=this.thisHead.find(t=>t.sortName===this.sort.name);e!=null&&this.sortClick(e,!1)}this.groupInit()},head:{deep:!0,handler(){this.headInit(),this.widthFormat(0)}},group(i){this.groupInit()},filter(i){this.filterValue()},"filter.value"(i){this.filterValue()},thisGroup(i){this.getGroupDataInit()},headBackground(i){this.stylesInit()},multiSelection(i){for(let e=0;e<this.thisValue.length;e++){let t=this.thisValue[e];t.choosen=!1,this.thisValue[e]=t}},listWidth(i){this.widthFormat(0)},"show.rightMenu"(i){this.rightMenuHeight==0&&(this.rightMenuHeight=this.$refs.rightMenu.clientHeight)}},computed:{$theme(){return q(this.$props).theme.value},colWidth(){let i=[];for(let e of this.thisHead)i.push(`${e.width}px`);return i},currentChoosen(){let i=[];for(let e=0;e<this.thisValue.length;e++)this.thisValue[e].choosen&&this.thisValue[e].show&&i.push(this.thisValue[e]);return i},currentChoosenAll(){for(let i=0;i<this.thisValue.length;i++)if(this.thisValue[i].choosen!=!0&&this.thisValue[i].show)return!1;return!0},currentChoosenNum(){let i=0;for(let e=0;e<this.thisValue.length;e++)this.thisValue[e].choosen&&this.thisValue[e].show&&i++;return i},currentExpandAll(){for(let i=0;i<this.thisGroup.length;i++)if(this.thisGroup[i].expand!=!0)return!1;return!0},borderLightColor(){return()=>this.$theme=="light"?"rgba(121, 119, 117, 0.6)":this.$theme=="dark"||this.$theme=="custom"?"rgba(255, 255, 255, 0.6)":"rgba(121, 119, 117, 0.6)"},backgroundLightColor(){return()=>this.$theme=="light"?"rgba(121, 119, 117, 0.3)":this.$theme=="dark"||this.$theme=="custom"?"rgba(255, 255, 255, 0.3)":"rgba(121, 119, 117, 0.3)"}},mounted(){this.headInit(),this.valueInit(),this.groupInit(),this.lazyLoadInit(),this.rightMenuClearInit(),this.listWidthRefreshInit(),this.watchWindowResizeInit(),this.filterValue(),this.FRInit(),this.stylesInit()},methods:{FRInit(){this.FR_Table_Head=this.uR.revealMaskedJs.apply(this.$el,{maskedSelector:this.$refs.list_head,borderGradientSize:80,borderLightColor:this.borderLightColor,backgroundLightColor:this.backgroundLightColor,selector:this.$el.querySelectorAll(".list-head .col")})},stylesInit(){this.styles.listHead.background=this.headBackground},headInit(){let i={content:"",minWidth:60,width:80,disX:0,sortName:!1,customSort:!1,show:!0,visible:!0};this.thisHead=[];for(let e of this.head){let t=JSON.parse(JSON.stringify(i));if(typeof e=="string")t.content=e;else for(let s in e)t[s]=e[s];this.thisHead.push(t)}},valueInit(){let i=JSON.parse(JSON.stringify(this.modelValue));for(let e=0;e<i.length;e++)i[e].choosen=i[e].choosen==null?!1:i[e].choosen,i[e].show=!0;this.thisValue=i,this.filterValue()},groupInit(){let i={name:"",key:60,value:80,data:[],expand:!0};this.thisGroup=[];for(let e of this.group){let t=JSON.parse(JSON.stringify(i));if(typeof e=="string")t.name=e;else for(let s in e)t[s]=e[s];this.thisGroup.push(t)}},getGroupDataInit(){let i=this.thisGroup;for(let e=0;e<i.length;e++){i[e].data=[];for(let t of this.thisValue)t[i[e].key]==i[e].value&&i[e].data.push(t)}},listWidthRefreshInit(){this.timer.width=setInterval(()=>{let i=this.$el.clientWidth;this.multiSelection&&(i-=50),this.showGroup&&(i-=36),this.listWidth=i},30)},watchWindowResizeInit(){window.addEventListener("resize",()=>{this.windowResize.trigger=!0}),this.timer.resize=setInterval(()=>{let i=document.body.clientWidth;this.windowResize.trigger&&this.windowResize.width==i&&(this.headInit(),this.widthFormat(0),this.windowResize.trigger=!1),this.windowResize.width=i},350)},lazyLoadInit(){this.$SUtility.ScrollToLoadInit(this.$refs.l1,()=>{this.$emit("lazyload",this.thisValue)}),this.$SUtility.ScrollToLoadInit(this.$refs.l2,()=>{this.$emit("lazyload",this.thisValue)})},rightMenuClearInit(){window.addEventListener("click",i=>{i.target!==this.$refs.rightMenu&&(this.show.rightMenu=!1)})},filterValue(){let i=this.filter;if(typeof this.filter=="string"&&(i={key:"any",value:this.filter}),i.key==null||i.value==null)return console.warn(this.filter,"Invalid filter."),0;if(i.key=="any")for(let e=0;e<this.thisValue.length;e++){let t=!1,s=this.thisValue[e];for(let n in this.thisValue[e])if(typeof s[n]=="string"&&s[n].toLowerCase().indexOf(i.value.toLowerCase())>-1){t=!0;break}s.show=t}else for(let e=0;e<this.thisValue.length;e++){let t=this.thisValue[e],s=this.thisValue[e][this.filter.key].toLowerCase().indexOf(i.value.toLowerCase())>-1;t.show=s}this.$emit("change-value",this.thisValue)},resizeDown(i,e){let t=this.thisHead[e];t.disX=i.clientX,this.thisHead[e]=t},resizeMove(i,e){for(let o=this.thisHead.length-1;o>=0;o--)if(this.thisHead[o].visible){if(o===e)return;break}let t=this.thisHead[e],s=i.clientX-t.disX;t.disX=i.clientX;let n=t.width+s;n=n<t.minWidth?t.minWidth:n;let r=0;for(let o=0;o<e;o++)r+=this.thisHead[o].width;n=n>this.listWidth-r?this.listWidth-r:n,t.width=n,this.thisHead[e]=t,this.widthFormat(e)},widthFormat(i){if(i<this.thisHead.length-1){let e=0;for(let n=0;n<=i;n++)this.thisHead[n].visible&&(e+=this.thisHead[n].width);let t=this.listWidth-e,s=0;for(let n=i+1;n<this.thisHead.length;n++)this.thisHead[n].visible&&(s+=this.thisHead[n].width);for(let n=this.thisHead.length-1;n>i;n--){if(!this.thisHead[n].visible)continue;let r=s-this.thisHead[n].width;if(r+this.thisHead[n].minWidth<=t){let o=this.thisHead[n];o.width=t-r,o.show=!0;break}else{let o=this.thisHead[n];o.show=!1}s-=this.thisHead[n].width}}},itemChooseClick(i){this.thisValue.indexOf(i);let e=i;e.choosen=!e.choosen,this.$emit("change-value",this.thisValue),this.$emit("choose-items",this.currentChoosen)},chooseCurrent(i){for(let e=0;e<this.thisValue.length;e++){let t=this.thisValue[e];t.choosen=!1}i.choosen=!0,this.$emit("change-value",this.thisValue),this.$emit("choose-items",this.currentChoosen)},chooseAll(){let i=!this.currentChoosenAll;for(let e=0;e<this.thisValue.length;e++){let t=this.thisValue[e];t.choosen=i}this.$emit("change-value",this.thisValue),this.$emit("choose-items",this.currentChoosen)},isGroupChooseAll(i){for(let e=0;e<i.data.length;e++)if(!i.data[e].choosen)return!1;return!0},chooseGroup(i){let e=!this.isGroupChooseAll(i);for(let t=0;t<i.data.length;t++){let s=i.data[t];s.choosen=e}this.$emit("change-value",this.thisValue),this.$emit("choose-items",this.currentChoosen)},expandGroup(i){let e=this.thisGroup.indexOf(i),t=i;t.expand=!t.expand,this.thisGroup[e]=t},expandAll(){let i=!this.currentExpandAll;for(let e=0;e<this.thisGroup.length;e++){let t=this.thisGroup[e];t.expand=i}},rightClick(i,e){i.preventDefault(),this.show.rightMenu=!0;let t=this.$el.getBoundingClientRect(),s={};s.x=i.x,s.y=i.y,s.x<t.left&&(s.x=t.left),s.x+this.rightMenuWidth>t.right&&(s.x=t.right-this.rightMenuWidth),s.y<t.top&&(s.y=t.top),s.y+this.rightMenuHeight>t.bottom&&(s.y=t.bottom-this.rightMenuHeight),this.posX=s.x,this.posY=s.y,this.$emit("rightclick",e)},sortClick(i,e=!0){let t=this.sort.desc;if(i.sortName==!1)return 0;this.sort.name!=i.sortName?t=!1:t=e?!this.sort.desc:this.sort.desc,this.sort.name=i.sortName,this.sort.desc=t,t=t?-1:1,i.customSort!=!1?this.thisValue.sort((s,n)=>t*i.customSort(s,n)):this.inteliSort(i.sortName,t)},inteliSort(i=0,e=!1){let t=this.sortName,s=[/^\d{4}[-/]\d{1,2}[-/]\d{1,2} \d{1,2}:\d{1,2}:\d{1,2}$/,/^\d{1,2}[-/]\d{1,2}[-/]\d{4} \d{1,2}:\d{1,2}:\d{1,2}$/,/^\d{4}[-/]\d{1,2}[-/]\d{1,2}/,/^\d{1,2}[-/]\d{1,2}[-/]\d{4}/],n=this.thisValue[0][i];if(!isNaN(n))t=this.sortNum;else for(let r of s)n.toString().match(r)&&(t=this.sortTime);this.thisValue.sort((r,o)=>e*t(r[i],o[i]))},sortNum(i,e){return parseFloat(i)<parseFloat(e)?1:-1},sortName(i,e){return i.localeCompare(e)},sortTime(i,e){return this.$SDate.Compare(this.$SDate.Parse(i),this.$SDate.Parse(e))},drag(i,e){this.currentChoosenNum==0?this.dragTransfer=e:e.choosen?this.dragTransfer=this.currentChoosen:(this.chooseCurrent(e),this.dragTransfer=e)},drop(i){let e=this.dragTransfer,t=i,s=this.thisValue.indexOf(t);if(this.currentChoosenNum>0&&e[0].choosen){for(let n=e.length-1;n>=0;n--)this.thisValue.splice(this.thisValue.indexOf(e[n]),1);t.choosen?this.thisValue.splice(0,0,...e):(s=this.thisValue.indexOf(t),this.thisValue.splice(s,0,...e))}else{let n=this.thisValue.indexOf(e);this.thisValue.splice(n,1),this.thisValue.splice(s,0,e)}this.$emit("drop-items",{transfer:e,value:this.thisValue})},valueTrigger(i){return typeof i=="function"?i():i}},beforeUnmount(){for(let i in this.timer)clearInterval(this.timer[i]);this.uR.revealMaskedJs.destroy(this.FR_Table_Head)}},Bp=h("i",{class:"ms-Icon ms-Icon--ChevronRight"},null,-1),Rp=[Bp],Fp=["onClick"],zp={class:"default-title"},Ap=["draggable","onDrag","onDrop","onContextmenu"],Op=["onClick"],Np=["onClick"],Hp=["onClick"],Wp=["onClick"],Gp=h("i",{class:"ms-Icon ms-Icon--ChevronRight"},null,-1),Up=[Gp],Yp={class:"col",style:{"min-width":"150px"}},qp=["onContextmenu"],Xp={class:"fv-details-list-icon-block",key:"multi-col"},Kp=["onClick"],jp=["onClick"];function Jp(i,e,t,s,n,r){const o=K("selector"),a=K("spliter");return f(),g("div",{class:k(["fv-DetailsList",[r.$theme]])},[h("div",{class:k(["fv-details-list-head",{"fv-custom-head":!0}]),ref:"list_head"},[P(h("span",{class:"fv-details-list-icon-block",style:V(n.styles.listHead),onClick:e[1]||(e[1]=(...l)=>r.chooseAll&&r.chooseAll(...l))},[L(o,{modelValue:r.currentChoosenAll,"onUpdate:modelValue":e[0]||(e[0]=l=>r.currentChoosenAll=l),color:t.foreground},null,8,["modelValue","color"])],4),[[R,t.multiSelection]]),P(h("span",{class:"col",style:V([{width:"36px",padding:"0px"},n.styles.listHead])},[h("span",{class:k(["expand",{choose:r.currentExpandAll}]),onClick:e[2]||(e[2]=(...l)=>r.expandAll&&r.expandAll(...l))},Rp,2)],4),[[R,t.showGroup]]),(f(!0),g(Y,null,Z(n.thisHead,(l,u)=>P((f(),g("span",{class:"col",key:`head: ${u}`,style:V({"min-width":r.colWidth[u],width:r.colWidth[u],background:n.styles.listHead.background})},[h("span",{class:"col-content",onClick:d=>r.sortClick(l)},[w(i.$slots,"head",{item:l,index:u},()=>[h("p",zp,H(l.content),1)]),P(h("i",{class:k(["ms-Icon sort",[`ms-Icon--${n.sort.desc?"Down":"Up"}`]])},null,2),[[R,l.sortName===n.sort.name]])],8,Fp),L(a,{style:{height:"100%"},onMousedown:d=>r.resizeDown(d,u),onMousemove:d=>r.resizeMove(d,u),onTouchstart:d=>r.resizeDown(d.targetTouches[0],u),onTouchmove:d=>r.resizeMove(d.targetTouches[0],u)},null,8,["onMousedown","onMousemove","onTouchstart","onTouchmove"])],4)),[[R,l.show&&r.valueTrigger(l.visible)]])),128))],512),t.showGroup?O("",!0):(f(),g("div",{key:0,class:k(["fv-details-list-content",{compact:t.compact,"auto-height":t.autoHeight}]),ref:"l1"},[L(qi,{name:"details-list",tag:"div"},{default:x(()=>[(f(!0),g(Y,null,Z(n.thisValue,(l,u)=>P((f(),g("div",{class:k(["content-row",[{choose:l.choosen,"fv-custom-row":!0},t.rowCss]]),key:`row: ${u}`,draggable:t.allowDrag,onDrag:d=>r.drag(d,l),onDragover:e[3]||(e[3]=d=>d.preventDefault()),onDrop:d=>r.drop(l),onContextmenu:d=>r.rightClick(d,l)},[P(h("span",{class:"fv-details-list-icon-block",key:"multi-col",onClick:d=>r.itemChooseClick(l)},[L(o,{modelValue:l.choosen,"onUpdate:modelValue":d=>l.choosen=d,color:t.foreground},null,8,["modelValue","onUpdate:modelValue","color"])],8,Op),[[R,t.multiSelection]]),(f(!0),g(Y,null,Z(n.thisHead,(d,c)=>P((f(),g("span",{class:"col",key:`row: ${u} col: ${c}`,style:V({width:r.colWidth[c]}),onClick:m=>r.chooseCurrent(l)},[w(i.$slots,`column_${c}`,{item:l,row_index:u,col_index:c},()=>[h("p",null,H(`row: ${u} col: ${c}`),1)])],12,Np)),[[R,d.show&&r.valueTrigger(d.visible)]])),128)),w(i.$slots,"row_expand",{item:l,row_index:u})],42,Ap)),[[R,l.show]])),128))]),_:3})],2)),t.showGroup?(f(),g("div",{key:1,class:k(["fv-details-list-content",{compact:t.compact,"auto-height":t.autoHeight}]),ref:"l2"},[(f(!0),g(Y,null,Z(n.thisGroup,(l,u)=>(f(),g("div",{key:`group: ${u}`},[h("div",{class:k(["content-row",{choose:r.isGroupChooseAll(l),"fv-custom-group-row":!0}])},[w(i.$slots,"group",{item:l,index:u,isMulti:t.multiSelection,isChoose:r.isGroupChooseAll(l)},()=>[P(h("span",{class:"fv-details-list-icon-block",key:"multi-col",onClick:d=>r.chooseGroup(l)},[L(o,{value:r.isGroupChooseAll(l),color:t.foreground},null,8,["value","color"])],8,Hp),[[R,t.multiSelection]]),h("span",{class:k(["expand",{choose:l.expand}]),onClick:d=>r.expandGroup(l)},Up,10,Wp),w(i.$slots,"group_content",{item:l,index:u,isMulti:t.multiSelection,isChoose:r.isGroupChooseAll(l)},()=>[h("span",Yp,[h("p",null,H(l.name),1)])])])],2),L(fe,{name:"zoom-in-top"},{default:x(()=>[P(h("div",null,[(f(!0),g(Y,null,Z(l.data,(d,c)=>P((f(),g("div",{class:k(["content-row",[{choose:d.choosen,"fv-custom-row":!0},t.rowCss]]),key:`group: ${u} row: ${c}`,onContextmenu:m=>r.rightClick(m,d)},[P(h("span",Xp,[L(o,{modelValue:d.choosen,"onUpdate:modelValue":m=>d.choosen=m,onClick:m=>r.itemChooseClick(d),color:t.foreground},null,8,["modelValue","onUpdate:modelValue","onClick","color"])],512),[[R,t.multiSelection]]),h("span",{class:"col",style:{width:"36px"},onClick:m=>r.chooseCurrent(d)},null,8,Kp),(f(!0),g(Y,null,Z(n.thisHead,(m,p)=>P((f(),g("span",{class:"col",key:`group: ${u} row: ${c} col: ${p}`,style:V({width:r.colWidth[p]}),onClick:v=>r.chooseCurrent(d)},[w(i.$slots,`column_${p}`,{item:d,row_index:c,col_index:p},()=>[h("p",null,H(`row: ${c} col: ${p}`),1)])],12,jp)),[[R,m.show&&r.valueTrigger(m.visible)]])),128)),w(i.$slots,"row_expand",{item:d,row_index:c})],42,qp)),[[R,d.show]])),128))],512),[[R,l.expand]])]),_:2},1024)]))),128))],2)):O("",!0),L(fe,{name:"zoom-in-top"},{default:x(()=>[P(h("div",{class:"fv-rightMenu",ref:"rightMenu",style:V({left:n.posX+"px",top:n.posY+"px",width:t.rightMenuWidth+"px"})},[w(i.$slots,"menu",{},()=>[h("div",null,[h("span",null,[h("p",null,H(r.currentChoosenNum)+" Selected",1)])])])],4),[[R,n.show.rightMenu]])]),_:3})],2)}const Qp=z(Dp,[["render",Jp]]),Zp=ie(Qp),ev={...te},tv={name:"FvDrawer",emits:["update:modelValue"],props:{...ev,position:{type:String,default:"bottom"},length:{default:300},background:{default:void 0},modelValue:{default:void 0},zIndex:{type:Number,default:10},focusTrap:{type:Boolean,default:!1},appendBody:{type:Boolean,default:!1}},computed:{$theme(){return q(this.$props).theme.value}},data(){return{lock:!1,style:{drawer:{zIndex:this.zIndex}},show:{drawer:this.modelValue==null?!1:this.modelValue},initShow:this.computeVisible,window:{click:i=>{if(!this.computeVisible||this.lock||this.focusTrap)return;let e=i.target,t=!1;for(;e&&(e==this.$el&&(t=!0),e.parentNode);)e=e.parentNode;t||(this.computeVisible=!1)}}}},computed:{$theme(){return this.theme=="system"?this.$fvGlobal.state.theme:this.theme},computeVisible:{get(){return this.modelValue==null?this.show.drawer:this.modelValue},set(i){this.show.drawer=i,this.$emit("update:modelValue",i)}}},watch:{computeVisible(){this.lock=!0,this.setStyle(),setTimeout(()=>{this.lock=!1},50)}},mounted(){this.init(),this.setStyle(),this.initShow=!0},beforeUnmount(){for(let i in this.window)window.removeEventListener(i,this.window)},methods:{init(){for(let i in this.window)window.addEventListener(i,this.window[i]);this.appendBody&&(this.$refs.drawer.remove(),document.body.appendChild(this.$refs.drawer))},setStyle(){let i=this.length;typeof this.length=="number"&&(i+="px"),this.position=="bottom"?this.style.drawer={left:"0",bottom:"0",height:i,width:"100%",zIndex:this.zIndex,transform:` ${this.computeVisible?"translateY(0%)":"translateY(110%)"}`}:this.position=="top"?this.style.drawer={left:"0",top:"0",height:i,width:"100%",zIndex:this.zIndex,transform:`${this.computeVisible?"translateY(0%)":"translateY(-110%)"}`}:this.position=="left"?this.style.drawer={left:"0",top:"0",width:i,height:"100%",zIndex:this.zIndex,transform:`${this.computeVisible?"translateX(0%)":"translateX(-110%)"}`}:this.style.drawer={right:"0",top:"0",width:i,height:"100%",zIndex:this.zIndex,transform:`${this.computeVisible?"translateX(0%)":"translateX(110%)"}`}},close(){this.computeVisible=!1}}};function iv(i,e,t,s,n,r){return P((f(),g("div",{ref:"drawer",class:k(["fv-Drawer",[r.$theme]]),style:V([n.style.drawer,{background:t.background}])},[w(i.$slots,"default")],6)),[[R,n.initShow]])}const sv=z(tv,[["render",iv]]),nv=ie(sv),rv={...te},ov={emits:["update:modelValue"],props:{modelValue:{default:()=>[]},borderWidth:{default:1},placeholder:{default:"Dropdown"},borderRadius:{default:"3"},inputForeground:{default:""},inputBackground:{default:""},inputBorderColor:{default:""},dropDownIcon:{default:"ChevronDown"},dropDownIconForeground:{default:""},revealBorderColor:{default:!1},revealBackgroundColor:{default:!1},disabled:{default:!1},theme:{default:"global"}},data(){return{choosenValue:this.modelValue}},watch:{modelValue(i){this.choosenValue=i},choosenValue(i){this.$emit("update:modelValue",i)}},computed:{$theme(){return q(this.$props).theme.value},inputValue(){let i="";for(let e of this.choosenValue)i==""?i+=this.valueTrigger(e.text):i+=`,${this.valueTrigger(e.text)}`;return i},borderLightColor(){return this.revealBorderColor?this.revealBorderColor:this.$theme=="light"?"rgba(121, 119, 117, 0.6)":this.$theme=="dark"||this.$theme=="custom"?"rgba(255, 255, 255, 0.6)":"rgba(121, 119, 117, 0.6)"},backgroundLightColor(){return this.revealBackgroundColor?this.revealBackgroundColor:this.$theme=="light"?"rgba(121, 119, 117, 0.3)":this.$theme=="dark"||this.$theme=="custom"?"rgba(255, 255, 255, 0.3)":"rgba(121, 119, 117, 0.3)"}},mounted(){},methods:{valueTrigger(i){return typeof i=="function"?i():i}}},av=["placeholder","value"];function lv(i,e,t,s,n,r){const o=K("fv-reveal-container");return f(),g("div",{class:"drop-down-box",style:V({"border-radius":`${t.borderRadius}px`})},[h("div",{class:"drop-down-container",style:V({background:t.inputBackground,"border-radius":`${t.borderRadius}px`})},[L(o,{parent:()=>i.$el,class:"fv-dropdown-reveal-container",backgroundColor:r.backgroundLightColor,borderColor:r.borderLightColor,backgroundGradientSize:120,borderGradientSize:80,borderWidth:t.borderWidth,borderRadius:t.borderRadius,disabled:t.disabled},null,8,["parent","backgroundColor","borderColor","borderWidth","borderRadius","disabled"]),w(i.$slots,"input",{placeholder:t.placeholder,value:r.inputValue},()=>[h("input",{class:"fv-drop-down-input",placeholder:t.placeholder,readonly:"",value:r.inputValue,style:V({color:t.inputForeground,"border-radius":`${t.borderRadius}px`,borderWidth:`${t.borderWidth}px`,borderColor:t.inputBorderColor})},null,12,av),h("i",{class:k(["right-icon ms-Icon",[`ms-Icon--${t.dropDownIcon}`]]),style:V({color:t.dropDownIconForeground})},null,6)])],4)],4)}const uv=z(ov,[["render",lv]]),dv={emits:["update:modelValue","chooseItem"],props:{modelValue:{default:()=>[]},options:{default:()=>[]},multiple:{default:!1},maxHeight:{default:""},borderRadius:{default:"3"},checkBoxBackground:{default:""},dropDownListForeground:{default:"rgba(0, 120, 215, 0.9)"},dropDownListBackground:{default:"rgba(0, 90, 158, 1)"},showStatus:{default:()=>({position:"bottom",top:"100%",bottom:"",height:"auto",overflow:"hidden"})},theme:{default:"global"}},data(){return{choosenValue:this.modelValue,styles:{listContainer:{top:"100%",bottom:"",height:"auto",maxHeight:"",background:"",borderRadius:""},title:{color:""}}}},watch:{modelValue(i){this.choosenValue=i},choosenValue(i){this.$emit("update:modelValue",i)},maxHeight(){this.stylesInit()},borderRadius(){this.stylesInit()},dropDownListForeground(){this.stylesInit()},dropDownListBackground(){this.stylesInit()},"showStatus.top"(){this.stylesInit()},"showStatus.bottom"(){this.stylesInit()},"showStatus.height"(){this.stylesInit()},"showStatus.overflow"(){this.stylesInit()}},computed:{$theme(){return q(this.$props).theme.value}},mounted(){this.stylesInit()},methods:{stylesInit(){this.styles.listContainer.borderRadius=`${this.borderRadius}px`,this.styles.listContainer.background=this.dropDownListBackground,this.styles.listContainer.top=this.showStatus.top,this.styles.listContainer.bottom=this.showStatus.bottom,this.styles.listContainer.height=this.showStatus.height,this.styles.listContainer.maxHeight=`${this.showStatus.maxHeight}px`,this.styles.listContainer.overflow=this.showStatus.overflow,this.styles.title.color=this.dropDownListForeground},valueTrigger(i){return typeof i=="function"?i():i},onClick(i){if(i.disabled||i.type==="header"||i.type=="divider")return 0;if(this.multiple){let e=this.choosenValue.find(t=>t.key===i.key);e!=null?(i.choosen=!1,this.choosenValue.splice(this.choosenValue.indexOf(e),1)):(i.choosen=!0,this.choosenValue.push(i))}else{for(let e of this.choosenValue)e.choosen=!1;i.choosen=!0,this.choosenValue=[],this.choosenValue.push(i)}this.$emit("chooseItem",{option:i,index:this.options.indexOf(i)})}}},hv=["onClick"];function cv(i,e,t,s,n,r){const o=K("fv-check-box");return f(),g("div",{class:"list-container",style:V(n.styles.listContainer)},[(f(!0),g(Y,null,Z(t.options,(a,l)=>(f(),g("div",{key:`item: ${l}`,onClick:u=>r.onClick(a)},[h("div",{class:k(["list-item",{hr:r.valueTrigger(a.type)=="divider",normal:r.valueTrigger(a.type)=="default"||r.valueTrigger(a.type)==null,disabled:r.valueTrigger(a.disabled),choose:a.choosen}])},[P(h("p",{class:"title",style:V(n.styles.title)},H(r.valueTrigger(a.text)),5),[[R,r.valueTrigger(a.type)=="header"]]),w(i.$slots,"options",{option:a,index:l,valueTrigger:r.valueTrigger},()=>[P(L(o,{modelValue:a.choosen,"onUpdate:modelValue":u=>a.choosen=u,disabled:r.valueTrigger(a.disabled),foreground:t.dropDownListForeground,background:t.checkBoxBackground,theme:t.theme},{default:x(()=>[ue(H(r.valueTrigger(a.text)),1)]),_:2},1032,["modelValue","onUpdate:modelValue","disabled","foreground","background","theme"]),[[R,r.valueTrigger(a.type)=="default"||r.valueTrigger(a.type)==null&&t.multiple]]),P(h("p",null,H(r.valueTrigger(a.text)),513),[[R,r.valueTrigger(a.type)=="default"||r.valueTrigger(a.type)==null&&!t.multiple]])])],2)],8,hv))),128))],4)}const fv=z(dv,[["render",cv]]),mv={name:"FvDropDown",components:{dropDownInput:uv,listContainer:fv},emits:["update:modelValue","change","visible-change"],props:{...rv,modelValue:{default:()=>[]},options:{default:()=>[]},multiple:{default:!1},borderWidth:{default:1},borderRadius:{default:"6"},placeholder:{default:"Dropdown"},maxHeight:{default:""},inputForeground:{default:""},inputBorderColor:{default:""},checkBoxBackground:{default:""},dropDownListForeground:{default:""},dropDownListBackground:{default:""},inputBackground:{default:""},dropDownIcon:{default:"ChevronDown"},dropDownIconForeground:{default:""},showError:{default:!1},errorMessage:{default:"This dropdown has an error"},disabled:{default:!1},setFocus:{default:!1}},data(){return{choosenValue:this.modelValue,topRemainHeight:window.innerHeight,bottomRemainHeight:window.innerHeight,timer:{},styles:{dropDown:{zIndex:0,overflow:"visible"}},show:{listContainer:!1}}},watch:{modelValue(i){this.choosenValue=i},choosenValue(i){this.$emit("update:modelValue",i)},setFocus(i){this.show.listContainer=i},"show.listContainer"(i){i?this.styles.dropDown.zIndex=1:this.styles.dropDown.zIndex=0,this.$emit("visible-change",i)}},computed:{$theme(){return q(this.$props).theme.value},isDisabled(){return this.options.length==0||this.disabled.toString()=="true"||this.disabled=="disabled"||this.disabled===""},dropDownListHeight(){return 36*this.options.length},dropDownListShowStatus(){return this.dropDownListHeight<this.bottomRemainHeight?{position:"bottom",top:"100%",bottom:"",height:"auto",overflow:"hidden"}:this.dropDownListHeight<this.topRemainHeight?{position:"top",top:"",bottom:"100%",height:"auto",overflow:"hidden"}:this.topRemainHeight>this.bottomRemainHeight?{position:"top",top:"",bottom:"100%",height:`${this.topRemainHeight}px`,overflow:"auto"}:{position:"bottom",top:"100%",bottom:"",height:`${this.bottomRemainHeight}px`,overflow:"auto"}}},mounted(){this.outSideClickInit(),this.heightSenseInit()},methods:{outSideClickInit(){window.addEventListener("click",i=>{let e=i.target,t=!1;for(;e&&e.tagName&&e.tagName.toLowerCase()!="body";){if(e==this.$el){t=!0;break}e=e.parentNode}t||(this.show.listContainer=!1)})},heightSenseInit(){clearInterval(this.timer),this.timer=setInterval(()=>{try{this.topRemainHeight=this.$refs.input.getBoundingClientRect().top}catch{this.topRemainHeight=window.innerHeight}try{this.bottomRemainHeight=window.innerHeight-this.$refs.input.getBoundingClientRect().bottom}catch{this.bottomRemainHeight=window.innerHeight}},300)},onChange(i){this.show.listContainer=this.multiple,this.$emit("change",i)}},beforeUnmount(){clearInterval(this.timer)}};function gv(i,e,t,s,n,r){const o=K("drop-down-input"),a=K("list-container");return f(),g("div",{class:k(["fv-DropDown",[r.$theme,r.isDisabled?"disabled":""]]),style:V(n.styles.dropDown)},[h("div",{class:"fv-drop-down-input-container",ref:"input",onClick:e[1]||(e[1]=l=>n.show.listContainer=r.isDisabled?!1:!n.show.listContainer)},[w(i.$slots,"drop-carrier",{value:n.choosenValue,placeholoder:t.placeholder,theme:r.$theme},()=>[L(o,{modelValue:n.choosenValue,"onUpdate:modelValue":e[0]||(e[0]=l=>n.choosenValue=l),placeholder:t.placeholder,theme:r.$theme,disabled:r.isDisabled,borderWidth:t.borderWidth,borderRadius:t.borderRadius,inputForeground:t.inputForeground,inputBackground:t.inputBackground,inputBorderColor:t.inputBorderColor,dropDownIcon:t.dropDownIcon,dropDownIconForeground:t.dropDownIconForeground,class:k({error:t.showError})},{input:x(l=>[w(i.$slots,"input",{placeholder:l.placeholder,value:l.value,valueTrigger:l.valueTrigger})]),_:3},8,["modelValue","placeholder","theme","disabled","borderWidth","borderRadius","inputForeground","inputBackground","inputBorderColor","dropDownIcon","dropDownIconForeground","class"])])],512),P(h("p",{class:"err-msg"},H(t.errorMessage),513),[[R,t.showError]]),L(fe,{name:`fv-drop-down-${r.dropDownListShowStatus.position}`},{default:x(()=>[P(L(a,{modelValue:n.choosenValue,"onUpdate:modelValue":e[2]||(e[2]=l=>n.choosenValue=l),options:t.options,multiple:t.multiple,borderRadius:t.borderRadius,checkBoxBackground:t.checkBoxBackground,dropDownListForeground:t.dropDownListForeground,dropDownListBackground:t.dropDownListBackground,showStatus:r.dropDownListShowStatus,theme:r.$theme,onChooseItem:r.onChange},{options:x(l=>[w(i.$slots,"options",{option:l.option,index:l.index})]),_:3},8,["modelValue","options","multiple","borderRadius","checkBoxBackground","dropDownListForeground","dropDownListBackground","showStatus","theme","onChooseItem"]),[[R,n.show.listContainer]])]),_:3},8,["name"])],6)}const pv=z(mv,[["render",gv]]),vv=ie(pv),bv={...te},yv={name:"FvExpander",emits:["update:modelValue","item-click"],props:{...bv,modelValue:{default:!1},icon:{type:String,default:"Mail"},title:{type:String,default:"Title of Expander."},content:{type:String,default:"Content information of Expander."},titleBackground:{default:""},expandBackground:{default:""},defaultHeight:{default:50},maxHeight:{default:300},disabledExpander:{default:!1},visibleOverflow:{default:!0}},data(){return{thisValue:this.modelValue,hover:!1}},watch:{modelValue(i){this.thisValue=i},thisValue(i){this.$emit("update:modelValue",i)}},computed:{hoverBackground(){try{let i=tn(this.titleBackground),e=i.hue();return i.hue(e-.01).cssa()}catch{return""}},$theme(){return q(this.$props).theme.value}},methods:{itemClick(){this.disabledExpander||(this.thisValue^=!0),this.$emit("item-click",this.thisValue)}}},_v={class:"expander-description-box"},wv={class:"expander-text"},kv={class:"expander-title"},Cv={class:"expander-description-extension-block"},xv={class:"ms-Icon ms-Icon--ChevronUpMed"},Sv={class:"ms-Icon ms-Icon--ChevronDownMed"},Tv={class:"ms-Icon ms-Icon--ChevronRightMed"};function Vv(i,e,t,s,n,r){return f(),g("div",{class:k(["fv-Expander",[r.$theme,{visibleOverflow:t.disabledExpander&&t.visibleOverflow}]]),style:V({height:n.thisValue?`${t.maxHeight}px`:`${t.defaultHeight}px`,"max-height":`${t.maxHeight}px`}),onMouseenter:e[3]||(e[3]=o=>n.hover=!0),onTouchstart:e[4]||(e[4]=o=>n.hover=!0),onMouseleave:e[5]||(e[5]=o=>n.hover=!1),onTouchend:e[6]||(e[6]=o=>n.hover=!1)},[h("div",{class:"expander-description-container",style:V({height:`${t.defaultHeight}px`,background:n.hover?r.hoverBackground:t.titleBackground}),onClick:e[2]||(e[2]=(...o)=>r.itemClick&&r.itemClick(...o))},[h("div",_v,[h("div",{class:"expander-description",onClick:e[0]||(e[0]=o=>i.$emit("description-click"))},[h("div",wv,[w(i.$slots,"content",{title:t.title,contnet:t.content},()=>[h("div",kv,H(t.title),1)])])]),h("div",Cv,[w(i.$slots,"extension")])]),h("div",{class:"expander-expand-icon-block",onClick:e[1]||(e[1]=o=>i.$emit("icon-click"))},[w(i.$slots,"expand-icon",{value:n.thisValue,disabledCollaspe:t.disabledExpander},()=>[P(h("i",xv,null,512),[[R,n.thisValue]]),P(h("i",Sv,null,512),[[R,!n.thisValue&&!t.disabledExpander]]),P(h("i",Tv,null,512),[[R,!n.thisValue&&t.disabledExpander]])])])],4),L(fe,{name:"expander-expanded"},{default:x(()=>[P(h("div",{class:"expander-detail",style:V({background:t.expandBackground})},[w(i.$slots,"default")],4),[[R,n.thisValue]])]),_:3})],38)}const Iv=z(yv,[["render",Vv]]),Lv=ie(Iv),$v={...te},Pv={name:"FvFlipView",emits:["update:modelValue","change"],props:{...$v,modelValue:{default:()=>[]},direction:{default:"horizontal"},animation:{default:"move"},duration:{default:800},autoPlay:{default:!0},autoPlayDuration:{default:5e3},showControlPanel:{default:""},mask:{default:""}},data(){return{thisValue:this.modelValue,currentIndex:0,currentAnimation:"",hoverTrigger:!1,thisAutoPlay:this.autoPlay,animationMap:{move:"move",moveFade:"move-fade",moveDifferent:"move-different",glue:"rotate-glue",push:"rotate-push",fold:"rotate-fold"},styles:{containerItem:{animationDuration:"0.8s",animationTimingFunction:""},controlPanel:{background:""}},timer:{autoPlay:{},dis:{}},lock:{slide:!0,slideIndex:!0}}},watch:{modelValue(i){this.thisValue=i},thisValue(i){this.$emit("update:modelValue",i)},autoPlay(i){this.thisAutoPlay=i},thisAutoPlay(){this.autoPlayInit()},duration(){this.durationInit()},mask(){this.stylesInit()},currentIndex(i){this.$emit("change",{index:i,duration:this.autoPlayDuration})}},computed:{$theme(){return q(this.$props).theme.value},firstBtn(){return this.direction=="horizontal"?"CaretLeftSolid8":"CaretUpSolid8"},secondBtn(){return this.direction=="horizontal"?"CaretRightSolid8":"CaretDownSolid8"},slideLeftAnimation(){return`${this.animationMap[this.animation]}-right-to-left`},slideRightAnimation(){return`${this.animationMap[this.animation]}-left-to-right`},slideTopAnimation(){return`${this.animationMap[this.animation]}-bottom-to-top`},slideBottomAnimation(){return`${this.animationMap[this.animation]}-top-to-bottom`}},mounted(){this.durationInit(),this.autoPlayInit(),this.stylesInit()},methods:{autoPlayInit(){if(clearInterval(this.timer.autoPlay),this.thisAutoPlay.toString()!="true")return 0;this.timer.autoPlay=setInterval(()=>{this.slideNext()},this.autoPlayDuration)},durationInit(){this.styles.containerItem.animationDuration=`${(parseFloat(this.duration.toString())/1e3).toFixed(2)}s`},stylesInit(){this.styles.controlPanel.background=this.mask},slideNext(){if(clearInterval(this.timer.autoPlay),!this.lock.slide)return 0;this.lock.slide=!1,this.currentIndex<this.thisValue.length-1?this.currentIndex++:this.currentIndex=0,this.direction=="horizontal"?this.currentAnimation=this.slideLeftAnimation:this.currentAnimation=this.slideBottomAnimation,this.lock.slide=!0,this.autoPlayInit()},slidePrev(){if(clearInterval(this.timer.autoPlay),!this.lock.slide)return 0;this.lock.slide=!1,this.currentIndex>0?this.currentIndex--:this.currentIndex=this.thisValue.length-1,this.direction=="horizontal"?this.currentAnimation=this.slideRightAnimation:this.currentAnimation=this.slideTopAnimation,this.lock.slide=!0,this.autoPlayInit()},async slideDelay(i=!0,e){return i?this.slideNext():this.slidePrev(),await new Promise(t=>{setTimeout(()=>{t(e)},e)})},async slideIndex(i){if(!this.lock.slideIndex)return 0;this.lock.slideIndex=!1,clearInterval(this.timer.dis);let e=i-this.currentIndex;if(e==0)return 0;let t=e>0;e=Math.abs(e);let s=this.duration.toString(),n=(parseFloat(s)/e).toFixed(2);this.styles.containerItem.animationDuration=`${(n/1e3).toFixed(2)}s`,this.styles.containerItem.animationTimingFunction="linear";for(let r=0;r<e;r++)r==e-1&&(this.styles.containerItem.animationTimingFunction=""),await this.slideDelay(t,n);await new Promise(r=>{setTimeout(()=>{this.durationInit(),r(50)},50)}),this.lock.slideIndex=!0}}},Mv=["onClick"],Ev=h("i",null,null,-1),Dv=[Ev],Bv={class:"container-panel"},Rv={style:{"font-size":"36px"}};function Fv(i,e,t,s,n,r){return f(),g("div",{class:k(["fv-FlipView",[r.$theme]]),onMouseenter:e[3]||(e[3]=o=>n.hoverTrigger=!0),onMouseleave:e[4]||(e[4]=o=>n.hoverTrigger=!1),onTouchstart:e[5]||(e[5]=o=>n.hoverTrigger=!0),onTouchend:e[6]||(e[6]=o=>n.hoverTrigger=!1)},[L(fe,{name:"fade-in"},{default:x(()=>[P(h("div",{class:"control-panel",style:V(n.styles.controlPanel)},[h("span",{class:k(["slidebtn fst",[t.direction]]),onClick:e[0]||(e[0]=(...o)=>r.slidePrev&&r.slidePrev(...o))},[h("p",{class:k(["icon",[`ms-Icon ms-Icon--${r.firstBtn}`]])},null,2)],2),h("span",{class:k(["slidebtn sec",[t.direction]]),onClick:e[1]||(e[1]=(...o)=>r.slideNext&&r.slideNext(...o))},[h("p",{class:k(["icon",[`ms-Icon ms-Icon--${r.secondBtn}`]])},null,2)],2),h("span",{class:k(["bottom-controller",[t.direction]])},[(f(!0),g(Y,null,Z(n.thisValue,(o,a)=>(f(),g("div",{key:`ring: ${a}`,class:k(["flip-view-ring",[{choosen:n.currentIndex==a}]]),onClick:l=>r.slideIndex(a)},Dv,10,Mv))),128)),h("p",{class:k(["sec ms-Icon",[n.thisAutoPlay.toString()=="true"?"ms-Icon--PauseBold":"ms-Icon--PlaySolid"]]),onClick:e[2]||(e[2]=o=>n.thisAutoPlay=!n.thisAutoPlay)},null,2)],2)],4),[[R,t.showControlPanel!=="hidden"&&n.hoverTrigger]])]),_:1}),h("div",Bv,[L(qi,{name:n.currentAnimation,tag:"div",class:"container-panel"},{default:x(()=>[(f(!0),g(Y,null,Z(n.thisValue,(o,a)=>P((f(),g("div",{key:`flipview: ${a}`,class:"container-item",style:V(n.styles.containerItem)},[w(i.$slots,"item",{data:o,index:a},()=>[h("p",Rv,H(a+1),1)])],4)),[[R,n.currentIndex===a]])),128))]),_:3},8,["name"])])],34)}const zv=z(Pv,[["render",Fv]]),Av=ie(zv),Ov={...te},Nv={name:"FvIconElement",emits:["click"],props:{...Ov,value:{default:"AppIconDefault"},fontSize:{default:32},paddingWidth:{default:2},iconButton:{type:Boolean,default:!1},borderRadius:{default:6}},data(){return{}},computed:{iconList(){let i=[];return Array.isArray(this.value)?i=this.value:i=this.value.split(","),i.map(e=>this.computeIconItem(e))},$theme(){return q(this.$props).theme.value}},methods:{computeIconItem(i){let e={name:"",color:this.$theme=="dark"?"#fff":"#000",position:0};return i.name?Object.assign(e,i):(e.name=i,e)},valueTrigger(i){return typeof i=="function"?i():i}}};function Hv(i,e,t,s,n,r){return f(),g("div",{class:k(["fv-IconElement",[r.$theme,{"icon-element-btn":t.iconButton}]]),style:V({width:`${t.fontSize+t.paddingWidth/1}px`,height:`${t.fontSize+t.paddingWidth/1}px`,borderRadius:`${t.borderRadius}px`}),onClick:e[0]||(e[0]=o=>i.$emit("click",o))},[(f(!0),g(Y,null,Z(r.iconList,(o,a)=>(f(),g("div",{class:k(["icon-element-item",[r.valueTrigger(o.position)]]),key:a},[h("i",{class:k(["icon-element ms-Icon",[`ms-Icon--${r.valueTrigger(o.name)}`]]),style:V({fontSize:`${t.fontSize}px`,color:r.valueTrigger(o.color),"background-image":r.valueTrigger(o.color),"background-clip":"text","-webkit-background-image":r.valueTrigger(o.color),"-webkit-background-clip":"text","-webkit-text-fill-color":r.valueTrigger(o.color)})},null,6)],2))),128))],6)}const Wv=z(Nv,[["render",Hv]]),Gv=ie(Wv),Uv={...te},Yv={name:"FvImage",emits:["click"],props:{...Uv,src:{default:""},onlazy:{default:!1}},data(){return{thisSrc:"",status:!1,lazy:this.onlazy,lazyTimer:{}}},watch:{src(i,e){i!==e&&(this.status=!1),this.lazy||(this.thisSrc=this.src)},lazy(i){i===!1&&(this.thisSrc=this.src)},onlazy(i){this.lazy=i}},computed:{$theme(){return q(this.$props).theme.value}},mounted(){this.watchImgInit(),this.lazy?this.lazyInit():this.thisSrc=this.src},methods:{watchImgInit(){this.$refs.img.onload=i=>{this.status=!0}},lazyInit(){clearInterval(this.lazyTimer),this.lazyTimer=setInterval(()=>{window.requestAnimationFrame(()=>{this.$el.getBoundingClientRect().top<window.innerHeight&&(this.lazy=!1,clearInterval(this.lazyTimer))})},300)}},beforeUnmount(){clearInterval(this.lazyTimer)}},qv=["src"];function Xv(i,e,t,s,n,r){return f(),g("div",{class:k(["fv-Image",[r.$theme]])},[L(fe,{name:"fade-in"},{default:x(()=>[P(h("img",{draggable:"false",alt:"",src:n.thisSrc,ref:"img"},null,8,qv),[[R,n.status]])]),_:1})],2)}const Kv=z(Yv,[["render",Xv]]),jv=ie(Kv),Jv={...te},Qv={name:"FvImg",props:{...Jv,src:{default:""},onlazy:{default:!1},loadingColor:{default:"rgba(36, 36, 36, 1)"},onbackground:{default:!1}},data(){return{status:"imgBox"}},computed:{$theme(){return q(this.$props).theme.value}}};function Zv(i,e,t,s,n,r){const o=K("fv-ImgBox"),a=K("fv-Image");return f(),g("div",{class:k(["fv-Img",[r.$theme]])},[n.status=="imgBox"?(f(),G(o,{key:0,url:t.src,onlazy:t.onlazy,loadingColor:t.loadingColor,onbackground:t.onbackground,style:{width:"100%",height:"100%"},onError:e[0]||(e[0]=l=>n.status="image")},null,8,["url","onlazy","loadingColor","onbackground"])):O("",!0),n.status=="image"?(f(),G(a,{key:1,src:t.src,onlazy:t.onlazy,style:{width:"100%",height:"100%"}},null,8,["src","onlazy"])):O("",!0)],2)}const e0=z(Qv,[["render",Zv]]),t0=ie(e0),i0={...te},s0=Ys("FvImageCache",{state:()=>({imgUriList:[]}),getters:{imgUri:i=>e=>i.imgUriList.find(s=>s.key===e)},actions:{setImgUri(i){let e=i.state;if(i.key==null)return 0;e!="none"&&e!="loading"&&e!="done"&&(i.state="none");let t=this.imgUriList.find(s=>s.key===i.key);t==null?this.imgUriList.push({data:i.data,key:i.key,state:i.state}):this.imgUriList.splice(this.imgUriList.indexOf(t),1,{data:i.data,key:i.key,state:i.state})},clearImgUri(i){let e=this.imgUriList.find(t=>i===t.key);if(e==null)return 0;this.imgUriList.splice(this.imgUriList.indexOf(e),1)}}}),n0={name:"FvImgBox",props:{...i0,url:{default:""},onlazy:{default:!1},loadingColor:{default:"rgba(36, 36, 36, 1)"},onbackground:{default:!1}},setup(){return{imageCache:s0()}},data(){return{xhr:!1,loadingProgress:0,width:0,height:0,lazy:!1,lazyTimer:null,formatTimer:null}},watch:{url(){this.xhr!=!1&&this.xhr.abort(),this.url!=""&&!this.lazy&&this.LoadingImg()},onlazy(i){this.lazy=i.toString()=="true"},lazy(i){i&&this.lazyInit()}},computed:{$theme(){return q(this.$props).theme.value},imgUri(){return!this.url||!this.imageCache.imgUri(this.url)?{data:"",key:this.url,state:"none"}:this.imageCache.imgUri(this.url)},progressSize(){return this.width<=20||this.height<=20?{r:this.width-2>0?this.width-2:2,borderWidth:2}:this.width<=40||this.height<=40?{r:10,borderWidth:2}:{r:20,borderWidth:5}}},mounted(){this.lazy=this.onlazy.toString()=="true",this.url&&!this.lazy&&this.LoadingImg(),this.widthHeightWatcher()},methods:{LoadingImg(){this.imgUri.state=="none"&&(this.imageCache.setImgUri({data:"",key:this.url,state:"loading"}),this.getUrlImg(this.url)),clearInterval(this.formatTimer),this.formatTimer=setInterval(()=>{let i=this.imageCache.imgUri(this.url);!i.data&&(i.state=="none"||i.state=="done")&&(this.imageCache.setImgUri({data:"",key:this.url,state:"loading"}),this.getUrlImg(this.url))},3e3)},widthHeightWatcher(){let i=this.$el;new ResizeObserver(t=>{for(const s of t){const{contentRect:n,target:r}=s,{width:o,height:a}=n;this.width=o,this.height=a}}).observe(i)},getUrlImg(i){if(i==null)return console.warn(`imgBox can't find url: ${i}.`),0;this.loadingProgress=0;let e=new XMLHttpRequest;e.open("get",i,!0),e.responseType="blob",e.onreadystatechange=t=>{if(e.readyState==4&&e.status==200){let s=e.response,n=s.type.split("/")[0],r=new FileReader;r.onload=o=>{let a=o.target.result;this.UpdateStore(a)},n!=="text"?r.readAsDataURL(s):r.readAsText(s)}else e.readyState==4},e.addEventListener("progress",t=>{const s=t.loaded/t.total*100;this.loadingProgress=s.toFixed(2)}),e.send(),e.onerror=t=>{this.$emit("error",t),this.imageCache.clearImgUri(this.url),console.warn("Fv-ImgBox doesn't support cross-domain url.")},this.xhr=e},UpdateStore(i){this.imageCache.setImgUri({data:i,key:this.url,state:"done"})},lazyInit(){clearInterval(this.lazyTimer),this.lazyTimer=setInterval(()=>{this.$el.getBoundingClientRect().top<window.innerHeight&&(this.lazy=!1,this.LoadingImg(),clearInterval(this.lazyTimer))},300)}},beforeUnmount(){clearInterval(this.formatTimer),clearInterval(this.lazyTimer)}},r0={class:"fv-img-box-content"},o0=["src"];function a0(i,e,t,s,n,r){const o=K("fv-progress-ring");return f(),g("div",{class:k(["fv-ImgBox",[r.$theme]]),style:V({background:t.onbackground?"url("+r.imgUri.data+") no-repeat":""})},[P(h("div",r0,[P(L(o,{value:n.loadingProgress,loading:n.loadingProgress===0,color:t.loadingColor,r:r.progressSize.r,borderWidth:r.progressSize.borderWidth,background:"transparent"},null,8,["value","loading","color","r","borderWidth"]),[[R,r.imgUri.state=="loading"]])],512),[[R,r.imgUri.state!="done"]]),L(fe,{name:"fade-in"},{default:x(()=>[r.imgUri.state=="done"&&!t.onbackground?(f(),g("img",{key:0,draggable:"false",alt:"",src:r.imgUri.data},null,8,o0)):O("",!0)]),_:1})],6)}const l0=z(n0,[["render",a0]]),u0=ie(l0),d0={...te},h0={name:"FvInfiniteScrollView",emits:["update:modelValue","init-start","init-end","lazyload"],props:{...d0,modelValue:{default:()=>[]},batchSize:{default:30},offset:{default:100},static:{default:!1}},data(){return{thisValue:this.modelValue,dynamicValue:[],lock:!0,looper:!0}},watch:{modelValue(i){this.thisValue=i},thisValue(i){this.$emit("update:modelValue",i),this.dataChange()},static(){this.loadMore()}},computed:{$theme(){return q(this.$props).theme.value}},mounted(){this.init(),this.lazyLoadInit()},methods:{async init(){for(;this.looper;)this.$el.scrollHeight<=this.$el.clientHeight&&this.thisValue.length>this.dynamicValue.length?(this.loadMore(),this.$emit("init-start")):this.$emit("init-end"),await new Promise(i=>{setTimeout(()=>{i(1)},100)})},loadMore(){if(this.static){this.dynamicValue=this.thisValue;return}if(!this.lock)return;this.lock=!1;let i=this.dynamicValue[this.dynamicValue.length-1],e=this.thisValue.indexOf(i),t=this.thisValue.slice(e+1,e+this.batchSize+1);return this.dynamicValue=this.dynamicValue.concat(t),this.lock=!0,t>0},dataChange(){let i=this.dynamicValue.length;this.dynamicValue=this.thisValue.slice(0,i)},lazyLoadInit(){this.$el.addEventListener("scroll",i=>{this.$el.scrollHeight-this.$el.scrollTop-this.$el.clientHeight<this.offset&&this.$emit("lazyload",this.loadMore())})}},beforeUnmount(){this.looper=!1}};function c0(i,e,t,s,n,r){return f(),g("div",{class:k(["fv-InfiniteScrollView",[r.$theme]])},[w(i.$slots,"default",{thisValue:n.thisValue,dynamicValue:n.dynamicValue},()=>[(f(!0),g(Y,null,Z(n.dynamicValue,(o,a)=>(f(),g("p",{key:a},H(o),1))),128))])],2)}const f0=z(h0,[["render",c0]]),m0=ie(f0),g0={...te},p0={name:"FvInfoBox",emits:["confirm","close"],props:{...g0,title:{default:"Tip"},status:{default:"default"},mode:{default:"relative"},confirmTitle:{default:"确定"},cancelTitle:{default:"取消"},showTitleBar:{default:!0},acrylic:{default:!1},destroy:{default:!1}},data(){return{iconList:{default:{icon:"Error",background:"",backgroundColor:"rgba(0, 98, 158, 0.8)"},warning:{icon:"Warning",background:"brown",backgroundColor:"rgba(234, 183, 2, 1)"},correct:{icon:"Completed",background:"green",backgroundColor:"rgba(69, 172, 97, 1)"},blocked:{icon:"Blocked12   ",background:"red",backgroundColor:"rgba(200, 50, 59, 1)"},error:{icon:"ErrorBadge",background:"red",backgroundColor:"rgba(200, 50, 59, 1)"}}}},computed:{$theme(){return q(this.$props).theme.value}},methods:{confirm(){this.$emit("confirm")},close(){this.$emit("close")}}},v0={class:"title-bar"},b0={class:"title-content"},y0={class:"info-box-content-block"},_0=h("p",null,"Info Box Content.",-1),w0={class:"info-box-control-block"};function k0(i,e,t,s,n,r){const o=K("fv-button");return f(),g("div",{class:k(["fv-InfoBox",[r.$theme,t.mode,{acrylic:t.acrylic}]])},[h("div",{class:k(["sinfo-box-block",[n.iconList[t.status].background]])},[P(h("div",v0,[h("i",{class:k(["ms-Icon icon-block",[`ms-Icon--${n.iconList[t.status].icon}`]])},null,2),h("span",b0,H(t.title),1)],512),[[R,t.showTitleBar]]),h("span",y0,[w(i.$slots,"msg",{},()=>[P(h("h3",null,H(t.title),513),[[R,!t.showTitleBar]]),_0])]),h("div",w0,[w(i.$slots,"control-panel",{theme:r.$theme,confirm:r.confirm,cancel:r.close,iconList:n.iconList},()=>[L(o,{theme:"dark",background:n.iconList[t.status].backgroundColor,isBoxShadow:!0,borderRadius:6,style:{width:"50%",height:"35px","margin-right":"2.5px"},onClick:r.confirm},{default:x(()=>[ue(H(t.confirmTitle),1)]),_:1},8,["background","onClick"]),L(o,{theme:r.$theme,isBoxShadow:!0,borderRadius:6,style:{width:"50%",height:"35px","margin-left":"2.5px"},onClick:r.close},{default:x(()=>[ue(H(t.cancelTitle),1)]),_:1},8,["theme","onClick"])])])],2)],2)}const _r=z(p0,[["render",k0]]);function C0(i,e,t){let s=o=>{let a={title:"Tip",status:"default",mode:"fixed",confirmTitle:"确定",cancelTitle:"取消",acrylic:!1,control_panel:null,confirm:async()=>{},cancel:async()=>{},theme:"global"};a=Object.assign(a,e);const l=Di(_r,{title:a.title,status:a.status,mode:a.mode,confirmTitle:a.confirmTitle,cancelTitle:a.cancelTitle,acrylic:a.acrylic,onConfirm:async()=>{await a.confirm(),Ht(null,o),o.remove()},onClose:async()=>{await a.cancel(),Ht(null,o),o.remove()},destroy:()=>{Ht(null,o),o.remove()},theme:a.theme},{msg:i,"control-panel":a.control_panel});return l.appContext=t,l};const n="__fv-global-info-box__";let r=document.getElementById(n);r||(r=document.createElement("div"),r.id=n,document.body.appendChild(r)),Ht(s(r),r)}const x0={install(i){i.config.globalProperties.$infoBox=(e,t)=>{C0(e,t,i._context)}}},S0=gr(_r,[x0]),T0={...te};function ii(i){if(i===void 0)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return i}function wr(i,e){i.prototype=Object.create(e.prototype),i.prototype.constructor=i,i.__proto__=e}/*!
+ * GSAP 3.1.1
+ * https://greensock.com
+ *
+ * @license Copyright 2008-2020, GreenSock. All rights reserved.
+ * Subject to the terms at https://greensock.com/standard-license or for
+ * Club GreenSock members, the agreement issued with that membership.
+ * @author: Jack Doyle, jack@greensock.com
+*/var Ke={autoSleep:120,force3D:"auto",nullTargetWarn:1,units:{lineHeight:""}},jt={duration:.5,overwrite:!1,delay:0},Ye=1e8,Ce=1/Ye,$s=Math.PI*2,V0=$s/4,I0=0,kr=Math.sqrt,L0=Math.cos,$0=Math.sin,Me=function(e){return typeof e=="string"},Se=function(e){return typeof e=="function"},it=function(e){return typeof e=="number"},sn=function(e){return typeof e>"u"},ht=function(e){return typeof e=="object"},$e=function(e){return e!==!1},Cr=function(){return typeof window<"u"},bn=function(e){return Se(e)||Me(e)},qe=Array.isArray,Ps=/(?:-?\.?\d|\.)+/gi,xr=/[-+=\.]*\d+[\.e\-\+]*\d*[e\-\+]*\d*/g,ls=/[-+=\.]*\d+(?:\.|e-|e)*\d*/gi,P0=/\(([^()]+)\)/i,Sr=/[\+-]=-?[\.\d]+/,Tr=/[#\-+\.]*\b[a-z\d-=+%.]+/gi,ke,tt,Ms,Vr,Qe={},Ri={},Ir,Lr=function(e){return(Ri=Rt(e,Qe))&&ot},$r=function(e,t){return console.warn("Invalid property",e,"set to",t,"Missing plugin? gsap.registerPlugin()")},Pr=function(e,t){return!t&&console.warn(e)},Mr=function(e,t){return e&&(Qe[e]=t)&&Ri&&(Ri[e]=t)||Qe},yi=function(){return 0},fi={},Dt=[],Es={},Er,Fe={},us={},yn=30,Mi=[],Dr="onComplete,onUpdate,onStart,onRepeat,onReverseComplete,onInterrupt",nn=function(e){var t=e[0],s,n;if(!ht(t)&&!Se(t)&&(e=[e]),!(s=(t._gsap||{}).harness)){for(n=Mi.length;n--&&!Mi[n].targetTest(t););s=Mi[n]}for(n=e.length;n--;)e[n]&&(e[n]._gsap||(e[n]._gsap=new jr(e[n],s)))||e.splice(n,1);return e},Yt=function(e){return e._gsap||nn(st(e))[0]._gsap},Br=function(e,t){var s=e[t];return Se(s)?e[t]():sn(s)&&e.getAttribute(t)||s},Xe=function(e,t){return(e=e.split(",")).forEach(t)||e},ce=function(e){return Math.round(e*1e4)/1e4},M0=function(e,t){for(var s=t.length,n=0;e.indexOf(t[n])<0&&++n<s;);return n<s},di=function(e,t,s){var n=it(e[1]),r=(n?2:1)+(t<2?0:1),o=e[r],a;if(n&&(o.duration=e[1]),o.parent=s,t){for(a=o;s&&!("immediateRender"in a);)a=s.vars.defaults||{},s=$e(s.vars.inherit)&&s.parent;o.immediateRender=$e(a.immediateRender),t<2?o.runBackwards=1:o.startAt=e[r-1]}return o},Fi=function(){var e=Dt.length,t=Dt.slice(0),s,n;for(Es={},Dt.length=0,s=0;s<e;s++)n=t[s],n&&n._lazy&&(n.render(n._lazy[0],n._lazy[1],!0)._lazy=0)},Rr=function(e,t,s,n){Dt.length&&Fi(),e.render(t,s,n),Dt.length&&Fi()},Fr=function(e){var t=parseFloat(e);return(t||t===0)&&(e+"").match(Tr).length<2?t:e},Ds=function(e){return e},Ze=function(e,t){for(var s in t)s in e||(e[s]=t[s]);return e},E0=function(e,t){for(var s in t)!(s in e)&&s!=="duration"&&s!=="ease"&&(e[s]=t[s])},Rt=function(e,t){for(var s in t)e[s]=t[s];return e},_n=function i(e,t){for(var s in t)e[s]=ht(t[s])?i(e[s]||(e[s]={}),t[s]):t[s];return e},zi=function(e,t){var s={},n;for(n in e)n in t||(s[n]=e[n]);return s},D0=function(e){var t=e.parent||ke,s=e.keyframes?E0:Ze;if($e(e.inherit))for(;t;)s(e,t.vars.defaults),t=t.parent;return e},B0=function(e,t){for(var s=e.length,n=s===t.length;n&&s--&&e[s]===t[s];);return s<0},R0=function(e,t,s,n,r){s===void 0&&(s="_first"),n===void 0&&(n="_last");var o=e[n],a;if(r)for(a=t[r];o&&o[r]>a;)o=o._prev;return o?(t._next=o._next,o._next=t):(t._next=e[s],e[s]=t),t._next?t._next._prev=t:e[n]=t,t._prev=o,t.parent=e,t},rn=function(e,t,s,n){s===void 0&&(s="_first"),n===void 0&&(n="_last");var r=t._prev,o=t._next;r?r._next=o:e[s]===t&&(e[s]=o),o?o._prev=r:e[n]===t&&(e[n]=r),t._dp=e,t._next=t._prev=t.parent=null},wt=function(e,t){e.parent&&(!t||e.parent.autoRemoveChildren)&&e.parent.remove(e),e._act=0},ut=function(e){for(var t=e;t;)t._dirty=1,t=t.parent;return e},F0=function(e){for(var t=e.parent;t&&t.parent;)t._dirty=1,t.totalDuration(),t=t.parent;return e},z0=function i(e){return!e||e._ts&&i(e.parent)},wn=function(e){return e._repeat?Jt(e._tTime,e=e.duration()+e._rDelay)*e:0},Jt=function(e,t){return(e/=t)&&~~e===e?~~e-1:~~e},Bs=function(e,t){return(e-t._start)*t._ts+(t._ts>=0?0:t._dirty?t.totalDuration():t._tDur)},dt=function(e,t,s){if(t.parent&&wt(t),t._start=s+t._delay,t._end=t._start+(t.totalDuration()/Math.abs(t.timeScale())||0),R0(e,t,"_first","_last",e._sort?"_start":0),e._recent=t,t._time||!t._dur&&t._initted){var n=(e.rawTime()-t._start)*t._ts;(!t._dur||ji(0,t.totalDuration(),n)-t._tTime>Ce)&&t.render(n,!0)}if(ut(e),e._dp&&e._time>=e._dur&&e._ts&&e._dur<e.duration())for(var r=e;r._dp;)r.totalTime(r._tTime,!0),r=r._dp;return e},zr=function(e,t,s,n){if(nb(e,t),!e._initted)return 1;if(!s&&e._pt&&(e._dur&&e.vars.lazy!==!1||!e._dur&&e.vars.lazy)&&Er!==Ue.frame)return Dt.push(e),e._lazy=[t,n],1},A0=function(e,t,s,n){var r=e._zTime<0?0:1,o=t<0?0:1,a=e._rDelay,l=0,u,d,c;if(a&&e._repeat&&(l=ji(0,e._tDur,t),d=Jt(l,a),c=Jt(e._tTime,a),d!==c&&(r=1-o,e.vars.repeatRefresh&&e._initted&&e.invalidate())),!(!e._initted&&zr(e,t,n,s))&&(o!==r||n||e._zTime===Ce||!t&&e._zTime)){for(e._zTime=t||(s?Ce:0),e.ratio=o,e._from&&(o=1-o),e._time=0,e._tTime=l,s||Oe(e,"onStart"),u=e._pt;u;)u.r(o,u.d),u=u._next;!o&&e._startAt&&!e._onUpdate&&e._start&&e._startAt.render(t,!0,n),e._onUpdate&&!s&&Oe(e,"onUpdate"),l&&e._repeat&&!s&&e.parent&&Oe(e,"onRepeat"),(t>=e._tDur||t<0)&&e.ratio===o&&(e.ratio&&wt(e,1),s||(Oe(e,e.ratio?"onComplete":"onReverseComplete",!0),e._prom&&e._prom()))}},O0=function(e,t,s){var n;if(s>t)for(n=e._first;n&&n._start<=s;){if(!n._dur&&n.data==="isPause"&&n._start>t)return n;n=n._next}else for(n=e._last;n&&n._start>=s;){if(!n._dur&&n.data==="isPause"&&n._start<t)return n;n=n._prev}},ds=function(e){if(e instanceof Ae)return ut(e);var t=e._repeat;return e._tDur=t?t<0?1e12:ce(e._dur*(t+1)+e._rDelay*t):e._dur,ut(e.parent),e},N0={_start:0,endTime:yi},Le=function i(e,t,s){var n=e.labels,r=e._recent||N0,o=e.duration()>=Ye?r.endTime(!1):e._dur,a,l;return Me(t)&&(isNaN(t)||t in n)?(a=t.charAt(0),a==="<"||a===">"?(a==="<"?r._start:r.endTime(r._repeat>=0))+(parseFloat(t.substr(1))||0):(a=t.indexOf("="),a<0?(t in n||(n[t]=o),n[t]):(l=+(t.charAt(a-1)+t.substr(a+1)),a>1?i(e,t.substr(0,a-1))+l:o+l))):t==null?o:+t},xt=function(e,t){return e||e===0?t(e):t},ji=function(e,t,s){return s<e?e:s>t?t:s},ct=function(e){return(e+"").substr((parseFloat(e)+"").length)},H0=function(e,t,s){return xt(s,function(n){return ji(e,t,n)})},Rs=[].slice,Ar=function(e,t){return e&&ht(e)&&"length"in e&&(!t&&!e.length||e.length-1 in e&&ht(e[0]))&&!e.nodeType&&e!==tt},W0=function(e,t,s){return s===void 0&&(s=[]),e.forEach(function(n){var r;return Me(n)&&!t||Ar(n,1)?(r=s).push.apply(r,st(n)):s.push(n)})||s},st=function(e,t){return Me(e)&&!t&&(Ms||!_i())?Rs.call(Vr.querySelectorAll(e),0):qe(e)?W0(e,t):Ar(e)?Rs.call(e,0):e?[e]:[]},Or=function(e){return e.sort(function(){return .5-Math.random()})},Nr=function(e){if(Se(e))return e;var t=ht(e)?e:{each:e},s=qt(t.ease),n=t.from||0,r=parseFloat(t.base)||0,o={},a=n>0&&n<1,l=isNaN(n)||a,u=t.axis,d=n,c=n;return Me(n)?d=c={center:.5,edges:.5,end:1}[n]||0:!a&&l&&(d=n[0],c=n[1]),function(m,p,v){var _=(v||t).length,b=o[_],T,S,$,I,E,C,A,D,F;if(!b){if(F=t.grid==="auto"?0:(t.grid||[1,Ye])[1],!F){for(A=-Ye;A<(A=v[F++].getBoundingClientRect().left)&&F<_;);F--}for(b=o[_]=[],T=l?Math.min(F,_)*d-.5:n%F,S=l?_*c/F-.5:n/F|0,A=0,D=Ye,C=0;C<_;C++)$=C%F-T,I=S-(C/F|0),b[C]=E=u?Math.abs(u==="y"?I:$):kr($*$+I*I),E>A&&(A=E),E<D&&(D=E);n==="random"&&Or(b),b.max=A-D,b.min=D,b.v=_=(parseFloat(t.amount)||parseFloat(t.each)*(F>_?_-1:u?u==="y"?_/F:F:Math.max(F,_/F))||0)*(n==="edges"?-1:1),b.b=_<0?r-_:r,b.u=ct(t.amount||t.each)||0,s=s&&_<0?Xr(s):s}return _=(b[m]-b.min)/b.max||0,ce(b.b+(s?s(_):_)*b.v)+b.u}},Fs=function(e){var t=e<1?Math.pow(10,(e+"").length-2):1;return function(s){return~~(Math.round(parseFloat(s)/e)*e*t)/t+(it(s)?0:ct(s))}},Hr=function(e,t){var s=qe(e),n,r;return!s&&ht(e)&&(n=s=e.radius||Ye,e.values?(e=st(e.values),(r=!it(e[0]))&&(n*=n)):e=Fs(e.increment)),xt(t,s?Se(e)?function(o){return r=e(o),Math.abs(r-o)<=n?r:o}:function(o){for(var a=parseFloat(r?o.x:o),l=parseFloat(r?o.y:0),u=Ye,d=0,c=e.length,m,p;c--;)r?(m=e[c].x-a,p=e[c].y-l,m=m*m+p*p):m=Math.abs(e[c]-a),m<u&&(u=m,d=c);return d=!n||u<=n?e[d]:o,r||d===o||it(o)?d:d+ct(o)}:Fs(e))},Wr=function(e,t,s,n){return xt(qe(e)?!t:s===!0?!!(s=0):!n,function(){return qe(e)?e[~~(Math.random()*e.length)]:(s=s||1e-5)&&(n=s<1?Math.pow(10,(s+"").length-2):1)&&~~(Math.round((e+Math.random()*(t-e))/s)*s*n)/n})},G0=function(){for(var e=arguments.length,t=new Array(e),s=0;s<e;s++)t[s]=arguments[s];return function(n){return t.reduce(function(r,o){return o(r)},n)}},U0=function(e,t){return function(s){return e(parseFloat(s))+(t||ct(s))}},Y0=function(e,t,s){return Ur(e,t,0,1,s)},Gr=function(e,t,s){return xt(s,function(n){return e[~~t(n)]})},q0=function i(e,t,s){var n=t-e;return qe(e)?Gr(e,i(0,e.length),t):xt(s,function(r){return(n+(r-e)%n)%n+e})},X0=function i(e,t,s){var n=t-e,r=n*2;return qe(e)?Gr(e,i(0,e.length-1),t):xt(s,function(o){return o=(r+(o-e)%r)%r,e+(o>n?r-o:o)})},Ji=function(e){for(var t=0,s="",n,r,o,a;~(n=e.indexOf("random(",t));)o=e.indexOf(")",n),a=e.charAt(n+7)==="[",r=e.substr(n+7,o-n-7).match(a?Tr:Ps),s+=e.substr(t,n-t)+Wr(a?r:+r[0],+r[1],+r[2]||1e-5),t=o+1;return s+e.substr(t,e.length-t)},Ur=function(e,t,s,n,r){var o=t-e,a=n-s;return xt(r,function(l){return s+(l-e)/o*a})},K0=function i(e,t,s,n){var r=isNaN(e+t)?0:function(p){return(1-p)*e+p*t};if(!r){var o=Me(e),a={},l,u,d,c,m;if(s===!0&&(n=1)&&(s=null),o)e={p:e},t={p:t};else if(qe(e)&&!qe(t)){for(d=[],c=e.length,m=c-2,u=1;u<c;u++)d.push(i(e[u-1],e[u]));c--,r=function(v){v*=c;var _=Math.min(m,~~v);return d[_](v-_)},s=t}else n||(e=Rt(qe(e)?[]:{},e));if(!d){for(l in t)on.call(a,e,l,"get",t[l]);r=function(v){return un(v,a)||(o?e.p:e)}}}return xt(s,r)},kn=function(e,t,s){var n=e.labels,r=Ye,o,a,l;for(o in n)a=n[o]-t,a<0==!!s&&a&&r>(a=Math.abs(a))&&(l=o,r=a);return l},Oe=function(e,t,s){var n=e.vars,r=n[t],o,a;if(r)return o=n[t+"Params"],a=n.callbackScope||e,s&&Dt.length&&Fi(),o?r.apply(a,o):r.call(a)},Ei=function(e){return wt(e),e.progress()<1&&Oe(e,"onInterrupt"),e},Wt,j0=function(e){e=!e.name&&e.default||e;var t=e.name,s=Se(e),n=t&&!s&&e.init?function(){this._props=[]}:e,r={init:yi,render:un,add:on,kill:hb,modifier:db,rawVars:0},o={targetTest:0,get:0,getSetter:ln,aliases:{},register:0};if(_i(),e!==n){if(Fe[t])return;Ze(n,Ze(zi(e,r),o)),Rt(n.prototype,Rt(r,zi(e,o))),Fe[n.prop=t]=n,e.targetTest&&(Mi.push(n),fi[t]=1),t=(t==="css"?"CSS":t.charAt(0).toUpperCase()+t.substr(1))+"Plugin"}Mr(t,n),e.register&&e.register(ot,n,Be)},me=255,ni={aqua:[0,me,me],lime:[0,me,0],silver:[192,192,192],black:[0,0,0],maroon:[128,0,0],teal:[0,128,128],blue:[0,0,me],navy:[0,0,128],white:[me,me,me],olive:[128,128,0],yellow:[me,me,0],orange:[me,165,0],gray:[128,128,128],purple:[128,0,128],green:[0,128,0],red:[me,0,0],pink:[me,192,203],cyan:[0,me,me],transparent:[me,me,me,0]},hs=function(e,t,s){return e=e<0?e+1:e>1?e-1:e,(e*6<1?t+(s-t)*e*6:e<.5?s:e*3<2?t+(s-t)*(2/3-e)*6:t)*me+.5|0},Yr=function(e,t){var s=e?it(e)?[e>>16,e>>8&me,e&me]:0:ni.black,n,r,o,a,l,u,d,c,m,p;if(!s){if(e.substr(-1)===","&&(e=e.substr(0,e.length-1)),ni[e])s=ni[e];else if(e.charAt(0)==="#")e.length===4&&(n=e.charAt(1),r=e.charAt(2),o=e.charAt(3),e="#"+n+n+r+r+o+o),e=parseInt(e.substr(1),16),s=[e>>16,e>>8&me,e&me];else if(e.substr(0,3)==="hsl"){if(s=p=e.match(Ps),!t)a=+s[0]%360/360,l=+s[1]/100,u=+s[2]/100,r=u<=.5?u*(l+1):u+l-u*l,n=u*2-r,s.length>3&&(s[3]*=1),s[0]=hs(a+1/3,n,r),s[1]=hs(a,n,r),s[2]=hs(a-1/3,n,r);else if(~e.indexOf("="))return e.match(xr)}else s=e.match(Ps)||ni.transparent;s=s.map(Number)}return t&&!p&&(n=s[0]/me,r=s[1]/me,o=s[2]/me,d=Math.max(n,r,o),c=Math.min(n,r,o),u=(d+c)/2,d===c?a=l=0:(m=d-c,l=u>.5?m/(2-d-c):m/(d+c),a=d===n?(r-o)/m+(r<o?6:0):d===r?(o-n)/m+2:(n-r)/m+4,a*=60),s[0]=a+.5|0,s[1]=l*100+.5|0,s[2]=u*100+.5|0),s},Cn=function(e,t){var s=(e+"").match(zs),n=0,r="",o,a,l;if(!s)return e;for(o=0;o<s.length;o++)a=s[o],l=e.substr(n,e.indexOf(a,n)-n),n+=l.length+a.length,a=Yr(a,t),a.length===3&&a.push(1),r+=l+(t?"hsla("+a[0]+","+a[1]+"%,"+a[2]+"%,"+a[3]:"rgba("+a.join(","))+")";return r+e.substr(n)},zs=function(){var i="(?:\\b(?:(?:rgb|rgba|hsl|hsla)\\(.+?\\))|\\B#(?:[0-9a-f]{3}){1,2}\\b",e;for(e in ni)i+="|"+e+"\\b";return new RegExp(i+")","gi")}(),J0=/hsl[a]?\(/,qr=function(e){var t=e.join(" "),s;zs.lastIndex=0,zs.test(t)&&(s=J0.test(t),e[0]=Cn(e[0],s),e[1]=Cn(e[1],s))},Ai,Ue=function(){var i=Date.now,e=500,t=33,s=i(),n=s,r=1/60,o=r,a=[],l,u,d,c,m=function p(v){var _=i()-n,b=v===!0,T,S;_>e&&(s+=_-t),n+=_,c.time=(n-s)/1e3,T=c.time-o,(T>0||b)&&(c.frame++,o+=T+(T>=r?.004:r-T),S=1),b||(l=u(p)),S&&a.forEach(function($){return $(c.time,_,c.frame,v)})};return c={time:0,frame:0,tick:function(){m(!0)},wake:function(){Ir&&(!Ms&&Cr()&&(tt=Ms=window,Vr=tt.document||{},Qe.gsap=ot,(tt.gsapVersions||(tt.gsapVersions=[])).push(ot.version),Lr(Ri||tt.GreenSockGlobals||!tt.gsap&&tt||{}),d=tt.requestAnimationFrame),l&&c.sleep(),u=d||function(v){return setTimeout(v,(o-c.time)*1e3+1|0)},Ai=1,m(2))},sleep:function(){(d?tt.cancelAnimationFrame:clearTimeout)(l),Ai=0,u=yi},lagSmoothing:function(v,_){e=v||1/Ce,t=Math.min(_,e,0)},fps:function(v){r=1/(v||60),o=c.time+r},add:function(v){a.indexOf(v)<0&&a.push(v),_i()},remove:function(v){var _;~(_=a.indexOf(v))&&a.splice(_,1)},_listeners:a},c}(),_i=function(){return!Ai&&Ue.wake()},le={},Q0=/^[\d.\-M][\d.\-,\s]/,Z0=/["']/g,eb=function(e){for(var t={},s=e.substr(1,e.length-3).split(":"),n=s[0],r=1,o=s.length,a,l,u;r<o;r++)l=s[r],a=r!==o-1?l.lastIndexOf(","):l.length,u=l.substr(0,a),t[n]=isNaN(u)?u.replace(Z0,"").trim():+u,n=l.substr(a+1).trim();return t},tb=function(e){var t=(e+"").split("("),s=le[t[0]];return s&&t.length>1&&s.config?s.config.apply(null,~e.indexOf("{")?[eb(t[1])]:P0.exec(e)[1].split(",").map(Fr)):le._CE&&Q0.test(e)?le._CE("",e):s},Xr=function(e){return function(t){return 1-e(1-t)}},qt=function(e,t){return e&&(Se(e)?e:le[e]||tb(e))||t},zt=function(e,t,s,n){s===void 0&&(s=function(l){return 1-t(1-l)}),n===void 0&&(n=function(l){return l<.5?t(l*2)/2:1-t((1-l)*2)/2});var r={easeIn:t,easeOut:s,easeInOut:n},o;return Xe(e,function(a){le[a]=Qe[a]=r,le[o=a.toLowerCase()]=s;for(var l in r)le[o+(l==="easeIn"?".in":l==="easeOut"?".out":".inOut")]=le[a+"."+l]=r[l]}),r},Kr=function(e){return function(t){return t<.5?(1-e(1-t*2))/2:.5+e((t-.5)*2)/2}},cs=function i(e,t,s){var n=t>=1?t:1,r=(s||(e?.3:.45))/(t<1?t:1),o=r/$s*(Math.asin(1/n)||0),a=function(d){return d===1?1:n*Math.pow(2,-10*d)*$0((d-o)*r)+1},l=e==="out"?a:e==="in"?function(u){return 1-a(1-u)}:Kr(a);return r=$s/r,l.config=function(u,d){return i(e,u,d)},l},fs=function i(e,t){t===void 0&&(t=1.70158);var s=function(o){return--o*o*((t+1)*o+t)+1},n=e==="out"?s:e==="in"?function(r){return 1-s(1-r)}:Kr(s);return n.config=function(r){return i(e,r)},n};Xe("Linear,Quad,Cubic,Quart,Quint,Strong",function(i,e){var t=e<5?e+1:e;zt(i+",Power"+(t-1),e?function(s){return Math.pow(s,t)}:function(s){return s},function(s){return 1-Math.pow(1-s,t)},function(s){return s<.5?Math.pow(s*2,t)/2:1-Math.pow((1-s)*2,t)/2})});le.Linear.easeNone=le.none=le.Linear.easeIn;zt("Elastic",cs("in"),cs("out"),cs());(function(i,e){var t=1/e,s=2*t,n=2.5*t,r=function(a){return a<t?i*a*a:a<s?i*Math.pow(a-1.5/e,2)+.75:a<n?i*(a-=2.25/e)*a+.9375:i*Math.pow(a-2.625/e,2)+.984375};zt("Bounce",function(o){return 1-r(1-o)},r)})(7.5625,2.75);zt("Expo",function(i){return i?Math.pow(2,10*(i-1)):0});zt("Circ",function(i){return-(kr(1-i*i)-1)});zt("Sine",function(i){return-L0(i*V0)+1});zt("Back",fs("in"),fs("out"),fs());le.SteppedEase=le.steps=Qe.SteppedEase={config:function(e,t){e===void 0&&(e=1);var s=1/e,n=e+(t?0:1),r=t?1:0,o=1-Ce;return function(a){return((n*ji(0,o,a)|0)+r)*s}}};jt.ease=le["quad.out"];var jr=function(e,t){this.id=I0++,e._gsap=this,this.target=e,this.harness=t,this.get=t?t.get:Br,this.set=t?t.getSetter:ln},mi=function(){function i(t,s){var n=t.parent||ke;this.vars=t,this._dur=this._tDur=+t.duration||0,this._delay=+t.delay||0,(this._repeat=t.repeat||0)&&(this._rDelay=t.repeatDelay||0,this._yoyo=!!t.yoyo||!!t.yoyoEase,ds(this)),this._ts=1,this.data=t.data,Ai||Ue.wake(),n&&dt(n,this,s||s===0?s:n._time),t.reversed&&this.reversed(!0),t.paused&&this.paused(!0)}var e=i.prototype;return e.delay=function(s){return s||s===0?(this._delay=s,this):this._delay},e.duration=function(s){var n=arguments.length,r=this._repeat,o=r>0?r*((n?s:this._dur)+this._rDelay):0;return n?this.totalDuration(r<0?s:s+o):this.totalDuration()&&this._dur},e.totalDuration=function(s){if(!arguments.length)return this._tDur;var n=this._repeat,r=(s||this._rDelay)&&n<0;return this._tDur=r?1e12:s,this._dur=r?s:(s-n*this._rDelay)/(n+1),this._dirty=0,ut(this.parent),this},e.totalTime=function(s,n){if(_i(),!arguments.length)return this._tTime;var r=this.parent||this._dp,o;if(r&&r.smoothChildTiming&&this._ts){for(o=this._start,this._start=r._time-(this._ts>0?s/this._ts:((this._dirty?this.totalDuration():this._tDur)-s)/-this._ts),this._end+=this._start-o,r._dirty||ut(r);r.parent;)r.parent._time!==r._start+(r._ts>0?r._tTime/r._ts:(r.totalDuration()-r._tTime)/-r._ts)&&r.totalTime(r._tTime,!0),r=r.parent;!this.parent&&r.autoRemoveChildren&&dt(r,this,this._start-this._delay)}return(this._tTime!==s||!this._dur&&!n)&&(this._ts||(this._pTime=s),Rr(this,s,n)),this},e.time=function(s,n){return arguments.length?this.totalTime(Math.min(this.totalDuration(),s+wn(this))%this._dur||(s?this._dur:0),n):this._time},e.totalProgress=function(s,n){return arguments.length?this.totalTime(this.totalDuration()*s,n):this._tTime/this.totalDuration()},e.progress=function(s,n){return arguments.length?this.totalTime(this.duration()*(this._yoyo&&!(this.iteration()&1)?1-s:s)+wn(this),n):this.duration()?this._time/this._dur:this.ratio},e.iteration=function(s,n){var r=this.duration()+this._rDelay;return arguments.length?this.totalTime(this._time+(s-1)*r,n):this._repeat?Jt(this._tTime,r)+1:1},e.timeScale=function(s){if(!arguments.length)return this._ts||this._pauseTS||0;if(this._pauseTS!==null)return this._pauseTS=s,this;var n=this.parent&&this._ts?Bs(this.parent._time,this):this._tTime;return this._ts=s,F0(this.totalTime(n,!0))},e.paused=function(s){var n=!this._ts;return arguments.length?(n!==s&&(s?(this._pauseTS=this._ts,this._pTime=this._tTime||Math.max(-this._delay,this.rawTime()),this._ts=this._act=0):(this._ts=this._pauseTS||1,this._pauseTS=null,s=this._tTime||this._pTime,this.progress()===1&&(this._tTime-=Ce),this.totalTime(s,!0))),this):n},e.startTime=function(s){return arguments.length?(this.parent&&this.parent._sort&&dt(this.parent,this,s-this._delay),this):this._start},e.endTime=function(s){return this._start+($e(s)?this.totalDuration():this.duration())/Math.abs(this._ts)},e.rawTime=function(s){var n=this.parent||this._dp;return n?s&&(!this._ts||this._repeat&&this._time&&this.totalProgress()<1)?this._tTime%(this._dur+this._rDelay):this._ts?Bs(n.rawTime(s),this):this._tTime:this._tTime},e.repeat=function(s){return arguments.length?(this._repeat=s,ds(this)):this._repeat},e.repeatDelay=function(s){return arguments.length?(this._rDelay=s,ds(this)):this._rDelay},e.yoyo=function(s){return arguments.length?(this._yoyo=s,this):this._yoyo},e.seek=function(s,n){return this.totalTime(Le(this,s),$e(n))},e.restart=function(s,n){return this.play().totalTime(s?-this._delay:0,$e(n))},e.play=function(s,n){return s!=null&&this.seek(s,n),this.reversed(!1).paused(!1)},e.reverse=function(s,n){return s!=null&&this.seek(s||this.totalDuration(),n),this.reversed(!0).paused(!1)},e.pause=function(s,n){return s!=null&&this.seek(s,n),this.paused(!0)},e.resume=function(){return this.paused(!1)},e.reversed=function(s){var n=this._ts||this._pauseTS||0;return arguments.length?(s!==this.reversed()&&(this[this._pauseTS===null?"_ts":"_pauseTS"]=Math.abs(n)*(s?-1:1),this.totalTime(this._tTime,!0)),this):n<0},e.invalidate=function(){return this._initted=0,this},e.isActive=function(s){var n=this.parent||this._dp,r=this._start,o;return!!(!n||this._ts&&(this._initted||!s)&&n.isActive(s)&&(o=n.rawTime(!0))>=r&&o<this.endTime(!0)-Ce)},e.eventCallback=function(s,n,r){var o=this.vars;return arguments.length>1?(n?(o[s]=n,r&&(o[s+"Params"]=r),s==="onUpdate"&&(this._onUpdate=n)):delete o[s],this):o[s]},e.then=function(s){var n=this;return new Promise(function(r){var o=Se(s)?s:Ds,a=function(){var u=n.then;n.then=null,o=o(n),o&&(o.then||o===n?n.then=u:Se(o)||(o=Ds)),r(o),n.then=u};n._initted&&n.totalProgress()===1&&n._ts>=0||!n._tTime&&n._ts<0?a():n._prom=a})},e.kill=function(){Ei(this)},i}();Ze(mi.prototype,{_time:0,_start:0,_end:0,_tTime:0,_tDur:0,_dirty:0,_repeat:0,_yoyo:!1,parent:0,_initted:!1,_rDelay:0,_ts:1,_dp:0,ratio:0,_zTime:-Ce,_prom:0,_pauseTS:null});var Ae=function(i){wr(e,i);function e(s,n){var r;return s===void 0&&(s={}),r=i.call(this,s,n)||this,r.labels={},r.smoothChildTiming=$e(s.smoothChildTiming),r.autoRemoveChildren=!!s.autoRemoveChildren,r._sort=$e(s.sortChildren),r}var t=e.prototype;return t.to=function(n,r,o){return new _e(n,di(arguments,0,this),Le(this,it(r)?arguments[3]:o)),this},t.from=function(n,r,o){return new _e(n,di(arguments,1,this),Le(this,it(r)?arguments[3]:o)),this},t.fromTo=function(n,r,o,a){return new _e(n,di(arguments,2,this),Le(this,it(r)?arguments[4]:a)),this},t.set=function(n,r,o){return r.duration=0,r.parent=this,r.repeatDelay||(r.repeat=0),r.immediateRender=!!r.immediateRender,new _e(n,r,Le(this,o)),this},t.call=function(n,r,o){return dt(this,_e.delayedCall(0,n,r),Le(this,o))},t.staggerTo=function(n,r,o,a,l,u,d){return o.duration=r,o.stagger=o.stagger||a,o.onComplete=u,o.onCompleteParams=d,o.parent=this,new _e(n,o,Le(this,l)),this},t.staggerFrom=function(n,r,o,a,l,u,d){return o.runBackwards=1,o.immediateRender=$e(o.immediateRender),this.staggerTo(n,r,o,a,l,u,d)},t.staggerFromTo=function(n,r,o,a,l,u,d,c){return a.startAt=o,a.immediateRender=$e(a.immediateRender),this.staggerTo(n,r,a,l,u,d,c)},t.render=function(n,r,o){var a=this._time,l=this._dirty?this.totalDuration():this._tDur,u=this._dur,d=n>l-Ce&&n>=0&&this!==ke?l:n<Ce?0:n,c=this._zTime<0!=n<0&&(this._initted||!u),m,p,v,_,b,T,S,$,I,E,C,A;if(d!==this._tTime||o||c){if(c&&(u||(a=this._zTime),(n||!r)&&(this._zTime=n)),m=d,I=this._start,$=this._ts,T=$===0,a!==this._time&&u&&(m+=this._time-a),this._repeat&&(C=this._yoyo,b=u+this._rDelay,m=ce(d%b),(m>u||l===d)&&(m=u),_=~~(d/b),_&&_===d/b&&(m=u,_--),E=Jt(this._tTime,b),C&&_&1&&(m=u-m,A=1),_!==E&&!this._lock)){var D=C&&E&1,F=D===(C&&_&1);if(_<E&&(D=!D),a=D?0:u,this._lock=1,this.render(a,r,!u)._lock=0,!r&&this.parent&&Oe(this,"onRepeat"),this.vars.repeatRefresh&&!A&&this.getChildren().forEach(function(B){return B.invalidate()}),a!==this._time||T!==!this._ts)return this;if(F&&(this._lock=2,a=D?u+1e-4:-1e-4,this.render(a,!0)),this._lock=0,!this._ts&&!T)return this}if(this._hasPause&&!this._forcing&&this._lock<2&&(S=O0(this,ce(a),ce(m)),S&&(d-=m-(m=S._start))),this._tTime=d,this._time=m,this._act=!$,this._initted||(this._onUpdate=this.vars.onUpdate,this._initted=1),!a&&m&&!r&&Oe(this,"onStart"),m>=a&&n>=0)for(p=this._first;p;){if(v=p._next,(p._act||m>=p._start)&&p._ts&&S!==p){if(p.parent!==this)return this.render(n,r,o);if(p.render(p._ts>0?(m-p._start)*p._ts:(p._dirty?p.totalDuration():p._tDur)+(m-p._start)*p._ts,r,o),m!==this._time||!this._ts&&!T){S=0;break}}p=v}else{p=this._last;for(var M=n<0?n:m;p;){if(v=p._prev,(p._act||M<=p._end)&&p._ts&&S!==p){if(p.parent!==this)return this.render(n,r,o);if(p.render(p._ts>0?(M-p._start)*p._ts:(p._dirty?p.totalDuration():p._tDur)+(M-p._start)*p._ts,r,o),m!==this._time||!this._ts&&!T){S=0;break}}p=v}}if(S&&!r&&(this.pause(),S.render(m>=a?0:-Ce)._zTime=m>=a?1:-1,this._ts))return this._start=I,this.render(n,r,o);this._onUpdate&&!r&&Oe(this,"onUpdate",!0),(d===l&&l>=this.totalDuration()||!d&&this._ts<0)&&(I===this._start||Math.abs($)!==Math.abs(this._ts))&&((n||!u)&&(n&&this._ts>0||!d&&this._ts<0)&&wt(this,1),!r&&!(n<0&&!a)&&(Oe(this,d===l?"onComplete":"onReverseComplete",!0),this._prom&&this._prom()))}return this},t.add=function(n,r){var o=this;if(it(r)||(r=Le(this,r)),!(n instanceof mi)){if(qe(n))return n.forEach(function(a){return o.add(a,r)}),ut(this);if(Me(n))return this.addLabel(n,r);if(Se(n))n=_e.delayedCall(0,n);else return this}return this!==n?dt(this,n,r):this},t.getChildren=function(n,r,o,a){n===void 0&&(n=!0),r===void 0&&(r=!0),o===void 0&&(o=!0),a===void 0&&(a=-Ye);for(var l=[],u=this._first;u;)u._start>=a&&(u instanceof _e?r&&l.push(u):(o&&l.push(u),n&&l.push.apply(l,u.getChildren(!0,r,o)))),u=u._next;return l},t.getById=function(n){for(var r=this.getChildren(1,1,1),o=r.length;o--;)if(r[o].vars.id===n)return r[o]},t.remove=function(n){return Me(n)?this.removeLabel(n):Se(n)?this.killTweensOf(n):(rn(this,n),n===this._recent&&(this._recent=this._last),ut(this))},t.totalTime=function(n,r){return arguments.length?(this._forcing=1,!this.parent&&!this._dp&&this._ts&&(this._start=Ue.time-(this._ts>0?n/this._ts:(this.totalDuration()-n)/-this._ts)),i.prototype.totalTime.call(this,n,r),this._forcing=0,this):this._tTime},t.addLabel=function(n,r){return this.labels[n]=Le(this,r),this},t.removeLabel=function(n){return delete this.labels[n],this},t.addPause=function(n,r,o){var a=_e.delayedCall(0,r||yi,o);return a.data="isPause",this._hasPause=1,dt(this,a,Le(this,n))},t.removePause=function(n){var r=this._first;for(n=Le(this,n);r;)r._start===n&&r.data==="isPause"&&wt(r),r=r._next},t.killTweensOf=function(n,r,o){for(var a=this.getTweensOf(n,o),l=a.length;l--;)Mt!==a[l]&&a[l].kill(n,r);return this},t.getTweensOf=function(n,r){for(var o=[],a=st(n),l=this._first,u;l;)l instanceof _e?M0(l._targets,a)&&(!r||l.isActive(r==="started"))&&o.push(l):(u=l.getTweensOf(a,r)).length&&o.push.apply(o,u),l=l._next;return o},t.tweenTo=function(n,r){var o=this,a=Le(o,n),l=r&&r.startAt,u=_e.to(o,Ze({ease:"none",lazy:!1,time:a,duration:Math.abs(a-(l&&"time"in l?l.time:o._time))/o.timeScale()||Ce,onStart:function(){o.pause();var c=Math.abs(a-o._time)/o.timeScale();u._dur!==c&&(u._dur=c,u.render(u._time,!0,!0)),r&&r.onStart&&r.onStart.apply(u,r.onStartParams||[])}},r));return u},t.tweenFromTo=function(n,r,o){return this.tweenTo(r,Ze({startAt:{time:Le(this,n)}},o))},t.recent=function(){return this._recent},t.nextLabel=function(n){return n===void 0&&(n=this._time),kn(this,Le(this,n))},t.previousLabel=function(n){return n===void 0&&(n=this._time),kn(this,Le(this,n),1)},t.currentLabel=function(n){return arguments.length?this.seek(n,!0):this.previousLabel(this._time+Ce)},t.shiftChildren=function(n,r,o){o===void 0&&(o=0);for(var a=this._first,l=this.labels,u;a;)a._start>=o&&(a._start+=n),a=a._next;if(r)for(u in l)l[u]>=o&&(l[u]+=n);return ut(this)},t.invalidate=function(){var n=this._first;for(this._lock=0;n;)n.invalidate(),n=n._next;return i.prototype.invalidate.call(this)},t.clear=function(n){n===void 0&&(n=!0);for(var r=this._first,o;r;)o=r._next,this.remove(r),r=o;return this._time=this._tTime=0,n&&(this.labels={}),ut(this)},t.totalDuration=function(n){var r=0,o=this,a=o._last,l=Ye,u=o._repeat,d=u*o._rDelay||0,c=u<0,m,p;if(!arguments.length){if(o._dirty){for(;a;)m=a._prev,a._dirty&&a.totalDuration(),a._start>l&&o._sort&&a._ts&&!o._lock?(o._lock=1,dt(o,a,a._start-a._delay),o._lock=0):l=a._start,a._start<0&&a._ts&&(r-=a._start,(!o.parent&&!o._dp||o.parent&&o.parent.smoothChildTiming)&&(o._start+=a._start/o._ts,o._time-=a._start,o._tTime-=a._start),o.shiftChildren(-a._start,!1,-1e20),l=0),p=a._end=a._start+a._tDur/Math.abs(a._ts||a._pauseTS||Ce),p>r&&a._ts&&(r=ce(p)),a=m;o._dur=o===ke&&o._time>r?o._time:Math.min(Ye,r),o._tDur=c&&(o._dur||d)?1e12:Math.min(Ye,r*(u+1)+d),o._end=o._start+(o._tDur/Math.abs(o._ts||o._pauseTS||Ce)||0),o._dirty=0}return o._tDur}return c?o:o.timeScale(o.totalDuration()/n)},e.updateRoot=function(n){if(ke._ts&&(Rr(ke,Bs(n,ke)),Er=Ue.frame),Ue.frame>=yn){yn+=Ke.autoSleep||120;var r=ke._first;if((!r||!r._ts)&&Ke.autoSleep&&Ue._listeners.length<2){for(;r&&!r._ts;)r=r._next;r||Ue.sleep()}}},e}(mi);Ze(Ae.prototype,{_lock:0,_hasPause:0,_forcing:0});var ib=function(e,t,s,n,r,o,a){var l=new Be(this._pt,e,t,0,1,to,null,r),u=0,d=0,c,m,p,v,_,b,T,S;for(l.b=s,l.e=n,s+="",n+="",(T=~n.indexOf("random("))&&(n=Ji(n)),o&&(S=[s,n],o(S,e,t),s=S[0],n=S[1]),m=s.match(ls)||[];c=ls.exec(n);)v=c[0],_=n.substring(u,c.index),p?p=(p+1)%5:_.substr(-5)==="rgba("&&(p=1),v!==m[d++]&&(b=parseFloat(m[d-1])||0,l._pt={_next:l._pt,p:_||d===1?_:",",s:b,c:v.charAt(1)==="="?parseFloat(v.substr(2))*(v.charAt(0)==="-"?-1:1):parseFloat(v)-b,m:p&&p<4?Math.round:0},u=ls.lastIndex);return l.c=u<n.length?n.substring(u,n.length):"",l.fp=a,(Sr.test(n)||T)&&(l.e=0),this._pt=l,l},on=function(e,t,s,n,r,o,a,l,u){Se(n)&&(n=n(r||0,e,o));var d=e[t],c=s!=="get"?s:Se(d)?u?e[t.indexOf("set")||!Se(e["get"+t.substr(3)])?t:"get"+t.substr(3)](u):e[t]():d,m=Se(d)?u?ab:Zr:an,p;if(Me(n)&&(~n.indexOf("random(")&&(n=Ji(n)),n.charAt(1)==="="&&(n=parseFloat(c)+parseFloat(n.substr(2))*(n.charAt(0)==="-"?-1:1)+(ct(c)||0))),c!==n)return isNaN(c+n)?(!d&&!(t in e)&&$r(t,n),ib.call(this,e,t,c,n,m,l||Ke.stringFilter,u)):(p=new Be(this._pt,e,t,+c||0,n-(c||0),typeof d=="boolean"?ub:eo,0,m),u&&(p.fp=u),a&&p.modifier(a,this,e),this._pt=p)},sb=function(e,t,s,n,r){if(Se(e)&&(e=hi(e,r,t,s,n)),!ht(e)||e.style&&e.nodeType||qe(e))return Me(e)?hi(e,r,t,s,n):e;var o={},a;for(a in e)o[a]=hi(e[a],r,t,s,n);return o},Jr=function(e,t,s,n,r,o){var a,l,u,d;if(Fe[e]&&(a=new Fe[e]).init(r,a.rawVars?t[e]:sb(t[e],n,r,o,s),s,n,o)!==!1&&(s._pt=l=new Be(s._pt,r,e,0,1,a.render,a,0,a.priority),s!==Wt))for(u=s._ptLookup[s._targets.indexOf(r)],d=a._props.length;d--;)u[a._props[d]]=l;return a},Mt,nb=function i(e,t){var s=e.vars,n=s.ease,r=s.startAt,o=s.immediateRender,a=s.lazy,l=s.onUpdate,u=s.onUpdateParams,d=s.callbackScope,c=s.runBackwards,m=s.yoyoEase,p=s.keyframes,v=s.autoRevert,_=e._dur,b=e._startAt,T=e._targets,S=e.parent,$=S&&S.data==="nested"?S.parent._targets:T,I=e._overwrite==="auto",E=e.timeline,C,A,D,F,M,B,J,oe,N,re,ne,se;if(E&&(!p||!n)&&(n="none"),e._ease=qt(n,jt.ease),e._yEase=m?Xr(qt(m===!0?n:m,jt.ease)):0,m&&e._yoyo&&!e._repeat&&(m=e._yEase,e._yEase=e._ease,e._ease=m),!E){if(b&&b.render(-1,!0).kill(),r){if(wt(e._startAt=_e.set(T,Ze({data:"isStart",overwrite:!1,parent:S,immediateRender:!0,lazy:$e(a),startAt:null,delay:0,onUpdate:l,onUpdateParams:u,callbackScope:d,stagger:0},r))),o){if(t>0)!v&&(e._startAt=0);else if(_)return}}else if(c&&_){if(b)!v&&(e._startAt=0);else if(t&&(o=!1),wt(e._startAt=_e.set(T,Rt(zi(s,fi),{overwrite:!1,data:"isFromStart",lazy:o&&$e(a),immediateRender:o,stagger:0,parent:S}))),!o)i(e._startAt,Ce);else if(!t)return}for(C=zi(s,fi),e._pt=0,oe=T[0]?Yt(T[0]).harness:0,se=oe&&s[oe.prop],a=_&&$e(a)||a&&!_,A=0;A<T.length;A++){if(M=T[A],J=M._gsap||nn(T)[A]._gsap,e._ptLookup[A]=re={},Es[J.id]&&Fi(),ne=$===T?A:$.indexOf(M),oe&&(N=new oe).init(M,se||C,e,ne,$)!==!1&&(e._pt=F=new Be(e._pt,M,N.name,0,1,N.render,N,0,N.priority),N._props.forEach(function(Ee){re[Ee]=F}),N.priority&&(B=1)),!oe||se)for(D in C)Fe[D]&&(N=Jr(D,C,e,ne,M,$))?N.priority&&(B=1):re[D]=F=on.call(e,M,D,"get",C[D],ne,$,0,s.stringFilter);e._op&&e._op[A]&&e.kill(M,e._op[A]),I&&e._pt&&(Mt=e,ke.killTweensOf(M,re,"started"),Mt=0),e._pt&&a&&(Es[J.id]=1)}B&&io(e),e._onInit&&e._onInit(e)}e._from=!E&&!!s.runBackwards,e._onUpdate=l,e._initted=1},rb=function(e,t){var s=e[0]?Yt(e[0]).harness:0,n=s&&s.aliases,r,o,a,l;if(!n)return t;r=Rt({},t);for(o in n)if(o in r)for(l=n[o].split(","),a=l.length;a--;)r[l[a]]=r[o];return r},hi=function(e,t,s,n,r){return Se(e)?e.call(t,s,n,r):Me(e)&&~e.indexOf("random(")?Ji(e):e},Qr=Dr+",repeat,repeatDelay,yoyo,repeatRefresh,yoyoEase",ob=(Qr+",id,stagger,delay,duration,paused").split(","),_e=function(i){wr(e,i);function e(s,n,r){var o;typeof n=="number"&&(r.duration=n,n=r,r=null),o=i.call(this,D0(n),r)||this;var a=o.vars,l=a.duration,u=a.delay,d=a.immediateRender,c=a.stagger,m=a.overwrite,p=a.keyframes,v=a.defaults,_=qe(s)&&it(s[0])?[s]:st(s),b,T,S,$,I,E,C,A;if(o._targets=_.length?nn(_):Pr("GSAP target "+s+" not found. https://greensock.com",!Ke.nullTargetWarn)||[],o._ptLookup=[],o._overwrite=m,p||c||bn(l)||bn(u)){if(n=o.vars,b=o.timeline=new Ae({data:"nested",defaults:v||{}}),b.kill(),b.parent=ii(o),p)Ze(b.vars.defaults,{ease:"none"}),p.forEach(function(D){return b.to(_,D,">")});else{if($=_.length,C=c?Nr(c):yi,ht(c))for(I in c)~Qr.indexOf(I)&&(A||(A={}),A[I]=c[I]);for(T=0;T<$;T++){S={};for(I in n)ob.indexOf(I)<0&&(S[I]=n[I]);S.stagger=0,A&&Rt(S,A),n.yoyoEase&&!n.repeat&&(S.yoyoEase=n.yoyoEase),E=_[T],S.duration=+hi(l,ii(o),T,E,_),S.delay=(+hi(u,ii(o),T,E,_)||0)-o._delay,!c&&$===1&&S.delay&&(o._delay=u=S.delay,o._start+=u,S.delay=0),b.to(E,S,C(T,E,_))}l=u=0}l||o.duration(l=b.duration())}else o.timeline=0;return m===!0&&(Mt=ii(o),ke.killTweensOf(_),Mt=0),(d||!l&&!p&&o._start===o.parent._time&&$e(d)&&z0(ii(o))&&o.parent.data!=="nested")&&(o._tTime=-Ce,o.render(Math.max(0,-u))),o}var t=e.prototype;return t.render=function(n,r,o){var a=this._time,l=this._tDur,u=this._dur,d=n>l-Ce&&n>=0?l:n<Ce?0:n,c,m,p,v,_,b,T,S,$;if(!u)A0(this,n,r,o);else if(d!==this._tTime||!n||o||this._startAt&&this._zTime<0!=n<0){if(c=d,S=this.timeline,this._repeat){if(v=u+this._rDelay,c=ce(d%v),c>u&&(c=u),p=~~(d/v),p&&p===d/v&&(c=u,p--),b=this._yoyo&&p&1,b&&($=this._yEase,c=u-c),_=Jt(this._tTime,v),c===a&&!o&&this._initted)return this;p!==_&&this.vars.repeatRefresh&&!b&&!this._lock&&(this._lock=o=1,this.render(v*p,!0).invalidate()._lock=0)}if(!this._initted&&zr(this,c,o,r))return this._tTime=0,this;for(this._tTime=d,this._time=c,!this._act&&this._ts&&(this._act=1,this._lazy=0),this.ratio=T=($||this._ease)(c/u),this._from&&(this.ratio=T=1-T),!a&&c&&!r&&Oe(this,"onStart"),m=this._pt;m;)m.r(T,m.d),m=m._next;S&&S.render(n<0?n:!c&&b?-Ce:S._dur*T,r,o)||this._startAt&&(this._zTime=n),this._onUpdate&&!r&&(n<0&&this._startAt&&this._startAt.render(n,!0,o),Oe(this,"onUpdate")),this._repeat&&p!==_&&this.vars.onRepeat&&!r&&this.parent&&Oe(this,"onRepeat"),(d===this._tDur||!d)&&this._tTime===d&&(n<0&&this._startAt&&!this._onUpdate&&this._startAt.render(n,!0,o),(n||!u)&&(n&&this._ts>0||!d&&this._ts<0)&&wt(this,1),!r&&!(n<0&&!a)&&(Oe(this,d===l?"onComplete":"onReverseComplete",!0),this._prom&&this._prom()))}return this},t.targets=function(){return this._targets},t.invalidate=function(){return this._pt=this._op=this._startAt=this._onUpdate=this._act=this._lazy=0,this._ptLookup=[],this.timeline&&this.timeline.invalidate(),i.prototype.invalidate.call(this)},t.kill=function(n,r){if(r===void 0&&(r="all"),!n&&(!r||r==="all")&&(this._lazy=0,this.parent))return Ei(this);if(this.timeline)return this.timeline.killTweensOf(n,r,Mt&&Mt.vars.overwrite!==!0),this;var o=this._targets,a=n?st(n):o,l=this._ptLookup,u=this._pt,d,c,m,p,v,_,b;if((!r||r==="all")&&B0(o,a))return Ei(this);for(d=this._op=this._op||[],r!=="all"&&(Me(r)&&(v={},Xe(r,function(T){return v[T]=1}),r=v),r=rb(o,r)),b=o.length;b--;)if(~a.indexOf(o[b])){c=l[b],r==="all"?(d[b]=r,p=c,m={}):(m=d[b]=d[b]||{},p=r);for(v in p)_=c&&c[v],_&&((!("kill"in _.d)||_.d.kill(v)===!0)&&rn(this,_,"_pt"),delete c[v]),m!=="all"&&(m[v]=1)}return this._initted&&!this._pt&&u&&Ei(this),this},e.to=function(n,r){return new e(n,r,arguments[2])},e.from=function(n,r){return new e(n,di(arguments,1))},e.delayedCall=function(n,r,o,a){return new e(r,0,{immediateRender:!1,lazy:!1,overwrite:!1,delay:n,onComplete:r,onReverseComplete:r,onCompleteParams:o,onReverseCompleteParams:o,callbackScope:a})},e.fromTo=function(n,r,o){return new e(n,di(arguments,2))},e.set=function(n,r){return r.duration=0,r.repeatDelay||(r.repeat=0),new e(n,r)},e.killTweensOf=function(n,r,o){return ke.killTweensOf(n,r,o)},e}(mi);Ze(_e.prototype,{_targets:[],_lazy:0,_startAt:0,_op:0,_onInit:0});Xe("staggerTo,staggerFrom,staggerFromTo",function(i){_e[i]=function(){var e=new Ae,t=Rs.call(arguments,0);return t.splice(i==="staggerFromTo"?5:4,0,0),e[i].apply(e,t)}});var an=function(e,t,s){return e[t]=s},Zr=function(e,t,s){return e[t](s)},ab=function(e,t,s,n){return e[t](n.fp,s)},lb=function(e,t,s){return e.setAttribute(t,s)},ln=function(e,t){return Se(e[t])?Zr:sn(e[t])&&e.setAttribute?lb:an},eo=function(e,t){return t.set(t.t,t.p,Math.round((t.s+t.c*e)*1e4)/1e4,t)},ub=function(e,t){return t.set(t.t,t.p,!!(t.s+t.c*e),t)},to=function(e,t){var s=t._pt,n="";if(!e&&t.b)n=t.b;else if(e===1&&t.e)n=t.e;else{for(;s;)n=s.p+(s.m?s.m(s.s+s.c*e):Math.round((s.s+s.c*e)*1e4)/1e4)+n,s=s._next;n+=t.c}t.set(t.t,t.p,n,t)},un=function(e,t){for(var s=t._pt;s;)s.r(e,s.d),s=s._next},db=function(e,t,s,n){for(var r=this._pt,o;r;)o=r._next,r.p===n&&r.modifier(e,t,s),r=o},hb=function(e){for(var t=this._pt,s,n;t;)n=t._next,t.p===e&&!t.op||t.op===e?rn(this,t,"_pt"):t.dep||(s=1),t=n;return!s},cb=function(e,t,s,n){n.mSet(e,t,n.m.call(n.tween,s,n.mt),n)},io=function(e){for(var t=e._pt,s,n,r,o;t;){for(s=t._next,n=r;n&&n.pr>t.pr;)n=n._next;(t._prev=n?n._prev:o)?t._prev._next=t:r=t,(t._next=n)?n._prev=t:o=t,t=s}e._pt=r},Be=function(){function i(t,s,n,r,o,a,l,u,d){this.t=s,this.s=r,this.c=o,this.p=n,this.r=a||eo,this.d=l||this,this.set=u||an,this.pr=d||0,this._next=t,t&&(t._prev=this)}var e=i.prototype;return e.modifier=function(s,n,r){this.mSet=this.mSet||this.set,this.set=cb,this.m=s,this.mt=r,this.tween=n},i}();Xe(Dr+",parent,duration,ease,delay,overwrite,runBackwards,startAt,yoyo,immediateRender,repeat,repeatDelay,data,paused,reversed,lazy,callbackScope,stringFilter,id,yoyoEase,stagger,inherit,repeatRefresh,keyframes,autoRevert",function(i){fi[i]=1,i.substr(0,2)==="on"&&(fi[i+"Params"]=1)});Qe.TweenMax=Qe.TweenLite=_e;Qe.TimelineLite=Qe.TimelineMax=Ae;ke=new Ae({sortChildren:!1,defaults:jt,autoRemoveChildren:!0,id:"root"});Ke.stringFilter=qr;var Oi={registerPlugin:function(){for(var e=arguments.length,t=new Array(e),s=0;s<e;s++)t[s]=arguments[s];t.forEach(function(n){return j0(n)})},timeline:function(e){return new Ae(e)},getTweensOf:function(e,t){return ke.getTweensOf(e,t)},getProperty:function(e,t,s,n){Me(e)&&(e=st(e)[0]);var r=Yt(e||{}).get,o=s?Ds:Fr;return s==="native"&&(s=""),e&&(t?o((Fe[t]&&Fe[t].get||r)(e,t,s,n)):function(a,l,u){return o((Fe[a]&&Fe[a].get||r)(e,a,l,u))})},quickSetter:function(e,t,s){if(e=st(e),e.length>1){var n=e.map(function(u){return ot.quickSetter(u,t,s)}),r=n.length;return function(u){for(var d=r;d--;)n[d](u)}}e=e[0]||{};var o=Fe[t],a=Yt(e),l=o?function(u){var d=new o;Wt._pt=0,d.init(e,s?u+s:u,Wt,0,[e]),d.render(1,d),Wt._pt&&un(1,Wt)}:a.set(e,t);return o?l:function(u){return l(e,t,s?u+s:u,a,1)}},isTweening:function(e){return ke.getTweensOf(e,!0).length>0},defaults:function(e){return e&&e.ease&&(e.ease=qt(e.ease,jt.ease)),_n(jt,e||{})},config:function(e){return _n(Ke,e||{})},registerEffect:function(e){var t=e.name,s=e.effect,n=e.plugins,r=e.defaults,o=e.extendTimeline;(n||"").split(",").forEach(function(a){return a&&!Fe[a]&&!Qe[a]&&Pr(t+" effect requires "+a+" plugin.")}),us[t]=function(a,l){return s(st(a),Ze(l||{},r))},o&&(Ae.prototype[t]=function(a,l,u){return this.add(us[t](a,ht(l)?l:(u=l)&&{}),u)})},registerEase:function(e,t){le[e]=qt(t)},parseEase:function(e,t){return arguments.length?qt(e,t):le},getById:function(e){return ke.getById(e)},exportRoot:function(e,t){e===void 0&&(e={});var s=new Ae(e),n,r;for(s.smoothChildTiming=$e(e.smoothChildTiming),ke.remove(s),s._dp=0,s._time=s._tTime=ke._time,n=ke._first;n;)r=n._next,(t||!(!n._dur&&n instanceof _e&&n.vars.onComplete===n._targets[0]))&&dt(s,n,n._start-n._delay),n=r;return dt(ke,s,0),s},utils:{wrap:q0,wrapYoyo:X0,distribute:Nr,random:Wr,snap:Hr,normalize:Y0,getUnit:ct,clamp:H0,splitColor:Yr,toArray:st,mapRange:Ur,pipe:G0,unitize:U0,interpolate:K0,shuffle:Or},install:Lr,effects:us,ticker:Ue,updateRoot:Ae.updateRoot,plugins:Fe,globalTimeline:ke,core:{PropTween:Be,globals:Mr,Tween:_e,Timeline:Ae,Animation:mi,getCache:Yt}};Xe("to,from,fromTo,delayedCall,set,killTweensOf",function(i){return Oi[i]=_e[i]});Ue.add(Ae.updateRoot);Wt=Oi.to({},{duration:0});var fb=function(e,t){for(var s=e._pt;s&&s.p!==t&&s.op!==t&&s.fp!==t;)s=s._next;return s},mb=function(e,t){var s=e._targets,n,r,o;for(n in t)for(r=s.length;r--;)o=e._ptLookup[r][n],o&&(o=o.d)&&(o._pt&&(o=fb(o,n)),o&&o.modifier&&o.modifier(t[n],e,s[r],n))},ms=function(e,t){return{name:e,rawVars:1,init:function(n,r,o){o._onInit=function(a){var l,u;if(Me(r)&&(l={},Xe(r,function(d){return l[d]=1}),r=l),t){l={};for(u in r)l[u]=t(r[u]);r=l}mb(a,r)}}}},ot=Oi.registerPlugin({name:"attr",init:function(e,t,s,n,r){for(var o in t)this.add(e,"setAttribute",(e.getAttribute(o)||0)+"",t[o],n,r,0,0,o),this._props.push(o)}},{name:"endArray",init:function(e,t){for(var s=t.length;s--;)this.add(e,s,e[s]||0,t[s])}},ms("roundProps",Fs),ms("modifiers"),ms("snap",Hr))||Oi;_e.version=Ae.version=ot.version="3.1.1";Ir=1;Cr()&&_i();le.Power0;le.Power1;le.Power2;le.Power3;le.Power4;le.Linear;le.Quad;le.Cubic;le.Quart;le.Quint;le.Strong;le.Elastic;le.Back;le.SteppedEase;le.Bounce;le.Sine;le.Expo;le.Circ;/*!
+ * CSSPlugin 3.1.1
+ * https://greensock.com
+ *
+ * Copyright 2008-2020, GreenSock. All rights reserved.
+ * Subject to the terms at https://greensock.com/standard-license or for
+ * Club GreenSock members, the agreement issued with that membership.
+ * @author: Jack Doyle, jack@greensock.com
+*/var xn,nt,Xt,dn,Et,ri,Sn,gb=function(){return typeof window<"u"},kt={},$t=180/Math.PI,ci=Math.PI/180,Nt=Math.atan2,Tn=1e8,so=/([A-Z])/g,Vi=/[-+=\.]*\d+[\.e-]*\d*[a-z%]*/g,pb=/(?:left|right|width|margin|padding|x)/i,vb=/[\s,\(]\S/,bt={autoAlpha:"opacity,visibility",scale:"scaleX,scaleY",alpha:"opacity"},no=function(e,t){return t.set(t.t,t.p,~~((t.s+t.c*e)*1e3)/1e3+t.u,t)},bb=function(e,t){return t.set(t.t,t.p,e===1?t.e:~~((t.s+t.c*e)*1e3)/1e3+t.u,t)},yb=function(e,t){return t.set(t.t,t.p,e?~~((t.s+t.c*e)*1e3)/1e3+t.u:t.b,t)},_b=function(e,t){var s=t.s+t.c*e;t.set(t.t,t.p,~~(s+(s<0?-.5:.5))+t.u,t)},ro=function(e,t){return t.set(t.t,t.p,e?t.e:t.b,t)},oo=function(e,t){return t.set(t.t,t.p,e!==1?t.b:t.e,t)},wb=function(e,t,s){return e.style[t]=s},kb=function(e,t,s){return e.style.setProperty(t,s)},Cb=function(e,t,s){return e._gsap[t]=s},xb=function(e,t,s){return e._gsap.scaleX=e._gsap.scaleY=s},Sb=function(e,t,s,n,r){var o=e._gsap;o.scaleX=o.scaleY=s,o.renderTransform(r,o)},Tb=function(e,t,s,n,r){var o=e._gsap;o[t]=s,o.renderTransform(r,o)},je="transform",Ct=je+"Origin",ao,As=function(e,t){var s=nt.createElementNS?nt.createElementNS((t||"http://www.w3.org/1999/xhtml").replace(/^https/,"http"),e):nt.createElement(e);return s.style?s:nt.createElement(e)},Qt=function i(e,t,s){var n=getComputedStyle(e);return n[t]||n.getPropertyValue(t.replace(so,"-$1").toLowerCase())||n.getPropertyValue(t)||!s&&i(e,Kt(t)||t,1)||""},Vn="O,Moz,ms,Ms,Webkit".split(","),Kt=function(e,t){var s=t||Et,n=s.style,r=5;if(e in n)return e;for(e=e.charAt(0).toUpperCase()+e.substr(1);r--&&!(Vn[r]+e in n););return r<0?null:(r===3?"ms":r>=0?Vn[r]:"")+e},Os=function(){gb()&&(xn=window,nt=xn.document,Xt=nt.documentElement,Et=As("div")||{style:{}},ri=As("div"),je=Kt(je),Ct=Kt(Ct),Et.style.cssText="border-width:0;line-height:0;position:absolute;padding:0",ao=!!Kt("perspective"),dn=1)},Vb=function i(e){var t=As("svg",this.ownerSVGElement&&this.ownerSVGElement.getAttribute("xmlns")||"http://www.w3.org/2000/svg"),s=this.parentNode,n=this.nextSibling,r=this.style.cssText,o;if(Xt.appendChild(t),t.appendChild(this),this.style.display="block",e)try{o=this.getBBox(),this._gsapBBox=this.getBBox,this.getBBox=i}catch{}else this._gsapBBox&&(o=this._gsapBBox());return n?s.insertBefore(this,n):s.appendChild(this),Xt.removeChild(t),this.style.cssText=r,o},In=function(e,t){for(var s=t.length;s--;)if(e.hasAttribute(t[s]))return e.getAttribute(t[s])},lo=function(e){var t;try{t=e.getBBox()}catch{t=Vb.call(e,!0)}return t&&!t.width&&!t.x&&!t.y?{x:+In(e,["x","cx","x1"])||0,y:+In(e,["y","cy","y1"])||0,width:0,height:0}:t},uo=function(e){return!!(e.getCTM&&(!e.parentNode||e.ownerSVGElement)&&lo(e))},Ns=function(e,t){if(t){var s=e.style;t in kt&&(t=je),s.removeProperty?((t.substr(0,2)==="ms"||t.substr(0,6)==="webkit")&&(t="-"+t),s.removeProperty(t.replace(so,"-$1").toLowerCase())):s.removeAttribute(t)}},yt=function(e,t,s,n,r,o){var a=new Be(e._pt,t,s,0,1,o?oo:ro);return e._pt=a,a.b=n,a.e=r,e._props.push(s),a},Ln={deg:1,rad:1,turn:1},Ft=function(e,t,s,n){var r=parseFloat(s)||0,o=(s+"").trim().substr((r+"").length)||"px",a=Et.style,l=pb.test(t),u=e.tagName.toLowerCase()==="svg",d=(u?"client":"offset")+(l?"Width":"Height"),c=100,m=n==="px",p,v,_,b;return n===o||!r||Ln[n]||Ln[o]?r:(b=e.getCTM&&uo(e),n==="%"&&(kt[t]||~t.indexOf("adius"))?ce(r/(b?e.getBBox()[l?"width":"height"]:e[d])*c):(a[l?"width":"height"]=c+(m?o:n),v=~t.indexOf("adius")||n==="em"&&e.appendChild&&!u?e:e.parentNode,b&&(v=(e.ownerSVGElement||{}).parentNode),(!v||v===nt||!v.appendChild)&&(v=nt.body),_=v._gsap,_&&n==="%"&&_.width&&l&&_.time===Ue.time?ce(r/_.width*c):(v===e&&(a.position="static"),v.appendChild(Et),p=Et[d],v.removeChild(Et),a.position="absolute",l&&n==="%"&&(_=Yt(v),_.time=Ue.time,_.width=v[d]),ce(m?p*r/c:c/p*r))))},oi=function(e,t,s,n){var r;return dn||Os(),t in bt&&t!=="transform"&&(t=bt[t],~t.indexOf(",")&&(t=t.split(",")[0])),kt[t]&&t!=="transform"?(r=Qi(e,n),r=t!=="transformOrigin"?r[t]:Hi(Qt(e,Ct))+r.zOrigin+"px"):(r=e.style[t],(!r||r==="auto"||n||~(r+"").indexOf("calc("))&&(r=Ni[t]&&Ni[t](e,t,s)||Qt(e,t)||Br(e,t)||(t==="opacity"?1:0))),s&&!~(r+"").indexOf(" ")?Ft(e,t,r,s)+s:r},Ib=function(e,t,s,n){var r=new Be(this._pt,e.style,t,0,1,to),o=0,a=0,l,u,d,c,m,p,v,_,b,T,S,$,I;if(r.b=s,r.e=n,s+="",n+="",n==="auto"&&(e.style[t]=n,n=Qt(e,t)||n,e.style[t]=s),l=[s,n],qr(l),s=l[0],n=l[1],p=s.indexOf("rgba("),v=n.indexOf("rgba("),!!p!=!!v&&(p?s=s.substr(p)+" "+s.substr(0,p-1):n=n.substr(v)+" "+n.substr(0,v-1)),d=s.match(Vi)||[],I=n.match(Vi)||[],I.length){for(;u=Vi.exec(n);)v=u[0],b=n.substring(o,u.index),m?m=(m+1)%5:(b.substr(-5)==="rgba("||b.substr(-5)==="hsla(")&&(m=1),v!==(p=d[a++]||"")&&(c=parseFloat(p)||0,S=p.substr((c+"").length),$=v.charAt(1)==="="?+(v.charAt(0)+"1"):0,$&&(v=v.substr(2)),_=parseFloat(v),T=v.substr((_+"").length),o=Vi.lastIndex-T.length,T||(T=T||Ke.units[t]||S,o===n.length&&(n+=T,r.e+=T)),S!==T&&(c=Ft(e,t,p,T)||0),r._pt={_next:r._pt,p:b||a===1?b:",",s:c,c:$?$*_:_-c,m:m&&m<4?Math.round:0});r.c=o<n.length?n.substring(o,n.length):""}else r.r=t==="display"&&n==="none"?oo:ro;return Sr.test(n)&&(r.e=0),this._pt=r,r},$n={top:"0%",bottom:"100%",left:"0%",right:"100%",center:"50%"},Lb=function(e){var t=e.split(" "),s=t[0],n=t[1]||"50%";return(s==="top"||s==="bottom"||n==="left"||n==="right")&&(e=s,s=n,n=e),t[0]=$n[s]||s,t[1]=$n[n]||n,t.join(" ")},$b=function(e,t){if(t.tween&&t.tween._time===t.tween._dur){var s=t.t,n=s.style,r=t.u,o,a,l;if(r==="all"||r===!0)n.cssText="",a=1;else for(r=r.split(","),l=r.length;--l>-1;)o=r[l],kt[o]&&(a=1,o=o==="transformOrigin"?Ct:je),Ns(s,o);a&&(Ns(s,je),a=s._gsap,a&&(a.svg&&s.removeAttribute("transform"),Qi(s,1)))}},Ni={clearProps:function(e,t,s,n,r){if(r.data!=="isFromStart"){var o=e._pt=new Be(e._pt,t,s,0,0,$b);return o.u=n,o.pr=-10,o.tween=r,e._props.push(s),1}}},gi=[1,0,0,1,0,0],ho={},co=function(e){return e==="matrix(1, 0, 0, 1, 0, 0)"||e==="none"||!e},Pn=function(e){var t=Qt(e,je);return co(t)?gi:t.substr(7).match(xr).map(ce)},fo=function(e,t){var s=e._gsap,n=e.style,r=Pn(e),o,a,l,u;return s.svg&&e.getAttribute("transform")?(l=e.transform.baseVal.consolidate().matrix,r=[l.a,l.b,l.c,l.d,l.e,l.f],r.join(",")==="1,0,0,1,0,0"?gi:r):(r===gi&&!e.offsetParent&&e!==Xt&&!s.svg&&(l=n.display,n.display="block",o=e.parentNode,(!o||!e.offsetParent)&&(u=1,a=e.nextSibling,Xt.appendChild(e)),r=Pn(e),l?n.display=l:Ns(e,"display"),u&&(a?o.insertBefore(e,a):o?o.appendChild(e):Xt.removeChild(e))),t&&r.length>6?[r[0],r[1],r[4],r[5],r[12],r[13]]:r)},Hs=function(e,t,s,n,r,o){var a=e._gsap,l=r||fo(e,!0),u=a.xOrigin||0,d=a.yOrigin||0,c=a.xOffset||0,m=a.yOffset||0,p=l[0],v=l[1],_=l[2],b=l[3],T=l[4],S=l[5],$=t.split(" "),I=parseFloat($[0])||0,E=parseFloat($[1])||0,C,A,D,F;s?l!==gi&&(A=p*b-v*_)&&(D=I*(b/A)+E*(-_/A)+(_*S-b*T)/A,F=I*(-v/A)+E*(p/A)-(p*S-v*T)/A,I=D,E=F):(C=lo(e),I=C.x+(~$[0].indexOf("%")?I/100*C.width:I),E=C.y+(~($[1]||$[0]).indexOf("%")?E/100*C.height:E)),n||n!==!1&&a.smooth?(T=I-u,S=E-d,a.xOffset=c+(T*p+S*_)-T,a.yOffset=m+(T*v+S*b)-S):a.xOffset=a.yOffset=0,a.xOrigin=I,a.yOrigin=E,a.smooth=!!n,a.origin=t,a.originIsAbsolute=!!s,e.style[Ct]="0px 0px",o&&(yt(o,a,"xOrigin",u,I),yt(o,a,"yOrigin",d,E),yt(o,a,"xOffset",c,a.xOffset),yt(o,a,"yOffset",m,a.yOffset))},Qi=function(e,t){var s=e._gsap||new jr(e);if("x"in s&&!t&&!s.uncache)return s;var n=e.style,r=s.scaleX<0,o=s.xOrigin||0,a=s.yOrigin||0,l="px",u="deg",d=Qt(e,Ct)||"0",c,m,p,v,_,b,T,S,$,I,E,C,A,D,F,M,B,J,oe,N,re,ne,se,Ee,ge,He,he,St,Je,lt;return c=m=p=b=T=S=$=I=E=0,v=_=1,s.svg=!!(e.getCTM&&uo(e)),C=fo(e,s.svg),s.svg&&Hs(e,d,s.originIsAbsolute,s.smooth!==!1,C),C!==gi&&(M=C[0],B=C[1],J=C[2],oe=C[3],c=N=C[4],m=re=C[5],C.length===6?(v=Math.sqrt(M*M+B*B),_=Math.sqrt(oe*oe+J*J),b=M||B?Nt(B,M)*$t:0,$=J||oe?Nt(J,oe)*$t+b:0,s.svg&&(c-=o-(o*M+a*J),m-=a-(o*B+a*oe))):(lt=C[6],St=C[7],ge=C[8],He=C[9],he=C[10],Je=C[11],c=C[12],m=C[13],p=C[14],A=Nt(lt,he),T=A*$t,A&&(D=Math.cos(-A),F=Math.sin(-A),ne=N*D+ge*F,se=re*D+He*F,Ee=lt*D+he*F,ge=N*-F+ge*D,He=re*-F+He*D,he=lt*-F+he*D,Je=St*-F+Je*D,N=ne,re=se,lt=Ee),A=Nt(-J,he),S=A*$t,A&&(D=Math.cos(-A),F=Math.sin(-A),ne=M*D-ge*F,se=B*D-He*F,Ee=J*D-he*F,Je=oe*F+Je*D,M=ne,B=se,J=Ee),A=Nt(B,M),b=A*$t,A&&(D=Math.cos(A),F=Math.sin(A),ne=M*D+B*F,se=N*D+re*F,B=B*D-M*F,re=re*D-N*F,M=ne,N=se),T&&Math.abs(T)+Math.abs(b)>359.9&&(T=b=0,S=180-S),v=ce(Math.sqrt(M*M+B*B+J*J)),_=ce(Math.sqrt(re*re+lt*lt)),A=Nt(N,re),$=Math.abs(A)>2e-4?A*$t:0,E=Je?1/(Je<0?-Je:Je):0),s.svg&&(C=e.getAttribute("transform"),s.forceCSS=e.setAttribute("transform","")||!co(Qt(e,je)),C&&e.setAttribute("transform",C))),Math.abs($)>90&&Math.abs($)<270&&(r?(v*=-1,$+=b<=0?180:-180,b+=b<=0?180:-180):(_*=-1,$+=$<=0?180:-180)),s.x=((s.xPercent=c&&Math.round(e.offsetWidth/2)===Math.round(-c)?-50:0)?0:c)+l,s.y=((s.yPercent=m&&Math.round(e.offsetHeight/2)===Math.round(-m)?-50:0)?0:m)+l,s.z=p+l,s.scaleX=ce(v),s.scaleY=ce(_),s.rotation=ce(b)+u,s.rotationX=ce(T)+u,s.rotationY=ce(S)+u,s.skewX=$+u,s.skewY=I+u,s.transformPerspective=E+l,(s.zOrigin=parseFloat(d.split(" ")[2])||0)&&(n[Ct]=Hi(d)),s.xOffset=s.yOffset=0,s.force3D=Ke.force3D,s.renderTransform=s.svg?Mb:ao?mo:Pb,s.uncache=0,s},Hi=function(e){return(e=e.split(" "))[0]+" "+e[1]},gs=function(e,t,s){var n=ct(t);return ce(parseFloat(t)+parseFloat(Ft(e,"x",s+"px",n)))+n},Pb=function(e,t){t.z="0px",t.rotationY=t.rotationX="0deg",t.force3D=0,mo(e,t)},Vt="0deg",si="0px",It=") ",mo=function(e,t){var s=t||this,n=s.xPercent,r=s.yPercent,o=s.x,a=s.y,l=s.z,u=s.rotation,d=s.rotationY,c=s.rotationX,m=s.skewX,p=s.skewY,v=s.scaleX,_=s.scaleY,b=s.transformPerspective,T=s.force3D,S=s.target,$=s.zOrigin,I="",E=T==="auto"&&e&&e!==1||T===!0;if($&&(c!==Vt||d!==Vt)){var C=parseFloat(d)*ci,A=Math.sin(C),D=Math.cos(C),F;C=parseFloat(c)*ci,F=Math.cos(C),o=gs(S,o,A*F*-$),a=gs(S,a,-Math.sin(C)*-$),l=gs(S,l,D*F*-$+$)}b!==si&&(I+="perspective("+b+It),(n||r)&&(I+="translate("+n+"%, "+r+"%) "),(E||o!==si||a!==si||l!==si)&&(I+=l!==si||E?"translate3d("+o+", "+a+", "+l+") ":"translate("+o+", "+a+It),u!==Vt&&(I+="rotate("+u+It),d!==Vt&&(I+="rotateY("+d+It),c!==Vt&&(I+="rotateX("+c+It),(m!==Vt||p!==Vt)&&(I+="skew("+m+", "+p+It),(v!==1||_!==1)&&(I+="scale("+v+", "+_+It),S.style[je]=I||"translate(0, 0)"},Mb=function(e,t){var s=t||this,n=s.xPercent,r=s.yPercent,o=s.x,a=s.y,l=s.rotation,u=s.skewX,d=s.skewY,c=s.scaleX,m=s.scaleY,p=s.target,v=s.xOrigin,_=s.yOrigin,b=s.xOffset,T=s.yOffset,S=s.forceCSS,$=parseFloat(o),I=parseFloat(a),E,C,A,D,F;l=parseFloat(l),u=parseFloat(u),d=parseFloat(d),d&&(d=parseFloat(d),u+=d,l+=d),l||u?(l*=ci,u*=ci,E=Math.cos(l)*c,C=Math.sin(l)*c,A=Math.sin(l-u)*-m,D=Math.cos(l-u)*m,u&&(d*=ci,F=Math.tan(u-d),F=Math.sqrt(1+F*F),A*=F,D*=F,d&&(F=Math.tan(d),F=Math.sqrt(1+F*F),E*=F,C*=F)),E=ce(E),C=ce(C),A=ce(A),D=ce(D)):(E=c,D=m,C=A=0),($&&!~(o+"").indexOf("px")||I&&!~(a+"").indexOf("px"))&&($=Ft(p,"x",o,"px"),I=Ft(p,"y",a,"px")),(v||_||b||T)&&($=ce($+v-(v*E+_*A)+b),I=ce(I+_-(v*C+_*D)+T)),(n||r)&&(F=p.getBBox(),$=ce($+n/100*F.width),I=ce(I+r/100*F.height)),F="matrix("+E+","+C+","+A+","+D+","+$+","+I+")",p.setAttribute("transform",F),S&&(p.style[je]=F)},Eb=function(e,t,s,n,r,o){var a=360,l=Me(r),u=parseFloat(r)*(l&&~r.indexOf("rad")?$t:1),d=o?u*o:u-n,c=n+d+"deg",m,p;return l&&(m=r.split("_")[1],m==="short"&&(d%=a,d!==d%(a/2)&&(d+=d<0?a:-a)),m==="cw"&&d<0?d=(d+a*Tn)%a-~~(d/a)*a:m==="ccw"&&d>0&&(d=(d-a*Tn)%a-~~(d/a)*a)),e._pt=p=new Be(e._pt,t,s,n,d,bb),p.e=c,p.u="deg",e._props.push(s),p},Db=function(e,t,s){var n=ri.style,r=s._gsap,o="perspective,force3D,transformOrigin,svgOrigin",a,l,u,d,c,m,p,v;n.cssText=getComputedStyle(s).cssText+";position:absolute;display:block;",n[je]=t,nt.body.appendChild(ri),a=Qi(ri,1);for(l in kt)u=r[l],d=a[l],u!==d&&o.indexOf(l)<0&&(p=ct(u),v=ct(d),c=p!==v?Ft(s,l,u,v):parseFloat(u),m=parseFloat(d),e._pt=new Be(e._pt,r,l,c,m-c,no),e._pt.u=v||0,e._props.push(l));nt.body.removeChild(ri)};Xe("padding,margin,Width,Radius",function(i,e){var t="Top",s="Right",n="Bottom",r="Left",o=(e<3?[t,s,n,r]:[t+r,t+s,n+s,n+r]).map(function(a){return e<2?i+a:"border"+a+i});Ni[e>1?"border"+i:i]=function(a,l,u,d,c){var m,p;if(arguments.length<4)return m=o.map(function(v){return oi(a,v,u)}),p=m.join(" "),p.split(m[0]).length===5?m[0]:p;m=(d+"").split(" "),p={},o.forEach(function(v,_){return p[v]=m[_]=m[_]||m[(_-1)/2|0]}),a.init(l,p,c)}});var go={name:"css",register:Os,targetTest:function(e){return e.style&&e.nodeType},init:function(e,t,s,n,r){var o=this._props,a=e.style,l,u,d,c,m,p,v,_,b,T,S,$,I,E,C;dn||Os();for(v in t)if(v!=="autoRound"&&(u=t[v],!(Fe[v]&&Jr(v,t,s,n,e,r))))if(m=typeof u,p=Ni[v],m==="function"&&(u=u.call(s,n,e,r),m=typeof u),m==="string"&&~u.indexOf("random(")&&(u=Ji(u)),p)p(this,e,v,u,s)&&(C=1);else if(v.substr(0,2)==="--")this.add(a,"setProperty",getComputedStyle(e).getPropertyValue(v)+"",u+"",n,r,0,0,v);else{if(l=oi(e,v),c=parseFloat(l),T=m==="string"&&u.charAt(1)==="="?+(u.charAt(0)+"1"):0,T&&(u=u.substr(2)),d=parseFloat(u),v in bt&&(v==="autoAlpha"&&(c===1&&oi(e,"visibility")==="hidden"&&d&&(c=0),yt(this,a,"visibility",c?"inherit":"hidden",d?"inherit":"hidden",!d)),v!=="scale"&&v!=="transform"&&(v=bt[v],~v.indexOf(",")&&(v=v.split(",")[0]))),S=v in kt,S){if($||(I=e._gsap,I.renderTransform||Qi(e),E=t.smoothOrigin!==!1&&I.smooth,$=this._pt=new Be(this._pt,a,je,0,1,I.renderTransform,I,0,-1),$.dep=1),v==="scale")this._pt=new Be(this._pt,I,"scaleY",I.scaleY,T?T*d:d-I.scaleY),o.push("scaleY",v),v+="X";else if(v==="transformOrigin"){u=Lb(u),I.svg?Hs(e,u,0,E,0,this):(b=parseFloat(u.split(" ")[2]),b!==I.zOrigin&&yt(this,I,"zOrigin",I.zOrigin,b),yt(this,a,v,Hi(l),Hi(u)));continue}else if(v==="svgOrigin"){Hs(e,u,1,E,0,this);continue}else if(v in ho){Eb(this,I,v,c,u,T);continue}else if(v==="smoothOrigin"){yt(this,I,"smooth",I.smooth,u);continue}else if(v==="force3D"){I[v]=u;continue}else if(v==="transform"){Db(this,u,e);continue}}else v in a||(v=Kt(v)||v);if(S||(d||d===0)&&(c||c===0)&&!vb.test(u)&&v in a)_=(l+"").substr((c+"").length),b=(u+"").substr((d+"").length)||(v in Ke.units?Ke.units[v]:_),_!==b&&(c=Ft(e,v,l,b)),this._pt=new Be(this._pt,S?I:a,v,c,T?T*d:d-c,b==="px"&&t.autoRound!==!1&&!S?_b:no),this._pt.u=b||0,_!==b&&(this._pt.b=l,this._pt.r=yb);else if(v in a)Ib.call(this,e,v,l,u);else if(v in e)this.add(e,v,e[v],u,n,r);else{$r(v,u);continue}o.push(v)}C&&io(this)},get:oi,aliases:bt,getSetter:function(e,t,s){return t=bt[t]||t,t in kt&&t!==Ct&&(e._gsap.x||oi(e,"x"))?s&&Sn===s?t==="scale"?xb:Cb:(Sn=s||{})&&(t==="scale"?Sb:Tb):e.style&&!sn(e.style[t])?wb:~t.indexOf("-")?kb:ln(e,t)}};ot.utils.checkPrefix=Kt;(function(i,e,t,s){var n=Xe(i+","+e+","+t,function(r){kt[r]=1});Xe(e,function(r){Ke.units[r]="deg",ho[r]=1}),bt[n[13]]=i+","+e,Xe(s,function(r){var o=r.split(":");bt[o[1]]=n[o[0]]})})("x,y,z,scale,scaleX,scaleY,xPercent,yPercent","rotation,rotationX,rotationY,skewX,skewY","transform,transformOrigin,svgOrigin,force3D,smoothOrigin,transformPerspective","0:translateX,1:translateY,2:translateZ,8:rotate,8:rotationZ,8:rotateZ,9:rotateX,10:rotateY");Xe("x,y,z,top,right,bottom,left,width,height,fontSize,padding,margin,perspective",function(i){Ke.units[i]="px"});ot.registerPlugin(go);var Pe=ot.registerPlugin(go)||ot;Pe.core.Tween;const Bb={props:{top:{default:0},height:{default:60},background:{default:""},theme:{type:String,default:"global"}},data(){return{thisTop:0,thisHeight:60,styles:{slider:{background:""}}}},watch:{top(){this.moveInit()},height(){this.moveInit()},background(){this.stylesInit()}},computed:{$theme(){return q(this.$props).theme.value}},mounted(){this.moveInit(),this.stylesInit()},methods:{moveInit(){let i=this.top-this.thisTop;i>0?this.heightExpandToBottom(i):this.heightExpandToTop(i)},stylesInit(){this.styles.slider.background=this.background},heightExpandToBottom(i){let e=Math.abs(i)+this.height;Pe.to(this.$data,{thisHeight:e,duration:.3,delay:.08,ease:"expo.inOut",onComplete:this.heightFormatToBottom})},heightFormatToBottom(){Pe.to(this.$data,{thisTop:this.top,thisHeight:this.height,duration:.2,ease:"power3.out"})},heightExpandToTop(i){let e=Math.abs(i)+this.height;Pe.to(this.$data,{thisTop:this.top,thisHeight:e,duration:.3,delay:.08,ease:"expo.inOut",onComplete:this.heightFormatToTop})},heightFormatToTop(){Pe.to(this.$data,{thisHeight:this.height,duration:.2,ease:"power3.out"})}}},Rb={class:"fv-listview-slider"};function Fb(i,e,t,s,n,r){return f(),g("div",Rb,[h("span",{class:"s",style:V({"margin-top":`${n.thisTop}px`,height:`${n.thisHeight}px`})},[h("p",{style:V({background:n.styles.slider.background})},null,4)],4)])}const zb=z(Bb,[["render",Fb]]),Ab={name:"FvListView",components:{verticalSlider:zb},emits:["update:modelValue","item-click","chooseItem","choosen-items","selection-change","item-drag-over","item-drag-leave","item-drop","update:sliderTarget","update:sliderIndex"],props:{...T0,modelValue:{default:()=>[]},choosen:{default:()=>[]},multiple:{default:!1},rowHeight:{default:""},headerForeground:{default:""},choosenBackground:{default:""},itemPadding:{default:""},itemBorderRadius:{default:3},revealBorderColor:{default:!1},revealBackgroundColor:{default:!1},showSlider:{default:!1},sliderTarget:{default:()=>{}},sliderIndex:{default:-1}},computed:{$theme(){return q(this.$props).theme.value}},data(){return{FR:{init:!1,el:()=>this.$el,revealHandlerList:[]},thisValue:[],focus:!1,showSelectedBorder:!1,thisSliderTarget:null,thisSliderIndex:this.sliderIndex,currentTop:0,currentHeight:0,timer:{debounce:null}}},watch:{modelValue(i){this.valueInit(),this.setChoosen()},choosen(i){this.setChoosen()},sliderTarget(i){this.thisSliderTarget=i},thisSliderTarget(i){this.$emit("update:sliderTarget",i)},sliderIndex(i){this.thisSliderIndex=i,this.setSliderTarget(i)},thisSliderIndex(i){this.$emit("update:sliderIndex",i)}},computed:{borderLightColor(){return this.revealBorderColor?this.revealBorderColor:this.$theme=="light"?"rgba(121, 119, 117, 0.6)":this.$theme=="dark"||this.$theme=="custom"?"rgba(255, 255, 255, 0.6)":"rgba(121, 119, 117, 0.6)"},backgroundLightColor(){return this.revealBackgroundColor?this.revealBackgroundColor:this.$theme=="light"?"rgba(160, 160, 160, 0.2)":this.$theme=="dark"||this.$theme=="custom"?"rgba(255, 255, 255, 0.1)":"rgba(160, 160, 160, 0.2)"},currentChoosen(){let i=[];for(let e=0;e<this.thisValue.length;e++)this.thisValue[e].choosen&&this.thisValue[e].show&&i.push(this.thisValue[e]);return i},currentChoosenAll(){for(let i=0;i<this.thisValue.length;i++)if(this.thisValue[i].choosen!=!0&&this.thisValue[i].show)return!1;return!0},currentChoosenNum(){let i=0;for(let e=0;e<this.thisValue.length;e++)this.thisValue[e].choosen&&this.thisValue[e].show&&i++;return i},_rowHeight(){return isNaN(this.rowHeight)?this.rowHeight:this.rowHeight+"px"},$theme(){return this.theme=="system"?this.$fvGlobal.state.theme:this.theme}},mounted(){this.valueInit(),this.setChoosen(),this.outSideClickInit(),this.keyDownEventInit(),this.sliderRefreshInit(),window.addEventListener("click",()=>{this.showSelectedBorder=!1}),setTimeout(()=>{this.setSliderTarget()},300)},methods:{valueInit(){let i={name:"",show:!0,choosen:!1,selected:!1,disabled:!1},e=[];for(let t of this.modelValue){let s=JSON.parse(JSON.stringify(i));e.push(Object.assign(s,t))}this.thisValue=e},outSideClickInit(){window.addEventListener("click",i=>{let e=i.target,t=!1;for(;e&&e.tagName&&e.tagName.toLowerCase()!="body";){if(e==this.$el){t=!0;break}e=e.parentNode}t||(this.focus=!1)})},keyDownEventInit(){window.addEventListener("keydown",i=>{this.focus&&(i.keyCode===40?this.move(i,1):i.keyCode===38&&this.move(i,-1),i.keyCode===13&&this.enter(i))})},valueTrigger(i){return typeof i=="function"?i():i},handlerClick(i,e){clearTimeout(this.timer.debounce),this.timer.debounce=setTimeout(()=>{if(this.onChoosen(i,e),this.valueTrigger(e.disabled)||this.valueTrigger(e.type)==="header"||this.valueTrigger(e.type)=="divider")return;let t=this.thisValue.indexOf(e);this.$emit("item-click",{item:e,index:t,event:i})},200)},onChoosen(i,e){if(this.valueTrigger(e.disabled)||this.valueTrigger(e.type)==="header"||this.valueTrigger(e.type)=="divider")return 0;if(this.multiple)this.currentChoosen.find(n=>n.key===e.key)!=null?(e.choosen=!1,this.thisValue[this.thisValue.indexOf(e)]=e):(e.choosen=!0,this.thisValue[this.thisValue.indexOf(e)]=e);else{for(let s of this.currentChoosen)s.choosen=!1,this.thisValue[this.thisValue.indexOf(s)]=s;e.choosen=!0,this.thisValue[this.thisValue.indexOf(e)]=e}this.selectionFormat(e),this.scrollFormat(i.target);let t=this.thisValue.indexOf(e);this.$emit("chooseItem",{item:e,index:t,event:i}),this.setSliderTarget(t),this.$emit("choosen-items",this.currentChoosen)},setChoosen(){for(let i of this.choosen){if(this.valueTrigger(i.disabled)||this.valueTrigger(i.type)==="header"||this.valueTrigger(i.type)=="divider")continue;let e=this.thisValue.find(t=>t.key===i.key);if(e){if(!this.multiple)for(let s of this.currentChoosen)s.choosen=!1,this.thisValue[this.thisValue.indexOf(s)]=s;e.choosen=!0;let t=this.thisValue.indexOf(e);this.thisValue[t]=e,this.setSliderTarget(t)}this.selectionFormat(e)}},move(i,e){i.preventDefault(),this.showSelectedBorder=!0;let t=this.thisValue.find(n=>n.selected===!0);if(!t){if(t=this.thisValue.find(r=>!(this.valueTrigger(r.disabled)||this.valueTrigger(r.type)==="header"||this.valueTrigger(r.type)=="divider")),!t)return;let n=this.thisValue.indexOf(t);this.selectionFormat(t),this.scrollFormat(this.$refs[`list_item_${n}`][0]);return}let s=this.thisValue.indexOf(t);if(e==1){for(let n=s+1;n<this.thisValue.length;n++)if(!this.valueTrigger(this.thisValue[n].disabled)&&!(this.valueTrigger(this.thisValue[n].type)==="header"||this.valueTrigger(this.thisValue[n].type)=="divider")){t=this.thisValue[n],s=n;break}}else if(e==-1){for(let n=s-1;n>=0;n--)if(!this.valueTrigger(this.thisValue[n].disabled)&&!(this.valueTrigger(this.thisValue[n].type)==="header"||this.valueTrigger(this.thisValue[n].type)=="divider")){t=this.thisValue[n],s=n;break}}this.selectionFormat(t),this.scrollFormat(this.$refs[`list_item_${s}`][0])},enter(i){let e=this.thisValue.find(s=>s.selected===!0);if(!e)return;if(this.multiple)this.currentChoosen.find(n=>n.key===e.key)!=null?(e.choosen=!1,this.thisValue[this.thisValue.indexOf(e)]=e):(e.choosen=!0,this.thisValue[this.thisValue.indexOf(e)]=e);else{for(let s of this.currentChoosen)s.choosen=!1,this.thisValue[this.thisValue.indexOf(s)]=s;e.choosen=!0,this.thisValue[this.thisValue.indexOf(e)]=e}let t=this.thisValue.indexOf(e);this.$emit("chooseItem",{item:e,index:t,event:i}),this.setSliderTarget(t),this.$emit("choosen-items",this.currentChoosen)},scrollFormat(i){let e=i.getBoundingClientRect(),t=this.$refs.container.getBoundingClientRect();if(e.top<t.top){let s=t.top-e.top;this.$refs.container.scrollTop-=s}if(e.bottom>t.bottom){let s=t.bottom-e.bottom;this.$refs.container.scrollTop-=s}},selectionFormat(i){this.thisValue.forEach((e,t)=>{e.key===i.key&&e.name===i.name?(e.selected=!0,this.thisValue[t]=e,this.$emit("selection-change",e)):(e.selected=!1,this.thisValue[t]=e)})},setSliderTarget(i=null){if(!i){for(let e=0;e<this.thisValue.length;e++)if(this.thisValue[e].choosen){i=e;break}}this.$refs[`list_item_${i}`]&&(this.thisSliderTarget=this.$refs[`list_item_${i}`][0],this.thisSliderIndex=i)},sliderRefreshInit(){this.timer.slider=setInterval(()=>{if(this.thisSliderTarget){let i=this.thisSliderTarget,e=this.$el.getBoundingClientRect().top,t=i.getBoundingClientRect().top;this.currentTop=t-e}else this.currentTop=0;if(this.thisSliderTarget){let i=this.thisSliderTarget;this.currentHeight=i.clientHeight}else this.currentHeight=0},30)},dragOver(i,e){i.preventDefault(),i.stopPropagation(),!this.valueTrigger(e.disabled)&&this.$emit("item-drag-over",{drop:e,root:this.thisValue})},dragLeave(i,e){i.preventDefault(),i.stopPropagation(),this.$emit("item-drag-leave",{drop:e,root:this.thisValue})},dropItem(i,e){i.preventDefault(),i.stopPropagation(),!this.valueTrigger(e.disabled)&&this.$emit("item-drop",{drop:e,root:this.thisValue})},inspectItemAPI(i){let e=this.thisValue.find(n=>this.valueTrigger(n.name)===this.valueTrigger(i.name)&&this.valueTrigger(n.type)===this.valueTrigger(i.type)&&n.key===i.key),t=this.thisValue.indexOf(e);if(t<0)return 0;let s=this.$refs.container.querySelectorAll(".list-view-item");this.onChoosen({target:s[t]},i)}},beforeUnmount(){this.$RevealDirect.destroy(this.FR)}},Ob={class:"list-view-header"},Nb={class:"list-view-container",ref:"container"},Hb=["onClick","onTouchend","onDragover","onDragleave","onDrop"],Wb={class:"list-view-footer"};function Gb(i,e,t,s,n,r){const o=K("fv-reveal-container"),a=K("vertical-slider");return f(),g("div",{class:k(["fv-ListView",[r.$theme]]),onClick:e[0]||(e[0]=l=>n.focus=!0)},[h("div",Ob,[w(i.$slots,"header")]),h("div",Nb,[(f(!0),g(Y,null,Z(n.thisValue,(l,u)=>P((f(),g("span",{class:k([{choose:r.valueTrigger(l.choosen),header:r.valueTrigger(l.type)=="header",hr:r.valueTrigger(l.type)=="divider",normal:r.valueTrigger(l.type)=="default"||r.valueTrigger(l.type)==null,disabled:r.valueTrigger(l.disabled),selected:l.selected&&n.showSelectedBorder},"list-view-item"]),key:u,style:V({height:r._rowHeight,background:r.valueTrigger(l.choosen)?t.choosenBackground:"",borderRadius:t.itemBorderRadius+"px"}),ref_for:!0,ref:`list_item_${u}`,onClick:d=>r.handlerClick(d,l),onTouchend:d=>r.handlerClick(d,l),onDragover:d=>r.dragOver(i.event,l),onDragleave:d=>r.dragLeave(i.event,l),onDrop:d=>r.dropItem(i.event,l)},[(r.valueTrigger(l.type)=="default"||r.valueTrigger(l.type)==null)&&!r.valueTrigger(l.disabled)?(f(),G(o,{key:0,revealContainer:n.FR,parent:()=>i.$refs[`list_item_${u}`][0],class:"fv-listview-reveal-container",backgroundColor:r.backgroundLightColor,borderColor:r.borderLightColor,borderGradientSize:35,borderWidth:1,borderRadius:t.itemBorderRadius},null,8,["revealContainer","parent","backgroundColor","borderColor","borderRadius"])):O("",!0),h("div",{class:"item-content",style:V({padding:t.itemPadding})},[w(i.$slots,"listItem",{item:l,index:u,valueTrigger:r.valueTrigger},()=>[h("p",{style:V({color:r.valueTrigger(l.type)=="header"?t.headerForeground:""})},H(r.valueTrigger(l.name)),5)])],4)],46,Hb)),[[R,r.valueTrigger(l.show)!==!1]])),128))],512),h("div",Wb,[w(i.$slots,"footer")]),t.showSlider?(f(),G(a,{key:0,top:n.currentTop,height:n.currentHeight,background:t.headerForeground},null,8,["top","height","background"])):O("",!0)],2)}const Ub=z(Ab,[["render",Gb]]),Yb=ie(Ub),qb={...te},Xb={name:"FvMenuFlyoutChildrenContainer",emits:["choose-item"],props:{modelValue:{default:()=>[]},options:{default:()=>[]},background:{default:""},choosenBackground:{default:""},choosenSliderBackground:{default:""},titleForeground:{default:""},pivotPlaceholder:{default:"Please Choose"},theme:{type:String,default:"global"}},data(){return{thisValue:this.modelValue,pivotValue:null}},watch:{modelValue(i){this.thisValue=i},pivotItems(i){i.length>0&&(this.pivotValue=i[i.length-1])}},computed:{pivotItems(){let i=[];for(let e of this.thisValue)i.push({key:e.key,name:e.text,ori:e,width:this.pivotTextWidth(e.text)});return(i.length==0||i[i.length-1].ori.children)&&i.push({key:"$fv-menu-flyout-pivot-placeholder",name:this.pivotPlaceholder,ori:{},width:this.pivotTextWidth(this.pivotPlaceholder)}),i},pivotTextWidth(){return i=>i.length<5?60:i.length>20?200:10*i.length},computedOptions(){if(!this.pivotValue)return this.options;let i=this.pivotItems.findIndex(e=>e.key==this.pivotValue.key);return i>0?this.pivotItems[i-1].ori.children?this.pivotItems[i-1].ori.children:[]:this.options},isChoosen(){return i=>this.pivotValue?i.key===this.pivotValue.key&&i.text===this.pivotValue.name:!1},$theme(){return q(this.$props).theme.value}},mounted(){},methods:{valueTrigger(i){return typeof i=="function"?i():i},Choose(i,e){if(this.valueTrigger(e.disabled)||this.valueTrigger(e.type)=="header"||this.valueTrigger(e.type)=="divider")return 0;let t=i.target;for(;t.getAttribute("class").indexOf("fv-menu-flyout-item")<0;)t=t.parentNode;this.$refs.co_items.scrollTop=t.offsetTop,this.$emit("choose-item",{item:e,index:this.thisValue.findIndex(s=>s.key==this.pivotValue.key&&s.text==this.pivotValue.name)})}}},Kb={class:"menu-flyout-list-container"},jb=["onClick","title"],Jb={class:"ms-Icon ms-Icon--ChevronRight after-expand"};function Qb(i,e,t,s,n,r){const o=K("fv-pivot");return f(),G(fe,{name:"fv-menu-flyout"},{default:x(()=>[h("div",Kb,[L(o,{modelValue:n.pivotValue,"onUpdate:modelValue":e[0]||(e[0]=a=>n.pivotValue=a),theme:r.$theme,items:r.pivotItems,fontSize:12,sliderBackground:t.choosenSliderBackground,style:{width:"100%",height:"50px","overflow-x":"auto"}},null,8,["modelValue","theme","items","sliderBackground"]),L(qi,{name:"fv-menu-flyout-item",tag:"div",class:"menu-flyout-item-container",style:V({background:t.background,"overflow-y":"auto","overflow-x":"visible"}),ref:"co_items"},{default:x(()=>[(f(!0),g(Y,null,Z(r.computedOptions,(a,l)=>(f(),g("div",{class:k(["fv-menu-flyout-item",{hr:r.valueTrigger(a.type)=="divider",normal:(r.valueTrigger(a.type)=="default"||r.valueTrigger(a.type)==null)&&!r.valueTrigger(a.disabled),disabled:r.valueTrigger(a.disabled),choose:r.isChoosen(a),title:r.valueTrigger(a.type)=="header"}]),style:V({background:r.isChoosen(a)?t.choosenBackground:"",color:r.valueTrigger(a.type)==="header"?t.titleForeground:""}),onClick:u=>r.Choose(u,a),key:`options: ${a.key?a.key:l}`,title:r.valueTrigger(a.text)},[w(i.$slots,"default",{item:a,choosenSliderBackground:t.choosenSliderBackground},()=>[h("i",{class:"before-choosen",style:V({background:t.choosenSliderBackground})},null,4),ue(" "+H(r.valueTrigger(a.type)!=="divider"?r.valueTrigger(a.text):"")+" ",1),P(h("i",Jb,null,512),[[R,a.children]])])],14,jb))),128))]),_:3},8,["style"])])]),_:3})}const Zb=z(Xb,[["render",Qb]]),e1={name:"FvMenuFlyout",emits:["update:modelValue","choose-item"],components:{menuFlyoutChildrenContainer:Zb},props:{...qb,modelValue:{default:()=>[]},options:{default:()=>[]},borderWidth:{default:2},placeholder:{default:"menuFlyout"},borderRadius:{default:"3"},background:{default:""},choosenBackground:{default:""},choosenSliderBackground:{default:""},inputForeground:{default:""},inputBackground:{default:""},titleForeground:{default:""},dropDownIcon:{default:"ChevronDown"},dropDownIconForeground:{default:""},pivotPlaceholder:{default:"Please Choose"},revealBorderColor:{default:!1},revealBackgroundColor:{default:!1},disabled:{default:!1}},data(){return{thisValue:this.modelValue,status:!1}},watch:{modelValue(i){this.thisValue=i},thisValue(i){this.$emit("update:modelValue",i)}},computed:{isDisabled(){return this.options.length==0||this.disabled.toString()=="true"||this.disabled=="disabled"||this.disabled===""},borderLightColor(){return this.revealBorderColor?this.revealBorderColor:this.$theme=="light"?"rgba(121, 119, 117, 0.6)":this.$theme=="dark"||this.$theme=="custom"?"rgba(255, 255, 255, 0.6)":"rgba(121, 119, 117, 0.6)"},backgroundLightColor(){return this.revealBackgroundColor?this.revealBackgroundColor:this.$theme=="light"?"rgba(121, 119, 117, 0.3)":this.$theme=="dark"||this.$theme=="custom"?"rgba(255, 255, 255, 0.3)":"rgba(121, 119, 117, 0.3)"},computedValue(){let i=[];for(let e of this.thisValue)i.push(e.text);return i.join(" / ")},$theme(){return q(this.$props).theme.value}},mounted(){this.outSideClickInit()},methods:{outSideClickInit(){window.addEventListener("click",i=>{let e=i.target,t=!1;for(;e&&e.tagName&&e.tagName.toLowerCase()!="body";){if(e==this.$el){t=!0;break}e=e.parentNode}t||(this.status=!1)}),window.addEventListener("touchend",i=>{let e=i.target,t=!1;for(;e&&e.tagName&&e.tagName.toLowerCase()!="body";){if(e==this.$el){t=!0;break}e=e.parentNode}t||(this.status=!1)})},valueTrigger(i){return typeof i=="function"?i():i},Choose(i){let{item:e,index:t}=i;t==-1?this.thisValue.push(e):(this.thisValue.splice(t+1),this.thisValue[t]=e),e.children||(this.status=!1),this.$emit("choose-item",this.thisValue)}}},t1=["placeholder","value"],i1={class:"ms-Icon ms-Icon--ChevronRight after-expand"};function s1(i,e,t,s,n,r){const o=K("fv-reveal-container"),a=K("menu-flyout-children-container");return f(),g("div",{class:k(["fv-MenuFlyout",[r.$theme,{disabled:r.isDisabled}]]),style:V({background:t.background,padding:t.borderWidth,"border-radius":`${t.borderRadius}px`,"z-index":n.status?3:"",overflow:"visible"})},[h("div",{class:"menu-flyout-container",onClick:e[0]||(e[0]=l=>n.status=r.isDisabled?!1:!n.status),style:V({background:t.inputBackground,"border-radius":`${t.borderRadius}px`})},[L(o,{parent:()=>i.$el,class:"fv-menu-flyout-reveal-container",backgroundColor:r.backgroundLightColor,borderColor:r.borderLightColor,backgroundGradientSize:120,borderGradientSize:80,borderWidth:t.borderWidth,borderRadius:t.borderRadius,disabled:r.isDisabled},null,8,["parent","backgroundColor","borderColor","borderWidth","borderRadius","disabled"]),h("input",{class:"input",placeholder:t.placeholder,readonly:"",value:r.computedValue,style:V({color:t.inputForeground,"border-radius":`${t.borderRadius}px`})},null,12,t1),h("i",{class:k(["ms-Icon right-icon",[`ms-Icon--${t.dropDownIcon}`]]),style:V({color:t.dropDownIconForeground})},null,6)],4),P(L(a,{modelValue:n.thisValue,options:t.options,background:t.background,choosenBackground:t.choosenBackground,titleForeground:t.titleForeground,theme:r.$theme,onChooseItem:r.Choose},{item:x(l=>[w(i.$slots,"default",{item:l.item,choosenSliderBackground:l.choosenSliderBackground},()=>[h("i",{class:"before-choosen",style:V({background:l.choosenSliderBackground})},null,4),ue(" "+H(r.valueTrigger(l.item.type)!=="divider"?r.valueTrigger(l.item.text):"")+" ",1),P(h("i",i1,null,512),[[R,l.item.children]])])]),_:3},8,["modelValue","options","background","choosenBackground","titleForeground","theme","onChooseItem"]),[[R,n.status]])],6)}const n1=z(e1,[["render",s1]]),r1=ie(n1),o1={...te},a1={name:"FvMessageBar",emits:["close"],props:{...o1,status:{default:"default"},showControl:{default:!1},showClose:{default:!0},mode:{default:"relative"},destroy:{default:()=>{}},autoClose:{default:3e3}},data(){return{iconList:{default:{icon:"Info2",iconColor:"normal"},warning:{icon:"Info2",iconColor:"warning"},correct:{icon:"CheckMark",iconColor:"correct"},blocked:{icon:"Remove   ",iconColor:"error"},error:{icon:"ErrorBadge12",iconColor:"error"}},timer:null}},watch:{autoClose(){this.autoDestroyInit()}},computed:{$theme(){return q(this.$props).theme.value}},mounted(){this.autoDestroyInit(),this.enter()},methods:{enter(){this.$el.style.top="-100%",Pe.to(this.$el,{top:0,duration:.3})},autoDestroyInit(){this.mode!=="relative"&&this.autoClose>0&&(clearTimeout(this.timer),this.timer=setTimeout(()=>{this.destroySelf()},this.autoClose))},destroySelf(){this.mode=="relative"?this.$emit("close"):Pe.to(this.$el,{opacity:0,duration:.3,onComplete:()=>{this.$emit("close"),this.destroy()}})}}},l1={class:"msg-bar-block"},u1={class:"msg-content-block"},d1={class:"control-block"};function h1(i,e,t,s,n,r){const o=K("fv-button");return f(),g("div",{class:k(["fv-MessageBar",[r.$theme,n.iconList[t.status].iconColor,{relative:t.mode=="relative"}]])},[h("span",l1,[h("i",{class:k(["ms-Icon icon-block",[`ms-Icon--${n.iconList[t.status].icon}`,n.iconList[t.status].iconColor]])},null,2),h("span",u1,[w(i.$slots,"msg",{theme:r.$theme},()=>[ue(" Message Bar. ")])]),P(h("i",{class:"ms-Icon ms-Icon--Cancel close-block",onClick:e[0]||(e[0]=(...a)=>r.destroySelf&&r.destroySelf(...a))},null,512),[[R,t.showClose]])]),P(h("span",d1,[w(i.$slots,"control",{theme:r.$theme,cancel:r.destroySelf},()=>[L(o,null,{default:x(()=>[ue("Yes")]),_:1})])],512),[[R,t.showControl]])],2)}const po=z(a1,[["render",h1]]);function c1(i,e,t){let s=r=>{const o=Di(po,{status:e.status,showControl:e.showControl,showClose:e.autoClose,mode:"fixed",autoClose:e.autoClose,destroy:()=>{Ht(null,r),e.once||r.remove()},theme:e.theme},{msg:i,control:e.control});return o.appContext=t,o},n=document.createElement("div");if(e.once){const r="__fv-global-message-bar__";n=document.getElementById(r),n||(n=document.createElement("div"),n.id=r,document.body.appendChild(n))}else document.body.appendChild(n);Ht(s(n),n)}function f1(i,e){if(i.fvSwiftWarning)return 0;let t={color:"rgba(200, 50, 59, 1)",replaceTitle:"SwiftWarning"};t=Object.assign(t,e),t.oriContent=i.innerHTML,t.oriClass=i.getAttribute("class"),t.oriStyle=i.getAttribute("style"),t.oriClass==null&&(t.oriClass=""),t.oriStyle==null&&(t.oriStyle=""),i.fvSwiftWarning=!0,i.innerHTML=t.replaceTitle??"SwiftWarning",i.setAttribute("class",t.oriClass+" fv-swift-warning"),i.setAttribute("style",t.oriStyle+` color: ${t.color};`),setTimeout(()=>{i.innerHTML=t.oriContent??"",i.setAttribute("class",t.oriClass??""),i.setAttribute("style",t.oriStyle??""),i.fvSwiftWarning=!1},3e3)}const m1={install(i){i.config.globalProperties.$barWarning=(e,t)=>{c1(e,{...t,status:"warning"},i._context)},i.config.globalProperties.$swiftWarning=f1}},g1=gr(po,[m1]),p1={...te},v1={name:"FvNavigationPanel",emits:["back","setting-click","expand-change","expand-click","update:expand"],setup(){const i=ei();return i.initRevealInstances(),{uR:i}},props:{...p1,title:{default:"NavigationPanel"},expand:{default:!0},expandMode:{default:"relative"},expandWidth:{default:350},expandDisplay:{default:1024},compactWidth:{default:50},flyoutDisplay:{default:0},fullSizeDisplay:{default:800},mobileDisplay:{default:0},showBack:{default:!0},showNav:{default:!0},showSearch:{default:!0},settingTitle:{default:"Settings"},showSetting:{default:!0},background:{default:""}},data(){return{FR:null,thisExpand:this.expand,thisExpandBackup:this.expand,screenWidth:window.innerWidth,timer:{widthTimer:{}}}},watch:{expand(i){this.thisExpand=i},thisExpand(i){this.$emit("update:expand",i),this.$emit("expand-change",i)},screenWidth(i){this.expandDisplay<this.screenWidth?this.isFlyout?this.thisExpand=!1:this.thisExpand=this.thisExpandBackup:this.thisExpand=!1}},computed:{panelWidth(){return this.isFlyout?`${this.compactWidth}px`:this.thisExpand?this.screenWidth<=this.fullSizeDisplay?"100%":`${this.expandWidth}px`:`${this.compactWidth}px`},navWidth(){let i=this.screenWidth<=this.fullSizeDisplay?"100%":`${this.expandWidth}px`;return this.thisExpand?i:`${this.compactWidth}px`},isFlyout(){return this.expandMode=="flyout"||this.flyoutDisplay>this.screenWidth},isMobile(){return this.mobileDisplay>this.screenWidth},borderLightColor(){return()=>this.$theme=="light"?"rgba(121, 119, 117, 0.6)":this.$theme=="dark"||this.$theme=="custom"?"rgba(255, 255, 255, 0.6)":"rgba(121, 119, 117, 0.6)"},backgroundLightColor(){return()=>this.$theme=="light"?"rgba(121, 119, 117, 0.3)":this.$theme=="dark"||this.$theme=="custom"?"rgba(255, 255, 255, 0.3)":"rgba(121, 119, 117, 0.3)"},$theme(){return q(this.$props).theme.value}},mounted(){this.screenWidthInit(),this.outSideClickInit()},methods:{FRInit(){this.FR=this.uR.revealDirectJs.apply(this.$el,{selector:`.fv-${this.$theme}-NavigationPanel .panel-container .fv-nav-default-item`,borderGradientSize:60,borderLightColor:this.borderLightColor,backgroundLightColor:this.backgroundLightColor})},screenWidthInit(){this.timer.widthTimer=setInterval(()=>{this.screenWidth=window.innerWidth},30)},outSideClickInit(){window.addEventListener("click",i=>{let e=i.target,t=!1;for(;e&&e.tagName&&e.tagName.toLowerCase()!="body";){if(e==this.$el){t=!0;break}e=e.parentNode}t||(this.isFlyout||this.isMobile)&&(this.thisExpand=!1)})},expandClick(){this.thisExpandBackup=!this.thisExpand,this.thisExpand=!this.thisExpand,this.$emit("expand-click",this.thisExpand)}},beforeUnmount(){clearInterval(this.timer.widthTimer),this.uR.revealDirectJs.destroy(this.FR)}},b1=h("i",{class:"ms-Icon ms-Icon--Back icon"},null,-1),y1=h("i",{class:"ms-Icon ms-Icon--GlobalNavButton icon"},null,-1),_1=h("i",{class:"ms-Icon ms-Icon--Back icon"},null,-1),w1={class:"name title"},k1=h("i",{class:"ms-Icon ms-Icon--GlobalNavButton icon"},null,-1),C1={class:"search"},x1={class:"template"},S1=h("i",{class:"ms-Icon ms-Icon--Settings icon"},null,-1),T1={class:"name"};function V1(i,e,t,s,n,r){const o=K("fv-animated-icon"),a=K("fv-search-box");return f(),g("div",{class:k(["fv-NavigationPanel",[r.$theme,{compact:!n.thisExpand},{flyout:r.isFlyout},{mobile:r.isMobile}]]),style:V({position:this.screenWidth<=this.fullSizeDisplay&&n.thisExpand?"static":"",width:r.panelWidth})},[h("div",{class:"panel-container-mobile",style:V({background:n.thisExpand?"":t.background})},[P(L(o,{modelValue:"backScale",class:"fv-nav-default-item",hideContent:!0,style:V({width:`${t.compactWidth}px`}),onClick:e[0]||(e[0]=l=>i.$emit("back",l))},{default:x(()=>[b1]),_:1},8,["style"]),[[R,t.showBack]]),P(L(o,{modelValue:"scaleXDown",class:"fv-nav-default-item",hideContent:!0,style:V({width:`${t.compactWidth}px`}),onClick:r.expandClick},{default:x(()=>[y1]),_:1},8,["style","onClick"]),[[R,t.showNav]])],4),h("div",{class:"panel-container",style:V({width:r.navWidth,background:t.background})},[P(L(o,{modelValue:"backScale",class:"fv-nav-default-item control",hideContent:!n.thisExpand,style:{width:"calc(100% - 10px)"},onClick:e[1]||(e[1]=l=>i.$emit("back",l))},{content:x(()=>[h("p",w1,H(t.title),1)]),default:x(()=>[_1]),_:1},8,["hideContent"]),[[R,t.showBack]]),P(L(o,{modelValue:"scaleXDown",class:"fv-nav-default-item control",hideContent:!n.thisExpand,style:{width:"calc(100% - 10px)"},onClick:r.expandClick},{content:x(()=>[P(h("p",{class:"name title"},H(t.title),513),[[R,!t.showBack]])]),default:x(()=>[k1]),_:1},8,["hideContent","onClick"]),[[R,t.showNav]]),P(h("span",C1,[w(i.$slots,"searchBlock",{},()=>[L(a,{icon:"Search",placeholder:"Search",class:"nav-search",theme:i.theme,revealBorder:!0,borderWidth:"2",borderRadius:"6",isBoxShadow:!0,style:{width:"95%"}},null,8,["theme"])])],512),[[R,t.showSearch&&n.thisExpand]]),h("div",x1,[w(i.$slots,"panel")]),P(L(o,{modelValue:"bounceRotate",ref:"setting",class:"fv-nav-default-item",hideContent:!n.thisExpand,style:{width:"calc(100% - 10px)"},onClick:e[2]||(e[2]=l=>i.$emit("setting-click",{event:l}))},{content:x(()=>[h("p",T1,H(t.settingTitle),1)]),default:x(()=>[S1]),_:1},8,["hideContent"]),[[R,t.showSetting]])],4)],6)}const I1=z(v1,[["render",V1]]),L1=ie(I1),$1={...te},P1={name:"FvNavigationView",props:{...$1,emits:["update:modelValue","expand-change","setting-click","item-click","back","expand-click","update:expand"],modelValue:{default:()=>({})},options:{default:()=>[]},title:{default:"NavigationView"},expand:{default:!0},expandMode:{default:"relative"},expandWidth:{default:350},expandDisplay:{default:1024},compactWidth:{default:46},flyoutDisplay:{default:0},fullSizeDisplay:{default:800},mobileDisplay:{default:0},showBack:{default:!0},showNav:{default:!0},showSearch:{default:!0},settingTitle:{default:"Settings"},showSetting:{default:!0},searchPlaceholder:{default:"Search"},foreground:{default:""},background:{default:""}},data(){return{thisValue:{},thisExpand:this.expand,currentTarget:{},currentTop:0,currentHeight:0,timer:{slider:{}}}},watch:{modelValue(i,e){this.valueInit()},thisValue(i,e){i.name===e.name&&i.key===e.key||(this.$nextTick(()=>{this.onChooseSearch(i)}),this.$emit("update:modelValue",i))},expand(i){this.thisExpand=i},thisExpand(i){this.$emit("update:expand",i)}},computed:{$theme(){return q(this.$props).theme.value}},mounted(){this.valueInit()},methods:{valueInit(){if(this.modelValue.type==="setting")return this.thisValue=this.modelValue,0;let i=this.options.find(e=>e.name===this.modelValue.name&&e.key===this.modelValue.key);i!==void 0?this.thisValue=i:this.thisValue=this.options.find(e=>e.type!=="header"&&e.type!=="divider")},itemClick(i){this.thisValue=i.item},settingClick(i){this.currentTarget=this.$refs.setting.$el,this.thisValue={key:">setting",name:">setting",type:"setting"},this.$emit("setting-click",i)},expandChange(i){this.$emit("expand-change",i)},onChooseSearch(i){if(i.type==="setting")return this.currentTarget=this.$refs.setting.$el,this.thisValue={key:">setting",name:">setting",type:"setting"},0;let e=this.options.find(s=>s.name===i.name&&s.key===i.key),t=this.options.indexOf(e);if(t<0)return 0;this.currentTarget=this.$refs.listView.$refs[`list_item_${t}`][0],this.thisValue=e}},beforeUnmount(){clearInterval(this.timer)}},M1=h("i",{class:"ms-Icon ms-Icon--Settings icon"},null,-1),E1={class:"name"};function D1(i,e,t,s,n,r){const o=K("fv-search-box"),a=K("fv-animated-icon"),l=K("fv-list-view"),u=K("fv-NavigationPanel");return f(),g("div",{class:k(["fv-NavigationView",[r.$theme,{compact:!n.thisExpand}]])},[L(u,{title:t.title,expand:n.thisExpand,"onUpdate:expand":e[3]||(e[3]=d=>n.thisExpand=d),expandMode:t.expandMode,expandWidth:t.expandWidth,expandDisplay:t.expandDisplay,compactWidth:t.compactWidth,flyoutDisplay:t.flyoutDisplay,fullSizeDisplay:t.fullSizeDisplay,mobileDisplay:t.mobileDisplay,showBack:t.showBack,showNav:t.showNav,showSearch:t.showSearch,settingTitle:t.settingTitle,showSetting:!1,background:t.background,theme:i.theme,ref:"panel",onBack:e[4]||(e[4]=d=>i.$emit("back",d)),onExpandClick:e[5]||(e[5]=d=>i.$emit("expand-click",d)),onExpandChange:r.expandChange,onSettingClick:r.settingClick},{searchBlock:x(()=>[L(o,{options:t.options,icon:"Search",placeholder:t.searchPlaceholder,theme:i.theme,class:"nav-search",revealBorder:!0,borderRadius:"3",isBoxShadow:!0,style:{width:"95%"},onChooseResult:r.onChooseSearch},null,8,["options","placeholder","theme","onChooseResult"])]),panel:x(()=>[L(l,{modelValue:t.options,class:"navigation-list",ref:"listView",theme:i.theme,headerForeground:t.foreground,choosenBackground:"transparent",sliderTarget:n.currentTarget,"onUpdate:sliderTarget":e[1]||(e[1]=d=>n.currentTarget=d),showSlider:!0,onChooseItem:r.itemClick,onItemClick:e[2]||(e[2]=d=>i.$emit("item-click",d.item))},{listItem:x(d=>[w(i.$slots,"listItem",{item:d.item,index:d.index,valueTrigger:d.valueTrigger},()=>[P(h("i",{class:k(["ms-Icon icon",[`ms-Icon--${d.valueTrigger(d.item.icon)}`]])},null,2),[[R,d.valueTrigger(d.item.icon)!==void 0]]),h("p",{class:"name",style:V({color:d.valueTrigger(d.item.type)=="header"?t.foreground:""})},H(d.valueTrigger(d.item.name)),5)])]),footer:x(()=>[P(L(a,{ref:"setting",modelValue:"bounceRotate",class:"fv-nav-default-item",hideContent:!n.thisExpand,style:{width:"calc(100% - 10px)"},onClick:e[0]||(e[0]=d=>r.settingClick({event:d}))},{content:x(()=>[h("p",E1,H(t.settingTitle),1)]),default:x(()=>[M1]),_:1},8,["hideContent"]),[[R,t.showSetting]])]),_:3},8,["modelValue","theme","headerForeground","sliderTarget","onChooseItem"])]),_:3},8,["title","expand","expandMode","expandWidth","expandDisplay","compactWidth","flyoutDisplay","fullSizeDisplay","mobileDisplay","showBack","showNav","showSearch","settingTitle","background","theme","onExpandChange","onSettingClick"])],2)}const B1=z(P1,[["render",D1]]),R1=ie(B1),F1={...te},z1={name:"FvPagination",props:{...F1,emits:["update:modelValue","next-click","prev-click","page-click"],modelValue:{default:1},foreground:{default:"rgba(0, 90, 158, 1)"},background:{default:"transparent"},total:{default:10},maxVisual:{default:7},small:{default:!1},shadow:{default:!1},disabled:{default:!1}},data(){return{thisValue:this.modelValue,itemList:[]}},watch:{modelValue(i){this.thisValue=i},thisValue(i){this.$emit("update:modelValue",i),this.pageItem()},total(i){i<=0?this.itemList=[]:this.pageItem()}},computed:{isDisabled(){return this.disabled.toString()=="true"||this.disabled=="disabled"||this.disabled===""},$theme(){return q(this.$props).theme.value}},mounted(){this.total<=0?this.itemList=[]:this.pageItem()},methods:{pageItem(){let i=[],e=(this.thisValue-2)*2+3<=this.maxVisual,t=(this.total-this.thisValue-1)*2+3<=this.maxVisual;this.total<=this.maxVisual&&(e=t=!0);let s=this.thisValue==1||this.thisValue==this.total?this.maxVisual-2:this.maxVisual-3;for(let r=0;r<this.total;r++)i.push({num:r+1,index:r,show:!1});i[0].show=!0,i[i.length-1].show=!0;let n=i.find(r=>r.num===this.thisValue).index;i[n].show=!0;for(let r=1;n+r<i.length||n-r>0;r++)n-r>0&&s>0&&(i[n-r].show=!0,s--),n+r<i.length-1&&s>0&&(i[n+r].show=!0,s--);e||i.splice(1,0,{num:-1,index:-1,show:!0}),t||i.splice(this.total-1,0,{num:-2,index:-2,show:!0}),this.itemList=i},next(){this.thisValue++,this.$emit("next-click",this.thisValue)},prev(){this.thisValue--,this.$emit("prev-click",this.thisValue)},handleClick(i){i.index>=0?this.thisValue=i.num:i.index==-1?this.thisValue=this.thisValue-this.maxVisual+2>=1?this.thisValue-this.maxVisual+2:1:i.index==-2&&(this.thisValue=this.thisValue+this.maxVisual-2<=this.total?this.thisValue+this.maxVisual-2:this.total),this.$emit("page-click",this.thisValue)}}},A1={class:"fv-pagination-container"},O1=h("i",{class:"ms-Icon ms-Icon--ChevronLeft"},null,-1),N1=h("i",{class:"ms-Icon ms-Icon--ChevronRight"},null,-1);function H1(i,e,t,s,n,r){const o=K("fv-button");return f(),g("div",{class:k(["fv-Pagination",[r.$theme]])},[h("div",A1,[L(o,{disabled:n.thisValue==1||r.isDisabled,class:k([{small:t.small},"page-btn"]),theme:i.theme,background:t.background,"is-box-shadow":t.shadow,borderRadius:"3",onClick:r.prev},{default:x(()=>[O1]),_:1},8,["disabled","class","theme","background","is-box-shadow","onClick"]),(f(!0),g(Y,null,Z(n.itemList,(a,l)=>(f(),g(Y,null,[a.show?(f(),G(o,{key:l,class:k([{small:t.small},"page-btn"]),theme:i.theme,disabled:r.isDisabled,background:t.background,foreground:n.thisValue==a.num?t.foreground:"","is-box-shadow":t.shadow,borderRadius:"3",fontWeight:"bold",onClick:u=>r.handleClick(a)},{default:x(()=>[h("p",{class:k([{"ms-Icon ms-Icon--More":a.num<0}])},H(a.num>=0?a.num:""),3)]),_:2},1032,["class","theme","disabled","background","foreground","is-box-shadow","onClick"])):O("",!0)],64))),256)),L(o,{disabled:n.thisValue==t.total||r.isDisabled,class:k([{small:t.small,shadow:t.shadow},"page-btn"]),theme:i.theme,background:t.background,borderRadius:"3",onClick:r.next},{default:x(()=>[N1]),_:1},8,["disabled","class","theme","background","onClick"])])],2)}const W1=z(z1,[["render",H1]]),G1=ie(W1),U1={...te},Y1={name:"FvPanel",emits:["update:modelValue"],props:{...U1,modelValue:{default:!0},title:{default:"Sample Panel"},titleSize:{default:20},titleWeight:{default:600},titleColor:{default:""},width:{default:"340"},height:{default:"100%"},background:{default:""},isNearSide:{default:!1},isCentralSide:{default:!1},isLightDismiss:{default:!1},showTitleBar:{default:!0},isFooter:{default:!1},isAcrylic:{default:!1}},data(){return{thisValue:this.modelValue,screenWidth:window.innerWidth,timer:{widthTimer:{}}}},watch:{modelValue(i){this.thisValue=i},thisValue(i){this.$emit("update:modelValue",i)}},computed:{finalWidth(){return isNaN(this.width)?this.width:this.width>this.screenWidth?`${this.screenWidth}px`:`${this.width}px`},finalHeight(){return isNaN(this.height)?this.height:this.height>this.screenHeight?`${this.screenHeight}px`:`${this.height}px`},transitionInName(){return this.isCentralSide?this.thisValue?"fv-panel-scale-up-to-up":"fv-panel-scale-down-to-down":this.isNearSide?this.thisValue?"move-left-to-right":"move-right-to-left":this.thisValue?"move-right-to-left":"move-left-to-right"},$theme(){return q(this.$props).theme.value}},mounted(){this.screenWidthInit()},methods:{screenWidthInit(){this.timer.widthTimer=setInterval(()=>{this.screenWidth=window.innerWidth},30)}},beforeUnmount(){clearInterval(this.timer.widthTimer)}},q1={class:"fv-panel-control-block"},X1={class:"fv-panel-main-container"},K1={class:"fv-panel-footer"};function j1(i,e,t,s,n,r){const o=K("fv-button");return f(),G(fe,{name:"fv-panel-show"},{default:x(()=>[P(h("div",{class:k(["fv-Panel",[r.$theme]])},[h("div",{class:"fv-panel-back-board",onClick:e[0]||(e[0]=a=>t.isLightDismiss?n.thisValue=!1:0)}),L(fe,{name:r.transitionInName},{default:x(()=>[P(h("div",{class:k(["fv-panel-container",[{"near-side":t.isNearSide,"central-side":t.isCentralSide,"acrylic-style":t.isAcrylic}]]),style:V({width:r.finalWidth,height:r.finalHeight,background:t.background})},[P(h("div",q1,[w(i.$slots,"header",{},()=>[h("p",{class:"panel-title",style:V({"font-size":`${t.titleSize}px`,"font-weight":t.titleWeight,color:t.titleColor})},H(t.title),5),h("i",{class:"control-btn ms-Icon ms-Icon--Cancel",onClick:e[1]||(e[1]=a=>n.thisValue=!n.thisValue)})])],512),[[R,t.showTitleBar]]),h("div",X1,[w(i.$slots,"container",{},()=>[ue(" Content Here ")])]),P(h("div",K1,[w(i.$slots,"footer",{},()=>[L(o,{theme:"dark",background:"rgba(0, 90, 158, 1)"},{default:x(()=>[ue("OK")]),_:1}),L(o,null,{default:x(()=>[ue("Cancel")]),_:1})])],512),[[R,t.isFooter]])],6),[[R,n.thisValue]])]),_:3},8,["name"])],2),[[R,n.thisValue]])]),_:3})}const J1=z(Y1,[["render",j1]]),Q1=ie(J1),Z1={...te},ey={name:"FvPersona",props:{...Z1,src:{default:""},name:{default:""},size:{default:40},status:{default:""},icon:{default:""},iconColor:{default:""},background:{default:""},showInfo:{default:!1}},data(){return{statusList:{online:{icon:"FullCircleMask",color:"rgba(107, 183, 0, 1)"},offline:{icon:"LocationFill",color:"rgba(50, 49, 48, 1)"},away:{icon:"SkypeCircleClock",color:"rgba(255, 170, 68, 1)"},busy:{icon:"LocationFill",color:"rgba(196, 49, 72, 1)"},ok:{icon:"SkypeCircleCheck",color:"rgba(107, 183, 0, 1)"},dnd:{icon:"SkypeCircleMinus",color:"rgba(197, 15, 31, 1)"},blocked:{icon:"Blocked",color:"rgba(196, 49, 32, 1)"}},colorList:["#d29200","#ffb900","#ffb900","#d83b01","#ea4300","#ff8c00","#a4262c","#d13438","#5c005c","#b4009e","#e3008c","#32145a","#5c2d91","#b4a0ff","#002050","#00188f","#0078d4","#00bcf2","#004b50","#008272","#00B294","#004b1c","#107c10","#bad80a"]}},computed:{nameCard(){return this.name[0]},nameCardBackground(){let i=0;return this.name!==""&&(i=this.name[0].charCodeAt()%this.colorList.length),this.colorList[i]},currentIcon(){return this.icon!==""?this.icon:this.status===""?"":this.statusList[this.status].icon},currentIconColor(){return this.iconColor!=""?this.iconColor:this.status===""?this.statusList.online.color:this.statusList[this.status].color},iconFontSize(){return this.size/4.8+6},titleFontSize(){return this.size/16+12.5},secondaryFontSize(){return this.size/48+11.5},showStatus(){return this.status!==""||this.icon!==""},$theme(){return q(this.$props).theme.value}}},ty={class:"persona-content-block"};function iy(i,e,t,s,n,r){const o=K("fv-img");return f(),g("div",{class:k(["fv-Persona",[r.$theme]])},[h("div",{class:"persona-avatar",style:V({width:`${t.size}px`,height:`${t.size}px`})},[h("div",{class:"persona-bg",style:V({background:t.background?t.background:r.nameCardBackground,"font-size":`${t.size/2.3}px`})},H(r.nameCard),5),t.src!==""?(f(),G(o,{key:0,src:t.src,style:{width:"100%",height:"100%","border-radius":"50%"}},null,8,["src"])):O("",!0),P(h("i",{class:k(["ms-Icon status-icon",[`ms-Icon--${r.currentIcon}`]]),style:V({"font-size":`${r.iconFontSize}px`,color:r.currentIconColor})},null,6),[[R,r.showStatus]])],4),P(h("div",ty,[h("span",{class:"persona-title",style:V({"font-size":`${r.titleFontSize}px`})},[w(i.$slots,"name",{},()=>[h("p",null,H(t.name),1)])],4),h("span",{class:"persona-secondary",style:V({"font-size":`${r.secondaryFontSize}px`})},[w(i.$slots,"secondary")],4)],512),[[R,t.showInfo]])],2)}const sy=z(ey,[["render",iy]]),ny=ie(sy),ry={...te},oy={emits:["update:modelValue"],props:{els:{default:()=>null},sliderBoxshadow:{default:!1},background:{default:""},theme:{type:String,default:"global"}},data(){return{domLeft:0,domWidth:60,styles:{slider:{background:""}}}},watch:{left(i){this.moveInit()},width(i){this.moveInit()}},computed:{left(){let{els:i,index:e}=this.els(),t=0;for(let s=0;s<e;s++){let n=i[s];if(!n.el||!n.show)t+=0;else{let r=n.el.clientWidth;t+=r}}return t},width(){let{els:i,index:e}=this.els(),t=i[e];return t.el?t.el.clientWidth:60},$theme(){return q(this.$props).theme.value}},mounted(){this.moveInit()},methods:{moveInit(){let i=this.left-this.domLeft;i>0?this.widthExpandToRight(i):this.widthExpandToLeft(i)},widthExpandToRight(i){let e=Math.abs(i)+this.width;Pe.to(this.$data,{domWidth:e,duration:.3,delay:.08,ease:"expo.inOut",onComplete:this.widthFormatToRight})},widthFormatToRight(){Pe.to(this.$data,{domLeft:this.left,domWidth:this.width,duration:.2,ease:"power3.out"})},widthExpandToLeft(i){let e=Math.abs(i)+this.width;Pe.to(this.$data,{domLeft:this.left,domWidth:e,duration:.3,delay:.08,ease:"expo.inOut",onComplete:this.widthFormatToLeft})},widthFormatToLeft(){Pe.to(this.$data,{domWidth:this.width,duration:.2,ease:"power3.out"})}}},ay={class:"slider"};function ly(i,e,t,s,n,r){return f(),g("div",ay,[h("span",{class:k(["fv-pivot-s",[{"is-boxshadow":t.sliderBoxshadow}]]),style:V({"margin-left":`${n.domLeft}px`,width:`${n.domWidth}px`})},[h("p",{style:V({background:t.background})},null,4)],6)])}const uy=z(oy,[["render",ly]]),dy={name:"FvPivot",components:{slider:uy},emits:["update:modelValue","change"],props:{...ry,modelValue:{default:()=>null},items:{default:()=>[{name:"Pivot",width:80}]},tab:{default:!1},fontSize:{default:""},foreground:{default:""},sliderBackground:{default:""},sliderBoxshadow:{default:!1},background:{default:""}},data(){return{thisItems:[],thisValue:null,styles:{slider:{background:""},container:{color:""}}}},watch:{modelValue(i){this.findCurrentValue()},items(i){this.itemsInit()},thisValue(i){this.$emit("update:modelValue",i),this.$emit("change",i)},foreground(i){this.stylesInit()},sliderBackground(i){this.stylesInit()}},computed:{itemWidth(){return i=>i.width?isNaN(i.width)?this.valueTrigger(i.width):`${i.width}px`:0},currentEls(){return()=>{let i=-1;this.thisValue?this.thisValue.key?i=this.thisItems.findIndex(t=>t.key===this.thisValue.key):i=this.thisItems.findIndex(t=>this.valueTrigger(t.name)===this.valueTrigger(this.thisValue.name)):i=0,i<0&&(i=0);let e=[];for(let t=0;t<this.thisItems.length;t++)e.push({el:this.$refs[`item_${t}`]?this.$refs[`item_${t}`][0]:null,show:this.valueTrigger(this.thisItems[t].show)});return{index:i,els:e}}},$theme(){return q(this.$props).theme.value}},updated(){(!this.thisValue||!this.valueTrigger(this.thisValue.show))&&(this.thisValue=this.thisItems.find(i=>this.valueTrigger(i.show)&&!this.valueTrigger(i.disabled)))},mounted(){this.stylesInit(),this.itemsInit()},methods:{itemsInit(){let i={name:"Pivot",width:60,show:!0,disabled:!1},e=[];for(let t of this.items){let s=JSON.parse(JSON.stringify(i));Object.assign(s,t),e.push(s)}this.thisItems=e,this.findCurrentValue()},findCurrentValue(){if(!this.modelValue){let i=this.thisItems.find(e=>this.valueTrigger(e.show)&&!this.valueTrigger(e.disabled));i?this.thisValue=i:(this.thisValue={},console.warn("No visible item in ItemList."));return}if(this.modelValue.key){let i=this.thisItems.find(e=>e.key===this.modelValue.key);i&&(this.thisValue=i);return}else if(this.valueTrigger(this.modelValue.name)){let i=this.thisItems.find(e=>this.valueTrigger(e.name)===this.valueTrigger(this.modelValue.name));i&&(this.thisValue=i)}},stylesInit(){this.styles.slider.background=this.sliderBackground,this.styles.container.color=this.foreground},itemClick(i){if(i.disabled)return 0;this.thisValue=i},eqal(i){return this.thisValue?this.thisValue.key?this.thisValue.key===i.key:this.valueTrigger(this.thisValue.name)?this.valueTrigger(this.thisValue.name)===this.valueTrigger(i.name):!1:!1},valueTrigger(i){return typeof i=="function"?i():i}}},hy={class:"pivot-container"},cy=["onClick"];function fy(i,e,t,s,n,r){const o=K("slider");return f(),g("div",{class:k(["fv-Pivot",[r.$theme,t.tab?"tab":""]]),style:V({background:t.background})},[h("div",hy,[(f(!0),g(Y,null,Z(n.thisItems,(a,l)=>P((f(),g("span",{class:k(["pivot-item",{choose:r.eqal(a),disabled:r.valueTrigger(a.disabled)}]),key:l,ref_for:!0,ref:`item_${l}`,style:V({width:r.itemWidth(a)}),onClick:u=>r.itemClick(a)},[w(i.$slots,"container",{item:a,index:l},()=>[h("p",{style:V({fontSize:`${t.fontSize}px`,color:n.styles.container.color})},H(r.valueTrigger(a.name)),5)])],14,cy)),[[R,r.valueTrigger(a.show)]])),128))]),n.thisItems.length>0?(f(),G(o,{key:0,els:r.currentEls,sliderBoxshadow:t.sliderBoxshadow,background:n.styles.slider.background},null,8,["els","sliderBoxshadow","background"])):O("",!0)],6)}const my=z(dy,[["render",fy]]),gy=ie(my),py={...te},vy={name:"FvProgressBar",emits:["update:modelValue","progress-change","progress-finished"],props:{...py,modelValue:{default:0},foreground:{default:""},background:{default:""},loading:{default:!1},disabled:{default:!1}},data(){return{percent:this.modelValue}},watch:{modelValue(i){this.percent=i},percent(i){this.$emit("update:modelValue",i),this.$emit("progress-change",i),i>=100&&this.$emit("progress-finished",i)}},computed:{$theme(){return q(this.$props).theme.value},isDisabled(){return this.disabled.toString()=="true"||this.disabled=="disabled"||this.disabled===""}}};function by(i,e,t,s,n,r){return f(),g("div",{class:k(["fv-ProgressBar",[r.$theme,t.loading.toString()!="true"?"normal":"",r.isDisabled?"disabled":""]]),style:V({background:t.background})},[(f(),g(Y,null,Z(5,o=>P(h("p",{class:"unit",style:V({background:t.foreground}),key:o},null,4),[[R,t.loading.toString()=="true"]])),64)),P(h("i",{style:V({width:(n.percent<=100?n.percent:100)+"%",background:t.foreground})},null,4),[[R,t.loading.toString()!="true"]])],6)}const yy=z(vy,[["render",by]]),_y=ie(yy),wy={...te},ky={props:{size:{default:"xs"},color:{default:""}},data(){return{styles:{p:{background:""}}}},watch:{color(i){this.stylesInit()}},computed:{$theme(){return useTheme(this.$props).theme.value}},mounted(){this.stylesInit()},methods:{stylesInit(){this.styles.p.background=this.color}}};function Cy(i,e,t,s,n,r){return f(),g("div",{class:k(["fv-progressRing-legacy",t.size])},[(f(),g(Y,null,Z(5,o=>h("p",{style:V(n.styles.p),key:o},null,4)),64))],2)}const xy=z(ky,[["render",Cy]]),Sy={name:"FvProgressRing",emits:["update:modelValue"],components:{legacy:xy},props:{...wy,modelValue:{default:0},size:{default:"xs"},r:{default:40},loading:{default:!1},color:{default:"rgba(0, 90, 158, 1)"},background:{default:"rgba(204, 204, 204, 1)"},borderWidth:{default:8},legacy:{default:!1}},data(){return{thisValue:this.modelValue,valueCache:this.modelValue,Loading:{ratio:5,rotate:-90}}},watch:{modelValue(i){this.thisValue=i},async thisValue(i){this.$emit("update:modelValue",i),await this.syncValue()}},computed:{l(){return(2*Math.PI*(this.r-this.borderWidth)).toFixed(2)},$theme(){return q(this.$props).theme.value}},mounted(){this.loadingInit()},methods:{loadingInit(){Pe.to(this.$data.Loading,{ratio:70,duration:.8,repeat:-1,yoyo:!0,ease:"linear"}),Pe.to(this.$data.Loading,{rotate:270,duration:.8,repeat:-1,ease:"linear"})},async syncValue(){await new Promise(i=>{Pe.to(this.$data,{valueCache:this.thisValue,duration:.8,ease:"power3.out",onComplete:()=>{i(0)}})})}}},Ty=["width","height"],Vy=["r","cy","cx","stroke-width","stroke"],Iy=["r","cy","cx","stroke-width","stroke","stroke-dashoffset","stroke-dasharray"];function Ly(i,e,t,s,n,r){const o=K("legacy");return f(),g("div",{class:k(["fv-ProgressRing",[r.$theme]]),style:V({width:`${t.r*2}px`,height:`${t.r*2}px`})},[P((f(),g("svg",{width:`${t.r*2}px`,height:`${t.r*2}px`,class:"svg"},[h("circle",{r:t.r-t.borderWidth,cy:t.r,cx:t.r,"stroke-width":t.borderWidth,stroke:t.background,"stroke-linejoin":"round","stroke-linecap":"round",fill:"none"},null,8,Vy),h("circle",{class:"progress-rotate",r:t.r-t.borderWidth,cy:t.r,cx:t.r,"stroke-width":t.borderWidth,stroke:t.color,"stroke-linejoin":"round","stroke-linecap":"round",fill:"none","stroke-dashoffset":`${t.loading?r.l-n.Loading.ratio/100*r.l:r.l-n.valueCache/100*r.l}px`,"stroke-dasharray":`${r.l}px`,style:V({transform:`rotate(${t.loading?n.Loading.rotate:-90}deg)`})},null,12,Iy)],8,Ty)),[[R,!t.legacy]]),P(L(o,{size:t.size,color:t.color},null,8,["size","color"]),[[R,t.legacy]])],6)}const $y=z(Sy,[["render",Ly]]),Py=ie($y),My={...te},Ey={name:"FvRadio",emits:["update:modelValue","click","actived"],props:{...My,modelValue:{},label:{required:!0},color:{default:""},foreground:{default:"rgba(0, 90, 158, 0.8)"},icon:{type:String,default:null},iconBlockBorderRadius:{default:6},iconBlockBorderWidth:{default:2},image:{type:String,default:null},activeImage:{type:String,default:null},disabled:{type:Boolean,default:!1}},computed:{$theme(){return q(this.$props).theme.value},isActived(){return this.model==this.label},isGroup(){let i=this.$parent;for(;i;)if(i.$options.name!="FvRadioGroup")i=i.$parent;else return this.setGroup(i),!0;return!1},isDisabled(){return this.isGroup?this._group.disabled||this.disabled:this.disabled},model:{get(){return this.isGroup?this._group.value:this.modelValue},set(i){this.isGroup?this._group.$emit("update:modelValue",i):this.$emit("update:modelValue",i)}}},mounted(){},methods:{click(){this.isDisabled||(this.isGroup?(this._group.$emit("update:modelValue",this.label),this._group.change(this.label)):this.$emit("update:modelValue",this.label),this.isActived&&this.$emit("actived"),this.$emit("click"))},setGroup(i){this._group=i}}},Dy=["src"];function By(i,e,t,s,n,r){return f(),g("div",{class:k(["fv-Radio",[r.$theme,{"with-icon":t.icon||t.image},{actived:r.isActived},{disabled:r.isDisabled}]]),onClick:e[0]||(e[0]=(...o)=>r.click&&r.click(...o)),style:V({"border-color":r.isActived?t.foreground:"","border-radius":`${t.iconBlockBorderRadius}px`,"border-width":`${t.iconBlockBorderWidth}px`})},[h("input",{type:"radio",ref:"button",class:k(["fv-radio-button",[{actived:r.isActived},{disabled:r.isDisabled}]]),style:V({background:r.isActived?t.foreground:""})},null,6),h("label",{class:"fv-radio-label",style:V({color:t.color})},[t.image?(f(),g("img",{key:0,src:r.isActived&&t.activeImage?t.activeImage:t.image},null,8,Dy)):t.icon?(f(),g("i",{key:1,class:k(["with-icon ms-Icon","ms-Icon--"+t.icon])},null,2)):O("",!0),h("span",null,[w(i.$slots,"default")])],4)],6)}const Ry=z(Ey,[["render",By]]),Fy=ie(Ry),zy={...te},Ay={name:"FvRadioGroup",emits:["change"],props:{...zy,modelValue:{required:!0},disabled:{type:Boolean,default:!1},label:{type:String,default:""},inline:{type:Boolean,default:!1}},data(){return{}},computed:{$theme(){return q(this.$props).theme.value}},methods:{change(i){this.$emit("change",i)}}},Oy={key:0};function Ny(i,e,t,s,n,r){return f(),g("div",{class:k(["fv-RadioGroup",[r.$theme,{inline:t.inline}]])},[t.label?(f(),g("label",Oy,H(t.label),1)):O("",!0),w(i.$slots,"default")],2)}const Hy=z(Ay,[["render",Ny]]),Wy=ie(Hy),Gy={...te},Uy={name:"FvRatingControl",emits:["update:modelValue","change"],props:{...Gy,modelValue:{default:0},maxRate:{default:5},halfRate:{default:!1},defaultIcon:{type:String,default:"FavoriteStar"},selectedIcon:{type:String,default:"FavoriteStarFill"},borderColor:{type:String,default:""},selectedColor:{type:String,default:""},isClear:{default:!1},readonly:{default:!1}},data(){return{thisValue:this.modelValue,hover:[]}},watch:{modelValue(i){this.thisValue=i},thisValue(i){this.$emit("update:modelValue",i),this.$emit("change",i)},maxRate(i){this.hover=new Array(i).fill({status:!1,ratio:100})}},mounted(){this.thisValue=this.modelValue,this.hover=new Array(this.maxRate).fill({status:!1,ratio:100})},computed:{itemShow(){return i=>this.hoverIndex<0?i-this.thisValue<0:i<=this.hoverIndex},itemRatio(){return i=>this.hoverIndex<0?i+1<=parseInt(this.thisValue)?100:(this.thisValue-parseInt(this.thisValue))*100:this.hoverIndex===i?this.hover[i].ratio:100},hoverIndex(){return this.hover.findIndex(i=>i.status)},isReadOnly(){return this.readonly.toString()=="true"||this.readonly=="readonly"||this.readonly===""},$theme(){return q(this.$props).theme.value}},methods:{handlerHover(i,e){if(this.isReadOnly)return;let t=i.target.offsetWidth,{left:s}=i.target.getBoundingClientRect(),{clientX:n}=i.targetTouches?i.targetTouches[0]:i,r=(n-s)/t*100;this.hover[e]={status:!0,ratio:r>50||!this.halfRate?100:50}},handlerClick(i,e){if(this.isReadOnly)return;if(!this.halfRate){if(this.isClear&&this.thisValue==e+1){this.thisValue=0,this.clearHover();return}this.thisValue=e+1;return}let t=i.target.offsetWidth,{left:s}=i.target.getBoundingClientRect(),{clientX:n}=i.targetTouches?i.targetTouches[0]:i,r=(n-s)/t*100;if(this.isClear&&this.thisValue==e+1-(r>50?0:.5)){this.thisValue=0,this.clearHover();return}this.thisValue=e+1-(r>50?0:.5)},clearHover(){for(let i=0;i<this.maxRate;i++)this.hover[i]={status:!1,ratio:100}}}},Yy={class:"fv-rating-container"},qy=["onMousemove","onTouchmove","onMouseleave","onTouchend","onClick"];function Xy(i,e,t,s,n,r){return f(),g("div",{class:k(["fv-RatingControl",[r.$theme]])},[h("div",Yy,[(f(!0),g(Y,null,Z(t.maxRate,(o,a)=>(f(),g("div",{key:a,class:"fv-rating-unit",onMousemove:l=>r.handlerHover(l,a),onTouchmove:l=>r.handlerHover(l,a),onMouseleave:l=>n.hover[a]={status:!1,ratio:100},onTouchend:l=>n.hover[a]={status:!1,ratio:100},onClick:l=>r.handlerClick(l,a)},[h("i",{class:k(["ms-Icon background",[`ms-Icon--${t.defaultIcon}`]]),style:V({color:t.borderColor})},null,6),P(h("div",{class:"fv-rating-mask",style:V({width:`${r.itemRatio(a)}%`})},[h("i",{class:k(["ms-Icon foreground",[`ms-Icon--${t.selectedIcon}`]]),style:V({color:t.selectedColor})},null,6)],4),[[R,r.itemShow(a)]])],40,qy))),128))])],2)}const Ky=z(Uy,[["render",Xy]]),jy=ie(Ky),Jy={...te},Qy={name:"FvRevealContainer",emits:["click"],props:{...Jy,revealContainer:{default:!1},parent:{default:null},borderWidth:{default:1},borderRadius:{default:6},backgroundColor:{default:"rgba(121, 119, 117, 0.6)"},backgroundGradientList:{default:()=>[]},backgroundGradientSize:{default:120},borderColor:{default:"rgba(121, 119, 117, 0.6)"},borderGradientList:{default:()=>[]},borderGradientSize:{default:60},debounceDistance:{default:300},disabled:{default:!1}},setup(){return{revealCache:ei()}},data(){return{id:this.GuidWithoutDash(),offset:{left:0,top:0,right:0,bottom:0},disEl:{x:0,y:0},inside:!1,wave:0,clickDown:!1,timer:{wave:null}}},watch:{inside(i){i||this.leaveEvent(null)}},computed:{$theme(){return q(this.$props).theme.value},borderMatrix(){const{left:i,top:e,right:t,bottom:s}=this.offset;let n=t-i,r=s-e;return`matrix(${[1,0,0,1,(this.disEl.x-n/2).toFixed(3),(this.disEl.y-r/2).toFixed(3)].join(" ")})`},computedBorderRadius(){let i=this.offset.right-this.offset.left,e=this.offset.bottom-this.offset.top,t=i>e?e:i;return t==0?this.borderRadius:this.borderRadius>t/2?t/2:this.borderRadius},isDisabled(){return this.disabled.toString()=="true"||this.disabled=="disabled"||this.disabled===""}},mounted(){this.disEl.y=window.innerHeight,this.disEl.x=window.innerWidth,this.mouseMoveInit(),this.mouseClickInit()},methods:{mouseMoveInit(){if(this.revealContainer===!1){if(this.revealCache.setRevealHandler({id:this.id,moveHandler:this.moveEvent,leaveHandler:this.leaveEvent}),window.$FvRevealContainer)return;window.$FvRevealContainer=!0,window.removeEventListener("mousemove",this.globalMoveEventListener),window.addEventListener("mousemove",this.globalMoveEventListener),window.removeEventListener("touchmove",this.globalMoveEventListener),window.addEventListener("touchmove",this.globalMoveEventListener),window.removeEventListener("mouseleave",this.globalLeaveEventListener),window.addEventListener("mouseleave",this.globalLeaveEventListener)}else{if(this.revealContainer.revealHandlerList.push({id:this.id,moveHandler:this.moveEvent,downHandler:this.downEvent,upHandler:this.upEvent,leaveHandler:this.leaveEvent}),this.revealContainer.init)return;this.revealContainer.init=!0,this.revealContainer.el().removeEventListener("mousemove",this.globalMoveEventListener),this.revealContainer.el().addEventListener("mousemove",this.globalMoveEventListener),this.revealContainer.el().removeEventListener("touchmove",this.globalMoveEventListener),this.revealContainer.el().addEventListener("touchmove",this.globalMoveEventListener),this.revealContainer.el().removeEventListener("mouseleave",this.globalLeaveEventListener),this.revealContainer.el().addEventListener("mouseleave",this.globalLeaveEventListener)}},mouseClickInit(){this.parent?(this.parent().removeEventListener("mousedown",this.downEvent),this.parent().addEventListener("mousedown",this.downEvent),this.parent().removeEventListener("touchstart",this.downEvent),this.parent().addEventListener("touchstart",this.downEvent),this.parent().removeEventListener("mouseup",this.upEvent),this.parent().addEventListener("mouseup",this.upEvent),this.parent().removeEventListener("touchend",this.leaveEvent),this.parent().addEventListener("touchend",this.leaveEvent)):(this.$el.removeEventListener("mousedown",this.downEvent),this.$el.addEventListener("mousedown",this.downEvent),this.$el.removeEventListener("touchstart",this.downEvent),this.$el.addEventListener("touchstart",this.downEvent),this.$el.removeEventListener("mouseup",this.upEvent),this.$el.addEventListener("mouseup",this.upEvent),this.$el.removeEventListener("touchend",this.leaveEvent),this.$el.addEventListener("touchend",this.leaveEvent))},globalMoveEventListener(i){if(this.revealContainer===!1)for(let e of this.revealCache.revealHandlerList)e.moveHandler&&e.moveHandler(i);else for(let e of this.revealContainer.revealHandlerList)e.moveHandler&&e.moveHandler(i)},globalLeaveEventListener(i){if(this.revealContainer===!1)for(let e of this.revealCache.revealHandlerList)e.leaveHandler&&e.leaveHandler(i);else for(let e of this.revealContainer.revealHandlerList)e.leaveHandler&&e.leaveHandler(i)},moveEvent(i){if(this.isDisabled||!this.inVisual())return;i.type.indexOf("mouse")<0&&(i=i.targetTouches[0]);const{left:e,top:t}=this.getOffset(this.$el);let s=i.pageX-e-window.scrollX,n=i.pageY-t-window.scrollY,r=this.distanceOfElement(this.$el,i.clientX,i.clientY);r.left>this.debounceDistance||r.top>this.debounceDistance||r.right>this.debounceDistance||r.bottom>this.debounceDistance||(this.disEl.x=s,this.disEl.y=n,this.inside=this.moveInsideElement(this.$el,i.clientX,i.clientY))},downEvent(i){if(this.isDisabled||!this.clickInsideElement(i))return;i.type.indexOf("mouse")<0&&(i=i.targetTouches[0]);const{left:e,top:t}=this.getOffset(this.$el);let s=i.pageX-e-window.scrollX,n=i.pageY-t-window.scrollY;this.disEl.x=s,this.disEl.y=n,this.wave=120,this.inside=!0,this.clickDown=!0,clearInterval(this.timer.wave),this.timer.wave=setInterval(()=>{try{let r=this.wave,o=r/60+1;r+=o,r>=1e3?clearInterval(this.timer.wave):this.wave=r}catch{}},50)},upEvent(i){this.wave=0,this.clickDown=!1,clearInterval(this.timer.wave)},leaveEvent(i){this.wave=0,this.disEl.x=window.innerWidth,this.disEl.y=window.innerHeight,this.inside=!1,clearInterval(this.timer.wave)},getOffset(i){const{left:e,top:t,right:s,bottom:n}=i.getBoundingClientRect();return this.offset.left=e,this.offset.top=t,this.offset.right=s,this.offset.bottom=n,{left:e,top:t,right:s,bottom:n}},moveInsideElement(i,e,t){const{left:s,top:n,right:r,bottom:o}=i.getBoundingClientRect();return e>=s&&e<=r&&t>=n&&t<=o},distanceOfElement(i,e,t){const{left:s,top:n,right:r,bottom:o}=i.getBoundingClientRect();return{left:s-e,right:e-r,top:n-t,bottom:t-o}},clickInsideElement(i){let e=i.target,t=!1;for(;e&&e.tagName&&e.tagName.toLowerCase()!="body";){if(e==this.$el){t=!0;break}if(this.parent&&e==this.parent()){t=!0;break}e=e.parentNode}return t},inVisual(){const{left:i,top:e,right:t,bottom:s}=this.$el.getBoundingClientRect(),n=t-i,r=s-e,o=window.innerWidth,a=window.innerHeight;let l=!1,u=!1;return s>=0&&s<=a+r&&(u=!0),t>=0&&t<=o+n&&(l=!0),l&&u},GuidWithoutDash(){function i(){return((1+Math.random())*65536|0).toString(16).substring(1)}return i()+i()+i()+i()+i()+i()+i()+i()},valueTrigger(i){return typeof i=="function"?i():i}},beforeUnmount(){if(this.revealContainer===!1)this.revealCache.removeRevealHandler(this.id);else{let i=this.revealContainer.revealHandlerList.findIndex(e=>e.id==this.id);i>-1&&this.revealContainer.revealHandlerList.splice(i,1)}this.parent&&this.parent()&&(this.parent().removeEventListener("mousedown",this.downEvent),this.parent().removeEventListener("touchstart",this.downEvent),this.parent().removeEventListener("mouseup",this.upEvent))}},Zy={width:"100%",height:"100%",version:"1.1",xmlns:"http://www.w3.org/2000/svg"},e_=["r","id","gradientTransform"],t_=["stop-color"],i_={key:1,offset:"1","stop-color":"rgba(255, 255, 255, 0)"},s_=["offset","stop-color"],n_=["r","id","gradientTransform"],r_=["stop-color"],o_={key:1,offset:"1","stop-color":"rgba(255, 255, 255, 0)"},a_=["offset","stop-color"],l_=["r","id","gradientTransform"],u_=h("stop",{offset:"0","stop-color":"rgba(255, 255, 255, 0)"},null,-1),d_=["stop-color"],h_=h("stop",{offset:"0.66","stop-color":"rgba(255, 255, 255, 0)"},null,-1),c_=h("stop",{offset:"1","stop-color":"rgba(255, 255, 255, 0)"},null,-1),f_=["x","y","rx","ry"],m_=["x","y","rx","ry"];function g_(i,e,t,s,n,r){return f(),g("div",{class:k(["fv-RevealContainer",[r.$theme]]),style:V({"border-radius":`${r.computedBorderRadius}px`}),onClick:e[0]||(e[0]=o=>{o.preventDefault(),r.isDisabled||i.$emit("click",o)})},[P((f(),g("svg",Zy,[ue(" > "),h("defs",null,[h("radialGradient",{cx:"50%",cy:"50%",r:t.backgroundGradientSize,gradientUnits:"userSpaceOnUse",spreadMethod:"pad",id:`backgroundG_${n.id}`,gradientTransform:r.borderMatrix},[t.backgroundGradientList.length==0?(f(),g("stop",{key:0,offset:"0","stop-color":t.backgroundColor},null,8,t_)):O("",!0),t.backgroundGradientList.length==0?(f(),g("stop",i_)):O("",!0),(f(!0),g(Y,null,Z(t.backgroundGradientList,(o,a)=>(f(),g("stop",{offset:1/t.backgroundGradientList.length*a,"stop-color":o,key:`bg:${a}`},null,8,s_))),128))],8,e_),h("radialGradient",{cx:"50%",cy:"50%",r:t.borderGradientSize,gradientUnits:"userSpaceOnUse",spreadMethod:"pad",id:`borderG_${n.id}`,gradientTransform:r.borderMatrix},[t.borderGradientList.length==0?(f(),g("stop",{key:0,offset:"0","stop-color":t.borderColor},null,8,r_)):O("",!0),t.borderGradientList.length==0?(f(),g("stop",o_)):O("",!0),(f(!0),g(Y,null,Z(t.borderGradientList,(o,a)=>(f(),g("stop",{offset:1/t.borderGradientList.length*a,"stop-color":o,key:`border:${a}`},null,8,a_))),128))],8,n_),h("radialGradient",{cx:"50%",cy:"50%",r:n.wave,gradientUnits:"userSpaceOnUse",spreadMethod:"pad",id:`clickG_${n.id}`,gradientTransform:r.borderMatrix},[u_,h("stop",{offset:"0.33","stop-color":t.backgroundColor},null,8,d_),h_,c_],8,l_)]),h("rect",{x:t.borderWidth/2,y:t.borderWidth/2,rx:r.computedBorderRadius,ry:r.computedBorderRadius,style:V([{"box-sizing":"border-box"},{width:`${n.offset.right-n.offset.left-t.borderWidth}px`,height:`${n.offset.bottom-n.offset.top-t.borderWidth}px`,stroke:`url(#borderG_${n.id})`,fill:n.inside?`url(#backgroundG_${n.id})`:"transparent","stroke-width":t.borderWidth}])},null,12,f_),P(h("rect",{x:t.borderWidth/2,y:t.borderWidth/2,rx:r.computedBorderRadius,ry:r.computedBorderRadius,style:V([{stroke:"transparent","box-sizing":"border-box"},{width:`${n.offset.right-n.offset.left-t.borderWidth}px`,height:`${n.offset.bottom-n.offset.top-t.borderWidth}px`,fill:n.inside?`url(#clickG_${n.id})`:"transparent","stroke-width":t.borderWidth}])},null,12,m_),[[R,n.clickDown]])],512)),[[R,n.offset.right-n.offset.left>0]])],6)}const p_=z(Qy,[["render",g_]]),v_=ie(p_),b_={...te},y_={name:"FvScrollStory",emits:["show-changed"],props:{...b_,name:{default:""},overCollapse:{default:!1},infinite:{default:!1},trueRender:{default:!1}},data(){return{show:!1,bounding:1/0,event:()=>{this.refreshBounding()},timer:{}}},watch:{show(i){this.$emit("show-changed",i)}},computed:{$theme(){return q(this.$props).theme.value}},mounted(){this.timerInit()},methods:{timerInit(){clearInterval(this.timer),this.timer=setInterval(()=>{this.refreshBounding()},30)},refreshBounding(){this.bounding=this.$el.getBoundingClientRect(),this.bounding.top<window.innerHeight&&(this.show=!0),this.bounding.top>window.innerHeight&&this.infinite&&(this.show=!1),this.bounding.bottom<100&&this.overCollapse&&(this.show=!1)}},beforeUnmount(){clearInterval(this.timer)}},__={key:0},w_=h("p",null,"Scroll Story",-1);function k_(i,e,t,s,n,r){return f(),g("div",{class:k(["fv-ScrollStory",[r.$theme]])},[L(fe,{name:t.name},{default:x(()=>[!t.trueRender||n.show?P((f(),g("div",__,[w(i.$slots,"default",{},()=>[w_])],512)),[[R,n.show]]):O("",!0)]),_:3},8,["name"])],2)}const C_=z(y_,[["render",k_]]),x_=ie(C_),S_={...te},T_={name:"FvSearchBox",emits:["update:modelValue","debounce-input","choose-result","lazyload","clear-click","left-icon-click","icon-click","keydown","keyup","change","paste"],props:{...S_,modelValue:{default:""},options:{default:()=>[]},placeholder:{default:""},type:{default:"text"},readonly:{default:!1},maxlength:{default:""},customFilter:{default:!1},resultPlaceholder:{default:!1},focusShow:{default:!1},leftIcon:{default:""},icon:{default:""},underline:{default:!1},background:{default:""},borderWidth:{default:1},borderColor:{default:""},focusBorderColor:{default:""},foreground:{default:""},fontSize:{default:13.3},fontWeight:{default:"normal"},textAlign:{default:"left"},borderRadius:{default:3},isBoxShadow:{default:!1},revealBorder:{default:!1},status:{default:""},debounceDelay:{default:300},disabled:{default:!1}},data(){return{thisValue:this.modelValue,isFocus:!1,filterOptions:this.options,show:{searchResult:!1},timer:{debounce:null}}},watch:{modelValue(i){this.thisValue=i},thisValue(i){clearTimeout(this.timer.debounce),this.timer.debounce=setTimeout(()=>{this.$emit("debounce-input",this.thisValue)},this.debounceDelay),this.$emit("update:modelValue",i),this.refreshFilter()},isFocus(i){i&&this.focusShow&&(this.show.searchResult=!0)}},computed:{thisBorderColor(){return this.isUnderline?this.isFocus?{borderBottomColor:this.focusBorderColor}:{borderBottomColor:this.borderColor}:this.isFocus?{borderColor:this.focusBorderColor}:{borderColor:this.borderColor}},isUnderline(){return this.underline.toString()=="true"||this.underline=="underline"||this.underline===""},isDisabled(){return this.disabled.toString()=="true"||this.disabled=="disabled"||this.disabled===""},borderLightColor(){return this.$theme=="light"?"rgba(121, 119, 117, 0.6)":this.$theme=="dark"||this.$theme=="custom"?"rgba(255, 255, 255, 0.6)":"rgba(121, 119, 117, 0.6)"},backgroundLightColor(){return this.$theme=="light"?"rgba(121, 119, 117, 0.3)":this.$theme=="dark"||this.$theme=="custom"?"rgba(255, 255, 255, 0.3)":"rgba(121, 119, 117, 0.3)"},isReadOnly(){return this.readonly.toString()=="true"||this.readonly=="readonly"||this.readonly===""},isDisabled(){return this.disabled.toString()=="true"||this.disabled=="disabled"||this.disabled===""},$theme(){return q(this.$props).theme.value}},mounted(){this.lazyLoadInit(),this.outSideClickInit()},methods:{lazyLoadInit(){this.$SUtility.ScrollToLoadInit(this.$refs.filterResult,()=>{this.$emit("lazyload",this.filterOptions)})},outSideClickInit(){window.addEventListener("click",i=>{let e=i.target,t=!1;for(;e&&e.tagName&&e.tagName.toLowerCase()!="body";){if(e==this.$el){t=!0;break}e=e.parentNode}t||(this.show.searchResult=!1)})},refreshFilter(){let i=[];if(this.customFilter!==!1)i=this.customFilter(this.options);else for(let e of this.options)e.name.toString().toLowerCase().indexOf(this.thisValue.toLowerCase())>-1&&i.push(e);this.filterOptions=i},chooseResult(i){this.thisValue=i.item.name,this.$emit("choose-result",i.item),this.show.searchResult=!1},onBackspace(){if(this.thisValue===""&&this.resultPlaceholder.length>0){let i=this.resultPlaceholder;i.splice(i.length-1,1),this.$emit("update:resultPlaceholder",i)}},clearValue(){this.thisValue="",this.$emit("update:resultPlaceholder",[]),this.$emit("clear-click")}},mounted(){this.lazyLoadInit(),this.outSideClickInit()},methods:{lazyLoadInit(){this.$SUtility.ScrollToLoadInit(this.$refs.filterResult,()=>{this.$emit("lazyload",this.filterOptions)})},outSideClickInit(){window.addEventListener("click",i=>{let e=i.target,t=!1;for(;e&&e.tagName&&e.tagName.toLowerCase()!="body";){if(e==this.$el){t=!0;break}e=e.parentNode}t||(this.show.searchResult=!1)})},refreshFilter(){let i=[];if(this.customFilter!==!1)i=this.customFilter(this.options);else for(let e of this.options)e.name.toString().toLowerCase().indexOf(this.thisValue.toLowerCase())>-1&&i.push(e);this.filterOptions=i},chooseResult(i){this.thisValue=i.item.name,this.$emit("choose-result",i.item),this.show.searchResult=!1},onBackspace(){if(this.thisValue===""&&this.resultPlaceholder.length>0){let i=this.resultPlaceholder;i.splice(i.length-1,1),this.$emit("update:resultPlaceholder",i)}},clearValue(){this.thisValue="",this.$emit("update:resultPlaceholder",[]),this.$emit("clear-click")}}},V_={class:"search-box-placeholder"},I_={class:"search-box-container"},L_=["type","placeholder","readonly","disabled","maxlength"],$_={class:"search-result-container",ref:"filterResult"};function P_(i,e,t,s,n,r){const o=K("fv-reveal-container"),a=K("fv-list-view");return f(),g("div",{class:k(["fv-SearchBox",[r.$theme,t.status,n.isFocus?"focus":"",r.isDisabled?"disabled":"",r.isUnderline?"underline":"",{shadow:t.isBoxShadow}]]),style:V([{background:t.background,borderRadius:`${t.borderRadius}px`}]),onKeydown:e[11]||(e[11]=l=>n.show.searchResult=!0),onKeyup:e[12]||(e[12]=Us((...l)=>r.onBackspace&&r.onBackspace(...l),["delete"])),onClick:e[13]||(e[13]=l=>n.isFocus=!0)},[L(o,{parent:()=>i.$el,class:"fv-search-box-reveal-container",backgroundColor:r.backgroundLightColor,borderColor:r.borderLightColor,backgroundGradientSize:120,borderGradientSize:60,borderWidth:t.borderWidth,borderRadius:t.borderRadius,disabled:r.isDisabled||!t.revealBorder},null,8,["parent","backgroundColor","borderColor","borderWidth","borderRadius","disabled"]),h("div",{class:"search-box-wrapper-container",style:V([r.thisBorderColor,{background:t.background,borderRadius:`${t.borderRadius}px`,borderWidth:`${t.borderWidth}px`}])},[P(h("i",{class:k(["ms-Icon icon-block",[`ms-Icon--${t.leftIcon}`]]),onClick:e[0]||(e[0]=l=>i.$emit("left-icon-click",l))},null,2),[[R,t.leftIcon!=""]]),L(fe,{name:"move-left-to-right"},{default:x(()=>[P(h("div",V_,[w(i.$slots,"resultPlaceholder",{resultPlaceholder:t.resultPlaceholder})],512),[[R,t.resultPlaceholder.length>0]])]),_:3}),h("div",I_,[P(h("input",{"onUpdate:modelValue":e[1]||(e[1]=l=>n.thisValue=l),type:t.type,placeholder:t.placeholder,class:"input",readonly:r.isReadOnly,disabled:r.isDisabled,maxlength:t.maxlength,ref:"input",style:V({"font-size":`${t.fontSize}px`,"font-weight":t.fontWeight,color:t.foreground,"text-align":t.textAlign}),onKeydown:e[2]||(e[2]=l=>i.$emit("keydown",l)),onKeyup:e[3]||(e[3]=l=>i.$emit("keyup",l)),onChange:e[4]||(e[4]=l=>i.$emit("change",l)),onPaste:e[5]||(e[5]=l=>i.$emit("paste",l)),onFocus:e[6]||(e[6]=l=>n.isFocus=!0),onBlur:e[7]||(e[7]=l=>n.isFocus=!1)},null,44,L_),[[Jn,n.thisValue]])]),P(h("i",{class:"ms-Icon ms-Icon--Cancel icon-block",onClick:e[8]||(e[8]=(...l)=>r.clearValue&&r.clearValue(...l))},null,512),[[R,n.thisValue.length>0||t.resultPlaceholder.length>0]]),P(h("i",{class:k(["ms-Icon icon-block",[`ms-Icon--${t.icon}`]]),onClick:e[9]||(e[9]=l=>i.$emit("icon-click",l))},null,2),[[R,t.icon!=""]])],4),L(fe,{name:"zoom-in-top"},{default:x(()=>[P(h("div",$_,[w(i.$slots,"searchResult",{data:n.filterOptions,chooseResult:r.chooseResult},()=>[L(a,{modelValue:n.filterOptions,"onUpdate:modelValue":e[10]||(e[10]=l=>n.filterOptions=l),theme:i.theme,style:{width:"100%",height:"auto"},onChooseItem:r.chooseResult},null,8,["modelValue","theme","onChooseItem"])])],512),[[R,n.show.searchResult]])]),_:3})],38)}const M_=z(T_,[["render",P_]]),E_=ie(M_),D_={...te},B_={name:"FvShimmer",props:{...D_},data(){return{gradientSize:80,x:0,y:0,timer:{}}},computed:{$theme(){return q(this.$props).theme.value},backgroundLightColor(){return this.$theme=="light"?"rgba(121, 119, 117, 0.1)":this.$theme=="dark"||this.$theme=="custom"?"rgba(255, 255, 255, 0.1)":"rgba(121, 119, 117, 0.1)"}},mounted(){this.moveInit(),this.timer=setInterval(()=>{this.childrenInit()},30)},methods:{moveInit(){this.gradientSize=this.$el.clientWidth/1.6,this.x=-this.gradientSize,this.y=this.$el.clientHeight/2,Pe.to(this.$data,{x:this.$el.clientWidth+this.gradientSize+100,duration:2,delay:0,repeat:-1,ease:"power3.in"})},childrenInit(){try{this.$refs.shimmer.querySelectorAll("*").forEach(e=>{e.getAttribute("style").indexOf("background-image")<0&&e.setAttribute("style",`${e.getAttribute("style")} background-image: inherit;`)})}catch{}}},beforeUnmount(){clearInterval(this.timer)}},R_=h("div",{class:"sample",style:{"background-image":"inherit"}},null,-1);function F_(i,e,t,s,n,r){return f(),g("div",{class:k(["fv-Shimmer",[r.$theme]])},[h("div",{class:"shimmer-container",ref:"shimmer",style:V({"background-image":`radial-gradient(circle ${n.gradientSize}px at ${n.x}px ${n.y}px, ${r.backgroundLightColor}, rgba(255,255,255,0))`})},[w(i.$slots,"default",{},()=>[R_])],4)],2)}const z_=z(B_,[["render",F_]]),A_=ie(z_),O_={...te},N_={name:"FvSlider",props:{...O_,disabled:{type:Boolean,default:!1},modelValue:{type:Number,default:0},unit:{type:Number,default:1},maxinum:{type:Number,default:100},mininum:{type:Number,default:0},icon:{type:String,default:"RadioBullet"},vertical:{type:Boolean,default:!1},showLabel:{type:Boolean,default:!1},scale:{type:[Boolean,Number],default:!1},color:{type:String}},data(){return{progress:0,isActive:!1,rejust:!1,buttonHeight:0,style:{bar:{}}}},computed:{$theme(){return q(this.$props).theme.value},buttonStyle(){let i=this.color;return this.vertical?{top:this.progress+"%",transform:`translateX(-${this.buttonHeight/2-1}px) translateY(-${this.buttonHeight/2}px) rotate(90deg)`,color:i}:{left:this.progress+"%",transform:`translateX(-${this.buttonHeight/2}px) translateY(-${this.buttonHeight/2-3}px)`,color:i}},progressStyle(){let i=this.color;return this.vertical?{height:this.progress+"%",backgroundColor:i}:{width:this.progress+"%",backgroundColor:i}}},watch:{modelValue(i){this.isActive||this.setProgress(i,this.mininum,this.maxinum)},progress(i){this.$emit("change",this.getValue(i,this.mininum,this.maxinum)),this.isActive&&this.setValue(i,this.mininum,this.maxinum)}},mounted(){this.resize(),this.widthObserverInit()},methods:{widthObserverInit(){new ResizeObserver(()=>{this.buttonHeight=this.$refs.button?this.$refs.button.clientHeight:0}).observe(this.$refs.button)},click(i){if(this.isActive||this.disabled)return!1;let e=this.$refs.bar.getBoundingClientRect(),t=this.$refs.button.getBoundingClientRect(),s=this.vertical?i.clientY-e.top:i.clientX-e.left,n=this.vertical?t.top-e.top:t.left-e.left;return this.move(s,n),!0},scaleUnit(){return!this.scale||this.scale==!0?this.unit:this.scale},scaleStyle(i,e){let t=Math.round(this.scaleUnit()/(this.maxinum-this.mininum)*100);return this.vertical?{left:e?"7px":"-7px",top:i*t+"%",height:"1px",width:"5px"}:{top:e?"7px":"-7px",left:i*t+"%",height:"5px",width:"1px"}},resize(){this.setProgress(this.modelValue,this.mininum,this.maxinum)},moveable(i){if(event.preventDefault&&(this.$refs.button.ondragenter=event.preventDefault(),this.$refs.button.ondragover=event.preventDefault()),this.isActive||this.disabled)return;this.$emit("click"),this.isActive=!0;let e=this.vertical?i.clientY:i.clientX,t=n=>{n.type==="touchmove"&&(n=n.targetTouches[0]);let r=this.vertical?n.clientY:n.clientX;this.move(r,e),e=r},s=()=>{this.isActive=!1,this.rejustProgress(),window.removeEventListener("mousemove",t),window.removeEventListener("mouseup",s),window.removeEventListener("mouseleave",s),window.removeEventListener("touchmove",t),window.removeEventListener("touchend",s)};window.addEventListener("mousemove",t),window.addEventListener("mouseleave",s),window.addEventListener("mouseup",s),window.addEventListener("touchmove",t),window.addEventListener("touchend",s)},setProgress(i,e,t){this.progress=(i-e)/(t-e)*100,this.progress=Math.max(0,this.progress),this.progress=Math.min(100,this.progress)},setValue(i,e,t){this.$emit("update:modelValue",this.getValue(i,e,t))},getValue(i,e,t){return Math.round(i*(t-e)/100)+e},rejustProgress(){if(this.rejust)return;this.rejust=!0,this.isActive=!0;let i=this.getValue(this.progress,this.mininum,this.maxinum);i<this.maxinum?i=Math.round((i-this.mininum)/this.unit)*this.unit+this.mininum:i=this.maxinum,this.setProgress(i,this.mininum,this.maxinum),setTimeout(()=>{this.rejust=!1,this.isActive=!1},300)},move(i,e){let t=this.vertical?this.$refs.bar.clientHeight:this.$refs.bar.clientWidth,s=this.progress+(i-e)*100/t;s=Math.max(s,0),s=Math.min(s,100),this.progress=s}}},H_=h("div",{class:"fv-slider__bar-bg"},null,-1);function W_(i,e,t,s,n,r){return f(),g("div",{class:k(["fv-Slider",[r.$theme,{active:n.isActive},{vertical:t.vertical}]]),ref:"slider"},[h("div",{class:k(["fv-slider__bar",[{vertical:t.vertical},{disabled:t.disabled}]]),onMousedown:e[1]||(e[1]=o=>r.click(o)&&r.moveable(o)),onTouchstart:e[2]||(e[2]=o=>r.click(o.targetTouches[0])&&r.moveable(o.targetTouches[0])),style:V(n.style.bar),ref:"bar"},[t.scale?(f(),g(Y,{key:0},[(f(!0),g(Y,null,Z((t.maxinum-t.mininum)/r.scaleUnit()-1,o=>(f(),g("div",{class:"fv-slider__scale-up",key:"scale:"+o,style:V(r.scaleStyle(o,!0))},null,4))),128)),(f(!0),g(Y,null,Z((t.maxinum-t.mininum)/r.scaleUnit()-1,o=>(f(),g("div",{class:"fv-slider__scale-down",key:"scale-d:"+o,style:V(r.scaleStyle(o,!1))},null,4))),128))],64)):O("",!0),H_,h("div",{class:k(["fv-slider__progress",[{anime:n.rejust}]]),ref:"progress",style:V(r.progressStyle)},null,6),h("div",{class:k(["fv-slider__button ms-Icon",[`ms-Icon--${t.icon}`,{disabled:t.disabled},{anime:n.rejust}]]),style:V(r.buttonStyle),ref:"button",onMousedown:e[0]||(e[0]=(...o)=>r.moveable&&r.moveable(...o))},null,38)],38),t.showLabel?(f(),g("div",{key:0,class:k(["fv-slider__label",{vertical:t.vertical}])},[w(i.$slots,"default",{value:r.getValue(n.progress,t.mininum,t.maxinum)})],2)):O("",!0)],2)}const G_=z(N_,[["render",W_]]),U_=ie(G_),Y_={...te};function Mn(i){return i!==null&&typeof i=="object"&&"constructor"in i&&i.constructor===Object}function hn(i={},e={}){Object.keys(e).forEach(t=>{typeof i[t]>"u"?i[t]=e[t]:Mn(e[t])&&Mn(i[t])&&Object.keys(e[t]).length>0&&hn(i[t],e[t])})}const vo={body:{},addEventListener(){},removeEventListener(){},activeElement:{blur(){},nodeName:""},querySelector(){return null},querySelectorAll(){return[]},getElementById(){return null},createEvent(){return{initEvent(){}}},createElement(){return{children:[],childNodes:[],style:{},setAttribute(){},getElementsByTagName(){return[]}}},createElementNS(){return{}},importNode(){return null},location:{hash:"",host:"",hostname:"",href:"",origin:"",pathname:"",protocol:"",search:""}};function Ne(){const i=typeof document<"u"?document:{};return hn(i,vo),i}const q_={document:vo,navigator:{userAgent:""},location:{hash:"",host:"",hostname:"",href:"",origin:"",pathname:"",protocol:"",search:""},history:{replaceState(){},pushState(){},go(){},back(){}},CustomEvent:function(){return this},addEventListener(){},removeEventListener(){},getComputedStyle(){return{getPropertyValue(){return""}}},Image(){},Date(){},screen:{},setTimeout(){},clearTimeout(){},matchMedia(){return{}},requestAnimationFrame(i){return typeof setTimeout>"u"?(i(),null):setTimeout(i,0)},cancelAnimationFrame(i){typeof setTimeout>"u"||clearTimeout(i)}};function Ie(){const i=typeof window<"u"?window:{};return hn(i,q_),i}function X_(i){const e=i.__proto__;Object.defineProperty(i,"__proto__",{get(){return e},set(t){e.__proto__=t}})}class _t extends Array{constructor(e){typeof e=="number"?super(e):(super(...e||[]),X_(this))}}function wi(i=[]){const e=[];return i.forEach(t=>{Array.isArray(t)?e.push(...wi(t)):e.push(t)}),e}function bo(i,e){return Array.prototype.filter.call(i,e)}function K_(i){const e=[];for(let t=0;t<i.length;t+=1)e.indexOf(i[t])===-1&&e.push(i[t]);return e}function j_(i,e){if(typeof i!="string")return[i];const t=[],s=e.querySelectorAll(i);for(let n=0;n<s.length;n+=1)t.push(s[n]);return t}function X(i,e){const t=Ie(),s=Ne();let n=[];if(!e&&i instanceof _t)return i;if(!i)return new _t(n);if(typeof i=="string"){const r=i.trim();if(r.indexOf("<")>=0&&r.indexOf(">")>=0){let o="div";r.indexOf("<li")===0&&(o="ul"),r.indexOf("<tr")===0&&(o="tbody"),(r.indexOf("<td")===0||r.indexOf("<th")===0)&&(o="tr"),r.indexOf("<tbody")===0&&(o="table"),r.indexOf("<option")===0&&(o="select");const a=s.createElement(o);a.innerHTML=r;for(let l=0;l<a.childNodes.length;l+=1)n.push(a.childNodes[l])}else n=j_(i.trim(),e||s)}else if(i.nodeType||i===t||i===s)n.push(i);else if(Array.isArray(i)){if(i instanceof _t)return i;n=i}return new _t(K_(n))}X.fn=_t.prototype;function J_(...i){const e=wi(i.map(t=>t.split(" ")));return this.forEach(t=>{t.classList.add(...e)}),this}function Q_(...i){const e=wi(i.map(t=>t.split(" ")));return this.forEach(t=>{t.classList.remove(...e)}),this}function Z_(...i){const e=wi(i.map(t=>t.split(" ")));this.forEach(t=>{e.forEach(s=>{t.classList.toggle(s)})})}function ew(...i){const e=wi(i.map(t=>t.split(" ")));return bo(this,t=>e.filter(s=>t.classList.contains(s)).length>0).length>0}function tw(i,e){if(arguments.length===1&&typeof i=="string")return this[0]?this[0].getAttribute(i):void 0;for(let t=0;t<this.length;t+=1)if(arguments.length===2)this[t].setAttribute(i,e);else for(const s in i)this[t][s]=i[s],this[t].setAttribute(s,i[s]);return this}function iw(i){for(let e=0;e<this.length;e+=1)this[e].removeAttribute(i);return this}function sw(i){for(let e=0;e<this.length;e+=1)this[e].style.transform=i;return this}function nw(i){for(let e=0;e<this.length;e+=1)this[e].style.transitionDuration=typeof i!="string"?`${i}ms`:i;return this}function rw(...i){let[e,t,s,n]=i;typeof i[1]=="function"&&([e,s,n]=i,t=void 0),n||(n=!1);function r(u){const d=u.target;if(!d)return;const c=u.target.dom7EventData||[];if(c.indexOf(u)<0&&c.unshift(u),X(d).is(t))s.apply(d,c);else{const m=X(d).parents();for(let p=0;p<m.length;p+=1)X(m[p]).is(t)&&s.apply(m[p],c)}}function o(u){const d=u&&u.target?u.target.dom7EventData||[]:[];d.indexOf(u)<0&&d.unshift(u),s.apply(this,d)}const a=e.split(" ");let l;for(let u=0;u<this.length;u+=1){const d=this[u];if(t)for(l=0;l<a.length;l+=1){const c=a[l];d.dom7LiveListeners||(d.dom7LiveListeners={}),d.dom7LiveListeners[c]||(d.dom7LiveListeners[c]=[]),d.dom7LiveListeners[c].push({listener:s,proxyListener:r}),d.addEventListener(c,r,n)}else for(l=0;l<a.length;l+=1){const c=a[l];d.dom7Listeners||(d.dom7Listeners={}),d.dom7Listeners[c]||(d.dom7Listeners[c]=[]),d.dom7Listeners[c].push({listener:s,proxyListener:o}),d.addEventListener(c,o,n)}}return this}function ow(...i){let[e,t,s,n]=i;typeof i[1]=="function"&&([e,s,n]=i,t=void 0),n||(n=!1);const r=e.split(" ");for(let o=0;o<r.length;o+=1){const a=r[o];for(let l=0;l<this.length;l+=1){const u=this[l];let d;if(!t&&u.dom7Listeners?d=u.dom7Listeners[a]:t&&u.dom7LiveListeners&&(d=u.dom7LiveListeners[a]),d&&d.length)for(let c=d.length-1;c>=0;c-=1){const m=d[c];s&&m.listener===s||s&&m.listener&&m.listener.dom7proxy&&m.listener.dom7proxy===s?(u.removeEventListener(a,m.proxyListener,n),d.splice(c,1)):s||(u.removeEventListener(a,m.proxyListener,n),d.splice(c,1))}}}return this}function aw(...i){const e=Ie(),t=i[0].split(" "),s=i[1];for(let n=0;n<t.length;n+=1){const r=t[n];for(let o=0;o<this.length;o+=1){const a=this[o];if(e.CustomEvent){const l=new e.CustomEvent(r,{detail:s,bubbles:!0,cancelable:!0});a.dom7EventData=i.filter((u,d)=>d>0),a.dispatchEvent(l),a.dom7EventData=[],delete a.dom7EventData}}}return this}function lw(i){const e=this;function t(s){s.target===this&&(i.call(this,s),e.off("transitionend",t))}return i&&e.on("transitionend",t),this}function uw(i){if(this.length>0){if(i){const e=this.styles();return this[0].offsetWidth+parseFloat(e.getPropertyValue("margin-right"))+parseFloat(e.getPropertyValue("margin-left"))}return this[0].offsetWidth}return null}function dw(i){if(this.length>0){if(i){const e=this.styles();return this[0].offsetHeight+parseFloat(e.getPropertyValue("margin-top"))+parseFloat(e.getPropertyValue("margin-bottom"))}return this[0].offsetHeight}return null}function hw(){if(this.length>0){const i=Ie(),e=Ne(),t=this[0],s=t.getBoundingClientRect(),n=e.body,r=t.clientTop||n.clientTop||0,o=t.clientLeft||n.clientLeft||0,a=t===i?i.scrollY:t.scrollTop,l=t===i?i.scrollX:t.scrollLeft;return{top:s.top+a-r,left:s.left+l-o}}return null}function cw(){const i=Ie();return this[0]?i.getComputedStyle(this[0],null):{}}function fw(i,e){const t=Ie();let s;if(arguments.length===1)if(typeof i=="string"){if(this[0])return t.getComputedStyle(this[0],null).getPropertyValue(i)}else{for(s=0;s<this.length;s+=1)for(const n in i)this[s].style[n]=i[n];return this}if(arguments.length===2&&typeof i=="string"){for(s=0;s<this.length;s+=1)this[s].style[i]=e;return this}return this}function mw(i){return i?(this.forEach((e,t)=>{i.apply(e,[e,t])}),this):this}function gw(i){const e=bo(this,i);return X(e)}function pw(i){if(typeof i>"u")return this[0]?this[0].innerHTML:null;for(let e=0;e<this.length;e+=1)this[e].innerHTML=i;return this}function vw(i){if(typeof i>"u")return this[0]?this[0].textContent.trim():null;for(let e=0;e<this.length;e+=1)this[e].textContent=i;return this}function bw(i){const e=Ie(),t=Ne(),s=this[0];let n,r;if(!s||typeof i>"u")return!1;if(typeof i=="string"){if(s.matches)return s.matches(i);if(s.webkitMatchesSelector)return s.webkitMatchesSelector(i);if(s.msMatchesSelector)return s.msMatchesSelector(i);for(n=X(i),r=0;r<n.length;r+=1)if(n[r]===s)return!0;return!1}if(i===t)return s===t;if(i===e)return s===e;if(i.nodeType||i instanceof _t){for(n=i.nodeType?[i]:i,r=0;r<n.length;r+=1)if(n[r]===s)return!0;return!1}return!1}function yw(){let i=this[0],e;if(i){for(e=0;(i=i.previousSibling)!==null;)i.nodeType===1&&(e+=1);return e}}function _w(i){if(typeof i>"u")return this;const e=this.length;if(i>e-1)return X([]);if(i<0){const t=e+i;return t<0?X([]):X([this[t]])}return X([this[i]])}function ww(...i){let e;const t=Ne();for(let s=0;s<i.length;s+=1){e=i[s];for(let n=0;n<this.length;n+=1)if(typeof e=="string"){const r=t.createElement("div");for(r.innerHTML=e;r.firstChild;)this[n].appendChild(r.firstChild)}else if(e instanceof _t)for(let r=0;r<e.length;r+=1)this[n].appendChild(e[r]);else this[n].appendChild(e)}return this}function kw(i){const e=Ne();let t,s;for(t=0;t<this.length;t+=1)if(typeof i=="string"){const n=e.createElement("div");for(n.innerHTML=i,s=n.childNodes.length-1;s>=0;s-=1)this[t].insertBefore(n.childNodes[s],this[t].childNodes[0])}else if(i instanceof _t)for(s=0;s<i.length;s+=1)this[t].insertBefore(i[s],this[t].childNodes[0]);else this[t].insertBefore(i,this[t].childNodes[0]);return this}function Cw(i){return this.length>0?i?this[0].nextElementSibling&&X(this[0].nextElementSibling).is(i)?X([this[0].nextElementSibling]):X([]):this[0].nextElementSibling?X([this[0].nextElementSibling]):X([]):X([])}function xw(i){const e=[];let t=this[0];if(!t)return X([]);for(;t.nextElementSibling;){const s=t.nextElementSibling;i?X(s).is(i)&&e.push(s):e.push(s),t=s}return X(e)}function Sw(i){if(this.length>0){const e=this[0];return i?e.previousElementSibling&&X(e.previousElementSibling).is(i)?X([e.previousElementSibling]):X([]):e.previousElementSibling?X([e.previousElementSibling]):X([])}return X([])}function Tw(i){const e=[];let t=this[0];if(!t)return X([]);for(;t.previousElementSibling;){const s=t.previousElementSibling;i?X(s).is(i)&&e.push(s):e.push(s),t=s}return X(e)}function Vw(i){const e=[];for(let t=0;t<this.length;t+=1)this[t].parentNode!==null&&(i?X(this[t].parentNode).is(i)&&e.push(this[t].parentNode):e.push(this[t].parentNode));return X(e)}function Iw(i){const e=[];for(let t=0;t<this.length;t+=1){let s=this[t].parentNode;for(;s;)i?X(s).is(i)&&e.push(s):e.push(s),s=s.parentNode}return X(e)}function Lw(i){let e=this;return typeof i>"u"?X([]):(e.is(i)||(e=e.parents(i).eq(0)),e)}function $w(i){const e=[];for(let t=0;t<this.length;t+=1){const s=this[t].querySelectorAll(i);for(let n=0;n<s.length;n+=1)e.push(s[n])}return X(e)}function Pw(i){const e=[];for(let t=0;t<this.length;t+=1){const s=this[t].children;for(let n=0;n<s.length;n+=1)(!i||X(s[n]).is(i))&&e.push(s[n])}return X(e)}function Mw(){for(let i=0;i<this.length;i+=1)this[i].parentNode&&this[i].parentNode.removeChild(this[i]);return this}const En={addClass:J_,removeClass:Q_,hasClass:ew,toggleClass:Z_,attr:tw,removeAttr:iw,transform:sw,transition:nw,on:rw,off:ow,trigger:aw,transitionEnd:lw,outerWidth:uw,outerHeight:dw,styles:cw,offset:hw,css:fw,each:mw,html:pw,text:vw,is:bw,index:yw,eq:_w,append:ww,prepend:kw,next:Cw,nextAll:xw,prev:Sw,prevAll:Tw,parent:Vw,parents:Iw,closest:Lw,find:$w,children:Pw,filter:gw,remove:Mw};Object.keys(En).forEach(i=>{Object.defineProperty(X.fn,i,{value:En[i],writable:!0})});function Ew(i){const e=i;Object.keys(e).forEach(t=>{try{e[t]=null}catch{}try{delete e[t]}catch{}})}function Ws(i,e){return e===void 0&&(e=0),setTimeout(i,e)}function pi(){return Date.now()}function Dw(i){const e=Ie();let t;return e.getComputedStyle&&(t=e.getComputedStyle(i,null)),!t&&i.currentStyle&&(t=i.currentStyle),t||(t=i.style),t}function Bw(i,e){e===void 0&&(e="x");const t=Ie();let s,n,r;const o=Dw(i);return t.WebKitCSSMatrix?(n=o.transform||o.webkitTransform,n.split(",").length>6&&(n=n.split(", ").map(a=>a.replace(",",".")).join(", ")),r=new t.WebKitCSSMatrix(n==="none"?"":n)):(r=o.MozTransform||o.OTransform||o.MsTransform||o.msTransform||o.transform||o.getPropertyValue("transform").replace("translate(","matrix(1, 0, 0, 1,"),s=r.toString().split(",")),e==="x"&&(t.WebKitCSSMatrix?n=r.m41:s.length===16?n=parseFloat(s[12]):n=parseFloat(s[4])),e==="y"&&(t.WebKitCSSMatrix?n=r.m42:s.length===16?n=parseFloat(s[13]):n=parseFloat(s[5])),n||0}function Ii(i){return typeof i=="object"&&i!==null&&i.constructor&&Object.prototype.toString.call(i).slice(8,-1)==="Object"}function Rw(i){return typeof window<"u"&&typeof window.HTMLElement<"u"?i instanceof HTMLElement:i&&(i.nodeType===1||i.nodeType===11)}function ze(){const i=Object(arguments.length<=0?void 0:arguments[0]),e=["__proto__","constructor","prototype"];for(let t=1;t<arguments.length;t+=1){const s=t<0||arguments.length<=t?void 0:arguments[t];if(s!=null&&!Rw(s)){const n=Object.keys(Object(s)).filter(r=>e.indexOf(r)<0);for(let r=0,o=n.length;r<o;r+=1){const a=n[r],l=Object.getOwnPropertyDescriptor(s,a);l!==void 0&&l.enumerable&&(Ii(i[a])&&Ii(s[a])?s[a].__swiper__?i[a]=s[a]:ze(i[a],s[a]):!Ii(i[a])&&Ii(s[a])?(i[a]={},s[a].__swiper__?i[a]=s[a]:ze(i[a],s[a])):i[a]=s[a])}}}return i}function Li(i,e,t){i.style.setProperty(e,t)}function yo(i){let{swiper:e,targetPosition:t,side:s}=i;const n=Ie(),r=-e.translate;let o=null,a;const l=e.params.speed;e.wrapperEl.style.scrollSnapType="none",n.cancelAnimationFrame(e.cssModeFrameID);const u=t>r?"next":"prev",d=(m,p)=>u==="next"&&m>=p||u==="prev"&&m<=p,c=()=>{a=new Date().getTime(),o===null&&(o=a);const m=Math.max(Math.min((a-o)/l,1),0),p=.5-Math.cos(m*Math.PI)/2;let v=r+p*(t-r);if(d(v,t)&&(v=t),e.wrapperEl.scrollTo({[s]:v}),d(v,t)){e.wrapperEl.style.overflow="hidden",e.wrapperEl.style.scrollSnapType="",setTimeout(()=>{e.wrapperEl.style.overflow="",e.wrapperEl.scrollTo({[s]:v})}),n.cancelAnimationFrame(e.cssModeFrameID);return}e.cssModeFrameID=n.requestAnimationFrame(c)};c()}let ps;function Fw(){const i=Ie(),e=Ne();return{smoothScroll:e.documentElement&&"scrollBehavior"in e.documentElement.style,touch:!!("ontouchstart"in i||i.DocumentTouch&&e instanceof i.DocumentTouch),passiveListener:function(){let s=!1;try{const n=Object.defineProperty({},"passive",{get(){s=!0}});i.addEventListener("testPassiveListener",null,n)}catch{}return s}(),gestures:function(){return"ongesturestart"in i}()}}function _o(){return ps||(ps=Fw()),ps}let vs;function zw(i){let{userAgent:e}=i===void 0?{}:i;const t=_o(),s=Ie(),n=s.navigator.platform,r=e||s.navigator.userAgent,o={ios:!1,android:!1},a=s.screen.width,l=s.screen.height,u=r.match(/(Android);?[\s\/]+([\d.]+)?/);let d=r.match(/(iPad).*OS\s([\d_]+)/);const c=r.match(/(iPod)(.*OS\s([\d_]+))?/),m=!d&&r.match(/(iPhone\sOS|iOS)\s([\d_]+)/),p=n==="Win32";let v=n==="MacIntel";const _=["1024x1366","1366x1024","834x1194","1194x834","834x1112","1112x834","768x1024","1024x768","820x1180","1180x820","810x1080","1080x810"];return!d&&v&&t.touch&&_.indexOf(`${a}x${l}`)>=0&&(d=r.match(/(Version)\/([\d.]+)/),d||(d=[0,1,"13_0_0"]),v=!1),u&&!p&&(o.os="android",o.android=!0),(d||m||c)&&(o.os="ios",o.ios=!0),o}function Aw(i){return i===void 0&&(i={}),vs||(vs=zw(i)),vs}let bs;function Ow(){const i=Ie();function e(){const t=i.navigator.userAgent.toLowerCase();return t.indexOf("safari")>=0&&t.indexOf("chrome")<0&&t.indexOf("android")<0}return{isSafari:e(),isWebView:/(iPhone|iPod|iPad).*AppleWebKit(?!.*Safari)/i.test(i.navigator.userAgent)}}function Nw(){return bs||(bs=Ow()),bs}function Hw(i){let{swiper:e,on:t,emit:s}=i;const n=Ie();let r=null,o=null;const a=()=>{!e||e.destroyed||!e.initialized||(s("beforeResize"),s("resize"))},l=()=>{!e||e.destroyed||!e.initialized||(r=new ResizeObserver(c=>{o=n.requestAnimationFrame(()=>{const{width:m,height:p}=e;let v=m,_=p;c.forEach(b=>{let{contentBoxSize:T,contentRect:S,target:$}=b;$&&$!==e.el||(v=S?S.width:(T[0]||T).inlineSize,_=S?S.height:(T[0]||T).blockSize)}),(v!==m||_!==p)&&a()})}),r.observe(e.el))},u=()=>{o&&n.cancelAnimationFrame(o),r&&r.unobserve&&e.el&&(r.unobserve(e.el),r=null)},d=()=>{!e||e.destroyed||!e.initialized||s("orientationchange")};t("init",()=>{if(e.params.resizeObserver&&typeof n.ResizeObserver<"u"){l();return}n.addEventListener("resize",a),n.addEventListener("orientationchange",d)}),t("destroy",()=>{u(),n.removeEventListener("resize",a),n.removeEventListener("orientationchange",d)})}function Ww(i){let{swiper:e,extendParams:t,on:s,emit:n}=i;const r=[],o=Ie(),a=function(d,c){c===void 0&&(c={});const m=o.MutationObserver||o.WebkitMutationObserver,p=new m(v=>{if(v.length===1){n("observerUpdate",v[0]);return}const _=function(){n("observerUpdate",v[0])};o.requestAnimationFrame?o.requestAnimationFrame(_):o.setTimeout(_,0)});p.observe(d,{attributes:typeof c.attributes>"u"?!0:c.attributes,childList:typeof c.childList>"u"?!0:c.childList,characterData:typeof c.characterData>"u"?!0:c.characterData}),r.push(p)},l=()=>{if(e.params.observer){if(e.params.observeParents){const d=e.$el.parents();for(let c=0;c<d.length;c+=1)a(d[c])}a(e.$el[0],{childList:e.params.observeSlideChildren}),a(e.$wrapperEl[0],{attributes:!1})}},u=()=>{r.forEach(d=>{d.disconnect()}),r.splice(0,r.length)};t({observer:!1,observeParents:!1,observeSlideChildren:!1}),s("init",l),s("destroy",u)}const Gw={on(i,e,t){const s=this;if(!s.eventsListeners||s.destroyed||typeof e!="function")return s;const n=t?"unshift":"push";return i.split(" ").forEach(r=>{s.eventsListeners[r]||(s.eventsListeners[r]=[]),s.eventsListeners[r][n](e)}),s},once(i,e,t){const s=this;if(!s.eventsListeners||s.destroyed||typeof e!="function")return s;function n(){s.off(i,n),n.__emitterProxy&&delete n.__emitterProxy;for(var r=arguments.length,o=new Array(r),a=0;a<r;a++)o[a]=arguments[a];e.apply(s,o)}return n.__emitterProxy=e,s.on(i,n,t)},onAny(i,e){const t=this;if(!t.eventsListeners||t.destroyed||typeof i!="function")return t;const s=e?"unshift":"push";return t.eventsAnyListeners.indexOf(i)<0&&t.eventsAnyListeners[s](i),t},offAny(i){const e=this;if(!e.eventsListeners||e.destroyed||!e.eventsAnyListeners)return e;const t=e.eventsAnyListeners.indexOf(i);return t>=0&&e.eventsAnyListeners.splice(t,1),e},off(i,e){const t=this;return!t.eventsListeners||t.destroyed||!t.eventsListeners||i.split(" ").forEach(s=>{typeof e>"u"?t.eventsListeners[s]=[]:t.eventsListeners[s]&&t.eventsListeners[s].forEach((n,r)=>{(n===e||n.__emitterProxy&&n.__emitterProxy===e)&&t.eventsListeners[s].splice(r,1)})}),t},emit(){const i=this;if(!i.eventsListeners||i.destroyed||!i.eventsListeners)return i;let e,t,s;for(var n=arguments.length,r=new Array(n),o=0;o<n;o++)r[o]=arguments[o];return typeof r[0]=="string"||Array.isArray(r[0])?(e=r[0],t=r.slice(1,r.length),s=i):(e=r[0].events,t=r[0].data,s=r[0].context||i),t.unshift(s),(Array.isArray(e)?e:e.split(" ")).forEach(l=>{i.eventsAnyListeners&&i.eventsAnyListeners.length&&i.eventsAnyListeners.forEach(u=>{u.apply(s,[l,...t])}),i.eventsListeners&&i.eventsListeners[l]&&i.eventsListeners[l].forEach(u=>{u.apply(s,t)})}),i}};function Uw(){const i=this;let e,t;const s=i.$el;typeof i.params.width<"u"&&i.params.width!==null?e=i.params.width:e=s[0].clientWidth,typeof i.params.height<"u"&&i.params.height!==null?t=i.params.height:t=s[0].clientHeight,!(e===0&&i.isHorizontal()||t===0&&i.isVertical())&&(e=e-parseInt(s.css("padding-left")||0,10)-parseInt(s.css("padding-right")||0,10),t=t-parseInt(s.css("padding-top")||0,10)-parseInt(s.css("padding-bottom")||0,10),Number.isNaN(e)&&(e=0),Number.isNaN(t)&&(t=0),Object.assign(i,{width:e,height:t,size:i.isHorizontal()?e:t}))}function Yw(){const i=this;function e(M){return i.isHorizontal()?M:{width:"height","margin-top":"margin-left","margin-bottom ":"margin-right","margin-left":"margin-top","margin-right":"margin-bottom","padding-left":"padding-top","padding-right":"padding-bottom",marginRight:"marginBottom"}[M]}function t(M,B){return parseFloat(M.getPropertyValue(e(B))||0)}const s=i.params,{$wrapperEl:n,size:r,rtlTranslate:o,wrongRTL:a}=i,l=i.virtual&&s.virtual.enabled,u=l?i.virtual.slides.length:i.slides.length,d=n.children(`.${i.params.slideClass}`),c=l?i.virtual.slides.length:d.length;let m=[];const p=[],v=[];let _=s.slidesOffsetBefore;typeof _=="function"&&(_=s.slidesOffsetBefore.call(i));let b=s.slidesOffsetAfter;typeof b=="function"&&(b=s.slidesOffsetAfter.call(i));const T=i.snapGrid.length,S=i.slidesGrid.length;let $=s.spaceBetween,I=-_,E=0,C=0;if(typeof r>"u")return;typeof $=="string"&&$.indexOf("%")>=0&&($=parseFloat($.replace("%",""))/100*r),i.virtualSize=-$,o?d.css({marginLeft:"",marginBottom:"",marginTop:""}):d.css({marginRight:"",marginBottom:"",marginTop:""}),s.centeredSlides&&s.cssMode&&(Li(i.wrapperEl,"--swiper-centered-offset-before",""),Li(i.wrapperEl,"--swiper-centered-offset-after",""));const A=s.grid&&s.grid.rows>1&&i.grid;A&&i.grid.initSlides(c);let D;const F=s.slidesPerView==="auto"&&s.breakpoints&&Object.keys(s.breakpoints).filter(M=>typeof s.breakpoints[M].slidesPerView<"u").length>0;for(let M=0;M<c;M+=1){D=0;const B=d.eq(M);if(A&&i.grid.updateSlide(M,B,c,e),B.css("display")!=="none"){if(s.slidesPerView==="auto"){F&&(d[M].style[e("width")]="");const J=getComputedStyle(B[0]),oe=B[0].style.transform,N=B[0].style.webkitTransform;if(oe&&(B[0].style.transform="none"),N&&(B[0].style.webkitTransform="none"),s.roundLengths)D=i.isHorizontal()?B.outerWidth(!0):B.outerHeight(!0);else{const re=t(J,"width"),ne=t(J,"padding-left"),se=t(J,"padding-right"),Ee=t(J,"margin-left"),ge=t(J,"margin-right"),He=J.getPropertyValue("box-sizing");if(He&&He==="border-box")D=re+Ee+ge;else{const{clientWidth:he,offsetWidth:St}=B[0];D=re+ne+se+Ee+ge+(St-he)}}oe&&(B[0].style.transform=oe),N&&(B[0].style.webkitTransform=N),s.roundLengths&&(D=Math.floor(D))}else D=(r-(s.slidesPerView-1)*$)/s.slidesPerView,s.roundLengths&&(D=Math.floor(D)),d[M]&&(d[M].style[e("width")]=`${D}px`);d[M]&&(d[M].swiperSlideSize=D),v.push(D),s.centeredSlides?(I=I+D/2+E/2+$,E===0&&M!==0&&(I=I-r/2-$),M===0&&(I=I-r/2-$),Math.abs(I)<1/1e3&&(I=0),s.roundLengths&&(I=Math.floor(I)),C%s.slidesPerGroup===0&&m.push(I),p.push(I)):(s.roundLengths&&(I=Math.floor(I)),(C-Math.min(i.params.slidesPerGroupSkip,C))%i.params.slidesPerGroup===0&&m.push(I),p.push(I),I=I+D+$),i.virtualSize+=D+$,E=D,C+=1}}if(i.virtualSize=Math.max(i.virtualSize,r)+b,o&&a&&(s.effect==="slide"||s.effect==="coverflow")&&n.css({width:`${i.virtualSize+s.spaceBetween}px`}),s.setWrapperSize&&n.css({[e("width")]:`${i.virtualSize+s.spaceBetween}px`}),A&&i.grid.updateWrapperSize(D,m,e),!s.centeredSlides){const M=[];for(let B=0;B<m.length;B+=1){let J=m[B];s.roundLengths&&(J=Math.floor(J)),m[B]<=i.virtualSize-r&&M.push(J)}m=M,Math.floor(i.virtualSize-r)-Math.floor(m[m.length-1])>1&&m.push(i.virtualSize-r)}if(m.length===0&&(m=[0]),s.spaceBetween!==0){const M=i.isHorizontal()&&o?"marginLeft":e("marginRight");d.filter((B,J)=>s.cssMode?J!==d.length-1:!0).css({[M]:`${$}px`})}if(s.centeredSlides&&s.centeredSlidesBounds){let M=0;v.forEach(J=>{M+=J+(s.spaceBetween?s.spaceBetween:0)}),M-=s.spaceBetween;const B=M-r;m=m.map(J=>J<0?-_:J>B?B+b:J)}if(s.centerInsufficientSlides){let M=0;if(v.forEach(B=>{M+=B+(s.spaceBetween?s.spaceBetween:0)}),M-=s.spaceBetween,M<r){const B=(r-M)/2;m.forEach((J,oe)=>{m[oe]=J-B}),p.forEach((J,oe)=>{p[oe]=J+B})}}if(Object.assign(i,{slides:d,snapGrid:m,slidesGrid:p,slidesSizesGrid:v}),s.centeredSlides&&s.cssMode&&!s.centeredSlidesBounds){Li(i.wrapperEl,"--swiper-centered-offset-before",`${-m[0]}px`),Li(i.wrapperEl,"--swiper-centered-offset-after",`${i.size/2-v[v.length-1]/2}px`);const M=-i.snapGrid[0],B=-i.slidesGrid[0];i.snapGrid=i.snapGrid.map(J=>J+M),i.slidesGrid=i.slidesGrid.map(J=>J+B)}if(c!==u&&i.emit("slidesLengthChange"),m.length!==T&&(i.params.watchOverflow&&i.checkOverflow(),i.emit("snapGridLengthChange")),p.length!==S&&i.emit("slidesGridLengthChange"),s.watchSlidesProgress&&i.updateSlidesOffset(),!l&&!s.cssMode&&(s.effect==="slide"||s.effect==="fade")){const M=`${s.containerModifierClass}backface-hidden`,B=i.$el.hasClass(M);c<=s.maxBackfaceHiddenSlides?B||i.$el.addClass(M):B&&i.$el.removeClass(M)}}function qw(i){const e=this,t=[],s=e.virtual&&e.params.virtual.enabled;let n=0,r;typeof i=="number"?e.setTransition(i):i===!0&&e.setTransition(e.params.speed);const o=a=>s?e.slides.filter(l=>parseInt(l.getAttribute("data-swiper-slide-index"),10)===a)[0]:e.slides.eq(a)[0];if(e.params.slidesPerView!=="auto"&&e.params.slidesPerView>1)if(e.params.centeredSlides)(e.visibleSlides||X([])).each(a=>{t.push(a)});else for(r=0;r<Math.ceil(e.params.slidesPerView);r+=1){const a=e.activeIndex+r;if(a>e.slides.length&&!s)break;t.push(o(a))}else t.push(o(e.activeIndex));for(r=0;r<t.length;r+=1)if(typeof t[r]<"u"){const a=t[r].offsetHeight;n=a>n?a:n}(n||n===0)&&e.$wrapperEl.css("height",`${n}px`)}function Xw(){const i=this,e=i.slides;for(let t=0;t<e.length;t+=1)e[t].swiperSlideOffset=i.isHorizontal()?e[t].offsetLeft:e[t].offsetTop}function Kw(i){i===void 0&&(i=this&&this.translate||0);const e=this,t=e.params,{slides:s,rtlTranslate:n,snapGrid:r}=e;if(s.length===0)return;typeof s[0].swiperSlideOffset>"u"&&e.updateSlidesOffset();let o=-i;n&&(o=i),s.removeClass(t.slideVisibleClass),e.visibleSlidesIndexes=[],e.visibleSlides=[];for(let a=0;a<s.length;a+=1){const l=s[a];let u=l.swiperSlideOffset;t.cssMode&&t.centeredSlides&&(u-=s[0].swiperSlideOffset);const d=(o+(t.centeredSlides?e.minTranslate():0)-u)/(l.swiperSlideSize+t.spaceBetween),c=(o-r[0]+(t.centeredSlides?e.minTranslate():0)-u)/(l.swiperSlideSize+t.spaceBetween),m=-(o-u),p=m+e.slidesSizesGrid[a];(m>=0&&m<e.size-1||p>1&&p<=e.size||m<=0&&p>=e.size)&&(e.visibleSlides.push(l),e.visibleSlidesIndexes.push(a),s.eq(a).addClass(t.slideVisibleClass)),l.progress=n?-d:d,l.originalProgress=n?-c:c}e.visibleSlides=X(e.visibleSlides)}function jw(i){const e=this;if(typeof i>"u"){const u=e.rtlTranslate?-1:1;i=e&&e.translate&&e.translate*u||0}const t=e.params,s=e.maxTranslate()-e.minTranslate();let{progress:n,isBeginning:r,isEnd:o}=e;const a=r,l=o;s===0?(n=0,r=!0,o=!0):(n=(i-e.minTranslate())/s,r=n<=0,o=n>=1),Object.assign(e,{progress:n,isBeginning:r,isEnd:o}),(t.watchSlidesProgress||t.centeredSlides&&t.autoHeight)&&e.updateSlidesProgress(i),r&&!a&&e.emit("reachBeginning toEdge"),o&&!l&&e.emit("reachEnd toEdge"),(a&&!r||l&&!o)&&e.emit("fromEdge"),e.emit("progress",n)}function Jw(){const i=this,{slides:e,params:t,$wrapperEl:s,activeIndex:n,realIndex:r}=i,o=i.virtual&&t.virtual.enabled;e.removeClass(`${t.slideActiveClass} ${t.slideNextClass} ${t.slidePrevClass} ${t.slideDuplicateActiveClass} ${t.slideDuplicateNextClass} ${t.slideDuplicatePrevClass}`);let a;o?a=i.$wrapperEl.find(`.${t.slideClass}[data-swiper-slide-index="${n}"]`):a=e.eq(n),a.addClass(t.slideActiveClass),t.loop&&(a.hasClass(t.slideDuplicateClass)?s.children(`.${t.slideClass}:not(.${t.slideDuplicateClass})[data-swiper-slide-index="${r}"]`).addClass(t.slideDuplicateActiveClass):s.children(`.${t.slideClass}.${t.slideDuplicateClass}[data-swiper-slide-index="${r}"]`).addClass(t.slideDuplicateActiveClass));let l=a.nextAll(`.${t.slideClass}`).eq(0).addClass(t.slideNextClass);t.loop&&l.length===0&&(l=e.eq(0),l.addClass(t.slideNextClass));let u=a.prevAll(`.${t.slideClass}`).eq(0).addClass(t.slidePrevClass);t.loop&&u.length===0&&(u=e.eq(-1),u.addClass(t.slidePrevClass)),t.loop&&(l.hasClass(t.slideDuplicateClass)?s.children(`.${t.slideClass}:not(.${t.slideDuplicateClass})[data-swiper-slide-index="${l.attr("data-swiper-slide-index")}"]`).addClass(t.slideDuplicateNextClass):s.children(`.${t.slideClass}.${t.slideDuplicateClass}[data-swiper-slide-index="${l.attr("data-swiper-slide-index")}"]`).addClass(t.slideDuplicateNextClass),u.hasClass(t.slideDuplicateClass)?s.children(`.${t.slideClass}:not(.${t.slideDuplicateClass})[data-swiper-slide-index="${u.attr("data-swiper-slide-index")}"]`).addClass(t.slideDuplicatePrevClass):s.children(`.${t.slideClass}.${t.slideDuplicateClass}[data-swiper-slide-index="${u.attr("data-swiper-slide-index")}"]`).addClass(t.slideDuplicatePrevClass)),i.emitSlidesClasses()}function Qw(i){const e=this,t=e.rtlTranslate?e.translate:-e.translate,{slidesGrid:s,snapGrid:n,params:r,activeIndex:o,realIndex:a,snapIndex:l}=e;let u=i,d;if(typeof u>"u"){for(let m=0;m<s.length;m+=1)typeof s[m+1]<"u"?t>=s[m]&&t<s[m+1]-(s[m+1]-s[m])/2?u=m:t>=s[m]&&t<s[m+1]&&(u=m+1):t>=s[m]&&(u=m);r.normalizeSlideIndex&&(u<0||typeof u>"u")&&(u=0)}if(n.indexOf(t)>=0)d=n.indexOf(t);else{const m=Math.min(r.slidesPerGroupSkip,u);d=m+Math.floor((u-m)/r.slidesPerGroup)}if(d>=n.length&&(d=n.length-1),u===o){d!==l&&(e.snapIndex=d,e.emit("snapIndexChange"));return}const c=parseInt(e.slides.eq(u).attr("data-swiper-slide-index")||u,10);Object.assign(e,{snapIndex:d,realIndex:c,previousIndex:o,activeIndex:u}),e.emit("activeIndexChange"),e.emit("snapIndexChange"),a!==c&&e.emit("realIndexChange"),(e.initialized||e.params.runCallbacksOnInit)&&e.emit("slideChange")}function Zw(i){const e=this,t=e.params,s=X(i).closest(`.${t.slideClass}`)[0];let n=!1,r;if(s){for(let o=0;o<e.slides.length;o+=1)if(e.slides[o]===s){n=!0,r=o;break}}if(s&&n)e.clickedSlide=s,e.virtual&&e.params.virtual.enabled?e.clickedIndex=parseInt(X(s).attr("data-swiper-slide-index"),10):e.clickedIndex=r;else{e.clickedSlide=void 0,e.clickedIndex=void 0;return}t.slideToClickedSlide&&e.clickedIndex!==void 0&&e.clickedIndex!==e.activeIndex&&e.slideToClickedSlide()}const ek={updateSize:Uw,updateSlides:Yw,updateAutoHeight:qw,updateSlidesOffset:Xw,updateSlidesProgress:Kw,updateProgress:jw,updateSlidesClasses:Jw,updateActiveIndex:Qw,updateClickedSlide:Zw};function tk(i){i===void 0&&(i=this.isHorizontal()?"x":"y");const e=this,{params:t,rtlTranslate:s,translate:n,$wrapperEl:r}=e;if(t.virtualTranslate)return s?-n:n;if(t.cssMode)return n;let o=Bw(r[0],i);return s&&(o=-o),o||0}function ik(i,e){const t=this,{rtlTranslate:s,params:n,$wrapperEl:r,wrapperEl:o,progress:a}=t;let l=0,u=0;const d=0;t.isHorizontal()?l=s?-i:i:u=i,n.roundLengths&&(l=Math.floor(l),u=Math.floor(u)),n.cssMode?o[t.isHorizontal()?"scrollLeft":"scrollTop"]=t.isHorizontal()?-l:-u:n.virtualTranslate||r.transform(`translate3d(${l}px, ${u}px, ${d}px)`),t.previousTranslate=t.translate,t.translate=t.isHorizontal()?l:u;let c;const m=t.maxTranslate()-t.minTranslate();m===0?c=0:c=(i-t.minTranslate())/m,c!==a&&t.updateProgress(i),t.emit("setTranslate",t.translate,e)}function sk(){return-this.snapGrid[0]}function nk(){return-this.snapGrid[this.snapGrid.length-1]}function rk(i,e,t,s,n){i===void 0&&(i=0),e===void 0&&(e=this.params.speed),t===void 0&&(t=!0),s===void 0&&(s=!0);const r=this,{params:o,wrapperEl:a}=r;if(r.animating&&o.preventInteractionOnTransition)return!1;const l=r.minTranslate(),u=r.maxTranslate();let d;if(s&&i>l?d=l:s&&i<u?d=u:d=i,r.updateProgress(d),o.cssMode){const c=r.isHorizontal();if(e===0)a[c?"scrollLeft":"scrollTop"]=-d;else{if(!r.support.smoothScroll)return yo({swiper:r,targetPosition:-d,side:c?"left":"top"}),!0;a.scrollTo({[c?"left":"top"]:-d,behavior:"smooth"})}return!0}return e===0?(r.setTransition(0),r.setTranslate(d),t&&(r.emit("beforeTransitionStart",e,n),r.emit("transitionEnd"))):(r.setTransition(e),r.setTranslate(d),t&&(r.emit("beforeTransitionStart",e,n),r.emit("transitionStart")),r.animating||(r.animating=!0,r.onTranslateToWrapperTransitionEnd||(r.onTranslateToWrapperTransitionEnd=function(m){!r||r.destroyed||m.target===this&&(r.$wrapperEl[0].removeEventListener("transitionend",r.onTranslateToWrapperTransitionEnd),r.$wrapperEl[0].removeEventListener("webkitTransitionEnd",r.onTranslateToWrapperTransitionEnd),r.onTranslateToWrapperTransitionEnd=null,delete r.onTranslateToWrapperTransitionEnd,t&&r.emit("transitionEnd"))}),r.$wrapperEl[0].addEventListener("transitionend",r.onTranslateToWrapperTransitionEnd),r.$wrapperEl[0].addEventListener("webkitTransitionEnd",r.onTranslateToWrapperTransitionEnd))),!0}const ok={getTranslate:tk,setTranslate:ik,minTranslate:sk,maxTranslate:nk,translateTo:rk};function ak(i,e){const t=this;t.params.cssMode||t.$wrapperEl.transition(i),t.emit("setTransition",i,e)}function wo(i){let{swiper:e,runCallbacks:t,direction:s,step:n}=i;const{activeIndex:r,previousIndex:o}=e;let a=s;if(a||(r>o?a="next":r<o?a="prev":a="reset"),e.emit(`transition${n}`),t&&r!==o){if(a==="reset"){e.emit(`slideResetTransition${n}`);return}e.emit(`slideChangeTransition${n}`),a==="next"?e.emit(`slideNextTransition${n}`):e.emit(`slidePrevTransition${n}`)}}function lk(i,e){i===void 0&&(i=!0);const t=this,{params:s}=t;s.cssMode||(s.autoHeight&&t.updateAutoHeight(),wo({swiper:t,runCallbacks:i,direction:e,step:"Start"}))}function uk(i,e){i===void 0&&(i=!0);const t=this,{params:s}=t;t.animating=!1,!s.cssMode&&(t.setTransition(0),wo({swiper:t,runCallbacks:i,direction:e,step:"End"}))}const dk={setTransition:ak,transitionStart:lk,transitionEnd:uk};function hk(i,e,t,s,n){if(i===void 0&&(i=0),e===void 0&&(e=this.params.speed),t===void 0&&(t=!0),typeof i!="number"&&typeof i!="string")throw new Error(`The 'index' argument cannot have type other than 'number' or 'string'. [${typeof i}] given.`);if(typeof i=="string"){const $=parseInt(i,10);if(!isFinite($))throw new Error(`The passed-in 'index' (string) couldn't be converted to 'number'. [${i}] given.`);i=$}const r=this;let o=i;o<0&&(o=0);const{params:a,snapGrid:l,slidesGrid:u,previousIndex:d,activeIndex:c,rtlTranslate:m,wrapperEl:p,enabled:v}=r;if(r.animating&&a.preventInteractionOnTransition||!v&&!s&&!n)return!1;const _=Math.min(r.params.slidesPerGroupSkip,o);let b=_+Math.floor((o-_)/r.params.slidesPerGroup);b>=l.length&&(b=l.length-1),(c||a.initialSlide||0)===(d||0)&&t&&r.emit("beforeSlideChangeStart");const T=-l[b];if(r.updateProgress(T),a.normalizeSlideIndex)for(let $=0;$<u.length;$+=1){const I=-Math.floor(T*100),E=Math.floor(u[$]*100),C=Math.floor(u[$+1]*100);typeof u[$+1]<"u"?I>=E&&I<C-(C-E)/2?o=$:I>=E&&I<C&&(o=$+1):I>=E&&(o=$)}if(r.initialized&&o!==c&&(!r.allowSlideNext&&T<r.translate&&T<r.minTranslate()||!r.allowSlidePrev&&T>r.translate&&T>r.maxTranslate()&&(c||0)!==o))return!1;let S;if(o>c?S="next":o<c?S="prev":S="reset",m&&-T===r.translate||!m&&T===r.translate)return r.updateActiveIndex(o),a.autoHeight&&r.updateAutoHeight(),r.updateSlidesClasses(),a.effect!=="slide"&&r.setTranslate(T),S!=="reset"&&(r.transitionStart(t,S),r.transitionEnd(t,S)),!1;if(a.cssMode){const $=r.isHorizontal(),I=m?T:-T;if(e===0){const E=r.virtual&&r.params.virtual.enabled;E&&(r.wrapperEl.style.scrollSnapType="none",r._immediateVirtual=!0),p[$?"scrollLeft":"scrollTop"]=I,E&&requestAnimationFrame(()=>{r.wrapperEl.style.scrollSnapType="",r._swiperImmediateVirtual=!1})}else{if(!r.support.smoothScroll)return yo({swiper:r,targetPosition:I,side:$?"left":"top"}),!0;p.scrollTo({[$?"left":"top"]:I,behavior:"smooth"})}return!0}return r.setTransition(e),r.setTranslate(T),r.updateActiveIndex(o),r.updateSlidesClasses(),r.emit("beforeTransitionStart",e,s),r.transitionStart(t,S),e===0?r.transitionEnd(t,S):r.animating||(r.animating=!0,r.onSlideToWrapperTransitionEnd||(r.onSlideToWrapperTransitionEnd=function(I){!r||r.destroyed||I.target===this&&(r.$wrapperEl[0].removeEventListener("transitionend",r.onSlideToWrapperTransitionEnd),r.$wrapperEl[0].removeEventListener("webkitTransitionEnd",r.onSlideToWrapperTransitionEnd),r.onSlideToWrapperTransitionEnd=null,delete r.onSlideToWrapperTransitionEnd,r.transitionEnd(t,S))}),r.$wrapperEl[0].addEventListener("transitionend",r.onSlideToWrapperTransitionEnd),r.$wrapperEl[0].addEventListener("webkitTransitionEnd",r.onSlideToWrapperTransitionEnd)),!0}function ck(i,e,t,s){if(i===void 0&&(i=0),e===void 0&&(e=this.params.speed),t===void 0&&(t=!0),typeof i=="string"){const o=parseInt(i,10);if(!isFinite(o))throw new Error(`The passed-in 'index' (string) couldn't be converted to 'number'. [${i}] given.`);i=o}const n=this;let r=i;return n.params.loop&&(r+=n.loopedSlides),n.slideTo(r,e,t,s)}function fk(i,e,t){i===void 0&&(i=this.params.speed),e===void 0&&(e=!0);const s=this,{animating:n,enabled:r,params:o}=s;if(!r)return s;let a=o.slidesPerGroup;o.slidesPerView==="auto"&&o.slidesPerGroup===1&&o.slidesPerGroupAuto&&(a=Math.max(s.slidesPerViewDynamic("current",!0),1));const l=s.activeIndex<o.slidesPerGroupSkip?1:a;if(o.loop){if(n&&o.loopPreventsSlide)return!1;s.loopFix(),s._clientLeft=s.$wrapperEl[0].clientLeft}return o.rewind&&s.isEnd?s.slideTo(0,i,e,t):s.slideTo(s.activeIndex+l,i,e,t)}function mk(i,e,t){i===void 0&&(i=this.params.speed),e===void 0&&(e=!0);const s=this,{params:n,animating:r,snapGrid:o,slidesGrid:a,rtlTranslate:l,enabled:u}=s;if(!u)return s;if(n.loop){if(r&&n.loopPreventsSlide)return!1;s.loopFix(),s._clientLeft=s.$wrapperEl[0].clientLeft}const d=l?s.translate:-s.translate;function c(b){return b<0?-Math.floor(Math.abs(b)):Math.floor(b)}const m=c(d),p=o.map(b=>c(b));let v=o[p.indexOf(m)-1];if(typeof v>"u"&&n.cssMode){let b;o.forEach((T,S)=>{m>=T&&(b=S)}),typeof b<"u"&&(v=o[b>0?b-1:b])}let _=0;if(typeof v<"u"&&(_=a.indexOf(v),_<0&&(_=s.activeIndex-1),n.slidesPerView==="auto"&&n.slidesPerGroup===1&&n.slidesPerGroupAuto&&(_=_-s.slidesPerViewDynamic("previous",!0)+1,_=Math.max(_,0))),n.rewind&&s.isBeginning){const b=s.params.virtual&&s.params.virtual.enabled&&s.virtual?s.virtual.slides.length-1:s.slides.length-1;return s.slideTo(b,i,e,t)}return s.slideTo(_,i,e,t)}function gk(i,e,t){i===void 0&&(i=this.params.speed),e===void 0&&(e=!0);const s=this;return s.slideTo(s.activeIndex,i,e,t)}function pk(i,e,t,s){i===void 0&&(i=this.params.speed),e===void 0&&(e=!0),s===void 0&&(s=.5);const n=this;let r=n.activeIndex;const o=Math.min(n.params.slidesPerGroupSkip,r),a=o+Math.floor((r-o)/n.params.slidesPerGroup),l=n.rtlTranslate?n.translate:-n.translate;if(l>=n.snapGrid[a]){const u=n.snapGrid[a],d=n.snapGrid[a+1];l-u>(d-u)*s&&(r+=n.params.slidesPerGroup)}else{const u=n.snapGrid[a-1],d=n.snapGrid[a];l-u<=(d-u)*s&&(r-=n.params.slidesPerGroup)}return r=Math.max(r,0),r=Math.min(r,n.slidesGrid.length-1),n.slideTo(r,i,e,t)}function vk(){const i=this,{params:e,$wrapperEl:t}=i,s=e.slidesPerView==="auto"?i.slidesPerViewDynamic():e.slidesPerView;let n=i.clickedIndex,r;if(e.loop){if(i.animating)return;r=parseInt(X(i.clickedSlide).attr("data-swiper-slide-index"),10),e.centeredSlides?n<i.loopedSlides-s/2||n>i.slides.length-i.loopedSlides+s/2?(i.loopFix(),n=t.children(`.${e.slideClass}[data-swiper-slide-index="${r}"]:not(.${e.slideDuplicateClass})`).eq(0).index(),Ws(()=>{i.slideTo(n)})):i.slideTo(n):n>i.slides.length-s?(i.loopFix(),n=t.children(`.${e.slideClass}[data-swiper-slide-index="${r}"]:not(.${e.slideDuplicateClass})`).eq(0).index(),Ws(()=>{i.slideTo(n)})):i.slideTo(n)}else i.slideTo(n)}const bk={slideTo:hk,slideToLoop:ck,slideNext:fk,slidePrev:mk,slideReset:gk,slideToClosest:pk,slideToClickedSlide:vk};function yk(){const i=this,e=Ne(),{params:t,$wrapperEl:s}=i,n=s.children().length>0?X(s.children()[0].parentNode):s;n.children(`.${t.slideClass}.${t.slideDuplicateClass}`).remove();let r=n.children(`.${t.slideClass}`);if(t.loopFillGroupWithBlank){const l=t.slidesPerGroup-r.length%t.slidesPerGroup;if(l!==t.slidesPerGroup){for(let u=0;u<l;u+=1){const d=X(e.createElement("div")).addClass(`${t.slideClass} ${t.slideBlankClass}`);n.append(d)}r=n.children(`.${t.slideClass}`)}}t.slidesPerView==="auto"&&!t.loopedSlides&&(t.loopedSlides=r.length),i.loopedSlides=Math.ceil(parseFloat(t.loopedSlides||t.slidesPerView,10)),i.loopedSlides+=t.loopAdditionalSlides,i.loopedSlides>r.length&&i.params.loopedSlidesLimit&&(i.loopedSlides=r.length);const o=[],a=[];r.each((l,u)=>{X(l).attr("data-swiper-slide-index",u)});for(let l=0;l<i.loopedSlides;l+=1){const u=l-Math.floor(l/r.length)*r.length;a.push(r.eq(u)[0]),o.unshift(r.eq(r.length-u-1)[0])}for(let l=0;l<a.length;l+=1)n.append(X(a[l].cloneNode(!0)).addClass(t.slideDuplicateClass));for(let l=o.length-1;l>=0;l-=1)n.prepend(X(o[l].cloneNode(!0)).addClass(t.slideDuplicateClass))}function _k(){const i=this;i.emit("beforeLoopFix");const{activeIndex:e,slides:t,loopedSlides:s,allowSlidePrev:n,allowSlideNext:r,snapGrid:o,rtlTranslate:a}=i;let l;i.allowSlidePrev=!0,i.allowSlideNext=!0;const d=-o[e]-i.getTranslate();e<s?(l=t.length-s*3+e,l+=s,i.slideTo(l,0,!1,!0)&&d!==0&&i.setTranslate((a?-i.translate:i.translate)-d)):e>=t.length-s&&(l=-t.length+e+s,l+=s,i.slideTo(l,0,!1,!0)&&d!==0&&i.setTranslate((a?-i.translate:i.translate)-d)),i.allowSlidePrev=n,i.allowSlideNext=r,i.emit("loopFix")}function wk(){const i=this,{$wrapperEl:e,params:t,slides:s}=i;e.children(`.${t.slideClass}.${t.slideDuplicateClass},.${t.slideClass}.${t.slideBlankClass}`).remove(),s.removeAttr("data-swiper-slide-index")}const kk={loopCreate:yk,loopFix:_k,loopDestroy:wk};function Ck(i){const e=this;if(e.support.touch||!e.params.simulateTouch||e.params.watchOverflow&&e.isLocked||e.params.cssMode)return;const t=e.params.touchEventsTarget==="container"?e.el:e.wrapperEl;t.style.cursor="move",t.style.cursor=i?"grabbing":"grab"}function xk(){const i=this;i.support.touch||i.params.watchOverflow&&i.isLocked||i.params.cssMode||(i[i.params.touchEventsTarget==="container"?"el":"wrapperEl"].style.cursor="")}const Sk={setGrabCursor:Ck,unsetGrabCursor:xk};function Tk(i,e){e===void 0&&(e=this);function t(s){if(!s||s===Ne()||s===Ie())return null;s.assignedSlot&&(s=s.assignedSlot);const n=s.closest(i);return!n&&!s.getRootNode?null:n||t(s.getRootNode().host)}return t(e)}function Vk(i){const e=this,t=Ne(),s=Ie(),n=e.touchEventsData,{params:r,touches:o,enabled:a}=e;if(!a||e.animating&&r.preventInteractionOnTransition)return;!e.animating&&r.cssMode&&r.loop&&e.loopFix();let l=i;l.originalEvent&&(l=l.originalEvent);let u=X(l.target);if(r.touchEventsTarget==="wrapper"&&!u.closest(e.wrapperEl).length||(n.isTouchEvent=l.type==="touchstart",!n.isTouchEvent&&"which"in l&&l.which===3)||!n.isTouchEvent&&"button"in l&&l.button>0||n.isTouched&&n.isMoved)return;!!r.noSwipingClass&&r.noSwipingClass!==""&&l.target&&l.target.shadowRoot&&i.path&&i.path[0]&&(u=X(i.path[0]));const c=r.noSwipingSelector?r.noSwipingSelector:`.${r.noSwipingClass}`,m=!!(l.target&&l.target.shadowRoot);if(r.noSwiping&&(m?Tk(c,u[0]):u.closest(c)[0])){e.allowClick=!0;return}if(r.swipeHandler&&!u.closest(r.swipeHandler)[0])return;o.currentX=l.type==="touchstart"?l.targetTouches[0].pageX:l.pageX,o.currentY=l.type==="touchstart"?l.targetTouches[0].pageY:l.pageY;const p=o.currentX,v=o.currentY,_=r.edgeSwipeDetection||r.iOSEdgeSwipeDetection,b=r.edgeSwipeThreshold||r.iOSEdgeSwipeThreshold;if(_&&(p<=b||p>=s.innerWidth-b))if(_==="prevent")i.preventDefault();else return;if(Object.assign(n,{isTouched:!0,isMoved:!1,allowTouchCallbacks:!0,isScrolling:void 0,startMoving:void 0}),o.startX=p,o.startY=v,n.touchStartTime=pi(),e.allowClick=!0,e.updateSize(),e.swipeDirection=void 0,r.threshold>0&&(n.allowThresholdMove=!1),l.type!=="touchstart"){let T=!0;u.is(n.focusableElements)&&(T=!1,u[0].nodeName==="SELECT"&&(n.isTouched=!1)),t.activeElement&&X(t.activeElement).is(n.focusableElements)&&t.activeElement!==u[0]&&t.activeElement.blur();const S=T&&e.allowTouchMove&&r.touchStartPreventDefault;(r.touchStartForcePreventDefault||S)&&!u[0].isContentEditable&&l.preventDefault()}e.params.freeMode&&e.params.freeMode.enabled&&e.freeMode&&e.animating&&!r.cssMode&&e.freeMode.onTouchStart(),e.emit("touchStart",l)}function Ik(i){const e=Ne(),t=this,s=t.touchEventsData,{params:n,touches:r,rtlTranslate:o,enabled:a}=t;if(!a)return;let l=i;if(l.originalEvent&&(l=l.originalEvent),!s.isTouched){s.startMoving&&s.isScrolling&&t.emit("touchMoveOpposite",l);return}if(s.isTouchEvent&&l.type!=="touchmove")return;const u=l.type==="touchmove"&&l.targetTouches&&(l.targetTouches[0]||l.changedTouches[0]),d=l.type==="touchmove"?u.pageX:l.pageX,c=l.type==="touchmove"?u.pageY:l.pageY;if(l.preventedByNestedSwiper){r.startX=d,r.startY=c;return}if(!t.allowTouchMove){X(l.target).is(s.focusableElements)||(t.allowClick=!1),s.isTouched&&(Object.assign(r,{startX:d,startY:c,currentX:d,currentY:c}),s.touchStartTime=pi());return}if(s.isTouchEvent&&n.touchReleaseOnEdges&&!n.loop){if(t.isVertical()){if(c<r.startY&&t.translate<=t.maxTranslate()||c>r.startY&&t.translate>=t.minTranslate()){s.isTouched=!1,s.isMoved=!1;return}}else if(d<r.startX&&t.translate<=t.maxTranslate()||d>r.startX&&t.translate>=t.minTranslate())return}if(s.isTouchEvent&&e.activeElement&&l.target===e.activeElement&&X(l.target).is(s.focusableElements)){s.isMoved=!0,t.allowClick=!1;return}if(s.allowTouchCallbacks&&t.emit("touchMove",l),l.targetTouches&&l.targetTouches.length>1)return;r.currentX=d,r.currentY=c;const m=r.currentX-r.startX,p=r.currentY-r.startY;if(t.params.threshold&&Math.sqrt(m**2+p**2)<t.params.threshold)return;if(typeof s.isScrolling>"u"){let T;t.isHorizontal()&&r.currentY===r.startY||t.isVertical()&&r.currentX===r.startX?s.isScrolling=!1:m*m+p*p>=25&&(T=Math.atan2(Math.abs(p),Math.abs(m))*180/Math.PI,s.isScrolling=t.isHorizontal()?T>n.touchAngle:90-T>n.touchAngle)}if(s.isScrolling&&t.emit("touchMoveOpposite",l),typeof s.startMoving>"u"&&(r.currentX!==r.startX||r.currentY!==r.startY)&&(s.startMoving=!0),s.isScrolling){s.isTouched=!1;return}if(!s.startMoving)return;t.allowClick=!1,!n.cssMode&&l.cancelable&&l.preventDefault(),n.touchMoveStopPropagation&&!n.nested&&l.stopPropagation(),s.isMoved||(n.loop&&!n.cssMode&&t.loopFix(),s.startTranslate=t.getTranslate(),t.setTransition(0),t.animating&&t.$wrapperEl.trigger("webkitTransitionEnd transitionend"),s.allowMomentumBounce=!1,n.grabCursor&&(t.allowSlideNext===!0||t.allowSlidePrev===!0)&&t.setGrabCursor(!0),t.emit("sliderFirstMove",l)),t.emit("sliderMove",l),s.isMoved=!0;let v=t.isHorizontal()?m:p;r.diff=v,v*=n.touchRatio,o&&(v=-v),t.swipeDirection=v>0?"prev":"next",s.currentTranslate=v+s.startTranslate;let _=!0,b=n.resistanceRatio;if(n.touchReleaseOnEdges&&(b=0),v>0&&s.currentTranslate>t.minTranslate()?(_=!1,n.resistance&&(s.currentTranslate=t.minTranslate()-1+(-t.minTranslate()+s.startTranslate+v)**b)):v<0&&s.currentTranslate<t.maxTranslate()&&(_=!1,n.resistance&&(s.currentTranslate=t.maxTranslate()+1-(t.maxTranslate()-s.startTranslate-v)**b)),_&&(l.preventedByNestedSwiper=!0),!t.allowSlideNext&&t.swipeDirection==="next"&&s.currentTranslate<s.startTranslate&&(s.currentTranslate=s.startTranslate),!t.allowSlidePrev&&t.swipeDirection==="prev"&&s.currentTranslate>s.startTranslate&&(s.currentTranslate=s.startTranslate),!t.allowSlidePrev&&!t.allowSlideNext&&(s.currentTranslate=s.startTranslate),n.threshold>0)if(Math.abs(v)>n.threshold||s.allowThresholdMove){if(!s.allowThresholdMove){s.allowThresholdMove=!0,r.startX=r.currentX,r.startY=r.currentY,s.currentTranslate=s.startTranslate,r.diff=t.isHorizontal()?r.currentX-r.startX:r.currentY-r.startY;return}}else{s.currentTranslate=s.startTranslate;return}!n.followFinger||n.cssMode||((n.freeMode&&n.freeMode.enabled&&t.freeMode||n.watchSlidesProgress)&&(t.updateActiveIndex(),t.updateSlidesClasses()),t.params.freeMode&&n.freeMode.enabled&&t.freeMode&&t.freeMode.onTouchMove(),t.updateProgress(s.currentTranslate),t.setTranslate(s.currentTranslate))}function Lk(i){const e=this,t=e.touchEventsData,{params:s,touches:n,rtlTranslate:r,slidesGrid:o,enabled:a}=e;if(!a)return;let l=i;if(l.originalEvent&&(l=l.originalEvent),t.allowTouchCallbacks&&e.emit("touchEnd",l),t.allowTouchCallbacks=!1,!t.isTouched){t.isMoved&&s.grabCursor&&e.setGrabCursor(!1),t.isMoved=!1,t.startMoving=!1;return}s.grabCursor&&t.isMoved&&t.isTouched&&(e.allowSlideNext===!0||e.allowSlidePrev===!0)&&e.setGrabCursor(!1);const u=pi(),d=u-t.touchStartTime;if(e.allowClick){const S=l.path||l.composedPath&&l.composedPath();e.updateClickedSlide(S&&S[0]||l.target),e.emit("tap click",l),d<300&&u-t.lastClickTime<300&&e.emit("doubleTap doubleClick",l)}if(t.lastClickTime=pi(),Ws(()=>{e.destroyed||(e.allowClick=!0)}),!t.isTouched||!t.isMoved||!e.swipeDirection||n.diff===0||t.currentTranslate===t.startTranslate){t.isTouched=!1,t.isMoved=!1,t.startMoving=!1;return}t.isTouched=!1,t.isMoved=!1,t.startMoving=!1;let c;if(s.followFinger?c=r?e.translate:-e.translate:c=-t.currentTranslate,s.cssMode)return;if(e.params.freeMode&&s.freeMode.enabled){e.freeMode.onTouchEnd({currentPos:c});return}let m=0,p=e.slidesSizesGrid[0];for(let S=0;S<o.length;S+=S<s.slidesPerGroupSkip?1:s.slidesPerGroup){const $=S<s.slidesPerGroupSkip-1?1:s.slidesPerGroup;typeof o[S+$]<"u"?c>=o[S]&&c<o[S+$]&&(m=S,p=o[S+$]-o[S]):c>=o[S]&&(m=S,p=o[o.length-1]-o[o.length-2])}let v=null,_=null;s.rewind&&(e.isBeginning?_=e.params.virtual&&e.params.virtual.enabled&&e.virtual?e.virtual.slides.length-1:e.slides.length-1:e.isEnd&&(v=0));const b=(c-o[m])/p,T=m<s.slidesPerGroupSkip-1?1:s.slidesPerGroup;if(d>s.longSwipesMs){if(!s.longSwipes){e.slideTo(e.activeIndex);return}e.swipeDirection==="next"&&(b>=s.longSwipesRatio?e.slideTo(s.rewind&&e.isEnd?v:m+T):e.slideTo(m)),e.swipeDirection==="prev"&&(b>1-s.longSwipesRatio?e.slideTo(m+T):_!==null&&b<0&&Math.abs(b)>s.longSwipesRatio?e.slideTo(_):e.slideTo(m))}else{if(!s.shortSwipes){e.slideTo(e.activeIndex);return}e.navigation&&(l.target===e.navigation.nextEl||l.target===e.navigation.prevEl)?l.target===e.navigation.nextEl?e.slideTo(m+T):e.slideTo(m):(e.swipeDirection==="next"&&e.slideTo(v!==null?v:m+T),e.swipeDirection==="prev"&&e.slideTo(_!==null?_:m))}}function Dn(){const i=this,{params:e,el:t}=i;if(t&&t.offsetWidth===0)return;e.breakpoints&&i.setBreakpoint();const{allowSlideNext:s,allowSlidePrev:n,snapGrid:r}=i;i.allowSlideNext=!0,i.allowSlidePrev=!0,i.updateSize(),i.updateSlides(),i.updateSlidesClasses(),(e.slidesPerView==="auto"||e.slidesPerView>1)&&i.isEnd&&!i.isBeginning&&!i.params.centeredSlides?i.slideTo(i.slides.length-1,0,!1,!0):i.slideTo(i.activeIndex,0,!1,!0),i.autoplay&&i.autoplay.running&&i.autoplay.paused&&i.autoplay.run(),i.allowSlidePrev=n,i.allowSlideNext=s,i.params.watchOverflow&&r!==i.snapGrid&&i.checkOverflow()}function $k(i){const e=this;e.enabled&&(e.allowClick||(e.params.preventClicks&&i.preventDefault(),e.params.preventClicksPropagation&&e.animating&&(i.stopPropagation(),i.stopImmediatePropagation())))}function Pk(){const i=this,{wrapperEl:e,rtlTranslate:t,enabled:s}=i;if(!s)return;i.previousTranslate=i.translate,i.isHorizontal()?i.translate=-e.scrollLeft:i.translate=-e.scrollTop,i.translate===0&&(i.translate=0),i.updateActiveIndex(),i.updateSlidesClasses();let n;const r=i.maxTranslate()-i.minTranslate();r===0?n=0:n=(i.translate-i.minTranslate())/r,n!==i.progress&&i.updateProgress(t?-i.translate:i.translate),i.emit("setTranslate",i.translate,!1)}let Bn=!1;function Mk(){}const ko=(i,e)=>{const t=Ne(),{params:s,touchEvents:n,el:r,wrapperEl:o,device:a,support:l}=i,u=!!s.nested,d=e==="on"?"addEventListener":"removeEventListener",c=e;if(!l.touch)r[d](n.start,i.onTouchStart,!1),t[d](n.move,i.onTouchMove,u),t[d](n.end,i.onTouchEnd,!1);else{const m=n.start==="touchstart"&&l.passiveListener&&s.passiveListeners?{passive:!0,capture:!1}:!1;r[d](n.start,i.onTouchStart,m),r[d](n.move,i.onTouchMove,l.passiveListener?{passive:!1,capture:u}:u),r[d](n.end,i.onTouchEnd,m),n.cancel&&r[d](n.cancel,i.onTouchEnd,m)}(s.preventClicks||s.preventClicksPropagation)&&r[d]("click",i.onClick,!0),s.cssMode&&o[d]("scroll",i.onScroll),s.updateOnWindowResize?i[c](a.ios||a.android?"resize orientationchange observerUpdate":"resize observerUpdate",Dn,!0):i[c]("observerUpdate",Dn,!0)};function Ek(){const i=this,e=Ne(),{params:t,support:s}=i;i.onTouchStart=Vk.bind(i),i.onTouchMove=Ik.bind(i),i.onTouchEnd=Lk.bind(i),t.cssMode&&(i.onScroll=Pk.bind(i)),i.onClick=$k.bind(i),s.touch&&!Bn&&(e.addEventListener("touchstart",Mk),Bn=!0),ko(i,"on")}function Dk(){ko(this,"off")}const Bk={attachEvents:Ek,detachEvents:Dk},Rn=(i,e)=>i.grid&&e.grid&&e.grid.rows>1;function Rk(){const i=this,{activeIndex:e,initialized:t,loopedSlides:s=0,params:n,$el:r}=i,o=n.breakpoints;if(!o||o&&Object.keys(o).length===0)return;const a=i.getBreakpoint(o,i.params.breakpointsBase,i.el);if(!a||i.currentBreakpoint===a)return;const u=(a in o?o[a]:void 0)||i.originalParams,d=Rn(i,n),c=Rn(i,u),m=n.enabled;d&&!c?(r.removeClass(`${n.containerModifierClass}grid ${n.containerModifierClass}grid-column`),i.emitContainerClasses()):!d&&c&&(r.addClass(`${n.containerModifierClass}grid`),(u.grid.fill&&u.grid.fill==="column"||!u.grid.fill&&n.grid.fill==="column")&&r.addClass(`${n.containerModifierClass}grid-column`),i.emitContainerClasses()),["navigation","pagination","scrollbar"].forEach(b=>{const T=n[b]&&n[b].enabled,S=u[b]&&u[b].enabled;T&&!S&&i[b].disable(),!T&&S&&i[b].enable()});const p=u.direction&&u.direction!==n.direction,v=n.loop&&(u.slidesPerView!==n.slidesPerView||p);p&&t&&i.changeDirection(),ze(i.params,u);const _=i.params.enabled;Object.assign(i,{allowTouchMove:i.params.allowTouchMove,allowSlideNext:i.params.allowSlideNext,allowSlidePrev:i.params.allowSlidePrev}),m&&!_?i.disable():!m&&_&&i.enable(),i.currentBreakpoint=a,i.emit("_beforeBreakpoint",u),v&&t&&(i.loopDestroy(),i.loopCreate(),i.updateSlides(),i.slideTo(e-s+i.loopedSlides,0,!1)),i.emit("breakpoint",u)}function Fk(i,e,t){if(e===void 0&&(e="window"),!i||e==="container"&&!t)return;let s=!1;const n=Ie(),r=e==="window"?n.innerHeight:t.clientHeight,o=Object.keys(i).map(a=>{if(typeof a=="string"&&a.indexOf("@")===0){const l=parseFloat(a.substr(1));return{value:r*l,point:a}}return{value:a,point:a}});o.sort((a,l)=>parseInt(a.value,10)-parseInt(l.value,10));for(let a=0;a<o.length;a+=1){const{point:l,value:u}=o[a];e==="window"?n.matchMedia(`(min-width: ${u}px)`).matches&&(s=l):u<=t.clientWidth&&(s=l)}return s||"max"}const zk={setBreakpoint:Rk,getBreakpoint:Fk};function Ak(i,e){const t=[];return i.forEach(s=>{typeof s=="object"?Object.keys(s).forEach(n=>{s[n]&&t.push(e+n)}):typeof s=="string"&&t.push(e+s)}),t}function Ok(){const i=this,{classNames:e,params:t,rtl:s,$el:n,device:r,support:o}=i,a=Ak(["initialized",t.direction,{"pointer-events":!o.touch},{"free-mode":i.params.freeMode&&t.freeMode.enabled},{autoheight:t.autoHeight},{rtl:s},{grid:t.grid&&t.grid.rows>1},{"grid-column":t.grid&&t.grid.rows>1&&t.grid.fill==="column"},{android:r.android},{ios:r.ios},{"css-mode":t.cssMode},{centered:t.cssMode&&t.centeredSlides},{"watch-progress":t.watchSlidesProgress}],t.containerModifierClass);e.push(...a),n.addClass([...e].join(" ")),i.emitContainerClasses()}function Nk(){const i=this,{$el:e,classNames:t}=i;e.removeClass(t.join(" ")),i.emitContainerClasses()}const Hk={addClasses:Ok,removeClasses:Nk};function Wk(i,e,t,s,n,r){const o=Ie();let a;function l(){r&&r()}!X(i).parent("picture")[0]&&(!i.complete||!n)&&e?(a=new o.Image,a.onload=l,a.onerror=l,s&&(a.sizes=s),t&&(a.srcset=t),e&&(a.src=e)):l()}function Gk(){const i=this;i.imagesToLoad=i.$el.find("img");function e(){typeof i>"u"||i===null||!i||i.destroyed||(i.imagesLoaded!==void 0&&(i.imagesLoaded+=1),i.imagesLoaded===i.imagesToLoad.length&&(i.params.updateOnImagesReady&&i.update(),i.emit("imagesReady")))}for(let t=0;t<i.imagesToLoad.length;t+=1){const s=i.imagesToLoad[t];i.loadImage(s,s.currentSrc||s.getAttribute("src"),s.srcset||s.getAttribute("srcset"),s.sizes||s.getAttribute("sizes"),!0,e)}}const Uk={loadImage:Wk,preloadImages:Gk};function Yk(){const i=this,{isLocked:e,params:t}=i,{slidesOffsetBefore:s}=t;if(s){const n=i.slides.length-1,r=i.slidesGrid[n]+i.slidesSizesGrid[n]+s*2;i.isLocked=i.size>r}else i.isLocked=i.snapGrid.length===1;t.allowSlideNext===!0&&(i.allowSlideNext=!i.isLocked),t.allowSlidePrev===!0&&(i.allowSlidePrev=!i.isLocked),e&&e!==i.isLocked&&(i.isEnd=!1),e!==i.isLocked&&i.emit(i.isLocked?"lock":"unlock")}const qk={checkOverflow:Yk},Fn={init:!0,direction:"horizontal",touchEventsTarget:"wrapper",initialSlide:0,speed:300,cssMode:!1,updateOnWindowResize:!0,resizeObserver:!0,nested:!1,createElements:!1,enabled:!0,focusableElements:"input, select, option, textarea, button, video, label",width:null,height:null,preventInteractionOnTransition:!1,userAgent:null,url:null,edgeSwipeDetection:!1,edgeSwipeThreshold:20,autoHeight:!1,setWrapperSize:!1,virtualTranslate:!1,effect:"slide",breakpoints:void 0,breakpointsBase:"window",spaceBetween:0,slidesPerView:1,slidesPerGroup:1,slidesPerGroupSkip:0,slidesPerGroupAuto:!1,centeredSlides:!1,centeredSlidesBounds:!1,slidesOffsetBefore:0,slidesOffsetAfter:0,normalizeSlideIndex:!0,centerInsufficientSlides:!1,watchOverflow:!0,roundLengths:!1,touchRatio:1,touchAngle:45,simulateTouch:!0,shortSwipes:!0,longSwipes:!0,longSwipesRatio:.5,longSwipesMs:300,followFinger:!0,allowTouchMove:!0,threshold:0,touchMoveStopPropagation:!1,touchStartPreventDefault:!0,touchStartForcePreventDefault:!1,touchReleaseOnEdges:!1,uniqueNavElements:!0,resistance:!0,resistanceRatio:.85,watchSlidesProgress:!1,grabCursor:!1,preventClicks:!0,preventClicksPropagation:!0,slideToClickedSlide:!1,preloadImages:!0,updateOnImagesReady:!0,loop:!1,loopAdditionalSlides:0,loopedSlides:null,loopedSlidesLimit:!0,loopFillGroupWithBlank:!1,loopPreventsSlide:!0,rewind:!1,allowSlidePrev:!0,allowSlideNext:!0,swipeHandler:null,noSwiping:!0,noSwipingClass:"swiper-no-swiping",noSwipingSelector:null,passiveListeners:!0,maxBackfaceHiddenSlides:10,containerModifierClass:"swiper-",slideClass:"swiper-slide",slideBlankClass:"swiper-slide-invisible-blank",slideActiveClass:"swiper-slide-active",slideDuplicateActiveClass:"swiper-slide-duplicate-active",slideVisibleClass:"swiper-slide-visible",slideDuplicateClass:"swiper-slide-duplicate",slideNextClass:"swiper-slide-next",slideDuplicateNextClass:"swiper-slide-duplicate-next",slidePrevClass:"swiper-slide-prev",slideDuplicatePrevClass:"swiper-slide-duplicate-prev",wrapperClass:"swiper-wrapper",runCallbacksOnInit:!0,_emitClasses:!1};function Xk(i,e){return function(s){s===void 0&&(s={});const n=Object.keys(s)[0],r=s[n];if(typeof r!="object"||r===null){ze(e,s);return}if(["navigation","pagination","scrollbar"].indexOf(n)>=0&&i[n]===!0&&(i[n]={auto:!0}),!(n in i&&"enabled"in r)){ze(e,s);return}i[n]===!0&&(i[n]={enabled:!0}),typeof i[n]=="object"&&!("enabled"in i[n])&&(i[n].enabled=!0),i[n]||(i[n]={enabled:!1}),ze(e,s)}}const ys={eventsEmitter:Gw,update:ek,translate:ok,transition:dk,slide:bk,loop:kk,grabCursor:Sk,events:Bk,breakpoints:zk,checkOverflow:qk,classes:Hk,images:Uk},_s={};class Ge{constructor(){let e,t;for(var s=arguments.length,n=new Array(s),r=0;r<s;r++)n[r]=arguments[r];if(n.length===1&&n[0].constructor&&Object.prototype.toString.call(n[0]).slice(8,-1)==="Object"?t=n[0]:[e,t]=n,t||(t={}),t=ze({},t),e&&!t.el&&(t.el=e),t.el&&X(t.el).length>1){const u=[];return X(t.el).each(d=>{const c=ze({},t,{el:d});u.push(new Ge(c))}),u}const o=this;o.__swiper__=!0,o.support=_o(),o.device=Aw({userAgent:t.userAgent}),o.browser=Nw(),o.eventsListeners={},o.eventsAnyListeners=[],o.modules=[...o.__modules__],t.modules&&Array.isArray(t.modules)&&o.modules.push(...t.modules);const a={};o.modules.forEach(u=>{u({swiper:o,extendParams:Xk(t,a),on:o.on.bind(o),once:o.once.bind(o),off:o.off.bind(o),emit:o.emit.bind(o)})});const l=ze({},Fn,a);return o.params=ze({},l,_s,t),o.originalParams=ze({},o.params),o.passedParams=ze({},t),o.params&&o.params.on&&Object.keys(o.params.on).forEach(u=>{o.on(u,o.params.on[u])}),o.params&&o.params.onAny&&o.onAny(o.params.onAny),o.$=X,Object.assign(o,{enabled:o.params.enabled,el:e,classNames:[],slides:X(),slidesGrid:[],snapGrid:[],slidesSizesGrid:[],isHorizontal(){return o.params.direction==="horizontal"},isVertical(){return o.params.direction==="vertical"},activeIndex:0,realIndex:0,isBeginning:!0,isEnd:!1,translate:0,previousTranslate:0,progress:0,velocity:0,animating:!1,allowSlideNext:o.params.allowSlideNext,allowSlidePrev:o.params.allowSlidePrev,touchEvents:function(){const d=["touchstart","touchmove","touchend","touchcancel"],c=["pointerdown","pointermove","pointerup"];return o.touchEventsTouch={start:d[0],move:d[1],end:d[2],cancel:d[3]},o.touchEventsDesktop={start:c[0],move:c[1],end:c[2]},o.support.touch||!o.params.simulateTouch?o.touchEventsTouch:o.touchEventsDesktop}(),touchEventsData:{isTouched:void 0,isMoved:void 0,allowTouchCallbacks:void 0,touchStartTime:void 0,isScrolling:void 0,currentTranslate:void 0,startTranslate:void 0,allowThresholdMove:void 0,focusableElements:o.params.focusableElements,lastClickTime:pi(),clickTimeout:void 0,velocities:[],allowMomentumBounce:void 0,isTouchEvent:void 0,startMoving:void 0},allowClick:!0,allowTouchMove:o.params.allowTouchMove,touches:{startX:0,startY:0,currentX:0,currentY:0,diff:0},imagesToLoad:[],imagesLoaded:0}),o.emit("_swiper"),o.params.init&&o.init(),o}enable(){const e=this;e.enabled||(e.enabled=!0,e.params.grabCursor&&e.setGrabCursor(),e.emit("enable"))}disable(){const e=this;e.enabled&&(e.enabled=!1,e.params.grabCursor&&e.unsetGrabCursor(),e.emit("disable"))}setProgress(e,t){const s=this;e=Math.min(Math.max(e,0),1);const n=s.minTranslate(),o=(s.maxTranslate()-n)*e+n;s.translateTo(o,typeof t>"u"?0:t),s.updateActiveIndex(),s.updateSlidesClasses()}emitContainerClasses(){const e=this;if(!e.params._emitClasses||!e.el)return;const t=e.el.className.split(" ").filter(s=>s.indexOf("swiper")===0||s.indexOf(e.params.containerModifierClass)===0);e.emit("_containerClasses",t.join(" "))}getSlideClasses(e){const t=this;return t.destroyed?"":e.className.split(" ").filter(s=>s.indexOf("swiper-slide")===0||s.indexOf(t.params.slideClass)===0).join(" ")}emitSlidesClasses(){const e=this;if(!e.params._emitClasses||!e.el)return;const t=[];e.slides.each(s=>{const n=e.getSlideClasses(s);t.push({slideEl:s,classNames:n}),e.emit("_slideClass",s,n)}),e.emit("_slideClasses",t)}slidesPerViewDynamic(e,t){e===void 0&&(e="current"),t===void 0&&(t=!1);const s=this,{params:n,slides:r,slidesGrid:o,slidesSizesGrid:a,size:l,activeIndex:u}=s;let d=1;if(n.centeredSlides){let c=r[u].swiperSlideSize,m;for(let p=u+1;p<r.length;p+=1)r[p]&&!m&&(c+=r[p].swiperSlideSize,d+=1,c>l&&(m=!0));for(let p=u-1;p>=0;p-=1)r[p]&&!m&&(c+=r[p].swiperSlideSize,d+=1,c>l&&(m=!0))}else if(e==="current")for(let c=u+1;c<r.length;c+=1)(t?o[c]+a[c]-o[u]<l:o[c]-o[u]<l)&&(d+=1);else for(let c=u-1;c>=0;c-=1)o[u]-o[c]<l&&(d+=1);return d}update(){const e=this;if(!e||e.destroyed)return;const{snapGrid:t,params:s}=e;s.breakpoints&&e.setBreakpoint(),e.updateSize(),e.updateSlides(),e.updateProgress(),e.updateSlidesClasses();function n(){const o=e.rtlTranslate?e.translate*-1:e.translate,a=Math.min(Math.max(o,e.maxTranslate()),e.minTranslate());e.setTranslate(a),e.updateActiveIndex(),e.updateSlidesClasses()}let r;e.params.freeMode&&e.params.freeMode.enabled?(n(),e.params.autoHeight&&e.updateAutoHeight()):((e.params.slidesPerView==="auto"||e.params.slidesPerView>1)&&e.isEnd&&!e.params.centeredSlides?r=e.slideTo(e.slides.length-1,0,!1,!0):r=e.slideTo(e.activeIndex,0,!1,!0),r||n()),s.watchOverflow&&t!==e.snapGrid&&e.checkOverflow(),e.emit("update")}changeDirection(e,t){t===void 0&&(t=!0);const s=this,n=s.params.direction;return e||(e=n==="horizontal"?"vertical":"horizontal"),e===n||e!=="horizontal"&&e!=="vertical"||(s.$el.removeClass(`${s.params.containerModifierClass}${n}`).addClass(`${s.params.containerModifierClass}${e}`),s.emitContainerClasses(),s.params.direction=e,s.slides.each(r=>{e==="vertical"?r.style.width="":r.style.height=""}),s.emit("changeDirection"),t&&s.update()),s}changeLanguageDirection(e){const t=this;t.rtl&&e==="rtl"||!t.rtl&&e==="ltr"||(t.rtl=e==="rtl",t.rtlTranslate=t.params.direction==="horizontal"&&t.rtl,t.rtl?(t.$el.addClass(`${t.params.containerModifierClass}rtl`),t.el.dir="rtl"):(t.$el.removeClass(`${t.params.containerModifierClass}rtl`),t.el.dir="ltr"),t.update())}mount(e){const t=this;if(t.mounted)return!0;const s=X(e||t.params.el);if(e=s[0],!e)return!1;e.swiper=t;const n=()=>`.${(t.params.wrapperClass||"").trim().split(" ").join(".")}`;let o=(()=>{if(e&&e.shadowRoot&&e.shadowRoot.querySelector){const a=X(e.shadowRoot.querySelector(n()));return a.children=l=>s.children(l),a}return s.children?s.children(n()):X(s).children(n())})();if(o.length===0&&t.params.createElements){const l=Ne().createElement("div");o=X(l),l.className=t.params.wrapperClass,s.append(l),s.children(`.${t.params.slideClass}`).each(u=>{o.append(u)})}return Object.assign(t,{$el:s,el:e,$wrapperEl:o,wrapperEl:o[0],mounted:!0,rtl:e.dir.toLowerCase()==="rtl"||s.css("direction")==="rtl",rtlTranslate:t.params.direction==="horizontal"&&(e.dir.toLowerCase()==="rtl"||s.css("direction")==="rtl"),wrongRTL:o.css("display")==="-webkit-box"}),!0}init(e){const t=this;return t.initialized||t.mount(e)===!1||(t.emit("beforeInit"),t.params.breakpoints&&t.setBreakpoint(),t.addClasses(),t.params.loop&&t.loopCreate(),t.updateSize(),t.updateSlides(),t.params.watchOverflow&&t.checkOverflow(),t.params.grabCursor&&t.enabled&&t.setGrabCursor(),t.params.preloadImages&&t.preloadImages(),t.params.loop?t.slideTo(t.params.initialSlide+t.loopedSlides,0,t.params.runCallbacksOnInit,!1,!0):t.slideTo(t.params.initialSlide,0,t.params.runCallbacksOnInit,!1,!0),t.attachEvents(),t.initialized=!0,t.emit("init"),t.emit("afterInit")),t}destroy(e,t){e===void 0&&(e=!0),t===void 0&&(t=!0);const s=this,{params:n,$el:r,$wrapperEl:o,slides:a}=s;return typeof s.params>"u"||s.destroyed||(s.emit("beforeDestroy"),s.initialized=!1,s.detachEvents(),n.loop&&s.loopDestroy(),t&&(s.removeClasses(),r.removeAttr("style"),o.removeAttr("style"),a&&a.length&&a.removeClass([n.slideVisibleClass,n.slideActiveClass,n.slideNextClass,n.slidePrevClass].join(" ")).removeAttr("style").removeAttr("data-swiper-slide-index")),s.emit("destroy"),Object.keys(s.eventsListeners).forEach(l=>{s.off(l)}),e!==!1&&(s.$el[0].swiper=null,Ew(s)),s.destroyed=!0),null}static extendDefaults(e){ze(_s,e)}static get extendedDefaults(){return _s}static get defaults(){return Fn}static installModule(e){Ge.prototype.__modules__||(Ge.prototype.__modules__=[]);const t=Ge.prototype.__modules__;typeof e=="function"&&t.indexOf(e)<0&&t.push(e)}static use(e){return Array.isArray(e)?(e.forEach(t=>Ge.installModule(t)),Ge):(Ge.installModule(e),Ge)}}Object.keys(ys).forEach(i=>{Object.keys(ys[i]).forEach(e=>{Ge.prototype[e]=ys[i][e]})});Ge.use([Hw,Ww]);const Kk={name:"FvSwipeControl",emits:["status-change"],props:{...Y_,value:{default:()=>({})},minOpWidth:{default:60},maxOpWidth:{default:300},leftOptions:{default:()=>[]},options:{default:()=>[{icon:"Delete",func:()=>{},type:"delete"}]},itemPadding:{default:"0 10px"},disabledLeft:{default:!0},disabledRight:{default:!1},disabledLeftFull:{default:!0},disabledRightFull:{default:!1},disabled:{default:!1}},data(){return{status:"normal",triggerType:"auto",swiper:null,swiperProgress:0,slidesProgress:[],thisLeftOptions:this.leftOptions,thisOptions:this.options}},watch:{value(){this.triggerType="auto",this.swiper.slideTo(1,300,!1),this.status="normal"},status(i){this.$emit("status-change",i)},isDisabled(i){i?this.swiper.disabled():this.swiper.enable()}},computed:{computedProgress(){return i=>this.slidesProgress[i]},computedWidth(){return i=>this.swiper?this.swiper.width*i:0},opWidth(){let i=this.computedWidth(.3);return i<this.minOpWidth?i=this.minOpWidth:i>this.maxOpWidth&&(i=this.maxOpWidth),i},isDisabled(){return this.disabled.toString()=="true"||this.disabled=="disabled"||this.disabled===""},$theme(){return q(this.$props).theme.value}},mounted(){this.init(),this.isDisabled?this.swiper.disable():this.swiper.enable()},methods:{init(){this.swiper=new Ge(this.$refs.container,{initialSlide:1,slidesPerView:1,longSwipesRatio:2,shortSwipes:!1,watchSlidesProgress:!0,on:{touchStart:i=>{this.triggerType="manual"},touchMove:(i,e)=>{this.refreshProgress(i)},touchEnd:(i,e)=>{this.refreshProgress(i)},transitionStart:i=>{if(this.triggerType==="auto")return;let e=this.slidesProgress[1];this.status!="normal"&&e>=-.5&&e<.5?(this.status="normal",this.swiper.slideTo(1,300,!1)):e<-.1&&e>=-.5?this.disabledLeft?(this.status="normal",this.swiper.slideTo(1,300,!1)):(this.swiper.setTransition(300),this.swiper.setTranslate(-this.computedWidth(.7)),this.status="left"):e<-.5?this.disabledLeftFull?this.swiper.slideTo(1,300,!1):(this.swiper.slidePrev(),this.status="leftFull"):e>.1&&e<=.5?this.disabledRight?(this.status="normal",this.swiper.slideTo(1,300,!1)):(this.swiper.setTransition(300),this.swiper.setTranslate(-this.computedWidth(1.3)),this.status="right"):e>.5&&(this.disabledRightFull?this.swiper.slideTo(1,300,!1):(this.swiper.slideNext(),this.status="rightFull"))},transitionEnd:(i,e)=>{this.triggerType="auto",this.refreshProgress(i),this.status=="rightFull"?this.callFunc(this.thisOptions[this.thisOptions.length-1]):this.status=="leftFull"&&this.callFunc(this.thisLeftOptions[this.thisLeftOptions.length-1])}}})},refreshProgress(i){this.swiperProgress=i.progress;let e=[];for(let t=0;t<i.slides.length;t++)e.push(i.slides[t].progress);this.slidesProgress=e},callFunc(i){this.valueTrigger(i.disabled)||i.func&&i.func(this.value)},valueTrigger(i){return typeof i=="function"?i():i}}},jk={class:"fv-swiper-container swiper-container",ref:"container"},Jk={class:"swiper-wrapper",ref:"wrapper"},Qk={class:"fv-SwipeControl-left swiper-slide"},Zk=["onClick"],eC={class:"fv-SwipeControl-right swiper-slide"},tC=["onClick"];function iC(i,e,t,s,n,r){return f(),g("div",{class:k(["fv-SwipeControl",[r.$theme]])},[h("div",jk,[h("div",Jk,[h("div",Qk,[(f(!0),g(Y,null,Z(t.leftOptions,(o,a)=>(f(),g("div",{class:k(["fv-SwipeControl-btn",[r.valueTrigger(o.type)]]),key:a,style:V({width:a===t.leftOptions.length-1?"":`${r.opWidth/t.leftOptions.length}px`}),onClick:l=>r.callFunc(o)},[h("div",{class:"fv-SwipeControl-btn-content-block",style:V({width:`${r.opWidth/t.leftOptions.length}px`})},[P(h("i",{class:k(["ms-Icon",[`ms-Icon--${r.valueTrigger(o.icon)}`]])},null,2),[[R,r.valueTrigger(o.icon)]]),P(h("p",{style:{"margin-left":"5px"}},H(r.valueTrigger(o.text)),513),[[R,r.valueTrigger(o.text)]])],4)],14,Zk))),128))]),h("div",{class:"fv-SwipeControl-main swiper-slide",style:V({padding:t.itemPadding})},[w(i.$slots,"default",{},()=>[ue(" Swipe Control ")])],4),h("div",eC,[(f(!0),g(Y,null,Z(n.thisOptions,(o,a)=>(f(),g("div",{class:k(["fv-SwipeControl-btn",[r.valueTrigger(o.type)]]),key:a,style:V({width:a===n.thisOptions.length-1?"":`${r.opWidth/n.thisOptions.length}px`}),onClick:l=>r.callFunc(o)},[h("div",{class:"fv-SwipeControl-btn-content-block",style:V({width:`${r.opWidth/n.thisOptions.length}px`})},[P(h("i",{class:k(["ms-Icon",[`ms-Icon--${r.valueTrigger(o.icon)}`]])},null,2),[[R,r.valueTrigger(o.icon)]]),P(h("p",{style:{"margin-left":"5px"}},H(r.valueTrigger(o.text)),513),[[R,r.valueTrigger(o.text)]])],4)],14,tC))),128))])],512)],512)],2)}const sC=z(Kk,[["render",iC]]),nC=ie(sC),rC={...te},oC={name:"FvTag",emits:["update:modelValue","add-item","del-item","tag-click"],props:{...rC,modelValue:{default:()=>[]},newTagPlaceholder:{default:"New Tag"},size:{default:""},newTagBackground:{default:null},isNewTag:{default:!1},isDel:{default:!1}},data(){return{thisValue:this.modelValue,inputValue:"",edit:!1}},watch:{modelValue(i){this.thisValue=i},thisValue(i){this.$emit("update:modelValue",i)},edit(){this.inputValue!==""&&this.addTag()}},computed:{$theme(){return q(this.$props).theme.value}},mounted(){this.outSideClickInit()},methods:{outSideClickInit(){window.addEventListener("click",i=>{let e=i.target,t=!1;for(;e&&e.tagName&&e.tagName.toLowerCase()!="body";){if(e==this.$refs.add){t=!0;break}e=e.parentNode}t||(this.edit=!1)}),window.addEventListener("touchend",i=>{let e=i.target,t=!1;for(;e&&e.tagName&&e.tagName.toLowerCase()!="body";){if(e==this.$refs.add){t=!0;break}e=e.parentNode}t||(this.edit=!1)})},editable(){this.edit=!0,setTimeout(()=>{this.$refs.edit.focus()},10)},addTag(){this.thisValue.push({text:this.inputValue}),this.inputValue="",this.$emit("add-item",{text:this.inputValue})},delTag(i){let e=this.thisValue.indexOf(i);this.thisValue.splice(e,1),this.$emit("del-item",i)},getColor(i){return i=tn(i),this.$theme=="dark"?{background:i.alpha(1).cssa(),borderColor:i.alpha(1).cssa(),color:"whitesmoke"}:{background:i.alpha(.1).cssa(),borderColor:i.alpha(.1).cssa(),color:i.alpha(1).cssa()}}}},aC=["onClick"],lC={class:"fv-tag-content"},uC=["onClick"],dC={class:"ms-Icon ms-Icon--Add fv-tag-icon"};function hC(i,e,t,s,n,r){const o=K("fv-text-box");return f(),g("div",{class:k(["fv-Tag",[r.$theme]])},[(f(!0),g(Y,null,Z(n.thisValue,(a,l)=>(f(),g("div",{key:l,class:k(["fv-tag-item",[a.type?a.type:"",t.size,{disabled:a.disabled}]]),style:V({background:a.background?r.getColor(a.background).background:"",borderColor:a.background?r.getColor(a.background).borderColor:"",color:a.background?r.getColor(a.background).color:""}),onClick:u=>i.$emit("tag-click",a)},[h("span",lC,[w(i.$slots,"default",{},()=>[ue(H(a.text),1)])]),P(h("i",{class:"ms-Icon ms-Icon--Cancel fv-tag-icon",onClick:u=>r.delTag(a)},null,8,uC),[[R,t.isDel&&!a.disabled]])],14,aC))),128)),P(h("div",{ref:"add",class:k(["fv-tag-item controller",[t.size]]),style:V({background:t.newTagBackground?r.getColor(t.newTagBackground).background:"",borderColor:t.newTagBackground?r.getColor(t.newTagBackground).borderColor:"",color:t.newTagBackground?r.getColor(t.newTagBackground).color:""}),onClick:e[1]||(e[1]=(...a)=>r.editable&&r.editable(...a))},[P(h("i",dC,null,512),[[R,!n.edit]]),P(h("span",{class:"fv-tag-content"},H(t.newTagPlaceholder),513),[[R,!n.edit]]),P(L(o,{modelValue:n.inputValue,"onUpdate:modelValue":e[0]||(e[0]=a=>n.inputValue=a),ref:"edit",placeholder:t.newTagPlaceholder,style:{width:"auto"},onKeydown:Us(r.addTag,["enter"])},null,8,["modelValue","placeholder","onKeydown"]),[[R,n.edit]])],6),[[R,t.isNewTag]])],2)}const cC=z(oC,[["render",hC]]),fC=ie(cC),mC={...te},gC={emits:["update:modelValue","keydown","keyup","change","paste","focus","blur"],props:{modelValue:{type:Array,default:()=>[]},inputmode:{default:"text"},type:{default:"text"},mask:{type:String,default:"mask:___"},flag:{type:String,default:"_"},pattern:{type:String,default:"[Ss]*"},readonly:{default:!1},disabled:{default:!1},fontSize:{default:13.3},fontWeight:{default:"normal"},foreground:{default:""},textAlign:{default:"left"},theme:{type:String,default:"global"}},data(){return{thisValue:[],currentPos:0,thisPattern:new RegExp(this.pattern)}},watch:{modelValue(i){this.syncValue(i)},mask(i){this.thisValueInit()},flag(i){this.thisValueInit()},pattern(i){this.thisPattern=new RegExp(i)}},computed:{$theme(){return q(this.$props).theme.value},maxLength(){let i=0;for(let e=0;e<this.mask.length;e++)this.mask[e]==this.flag&&i++;return i},renderText(){this.mask;let i=0,e="";for(let t=0;t<this.mask.length;t++)if(this.mask[t]==this.flag){if(i>=this.thisValue.length)break;this.thisValue[i].content!==""?e+=this.thisValue[i].content:e+=this.mask[t],i++}else e+=this.mask[t];return e},isReadOnly(){return this.readonly.toString()=="true"||this.readonly=="readonly"||this.readonly===""},isDisabled(){return this.disabled.toString()=="true"||this.disabled=="disabled"||this.disabled===""}},mounted(){this.thisValueInit(),this.syncValue(this.modelValue),this.thisPattern=new RegExp(this.pattern),this.$refs.input.addEventListener("paste",i=>{let e=i.clipboardData.getData("text/plain"),t=0;for(let s=0;s<e.length;s++)e[s].match(this.thisPattern)&&t<this.thisValue.length&&(this.thisValue[t].content=e[s],t++,this.currentPos=this.thisValue[t].index+1)})},methods:{thisValueInit(){this.thisValue=[];for(let i=0;i<this.mask.length;i++)this.mask[i]==this.flag&&this.thisValue.push({index:i,content:""});this.flag.length!=1&&console.warn("TextBox's flag should only contain 1 char."),this.$refs.input.value=this.renderText},syncValue(i){for(let e=0;e<this.thisValue.length;e++)e<i.length?this.thisValue[e]={index:this.thisValue[e].index,content:i[e]}:this.thisValue[e]={index:this.thisValue[e].index,content:""};this.$refs.input.value=this.renderText},keyDown(i){this.$emit("keydown",i);let e=i.keyCode,t=-1,s=this.$refs.input.selectionStart,n=this.$refs.input.selectionEnd,r=this.clearRange(s,n);for(let o=s-1;o>=0;o--)this.mask[o]==this.flag&&t++;if(this.isInputCode(e)&&!i.crtlKey){if(!this.thisPattern.test(i.key))return 0;t<this.thisValue.length-1&&(this.thisValue[t+1]={index:this.thisValue[t+1].index,content:i.key},this.currentPos=this.thisValue[t+1].index+1)}else if(e==8){if(r)return 0;t>-1&&(this.thisValue[t]={index:this.thisValue[t].index,content:""},this.currentPos=this.thisValue[t].index)}},isInputCode(i){let e=[[48,57],[65,90],[96,107],[109,111],[186,222]];for(let t of e)if(i>=t[0]&&i<=t[1])return!0;return!1},clearRange(i,e){if(e-i==0)return 0;let t=0;for(let s=this.thisValue.length-1;s>=0;s--)this.thisValue[s].index+1>i&&this.thisValue[s].index+1<=e&&(this.thisValue[s]={index:this.thisValue[s].index,content:""},t=s);return this.currentPos=this.thisValue[t].index,!0},input(i){i.target.value=this.renderText,this.$refs.input.setSelectionRange(this.currentPos,this.currentPos);let e=[];for(let t=0;t<this.thisValue.length;t++)e.push(this.thisValue[t].content);this.$emit("update:modelValue",e)},focusInspect(){this.$refs.input.focus()}}},pC={class:"text-box-container internal"},vC=["inputmode","type","readonly","disabled"];function bC(i,e,t,s,n,r){return f(),g("div",pC,[h("input",{inputmode:t.inputmode,type:t.type,class:"fv-text-box-input",readonly:r.isReadOnly,disabled:r.isDisabled,ref:"input",style:V({"font-size":`${t.fontSize}px`,"font-weight":t.fontWeight,color:t.foreground,"text-align":t.textAlign}),onInput:e[0]||(e[0]=(...o)=>r.input&&r.input(...o)),onKeydown:e[1]||(e[1]=(...o)=>r.keyDown&&r.keyDown(...o)),onKeyup:e[2]||(e[2]=o=>i.$emit("keyup",o)),onChange:e[3]||(e[3]=o=>i.$emit("change",o)),onPaste:e[4]||(e[4]=o=>i.$emit("paste",o)),onFocus:e[5]||(e[5]=o=>i.$emit("focus",!0)),onBlur:e[6]||(e[6]=o=>i.$emit("blur",!1))},null,44,vC)])}const yC=z(gC,[["render",bC]]),_C={components:{maskInput:yC},emits:["update:modelValue","update:focus","keydown","keyup","change","paste","focus","blur"],props:{modelValue:{default:""},mode:{default:"default"},inputmode:{default:"text"},placeholder:{default:""},type:{default:"text"},mask:{type:String,default:"mask:___"},flag:{type:String,default:"_"},pattern:{type:String,default:"[Ss]*"},inputRules:{type:String,default:"[Ss]*"},readonly:{default:!1},focus:{default:!1},maxlength:{default:""},disabled:{default:!1},fontSize:{default:13.3},fontWeight:{default:"normal"},foreground:{default:""},textAlign:{default:"left"},theme:{type:String,default:"global"}},data(){return{thisValue:(typeof this.modelValue).toString()=="string"?this.modelValue:"",thisMaskValue:(typeof this.modelValue).toString()=="object"?this.modelValue:[],thisPattern:new RegExp(this.partten),thisInputRules:new RegExp(this.inputRules)}},watch:{modelValue(i){(typeof i).toString()=="string"?this.thisValue=i:this.thisMaskValue=i},mode(i){i=="default"?this.thisValue="":this.thisMaskValue=[]},thisValue(i,e){!i||this.thisInputRules.test(i)?this.$emit("update:modelValue",i):i=e},thisMaskValue(i){this.$emit("update:modelValue",i)},pattern(i){this.thisPattern=new RegExp(i)},inputRules(i){this.thisInputRules=new RegExp(i)}},computed:{$theme(){return q(this.$props).theme.value},isReadOnly(){return this.readonly.toString()=="true"||this.readonly=="readonly"||this.readonly===""},isDisabled(){return this.disabled.toString()=="true"||this.disabled=="disabled"||this.disabled===""}},mounted(){this.thisPattern=new RegExp(this.pattern),this.thisInputRules=new RegExp(this.inputRules)},methods:{keyDown(i){this.$emit("keydown",i),i.key&&(i.key.length>1||this.thisPattern.test(i.key)||i.preventDefault())},focusInspect(){this.mode=="mask"?this.$refs.mask_input.focusInspect():this.$refs.input.focus()}}},wC={class:"text-box-container"},kC=["inputmode","type","placeholder","readonly","disabled","maxlength"];function CC(i,e,t,s,n,r){const o=K("mask-input");return f(),g("div",wC,[t.mode=="default"?P((f(),g("input",{key:0,"onUpdate:modelValue":e[0]||(e[0]=a=>n.thisValue=a),inputmode:t.inputmode,type:t.type,placeholder:t.placeholder,class:"fv-text-box-input",readonly:r.isReadOnly,disabled:r.isDisabled,maxlength:t.maxlength,ref:"input",style:V({"font-size":`${t.fontSize}px`,"font-weight":t.fontWeight,color:t.foreground,"text-align":t.textAlign}),onKeydown:e[1]||(e[1]=(...a)=>r.keyDown&&r.keyDown(...a)),onKeyup:e[2]||(e[2]=a=>i.$emit("keyup",a)),onChange:e[3]||(e[3]=a=>i.$emit("change",a)),onPaste:e[4]||(e[4]=a=>i.$emit("paste",a)),onFocus:e[5]||(e[5]=a=>i.$emit("update:focus",!0)),onBlur:e[6]||(e[6]=a=>i.$emit("update:focus",!1))},null,44,kC)),[[Jn,n.thisValue]]):O("",!0),t.mode=="mask"?(f(),G(o,{key:1,ref:"mask_input",modelValue:n.thisMaskValue,"onUpdate:modelValue":e[7]||(e[7]=a=>n.thisMaskValue=a),inputmode:t.inputmode,type:t.type,placeholder:t.placeholder,mask:t.mask,flag:t.flag,pattern:t.pattern,readonly:r.isReadOnly,disabled:r.isDisabled,fontSize:t.fontSize,fontWeight:t.fontWeight,textAlign:t.textAlign,onKeydown:e[8]||(e[8]=a=>i.$emit("keydown",a)),onKeyup:e[9]||(e[9]=a=>i.$emit("keyup",a)),onChange:e[10]||(e[10]=a=>i.$emit("change",a)),onPaste:e[11]||(e[11]=a=>i.$emit("paste",a)),onFocus:e[12]||(e[12]=a=>i.$emit("update:focus",!0)),onBlur:e[13]||(e[13]=a=>i.$emit("update:focus",!1))},null,8,["modelValue","inputmode","type","placeholder","mask","flag","pattern","readonly","disabled","fontSize","fontWeight","textAlign"])):O("",!0)])}const xC=z(_C,[["render",CC]]),SC={name:"FvTextBox",components:{core:xC},emits:["update:modelValue","debounce-input","keydown","keyup","change","paste","left-icon-click","icon-click","click"],props:{...mC,modelValue:{default:""},mode:{default:"default"},inputmode:{default:"text"},placeholder:{default:""},type:{default:"text"},mask:{type:String,default:"mask:___"},flag:{type:String,default:"_"},pattern:{type:String,default:"[Ss]*"},inputRules:{type:String,default:"[Ss]*"},readonly:{default:!1},maxlength:{default:""},prefix:{default:""},suffix:{default:""},leftIcon:{default:""},icon:{default:""},underline:{default:!1},background:{default:""},borderWidth:{default:1},borderColor:{default:""},focusBorderColor:{default:""},fontSize:{default:13.3},fontWeight:{default:"normal"},foreground:{default:""},borderRadius:{default:3},textAlign:{default:"left"},isBoxShadow:{default:!1},revealBorder:{default:!1},revealBorderColor:{default:!1},revealBackgroundColor:{default:!1},status:{default:""},debounceDelay:{default:300},disabled:{default:!1}},data(){return{thisValue:this.modelValue,isFocus:!1,timer:{debounce:null}}},watch:{modelValue(i){this.thisValue=i},thisValue(i){clearTimeout(this.timer.debounce),this.timer.debounce=setTimeout(()=>{this.$emit("debounce-input",this.thisValue)},this.debounceDelay),this.$emit("update:modelValue",i)}},computed:{$theme(){return q(this.$props).theme.value},isUnderline(){return this.underline.toString()=="true"||this.underline=="underline"||this.underline===""},isDisabled(){return this.disabled.toString()=="true"||this.disabled=="disabled"||this.disabled===""},borderLightColor(){return this.revealBorderColor?this.revealBorderColor:this.$theme=="light"?"rgba(121, 119, 117, 0.6)":this.$theme=="dark"||this.$theme=="custom"?"rgba(255, 255, 255, 0.6)":"rgba(121, 119, 117, 0.6)"},backgroundLightColor(){return this.revealBackgroundColor?this.revealBackgroundColor:this.$theme=="light"?"rgba(121, 119, 117, 0.3)":this.$theme=="dark"||this.$theme=="custom"?"rgba(255, 255, 255, 0.3)":"rgba(121, 119, 117, 0.3)"}},mounted(){},methods:{focus(){this.$refs.core.focusInspect()}}},TC={class:"fix-block"},VC={class:"fix-block"};function IC(i,e,t,s,n,r){const o=K("fv-reveal-container"),a=K("core");return f(),g("div",{class:k(["fv-TextBox",[r.$theme,t.status,n.isFocus?"focus":"",r.isDisabled?"disabled":"",r.isUnderline?"underline":"",{shadow:t.isBoxShadow}]]),style:V([{background:t.background,borderRadius:`${t.borderRadius}px`}]),onClick:e[8]||(e[8]=l=>n.isFocus=!0)},[L(o,{parent:()=>i.$el,class:"fv-text-box-reveal-container",backgroundColor:r.backgroundLightColor,borderColor:r.borderLightColor,backgroundGradientSize:120,borderGradientSize:60,borderWidth:t.borderWidth,borderRadius:t.borderRadius,disabled:r.isDisabled||!t.revealBorder},null,8,["parent","backgroundColor","borderColor","borderWidth","borderRadius","disabled"]),h("div",{class:"fv-text-box-wrapper-container",style:V({borderWidth:`${t.borderWidth}px`,borderColor:n.isFocus?t.focusBorderColor:t.borderColor,borderRadius:`${t.borderRadius}px`})},[P(h("div",TC,[h("p",null,H(t.prefix),1)],512),[[R,t.prefix!=""]]),P(h("i",{class:k(["ms-Icon icon-block",[`ms-Icon--${t.leftIcon}`]]),onClick:e[0]||(e[0]=l=>i.$emit("left-icon-click",l))},null,2),[[R,t.leftIcon!=""]]),L(a,{modelValue:n.thisValue,"onUpdate:modelValue":e[1]||(e[1]=l=>n.thisValue=l),ref:"core",mode:t.mode,inputmode:t.inputmode,type:t.type,placeholder:t.placeholder,mask:t.mask,flag:t.flag,pattern:t.pattern,inputRules:t.inputRules,readonly:t.readonly,maxlength:t.maxlength,disabled:t.disabled,fontSize:t.fontSize,fontWeight:t.fontWeight,foreground:t.foreground,textAlign:t.textAlign,focus:n.isFocus,"onUpdate:focus":e[2]||(e[2]=l=>n.isFocus=l),onKeydown:e[3]||(e[3]=l=>i.$emit("keydown",l)),onKeyup:e[4]||(e[4]=l=>i.$emit("keyup",l)),onChange:e[5]||(e[5]=l=>i.$emit("change",l)),onPaste:e[6]||(e[6]=l=>i.$emit("paste",l))},null,8,["modelValue","mode","inputmode","type","placeholder","mask","flag","pattern","inputRules","readonly","maxlength","disabled","fontSize","fontWeight","foreground","textAlign","focus"]),P(h("i",{class:k(["ms-Icon icon-block",[`ms-Icon--${t.icon}`]]),onClick:e[7]||(e[7]=l=>i.$emit("icon-click",l))},null,2),[[R,t.icon!=""]]),P(h("div",VC,[h("p",null,H(t.suffix),1)],512),[[R,t.suffix!=""]])],4)],6)}const LC=z(SC,[["render",IC]]),$C=ie(LC),PC={...te},MC={name:"FvTextField",emits:["update:modelValue","focus","blur","keydown","keyup","change","paste"],props:{...PC,modelValue:{default:""},readonly:{default:!1},placeholder:{default:""},maxlength:{default:""},disabled:{default:!1},underline:{default:!1},background:{default:""},borderWidth:{default:1},borderColor:{default:""},focusBorderColor:{default:""},fontSize:{default:13.8},fontWeight:{default:"normal"},foreground:{default:""},textAlign:{default:"left"},borderRadius:{default:3},isBoxShadow:{default:!1},revealBorder:{default:!1},revealBorderColor:{default:!1},revealBackgroundColor:{default:!1},status:{default:""}},data(){return{thisValue:(typeof this.modelValue).toString()=="string"?this.modelValue:"",isFocus:!1}},watch:{modelValue(i){this.thisValue=i},thisValue(i){this.$emit("update:modelValue",i)}},computed:{$theme(){return q(this.$props).theme.value},isUnderline(){return this.underline.toString()=="true"||this.underline=="underline"||this.underline===""},isReadOnly(){return this.readonly.toString()=="true"||this.readonly=="readonly"||this.readonly===""},isDisabled(){return this.disabled.toString()=="true"||this.disabled=="disabled"||this.disabled===""},borderLightColor(){return this.revealBorderColor?this.revealBorderColor:this.$theme=="light"?"rgba(121, 119, 117, 0.6)":this.$theme=="dark"||this.$theme=="custom"?"rgba(255, 255, 255, 0.6)":"rgba(121, 119, 117, 0.6)"},backgroundLightColor(){return this.revealBackgroundColor?this.revealBackgroundColor:this.$theme=="light"?"rgba(121, 119, 117, 0.3)":this.$theme=="dark"||this.$theme=="custom"?"rgba(255, 255, 255, 0.3)":"rgba(121, 119, 117, 0.3)"}},mounted(){},methods:{focus(i,e){this.isFocus=i,i?this.$emit("focus",e):this.$emit("blur",e)}}},EC=["placeholder","readonly","disabled","maxlength"];function DC(i,e,t,s,n,r){const o=K("fv-reveal-container");return f(),g("div",{class:k(["fv-TextField",[r.$theme,t.status,{focus:n.isFocus},{disabled:r.isDisabled},{underline:r.isUnderline},{shadow:t.isBoxShadow}]]),style:V([{background:t.background,borderRadius:`${t.borderRadius}px`}])},[L(o,{parent:()=>i.$el,class:"fv-text-field-reveal-container",backgroundColor:r.backgroundLightColor,borderColor:r.borderLightColor,backgroundGradientSize:120,borderGradientSize:60,borderWidth:t.borderWidth,borderRadius:t.borderRadius,disabled:r.isDisabled||!t.revealBorder},null,8,["parent","backgroundColor","borderColor","borderWidth","borderRadius","disabled"]),h("div",{class:"text-field-wrapper-container",style:V({borderWidth:`${t.borderWidth}px`,borderColor:n.isFocus?t.focusBorderColor:t.borderColor,borderRadius:`${t.borderRadius}px`})},[P(h("textarea",{"onUpdate:modelValue":e[0]||(e[0]=a=>n.thisValue=a),placeholder:t.placeholder,class:"fv-text-field-input",readonly:r.isReadOnly,disabled:r.isDisabled,maxlength:t.maxlength,style:V({"font-size":`${t.fontSize}px`,"font-weight":t.fontWeight,color:t.foreground,"text-align":t.textAlign}),onKeydown:e[1]||(e[1]=a=>i.$emit("keydown",a)),onKeyup:e[2]||(e[2]=a=>i.$emit("keyup",a)),onChange:e[3]||(e[3]=a=>i.$emit("change",a)),onPaste:e[4]||(e[4]=a=>i.$emit("paste",a)),onFocus:e[5]||(e[5]=a=>r.focus(!0,a)),onBlur:e[6]||(e[6]=a=>r.focus(!1,a))},null,44,EC),[[Kn,n.thisValue]])],4)],6)}const BC=z(MC,[["render",DC]]),RC=ie(BC),FC={...te},zC={name:"FvTimePicker",emits:["update:modelValue","change","focus"],directives:{hover:{bind(i,{value:e}){e!==void 0&&typeof e=="function"&&(i.enterFunction=()=>{e(!0,i)},i.leaveFunction=()=>{e(!1,i)},i.addEventListener("mouseover",i.enterFunction),i.addEventListener("mouseleave",i.leaveFunction))},unbind(i){i.enterFunction!==void 0&&typeof i.enterFunction=="function"&&(i.removeEventListener("mouseover",i.hoverFunction),i.removeEventListener("mouseleave",i.leaveFunction))}}},props:{...FC,timeType:{type:Number,default:12},modelValue:{type:Date,default:()=>new Date},period:{type:Array,default:()=>["A.M.","P.M."]},inputBackground:{default:""},innerBorderColor:{type:String,default:"rgba(200, 200, 200, 0.3)"},selectedBackground:{default:""},optionBackground:{default:""},disabled:{type:Boolean,default:!1},hoverColor:{type:String,default:void 0}},data(){return{show:!1,data:[[],[]],window:{event:{click:i=>{let e=i.target,t=!1;for(;e;){if(e==this.$el){t=!0;break}e=e.parentNode}t||(this.show=!1)}}},config:{optionCount:9,buffer:1},selected:{date:this.modelValue},options:{}}},watch:{show(i){i?(this.selected.date=this.modelValue,this.init()):this.config.clickLock=!1}},computed:{$theme(){return q(this.$props).theme.value}},mounted(){this.init(),this.loadEvent()},beforeUnmount(){this.removeEvent()},methods:{focus(){this.disabled||(this.show=!0)},accept(){this.$emit("update:modelValue",new Date(this.selected.date)),this.$emit("change",new Date(this.selected.date)),this.show=!1},cancel(){this.show=!1},init(){this.data=[[],[]],this.timeType=="12"&&this.data.push([]),this.size=[this.timeType==12?12:24,60,2];for(let i=0;i<this.data.length;++i){let e=this.data[i];this.setOptions(e,this.size[i],i)}},nPrev(i,e,t=1,s=1){i=Math.round(i);let n=t*e;return(i+n-s-t)%e+s},nNext(i,e,t=1,s=1){i=Math.round(i);let n=s*e;return(i+n+t-s)%e+s},loadEvent(){for(let i in this.window.event){let e=this.window.event[i];window.addEventListener(i,e)}},setOptions(i,e,t){let s=this.config.optionCount+this.config.buffer*2,n,r=this.selected.date;switch(t){case 0:n=this.nPrev(r.getHours(),e,Math.floor(s/2),0);break;case 1:n=this.nPrev(r.getMinutes(),e,Math.floor(s/2),0,0);break;case 2:n=this.nPrev(Math.floor(r.getHours()/11.9),e,Math.floor(s/2),0);break}for(let o=0;o<s;++o)t==2&&o!=5&&o-n!=5&&o-n!=4?i.push(n-3):i.push(n),n=this.nNext(n,e,1,t==0?1:0);this.$nextTick(()=>{this.loadSlide(e,t)})},loadSlide(i,e){let t=`col${e}`,s=this.$refs[t][0].scrollTop=40*this.config.buffer;this.options[t]={},this.options[t].scroll&&this.$refs[t][0].removeEventListener("scroll",this.options[t].scroll),this.options[t].scroll=()=>{if(e==2){if(this.$refs[t][0].scrollTop>s){if(this.selected.date.getHours()>11){this.$refs[t][0].scrollTop=s;return}}else if(this.selected.date.getHours()<=11){this.$refs[t][0].scrollTop=s;return}}this.slideCol(s,t,()=>{this.data[e].shift();let n,r;switch(e){case 0:r=this.timeType==12?this.selected.date.getHours()>=12?12:0:1,n=this.nNext(this.selected.date.getHours(),i,0),this.selected.date.setHours(this.nNext(n,i,1,r));break;case 1:n=this.nNext(this.selected.date.getMinutes(),i,0,0),this.selected.date.setMinutes(this.nNext(n,i,1,0));break;case 2:n=Math.floor(this.selected.date.getHours()/11.9),n==0&&this.selected.date.setHours(this.selected.date.getHours()+12);break}let o=this.nNext(n,i,(this.config.optionCount-1)/2+this.config.buffer+1,0);e==2&&(o=-1),this.data[e].push(o)},()=>{this.data[e].pop();let n,r;switch(e){case 0:r=this.timeType==12?this.selected.date.getHours()>=12?12:0:1,n=this.nNext(this.selected.date.getHours(),i,0),this.selected.date.setHours(this.nPrev(n,i,1,r));break;case 1:n=this.nNext(this.selected.date.getMinutes(),i,0,0),this.selected.date.setMinutes(this.nPrev(n,i,1,0));break;case 2:n=Math.floor(this.selected.date.getHours()/12),n==1&&this.selected.date.setHours(this.selected.date.getHours()-12);break}let o=this.nPrev(n,i,(this.config.optionCount-1)/2+this.config.buffer+1,0);e==2&&(o=-1),this.data[e].unshift(o)})},this.$refs[t][0].addEventListener("scroll",this.options[t].scroll)},removeEvent(){for(let i in this.window.event){let e=this.window.event[i];window.removeEventListener(i,e)}for(let i in this.options)this.$refs[i][0].removeEventListener("scroll",this.options[i].scroll)},slideCol(i,e,t,s){Math.abs(this.$refs[e][0].scrollTop-i)>=20&&(this.$refs[e][0].scrollTop>i?t():s(),this.$nextTick(()=>{this.$refs[e][0].scrollTop=i}))},async clickItem(i,e){if(this.config.clickLock)return;this.config.clickLock=!0,this.$refs[i][0].scrollTop=this.config.buffer*40;let t=this.$refs[i][0].scrollTop;this.$refs[i][0].scrollTop+=e-5;let s=Math.abs(e-5);if(s>0){let n=setInterval(()=>{if(this.$refs[i][0].scrollTop==t&&(--s,!s)){clearInterval(n),this.config.clickLock=!1;return}this.config.scrollLock=!0,this.$refs[i][0].scrollTop+=(e-5)*3},20)}else this.config.clickLock=!1},numberFixTwo(i){return i<10?"0"+i:i},showTime(i,e){return i==0?this.nNext(e,this.timeType==12?12:24,0,this.timeType==12?1:0):i==1?this.numberFixTwo(this.nNext(e,60,0,0)):e>=0?this.period[e]:""},hover(i,e){this.hoverColor!==void 0&&(i?(e.hoverStatus===!1||e.hoverStatus===void 0)&&(e.style.backgroundColor&&(e.backgroundColor=e.style.backgroundColor),e.style.backgroundColor=this.hoverColor):e.backgroundColor!==void 0?e.style.backgroundColor=e.backgroundColor:e.style.backgroundColor=null,e.hoverStatus=i)},hoverUpAndDown(i,e){let t=e.querySelector(".fv-TimePicker__options-body-col-down"),s=e.querySelector(".fv-TimePicker__options-body-col-up");i?((t.hoverStatus===!1||t.hoverStatus===void 0)&&(t.style.backgroundColor&&(t.backgroundColor=t.style.backgroundColor),t.style.backgroundColor=this.hoverColor),(s.hoverStatus===!1||s.hoverStatus===void 0)&&(s.style.backgroundColor&&(s.backgroundColor=s.style.backgroundColor),s.style.backgroundColor=this.hoverColor)):(t.backgroundColor!==void 0?t.style.backgroundColor=t.backgroundColor:t.style.backgroundColor=null,s.backgroundColor!==void 0?s.style.backgroundColor=s.backgroundColor:s.style.backgroundColor=null),t.hoverStatus=i,s.hoverStatus=i}}},AC={class:"fv-TimePicker__input-item"},OC={class:"fv-TimePicker__options-body"},NC=["onClick"],HC=h("i",{class:"ms-Icon ms-Icon--CaretUpSolid8"},null,-1),WC=[HC],GC=["onClick"],UC=["onClick"],YC=h("i",{class:"ms-Icon ms-Icon--CaretDownSolid8"},null,-1),qC=[YC],XC={class:"fv-TimePicker__options-bar"},KC=h("i",{class:"ms-Icon ms-Icon--Accept"},null,-1),jC=[KC],JC=h("i",{class:"ms-Icon ms-Icon--Cancel"},null,-1),QC=[JC];function ZC(i,e,t,s,n,r){const o=jn("hover");return f(),g("div",{class:k(["fv-TimePicker",[r.$theme,{disabled:t.disabled}]])},[h("div",{class:"fv-TimePicker__input",style:V({background:t.inputBackground}),onClick:e[0]||(e[0]=a=>r.focus())},[h("button",AC,H(r.showTime(0,t.modelValue.getHours())),1),h("button",{class:"fv-TimePicker__input-item",style:V({borderColor:t.innerBorderColor})},H(r.showTime(1,t.modelValue.getMinutes())),5),t.timeType==12?(f(),g("button",{key:0,style:V({borderColor:t.innerBorderColor}),class:"fv-TimePicker__input-item"},H(r.showTime(2,Math.floor(t.modelValue.getHours()/11.9))),5)):O("",!0)],4),L(fe,{name:"fv-TimePicker__options"},{default:x(()=>[P(h("div",{class:"fv-TimePicker__options",style:V({background:t.optionBackground})},[h("div",OC,[h("div",{class:"fv-TimePicker__options-body-mask",style:V({background:t.selectedBackground})},null,4),(f(!0),g(Y,null,Z(n.data,(a,l)=>P((f(),g("div",{key:`options-col${l}`,class:"fv-TimePicker__options-body-col"},[h("div",{class:"fv-TimePicker__options-body-col-up",onClick:u=>r.clickItem(`col${l}`,4)},WC,8,NC),h("div",{class:"fv-TimePicker__options-body-items",ref_for:!0,ref:`col${l}`},[(f(!0),g(Y,null,Z(a,(u,d)=>P((f(),g("div",{class:"fv-TimePicker__options-body-item",key:`options-col-item${l}-${u}-${d}`,onClick:c=>r.clickItem(`col${l}`,d)},[ue(H(r.showTime(l,u)),1)],8,GC)),[[o,r.hover]])),128))],512),h("div",{class:"fv-TimePicker__options-body-col-down",onClick:u=>r.clickItem(`col${l}`,6)},qC,8,UC)])),[[o,r.hoverUpAndDown]])),128))]),h("div",XC,[P((f(),g("button",{class:"fv-TimePicker__options-bar-accept",onClick:e[1]||(e[1]=(...a)=>r.accept&&r.accept(...a))},jC)),[[o,r.hover]]),P((f(),g("button",{class:"fv-TimePicker__options-bar-cancel",onClick:e[2]||(e[2]=(...a)=>r.cancel&&r.cancel(...a))},QC)),[[o,r.hover]])])],4),[[R,n.show]])]),_:1})],2)}const ex=z(zC,[["render",ZC]]),tx=ie(ex),ix={...te},sx={emits:["mousedown","mouseup","touchstart","touchend","mousemove","touchmove"],props:{value:{default:!1},left:{default:5},ringBackground:{default:""},theme:{type:String,default:"global"}},data(){return{thisValue:this.value,moveable:!1}},watch:{value(i){this.thisValue=i}},computed:{$theme(){return q(this.$props).theme.value}},mounted(){this.Init()},methods:{Init(){window.addEventListener("mousemove",i=>{this.moveable&&this.$emit("mousemove",i)}),window.addEventListener("mouseup",i=>{this.moveable&&this.stop()}),window.addEventListener("touchmove",i=>{this.moveable&&this.$emit("touchmove",i)}),window.addEventListener("touchend",i=>{this.moveable&&this.stop()})},forward(i){i.preventDefault(),this.moveable=!0,i.type==="mousedown"?this.$emit("mousedown",i):this.$emit("touchstart",i)},stop(i){this.moveable=!1,i&&(i.type==="mouseup"?this.$emit("mouseup",i):this.$emit("touchend",i))}}};function nx(i,e,t,s,n,r){return f(),g("div",{class:"fv-toggle-ring",style:V({left:n.moveable?`${t.left}px`:"",background:t.value?"":t.ringBackground}),onMousedown:e[0]||(e[0]=(...o)=>r.forward&&r.forward(...o)),onMouseup:e[1]||(e[1]=(...o)=>r.stop&&r.stop(...o)),onTouchstart:e[2]||(e[2]=(...o)=>r.forward&&r.forward(...o)),onTouchend:e[3]||(e[3]=(...o)=>r.stop&&r.stop(...o))},null,36)}const rx=z(sx,[["render",nx]]),ox={name:"FvToggleSwitch",components:{toggleRing:rx},props:{...ix,modelValue:{default:!1},on:{default:"On"},off:{default:"Off"},onForeground:{default:""},offForeground:{default:""},width:{default:40},height:{default:20},borderColor:{default:""},ringBackground:{default:""},switchOnBackground:{default:""},insideContent:{default:!1},disabled:{default:!1}},data(){return{thisValue:this.modelValue,disX:0,mouseMove:!1,currentLeft:0,toggleLeft:""}},watch:{modelValue(i){this.thisValue=i},thisValue(i){this.$emit("update:modelValue",i)},currentLeft(){this.toggleLeft=this.computedLeft}},computed:{$theme(){return q(this.$props).theme.value},isDisabled(){return this.disabled.toString()=="true"||this.disabled=="disabled"||this.disabled===""},computedLeft(){return!this.$refs.border||this.currentLeft<5?5:this.currentLeft>this.$refs.border.clientWidth-17?this.$refs.border.clientWidth-17:this.currentLeft},finalWidth(){return isNaN(this.width)?this.width:`${this.width}px`},finalHeight(){return isNaN(this.height)?this.height:`${this.height}px`}},methods:{toggleDown(i){this.isDisabled||(i.type.indexOf("mouse")<0&&(i=i.targetTouches[0]),this.disX=i.clientX-this.$refs.toggle.$el.offsetLeft)},toggleMove(i){this.isDisabled||(i.type.indexOf("mouse")<0&&(i=i.targetTouches[0]),this.mouseMove=!0,this.currentLeft=i.clientX-this.disX)},toggleUp(i){i.stopPropagation(),!this.isDisabled&&(this.mouseMove?this.$refs.toggle.$el.offsetLeft+this.$refs.toggle.$el.clientWidth/2>this.$refs.border.clientWidth/2?this.thisValue=!0:this.thisValue=!1:this.thisValue=!this.thisValue,this.mouseMove=!1,this.$emit("toggle",this.thisValue),this.currentLeft=this.$refs.toggle.$el.offsetLeft,this.disX=0)},toggle(i){this.isDisabled||(this.thisValue=!this.thisValue,this.$emit("toggle",this.thisValue))}}};function ax(i,e,t,s,n,r){const o=K("toggle-ring");return f(),g("div",{class:k(["fv-ToggleSwitch",[r.$theme,r.isDisabled?"disabled":""]]),onMouseup:e[0]||(e[0]=(...a)=>r.toggle&&r.toggle(...a))},[h("div",{class:k(["fv-toggle-border",{"toggle-on":n.thisValue}]),ref:"border",style:V([{width:r.finalWidth,height:r.finalHeight,background:n.thisValue?t.switchOnBackground:"",borderColor:n.thisValue?"":t.borderColor}])},[L(o,{value:n.thisValue,left:n.toggleLeft,ringBackground:t.ringBackground,theme:r.$theme,ref:"toggle",onMousedown:r.toggleDown,onTouchstart:r.toggleDown,onMousemove:r.toggleMove,onTouchmove:r.toggleMove,onMouseup:r.toggleUp,onTouchend:r.toggleUp},null,8,["value","left","ringBackground","theme","onMousedown","onTouchstart","onMousemove","onTouchmove","onMouseup","onTouchend"]),P(h("p",{class:"fv-toggle-inside-content",style:V({left:n.thisValue?"10px":"",right:n.thisValue?"":"10px",color:n.thisValue?"white":t.offForeground})},H(n.thisValue?t.on:t.off),5),[[R,t.insideContent]])],6),P(h("p",{class:"fv-toggle-content",style:V({color:n.thisValue?t.onForeground:t.offForeground})},H(n.thisValue?t.on:t.off),5),[[R,!t.insideContent]])],34)}const lx=z(ox,[["render",ax]]),ux=ie(lx),dx={...te},hx={name:"TreeViewItem",emits:["require-render","selected-change","set-drag-item","drop-item","handle-click","item-drag-over","item-drag-leave","item-drop"],props:{modelValue:{type:Object,default:()=>({})},parent:{type:Object,default:()=>({})},kIndex:{default:0},deep:{default:0},space:{default:20},expandClickMode:{default:"icon"},backgroundColorHover:{default:""},backgroundColorActive:{default:""},foreground:{default:"rgba(0, 90, 158, 1)"},dropBackgroundColor:{default:"rgba(0, 90, 158, 0.1)"},draggable:{default:!1},checkable:{default:!1},expandedIcon:{default:"ChevronDownSmall"},unexpandedIcon:{default:"ChevronRightSmall"},itemHeight:{default:30},showLoading:{default:!1},expandedIconPosition:{default:"left"},dragItem:{default:()=>({item:null,parent:null})},theme:{type:String,default:"global"}},data(){return{isRender:!1,cssMode:"normal",dropMode:"none",dragMode:!1,timer:{drop:null,delayExpand:null,requireRender:null}}},watch:{},computed:{backgroundColor(){return this.cssMode==="hover"?this.backgroundColorHover:this.cssMode==="active"?this.backgroundColorActive:""}},mounted(){this.requireRenderInit()},methods:{requireRenderInit(){clearInterval(this.timer.requireRender),this.timer.requireRender=setInterval(()=>{if(this.isRender){clearInterval(this.timer.requireRender);return}(!this.parent||this.parent.expanded)&&(this.$emit("require-render",async()=>{for(this.isRender=!0;!this.$el.style;)await new Promise(i=>{setTimeout(()=>{i(1)},30)})}),clearInterval(this.timer.requireRender))},100)},expandClick(i="icon",e){if(this.valueTrigger(this.modelValue.disabled))return;let t=e.target,s=!1;for(;t&&t.tagName&&t.tagName.toLowerCase()!="body";){if(t===this.$refs.expander||t===this.$refs.check.$el){s=!0;break}t=t.parentNode}if(s||(this.$emit("selected-change",this.modelValue),this.modelValue.selected=!0,this.$emit("handle-click",this.modelValue)),t=e.target,i==="icon"&&this.expandClickMode==="icon")e.stopPropagation(),t===this.$refs.expander&&(this.modelValue.expanded=!this.modelValue.expanded);else if(i==="normal"&&this.expandClickMode==="normal"){for(s=!1;t&&t.tagName&&t.tagName.toLowerCase()!="body";){if(t===this.$refs.check.$el){s=!0;break}t=t.parentNode}s||(this.modelValue.expanded=!this.modelValue.expanded)}},switchCSSMode(i){this.valueTrigger(this.modelValue.disabled)||(this.cssMode=i)},handleDrag(i){i.stopPropagation(),this.modelValue.expanded=!1,console.log("expanded"),this.$emit("set-drag-item",{item:this.modelValue,parent:this.parent}),this.dragMode=!0},isURL(i){return!!(i.startsWith("http")||i.startsWith(".")||i.startsWith("/"))},changeChildren(i){if(this.modelValue.children){let e=this.modelValue.children;for(let t=0;t<e.length;t++){let s=e[t];s.selected=i,s.children&&(e=e.concat(s.children))}}},valueTrigger(i){return typeof i=="function"?i():i},dragOver(i){if(i.preventDefault(),i.stopPropagation(),this.valueTrigger(this.modelValue.disabled)||this.dragItem.item===this.modelValue)return;this.$emit("item-drag-over",{drop:this.modelValue,dropParent:this.parent});const{clientY:e}=i,{top:t,height:s}=this.$refs.item.getBoundingClientRect();e-t<s/2?(this.dropMode="before",clearTimeout(this.timer.delayExpand)):this.valueTrigger(this.modelValue.dropInside)===!1?(this.dropMode="before",clearTimeout(this.timer.delayExpand)):(this.dropMode="enter",this.timer.delayExpand=setTimeout(()=>{this.modelValue.expanded=!0},500)),clearTimeout(this.timer.drop)},dragLeave(i){i.preventDefault(),i.stopPropagation(),this.$emit("item-drag-leave",{drop:this.modelValue,dropParent:this.parent}),clearTimeout(this.timer.drop),this.timer.drop=setTimeout(()=>{this.dropMode="leave"},100)},dropItem(i){if(i.preventDefault(),i.stopPropagation(),this.valueTrigger(this.modelValue.disabled)){this.dropMode="leave";return}this.$emit("item-drop",{drop:this.modelValue,dropParent:this.parent}),this.dragItem&&this.$emit("drop-item",{drop:this.modelValue,dropParent:this.parent,drag:this.dragItem.item,dragParent:this.dragItem.parent,mode:this.dropMode}),this.dropMode="leave"}},beforeUnmount(){clearInterval(this.timer.requireRender)}},cx=["draggable"],fx={key:0,class:"fv-tree-view-item-expander",style:{"margin-right":"10px"}},mx={class:"fv-tree-view-item-content"},gx=["src"],px={key:1,class:"fv-tree-view-item-expander"},vx={key:0,class:"fv-tree-view-item-children"};function bx(i,e,t,s,n,r){const o=K("fv-check-box"),a=K("fv-progress-ring"),l=K("tree-view-item",!0);return n.isRender?P((f(),g("div",{key:0,class:"fv-tree-view-item",draggable:t.draggable,onDragstart:e[21]||(e[21]=(...u)=>r.handleDrag&&r.handleDrag(...u)),onDragend:e[22]||(e[22]=u=>n.dragMode=!1)},[h("div",{class:k(["fv-tree-view-item-container",[{selected:t.modelValue.selected,disabled:r.valueTrigger(t.modelValue.disabled)}]]),ref:"item",style:V({height:`${t.itemHeight}px`,"background-color":n.dropMode==="enter"?t.dropBackgroundColor:r.backgroundColor,"border-top":n.dropMode==="before"?`${t.itemHeight}px solid transparent`:""}),onDragover:e[3]||(e[3]=(...u)=>r.dragOver&&r.dragOver(...u)),onDragleave:e[4]||(e[4]=(...u)=>r.dragLeave&&r.dragLeave(...u)),onDrop:e[5]||(e[5]=(...u)=>r.dropItem&&r.dropItem(...u)),onClick:e[6]||(e[6]=u=>r.expandClick("normal",u)),onMouseenter:e[7]||(e[7]=u=>r.switchCSSMode("hover")),onMouseleave:e[8]||(e[8]=u=>r.switchCSSMode("normal")),onMousedown:e[9]||(e[9]=u=>r.switchCSSMode("active")),onMouseup:e[10]||(e[10]=u=>r.switchCSSMode("hover")),onTouchstart:e[11]||(e[11]=u=>r.switchCSSMode("active")),onTouchend:e[12]||(e[12]=u=>r.switchCSSMode("normal"))},[P(h("i",{class:"fv-tree-view-item-choosen-bar",style:V({background:t.foreground})},null,4),[[R,t.modelValue.selected&&!t.checkable]]),P(L(o,{modelValue:t.modelValue.selected,"onUpdate:modelValue":e[0]||(e[0]=u=>t.modelValue.selected=u),theme:t.theme,background:t.foreground,ref:"check",style:{"margin-right":"10px"},onClick:r.changeChildren},null,8,["modelValue","theme","background","onClick"]),[[R,t.checkable]]),h("div",{class:"fv-tree-view-item-container-main",style:V({"padding-left":`${t.deep*t.space}px`})},[t.expandedIconPosition==="left"?(f(),g("div",fx,[!r.valueTrigger(t.modelValue.loading)||!t.showLoading?P((f(),g("i",{key:0,class:k(["ms-Icon fv-tree-view-item-expander-icon",[`ms-Icon--${t.modelValue.expanded?t.expandedIcon:t.unexpandedIcon}`]]),ref:"expander",onClick:e[1]||(e[1]=u=>r.expandClick("icon",u))},null,2)),[[R,t.modelValue.children]]):(f(),G(a,{key:1,loading:!0,r:10,borderWidth:"2",color:t.foreground,background:"transparent"},null,8,["color"]))])):O("",!0),h("div",mx,[w(i.$slots,"default",{item:t.modelValue,deep:t.deep},()=>[P(h("i",{class:k(["ms-Icon fv-tree-view-item-std-icon",`ms-Icon--${r.valueTrigger(t.modelValue.icon)}`])},null,2),[[R,t.modelValue.icon&&!r.isURL(r.valueTrigger(t.modelValue.icon))]]),t.modelValue.icon&&r.isURL(r.valueTrigger(t.modelValue.icon))?(f(),g("img",{key:0,class:"fv-tree-view-item-std-icon",src:r.valueTrigger(t.modelValue.icon)},null,8,gx)):O("",!0),h("p",{class:"fv-tree-view-item-text",style:V({"margin-left":t.modelValue.icon?"10px":""})},H(r.valueTrigger(t.modelValue.label)),5)])]),t.expandedIconPosition==="right"?(f(),g("div",px,[!r.valueTrigger(t.modelValue.loading)||!t.showLoading?P((f(),g("i",{key:0,class:k(["ms-Icon fv-tree-view-item-expander-icon",[`ms-Icon--${t.modelValue.expanded?t.expandedIcon:t.unexpandedIcon}`]]),ref:"expander",onClick:e[2]||(e[2]=u=>r.expandClick("icon",u))},null,2)),[[R,t.modelValue.children]]):(f(),G(a,{key:1,loading:!0,r:10,borderWidth:"2",color:t.foreground,background:"transparent"},null,8,["color"]))])):O("",!0)],4)],38),L(fe,{name:"fv-tree-view-children-list"},{default:x(()=>[t.modelValue.children?P((f(),g("div",vx,[(f(!0),g(Y,null,Z(t.modelValue.children,(u,d)=>(f(),G(l,{key:`parent: ${t.kIndex}, self: ${d}`,modelValue:u,parent:t.modelValue,kIndex:d,deep:t.deep+1,space:t.space,expandClickMode:t.expandClickMode,draggable:t.draggable,checkable:t.checkable,foreground:t.foreground,expandedIcon:t.expandedIcon,unexpandedIcon:t.unexpandedIcon,backgroundColorHover:t.backgroundColorHover,backgroundColorActive:t.backgroundColorActive,itemHeight:t.itemHeight,expandedIconPosition:t.expandedIconPosition,showLoading:t.showLoading,dragItem:t.dragItem,theme:t.theme,onRequireRender:e[13]||(e[13]=c=>i.$emit("require-render",c)),onSelectedChange:e[14]||(e[14]=c=>i.$emit("selected-change",c)),onSetDragItem:e[15]||(e[15]=c=>i.$emit("set-drag-item",c)),onDropItem:e[16]||(e[16]=c=>i.$emit("drop-item",c)),onHandleClick:e[17]||(e[17]=c=>i.$emit("handle-click",c)),onItemDragOver:e[18]||(e[18]=c=>i.$emit("item-drag-over",c)),onItemDragLeave:e[19]||(e[19]=c=>i.$emit("item-drag-leave",c)),onItemDrop:e[20]||(e[20]=c=>i.$emit("item-drop",c))},{default:x(c=>[w(i.$slots,"default",{item:c.item,deep:c.deep})]),_:2},1032,["modelValue","parent","kIndex","deep","space","expandClickMode","draggable","checkable","foreground","expandedIcon","unexpandedIcon","backgroundColorHover","backgroundColorActive","itemHeight","expandedIconPosition","showLoading","dragItem","theme"]))),128))],512)),[[R,t.modelValue.expanded]]):O("",!0)]),_:3})],40,cx)),[[R,r.valueTrigger(t.modelValue.show)!==!1]]):O("",!0)}const yx=z(hx,[["render",bx]]),_x={name:"FvTreeView",components:{TreeViewItem:yx},emits:["click","drop-item","item-drag-over","item-drag-leave","item-drop"],props:{...dx,modelValue:{type:Array,default:()=>[]},space:{default:20},draggable:{default:!1},checkable:{default:!1},expandedIcon:{default:"ChevronDownSmall"},unexpandedIcon:{default:"ChevronRightSmall"},foreground:{default:"rgba(0, 90, 158, 1)"},backgroundColorHover:{default:""},backgroundColorActive:{default:""},expandClickMode:{default:"normal"},expandedIconPosition:{default:"left"},itemHeight:{default:30},showLoading:{default:!1}},data(){return{thisValue:this.modelValue,dragItem:{item:null,parent:null},queueFunction:[],lock:{isQueueRunning:!0}}},watch:{modelValue(){this.thisValue=this.value},async"queueFunction.length"(){if(this.queueFunction.length!==0&&this.lock.isQueueRunning){for(this.lock.isQueueRunning=!1;this.queueFunction.length>0;){let i=this.queueFunction.shift();try{await i()}catch(e){console.log(e)}}this.lock.isQueueRunning=!0}}},computed:{$theme(){return q(this.$props).theme.value}},methods:{clearSelected(i){let e=this.thisValue;for(let t=0;t<e.length;t++){let s=e[t];s!==i&&(s.selected=!1),s.children&&(e=e.concat(s.children))}},pushRender(i){this.queueFunction.push(i)}}};function wx(i,e,t,s,n,r){const o=K("tree-view-item");return f(),g("div",{class:k(["fv-TreeView",[r.$theme]])},[(f(!0),g(Y,null,Z(n.thisValue,(a,l)=>(f(),G(o,{key:`parent: root, self: ${l}`,modelValue:a,parent:null,kIndex:l,deep:0,space:t.space,draggable:t.draggable,checkable:t.checkable,expandClickMode:t.expandClickMode,foreground:t.foreground,expandedIcon:t.expandedIcon,unexpandedIcon:t.unexpandedIcon,backgroundColorHover:t.backgroundColorHover,backgroundColorActive:t.backgroundColorActive,itemHeight:t.itemHeight,expandedIconPosition:t.expandedIconPosition,showLoading:t.showLoading,dragItem:n.dragItem,theme:r.$theme,onRequireRender:r.pushRender,onSelectedChange:r.clearSelected,onSetDragItem:e[0]||(e[0]=u=>n.dragItem=u),onDropItem:e[1]||(e[1]=u=>i.$emit("drop-item",{root:n.thisValue,...u})),onHandleClick:e[2]||(e[2]=u=>i.$emit("click",u)),onItemDragOver:e[3]||(e[3]=u=>i.$emit("item-drag-over",{root:n.thisValue,...u})),onItemDragLeave:e[4]||(e[4]=u=>i.$emit("item-drag-leave",{root:n.thisValue,...u})),onItemDrop:e[5]||(e[5]=u=>i.$emit("item-drop",{root:n.thisValue,...u}))},{default:x(u=>[w(i.$slots,"default",{item:u.item,deep:u.deep})]),_:2},1032,["modelValue","kIndex","space","draggable","checkable","expandClickMode","foreground","expandedIcon","unexpandedIcon","backgroundColorHover","backgroundColorActive","itemHeight","expandedIconPosition","showLoading","dragItem","theme","onRequireRender","onSelectedChange"]))),128))],2)}const kx=z(_x,[["render",wx]]),Cx=ie(kx),xx={...te},Sx={name:"FvVerifyBox",emits:["update:modelValue","confirm"],props:{...xx,modelValue:{default:""},length:{default:4},inputmode:{default:"numeric"},underline:{default:!1},background:{default:""},borderWidth:{default:1},borderColor:{default:""},focusBorderColor:{default:""},fontSize:{default:18},fontWeight:{default:"bold"},foreground:{default:""},borderRadius:{default:3},isBoxShadow:{default:!1},revealBorder:{default:!1},disabled:{default:!1}},data(){return{thisValue:[]}},watch:{modelValue(){this.valueFormat()},thisValue:{deep:!0,handler(i){this.$emit("update:modelValue",i.join(""))}}},computed:{isUnderline(){return this.underline.toString()=="true"||this.underline=="underline"||this.underline===""},isDisabled(){return this.disabled.toString()=="true"||this.disabled=="disabled"||this.disabled===""},$theme(){return q(this.$props).theme.value}},mounted(){this.valueFormat()},methods:{valueFormat(){this.thisValue=[];for(let i=0;i<this.length;i++)this.modelValue[i]?this.thisValue.push(this.modelValue[i]):this.thisValue.push("")},handleKeyDown(i,e){if(i.preventDefault(),console.log(i),i.key.length===1&&!i.ctrlKey&&(this.thisValue[e]=i.key),i.keyCode===8){this.thisValue[e]="",e>0&&this.$refs[`t${e-1}`][0].focus();return}if(i.keyCode===86&&i.ctrlKey){navigator.clipboard.readText().then(t=>{for(let s=0;s<this.length;s++)this.thisValue[s]=t[s]});return}i.keyCode===13&&this.$emit("confirm",this.thisValue.join("")),e<this.length-1&&(i.key.length===1||i.keyCode===9)&&this.$refs[`t${e+1}`][0].focus(),e===this.length-1&&this.$emit("confirm",this.thisValue.join(""))},handlePaste(i){console.log(i);let e=i.clipboardData.getData("text/plain");for(let t=0;t<this.length;t++)this.thisValue[t]=e[t]}}};function Tx(i,e,t,s,n,r){const o=K("fv-text-box");return f(),g("div",{class:k(["fv-VerifyBox",[r.$theme]])},[n.thisValue.length===t.length?(f(),g("div",{key:0,class:"fv-verify-container",onPaste:e[0]||(e[0]=a=>r.handlePaste(a))},[(f(!0),g(Y,null,Z(t.length,(a,l)=>(f(),G(o,{modelValue:n.thisValue[l],inputmode:t.inputmode,class:"fv-verify-unit",theme:i.theme,key:l,disabled:r.isDisabled,maxlength:1,underline:t.underline,background:t.background,"border-width":t.borderWidth,"border-color":t.borderColor,"focus-border-color":t.focusBorderColor,"font-size":t.fontSize,"font-weight":t.fontWeight,foreground:t.foreground,textAlign:"center","border-radius":t.borderRadius,"is-box-shadow":t.isBoxShadow,"reveal-border":t.revealBorder,ref_for:!0,ref:`t${l}`,onKeydown:u=>r.handleKeyDown(u,l)},null,8,["modelValue","inputmode","theme","disabled","underline","background","border-width","border-color","focus-border-color","font-size","font-weight","foreground","border-radius","is-box-shadow","reveal-border","onKeydown"]))),128))],32)):O("",!0)],2)}const Vx=z(Sx,[["render",Tx]]),Ix=ie(Vx),Lx={...te},$x={emits:["mousedown","mouseup","touchstart","touchend","mousemove","touchmove"],props:{type:{type:String,default:"horizontal"},theme:{type:String,default:"global"}},data(){return{moveable:!1}},computed:{$theme(){return q(this.$props).theme.value}},mounted(){this.Init()},methods:{Init(){window.addEventListener("mousemove",i=>{this.moveable&&this.$emit("mousemove",i)}),window.addEventListener("mouseup",i=>{this.moveable&&this.stop()}),window.addEventListener("touchmove",i=>{this.moveable&&this.$emit("touchmove",i)}),window.addEventListener("touchend",i=>{this.moveable&&this.stop()})},forward(i){i.preventDefault(),this.moveable=!0,i.type==="mousedown"?this.$emit("mousedown",i):this.$emit("touchstart",i)},stop(i){this.moveable=!1,i&&(i.type==="mouseup"?this.$emit("mouseup",i):this.$emit("touchend",i))}}},Px=h("i",null,null,-1),Mx=[Px];function Ex(i,e,t,s,n,r){return f(),g("div",{class:k(["fv-web-window-spliter",[{horizontal:t.type==="horizontal",vertical:t.type==="vertical",both:t.type==="both"}]]),onMousedown:e[0]||(e[0]=(...o)=>r.forward&&r.forward(...o)),onMouseup:e[1]||(e[1]=(...o)=>r.stop&&r.stop(...o)),onTouchstart:e[2]||(e[2]=(...o)=>r.forward&&r.forward(...o)),onTouchend:e[3]||(e[3]=(...o)=>r.stop&&r.stop(...o))},Mx,34)}const Dx=z($x,[["render",Ex]]),Bx={name:"FvWebWindow",components:{spliter:Dx},props:{...Lx,modelValue:{default:!0},title:{type:String,default:"WebWindow"},left:{default:0},top:{default:0},refreshPos:{default:!1},isResize:{default:!1},isAcrylic:{default:!1}},data(){return{thisValue:this.modelValue,moveable:!1,freezeTransition:!0,disX:0,disY:0,disWidth:0,disHeight:0,currentLeft:"0px",currentTop:"0px",currentWidth:0,currentHeight:0,isInit:!0}},watch:{modelValue(i){this.thisValue=i},thisValue(i){this.refreshPos&&i&&this.posInit(),this.$emit("update:modelValue",i)},left(i){this.currentLeft=`${i}px`},top(i){this.currentTop=`${i}px`}},computed:{$theme(){return q(this.$props).theme.value}},mounted(){this.Init(),this.eventInit()},methods:{Init(){window.addEventListener("mousemove",i=>{this.moveable&&(this.currentLeft=`${i.clientX-this.disX}px`,this.currentTop=`${i.clientY-this.disY}px`)}),window.addEventListener("touchmove",i=>{i=i.targetTouches[0],this.moveable&&(this.currentLeft=`${i.clientX-this.disX}px`,this.currentTop=`${i.clientY-this.disY}px`)}),window.addEventListener("mouseup",i=>{this.moveable&&this.stop()}),window.addEventListener("touchup",i=>{this.moveable&&this.stop()})},posInit(){let i=this.$el.clientWidth,e=this.$el.clientHeight;this.left==0?this.currentLeft=`${window.innerWidth/2-i/2}px`:this.currentLeft=`${this.left}px`,this.top==0?this.currentTop=`${window.innerHeight/2-e/2}px`:this.currentTop=`${this.top}px`},eventInit(){let i=this.$el;new ResizeObserver(()=>{(!this.isResize||this.isInit)&&this.posInit(),this.isInit&&(this.currentWidth=this.$el.clientWidth,this.currentHeight=this.$el.clientHeight,this.isInit=!1)}).observe(i)},forward(i){this.moveable=!0,this.freezeTransition=!0,i.preventDefault();let{clientX:e,clientY:t}=i.targetTouches?i.targetTouches[0]:i;this.disX=e-this.$el.getBoundingClientRect().left,this.disY=t-this.$el.getBoundingClientRect().top},stop(){this.moveable=!1,this.freezeTransition=!1,this.$el.getBoundingClientRect().left<0&&(this.currentLeft="0px"),this.$el.getBoundingClientRect().top<0&&(this.currentTop="0px"),this.$el.getBoundingClientRect().left+this.$el.clientWidth>window.innerWidth&&(this.currentLeft=`${window.innerWidth-this.$el.clientWidth}px`),this.$el.getBoundingClientRect().top+this.$el.clientHeight>window.innerHeight&&(this.currentTop=`${window.innerHeight-this.$el.clientHeight}px`),setTimeout(()=>{this.freezeTransition=!0},300)},resizeStart(i,e="h"){let{clientX:t,clientY:s}=i.targetTouches?i.targetTouches[0]:i;e!=="v"&&(this.disWidth=t-this.$el.getBoundingClientRect().right),e!=="h"&&(this.disHeight=s-this.$el.getBoundingClientRect().bottom)},resizeMove(i,e="h"){let{clientX:t,clientY:s}=i.targetTouches?i.targetTouches[0]:i;e!=="v"&&(this.currentWidth=t-this.$el.getBoundingClientRect().left+this.disWidth+15),e!=="h"&&(this.currentHeight=s-this.$el.getBoundingClientRect().top+this.disHeight+15)},stopPropagation(i){i.stopPropagation()},close(){this.$emit("close"),this.thisValue=!1}}},Rx={style:{"margin-left":"10px","user-select":"none"}},Fx=h("i",{class:"ms-Icon ms-Icon--Cancel"},null,-1),zx=[Fx];function Ax(i,e,t,s,n,r){const o=K("spliter");return P((f(),g("div",{class:k(["fv-WebWindow",[r.$theme,{"static-transition":!n.freezeTransition,"enabled-resize":t.isResize,dark:i.theme=="dark","is-acrylic":t.isAcrylic}]]),style:V({left:n.currentLeft,top:n.currentTop,width:n.currentWidth==0?"":`${n.currentWidth}px`,height:n.currentHeight==0?"":`${n.currentHeight}px`}),ref:"block"},[h("div",{draggable:"false",class:"title-bar",onMousedown:e[2]||(e[2]=(...a)=>r.forward&&r.forward(...a)),onMouseup:e[3]||(e[3]=(...a)=>r.stop&&r.stop(...a)),onTouchstart:e[4]||(e[4]=(...a)=>r.forward&&r.forward(...a)),onTouchend:e[5]||(e[5]=(...a)=>r.stop&&r.stop(...a))},[h("p",Rx,H(t.title),1),h("button",{class:"control-btn shut-down",onMousedown:e[0]||(e[0]=(...a)=>r.stopPropagation&&r.stopPropagation(...a)),onClick:e[1]||(e[1]=(...a)=>r.close&&r.close(...a))},zx,32)],32),w(i.$slots,"default"),t.isResize?(f(),G(o,{key:0,onMousedown:r.resizeStart,onTouchstart:r.resizeStart,onMousemove:r.resizeMove,onTouchmove:r.resizeMove},null,8,["onMousedown","onTouchstart","onMousemove","onTouchmove"])):O("",!0),t.isResize?(f(),G(o,{key:1,type:"vertical",onMousedown:e[6]||(e[6]=a=>r.resizeStart(a,"v")),onTouchstart:e[7]||(e[7]=a=>r.resizeStart(a,"v")),onMousemove:e[8]||(e[8]=a=>r.resizeMove(a,"v")),onTouchmove:e[9]||(e[9]=a=>r.resizeMove(a,"v"))})):O("",!0),t.isResize?(f(),G(o,{key:2,type:"both",onMousedown:e[10]||(e[10]=a=>r.resizeStart(a,"both")),onTouchstart:e[11]||(e[11]=a=>r.resizeStart(a,"both")),onMousemove:e[12]||(e[12]=a=>r.resizeMove(a,"both")),onTouchmove:e[13]||(e[13]=a=>r.resizeMove(a,"both"))})):O("",!0)],6)),[[R,n.thisValue]])}const Ox=z(Bx,[["render",Ax]]),Nx=ie(Ox);class Gt{constructor(){Tt(this,"date");this.date=new Date}static Parse(e){let t=/\d+/g,s=[],n;for(;(n=t.exec(e))!=null;)s.push(n[0]);return s.length<=3?this.StringToDate(e):this.StringToDateTime(e)}static get Now(){return new Date}static DateToString(e){return`${e.getFullYear()}/${e.getMonth()+1}/${e.getDate()} ${e.getHours()}:${e.getMinutes()}:${e.getSeconds()}`}static StringToDate(e){let t=/\d+/g,s=new Array,n=new Date,r;try{for(;(r=t.exec(e))!=null;)s.push(r[0]);return s.length<=0?new Date:(s[0].length==4?(n.setDate(s[2]),n.setMonth(s[1]-1),n.setFullYear(s[0])):(n.setDate(s[1]),n.setMonth(s[0]-1),n.setFullYear(s[2])),n)}catch{return n}}static StringToDateTime(e){let t=/\d+/g,s=new Array,n=this.StringToDate(e),r;try{for(;(r=t.exec(e))!=null;)s.push(r[0]);return s.length<=0?new Date:(n.setHours(s[3]),n.setMinutes(s[4]),n.setSeconds(s[5]),n)}catch{return n}}static Format(e,t){let s;const n={"Y+":t.getFullYear().toString(),"m+":(t.getMonth()+1).toString(),"d+":t.getDate().toString(),"H+":t.getHours().toString(),"M+":t.getMinutes().toString(),"S+":t.getSeconds().toString()};for(let r in n)s=new RegExp("("+r+")").exec(e),s&&(e=e.replace(s[1],s[1].length==1?n[r]:n[r].padStart(s[1].length,"0")));return e}static DisTime(e,t){return t.getTime()-e.getTime()}static DisDay(e,t){let s=Gt.DisHour(e,t);return Math.abs(s)>24?Math.floor(s/24):e.getDate()==t.getDate()?0:1}static DisHour(e,t){let s=Gt.DisTime(e,t)/36e5;return Math.floor(s)}static DisMinute(e,t){let s=Gt.DisTime(e,t)/6e4;return Math.floor(s)}static DisSecond(e,t){return Math.round(Gt.DisTime(e,t)/1e3)}static Compare(e,t){return e.getTime()-t.getTime()>0?1:e.getTime()==t.getTime()?0:-1}static IsSameDate(e,t){return!(e.getFullYear()!==t.getFullYear()||e.getMonth()!==t.getMonth()||e.getDate()!==t.getDate())}}class Hx{static ScrollToLoadInit(e,t=null,s=0){try{e.addEventListener("scroll",n=>{e.scrollTop+s>=e.scrollHeight-e.clientHeight&&t!=null&&t()})}catch{}}static Guid(){function e(){return((1+Math.random())*65536|0).toString(16).substring(1)}return e()+e()+"-"+e()+"-"+e()+"-"+e()+"-"+e()+e()+e()}static GuidWithoutDash(){function e(){return((1+Math.random())*65536|0).toString(16).substring(1)}return e()+e()+e()+e()+e()+e()+e()+e()}}const Wx={install(i){i.config.globalProperties.$SDate=Gt,i.config.globalProperties.$SUtility=Hx,i.config.globalProperties.$FvConfig=qs()}},Gx=[kc,Lc,Rc,Hc,Zc,Lf,zf,Kf,Pm,mg,kg,Lg,Wg,kp,Zp,nv,vv,Lv,Av,Gv,jv,t0,u0,m0,S0,Yb,r1,g1,L1,R1,G1,Q1,ny,gy,_y,Py,Fy,Wy,jy,v_,x_,E_,A_,U_,nC,fC,$C,RC,tx,ux,Cx,Ix,Nx],Ux={install(i,e){const t=Jo();i.use(t),i.use(Wx);for(const s of Gx)i.use(s)}},Kx={Layout:pc,enhanceApp:({app:i})=>{i.use(Ux)}};export{Kx as R};
diff --git a/assets/fabricmdl2icons-3.54.c196bd11.woff b/assets/fabricmdl2icons-3.54.D1Viihrr.woff
similarity index 100%
rename from assets/fabricmdl2icons-3.54.c196bd11.woff
rename to assets/fabricmdl2icons-3.54.D1Viihrr.woff
diff --git a/assets/guide_components_animated-icon_index.md.yZDMzCFe.js b/assets/guide_components_animated-icon_index.md.yZDMzCFe.js
new file mode 100644
index 0000000..7a57e9d
--- /dev/null
+++ b/assets/guide_components_animated-icon_index.md.yZDMzCFe.js
@@ -0,0 +1,46 @@
+import{_ as p,q as k,Y as s,z as i,H as e,u as r,aq as t,S as l,p as d}from"./chunks/framework.DvIFzl91.js";const E={data(){return{animation:{enter:{transform:"rotate(-180deg)",transition:"transform 0.1s"},leave:[{transform:"rotate(365deg)",transition:"transform 0.3s"},{transform:"rotate(360deg)",transition:"transform 0.1s"},{transform:"rotate(0deg)"}]}}}},V=JSON.parse('{"title":"AnimatedIcon","description":"","frontmatter":{"page":true,"title":"AnimatedIcon"},"headers":[],"relativePath":"guide/components/animated-icon/index.md","filePath":"guide/components/animated-icon/index.md"}'),o=e("h3",{id:"animatedicon-demo",tabindex:"-1"},[r("AnimatedIcon-DEMO "),e("a",{class:"header-anchor",href:"#animatedicon-demo","aria-label":'Permalink to "AnimatedIcon-DEMO"'},"​")],-1),c=e("hr",null,null,-1),g=t(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-AnimatedIcon</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> fontSize</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;36&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-AnimatedIcon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="present-animation" tabindex="-1">Present Animation <a class="header-anchor" href="#present-animation" aria-label="Permalink to &quot;Present Animation&quot;">​</a></h3><hr><ol><li>Scale Down</li></ol>`,4),u=t(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-AnimatedIcon</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> fontSize</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;20&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-AnimatedIcon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><ol start="2"><li>Scale X Down</li></ol>`,2),y=t(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-AnimatedIcon</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> modelValue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;scaleXDown&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> fontSize</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;20&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> icon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;GlobalNavButton&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-AnimatedIcon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><ol start="3"><li>Scale Y Down</li></ol>`,2),m=t(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-AnimatedIcon</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> modelValue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;scaleYDown&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> fontSize</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;20&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> icon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Pause&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-AnimatedIcon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><ol start="4"><li>Back Scale</li></ol>`,2),b=t(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-AnimatedIcon</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> modelValue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;backScale&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> fontSize</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;20&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> icon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Back&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-AnimatedIcon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><ol start="5"><li>Bounce Rotate</li></ol>`,2),_=t(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-AnimatedIcon</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> modelValue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;bounceRotate&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> fontSize</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;20&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> icon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Settings&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-AnimatedIcon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="animatedicon-with-content" tabindex="-1">AnimatedIcon-With Content <a class="header-anchor" href="#animatedicon-with-content" aria-label="Permalink to &quot;AnimatedIcon-With Content&quot;">​</a></h3><hr>`,3),F=e("div",{style:{"margin-left":"15px"}},"Settings",-1),v=t(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-AnimatedIcon</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> modelValue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;bounceRotate&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> fontSize</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;20&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> icon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Settings&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;template v-slot:content&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;div style=&quot;margin-left: 5px;&quot;&gt;Settings&lt;/div&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-AnimatedIcon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h3 id="animatedicon-customize-animation" tabindex="-1">AnimatedIcon-Customize Animation <a class="header-anchor" href="#animatedicon-customize-animation" aria-label="Permalink to &quot;AnimatedIcon-Customize Animation&quot;">​</a></h3><hr>`,3),C=t(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-AnimatedIcon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">customizeAnimation</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">animation</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> fontSize</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;20&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> icon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Settings&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-AnimatedIcon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">data</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> () {</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">    return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        animation: {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            enter: {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                transform: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;rotate(-180deg)&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                transition: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">\`transform 0.1s\`</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            leave: [</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                    transform: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;rotate(365deg)&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                    transition: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">\`transform 0.3s\`</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                    transform: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;rotate(360deg)&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                    transition: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">\`transform 0.1s\`</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                    transform: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;rotate(0deg)&#39;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            ]</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br></div></div><ul><li><p>Event types include <code>enter</code>, <code>move</code>, <code>down</code>, <code>up</code>, <code>leave</code> and corresponding to the <code>MouseEvent</code> and <code>TouchEvent</code> automatically.</p></li><li><p>Each event can be declared as an <code>object</code> contain styles or an <code>array</code> contain multiple styles object. The transitions of an <code>array</code> will execute in order.</p></li></ul><h3 id="animatedicon-customize-background" tabindex="-1">AnimatedIcon-Customize Background <a class="header-anchor" href="#animatedicon-customize-background" aria-label="Permalink to &quot;AnimatedIcon-Customize Background&quot;">​</a></h3><hr>`,4),A=t(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-AnimatedIcon</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> modelValue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;scaleYDown&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> fontSize</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;20&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> icon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Pause&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;whitesmoke&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-AnimatedIcon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="animatedicon-dark-theme" tabindex="-1">AnimatedIcon-Dark Theme <a class="header-anchor" href="#animatedicon-dark-theme" aria-label="Permalink to &quot;AnimatedIcon-Dark Theme&quot;">​</a></h3><hr>`,3),f={style:{padding:"5px",background:"black"}},B=t(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-AnimatedIcon</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;dark&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> fontSize</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;20&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-AnimatedIcon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">value</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">scaleDown</td><td style="text-align:center;">动画预设名称</td></tr><tr><td style="text-align:center;">icon</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">Icon with Fabric-Icon</td></tr><tr><td style="text-align:center;">customizeAnimation</td><td style="text-align:center;">Object</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">自定义动画</td></tr><tr><td style="text-align:center;">background</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">背景色</td></tr><tr><td style="text-align:center;">fontSize</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">16</td><td style="text-align:center;">AnimatedIcon 字体大小</td></tr><tr><td style="text-align:center;">hideContent</td><td style="text-align:center;">[bool]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">隐藏文本内容</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">system</td><td style="text-align:center;">主题样式, 包含<code>light</code>, <code>dark</code>, <code>system</code>, <code>custom</code>几种样式</td></tr></tbody></table><h3 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to &quot;Events&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">事件名(Name)</th><th style="text-align:center;">参数类型(args)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">click</td><td style="text-align:center;">event</td><td style="text-align:center;">AnimatedIcon onclick</td></tr></tbody></table><h3 id="slot" tabindex="-1">Slot <a class="header-anchor" href="#slot" aria-label="Permalink to &quot;Slot&quot;">​</a></h3><hr><ol><li>Default</li></ol><p>默认模板是图标自定义模板</p><div class="language-javascript vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">fv-animated-icon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">fv-animated-icon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ol start="2"><li>Content</li></ol><p>客制化修改文字内容</p><div class="language-javascript vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">fv-animated-icon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Content&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">fv-animated-icon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div>`,15);function q(S,x,T,I,h,D){const a=l("fv-AnimatedIcon"),n=l("ClientOnly");return d(),k("div",null,[o,c,s(n,null,{default:i(()=>[s(a,{fontSize:"36"})]),_:1}),g,s(n,null,{default:i(()=>[s(a,{fontSize:"20"})]),_:1}),u,s(n,null,{default:i(()=>[s(a,{modelValue:"scaleXDown",fontSize:"20",icon:"GlobalNavButton"})]),_:1}),y,s(n,null,{default:i(()=>[s(a,{modelValue:"scaleYDown",fontSize:"20",icon:"Pause"})]),_:1}),m,s(n,null,{default:i(()=>[s(a,{modelValue:"backScale",fontSize:"20",icon:"Back"})]),_:1}),b,s(n,null,{default:i(()=>[s(a,{modelValue:"bounceRotate",fontSize:"20",icon:"Settings"})]),_:1}),_,e("div",null,[s(n,null,{default:i(()=>[s(a,{modelValue:"bounceRotate",fontSize:"20",icon:"Settings"},{content:i(()=>[F]),_:1})]),_:1})]),v,e("div",null,[s(n,null,{default:i(()=>[s(a,{customizeAnimation:h.animation,fontSize:"20",icon:"Settings"},null,8,["customizeAnimation"])]),_:1})]),C,s(n,null,{default:i(()=>[s(a,{modelValue:"scaleYDown",fontSize:"20",icon:"Pause",background:"whitesmoke"})]),_:1}),A,e("div",f,[s(n,null,{default:i(()=>[s(a,{theme:"dark",fontSize:"20"})]),_:1})]),B])}const z=p(E,[["render",q]]);export{V as __pageData,z as default};
diff --git a/assets/guide_components_animated-icon_index.md.yZDMzCFe.lean.js b/assets/guide_components_animated-icon_index.md.yZDMzCFe.lean.js
new file mode 100644
index 0000000..e966312
--- /dev/null
+++ b/assets/guide_components_animated-icon_index.md.yZDMzCFe.lean.js
@@ -0,0 +1 @@
+import{_ as p,q as k,Y as s,z as i,H as e,u as r,aq as t,S as l,p as d}from"./chunks/framework.DvIFzl91.js";const E={data(){return{animation:{enter:{transform:"rotate(-180deg)",transition:"transform 0.1s"},leave:[{transform:"rotate(365deg)",transition:"transform 0.3s"},{transform:"rotate(360deg)",transition:"transform 0.1s"},{transform:"rotate(0deg)"}]}}}},V=JSON.parse('{"title":"AnimatedIcon","description":"","frontmatter":{"page":true,"title":"AnimatedIcon"},"headers":[],"relativePath":"guide/components/animated-icon/index.md","filePath":"guide/components/animated-icon/index.md"}'),o=e("h3",{id:"animatedicon-demo",tabindex:"-1"},[r("AnimatedIcon-DEMO "),e("a",{class:"header-anchor",href:"#animatedicon-demo","aria-label":'Permalink to "AnimatedIcon-DEMO"'},"​")],-1),c=e("hr",null,null,-1),g=t("",4),u=t("",2),y=t("",2),m=t("",2),b=t("",2),_=t("",3),F=e("div",{style:{"margin-left":"15px"}},"Settings",-1),v=t("",3),C=t("",4),A=t("",3),f={style:{padding:"5px",background:"black"}},B=t("",15);function q(S,x,T,I,h,D){const a=l("fv-AnimatedIcon"),n=l("ClientOnly");return d(),k("div",null,[o,c,s(n,null,{default:i(()=>[s(a,{fontSize:"36"})]),_:1}),g,s(n,null,{default:i(()=>[s(a,{fontSize:"20"})]),_:1}),u,s(n,null,{default:i(()=>[s(a,{modelValue:"scaleXDown",fontSize:"20",icon:"GlobalNavButton"})]),_:1}),y,s(n,null,{default:i(()=>[s(a,{modelValue:"scaleYDown",fontSize:"20",icon:"Pause"})]),_:1}),m,s(n,null,{default:i(()=>[s(a,{modelValue:"backScale",fontSize:"20",icon:"Back"})]),_:1}),b,s(n,null,{default:i(()=>[s(a,{modelValue:"bounceRotate",fontSize:"20",icon:"Settings"})]),_:1}),_,e("div",null,[s(n,null,{default:i(()=>[s(a,{modelValue:"bounceRotate",fontSize:"20",icon:"Settings"},{content:i(()=>[F]),_:1})]),_:1})]),v,e("div",null,[s(n,null,{default:i(()=>[s(a,{customizeAnimation:h.animation,fontSize:"20",icon:"Settings"},null,8,["customizeAnimation"])]),_:1})]),C,s(n,null,{default:i(()=>[s(a,{modelValue:"scaleYDown",fontSize:"20",icon:"Pause",background:"whitesmoke"})]),_:1}),A,e("div",f,[s(n,null,{default:i(()=>[s(a,{theme:"dark",fontSize:"20"})]),_:1})]),B])}const z=p(E,[["render",q]]);export{V as __pageData,z as default};
diff --git a/assets/guide_components_badge_index.md.Bb4crrJn.js b/assets/guide_components_badge_index.md.Bb4crrJn.js
new file mode 100644
index 0000000..bf9bd85
--- /dev/null
+++ b/assets/guide_components_badge_index.md.Bb4crrJn.js
@@ -0,0 +1,17 @@
+import{_ as d,q as r,Y as s,z as a,H as p,u as i,aq as l,S as h,p as k}from"./chunks/framework.DvIFzl91.js";const D=JSON.parse('{"title":"Badge","description":"","frontmatter":{"page":true,"title":"Badge"},"headers":[],"relativePath":"guide/components/badge/index.md","filePath":"guide/components/badge/index.md"}'),g={name:"guide/components/badge/index.md"},E=p("h3",{id:"badge-demo",tabindex:"-1"},[i("Badge-DEMO "),p("a",{class:"header-anchor",href:"#badge-demo","aria-label":'Permalink to "Badge-DEMO"'},"​")],-1),o=p("hr",null,null,-1),u=l(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Badge</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">modelValue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">3</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;fv-button&gt;Badge&lt;/fv-button&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Badge</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="badge-different-type" tabindex="-1">Badge Different Type <a class="header-anchor" href="#badge-different-type" aria-label="Permalink to &quot;Badge Different Type&quot;">​</a></h3><hr><p>Success</p>`,4),c=l(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Badge</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">modelValue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">12</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;success&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;fv-button&gt;Badge&lt;/fv-button&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Badge</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>Warning</p>`,2),y=l(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Badge</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">modelValue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">2</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;warning&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;fv-button&gt;Badge&lt;/fv-button&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Badge</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>Primary</p>`,2),b=l(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Badge</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">modelValue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">9</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;primary&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;fv-button&gt;Badge&lt;/fv-button&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Badge</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="badge-customize-content" tabindex="-1">Badge Customize Content <a class="header-anchor" href="#badge-customize-content" aria-label="Permalink to &quot;Badge Customize Content&quot;">​</a></h3><hr>`,3),_=l(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Badge</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;You&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;fv-button&gt;Badge&lt;/fv-button&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Badge</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="badge-max-value" tabindex="-1">Badge Max Value <a class="header-anchor" href="#badge-max-value" aria-label="Permalink to &quot;Badge Max Value&quot;">​</a></h3><hr>`,3),v=l(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Badge</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;100&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> max</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;99&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;fv-button&gt;Badge&lt;/fv-button&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Badge</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="badge-dot" tabindex="-1">Badge Dot <a class="header-anchor" href="#badge-dot" aria-label="Permalink to &quot;Badge Dot&quot;">​</a></h3><hr>`,3),m=l(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Badge</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">isDot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;fv-button&gt;Badge&lt;/fv-button&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Badge</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">value</td><td style="text-align:center;">[string,number]</td><td style="text-align:center;">Yes</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">max</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">Infinity</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">isDot</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">hidden</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">type</td><td style="text-align:center;">[&#39;primary&#39;,&#39;success&#39;,&#39;warning&#39;,&#39;danger&#39;,&#39;info&#39;,string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">default</td><td style="text-align:center;"><code>Badge</code>类型, 可以输入颜色字符串</td></tr></tbody></table><h3 id="slot" tabindex="-1">Slot <a class="header-anchor" href="#slot" aria-label="Permalink to &quot;Slot&quot;">​</a></h3><hr><ol><li>Default</li></ol><div class="language-javascript vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">fv-badge</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">fv-badge</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div>`,8);function f(F,B,C,x,T,A){const t=h("fv-button"),e=h("fv-Badge"),n=h("ClientOnly");return k(),r("div",null,[E,o,s(n,null,{default:a(()=>[s(e,{modelValue:3},{default:a(()=>[s(t,null,{default:a(()=>[i("Badge")]),_:1})]),_:1})]),_:1}),u,s(n,null,{default:a(()=>[s(e,{modelValue:12,type:"success"},{default:a(()=>[s(t,null,{default:a(()=>[i("Badge")]),_:1})]),_:1})]),_:1}),c,s(n,null,{default:a(()=>[s(e,{modelValue:2,type:"warning"},{default:a(()=>[s(t,null,{default:a(()=>[i("Badge")]),_:1})]),_:1})]),_:1}),y,s(n,null,{default:a(()=>[s(e,{modelValue:9,type:"primary"},{default:a(()=>[s(t,null,{default:a(()=>[i("Badge")]),_:1})]),_:1})]),_:1}),b,s(n,null,{default:a(()=>[s(e,{value:"You"},{default:a(()=>[s(t,null,{default:a(()=>[i("Badge")]),_:1})]),_:1})]),_:1}),_,s(n,null,{default:a(()=>[s(e,{value:"100",max:"99"},{default:a(()=>[s(t,null,{default:a(()=>[i("Badge")]),_:1})]),_:1})]),_:1}),v,s(n,null,{default:a(()=>[s(e,{isDot:!0},{default:a(()=>[s(t,null,{default:a(()=>[i("Badge")]),_:1})]),_:1})]),_:1}),m])}const V=d(g,[["render",f]]);export{D as __pageData,V as default};
diff --git a/assets/guide_components_badge_index.md.Bb4crrJn.lean.js b/assets/guide_components_badge_index.md.Bb4crrJn.lean.js
new file mode 100644
index 0000000..db650b9
--- /dev/null
+++ b/assets/guide_components_badge_index.md.Bb4crrJn.lean.js
@@ -0,0 +1 @@
+import{_ as d,q as r,Y as s,z as a,H as p,u as i,aq as l,S as h,p as k}from"./chunks/framework.DvIFzl91.js";const D=JSON.parse('{"title":"Badge","description":"","frontmatter":{"page":true,"title":"Badge"},"headers":[],"relativePath":"guide/components/badge/index.md","filePath":"guide/components/badge/index.md"}'),g={name:"guide/components/badge/index.md"},E=p("h3",{id:"badge-demo",tabindex:"-1"},[i("Badge-DEMO "),p("a",{class:"header-anchor",href:"#badge-demo","aria-label":'Permalink to "Badge-DEMO"'},"​")],-1),o=p("hr",null,null,-1),u=l("",4),c=l("",2),y=l("",2),b=l("",3),_=l("",3),v=l("",3),m=l("",8);function f(F,B,C,x,T,A){const t=h("fv-button"),e=h("fv-Badge"),n=h("ClientOnly");return k(),r("div",null,[E,o,s(n,null,{default:a(()=>[s(e,{modelValue:3},{default:a(()=>[s(t,null,{default:a(()=>[i("Badge")]),_:1})]),_:1})]),_:1}),u,s(n,null,{default:a(()=>[s(e,{modelValue:12,type:"success"},{default:a(()=>[s(t,null,{default:a(()=>[i("Badge")]),_:1})]),_:1})]),_:1}),c,s(n,null,{default:a(()=>[s(e,{modelValue:2,type:"warning"},{default:a(()=>[s(t,null,{default:a(()=>[i("Badge")]),_:1})]),_:1})]),_:1}),y,s(n,null,{default:a(()=>[s(e,{modelValue:9,type:"primary"},{default:a(()=>[s(t,null,{default:a(()=>[i("Badge")]),_:1})]),_:1})]),_:1}),b,s(n,null,{default:a(()=>[s(e,{value:"You"},{default:a(()=>[s(t,null,{default:a(()=>[i("Badge")]),_:1})]),_:1})]),_:1}),_,s(n,null,{default:a(()=>[s(e,{value:"100",max:"99"},{default:a(()=>[s(t,null,{default:a(()=>[i("Badge")]),_:1})]),_:1})]),_:1}),v,s(n,null,{default:a(()=>[s(e,{isDot:!0},{default:a(()=>[s(t,null,{default:a(()=>[i("Badge")]),_:1})]),_:1})]),_:1}),m])}const V=d(g,[["render",f]]);export{D as __pageData,V as default};
diff --git a/assets/guide_components_breadcrumb_index.md.DyDm7PeP.js b/assets/guide_components_breadcrumb_index.md.DyDm7PeP.js
new file mode 100644
index 0000000..2296829
--- /dev/null
+++ b/assets/guide_components_breadcrumb_index.md.DyDm7PeP.js
@@ -0,0 +1,10 @@
+import{u as h}from"./chunks/index.CvzShnhD.js";import{k as r,q as k,Y as s,z as t,H as l,u as p,aq as e,S as n,p as d}from"./chunks/framework.DvIFzl91.js";import"./chunks/theme.CgqFBnN_.js";const E=l("h3",{id:"breadcrumb-demo",tabindex:"-1"},[p("Breadcrumb-DEMO "),l("a",{class:"header-anchor",href:"#breadcrumb-demo","aria-label":'Permalink to "Breadcrumb-DEMO"'},"​")],-1),o=l("hr",null,null,-1),g=l("p",null,"Basic",-1),c=e(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Breadcrumb</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> modelValue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;/creatorsn/vfluent/breadcrumb&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Breadcrumb</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="breadcrumb-editable" tabindex="-1">Breadcrumb-Editable <a class="header-anchor" href="#breadcrumb-editable" aria-label="Permalink to &quot;Breadcrumb-Editable&quot;">​</a></h3><hr>`,3),u=e(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Breadcrumb</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> modelValue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;/creatorsn/vfluent/breadcrumb&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">readOnly</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Breadcrumb</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="breadcrumb-custom-icon" tabindex="-1">Breadcrumb-Custom Icon <a class="header-anchor" href="#breadcrumb-custom-icon" aria-label="Permalink to &quot;Breadcrumb-Custom Icon&quot;">​</a></h3><hr><ol><li>Char</li></ol>`,4),y=e(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Breadcrumb</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> modelValue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;/creatorsn/vfluent/breadcrumb&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">readOnly</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> separator</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;&gt;&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Breadcrumb</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><ol start="2"><li>Icon</li></ol>`,2),b=e(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Breadcrumb</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> modelValue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;/creatorsn/vfluent/breadcrumb&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">readOnly</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> separator</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ChevronRightMed&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Breadcrumb</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="breadcrumb-hide-root" tabindex="-1">Breadcrumb-Hide Root <a class="header-anchor" href="#breadcrumb-hide-root" aria-label="Permalink to &quot;Breadcrumb-Hide Root&quot;">​</a></h3><hr>`,3),F=e(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Breadcrumb</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> modelValue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;/creatorsn/vfluent/breadcrumb&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">readOnly</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">showRoot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Breadcrumb</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="breadcrumb-dark-theme" tabindex="-1">Breadcrumb-Dark Theme <a class="header-anchor" href="#breadcrumb-dark-theme" aria-label="Permalink to &quot;Breadcrumb-Dark Theme&quot;">​</a></h3><hr>`,3),m={style:{padding:"8px",background:"black"}},v=e(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">padding</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">8</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">black</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;fv-Breadcrumb modelValue=&quot;/creatorsn/vfluent/breadcrumb&quot; theme=&quot;dark&quot; :readOnly=&quot;false&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/fv-Breadcrumb&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h3 id="breadcrumb-dark-disabled" tabindex="-1">Breadcrumb-Dark Disabled <a class="header-anchor" href="#breadcrumb-dark-disabled" aria-label="Permalink to &quot;Breadcrumb-Dark Disabled&quot;">​</a></h3><hr><ol><li>Light</li></ol>`,4),C=e(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Breadcrumb</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> modelValue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;/creatorsn/vfluent/breadcrumb&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">readOnly</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> disabled</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Breadcrumb</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><ol start="2"><li>Dark</li></ol>`,2),B={style:{padding:"8px",background:"black"}},x=e('<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">padding</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">8</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">black</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>\n<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;fv-Breadcrumb modelValue=&quot;/creatorsn/vfluent/breadcrumb&quot; theme=&quot;dark&quot; :readOnly=&quot;false&quot; disabled&gt;</span></span>\n<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/fv-Breadcrumb&gt;</span></span>\n<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">modelValue</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">字符串路径</td></tr><tr><td style="text-align:center;">separator</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">/</td><td style="text-align:center;">分隔符显示, 可以是字符或图标</td></tr><tr><td style="text-align:center;">separatorChar</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">/</td><td style="text-align:center;">以什么字符分割路径</td></tr><tr><td style="text-align:center;">showRoot</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">true</td><td style="text-align:center;">显示根图标</td></tr><tr><td style="text-align:center;">rootIcon</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">FolderHorizontal</td><td style="text-align:center;">根图标</td></tr><tr><td style="text-align:center;">readOnly</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">true</td><td style="text-align:center;">是否只读</td></tr><tr><td style="text-align:center;">borderColor</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">borderRadius</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">2</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">system</td><td style="text-align:center;">主题样式, 包含<code>light</code>, <code>dark</code>, <code>system</code>, <code>custom</code>几种样式</td></tr></tbody></table><h3 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to &quot;Events&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">事件名(Name)</th><th style="text-align:center;">参数类型(args)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">root-click</td><td style="text-align:center;">object</td><td style="text-align:center;">单击根图标触发</td></tr><tr><td style="text-align:center;">item-click</td><td style="text-align:center;">object</td><td style="text-align:center;">单击路由项触发</td></tr></tbody></table><h3 id="slot" tabindex="-1">Slot <a class="header-anchor" href="#slot" aria-label="Permalink to &quot;Slot&quot;">​</a></h3><hr><ol><li>root</li></ol><p>定义下拉内容</p><ul><li>rootIcon: 根图标</li><li>separatorIcon: 分割图标</li><li>separator: 分隔符</li></ul><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">root</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>\n<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">i</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;fv-bc-separator-content ms-Icon&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">`ms-Icon--${</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">.</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">rootIcon</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">}`</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">i</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>\n<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">i</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;fv-bc-separator-icon ms-Icon&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[x.separatorIcon </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> `ms-Icon--${</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">.</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">separator</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">}`</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> :</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;{{x.separatorIcon </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;&#39;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> :</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> x.separator}}&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">i</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>\n<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><ol start="2"><li>route-item</li></ol><p>自定义<code>Collapse</code>显示图标</p><ul><li>item: 当前项</li><li>index: 当前索引</li></ul><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">route-item</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>\n<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">i</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ms-Icon&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">`ms-Icon--${</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">.</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">icon</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">}`</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">i</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>\n<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div>',17),N=JSON.parse('{"title":"Breadcrumb","description":"","frontmatter":{"page":true,"title":"Breadcrumb"},"headers":[],"relativePath":"guide/components/breadcrumb/index.md","filePath":"guide/components/breadcrumb/index.md"}'),f={name:"guide/components/breadcrumb/index.md"},I=r({...f,setup(q){return h(),(_,D)=>{const i=n("fv-Breadcrumb"),a=n("ClientOnly");return d(),k("div",null,[E,o,g,s(a,null,{default:t(()=>[s(i,{modelValue:"/creatorsn/vfluent/breadcrumb"})]),_:1}),c,s(a,null,{default:t(()=>[s(i,{modelValue:"/creatorsn/vfluent/breadcrumb",readOnly:!1})]),_:1}),u,s(a,null,{default:t(()=>[s(i,{modelValue:"/creatorsn/vfluent/breadcrumb",readOnly:!1,separator:">"})]),_:1}),y,s(a,null,{default:t(()=>[s(i,{modelValue:"/creatorsn/vfluent/breadcrumb",readOnly:!1,separator:"ChevronRightMed"})]),_:1}),b,s(a,null,{default:t(()=>[s(i,{modelValue:"/creatorsn/vfluent/breadcrumb",readOnly:!1,showRoot:!1})]),_:1}),F,l("div",m,[s(a,null,{default:t(()=>[s(i,{modelValue:"/creatorsn/vfluent/breadcrumb",theme:"dark",readOnly:!1})]),_:1})]),v,s(a,null,{default:t(()=>[s(i,{modelValue:"/creatorsn/vfluent/breadcrumb",readOnly:!1,disabled:""})]),_:1}),C,l("div",B,[s(a,null,{default:t(()=>[s(i,{modelValue:"/creatorsn/vfluent/breadcrumb",theme:"dark",readOnly:!1,disabled:""})]),_:1})]),x])}}});export{N as __pageData,I as default};
diff --git a/assets/guide_components_breadcrumb_index.md.DyDm7PeP.lean.js b/assets/guide_components_breadcrumb_index.md.DyDm7PeP.lean.js
new file mode 100644
index 0000000..2296829
--- /dev/null
+++ b/assets/guide_components_breadcrumb_index.md.DyDm7PeP.lean.js
@@ -0,0 +1,10 @@
+import{u as h}from"./chunks/index.CvzShnhD.js";import{k as r,q as k,Y as s,z as t,H as l,u as p,aq as e,S as n,p as d}from"./chunks/framework.DvIFzl91.js";import"./chunks/theme.CgqFBnN_.js";const E=l("h3",{id:"breadcrumb-demo",tabindex:"-1"},[p("Breadcrumb-DEMO "),l("a",{class:"header-anchor",href:"#breadcrumb-demo","aria-label":'Permalink to "Breadcrumb-DEMO"'},"​")],-1),o=l("hr",null,null,-1),g=l("p",null,"Basic",-1),c=e(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Breadcrumb</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> modelValue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;/creatorsn/vfluent/breadcrumb&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Breadcrumb</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="breadcrumb-editable" tabindex="-1">Breadcrumb-Editable <a class="header-anchor" href="#breadcrumb-editable" aria-label="Permalink to &quot;Breadcrumb-Editable&quot;">​</a></h3><hr>`,3),u=e(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Breadcrumb</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> modelValue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;/creatorsn/vfluent/breadcrumb&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">readOnly</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Breadcrumb</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="breadcrumb-custom-icon" tabindex="-1">Breadcrumb-Custom Icon <a class="header-anchor" href="#breadcrumb-custom-icon" aria-label="Permalink to &quot;Breadcrumb-Custom Icon&quot;">​</a></h3><hr><ol><li>Char</li></ol>`,4),y=e(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Breadcrumb</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> modelValue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;/creatorsn/vfluent/breadcrumb&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">readOnly</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> separator</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;&gt;&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Breadcrumb</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><ol start="2"><li>Icon</li></ol>`,2),b=e(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Breadcrumb</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> modelValue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;/creatorsn/vfluent/breadcrumb&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">readOnly</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> separator</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ChevronRightMed&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Breadcrumb</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="breadcrumb-hide-root" tabindex="-1">Breadcrumb-Hide Root <a class="header-anchor" href="#breadcrumb-hide-root" aria-label="Permalink to &quot;Breadcrumb-Hide Root&quot;">​</a></h3><hr>`,3),F=e(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Breadcrumb</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> modelValue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;/creatorsn/vfluent/breadcrumb&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">readOnly</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">showRoot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Breadcrumb</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="breadcrumb-dark-theme" tabindex="-1">Breadcrumb-Dark Theme <a class="header-anchor" href="#breadcrumb-dark-theme" aria-label="Permalink to &quot;Breadcrumb-Dark Theme&quot;">​</a></h3><hr>`,3),m={style:{padding:"8px",background:"black"}},v=e(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">padding</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">8</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">black</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;fv-Breadcrumb modelValue=&quot;/creatorsn/vfluent/breadcrumb&quot; theme=&quot;dark&quot; :readOnly=&quot;false&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/fv-Breadcrumb&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h3 id="breadcrumb-dark-disabled" tabindex="-1">Breadcrumb-Dark Disabled <a class="header-anchor" href="#breadcrumb-dark-disabled" aria-label="Permalink to &quot;Breadcrumb-Dark Disabled&quot;">​</a></h3><hr><ol><li>Light</li></ol>`,4),C=e(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Breadcrumb</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> modelValue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;/creatorsn/vfluent/breadcrumb&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">readOnly</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> disabled</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Breadcrumb</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><ol start="2"><li>Dark</li></ol>`,2),B={style:{padding:"8px",background:"black"}},x=e('<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">padding</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">8</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">black</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>\n<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;fv-Breadcrumb modelValue=&quot;/creatorsn/vfluent/breadcrumb&quot; theme=&quot;dark&quot; :readOnly=&quot;false&quot; disabled&gt;</span></span>\n<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/fv-Breadcrumb&gt;</span></span>\n<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">modelValue</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">字符串路径</td></tr><tr><td style="text-align:center;">separator</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">/</td><td style="text-align:center;">分隔符显示, 可以是字符或图标</td></tr><tr><td style="text-align:center;">separatorChar</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">/</td><td style="text-align:center;">以什么字符分割路径</td></tr><tr><td style="text-align:center;">showRoot</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">true</td><td style="text-align:center;">显示根图标</td></tr><tr><td style="text-align:center;">rootIcon</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">FolderHorizontal</td><td style="text-align:center;">根图标</td></tr><tr><td style="text-align:center;">readOnly</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">true</td><td style="text-align:center;">是否只读</td></tr><tr><td style="text-align:center;">borderColor</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">borderRadius</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">2</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">system</td><td style="text-align:center;">主题样式, 包含<code>light</code>, <code>dark</code>, <code>system</code>, <code>custom</code>几种样式</td></tr></tbody></table><h3 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to &quot;Events&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">事件名(Name)</th><th style="text-align:center;">参数类型(args)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">root-click</td><td style="text-align:center;">object</td><td style="text-align:center;">单击根图标触发</td></tr><tr><td style="text-align:center;">item-click</td><td style="text-align:center;">object</td><td style="text-align:center;">单击路由项触发</td></tr></tbody></table><h3 id="slot" tabindex="-1">Slot <a class="header-anchor" href="#slot" aria-label="Permalink to &quot;Slot&quot;">​</a></h3><hr><ol><li>root</li></ol><p>定义下拉内容</p><ul><li>rootIcon: 根图标</li><li>separatorIcon: 分割图标</li><li>separator: 分隔符</li></ul><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">root</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>\n<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">i</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;fv-bc-separator-content ms-Icon&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">`ms-Icon--${</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">.</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">rootIcon</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">}`</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">i</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>\n<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">i</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;fv-bc-separator-icon ms-Icon&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[x.separatorIcon </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> `ms-Icon--${</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">.</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">separator</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">}`</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> :</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;{{x.separatorIcon </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;&#39;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> :</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> x.separator}}&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">i</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>\n<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><ol start="2"><li>route-item</li></ol><p>自定义<code>Collapse</code>显示图标</p><ul><li>item: 当前项</li><li>index: 当前索引</li></ul><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">route-item</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>\n<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">i</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ms-Icon&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">`ms-Icon--${</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">.</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">icon</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">}`</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">i</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>\n<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div>',17),N=JSON.parse('{"title":"Breadcrumb","description":"","frontmatter":{"page":true,"title":"Breadcrumb"},"headers":[],"relativePath":"guide/components/breadcrumb/index.md","filePath":"guide/components/breadcrumb/index.md"}'),f={name:"guide/components/breadcrumb/index.md"},I=r({...f,setup(q){return h(),(_,D)=>{const i=n("fv-Breadcrumb"),a=n("ClientOnly");return d(),k("div",null,[E,o,g,s(a,null,{default:t(()=>[s(i,{modelValue:"/creatorsn/vfluent/breadcrumb"})]),_:1}),c,s(a,null,{default:t(()=>[s(i,{modelValue:"/creatorsn/vfluent/breadcrumb",readOnly:!1})]),_:1}),u,s(a,null,{default:t(()=>[s(i,{modelValue:"/creatorsn/vfluent/breadcrumb",readOnly:!1,separator:">"})]),_:1}),y,s(a,null,{default:t(()=>[s(i,{modelValue:"/creatorsn/vfluent/breadcrumb",readOnly:!1,separator:"ChevronRightMed"})]),_:1}),b,s(a,null,{default:t(()=>[s(i,{modelValue:"/creatorsn/vfluent/breadcrumb",readOnly:!1,showRoot:!1})]),_:1}),F,l("div",m,[s(a,null,{default:t(()=>[s(i,{modelValue:"/creatorsn/vfluent/breadcrumb",theme:"dark",readOnly:!1})]),_:1})]),v,s(a,null,{default:t(()=>[s(i,{modelValue:"/creatorsn/vfluent/breadcrumb",readOnly:!1,disabled:""})]),_:1}),C,l("div",B,[s(a,null,{default:t(()=>[s(i,{modelValue:"/creatorsn/vfluent/breadcrumb",theme:"dark",readOnly:!1,disabled:""})]),_:1})]),x])}}});export{N as __pageData,I as default};
diff --git a/assets/guide_components_button_emits.md.d682bf18.js b/assets/guide_components_button_emits.md.d682bf18.js
deleted file mode 100644
index 041aaf1..0000000
--- a/assets/guide_components_button_emits.md.d682bf18.js
+++ /dev/null
@@ -1 +0,0 @@
-import{_ as t,c as e,o as a,a as n}from"./app.d60fa8c3.js";const u=JSON.parse('{"title":"Emits","description":"","frontmatter":{},"headers":[{"level":2,"title":"Emits","slug":"emits"}],"relativePath":"guide/components/button/emits.md"}'),s={name:"guide/components/button/emits.md"},i=n('<h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">click</td><td style="text-align:center;">evt[Event]</td><td style="text-align:center;">onclick</td></tr></tbody></table>',3),r=[i];function c(o,d,l,_,m,h){return a(),e("div",null,r)}var g=t(s,[["render",c]]);export{u as __pageData,g as default};
diff --git a/assets/guide_components_button_emits.md.d682bf18.lean.js b/assets/guide_components_button_emits.md.d682bf18.lean.js
deleted file mode 100644
index 8ee1ff8..0000000
--- a/assets/guide_components_button_emits.md.d682bf18.lean.js
+++ /dev/null
@@ -1 +0,0 @@
-import{_ as t,c as e,o as a,a as n}from"./app.d60fa8c3.js";const u=JSON.parse('{"title":"Emits","description":"","frontmatter":{},"headers":[{"level":2,"title":"Emits","slug":"emits"}],"relativePath":"guide/components/button/emits.md"}'),s={name:"guide/components/button/emits.md"},i=n("",3),r=[i];function c(o,d,l,_,m,h){return a(),e("div",null,r)}var g=t(s,[["render",c]]);export{u as __pageData,g as default};
diff --git a/assets/guide_components_button_index.md.23a8eb54.js b/assets/guide_components_button_index.md.23a8eb54.js
deleted file mode 100644
index 6e94a96..0000000
--- a/assets/guide_components_button_index.md.23a8eb54.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import{d as c,c as i,b as e,w as a,u as r,a as s,r as d,o as y,e as l,i as D,M as F}from"./app.d60fa8c3.js";import{u,T as h}from"./chunks/index.9dba9c16.js";const b=s('<h1 id="button" tabindex="-1">Button <a class="header-anchor" href="#button" aria-hidden="true">#</a></h1><h2 id="quick-start" tabindex="-1">Quick Start <a class="header-anchor" href="#quick-start" aria-hidden="true">#</a></h2><h3 id="default" tabindex="-1">Default <a class="header-anchor" href="#default" aria-hidden="true">#</a></h3><hr>',4),g=l("Button"),x=s(`<div class="language-vue-html"><span class="copy"></span><div class="highlight-lines"><br><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><br><br><br><br></div><pre><code><span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-button</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    @</span><span style="color:#C792EA;">click</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">click</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">  &gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">    Button</span></span>
-<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-button</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h3 id="is-box-shadow" tabindex="-1">Is Box Shadow <a class="header-anchor" href="#is-box-shadow" aria-hidden="true">#</a></h3><br>`,3),m=l("Button"),v=s(`<div class="language-vue-html"><span class="copy"></span><div class="highlight-lines"><br><div class="highlighted">\xA0</div><br><br><br><br><br><br></div><pre><code><span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-button</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">is-box-shadow</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    @</span><span style="color:#C792EA;">click</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">click</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">  &gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">    Button</span></span>
-<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-button</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h3 id="disabled" tabindex="-1">Disabled <a class="header-anchor" href="#disabled" aria-hidden="true">#</a></h3><br>`,3),C=l("Button"),A=s(`<div class="language-vue-html"><span class="copy"></span><div class="highlight-lines"><br><div class="highlighted">\xA0</div><br><br><br><br><br><br></div><pre><code><span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-button</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">disabled</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    @</span><span style="color:#C792EA;">click</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">click</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">  &gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">    Button</span></span>
-<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-button</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h3 id="custom-style" tabindex="-1">Custom style <a class="header-anchor" href="#custom-style" aria-hidden="true">#</a></h3><hr>`,3),f=l("Button"),_=s(`<div class="language-vue-html"><span class="copy"></span><div class="highlight-lines"><br><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><br><br><br><br><br></div><pre><code><span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-button</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">icon</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">Add</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">background</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">rgb(15, 60, 104)</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">foreground</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">whitesmoke</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">font-size</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">0.8rem</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">    :</span><span style="color:#C792EA;">border-radius</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#F78C6C;">5</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">    @</span><span style="color:#C792EA;">click</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">click</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">  &gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">  Button</span></span>
-<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-button</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">background</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">background color</td></tr><tr><td style="text-align:center;">border-radius</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">3</td><td style="text-align:center;">border radius</td></tr><tr><td style="text-align:center;">border-width</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">2</td><td style="text-align:center;">border Width</td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">disabled</td></tr><tr><td style="text-align:center;">font-size</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">font size</td></tr><tr><td style="text-align:center;">font-weight</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&quot;normal&quot;</td><td style="text-align:center;">font weight</td></tr><tr><td style="text-align:center;">foreground</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">foreground color</td></tr><tr><td style="text-align:center;">icon</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">icon with Fabric-Icon</td></tr><tr><td style="text-align:center;">is-box-shadow</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">default shadow style</td></tr><tr><td style="text-align:center;">lang</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">i18n</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">[&#39;light&#39;, &#39;dark&#39;, &#39;global&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&quot;global&quot;</td><td style="text-align:center;">theme</td></tr></tbody></table><h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">click</td><td style="text-align:center;">evt[Event]</td><td style="text-align:center;">onclick</td></tr></tbody></table><h2 id="slot" tabindex="-1">Slot <a class="header-anchor" href="#slot" aria-hidden="true">#</a></h2><hr><h3 id="default-1" tabindex="-1">Default <a class="header-anchor" href="#default-1" aria-hidden="true">#</a></h3><div class="language-vue-html"><span class="copy"></span><pre><code><span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-button</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">span</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">Button</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">span</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-button</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div>`,11),S=JSON.parse('{"title":"Button","description":"","frontmatter":{"page":true,"title":"Button"},"headers":[{"level":2,"title":"Quick Start","slug":"quick-start"},{"level":3,"title":"Default","slug":"default"},{"level":3,"title":"Is Box Shadow","slug":"is-box-shadow"},{"level":3,"title":"Disabled","slug":"disabled"},{"level":3,"title":"Custom style","slug":"custom-style"},{"level":2,"title":"Properties","slug":"properties"},{"level":2,"title":"Emits","slug":"emits"},{"level":2,"title":"Slot","slug":"slot"},{"level":3,"title":"Default","slug":"default-1"}],"relativePath":"guide/components/button/index.md"}'),q={name:"guide/components/button/index.md"},T=c({...q,setup(k){const p=D(F),{theme:o}=u();function t(){h(p,"click")}return(E,w)=>{const n=d("fv-button");return y(),i("div",null,[b,e(n,{onClick:t,theme:r(o)},{default:a(()=>[g]),_:1},8,["theme"]),x,e(n,{"is-box-shadow":"",onClick:t,theme:r(o)},{default:a(()=>[m]),_:1},8,["theme"]),v,e(n,{disabled:"",onClick:t,theme:r(o)},{default:a(()=>[C]),_:1},8,["theme"]),A,e(n,{icon:"Add","font-size":"0.8rem",background:"rgb(15, 60, 104)",foreground:"whitesmoke","border-radius":5,onClick:t},{default:a(()=>[f]),_:1}),_])}}});export{S as __pageData,T as default};
diff --git a/assets/guide_components_button_index.md.23a8eb54.lean.js b/assets/guide_components_button_index.md.23a8eb54.lean.js
deleted file mode 100644
index 6e94a96..0000000
--- a/assets/guide_components_button_index.md.23a8eb54.lean.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import{d as c,c as i,b as e,w as a,u as r,a as s,r as d,o as y,e as l,i as D,M as F}from"./app.d60fa8c3.js";import{u,T as h}from"./chunks/index.9dba9c16.js";const b=s('<h1 id="button" tabindex="-1">Button <a class="header-anchor" href="#button" aria-hidden="true">#</a></h1><h2 id="quick-start" tabindex="-1">Quick Start <a class="header-anchor" href="#quick-start" aria-hidden="true">#</a></h2><h3 id="default" tabindex="-1">Default <a class="header-anchor" href="#default" aria-hidden="true">#</a></h3><hr>',4),g=l("Button"),x=s(`<div class="language-vue-html"><span class="copy"></span><div class="highlight-lines"><br><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><br><br><br><br></div><pre><code><span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-button</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    @</span><span style="color:#C792EA;">click</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">click</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">  &gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">    Button</span></span>
-<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-button</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h3 id="is-box-shadow" tabindex="-1">Is Box Shadow <a class="header-anchor" href="#is-box-shadow" aria-hidden="true">#</a></h3><br>`,3),m=l("Button"),v=s(`<div class="language-vue-html"><span class="copy"></span><div class="highlight-lines"><br><div class="highlighted">\xA0</div><br><br><br><br><br><br></div><pre><code><span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-button</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">is-box-shadow</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    @</span><span style="color:#C792EA;">click</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">click</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">  &gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">    Button</span></span>
-<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-button</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h3 id="disabled" tabindex="-1">Disabled <a class="header-anchor" href="#disabled" aria-hidden="true">#</a></h3><br>`,3),C=l("Button"),A=s(`<div class="language-vue-html"><span class="copy"></span><div class="highlight-lines"><br><div class="highlighted">\xA0</div><br><br><br><br><br><br></div><pre><code><span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-button</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">disabled</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    @</span><span style="color:#C792EA;">click</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">click</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">  &gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">    Button</span></span>
-<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-button</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h3 id="custom-style" tabindex="-1">Custom style <a class="header-anchor" href="#custom-style" aria-hidden="true">#</a></h3><hr>`,3),f=l("Button"),_=s(`<div class="language-vue-html"><span class="copy"></span><div class="highlight-lines"><br><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><br><br><br><br><br></div><pre><code><span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-button</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">icon</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">Add</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">background</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">rgb(15, 60, 104)</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">foreground</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">whitesmoke</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">font-size</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">0.8rem</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">    :</span><span style="color:#C792EA;">border-radius</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#F78C6C;">5</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">    @</span><span style="color:#C792EA;">click</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">click</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">  &gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">  Button</span></span>
-<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-button</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">background</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">background color</td></tr><tr><td style="text-align:center;">border-radius</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">3</td><td style="text-align:center;">border radius</td></tr><tr><td style="text-align:center;">border-width</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">2</td><td style="text-align:center;">border Width</td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">disabled</td></tr><tr><td style="text-align:center;">font-size</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">font size</td></tr><tr><td style="text-align:center;">font-weight</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&quot;normal&quot;</td><td style="text-align:center;">font weight</td></tr><tr><td style="text-align:center;">foreground</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">foreground color</td></tr><tr><td style="text-align:center;">icon</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">icon with Fabric-Icon</td></tr><tr><td style="text-align:center;">is-box-shadow</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">default shadow style</td></tr><tr><td style="text-align:center;">lang</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">i18n</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">[&#39;light&#39;, &#39;dark&#39;, &#39;global&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&quot;global&quot;</td><td style="text-align:center;">theme</td></tr></tbody></table><h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">click</td><td style="text-align:center;">evt[Event]</td><td style="text-align:center;">onclick</td></tr></tbody></table><h2 id="slot" tabindex="-1">Slot <a class="header-anchor" href="#slot" aria-hidden="true">#</a></h2><hr><h3 id="default-1" tabindex="-1">Default <a class="header-anchor" href="#default-1" aria-hidden="true">#</a></h3><div class="language-vue-html"><span class="copy"></span><pre><code><span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-button</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">span</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">Button</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">span</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-button</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div>`,11),S=JSON.parse('{"title":"Button","description":"","frontmatter":{"page":true,"title":"Button"},"headers":[{"level":2,"title":"Quick Start","slug":"quick-start"},{"level":3,"title":"Default","slug":"default"},{"level":3,"title":"Is Box Shadow","slug":"is-box-shadow"},{"level":3,"title":"Disabled","slug":"disabled"},{"level":3,"title":"Custom style","slug":"custom-style"},{"level":2,"title":"Properties","slug":"properties"},{"level":2,"title":"Emits","slug":"emits"},{"level":2,"title":"Slot","slug":"slot"},{"level":3,"title":"Default","slug":"default-1"}],"relativePath":"guide/components/button/index.md"}'),q={name:"guide/components/button/index.md"},T=c({...q,setup(k){const p=D(F),{theme:o}=u();function t(){h(p,"click")}return(E,w)=>{const n=d("fv-button");return y(),i("div",null,[b,e(n,{onClick:t,theme:r(o)},{default:a(()=>[g]),_:1},8,["theme"]),x,e(n,{"is-box-shadow":"",onClick:t,theme:r(o)},{default:a(()=>[m]),_:1},8,["theme"]),v,e(n,{disabled:"",onClick:t,theme:r(o)},{default:a(()=>[C]),_:1},8,["theme"]),A,e(n,{icon:"Add","font-size":"0.8rem",background:"rgb(15, 60, 104)",foreground:"whitesmoke","border-radius":5,onClick:t},{default:a(()=>[f]),_:1}),_])}}});export{S as __pageData,T as default};
diff --git a/assets/guide_components_button_index.md.7sqT2MQP.js b/assets/guide_components_button_index.md.7sqT2MQP.js
new file mode 100644
index 0000000..96119e3
--- /dev/null
+++ b/assets/guide_components_button_index.md.7sqT2MQP.js
@@ -0,0 +1,3 @@
+import{_ as h,q as r,Y as t,z as s,H as l,u as a,aq as n,S as d,p as o}from"./chunks/framework.DvIFzl91.js";const f=JSON.parse('{"title":"Button","description":"","frontmatter":{"page":true,"title":"Button"},"headers":[],"relativePath":"guide/components/button/index.md","filePath":"guide/components/button/index.md"}'),k={name:"guide/components/button/index.md"},p=l("h3",{id:"button-demo",tabindex:"-1"},[a("Button-DEMO "),l("a",{class:"header-anchor",href:"#button-demo","aria-label":'Permalink to "Button-DEMO"'},"​")],-1),g=l("hr",null,null,-1),c=n('<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> borderRadius</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;3&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="button-with-icon" tabindex="-1">Button With Icon <a class="header-anchor" href="#button-with-icon" aria-label="Permalink to &quot;Button With Icon&quot;">​</a></h3><hr>',3),u=n('<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> icon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;CalculatorAddition&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;dark&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Add&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="button-customize" tabindex="-1">Button Customize <a class="header-anchor" href="#button-customize" aria-label="Permalink to &quot;Button Customize&quot;">​</a></h3><hr>',3),E=n('<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> icon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;CalculatorAddition&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">isBoxShadow</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Add&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div>',1),y=n('<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> icon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;CalculatorAddition&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;dark&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;linear-gradient(to right, #000046, #1cb5e0)&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> borderRadius</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;3&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">isBoxShadow</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Add&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>Customize Reveal Border</p>',2),b=n('<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> icon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;CalculatorAddition&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;dark&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;#000046&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> revealBorderColor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;#1cb5e0&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> revealBackgroundColor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rgba(28, 181, 226, 0.3)&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> borderRadius</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;3&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> borderWidth</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;3&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">isBoxShadow</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Add&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="button-disabled" tabindex="-1">Button Disabled <a class="header-anchor" href="#button-disabled" aria-label="Permalink to &quot;Button Disabled&quot;">​</a></h3><hr>',3),F=n(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> disabled</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> icon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;CalculatorAddition&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Add&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">icon</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">Icon with Fabric-Icon</td></tr><tr><td style="text-align:center;">foreground</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">Button 前景色</td></tr><tr><td style="text-align:center;">background</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">Button 背景色</td></tr><tr><td style="text-align:center;">borderRadius</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">3</td><td style="text-align:center;">Button 圆角大小</td></tr><tr><td style="text-align:center;">borderColor</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">Button 边框颜色</td></tr><tr><td style="text-align:center;">fontSize</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">Button 字体大小</td></tr><tr><td style="text-align:center;">fontWeight</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">normal</td><td style="text-align:center;">Button 字体粗细度</td></tr><tr><td style="text-align:center;">revealBorderColor</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">Button Reveal 边框颜色</td></tr><tr><td style="text-align:center;">revealBackgroundColor</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">Button Reveal 背景颜色</td></tr><tr><td style="text-align:center;">isBoxShadow</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">开启<code>Button</code>阴影</td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">Disabled button</td></tr><tr><td style="text-align:center;">borderWidth</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">1</td><td style="text-align:center;">Button 边框大小</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">system</td><td style="text-align:center;">主题样式, 包含<code>light</code>, <code>dark</code>, <code>system</code>, <code>custom</code>几种样式</td></tr></tbody></table><h3 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to &quot;Events&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">事件名(Name)</th><th style="text-align:center;">参数类型(args)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">click</td><td style="text-align:center;">event</td><td style="text-align:center;">Button onclick</td></tr></tbody></table><h3 id="slot" tabindex="-1">Slot <a class="header-anchor" href="#slot" aria-label="Permalink to &quot;Slot&quot;">​</a></h3><hr><ol><li>Default</li></ol><div class="language-javascript vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">fv-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">fv-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div>`,11);function _(C,x,v,m,B,A){const i=d("fv-button"),e=d("ClientOnly");return o(),r("div",null,[p,g,t(e,null,{default:s(()=>[t(i,{borderRadius:"3"})]),_:1}),c,t(e,null,{default:s(()=>[t(i,{icon:"CalculatorAddition",theme:"dark"},{default:s(()=>[a("Add")]),_:1})]),_:1}),u,t(e,null,{default:s(()=>[t(i,{icon:"CalculatorAddition",isBoxShadow:!0},{default:s(()=>[a("Add")]),_:1})]),_:1}),E,t(e,null,{default:s(()=>[t(i,{icon:"CalculatorAddition",theme:"dark",background:"linear-gradient(to right, #000046, #1cb5e0)",borderRadius:"3",isBoxShadow:!0},{default:s(()=>[a("Add")]),_:1})]),_:1}),y,t(e,null,{default:s(()=>[t(i,{icon:"CalculatorAddition",theme:"dark",background:"#000046",revealBorderColor:"#1cb5e0",revealBackgroundColor:"rgba(28, 181, 226, 0.3)",borderRadius:"3",borderWidth:"3",isBoxShadow:!0},{default:s(()=>[a("Add")]),_:1})]),_:1}),b,t(e,null,{default:s(()=>[t(i,{disabled:"",icon:"CalculatorAddition"},{default:s(()=>[a("Add")]),_:1})]),_:1}),F])}const T=h(k,[["render",_]]);export{f as __pageData,T as default};
diff --git a/assets/guide_components_button_index.md.7sqT2MQP.lean.js b/assets/guide_components_button_index.md.7sqT2MQP.lean.js
new file mode 100644
index 0000000..79de7f6
--- /dev/null
+++ b/assets/guide_components_button_index.md.7sqT2MQP.lean.js
@@ -0,0 +1 @@
+import{_ as h,q as r,Y as t,z as s,H as l,u as a,aq as n,S as d,p as o}from"./chunks/framework.DvIFzl91.js";const f=JSON.parse('{"title":"Button","description":"","frontmatter":{"page":true,"title":"Button"},"headers":[],"relativePath":"guide/components/button/index.md","filePath":"guide/components/button/index.md"}'),k={name:"guide/components/button/index.md"},p=l("h3",{id:"button-demo",tabindex:"-1"},[a("Button-DEMO "),l("a",{class:"header-anchor",href:"#button-demo","aria-label":'Permalink to "Button-DEMO"'},"​")],-1),g=l("hr",null,null,-1),c=n("",3),u=n("",3),E=n("",1),y=n("",2),b=n("",3),F=n("",11);function _(C,x,v,m,B,A){const i=d("fv-button"),e=d("ClientOnly");return o(),r("div",null,[p,g,t(e,null,{default:s(()=>[t(i,{borderRadius:"3"})]),_:1}),c,t(e,null,{default:s(()=>[t(i,{icon:"CalculatorAddition",theme:"dark"},{default:s(()=>[a("Add")]),_:1})]),_:1}),u,t(e,null,{default:s(()=>[t(i,{icon:"CalculatorAddition",isBoxShadow:!0},{default:s(()=>[a("Add")]),_:1})]),_:1}),E,t(e,null,{default:s(()=>[t(i,{icon:"CalculatorAddition",theme:"dark",background:"linear-gradient(to right, #000046, #1cb5e0)",borderRadius:"3",isBoxShadow:!0},{default:s(()=>[a("Add")]),_:1})]),_:1}),y,t(e,null,{default:s(()=>[t(i,{icon:"CalculatorAddition",theme:"dark",background:"#000046",revealBorderColor:"#1cb5e0",revealBackgroundColor:"rgba(28, 181, 226, 0.3)",borderRadius:"3",borderWidth:"3",isBoxShadow:!0},{default:s(()=>[a("Add")]),_:1})]),_:1}),b,t(e,null,{default:s(()=>[t(i,{disabled:"",icon:"CalculatorAddition"},{default:s(()=>[a("Add")]),_:1})]),_:1}),F])}const T=h(k,[["render",_]]);export{f as __pageData,T as default};
diff --git a/assets/guide_components_button_properties.md.cd4004b6.js b/assets/guide_components_button_properties.md.cd4004b6.js
deleted file mode 100644
index 1f8ecd6..0000000
--- a/assets/guide_components_button_properties.md.cd4004b6.js
+++ /dev/null
@@ -1 +0,0 @@
-import{_ as t,c as e,o as n,a as d}from"./app.d60fa8c3.js";const u=JSON.parse('{"title":"Properties","description":"","frontmatter":{},"headers":[{"level":2,"title":"Properties","slug":"properties"}],"relativePath":"guide/components/button/properties.md"}'),r={name:"guide/components/button/properties.md"},l=d('<h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">background</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">background color</td></tr><tr><td style="text-align:center;">border-radius</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">3</td><td style="text-align:center;">border radius</td></tr><tr><td style="text-align:center;">border-width</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">2</td><td style="text-align:center;">border Width</td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">disabled</td></tr><tr><td style="text-align:center;">font-size</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">font size</td></tr><tr><td style="text-align:center;">font-weight</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&quot;normal&quot;</td><td style="text-align:center;">font weight</td></tr><tr><td style="text-align:center;">foreground</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">foreground color</td></tr><tr><td style="text-align:center;">icon</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">icon with Fabric-Icon</td></tr><tr><td style="text-align:center;">is-box-shadow</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">default shadow style</td></tr><tr><td style="text-align:center;">lang</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">i18n</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">[&#39;light&#39;, &#39;dark&#39;, &#39;global&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&quot;global&quot;</td><td style="text-align:center;">theme</td></tr></tbody></table>',3),a=[l];function i(s,c,o,g,x,y){return n(),e("div",null,a)}var p=t(r,[["render",i]]);export{u as __pageData,p as default};
diff --git a/assets/guide_components_button_properties.md.cd4004b6.lean.js b/assets/guide_components_button_properties.md.cd4004b6.lean.js
deleted file mode 100644
index dcd95b8..0000000
--- a/assets/guide_components_button_properties.md.cd4004b6.lean.js
+++ /dev/null
@@ -1 +0,0 @@
-import{_ as t,c as e,o as n,a as d}from"./app.d60fa8c3.js";const u=JSON.parse('{"title":"Properties","description":"","frontmatter":{},"headers":[{"level":2,"title":"Properties","slug":"properties"}],"relativePath":"guide/components/button/properties.md"}'),r={name:"guide/components/button/properties.md"},l=d("",3),a=[l];function i(s,c,o,g,x,y){return n(),e("div",null,a)}var p=t(r,[["render",i]]);export{u as __pageData,p as default};
diff --git a/assets/guide_components_calendar-date-picker_emits.md.D5OkfR8j.js b/assets/guide_components_calendar-date-picker_emits.md.D5OkfR8j.js
new file mode 100644
index 0000000..ecc9af1
--- /dev/null
+++ b/assets/guide_components_calendar-date-picker_emits.md.D5OkfR8j.js
@@ -0,0 +1 @@
+import{_ as t,q as e,p as a,aq as n}from"./chunks/framework.DvIFzl91.js";const u=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/components/calendar-date-picker/emits.md","filePath":"guide/components/calendar-date-picker/emits.md"}'),s={name:"guide/components/calendar-date-picker/emits.md"},r=n('<h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-label="Permalink to &quot;Emits&quot;">​</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead></table>',3),i=[r];function c(o,d,_,m,l,h){return a(),e("div",null,i)}const f=t(s,[["render",c]]);export{u as __pageData,f as default};
diff --git a/assets/guide_components_calendar-date-picker_emits.md.D5OkfR8j.lean.js b/assets/guide_components_calendar-date-picker_emits.md.D5OkfR8j.lean.js
new file mode 100644
index 0000000..6bbb383
--- /dev/null
+++ b/assets/guide_components_calendar-date-picker_emits.md.D5OkfR8j.lean.js
@@ -0,0 +1 @@
+import{_ as t,q as e,p as a,aq as n}from"./chunks/framework.DvIFzl91.js";const u=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/components/calendar-date-picker/emits.md","filePath":"guide/components/calendar-date-picker/emits.md"}'),s={name:"guide/components/calendar-date-picker/emits.md"},r=n("",3),i=[r];function c(o,d,_,m,l,h){return a(),e("div",null,i)}const f=t(s,[["render",c]]);export{u as __pageData,f as default};
diff --git a/assets/guide_components_calendar-date-picker_index.md.BdHjrurh.js b/assets/guide_components_calendar-date-picker_index.md.BdHjrurh.js
new file mode 100644
index 0000000..6eaf212
--- /dev/null
+++ b/assets/guide_components_calendar-date-picker_index.md.BdHjrurh.js
@@ -0,0 +1 @@
+import{_ as k,q as p,H as a,Y as i,z as d,u as c,aq as r,S as h,p as o}from"./chunks/framework.DvIFzl91.js";const g={data(){return{value:new Date}}},T=JSON.parse('{"title":"CalendarDatePicker","description":"","frontmatter":{"page":true,"title":"CalendarDatePicker"},"headers":[],"relativePath":"guide/components/calendar-date-picker/index.md","filePath":"guide/components/calendar-date-picker/index.md"}'),y=a("h3",{id:"calendardatepicker-demo",tabindex:"-1"},[c("CalendarDatePicker-DEMO "),a("a",{class:"header-anchor",href:"#calendardatepicker-demo","aria-label":'Permalink to "CalendarDatePicker-DEMO"'},"​")],-1),E=a("hr",null,null,-1),u={style:{"z-index":"5"}},x=r('<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-CalendarDatePicker</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">value</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">z-index</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">5</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-CalendarDatePicker</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="calendardatepicker-multiple" tabindex="-1">CalendarDatePicker-Multiple <a class="header-anchor" href="#calendardatepicker-multiple" aria-label="Permalink to &quot;CalendarDatePicker-Multiple&quot;">​</a></h3><hr>',3),F={style:{"z-index":"3"}},C=r('<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-CalendarDatePicker</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">value</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> multiple</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;range&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">z-index</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">3</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-CalendarDatePicker</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="calendardatepicker-disabled" tabindex="-1">CalendarDatePicker-Disabled <a class="header-anchor" href="#calendardatepicker-disabled" aria-label="Permalink to &quot;CalendarDatePicker-Disabled&quot;">​</a></h3><hr>',3),m={style:{"z-index":"2"}},_=r('<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-CalendarDatePicker</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">value</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> multiple</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;range&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> disabled</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">z-index</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">2</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-CalendarDatePicker</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="calendardatepicker-dark-theme" tabindex="-1">CalendarDatePicker-Dark Theme <a class="header-anchor" href="#calendardatepicker-dark-theme" aria-label="Permalink to &quot;CalendarDatePicker-Dark Theme&quot;">​</a></h3><hr>',3),v={style:{"z-index":"1"}},b=r('<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-CalendarDatePicker</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">value</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;dark&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">z-index</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">2</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-CalendarDatePicker</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">value/v-model</td><td style="text-align:center;">[date]</td><td style="text-align:center;">No</td><td style="text-align:center;">CurrentDate</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">start</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">1900</td><td style="text-align:center;">最小年份, 尽量不要设置过小防止性能消耗</td></tr><tr><td style="text-align:center;">end</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">3000</td><td style="text-align:center;">最大年份, 尽量不要设置过大防止性能消耗</td></tr><tr><td style="text-align:center;">borderWidth</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">2</td><td style="text-align:center;">CalendarDatePicker border width</td></tr><tr><td style="text-align:center;">borderRadius</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">3</td><td style="text-align:center;">CalendarDatePicker border radius</td></tr><tr><td style="text-align:center;">placeholder</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">Pick a day</td><td style="text-align:center;">CalendarDatePicker placeholder</td></tr><tr><td style="text-align:center;">inputForeground</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">输入框文字前景色</td></tr><tr><td style="text-align:center;">inputBackground</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">输入框背景色</td></tr><tr><td style="text-align:center;">dropDownIcon</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">CalendarDay</td><td style="text-align:center;">Icon with Fabric-Icon</td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">multiple</td><td style="text-align:center;">[&#39;single&#39;, &#39;multiple&#39;, &#39;range&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">single</td><td style="text-align:center;">多选模式, 有单选、多选和范围日期选择</td></tr><tr><td style="text-align:center;">lan</td><td style="text-align:center;">[&#39;en&#39;, &#39;zh&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">en</td><td style="text-align:center;">CalendarDatePicker language.</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">system</td><td style="text-align:center;">主题样式, 包含<code>light</code>, <code>dark</code>, <code>system</code>, <code>custom</code>几种样式</td></tr></tbody></table><h3 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to &quot;Events&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">事件名(Name)</th><th style="text-align:center;">参数类型(args)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">choosen-dates</td><td style="text-align:center;">array</td><td style="text-align:center;">返回[{year, month, no}]类型的数组</td></tr></tbody></table>',7);function D(B,t,P,q,e,f){const l=h("fv-CalendarDatePicker"),n=h("ClientOnly");return o(),p("div",null,[y,E,a("div",u,[i(n,null,{default:d(()=>[i(l,{modelValue:e.value,"onUpdate:modelValue":t[0]||(t[0]=s=>e.value=s),style:{"z-index":"5"}},null,8,["modelValue"])]),_:1})]),x,a("div",F,[i(n,null,{default:d(()=>[i(l,{modelValue:e.value,"onUpdate:modelValue":t[1]||(t[1]=s=>e.value=s),multiple:"range",style:{"z-index":"3"}},null,8,["modelValue"])]),_:1})]),C,a("div",m,[i(n,null,{default:d(()=>[i(l,{modelValue:e.value,"onUpdate:modelValue":t[2]||(t[2]=s=>e.value=s),multiple:"range",disabled:"",style:{"z-index":"2"}},null,8,["modelValue"])]),_:1})]),_,a("div",v,[i(n,null,{default:d(()=>[i(l,{modelValue:e.value,"onUpdate:modelValue":t[3]||(t[3]=s=>e.value=s),theme:"dark",style:{"z-index":"2"}},null,8,["modelValue"])]),_:1})]),b])}const V=k(g,[["render",D]]);export{T as __pageData,V as default};
diff --git a/assets/guide_components_calendar-date-picker_index.md.BdHjrurh.lean.js b/assets/guide_components_calendar-date-picker_index.md.BdHjrurh.lean.js
new file mode 100644
index 0000000..ae430ea
--- /dev/null
+++ b/assets/guide_components_calendar-date-picker_index.md.BdHjrurh.lean.js
@@ -0,0 +1 @@
+import{_ as k,q as p,H as a,Y as i,z as d,u as c,aq as r,S as h,p as o}from"./chunks/framework.DvIFzl91.js";const g={data(){return{value:new Date}}},T=JSON.parse('{"title":"CalendarDatePicker","description":"","frontmatter":{"page":true,"title":"CalendarDatePicker"},"headers":[],"relativePath":"guide/components/calendar-date-picker/index.md","filePath":"guide/components/calendar-date-picker/index.md"}'),y=a("h3",{id:"calendardatepicker-demo",tabindex:"-1"},[c("CalendarDatePicker-DEMO "),a("a",{class:"header-anchor",href:"#calendardatepicker-demo","aria-label":'Permalink to "CalendarDatePicker-DEMO"'},"​")],-1),E=a("hr",null,null,-1),u={style:{"z-index":"5"}},x=r("",3),F={style:{"z-index":"3"}},C=r("",3),m={style:{"z-index":"2"}},_=r("",3),v={style:{"z-index":"1"}},b=r("",7);function D(B,t,P,q,e,f){const l=h("fv-CalendarDatePicker"),n=h("ClientOnly");return o(),p("div",null,[y,E,a("div",u,[i(n,null,{default:d(()=>[i(l,{modelValue:e.value,"onUpdate:modelValue":t[0]||(t[0]=s=>e.value=s),style:{"z-index":"5"}},null,8,["modelValue"])]),_:1})]),x,a("div",F,[i(n,null,{default:d(()=>[i(l,{modelValue:e.value,"onUpdate:modelValue":t[1]||(t[1]=s=>e.value=s),multiple:"range",style:{"z-index":"3"}},null,8,["modelValue"])]),_:1})]),C,a("div",m,[i(n,null,{default:d(()=>[i(l,{modelValue:e.value,"onUpdate:modelValue":t[2]||(t[2]=s=>e.value=s),multiple:"range",disabled:"",style:{"z-index":"2"}},null,8,["modelValue"])]),_:1})]),_,a("div",v,[i(n,null,{default:d(()=>[i(l,{modelValue:e.value,"onUpdate:modelValue":t[3]||(t[3]=s=>e.value=s),theme:"dark",style:{"z-index":"2"}},null,8,["modelValue"])]),_:1})]),b])}const V=k(g,[["render",D]]);export{T as __pageData,V as default};
diff --git a/assets/guide_components_calendar-date-picker_properties.md.DXRjmMG8.js b/assets/guide_components_calendar-date-picker_properties.md.DXRjmMG8.js
new file mode 100644
index 0000000..7337cf4
--- /dev/null
+++ b/assets/guide_components_calendar-date-picker_properties.md.DXRjmMG8.js
@@ -0,0 +1 @@
+import{_ as e,q as t,p as r,aq as a}from"./chunks/framework.DvIFzl91.js";const u=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/components/calendar-date-picker/properties.md","filePath":"guide/components/calendar-date-picker/properties.md"}'),n={name:"guide/components/calendar-date-picker/properties.md"},o=a('<h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-label="Permalink to &quot;Properties&quot;">​</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead></table>',3),s=[o];function i(c,p,l,d,_,h){return r(),t("div",null,s)}const f=e(n,[["render",i]]);export{u as __pageData,f as default};
diff --git a/assets/guide_components_calendar-date-picker_properties.md.DXRjmMG8.lean.js b/assets/guide_components_calendar-date-picker_properties.md.DXRjmMG8.lean.js
new file mode 100644
index 0000000..8a18171
--- /dev/null
+++ b/assets/guide_components_calendar-date-picker_properties.md.DXRjmMG8.lean.js
@@ -0,0 +1 @@
+import{_ as e,q as t,p as r,aq as a}from"./chunks/framework.DvIFzl91.js";const u=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/components/calendar-date-picker/properties.md","filePath":"guide/components/calendar-date-picker/properties.md"}'),n={name:"guide/components/calendar-date-picker/properties.md"},o=a("",3),s=[o];function i(c,p,l,d,_,h){return r(),t("div",null,s)}const f=e(n,[["render",i]]);export{u as __pageData,f as default};
diff --git a/assets/guide_components_calendar-view_index.md.zdoRYVx1.js b/assets/guide_components_calendar-view_index.md.zdoRYVx1.js
new file mode 100644
index 0000000..92e6219
--- /dev/null
+++ b/assets/guide_components_calendar-view_index.md.zdoRYVx1.js
@@ -0,0 +1 @@
+import{_ as r,q as h,Y as t,z as i,H as l,u as p,aq as s,S as n,p as o}from"./chunks/framework.DvIFzl91.js";const c={data(){return{value:new Date}},mounted(){this.value.setFullYear(2019)}},f=JSON.parse('{"title":"CalendarView","description":"","frontmatter":{"page":true,"title":"CalendarView"},"headers":[],"relativePath":"guide/components/calendar-view/index.md","filePath":"guide/components/calendar-view/index.md"}'),k=l("h3",{id:"calendarview-demo",tabindex:"-1"},[p("CalendarView-DEMO "),l("a",{class:"header-anchor",href:"#calendarview-demo","aria-label":'Permalink to "CalendarView-DEMO"'},"​")],-1),g=l("hr",null,null,-1),u=s('<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-CalendarView</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-CalendarView</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="calendarview-multiple-choose" tabindex="-1">CalendarView Multiple Choose <a class="header-anchor" href="#calendarview-multiple-choose" aria-label="Permalink to &quot;CalendarView Multiple Choose&quot;">​</a></h3><hr>',3),y=s('<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-CalendarView</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> multiple</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;multiple&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> lan</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;zh&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-CalendarView</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="calendarview-init-day" tabindex="-1">CalendarView Init Day <a class="header-anchor" href="#calendarview-init-day" aria-label="Permalink to &quot;CalendarView Init Day&quot;">​</a></h3><hr>',3),E=s('<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-CalendarView</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">value</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> multiple</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;multiple&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> lan</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;zh&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-CalendarView</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="calendarview-range-choose" tabindex="-1">CalendarView Range Choose <a class="header-anchor" href="#calendarview-range-choose" aria-label="Permalink to &quot;CalendarView Range Choose&quot;">​</a></h3><hr>',3),_=s('<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-CalendarView</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> multiple</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;range&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-CalendarView</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="calendarview-dark-theme" tabindex="-1">CalendarView Dark Theme <a class="header-anchor" href="#calendarview-dark-theme" aria-label="Permalink to &quot;CalendarView Dark Theme&quot;">​</a></h3><hr>',3),m=s('<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-CalendarView</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;dark&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-CalendarView</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">value</td><td style="text-align:center;">[date]</td><td style="text-align:center;">No</td><td style="text-align:center;">CurrentDate</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">start</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">1900</td><td style="text-align:center;">Minium Year.</td></tr><tr><td style="text-align:center;">end</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">3000</td><td style="text-align:center;">Maxium Year.</td></tr><tr><td style="text-align:center;">multiple</td><td style="text-align:center;">[&#39;single&#39;,&#39;multiple&#39;,&#39;range&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">single</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">lan</td><td style="text-align:center;">[&#39;en&#39;,&#39;zh&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">en</td><td style="text-align:center;">CalendarView language.</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">system</td><td style="text-align:center;">主题样式, 包含<code>light</code>, <code>dark</code>, <code>system</code>, <code>custom</code>几种样式</td></tr></tbody></table><h3 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to &quot;Events&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">事件名(Name)</th><th style="text-align:center;">参数类型(args)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">choose-year</td><td style="text-align:center;">string</td><td style="text-align:center;">选择年份后返回年份</td></tr><tr><td style="text-align:center;">choose-month</td><td style="text-align:center;">string</td><td style="text-align:center;">选择月份后返回月份</td></tr><tr><td style="text-align:center;">choose-date</td><td style="text-align:center;">date</td><td style="text-align:center;">选择日期后返回日期</td></tr><tr><td style="text-align:center;">choosen-dates</td><td style="text-align:center;">array</td><td style="text-align:center;">选择多个日期后返回日期数组, 类型为[{year,month,no}]</td></tr></tbody></table>',7);function v(C,x,b,w,d,F){const e=n("fv-CalendarView"),a=n("ClientOnly");return o(),h("div",null,[k,g,t(a,null,{default:i(()=>[t(e)]),_:1}),u,t(a,null,{default:i(()=>[t(e,{multiple:"multiple",lan:"zh"})]),_:1}),y,t(a,null,{default:i(()=>[t(e,{value:d.value,multiple:"multiple",lan:"zh"},null,8,["value"])]),_:1}),E,t(a,null,{default:i(()=>[t(e,{multiple:"range"})]),_:1}),_,t(a,null,{default:i(()=>[t(e,{theme:"dark"})]),_:1}),m])}const T=r(c,[["render",v]]);export{f as __pageData,T as default};
diff --git a/assets/guide_components_calendar-view_index.md.zdoRYVx1.lean.js b/assets/guide_components_calendar-view_index.md.zdoRYVx1.lean.js
new file mode 100644
index 0000000..c5a7748
--- /dev/null
+++ b/assets/guide_components_calendar-view_index.md.zdoRYVx1.lean.js
@@ -0,0 +1 @@
+import{_ as r,q as h,Y as t,z as i,H as l,u as p,aq as s,S as n,p as o}from"./chunks/framework.DvIFzl91.js";const c={data(){return{value:new Date}},mounted(){this.value.setFullYear(2019)}},f=JSON.parse('{"title":"CalendarView","description":"","frontmatter":{"page":true,"title":"CalendarView"},"headers":[],"relativePath":"guide/components/calendar-view/index.md","filePath":"guide/components/calendar-view/index.md"}'),k=l("h3",{id:"calendarview-demo",tabindex:"-1"},[p("CalendarView-DEMO "),l("a",{class:"header-anchor",href:"#calendarview-demo","aria-label":'Permalink to "CalendarView-DEMO"'},"​")],-1),g=l("hr",null,null,-1),u=s("",3),y=s("",3),E=s("",3),_=s("",3),m=s("",7);function v(C,x,b,w,d,F){const e=n("fv-CalendarView"),a=n("ClientOnly");return o(),h("div",null,[k,g,t(a,null,{default:i(()=>[t(e)]),_:1}),u,t(a,null,{default:i(()=>[t(e,{multiple:"multiple",lan:"zh"})]),_:1}),y,t(a,null,{default:i(()=>[t(e,{value:d.value,multiple:"multiple",lan:"zh"},null,8,["value"])]),_:1}),E,t(a,null,{default:i(()=>[t(e,{multiple:"range"})]),_:1}),_,t(a,null,{default:i(()=>[t(e,{theme:"dark"})]),_:1}),m])}const T=r(c,[["render",v]]);export{f as __pageData,T as default};
diff --git a/assets/guide_components_callout_index.md.D9RU33w6.js b/assets/guide_components_callout_index.md.D9RU33w6.js
new file mode 100644
index 0000000..becaaa6
--- /dev/null
+++ b/assets/guide_components_callout_index.md.D9RU33w6.js
@@ -0,0 +1,17 @@
+import{_ as u,q as m,Y as i,z as e,H as n,v as r,u as o,aq as g,S as a,p as x}from"./chunks/framework.DvIFzl91.js";const b={data(){return{text:"1233",show:!0,color:"#242424FF",beak:10,space:0,position:{key:"topLeft",text:"topLeft"},options:[{key:"topLeft",text:"topLeft"},{key:"topRight",text:"topRight"},{key:"topCenter",text:"topCenter"},{key:"bottomLeft",text:"bottomLeft"},{key:"bottomRight",text:"bottomRight"},{key:"bottomCenter",text:"bottomCenter"},{key:"leftTop",text:"leftTop"},{key:"leftCenter",text:"leftCenter"},{key:"leftBottom",text:"leftBottom"},{key:"rightTop",text:"rightTop"},{key:"rightBottom",text:"rightBottom"},{key:"rightCenter",text:"rightCenter"}]}},methods:{changeText(d){this.text=d}}},S=JSON.parse('{"title":"Callout","description":"","frontmatter":{"page":true,"title":"Callout"},"headers":[],"relativePath":"guide/components/callout/index.md","filePath":"guide/components/callout/index.md"}'),C=n("h3",{id:"callout",tabindex:"-1"},[o("Callout "),n("a",{class:"header-anchor",href:"#callout","aria-label":'Permalink to "Callout"'},"​")],-1),f=g(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-callout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">visible</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">sync</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">show</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> effect</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;hover&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> position</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;bottomLeft&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;fv-button icon=&quot;ActionCenter&quot; borderRadius=&quot;3&quot; style=&quot;width: 120px; height: 45px;&quot;&gt;Callout&lt;/fv-button&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;template v-slot:main&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;fv-color-picker v-model=&quot;color&quot; style=&quot;width:500px&quot;&gt;&lt;/fv-color-picker&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-callout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h3 id="callout-custom" tabindex="-1">Callout Custom <a class="header-anchor" href="#callout-custom" aria-label="Permalink to &quot;Callout Custom&quot;">​</a></h3><p>beak:</p>`,3),F=n("p",null,"space:",-1),_=n("p",null,"position:",-1),v=g(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-callout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">lockScroll</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">position</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">position.key</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">beak</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">beak</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">space</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">popperStyle</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{ </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">backgroundColor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: color }</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;dark&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;fv-button :background=&quot;color&quot; theme=&quot;dark&quot; icon=&quot;ActionCenter&quot; borderRadius=&quot;3&quot; style=&quot;width: 120px; height: 45px;&quot;&gt;Callout&lt;/fv-button&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;template v-slot:header&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    Fluent UI</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;template v-slot:main&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    Hello Vue! Nice to meet you!</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;template v-slot:footer&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    @Copyright Creator SN</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-callout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">visible.sync</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否显示</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">[&#39;system&#39;,&#39;light&#39;,&#39;dark&#39;,&#39;custom&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;system&#39;</td><td style="text-align:center;">主题色</td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否禁用</td></tr><tr><td style="text-align:center;">space</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">0</td><td style="text-align:center;">间距(px)</td></tr><tr><td style="text-align:center;">beak</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">10</td><td style="text-align:center;">角标大小(px)</td></tr><tr><td style="text-align:center;">position</td><td style="text-align:center;">[&#39;topLeft&#39;,&#39;topCenter&#39;,...]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;bottomCenter&#39;</td><td style="text-align:center;">位置</td></tr><tr><td style="text-align:center;">lockScroll</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否锁定滚动</td></tr><tr><td style="text-align:center;">focusTrap</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否聚焦</td></tr><tr><td style="text-align:center;">delayClose</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">0</td><td style="text-align:center;">显示时是否延时关闭(ms)</td></tr><tr><td style="text-align:center;">effect</td><td style="text-align:center;">[’click&#39;,&#39;hover&#39;,&#39;always&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;click&#39;</td><td style="text-align:center;">显示触发方式</td></tr><tr><td style="text-align:center;">popperStyle</td><td style="text-align:center;">Object</td><td style="text-align:center;">No</td><td style="text-align:center;">{}</td><td style="text-align:center;">悬浮窗的样式</td></tr><tr><td style="text-align:center;">popperClass</td><td style="text-align:center;">Array</td><td style="text-align:center;">No</td><td style="text-align:center;">[]</td><td style="text-align:center;">悬浮窗的 css</td></tr></tbody></table><h3 id="appendix" tabindex="-1">Appendix <a class="header-anchor" href="#appendix" aria-label="Permalink to &quot;Appendix&quot;">​</a></h3><hr><ol><li>position</li></ol><p><code>position</code>属性包括: <code>topLeft</code>, <code>topRight</code>, <code>topCenter</code>, <code>bottomLeft</code>, <code>bottomRight</code>, <code>bottomCenter</code>, <code>leftTop</code>, <code>leftCenter</code>, <code>leftBottom</code>, <code>rightTop</code>, <code>rightBottom</code>, <code>rightCenter</code></p>`,8);function q(d,l,B,N,t,V){const h=a("fv-button"),E=a("fv-color-picker"),k=a("fv-callout"),p=a("ClientOnly"),c=a("fv-slider"),y=a("fv-combobox");return x(),m("div",null,[C,i(p,null,{default:e(()=>[i(k,{visible:t.show,effect:"hover",position:"bottomLeft",keepalive:!1},{main:e(()=>[i(E,{modelValue:t.color,"onUpdate:modelValue":l[0]||(l[0]=s=>t.color=s),style:{width:"500px"}},null,8,["modelValue"])]),default:e(()=>[i(h,{icon:"ActionCenter",borderRadius:"3",style:{width:"120px",height:"45px"}},{default:e(()=>[o("Color")]),_:1})]),_:1},8,["visible"])]),_:1}),f,i(c,{modelValue:t.beak,"onUpdate:modelValue":l[1]||(l[1]=s=>t.beak=s),color:t.color,mininum:9,maxinum:30,showLabel:!0},{default:e(s=>[n("span",null,r(s)+" px",1)]),_:1},8,["modelValue","color"]),F,i(c,{modelValue:t.space,"onUpdate:modelValue":l[2]||(l[2]=s=>t.space=s),color:t.color,scale:10,maxinum:30,showLabel:!0},{default:e(s=>[n("span",null,r(s)+" px",1)]),_:1},8,["modelValue","color"]),_,i(p,null,{default:e(()=>[i(y,{modelValue:t.position,"onUpdate:modelValue":l[3]||(l[3]=s=>t.position=s),options:t.options},null,8,["modelValue","options"])]),_:1}),n("p",null,r(t.position.key),1),i(p,null,{default:e(()=>[i(k,{lockScroll:!0,position:t.position.key,beak:t.beak,space:t.space,popperStyle:{backgroundColor:t.color},theme:"dark"},{header:e(()=>[o(" Fluent UI ")]),main:e(()=>[o(" Hello Vue! Nice to meet you! ")]),footer:e(()=>[o(" @Copyright Creator SN ")]),default:e(()=>[i(h,{background:t.color,theme:"dark",icon:"ActionCenter",borderRadius:"3",style:{width:"120px",height:"45px"}},{default:e(()=>[o("Callout")]),_:1},8,["background"])]),_:1},8,["position","beak","space","popperStyle"])]),_:1}),v])}const A=u(b,[["render",q]]);export{S as __pageData,A as default};
diff --git a/assets/guide_components_callout_index.md.D9RU33w6.lean.js b/assets/guide_components_callout_index.md.D9RU33w6.lean.js
new file mode 100644
index 0000000..82490b3
--- /dev/null
+++ b/assets/guide_components_callout_index.md.D9RU33w6.lean.js
@@ -0,0 +1 @@
+import{_ as u,q as m,Y as i,z as e,H as n,v as r,u as o,aq as g,S as a,p as x}from"./chunks/framework.DvIFzl91.js";const b={data(){return{text:"1233",show:!0,color:"#242424FF",beak:10,space:0,position:{key:"topLeft",text:"topLeft"},options:[{key:"topLeft",text:"topLeft"},{key:"topRight",text:"topRight"},{key:"topCenter",text:"topCenter"},{key:"bottomLeft",text:"bottomLeft"},{key:"bottomRight",text:"bottomRight"},{key:"bottomCenter",text:"bottomCenter"},{key:"leftTop",text:"leftTop"},{key:"leftCenter",text:"leftCenter"},{key:"leftBottom",text:"leftBottom"},{key:"rightTop",text:"rightTop"},{key:"rightBottom",text:"rightBottom"},{key:"rightCenter",text:"rightCenter"}]}},methods:{changeText(d){this.text=d}}},S=JSON.parse('{"title":"Callout","description":"","frontmatter":{"page":true,"title":"Callout"},"headers":[],"relativePath":"guide/components/callout/index.md","filePath":"guide/components/callout/index.md"}'),C=n("h3",{id:"callout",tabindex:"-1"},[o("Callout "),n("a",{class:"header-anchor",href:"#callout","aria-label":'Permalink to "Callout"'},"​")],-1),f=g("",3),F=n("p",null,"space:",-1),_=n("p",null,"position:",-1),v=g("",8);function q(d,l,B,N,t,V){const h=a("fv-button"),E=a("fv-color-picker"),k=a("fv-callout"),p=a("ClientOnly"),c=a("fv-slider"),y=a("fv-combobox");return x(),m("div",null,[C,i(p,null,{default:e(()=>[i(k,{visible:t.show,effect:"hover",position:"bottomLeft",keepalive:!1},{main:e(()=>[i(E,{modelValue:t.color,"onUpdate:modelValue":l[0]||(l[0]=s=>t.color=s),style:{width:"500px"}},null,8,["modelValue"])]),default:e(()=>[i(h,{icon:"ActionCenter",borderRadius:"3",style:{width:"120px",height:"45px"}},{default:e(()=>[o("Color")]),_:1})]),_:1},8,["visible"])]),_:1}),f,i(c,{modelValue:t.beak,"onUpdate:modelValue":l[1]||(l[1]=s=>t.beak=s),color:t.color,mininum:9,maxinum:30,showLabel:!0},{default:e(s=>[n("span",null,r(s)+" px",1)]),_:1},8,["modelValue","color"]),F,i(c,{modelValue:t.space,"onUpdate:modelValue":l[2]||(l[2]=s=>t.space=s),color:t.color,scale:10,maxinum:30,showLabel:!0},{default:e(s=>[n("span",null,r(s)+" px",1)]),_:1},8,["modelValue","color"]),_,i(p,null,{default:e(()=>[i(y,{modelValue:t.position,"onUpdate:modelValue":l[3]||(l[3]=s=>t.position=s),options:t.options},null,8,["modelValue","options"])]),_:1}),n("p",null,r(t.position.key),1),i(p,null,{default:e(()=>[i(k,{lockScroll:!0,position:t.position.key,beak:t.beak,space:t.space,popperStyle:{backgroundColor:t.color},theme:"dark"},{header:e(()=>[o(" Fluent UI ")]),main:e(()=>[o(" Hello Vue! Nice to meet you! ")]),footer:e(()=>[o(" @Copyright Creator SN ")]),default:e(()=>[i(h,{background:t.color,theme:"dark",icon:"ActionCenter",borderRadius:"3",style:{width:"120px",height:"45px"}},{default:e(()=>[o("Callout")]),_:1},8,["background"])]),_:1},8,["position","beak","space","popperStyle"])]),_:1}),v])}const A=u(b,[["render",q]]);export{S as __pageData,A as default};
diff --git a/assets/guide_components_check-box_emits.md.31609794.js b/assets/guide_components_check-box_emits.md.31609794.js
deleted file mode 100644
index 7acd050..0000000
--- a/assets/guide_components_check-box_emits.md.31609794.js
+++ /dev/null
@@ -1 +0,0 @@
-import{_ as t,c as e,o as n,a as l}from"./app.d60fa8c3.js";const x=JSON.parse('{"title":"Emits","description":"","frontmatter":{},"headers":[{"level":2,"title":"Emits","slug":"emits"}],"relativePath":"guide/components/check-box/emits.md"}'),a={name:"guide/components/check-box/emits.md"},r=l('<h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">blur</td><td style="text-align:center;">evt[FocusEvent]</td><td style="text-align:center;">blur</td></tr><tr><td style="text-align:center;">change</td><td style="text-align:center;">val[boolean, null]</td><td style="text-align:center;">change</td></tr><tr><td style="text-align:center;">click</td><td style="text-align:center;">val[boolean, null]</td><td style="text-align:center;">onclick</td></tr><tr><td style="text-align:center;">focus</td><td style="text-align:center;">evt[FocusEvent]</td><td style="text-align:center;">focus</td></tr><tr><td style="text-align:center;">update:model-value</td><td style="text-align:center;">val[boolean]</td><td style="text-align:center;">v-model</td></tr></tbody></table>',3),s=[r];function d(c,i,o,_,g,m){return n(),e("div",null,s)}var u=t(a,[["render",d]]);export{x as __pageData,u as default};
diff --git a/assets/guide_components_check-box_emits.md.31609794.lean.js b/assets/guide_components_check-box_emits.md.31609794.lean.js
deleted file mode 100644
index 8248126..0000000
--- a/assets/guide_components_check-box_emits.md.31609794.lean.js
+++ /dev/null
@@ -1 +0,0 @@
-import{_ as t,c as e,o as n,a as l}from"./app.d60fa8c3.js";const x=JSON.parse('{"title":"Emits","description":"","frontmatter":{},"headers":[{"level":2,"title":"Emits","slug":"emits"}],"relativePath":"guide/components/check-box/emits.md"}'),a={name:"guide/components/check-box/emits.md"},r=l("",3),s=[r];function d(c,i,o,_,g,m){return n(),e("div",null,s)}var u=t(a,[["render",d]]);export{x as __pageData,u as default};
diff --git a/assets/guide_components_check-box_index.md.32046814.js b/assets/guide_components_check-box_index.md.32046814.js
deleted file mode 100644
index f0bf620..0000000
--- a/assets/guide_components_check-box_index.md.32046814.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import{u as x}from"./chunks/index.9dba9c16.js";import{d as m,f as v,c as C,k as o,b as t,w as a,u as l,a as r,e,r as y,o as A}from"./app.d60fa8c3.js";const f=r('<h1 id="checkbox" tabindex="-1">CheckBox <a class="header-anchor" href="#checkbox" aria-hidden="true">#</a></h1><h2 id="quick-start" tabindex="-1">Quick Start <a class="header-anchor" href="#quick-start" aria-hidden="true">#</a></h2><h3 id="default" tabindex="-1">Default <a class="header-anchor" href="#default" aria-hidden="true">#</a></h3>',3),_={style:{margin:"5px"}},k=e("Reset value"),q=o("hr",null,null,-1),E=e(" CheckBox "),w=r(`<div class="language-vue-html"><span class="copy"></span><div class="highlight-lines"><br><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><br><br><br><br></div><pre><code><span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-check-box</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">v-model</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    @</span><span style="color:#C792EA;">click</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">click</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    @</span><span style="color:#C792EA;">change</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">change</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    @</span><span style="color:#C792EA;">blur</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">blur</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    @</span><span style="color:#C792EA;">focus</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">focus</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">  &gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">    CheckBox</span></span>
-<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-check-box</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h2 id="disabled" tabindex="-1">Disabled <a class="header-anchor" href="#disabled" aria-hidden="true">#</a></h2>`,2),N=e(" Disabled CheckBox "),S=r(`<div class="language-vue-html"><span class="copy"></span><div class="highlight-lines"><br><br><br><div class="highlighted">\xA0</div><br><br><br><br></div><pre><code><span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-check-box</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">v-model</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">disabled</span></span>
-<span class="line"><span style="color:#89DDFF;">  &gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">    Disabled CheckBox</span></span>
-<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-check-box</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h2 id="box-side" tabindex="-1">Box Side <a class="header-anchor" href="#box-side" aria-hidden="true">#</a></h2><hr>`,3),B=e(' Checkbox rendered with boxSide "end" '),V=r(`<div class="language-vue-html"><span class="copy"></span><div class="highlight-lines"><br><br><div class="highlighted">\xA0</div><br><br><br><br></div><pre><code><span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-check-box</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">box-side</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">end</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">  &gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">    Checkbox rendered with boxSide &quot;end&quot;</span></span>
-<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-check-box</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h2 id="custom" tabindex="-1">Custom <a class="header-anchor" href="#custom" aria-hidden="true">#</a></h2><hr>`,3),P=e("Set border width. "),T=e(' Checkbox rendered with borderWidth "2" '),Q=r(`<div class="language-vue-html"><span class="copy"></span><div class="highlight-lines"><br><br><div class="highlighted">\xA0</div><br><br><br><br></div><pre><code><span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-check-box</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    :</span><span style="color:#C792EA;">border-width</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#F78C6C;">2</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">  &gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">    Checkbox rendered with borderWidth &quot;2&quot;</span></span>
-<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-check-box</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div>`,1),R={start:"2"},U=e("Set background and border color. "),W=e(" Checkbox "),I=r(`<div class="language-vue-html"><span class="copy"></span><div class="highlight-lines"><br><br><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><br><br><br><br></div><pre><code><span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-check-box</span></span>
-<span class="line"><span style="color:#89DDFF;">    :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">border-color</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">rgba(0, 204, 153, 1)</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">foreground</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">rgba(0, 204, 153, 1)</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">background</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">rgba(0, 204, 153, 1)</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">  &gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">    Checkbox</span></span>
-<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-check-box</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">background</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">background</td></tr><tr><td style="text-align:center;">border-color</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">borderColor</td></tr><tr><td style="text-align:center;">border-width</td><td style="text-align:center;">[number, string]</td><td style="text-align:center;">No</td><td style="text-align:center;">1.5</td><td style="text-align:center;">border width</td></tr><tr><td style="text-align:center;">box-side</td><td style="text-align:center;">[&#39;start&#39;, &#39;end&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">start</td><td style="text-align:center;">position</td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">disabled</td></tr><tr><td style="text-align:center;">foreground</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">foreground</td></tr><tr><td style="text-align:center;">hover-color</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">false status hover color</td></tr><tr><td style="text-align:center;">lang</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">i18n</td></tr><tr><td style="text-align:center;">model-value</td><td style="text-align:center;">[boolean, null]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">value, null means indeterminate</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">[&#39;light&#39;, &#39;dark&#39;, &#39;global&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&quot;global&quot;</td><td style="text-align:center;">theme</td></tr></tbody></table><h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">blur</td><td style="text-align:center;">evt[FocusEvent]</td><td style="text-align:center;">blur</td></tr><tr><td style="text-align:center;">change</td><td style="text-align:center;">val[boolean, null]</td><td style="text-align:center;">change</td></tr><tr><td style="text-align:center;">click</td><td style="text-align:center;">val[boolean, null]</td><td style="text-align:center;">onclick</td></tr><tr><td style="text-align:center;">focus</td><td style="text-align:center;">evt[FocusEvent]</td><td style="text-align:center;">focus</td></tr><tr><td style="text-align:center;">update:model-value</td><td style="text-align:center;">val[boolean]</td><td style="text-align:center;">v-model</td></tr></tbody></table><h2 id="slot" tabindex="-1">Slot <a class="header-anchor" href="#slot" aria-hidden="true">#</a></h2><hr><h3 id="default-1" tabindex="-1">Default <a class="header-anchor" href="#default-1" aria-hidden="true">#</a></h3><div class="language-vue-html"><span class="copy"></span><pre><code><span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-check-box</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">{{</span><span style="color:#A6ACCD;">label here</span><span style="color:#89DDFF;">}}</span></span>
-<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-check-box</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div>`,11),G=JSON.parse('{"title":"CheckBox","description":"","frontmatter":{"page":true,"title":"CheckBox"},"headers":[{"level":2,"title":"Quick Start","slug":"quick-start"},{"level":3,"title":"Default","slug":"default"},{"level":2,"title":"Disabled","slug":"disabled"},{"level":2,"title":"Box Side","slug":"box-side"},{"level":2,"title":"Custom","slug":"custom"},{"level":2,"title":"Properties","slug":"properties"},{"level":2,"title":"Emits","slug":"emits"},{"level":2,"title":"Slot","slug":"slot"},{"level":3,"title":"Default","slug":"default-1"}],"relativePath":"guide/components/check-box/index.md"}'),J={name:"guide/components/check-box/index.md"},H=m({...J,setup(O){const{theme:n}=x(),p=v(null);function D(s){console.log("click",s)}function h(){p.value=null}function F(s){console.log("change",s)}function u(s){console.log("focus",s)}function b(s){console.log("blur",s)}return(s,i)=>{const g=y("fv-button"),c=y("fv-check-box");return A(),C("div",null,[f,o("div",_,[t(g,{theme:l(n),style:{width:"120px"},onClick:h},{default:a(()=>[k]),_:1},8,["theme"])]),q,t(c,{theme:l(n),modelValue:p.value,"onUpdate:modelValue":i[0]||(i[0]=d=>p.value=d),onClick:D,onChange:F,onBlur:b,onFocus:u},{default:a(()=>[E]),_:1},8,["theme","modelValue"]),w,t(c,{theme:l(n),modelValue:p.value,"onUpdate:modelValue":i[1]||(i[1]=d=>p.value=d),disabled:""},{default:a(()=>[N]),_:1},8,["theme","modelValue"]),S,t(c,{theme:l(n),"box-side":"end"},{default:a(()=>[B]),_:1},8,["theme"]),V,o("ol",null,[o("li",null,[P,t(c,{theme:l(n),"border-width":2},{default:a(()=>[T]),_:1},8,["theme"])])]),Q,o("ol",R,[o("li",null,[U,t(c,{theme:l(n),"border-color":"rgba(0, 204, 153, 1)",foreground:"rgba(0, 204, 153, 1)",background:"rgba(0, 204, 153, 1)"},{default:a(()=>[W]),_:1},8,["theme"])])]),I])}}});export{G as __pageData,H as default};
diff --git a/assets/guide_components_check-box_index.md.32046814.lean.js b/assets/guide_components_check-box_index.md.32046814.lean.js
deleted file mode 100644
index f0bf620..0000000
--- a/assets/guide_components_check-box_index.md.32046814.lean.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import{u as x}from"./chunks/index.9dba9c16.js";import{d as m,f as v,c as C,k as o,b as t,w as a,u as l,a as r,e,r as y,o as A}from"./app.d60fa8c3.js";const f=r('<h1 id="checkbox" tabindex="-1">CheckBox <a class="header-anchor" href="#checkbox" aria-hidden="true">#</a></h1><h2 id="quick-start" tabindex="-1">Quick Start <a class="header-anchor" href="#quick-start" aria-hidden="true">#</a></h2><h3 id="default" tabindex="-1">Default <a class="header-anchor" href="#default" aria-hidden="true">#</a></h3>',3),_={style:{margin:"5px"}},k=e("Reset value"),q=o("hr",null,null,-1),E=e(" CheckBox "),w=r(`<div class="language-vue-html"><span class="copy"></span><div class="highlight-lines"><br><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><br><br><br><br></div><pre><code><span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-check-box</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">v-model</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    @</span><span style="color:#C792EA;">click</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">click</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    @</span><span style="color:#C792EA;">change</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">change</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    @</span><span style="color:#C792EA;">blur</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">blur</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    @</span><span style="color:#C792EA;">focus</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">focus</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">  &gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">    CheckBox</span></span>
-<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-check-box</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h2 id="disabled" tabindex="-1">Disabled <a class="header-anchor" href="#disabled" aria-hidden="true">#</a></h2>`,2),N=e(" Disabled CheckBox "),S=r(`<div class="language-vue-html"><span class="copy"></span><div class="highlight-lines"><br><br><br><div class="highlighted">\xA0</div><br><br><br><br></div><pre><code><span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-check-box</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">v-model</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">disabled</span></span>
-<span class="line"><span style="color:#89DDFF;">  &gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">    Disabled CheckBox</span></span>
-<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-check-box</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h2 id="box-side" tabindex="-1">Box Side <a class="header-anchor" href="#box-side" aria-hidden="true">#</a></h2><hr>`,3),B=e(' Checkbox rendered with boxSide "end" '),V=r(`<div class="language-vue-html"><span class="copy"></span><div class="highlight-lines"><br><br><div class="highlighted">\xA0</div><br><br><br><br></div><pre><code><span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-check-box</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">box-side</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">end</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">  &gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">    Checkbox rendered with boxSide &quot;end&quot;</span></span>
-<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-check-box</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h2 id="custom" tabindex="-1">Custom <a class="header-anchor" href="#custom" aria-hidden="true">#</a></h2><hr>`,3),P=e("Set border width. "),T=e(' Checkbox rendered with borderWidth "2" '),Q=r(`<div class="language-vue-html"><span class="copy"></span><div class="highlight-lines"><br><br><div class="highlighted">\xA0</div><br><br><br><br></div><pre><code><span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-check-box</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    :</span><span style="color:#C792EA;">border-width</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#F78C6C;">2</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">  &gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">    Checkbox rendered with borderWidth &quot;2&quot;</span></span>
-<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-check-box</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div>`,1),R={start:"2"},U=e("Set background and border color. "),W=e(" Checkbox "),I=r(`<div class="language-vue-html"><span class="copy"></span><div class="highlight-lines"><br><br><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><br><br><br><br></div><pre><code><span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-check-box</span></span>
-<span class="line"><span style="color:#89DDFF;">    :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">border-color</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">rgba(0, 204, 153, 1)</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">foreground</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">rgba(0, 204, 153, 1)</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">background</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">rgba(0, 204, 153, 1)</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">  &gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">    Checkbox</span></span>
-<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-check-box</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">background</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">background</td></tr><tr><td style="text-align:center;">border-color</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">borderColor</td></tr><tr><td style="text-align:center;">border-width</td><td style="text-align:center;">[number, string]</td><td style="text-align:center;">No</td><td style="text-align:center;">1.5</td><td style="text-align:center;">border width</td></tr><tr><td style="text-align:center;">box-side</td><td style="text-align:center;">[&#39;start&#39;, &#39;end&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">start</td><td style="text-align:center;">position</td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">disabled</td></tr><tr><td style="text-align:center;">foreground</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">foreground</td></tr><tr><td style="text-align:center;">hover-color</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">false status hover color</td></tr><tr><td style="text-align:center;">lang</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">i18n</td></tr><tr><td style="text-align:center;">model-value</td><td style="text-align:center;">[boolean, null]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">value, null means indeterminate</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">[&#39;light&#39;, &#39;dark&#39;, &#39;global&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&quot;global&quot;</td><td style="text-align:center;">theme</td></tr></tbody></table><h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">blur</td><td style="text-align:center;">evt[FocusEvent]</td><td style="text-align:center;">blur</td></tr><tr><td style="text-align:center;">change</td><td style="text-align:center;">val[boolean, null]</td><td style="text-align:center;">change</td></tr><tr><td style="text-align:center;">click</td><td style="text-align:center;">val[boolean, null]</td><td style="text-align:center;">onclick</td></tr><tr><td style="text-align:center;">focus</td><td style="text-align:center;">evt[FocusEvent]</td><td style="text-align:center;">focus</td></tr><tr><td style="text-align:center;">update:model-value</td><td style="text-align:center;">val[boolean]</td><td style="text-align:center;">v-model</td></tr></tbody></table><h2 id="slot" tabindex="-1">Slot <a class="header-anchor" href="#slot" aria-hidden="true">#</a></h2><hr><h3 id="default-1" tabindex="-1">Default <a class="header-anchor" href="#default-1" aria-hidden="true">#</a></h3><div class="language-vue-html"><span class="copy"></span><pre><code><span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-check-box</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">{{</span><span style="color:#A6ACCD;">label here</span><span style="color:#89DDFF;">}}</span></span>
-<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-check-box</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div>`,11),G=JSON.parse('{"title":"CheckBox","description":"","frontmatter":{"page":true,"title":"CheckBox"},"headers":[{"level":2,"title":"Quick Start","slug":"quick-start"},{"level":3,"title":"Default","slug":"default"},{"level":2,"title":"Disabled","slug":"disabled"},{"level":2,"title":"Box Side","slug":"box-side"},{"level":2,"title":"Custom","slug":"custom"},{"level":2,"title":"Properties","slug":"properties"},{"level":2,"title":"Emits","slug":"emits"},{"level":2,"title":"Slot","slug":"slot"},{"level":3,"title":"Default","slug":"default-1"}],"relativePath":"guide/components/check-box/index.md"}'),J={name:"guide/components/check-box/index.md"},H=m({...J,setup(O){const{theme:n}=x(),p=v(null);function D(s){console.log("click",s)}function h(){p.value=null}function F(s){console.log("change",s)}function u(s){console.log("focus",s)}function b(s){console.log("blur",s)}return(s,i)=>{const g=y("fv-button"),c=y("fv-check-box");return A(),C("div",null,[f,o("div",_,[t(g,{theme:l(n),style:{width:"120px"},onClick:h},{default:a(()=>[k]),_:1},8,["theme"])]),q,t(c,{theme:l(n),modelValue:p.value,"onUpdate:modelValue":i[0]||(i[0]=d=>p.value=d),onClick:D,onChange:F,onBlur:b,onFocus:u},{default:a(()=>[E]),_:1},8,["theme","modelValue"]),w,t(c,{theme:l(n),modelValue:p.value,"onUpdate:modelValue":i[1]||(i[1]=d=>p.value=d),disabled:""},{default:a(()=>[N]),_:1},8,["theme","modelValue"]),S,t(c,{theme:l(n),"box-side":"end"},{default:a(()=>[B]),_:1},8,["theme"]),V,o("ol",null,[o("li",null,[P,t(c,{theme:l(n),"border-width":2},{default:a(()=>[T]),_:1},8,["theme"])])]),Q,o("ol",R,[o("li",null,[U,t(c,{theme:l(n),"border-color":"rgba(0, 204, 153, 1)",foreground:"rgba(0, 204, 153, 1)",background:"rgba(0, 204, 153, 1)"},{default:a(()=>[W]),_:1},8,["theme"])])]),I])}}});export{G as __pageData,H as default};
diff --git a/assets/guide_components_check-box_index.md.FYgdu4oq.js b/assets/guide_components_check-box_index.md.FYgdu4oq.js
new file mode 100644
index 0000000..12a576a
--- /dev/null
+++ b/assets/guide_components_check-box_index.md.FYgdu4oq.js
@@ -0,0 +1 @@
+import{_ as c,q as k,Y as t,z as e,H as r,u as s,aq as l,S as o,p}from"./chunks/framework.DvIFzl91.js";const g={data(){return{value:!0}}},T=JSON.parse('{"title":"CheckBox","description":"","frontmatter":{"page":true,"title":"CheckBox"},"headers":[],"relativePath":"guide/components/check-box/index.md","filePath":"guide/components/check-box/index.md"}'),u=r("h3",{id:"checkbox-demo",tabindex:"-1"},[s("CheckBox-DEMO "),r("a",{class:"header-anchor",href:"#checkbox-demo","aria-label":'Permalink to "CheckBox-DEMO"'},"​")],-1),b=r("hr",null,null,-1),E=l('<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-checkBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Indeterminate checkbox&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-checkBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="checkbox-disabled" tabindex="-1">CheckBox-Disabled <a class="header-anchor" href="#checkbox-disabled" aria-label="Permalink to &quot;CheckBox-Disabled&quot;">​</a></h3><hr>',3),y=l('<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-checkBox</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> disabled</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Disabled checkbox&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-checkBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="checkbox-disabled-1" tabindex="-1">CheckBox-Disabled <a class="header-anchor" href="#checkbox-disabled-1" aria-label="Permalink to &quot;CheckBox-Disabled&quot;">​</a></h3><hr>',3),x=l('<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-checkBox</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> boxSide</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;end&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Checkbox rendered with boxSide &quot;end&quot;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-checkBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="checkbox-custom" tabindex="-1">CheckBox-Custom <a class="header-anchor" href="#checkbox-custom" aria-label="Permalink to &quot;CheckBox-Custom&quot;">​</a></h3><hr><ol><li>Set border width.</li></ol>',4),_=l('<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-checkBox</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">value</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> borderWidth</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;2&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Checkbox rendered with borderWidth &quot;2&quot;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-checkBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><ol start="2"><li>Set background and border color.</li></ol>',2),v=l('<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-checkBox</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">value</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> borderColor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rgba(0,204,153,1)&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> foreground</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rgba(0,204,153,1)&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rgba(0,204,153,1)&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Checkbox&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-checkBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">value</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">[empty]</td><td style="text-align:center;">Checkbox value</td></tr><tr><td style="text-align:center;">foreground</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">Checkbox foreground</td></tr><tr><td style="text-align:center;">borderColor</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">Checkbox borderColor</td></tr><tr><td style="text-align:center;">background</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">Checkbox background</td></tr><tr><td style="text-align:center;">boxSide</td><td style="text-align:center;">[&#39;start&#39;, &#39;end&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">start</td><td style="text-align:center;">CheckBox text font weight</td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">Disabled checkbox</td></tr><tr><td style="text-align:center;">borderWidth</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">1</td><td style="text-align:center;">Checkbox border width</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">system</td><td style="text-align:center;">主题样式, 包含<code>light</code>, <code>dark</code>, <code>system</code>, <code>custom</code>几种样式</td></tr></tbody></table><h3 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to &quot;Events&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">事件名(Name)</th><th style="text-align:center;">参数类型(args)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">click</td><td style="text-align:center;">value</td><td style="text-align:center;">Checkbox onclick</td></tr></tbody></table>',7);function m(C,n,B,f,d,F){const i=o("fv-checkBox"),a=o("ClientOnly");return p(),k("div",null,[u,b,t(a,null,{default:e(()=>[t(i,null,{default:e(()=>[s("Indeterminate checkbox")]),_:1})]),_:1}),E,t(a,null,{default:e(()=>[t(i,{disabled:""},{default:e(()=>[s("Disabled checkbox")]),_:1})]),_:1}),y,t(a,null,{default:e(()=>[t(i,{boxSide:"end"},{default:e(()=>[s('Checkbox rendered with boxSide "end"')]),_:1})]),_:1}),x,t(a,null,{default:e(()=>[t(i,{modelValue:d.value,"onUpdate:modelValue":n[0]||(n[0]=h=>d.value=h),borderWidth:"2"},{default:e(()=>[s('Checkbox rendered with borderWidth "2"')]),_:1},8,["modelValue"])]),_:1}),_,t(a,null,{default:e(()=>[t(i,{modelValue:d.value,"onUpdate:modelValue":n[1]||(n[1]=h=>d.value=h),borderColor:"rgba(0, 204, 153, 1)",foreground:"rgba(0, 204, 153, 1)",background:"rgba(0, 204, 153, 1)"},{default:e(()=>[s("Checkbox")]),_:1},8,["modelValue"])]),_:1}),v])}const S=c(g,[["render",m]]);export{T as __pageData,S as default};
diff --git a/assets/guide_components_check-box_index.md.FYgdu4oq.lean.js b/assets/guide_components_check-box_index.md.FYgdu4oq.lean.js
new file mode 100644
index 0000000..9d84440
--- /dev/null
+++ b/assets/guide_components_check-box_index.md.FYgdu4oq.lean.js
@@ -0,0 +1 @@
+import{_ as c,q as k,Y as t,z as e,H as r,u as s,aq as l,S as o,p}from"./chunks/framework.DvIFzl91.js";const g={data(){return{value:!0}}},T=JSON.parse('{"title":"CheckBox","description":"","frontmatter":{"page":true,"title":"CheckBox"},"headers":[],"relativePath":"guide/components/check-box/index.md","filePath":"guide/components/check-box/index.md"}'),u=r("h3",{id:"checkbox-demo",tabindex:"-1"},[s("CheckBox-DEMO "),r("a",{class:"header-anchor",href:"#checkbox-demo","aria-label":'Permalink to "CheckBox-DEMO"'},"​")],-1),b=r("hr",null,null,-1),E=l("",3),y=l("",3),x=l("",4),_=l("",2),v=l("",7);function m(C,n,B,f,d,F){const i=o("fv-checkBox"),a=o("ClientOnly");return p(),k("div",null,[u,b,t(a,null,{default:e(()=>[t(i,null,{default:e(()=>[s("Indeterminate checkbox")]),_:1})]),_:1}),E,t(a,null,{default:e(()=>[t(i,{disabled:""},{default:e(()=>[s("Disabled checkbox")]),_:1})]),_:1}),y,t(a,null,{default:e(()=>[t(i,{boxSide:"end"},{default:e(()=>[s('Checkbox rendered with boxSide "end"')]),_:1})]),_:1}),x,t(a,null,{default:e(()=>[t(i,{modelValue:d.value,"onUpdate:modelValue":n[0]||(n[0]=h=>d.value=h),borderWidth:"2"},{default:e(()=>[s('Checkbox rendered with borderWidth "2"')]),_:1},8,["modelValue"])]),_:1}),_,t(a,null,{default:e(()=>[t(i,{modelValue:d.value,"onUpdate:modelValue":n[1]||(n[1]=h=>d.value=h),borderColor:"rgba(0, 204, 153, 1)",foreground:"rgba(0, 204, 153, 1)",background:"rgba(0, 204, 153, 1)"},{default:e(()=>[s("Checkbox")]),_:1},8,["modelValue"])]),_:1}),v])}const S=c(g,[["render",m]]);export{T as __pageData,S as default};
diff --git a/assets/guide_components_check-box_properties.md.8f33ac0c.js b/assets/guide_components_check-box_properties.md.8f33ac0c.js
deleted file mode 100644
index 40447d3..0000000
--- a/assets/guide_components_check-box_properties.md.8f33ac0c.js
+++ /dev/null
@@ -1 +0,0 @@
-import{_ as t,c as e,o as n,a as r}from"./app.d60fa8c3.js";const p=JSON.parse('{"title":"Properties","description":"","frontmatter":{},"headers":[{"level":2,"title":"Properties","slug":"properties"}],"relativePath":"guide/components/check-box/properties.md"}'),d={name:"guide/components/check-box/properties.md"},l=r('<h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">background</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">background</td></tr><tr><td style="text-align:center;">border-color</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">borderColor</td></tr><tr><td style="text-align:center;">border-width</td><td style="text-align:center;">[number, string]</td><td style="text-align:center;">No</td><td style="text-align:center;">1.5</td><td style="text-align:center;">border width</td></tr><tr><td style="text-align:center;">box-side</td><td style="text-align:center;">[&#39;start&#39;, &#39;end&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">start</td><td style="text-align:center;">position</td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">disabled</td></tr><tr><td style="text-align:center;">foreground</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">foreground</td></tr><tr><td style="text-align:center;">hover-color</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">false status hover color</td></tr><tr><td style="text-align:center;">lang</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">i18n</td></tr><tr><td style="text-align:center;">model-value</td><td style="text-align:center;">[boolean, null]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">value, null means indeterminate</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">[&#39;light&#39;, &#39;dark&#39;, &#39;global&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&quot;global&quot;</td><td style="text-align:center;">theme</td></tr></tbody></table>',3),a=[l];function i(s,c,o,g,x,y){return n(),e("div",null,a)}var u=t(d,[["render",i]]);export{p as __pageData,u as default};
diff --git a/assets/guide_components_check-box_properties.md.8f33ac0c.lean.js b/assets/guide_components_check-box_properties.md.8f33ac0c.lean.js
deleted file mode 100644
index 726014a..0000000
--- a/assets/guide_components_check-box_properties.md.8f33ac0c.lean.js
+++ /dev/null
@@ -1 +0,0 @@
-import{_ as t,c as e,o as n,a as r}from"./app.d60fa8c3.js";const p=JSON.parse('{"title":"Properties","description":"","frontmatter":{},"headers":[{"level":2,"title":"Properties","slug":"properties"}],"relativePath":"guide/components/check-box/properties.md"}'),d={name:"guide/components/check-box/properties.md"},l=r("",3),a=[l];function i(s,c,o,g,x,y){return n(),e("div",null,a)}var u=t(d,[["render",i]]);export{p as __pageData,u as default};
diff --git a/assets/guide_components_collapse_index.md.N9Iu5-2v.js b/assets/guide_components_collapse_index.md.N9Iu5-2v.js
new file mode 100644
index 0000000..e707244
--- /dev/null
+++ b/assets/guide_components_collapse_index.md.N9Iu5-2v.js
@@ -0,0 +1,39 @@
+import{_ as k,q as r,H as s,Y as i,z as t,u as p,aq as n,S as e,p as d}from"./chunks/framework.DvIFzl91.js";const S=JSON.parse('{"title":"Collapse","description":"","frontmatter":{"page":true,"title":"Collapse"},"headers":[],"relativePath":"guide/components/collapse/index.md","filePath":"guide/components/collapse/index.md"}'),E={name:"guide/components/collapse/index.md"},o=s("h3",{id:"collapse-demo",tabindex:"-1"},[p("Collapse-DEMO "),s("a",{class:"header-anchor",href:"#collapse-demo","aria-label":'Permalink to "Collapse-DEMO"'},"​")],-1),g=s("hr",null,null,-1),c=s("div",{style:{position:"relative",height:"500px",background:"black",transition:"all 0.3s"}},null,-1),y=n(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Collapse</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;div style=&quot;position: relative; height: 500px; background: black; transition: all 0.3s;&quot;&gt;&lt;/div&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Collapse</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>Disabled Collapse</p>`,2),u=s("div",{style:{position:"relative",height:"500px",background:"black",transition:"all 0.3s"}},null,-1),b=n(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Collapse</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">disabledCollapse</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;div style=&quot;position: relative; height: 500px; background: black; transition: all 0.3s;&quot;&gt;&lt;/div&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Collapse</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>Extension</p>`,2),v=n(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Collapse</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">disabledCollapse</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;template v-slot:extension&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;fv-button&gt;Operation&lt;/fv-button&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Collapse</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h3 id="collapse-customize-background" tabindex="-1">Collapse-Customize Background <a class="header-anchor" href="#collapse-customize-background" aria-label="Permalink to &quot;Collapse-Customize Background&quot;">​</a></h3><hr>`,3),m=s("div",{style:{position:"relative",height:"500px",background:"black",transition:"all 0.3s"}},null,-1),F=n(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Collapse</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rgba(0, 98, 158, 1)&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;div style=&quot;position: relative; height: 500px; background: black; transition: all 0.3s;&quot;&gt;&lt;/div&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Collapse</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="collapse-dark-theme" tabindex="-1">Collapse-Dark Theme <a class="header-anchor" href="#collapse-dark-theme" aria-label="Permalink to &quot;Collapse-Dark Theme&quot;">​</a></h3><hr>`,3),C=s("div",{style:{position:"relative",height:"500px",background:"whitesmoke",transition:"all 0.3s"}},null,-1),x=n(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Collapse</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;dark&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;div style=&quot;position: relative; height: 500px; background: whitesmoke; transition: all 0.3s;&quot;&gt;&lt;/div&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Collapse</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">value</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否展开 <code>Collapse</code></td></tr><tr><td style="text-align:center;">icon</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">CollapseMenu</td><td style="text-align:center;">Icon with Fabric-Icon</td></tr><tr><td style="text-align:center;">title</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">Title of Collapse.</td><td style="text-align:center;">标题</td></tr><tr><td style="text-align:center;">content</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">Content information of Collapse.</td><td style="text-align:center;">副标题信息</td></tr><tr><td style="text-align:center;">background</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">客制化 <code>Collapse</code> 背景</td></tr><tr><td style="text-align:center;">defaultHeight</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">70</td><td style="text-align:center;">默认高度</td></tr><tr><td style="text-align:center;">maxHeight</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">300</td><td style="text-align:center;">展开最大高度</td></tr><tr><td style="text-align:center;">disabledCollapse</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">禁用展开 <code>Collapse</code></td></tr><tr><td style="text-align:center;">visibleOverflow</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">true</td><td style="text-align:center;">在禁用展开 <code>Collapse</code> , 允许overflow内容显示</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">system</td><td style="text-align:center;">主题样式, 包含<code>light</code>, <code>dark</code>, <code>system</code>, <code>custom</code>几种样式</td></tr></tbody></table><h3 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to &quot;Events&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">事件名(Name)</th><th style="text-align:center;">参数类型(args)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">item-click</td><td style="text-align:center;">boolean</td><td style="text-align:center;">返回 <code>Collapse</code> 属性 <code>value</code> 的值</td></tr><tr><td style="text-align:center;">descrption-click</td><td style="text-align:center;">N/A</td><td style="text-align:center;">描述框点击</td></tr><tr><td style="text-align:center;">icon-click</td><td style="text-align:center;">N/A</td><td style="text-align:center;">右侧图标点击</td></tr><tr><td style="text-align:center;">left-icon-click</td><td style="text-align:center;">N/A</td><td style="text-align:center;">左侧图标点击</td></tr></tbody></table><h3 id="slot" tabindex="-1">Slot <a class="header-anchor" href="#slot" aria-label="Permalink to &quot;Slot&quot;">​</a></h3><hr><ol><li>Default</li></ol><p>定义下拉内容</p><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Collapse</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rgba(0, 98, 158, 1)&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;div style=&quot;position: relative; height: 500px; background: black; transition: all 0.3s;&quot;&gt;&lt;/div&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Collapse</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ol start="2"><li>icon</li></ol><p>自定义 <code>Collapse</code> 显示图标</p><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">icon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">i</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ms-Icon&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">\`ms-Icon--\${</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">.</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">icon</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">}\`</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">i</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ol start="3"><li>container</li></ol><p>自定义内容, 如果只需要单独修改标题 <code>title</code> 或副标题 <code>content</code> , 可使用下面的 <code>template</code> 进行自定义</p><ul><li>title: 标题</li><li>contnet: 副标题</li></ul><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">container</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;collapse-title&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;{{ x.title }}&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;collapse-info&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;{{ x.content }}&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><ol start="4"><li>Extension</li></ol><p>扩展操作内容</p><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">extension</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Operation&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ol start="5"><li>title</li></ol><p>自定义标题</p><ul><li>title: 标题</li></ul><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;collapse-title&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;{{ x.title }}&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ol start="6"><li>content</li></ol><p>自定义副标题</p><ul><li>content: 副标题</li></ul><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;collapse-info&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;{{ x.content }}&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ol start="7"><li>expand-icon</li></ol><p>自定义展开状态图标</p><ul><li>value: 当前是否展开</li><li>disabledCollaspe: 是否禁用展开</li></ul><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">expand-icon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">i</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">        v-show</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x.value</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">        class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ms-Icon ms-Icon--ChevronUpMed&quot;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">i</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">i</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">        v-show</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">!</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x.value </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&amp;&amp;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> !</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x.disabledCollapse</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">        class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ms-Icon ms-Icon--ChevronDownMed&quot;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">i</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">i</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">        v-show</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">!</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x.value </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&amp;&amp;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> x.disabledCollapse</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">        class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ms-Icon ms-Icon--ChevronRightMed&quot;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">i</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div>`,34);function _(B,q,A,D,f,T){const a=e("fv-Collapse"),l=e("ClientOnly"),h=e("fv-button");return d(),r("div",null,[o,g,s("div",null,[i(l,null,{default:t(()=>[i(a,null,{default:t(()=>[c]),_:1})]),_:1})]),y,s("div",null,[i(l,null,{default:t(()=>[i(a,{disabledCollapse:!0},{default:t(()=>[u]),_:1})]),_:1})]),b,s("div",null,[i(l,null,{default:t(()=>[i(a,{disabledCollapse:!0},{extension:t(()=>[i(h,null,{default:t(()=>[p("Operation")]),_:1})]),_:1})]),_:1})]),v,s("div",null,[i(l,null,{default:t(()=>[i(a,{background:"rgba(0, 98, 158, 1)"},{default:t(()=>[m]),_:1})]),_:1})]),F,s("div",null,[i(l,null,{default:t(()=>[i(a,{theme:"dark"},{default:t(()=>[C]),_:1})]),_:1})]),x])}const w=k(E,[["render",_]]);export{S as __pageData,w as default};
diff --git a/assets/guide_components_collapse_index.md.N9Iu5-2v.lean.js b/assets/guide_components_collapse_index.md.N9Iu5-2v.lean.js
new file mode 100644
index 0000000..fe634a2
--- /dev/null
+++ b/assets/guide_components_collapse_index.md.N9Iu5-2v.lean.js
@@ -0,0 +1 @@
+import{_ as k,q as r,H as s,Y as i,z as t,u as p,aq as n,S as e,p as d}from"./chunks/framework.DvIFzl91.js";const S=JSON.parse('{"title":"Collapse","description":"","frontmatter":{"page":true,"title":"Collapse"},"headers":[],"relativePath":"guide/components/collapse/index.md","filePath":"guide/components/collapse/index.md"}'),E={name:"guide/components/collapse/index.md"},o=s("h3",{id:"collapse-demo",tabindex:"-1"},[p("Collapse-DEMO "),s("a",{class:"header-anchor",href:"#collapse-demo","aria-label":'Permalink to "Collapse-DEMO"'},"​")],-1),g=s("hr",null,null,-1),c=s("div",{style:{position:"relative",height:"500px",background:"black",transition:"all 0.3s"}},null,-1),y=n("",2),u=s("div",{style:{position:"relative",height:"500px",background:"black",transition:"all 0.3s"}},null,-1),b=n("",2),v=n("",3),m=s("div",{style:{position:"relative",height:"500px",background:"black",transition:"all 0.3s"}},null,-1),F=n("",3),C=s("div",{style:{position:"relative",height:"500px",background:"whitesmoke",transition:"all 0.3s"}},null,-1),x=n("",34);function _(B,q,A,D,f,T){const a=e("fv-Collapse"),l=e("ClientOnly"),h=e("fv-button");return d(),r("div",null,[o,g,s("div",null,[i(l,null,{default:t(()=>[i(a,null,{default:t(()=>[c]),_:1})]),_:1})]),y,s("div",null,[i(l,null,{default:t(()=>[i(a,{disabledCollapse:!0},{default:t(()=>[u]),_:1})]),_:1})]),b,s("div",null,[i(l,null,{default:t(()=>[i(a,{disabledCollapse:!0},{extension:t(()=>[i(h,null,{default:t(()=>[p("Operation")]),_:1})]),_:1})]),_:1})]),v,s("div",null,[i(l,null,{default:t(()=>[i(a,{background:"rgba(0, 98, 158, 1)"},{default:t(()=>[m]),_:1})]),_:1})]),F,s("div",null,[i(l,null,{default:t(()=>[i(a,{theme:"dark"},{default:t(()=>[C]),_:1})]),_:1})]),x])}const w=k(E,[["render",_]]);export{S as __pageData,w as default};
diff --git a/assets/guide_components_color-picker_emits.md.00983cd0.js b/assets/guide_components_color-picker_emits.md.00983cd0.js
deleted file mode 100644
index 737c3cc..0000000
--- a/assets/guide_components_color-picker_emits.md.00983cd0.js
+++ /dev/null
@@ -1 +0,0 @@
-import{_ as t,c as e,o as a,a as r}from"./app.d60fa8c3.js";const g=JSON.parse('{"title":"Emits","description":"","frontmatter":{},"headers":[{"level":2,"title":"Emits","slug":"emits"}],"relativePath":"guide/components/color-picker/emits.md"}'),s={name:"guide/components/color-picker/emits.md"},n=r('<h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">update:model-value</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">v-model</td></tr></tbody></table>',3),i=[n];function o(l,c,d,_,m,h){return a(),e("div",null,i)}var u=t(s,[["render",o]]);export{g as __pageData,u as default};
diff --git a/assets/guide_components_color-picker_emits.md.00983cd0.lean.js b/assets/guide_components_color-picker_emits.md.00983cd0.lean.js
deleted file mode 100644
index 9d32af7..0000000
--- a/assets/guide_components_color-picker_emits.md.00983cd0.lean.js
+++ /dev/null
@@ -1 +0,0 @@
-import{_ as t,c as e,o as a,a as r}from"./app.d60fa8c3.js";const g=JSON.parse('{"title":"Emits","description":"","frontmatter":{},"headers":[{"level":2,"title":"Emits","slug":"emits"}],"relativePath":"guide/components/color-picker/emits.md"}'),s={name:"guide/components/color-picker/emits.md"},n=r("",3),i=[n];function o(l,c,d,_,m,h){return a(),e("div",null,i)}var u=t(s,[["render",o]]);export{g as __pageData,u as default};
diff --git a/assets/guide_components_color-picker_emits.md.BHDXVtBQ.js b/assets/guide_components_color-picker_emits.md.BHDXVtBQ.js
new file mode 100644
index 0000000..71ad64f
--- /dev/null
+++ b/assets/guide_components_color-picker_emits.md.BHDXVtBQ.js
@@ -0,0 +1 @@
+import{_ as t,q as e,p as a,aq as r}from"./chunks/framework.DvIFzl91.js";const u=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/components/color-picker/emits.md","filePath":"guide/components/color-picker/emits.md"}'),n={name:"guide/components/color-picker/emits.md"},o=r('<h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-label="Permalink to &quot;Emits&quot;">​</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">update:model-value</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">v-model</td></tr></tbody></table>',3),s=[o];function i(c,l,d,m,_,h){return a(),e("div",null,s)}const g=t(n,[["render",i]]);export{u as __pageData,g as default};
diff --git a/assets/guide_components_color-picker_emits.md.BHDXVtBQ.lean.js b/assets/guide_components_color-picker_emits.md.BHDXVtBQ.lean.js
new file mode 100644
index 0000000..f8c1d4e
--- /dev/null
+++ b/assets/guide_components_color-picker_emits.md.BHDXVtBQ.lean.js
@@ -0,0 +1 @@
+import{_ as t,q as e,p as a,aq as r}from"./chunks/framework.DvIFzl91.js";const u=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/components/color-picker/emits.md","filePath":"guide/components/color-picker/emits.md"}'),n={name:"guide/components/color-picker/emits.md"},o=r("",3),s=[o];function i(c,l,d,m,_,h){return a(),e("div",null,s)}const g=t(n,[["render",i]]);export{u as __pageData,g as default};
diff --git a/assets/guide_components_color-picker_index.md.DCc4ixcU.js b/assets/guide_components_color-picker_index.md.DCc4ixcU.js
new file mode 100644
index 0000000..5bb54c3
--- /dev/null
+++ b/assets/guide_components_color-picker_index.md.DCc4ixcU.js
@@ -0,0 +1,3 @@
+import{u as m}from"./chunks/index.CvzShnhD.js";import{k,r as c,q as y,H as d,u as l,v as x,Y as s,z as h,I as r,aq as u,S as p,p as b}from"./chunks/framework.DvIFzl91.js";import"./chunks/theme.CgqFBnN_.js";const E=u('<h1 id="colorpicker" tabindex="-1">ColorPicker <a class="header-anchor" href="#colorpicker" aria-label="Permalink to &quot;ColorPicker&quot;">​</a></h1><h2 id="quick-start" tabindex="-1">Quick Start <a class="header-anchor" href="#quick-start" aria-label="Permalink to &quot;Quick Start&quot;">​</a></h2><h3 id="default" tabindex="-1">Default <a class="header-anchor" href="#default" aria-label="Permalink to &quot;Default&quot;">​</a></h3><hr>',4),v=d("br",null,null,-1),f=d("hr",null,null,-1),_=u(`<div class="language-template vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">template</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-color-picker</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">theme</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-color-picker</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-label="Permalink to &quot;Properties&quot;">​</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">disabled</td></tr><tr><td style="text-align:center;">lang</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">i18n</td></tr><tr><td style="text-align:center;">model-value</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">v-model</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">theme</td></tr><tr><td style="text-align:center;">type</td><td style="text-align:center;">[&#39;box&#39;, &#39;ring&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;box&#39;</td><td style="text-align:center;">color-picker type</td></tr></tbody></table><h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-label="Permalink to &quot;Emits&quot;">​</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">update:model-value</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">v-model</td></tr></tbody></table>`,7),S=JSON.parse('{"title":"ColorPicker","description":"","frontmatter":{"page":true,"title":"ColorPicker"},"headers":[],"relativePath":"guide/components/color-picker/index.md","filePath":"guide/components/color-picker/index.md"}'),q={name:"guide/components/color-picker/index.md"},B=k({...q,setup(F){const{theme:n}=m(),e=c("ring"),i=c("#FFFFFFFF");return(P,t)=>{const o=p("fv-radio"),g=p("fv-color-picker");return b(),y("div",null,[E,d("div",null,[l(" color: "+x(i.value)+" ",1),v,l(" box type: "),s(o,{theme:r(n),modelValue:e.value,"onUpdate:modelValue":t[0]||(t[0]=a=>e.value=a),label:"ring"},{default:h(()=>[l("Ring")]),_:1},8,["theme","modelValue"]),s(o,{theme:r(n),modelValue:e.value,"onUpdate:modelValue":t[1]||(t[1]=a=>e.value=a),label:"box"},{default:h(()=>[l("Box")]),_:1},8,["theme","modelValue"])]),f,s(g,{modelValue:i.value,"onUpdate:modelValue":t[2]||(t[2]=a=>i.value=a),theme:r(n),type:e.value},null,8,["modelValue","theme","type"]),_])}}});export{S as __pageData,B as default};
diff --git a/assets/guide_components_color-picker_index.md.DCc4ixcU.lean.js b/assets/guide_components_color-picker_index.md.DCc4ixcU.lean.js
new file mode 100644
index 0000000..5bb54c3
--- /dev/null
+++ b/assets/guide_components_color-picker_index.md.DCc4ixcU.lean.js
@@ -0,0 +1,3 @@
+import{u as m}from"./chunks/index.CvzShnhD.js";import{k,r as c,q as y,H as d,u as l,v as x,Y as s,z as h,I as r,aq as u,S as p,p as b}from"./chunks/framework.DvIFzl91.js";import"./chunks/theme.CgqFBnN_.js";const E=u('<h1 id="colorpicker" tabindex="-1">ColorPicker <a class="header-anchor" href="#colorpicker" aria-label="Permalink to &quot;ColorPicker&quot;">​</a></h1><h2 id="quick-start" tabindex="-1">Quick Start <a class="header-anchor" href="#quick-start" aria-label="Permalink to &quot;Quick Start&quot;">​</a></h2><h3 id="default" tabindex="-1">Default <a class="header-anchor" href="#default" aria-label="Permalink to &quot;Default&quot;">​</a></h3><hr>',4),v=d("br",null,null,-1),f=d("hr",null,null,-1),_=u(`<div class="language-template vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">template</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-color-picker</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">theme</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-color-picker</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-label="Permalink to &quot;Properties&quot;">​</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">disabled</td></tr><tr><td style="text-align:center;">lang</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">i18n</td></tr><tr><td style="text-align:center;">model-value</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">v-model</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">theme</td></tr><tr><td style="text-align:center;">type</td><td style="text-align:center;">[&#39;box&#39;, &#39;ring&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;box&#39;</td><td style="text-align:center;">color-picker type</td></tr></tbody></table><h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-label="Permalink to &quot;Emits&quot;">​</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">update:model-value</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">v-model</td></tr></tbody></table>`,7),S=JSON.parse('{"title":"ColorPicker","description":"","frontmatter":{"page":true,"title":"ColorPicker"},"headers":[],"relativePath":"guide/components/color-picker/index.md","filePath":"guide/components/color-picker/index.md"}'),q={name:"guide/components/color-picker/index.md"},B=k({...q,setup(F){const{theme:n}=m(),e=c("ring"),i=c("#FFFFFFFF");return(P,t)=>{const o=p("fv-radio"),g=p("fv-color-picker");return b(),y("div",null,[E,d("div",null,[l(" color: "+x(i.value)+" ",1),v,l(" box type: "),s(o,{theme:r(n),modelValue:e.value,"onUpdate:modelValue":t[0]||(t[0]=a=>e.value=a),label:"ring"},{default:h(()=>[l("Ring")]),_:1},8,["theme","modelValue"]),s(o,{theme:r(n),modelValue:e.value,"onUpdate:modelValue":t[1]||(t[1]=a=>e.value=a),label:"box"},{default:h(()=>[l("Box")]),_:1},8,["theme","modelValue"])]),f,s(g,{modelValue:i.value,"onUpdate:modelValue":t[2]||(t[2]=a=>i.value=a),theme:r(n),type:e.value},null,8,["modelValue","theme","type"]),_])}}});export{S as __pageData,B as default};
diff --git a/assets/guide_components_color-picker_index.md.b2d62612.js b/assets/guide_components_color-picker_index.md.b2d62612.js
deleted file mode 100644
index ffd9e34..0000000
--- a/assets/guide_components_color-picker_index.md.b2d62612.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import{u as g}from"./chunks/index.9dba9c16.js";import{d as m,f as c,c as x,k as d,e as a,t as b,b as r,w as p,u as o,a as h,r as u,o as v}from"./app.d60fa8c3.js";const f=h('<h1 id="colorpicker" tabindex="-1">ColorPicker <a class="header-anchor" href="#colorpicker" aria-hidden="true">#</a></h1><h2 id="quick-start" tabindex="-1">Quick Start <a class="header-anchor" href="#quick-start" aria-hidden="true">#</a></h2><h3 id="default" tabindex="-1">Default <a class="header-anchor" href="#default" aria-hidden="true">#</a></h3><hr>',4),_=d("br",null,null,-1),F=a(" box type: "),D=a("Ring"),k=a("Box"),C=d("hr",null,null,-1),V=h(`<div class="language-vue-html"><span class="copy"></span><pre><code><span class="line"></span>
-<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-color-picker</span><span style="color:#89DDFF;"> :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-color-picker</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">disabled</td></tr><tr><td style="text-align:center;">lang</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">i18n</td></tr><tr><td style="text-align:center;">model-value</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">v-model</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">theme</td></tr><tr><td style="text-align:center;">type</td><td style="text-align:center;">[&#39;box&#39;, &#39;ring&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;box&#39;</td><td style="text-align:center;">color-picker type</td></tr></tbody></table><h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">update:model-value</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">v-model</td></tr></tbody></table>`,7),E=JSON.parse('{"title":"ColorPicker","description":"","frontmatter":{"page":true,"title":"ColorPicker"},"headers":[{"level":2,"title":"Quick Start","slug":"quick-start"},{"level":3,"title":"Default","slug":"default"},{"level":2,"title":"Properties","slug":"properties"},{"level":2,"title":"Emits","slug":"emits"}],"relativePath":"guide/components/color-picker/index.md"}'),N={name:"guide/components/color-picker/index.md"},B=m({...N,setup(A){const{theme:n}=g(),e=c("ring"),s=c("#FFFFFFFF");return(S,t)=>{const i=u("fv-radio"),y=u("fv-color-picker");return v(),x("div",null,[f,d("div",null,[a(" color: "+b(s.value)+" ",1),_,F,r(i,{theme:o(n),modelValue:e.value,"onUpdate:modelValue":t[0]||(t[0]=l=>e.value=l),label:"ring"},{default:p(()=>[D]),_:1},8,["theme","modelValue"]),r(i,{theme:o(n),modelValue:e.value,"onUpdate:modelValue":t[1]||(t[1]=l=>e.value=l),label:"box"},{default:p(()=>[k]),_:1},8,["theme","modelValue"])]),C,r(y,{modelValue:s.value,"onUpdate:modelValue":t[2]||(t[2]=l=>s.value=l),theme:o(n),type:e.value},null,8,["modelValue","theme","type"]),V])}}});export{E as __pageData,B as default};
diff --git a/assets/guide_components_color-picker_index.md.b2d62612.lean.js b/assets/guide_components_color-picker_index.md.b2d62612.lean.js
deleted file mode 100644
index ffd9e34..0000000
--- a/assets/guide_components_color-picker_index.md.b2d62612.lean.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import{u as g}from"./chunks/index.9dba9c16.js";import{d as m,f as c,c as x,k as d,e as a,t as b,b as r,w as p,u as o,a as h,r as u,o as v}from"./app.d60fa8c3.js";const f=h('<h1 id="colorpicker" tabindex="-1">ColorPicker <a class="header-anchor" href="#colorpicker" aria-hidden="true">#</a></h1><h2 id="quick-start" tabindex="-1">Quick Start <a class="header-anchor" href="#quick-start" aria-hidden="true">#</a></h2><h3 id="default" tabindex="-1">Default <a class="header-anchor" href="#default" aria-hidden="true">#</a></h3><hr>',4),_=d("br",null,null,-1),F=a(" box type: "),D=a("Ring"),k=a("Box"),C=d("hr",null,null,-1),V=h(`<div class="language-vue-html"><span class="copy"></span><pre><code><span class="line"></span>
-<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-color-picker</span><span style="color:#89DDFF;"> :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-color-picker</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">disabled</td></tr><tr><td style="text-align:center;">lang</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">i18n</td></tr><tr><td style="text-align:center;">model-value</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">v-model</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">theme</td></tr><tr><td style="text-align:center;">type</td><td style="text-align:center;">[&#39;box&#39;, &#39;ring&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;box&#39;</td><td style="text-align:center;">color-picker type</td></tr></tbody></table><h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">update:model-value</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">v-model</td></tr></tbody></table>`,7),E=JSON.parse('{"title":"ColorPicker","description":"","frontmatter":{"page":true,"title":"ColorPicker"},"headers":[{"level":2,"title":"Quick Start","slug":"quick-start"},{"level":3,"title":"Default","slug":"default"},{"level":2,"title":"Properties","slug":"properties"},{"level":2,"title":"Emits","slug":"emits"}],"relativePath":"guide/components/color-picker/index.md"}'),N={name:"guide/components/color-picker/index.md"},B=m({...N,setup(A){const{theme:n}=g(),e=c("ring"),s=c("#FFFFFFFF");return(S,t)=>{const i=u("fv-radio"),y=u("fv-color-picker");return v(),x("div",null,[f,d("div",null,[a(" color: "+b(s.value)+" ",1),_,F,r(i,{theme:o(n),modelValue:e.value,"onUpdate:modelValue":t[0]||(t[0]=l=>e.value=l),label:"ring"},{default:p(()=>[D]),_:1},8,["theme","modelValue"]),r(i,{theme:o(n),modelValue:e.value,"onUpdate:modelValue":t[1]||(t[1]=l=>e.value=l),label:"box"},{default:p(()=>[k]),_:1},8,["theme","modelValue"])]),C,r(y,{modelValue:s.value,"onUpdate:modelValue":t[2]||(t[2]=l=>s.value=l),theme:o(n),type:e.value},null,8,["modelValue","theme","type"]),V])}}});export{E as __pageData,B as default};
diff --git a/assets/guide_components_color-picker_properties.md.5466ba72.js b/assets/guide_components_color-picker_properties.md.5466ba72.js
deleted file mode 100644
index 1274ac9..0000000
--- a/assets/guide_components_color-picker_properties.md.5466ba72.js
+++ /dev/null
@@ -1 +0,0 @@
-import{_ as t,c as e,o as r,a as n}from"./app.d60fa8c3.js";const _=JSON.parse('{"title":"Properties","description":"","frontmatter":{},"headers":[{"level":2,"title":"Properties","slug":"properties"}],"relativePath":"guide/components/color-picker/properties.md"}'),l={name:"guide/components/color-picker/properties.md"},d=n('<h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">disabled</td></tr><tr><td style="text-align:center;">lang</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">i18n</td></tr><tr><td style="text-align:center;">model-value</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">v-model</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">theme</td></tr><tr><td style="text-align:center;">type</td><td style="text-align:center;">[&#39;box&#39;, &#39;ring&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;box&#39;</td><td style="text-align:center;">color-picker type</td></tr></tbody></table>',3),a=[d];function i(s,c,o,g,x,y){return r(),e("div",null,a)}var h=t(l,[["render",i]]);export{_ as __pageData,h as default};
diff --git a/assets/guide_components_color-picker_properties.md.5466ba72.lean.js b/assets/guide_components_color-picker_properties.md.5466ba72.lean.js
deleted file mode 100644
index 03ba37a..0000000
--- a/assets/guide_components_color-picker_properties.md.5466ba72.lean.js
+++ /dev/null
@@ -1 +0,0 @@
-import{_ as t,c as e,o as r,a as n}from"./app.d60fa8c3.js";const _=JSON.parse('{"title":"Properties","description":"","frontmatter":{},"headers":[{"level":2,"title":"Properties","slug":"properties"}],"relativePath":"guide/components/color-picker/properties.md"}'),l={name:"guide/components/color-picker/properties.md"},d=n("",3),a=[d];function i(s,c,o,g,x,y){return r(),e("div",null,a)}var h=t(l,[["render",i]]);export{_ as __pageData,h as default};
diff --git a/assets/guide_components_color-picker_properties.md.wcXK29Vl.js b/assets/guide_components_color-picker_properties.md.wcXK29Vl.js
new file mode 100644
index 0000000..848165b
--- /dev/null
+++ b/assets/guide_components_color-picker_properties.md.wcXK29Vl.js
@@ -0,0 +1 @@
+import{_ as t,q as e,p as r,aq as n}from"./chunks/framework.DvIFzl91.js";const _=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/components/color-picker/properties.md","filePath":"guide/components/color-picker/properties.md"}'),l={name:"guide/components/color-picker/properties.md"},d=n('<h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-label="Permalink to &quot;Properties&quot;">​</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">disabled</td></tr><tr><td style="text-align:center;">lang</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">i18n</td></tr><tr><td style="text-align:center;">model-value</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">v-model</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">theme</td></tr><tr><td style="text-align:center;">type</td><td style="text-align:center;">[&#39;box&#39;, &#39;ring&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;box&#39;</td><td style="text-align:center;">color-picker type</td></tr></tbody></table>',3),a=[d];function i(s,o,c,g,p,x){return r(),e("div",null,a)}const h=t(l,[["render",i]]);export{_ as __pageData,h as default};
diff --git a/assets/guide_components_color-picker_properties.md.wcXK29Vl.lean.js b/assets/guide_components_color-picker_properties.md.wcXK29Vl.lean.js
new file mode 100644
index 0000000..4a5f08d
--- /dev/null
+++ b/assets/guide_components_color-picker_properties.md.wcXK29Vl.lean.js
@@ -0,0 +1 @@
+import{_ as t,q as e,p as r,aq as n}from"./chunks/framework.DvIFzl91.js";const _=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/components/color-picker/properties.md","filePath":"guide/components/color-picker/properties.md"}'),l={name:"guide/components/color-picker/properties.md"},d=n("",3),a=[d];function i(s,o,c,g,p,x){return r(),e("div",null,a)}const h=t(l,[["render",i]]);export{_ as __pageData,h as default};
diff --git a/assets/guide_components_combo-box_emits.md.Dh5R-qEv.js b/assets/guide_components_combo-box_emits.md.Dh5R-qEv.js
new file mode 100644
index 0000000..1c04c88
--- /dev/null
+++ b/assets/guide_components_combo-box_emits.md.Dh5R-qEv.js
@@ -0,0 +1 @@
+import{_ as t,q as e,p as n,aq as r}from"./chunks/framework.DvIFzl91.js";const u=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/components/combo-box/emits.md","filePath":"guide/components/combo-box/emits.md"}'),l={name:"guide/components/combo-box/emits.md"},d=r('<h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-label="Permalink to &quot;Emits&quot;">​</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">blur</td><td style="text-align:center;">evt[FocusEvent]</td><td style="text-align:center;">onblur</td></tr><tr><td style="text-align:center;">change</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">onchange</td></tr><tr><td style="text-align:center;">error-input</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">onerrorinput</td></tr><tr><td style="text-align:center;">focus</td><td style="text-align:center;">evt[FocusEvent]</td><td style="text-align:center;">onfocus</td></tr><tr><td style="text-align:center;">input</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">oninput</td></tr><tr><td style="text-align:center;">keydown</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">onkeydown</td></tr><tr><td style="text-align:center;">keypress</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">onkeypress</td></tr><tr><td style="text-align:center;">keyup</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">onkeyup</td></tr><tr><td style="text-align:center;">update:model-value</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">v-model</td></tr><tr><td style="text-align:center;">warning-input</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">onwarninginput</td></tr></tbody></table>',3),a=[d];function i(s,c,o,g,y,x){return n(),e("div",null,a)}const _=t(l,[["render",i]]);export{u as __pageData,_ as default};
diff --git a/assets/guide_components_combo-box_emits.md.Dh5R-qEv.lean.js b/assets/guide_components_combo-box_emits.md.Dh5R-qEv.lean.js
new file mode 100644
index 0000000..8b51de5
--- /dev/null
+++ b/assets/guide_components_combo-box_emits.md.Dh5R-qEv.lean.js
@@ -0,0 +1 @@
+import{_ as t,q as e,p as n,aq as r}from"./chunks/framework.DvIFzl91.js";const u=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/components/combo-box/emits.md","filePath":"guide/components/combo-box/emits.md"}'),l={name:"guide/components/combo-box/emits.md"},d=r("",3),a=[d];function i(s,c,o,g,y,x){return n(),e("div",null,a)}const _=t(l,[["render",i]]);export{u as __pageData,_ as default};
diff --git a/assets/guide_components_combo-box_emits.md.d5ffda50.js b/assets/guide_components_combo-box_emits.md.d5ffda50.js
deleted file mode 100644
index e04b7d9..0000000
--- a/assets/guide_components_combo-box_emits.md.d5ffda50.js
+++ /dev/null
@@ -1 +0,0 @@
-import{_ as t,c as e,o as n,a as r}from"./app.d60fa8c3.js";const _=JSON.parse('{"title":"Emits","description":"","frontmatter":{},"headers":[{"level":2,"title":"Emits","slug":"emits"}],"relativePath":"guide/components/combo-box/emits.md"}'),l={name:"guide/components/combo-box/emits.md"},d=r('<h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">blur</td><td style="text-align:center;">evt[FocusEvent]</td><td style="text-align:center;">onblur</td></tr><tr><td style="text-align:center;">change</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">onchange</td></tr><tr><td style="text-align:center;">error-input</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">onerrorinput</td></tr><tr><td style="text-align:center;">focus</td><td style="text-align:center;">evt[FocusEvent]</td><td style="text-align:center;">onfocus</td></tr><tr><td style="text-align:center;">input</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">oninput</td></tr><tr><td style="text-align:center;">keydown</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">onkeydown</td></tr><tr><td style="text-align:center;">keypress</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">onkeypress</td></tr><tr><td style="text-align:center;">keyup</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">onkeyup</td></tr><tr><td style="text-align:center;">update:model-value</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">v-model</td></tr><tr><td style="text-align:center;">warning-input</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">onwarninginput</td></tr></tbody></table>',3),a=[d];function i(s,c,o,g,y,x){return n(),e("div",null,a)}var u=t(l,[["render",i]]);export{_ as __pageData,u as default};
diff --git a/assets/guide_components_combo-box_emits.md.d5ffda50.lean.js b/assets/guide_components_combo-box_emits.md.d5ffda50.lean.js
deleted file mode 100644
index f2c829b..0000000
--- a/assets/guide_components_combo-box_emits.md.d5ffda50.lean.js
+++ /dev/null
@@ -1 +0,0 @@
-import{_ as t,c as e,o as n,a as r}from"./app.d60fa8c3.js";const _=JSON.parse('{"title":"Emits","description":"","frontmatter":{},"headers":[{"level":2,"title":"Emits","slug":"emits"}],"relativePath":"guide/components/combo-box/emits.md"}'),l={name:"guide/components/combo-box/emits.md"},d=r("",3),a=[d];function i(s,c,o,g,y,x){return n(),e("div",null,a)}var u=t(l,[["render",i]]);export{_ as __pageData,u as default};
diff --git a/assets/guide_components_combo-box_index.md.1c4364f5.js b/assets/guide_components_combo-box_index.md.1c4364f5.js
deleted file mode 100644
index 1baa55a..0000000
--- a/assets/guide_components_combo-box_index.md.1c4364f5.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import{u as d}from"./chunks/index.9dba9c16.js";import{d as i,f as c,c as y,b as o,u as p,a as s,r as x,o as g}from"./app.d60fa8c3.js";const b=s('<h1 id="combobox" tabindex="-1">ComboBox <a class="header-anchor" href="#combobox" aria-hidden="true">#</a></h1><h2 id="quick-start" tabindex="-1">Quick Start <a class="header-anchor" href="#quick-start" aria-hidden="true">#</a></h2><h3 id="default" tabindex="-1">Default <a class="header-anchor" href="#default" aria-hidden="true">#</a></h3><hr>',4),D=s(`<div class="language-vue-html"><span class="copy"></span><div class="highlight-lines"><br><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><br><br><br></div><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-combo-box</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">v-model</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">options</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">options</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">placeholder</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">Input your company</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">autofocus</span></span>
-<span class="line"><span style="color:#89DDFF;">    &gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-combo-box</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h3 id="editable" tabindex="-1">Editable <a class="header-anchor" href="#editable" aria-hidden="true">#</a></h3><hr>`,3),u=s(`<div class="language-vue-html"><span class="copy"></span><div class="highlight-lines"><br><div class="highlighted">\xA0</div><br><div class="highlighted">\xA0</div><br><br><br><br><br></div><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-combo-box</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">style</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">width:100%;</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">options</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">options</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">editable</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">placeholder</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">Input your company</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">    &gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-combo-box</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h3 id="disabled" tabindex="-1">Disabled <a class="header-anchor" href="#disabled" aria-hidden="true">#</a></h3><hr>`,3),h=s(`<div class="language-vue-html"><span class="copy"></span><div class="highlight-lines"><br><div class="highlighted">\xA0</div><br><br><br><br><br><br></div><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-combo-box</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">disabled</span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">options</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">options</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">placeholder</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">Input your company</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">    &gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-combo-box</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">autofocus</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">editable</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">editable</td></tr><tr><td style="text-align:center;">error-border-color</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">font-size</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">14</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">hover-border-color</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">input-rules</td><td style="text-align:center;">[object,string,function]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">lang</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">i18n</td></tr><tr><td style="text-align:center;">maxlength</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">minlength</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">model-value</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">v-model</td></tr><tr><td style="text-align:center;">options</td><td style="text-align:center;">[array]</td><td style="text-align:center;">No</td><td style="text-align:center;">() =&gt; []</td><td style="text-align:center;">select options</td></tr><tr><td style="text-align:center;">pattern</td><td style="text-align:center;">[object,string,function]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">placeholder</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">required</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">[&#39;light&#39;,&#39;dark&#39;,&#39;global&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">theme</td></tr><tr><td style="text-align:center;">title</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;input&#39;</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">warning-border-color</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr></tbody></table><h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">blur</td><td style="text-align:center;">evt[FocusEvent]</td><td style="text-align:center;">onblur</td></tr><tr><td style="text-align:center;">change</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">onchange</td></tr><tr><td style="text-align:center;">error-input</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">onerrorinput</td></tr><tr><td style="text-align:center;">focus</td><td style="text-align:center;">evt[FocusEvent]</td><td style="text-align:center;">onfocus</td></tr><tr><td style="text-align:center;">input</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">oninput</td></tr><tr><td style="text-align:center;">keydown</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">onkeydown</td></tr><tr><td style="text-align:center;">keypress</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">onkeypress</td></tr><tr><td style="text-align:center;">keyup</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">onkeyup</td></tr><tr><td style="text-align:center;">update:model-value</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">v-model</td></tr><tr><td style="text-align:center;">warning-input</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">onwarninginput</td></tr></tbody></table>`,7),C=JSON.parse('{"title":"ComboBox","description":"","frontmatter":{"page":true,"title":"ComboBox"},"headers":[{"level":2,"title":"Quick Start","slug":"quick-start"},{"level":3,"title":"Default","slug":"default"},{"level":3,"title":"Editable","slug":"editable"},{"level":3,"title":"Disabled","slug":"disabled"},{"level":2,"title":"Properties","slug":"properties"},{"level":2,"title":"Emits","slug":"emits"}],"relativePath":"guide/components/combo-box/index.md"}'),F={name:"guide/components/combo-box/index.md"},q=i({...F,setup(m){const{theme:n}=d(),t=c(),l=[{key:"Microsoft"},{key:"Apple"},{key:"Google"},{key:"Facebook"},{key:"Github"}];return(v,e)=>{const a=x("fv-combo-box");return g(),y("div",null,[b,o(a,{modelValue:t.value,"onUpdate:modelValue":e[0]||(e[0]=r=>t.value=r),options:l,theme:p(n),placeholder:"Input your company",autofocus:""},null,8,["modelValue","theme"]),D,o(a,{style:{width:"100%"},options:l,editable:"",theme:p(n),placeholder:"Input your company"},null,8,["theme"]),u,o(a,{modelValue:t.value,"onUpdate:modelValue":e[1]||(e[1]=r=>t.value=r),options:l,disabled:"",theme:p(n),placeholder:"Input your company"},null,8,["modelValue","theme"]),h])}}});export{C as __pageData,q as default};
diff --git a/assets/guide_components_combo-box_index.md.1c4364f5.lean.js b/assets/guide_components_combo-box_index.md.1c4364f5.lean.js
deleted file mode 100644
index 1baa55a..0000000
--- a/assets/guide_components_combo-box_index.md.1c4364f5.lean.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import{u as d}from"./chunks/index.9dba9c16.js";import{d as i,f as c,c as y,b as o,u as p,a as s,r as x,o as g}from"./app.d60fa8c3.js";const b=s('<h1 id="combobox" tabindex="-1">ComboBox <a class="header-anchor" href="#combobox" aria-hidden="true">#</a></h1><h2 id="quick-start" tabindex="-1">Quick Start <a class="header-anchor" href="#quick-start" aria-hidden="true">#</a></h2><h3 id="default" tabindex="-1">Default <a class="header-anchor" href="#default" aria-hidden="true">#</a></h3><hr>',4),D=s(`<div class="language-vue-html"><span class="copy"></span><div class="highlight-lines"><br><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><br><br><br></div><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-combo-box</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">v-model</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">options</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">options</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">placeholder</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">Input your company</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">autofocus</span></span>
-<span class="line"><span style="color:#89DDFF;">    &gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-combo-box</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h3 id="editable" tabindex="-1">Editable <a class="header-anchor" href="#editable" aria-hidden="true">#</a></h3><hr>`,3),u=s(`<div class="language-vue-html"><span class="copy"></span><div class="highlight-lines"><br><div class="highlighted">\xA0</div><br><div class="highlighted">\xA0</div><br><br><br><br><br></div><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-combo-box</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">style</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">width:100%;</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">options</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">options</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">editable</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">placeholder</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">Input your company</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">    &gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-combo-box</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h3 id="disabled" tabindex="-1">Disabled <a class="header-anchor" href="#disabled" aria-hidden="true">#</a></h3><hr>`,3),h=s(`<div class="language-vue-html"><span class="copy"></span><div class="highlight-lines"><br><div class="highlighted">\xA0</div><br><br><br><br><br><br></div><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-combo-box</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">disabled</span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">options</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">options</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">placeholder</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">Input your company</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">    &gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-combo-box</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">autofocus</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">editable</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">editable</td></tr><tr><td style="text-align:center;">error-border-color</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">font-size</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">14</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">hover-border-color</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">input-rules</td><td style="text-align:center;">[object,string,function]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">lang</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">i18n</td></tr><tr><td style="text-align:center;">maxlength</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">minlength</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">model-value</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">v-model</td></tr><tr><td style="text-align:center;">options</td><td style="text-align:center;">[array]</td><td style="text-align:center;">No</td><td style="text-align:center;">() =&gt; []</td><td style="text-align:center;">select options</td></tr><tr><td style="text-align:center;">pattern</td><td style="text-align:center;">[object,string,function]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">placeholder</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">required</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">[&#39;light&#39;,&#39;dark&#39;,&#39;global&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">theme</td></tr><tr><td style="text-align:center;">title</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;input&#39;</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">warning-border-color</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr></tbody></table><h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">blur</td><td style="text-align:center;">evt[FocusEvent]</td><td style="text-align:center;">onblur</td></tr><tr><td style="text-align:center;">change</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">onchange</td></tr><tr><td style="text-align:center;">error-input</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">onerrorinput</td></tr><tr><td style="text-align:center;">focus</td><td style="text-align:center;">evt[FocusEvent]</td><td style="text-align:center;">onfocus</td></tr><tr><td style="text-align:center;">input</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">oninput</td></tr><tr><td style="text-align:center;">keydown</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">onkeydown</td></tr><tr><td style="text-align:center;">keypress</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">onkeypress</td></tr><tr><td style="text-align:center;">keyup</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">onkeyup</td></tr><tr><td style="text-align:center;">update:model-value</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">v-model</td></tr><tr><td style="text-align:center;">warning-input</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">onwarninginput</td></tr></tbody></table>`,7),C=JSON.parse('{"title":"ComboBox","description":"","frontmatter":{"page":true,"title":"ComboBox"},"headers":[{"level":2,"title":"Quick Start","slug":"quick-start"},{"level":3,"title":"Default","slug":"default"},{"level":3,"title":"Editable","slug":"editable"},{"level":3,"title":"Disabled","slug":"disabled"},{"level":2,"title":"Properties","slug":"properties"},{"level":2,"title":"Emits","slug":"emits"}],"relativePath":"guide/components/combo-box/index.md"}'),F={name:"guide/components/combo-box/index.md"},q=i({...F,setup(m){const{theme:n}=d(),t=c(),l=[{key:"Microsoft"},{key:"Apple"},{key:"Google"},{key:"Facebook"},{key:"Github"}];return(v,e)=>{const a=x("fv-combo-box");return g(),y("div",null,[b,o(a,{modelValue:t.value,"onUpdate:modelValue":e[0]||(e[0]=r=>t.value=r),options:l,theme:p(n),placeholder:"Input your company",autofocus:""},null,8,["modelValue","theme"]),D,o(a,{style:{width:"100%"},options:l,editable:"",theme:p(n),placeholder:"Input your company"},null,8,["theme"]),u,o(a,{modelValue:t.value,"onUpdate:modelValue":e[1]||(e[1]=r=>t.value=r),options:l,disabled:"",theme:p(n),placeholder:"Input your company"},null,8,["modelValue","theme"]),h])}}});export{C as __pageData,q as default};
diff --git a/assets/guide_components_combo-box_index.md.DTyu3eNd.js b/assets/guide_components_combo-box_index.md.DTyu3eNd.js
new file mode 100644
index 0000000..d552519
--- /dev/null
+++ b/assets/guide_components_combo-box_index.md.DTyu3eNd.js
@@ -0,0 +1,21 @@
+import{u as h}from"./chunks/index.CvzShnhD.js";import{k as p,r as o,q as k,Y as r,I as d,aq as s,S as g,p as c}from"./chunks/framework.DvIFzl91.js";import"./chunks/theme.CgqFBnN_.js";const y=s('<h1 id="combobox" tabindex="-1">ComboBox <a class="header-anchor" href="#combobox" aria-label="Permalink to &quot;ComboBox&quot;">​</a></h1><h2 id="quick-start" tabindex="-1">Quick Start <a class="header-anchor" href="#quick-start" aria-label="Permalink to &quot;Quick Start&quot;">​</a></h2><h3 id="default" tabindex="-1">Default <a class="header-anchor" href="#default" aria-label="Permalink to &quot;Default&quot;">​</a></h3><hr>',4),E=s(`<div class="language-template vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">template</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-combo-box</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
+<span class="line highlighted"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">        v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">value</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span></span>
+<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">options</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">options</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
+<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">theme</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
+<span class="line highlighted"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">        placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Input your company&quot;</span></span>
+<span class="line highlighted"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">        autofocus</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-combo-box</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h3 id="editable" tabindex="-1">Editable <a class="header-anchor" href="#editable" aria-label="Permalink to &quot;Editable&quot;">​</a></h3><hr>`,3),x=s(`<div class="language-template vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">template</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-combo-box</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
+<span class="line highlighted"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">        style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;width:100%;&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">options</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">options</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
+<span class="line highlighted"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">        editable</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">theme</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">        placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Input your company&quot;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-combo-box</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h3 id="disabled" tabindex="-1">Disabled <a class="header-anchor" href="#disabled" aria-label="Permalink to &quot;Disabled&quot;">​</a></h3><hr>`,3),b=s(`<div class="language-template vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">template</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-combo-box</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
+<span class="line highlighted"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">        disabled</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">options</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">options</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">theme</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">        placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Input your company&quot;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-combo-box</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-label="Permalink to &quot;Properties&quot;">​</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">autofocus</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">editable</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">editable</td></tr><tr><td style="text-align:center;">error-border-color</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">font-size</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">14</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">hover-border-color</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">input-rules</td><td style="text-align:center;">[object,string,function]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">lang</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">i18n</td></tr><tr><td style="text-align:center;">maxlength</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">minlength</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">model-value</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">v-model</td></tr><tr><td style="text-align:center;">options</td><td style="text-align:center;">[array]</td><td style="text-align:center;">No</td><td style="text-align:center;">() =&gt; []</td><td style="text-align:center;">select options</td></tr><tr><td style="text-align:center;">pattern</td><td style="text-align:center;">[object,string,function]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">placeholder</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">required</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">[&#39;light&#39;,&#39;dark&#39;,&#39;global&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">theme</td></tr><tr><td style="text-align:center;">title</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;input&#39;</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">warning-border-color</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr></tbody></table><h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-label="Permalink to &quot;Emits&quot;">​</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">blur</td><td style="text-align:center;">evt[FocusEvent]</td><td style="text-align:center;">onblur</td></tr><tr><td style="text-align:center;">change</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">onchange</td></tr><tr><td style="text-align:center;">error-input</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">onerrorinput</td></tr><tr><td style="text-align:center;">focus</td><td style="text-align:center;">evt[FocusEvent]</td><td style="text-align:center;">onfocus</td></tr><tr><td style="text-align:center;">input</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">oninput</td></tr><tr><td style="text-align:center;">keydown</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">onkeydown</td></tr><tr><td style="text-align:center;">keypress</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">onkeypress</td></tr><tr><td style="text-align:center;">keyup</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">onkeyup</td></tr><tr><td style="text-align:center;">update:model-value</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">v-model</td></tr><tr><td style="text-align:center;">warning-input</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">onwarninginput</td></tr></tbody></table>`,7),q=JSON.parse('{"title":"ComboBox","description":"","frontmatter":{"page":true,"title":"ComboBox"},"headers":[],"relativePath":"guide/components/combo-box/index.md","filePath":"guide/components/combo-box/index.md"}'),u={name:"guide/components/combo-box/index.md"},B=p({...u,setup(m){const{theme:a}=h(),t=o(),i=[{key:"Microsoft"},{key:"Apple"},{key:"Google"},{key:"Facebook"},{key:"Github"}];return(F,e)=>{const n=g("fv-combo-box");return c(),k("div",null,[y,r(n,{modelValue:t.value,"onUpdate:modelValue":e[0]||(e[0]=l=>t.value=l),options:i,theme:d(a),placeholder:"Input your company",autofocus:""},null,8,["modelValue","theme"]),E,r(n,{style:{width:"100%"},options:i,editable:"",theme:d(a),placeholder:"Input your company"},null,8,["theme"]),x,r(n,{modelValue:t.value,"onUpdate:modelValue":e[1]||(e[1]=l=>t.value=l),options:i,disabled:"",theme:d(a),placeholder:"Input your company"},null,8,["modelValue","theme"]),b])}}});export{q as __pageData,B as default};
diff --git a/assets/guide_components_combo-box_index.md.DTyu3eNd.lean.js b/assets/guide_components_combo-box_index.md.DTyu3eNd.lean.js
new file mode 100644
index 0000000..d552519
--- /dev/null
+++ b/assets/guide_components_combo-box_index.md.DTyu3eNd.lean.js
@@ -0,0 +1,21 @@
+import{u as h}from"./chunks/index.CvzShnhD.js";import{k as p,r as o,q as k,Y as r,I as d,aq as s,S as g,p as c}from"./chunks/framework.DvIFzl91.js";import"./chunks/theme.CgqFBnN_.js";const y=s('<h1 id="combobox" tabindex="-1">ComboBox <a class="header-anchor" href="#combobox" aria-label="Permalink to &quot;ComboBox&quot;">​</a></h1><h2 id="quick-start" tabindex="-1">Quick Start <a class="header-anchor" href="#quick-start" aria-label="Permalink to &quot;Quick Start&quot;">​</a></h2><h3 id="default" tabindex="-1">Default <a class="header-anchor" href="#default" aria-label="Permalink to &quot;Default&quot;">​</a></h3><hr>',4),E=s(`<div class="language-template vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">template</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-combo-box</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
+<span class="line highlighted"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">        v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">value</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span></span>
+<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">options</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">options</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
+<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">theme</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
+<span class="line highlighted"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">        placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Input your company&quot;</span></span>
+<span class="line highlighted"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">        autofocus</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-combo-box</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h3 id="editable" tabindex="-1">Editable <a class="header-anchor" href="#editable" aria-label="Permalink to &quot;Editable&quot;">​</a></h3><hr>`,3),x=s(`<div class="language-template vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">template</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-combo-box</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
+<span class="line highlighted"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">        style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;width:100%;&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">options</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">options</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
+<span class="line highlighted"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">        editable</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">theme</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">        placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Input your company&quot;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-combo-box</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h3 id="disabled" tabindex="-1">Disabled <a class="header-anchor" href="#disabled" aria-label="Permalink to &quot;Disabled&quot;">​</a></h3><hr>`,3),b=s(`<div class="language-template vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">template</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-combo-box</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
+<span class="line highlighted"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">        disabled</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">options</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">options</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">theme</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">        placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Input your company&quot;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-combo-box</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-label="Permalink to &quot;Properties&quot;">​</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">autofocus</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">editable</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">editable</td></tr><tr><td style="text-align:center;">error-border-color</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">font-size</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">14</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">hover-border-color</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">input-rules</td><td style="text-align:center;">[object,string,function]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">lang</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">i18n</td></tr><tr><td style="text-align:center;">maxlength</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">minlength</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">model-value</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">v-model</td></tr><tr><td style="text-align:center;">options</td><td style="text-align:center;">[array]</td><td style="text-align:center;">No</td><td style="text-align:center;">() =&gt; []</td><td style="text-align:center;">select options</td></tr><tr><td style="text-align:center;">pattern</td><td style="text-align:center;">[object,string,function]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">placeholder</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">required</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">[&#39;light&#39;,&#39;dark&#39;,&#39;global&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">theme</td></tr><tr><td style="text-align:center;">title</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;input&#39;</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">warning-border-color</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr></tbody></table><h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-label="Permalink to &quot;Emits&quot;">​</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">blur</td><td style="text-align:center;">evt[FocusEvent]</td><td style="text-align:center;">onblur</td></tr><tr><td style="text-align:center;">change</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">onchange</td></tr><tr><td style="text-align:center;">error-input</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">onerrorinput</td></tr><tr><td style="text-align:center;">focus</td><td style="text-align:center;">evt[FocusEvent]</td><td style="text-align:center;">onfocus</td></tr><tr><td style="text-align:center;">input</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">oninput</td></tr><tr><td style="text-align:center;">keydown</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">onkeydown</td></tr><tr><td style="text-align:center;">keypress</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">onkeypress</td></tr><tr><td style="text-align:center;">keyup</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">onkeyup</td></tr><tr><td style="text-align:center;">update:model-value</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">v-model</td></tr><tr><td style="text-align:center;">warning-input</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">onwarninginput</td></tr></tbody></table>`,7),q=JSON.parse('{"title":"ComboBox","description":"","frontmatter":{"page":true,"title":"ComboBox"},"headers":[],"relativePath":"guide/components/combo-box/index.md","filePath":"guide/components/combo-box/index.md"}'),u={name:"guide/components/combo-box/index.md"},B=p({...u,setup(m){const{theme:a}=h(),t=o(),i=[{key:"Microsoft"},{key:"Apple"},{key:"Google"},{key:"Facebook"},{key:"Github"}];return(F,e)=>{const n=g("fv-combo-box");return c(),k("div",null,[y,r(n,{modelValue:t.value,"onUpdate:modelValue":e[0]||(e[0]=l=>t.value=l),options:i,theme:d(a),placeholder:"Input your company",autofocus:""},null,8,["modelValue","theme"]),E,r(n,{style:{width:"100%"},options:i,editable:"",theme:d(a),placeholder:"Input your company"},null,8,["theme"]),x,r(n,{modelValue:t.value,"onUpdate:modelValue":e[1]||(e[1]=l=>t.value=l),options:i,disabled:"",theme:d(a),placeholder:"Input your company"},null,8,["modelValue","theme"]),b])}}});export{q as __pageData,B as default};
diff --git a/assets/guide_components_combo-box_properties.md.2e1d6060.js b/assets/guide_components_combo-box_properties.md.2e1d6060.js
deleted file mode 100644
index 0289974..0000000
--- a/assets/guide_components_combo-box_properties.md.2e1d6060.js
+++ /dev/null
@@ -1 +0,0 @@
-import{_ as t,c as e,o as n,a as r}from"./app.d60fa8c3.js";const b=JSON.parse('{"title":"Properties","description":"","frontmatter":{},"headers":[{"level":2,"title":"Properties","slug":"properties"}],"relativePath":"guide/components/combo-box/properties.md"}'),l={name:"guide/components/combo-box/properties.md"},d=r('<h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">autofocus</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">editable</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">editable</td></tr><tr><td style="text-align:center;">error-border-color</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">font-size</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">14</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">hover-border-color</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">input-rules</td><td style="text-align:center;">[object,string,function]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">lang</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">i18n</td></tr><tr><td style="text-align:center;">maxlength</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">minlength</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">model-value</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">v-model</td></tr><tr><td style="text-align:center;">options</td><td style="text-align:center;">[array]</td><td style="text-align:center;">No</td><td style="text-align:center;">() =&gt; []</td><td style="text-align:center;">select options</td></tr><tr><td style="text-align:center;">pattern</td><td style="text-align:center;">[object,string,function]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">placeholder</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">required</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">[&#39;light&#39;,&#39;dark&#39;,&#39;global&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">theme</td></tr><tr><td style="text-align:center;">title</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;input&#39;</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">warning-border-color</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr></tbody></table>',3),a=[d];function s(i,x,o,c,g,y){return n(),e("div",null,a)}var f=t(l,[["render",s]]);export{b as __pageData,f as default};
diff --git a/assets/guide_components_combo-box_properties.md.2e1d6060.lean.js b/assets/guide_components_combo-box_properties.md.2e1d6060.lean.js
deleted file mode 100644
index e362bd4..0000000
--- a/assets/guide_components_combo-box_properties.md.2e1d6060.lean.js
+++ /dev/null
@@ -1 +0,0 @@
-import{_ as t,c as e,o as n,a as r}from"./app.d60fa8c3.js";const b=JSON.parse('{"title":"Properties","description":"","frontmatter":{},"headers":[{"level":2,"title":"Properties","slug":"properties"}],"relativePath":"guide/components/combo-box/properties.md"}'),l={name:"guide/components/combo-box/properties.md"},d=r("",3),a=[d];function s(i,x,o,c,g,y){return n(),e("div",null,a)}var f=t(l,[["render",s]]);export{b as __pageData,f as default};
diff --git a/assets/guide_components_combo-box_properties.md.AWfHzV6x.js b/assets/guide_components_combo-box_properties.md.AWfHzV6x.js
new file mode 100644
index 0000000..b7a5e7b
--- /dev/null
+++ b/assets/guide_components_combo-box_properties.md.AWfHzV6x.js
@@ -0,0 +1 @@
+import{_ as t,q as e,p as n,aq as r}from"./chunks/framework.DvIFzl91.js";const b=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/components/combo-box/properties.md","filePath":"guide/components/combo-box/properties.md"}'),l={name:"guide/components/combo-box/properties.md"},d=r('<h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-label="Permalink to &quot;Properties&quot;">​</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">autofocus</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">editable</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">editable</td></tr><tr><td style="text-align:center;">error-border-color</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">font-size</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">14</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">hover-border-color</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">input-rules</td><td style="text-align:center;">[object,string,function]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">lang</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">i18n</td></tr><tr><td style="text-align:center;">maxlength</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">minlength</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">model-value</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">v-model</td></tr><tr><td style="text-align:center;">options</td><td style="text-align:center;">[array]</td><td style="text-align:center;">No</td><td style="text-align:center;">() =&gt; []</td><td style="text-align:center;">select options</td></tr><tr><td style="text-align:center;">pattern</td><td style="text-align:center;">[object,string,function]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">placeholder</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">required</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">[&#39;light&#39;,&#39;dark&#39;,&#39;global&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">theme</td></tr><tr><td style="text-align:center;">title</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;input&#39;</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">warning-border-color</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr></tbody></table>',3),a=[d];function s(i,x,o,c,g,y){return n(),e("div",null,a)}const f=t(l,[["render",s]]);export{b as __pageData,f as default};
diff --git a/assets/guide_components_combo-box_properties.md.AWfHzV6x.lean.js b/assets/guide_components_combo-box_properties.md.AWfHzV6x.lean.js
new file mode 100644
index 0000000..e016a1a
--- /dev/null
+++ b/assets/guide_components_combo-box_properties.md.AWfHzV6x.lean.js
@@ -0,0 +1 @@
+import{_ as t,q as e,p as n,aq as r}from"./chunks/framework.DvIFzl91.js";const b=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/components/combo-box/properties.md","filePath":"guide/components/combo-box/properties.md"}'),l={name:"guide/components/combo-box/properties.md"},d=r("",3),a=[d];function s(i,x,o,c,g,y){return n(),e("div",null,a)}const f=t(l,[["render",s]]);export{b as __pageData,f as default};
diff --git a/assets/guide_components_combobox_emits.md.CGB6WLt8.js b/assets/guide_components_combobox_emits.md.CGB6WLt8.js
new file mode 100644
index 0000000..d6a4f38
--- /dev/null
+++ b/assets/guide_components_combobox_emits.md.CGB6WLt8.js
@@ -0,0 +1 @@
+import{_ as t,q as e,p as a,aq as o}from"./chunks/framework.DvIFzl91.js";const u=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/components/combobox/emits.md","filePath":"guide/components/combobox/emits.md"}'),s={name:"guide/components/combobox/emits.md"},n=o('<h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-label="Permalink to &quot;Emits&quot;">​</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead></table>',3),i=[n];function r(c,m,_,d,l,h){return a(),e("div",null,i)}const b=t(s,[["render",r]]);export{u as __pageData,b as default};
diff --git a/assets/guide_components_combobox_emits.md.CGB6WLt8.lean.js b/assets/guide_components_combobox_emits.md.CGB6WLt8.lean.js
new file mode 100644
index 0000000..88805a5
--- /dev/null
+++ b/assets/guide_components_combobox_emits.md.CGB6WLt8.lean.js
@@ -0,0 +1 @@
+import{_ as t,q as e,p as a,aq as o}from"./chunks/framework.DvIFzl91.js";const u=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/components/combobox/emits.md","filePath":"guide/components/combobox/emits.md"}'),s={name:"guide/components/combobox/emits.md"},n=o("",3),i=[n];function r(c,m,_,d,l,h){return a(),e("div",null,i)}const b=t(s,[["render",r]]);export{u as __pageData,b as default};
diff --git a/assets/guide_components_combobox_index.md.CsPkY6YB.js b/assets/guide_components_combobox_index.md.CsPkY6YB.js
new file mode 100644
index 0000000..4dad1a0
--- /dev/null
+++ b/assets/guide_components_combobox_index.md.CsPkY6YB.js
@@ -0,0 +1,32 @@
+import{_ as d,q as p,Y as l,z as h,H as s,u as i,aq as o,S as k,p as E,v as g}from"./chunks/framework.DvIFzl91.js";const c={data(){return{value:{},options:[{key:"fruitsHeader",text:"Fruits",type:"header"},{key:"apple",text:"Apple"},{key:"banana",text:"Banana"},{key:"orange",text:"Orange",disabled:!0},{key:"grape",text:"Grape"},{key:"divider_1",text:"-",type:"divider"},{key:"vegetablesHeader",text:"Vegetables",type:"header"},{key:"broccoli",text:"Broccoli"},{key:"carrot",text:"Carrot"},{key:"lettuce",text:"Lettuce"}]}}},I=JSON.parse('{"title":"Combobox","description":"","frontmatter":{"page":true,"title":"Combobox"},"headers":[],"relativePath":"guide/components/combobox/index.md","filePath":"guide/components/combobox/index.md"}'),y=s("h3",{id:"combobox-demo",tabindex:"-1"},[i("Combobox-DEMO "),s("a",{class:"header-anchor",href:"#combobox-demo","aria-label":'Permalink to "Combobox-DEMO"'},"​")],-1),u=s("hr",null,null,-1),b=s("div",{class:"language-vue vp-adaptive-theme line-numbers-mode"},[s("button",{title:"Copy Code",class:"copy"}),s("span",{class:"lang"},"vue"),s("pre",{class:"shiki shiki-themes github-light github-dark vp-code"},[s("code",null,[s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"<"),s("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-Combobox"),s("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}}," v-model"),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),s("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"value"),s("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}}," :"),s("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}},"options"),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),s("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"options"),s("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),s("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}}," placeholder"),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),s("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"Pick a option"'),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")]),i(`
+`),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"</"),s("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-Combobox"),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")])])]),s("div",{class:"line-numbers-wrapper","aria-hidden":"true"},[s("span",{class:"line-number"},"1"),s("br"),s("span",{class:"line-number"},"2"),s("br")])],-1),F=s("h3",{id:"combobox-disabled",tabindex:"-1"},[i("Combobox-Disabled "),s("a",{class:"header-anchor",href:"#combobox-disabled","aria-label":'Permalink to "Combobox-Disabled"'},"​")],-1),m=s("hr",null,null,-1),x=s("div",{class:"language-vue vp-adaptive-theme line-numbers-mode"},[s("button",{title:"Copy Code",class:"copy"}),s("span",{class:"lang"},"vue"),s("pre",{class:"shiki shiki-themes github-light github-dark vp-code"},[s("code",null,[s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"<"),s("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-Combobox"),s("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}}," v-model"),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),s("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"value"),s("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}}," :"),s("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}},"options"),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),s("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"options"),s("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),s("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}}," placeholder"),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),s("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"Pick a option"'),s("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}}," disabled"),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")]),i(`
+`),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"</"),s("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-Combobox"),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")])])]),s("div",{class:"line-numbers-wrapper","aria-hidden":"true"},[s("span",{class:"line-number"},"1"),s("br"),s("span",{class:"line-number"},"2"),s("br")])],-1),C=s("h3",{id:"combobox-dark-theme",tabindex:"-1"},[i("Combobox-Dark Theme "),s("a",{class:"header-anchor",href:"#combobox-dark-theme","aria-label":'Permalink to "Combobox-Dark Theme"'},"​")],-1),v=s("hr",null,null,-1),B={style:{width:"100%",background:"black"}},q=s("div",{class:"language-vue vp-adaptive-theme line-numbers-mode"},[s("button",{title:"Copy Code",class:"copy"}),s("span",{class:"lang"},"vue"),s("pre",{class:"shiki shiki-themes github-light github-dark vp-code"},[s("code",null,[s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"<"),s("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-Combobox"),s("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}}," v-model"),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),s("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"value"),s("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}}," :"),s("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}},"options"),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),s("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"options"),s("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),s("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}}," placeholder"),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),s("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"Pick a option"'),s("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}}," theme"),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),s("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"dark"'),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")]),i(`
+`),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"</"),s("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-Combobox"),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")])])]),s("div",{class:"line-numbers-wrapper","aria-hidden":"true"},[s("span",{class:"line-number"},"1"),s("br"),s("span",{class:"line-number"},"2"),s("br")])],-1),_=s("h3",{id:"combobox-customize",tabindex:"-1"},[i("Combobox Customize "),s("a",{class:"header-anchor",href:"#combobox-customize","aria-label":'Permalink to "Combobox Customize"'},"​")],-1),f=s("hr",null,null,-1),N=s("div",{class:"language-vue vp-adaptive-theme line-numbers-mode"},[s("button",{title:"Copy Code",class:"copy"}),s("span",{class:"lang"},"vue"),s("pre",{class:"shiki shiki-themes github-light github-dark vp-code"},[s("code",null,[s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"<"),s("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-Combobox"),s("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}}," v-model"),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),s("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"value"),s("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}}," :"),s("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}},"options"),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),s("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"options"),s("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),s("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}}," placeholder"),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),s("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"Pick a option"'),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")]),i(`
+`),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},'    <template v-slot:default="x">')]),i(`
+`),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"        <i>{{x.item.text}}</i>")]),i(`
+`),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"    </template>")]),i(`
+`),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"</"),s("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-Combobox"),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")])])]),s("div",{class:"line-numbers-wrapper","aria-hidden":"true"},[s("span",{class:"line-number"},"1"),s("br"),s("span",{class:"line-number"},"2"),s("br"),s("span",{class:"line-number"},"3"),s("br"),s("span",{class:"line-number"},"4"),s("br"),s("span",{class:"line-number"},"5"),s("br")])],-1),A=s("p",null,"Default Styles",-1),D=s("div",{class:"language-vue vp-adaptive-theme line-numbers-mode"},[s("button",{title:"Copy Code",class:"copy"}),s("span",{class:"lang"},"vue"),s("pre",{class:"shiki shiki-themes github-light github-dark vp-code"},[s("code",null,[s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"<"),s("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-Combobox"),s("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}}," v-model"),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),s("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"value"),s("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}}," :"),s("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}},"options"),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),s("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"options"),s("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),s("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}}," placeholder"),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),s("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"Pick a option"'),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")]),i(`
+`),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},'    <template v-slot:default="x">')]),i(`
+`),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},'        <i class="before-choosen" :style="{background: choosenSliderBackground}"></i>')]),i(`
+`),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"        {{valueTrigger(x.item.type) !== 'divider' ? valueTrigger(x.item.text) : ''}}")]),i(`
+`),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"    </template>")]),i(`
+`),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"</"),s("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-Combobox"),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")])])]),s("div",{class:"line-numbers-wrapper","aria-hidden":"true"},[s("span",{class:"line-number"},"1"),s("br"),s("span",{class:"line-number"},"2"),s("br"),s("span",{class:"line-number"},"3"),s("br"),s("span",{class:"line-number"},"4"),s("br"),s("span",{class:"line-number"},"5"),s("br"),s("span",{class:"line-number"},"6"),s("br")])],-1),P=o(`<h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">value/v-model</td><td style="text-align:center;">Object</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">Combobox当前项绑定</td></tr><tr><td style="text-align:center;">options</td><td style="text-align:center;">Array</td><td style="text-align:center;">Yes</td><td style="text-align:center;">N/A</td><td style="text-align:center;">Combobox数据</td></tr><tr><td style="text-align:center;">borderWidth</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">1</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">placeholder</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">Combobox</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">borderRadius</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">3</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">background</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">choosenBackground</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">choosenSliderBackground</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">inputForeground</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">inputBackground</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">titleForeground</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">ChevronDown</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">itemHeight</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">40</td><td style="text-align:center;">Combobox Item 高度</td></tr><tr><td style="text-align:center;">dropDownIcon</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">dropDownIconForeground</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">revealBorderColor</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">revealBackgroundColor</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">system</td><td style="text-align:center;">主题样式, 包含<code>light</code>, <code>dark</code>, <code>system</code>, <code>custom</code>几种样式</td></tr></tbody></table><h3 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to &quot;Events&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">事件名(Name)</th><th style="text-align:center;">参数类型(args)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">choose-item</td><td style="text-align:center;">value/object</td><td style="text-align:center;">Combobox choose item</td></tr></tbody></table><h3 id="slot" tabindex="-1">Slot <a class="header-anchor" href="#slot" aria-label="Permalink to &quot;Slot&quot;">​</a></h3><hr><ol><li>Default</li></ol><p>用户可自定义 Combobx Item 内容</p><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">item</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">item</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    {{valueTrigger(item.type) !== &#39;divider&#39; ? valueTrigger(item.text) : &#39;&#39;}}</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>用户自定义样式时, 包含以下可选属性</p><ul><li>item: 当前组数据</li></ul><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">i</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;{{x.item.text}}&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">i</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="data" tabindex="-1">Data <a class="header-anchor" href="#data" aria-label="Permalink to &quot;Data&quot;">​</a></h3><hr><ol><li>options</li></ol><div class="language-javascript vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">options </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [{key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, disabled: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}]</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">//e.g.//</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">options</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: [</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;fruitsHeader&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Fruits&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;header&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;apple&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Apple&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;banana&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Banana&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;orange&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Orange&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, disabled: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;grape&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Grape&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;divider_1&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;-&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;divider&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;vegetablesHeader&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Vegetables&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;header&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;broccoli&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Broccoli&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;carrot&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Carrot&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;lettuce&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Lettuce&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><p><strong>特别地</strong> 0.1.62版本后支持采用函数式字段, 其中支持的字段包括<code>text</code>, <code>disabled</code>, <code>type</code></p>`,19);function V(S,a,w,T,t,O){const n=k("fv-Combobox"),r=k("ClientOnly");return E(),p("div",null,[y,u,l(r,null,{default:h(()=>[l(n,{modelValue:t.value,"onUpdate:modelValue":a[0]||(a[0]=e=>t.value=e),options:t.options,placeholder:"Pick a option"},null,8,["modelValue","options"]),b,F,m,l(n,{modelValue:t.value,"onUpdate:modelValue":a[1]||(a[1]=e=>t.value=e),options:t.options,placeholder:"Pick a option",disabled:""},null,8,["modelValue","options"]),x,C,v,s("div",B,[l(n,{modelValue:t.value,"onUpdate:modelValue":a[2]||(a[2]=e=>t.value=e),options:t.options,placeholder:"Pick a option",theme:"dark"},null,8,["modelValue","options"])]),q,_,f,l(n,{modelValue:t.value,"onUpdate:modelValue":a[3]||(a[3]=e=>t.value=e),options:t.options,placeholder:"Pick a option"},{default:h(e=>[s("i",null,g(e.item.text),1)]),_:1},8,["modelValue","options"]),N,A,D]),_:1}),P])}const z=d(c,[["render",V]]);export{I as __pageData,z as default};
diff --git a/assets/guide_components_combobox_index.md.CsPkY6YB.lean.js b/assets/guide_components_combobox_index.md.CsPkY6YB.lean.js
new file mode 100644
index 0000000..d9305cd
--- /dev/null
+++ b/assets/guide_components_combobox_index.md.CsPkY6YB.lean.js
@@ -0,0 +1,13 @@
+import{_ as d,q as p,Y as l,z as h,H as s,u as i,aq as o,S as k,p as E,v as g}from"./chunks/framework.DvIFzl91.js";const c={data(){return{value:{},options:[{key:"fruitsHeader",text:"Fruits",type:"header"},{key:"apple",text:"Apple"},{key:"banana",text:"Banana"},{key:"orange",text:"Orange",disabled:!0},{key:"grape",text:"Grape"},{key:"divider_1",text:"-",type:"divider"},{key:"vegetablesHeader",text:"Vegetables",type:"header"},{key:"broccoli",text:"Broccoli"},{key:"carrot",text:"Carrot"},{key:"lettuce",text:"Lettuce"}]}}},I=JSON.parse('{"title":"Combobox","description":"","frontmatter":{"page":true,"title":"Combobox"},"headers":[],"relativePath":"guide/components/combobox/index.md","filePath":"guide/components/combobox/index.md"}'),y=s("h3",{id:"combobox-demo",tabindex:"-1"},[i("Combobox-DEMO "),s("a",{class:"header-anchor",href:"#combobox-demo","aria-label":'Permalink to "Combobox-DEMO"'},"​")],-1),u=s("hr",null,null,-1),b=s("div",{class:"language-vue vp-adaptive-theme line-numbers-mode"},[s("button",{title:"Copy Code",class:"copy"}),s("span",{class:"lang"},"vue"),s("pre",{class:"shiki shiki-themes github-light github-dark vp-code"},[s("code",null,[s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"<"),s("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-Combobox"),s("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}}," v-model"),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),s("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"value"),s("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}}," :"),s("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}},"options"),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),s("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"options"),s("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),s("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}}," placeholder"),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),s("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"Pick a option"'),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")]),i(`
+`),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"</"),s("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-Combobox"),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")])])]),s("div",{class:"line-numbers-wrapper","aria-hidden":"true"},[s("span",{class:"line-number"},"1"),s("br"),s("span",{class:"line-number"},"2"),s("br")])],-1),F=s("h3",{id:"combobox-disabled",tabindex:"-1"},[i("Combobox-Disabled "),s("a",{class:"header-anchor",href:"#combobox-disabled","aria-label":'Permalink to "Combobox-Disabled"'},"​")],-1),m=s("hr",null,null,-1),x=s("div",{class:"language-vue vp-adaptive-theme line-numbers-mode"},[s("button",{title:"Copy Code",class:"copy"}),s("span",{class:"lang"},"vue"),s("pre",{class:"shiki shiki-themes github-light github-dark vp-code"},[s("code",null,[s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"<"),s("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-Combobox"),s("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}}," v-model"),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),s("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"value"),s("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}}," :"),s("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}},"options"),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),s("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"options"),s("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),s("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}}," placeholder"),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),s("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"Pick a option"'),s("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}}," disabled"),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")]),i(`
+`),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"</"),s("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-Combobox"),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")])])]),s("div",{class:"line-numbers-wrapper","aria-hidden":"true"},[s("span",{class:"line-number"},"1"),s("br"),s("span",{class:"line-number"},"2"),s("br")])],-1),C=s("h3",{id:"combobox-dark-theme",tabindex:"-1"},[i("Combobox-Dark Theme "),s("a",{class:"header-anchor",href:"#combobox-dark-theme","aria-label":'Permalink to "Combobox-Dark Theme"'},"​")],-1),v=s("hr",null,null,-1),B={style:{width:"100%",background:"black"}},q=s("div",{class:"language-vue vp-adaptive-theme line-numbers-mode"},[s("button",{title:"Copy Code",class:"copy"}),s("span",{class:"lang"},"vue"),s("pre",{class:"shiki shiki-themes github-light github-dark vp-code"},[s("code",null,[s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"<"),s("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-Combobox"),s("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}}," v-model"),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),s("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"value"),s("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}}," :"),s("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}},"options"),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),s("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"options"),s("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),s("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}}," placeholder"),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),s("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"Pick a option"'),s("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}}," theme"),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),s("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"dark"'),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")]),i(`
+`),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"</"),s("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-Combobox"),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")])])]),s("div",{class:"line-numbers-wrapper","aria-hidden":"true"},[s("span",{class:"line-number"},"1"),s("br"),s("span",{class:"line-number"},"2"),s("br")])],-1),_=s("h3",{id:"combobox-customize",tabindex:"-1"},[i("Combobox Customize "),s("a",{class:"header-anchor",href:"#combobox-customize","aria-label":'Permalink to "Combobox Customize"'},"​")],-1),f=s("hr",null,null,-1),N=s("div",{class:"language-vue vp-adaptive-theme line-numbers-mode"},[s("button",{title:"Copy Code",class:"copy"}),s("span",{class:"lang"},"vue"),s("pre",{class:"shiki shiki-themes github-light github-dark vp-code"},[s("code",null,[s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"<"),s("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-Combobox"),s("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}}," v-model"),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),s("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"value"),s("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}}," :"),s("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}},"options"),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),s("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"options"),s("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),s("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}}," placeholder"),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),s("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"Pick a option"'),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")]),i(`
+`),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},'    <template v-slot:default="x">')]),i(`
+`),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"        <i>{{x.item.text}}</i>")]),i(`
+`),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"    </template>")]),i(`
+`),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"</"),s("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-Combobox"),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")])])]),s("div",{class:"line-numbers-wrapper","aria-hidden":"true"},[s("span",{class:"line-number"},"1"),s("br"),s("span",{class:"line-number"},"2"),s("br"),s("span",{class:"line-number"},"3"),s("br"),s("span",{class:"line-number"},"4"),s("br"),s("span",{class:"line-number"},"5"),s("br")])],-1),A=s("p",null,"Default Styles",-1),D=s("div",{class:"language-vue vp-adaptive-theme line-numbers-mode"},[s("button",{title:"Copy Code",class:"copy"}),s("span",{class:"lang"},"vue"),s("pre",{class:"shiki shiki-themes github-light github-dark vp-code"},[s("code",null,[s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"<"),s("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-Combobox"),s("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}}," v-model"),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),s("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"value"),s("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}}," :"),s("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}},"options"),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),s("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"options"),s("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),s("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}}," placeholder"),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),s("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"Pick a option"'),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")]),i(`
+`),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},'    <template v-slot:default="x">')]),i(`
+`),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},'        <i class="before-choosen" :style="{background: choosenSliderBackground}"></i>')]),i(`
+`),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"        {{valueTrigger(x.item.type) !== 'divider' ? valueTrigger(x.item.text) : ''}}")]),i(`
+`),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"    </template>")]),i(`
+`),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"</"),s("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-Combobox"),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")])])]),s("div",{class:"line-numbers-wrapper","aria-hidden":"true"},[s("span",{class:"line-number"},"1"),s("br"),s("span",{class:"line-number"},"2"),s("br"),s("span",{class:"line-number"},"3"),s("br"),s("span",{class:"line-number"},"4"),s("br"),s("span",{class:"line-number"},"5"),s("br"),s("span",{class:"line-number"},"6"),s("br")])],-1),P=o("",19);function V(S,a,w,T,t,O){const n=k("fv-Combobox"),r=k("ClientOnly");return E(),p("div",null,[y,u,l(r,null,{default:h(()=>[l(n,{modelValue:t.value,"onUpdate:modelValue":a[0]||(a[0]=e=>t.value=e),options:t.options,placeholder:"Pick a option"},null,8,["modelValue","options"]),b,F,m,l(n,{modelValue:t.value,"onUpdate:modelValue":a[1]||(a[1]=e=>t.value=e),options:t.options,placeholder:"Pick a option",disabled:""},null,8,["modelValue","options"]),x,C,v,s("div",B,[l(n,{modelValue:t.value,"onUpdate:modelValue":a[2]||(a[2]=e=>t.value=e),options:t.options,placeholder:"Pick a option",theme:"dark"},null,8,["modelValue","options"])]),q,_,f,l(n,{modelValue:t.value,"onUpdate:modelValue":a[3]||(a[3]=e=>t.value=e),options:t.options,placeholder:"Pick a option"},{default:h(e=>[s("i",null,g(e.item.text),1)]),_:1},8,["modelValue","options"]),N,A,D]),_:1}),P])}const z=d(c,[["render",V]]);export{I as __pageData,z as default};
diff --git a/assets/guide_components_combobox_properties.md.Bja0hMou.js b/assets/guide_components_combobox_properties.md.Bja0hMou.js
new file mode 100644
index 0000000..b3dac50
--- /dev/null
+++ b/assets/guide_components_combobox_properties.md.Bja0hMou.js
@@ -0,0 +1 @@
+import{_ as e,q as t,p as r,aq as o}from"./chunks/framework.DvIFzl91.js";const u=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/components/combobox/properties.md","filePath":"guide/components/combobox/properties.md"}'),a={name:"guide/components/combobox/properties.md"},s=o('<h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-label="Permalink to &quot;Properties&quot;">​</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead></table>',3),n=[s];function i(c,p,_,l,h,d){return r(),t("div",null,n)}const x=e(a,[["render",i]]);export{u as __pageData,x as default};
diff --git a/assets/guide_components_combobox_properties.md.Bja0hMou.lean.js b/assets/guide_components_combobox_properties.md.Bja0hMou.lean.js
new file mode 100644
index 0000000..909d91f
--- /dev/null
+++ b/assets/guide_components_combobox_properties.md.Bja0hMou.lean.js
@@ -0,0 +1 @@
+import{_ as e,q as t,p as r,aq as o}from"./chunks/framework.DvIFzl91.js";const u=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/components/combobox/properties.md","filePath":"guide/components/combobox/properties.md"}'),a={name:"guide/components/combobox/properties.md"},s=o("",3),n=[s];function i(c,p,_,l,h,d){return r(),t("div",null,n)}const x=e(a,[["render",i]]);export{u as __pageData,x as default};
diff --git a/assets/guide_components_command-bar_index.md.Cp4_rrGB.js b/assets/guide_components_command-bar_index.md.Cp4_rrGB.js
new file mode 100644
index 0000000..bfed0cf
--- /dev/null
+++ b/assets/guide_components_command-bar_index.md.Cp4_rrGB.js
@@ -0,0 +1,60 @@
+import{_ as r,q as d,H as a,Y as i,z as n,u as E,aq as p,S as k,p as o}from"./chunks/framework.DvIFzl91.js";const c={data(){return{value:{},options:[{name:"Add",icon:"Add",iconColor:"rgba(0, 90, 158, 1)",func:this.customFunc,secondary:[{name:"Email Message",func:this.customFunc,icon:"Mail",iconColor:"rgba(0, 98, 158, 1)",disabled:!0},{type:"divider"},{name:"Calendar event",func:this.customFunc,icon:"WebAppBuilderModule"}]},{name:"Edit",func:this.customFunc,icon:"Edit",disabled:!0},{type:"divider"},{name:"Share",func:this.customFunc,icon:"Share"},{type:"more",secondary:[{name:"Move to",func:this.customFunc,icon:"MoveToFolder"},{name:"Copy to",func:this.customFunc,icon:"Copy"},{name:"Rename",func:this.customFunc,icon:"Rename"}]}]}},methods:{customFunc(){console.log(1)}}},I=JSON.parse('{"title":"CommandBar","description":"","frontmatter":{"page":true,"title":"CommandBar"},"headers":[],"relativePath":"guide/components/command-bar/index.md","filePath":"guide/components/command-bar/index.md"}'),g=a("h3",{id:"commandbar-demo",tabindex:"-1"},[E("CommandBar-DEMO "),a("a",{class:"header-anchor",href:"#commandbar-demo","aria-label":'Permalink to "CommandBar-DEMO"'},"​")],-1),u=a("hr",null,null,-1),y={style:{width:"100%"}},m=p(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;fv-CommandBar v-model=&quot;value&quot; :options=&quot;options&quot;&gt;&lt;/fv-CommandBar&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>Compact Mode</p>`,2),b={style:{width:"100%"}},F=p(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;fv-CommandBar v-model=&quot;value&quot; :options=&quot;options&quot; :compact=&quot;true&quot;&gt;&lt;/fv-CommandBar&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="commandbar-toward-up" tabindex="-1">CommandBar-Toward Up <a class="header-anchor" href="#commandbar-toward-up" aria-label="Permalink to &quot;CommandBar-Toward Up&quot;">​</a></h3><hr>`,3),C={style:{width:"100%"}},v=p(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;fv-CommandBar :options=&quot;options&quot; toward=&quot;up&quot;&gt;&lt;/fv-CommandBar&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="commandbar-right-space" tabindex="-1">CommandBar-Right Space <a class="header-anchor" href="#commandbar-right-space" aria-label="Permalink to &quot;CommandBar-Right Space&quot;">​</a></h3><hr>`,3),_={style:{width:"100%"}},q=a("span",{style:{width:"40px",height:"40px",display:"flex","justify-content":"center","align-items":"center"}},[a("i",{class:"ms-Icon ms-Icon--Error icon"})],-1),B=p(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;fv-CommandBar v-model=&quot;value&quot; :options=&quot;options&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;template v-slot:right-space&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            &lt;span style=&quot;width: 40px; height: 40px; display: flex; justify-content: center; align-items: center;&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                &lt;i class=&quot;ms-Icon ms-Icon--Error icon&quot;&gt;&lt;/i&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            &lt;/span&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/fv-CommandBar&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><h3 id="commandbar-dark-theme" tabindex="-1">CommandBar-Dark Theme <a class="header-anchor" href="#commandbar-dark-theme" aria-label="Permalink to &quot;CommandBar-Dark Theme&quot;">​</a></h3><hr>`,3),x={style:{width:"100%"}},f=p(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;fv-CommandBar :options=&quot;options&quot; theme=&quot;dark&quot;&gt;&lt;/fv-CommandBar&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="commandbar-custom-background" tabindex="-1">CommandBar-Custom Background <a class="header-anchor" href="#commandbar-custom-background" aria-label="Permalink to &quot;CommandBar-Custom Background&quot;">​</a></h3><hr>`,3),A={style:{width:"100%"}},T=p(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;fv-CommandBar :options=&quot;options&quot; theme=&quot;dark&quot; background=&quot;rgba(0, 98, 158, 1)&quot;&gt;&lt;/fv-CommandBar&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">value</td><td style="text-align:center;">Object</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">绑定当前选中的对象</td></tr><tr><td style="text-align:center;">options</td><td style="text-align:center;">Array</td><td style="text-align:center;">Yes</td><td style="text-align:center;">N/A</td><td style="text-align:center;">CommandBar 数据源</td></tr><tr><td style="text-align:center;">toward</td><td style="text-align:center;">[&#39;down&#39;,&#39;up&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">down</td><td style="text-align:center;">下拉菜单的朝向</td></tr><tr><td style="text-align:center;">background</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">CommandBar 背景</td></tr><tr><td style="text-align:center;">compact</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">紧凑样式</td></tr><tr><td style="text-align:center;">revealBorderColor</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">revealBackgroundColor</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">system</td><td style="text-align:center;">主题样式, 包含<code>light</code>, <code>dark</code>, <code>system</code>, <code>custom</code>几种样式</td></tr></tbody></table><h3 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to &quot;Events&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">事件名(Name)</th><th style="text-align:center;">参数类型(args)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">item-click</td><td style="text-align:center;">object</td><td style="text-align:center;">选中项目时返回当前数据项</td></tr></tbody></table><h3 id="slot" tabindex="-1">Slot <a class="header-anchor" href="#slot" aria-label="Permalink to &quot;Slot&quot;">​</a></h3><hr><ol><li>Right Space</li></ol><p>用户可自定义 CommandBar 右侧内容</p><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">right-space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">i</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">i</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="data" tabindex="-1">Data <a class="header-anchor" href="#data" aria-label="Permalink to &quot;Data&quot;">​</a></h3><hr><ol><li>options</li></ol><p><code>options</code>中包含像<code>ListView</code>中的<code>items</code>一样的数据引用方式, 此外用户还可以指定:</p><ul><li>图标<code>icon</code></li><li>图标颜色<code>iconColor</code></li><li>触发函数<code>func</code></li><li>是否包含二级菜单<code>secondary</code>, <code>secondary</code>中的数据格式同<code>options</code>中一致</li></ul><div class="language-javascript vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">options </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  { name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, iconColor: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, func: {}, show: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, secondary: [], disabled: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">];</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">//e.g.//</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">options</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: [</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Add&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Add&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    iconColor: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rgba(0, 90, 158, 1)&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    func: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.customFunc,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    secondary: [</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Email Message&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        func: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.customFunc,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Mail&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        iconColor: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rgba(0, 98, 158, 1)&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        disabled: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      { type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;divider&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Calendar event&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        func: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.customFunc,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;WebAppBuilderModule&quot;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    ]</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  { name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Edit&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, func: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.customFunc, icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;SingleColumnEdit&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, disabled: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  { type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;divider&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  { name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Share&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, func: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.customFunc, icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Share&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;more&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    secondary: [</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      { name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Move to&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, func: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.customFunc, icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;MoveToFolder&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      { name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Copy to&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, func: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.customFunc, icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Copy&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      { name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Rename&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, func: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.customFunc, icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Rename&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    ]</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">];</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br></div></div><p><strong>特别地</strong> 0.0.61版本后支持采用函数式字段, 其中支持的字段包括<code>name</code>, <code>disabled</code>, <code>icon</code>, <code>iconColor</code>, <code>type</code></p>`,19);function D(w,t,S,V,s,P){const e=k("fv-CommandBar"),l=k("ClientOnly");return o(),d("div",null,[g,u,a("div",y,[i(l,null,{default:n(()=>[i(e,{modelValue:s.value,"onUpdate:modelValue":t[0]||(t[0]=h=>s.value=h),options:s.options,style:{"z-index":"2"}},null,8,["modelValue","options"])]),_:1})]),m,a("div",b,[i(l,null,{default:n(()=>[i(e,{modelValue:s.value,"onUpdate:modelValue":t[1]||(t[1]=h=>s.value=h),options:s.options,compact:!0,style:{"z-index":"2"}},null,8,["modelValue","options"])]),_:1})]),F,a("div",C,[i(l,null,{default:n(()=>[i(e,{options:s.options,toward:"up",style:{"z-index":"2"}},null,8,["options"])]),_:1})]),v,a("div",_,[i(l,null,{default:n(()=>[i(e,{modelValue:s.value,"onUpdate:modelValue":t[2]||(t[2]=h=>s.value=h),options:s.options,style:{"z-index":"2"}},{"right-space":n(()=>[q]),_:1},8,["modelValue","options"])]),_:1})]),B,a("div",x,[i(l,null,{default:n(()=>[i(e,{options:s.options,theme:"dark",style:{"z-index":"2"}},null,8,["options"])]),_:1})]),f,a("div",A,[i(l,null,{default:n(()=>[i(e,{options:s.options,theme:"dark",background:"rgba(0, 98, 158, 1)",style:{"z-index":"2"}},null,8,["options"])]),_:1})]),T])}const M=r(c,[["render",D]]);export{I as __pageData,M as default};
diff --git a/assets/guide_components_command-bar_index.md.Cp4_rrGB.lean.js b/assets/guide_components_command-bar_index.md.Cp4_rrGB.lean.js
new file mode 100644
index 0000000..e548af4
--- /dev/null
+++ b/assets/guide_components_command-bar_index.md.Cp4_rrGB.lean.js
@@ -0,0 +1 @@
+import{_ as r,q as d,H as a,Y as i,z as n,u as E,aq as p,S as k,p as o}from"./chunks/framework.DvIFzl91.js";const c={data(){return{value:{},options:[{name:"Add",icon:"Add",iconColor:"rgba(0, 90, 158, 1)",func:this.customFunc,secondary:[{name:"Email Message",func:this.customFunc,icon:"Mail",iconColor:"rgba(0, 98, 158, 1)",disabled:!0},{type:"divider"},{name:"Calendar event",func:this.customFunc,icon:"WebAppBuilderModule"}]},{name:"Edit",func:this.customFunc,icon:"Edit",disabled:!0},{type:"divider"},{name:"Share",func:this.customFunc,icon:"Share"},{type:"more",secondary:[{name:"Move to",func:this.customFunc,icon:"MoveToFolder"},{name:"Copy to",func:this.customFunc,icon:"Copy"},{name:"Rename",func:this.customFunc,icon:"Rename"}]}]}},methods:{customFunc(){console.log(1)}}},I=JSON.parse('{"title":"CommandBar","description":"","frontmatter":{"page":true,"title":"CommandBar"},"headers":[],"relativePath":"guide/components/command-bar/index.md","filePath":"guide/components/command-bar/index.md"}'),g=a("h3",{id:"commandbar-demo",tabindex:"-1"},[E("CommandBar-DEMO "),a("a",{class:"header-anchor",href:"#commandbar-demo","aria-label":'Permalink to "CommandBar-DEMO"'},"​")],-1),u=a("hr",null,null,-1),y={style:{width:"100%"}},m=p("",2),b={style:{width:"100%"}},F=p("",3),C={style:{width:"100%"}},v=p("",3),_={style:{width:"100%"}},q=a("span",{style:{width:"40px",height:"40px",display:"flex","justify-content":"center","align-items":"center"}},[a("i",{class:"ms-Icon ms-Icon--Error icon"})],-1),B=p("",3),x={style:{width:"100%"}},f=p("",3),A={style:{width:"100%"}},T=p("",19);function D(w,t,S,V,s,P){const e=k("fv-CommandBar"),l=k("ClientOnly");return o(),d("div",null,[g,u,a("div",y,[i(l,null,{default:n(()=>[i(e,{modelValue:s.value,"onUpdate:modelValue":t[0]||(t[0]=h=>s.value=h),options:s.options,style:{"z-index":"2"}},null,8,["modelValue","options"])]),_:1})]),m,a("div",b,[i(l,null,{default:n(()=>[i(e,{modelValue:s.value,"onUpdate:modelValue":t[1]||(t[1]=h=>s.value=h),options:s.options,compact:!0,style:{"z-index":"2"}},null,8,["modelValue","options"])]),_:1})]),F,a("div",C,[i(l,null,{default:n(()=>[i(e,{options:s.options,toward:"up",style:{"z-index":"2"}},null,8,["options"])]),_:1})]),v,a("div",_,[i(l,null,{default:n(()=>[i(e,{modelValue:s.value,"onUpdate:modelValue":t[2]||(t[2]=h=>s.value=h),options:s.options,style:{"z-index":"2"}},{"right-space":n(()=>[q]),_:1},8,["modelValue","options"])]),_:1})]),B,a("div",x,[i(l,null,{default:n(()=>[i(e,{options:s.options,theme:"dark",style:{"z-index":"2"}},null,8,["options"])]),_:1})]),f,a("div",A,[i(l,null,{default:n(()=>[i(e,{options:s.options,theme:"dark",background:"rgba(0, 98, 158, 1)",style:{"z-index":"2"}},null,8,["options"])]),_:1})]),T])}const M=r(c,[["render",D]]);export{I as __pageData,M as default};
diff --git a/assets/guide_components_date-picker_index.md.12vmUIup.js b/assets/guide_components_date-picker_index.md.12vmUIup.js
new file mode 100644
index 0000000..591d5e6
--- /dev/null
+++ b/assets/guide_components_date-picker_index.md.12vmUIup.js
@@ -0,0 +1,26 @@
+import{_ as r,q as d,Y as t,z as l,H as k,u as E,aq as h,S as p,p as g}from"./chunks/framework.DvIFzl91.js";const y={data(){return{theme:0,date:new Date}},computed:{$theme(){return this.theme?"dark":"light"},divStyle(){return this.$theme=="light"?{backgroundColor:"#fff",padding:"20px",color:"#000"}:{backgroundColor:"#000",padding:"20px",color:"#fff"}}}},D=JSON.parse('{"title":"DatePicker","description":"","frontmatter":{"page":true,"title":"DatePicker"},"headers":[],"relativePath":"guide/components/date-picker/index.md","filePath":"guide/components/date-picker/index.md"}'),o=k("h3",{id:"datepicker-default",tabindex:"-1"},[E("DatePicker-Default "),k("a",{class:"header-anchor",href:"#datepicker-default","aria-label":'Permalink to "DatePicker-Default"'},"​")],-1),c=h(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-DatePicker</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">date</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-DatePicker</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="datepicker-simple" tabindex="-1">DatePicker-Simple <a class="header-anchor" href="#datepicker-simple" aria-label="Permalink to &quot;DatePicker-Simple&quot;">​</a></h3>`,2),u=h(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-DatePicker</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">date</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">hideYear</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-DatePicker</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="datepicker-full" tabindex="-1">DatePicker-Full <a class="header-anchor" href="#datepicker-full" aria-label="Permalink to &quot;DatePicker-Full&quot;">​</a></h3>`,2),F=h(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-DatePicker</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">date</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">showWeek</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-DatePicker</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="datepicker-disabled" tabindex="-1">DatePicker-Disabled <a class="header-anchor" href="#datepicker-disabled" aria-label="Permalink to &quot;DatePicker-Disabled&quot;">​</a></h3>`,2),C=h(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-DatePicker</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">date</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">showWeek</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-DatePicker</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="datepicker-custom" tabindex="-1">DatePicker-Custom <a class="header-anchor" href="#datepicker-custom" aria-label="Permalink to &quot;DatePicker-Custom&quot;">​</a></h3>`,2),b=h(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-DatePicker</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">date</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">showWeek</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;custom_style&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  hoverColor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rgba(0, 204, 153,0.7)&quot;</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  innerBorderColor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rgb(0, 204, 153)&quot;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">optionsStyle</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">backgroundColor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;rgba(0, 204, 153,0.6)&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;white&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">borderColor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;rgba(0, 204, 153,0.6)&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">selectStyle</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">backgroundColor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;rgb(0, 204, 153)&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-DatePicker</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  .custom_style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    background-color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">rgb</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">204</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">153</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    border</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> solid</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> rgb</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">204</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">153</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">white</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  .custom_style:hover</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    border</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> solid</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> rgb</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">204</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">153</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    background-color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">rgb</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">204</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">153</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0.8</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br></div></div><h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">v-model</td><td style="text-align:center;">[Date]</td><td style="text-align:center;">No</td><td style="text-align:center;">Date(1970,0,1)</td><td style="text-align:center;">绑定的时间</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">[&#39;system&#39;,&#39;dark&#39;,&#39;light&#39;,&#39;custom&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;system&#39;</td><td style="text-align:center;">主题色</td></tr><tr><td style="text-align:center;">months</td><td style="text-align:center;">Array</td><td style="text-align:center;">No</td><td style="text-align:center;">[&quot;January&quot;,&quot;February&quot;,...]</td><td style="text-align:center;">月份显示数组</td></tr><tr><td style="text-align:center;">weeks</td><td style="text-align:center;">Array</td><td style="text-align:center;">No</td><td style="text-align:center;">[&quot;Sun.&quot;,&quot;Mon.&quot;...]</td><td style="text-align:center;">星期显示输出</td></tr><tr><td style="text-align:center;">hideYear</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否隐藏年份</td></tr><tr><td style="text-align:center;">hideMonth</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否隐藏月份</td></tr><tr><td style="text-align:center;">hideDay</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否隐藏天数</td></tr><tr><td style="text-align:center;">showWeek</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否显示星期</td></tr><tr><td style="text-align:center;">inputBackground</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">输入框背景色</td></tr><tr><td style="text-align:center;">selectedBackground</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">当前选中框背景色</td></tr><tr><td style="text-align:center;">optionBackground</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">选择器背景色</td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否禁用选项框</td></tr><tr><td style="text-align:center;">hoverColor</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">选项的Hover值</td></tr></tbody></table><h3 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to &quot;Events&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">事件名(Name)</th><th style="text-align:center;">参数类型(args)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">focus</td><td style="text-align:center;"></td><td style="text-align:center;">触发焦点时触发</td></tr><tr><td style="text-align:center;">change</td><td style="text-align:center;"></td><td style="text-align:center;">当选中的时间发生变化时</td></tr></tbody></table>`,7);function m(x,s,B,_,i,v){const e=p("fv-DatePicker"),n=p("ClientOnly");return g(),d("div",null,[o,t(n,null,{default:l(()=>[t(e,{style:{width:"150px"},modelValue:i.date,"onUpdate:modelValue":s[0]||(s[0]=a=>i.date=a)},null,8,["modelValue"])]),_:1}),c,t(n,null,{default:l(()=>[t(e,{modelValue:i.date,"onUpdate:modelValue":s[1]||(s[1]=a=>i.date=a),hideYear:!0},null,8,["modelValue"])]),_:1}),u,t(n,null,{default:l(()=>[t(e,{modelValue:i.date,"onUpdate:modelValue":s[2]||(s[2]=a=>i.date=a),showWeek:!0},null,8,["modelValue"])]),_:1}),F,t(n,null,{default:l(()=>[t(e,{modelValue:i.date,"onUpdate:modelValue":s[3]||(s[3]=a=>i.date=a),showWeek:!0,disabled:""},null,8,["modelValue"])]),_:1}),C,t(n,null,{default:l(()=>[t(e,{modelValue:i.date,"onUpdate:modelValue":s[4]||(s[4]=a=>i.date=a),showWeek:!0,inputBackground:"rgba(0, 90, 204, 0.6)",innerBorderColor:"rgb(0, 90, 153, 0.1)",hoverColor:"rgba(0, 204, 153, 0.1)"},null,8,["modelValue"])]),_:1}),b])}const q=r(y,[["render",m]]);export{D as __pageData,q as default};
diff --git a/assets/guide_components_date-picker_index.md.12vmUIup.lean.js b/assets/guide_components_date-picker_index.md.12vmUIup.lean.js
new file mode 100644
index 0000000..c96c625
--- /dev/null
+++ b/assets/guide_components_date-picker_index.md.12vmUIup.lean.js
@@ -0,0 +1 @@
+import{_ as r,q as d,Y as t,z as l,H as k,u as E,aq as h,S as p,p as g}from"./chunks/framework.DvIFzl91.js";const y={data(){return{theme:0,date:new Date}},computed:{$theme(){return this.theme?"dark":"light"},divStyle(){return this.$theme=="light"?{backgroundColor:"#fff",padding:"20px",color:"#000"}:{backgroundColor:"#000",padding:"20px",color:"#fff"}}}},D=JSON.parse('{"title":"DatePicker","description":"","frontmatter":{"page":true,"title":"DatePicker"},"headers":[],"relativePath":"guide/components/date-picker/index.md","filePath":"guide/components/date-picker/index.md"}'),o=k("h3",{id:"datepicker-default",tabindex:"-1"},[E("DatePicker-Default "),k("a",{class:"header-anchor",href:"#datepicker-default","aria-label":'Permalink to "DatePicker-Default"'},"​")],-1),c=h("",2),u=h("",2),F=h("",2),C=h("",2),b=h("",7);function m(x,s,B,_,i,v){const e=p("fv-DatePicker"),n=p("ClientOnly");return g(),d("div",null,[o,t(n,null,{default:l(()=>[t(e,{style:{width:"150px"},modelValue:i.date,"onUpdate:modelValue":s[0]||(s[0]=a=>i.date=a)},null,8,["modelValue"])]),_:1}),c,t(n,null,{default:l(()=>[t(e,{modelValue:i.date,"onUpdate:modelValue":s[1]||(s[1]=a=>i.date=a),hideYear:!0},null,8,["modelValue"])]),_:1}),u,t(n,null,{default:l(()=>[t(e,{modelValue:i.date,"onUpdate:modelValue":s[2]||(s[2]=a=>i.date=a),showWeek:!0},null,8,["modelValue"])]),_:1}),F,t(n,null,{default:l(()=>[t(e,{modelValue:i.date,"onUpdate:modelValue":s[3]||(s[3]=a=>i.date=a),showWeek:!0,disabled:""},null,8,["modelValue"])]),_:1}),C,t(n,null,{default:l(()=>[t(e,{modelValue:i.date,"onUpdate:modelValue":s[4]||(s[4]=a=>i.date=a),showWeek:!0,inputBackground:"rgba(0, 90, 204, 0.6)",innerBorderColor:"rgb(0, 90, 153, 0.1)",hoverColor:"rgba(0, 204, 153, 0.1)"},null,8,["modelValue"])]),_:1}),b])}const q=r(y,[["render",m]]);export{D as __pageData,q as default};
diff --git a/assets/guide_components_details-list_index.md.CcgOCIyt.js b/assets/guide_components_details-list_index.md.CcgOCIyt.js
new file mode 100644
index 0000000..4d6ab28
--- /dev/null
+++ b/assets/guide_components_details-list_index.md.CcgOCIyt.js
@@ -0,0 +1,280 @@
+import{_ as b,q as g,Y as e,z as n,H as a,u as c,aq as E,S as k,p as r,U as F,V as C,v as l,y as v}from"./chunks/framework.DvIFzl91.js";const q={data(){return{value:[{id:"",name:"Windows 10（2019 年 11 月更新）",publisher:"user",userInfo:{id:"",name:"MSClub"},publish_time:"2019/10/10 1:37:41 PM",update_time:"2019/10/10 1:37:41 PM",prop:"Windows"},{id:"",name:"Windows",publisher:"user",userInfo:{id:"",name:"MSClub"},publish_time:"2019/10/10 1:05:21 PM",update_time:"2019/10/10 7:59:50 PM",prop:"Edge"},{id:"",name:"macOS",publisher:"user",userInfo:{id:"",name:"MSClub"},publish_time:"2019/10/10 7:12:23 PM",update_time:"2019/10/10 7:59:45 PM",prop:"Edge"},{id:"",name:"Android",publisher:"user",userInfo:{id:"",name:"MSClub"},publish_time:"2019/10/10 7:12:45 PM",update_time:"2019/10/10 7:12:45 PM",prop:"Edge"},{id:"",name:"iOS",publisher:"user",userInfo:{id:"",name:"MSClub"},publish_time:"2019/10/10 7:12:29 PM",update_time:"2019/10/10 7:12:29 PM",prop:"Edge"},{id:"",name:"Windows 10（2019 年 5 月更新）",publisher:"user",userInfo:{id:"",name:"MSC"},publish_time:"2019/10/10 6:51:07 PM",update_time:"2019/10/10 6:51:07 PM",prop:"Windows"},{id:"",name:"Windows 10（2018 年 10 月更新）",publisher:"user",userInfo:{id:"",name:"Alever"},publish_time:"2019/10/10 9:30:10 PM",update_time:"2019/10/10 6:50:34 PM",prop:"Windows"},{id:"",name:"Visual Studio Download Center",publisher:"user",userInfo:{id:"",name:"MSClub"},publish_time:"2019/10/10 1:26:39 PM",update_time:"2019/10/10 1:26:39 PM",prop:"Visual Studio"},{id:"",name:"Visual Studio Code",publisher:"user",userInfo:{id:"",name:"MSClub"},publish_time:"2019/10/10 1:23:46 PM",update_time:"2019/10/10 1:23:46 PM",prop:"Visual Studio"},{id:"",name:"Visual Studio 2019",publisher:"user",userInfo:{id:"",name:"MSClub"},publish_time:"2019/10/10 1:17:24 PM",update_time:"2019/10/10 1:17:24 PM",prop:"Visual Studio"},{id:"",name:"Microsoft Office 365",publisher:"user",userInfo:{id:"",name:"MSClub"},publish_time:"2019/10/10 10:32:18 AM",update_time:"2019/10/10 10:32:18 AM",prop:"Office"},{id:"",name:"Windows 7",publisher:"user",userInfo:{id:"",name:"Alever"},publish_time:"2019/10/10 4:24:17 PM",update_time:"2019/10/10 3:46:50 PM",prop:"Windows"},{id:"",name:"Windows 8",publisher:"user",userInfo:{id:"",name:"Alever"},publish_time:"2019/10/10 9:29:59 PM",update_time:"2019/10/10 3:46:44 PM",prop:"Windows"},{id:"",name:"Microsoft  Office 2013",publisher:"user",userInfo:{id:"",name:"MSClub"},publish_time:"2019/10/10 9:09:02 AM",update_time:"2019/10/10 3:46:20 PM",prop:"Office"},{id:"",name:"Microsoft  Office 2016",publisher:"user",userInfo:{id:"",name:"MSClub"},publish_time:"2019/10/10 9:09:12 AM",update_time:"2019/10/10 3:46:14 PM",prop:"Office"},{id:"",name:"Microsoft Office 2019",publisher:"user",userInfo:{id:"",name:"MSClub"},publish_time:"2019/10/10 9:09:16 AM",update_time:"2019/10/10 3:46:05 PM",prop:"Office"},{id:"",name:"Windows 8.1",publisher:"user",userInfo:{id:"",name:"MSClub"},publish_time:"2019/10/10 3:40:37 PM",update_time:"2019/10/10 3:40:37 PM",prop:"Windows"},{id:"",name:"Windows Vista",publisher:"user",userInfo:{id:"",name:"MSClub"},publish_time:"2019/10/10 3:40:30 PM",update_time:"2019/10/10 3:40:30 PM",prop:"Windows"},{id:"",name:"Windows XP ",publisher:"user",userInfo:{id:"",name:"MSClub"},publish_time:"2019/10/10 3:40:22 PM",update_time:"2019/10/10 3:40:22 PM",prop:"Windows"}],head:[{content:"Name",minWidth:60,width:80,sortName:"name",visible:!0},{content:"Publisher",minWidth:60,width:80,sortName:"publisher",visible:!0},{content:"Publish Time",minWidth:60,width:190,sortName:"publish_time",visible:!0},{content:"Prop",minWidth:60,width:92,sortName:"prop",visible:!0},{content:"User Name",minWidth:60,width:80,visible:!0}],group:[{key:"prop",value:"Windows",name:"A"},{key:"prop",value:"Edge",name:"B"},{key:"prop",value:"Office",name:"C"},{key:"prop",value:"Visual Studio",name:"D"}],multiSelection:!1,compact:!1,filter:{key:"name",value:""}}}},ts=JSON.parse('{"title":"DetailsList","description":"","frontmatter":{"page":true,"title":"DetailsList"},"headers":[],"relativePath":"guide/components/details-list/index.md","filePath":"guide/components/details-list/index.md"}'),_=a("h3",{id:"detailslist-demo",tabindex:"-1"},[c("DetailsList-DEMO "),a("a",{class:"header-anchor",href:"#detailslist-demo","aria-label":'Permalink to "DetailsList-DEMO"'},"​")],-1),B=a("hr",null,null,-1),x={style:{padding:"15px",display:"flex","overflow-x":"auto"}},D={class:"sec"},f={class:"sec"},A={class:"sec"},w={class:"sec"},S=E(`<div style="width:100%;height:100px;"></div><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-DetailsList</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">value</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">head</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">head</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;template v-slot:column_0=&quot;x&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;p&gt;{{x.item.name}}&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;template v-slot:column_1=&quot;x&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;p class=&quot;sec&quot;&gt;{{x.item.publisher}}&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;template v-slot:column_2=&quot;x&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;p class=&quot;sec&quot;&gt;{{x.item.publish_time}}&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/template&gt;&lt;template v-slot:column_3=&quot;x&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;p class=&quot;sec&quot;&gt;{{x.item.prop}}&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;template v-slot:column_4=&quot;x&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;p class=&quot;sec&quot;&gt;{{x.item.userInfo.name}}&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-DetailsList</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><h3 id="detailslist-allow-drag" tabindex="-1">DetailsList-Allow Drag <a class="header-anchor" href="#detailslist-allow-drag" aria-label="Permalink to &quot;DetailsList-Allow Drag&quot;">​</a></h3><hr>`,4),M={class:"sec"},P={class:"sec"},V={class:"sec"},I={class:"sec"},N=E(`<div style="width:100%;height:100px;"></div><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-DetailsList</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">value</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">head</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">head</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">multiSelection</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">compact</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">compact</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">allowDrag</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      &lt;template v-slot:column_0=&quot;x&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">          &lt;p&gt;{{x.item.name}}&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      &lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      &lt;template v-slot:column_1=&quot;x&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">          &lt;p class=&quot;sec&quot;&gt;{{x.item.publisher}}&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      &lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      &lt;template v-slot:column_2=&quot;x&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">          &lt;p class=&quot;sec&quot;&gt;{{x.item.publish_time}}&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      &lt;/template&gt;&lt;template v-slot:column_3=&quot;x&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">          &lt;p class=&quot;sec&quot;&gt;{{x.item.prop}}&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      &lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      &lt;template v-slot:column_4=&quot;x&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">          &lt;p class=&quot;sec&quot;&gt;{{x.item.userInfo.name}}&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      &lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-DetailsList</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br></div></div><h3 id="detailslist-grouped" tabindex="-1">DetailsList-Grouped <a class="header-anchor" href="#detailslist-grouped" aria-label="Permalink to &quot;DetailsList-Grouped&quot;">​</a></h3><hr>`,4),T={class:"sec"},W={class:"sec"},L={class:"sec"},O={class:"sec"},G=E(`<div style="width:100%;height:100px;"></div><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-DetailsList</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">value</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">head</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">head</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">multiSelection</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">multiSelection</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">compact</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">compact</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">group</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">group</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">showGroup</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;template v-slot:column_0=&quot;x&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;p&gt;{{x.item.name}}&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;template v-slot:column_1=&quot;x&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;p class=&quot;sec&quot;&gt;{{x.item.publisher}}&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;template v-slot:column_2=&quot;x&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;p class=&quot;sec&quot;&gt;{{x.item.publish_time}}&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/template&gt;&lt;template v-slot:column_3=&quot;x&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;p class=&quot;sec&quot;&gt;{{x.item.prop}}&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;template v-slot:column_4=&quot;x&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;p class=&quot;sec&quot;&gt;{{x.item.userInfo.name}}&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-DetailsList</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br></div></div><h3 id="detailslist-dark-theme" tabindex="-1">DetailsList-Dark Theme <a class="header-anchor" href="#detailslist-dark-theme" aria-label="Permalink to &quot;DetailsList-Dark Theme&quot;">​</a></h3><hr>`,4),U={style:{position:"relative",width:"100%",height:"700px",background:"black"}},R={class:"sec"},j={class:"sec"},z={class:"sec"},H={class:"sec"},Y=E(`<div style="width:100%;height:100px;"></div><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-DetailsList</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">value</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">head</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">head</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">multiSelection</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">multiSelection</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">compact</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">compact</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;template v-slot:column_0=&quot;x&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;p&gt;{{x.item.name}}&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;template v-slot:column_1=&quot;x&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;p&gt;{{x.item.publisher}}&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;template v-slot:column_2=&quot;x&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;p&gt;{{x.item.publish_time}}&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/template&gt;&lt;template v-slot:column_3=&quot;x&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;p&gt;{{x.item.prop}}&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;template v-slot:column_4=&quot;x&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;p&gt;{{x.item.userInfo.name}}&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-DetailsList</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br></div></div><h3 id="detailslist-customize-row-css" tabindex="-1">DetailsList Customize Row CSS <a class="header-anchor" href="#detailslist-customize-row-css" aria-label="Permalink to &quot;DetailsList Customize Row CSS&quot;">​</a></h3><hr>`,4),J={class:"sec"},X={class:"sec"},K={class:"sec"},Q={class:"sec"},Z=E(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-DetailsList</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">value</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">head</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">head</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">filter</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">filter</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">multiSelection</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">multiSelection</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">compact</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">compact</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> rowCss</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;fv-row-css&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;template v-slot:column_0=&quot;x&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;p&gt;{{x.item.name}}&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;template v-slot:column_1=&quot;x&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;p class=&quot;sec&quot;&gt;{{x.item.publisher}}&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;template v-slot:column_2=&quot;x&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;p class=&quot;sec&quot;&gt;{{x.item.publish_time}}&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/template&gt;&lt;template v-slot:column_3=&quot;x&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;p class=&quot;sec&quot;&gt;{{x.item.prop}}&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;template v-slot:column_4=&quot;x&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;p class=&quot;sec&quot;&gt;{{x.item.userInfo.name}}&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-DetailsList</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><div class="language-scss vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">scss</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.fv-row-css</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
+<span class="line"><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">    &amp;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">:nth-child</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">odd</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">        background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">rgba</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">239</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">239</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">239</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    }</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">    &amp;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">:nth-child</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">even</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">        background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">rgba</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">245</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">245</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">245</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">value</td><td style="text-align:center;">Array</td><td style="text-align:center;">Yes</td><td style="text-align:center;">N/A</td><td style="text-align:center;">列表数据, 数据格式详见数据格式表</td></tr><tr><td style="text-align:center;">head</td><td style="text-align:center;">Array</td><td style="text-align:center;">Yes</td><td style="text-align:center;">N/A</td><td style="text-align:center;">表头数据, 数据格式详见数据格式表</td></tr><tr><td style="text-align:center;">group</td><td style="text-align:center;">Array</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">分组数据, 数据格式详见数据格式表</td></tr><tr><td style="text-align:center;">filter</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">搜索筛选, 数据格式详见数据格式表, 控制表显示哪些搜索字段</td></tr><tr><td style="text-align:center;">showGroup</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否开启按组分割显示, 开启后排序功能将失效, 默认不开启, 若 group 为空, 则开启后表格内容为空</td></tr><tr><td style="text-align:center;">autoHeight</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否开启自动高度</td></tr><tr><td style="text-align:center;">foreground</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">表格前景色</td></tr><tr><td style="text-align:center;">headBackground</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">表头背景, 不会修改点燃颜色, 若要修改点燃颜色请自定义 fv-custom-head 类样式</td></tr><tr><td style="text-align:center;">compact</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否开启收缩模式</td></tr><tr><td style="text-align:center;">multiSelection</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否开启多选模式</td></tr><tr><td style="text-align:center;">allowDrag</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否开启拖动排序</td></tr><tr><td style="text-align:center;">rowCSS</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">客制化每一行的样式</td></tr><tr><td style="text-align:center;">rightMenuWidth</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">200</td><td style="text-align:center;">右键菜单宽度设置</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">system</td><td style="text-align:center;">主题样式, 包含<code>light</code>, <code>dark</code>, <code>system</code>, <code>custom</code>几种样式</td></tr></tbody></table><h3 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to &quot;Events&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">事件名(Name)</th><th style="text-align:center;">参数类型(args)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">change-value</td><td style="text-align:center;">修改后的 value</td><td style="text-align:center;">在列表内部的 value 发生改变后会触发事件并返回修改后的 value</td></tr><tr><td style="text-align:center;">choose-items</td><td style="text-align:center;">currentChoose</td><td style="text-align:center;">在选择某行数据后返回被选中的数据</td></tr><tr><td style="text-align:center;">lazyload</td><td style="text-align:center;">修改后的 value</td><td style="text-align:center;">滚动到底部加载数据, 返回列表内部的 value</td></tr><tr><td style="text-align:center;">rightclick</td><td style="text-align:center;">当前选中的 row-item</td><td style="text-align:center;">右键菜单返回当前选择的项目</td></tr><tr><td style="text-align:center;">drop-items</td><td style="text-align:center;">返回对象包含<code>transfer</code>和<code>value</code></td><td style="text-align:center;">项目拖拽释放后触发事件, <code>transfer</code>包含拖拽项目, <code>value</code>包含列表内部的value</td></tr></tbody></table><h3 id="slot" tabindex="-1">Slot <a class="header-anchor" href="#slot" aria-label="Permalink to &quot;Slot&quot;">​</a></h3><hr><ol><li>Head</li></ol><p>默认情况下用户可直接在<code>head</code>中定义<code>content</code>来应用默认样式, 不需要修改此模板, 可缺省 用户自定义样式时, 包含以下可选属性</p><ul><li>item: 当前项</li><li>index: 当前项索引</li></ul><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">head</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;default-title&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;{{ x.item.content }}&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ol start="2"><li>Column</li></ol><p>用户根据<code>head</code>中的数量通过<code>column_[数字]</code>的方式来定义每一列的模板 默认情况下利用<code>&lt;p&gt;</code>标签来表示正文, 通过<code>class=&quot;sec&quot;</code>来表示附属文本 用户自定义样式时, 包含以下可选属性</p><ul><li>item: 当前项</li><li>row_index: 当前项行号</li><li>col_index: 当前项列号</li></ul><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">column_0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;{{ x.item.name }}&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">column_1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;sec&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;{{ x.item.publisher }}&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">column_2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;sec&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;{{ x.item.publish_time }}&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt; &lt;/template</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">column_3</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;sec&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;{{ x.item.prop }}&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">column_4</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;sec&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;{{ x.item.userInfo.name }}&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><ol start="3"><li>Row Expand</li></ol><p>用户可以根据需要在每一行添加额外的内容, 如下拉菜单, 注意自定义的内容定位需要设置为&#39;absolute&#39;.</p><ul><li>item: 当前项</li><li>row_index: 当前项行号</li></ul><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">row_expand</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">position</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">absolute</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ol start="4"><li>Group</li></ol><p>源代码, 默认不需要修改, 用户只需要定义<code>gi</code>数组中每一项的<code>name</code>来应用默认样式, 不需要定义此模板, 可缺省</p><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">slot</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;group&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">item</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">gi</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">index</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">i</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">isMulti</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">multiSelection</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">isChoose</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">isGroupChooseAll</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(gi)</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;span v-show=&quot;multiSelection&quot; class=&quot;icon-block icon&quot; key=&quot;multi-col&quot; @click=&quot;chooseGroup(gi)&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;span class=&quot;icon&quot; :class=&quot;{choose: isGroupChooseAll(gi)}&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            &lt;i class=&quot;ms-Icon ms-Icon--FullCircleMask ll&quot;&gt;&lt;/i&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            &lt;i class=&quot;ms-Icon ms-Icon--CircleRing ll&quot;&gt;&lt;/i&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            &lt;i class=&quot;ms-Icon ms-Icon--Completed ll&quot;&gt;&lt;/i&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;/span&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/span&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;span class=&quot;expand&quot; :class=&quot;{choose: gi.expand}&quot; @click=&quot;expandGroup(gi)&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;i class=&quot;ms-Icon ms-Icon--ChevronRight&quot;&gt;&lt;/i&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/span&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;span class=&quot;col&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;p&gt;{{gi.name}}&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/span&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><p>用户自定义样式时, 包含以下可选属性</p><ul><li>item: 当前组数据</li><li>index: 当前组索引</li><li>isMulti: 当前是否开启多选</li><li>isChoose: 当前组是否全选</li></ul><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">group</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;{{ x.item.name }}&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ol start="5"><li>Goup Content</li></ol><p>若用户想保留默认<code>Group</code>下拉样式并且只修改内容部分, 可使用<code>group_content</code>来重定义样式, 默认值为:</p><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">slot</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;group_content&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">item</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">gi</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">index</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">i</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;span class=&quot;col&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;p&gt;{{gi.name}}&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/span&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>用户自定义样式时, 包含以下可选属性</p><ul><li>item: 当前组数据</li><li>index: 当前组索引</li><li>isMulti: 当前是否开启多选</li><li>isChoose: 当前组是否全选</li></ul><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">group_content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;{{ x.item.name }}&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ol start="6"><li>Context Menu</li></ol><p>默认显示列表选中数量</p><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">menu</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">i</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;[图标]&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">i</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;[内容]&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    ...</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">hr</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">i</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;[图标]&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">i</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;[内容]&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><h3 id="data" tabindex="-1">Data <a class="header-anchor" href="#data" aria-label="Permalink to &quot;Data&quot;">​</a></h3><hr><ol><li>value</li></ol><div class="language-javascript vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">value </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [{any: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">...</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}]</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">//e.g.//</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: [{id: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, publisher: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, userInfo: {}, publish_time: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, update_time: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, prop: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}]</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><ol start="2"><li>head</li></ol><div class="language-javascript vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">head </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    content: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">//默认表头的列名</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    minWidth: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">//最小的列宽, 默认为60</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    width: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">//初始的列宽, 默认为80</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    sortName: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">//按字段名来排序, 名字为value中的属性, DetailsList将根据当前的属性类型智能排序</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    customSort: {}, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">//自定义排序方法, 在此定义函数满足预设两个参数(itemA, itemB)分别代表value中的两项并根据用户需要自定义函数方法, 此字段定义后, sortName仍需填写, 但值可任意</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    visible: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> //是否显示该列, 支持函数式声明</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">];</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">**</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">特别地</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">**</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 0.2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.17版本后支持采用函数式字段, </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">其中支持的字段包括</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">\`visible\`</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">//e.g.//</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">head</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: [</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    content: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Name&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    minWidth: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">60</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    width: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">80</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    sortName: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;name&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    visible: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    content: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Publisher&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    minWidth: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">60</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    width: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">80</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    sortName: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;publisher&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    visible: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    content: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Publish Time&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    minWidth: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">60</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    width: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">190</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    sortName: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;publish_time&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    visible: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    content: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Prop&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    minWidth: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">60</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    width: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">92</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    sortName: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;prop&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    visible: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    content: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;User Name&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    minWidth: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">60</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    width: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">80</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    visible: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">];</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br></div></div><ol start="3"><li>group</li></ol><div class="language-javascript vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">group </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">//分组的键值, 键来自value的属性</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    value: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">//分组的键值对应的具体值, DetailsList会根据当前的key匹配value来进行分组</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;&quot;</span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> //分组的其他数据, 默认模板将以name属性来渲染名称</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">];</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">//e.g.//</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">group</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: [</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;prop&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    value: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Windows&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;A&quot;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;prop&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    value: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Edge&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;B&quot;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;prop&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    value: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Office&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;C&quot;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;prop&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    value: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Visual Studio&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;D&quot;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">];</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br></div></div><h3 id="custom-class" tabindex="-1">Custom Class <a class="header-anchor" href="#custom-class" aria-label="Permalink to &quot;Custom Class&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">类名(Name)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">fv-custom-head</td><td style="text-align:center;">客制化表头, 主要递推关系: fv-custom-head -&gt; icon-block, col -&gt; col-content, expand -&gt; default-title</td></tr><tr><td style="text-align:center;">fv-custom-row</td><td style="text-align:center;">客制化行, 主要递推关系: fv-custom-row -&gt; icon-block, col</td></tr><tr><td style="text-align:center;">fv-custom-group-row</td><td style="text-align:center;">客制化组, 主要递推关系: fv-custom-group-row -&gt; icon-blocks, expand, col</td></tr></tbody></table><div class="language-scss vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">scss</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.fv-custom-head</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  .icon-block</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    .icon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  .col</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    .col-content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">      .default-title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    }</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    .expand</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.fv-custom-row</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  .icon-block</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    .icon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  .col</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.fv-custom-group-row</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">  &amp;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.choose</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  .icon-block</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    .icon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  .col</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  .expand</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br></div></div>`,49);function $(ss,t,is,as,i,ns){const u=k("fv-text-box"),d=k("fv-toggle-switch"),o=k("fv-check-box"),p=k("fv-DetailsList"),h=k("ClientOnly");return r(),g("div",null,[_,B,e(h,null,{default:n(()=>[a("div",null,[e(u,{modelValue:i.filter.value,"onUpdate:modelValue":t[0]||(t[0]=s=>i.filter.value=s),placeholder:"Filter by name"},null,8,["modelValue"]),e(d,{modelValue:i.multiSelection,"onUpdate:modelValue":t[1]||(t[1]=s=>i.multiSelection=s),on:"Multi-Selection",off:"Single-Selection"},null,8,["modelValue"]),e(d,{modelValue:i.compact,"onUpdate:modelValue":t[2]||(t[2]=s=>i.compact=s),on:"Compact",off:"Normal"},null,8,["modelValue"]),a("div",x,[(r(!0),g(F,null,C(i.head,(s,y)=>(r(),v(o,{modelValue:s.visible,"onUpdate:modelValue":m=>s.visible=m,key:y,style:{"margin-right":"5px"}},{default:n(()=>[c(l(s.visible?"Show":"Hide")+" "+l(s.content),1)]),_:2},1032,["modelValue","onUpdate:modelValue"]))),128))]),e(p,{modelValue:i.value,"onUpdate:modelValue":t[3]||(t[3]=s=>i.value=s),head:i.head,filter:i.filter,multiSelection:i.multiSelection,compact:i.compact},{column_0:n(s=>[a("p",null,l(s.item.name),1)]),column_1:n(s=>[a("p",D,l(s.item.publisher),1)]),column_2:n(s=>[a("p",f,l(s.item.publish_time),1)]),column_3:n(s=>[a("p",A,l(s.item.prop),1)]),column_4:n(s=>[a("p",w,l(s.item.userInfo.name),1)]),_:1},8,["modelValue","head","filter","multiSelection","compact"])])]),_:1}),S,e(h,null,{default:n(()=>[a("div",null,[e(p,{modelValue:i.value,"onUpdate:modelValue":t[4]||(t[4]=s=>i.value=s),head:i.head,multiSelection:!0,compact:i.compact,allowDrag:!0},{column_0:n(s=>[a("p",null,l(s.item.name),1)]),column_1:n(s=>[a("p",M,l(s.item.publisher),1)]),column_2:n(s=>[a("p",P,l(s.item.publish_time),1)]),column_3:n(s=>[a("p",V,l(s.item.prop),1)]),column_4:n(s=>[a("p",I,l(s.item.userInfo.name),1)]),_:1},8,["modelValue","head","compact"])])]),_:1}),N,e(h,null,{default:n(()=>[e(p,{modelValue:i.value,"onUpdate:modelValue":t[5]||(t[5]=s=>i.value=s),head:i.head,multiSelection:i.multiSelection,compact:i.compact,group:i.group,showGroup:!0,allowDrag:!0},{column_0:n(s=>[a("p",null,l(s.item.name),1)]),column_1:n(s=>[a("p",T,l(s.item.publisher),1)]),column_2:n(s=>[a("p",W,l(s.item.publish_time),1)]),column_3:n(s=>[a("p",L,l(s.item.prop),1)]),column_4:n(s=>[a("p",O,l(s.item.userInfo.name),1)]),_:1},8,["modelValue","head","multiSelection","compact","group"])]),_:1}),G,e(h,null,{default:n(()=>[a("div",U,[e(p,{modelValue:i.value,"onUpdate:modelValue":t[6]||(t[6]=s=>i.value=s),head:i.head,multiSelection:i.multiSelection,compact:i.compact,group:i.group,showGroup:!0,theme:"dark"},{column_0:n(s=>[a("p",null,l(s.item.name),1)]),column_1:n(s=>[a("p",R,l(s.item.publisher),1)]),column_2:n(s=>[a("p",j,l(s.item.publish_time),1)]),column_3:n(s=>[a("p",z,l(s.item.prop),1)]),column_4:n(s=>[a("p",H,l(s.item.userInfo.name),1)]),_:1},8,["modelValue","head","multiSelection","compact","group"])])]),_:1}),Y,e(h,null,{default:n(()=>[a("div",null,[e(p,{modelValue:i.value,"onUpdate:modelValue":t[7]||(t[7]=s=>i.value=s),head:i.head,filter:i.filter,multiSelection:i.multiSelection,compact:i.compact,rowCss:"fv-row-css"},{column_0:n(s=>[a("p",null,l(s.item.name),1)]),column_1:n(s=>[a("p",J,l(s.item.publisher),1)]),column_2:n(s=>[a("p",X,l(s.item.publish_time),1)]),column_3:n(s=>[a("p",K,l(s.item.prop),1)]),column_4:n(s=>[a("p",Q,l(s.item.userInfo.name),1)]),_:1},8,["modelValue","head","filter","multiSelection","compact"])])]),_:1}),Z])}const es=b(q,[["render",$]]);export{ts as __pageData,es as default};
diff --git a/assets/guide_components_details-list_index.md.CcgOCIyt.lean.js b/assets/guide_components_details-list_index.md.CcgOCIyt.lean.js
new file mode 100644
index 0000000..ae7d062
--- /dev/null
+++ b/assets/guide_components_details-list_index.md.CcgOCIyt.lean.js
@@ -0,0 +1 @@
+import{_ as b,q as g,Y as e,z as n,H as a,u as c,aq as E,S as k,p as r,U as F,V as C,v as l,y as v}from"./chunks/framework.DvIFzl91.js";const q={data(){return{value:[{id:"",name:"Windows 10（2019 年 11 月更新）",publisher:"user",userInfo:{id:"",name:"MSClub"},publish_time:"2019/10/10 1:37:41 PM",update_time:"2019/10/10 1:37:41 PM",prop:"Windows"},{id:"",name:"Windows",publisher:"user",userInfo:{id:"",name:"MSClub"},publish_time:"2019/10/10 1:05:21 PM",update_time:"2019/10/10 7:59:50 PM",prop:"Edge"},{id:"",name:"macOS",publisher:"user",userInfo:{id:"",name:"MSClub"},publish_time:"2019/10/10 7:12:23 PM",update_time:"2019/10/10 7:59:45 PM",prop:"Edge"},{id:"",name:"Android",publisher:"user",userInfo:{id:"",name:"MSClub"},publish_time:"2019/10/10 7:12:45 PM",update_time:"2019/10/10 7:12:45 PM",prop:"Edge"},{id:"",name:"iOS",publisher:"user",userInfo:{id:"",name:"MSClub"},publish_time:"2019/10/10 7:12:29 PM",update_time:"2019/10/10 7:12:29 PM",prop:"Edge"},{id:"",name:"Windows 10（2019 年 5 月更新）",publisher:"user",userInfo:{id:"",name:"MSC"},publish_time:"2019/10/10 6:51:07 PM",update_time:"2019/10/10 6:51:07 PM",prop:"Windows"},{id:"",name:"Windows 10（2018 年 10 月更新）",publisher:"user",userInfo:{id:"",name:"Alever"},publish_time:"2019/10/10 9:30:10 PM",update_time:"2019/10/10 6:50:34 PM",prop:"Windows"},{id:"",name:"Visual Studio Download Center",publisher:"user",userInfo:{id:"",name:"MSClub"},publish_time:"2019/10/10 1:26:39 PM",update_time:"2019/10/10 1:26:39 PM",prop:"Visual Studio"},{id:"",name:"Visual Studio Code",publisher:"user",userInfo:{id:"",name:"MSClub"},publish_time:"2019/10/10 1:23:46 PM",update_time:"2019/10/10 1:23:46 PM",prop:"Visual Studio"},{id:"",name:"Visual Studio 2019",publisher:"user",userInfo:{id:"",name:"MSClub"},publish_time:"2019/10/10 1:17:24 PM",update_time:"2019/10/10 1:17:24 PM",prop:"Visual Studio"},{id:"",name:"Microsoft Office 365",publisher:"user",userInfo:{id:"",name:"MSClub"},publish_time:"2019/10/10 10:32:18 AM",update_time:"2019/10/10 10:32:18 AM",prop:"Office"},{id:"",name:"Windows 7",publisher:"user",userInfo:{id:"",name:"Alever"},publish_time:"2019/10/10 4:24:17 PM",update_time:"2019/10/10 3:46:50 PM",prop:"Windows"},{id:"",name:"Windows 8",publisher:"user",userInfo:{id:"",name:"Alever"},publish_time:"2019/10/10 9:29:59 PM",update_time:"2019/10/10 3:46:44 PM",prop:"Windows"},{id:"",name:"Microsoft  Office 2013",publisher:"user",userInfo:{id:"",name:"MSClub"},publish_time:"2019/10/10 9:09:02 AM",update_time:"2019/10/10 3:46:20 PM",prop:"Office"},{id:"",name:"Microsoft  Office 2016",publisher:"user",userInfo:{id:"",name:"MSClub"},publish_time:"2019/10/10 9:09:12 AM",update_time:"2019/10/10 3:46:14 PM",prop:"Office"},{id:"",name:"Microsoft Office 2019",publisher:"user",userInfo:{id:"",name:"MSClub"},publish_time:"2019/10/10 9:09:16 AM",update_time:"2019/10/10 3:46:05 PM",prop:"Office"},{id:"",name:"Windows 8.1",publisher:"user",userInfo:{id:"",name:"MSClub"},publish_time:"2019/10/10 3:40:37 PM",update_time:"2019/10/10 3:40:37 PM",prop:"Windows"},{id:"",name:"Windows Vista",publisher:"user",userInfo:{id:"",name:"MSClub"},publish_time:"2019/10/10 3:40:30 PM",update_time:"2019/10/10 3:40:30 PM",prop:"Windows"},{id:"",name:"Windows XP ",publisher:"user",userInfo:{id:"",name:"MSClub"},publish_time:"2019/10/10 3:40:22 PM",update_time:"2019/10/10 3:40:22 PM",prop:"Windows"}],head:[{content:"Name",minWidth:60,width:80,sortName:"name",visible:!0},{content:"Publisher",minWidth:60,width:80,sortName:"publisher",visible:!0},{content:"Publish Time",minWidth:60,width:190,sortName:"publish_time",visible:!0},{content:"Prop",minWidth:60,width:92,sortName:"prop",visible:!0},{content:"User Name",minWidth:60,width:80,visible:!0}],group:[{key:"prop",value:"Windows",name:"A"},{key:"prop",value:"Edge",name:"B"},{key:"prop",value:"Office",name:"C"},{key:"prop",value:"Visual Studio",name:"D"}],multiSelection:!1,compact:!1,filter:{key:"name",value:""}}}},ts=JSON.parse('{"title":"DetailsList","description":"","frontmatter":{"page":true,"title":"DetailsList"},"headers":[],"relativePath":"guide/components/details-list/index.md","filePath":"guide/components/details-list/index.md"}'),_=a("h3",{id:"detailslist-demo",tabindex:"-1"},[c("DetailsList-DEMO "),a("a",{class:"header-anchor",href:"#detailslist-demo","aria-label":'Permalink to "DetailsList-DEMO"'},"​")],-1),B=a("hr",null,null,-1),x={style:{padding:"15px",display:"flex","overflow-x":"auto"}},D={class:"sec"},f={class:"sec"},A={class:"sec"},w={class:"sec"},S=E("",4),M={class:"sec"},P={class:"sec"},V={class:"sec"},I={class:"sec"},N=E("",4),T={class:"sec"},W={class:"sec"},L={class:"sec"},O={class:"sec"},G=E("",4),U={style:{position:"relative",width:"100%",height:"700px",background:"black"}},R={class:"sec"},j={class:"sec"},z={class:"sec"},H={class:"sec"},Y=E("",4),J={class:"sec"},X={class:"sec"},K={class:"sec"},Q={class:"sec"},Z=E("",49);function $(ss,t,is,as,i,ns){const u=k("fv-text-box"),d=k("fv-toggle-switch"),o=k("fv-check-box"),p=k("fv-DetailsList"),h=k("ClientOnly");return r(),g("div",null,[_,B,e(h,null,{default:n(()=>[a("div",null,[e(u,{modelValue:i.filter.value,"onUpdate:modelValue":t[0]||(t[0]=s=>i.filter.value=s),placeholder:"Filter by name"},null,8,["modelValue"]),e(d,{modelValue:i.multiSelection,"onUpdate:modelValue":t[1]||(t[1]=s=>i.multiSelection=s),on:"Multi-Selection",off:"Single-Selection"},null,8,["modelValue"]),e(d,{modelValue:i.compact,"onUpdate:modelValue":t[2]||(t[2]=s=>i.compact=s),on:"Compact",off:"Normal"},null,8,["modelValue"]),a("div",x,[(r(!0),g(F,null,C(i.head,(s,y)=>(r(),v(o,{modelValue:s.visible,"onUpdate:modelValue":m=>s.visible=m,key:y,style:{"margin-right":"5px"}},{default:n(()=>[c(l(s.visible?"Show":"Hide")+" "+l(s.content),1)]),_:2},1032,["modelValue","onUpdate:modelValue"]))),128))]),e(p,{modelValue:i.value,"onUpdate:modelValue":t[3]||(t[3]=s=>i.value=s),head:i.head,filter:i.filter,multiSelection:i.multiSelection,compact:i.compact},{column_0:n(s=>[a("p",null,l(s.item.name),1)]),column_1:n(s=>[a("p",D,l(s.item.publisher),1)]),column_2:n(s=>[a("p",f,l(s.item.publish_time),1)]),column_3:n(s=>[a("p",A,l(s.item.prop),1)]),column_4:n(s=>[a("p",w,l(s.item.userInfo.name),1)]),_:1},8,["modelValue","head","filter","multiSelection","compact"])])]),_:1}),S,e(h,null,{default:n(()=>[a("div",null,[e(p,{modelValue:i.value,"onUpdate:modelValue":t[4]||(t[4]=s=>i.value=s),head:i.head,multiSelection:!0,compact:i.compact,allowDrag:!0},{column_0:n(s=>[a("p",null,l(s.item.name),1)]),column_1:n(s=>[a("p",M,l(s.item.publisher),1)]),column_2:n(s=>[a("p",P,l(s.item.publish_time),1)]),column_3:n(s=>[a("p",V,l(s.item.prop),1)]),column_4:n(s=>[a("p",I,l(s.item.userInfo.name),1)]),_:1},8,["modelValue","head","compact"])])]),_:1}),N,e(h,null,{default:n(()=>[e(p,{modelValue:i.value,"onUpdate:modelValue":t[5]||(t[5]=s=>i.value=s),head:i.head,multiSelection:i.multiSelection,compact:i.compact,group:i.group,showGroup:!0,allowDrag:!0},{column_0:n(s=>[a("p",null,l(s.item.name),1)]),column_1:n(s=>[a("p",T,l(s.item.publisher),1)]),column_2:n(s=>[a("p",W,l(s.item.publish_time),1)]),column_3:n(s=>[a("p",L,l(s.item.prop),1)]),column_4:n(s=>[a("p",O,l(s.item.userInfo.name),1)]),_:1},8,["modelValue","head","multiSelection","compact","group"])]),_:1}),G,e(h,null,{default:n(()=>[a("div",U,[e(p,{modelValue:i.value,"onUpdate:modelValue":t[6]||(t[6]=s=>i.value=s),head:i.head,multiSelection:i.multiSelection,compact:i.compact,group:i.group,showGroup:!0,theme:"dark"},{column_0:n(s=>[a("p",null,l(s.item.name),1)]),column_1:n(s=>[a("p",R,l(s.item.publisher),1)]),column_2:n(s=>[a("p",j,l(s.item.publish_time),1)]),column_3:n(s=>[a("p",z,l(s.item.prop),1)]),column_4:n(s=>[a("p",H,l(s.item.userInfo.name),1)]),_:1},8,["modelValue","head","multiSelection","compact","group"])])]),_:1}),Y,e(h,null,{default:n(()=>[a("div",null,[e(p,{modelValue:i.value,"onUpdate:modelValue":t[7]||(t[7]=s=>i.value=s),head:i.head,filter:i.filter,multiSelection:i.multiSelection,compact:i.compact,rowCss:"fv-row-css"},{column_0:n(s=>[a("p",null,l(s.item.name),1)]),column_1:n(s=>[a("p",J,l(s.item.publisher),1)]),column_2:n(s=>[a("p",X,l(s.item.publish_time),1)]),column_3:n(s=>[a("p",K,l(s.item.prop),1)]),column_4:n(s=>[a("p",Q,l(s.item.userInfo.name),1)]),_:1},8,["modelValue","head","filter","multiSelection","compact"])])]),_:1}),Z])}const es=b(q,[["render",$]]);export{ts as __pageData,es as default};
diff --git a/assets/guide_components_drawer_index.md.D_vpnCpE.js b/assets/guide_components_drawer_index.md.D_vpnCpE.js
new file mode 100644
index 0000000..e05cbdb
--- /dev/null
+++ b/assets/guide_components_drawer_index.md.D_vpnCpE.js
@@ -0,0 +1,5 @@
+import{_ as k,q as g,Y as i,z as n,H as t,u as l,aq as c,S as r,p as y}from"./chunks/framework.DvIFzl91.js";const E={data(){return{visible:!1,v2:!1,theme:0}},methods:{toggle(){this.visible=!this.visible}},computed:{divStyle(){return this.$theme=="light"?{backgroundColor:"#fff",padding:"20px",color:"#000"}:{backgroundColor:"#000",padding:"20px",color:"#fff"}}}},D=JSON.parse('{"title":"Drawer","description":"","frontmatter":{"page":true,"title":"Drawer"},"headers":[],"relativePath":"guide/components/drawer/index.md","filePath":"guide/components/drawer/index.md"}'),u=t("h3",{id:"drawer",tabindex:"-1"},[l("Drawer "),t("a",{class:"header-anchor",href:"#drawer","aria-label":'Permalink to "Drawer"'},"​")],-1),m=t("hr",null,null,-1),x=t("div",{class:"language-vue vp-adaptive-theme line-numbers-mode"},[t("button",{title:"Copy Code",class:"copy"}),t("span",{class:"lang"},"vue"),t("pre",{class:"shiki shiki-themes github-light github-dark vp-code"},[t("code",null,[t("span",{class:"line"},[t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"<"),t("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-drawer"),t("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}}," v-model"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"visible"),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),t("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}}," appendBody"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")]),l(`
+`),t("span",{class:"line"},[t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"</"),t("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-drawer"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")])])]),t("div",{class:"line-numbers-wrapper","aria-hidden":"true"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br")])],-1),b=t("ul",null,[t("li",null,"Change Side")],-1),v=t("div",{class:"language-vue vp-adaptive-theme line-numbers-mode"},[t("button",{title:"Copy Code",class:"copy"}),t("span",{class:"lang"},"vue"),t("pre",{class:"shiki shiki-themes github-light github-dark vp-code"},[t("code",null,[t("span",{class:"line"},[t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"<"),t("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-drawer"),t("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}}," v-model"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"v2"),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),t("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}}," position"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"left"'),t("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}}," appendBody"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")]),l(`
+`),t("span",{class:"line"},[t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"</"),t("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-drawer"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")])])]),t("div",{class:"line-numbers-wrapper","aria-hidden":"true"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br")])],-1),f=c(`<h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">theme</td><td style="text-align:center;">[&#39;system&#39;, &#39;dark&#39;, &#39;light&#39;, &#39;custom&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;system&#39;</td><td style="text-align:center;">主题色</td></tr><tr><td style="text-align:center;">value</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否可视</td></tr><tr><td style="text-align:center;">length</td><td style="text-align:center;">[number, string]</td><td style="text-align:center;">No</td><td style="text-align:center;">300</td><td style="text-align:center;">抽屉长度</td></tr><tr><td style="text-align:center;">focusTrap</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否聚焦</td></tr><tr><td style="text-align:center;">zIndex</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">10</td><td style="text-align:center;">层叠数</td></tr><tr><td style="text-align:center;">position</td><td style="text-align:center;">[&#39;bottom&#39;, &#39;left&#39;, &#39;top&#39;, &#39;right&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;bottom&#39;</td><td style="text-align:center;">位置</td></tr><tr><td style="text-align:center;">appendBody</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否添加到body（IOS兼容）</td></tr></tbody></table><h3 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to &quot;Events&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">事件名(Name)</th><th style="text-align:center;">参数类型(args)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;"></td><td style="text-align:center;"></td><td style="text-align:center;"></td></tr></tbody></table><h3 id="slot" tabindex="-1">Slot <a class="header-anchor" href="#slot" aria-label="Permalink to &quot;Slot&quot;">​</a></h3><hr><ol><li>Default</li></ol><p>自定义容器内内容</p><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div>`,11);function _(C,e,F,w,s,o){const d=r("fv-button"),h=r("fv-drawer"),p=r("ClientOnly");return y(),g("div",null,[u,m,i(p,null,{default:n(()=>[i(d,{style:{width:"120px"},onClick:o.toggle},{default:n(()=>[l("Show / Hide")]),_:1},8,["onClick"]),i(h,{modelValue:s.visible,"onUpdate:modelValue":e[0]||(e[0]=a=>s.visible=a),appendBody:""},null,8,["modelValue"]),x,b,i(d,{style:{width:"120px"},onClick:e[1]||(e[1]=a=>s.v2^=!0)},{default:n(()=>[l("Show / Hide")]),_:1}),i(h,{modelValue:s.v2,"onUpdate:modelValue":e[2]||(e[2]=a=>s.v2=a),position:"left",appendBody:""},null,8,["modelValue"]),v]),_:1}),f])}const N=k(E,[["render",_]]);export{D as __pageData,N as default};
diff --git a/assets/guide_components_drawer_index.md.D_vpnCpE.lean.js b/assets/guide_components_drawer_index.md.D_vpnCpE.lean.js
new file mode 100644
index 0000000..9245807
--- /dev/null
+++ b/assets/guide_components_drawer_index.md.D_vpnCpE.lean.js
@@ -0,0 +1,3 @@
+import{_ as k,q as g,Y as i,z as n,H as t,u as l,aq as c,S as r,p as y}from"./chunks/framework.DvIFzl91.js";const E={data(){return{visible:!1,v2:!1,theme:0}},methods:{toggle(){this.visible=!this.visible}},computed:{divStyle(){return this.$theme=="light"?{backgroundColor:"#fff",padding:"20px",color:"#000"}:{backgroundColor:"#000",padding:"20px",color:"#fff"}}}},D=JSON.parse('{"title":"Drawer","description":"","frontmatter":{"page":true,"title":"Drawer"},"headers":[],"relativePath":"guide/components/drawer/index.md","filePath":"guide/components/drawer/index.md"}'),u=t("h3",{id:"drawer",tabindex:"-1"},[l("Drawer "),t("a",{class:"header-anchor",href:"#drawer","aria-label":'Permalink to "Drawer"'},"​")],-1),m=t("hr",null,null,-1),x=t("div",{class:"language-vue vp-adaptive-theme line-numbers-mode"},[t("button",{title:"Copy Code",class:"copy"}),t("span",{class:"lang"},"vue"),t("pre",{class:"shiki shiki-themes github-light github-dark vp-code"},[t("code",null,[t("span",{class:"line"},[t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"<"),t("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-drawer"),t("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}}," v-model"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"visible"),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),t("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}}," appendBody"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")]),l(`
+`),t("span",{class:"line"},[t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"</"),t("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-drawer"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")])])]),t("div",{class:"line-numbers-wrapper","aria-hidden":"true"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br")])],-1),b=t("ul",null,[t("li",null,"Change Side")],-1),v=t("div",{class:"language-vue vp-adaptive-theme line-numbers-mode"},[t("button",{title:"Copy Code",class:"copy"}),t("span",{class:"lang"},"vue"),t("pre",{class:"shiki shiki-themes github-light github-dark vp-code"},[t("code",null,[t("span",{class:"line"},[t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"<"),t("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-drawer"),t("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}}," v-model"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"v2"),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),t("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}}," position"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"left"'),t("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}}," appendBody"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")]),l(`
+`),t("span",{class:"line"},[t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"</"),t("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-drawer"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")])])]),t("div",{class:"line-numbers-wrapper","aria-hidden":"true"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br")])],-1),f=c("",11);function _(C,e,F,w,s,o){const d=r("fv-button"),h=r("fv-drawer"),p=r("ClientOnly");return y(),g("div",null,[u,m,i(p,null,{default:n(()=>[i(d,{style:{width:"120px"},onClick:o.toggle},{default:n(()=>[l("Show / Hide")]),_:1},8,["onClick"]),i(h,{modelValue:s.visible,"onUpdate:modelValue":e[0]||(e[0]=a=>s.visible=a),appendBody:""},null,8,["modelValue"]),x,b,i(d,{style:{width:"120px"},onClick:e[1]||(e[1]=a=>s.v2^=!0)},{default:n(()=>[l("Show / Hide")]),_:1}),i(h,{modelValue:s.v2,"onUpdate:modelValue":e[2]||(e[2]=a=>s.v2=a),position:"left",appendBody:""},null,8,["modelValue"]),v]),_:1}),f])}const N=k(E,[["render",_]]);export{D as __pageData,N as default};
diff --git a/assets/guide_components_drop-down_emits.md.BE95TdKW.js b/assets/guide_components_drop-down_emits.md.BE95TdKW.js
new file mode 100644
index 0000000..be11742
--- /dev/null
+++ b/assets/guide_components_drop-down_emits.md.BE95TdKW.js
@@ -0,0 +1 @@
+import{_ as t,q as e,p as a,aq as n}from"./chunks/framework.DvIFzl91.js";const u=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/components/drop-down/emits.md","filePath":"guide/components/drop-down/emits.md"}'),s={name:"guide/components/drop-down/emits.md"},o=n('<h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-label="Permalink to &quot;Emits&quot;">​</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead></table>',3),r=[o];function i(d,_,c,m,l,h){return a(),e("div",null,r)}const f=t(s,[["render",i]]);export{u as __pageData,f as default};
diff --git a/assets/guide_components_drop-down_emits.md.BE95TdKW.lean.js b/assets/guide_components_drop-down_emits.md.BE95TdKW.lean.js
new file mode 100644
index 0000000..f0b75d3
--- /dev/null
+++ b/assets/guide_components_drop-down_emits.md.BE95TdKW.lean.js
@@ -0,0 +1 @@
+import{_ as t,q as e,p as a,aq as n}from"./chunks/framework.DvIFzl91.js";const u=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/components/drop-down/emits.md","filePath":"guide/components/drop-down/emits.md"}'),s={name:"guide/components/drop-down/emits.md"},o=n("",3),r=[o];function i(d,_,c,m,l,h){return a(),e("div",null,r)}const f=t(s,[["render",i]]);export{u as __pageData,f as default};
diff --git a/assets/guide_components_drop-down_index.md.BZzJZQWq.js b/assets/guide_components_drop-down_index.md.BZzJZQWq.js
new file mode 100644
index 0000000..30363db
--- /dev/null
+++ b/assets/guide_components_drop-down_index.md.BZzJZQWq.js
@@ -0,0 +1,41 @@
+import{_ as d,q as o,Y as s,z as i,H as h,u as E,aq as n,S as k,p as g,v as y}from"./chunks/framework.DvIFzl91.js";const c={data(){return{value:[],options:[{key:"fruitsHeader",text:"Fruits",type:"header"},{key:"apple",text:"Apple"},{key:"banana",text:"Banana"},{key:"orange",text:"Orange",disabled:!0},{key:"grape",text:"Grape"},{key:"divider_1",text:"-",type:"divider"},{key:"vegetablesHeader",text:"Vegetables",type:"header"},{key:"broccoli",text:"Broccoli"},{key:"carrot",text:"Carrot"},{key:"lettuce",text:"Lettuce"}]}}},O=JSON.parse('{"title":"DropDown","description":"","frontmatter":{"page":true,"title":"DropDown"},"headers":[],"relativePath":"guide/components/drop-down/index.md","filePath":"guide/components/drop-down/index.md"}'),u=h("h3",{id:"dropdown-demo",tabindex:"-1"},[E("DropDown-DEMO "),h("a",{class:"header-anchor",href:"#dropdown-demo","aria-label":'Permalink to "DropDown-DEMO"'},"​")],-1),F=h("hr",null,null,-1),b=n('<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-DropDown</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">value</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">options</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">options</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Select an option&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-DropDown</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="dropdown-disabled" tabindex="-1">DropDown-Disabled <a class="header-anchor" href="#dropdown-disabled" aria-label="Permalink to &quot;DropDown-Disabled&quot;">​</a></h3><hr><ol><li>Set Disabled</li></ol>',4),m=n('<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-DropDown</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">value</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">options</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">options</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Select an option&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> disabled</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-DropDown</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><ol start="2"><li>DropDown without options</li></ol>',2),C=n('<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-DropDown</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Select an option&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-DropDown</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="dropdown-multiple-select" tabindex="-1">DropDown-Multiple Select <a class="header-anchor" href="#dropdown-multiple-select" aria-label="Permalink to &quot;DropDown-Multiple Select&quot;">​</a></h3><hr>',3),v=n('<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-DropDown</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">options</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">options</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Select options&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">multiple</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-DropDown</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="dropdown-customize" tabindex="-1">DropDown-Customize <a class="header-anchor" href="#dropdown-customize" aria-label="Permalink to &quot;DropDown-Customize&quot;">​</a></h3><hr><ol><li>Custom List Item</li></ol>',4),x=n(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-DropDown</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">options</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">options</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Select an option&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;template v-slot:options=&quot;item&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;p&gt;{{item.index}}&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-DropDown</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><ol start="2"><li>Custom Style</li></ol>`,2),_=n('<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-DropDown</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">options</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">options</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Select options&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">multiple</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> borderWidth</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;1&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> borderRadius</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;5&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> inputBackground</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rgba(0,204,153,0.9)&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> checkBoxBackground</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rgba(0, 204, 153, 0.9)&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> inputForeground</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;whitesmoke&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> dropDownIcon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;AddTo&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> dropDownIconForeground</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;whitesmoke&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> dropDownListForeground</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rgba(0,204,153,1)&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> dropDownListBackground</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rgba(239,239,239,0.6)&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-DropDown</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><ol start="3"><li>Custom Drop Down Input</li></ol>',2),q=h("i",{class:"ms-Icon ms-Icon--Dynamics365Logo left-icon"},null,-1),D=["placeholder","value"],B=h("i",{class:"ms-Icon ms-Icon--DelveAnalyticsLogo right-icon"},null,-1),w=n(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-DropDown</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">options</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">options</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Select options&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">multiple</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;template v-slot:input=&quot;x&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;i class=&quot;ms-Icon ms-Icon--Dynamics365Logo left-icon&quot;&gt;&lt;/i&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;input class=&quot;input&quot; :placeholder=&quot;x.placeholder&quot; :value=&quot;x.value&quot; style=&quot;padding-left: 36px; border: none;&quot;/&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;i class=&quot;ms-Icon ms-Icon--DelveAnalyticsLogo right-icon&quot;&gt;&lt;/i&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-DropDown</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><ol start="3"><li>Custom Drop Down Carrier</li></ol>`,2),A=h("p",null,"DropDown",-1),f=h("i",{class:"ms-Icon ms-Icon--ChevronDown",style:{"margin-left":"8px"}},null,-1),S=n(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-DropDown</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">options</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">options</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Select options&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">multiple</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">z-index</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">12</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;template v-slot:drop-carrier=&quot;x&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;fv-button :theme=&quot;x.theme&quot; :isBoxShadow=&quot;true&quot; style=&quot;width: 150px;&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            &lt;p&gt;DropDown&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            &lt;i class=&quot;ms-Icon ms-Icon--ChevronDown&quot; style=&quot;margin-left: 8px;&quot;&gt;&lt;/i&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;/fv-button&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-DropDown</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h3 id="dropdown-show-error" tabindex="-1">DropDown-Show Error <a class="header-anchor" href="#dropdown-show-error" aria-label="Permalink to &quot;DropDown-Show Error&quot;">​</a></h3><hr>`,3),T=n('<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-DropDown</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">options</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">options</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Select an option&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">showError</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-DropDown</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="dropdown-dark-theme" tabindex="-1">DropDown-Dark Theme <a class="header-anchor" href="#dropdown-dark-theme" aria-label="Permalink to &quot;DropDown-Dark Theme&quot;">​</a></h3><hr><ol><li>Single Selection</li></ol>',4),N=n('<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-DropDown</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">options</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">options</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Select an option&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;dark&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-DropDown</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><ol start="2"><li>Multiple Selections</li></ol>',2),I=n(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-DropDown</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">options</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">options</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Select an option&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;dark&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">multiple</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-DropDown</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">value</td><td style="text-align:center;">Array</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">Choosen Value</td></tr><tr><td style="text-align:center;">options</td><td style="text-align:center;">Array</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">Dropdown options array</td></tr><tr><td style="text-align:center;">multiple</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">Is enable multiple select</td></tr><tr><td style="text-align:center;">borderWidth</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">2</td><td style="text-align:center;">Dropdown border width</td></tr><tr><td style="text-align:center;">borderRadius</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">6</td><td style="text-align:center;">Dropdown border radius</td></tr><tr><td style="text-align:center;">placeholder</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">Dropdown</td><td style="text-align:center;">Dropdown placeholder</td></tr><tr><td style="text-align:center;">maxHeight</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">Dropdown list max height</td></tr><tr><td style="text-align:center;">checkBoxBackground</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">CheckBox Background when Multiple</td></tr><tr><td style="text-align:center;">inputForeground</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">inputBorderColor</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">dropDownListForeground</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">rgba(0,120,215,0.9)</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">inputBackground</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">dropDownListBackground</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">dropDownIcon</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">ChevronDown</td><td style="text-align:center;">Icon with Fabric-Icon</td></tr><tr><td style="text-align:center;">dropDownIconForeground</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">revealBorderColor</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">revealBackgroundColor</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">showError</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">errorMessage</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">This dropdown has an error</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">setFocus</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">Whether Dropdown list show</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">system</td><td style="text-align:center;">主题样式, 包含<code>light</code>, <code>dark</code>, <code>system</code>, <code>custom</code>几种样式</td></tr></tbody></table><h3 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to &quot;Events&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">事件名(Name)</th><th style="text-align:center;">参数类型(args)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">change</td><td style="text-align:center;">value</td><td style="text-align:center;">Dropdown choose item</td></tr><tr><td style="text-align:center;">visible-change</td><td style="text-align:center;">visible</td><td style="text-align:center;">Dropdown list show or hidden</td></tr></tbody></table><h3 id="slot" tabindex="-1">Slot <a class="header-anchor" href="#slot" aria-label="Permalink to &quot;Slot&quot;">​</a></h3><hr><ol><li>Input</li></ol><ul><li>placeholder: 当前选中内容</li><li>value: 当前Placeholder</li></ul><div class="language-javascript vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">input</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;x&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">i</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ms-Icon ms-Icon--Dynamics365Logo left-icon&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">i</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">input</span><span style="--shiki-light:#B31D28;--shiki-dark:#FDAEB7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> :placeholder=&quot;x.placeholder&quot;</span><span style="--shiki-light:#B31D28;--shiki-dark:#FDAEB7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> :value=&quot;x.value&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;padding-left: 36px;&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">/&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">i</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ms-Icon ms-Icon--DelveAnalyticsLogo right-icon&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">i</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><ol start="2"><li>Options</li></ol><ul><li>option: 当前项内容</li><li>index: 当前项索引</li><li>valueTrigger: 支持函数式驱动的值函数</li></ul><div class="language-javascript vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">options</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;x&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;{{x.item.index}}&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ol start="3"><li>Drop Carrier</li></ol><ul><li>value: 当前选中内容</li><li>placeholoder: 当前Placeholder</li><li>theme: 当前主题</li></ul><div class="language-javascript vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">drop-carrier</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;x&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;DropDown&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="data" tabindex="-1">Data <a class="header-anchor" href="#data" aria-label="Permalink to &quot;Data&quot;">​</a></h3><hr><ol><li>options</li></ol><div class="language-javascript vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">options </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [{key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, disabled: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, choosen: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}]</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">//e.g.//</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">options</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: [</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;fruitsHeader&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Fruits&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;header&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;apple&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Apple&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;banana&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Banana&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;orange&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Orange&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, disabled: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;grape&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Grape&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;divider_1&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;-&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;divider&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;vegetablesHeader&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Vegetables&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;header&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;broccoli&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Broccoli&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;carrot&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Carrot&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;lettuce&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Lettuce&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><p><strong>特别地</strong> 0.1.62版本后支持采用函数式字段, 其中支持的字段包括<code>text</code>, <code>disabled</code>, <code>type</code></p>`,23);function P(V,p,z,L,t,R){const a=k("fv-DropDown"),e=k("ClientOnly"),r=k("fv-button");return g(),o("div",null,[u,F,s(e,null,{default:i(()=>[s(a,{modelValue:t.value,"onUpdate:modelValue":p[0]||(p[0]=l=>t.value=l),options:t.options,placeholder:"Select an option",style:{"z-index":"3"}},null,8,["modelValue","options"])]),_:1}),b,s(e,null,{default:i(()=>[s(a,{modelValue:t.value,"onUpdate:modelValue":p[1]||(p[1]=l=>t.value=l),options:t.options,placeholder:"Select an option",disabled:"",style:{"z-index":"2"}},null,8,["modelValue","options"])]),_:1}),m,s(e,null,{default:i(()=>[s(a,{placeholder:"Select an option",style:{"z-index":"1"}})]),_:1}),C,s(e,null,{default:i(()=>[s(a,{options:t.options,placeholder:"Select options",multiple:!0,style:{"z-index":"5"}},null,8,["options"])]),_:1}),v,s(e,null,{default:i(()=>[s(a,{options:t.options,placeholder:"Select an option",style:{"z-index":"4"}},{options:i(l=>[h("p",null,y(l.index),1)]),_:1},8,["options"])]),_:1}),x,s(e,null,{default:i(()=>[s(a,{options:t.options,placeholder:"Select options",multiple:!0,borderWidth:"1",borderRadius:"5",inputBackground:"rgba(0,204,153,0.9)",checkBoxBackground:"rgba(0, 204, 153, 0.9)",inputForeground:"whitesmoke",dropDownIcon:"AddTo",dropDownIconForeground:"whitesmoke",dropDownListForeground:"rgba(0,204,153,1)",dropDownListBackground:"rgba(239,239,239,0.6)",style:{"z-index":"13"}},null,8,["options"])]),_:1}),_,s(e,null,{default:i(()=>[s(a,{options:t.options,placeholder:"Select options",multiple:!0,style:{"z-index":"12"}},{input:i(l=>[q,h("input",{placeholder:l.placeholder,value:l.value,style:{"padding-left":"36px",border:"none"}},null,8,D),B]),_:1},8,["options"])]),_:1}),w,s(e,null,{default:i(()=>[s(a,{options:t.options,placeholder:"Select options",multiple:!0,style:{"z-index":"12"}},{"drop-carrier":i(l=>[s(r,{theme:l.theme,isBoxShadow:!0,style:{width:"150px"}},{default:i(()=>[A,f]),_:2},1032,["theme"])]),_:1},8,["options"])]),_:1}),S,s(e,null,{default:i(()=>[s(a,{options:t.options,placeholder:"Select an option",showError:!0,style:{"z-index":"11"}},null,8,["options"])]),_:1}),T,s(e,null,{default:i(()=>[s(a,{options:t.options,placeholder:"Select an option",theme:"dark",style:{"z-index":"6"}},null,8,["options"])]),_:1}),N,s(e,null,{default:i(()=>[s(a,{options:t.options,placeholder:"Select an option",theme:"dark",multiple:!0,style:{"z-index":"5"}},null,8,["options"])]),_:1}),I])}const M=d(c,[["render",P]]);export{O as __pageData,M as default};
diff --git a/assets/guide_components_drop-down_index.md.BZzJZQWq.lean.js b/assets/guide_components_drop-down_index.md.BZzJZQWq.lean.js
new file mode 100644
index 0000000..a3343fe
--- /dev/null
+++ b/assets/guide_components_drop-down_index.md.BZzJZQWq.lean.js
@@ -0,0 +1 @@
+import{_ as d,q as o,Y as s,z as i,H as h,u as E,aq as n,S as k,p as g,v as y}from"./chunks/framework.DvIFzl91.js";const c={data(){return{value:[],options:[{key:"fruitsHeader",text:"Fruits",type:"header"},{key:"apple",text:"Apple"},{key:"banana",text:"Banana"},{key:"orange",text:"Orange",disabled:!0},{key:"grape",text:"Grape"},{key:"divider_1",text:"-",type:"divider"},{key:"vegetablesHeader",text:"Vegetables",type:"header"},{key:"broccoli",text:"Broccoli"},{key:"carrot",text:"Carrot"},{key:"lettuce",text:"Lettuce"}]}}},O=JSON.parse('{"title":"DropDown","description":"","frontmatter":{"page":true,"title":"DropDown"},"headers":[],"relativePath":"guide/components/drop-down/index.md","filePath":"guide/components/drop-down/index.md"}'),u=h("h3",{id:"dropdown-demo",tabindex:"-1"},[E("DropDown-DEMO "),h("a",{class:"header-anchor",href:"#dropdown-demo","aria-label":'Permalink to "DropDown-DEMO"'},"​")],-1),F=h("hr",null,null,-1),b=n("",4),m=n("",2),C=n("",3),v=n("",4),x=n("",2),_=n("",2),q=h("i",{class:"ms-Icon ms-Icon--Dynamics365Logo left-icon"},null,-1),D=["placeholder","value"],B=h("i",{class:"ms-Icon ms-Icon--DelveAnalyticsLogo right-icon"},null,-1),w=n("",2),A=h("p",null,"DropDown",-1),f=h("i",{class:"ms-Icon ms-Icon--ChevronDown",style:{"margin-left":"8px"}},null,-1),S=n("",3),T=n("",4),N=n("",2),I=n("",23);function P(V,p,z,L,t,R){const a=k("fv-DropDown"),e=k("ClientOnly"),r=k("fv-button");return g(),o("div",null,[u,F,s(e,null,{default:i(()=>[s(a,{modelValue:t.value,"onUpdate:modelValue":p[0]||(p[0]=l=>t.value=l),options:t.options,placeholder:"Select an option",style:{"z-index":"3"}},null,8,["modelValue","options"])]),_:1}),b,s(e,null,{default:i(()=>[s(a,{modelValue:t.value,"onUpdate:modelValue":p[1]||(p[1]=l=>t.value=l),options:t.options,placeholder:"Select an option",disabled:"",style:{"z-index":"2"}},null,8,["modelValue","options"])]),_:1}),m,s(e,null,{default:i(()=>[s(a,{placeholder:"Select an option",style:{"z-index":"1"}})]),_:1}),C,s(e,null,{default:i(()=>[s(a,{options:t.options,placeholder:"Select options",multiple:!0,style:{"z-index":"5"}},null,8,["options"])]),_:1}),v,s(e,null,{default:i(()=>[s(a,{options:t.options,placeholder:"Select an option",style:{"z-index":"4"}},{options:i(l=>[h("p",null,y(l.index),1)]),_:1},8,["options"])]),_:1}),x,s(e,null,{default:i(()=>[s(a,{options:t.options,placeholder:"Select options",multiple:!0,borderWidth:"1",borderRadius:"5",inputBackground:"rgba(0,204,153,0.9)",checkBoxBackground:"rgba(0, 204, 153, 0.9)",inputForeground:"whitesmoke",dropDownIcon:"AddTo",dropDownIconForeground:"whitesmoke",dropDownListForeground:"rgba(0,204,153,1)",dropDownListBackground:"rgba(239,239,239,0.6)",style:{"z-index":"13"}},null,8,["options"])]),_:1}),_,s(e,null,{default:i(()=>[s(a,{options:t.options,placeholder:"Select options",multiple:!0,style:{"z-index":"12"}},{input:i(l=>[q,h("input",{placeholder:l.placeholder,value:l.value,style:{"padding-left":"36px",border:"none"}},null,8,D),B]),_:1},8,["options"])]),_:1}),w,s(e,null,{default:i(()=>[s(a,{options:t.options,placeholder:"Select options",multiple:!0,style:{"z-index":"12"}},{"drop-carrier":i(l=>[s(r,{theme:l.theme,isBoxShadow:!0,style:{width:"150px"}},{default:i(()=>[A,f]),_:2},1032,["theme"])]),_:1},8,["options"])]),_:1}),S,s(e,null,{default:i(()=>[s(a,{options:t.options,placeholder:"Select an option",showError:!0,style:{"z-index":"11"}},null,8,["options"])]),_:1}),T,s(e,null,{default:i(()=>[s(a,{options:t.options,placeholder:"Select an option",theme:"dark",style:{"z-index":"6"}},null,8,["options"])]),_:1}),N,s(e,null,{default:i(()=>[s(a,{options:t.options,placeholder:"Select an option",theme:"dark",multiple:!0,style:{"z-index":"5"}},null,8,["options"])]),_:1}),I])}const M=d(c,[["render",P]]);export{O as __pageData,M as default};
diff --git a/assets/guide_components_drop-down_properties.md.Bwlkpr1q.js b/assets/guide_components_drop-down_properties.md.Bwlkpr1q.js
new file mode 100644
index 0000000..28a2e4d
--- /dev/null
+++ b/assets/guide_components_drop-down_properties.md.Bwlkpr1q.js
@@ -0,0 +1 @@
+import{_ as e,q as t,p as r,aq as o}from"./chunks/framework.DvIFzl91.js";const u=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/components/drop-down/properties.md","filePath":"guide/components/drop-down/properties.md"}'),a={name:"guide/components/drop-down/properties.md"},n=o('<h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-label="Permalink to &quot;Properties&quot;">​</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead></table>',3),s=[n];function i(p,c,d,_,l,h){return r(),t("div",null,s)}const f=e(a,[["render",i]]);export{u as __pageData,f as default};
diff --git a/assets/guide_components_drop-down_properties.md.Bwlkpr1q.lean.js b/assets/guide_components_drop-down_properties.md.Bwlkpr1q.lean.js
new file mode 100644
index 0000000..09bf0ee
--- /dev/null
+++ b/assets/guide_components_drop-down_properties.md.Bwlkpr1q.lean.js
@@ -0,0 +1 @@
+import{_ as e,q as t,p as r,aq as o}from"./chunks/framework.DvIFzl91.js";const u=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/components/drop-down/properties.md","filePath":"guide/components/drop-down/properties.md"}'),a={name:"guide/components/drop-down/properties.md"},n=o("",3),s=[n];function i(p,c,d,_,l,h){return r(),t("div",null,s)}const f=e(a,[["render",i]]);export{u as __pageData,f as default};
diff --git a/assets/guide_components_expander_index.md.BKgcUJzQ.js b/assets/guide_components_expander_index.md.BKgcUJzQ.js
new file mode 100644
index 0000000..2d729aa
--- /dev/null
+++ b/assets/guide_components_expander_index.md.BKgcUJzQ.js
@@ -0,0 +1,34 @@
+import{_ as r,q as d,H as s,Y as i,z as t,u as p,aq as n,S as l,p as k}from"./chunks/framework.DvIFzl91.js";const S=JSON.parse('{"title":"Expander","description":"","frontmatter":{"page":true,"title":"Expander"},"headers":[],"relativePath":"guide/components/expander/index.md","filePath":"guide/components/expander/index.md"}'),E={name:"guide/components/expander/index.md"},g=s("h3",{id:"expander-demo",tabindex:"-1"},[p("Expander-DEMO "),s("a",{class:"header-anchor",href:"#expander-demo","aria-label":'Permalink to "Expander-DEMO"'},"​")],-1),o=s("hr",null,null,-1),c=s("div",{style:{position:"relative",height:"500px",background:"black",transition:"all 0.3s"}},null,-1),y=n(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Expander</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;div style=&quot;position: relative; height: 500px; background: black; transition: all 0.3s;&quot;&gt;&lt;/div&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Expander</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>Disabled Expander</p>`,2),u=s("div",{style:{position:"relative",height:"500px",background:"black",transition:"all 0.3s"}},null,-1),b=n(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Expander</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">disabledExpander</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;div style=&quot;position: relative; height: 500px; background: black; transition: all 0.3s;&quot;&gt;&lt;/div&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Expander</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>Extension</p>`,2),x=n(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Expander</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">disabledExpander</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;template v-slot:extension&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;fv-button&gt;Operation&lt;/fv-button&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Expander</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h3 id="expander-customize-background" tabindex="-1">Expander-Customize Background <a class="header-anchor" href="#expander-customize-background" aria-label="Permalink to &quot;Expander-Customize Background&quot;">​</a></h3><hr>`,3),v=s("div",{style:{position:"relative",height:"500px",background:"black",transition:"all 0.3s"}},null,-1),m=n(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Expander</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rgba(0, 98, 158, 1)&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;div style=&quot;position: relative; height: 500px; background: black; transition: all 0.3s;&quot;&gt;&lt;/div&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Expander</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="expander-dark-theme" tabindex="-1">Expander-Dark Theme <a class="header-anchor" href="#expander-dark-theme" aria-label="Permalink to &quot;Expander-Dark Theme&quot;">​</a></h3><hr>`,3),F=s("div",{style:{position:"relative",height:"500px",background:"whitesmoke",transition:"all 0.3s"}},null,-1),_=n(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Expander</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;dark&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;div style=&quot;position: relative; height: 500px; background: whitesmoke; transition: all 0.3s;&quot;&gt;&lt;/div&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Expander</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">value</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否展开 <code>Expander</code></td></tr><tr><td style="text-align:center;">icon</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">ExpanderMenu</td><td style="text-align:center;">Icon with Fabric-Icon</td></tr><tr><td style="text-align:center;">title</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">Title of Expander.</td><td style="text-align:center;">标题</td></tr><tr><td style="text-align:center;">content</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">Content information of Expander.</td><td style="text-align:center;">副标题信息</td></tr><tr><td style="text-align:center;">titleBackground</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">客制化 <code>Expander</code> 背景</td></tr><tr><td style="text-align:center;">expandBackground</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">客制化 <code>Expander</code> 背景</td></tr><tr><td style="text-align:center;">defaultHeight</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">70</td><td style="text-align:center;">默认高度</td></tr><tr><td style="text-align:center;">maxHeight</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">300</td><td style="text-align:center;">展开最大高度</td></tr><tr><td style="text-align:center;">disabledExpander</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">禁用展开 <code>Expander</code></td></tr><tr><td style="text-align:center;">visibleOverflow</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">true</td><td style="text-align:center;">在禁用展开 <code>Expander</code> , 允许overflow内容显示</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">system</td><td style="text-align:center;">主题样式, 包含<code>light</code>, <code>dark</code>, <code>system</code>, <code>custom</code>几种样式</td></tr></tbody></table><h3 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to &quot;Events&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">事件名(Name)</th><th style="text-align:center;">参数类型(args)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">item-click</td><td style="text-align:center;">boolean</td><td style="text-align:center;">返回 <code>Expander</code> 属性 <code>value</code> 的值</td></tr><tr><td style="text-align:center;">descrption-click</td><td style="text-align:center;">N/A</td><td style="text-align:center;">描述框点击</td></tr><tr><td style="text-align:center;">icon-click</td><td style="text-align:center;">N/A</td><td style="text-align:center;">右侧图标点击</td></tr></tbody></table><h3 id="slot" tabindex="-1">Slot <a class="header-anchor" href="#slot" aria-label="Permalink to &quot;Slot&quot;">​</a></h3><hr><ol><li>Default</li></ol><p>定义下拉内容</p><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Expander</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rgba(0, 98, 158, 1)&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;div style=&quot;position: relative; height: 500px; background: black; transition: all 0.3s;&quot;&gt;&lt;/div&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Expander</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ol start="2"><li>content</li></ol><p>自定义内容</p><ul><li>title: 标题</li><li>contnet: 副标题</li></ul><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;expander-title&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;{{ x.title }}&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;expander-info&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;{{ x.content }}&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><ol start="3"><li>Extension</li></ol><p>扩展操作内容</p><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">extension</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Operation&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ol start="4"><li>expand-icon</li></ol><p>自定义展开状态图标</p><ul><li>value: 当前是否展开</li><li>disabledCollaspe: 是否禁用展开</li></ul><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">expand-icon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">i</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">        v-show</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x.value</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">        class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ms-Icon ms-Icon--ChevronUpMed&quot;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">i</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">i</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">        v-show</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">!</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x.value </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&amp;&amp;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> !</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x.disabledExpander</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">        class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ms-Icon ms-Icon--ChevronDownMed&quot;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">i</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">i</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">        v-show</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">!</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x.value </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&amp;&amp;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> x.disabledExpander</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">        class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ms-Icon ms-Icon--ChevronRightMed&quot;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">i</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div>`,23);function C(f,A,q,B,D,T){const a=l("fv-Expander"),e=l("ClientOnly"),h=l("fv-button");return k(),d("div",null,[g,o,s("div",null,[i(e,null,{default:t(()=>[i(a,null,{default:t(()=>[c]),_:1})]),_:1})]),y,s("div",null,[i(e,null,{default:t(()=>[i(a,{disabledExpander:!0},{default:t(()=>[u]),_:1})]),_:1})]),b,s("div",null,[i(e,null,{default:t(()=>[i(a,{disabledExpander:!0},{extension:t(()=>[i(h,null,{default:t(()=>[p("Operation")]),_:1})]),_:1})]),_:1})]),x,s("div",null,[i(e,null,{default:t(()=>[i(a,{background:"rgba(0, 98, 158, 1)"},{default:t(()=>[v]),_:1})]),_:1})]),m,s("div",null,[i(e,null,{default:t(()=>[i(a,{theme:"dark"},{default:t(()=>[F]),_:1})]),_:1})]),_])}const P=r(E,[["render",C]]);export{S as __pageData,P as default};
diff --git a/assets/guide_components_expander_index.md.BKgcUJzQ.lean.js b/assets/guide_components_expander_index.md.BKgcUJzQ.lean.js
new file mode 100644
index 0000000..ea195e7
--- /dev/null
+++ b/assets/guide_components_expander_index.md.BKgcUJzQ.lean.js
@@ -0,0 +1 @@
+import{_ as r,q as d,H as s,Y as i,z as t,u as p,aq as n,S as l,p as k}from"./chunks/framework.DvIFzl91.js";const S=JSON.parse('{"title":"Expander","description":"","frontmatter":{"page":true,"title":"Expander"},"headers":[],"relativePath":"guide/components/expander/index.md","filePath":"guide/components/expander/index.md"}'),E={name:"guide/components/expander/index.md"},g=s("h3",{id:"expander-demo",tabindex:"-1"},[p("Expander-DEMO "),s("a",{class:"header-anchor",href:"#expander-demo","aria-label":'Permalink to "Expander-DEMO"'},"​")],-1),o=s("hr",null,null,-1),c=s("div",{style:{position:"relative",height:"500px",background:"black",transition:"all 0.3s"}},null,-1),y=n("",2),u=s("div",{style:{position:"relative",height:"500px",background:"black",transition:"all 0.3s"}},null,-1),b=n("",2),x=n("",3),v=s("div",{style:{position:"relative",height:"500px",background:"black",transition:"all 0.3s"}},null,-1),m=n("",3),F=s("div",{style:{position:"relative",height:"500px",background:"whitesmoke",transition:"all 0.3s"}},null,-1),_=n("",23);function C(f,A,q,B,D,T){const a=l("fv-Expander"),e=l("ClientOnly"),h=l("fv-button");return k(),d("div",null,[g,o,s("div",null,[i(e,null,{default:t(()=>[i(a,null,{default:t(()=>[c]),_:1})]),_:1})]),y,s("div",null,[i(e,null,{default:t(()=>[i(a,{disabledExpander:!0},{default:t(()=>[u]),_:1})]),_:1})]),b,s("div",null,[i(e,null,{default:t(()=>[i(a,{disabledExpander:!0},{extension:t(()=>[i(h,null,{default:t(()=>[p("Operation")]),_:1})]),_:1})]),_:1})]),x,s("div",null,[i(e,null,{default:t(()=>[i(a,{background:"rgba(0, 98, 158, 1)"},{default:t(()=>[v]),_:1})]),_:1})]),m,s("div",null,[i(e,null,{default:t(()=>[i(a,{theme:"dark"},{default:t(()=>[F]),_:1})]),_:1})]),_])}const P=r(E,[["render",C]]);export{S as __pageData,P as default};
diff --git a/assets/guide_components_flip-view_emits.md.DCheHjDj.js b/assets/guide_components_flip-view_emits.md.DCheHjDj.js
new file mode 100644
index 0000000..bd68bb1
--- /dev/null
+++ b/assets/guide_components_flip-view_emits.md.DCheHjDj.js
@@ -0,0 +1 @@
+import{_ as t,q as e,p as a,aq as i}from"./chunks/framework.DvIFzl91.js";const f=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/components/flip-view/emits.md","filePath":"guide/components/flip-view/emits.md"}'),s={name:"guide/components/flip-view/emits.md"},n=i('<h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-label="Permalink to &quot;Emits&quot;">​</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead></table>',3),o=[n];function r(_,c,m,l,d,h){return a(),e("div",null,o)}const u=t(s,[["render",r]]);export{f as __pageData,u as default};
diff --git a/assets/guide_components_flip-view_emits.md.DCheHjDj.lean.js b/assets/guide_components_flip-view_emits.md.DCheHjDj.lean.js
new file mode 100644
index 0000000..3daba7c
--- /dev/null
+++ b/assets/guide_components_flip-view_emits.md.DCheHjDj.lean.js
@@ -0,0 +1 @@
+import{_ as t,q as e,p as a,aq as i}from"./chunks/framework.DvIFzl91.js";const f=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/components/flip-view/emits.md","filePath":"guide/components/flip-view/emits.md"}'),s={name:"guide/components/flip-view/emits.md"},n=i("",3),o=[n];function r(_,c,m,l,d,h){return a(),e("div",null,o)}const u=t(s,[["render",r]]);export{f as __pageData,u as default};
diff --git a/assets/guide_components_flip-view_index.md.DefnDOv6.js b/assets/guide_components_flip-view_index.md.DefnDOv6.js
new file mode 100644
index 0000000..b1c9fc1
--- /dev/null
+++ b/assets/guide_components_flip-view_index.md.DefnDOv6.js
@@ -0,0 +1,32 @@
+import{_ as d,q as k,Y as e,z as a,H as l,u as o,aq as h,S as r,p as E}from"./chunks/framework.DvIFzl91.js";const g={data(){return{value:[1,2,3,4,5],images:["https://github.com/aleversn/VFluent/blob/master/examples/assert/sample/1.jpg?raw=true","https://github.com/aleversn/VFluent/blob/master/examples/assert/sample/2.jpg?raw=true","https://github.com/aleversn/VFluent/blob/master/examples/assert/sample/3.jpg?raw=true"]}}},j=JSON.parse('{"title":"FlipView","description":"","frontmatter":{"page":true,"title":"FlipView"},"headers":[],"relativePath":"guide/components/flip-view/index.md","filePath":"guide/components/flip-view/index.md"}'),c=l("h3",{id:"flipview-demo",tabindex:"-1"},[o("FlipView-DEMO "),l("a",{class:"header-anchor",href:"#flipview-demo","aria-label":'Permalink to "FlipView-DEMO"'},"​")],-1),u=l("hr",null,null,-1),m=h(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-FlipView</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">value</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-FlipView</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="flipview-custom-template" tabindex="-1">FlipView Custom Template <a class="header-anchor" href="#flipview-custom-template" aria-label="Permalink to &quot;FlipView Custom Template&quot;">​</a></h3><hr>`,3),y=["src"],b=h(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-FlipView</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">images</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;template v-slot:item=&quot;x&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;img alt=&quot;&quot; :src=&quot;x.data&quot; style=&quot;width: 100%; height: 100%; object-fit: cover;&quot;/&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-FlipView</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h3 id="flipview-vertical-direction" tabindex="-1">FlipView Vertical Direction <a class="header-anchor" href="#flipview-vertical-direction" aria-label="Permalink to &quot;FlipView Vertical Direction&quot;">​</a></h3><hr>`,3),v=["src"],F=h(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-FlipView</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">images</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> direction</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;vertical&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;template v-slot:item=&quot;x&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;img alt=&quot;&quot; :src=&quot;x.data&quot; style=&quot;width: 100%; height: 100%; object-fit: cover;&quot;/&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-FlipView</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h3 id="flipview-mask" tabindex="-1">FlipView Mask <a class="header-anchor" href="#flipview-mask" aria-label="Permalink to &quot;FlipView Mask&quot;">​</a></h3><hr>`,3),_=["src"],x=h(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-FlipView</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">images</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> mask</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rgba(36,36,36,0.6)&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;template v-slot:item=&quot;x&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;img alt=&quot;&quot; :src=&quot;x.data&quot; style=&quot;width: 100%; height: 100%; object-fit: cover;&quot;/&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-FlipView</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h3 id="flipview-different-animation" tabindex="-1">FlipView Different Animation <a class="header-anchor" href="#flipview-different-animation" aria-label="Permalink to &quot;FlipView Different Animation&quot;">​</a></h3><hr>`,3),q=["src"],f=h(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-FlipView</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">images</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> animation</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;fold&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;template v-slot:item=&quot;x&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;img alt=&quot;&quot; :src=&quot;x.data&quot; style=&quot;width: 100%; height: 100%; object-fit: cover;&quot;/&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-FlipView</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h3 id="flipview-dark-theme" tabindex="-1">FlipView Dark Theme <a class="header-anchor" href="#flipview-dark-theme" aria-label="Permalink to &quot;FlipView Dark Theme&quot;">​</a></h3><hr>`,3),w=l("div",{style:{position:"relative",width:"100%",height:"100%",background:"rgba(36,36,36,1)",display:"flex","justify-content":"center","align-items":"center"}},[l("p",{style:{"font-size":"36px",color:"whitesmoke"}},"Dark Theme")],-1),C=h(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-FlipView</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">images</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;dark&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;template v-slot:item=&quot;x&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;div style=&quot;position: relative; width: 100%; height: 100%; background: rgba(36,36,36,1); display: flex; justify-content: center; align-items: center;&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            &lt;p style=&quot;font-size: 36px; color: whitesmoke;&quot;&gt;Dark Theme&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;/div&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-FlipView</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h3 id="flipview-show-control-panel" tabindex="-1">FlipView Show Control Panel <a class="header-anchor" href="#flipview-show-control-panel" aria-label="Permalink to &quot;FlipView Show Control Panel&quot;">​</a></h3><hr>`,3),V=l("div",{style:{position:"relative",width:"100%",height:"100%",background:"rgba(36,36,36,1)",display:"flex","justify-content":"center","align-items":"center"}},[l("p",{style:{"font-size":"36px",color:"whitesmoke"}},"Dark Theme")],-1),T=h(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-FlipView</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">images</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;dark&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> showControlPanel</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;hover&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;template v-slot:item=&quot;x&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;div style=&quot;position: relative; width: 100%; height: 100%; background: rgba(36,36,36,1); display: flex; justify-content: center; align-items: center;&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            &lt;p style=&quot;font-size: 36px; color: whitesmoke;&quot;&gt;Dark Theme&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;/div&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-FlipView</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">value</td><td style="text-align:center;">Array</td><td style="text-align:center;">Yes</td><td style="text-align:center;">[]</td><td style="text-align:center;">Flipview template data</td></tr><tr><td style="text-align:center;">direction</td><td style="text-align:center;">[&#39;horizontal&#39;,&#39;vertical&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">horizontal</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">animation</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">move</td><td style="text-align:center;">move, moveFade, moveDifferent, glue, push, fold</td></tr><tr><td style="text-align:center;">duration</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">800</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">autoPlay</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">true</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">autoPlayDuration</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">5000</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">showControlPanel</td><td style="text-align:center;">[&#39;&#39;,&#39;hidden&#39;,&#39;hover&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">mask</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">The mask color of control panel</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">system</td><td style="text-align:center;">主题样式, 包含<code>light</code>, <code>dark</code>, <code>system</code>, <code>custom</code>几种样式</td></tr></tbody></table><h3 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to &quot;Events&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">事件名(Name)</th><th style="text-align:center;">参数类型(args)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">change</td><td style="text-align:center;">object</td><td style="text-align:center;">当切换页面时返回当前索引<code>index</code>和当前轮播周期<code>duration</code></td></tr></tbody></table><h3 id="slot" tabindex="-1">Slot <a class="header-anchor" href="#slot" aria-label="Permalink to &quot;Slot&quot;">​</a></h3><hr><ol><li>Input</li></ol><div class="language-javascript vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">item</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;x&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">img</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> alt</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;&quot;</span><span style="--shiki-light:#B31D28;--shiki-dark:#FDAEB7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> :src=&quot;x.data&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;width: 100%; height: 100%; object-fit: cover;&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">/&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div>`,11);function A(B,i,D,P,t,S){const n=r("fv-FlipView"),p=r("ClientOnly");return E(),k("div",null,[c,u,e(p,null,{default:a(()=>[e(n,{modelValue:t.value,"onUpdate:modelValue":i[0]||(i[0]=s=>t.value=s)},null,8,["modelValue"])]),_:1}),m,e(p,null,{default:a(()=>[e(n,{modelValue:t.images,"onUpdate:modelValue":i[1]||(i[1]=s=>t.images=s)},{item:a(s=>[l("img",{alt:"",src:s.data,style:{width:"100%",height:"100%","object-fit":"cover"}},null,8,y)]),_:1},8,["modelValue"])]),_:1}),b,e(p,null,{default:a(()=>[e(n,{modelValue:t.images,"onUpdate:modelValue":i[2]||(i[2]=s=>t.images=s),direction:"vertical"},{item:a(s=>[l("img",{alt:"",src:s.data,style:{width:"100%",height:"100%","object-fit":"cover"}},null,8,v)]),_:1},8,["modelValue"])]),_:1}),F,e(p,null,{default:a(()=>[e(n,{modelValue:t.images,"onUpdate:modelValue":i[3]||(i[3]=s=>t.images=s),mask:"rgba(36,36,36,0.6)"},{item:a(s=>[l("img",{alt:"",src:s.data,style:{width:"100%",height:"100%","object-fit":"cover"}},null,8,_)]),_:1},8,["modelValue"])]),_:1}),x,e(p,null,{default:a(()=>[e(n,{modelValue:t.images,"onUpdate:modelValue":i[4]||(i[4]=s=>t.images=s),animation:"fold"},{item:a(s=>[l("img",{alt:"",src:s.data,style:{width:"100%",height:"100%","object-fit":"cover"}},null,8,q)]),_:1},8,["modelValue"])]),_:1}),f,e(p,null,{default:a(()=>[e(n,{modelValue:t.images,"onUpdate:modelValue":i[5]||(i[5]=s=>t.images=s),theme:"dark"},{item:a(s=>[w]),_:1},8,["modelValue"])]),_:1}),C,e(p,null,{default:a(()=>[e(n,{modelValue:t.images,"onUpdate:modelValue":i[6]||(i[6]=s=>t.images=s),theme:"dark",showControlPanel:"hover"},{item:a(s=>[V]),_:1},8,["modelValue"])]),_:1}),T])}const I=d(g,[["render",A]]);export{j as __pageData,I as default};
diff --git a/assets/guide_components_flip-view_index.md.DefnDOv6.lean.js b/assets/guide_components_flip-view_index.md.DefnDOv6.lean.js
new file mode 100644
index 0000000..f82829d
--- /dev/null
+++ b/assets/guide_components_flip-view_index.md.DefnDOv6.lean.js
@@ -0,0 +1 @@
+import{_ as d,q as k,Y as e,z as a,H as l,u as o,aq as h,S as r,p as E}from"./chunks/framework.DvIFzl91.js";const g={data(){return{value:[1,2,3,4,5],images:["https://github.com/aleversn/VFluent/blob/master/examples/assert/sample/1.jpg?raw=true","https://github.com/aleversn/VFluent/blob/master/examples/assert/sample/2.jpg?raw=true","https://github.com/aleversn/VFluent/blob/master/examples/assert/sample/3.jpg?raw=true"]}}},j=JSON.parse('{"title":"FlipView","description":"","frontmatter":{"page":true,"title":"FlipView"},"headers":[],"relativePath":"guide/components/flip-view/index.md","filePath":"guide/components/flip-view/index.md"}'),c=l("h3",{id:"flipview-demo",tabindex:"-1"},[o("FlipView-DEMO "),l("a",{class:"header-anchor",href:"#flipview-demo","aria-label":'Permalink to "FlipView-DEMO"'},"​")],-1),u=l("hr",null,null,-1),m=h("",3),y=["src"],b=h("",3),v=["src"],F=h("",3),_=["src"],x=h("",3),q=["src"],f=h("",3),w=l("div",{style:{position:"relative",width:"100%",height:"100%",background:"rgba(36,36,36,1)",display:"flex","justify-content":"center","align-items":"center"}},[l("p",{style:{"font-size":"36px",color:"whitesmoke"}},"Dark Theme")],-1),C=h("",3),V=l("div",{style:{position:"relative",width:"100%",height:"100%",background:"rgba(36,36,36,1)",display:"flex","justify-content":"center","align-items":"center"}},[l("p",{style:{"font-size":"36px",color:"whitesmoke"}},"Dark Theme")],-1),T=h("",11);function A(B,i,D,P,t,S){const n=r("fv-FlipView"),p=r("ClientOnly");return E(),k("div",null,[c,u,e(p,null,{default:a(()=>[e(n,{modelValue:t.value,"onUpdate:modelValue":i[0]||(i[0]=s=>t.value=s)},null,8,["modelValue"])]),_:1}),m,e(p,null,{default:a(()=>[e(n,{modelValue:t.images,"onUpdate:modelValue":i[1]||(i[1]=s=>t.images=s)},{item:a(s=>[l("img",{alt:"",src:s.data,style:{width:"100%",height:"100%","object-fit":"cover"}},null,8,y)]),_:1},8,["modelValue"])]),_:1}),b,e(p,null,{default:a(()=>[e(n,{modelValue:t.images,"onUpdate:modelValue":i[2]||(i[2]=s=>t.images=s),direction:"vertical"},{item:a(s=>[l("img",{alt:"",src:s.data,style:{width:"100%",height:"100%","object-fit":"cover"}},null,8,v)]),_:1},8,["modelValue"])]),_:1}),F,e(p,null,{default:a(()=>[e(n,{modelValue:t.images,"onUpdate:modelValue":i[3]||(i[3]=s=>t.images=s),mask:"rgba(36,36,36,0.6)"},{item:a(s=>[l("img",{alt:"",src:s.data,style:{width:"100%",height:"100%","object-fit":"cover"}},null,8,_)]),_:1},8,["modelValue"])]),_:1}),x,e(p,null,{default:a(()=>[e(n,{modelValue:t.images,"onUpdate:modelValue":i[4]||(i[4]=s=>t.images=s),animation:"fold"},{item:a(s=>[l("img",{alt:"",src:s.data,style:{width:"100%",height:"100%","object-fit":"cover"}},null,8,q)]),_:1},8,["modelValue"])]),_:1}),f,e(p,null,{default:a(()=>[e(n,{modelValue:t.images,"onUpdate:modelValue":i[5]||(i[5]=s=>t.images=s),theme:"dark"},{item:a(s=>[w]),_:1},8,["modelValue"])]),_:1}),C,e(p,null,{default:a(()=>[e(n,{modelValue:t.images,"onUpdate:modelValue":i[6]||(i[6]=s=>t.images=s),theme:"dark",showControlPanel:"hover"},{item:a(s=>[V]),_:1},8,["modelValue"])]),_:1}),T])}const I=d(g,[["render",A]]);export{j as __pageData,I as default};
diff --git a/assets/guide_components_flip-view_properties.md.BqZ4hhgU.js b/assets/guide_components_flip-view_properties.md.BqZ4hhgU.js
new file mode 100644
index 0000000..33cd511
--- /dev/null
+++ b/assets/guide_components_flip-view_properties.md.BqZ4hhgU.js
@@ -0,0 +1 @@
+import{_ as e,q as t,p as r,aq as a}from"./chunks/framework.DvIFzl91.js";const f=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/components/flip-view/properties.md","filePath":"guide/components/flip-view/properties.md"}'),i={name:"guide/components/flip-view/properties.md"},o=a('<h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-label="Permalink to &quot;Properties&quot;">​</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead></table>',3),s=[o];function n(p,l,c,_,h,d){return r(),t("div",null,s)}const u=e(i,[["render",n]]);export{f as __pageData,u as default};
diff --git a/assets/guide_components_flip-view_properties.md.BqZ4hhgU.lean.js b/assets/guide_components_flip-view_properties.md.BqZ4hhgU.lean.js
new file mode 100644
index 0000000..ea22866
--- /dev/null
+++ b/assets/guide_components_flip-view_properties.md.BqZ4hhgU.lean.js
@@ -0,0 +1 @@
+import{_ as e,q as t,p as r,aq as a}from"./chunks/framework.DvIFzl91.js";const f=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/components/flip-view/properties.md","filePath":"guide/components/flip-view/properties.md"}'),i={name:"guide/components/flip-view/properties.md"},o=a("",3),s=[o];function n(p,l,c,_,h,d){return r(),t("div",null,s)}const u=e(i,[["render",n]]);export{f as __pageData,u as default};
diff --git a/assets/guide_components_icon-element_emits.md.D5TXFdTZ.js b/assets/guide_components_icon-element_emits.md.D5TXFdTZ.js
new file mode 100644
index 0000000..2ea0e36
--- /dev/null
+++ b/assets/guide_components_icon-element_emits.md.D5TXFdTZ.js
@@ -0,0 +1 @@
+import{_ as t,q as e,p as a,aq as n}from"./chunks/framework.DvIFzl91.js";const u=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/components/icon-element/emits.md","filePath":"guide/components/icon-element/emits.md"}'),s={name:"guide/components/icon-element/emits.md"},i=n('<h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-label="Permalink to &quot;Emits&quot;">​</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead></table>',3),o=[i];function r(c,m,_,l,d,h){return a(),e("div",null,o)}const f=t(s,[["render",r]]);export{u as __pageData,f as default};
diff --git a/assets/guide_components_icon-element_emits.md.D5TXFdTZ.lean.js b/assets/guide_components_icon-element_emits.md.D5TXFdTZ.lean.js
new file mode 100644
index 0000000..8d04428
--- /dev/null
+++ b/assets/guide_components_icon-element_emits.md.D5TXFdTZ.lean.js
@@ -0,0 +1 @@
+import{_ as t,q as e,p as a,aq as n}from"./chunks/framework.DvIFzl91.js";const u=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/components/icon-element/emits.md","filePath":"guide/components/icon-element/emits.md"}'),s={name:"guide/components/icon-element/emits.md"},i=n("",3),o=[i];function r(c,m,_,l,d,h){return a(),e("div",null,o)}const f=t(s,[["render",r]]);export{u as __pageData,f as default};
diff --git a/assets/guide_components_icon-element_index.md.DQ8K7JNn.js b/assets/guide_components_icon-element_index.md.DQ8K7JNn.js
new file mode 100644
index 0000000..cd1d9dc
--- /dev/null
+++ b/assets/guide_components_icon-element_index.md.DQ8K7JNn.js
@@ -0,0 +1,55 @@
+import{_ as p,q as r,Y as n,z as k,H as s,u as i,aq as e,S as l,p as E}from"./chunks/framework.DvIFzl91.js";const d={data(){return{heart:[{name:"HeartFill",color:"rgba(203, 22, 55, 1)"},{name:"Heart"}],callSomebody:[{name:"ContactSolid",position:"left"},{name:"MobWifiCall0",color:"linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%)"}],positionsFour:[{name:"Dial5",position:"top-left"},{name:"Dial6",position:"top-right"},{name:"Dial7",position:"bottom-left"},{name:"Dial8",position:"bottom-right"}],positionH:[{name:"Dial1",position:"left"},{name:"Dial2",position:"right"}],positionV:[{name:"Dial3",position:"top"},{name:"Dial4",position:"bottom"}]}}},J=JSON.parse('{"title":"IconElement","description":"","frontmatter":{"page":true,"title":"IconElement"},"headers":[],"relativePath":"guide/components/icon-element/index.md","filePath":"guide/components/icon-element/index.md"}'),o=s("h3",{id:"iconelement-demo",tabindex:"-1"},[i("IconElement-DEMO "),s("a",{class:"header-anchor",href:"#iconelement-demo","aria-label":'Permalink to "IconElement-DEMO"'},"​")],-1),c=s("hr",null,null,-1),g=s("p",null,"Default",-1),u=s("h3",{id:"iconelement-combination",tabindex:"-1"},[i("IconElement-Combination "),s("a",{class:"header-anchor",href:"#iconelement-combination","aria-label":'Permalink to "IconElement-Combination"'},"​")],-1),y=s("hr",null,null,-1),b=s("p",null,"Heart",-1),m={style:{display:"flex","align-items":"center"}},F=s("p",{style:{"font-size":"20px","font-weight":"bold"}},"+",-1),v=s("p",{style:{"font-size":"20px","font-weight":"bold"}},"=",-1),_=s("div",{class:"language-vue vp-adaptive-theme line-numbers-mode"},[s("button",{title:"Copy Code",class:"copy"}),s("span",{class:"lang"},"vue"),s("pre",{class:"shiki shiki-themes github-light github-dark vp-code"},[s("code",null,[s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"<"),s("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-IconElement"),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}}," :"),s("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}},"value"),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),s("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"heart"),s("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"></"),s("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-IconElement"),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")])])]),s("div",{class:"line-numbers-wrapper","aria-hidden":"true"},[s("span",{class:"line-number"},"1"),s("br")])],-1),C=s("div",{class:"language-javascript vp-adaptive-theme line-numbers-mode"},[s("button",{title:"Copy Code",class:"copy"}),s("span",{class:"lang"},"javascript"),s("pre",{class:"shiki shiki-themes github-light github-dark vp-code"},[s("code",null,[s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}},"heart"),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},": [")]),i(`
+`),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"    {")]),i(`
+`),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"        name: "),s("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},"'HeartFill'"),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},",")]),i(`
+`),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"        color: "),s("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},"'rgba(203, 22, 55, 1)'")]),i(`
+`),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"    },")]),i(`
+`),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"    {")]),i(`
+`),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"        name: "),s("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},"'Heart'"),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},",")]),i(`
+`),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"    }")]),i(`
+`),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"]")])])]),s("div",{class:"line-numbers-wrapper","aria-hidden":"true"},[s("span",{class:"line-number"},"1"),s("br"),s("span",{class:"line-number"},"2"),s("br"),s("span",{class:"line-number"},"3"),s("br"),s("span",{class:"line-number"},"4"),s("br"),s("span",{class:"line-number"},"5"),s("br"),s("span",{class:"line-number"},"6"),s("br"),s("span",{class:"line-number"},"7"),s("br"),s("span",{class:"line-number"},"8"),s("br"),s("span",{class:"line-number"},"9"),s("br")])],-1),B=s("p",null,"Calling",-1),x={style:{display:"flex","align-items":"center"}},f=s("p",{style:{"font-size":"20px","font-weight":"bold"}},"+",-1),q=s("p",{style:{"font-size":"20px","font-weight":"bold"}},"=",-1),D=s("div",{class:"language-vue vp-adaptive-theme line-numbers-mode"},[s("button",{title:"Copy Code",class:"copy"}),s("span",{class:"lang"},"vue"),s("pre",{class:"shiki shiki-themes github-light github-dark vp-code"},[s("code",null,[s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"<"),s("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-IconElement"),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}}," :"),s("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}},"value"),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),s("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"callSomebody"),s("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"></"),s("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-IconElement"),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")])])]),s("div",{class:"line-numbers-wrapper","aria-hidden":"true"},[s("span",{class:"line-number"},"1"),s("br")])],-1),I=s("div",{class:"language-javascript vp-adaptive-theme line-numbers-mode"},[s("button",{title:"Copy Code",class:"copy"}),s("span",{class:"lang"},"javascript"),s("pre",{class:"shiki shiki-themes github-light github-dark vp-code"},[s("code",null,[s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}},"callSomebody"),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},": [")]),i(`
+`),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"    {")]),i(`
+`),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"        name: "),s("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},"'ContactSolid'"),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},",")]),i(`
+`),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"        position: "),s("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},"'left'")]),i(`
+`),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"    },")]),i(`
+`),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"    {")]),i(`
+`),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"        name: "),s("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},"'MobWifiCall0'"),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},",")]),i(`
+`),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"        color: "),s("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},"'linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%)'")]),i(`
+`),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"    }")]),i(`
+`),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"]")])])]),s("div",{class:"line-numbers-wrapper","aria-hidden":"true"},[s("span",{class:"line-number"},"1"),s("br"),s("span",{class:"line-number"},"2"),s("br"),s("span",{class:"line-number"},"3"),s("br"),s("span",{class:"line-number"},"4"),s("br"),s("span",{class:"line-number"},"5"),s("br"),s("span",{class:"line-number"},"6"),s("br"),s("span",{class:"line-number"},"7"),s("br"),s("span",{class:"line-number"},"8"),s("br"),s("span",{class:"line-number"},"9"),s("br"),s("span",{class:"line-number"},"10"),s("br")])],-1),S=s("h3",{id:"iconelement-positions",tabindex:"-1"},[i("IconElement-Positions "),s("a",{class:"header-anchor",href:"#iconelement-positions","aria-label":'Permalink to "IconElement-Positions"'},"​")],-1),T=s("hr",null,null,-1),A=s("p",null,"Left, Right",-1),P=e('<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-IconElement</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">positionH</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-IconElement</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>Top, Bottom</p>',2),V=e('<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-IconElement</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">positionV</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-IconElement</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>Top-left, Top-right, Bottom-left, Bottom-right</p>',2),N=e(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-IconElement</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">positionsFour</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-IconElement</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-javascript vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">positionH</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: [</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Dial1&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        position: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;left&#39;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Dial2&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        position: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;right&#39;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">],</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">positionV</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: [</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Dial3&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        position: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;top&#39;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Dial4&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        position: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;bottom&#39;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">],</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">positionsFour</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: [</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Dial5&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        position: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;top-left&#39;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Dial6&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        position: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;top-right&#39;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Dial7&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        position: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;bottom-left&#39;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Dial8&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        position: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;bottom-right&#39;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br></div></div><h3 id="iconelement-icon-button" tabindex="-1">IconElement-Icon Button <a class="header-anchor" href="#iconelement-icon-button" aria-label="Permalink to &quot;IconElement-Icon Button&quot;">​</a></h3><hr>`,4),w=e('<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-IconElement</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">heart</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">iconButton</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> paddingWidth</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;3&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-IconElement</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">value</td><td style="text-align:center;">Array</td><td style="text-align:center;">String</td><td style="text-align:center;">AppIconDefault</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">fontSize</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">16px</td><td style="text-align:center;">IconElement字体大小</td></tr><tr><td style="text-align:center;">paddingWidth</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">0px</td><td style="text-align:center;">IconElement内边距</td></tr><tr><td style="text-align:center;">iconButton</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否以图标按钮样式呈现</td></tr><tr><td style="text-align:center;">borderRadius</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">0px</td><td style="text-align:center;">图标按钮圆角</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">system</td><td style="text-align:center;">主题样式, 包含<code>light</code>, <code>dark</code>, <code>system</code>, <code>custom</code>几种样式</td></tr></tbody></table><h3 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to &quot;Events&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">事件名(Name)</th><th style="text-align:center;">参数类型(args)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">click</td><td style="text-align:center;">event</td><td style="text-align:center;">Button onclick</td></tr></tbody></table>',7);function H(j,z,R,O,t,W){const a=l("fv-IconElement"),h=l("ClientOnly");return E(),r("div",null,[o,c,n(h,null,{default:k(()=>[g,n(a),u,y,b,s("div",m,[n(a,{value:[t.heart[0]]},null,8,["value"]),F,n(a,{value:[t.heart[1]]},null,8,["value"]),v,n(a,{value:t.heart},null,8,["value"])]),_,C,B,s("div",x,[n(a,{value:[t.callSomebody[0]]},null,8,["value"]),f,n(a,{value:[t.callSomebody[1]]},null,8,["value"]),q,n(a,{value:t.callSomebody},null,8,["value"])]),D,I]),_:1}),S,T,A,n(a,{value:t.positionH},null,8,["value"]),P,n(a,{value:t.positionV},null,8,["value"]),V,n(a,{value:t.positionsFour},null,8,["value"]),N,n(a,{value:t.heart,iconButton:!0,paddingWidth:"3"},null,8,["value"]),w])}const L=p(d,[["render",H]]);export{J as __pageData,L as default};
diff --git a/assets/guide_components_icon-element_index.md.DQ8K7JNn.lean.js b/assets/guide_components_icon-element_index.md.DQ8K7JNn.lean.js
new file mode 100644
index 0000000..ee16da7
--- /dev/null
+++ b/assets/guide_components_icon-element_index.md.DQ8K7JNn.lean.js
@@ -0,0 +1,18 @@
+import{_ as p,q as r,Y as n,z as k,H as s,u as i,aq as e,S as l,p as E}from"./chunks/framework.DvIFzl91.js";const d={data(){return{heart:[{name:"HeartFill",color:"rgba(203, 22, 55, 1)"},{name:"Heart"}],callSomebody:[{name:"ContactSolid",position:"left"},{name:"MobWifiCall0",color:"linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%)"}],positionsFour:[{name:"Dial5",position:"top-left"},{name:"Dial6",position:"top-right"},{name:"Dial7",position:"bottom-left"},{name:"Dial8",position:"bottom-right"}],positionH:[{name:"Dial1",position:"left"},{name:"Dial2",position:"right"}],positionV:[{name:"Dial3",position:"top"},{name:"Dial4",position:"bottom"}]}}},J=JSON.parse('{"title":"IconElement","description":"","frontmatter":{"page":true,"title":"IconElement"},"headers":[],"relativePath":"guide/components/icon-element/index.md","filePath":"guide/components/icon-element/index.md"}'),o=s("h3",{id:"iconelement-demo",tabindex:"-1"},[i("IconElement-DEMO "),s("a",{class:"header-anchor",href:"#iconelement-demo","aria-label":'Permalink to "IconElement-DEMO"'},"​")],-1),c=s("hr",null,null,-1),g=s("p",null,"Default",-1),u=s("h3",{id:"iconelement-combination",tabindex:"-1"},[i("IconElement-Combination "),s("a",{class:"header-anchor",href:"#iconelement-combination","aria-label":'Permalink to "IconElement-Combination"'},"​")],-1),y=s("hr",null,null,-1),b=s("p",null,"Heart",-1),m={style:{display:"flex","align-items":"center"}},F=s("p",{style:{"font-size":"20px","font-weight":"bold"}},"+",-1),v=s("p",{style:{"font-size":"20px","font-weight":"bold"}},"=",-1),_=s("div",{class:"language-vue vp-adaptive-theme line-numbers-mode"},[s("button",{title:"Copy Code",class:"copy"}),s("span",{class:"lang"},"vue"),s("pre",{class:"shiki shiki-themes github-light github-dark vp-code"},[s("code",null,[s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"<"),s("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-IconElement"),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}}," :"),s("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}},"value"),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),s("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"heart"),s("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"></"),s("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-IconElement"),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")])])]),s("div",{class:"line-numbers-wrapper","aria-hidden":"true"},[s("span",{class:"line-number"},"1"),s("br")])],-1),C=s("div",{class:"language-javascript vp-adaptive-theme line-numbers-mode"},[s("button",{title:"Copy Code",class:"copy"}),s("span",{class:"lang"},"javascript"),s("pre",{class:"shiki shiki-themes github-light github-dark vp-code"},[s("code",null,[s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}},"heart"),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},": [")]),i(`
+`),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"    {")]),i(`
+`),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"        name: "),s("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},"'HeartFill'"),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},",")]),i(`
+`),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"        color: "),s("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},"'rgba(203, 22, 55, 1)'")]),i(`
+`),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"    },")]),i(`
+`),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"    {")]),i(`
+`),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"        name: "),s("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},"'Heart'"),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},",")]),i(`
+`),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"    }")]),i(`
+`),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"]")])])]),s("div",{class:"line-numbers-wrapper","aria-hidden":"true"},[s("span",{class:"line-number"},"1"),s("br"),s("span",{class:"line-number"},"2"),s("br"),s("span",{class:"line-number"},"3"),s("br"),s("span",{class:"line-number"},"4"),s("br"),s("span",{class:"line-number"},"5"),s("br"),s("span",{class:"line-number"},"6"),s("br"),s("span",{class:"line-number"},"7"),s("br"),s("span",{class:"line-number"},"8"),s("br"),s("span",{class:"line-number"},"9"),s("br")])],-1),B=s("p",null,"Calling",-1),x={style:{display:"flex","align-items":"center"}},f=s("p",{style:{"font-size":"20px","font-weight":"bold"}},"+",-1),q=s("p",{style:{"font-size":"20px","font-weight":"bold"}},"=",-1),D=s("div",{class:"language-vue vp-adaptive-theme line-numbers-mode"},[s("button",{title:"Copy Code",class:"copy"}),s("span",{class:"lang"},"vue"),s("pre",{class:"shiki shiki-themes github-light github-dark vp-code"},[s("code",null,[s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"<"),s("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-IconElement"),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}}," :"),s("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}},"value"),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),s("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"callSomebody"),s("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"></"),s("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-IconElement"),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")])])]),s("div",{class:"line-numbers-wrapper","aria-hidden":"true"},[s("span",{class:"line-number"},"1"),s("br")])],-1),I=s("div",{class:"language-javascript vp-adaptive-theme line-numbers-mode"},[s("button",{title:"Copy Code",class:"copy"}),s("span",{class:"lang"},"javascript"),s("pre",{class:"shiki shiki-themes github-light github-dark vp-code"},[s("code",null,[s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}},"callSomebody"),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},": [")]),i(`
+`),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"    {")]),i(`
+`),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"        name: "),s("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},"'ContactSolid'"),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},",")]),i(`
+`),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"        position: "),s("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},"'left'")]),i(`
+`),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"    },")]),i(`
+`),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"    {")]),i(`
+`),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"        name: "),s("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},"'MobWifiCall0'"),s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},",")]),i(`
+`),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"        color: "),s("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},"'linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%)'")]),i(`
+`),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"    }")]),i(`
+`),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"]")])])]),s("div",{class:"line-numbers-wrapper","aria-hidden":"true"},[s("span",{class:"line-number"},"1"),s("br"),s("span",{class:"line-number"},"2"),s("br"),s("span",{class:"line-number"},"3"),s("br"),s("span",{class:"line-number"},"4"),s("br"),s("span",{class:"line-number"},"5"),s("br"),s("span",{class:"line-number"},"6"),s("br"),s("span",{class:"line-number"},"7"),s("br"),s("span",{class:"line-number"},"8"),s("br"),s("span",{class:"line-number"},"9"),s("br"),s("span",{class:"line-number"},"10"),s("br")])],-1),S=s("h3",{id:"iconelement-positions",tabindex:"-1"},[i("IconElement-Positions "),s("a",{class:"header-anchor",href:"#iconelement-positions","aria-label":'Permalink to "IconElement-Positions"'},"​")],-1),T=s("hr",null,null,-1),A=s("p",null,"Left, Right",-1),P=e("",2),V=e("",2),N=e("",4),w=e("",7);function H(j,z,R,O,t,W){const a=l("fv-IconElement"),h=l("ClientOnly");return E(),r("div",null,[o,c,n(h,null,{default:k(()=>[g,n(a),u,y,b,s("div",m,[n(a,{value:[t.heart[0]]},null,8,["value"]),F,n(a,{value:[t.heart[1]]},null,8,["value"]),v,n(a,{value:t.heart},null,8,["value"])]),_,C,B,s("div",x,[n(a,{value:[t.callSomebody[0]]},null,8,["value"]),f,n(a,{value:[t.callSomebody[1]]},null,8,["value"]),q,n(a,{value:t.callSomebody},null,8,["value"])]),D,I]),_:1}),S,T,A,n(a,{value:t.positionH},null,8,["value"]),P,n(a,{value:t.positionV},null,8,["value"]),V,n(a,{value:t.positionsFour},null,8,["value"]),N,n(a,{value:t.heart,iconButton:!0,paddingWidth:"3"},null,8,["value"]),w])}const L=p(d,[["render",H]]);export{J as __pageData,L as default};
diff --git a/assets/guide_components_icon-element_properties.md.8Oakruwc.js b/assets/guide_components_icon-element_properties.md.8Oakruwc.js
new file mode 100644
index 0000000..3a66720
--- /dev/null
+++ b/assets/guide_components_icon-element_properties.md.8Oakruwc.js
@@ -0,0 +1 @@
+import{_ as e,q as t,p as r,aq as a}from"./chunks/framework.DvIFzl91.js";const u=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/components/icon-element/properties.md","filePath":"guide/components/icon-element/properties.md"}'),n={name:"guide/components/icon-element/properties.md"},o=a('<h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-label="Permalink to &quot;Properties&quot;">​</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead></table>',3),s=[o];function i(c,p,l,_,h,d){return r(),t("div",null,s)}const f=e(n,[["render",i]]);export{u as __pageData,f as default};
diff --git a/assets/guide_components_icon-element_properties.md.8Oakruwc.lean.js b/assets/guide_components_icon-element_properties.md.8Oakruwc.lean.js
new file mode 100644
index 0000000..4609ffd
--- /dev/null
+++ b/assets/guide_components_icon-element_properties.md.8Oakruwc.lean.js
@@ -0,0 +1 @@
+import{_ as e,q as t,p as r,aq as a}from"./chunks/framework.DvIFzl91.js";const u=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/components/icon-element/properties.md","filePath":"guide/components/icon-element/properties.md"}'),n={name:"guide/components/icon-element/properties.md"},o=a("",3),s=[o];function i(c,p,l,_,h,d){return r(),t("div",null,s)}const f=e(n,[["render",i]]);export{u as __pageData,f as default};
diff --git a/assets/guide_components_image_emits.md.lmlz2xJd.js b/assets/guide_components_image_emits.md.lmlz2xJd.js
new file mode 100644
index 0000000..8dc29de
--- /dev/null
+++ b/assets/guide_components_image_emits.md.lmlz2xJd.js
@@ -0,0 +1 @@
+import{_ as t,q as e,p as a,aq as s}from"./chunks/framework.DvIFzl91.js";const g=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/components/image/emits.md","filePath":"guide/components/image/emits.md"}'),i={name:"guide/components/image/emits.md"},n=s('<h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-label="Permalink to &quot;Emits&quot;">​</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead></table>',3),o=[n];function r(m,_,c,d,l,h){return a(),e("div",null,o)}const u=t(i,[["render",r]]);export{g as __pageData,u as default};
diff --git a/assets/guide_components_image_emits.md.lmlz2xJd.lean.js b/assets/guide_components_image_emits.md.lmlz2xJd.lean.js
new file mode 100644
index 0000000..918ddb6
--- /dev/null
+++ b/assets/guide_components_image_emits.md.lmlz2xJd.lean.js
@@ -0,0 +1 @@
+import{_ as t,q as e,p as a,aq as s}from"./chunks/framework.DvIFzl91.js";const g=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/components/image/emits.md","filePath":"guide/components/image/emits.md"}'),i={name:"guide/components/image/emits.md"},n=s("",3),o=[n];function r(m,_,c,d,l,h){return a(),e("div",null,o)}const u=t(i,[["render",r]]);export{g as __pageData,u as default};
diff --git a/assets/guide_components_image_index.md.B7X6cWAZ.js b/assets/guide_components_image_index.md.B7X6cWAZ.js
new file mode 100644
index 0000000..3f64d96
--- /dev/null
+++ b/assets/guide_components_image_index.md.B7X6cWAZ.js
@@ -0,0 +1 @@
+import{_ as p,q as k,Y as s,z as l,H as i,u as r,aq as h,S as n,p as d}from"./chunks/framework.DvIFzl91.js";const g={data(){return{images:["https://github.com/aleversn/VFluent/blob/master/examples/assert/sample/1.jpg?raw=true","https://github.com/aleversn/VFluent/blob/master/examples/assert/sample/2.jpg?raw=true","https://github.com/aleversn/VFluent/blob/master/examples/assert/sample/3.jpg?raw=true"]}},mounted(){}},q=JSON.parse('{"title":"Image","description":"","frontmatter":{"page":true,"title":"Image"},"headers":[],"relativePath":"guide/components/image/index.md","filePath":"guide/components/image/index.md"}'),E=i("h3",{id:"image-demo",tabindex:"-1"},[r("Image-DEMO "),i("a",{class:"header-anchor",href:"#image-demo","aria-label":'Permalink to "Image-DEMO"'},"​")],-1),o=i("hr",null,null,-1),y={style:{width:"100%",height:"300px"}},c=h('<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Image</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> src</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;https://github.com/aleversn/VFluent/blob/master/examples/assert/sample/1.jpg?raw=true&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">500</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">300</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Image</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div>',1),u={style:{width:"100%",height:"500px"}},m=h('<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Image</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> src</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;https://github.com/aleversn/VFluent/blob/master/examples/assert/sample/2.jpg?raw=true&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">500</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">300</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Image</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="image-lazy-load" tabindex="-1">Image-Lazy Load <a class="header-anchor" href="#image-lazy-load" aria-label="Permalink to &quot;Image-Lazy Load&quot;">​</a></h3><hr>',3),F={style:{width:"100%",height:"300px"}},_=h('<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Image</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> src</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;https://github.com/aleversn/VFluent/blob/master/examples/assert/sample/3.jpg?raw=true&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">onlazy</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">500</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">300</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Image</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">src</td><td style="text-align:center;">String</td><td style="text-align:center;">Yes</td><td style="text-align:center;">N/A</td><td style="text-align:center;">图像 src, 支持跨域加载, 但不支持缓存</td></tr><tr><td style="text-align:center;">onlazy</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否开启懒加载</td></tr></tbody></table>',4);function C(b,v,x,B,t,f){const a=n("fv-Image"),e=n("ClientOnly");return d(),k("div",null,[E,o,s(e,null,{default:l(()=>[i("div",y,[s(a,{src:t.images[0],style:{width:"500px",height:"300px"}},null,8,["src"])])]),_:1}),c,i("div",u,[s(e,null,{default:l(()=>[s(a,{src:t.images[1],style:{width:"500px",height:"300px"}},null,8,["src"])]),_:1})]),m,i("div",F,[s(e,null,{default:l(()=>[s(a,{src:t.images[2],onlazy:!0,style:{width:"500px",height:"300px"}},null,8,["src"])]),_:1})]),_])}const I=p(g,[["render",C]]);export{q as __pageData,I as default};
diff --git a/assets/guide_components_image_index.md.B7X6cWAZ.lean.js b/assets/guide_components_image_index.md.B7X6cWAZ.lean.js
new file mode 100644
index 0000000..1b2545d
--- /dev/null
+++ b/assets/guide_components_image_index.md.B7X6cWAZ.lean.js
@@ -0,0 +1 @@
+import{_ as p,q as k,Y as s,z as l,H as i,u as r,aq as h,S as n,p as d}from"./chunks/framework.DvIFzl91.js";const g={data(){return{images:["https://github.com/aleversn/VFluent/blob/master/examples/assert/sample/1.jpg?raw=true","https://github.com/aleversn/VFluent/blob/master/examples/assert/sample/2.jpg?raw=true","https://github.com/aleversn/VFluent/blob/master/examples/assert/sample/3.jpg?raw=true"]}},mounted(){}},q=JSON.parse('{"title":"Image","description":"","frontmatter":{"page":true,"title":"Image"},"headers":[],"relativePath":"guide/components/image/index.md","filePath":"guide/components/image/index.md"}'),E=i("h3",{id:"image-demo",tabindex:"-1"},[r("Image-DEMO "),i("a",{class:"header-anchor",href:"#image-demo","aria-label":'Permalink to "Image-DEMO"'},"​")],-1),o=i("hr",null,null,-1),y={style:{width:"100%",height:"300px"}},c=h("",1),u={style:{width:"100%",height:"500px"}},m=h("",3),F={style:{width:"100%",height:"300px"}},_=h("",4);function C(b,v,x,B,t,f){const a=n("fv-Image"),e=n("ClientOnly");return d(),k("div",null,[E,o,s(e,null,{default:l(()=>[i("div",y,[s(a,{src:t.images[0],style:{width:"500px",height:"300px"}},null,8,["src"])])]),_:1}),c,i("div",u,[s(e,null,{default:l(()=>[s(a,{src:t.images[1],style:{width:"500px",height:"300px"}},null,8,["src"])]),_:1})]),m,i("div",F,[s(e,null,{default:l(()=>[s(a,{src:t.images[2],onlazy:!0,style:{width:"500px",height:"300px"}},null,8,["src"])]),_:1})]),_])}const I=p(g,[["render",C]]);export{q as __pageData,I as default};
diff --git a/assets/guide_components_image_properties.md.DGanRzCb.js b/assets/guide_components_image_properties.md.DGanRzCb.js
new file mode 100644
index 0000000..b27e85f
--- /dev/null
+++ b/assets/guide_components_image_properties.md.DGanRzCb.js
@@ -0,0 +1 @@
+import{_ as e,q as t,p as r,aq as a}from"./chunks/framework.DvIFzl91.js";const g=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/components/image/properties.md","filePath":"guide/components/image/properties.md"}'),o={name:"guide/components/image/properties.md"},s=a('<h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-label="Permalink to &quot;Properties&quot;">​</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead></table>',3),n=[s];function i(p,c,_,l,h,d){return r(),t("div",null,n)}const u=e(o,[["render",i]]);export{g as __pageData,u as default};
diff --git a/assets/guide_components_image_properties.md.DGanRzCb.lean.js b/assets/guide_components_image_properties.md.DGanRzCb.lean.js
new file mode 100644
index 0000000..65429cb
--- /dev/null
+++ b/assets/guide_components_image_properties.md.DGanRzCb.lean.js
@@ -0,0 +1 @@
+import{_ as e,q as t,p as r,aq as a}from"./chunks/framework.DvIFzl91.js";const g=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/components/image/properties.md","filePath":"guide/components/image/properties.md"}'),o={name:"guide/components/image/properties.md"},s=a("",3),n=[s];function i(p,c,_,l,h,d){return r(),t("div",null,n)}const u=e(o,[["render",i]]);export{g as __pageData,u as default};
diff --git a/assets/guide_components_img-box_index.md.DYtggkf_.js b/assets/guide_components_img-box_index.md.DYtggkf_.js
new file mode 100644
index 0000000..2cec61d
--- /dev/null
+++ b/assets/guide_components_img-box_index.md.DYtggkf_.js
@@ -0,0 +1 @@
+import{_ as h,q as r,Y as s,z as a,H as e,u as k,aq as n,S as l,p as d}from"./chunks/framework.DvIFzl91.js";const f=JSON.parse('{"title":"ImgBox","description":"","frontmatter":{"page":true,"title":"ImgBox"},"headers":[],"relativePath":"guide/components/img-box/index.md","filePath":"guide/components/img-box/index.md"}'),p={name:"guide/components/img-box/index.md"},o=e("h3",{id:"imgbox-demo",tabindex:"-1"},[k("ImgBox-DEMO "),e("a",{class:"header-anchor",href:"#imgbox-demo","aria-label":'Permalink to "ImgBox-DEMO"'},"​")],-1),g=e("hr",null,null,-1),E=n('<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-ImgBox</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> url</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;https://rescreator.blob.core.windows.net/slider/1444a25f-3e33-44a2-878f-a628342ad88f.jpg&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">350</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">350</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-ImgBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="imgbox-background-image" tabindex="-1">ImgBox-Background Image <a class="header-anchor" href="#imgbox-background-image" aria-label="Permalink to &quot;ImgBox-Background Image&quot;">​</a></h3><hr>',3),c=n('<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-ImgBox</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> url</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;https://rescreator.blob.core.windows.net/slider/1444a25f-3e33-44a2-878f-a628342ad88f.jpg&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">onbackground</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">350</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">350</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">background-size</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">cover</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-ImgBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="imgbox-lazy-load" tabindex="-1">ImgBox-Lazy Load <a class="header-anchor" href="#imgbox-lazy-load" aria-label="Permalink to &quot;ImgBox-Lazy Load&quot;">​</a></h3><hr>',3),y=n('<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-ImgBox</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> url</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;https://rescreator.blob.core.windows.net/slider/f2fcea9e-e31b-4a1e-87be-9241531c7dc6.jpg&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">onlazy</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">350</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">350</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">background-size</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">cover</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-ImgBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">url</td><td style="text-align:center;">String</td><td style="text-align:center;">Yes</td><td style="text-align:center;">N/A</td><td style="text-align:center;">Image url, be careful don&#39;t use cross-domain url</td></tr><tr><td style="text-align:center;">onlazy</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">Lazy load image</td></tr><tr><td style="text-align:center;">loadingColor</td><td style="text-align:center;">[string(color)] No</td><td style="text-align:center;">rgba(0, 90, 158, 1)</td><td style="text-align:center;">The foreground of the progress-ring or progress-bar.</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">onbackground</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">Show as background</td></tr></tbody></table><h3 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to &quot;Events&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">事件名(Name)</th><th style="text-align:center;">参数类型(args)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">error</td><td style="text-align:center;">object</td><td style="text-align:center;">Image load failed will call back error function with error message.</td></tr></tbody></table>',7);function u(F,b,x,m,C,_){const i=l("fv-ImgBox"),t=l("ClientOnly");return d(),r("div",null,[o,g,s(t,null,{default:a(()=>[s(i,{url:"https://rescreator.blob.core.windows.net/slider/1444a25f-3e33-44a2-878f-a628342ad88f.jpg",style:{width:"350px",height:"350px"}})]),_:1}),E,s(t,null,{default:a(()=>[s(i,{url:"https://rescreator.blob.core.windows.net/slider/1444a25f-3e33-44a2-878f-a628342ad88f.jpg",onbackground:!0,style:{width:"350px",height:"350px","background-size":"cover"}})]),_:1}),c,s(t,null,{default:a(()=>[s(i,{url:"https://rescreator.blob.core.windows.net/slider/f2fcea9e-e31b-4a1e-87be-9241531c7dc6.jpg",onlazy:!0,style:{width:"350px",height:"350px","background-size":"cover"}})]),_:1}),y])}const v=h(p,[["render",u]]);export{f as __pageData,v as default};
diff --git a/assets/guide_components_img-box_index.md.DYtggkf_.lean.js b/assets/guide_components_img-box_index.md.DYtggkf_.lean.js
new file mode 100644
index 0000000..4d58b1f
--- /dev/null
+++ b/assets/guide_components_img-box_index.md.DYtggkf_.lean.js
@@ -0,0 +1 @@
+import{_ as h,q as r,Y as s,z as a,H as e,u as k,aq as n,S as l,p as d}from"./chunks/framework.DvIFzl91.js";const f=JSON.parse('{"title":"ImgBox","description":"","frontmatter":{"page":true,"title":"ImgBox"},"headers":[],"relativePath":"guide/components/img-box/index.md","filePath":"guide/components/img-box/index.md"}'),p={name:"guide/components/img-box/index.md"},o=e("h3",{id:"imgbox-demo",tabindex:"-1"},[k("ImgBox-DEMO "),e("a",{class:"header-anchor",href:"#imgbox-demo","aria-label":'Permalink to "ImgBox-DEMO"'},"​")],-1),g=e("hr",null,null,-1),E=n("",3),c=n("",3),y=n("",7);function u(F,b,x,m,C,_){const i=l("fv-ImgBox"),t=l("ClientOnly");return d(),r("div",null,[o,g,s(t,null,{default:a(()=>[s(i,{url:"https://rescreator.blob.core.windows.net/slider/1444a25f-3e33-44a2-878f-a628342ad88f.jpg",style:{width:"350px",height:"350px"}})]),_:1}),E,s(t,null,{default:a(()=>[s(i,{url:"https://rescreator.blob.core.windows.net/slider/1444a25f-3e33-44a2-878f-a628342ad88f.jpg",onbackground:!0,style:{width:"350px",height:"350px","background-size":"cover"}})]),_:1}),c,s(t,null,{default:a(()=>[s(i,{url:"https://rescreator.blob.core.windows.net/slider/f2fcea9e-e31b-4a1e-87be-9241531c7dc6.jpg",onlazy:!0,style:{width:"350px",height:"350px","background-size":"cover"}})]),_:1}),y])}const v=h(p,[["render",u]]);export{f as __pageData,v as default};
diff --git a/assets/guide_components_img_emits.md.6237adb4.js b/assets/guide_components_img_emits.md.6237adb4.js
deleted file mode 100644
index 7dbd1f0..0000000
--- a/assets/guide_components_img_emits.md.6237adb4.js
+++ /dev/null
@@ -1 +0,0 @@
-import{_ as t,c as e,o as a,a as n}from"./app.d60fa8c3.js";const p=JSON.parse('{"title":"Emits","description":"","frontmatter":{},"headers":[{"level":2,"title":"Emits","slug":"emits"}],"relativePath":"guide/components/img/emits.md"}'),r={name:"guide/components/img/emits.md"},s=n('<h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">error</td><td style="text-align:center;">evt[Event]</td><td style="text-align:center;">onerror</td></tr><tr><td style="text-align:center;">loaded</td><td style="text-align:center;">evt[Event]</td><td style="text-align:center;">onload</td></tr></tbody></table>',3),i=[s];function d(l,o,c,_,m,h){return a(),e("div",null,i)}var x=t(r,[["render",d]]);export{p as __pageData,x as default};
diff --git a/assets/guide_components_img_emits.md.6237adb4.lean.js b/assets/guide_components_img_emits.md.6237adb4.lean.js
deleted file mode 100644
index e3004d6..0000000
--- a/assets/guide_components_img_emits.md.6237adb4.lean.js
+++ /dev/null
@@ -1 +0,0 @@
-import{_ as t,c as e,o as a,a as n}from"./app.d60fa8c3.js";const p=JSON.parse('{"title":"Emits","description":"","frontmatter":{},"headers":[{"level":2,"title":"Emits","slug":"emits"}],"relativePath":"guide/components/img/emits.md"}'),r={name:"guide/components/img/emits.md"},s=n("",3),i=[s];function d(l,o,c,_,m,h){return a(),e("div",null,i)}var x=t(r,[["render",d]]);export{p as __pageData,x as default};
diff --git a/assets/guide_components_img_emits.md.BlE7jvZQ.js b/assets/guide_components_img_emits.md.BlE7jvZQ.js
new file mode 100644
index 0000000..a6bae15
--- /dev/null
+++ b/assets/guide_components_img_emits.md.BlE7jvZQ.js
@@ -0,0 +1 @@
+import{_ as t,q as e,p as a,aq as s}from"./chunks/framework.DvIFzl91.js";const g=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/components/img/emits.md","filePath":"guide/components/img/emits.md"}'),i={name:"guide/components/img/emits.md"},n=s('<h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-label="Permalink to &quot;Emits&quot;">​</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead></table>',3),o=[n];function r(m,_,c,d,l,h){return a(),e("div",null,o)}const u=t(i,[["render",r]]);export{g as __pageData,u as default};
diff --git a/assets/guide_components_img_emits.md.BlE7jvZQ.lean.js b/assets/guide_components_img_emits.md.BlE7jvZQ.lean.js
new file mode 100644
index 0000000..5d0cc31
--- /dev/null
+++ b/assets/guide_components_img_emits.md.BlE7jvZQ.lean.js
@@ -0,0 +1 @@
+import{_ as t,q as e,p as a,aq as s}from"./chunks/framework.DvIFzl91.js";const g=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/components/img/emits.md","filePath":"guide/components/img/emits.md"}'),i={name:"guide/components/img/emits.md"},n=s("",3),o=[n];function r(m,_,c,d,l,h){return a(),e("div",null,o)}const u=t(i,[["render",r]]);export{g as __pageData,u as default};
diff --git a/assets/guide_components_img_index.md.Bm9FiuU4.js b/assets/guide_components_img_index.md.Bm9FiuU4.js
new file mode 100644
index 0000000..f793734
--- /dev/null
+++ b/assets/guide_components_img_index.md.Bm9FiuU4.js
@@ -0,0 +1 @@
+import{_ as h,q as p,H as t,Y as s,z as e,u as r,aq as l,S as n,p as k}from"./chunks/framework.DvIFzl91.js";const I=JSON.parse('{"title":"Img","description":"","frontmatter":{"page":true,"title":"Img"},"headers":[],"relativePath":"guide/components/img/index.md","filePath":"guide/components/img/index.md"}'),d={name:"guide/components/img/index.md"},g=t("h3",{id:"img-demo",tabindex:"-1"},[r("Img-DEMO "),t("a",{class:"header-anchor",href:"#img-demo","aria-label":'Permalink to "Img-DEMO"'},"​")],-1),o=t("hr",null,null,-1),E={style:{width:"100%",height:"500px"}},y=l('<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Img</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> src</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;https://github.com/aleversn/VFluent/blob/master/examples/assert/sample/1.jpg?raw=true&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">500</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">300</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Img</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div>',1),c={style:{width:"100%",height:"500px"}},u=l('<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Img</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> src</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;https://github.com/aleversn/VFluent/blob/master/examples/assert/sample/2.jpg?raw=true&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">500</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">300</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Img</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="img-lazy-load" tabindex="-1">Img-Lazy Load <a class="header-anchor" href="#img-lazy-load" aria-label="Permalink to &quot;Img-Lazy Load&quot;">​</a></h3><hr>',3),m={style:{width:"100%",height:"500px"}},F=l('<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Img</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> src</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;https://github.com/aleversn/VFluent/blob/master/examples/assert/sample/3.jpg?raw=true&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">onlazy</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">500</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">300</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Img</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">src</td><td style="text-align:center;">String</td><td style="text-align:center;">Yes</td><td style="text-align:center;">N/A</td><td style="text-align:center;">图像资源路径, 支持跨域和本域, 本域下将默认启用ImgBox进行缓存管理, 跨域时启用Image进行加载, 但无法实现缓存</td></tr><tr><td style="text-align:center;">onlazy</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">Lazy load image</td></tr><tr><td style="text-align:center;">loadingColor</td><td style="text-align:center;">[string(color)] No</td><td style="text-align:center;">rgba(0, 90, 158, 1)</td><td style="text-align:center;">The foreground of the progress-ring or progress-bar.</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">onbackground</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">Show as background</td></tr></tbody></table>',4);function _(C,x,b,v,B,f){const i=n("fv-Img"),a=n("ClientOnly");return k(),p("div",null,[g,o,t("div",E,[s(a,null,{default:e(()=>[s(i,{src:"https://github.com/aleversn/VFluent/blob/master/examples/assert/sample/1.jpg?raw=true",style:{width:"500px",height:"300px"}})]),_:1})]),y,t("div",c,[s(a,null,{default:e(()=>[s(i,{src:"https://github.com/aleversn/VFluent/blob/master/examples/assert/sample/2.jpg?raw=true",style:{width:"500px",height:"300px"}})]),_:1})]),u,t("div",m,[s(a,null,{default:e(()=>[s(i,{src:"https://github.com/aleversn/VFluent/blob/master/examples/assert/sample/3.jpg?raw=true",onlazy:!0,style:{width:"500px",height:"300px"}})]),_:1})]),F])}const q=h(d,[["render",_]]);export{I as __pageData,q as default};
diff --git a/assets/guide_components_img_index.md.Bm9FiuU4.lean.js b/assets/guide_components_img_index.md.Bm9FiuU4.lean.js
new file mode 100644
index 0000000..0bfb274
--- /dev/null
+++ b/assets/guide_components_img_index.md.Bm9FiuU4.lean.js
@@ -0,0 +1 @@
+import{_ as h,q as p,H as t,Y as s,z as e,u as r,aq as l,S as n,p as k}from"./chunks/framework.DvIFzl91.js";const I=JSON.parse('{"title":"Img","description":"","frontmatter":{"page":true,"title":"Img"},"headers":[],"relativePath":"guide/components/img/index.md","filePath":"guide/components/img/index.md"}'),d={name:"guide/components/img/index.md"},g=t("h3",{id:"img-demo",tabindex:"-1"},[r("Img-DEMO "),t("a",{class:"header-anchor",href:"#img-demo","aria-label":'Permalink to "Img-DEMO"'},"​")],-1),o=t("hr",null,null,-1),E={style:{width:"100%",height:"500px"}},y=l("",1),c={style:{width:"100%",height:"500px"}},u=l("",3),m={style:{width:"100%",height:"500px"}},F=l("",4);function _(C,x,b,v,B,f){const i=n("fv-Img"),a=n("ClientOnly");return k(),p("div",null,[g,o,t("div",E,[s(a,null,{default:e(()=>[s(i,{src:"https://github.com/aleversn/VFluent/blob/master/examples/assert/sample/1.jpg?raw=true",style:{width:"500px",height:"300px"}})]),_:1})]),y,t("div",c,[s(a,null,{default:e(()=>[s(i,{src:"https://github.com/aleversn/VFluent/blob/master/examples/assert/sample/2.jpg?raw=true",style:{width:"500px",height:"300px"}})]),_:1})]),u,t("div",m,[s(a,null,{default:e(()=>[s(i,{src:"https://github.com/aleversn/VFluent/blob/master/examples/assert/sample/3.jpg?raw=true",onlazy:!0,style:{width:"500px",height:"300px"}})]),_:1})]),F])}const q=h(d,[["render",_]]);export{I as __pageData,q as default};
diff --git a/assets/guide_components_img_index.md.fa51a3a1.js b/assets/guide_components_img_index.md.fa51a3a1.js
deleted file mode 100644
index 05b6162..0000000
--- a/assets/guide_components_img_index.md.fa51a3a1.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import{u as x}from"./chunks/index.9dba9c16.js";import{d as v,f as y,c as s,b as a,u as l,w as A,k as t,F as D,l as F,a as o,r as h,o as e,e as C}from"./app.d60fa8c3.js";const f=o('<h1 id="img" tabindex="-1">Img <a class="header-anchor" href="#img" aria-hidden="true">#</a></h1><h2 id="quick-start" tabindex="-1">Quick Start <a class="header-anchor" href="#quick-start" aria-hidden="true">#</a></h2><h3 id="default" tabindex="-1">Default <a class="header-anchor" href="#default" aria-hidden="true">#</a></h3><hr>',4),_=o(`<div class="language-vue-html"><span class="copy"></span><div class="highlight-lines"><br><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><br><br></div><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-img</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">style</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">width:350px;height:350px;</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">fit</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">cover</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">alt</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">An image</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">src</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">https://rescreator.blob.core.windows.net/slider/01277a52-2379-475e-b5f6-7c8788dac898.jpg</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-img</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h3 id="cached-cross-origin" tabindex="-1">Cached cross origin <a class="header-anchor" href="#cached-cross-origin" aria-hidden="true">#</a></h3><hr>`,3),q=C("Add Image"),E=t("hr",null,null,-1),w={style:{height:"390px",overflow:"auto"}},N=t("hr",null,null,-1),k=o(`<div class="language-vue-html"><span class="copy"></span><div class="highlight-lines"><br><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><br><br><br><br><br><br><br></div><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-img</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">cache</span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">crossorigin</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">anonymous</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">alt</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">An image</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">style</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">width:350px;height:350px;</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">fit</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">cover</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">src</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">item</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-img</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>The server response header Access-Control-Allow-Origin must allow the current origin</p></div><h3 id="lazy-load" tabindex="-1">Lazy load <a class="header-anchor" href="#lazy-load" aria-hidden="true">#</a></h3><hr>`,4),z={style:{height:"390px",overflow:"auto"}},j=t("hr",null,null,-1),L=o(`<div class="language-vue-html"><span class="copy"></span><div class="highlight-lines"><br><div class="highlighted">\xA0</div><br><br><br><br><br><br><br><br></div><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-img</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">lazy</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">alt</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">An image</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">style</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">width:350px; height:350px;</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">fit</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">cover</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">src</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">item</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">loaded</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">onLoad</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-img</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">alt</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;&#39;</td><td style="text-align:center;">same as img alt property</td></tr><tr><td style="text-align:center;">cache</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">cache image via dataurl</td></tr><tr><td style="text-align:center;">crossorigin</td><td style="text-align:center;">[&#39;anonymous&#39;,&#39;use-credentials&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as img <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin" target="_blank" rel="noopener noreferrer">crossorigin</a></td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">disabled</td></tr><tr><td style="text-align:center;">fit</td><td style="text-align:center;">[&#39;cover&#39;,&#39;contain&#39;,&#39;fill&#39;,&#39;scale-down&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as img object-fit style</td></tr><tr><td style="text-align:center;">lang</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">i18n</td></tr><tr><td style="text-align:center;">lazy</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">load image when visible inside view</td></tr><tr><td style="text-align:center;">src</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as img src</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">[&#39;light&#39;,&#39;dark&#39;,&#39;global&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">theme</td></tr></tbody></table><h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">error</td><td style="text-align:center;">evt[Event]</td><td style="text-align:center;">onerror</td></tr><tr><td style="text-align:center;">loaded</td><td style="text-align:center;">evt[Event]</td><td style="text-align:center;">onload</td></tr></tbody></table>`,7),B=JSON.parse('{"title":"Img","description":"","frontmatter":{"page":true,"title":"Img"},"headers":[{"level":2,"title":"Quick Start","slug":"quick-start"},{"level":3,"title":"Default","slug":"default"},{"level":3,"title":"Cached cross origin","slug":"cached-cross-origin"},{"level":3,"title":"Lazy load","slug":"lazy-load"},{"level":2,"title":"Properties","slug":"properties"},{"level":2,"title":"Emits","slug":"emits"}],"relativePath":"guide/components/img/index.md"}'),S={name:"guide/components/img/index.md"},M=v({...S,setup(V){const{theme:n}=x(),i=y(["https://rescreator.blob.core.windows.net/slider/01277a52-2379-475e-b5f6-7c8788dac898.jpg","https://rescreator.blob.core.windows.net/slider/e131600a-b9c7-40e7-aa92-d85db97aed0e.jpg","https://github.com/aleversn/VFluent/blob/master/examples/assert/sample/1.jpg?raw=true","https://github.com/aleversn/VFluent/blob/master/examples/assert/sample/2.jpg?raw=true","https://github.com/aleversn/VFluent/blob/master/examples/assert/sample/3.jpg?raw=true"]),r=y(["https://rescreator.blob.core.windows.net/slider/01277a52-2379-475e-b5f6-7c8788dac898.jpg"]),g=()=>{r.value.push(i.value[Math.floor(Math.random()*i.value.length)])},u=d=>{console.log("loaded",d.target)};return(d,I)=>{const p=h("fv-img"),m=h("fv-button");return e(),s("div",null,[f,a(p,{alt:"An image",style:{width:"350px",height:"350px"},fit:"cover",src:"https://rescreator.blob.core.windows.net/slider/01277a52-2379-475e-b5f6-7c8788dac898.jpg",theme:l(n)},null,8,["theme"]),_,a(m,{theme:l(n),onClick:g},{default:A(()=>[q]),_:1},8,["theme"]),E,t("div",w,[(e(!0),s(D,null,F(r.value,(c,b)=>(e(),s("div",null,[a(p,{cache:"",crossorigin:"anonymous",alt:"An image",style:{width:"350px",height:"350px"},fit:"cover",src:c,theme:l(n)},null,8,["src","theme"]),N]))),256))]),k,t("div",z,[(e(!0),s(D,null,F(r.value,(c,b)=>(e(),s("div",null,[a(p,{lazy:"",alt:"An image",style:{width:"350px",height:"350px"},fit:"cover",src:c,theme:l(n),onLoaded:u},null,8,["src","theme"]),j]))),256))]),L])}}});export{B as __pageData,M as default};
diff --git a/assets/guide_components_img_index.md.fa51a3a1.lean.js b/assets/guide_components_img_index.md.fa51a3a1.lean.js
deleted file mode 100644
index 05b6162..0000000
--- a/assets/guide_components_img_index.md.fa51a3a1.lean.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import{u as x}from"./chunks/index.9dba9c16.js";import{d as v,f as y,c as s,b as a,u as l,w as A,k as t,F as D,l as F,a as o,r as h,o as e,e as C}from"./app.d60fa8c3.js";const f=o('<h1 id="img" tabindex="-1">Img <a class="header-anchor" href="#img" aria-hidden="true">#</a></h1><h2 id="quick-start" tabindex="-1">Quick Start <a class="header-anchor" href="#quick-start" aria-hidden="true">#</a></h2><h3 id="default" tabindex="-1">Default <a class="header-anchor" href="#default" aria-hidden="true">#</a></h3><hr>',4),_=o(`<div class="language-vue-html"><span class="copy"></span><div class="highlight-lines"><br><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><br><br></div><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-img</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">style</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">width:350px;height:350px;</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">fit</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">cover</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">alt</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">An image</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">src</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">https://rescreator.blob.core.windows.net/slider/01277a52-2379-475e-b5f6-7c8788dac898.jpg</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-img</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h3 id="cached-cross-origin" tabindex="-1">Cached cross origin <a class="header-anchor" href="#cached-cross-origin" aria-hidden="true">#</a></h3><hr>`,3),q=C("Add Image"),E=t("hr",null,null,-1),w={style:{height:"390px",overflow:"auto"}},N=t("hr",null,null,-1),k=o(`<div class="language-vue-html"><span class="copy"></span><div class="highlight-lines"><br><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><br><br><br><br><br><br><br></div><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-img</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">cache</span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">crossorigin</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">anonymous</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">alt</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">An image</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">style</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">width:350px;height:350px;</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">fit</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">cover</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">src</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">item</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-img</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>The server response header Access-Control-Allow-Origin must allow the current origin</p></div><h3 id="lazy-load" tabindex="-1">Lazy load <a class="header-anchor" href="#lazy-load" aria-hidden="true">#</a></h3><hr>`,4),z={style:{height:"390px",overflow:"auto"}},j=t("hr",null,null,-1),L=o(`<div class="language-vue-html"><span class="copy"></span><div class="highlight-lines"><br><div class="highlighted">\xA0</div><br><br><br><br><br><br><br><br></div><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-img</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">lazy</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">alt</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">An image</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">style</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">width:350px; height:350px;</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">fit</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">cover</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">src</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">item</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">loaded</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">onLoad</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-img</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">alt</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;&#39;</td><td style="text-align:center;">same as img alt property</td></tr><tr><td style="text-align:center;">cache</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">cache image via dataurl</td></tr><tr><td style="text-align:center;">crossorigin</td><td style="text-align:center;">[&#39;anonymous&#39;,&#39;use-credentials&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as img <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin" target="_blank" rel="noopener noreferrer">crossorigin</a></td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">disabled</td></tr><tr><td style="text-align:center;">fit</td><td style="text-align:center;">[&#39;cover&#39;,&#39;contain&#39;,&#39;fill&#39;,&#39;scale-down&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as img object-fit style</td></tr><tr><td style="text-align:center;">lang</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">i18n</td></tr><tr><td style="text-align:center;">lazy</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">load image when visible inside view</td></tr><tr><td style="text-align:center;">src</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as img src</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">[&#39;light&#39;,&#39;dark&#39;,&#39;global&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">theme</td></tr></tbody></table><h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">error</td><td style="text-align:center;">evt[Event]</td><td style="text-align:center;">onerror</td></tr><tr><td style="text-align:center;">loaded</td><td style="text-align:center;">evt[Event]</td><td style="text-align:center;">onload</td></tr></tbody></table>`,7),B=JSON.parse('{"title":"Img","description":"","frontmatter":{"page":true,"title":"Img"},"headers":[{"level":2,"title":"Quick Start","slug":"quick-start"},{"level":3,"title":"Default","slug":"default"},{"level":3,"title":"Cached cross origin","slug":"cached-cross-origin"},{"level":3,"title":"Lazy load","slug":"lazy-load"},{"level":2,"title":"Properties","slug":"properties"},{"level":2,"title":"Emits","slug":"emits"}],"relativePath":"guide/components/img/index.md"}'),S={name:"guide/components/img/index.md"},M=v({...S,setup(V){const{theme:n}=x(),i=y(["https://rescreator.blob.core.windows.net/slider/01277a52-2379-475e-b5f6-7c8788dac898.jpg","https://rescreator.blob.core.windows.net/slider/e131600a-b9c7-40e7-aa92-d85db97aed0e.jpg","https://github.com/aleversn/VFluent/blob/master/examples/assert/sample/1.jpg?raw=true","https://github.com/aleversn/VFluent/blob/master/examples/assert/sample/2.jpg?raw=true","https://github.com/aleversn/VFluent/blob/master/examples/assert/sample/3.jpg?raw=true"]),r=y(["https://rescreator.blob.core.windows.net/slider/01277a52-2379-475e-b5f6-7c8788dac898.jpg"]),g=()=>{r.value.push(i.value[Math.floor(Math.random()*i.value.length)])},u=d=>{console.log("loaded",d.target)};return(d,I)=>{const p=h("fv-img"),m=h("fv-button");return e(),s("div",null,[f,a(p,{alt:"An image",style:{width:"350px",height:"350px"},fit:"cover",src:"https://rescreator.blob.core.windows.net/slider/01277a52-2379-475e-b5f6-7c8788dac898.jpg",theme:l(n)},null,8,["theme"]),_,a(m,{theme:l(n),onClick:g},{default:A(()=>[q]),_:1},8,["theme"]),E,t("div",w,[(e(!0),s(D,null,F(r.value,(c,b)=>(e(),s("div",null,[a(p,{cache:"",crossorigin:"anonymous",alt:"An image",style:{width:"350px",height:"350px"},fit:"cover",src:c,theme:l(n)},null,8,["src","theme"]),N]))),256))]),k,t("div",z,[(e(!0),s(D,null,F(r.value,(c,b)=>(e(),s("div",null,[a(p,{lazy:"",alt:"An image",style:{width:"350px",height:"350px"},fit:"cover",src:c,theme:l(n),onLoaded:u},null,8,["src","theme"]),j]))),256))]),L])}}});export{B as __pageData,M as default};
diff --git a/assets/guide_components_img_properties.md.8d321b5e.js b/assets/guide_components_img_properties.md.8d321b5e.js
deleted file mode 100644
index a629c8b..0000000
--- a/assets/guide_components_img_properties.md.8d321b5e.js
+++ /dev/null
@@ -1 +0,0 @@
-import{_ as t,c as e,o as n,a as l}from"./app.d60fa8c3.js";const h=JSON.parse('{"title":"Properties","description":"","frontmatter":{},"headers":[{"level":2,"title":"Properties","slug":"properties"}],"relativePath":"guide/components/img/properties.md"}'),r={name:"guide/components/img/properties.md"},d=l('<h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">alt</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;&#39;</td><td style="text-align:center;">same as img alt property</td></tr><tr><td style="text-align:center;">cache</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">cache image via dataurl</td></tr><tr><td style="text-align:center;">crossorigin</td><td style="text-align:center;">[&#39;anonymous&#39;,&#39;use-credentials&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as img <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin" target="_blank" rel="noopener noreferrer">crossorigin</a></td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">disabled</td></tr><tr><td style="text-align:center;">fit</td><td style="text-align:center;">[&#39;cover&#39;,&#39;contain&#39;,&#39;fill&#39;,&#39;scale-down&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as img object-fit style</td></tr><tr><td style="text-align:center;">lang</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">i18n</td></tr><tr><td style="text-align:center;">lazy</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">load image when visible inside view</td></tr><tr><td style="text-align:center;">src</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as img src</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">[&#39;light&#39;,&#39;dark&#39;,&#39;global&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">theme</td></tr></tbody></table>',3),a=[d];function s(i,c,o,g,y,x){return n(),e("div",null,a)}var _=t(r,[["render",s]]);export{h as __pageData,_ as default};
diff --git a/assets/guide_components_img_properties.md.8d321b5e.lean.js b/assets/guide_components_img_properties.md.8d321b5e.lean.js
deleted file mode 100644
index 629c911..0000000
--- a/assets/guide_components_img_properties.md.8d321b5e.lean.js
+++ /dev/null
@@ -1 +0,0 @@
-import{_ as t,c as e,o as n,a as l}from"./app.d60fa8c3.js";const h=JSON.parse('{"title":"Properties","description":"","frontmatter":{},"headers":[{"level":2,"title":"Properties","slug":"properties"}],"relativePath":"guide/components/img/properties.md"}'),r={name:"guide/components/img/properties.md"},d=l("",3),a=[d];function s(i,c,o,g,y,x){return n(),e("div",null,a)}var _=t(r,[["render",s]]);export{h as __pageData,_ as default};
diff --git a/assets/guide_components_img_properties.md.B42YSocI.js b/assets/guide_components_img_properties.md.B42YSocI.js
new file mode 100644
index 0000000..52db83b
--- /dev/null
+++ b/assets/guide_components_img_properties.md.B42YSocI.js
@@ -0,0 +1 @@
+import{_ as e,q as t,p as r,aq as a}from"./chunks/framework.DvIFzl91.js";const g=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/components/img/properties.md","filePath":"guide/components/img/properties.md"}'),o={name:"guide/components/img/properties.md"},s=a('<h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-label="Permalink to &quot;Properties&quot;">​</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead></table>',3),n=[s];function i(p,c,_,l,h,d){return r(),t("div",null,n)}const u=e(o,[["render",i]]);export{g as __pageData,u as default};
diff --git a/assets/guide_components_img_properties.md.B42YSocI.lean.js b/assets/guide_components_img_properties.md.B42YSocI.lean.js
new file mode 100644
index 0000000..a1887e4
--- /dev/null
+++ b/assets/guide_components_img_properties.md.B42YSocI.lean.js
@@ -0,0 +1 @@
+import{_ as e,q as t,p as r,aq as a}from"./chunks/framework.DvIFzl91.js";const g=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/components/img/properties.md","filePath":"guide/components/img/properties.md"}'),o={name:"guide/components/img/properties.md"},s=a("",3),n=[s];function i(p,c,_,l,h,d){return r(),t("div",null,n)}const u=e(o,[["render",i]]);export{g as __pageData,u as default};
diff --git a/assets/guide_components_infinite-scroll-view_index.md.yAuD807x.js b/assets/guide_components_infinite-scroll-view_index.md.yAuD807x.js
new file mode 100644
index 0000000..086610a
--- /dev/null
+++ b/assets/guide_components_infinite-scroll-view_index.md.yAuD807x.js
@@ -0,0 +1,6 @@
+import{_ as h,q as p,Y as a,z as o,H as e,u as c,aq as g,S as n,p as k}from"./chunks/framework.DvIFzl91.js";const u={data(){return{value:[]}},mounted(){for(let t=0;t<new Date().getFullYear();t++)this.value.push(t+1)}},V=JSON.parse('{"title":"InfiniteScrollView","description":"","frontmatter":{"page":true,"title":"InfiniteScrollView"},"headers":[],"relativePath":"guide/components/infinite-scroll-view/index.md","filePath":"guide/components/infinite-scroll-view/index.md"}'),y=e("h3",{id:"infinitescrollview-demo",tabindex:"-1"},[c("InfiniteScrollView-DEMO "),e("a",{class:"header-anchor",href:"#infinitescrollview-demo","aria-label":'Permalink to "InfiniteScrollView-DEMO"'},"​")],-1),E=e("hr",null,null,-1),m=g(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-InfiniteScrollView</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">value</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-InfiniteScrollView</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">value</td><td style="text-align:center;">Array</td><td style="text-align:center;">No</td><td style="text-align:center;">[]</td><td style="text-align:center;">要装载的数组</td></tr><tr><td style="text-align:center;">batchSize</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">30</td><td style="text-align:center;">动态加载的每一批次大小</td></tr><tr><td style="text-align:center;">offset</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">100</td><td style="text-align:center;">滚动加载偏移量</td></tr><tr><td style="text-align:center;">static</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否取消动态加载</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">system</td><td style="text-align:center;">主题样式, 包含<code>light</code>, <code>dark</code>, <code>system</code>, <code>custom</code>几种样式</td></tr></tbody></table><h3 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to &quot;Events&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">事件名(Name)</th><th style="text-align:center;">参数类型(args)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">lazyload</td><td style="text-align:center;">boolean</td><td style="text-align:center;">动态加载时触发此事件, 返回当前加载批次数据是否为空</td></tr><tr><td style="text-align:center;">init-start</td><td style="text-align:center;">N/A</td><td style="text-align:center;">初始化加载开始</td></tr><tr><td style="text-align:center;">init-end</td><td style="text-align:center;">N/A</td><td style="text-align:center;">初始化加载结束</td></tr></tbody></table><h3 id="slot" tabindex="-1">Slot <a class="header-anchor" href="#slot" aria-label="Permalink to &quot;Slot&quot;">​</a></h3><hr><ol><li>Default</li></ol><p>默认模板, 可将<code>InfiniteScrollView</code>当作<code>Div</code>来使用</p><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">thisValue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">thisValue</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">dynamicValue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">dynamicValue</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;p v-for=&quot;(item, index) in dynamicValue&quot; :key=&quot;index&quot;&gt;{{item}}&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ul><li>thisValue: 传入数组</li><li>dynamicValue: 已动态加载的数组</li></ul><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span>&lt;template v-slot:default=&quot;x&quot;&gt;</span></span>
+<span class="line"><span>    &lt;p v-for=&quot;(item, index) in x.dynamicValue&quot; :key=&quot;index&quot;&gt;{{item}}&lt;/p&gt;</span></span>
+<span class="line"><span>&lt;/template&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div>`,14);function x(t,s,b,v,i,f){const l=n("fv-InfiniteScrollView"),r=n("ClientOnly");return k(),p("div",null,[y,E,a(r,null,{default:o(()=>[a(l,{modelValue:i.value,"onUpdate:modelValue":s[0]||(s[0]=d=>i.value=d)},null,8,["modelValue"])]),_:1}),m])}const q=h(u,[["render",x]]);export{V as __pageData,q as default};
diff --git a/assets/guide_components_infinite-scroll-view_index.md.yAuD807x.lean.js b/assets/guide_components_infinite-scroll-view_index.md.yAuD807x.lean.js
new file mode 100644
index 0000000..b5b1068
--- /dev/null
+++ b/assets/guide_components_infinite-scroll-view_index.md.yAuD807x.lean.js
@@ -0,0 +1 @@
+import{_ as h,q as p,Y as a,z as o,H as e,u as c,aq as g,S as n,p as k}from"./chunks/framework.DvIFzl91.js";const u={data(){return{value:[]}},mounted(){for(let t=0;t<new Date().getFullYear();t++)this.value.push(t+1)}},V=JSON.parse('{"title":"InfiniteScrollView","description":"","frontmatter":{"page":true,"title":"InfiniteScrollView"},"headers":[],"relativePath":"guide/components/infinite-scroll-view/index.md","filePath":"guide/components/infinite-scroll-view/index.md"}'),y=e("h3",{id:"infinitescrollview-demo",tabindex:"-1"},[c("InfiniteScrollView-DEMO "),e("a",{class:"header-anchor",href:"#infinitescrollview-demo","aria-label":'Permalink to "InfiniteScrollView-DEMO"'},"​")],-1),E=e("hr",null,null,-1),m=g("",14);function x(t,s,b,v,i,f){const l=n("fv-InfiniteScrollView"),r=n("ClientOnly");return k(),p("div",null,[y,E,a(r,null,{default:o(()=>[a(l,{modelValue:i.value,"onUpdate:modelValue":s[0]||(s[0]=d=>i.value=d)},null,8,["modelValue"])]),_:1}),m])}const q=h(u,[["render",x]]);export{V as __pageData,q as default};
diff --git a/assets/guide_components_info-box_emits.md.DlEwpkkq.js b/assets/guide_components_info-box_emits.md.DlEwpkkq.js
new file mode 100644
index 0000000..7cef51e
--- /dev/null
+++ b/assets/guide_components_info-box_emits.md.DlEwpkkq.js
@@ -0,0 +1 @@
+import{_ as t,q as e,p as a,aq as n}from"./chunks/framework.DvIFzl91.js";const f=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/components/info-box/emits.md","filePath":"guide/components/info-box/emits.md"}'),s={name:"guide/components/info-box/emits.md"},o=n('<h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-label="Permalink to &quot;Emits&quot;">​</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead></table>',3),i=[o];function r(_,c,m,d,l,h){return a(),e("div",null,i)}const u=t(s,[["render",r]]);export{f as __pageData,u as default};
diff --git a/assets/guide_components_info-box_emits.md.DlEwpkkq.lean.js b/assets/guide_components_info-box_emits.md.DlEwpkkq.lean.js
new file mode 100644
index 0000000..3e723eb
--- /dev/null
+++ b/assets/guide_components_info-box_emits.md.DlEwpkkq.lean.js
@@ -0,0 +1 @@
+import{_ as t,q as e,p as a,aq as n}from"./chunks/framework.DvIFzl91.js";const f=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/components/info-box/emits.md","filePath":"guide/components/info-box/emits.md"}'),s={name:"guide/components/info-box/emits.md"},o=n("",3),i=[o];function r(_,c,m,d,l,h){return a(),e("div",null,i)}const u=t(s,[["render",r]]);export{f as __pageData,u as default};
diff --git a/assets/guide_components_info-box_emits.md.c2e71eec.js b/assets/guide_components_info-box_emits.md.c2e71eec.js
deleted file mode 100644
index c978824..0000000
--- a/assets/guide_components_info-box_emits.md.c2e71eec.js
+++ /dev/null
@@ -1 +0,0 @@
-import{_ as t,c as e,o as n,a}from"./app.d60fa8c3.js";const g=JSON.parse('{"title":"Emits","description":"","frontmatter":{},"headers":[{"level":2,"title":"Emits","slug":"emits"}],"relativePath":"guide/components/info-box/emits.md"}'),r={name:"guide/components/info-box/emits.md"},s=a('<h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">cancel</td><td style="text-align:center;"></td><td style="text-align:center;">oncancel</td></tr><tr><td style="text-align:center;">confirm</td><td style="text-align:center;"></td><td style="text-align:center;">onconfirm</td></tr></tbody></table>',3),i=[s];function c(o,d,l,_,m,h){return n(),e("div",null,i)}var p=t(r,[["render",c]]);export{g as __pageData,p as default};
diff --git a/assets/guide_components_info-box_emits.md.c2e71eec.lean.js b/assets/guide_components_info-box_emits.md.c2e71eec.lean.js
deleted file mode 100644
index 571d2e3..0000000
--- a/assets/guide_components_info-box_emits.md.c2e71eec.lean.js
+++ /dev/null
@@ -1 +0,0 @@
-import{_ as t,c as e,o as n,a}from"./app.d60fa8c3.js";const g=JSON.parse('{"title":"Emits","description":"","frontmatter":{},"headers":[{"level":2,"title":"Emits","slug":"emits"}],"relativePath":"guide/components/info-box/emits.md"}'),r={name:"guide/components/info-box/emits.md"},s=a("",3),i=[s];function c(o,d,l,_,m,h){return n(),e("div",null,i)}var p=t(r,[["render",c]]);export{g as __pageData,p as default};
diff --git a/assets/guide_components_info-box_index.md.06175fed.js b/assets/guide_components_info-box_index.md.06175fed.js
deleted file mode 100644
index ed8f2f7..0000000
--- a/assets/guide_components_info-box_index.md.06175fed.js
+++ /dev/null
@@ -1,69 +0,0 @@
-import{d as D,c as y,b as p,w as t,u as r,a,r as i,o as u,e as c,i as d,I as C}from"./app.d60fa8c3.js";import{u as A}from"./chunks/index.9dba9c16.js";const b=a('<h1 id="infobox" tabindex="-1">InfoBox <a class="header-anchor" href="#infobox" aria-hidden="true">#</a></h1><h2 id="quick-start" tabindex="-1">Quick Start <a class="header-anchor" href="#quick-start" aria-hidden="true">#</a></h2><h3 id="default" tabindex="-1">Default <a class="header-anchor" href="#default" aria-hidden="true">#</a></h3><hr><ol><li>info</li></ol>',5),m=c(" Info here... "),f=a(`<div class="language-vue-html"><span class="copy"></span><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-info-box</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">status</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">info</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> @</span><span style="color:#C792EA;">confirm</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">onConfirm</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> @</span><span style="color:#C792EA;">cancel</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">onCancel</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">        Info here...</span></span>
-<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-info-box</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ol start="2"><li>correct</li></ol>`,2),h=c(" Info here... "),g=a(`<div class="language-vue-html"><span class="copy"></span><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-info-box</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">status</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">correct</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> @</span><span style="color:#C792EA;">confirm</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">onConfirm</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> @</span><span style="color:#C792EA;">cancel</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">onCancel</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">        Info here...</span></span>
-<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-info-box</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ol start="3"><li>warning</li></ol>`,2),x=c(" Info here... "),q=a(`<div class="language-vue-html"><span class="copy"></span><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-info-box</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">status</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">warning</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> @</span><span style="color:#C792EA;">confirm</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">onConfirm</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> @</span><span style="color:#C792EA;">cancel</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">onCancel</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">        Info here...</span></span>
-<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-info-box</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ol start="4"><li>error</li></ol>`,2),v=c(" Info here... "),E=a(`<div class="language-vue-html"><span class="copy"></span><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-info-box</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">status</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">error</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> @</span><span style="color:#C792EA;">confirm</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">onConfirm</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> @</span><span style="color:#C792EA;">cancel</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">onCancel</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">        Info here...</span></span>
-<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-info-box</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ol start="4"><li>blocked</li></ol>`,2),_=c(" Info here... "),B=a(`<div class="language-vue-html"><span class="copy"></span><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-info-box</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">status</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">blocked</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> @</span><span style="color:#C792EA;">confirm</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">onConfirm</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> @</span><span style="color:#C792EA;">cancel</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">onCancel</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">        Info here...</span></span>
-<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-info-box</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="global-function" tabindex="-1">Global Function <a class="header-anchor" href="#global-function" aria-hidden="true">#</a></h3><ol><li>use setup (recommend)</li></ol><div class="language-vue line-numbers-mode"><span class="copy"></span><pre><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">script</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">lang</span><span style="color:#A6ACCD;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">ts</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">setup</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;">InfoBoxMethod</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">InfoBoxKey</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">InfoBoxParams</span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">@/packages</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">inject</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">vue</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> </span></span>
-<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">useTheme</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">../common/index.js</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> </span></span>
-<span class="line"></span>
-<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> infoBox </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">inject</span><span style="color:#89DDFF;">&lt;</span><span style="color:#FFCB6B;">InfoBoxMethod</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">(InfoBoxKey)</span></span>
-<span class="line"></span>
-<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">useTheme</span><span style="color:#A6ACCD;">()</span></span>
-<span class="line"></span>
-<span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> instance</span><span style="color:#89DDFF;">:</span><span style="color:#FFCB6B;">InfoBoxParams</span><span style="color:#89DDFF;">;</span></span>
-<span class="line"></span>
-<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> onConfirm </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#89DDFF;">(){</span></span>
-<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">instance</span><span style="color:#89DDFF;">!==undefined</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">{</span></span>
-<span class="line"><span style="color:#F07178;">        </span><span style="color:#A6ACCD;">instance</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">close</span><span style="color:#F07178;">()</span></span>
-<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">}</span></span>
-<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">infoBox</span><span style="color:#89DDFF;">!==undefined</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">{</span></span>
-<span class="line"><span style="color:#F07178;">        </span><span style="color:#A6ACCD;">instance</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">infoBox</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
-<span class="line"><span style="color:#F07178;">            title</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">Confirm</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
-<span class="line"><span style="color:#F07178;">            message</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">You click the confirm button</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
-<span class="line"><span style="color:#F07178;">            status</span><span style="color:#89DDFF;">:</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">correct</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
-<span class="line"><span style="color:#F07178;">            theme</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">value</span></span>
-<span class="line"><span style="color:#F07178;">        </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span></span>
-<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">}</span></span>
-<span class="line"><span style="color:#89DDFF;">}</span></span>
-<span class="line"></span>
-<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> onCancel </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#89DDFF;">(){</span></span>
-<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">instance</span><span style="color:#89DDFF;">!==undefined</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">{</span></span>
-<span class="line"><span style="color:#F07178;">        </span><span style="color:#A6ACCD;">instance</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">close</span><span style="color:#F07178;">()</span></span>
-<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">}</span></span>
-<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">infoBox</span><span style="color:#89DDFF;">!==undefined</span><span style="color:#F07178;">)</span></span>
-<span class="line"><span style="color:#F07178;">        </span><span style="color:#A6ACCD;">instance</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">infoBox</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
-<span class="line"><span style="color:#F07178;">            title</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">Cancel</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
-<span class="line"><span style="color:#F07178;">            message</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">You click the cancel button</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
-<span class="line"><span style="color:#F07178;">            status</span><span style="color:#89DDFF;">:</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">blocked</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
-<span class="line"><span style="color:#F07178;">            theme</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">value</span></span>
-<span class="line"><span style="color:#F07178;">        </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span></span>
-<span class="line"><span style="color:#89DDFF;">}</span></span>
-<span class="line"></span>
-<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br></div></div><ol start="2"><li>use options</li></ol><div class="language-vue line-numbers-mode"><span class="copy"></span><pre><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#C792EA;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#89DDFF;">{</span></span>
-<span class="line"><span style="color:#F07178;">    </span><span style="color:#FFCB6B;">methods</span><span style="color:#89DDFF;">:{</span></span>
-<span class="line"><span style="color:#F07178;">        </span><span style="color:#82AAFF;">infoBox</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">{</span></span>
-<span class="line"><span style="color:#F07178;">            </span><span style="color:#89DDFF;">this.</span><span style="color:#82AAFF;">$infoBox</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
-<span class="line"><span style="color:#F07178;">                title</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">Confirm</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
-<span class="line"><span style="color:#F07178;">                message</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">You click the confirm button</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
-<span class="line"><span style="color:#F07178;">                status</span><span style="color:#89DDFF;">:</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">correct</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
-<span class="line"><span style="color:#F07178;">                theme</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">theme</span></span>
-<span class="line"><span style="color:#F07178;">            </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span></span>
-<span class="line"><span style="color:#F07178;">        </span><span style="color:#89DDFF;">}</span></span>
-<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">}</span></span>
-<span class="line"><span style="color:#89DDFF;">}</span></span>
-<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">cancel-title</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;Cancel&#39;</td><td style="text-align:center;">cancel text</td></tr><tr><td style="text-align:center;">confirm-title</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;Confirm&#39;</td><td style="text-align:center;">confirm text</td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">disabled</td></tr><tr><td style="text-align:center;">icon</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">title icon</td></tr><tr><td style="text-align:center;">lang</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">i18n</td></tr><tr><td style="text-align:center;">status</td><td style="text-align:center;">[&#39;info&#39;,&#39;error&#39;,&#39;warning&#39;,&#39;correct&#39;,&#39;blocked&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;info&#39;</td><td style="text-align:center;">status</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">[&#39;light&#39;,&#39;dark&#39;,&#39;global&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">theme</td></tr><tr><td style="text-align:center;">title</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;Tip&#39;</td><td style="text-align:center;">title</td></tr></tbody></table><h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">cancel</td><td style="text-align:center;"></td><td style="text-align:center;">oncancel</td></tr><tr><td style="text-align:center;">confirm</td><td style="text-align:center;"></td><td style="text-align:center;">onconfirm</td></tr></tbody></table>`,12),T=JSON.parse('{"title":"InfoBox","description":"","frontmatter":{"page":true,"title":"InfoBox"},"headers":[{"level":2,"title":"Quick Start","slug":"quick-start"},{"level":3,"title":"Default","slug":"default"},{"level":3,"title":"Global Function","slug":"global-function"},{"level":2,"title":"Properties","slug":"properties"},{"level":2,"title":"Emits","slug":"emits"}],"relativePath":"guide/components/info-box/index.md"}'),I={name:"guide/components/info-box/index.md"},Y=D({...I,setup(k){const F=d(C),{theme:s}=A();let n;const l=function(){n!==void 0&&n.close(),F!==void 0&&(n=F({title:"Confirm",message:"You click the confirm button",status:"correct",theme:s.value}))},e=function(){n!==void 0&&n.close(),F!==void 0&&(n=F({title:"Cancel",message:"You click the cancel button",status:"blocked",theme:s.value}))};return(w,N)=>{const o=i("fv-info-box");return u(),y("div",null,[b,p(o,{status:"info",theme:r(s),onConfirm:l,onCancel:e},{default:t(()=>[m]),_:1},8,["theme"]),f,p(o,{status:"correct",theme:r(s),onConfirm:l,onCancel:e},{default:t(()=>[h]),_:1},8,["theme"]),g,p(o,{status:"warning",theme:r(s),onConfirm:l,onCancel:e},{default:t(()=>[x]),_:1},8,["theme"]),q,p(o,{status:"error",theme:r(s),onConfirm:l,onCancel:e},{default:t(()=>[v]),_:1},8,["theme"]),E,p(o,{status:"blocked",theme:r(s),onConfirm:l,onCancel:e},{default:t(()=>[_]),_:1},8,["theme"]),B])}}});export{T as __pageData,Y as default};
diff --git a/assets/guide_components_info-box_index.md.06175fed.lean.js b/assets/guide_components_info-box_index.md.06175fed.lean.js
deleted file mode 100644
index ed8f2f7..0000000
--- a/assets/guide_components_info-box_index.md.06175fed.lean.js
+++ /dev/null
@@ -1,69 +0,0 @@
-import{d as D,c as y,b as p,w as t,u as r,a,r as i,o as u,e as c,i as d,I as C}from"./app.d60fa8c3.js";import{u as A}from"./chunks/index.9dba9c16.js";const b=a('<h1 id="infobox" tabindex="-1">InfoBox <a class="header-anchor" href="#infobox" aria-hidden="true">#</a></h1><h2 id="quick-start" tabindex="-1">Quick Start <a class="header-anchor" href="#quick-start" aria-hidden="true">#</a></h2><h3 id="default" tabindex="-1">Default <a class="header-anchor" href="#default" aria-hidden="true">#</a></h3><hr><ol><li>info</li></ol>',5),m=c(" Info here... "),f=a(`<div class="language-vue-html"><span class="copy"></span><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-info-box</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">status</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">info</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> @</span><span style="color:#C792EA;">confirm</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">onConfirm</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> @</span><span style="color:#C792EA;">cancel</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">onCancel</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">        Info here...</span></span>
-<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-info-box</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ol start="2"><li>correct</li></ol>`,2),h=c(" Info here... "),g=a(`<div class="language-vue-html"><span class="copy"></span><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-info-box</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">status</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">correct</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> @</span><span style="color:#C792EA;">confirm</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">onConfirm</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> @</span><span style="color:#C792EA;">cancel</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">onCancel</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">        Info here...</span></span>
-<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-info-box</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ol start="3"><li>warning</li></ol>`,2),x=c(" Info here... "),q=a(`<div class="language-vue-html"><span class="copy"></span><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-info-box</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">status</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">warning</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> @</span><span style="color:#C792EA;">confirm</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">onConfirm</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> @</span><span style="color:#C792EA;">cancel</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">onCancel</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">        Info here...</span></span>
-<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-info-box</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ol start="4"><li>error</li></ol>`,2),v=c(" Info here... "),E=a(`<div class="language-vue-html"><span class="copy"></span><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-info-box</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">status</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">error</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> @</span><span style="color:#C792EA;">confirm</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">onConfirm</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> @</span><span style="color:#C792EA;">cancel</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">onCancel</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">        Info here...</span></span>
-<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-info-box</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ol start="4"><li>blocked</li></ol>`,2),_=c(" Info here... "),B=a(`<div class="language-vue-html"><span class="copy"></span><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-info-box</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">status</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">blocked</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> @</span><span style="color:#C792EA;">confirm</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">onConfirm</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> @</span><span style="color:#C792EA;">cancel</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">onCancel</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">        Info here...</span></span>
-<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-info-box</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="global-function" tabindex="-1">Global Function <a class="header-anchor" href="#global-function" aria-hidden="true">#</a></h3><ol><li>use setup (recommend)</li></ol><div class="language-vue line-numbers-mode"><span class="copy"></span><pre><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">script</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">lang</span><span style="color:#A6ACCD;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">ts</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">setup</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;">InfoBoxMethod</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">InfoBoxKey</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">InfoBoxParams</span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">@/packages</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">inject</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">vue</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> </span></span>
-<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">useTheme</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">../common/index.js</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> </span></span>
-<span class="line"></span>
-<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> infoBox </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">inject</span><span style="color:#89DDFF;">&lt;</span><span style="color:#FFCB6B;">InfoBoxMethod</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">(InfoBoxKey)</span></span>
-<span class="line"></span>
-<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">useTheme</span><span style="color:#A6ACCD;">()</span></span>
-<span class="line"></span>
-<span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> instance</span><span style="color:#89DDFF;">:</span><span style="color:#FFCB6B;">InfoBoxParams</span><span style="color:#89DDFF;">;</span></span>
-<span class="line"></span>
-<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> onConfirm </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#89DDFF;">(){</span></span>
-<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">instance</span><span style="color:#89DDFF;">!==undefined</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">{</span></span>
-<span class="line"><span style="color:#F07178;">        </span><span style="color:#A6ACCD;">instance</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">close</span><span style="color:#F07178;">()</span></span>
-<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">}</span></span>
-<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">infoBox</span><span style="color:#89DDFF;">!==undefined</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">{</span></span>
-<span class="line"><span style="color:#F07178;">        </span><span style="color:#A6ACCD;">instance</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">infoBox</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
-<span class="line"><span style="color:#F07178;">            title</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">Confirm</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
-<span class="line"><span style="color:#F07178;">            message</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">You click the confirm button</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
-<span class="line"><span style="color:#F07178;">            status</span><span style="color:#89DDFF;">:</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">correct</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
-<span class="line"><span style="color:#F07178;">            theme</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">value</span></span>
-<span class="line"><span style="color:#F07178;">        </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span></span>
-<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">}</span></span>
-<span class="line"><span style="color:#89DDFF;">}</span></span>
-<span class="line"></span>
-<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> onCancel </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#89DDFF;">(){</span></span>
-<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">instance</span><span style="color:#89DDFF;">!==undefined</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">{</span></span>
-<span class="line"><span style="color:#F07178;">        </span><span style="color:#A6ACCD;">instance</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">close</span><span style="color:#F07178;">()</span></span>
-<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">}</span></span>
-<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">infoBox</span><span style="color:#89DDFF;">!==undefined</span><span style="color:#F07178;">)</span></span>
-<span class="line"><span style="color:#F07178;">        </span><span style="color:#A6ACCD;">instance</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">infoBox</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
-<span class="line"><span style="color:#F07178;">            title</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">Cancel</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
-<span class="line"><span style="color:#F07178;">            message</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">You click the cancel button</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
-<span class="line"><span style="color:#F07178;">            status</span><span style="color:#89DDFF;">:</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">blocked</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
-<span class="line"><span style="color:#F07178;">            theme</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">value</span></span>
-<span class="line"><span style="color:#F07178;">        </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span></span>
-<span class="line"><span style="color:#89DDFF;">}</span></span>
-<span class="line"></span>
-<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br></div></div><ol start="2"><li>use options</li></ol><div class="language-vue line-numbers-mode"><span class="copy"></span><pre><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#C792EA;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#89DDFF;">{</span></span>
-<span class="line"><span style="color:#F07178;">    </span><span style="color:#FFCB6B;">methods</span><span style="color:#89DDFF;">:{</span></span>
-<span class="line"><span style="color:#F07178;">        </span><span style="color:#82AAFF;">infoBox</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">{</span></span>
-<span class="line"><span style="color:#F07178;">            </span><span style="color:#89DDFF;">this.</span><span style="color:#82AAFF;">$infoBox</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
-<span class="line"><span style="color:#F07178;">                title</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">Confirm</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
-<span class="line"><span style="color:#F07178;">                message</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">You click the confirm button</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
-<span class="line"><span style="color:#F07178;">                status</span><span style="color:#89DDFF;">:</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">correct</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
-<span class="line"><span style="color:#F07178;">                theme</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">theme</span></span>
-<span class="line"><span style="color:#F07178;">            </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span></span>
-<span class="line"><span style="color:#F07178;">        </span><span style="color:#89DDFF;">}</span></span>
-<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">}</span></span>
-<span class="line"><span style="color:#89DDFF;">}</span></span>
-<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">cancel-title</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;Cancel&#39;</td><td style="text-align:center;">cancel text</td></tr><tr><td style="text-align:center;">confirm-title</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;Confirm&#39;</td><td style="text-align:center;">confirm text</td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">disabled</td></tr><tr><td style="text-align:center;">icon</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">title icon</td></tr><tr><td style="text-align:center;">lang</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">i18n</td></tr><tr><td style="text-align:center;">status</td><td style="text-align:center;">[&#39;info&#39;,&#39;error&#39;,&#39;warning&#39;,&#39;correct&#39;,&#39;blocked&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;info&#39;</td><td style="text-align:center;">status</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">[&#39;light&#39;,&#39;dark&#39;,&#39;global&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">theme</td></tr><tr><td style="text-align:center;">title</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;Tip&#39;</td><td style="text-align:center;">title</td></tr></tbody></table><h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">cancel</td><td style="text-align:center;"></td><td style="text-align:center;">oncancel</td></tr><tr><td style="text-align:center;">confirm</td><td style="text-align:center;"></td><td style="text-align:center;">onconfirm</td></tr></tbody></table>`,12),T=JSON.parse('{"title":"InfoBox","description":"","frontmatter":{"page":true,"title":"InfoBox"},"headers":[{"level":2,"title":"Quick Start","slug":"quick-start"},{"level":3,"title":"Default","slug":"default"},{"level":3,"title":"Global Function","slug":"global-function"},{"level":2,"title":"Properties","slug":"properties"},{"level":2,"title":"Emits","slug":"emits"}],"relativePath":"guide/components/info-box/index.md"}'),I={name:"guide/components/info-box/index.md"},Y=D({...I,setup(k){const F=d(C),{theme:s}=A();let n;const l=function(){n!==void 0&&n.close(),F!==void 0&&(n=F({title:"Confirm",message:"You click the confirm button",status:"correct",theme:s.value}))},e=function(){n!==void 0&&n.close(),F!==void 0&&(n=F({title:"Cancel",message:"You click the cancel button",status:"blocked",theme:s.value}))};return(w,N)=>{const o=i("fv-info-box");return u(),y("div",null,[b,p(o,{status:"info",theme:r(s),onConfirm:l,onCancel:e},{default:t(()=>[m]),_:1},8,["theme"]),f,p(o,{status:"correct",theme:r(s),onConfirm:l,onCancel:e},{default:t(()=>[h]),_:1},8,["theme"]),g,p(o,{status:"warning",theme:r(s),onConfirm:l,onCancel:e},{default:t(()=>[x]),_:1},8,["theme"]),q,p(o,{status:"error",theme:r(s),onConfirm:l,onCancel:e},{default:t(()=>[v]),_:1},8,["theme"]),E,p(o,{status:"blocked",theme:r(s),onConfirm:l,onCancel:e},{default:t(()=>[_]),_:1},8,["theme"]),B])}}});export{T as __pageData,Y as default};
diff --git a/assets/guide_components_info-box_index.md.vXh-_DsL.js b/assets/guide_components_info-box_index.md.vXh-_DsL.js
new file mode 100644
index 0000000..91009d7
--- /dev/null
+++ b/assets/guide_components_info-box_index.md.vXh-_DsL.js
@@ -0,0 +1,85 @@
+import{_ as d,l,S as e,q as g,Y as s,z as i,H as p,u as h,aq as n,p as o}from"./chunks/framework.DvIFzl91.js";const c={data(){return{}},methods:{show1(){this.$infoBox("This is a toast info.",{status:"correct",title:"Toast Info",confirmTitle:"Confirm",cancelTitle:"Cancel",confirm:()=>{alert("Confirm")},cancel:()=>{alert("Cancel")}})},show2(){this.$infoBox(l("div",[l("span",{class:"header"},"Message"),"This is a toast info.",l("a",{style:{fontWeight:"bold"}},"Visit our website.")]),{status:"correct",confirmTitle:"Confirm",cancelTitle:"Cancel",confirm:()=>{alert("Confirm")},cancel:()=>{alert("Cancel")}})},show3(){this.$infoBox(l("div",[l("span",{class:"header"},"Message"),"This is a toast info.",l("a",{style:{fontWeight:"bold"}},"Visit our website.")]),{status:"correct",confirmTitle:"Confirm",cancelTitle:"Cancel",showTitleBar:!1,control_panel:k=>l(e("fv-button"),{style:{width:"200px"},background:k.iconList.correct.backgroundColor,theme:"dark",onClick:()=>{k.confirm()}},"Custom Control Button"),confirm:()=>{alert("Confirm")},cancel:()=>{alert("Cancel")}})}}},W=JSON.parse('{"title":"InfoBox","description":"","frontmatter":{"page":true,"title":"InfoBox"},"headers":[],"relativePath":"guide/components/info-box/index.md","filePath":"guide/components/info-box/index.md"}'),y=p("h3",{id:"infobox-demo",tabindex:"-1"},[h("InfoBox-DEMO "),p("a",{class:"header-anchor",href:"#infobox-demo","aria-label":'Permalink to "InfoBox-DEMO"'},"​")],-1),u=p("hr",null,null,-1),F=p("p",null,"Default",-1),b=n(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-InfoBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-InfoBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>Error</p>`,2),C=n(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-InfoBox</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> status</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;error&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-InfoBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>Blocked</p>`,2),m=n(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-InfoBox</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> status</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;blocked&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-InfoBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>Correct</p>`,2),_=n(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-InfoBox</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> status</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;correct&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-InfoBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>Warning</p>`,2),B=n(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-InfoBox</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> status</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;warning&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-InfoBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>Without TitleBar</p>`,2),v=n(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-InfoBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">showTitleBar</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-InfoBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="infobox-dark-theme" tabindex="-1">InfoBox-Dark Theme <a class="header-anchor" href="#infobox-dark-theme" aria-label="Permalink to &quot;InfoBox-Dark Theme&quot;">​</a></h3><hr><p>Default</p>`,4),f=n(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-InfoBox</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;dark&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-InfoBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>Error</p>`,2),x=n(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-InfoBox</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> status</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;error&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;dark&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-InfoBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>Blocked</p>`,2),T=n(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-InfoBox</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> status</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;blocked&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;dark&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-InfoBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>Correct</p>`,2),A=n(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-InfoBox</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> status</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;correct&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;dark&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-InfoBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>Warning</p>`,2),q=n(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-InfoBox</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> status</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;warning&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;dark&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-InfoBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>Without TitleBar</p>`,2),D=n(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-InfoBox</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;dark&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">showTitleBar</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-InfoBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="infobox-toast" tabindex="-1">InfoBox-Toast <a class="header-anchor" href="#infobox-toast" aria-label="Permalink to &quot;InfoBox-Toast&quot;">​</a></h3><hr><ol><li>Standard</li></ol>`,4),I=n(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">200</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> @</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">click</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">show1</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Show InfoBox&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-javascript vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$infoBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;This is a toast info.&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    status: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;correct&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    title: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Toast Info&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    confirm</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">alert</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Confirm&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">); },</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    cancel</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">alert</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Cancel&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">); }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><ol start="2"><li>Customize Message Template</li></ol>`,3),w=n(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">200</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> @</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">click</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">show2</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Show InfoBox&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-javascript vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$infoBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">h</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;div&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, [</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    h</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;span&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, { class: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;header&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Message&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">),</span></span>
+<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">    &#39;This is a toast info.&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    h</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;a&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        style: {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            fontWeight: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;bold&#39;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    }, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Visit our website.&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]), {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    status: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;correct&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    confirmTitle: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Confirm&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    cancelTitle: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Cancel&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    confirm</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">alert</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Confirm&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">); },</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    cancel</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">alert</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Cancel&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">); }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><ol start="3"><li>Customize Control Panel</li></ol>`,3),S=n(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">200</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> @</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">click</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">show3</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Show InfoBox&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-javascript vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$infoBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">h</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;div&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, [</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    h</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;span&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, { class: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;header&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Message&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">),</span></span>
+<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">    &#39;This is a toast info.&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    h</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;a&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        style: {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            fontWeight: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;bold&#39;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    }, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Visit our website.&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]), {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    status: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;correct&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    confirmTitle: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Confirm&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    cancelTitle: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Cancel&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    showTitleBar: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    control_panel</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">x</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">    return</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> h</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">resolveComponent</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;fv-button&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">), {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            style: {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                width: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;200px&#39;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            background: x.iconList[</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;correct&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">].backgroundColor,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            theme: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;dark&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">            onClick</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                x.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">confirm</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        }, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Custom Control Button&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    },</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    confirm</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">alert</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Confirm&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">); },</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    cancel</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">alert</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Cancel&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">); }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br></div></div><h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">title</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">Tip</td><td style="text-align:center;"><code>InfoBox</code>窗口标题</td></tr><tr><td style="text-align:center;">status</td><td style="text-align:center;">[&#39;default&#39;,&#39;warning&#39;,&#39;correct&#39;,&#39;blocked&#39;,&#39;error&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">default</td><td style="text-align:center;">显示状态, 一共有5种</td></tr><tr><td style="text-align:center;">mode</td><td style="text-align:center;">[&#39;relative&#39;,&#39;absolute&#39;,&#39;fixed&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">relative</td><td style="text-align:center;">显示定位模式</td></tr><tr><td style="text-align:center;">toast</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">点击按钮后是否采用<code>toast</code>模式</td></tr><tr><td style="text-align:center;">confirmTitle</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">确定</td><td style="text-align:center;">确定按钮标题</td></tr><tr><td style="text-align:center;">cancelTitle</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">取消</td><td style="text-align:center;">取消按钮标题</td></tr><tr><td style="text-align:center;">acrylic</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否开启背景毛玻璃</td></tr><tr><td style="text-align:center;">showTitleBar</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">true</td><td style="text-align:center;">是否显示标题栏</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">system</td><td style="text-align:center;">主题样式, 包含<code>light</code>, <code>dark</code>, <code>system</code>, <code>custom</code>几种样式</td></tr></tbody></table><h3 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to &quot;Events&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">事件名(Name)</th><th style="text-align:center;">参数类型(args)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">confirm</td><td style="text-align:center;"></td><td style="text-align:center;">确认<code>InfoBox</code>时触发事件</td></tr><tr><td style="text-align:center;">close</td><td style="text-align:center;"></td><td style="text-align:center;">取消<code>InfoBox</code>时触发事件</td></tr></tbody></table><h3 id="slot" tabindex="-1">Slot <a class="header-anchor" href="#slot" aria-label="Permalink to &quot;Slot&quot;">​</a></h3><hr><ol><li>Msg</li></ol><ul><li>默认为正常标题</li><li><code>class=&quot;header&quot;</code> 加粗标题</li><li><code>&lt;a&gt;&lt;/a&gt;</code> 链接</li></ul><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">msg</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Normal content &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;header&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Header content&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">a</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Link&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">a</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ol start="2"><li>Control Panel</li></ol><ul><li>confirm: 确认函数</li><li>cancel: 取消函数</li><li>theme: 当前主题</li><li>iconList: 图标列表及颜色数组</li></ul><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">control-panel</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;&#39;dark&#39;&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x.iconList[status].backgroundColor</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">isBoxShadow</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">borderRadius</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">6</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">50</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">35</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">margin-right</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">2.5</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> @</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">click</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x.confirm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Confirm&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x.theme</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">isBoxShadow</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">borderRadius</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">6</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">50</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">35</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">margin-left</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">2.5</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> @</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">click</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x.cancel</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Cancel&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">### Toast</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">---</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">\`\`\`javascript</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">this.$infoBox(msg, options = {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    title: &#39;Tip&#39;,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    status: &#39;default&#39;,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    mode: &#39;fixed&#39;,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    toast: true,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    confirmTitle: &#39;确定&#39;,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    cancelTitle: &#39;取消&#39;,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    acrylic: false,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    confirm: async () =&gt; {},</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    cancel: async () =&gt; {},</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    control_panel: null,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    theme: &#39;global&#39;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">msg: h() // 传入$createElement函数</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">control_panel: x =&gt; h() // 传入具名插槽属性参数的函数, 函数返回值为$createElement函数</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br></div></div>`,16);function P(k,V,N,R,$,r){const t=e("fv-InfoBox"),a=e("ClientOnly"),E=e("fv-button");return o(),g("div",null,[y,u,F,s(a,null,{default:i(()=>[s(t)]),_:1}),b,s(a,null,{default:i(()=>[s(t,{status:"error"})]),_:1}),C,s(a,null,{default:i(()=>[s(t,{status:"blocked"})]),_:1}),m,s(a,null,{default:i(()=>[s(t,{status:"correct"})]),_:1}),_,s(a,null,{default:i(()=>[s(t,{status:"warning"})]),_:1}),B,s(a,null,{default:i(()=>[s(t,{showTitleBar:!1})]),_:1}),v,s(a,null,{default:i(()=>[s(t,{theme:"dark"})]),_:1}),f,s(a,null,{default:i(()=>[s(t,{status:"error",theme:"dark"})]),_:1}),x,s(a,null,{default:i(()=>[s(t,{status:"blocked",theme:"dark"})]),_:1}),T,s(a,null,{default:i(()=>[s(t,{status:"correct",theme:"dark"})]),_:1}),A,s(a,null,{default:i(()=>[s(t,{status:"warning",theme:"dark"})]),_:1}),q,s(a,null,{default:i(()=>[s(t,{theme:"dark",showTitleBar:!1})]),_:1}),D,s(a,null,{default:i(()=>[s(E,{style:{width:"200px"},onClick:r.show1},{default:i(()=>[h("Show InfoBox")]),_:1},8,["onClick"])]),_:1}),I,s(a,null,{default:i(()=>[s(E,{style:{width:"200px"},onClick:r.show2},{default:i(()=>[h("Show InfoBox")]),_:1},8,["onClick"])]),_:1}),w,s(a,null,{default:i(()=>[s(E,{style:{width:"200px"},onClick:r.show3},{default:i(()=>[h("Show InfoBox")]),_:1},8,["onClick"])]),_:1}),S])}const j=d(c,[["render",P]]);export{W as __pageData,j as default};
diff --git a/assets/guide_components_info-box_index.md.vXh-_DsL.lean.js b/assets/guide_components_info-box_index.md.vXh-_DsL.lean.js
new file mode 100644
index 0000000..76e5191
--- /dev/null
+++ b/assets/guide_components_info-box_index.md.vXh-_DsL.lean.js
@@ -0,0 +1 @@
+import{_ as d,l,S as e,q as g,Y as s,z as i,H as p,u as h,aq as n,p as o}from"./chunks/framework.DvIFzl91.js";const c={data(){return{}},methods:{show1(){this.$infoBox("This is a toast info.",{status:"correct",title:"Toast Info",confirmTitle:"Confirm",cancelTitle:"Cancel",confirm:()=>{alert("Confirm")},cancel:()=>{alert("Cancel")}})},show2(){this.$infoBox(l("div",[l("span",{class:"header"},"Message"),"This is a toast info.",l("a",{style:{fontWeight:"bold"}},"Visit our website.")]),{status:"correct",confirmTitle:"Confirm",cancelTitle:"Cancel",confirm:()=>{alert("Confirm")},cancel:()=>{alert("Cancel")}})},show3(){this.$infoBox(l("div",[l("span",{class:"header"},"Message"),"This is a toast info.",l("a",{style:{fontWeight:"bold"}},"Visit our website.")]),{status:"correct",confirmTitle:"Confirm",cancelTitle:"Cancel",showTitleBar:!1,control_panel:k=>l(e("fv-button"),{style:{width:"200px"},background:k.iconList.correct.backgroundColor,theme:"dark",onClick:()=>{k.confirm()}},"Custom Control Button"),confirm:()=>{alert("Confirm")},cancel:()=>{alert("Cancel")}})}}},W=JSON.parse('{"title":"InfoBox","description":"","frontmatter":{"page":true,"title":"InfoBox"},"headers":[],"relativePath":"guide/components/info-box/index.md","filePath":"guide/components/info-box/index.md"}'),y=p("h3",{id:"infobox-demo",tabindex:"-1"},[h("InfoBox-DEMO "),p("a",{class:"header-anchor",href:"#infobox-demo","aria-label":'Permalink to "InfoBox-DEMO"'},"​")],-1),u=p("hr",null,null,-1),F=p("p",null,"Default",-1),b=n("",2),C=n("",2),m=n("",2),_=n("",2),B=n("",2),v=n("",4),f=n("",2),x=n("",2),T=n("",2),A=n("",2),q=n("",2),D=n("",4),I=n("",3),w=n("",3),S=n("",16);function P(k,V,N,R,$,r){const t=e("fv-InfoBox"),a=e("ClientOnly"),E=e("fv-button");return o(),g("div",null,[y,u,F,s(a,null,{default:i(()=>[s(t)]),_:1}),b,s(a,null,{default:i(()=>[s(t,{status:"error"})]),_:1}),C,s(a,null,{default:i(()=>[s(t,{status:"blocked"})]),_:1}),m,s(a,null,{default:i(()=>[s(t,{status:"correct"})]),_:1}),_,s(a,null,{default:i(()=>[s(t,{status:"warning"})]),_:1}),B,s(a,null,{default:i(()=>[s(t,{showTitleBar:!1})]),_:1}),v,s(a,null,{default:i(()=>[s(t,{theme:"dark"})]),_:1}),f,s(a,null,{default:i(()=>[s(t,{status:"error",theme:"dark"})]),_:1}),x,s(a,null,{default:i(()=>[s(t,{status:"blocked",theme:"dark"})]),_:1}),T,s(a,null,{default:i(()=>[s(t,{status:"correct",theme:"dark"})]),_:1}),A,s(a,null,{default:i(()=>[s(t,{status:"warning",theme:"dark"})]),_:1}),q,s(a,null,{default:i(()=>[s(t,{theme:"dark",showTitleBar:!1})]),_:1}),D,s(a,null,{default:i(()=>[s(E,{style:{width:"200px"},onClick:r.show1},{default:i(()=>[h("Show InfoBox")]),_:1},8,["onClick"])]),_:1}),I,s(a,null,{default:i(()=>[s(E,{style:{width:"200px"},onClick:r.show2},{default:i(()=>[h("Show InfoBox")]),_:1},8,["onClick"])]),_:1}),w,s(a,null,{default:i(()=>[s(E,{style:{width:"200px"},onClick:r.show3},{default:i(()=>[h("Show InfoBox")]),_:1},8,["onClick"])]),_:1}),S])}const j=d(c,[["render",P]]);export{W as __pageData,j as default};
diff --git a/assets/guide_components_info-box_properties.md.314dbb00.js b/assets/guide_components_info-box_properties.md.314dbb00.js
deleted file mode 100644
index cd645d9..0000000
--- a/assets/guide_components_info-box_properties.md.314dbb00.js
+++ /dev/null
@@ -1 +0,0 @@
-import{_ as t,c as e,o as n,a as l}from"./app.d60fa8c3.js";const h=JSON.parse('{"title":"Properties","description":"","frontmatter":{},"headers":[{"level":2,"title":"Properties","slug":"properties"}],"relativePath":"guide/components/info-box/properties.md"}'),r={name:"guide/components/info-box/properties.md"},d=l('<h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">cancel-title</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;Cancel&#39;</td><td style="text-align:center;">cancel text</td></tr><tr><td style="text-align:center;">confirm-title</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;Confirm&#39;</td><td style="text-align:center;">confirm text</td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">disabled</td></tr><tr><td style="text-align:center;">icon</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">title icon</td></tr><tr><td style="text-align:center;">lang</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">i18n</td></tr><tr><td style="text-align:center;">status</td><td style="text-align:center;">[&#39;info&#39;,&#39;error&#39;,&#39;warning&#39;,&#39;correct&#39;,&#39;blocked&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;info&#39;</td><td style="text-align:center;">status</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">[&#39;light&#39;,&#39;dark&#39;,&#39;global&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">theme</td></tr><tr><td style="text-align:center;">title</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;Tip&#39;</td><td style="text-align:center;">title</td></tr></tbody></table>',3),i=[d];function a(s,c,o,g,x,y){return n(),e("div",null,i)}var _=t(r,[["render",a]]);export{h as __pageData,_ as default};
diff --git a/assets/guide_components_info-box_properties.md.314dbb00.lean.js b/assets/guide_components_info-box_properties.md.314dbb00.lean.js
deleted file mode 100644
index 6de6e0a..0000000
--- a/assets/guide_components_info-box_properties.md.314dbb00.lean.js
+++ /dev/null
@@ -1 +0,0 @@
-import{_ as t,c as e,o as n,a as l}from"./app.d60fa8c3.js";const h=JSON.parse('{"title":"Properties","description":"","frontmatter":{},"headers":[{"level":2,"title":"Properties","slug":"properties"}],"relativePath":"guide/components/info-box/properties.md"}'),r={name:"guide/components/info-box/properties.md"},d=l("",3),i=[d];function a(s,c,o,g,x,y){return n(),e("div",null,i)}var _=t(r,[["render",a]]);export{h as __pageData,_ as default};
diff --git a/assets/guide_components_info-box_properties.md.BI7Nvk-E.js b/assets/guide_components_info-box_properties.md.BI7Nvk-E.js
new file mode 100644
index 0000000..16002ed
--- /dev/null
+++ b/assets/guide_components_info-box_properties.md.BI7Nvk-E.js
@@ -0,0 +1 @@
+import{_ as e,q as t,p as r,aq as o}from"./chunks/framework.DvIFzl91.js";const f=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/components/info-box/properties.md","filePath":"guide/components/info-box/properties.md"}'),a={name:"guide/components/info-box/properties.md"},n=o('<h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-label="Permalink to &quot;Properties&quot;">​</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead></table>',3),s=[n];function i(p,c,_,l,h,d){return r(),t("div",null,s)}const u=e(a,[["render",i]]);export{f as __pageData,u as default};
diff --git a/assets/guide_components_info-box_properties.md.BI7Nvk-E.lean.js b/assets/guide_components_info-box_properties.md.BI7Nvk-E.lean.js
new file mode 100644
index 0000000..b0698c2
--- /dev/null
+++ b/assets/guide_components_info-box_properties.md.BI7Nvk-E.lean.js
@@ -0,0 +1 @@
+import{_ as e,q as t,p as r,aq as o}from"./chunks/framework.DvIFzl91.js";const f=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/components/info-box/properties.md","filePath":"guide/components/info-box/properties.md"}'),a={name:"guide/components/info-box/properties.md"},n=o("",3),s=[n];function i(p,c,_,l,h,d){return r(),t("div",null,s)}const u=e(a,[["render",i]]);export{f as __pageData,u as default};
diff --git a/assets/guide_components_list-view_index.md.BoYvMzb0.js b/assets/guide_components_list-view_index.md.BoYvMzb0.js
new file mode 100644
index 0000000..582c86f
--- /dev/null
+++ b/assets/guide_components_list-view_index.md.BoYvMzb0.js
@@ -0,0 +1,35 @@
+import{_ as d,q as r,H as e,Y as t,z as h,u as E,aq as p,S as k,p as g}from"./chunks/framework.DvIFzl91.js";const o={data(){return{items:[{key:"fruitsHeader",name:"Fruits",type:"header"},{key:"apple",name:"Apple",choosen:!0},{key:"banana",name:"Banana"},{key:"orange",name:"Orange",disabled:!0},{key:"grape",name:"Grape"},{key:"divider_1",name:"",type:"divider"},{key:"vegetablesHeader",name:"Vegetables",type:"header"},{key:"broccoli",name:"Broccoli"},{key:"carrot",name:"Carrot"},{key:"lettuce",name:"Lettuce"}]}}},f=JSON.parse('{"title":"ListView","description":"","frontmatter":{"page":true,"title":"ListView"},"headers":[],"relativePath":"guide/components/list-view/index.md","filePath":"guide/components/list-view/index.md"}'),y=e("h3",{id:"listview-demo",tabindex:"-1"},[E("ListView-DEMO "),e("a",{class:"header-anchor",href:"#listview-demo","aria-label":'Permalink to "ListView-DEMO"'},"​")],-1),c=e("hr",null,null,-1),u={style:{width:"100%",height:"500px",padding:"15px"}},F=p(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">500</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">padding</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">15</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;fv-ListView v-model=&quot;items&quot; :showSlider=&quot;true&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/fv-ListView&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h3 id="listview-multiple" tabindex="-1">ListView-Multiple <a class="header-anchor" href="#listview-multiple" aria-label="Permalink to &quot;ListView-Multiple&quot;">​</a></h3><hr>`,3),m={style:{width:"100%",height:"500px",padding:"15px"}},b=p(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">500</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">padding</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">15</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;fv-ListView v-model=&quot;items&quot; :multiple=&quot;true&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/fv-ListView&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h3 id="listview-dark-theme" tabindex="-1">ListView-Dark Theme <a class="header-anchor" href="#listview-dark-theme" aria-label="Permalink to &quot;ListView-Dark Theme&quot;">​</a></h3><hr>`,3),C={style:{width:"100%",height:"500px",padding:"15px",background:"black"}},v=p(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">500</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">padding</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">15</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">black</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;fv-ListView v-model=&quot;items&quot; theme=&quot;dark&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/fv-ListView&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h3 id="listview-custom-choosen-background" tabindex="-1">ListView-Custom Choosen Background <a class="header-anchor" href="#listview-custom-choosen-background" aria-label="Permalink to &quot;ListView-Custom Choosen Background&quot;">​</a></h3><hr>`,3),x={style:{width:"100%",height:"500px",padding:"15px",background:"black"}},B=p(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">500</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">padding</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">15</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">black</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;fv-ListView v-model=&quot;items&quot; theme=&quot;dark&quot; choosenBackground=&quot;rgba(0, 204, 153, 0.6)&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/fv-ListView&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">value</td><td style="text-align:center;">Array</td><td style="text-align:center;">Yes</td><td style="text-align:center;">N/A</td><td style="text-align:center;">ListView数据绑定</td></tr><tr><td style="text-align:center;">choosen</td><td style="text-align:center;">Array</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">外部设置ListView选中项</td></tr><tr><td style="text-align:center;">multiple</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否开启多选</td></tr><tr><td style="text-align:center;">rowHeight</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">每一项高度</td></tr><tr><td style="text-align:center;">headerForeground</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">标题前景色</td></tr><tr><td style="text-align:center;">choosenBackground</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">选中项背景色</td></tr><tr><td style="text-align:center;">itemPadding</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">每一项的<code>padding</code>值</td></tr><tr><td style="text-align:center;">itemBorderRadius</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">每一项的边框圆角</td></tr><tr><td style="text-align:center;">revealBorderColor</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">Reveal边框颜色</td></tr><tr><td style="text-align:center;">revealBackgroundColor</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">Reveal背景颜色</td></tr><tr><td style="text-align:center;">showSlider</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否显示选中项滑动条</td></tr><tr><td style="text-align:center;">sliderTarget</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">修改滑动条绑定元素, 可通过<code>sync</code>方法同步, 注意元素需要存在于<code>ListView</code>中</td></tr><tr><td style="text-align:center;">sliderIndex</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">修改滑动条绑定元素索引, 可通过<code>sync</code>方法同步</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">system</td><td style="text-align:center;">主题样式, 包含<code>light</code>, <code>dark</code>, <code>system</code>, <code>custom</code>几种样式</td></tr></tbody></table><h3 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to &quot;Events&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">事件名(Name)</th><th style="text-align:center;">参数类型(args)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">item-click</td><td style="text-align:center;">object</td><td style="text-align:center;">选中项点击后返回选项</td></tr><tr><td style="text-align:center;">chooseItem</td><td style="text-align:center;">object</td><td style="text-align:center;">选中项点击后返回选项</td></tr><tr><td style="text-align:center;">choosen-items</td><td style="text-align:center;">array</td><td style="text-align:center;">选中项点击后返回所有被选中项</td></tr><tr><td style="text-align:center;">selection-change</td><td style="text-align:center;">object</td><td style="text-align:center;">光标选择某一项后返回选中项</td></tr><tr><td style="text-align:center;">item-drag-over</td><td style="text-align:center;">{root, drop}</td><td style="text-align:center;">当前项被放置进入</td></tr><tr><td style="text-align:center;">item-drag-leave</td><td style="text-align:center;">{root, drop}</td><td style="text-align:center;">当前项被放置离开</td></tr><tr><td style="text-align:center;">item-drop</td><td style="text-align:center;">{root, drop}</td><td style="text-align:center;">当前项被放置</td></tr></tbody></table><h3 id="slot" tabindex="-1">Slot <a class="header-anchor" href="#slot" aria-label="Permalink to &quot;Slot&quot;">​</a></h3><hr><ol><li>ListItem</li></ol><p>默认以value中每一项的属性name作为默认显示, 包含以下可选属性</p><ul><li>item: 当前项</li><li>index: 当前项索引</li></ul><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">listItem</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ol start="2"><li>Header</li></ol><p>ListView前置内容</p><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">header</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ol start="3"><li>Footer</li></ol><p>ListView后置内容</p><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">footer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="data" tabindex="-1">Data <a class="header-anchor" href="#data" aria-label="Permalink to &quot;Data&quot;">​</a></h3><hr><ol><li>items</li></ol><p>其中<code>key</code>字段建议开发者在有重复名称和类型字段时声明用来区别项目</p><div class="language-javascript vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">items </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [{key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, disabled: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, show: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}]</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">//e.g.//</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">items</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: [</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;fruitsHeader&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Fruits&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;header&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;apple&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Apple&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;banana&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Banana&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;orange&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Orange&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, disabled: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;grape&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Grape&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;divider_1&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;divider&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;vegetablesHeader&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Vegetables&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;header&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;broccoli&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Broccoli&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;carrot&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Carrot&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;lettuce&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Lettuce&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><h3 id="appendix" tabindex="-1">Appendix <a class="header-anchor" href="#appendix" aria-label="Permalink to &quot;Appendix&quot;">​</a></h3><hr><ol><li>获取<code>ListView</code>中第<code>index</code>项<code>item</code>的<code>dom</code>方法(其中<code>&lt;index&gt;</code>代表<code>items</code>索引):</li></ol><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-ListView</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">items</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ref</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;list&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-ListView</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">let item = this.$refs.list.$refs[&#39;list_item_&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">index</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;]&#39;];</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p><strong>特别地</strong> 0.1.32版本后支持采用函数式字段, 其中支持的字段包括<code>name</code>, <code>disabled</code>, <code>choosen</code>, <code>type</code> 0.1.54版本后支持<code>show</code></p>`,29);function q(_,s,A,w,i,V){const n=k("fv-ListView"),l=k("ClientOnly");return g(),r("div",null,[y,c,e("div",u,[t(l,null,{default:h(()=>[t(n,{modelValue:i.items,"onUpdate:modelValue":s[0]||(s[0]=a=>i.items=a),showSlider:!0},null,8,["modelValue"])]),_:1})]),F,e("div",m,[t(l,null,{default:h(()=>[t(n,{modelValue:i.items,"onUpdate:modelValue":s[1]||(s[1]=a=>i.items=a),multiple:!0},null,8,["modelValue"])]),_:1})]),b,e("div",C,[t(l,null,{default:h(()=>[t(n,{modelValue:i.items,"onUpdate:modelValue":s[2]||(s[2]=a=>i.items=a),theme:"dark"},null,8,["modelValue"])]),_:1})]),v,e("div",x,[t(l,null,{default:h(()=>[t(n,{modelValue:i.items,"onUpdate:modelValue":s[3]||(s[3]=a=>i.items=a),theme:"dark",choosenBackground:"rgba(0, 204, 153, 0.6)"},null,8,["modelValue"])]),_:1})]),B])}const N=d(o,[["render",q]]);export{f as __pageData,N as default};
diff --git a/assets/guide_components_list-view_index.md.BoYvMzb0.lean.js b/assets/guide_components_list-view_index.md.BoYvMzb0.lean.js
new file mode 100644
index 0000000..c606385
--- /dev/null
+++ b/assets/guide_components_list-view_index.md.BoYvMzb0.lean.js
@@ -0,0 +1 @@
+import{_ as d,q as r,H as e,Y as t,z as h,u as E,aq as p,S as k,p as g}from"./chunks/framework.DvIFzl91.js";const o={data(){return{items:[{key:"fruitsHeader",name:"Fruits",type:"header"},{key:"apple",name:"Apple",choosen:!0},{key:"banana",name:"Banana"},{key:"orange",name:"Orange",disabled:!0},{key:"grape",name:"Grape"},{key:"divider_1",name:"",type:"divider"},{key:"vegetablesHeader",name:"Vegetables",type:"header"},{key:"broccoli",name:"Broccoli"},{key:"carrot",name:"Carrot"},{key:"lettuce",name:"Lettuce"}]}}},f=JSON.parse('{"title":"ListView","description":"","frontmatter":{"page":true,"title":"ListView"},"headers":[],"relativePath":"guide/components/list-view/index.md","filePath":"guide/components/list-view/index.md"}'),y=e("h3",{id:"listview-demo",tabindex:"-1"},[E("ListView-DEMO "),e("a",{class:"header-anchor",href:"#listview-demo","aria-label":'Permalink to "ListView-DEMO"'},"​")],-1),c=e("hr",null,null,-1),u={style:{width:"100%",height:"500px",padding:"15px"}},F=p("",3),m={style:{width:"100%",height:"500px",padding:"15px"}},b=p("",3),C={style:{width:"100%",height:"500px",padding:"15px",background:"black"}},v=p("",3),x={style:{width:"100%",height:"500px",padding:"15px",background:"black"}},B=p("",29);function q(_,s,A,w,i,V){const n=k("fv-ListView"),l=k("ClientOnly");return g(),r("div",null,[y,c,e("div",u,[t(l,null,{default:h(()=>[t(n,{modelValue:i.items,"onUpdate:modelValue":s[0]||(s[0]=a=>i.items=a),showSlider:!0},null,8,["modelValue"])]),_:1})]),F,e("div",m,[t(l,null,{default:h(()=>[t(n,{modelValue:i.items,"onUpdate:modelValue":s[1]||(s[1]=a=>i.items=a),multiple:!0},null,8,["modelValue"])]),_:1})]),b,e("div",C,[t(l,null,{default:h(()=>[t(n,{modelValue:i.items,"onUpdate:modelValue":s[2]||(s[2]=a=>i.items=a),theme:"dark"},null,8,["modelValue"])]),_:1})]),v,e("div",x,[t(l,null,{default:h(()=>[t(n,{modelValue:i.items,"onUpdate:modelValue":s[3]||(s[3]=a=>i.items=a),theme:"dark",choosenBackground:"rgba(0, 204, 153, 0.6)"},null,8,["modelValue"])]),_:1})]),B])}const N=d(o,[["render",q]]);export{f as __pageData,N as default};
diff --git a/assets/guide_components_menu-flyout_index.md.Csa7irPj.js b/assets/guide_components_menu-flyout_index.md.Csa7irPj.js
new file mode 100644
index 0000000..cc79f6f
--- /dev/null
+++ b/assets/guide_components_menu-flyout_index.md.Csa7irPj.js
@@ -0,0 +1,39 @@
+import{_ as r,q as d,Y as i,z as l,H as h,u as E,aq as p,S as k,p as o}from"./chunks/framework.DvIFzl91.js";const y={data(){return{value:[],options:[{key:"fruitsHeader",text:"Fruits",type:"header"},{key:"apple",text:"Apple",children:[{key:"A",text:"A"},{key:"B",text:"B"},{key:"Apple C",text:"Apple C",children:[{key:"A",text:"A"},{key:"B",text:"B"},{key:"Apple C-C",text:"Apple C-C",children:[{key:"A",text:"A"},{key:"B",text:"B"},{key:"Apple C-C-C",text:"Apple C-C-C"}]}]}]},{key:"banana",text:"Banana"},{key:"orange",text:"Orange",disabled:!0},{key:"grape",text:"Grape",children:[{key:"A",text:"A"},{key:"B",text:"B"},{key:"C",text:"C"}]},{key:"divider_1",text:"-",type:"divider"},{key:"vegetablesHeader",text:"Vegetables",type:"header"},{key:"broccoli",text:"Broccoli"},{key:"carrot",text:"Carrot"},{key:"lettuce",text:"Lettuce"}]}}},A=JSON.parse('{"title":"MenuFlyout","description":"","frontmatter":{"page":true,"title":"MenuFlyout"},"headers":[],"relativePath":"guide/components/menu-flyout/index.md","filePath":"guide/components/menu-flyout/index.md"}'),g=h("h3",{id:"menuflyout",tabindex:"-1"},[E("MenuFlyout "),h("a",{class:"header-anchor",href:"#menuflyout","aria-label":'Permalink to "MenuFlyout"'},"​")],-1),u=p(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-menuFlyout</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">value</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">options</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">options</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Pick a option&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-menuFlyout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="menuflyout-disabled" tabindex="-1">menuFlyout-Disabled <a class="header-anchor" href="#menuflyout-disabled" aria-label="Permalink to &quot;menuFlyout-Disabled&quot;">​</a></h3><hr>`,3),c=p(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-menuFlyout</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">value</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">options</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">options</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Pick a option&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> disabled</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-menuFlyout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="menuflyout-dark-theme" tabindex="-1">menuFlyout-Dark Theme <a class="header-anchor" href="#menuflyout-dark-theme" aria-label="Permalink to &quot;menuFlyout-Dark Theme&quot;">​</a></h3><hr>`,3),F={style:{width:"100%",background:"black"}},b=p(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-menuFlyout</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">value</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">options</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">options</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Pick a option&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;dark&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-menuFlyout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">value/v-model</td><td style="text-align:center;">Object</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">Combobox当前项绑定</td></tr><tr><td style="text-align:center;">options</td><td style="text-align:center;">Array</td><td style="text-align:center;">Yes</td><td style="text-align:center;">N/A</td><td style="text-align:center;">Combobox数据</td></tr><tr><td style="text-align:center;">borderWidth</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">2</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">placeholder</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">Combobox</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">borderRadius</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">3</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">background</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">choosenBackground</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">choosenSliderBackground</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">inputForeground</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">inputBackground</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">titleForeground</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">ChevronDown</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">dropDownIcon</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">dropDownIconForeground</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">revealBorderColor</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">revealBackgroundColor</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">pivotPlaceholder</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">Please Choose</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">system</td><td style="text-align:center;">主题样式, 包含<code>light</code>, <code>dark</code>, <code>system</code>, <code>custom</code>几种样式</td></tr></tbody></table><h3 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to &quot;Events&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">事件名(Name)</th><th style="text-align:center;">参数类型(args)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">choose-item</td><td style="text-align:center;">value/object</td><td style="text-align:center;">Combobox choose item</td></tr></tbody></table><h3 id="slot" tabindex="-1">Slot <a class="header-anchor" href="#slot" aria-label="Permalink to &quot;Slot&quot;">​</a></h3><hr><ol><li>Default</li></ol><p>用户可自定义 MenuFlyout Item 内容</p><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">item</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">item</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    {{valueTrigger(item.type) !== &#39;divider&#39; ? valueTrigger(item.text) : &#39;&#39;}}</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>用户自定义样式时, 包含以下可选属性</p><ul><li>item: 当前组数据</li></ul><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">i</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;{{x.item.text}}&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">i</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="data" tabindex="-1">Data <a class="header-anchor" href="#data" aria-label="Permalink to &quot;Data&quot;">​</a></h3><hr><ol><li>options</li></ol><div class="language-javascript vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">options </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [{key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, disabled: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}]</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">//e.g.//</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">options</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: [</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;fruitsHeader&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Fruits&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;header&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;apple&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Apple&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, children: [</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;A&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;A&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;B&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;B&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Apple C&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Apple C&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, children: [</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;A&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;A&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;B&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;B&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Apple C-C&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Apple C-C&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, children: [</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;A&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;A&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;B&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;B&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Apple C-C-C&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Apple C-C-C&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            ] }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        ] }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    ] },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;banana&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Banana&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;orange&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Orange&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, disabled: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;grape&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Grape&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, children: [</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;A&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;A&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;B&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;B&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;C&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;C&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    ] },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;divider_1&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;-&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;divider&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;vegetablesHeader&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Vegetables&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;header&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;broccoli&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Broccoli&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;carrot&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Carrot&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;lettuce&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Lettuce&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br></div></div><p><strong>其中</strong> <code>text</code>, <code>disabled</code>, <code>type</code>属性支持函数式声明.</p>`,20);function x(m,t,C,q,s,B){const e=k("fv-menuFlyout"),n=k("ClientOnly");return o(),d("div",null,[g,i(n,null,{default:l(()=>[i(e,{modelValue:s.value,"onUpdate:modelValue":t[0]||(t[0]=a=>s.value=a),options:s.options,placeholder:"Pick a option"},null,8,["modelValue","options"])]),_:1}),u,i(n,null,{default:l(()=>[i(e,{modelValue:s.value,"onUpdate:modelValue":t[1]||(t[1]=a=>s.value=a),options:s.options,placeholder:"Pick a option",disabled:""},null,8,["modelValue","options"])]),_:1}),c,h("div",F,[i(n,null,{default:l(()=>[i(e,{modelValue:s.value,"onUpdate:modelValue":t[2]||(t[2]=a=>s.value=a),options:s.options,placeholder:"Pick a option",theme:"dark"},null,8,["modelValue","options"])]),_:1})]),b])}const _=r(y,[["render",x]]);export{A as __pageData,_ as default};
diff --git a/assets/guide_components_menu-flyout_index.md.Csa7irPj.lean.js b/assets/guide_components_menu-flyout_index.md.Csa7irPj.lean.js
new file mode 100644
index 0000000..213f71d
--- /dev/null
+++ b/assets/guide_components_menu-flyout_index.md.Csa7irPj.lean.js
@@ -0,0 +1 @@
+import{_ as r,q as d,Y as i,z as l,H as h,u as E,aq as p,S as k,p as o}from"./chunks/framework.DvIFzl91.js";const y={data(){return{value:[],options:[{key:"fruitsHeader",text:"Fruits",type:"header"},{key:"apple",text:"Apple",children:[{key:"A",text:"A"},{key:"B",text:"B"},{key:"Apple C",text:"Apple C",children:[{key:"A",text:"A"},{key:"B",text:"B"},{key:"Apple C-C",text:"Apple C-C",children:[{key:"A",text:"A"},{key:"B",text:"B"},{key:"Apple C-C-C",text:"Apple C-C-C"}]}]}]},{key:"banana",text:"Banana"},{key:"orange",text:"Orange",disabled:!0},{key:"grape",text:"Grape",children:[{key:"A",text:"A"},{key:"B",text:"B"},{key:"C",text:"C"}]},{key:"divider_1",text:"-",type:"divider"},{key:"vegetablesHeader",text:"Vegetables",type:"header"},{key:"broccoli",text:"Broccoli"},{key:"carrot",text:"Carrot"},{key:"lettuce",text:"Lettuce"}]}}},A=JSON.parse('{"title":"MenuFlyout","description":"","frontmatter":{"page":true,"title":"MenuFlyout"},"headers":[],"relativePath":"guide/components/menu-flyout/index.md","filePath":"guide/components/menu-flyout/index.md"}'),g=h("h3",{id:"menuflyout",tabindex:"-1"},[E("MenuFlyout "),h("a",{class:"header-anchor",href:"#menuflyout","aria-label":'Permalink to "MenuFlyout"'},"​")],-1),u=p("",3),c=p("",3),F={style:{width:"100%",background:"black"}},b=p("",20);function x(m,t,C,q,s,B){const e=k("fv-menuFlyout"),n=k("ClientOnly");return o(),d("div",null,[g,i(n,null,{default:l(()=>[i(e,{modelValue:s.value,"onUpdate:modelValue":t[0]||(t[0]=a=>s.value=a),options:s.options,placeholder:"Pick a option"},null,8,["modelValue","options"])]),_:1}),u,i(n,null,{default:l(()=>[i(e,{modelValue:s.value,"onUpdate:modelValue":t[1]||(t[1]=a=>s.value=a),options:s.options,placeholder:"Pick a option",disabled:""},null,8,["modelValue","options"])]),_:1}),c,h("div",F,[i(n,null,{default:l(()=>[i(e,{modelValue:s.value,"onUpdate:modelValue":t[2]||(t[2]=a=>s.value=a),options:s.options,placeholder:"Pick a option",theme:"dark"},null,8,["modelValue","options"])]),_:1})]),b])}const _=r(y,[["render",x]]);export{A as __pageData,_ as default};
diff --git a/assets/guide_components_message-bar_emits.md.e89a5a22.js b/assets/guide_components_message-bar_emits.md.e89a5a22.js
deleted file mode 100644
index 9ae552d..0000000
--- a/assets/guide_components_message-bar_emits.md.e89a5a22.js
+++ /dev/null
@@ -1 +0,0 @@
-import{_ as t,c as e,o as n,a}from"./app.d60fa8c3.js";const x=JSON.parse('{"title":"Emits","description":"","frontmatter":{},"headers":[{"level":2,"title":"Emits","slug":"emits"}],"relativePath":"guide/components/message-bar/emits.md"}'),s={name:"guide/components/message-bar/emits.md"},r=a('<h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">cancel</td><td style="text-align:center;"></td><td style="text-align:center;">oncancel</td></tr><tr><td style="text-align:center;">close</td><td style="text-align:center;"></td><td style="text-align:center;">onclose</td></tr><tr><td style="text-align:center;">confirm</td><td style="text-align:center;"></td><td style="text-align:center;">onconfirm</td></tr></tbody></table>',3),i=[r];function l(c,d,o,m,_,h){return n(),e("div",null,i)}var y=t(s,[["render",l]]);export{x as __pageData,y as default};
diff --git a/assets/guide_components_message-bar_emits.md.e89a5a22.lean.js b/assets/guide_components_message-bar_emits.md.e89a5a22.lean.js
deleted file mode 100644
index 771d74c..0000000
--- a/assets/guide_components_message-bar_emits.md.e89a5a22.lean.js
+++ /dev/null
@@ -1 +0,0 @@
-import{_ as t,c as e,o as n,a}from"./app.d60fa8c3.js";const x=JSON.parse('{"title":"Emits","description":"","frontmatter":{},"headers":[{"level":2,"title":"Emits","slug":"emits"}],"relativePath":"guide/components/message-bar/emits.md"}'),s={name:"guide/components/message-bar/emits.md"},r=a("",3),i=[r];function l(c,d,o,m,_,h){return n(),e("div",null,i)}var y=t(s,[["render",l]]);export{x as __pageData,y as default};
diff --git a/assets/guide_components_message-bar_index.md.3f0b01d6.js b/assets/guide_components_message-bar_index.md.3f0b01d6.js
deleted file mode 100644
index caf5b2b..0000000
--- a/assets/guide_components_message-bar_index.md.3f0b01d6.js
+++ /dev/null
@@ -1,91 +0,0 @@
-import{d as D,c as y,b as o,u as t,a as l,r as i,o as u,i as d,M as b}from"./app.d60fa8c3.js";import{u as C}from"./chunks/index.9dba9c16.js";const m=l('<h1 id="messagebar" tabindex="-1">MessageBar <a class="header-anchor" href="#messagebar" aria-hidden="true">#</a></h1><h2 id="quick-start" tabindex="-1">Quick Start <a class="header-anchor" href="#quick-start" aria-hidden="true">#</a></h2><h3 id="default" tabindex="-1">Default <a class="header-anchor" href="#default" aria-hidden="true">#</a></h3><hr><ol><li>info</li></ol>',5),A=l(`<div class="language-vue-html"><span class="copy"></span><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-message-bar</span><span style="color:#89DDFF;"> @</span><span style="color:#C792EA;">close</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#82AAFF;">onClose</span><span style="color:#89DDFF;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">info</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">)</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">status</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">info</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-message-bar</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><ol start="2"><li>correct</li></ol>`,2),g=l(`<div class="language-vue-html"><span class="copy"></span><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-message-bar</span><span style="color:#89DDFF;"> @</span><span style="color:#C792EA;">close</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#82AAFF;">onClose</span><span style="color:#89DDFF;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">correct</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">)</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">status</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">correct</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-message-bar</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><ol start="3"><li>warning</li></ol>`,2),h=l(`<div class="language-vue-html"><span class="copy"></span><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-message-bar</span><span style="color:#89DDFF;"> @</span><span style="color:#C792EA;">close</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#82AAFF;">onClose</span><span style="color:#89DDFF;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">warning</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">)</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">status</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">warning</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-message-bar</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><ol start="4"><li>error</li></ol>`,2),f=l(`<div class="language-vue-html"><span class="copy"></span><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-message-bar</span><span style="color:#89DDFF;"> @</span><span style="color:#C792EA;">close</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#82AAFF;">onClose</span><span style="color:#89DDFF;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">error</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">)</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">status</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">error</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-message-bar</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><ol start="5"><li>blocked</li></ol>`,2),v=l(`<div class="language-vue-html"><span class="copy"></span><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-message-bar</span><span style="color:#89DDFF;"> @</span><span style="color:#C792EA;">close</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#82AAFF;">onClose</span><span style="color:#89DDFF;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">blocked</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">)</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">status</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">blocked</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-message-bar</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="global-function" tabindex="-1">Global Function <a class="header-anchor" href="#global-function" aria-hidden="true">#</a></h3><ol><li>use setup (recommend)</li></ol><div class="language-vue line-numbers-mode"><span class="copy"></span><pre><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">script</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">lang</span><span style="color:#A6ACCD;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">ts</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">setup</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">useTheme</span><span style="color:#A6ACCD;">()</span></span>
-<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> message </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">inject</span><span style="color:#89DDFF;">&lt;</span><span style="color:#FFCB6B;">MessageBarMethod</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">(MessageBarKey)</span></span>
-<span class="line"></span>
-<span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> instance</span><span style="color:#89DDFF;">:</span><span style="color:#FFCB6B;">MessageBarParams</span><span style="color:#89DDFF;">;</span></span>
-<span class="line"></span>
-<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> onClose </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">type</span><span style="color:#89DDFF;">?:</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">info</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">|</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">warning</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">|</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">correct</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">|</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">blocked</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">|</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">error</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">)</span><span style="color:#C792EA;">=&gt;</span><span style="color:#89DDFF;">{</span></span>
-<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">message</span><span style="color:#89DDFF;">!==undefined</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">{</span></span>
-<span class="line"><span style="color:#F07178;">        </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">instance</span><span style="color:#89DDFF;">!==undefined</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">{</span></span>
-<span class="line"><span style="color:#F07178;">            </span><span style="color:#A6ACCD;">instance</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">close</span><span style="color:#F07178;">()</span></span>
-<span class="line"><span style="color:#F07178;">        </span><span style="color:#89DDFF;">}</span></span>
-<span class="line"><span style="color:#F07178;">        </span><span style="color:#A6ACCD;">instance</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">message</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
-<span class="line"><span style="color:#F07178;">            status</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">type</span><span style="color:#89DDFF;">,</span></span>
-<span class="line"><span style="color:#F07178;">            message</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">\`</span><span style="color:#C3E88D;">close </span><span style="color:#89DDFF;">\${</span><span style="color:#A6ACCD;">type</span><span style="color:#89DDFF;">}</span><span style="color:#C3E88D;"> message bar </span><span style="color:#89DDFF;">\`</span><span style="color:#89DDFF;">,</span></span>
-<span class="line"><span style="color:#F07178;">            autoClose</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">,</span></span>
-<span class="line"><span style="color:#F07178;">            theme</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">,</span></span>
-<span class="line"><span style="color:#F07178;">            showControl</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
-<span class="line"><span style="color:#F07178;">            </span><span style="color:#82AAFF;">confirm</span><span style="color:#89DDFF;">:()</span><span style="color:#C792EA;">=&gt;</span><span style="color:#89DDFF;">{</span></span>
-<span class="line"><span style="color:#F07178;">                </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">instance</span><span style="color:#89DDFF;">!==undefined</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">{</span></span>
-<span class="line"><span style="color:#F07178;">                    </span><span style="color:#A6ACCD;">instance</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">close</span><span style="color:#F07178;">()</span></span>
-<span class="line"><span style="color:#F07178;">                </span><span style="color:#89DDFF;">}</span></span>
-<span class="line"><span style="color:#F07178;">                </span><span style="color:#A6ACCD;">instance</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">message</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
-<span class="line"><span style="color:#F07178;">                    status</span><span style="color:#89DDFF;">:</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">correct</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
-<span class="line"><span style="color:#F07178;">                    message</span><span style="color:#89DDFF;">:</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">Confirm</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
-<span class="line"><span style="color:#F07178;">                    theme</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">,</span></span>
-<span class="line"><span style="color:#F07178;">                    autoClose</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">0</span></span>
-<span class="line"><span style="color:#F07178;">                </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span></span>
-<span class="line"><span style="color:#F07178;">            </span><span style="color:#89DDFF;">},</span></span>
-<span class="line"><span style="color:#F07178;">            </span><span style="color:#82AAFF;">cancel</span><span style="color:#89DDFF;">:()</span><span style="color:#C792EA;">=&gt;</span><span style="color:#89DDFF;">{</span></span>
-<span class="line"><span style="color:#F07178;">                </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">instance</span><span style="color:#89DDFF;">!==undefined</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">{</span></span>
-<span class="line"><span style="color:#F07178;">                    </span><span style="color:#A6ACCD;">instance</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">close</span><span style="color:#F07178;">()</span></span>
-<span class="line"><span style="color:#F07178;">                </span><span style="color:#89DDFF;">}</span></span>
-<span class="line"><span style="color:#F07178;">                </span><span style="color:#A6ACCD;">instance</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">message</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
-<span class="line"><span style="color:#F07178;">                    status</span><span style="color:#89DDFF;">:</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">blocked</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
-<span class="line"><span style="color:#F07178;">                    message</span><span style="color:#89DDFF;">:</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">Cancel</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
-<span class="line"><span style="color:#F07178;">                    theme</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">,</span></span>
-<span class="line"><span style="color:#F07178;">                    autoClose</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">0</span></span>
-<span class="line"><span style="color:#F07178;">                </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span></span>
-<span class="line"><span style="color:#F07178;">            </span><span style="color:#89DDFF;">}</span></span>
-<span class="line"><span style="color:#F07178;">        </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span></span>
-<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">}</span></span>
-<span class="line"><span style="color:#89DDFF;">}</span></span>
-<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br></div></div><ol start="2"><li>use options</li></ol><div class="language-vue line-numbers-mode"><span class="copy"></span><pre><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">script</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">lang</span><span style="color:#A6ACCD;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">ts</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#C792EA;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#89DDFF;">{</span></span>
-<span class="line"><span style="color:#F07178;">    </span><span style="color:#FFCB6B;">methods</span><span style="color:#89DDFF;">:{</span></span>
-<span class="line"><span style="color:#F07178;">        </span><span style="color:#82AAFF;">message</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">{</span></span>
-<span class="line"><span style="color:#F07178;">            </span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">instance</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">this.</span><span style="color:#82AAFF;">$barWarning</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
-<span class="line"><span style="color:#F07178;">                status</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">type</span><span style="color:#89DDFF;">,</span></span>
-<span class="line"><span style="color:#F07178;">                message</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">\`</span><span style="color:#C3E88D;">close </span><span style="color:#89DDFF;">\${</span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">type</span><span style="color:#89DDFF;">}</span><span style="color:#C3E88D;"> message bar</span><span style="color:#89DDFF;">\`</span><span style="color:#89DDFF;">,</span></span>
-<span class="line"><span style="color:#F07178;">                autoClose</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">,</span></span>
-<span class="line"><span style="color:#F07178;">                theme</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">,</span></span>
-<span class="line"><span style="color:#F07178;">                showControl</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
-<span class="line"><span style="color:#F07178;">                </span><span style="color:#82AAFF;">confirm</span><span style="color:#89DDFF;">:()</span><span style="color:#C792EA;">=&gt;</span><span style="color:#89DDFF;">{</span></span>
-<span class="line"><span style="color:#F07178;">                    </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">instance</span><span style="color:#89DDFF;">!==undefined</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">{</span></span>
-<span class="line"><span style="color:#F07178;">                        </span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">instance</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">close</span><span style="color:#F07178;">()</span></span>
-<span class="line"><span style="color:#F07178;">                    </span><span style="color:#89DDFF;">}</span></span>
-<span class="line"><span style="color:#F07178;">                    </span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">instance</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">this.</span><span style="color:#82AAFF;">$barWarning</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
-<span class="line"><span style="color:#F07178;">                        status</span><span style="color:#89DDFF;">:</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">correct</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
-<span class="line"><span style="color:#F07178;">                        message</span><span style="color:#89DDFF;">:</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">Confirm</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
-<span class="line"><span style="color:#F07178;">                        theme</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">,</span></span>
-<span class="line"><span style="color:#F07178;">                        autoClose</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">0</span></span>
-<span class="line"><span style="color:#F07178;">                    </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span></span>
-<span class="line"><span style="color:#F07178;">                </span><span style="color:#89DDFF;">},</span></span>
-<span class="line"><span style="color:#F07178;">                </span><span style="color:#82AAFF;">cancel</span><span style="color:#89DDFF;">:()</span><span style="color:#C792EA;">=&gt;</span><span style="color:#89DDFF;">{</span></span>
-<span class="line"><span style="color:#F07178;">                    </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">instance</span><span style="color:#89DDFF;">!==undefined</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">{</span></span>
-<span class="line"><span style="color:#F07178;">                        </span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">instance</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">close</span><span style="color:#F07178;">()</span></span>
-<span class="line"><span style="color:#F07178;">                    </span><span style="color:#89DDFF;">}</span></span>
-<span class="line"><span style="color:#F07178;">                    </span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">instance</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">this.</span><span style="color:#82AAFF;">$barWarning</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
-<span class="line"><span style="color:#F07178;">                        status</span><span style="color:#89DDFF;">:</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">blocked</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
-<span class="line"><span style="color:#F07178;">                        message</span><span style="color:#89DDFF;">:</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">Cancel</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
-<span class="line"><span style="color:#F07178;">                        theme</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">,</span></span>
-<span class="line"><span style="color:#F07178;">                        autoClose</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">0</span></span>
-<span class="line"><span style="color:#F07178;">                    </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span></span>
-<span class="line"><span style="color:#F07178;">                </span><span style="color:#89DDFF;">}</span></span>
-<span class="line"><span style="color:#F07178;">            </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span></span>
-<span class="line"><span style="color:#F07178;">        </span><span style="color:#89DDFF;">}</span></span>
-<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">}</span></span>
-<span class="line"><span style="color:#89DDFF;">}</span></span>
-<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br></div></div><h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">cancel-title</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;Cancel&#39;</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">confirm-title</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;Confirm&#39;</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">disabled</td></tr><tr><td style="text-align:center;">icon</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">icon</td></tr><tr><td style="text-align:center;">lang</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">i18n</td></tr><tr><td style="text-align:center;">show-close</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">true</td><td style="text-align:center;">show close icon</td></tr><tr><td style="text-align:center;">show-control</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">show confirm and cancel button</td></tr><tr><td style="text-align:center;">status</td><td style="text-align:center;">[&#39;info&#39;,&#39;correct&#39;,&#39;warning&#39;,&#39;error&#39;,&#39;blocked&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;info&#39;</td><td style="text-align:center;">message bar status</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">[&#39;light&#39;,&#39;dark&#39;,&#39;global&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">theme</td></tr></tbody></table><h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">cancel</td><td style="text-align:center;"></td><td style="text-align:center;">oncancel</td></tr><tr><td style="text-align:center;">close</td><td style="text-align:center;"></td><td style="text-align:center;">onclose</td></tr><tr><td style="text-align:center;">confirm</td><td style="text-align:center;"></td><td style="text-align:center;">onconfirm</td></tr></tbody></table>`,12),k=JSON.parse('{"title":"MessageBar","description":"","frontmatter":{"page":true,"title":"MessageBar"},"headers":[{"level":2,"title":"Quick Start","slug":"quick-start"},{"level":3,"title":"Default","slug":"default"},{"level":3,"title":"Global Function","slug":"global-function"},{"level":2,"title":"Properties","slug":"properties"},{"level":2,"title":"Emits","slug":"emits"}],"relativePath":"guide/components/message-bar/index.md"}'),x={name:"guide/components/message-bar/index.md"},_=D({...x,setup(E){const{theme:a}=C(),r=d(b);let n;const e=F=>{r!==void 0&&(n!==void 0&&n.close(),n=r({status:F,message:`close ${F} message bar `,autoClose:0,theme:a.value,showControl:!0,confirm:()=>{n!==void 0&&n.close(),n=r({status:"correct",message:"Confirm",theme:a.value,autoClose:0})},cancel:()=>{n!==void 0&&n.close(),n=r({status:"blocked",message:"Cancel",theme:a.value,autoClose:0})}}))};return(F,s)=>{const p=i("fv-message-bar");return u(),y("div",null,[m,o(p,{onClose:s[0]||(s[0]=c=>e("info")),status:"info",theme:t(a)},null,8,["theme"]),A,o(p,{onClose:s[1]||(s[1]=c=>e("correct")),status:"correct",theme:t(a)},null,8,["theme"]),g,o(p,{onClose:s[2]||(s[2]=c=>e("warning")),status:"warning",theme:t(a)},null,8,["theme"]),h,o(p,{onClose:s[3]||(s[3]=c=>e("error")),status:"error",theme:t(a)},null,8,["theme"]),f,o(p,{onClose:s[4]||(s[4]=c=>e("blocked")),status:"blocked",theme:t(a)},null,8,["theme"]),v])}}});export{k as __pageData,_ as default};
diff --git a/assets/guide_components_message-bar_index.md.3f0b01d6.lean.js b/assets/guide_components_message-bar_index.md.3f0b01d6.lean.js
deleted file mode 100644
index caf5b2b..0000000
--- a/assets/guide_components_message-bar_index.md.3f0b01d6.lean.js
+++ /dev/null
@@ -1,91 +0,0 @@
-import{d as D,c as y,b as o,u as t,a as l,r as i,o as u,i as d,M as b}from"./app.d60fa8c3.js";import{u as C}from"./chunks/index.9dba9c16.js";const m=l('<h1 id="messagebar" tabindex="-1">MessageBar <a class="header-anchor" href="#messagebar" aria-hidden="true">#</a></h1><h2 id="quick-start" tabindex="-1">Quick Start <a class="header-anchor" href="#quick-start" aria-hidden="true">#</a></h2><h3 id="default" tabindex="-1">Default <a class="header-anchor" href="#default" aria-hidden="true">#</a></h3><hr><ol><li>info</li></ol>',5),A=l(`<div class="language-vue-html"><span class="copy"></span><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-message-bar</span><span style="color:#89DDFF;"> @</span><span style="color:#C792EA;">close</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#82AAFF;">onClose</span><span style="color:#89DDFF;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">info</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">)</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">status</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">info</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-message-bar</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><ol start="2"><li>correct</li></ol>`,2),g=l(`<div class="language-vue-html"><span class="copy"></span><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-message-bar</span><span style="color:#89DDFF;"> @</span><span style="color:#C792EA;">close</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#82AAFF;">onClose</span><span style="color:#89DDFF;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">correct</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">)</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">status</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">correct</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-message-bar</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><ol start="3"><li>warning</li></ol>`,2),h=l(`<div class="language-vue-html"><span class="copy"></span><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-message-bar</span><span style="color:#89DDFF;"> @</span><span style="color:#C792EA;">close</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#82AAFF;">onClose</span><span style="color:#89DDFF;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">warning</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">)</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">status</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">warning</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-message-bar</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><ol start="4"><li>error</li></ol>`,2),f=l(`<div class="language-vue-html"><span class="copy"></span><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-message-bar</span><span style="color:#89DDFF;"> @</span><span style="color:#C792EA;">close</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#82AAFF;">onClose</span><span style="color:#89DDFF;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">error</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">)</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">status</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">error</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-message-bar</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><ol start="5"><li>blocked</li></ol>`,2),v=l(`<div class="language-vue-html"><span class="copy"></span><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-message-bar</span><span style="color:#89DDFF;"> @</span><span style="color:#C792EA;">close</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#82AAFF;">onClose</span><span style="color:#89DDFF;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">blocked</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">)</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">status</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">blocked</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-message-bar</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="global-function" tabindex="-1">Global Function <a class="header-anchor" href="#global-function" aria-hidden="true">#</a></h3><ol><li>use setup (recommend)</li></ol><div class="language-vue line-numbers-mode"><span class="copy"></span><pre><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">script</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">lang</span><span style="color:#A6ACCD;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">ts</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">setup</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">useTheme</span><span style="color:#A6ACCD;">()</span></span>
-<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> message </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">inject</span><span style="color:#89DDFF;">&lt;</span><span style="color:#FFCB6B;">MessageBarMethod</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">(MessageBarKey)</span></span>
-<span class="line"></span>
-<span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> instance</span><span style="color:#89DDFF;">:</span><span style="color:#FFCB6B;">MessageBarParams</span><span style="color:#89DDFF;">;</span></span>
-<span class="line"></span>
-<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> onClose </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">type</span><span style="color:#89DDFF;">?:</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">info</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">|</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">warning</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">|</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">correct</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">|</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">blocked</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">|</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">error</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">)</span><span style="color:#C792EA;">=&gt;</span><span style="color:#89DDFF;">{</span></span>
-<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">message</span><span style="color:#89DDFF;">!==undefined</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">{</span></span>
-<span class="line"><span style="color:#F07178;">        </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">instance</span><span style="color:#89DDFF;">!==undefined</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">{</span></span>
-<span class="line"><span style="color:#F07178;">            </span><span style="color:#A6ACCD;">instance</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">close</span><span style="color:#F07178;">()</span></span>
-<span class="line"><span style="color:#F07178;">        </span><span style="color:#89DDFF;">}</span></span>
-<span class="line"><span style="color:#F07178;">        </span><span style="color:#A6ACCD;">instance</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">message</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
-<span class="line"><span style="color:#F07178;">            status</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">type</span><span style="color:#89DDFF;">,</span></span>
-<span class="line"><span style="color:#F07178;">            message</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">\`</span><span style="color:#C3E88D;">close </span><span style="color:#89DDFF;">\${</span><span style="color:#A6ACCD;">type</span><span style="color:#89DDFF;">}</span><span style="color:#C3E88D;"> message bar </span><span style="color:#89DDFF;">\`</span><span style="color:#89DDFF;">,</span></span>
-<span class="line"><span style="color:#F07178;">            autoClose</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">,</span></span>
-<span class="line"><span style="color:#F07178;">            theme</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">,</span></span>
-<span class="line"><span style="color:#F07178;">            showControl</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
-<span class="line"><span style="color:#F07178;">            </span><span style="color:#82AAFF;">confirm</span><span style="color:#89DDFF;">:()</span><span style="color:#C792EA;">=&gt;</span><span style="color:#89DDFF;">{</span></span>
-<span class="line"><span style="color:#F07178;">                </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">instance</span><span style="color:#89DDFF;">!==undefined</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">{</span></span>
-<span class="line"><span style="color:#F07178;">                    </span><span style="color:#A6ACCD;">instance</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">close</span><span style="color:#F07178;">()</span></span>
-<span class="line"><span style="color:#F07178;">                </span><span style="color:#89DDFF;">}</span></span>
-<span class="line"><span style="color:#F07178;">                </span><span style="color:#A6ACCD;">instance</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">message</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
-<span class="line"><span style="color:#F07178;">                    status</span><span style="color:#89DDFF;">:</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">correct</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
-<span class="line"><span style="color:#F07178;">                    message</span><span style="color:#89DDFF;">:</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">Confirm</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
-<span class="line"><span style="color:#F07178;">                    theme</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">,</span></span>
-<span class="line"><span style="color:#F07178;">                    autoClose</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">0</span></span>
-<span class="line"><span style="color:#F07178;">                </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span></span>
-<span class="line"><span style="color:#F07178;">            </span><span style="color:#89DDFF;">},</span></span>
-<span class="line"><span style="color:#F07178;">            </span><span style="color:#82AAFF;">cancel</span><span style="color:#89DDFF;">:()</span><span style="color:#C792EA;">=&gt;</span><span style="color:#89DDFF;">{</span></span>
-<span class="line"><span style="color:#F07178;">                </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">instance</span><span style="color:#89DDFF;">!==undefined</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">{</span></span>
-<span class="line"><span style="color:#F07178;">                    </span><span style="color:#A6ACCD;">instance</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">close</span><span style="color:#F07178;">()</span></span>
-<span class="line"><span style="color:#F07178;">                </span><span style="color:#89DDFF;">}</span></span>
-<span class="line"><span style="color:#F07178;">                </span><span style="color:#A6ACCD;">instance</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">message</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
-<span class="line"><span style="color:#F07178;">                    status</span><span style="color:#89DDFF;">:</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">blocked</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
-<span class="line"><span style="color:#F07178;">                    message</span><span style="color:#89DDFF;">:</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">Cancel</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
-<span class="line"><span style="color:#F07178;">                    theme</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">,</span></span>
-<span class="line"><span style="color:#F07178;">                    autoClose</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">0</span></span>
-<span class="line"><span style="color:#F07178;">                </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span></span>
-<span class="line"><span style="color:#F07178;">            </span><span style="color:#89DDFF;">}</span></span>
-<span class="line"><span style="color:#F07178;">        </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span></span>
-<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">}</span></span>
-<span class="line"><span style="color:#89DDFF;">}</span></span>
-<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br></div></div><ol start="2"><li>use options</li></ol><div class="language-vue line-numbers-mode"><span class="copy"></span><pre><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">script</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">lang</span><span style="color:#A6ACCD;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">ts</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#C792EA;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#89DDFF;">{</span></span>
-<span class="line"><span style="color:#F07178;">    </span><span style="color:#FFCB6B;">methods</span><span style="color:#89DDFF;">:{</span></span>
-<span class="line"><span style="color:#F07178;">        </span><span style="color:#82AAFF;">message</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">{</span></span>
-<span class="line"><span style="color:#F07178;">            </span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">instance</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">this.</span><span style="color:#82AAFF;">$barWarning</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
-<span class="line"><span style="color:#F07178;">                status</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">type</span><span style="color:#89DDFF;">,</span></span>
-<span class="line"><span style="color:#F07178;">                message</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">\`</span><span style="color:#C3E88D;">close </span><span style="color:#89DDFF;">\${</span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">type</span><span style="color:#89DDFF;">}</span><span style="color:#C3E88D;"> message bar</span><span style="color:#89DDFF;">\`</span><span style="color:#89DDFF;">,</span></span>
-<span class="line"><span style="color:#F07178;">                autoClose</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">,</span></span>
-<span class="line"><span style="color:#F07178;">                theme</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">,</span></span>
-<span class="line"><span style="color:#F07178;">                showControl</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
-<span class="line"><span style="color:#F07178;">                </span><span style="color:#82AAFF;">confirm</span><span style="color:#89DDFF;">:()</span><span style="color:#C792EA;">=&gt;</span><span style="color:#89DDFF;">{</span></span>
-<span class="line"><span style="color:#F07178;">                    </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">instance</span><span style="color:#89DDFF;">!==undefined</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">{</span></span>
-<span class="line"><span style="color:#F07178;">                        </span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">instance</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">close</span><span style="color:#F07178;">()</span></span>
-<span class="line"><span style="color:#F07178;">                    </span><span style="color:#89DDFF;">}</span></span>
-<span class="line"><span style="color:#F07178;">                    </span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">instance</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">this.</span><span style="color:#82AAFF;">$barWarning</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
-<span class="line"><span style="color:#F07178;">                        status</span><span style="color:#89DDFF;">:</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">correct</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
-<span class="line"><span style="color:#F07178;">                        message</span><span style="color:#89DDFF;">:</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">Confirm</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
-<span class="line"><span style="color:#F07178;">                        theme</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">,</span></span>
-<span class="line"><span style="color:#F07178;">                        autoClose</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">0</span></span>
-<span class="line"><span style="color:#F07178;">                    </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span></span>
-<span class="line"><span style="color:#F07178;">                </span><span style="color:#89DDFF;">},</span></span>
-<span class="line"><span style="color:#F07178;">                </span><span style="color:#82AAFF;">cancel</span><span style="color:#89DDFF;">:()</span><span style="color:#C792EA;">=&gt;</span><span style="color:#89DDFF;">{</span></span>
-<span class="line"><span style="color:#F07178;">                    </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">instance</span><span style="color:#89DDFF;">!==undefined</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">{</span></span>
-<span class="line"><span style="color:#F07178;">                        </span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">instance</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">close</span><span style="color:#F07178;">()</span></span>
-<span class="line"><span style="color:#F07178;">                    </span><span style="color:#89DDFF;">}</span></span>
-<span class="line"><span style="color:#F07178;">                    </span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">instance</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">this.</span><span style="color:#82AAFF;">$barWarning</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
-<span class="line"><span style="color:#F07178;">                        status</span><span style="color:#89DDFF;">:</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">blocked</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
-<span class="line"><span style="color:#F07178;">                        message</span><span style="color:#89DDFF;">:</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">Cancel</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
-<span class="line"><span style="color:#F07178;">                        theme</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">,</span></span>
-<span class="line"><span style="color:#F07178;">                        autoClose</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">0</span></span>
-<span class="line"><span style="color:#F07178;">                    </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span></span>
-<span class="line"><span style="color:#F07178;">                </span><span style="color:#89DDFF;">}</span></span>
-<span class="line"><span style="color:#F07178;">            </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span></span>
-<span class="line"><span style="color:#F07178;">        </span><span style="color:#89DDFF;">}</span></span>
-<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">}</span></span>
-<span class="line"><span style="color:#89DDFF;">}</span></span>
-<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br></div></div><h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">cancel-title</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;Cancel&#39;</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">confirm-title</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;Confirm&#39;</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">disabled</td></tr><tr><td style="text-align:center;">icon</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">icon</td></tr><tr><td style="text-align:center;">lang</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">i18n</td></tr><tr><td style="text-align:center;">show-close</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">true</td><td style="text-align:center;">show close icon</td></tr><tr><td style="text-align:center;">show-control</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">show confirm and cancel button</td></tr><tr><td style="text-align:center;">status</td><td style="text-align:center;">[&#39;info&#39;,&#39;correct&#39;,&#39;warning&#39;,&#39;error&#39;,&#39;blocked&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;info&#39;</td><td style="text-align:center;">message bar status</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">[&#39;light&#39;,&#39;dark&#39;,&#39;global&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">theme</td></tr></tbody></table><h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">cancel</td><td style="text-align:center;"></td><td style="text-align:center;">oncancel</td></tr><tr><td style="text-align:center;">close</td><td style="text-align:center;"></td><td style="text-align:center;">onclose</td></tr><tr><td style="text-align:center;">confirm</td><td style="text-align:center;"></td><td style="text-align:center;">onconfirm</td></tr></tbody></table>`,12),k=JSON.parse('{"title":"MessageBar","description":"","frontmatter":{"page":true,"title":"MessageBar"},"headers":[{"level":2,"title":"Quick Start","slug":"quick-start"},{"level":3,"title":"Default","slug":"default"},{"level":3,"title":"Global Function","slug":"global-function"},{"level":2,"title":"Properties","slug":"properties"},{"level":2,"title":"Emits","slug":"emits"}],"relativePath":"guide/components/message-bar/index.md"}'),x={name:"guide/components/message-bar/index.md"},_=D({...x,setup(E){const{theme:a}=C(),r=d(b);let n;const e=F=>{r!==void 0&&(n!==void 0&&n.close(),n=r({status:F,message:`close ${F} message bar `,autoClose:0,theme:a.value,showControl:!0,confirm:()=>{n!==void 0&&n.close(),n=r({status:"correct",message:"Confirm",theme:a.value,autoClose:0})},cancel:()=>{n!==void 0&&n.close(),n=r({status:"blocked",message:"Cancel",theme:a.value,autoClose:0})}}))};return(F,s)=>{const p=i("fv-message-bar");return u(),y("div",null,[m,o(p,{onClose:s[0]||(s[0]=c=>e("info")),status:"info",theme:t(a)},null,8,["theme"]),A,o(p,{onClose:s[1]||(s[1]=c=>e("correct")),status:"correct",theme:t(a)},null,8,["theme"]),g,o(p,{onClose:s[2]||(s[2]=c=>e("warning")),status:"warning",theme:t(a)},null,8,["theme"]),h,o(p,{onClose:s[3]||(s[3]=c=>e("error")),status:"error",theme:t(a)},null,8,["theme"]),f,o(p,{onClose:s[4]||(s[4]=c=>e("blocked")),status:"blocked",theme:t(a)},null,8,["theme"]),v])}}});export{k as __pageData,_ as default};
diff --git a/assets/guide_components_message-bar_index.md.AEtAWlF8.js b/assets/guide_components_message-bar_index.md.AEtAWlF8.js
new file mode 100644
index 0000000..e2b5044
--- /dev/null
+++ b/assets/guide_components_message-bar_index.md.AEtAWlF8.js
@@ -0,0 +1,82 @@
+import{_ as d,l,S as h,q as g,Y as s,z as i,H as a,u as e,aq as p,p as c}from"./chunks/framework.DvIFzl91.js";const o={data(){return{}},methods:{show1(){this.$barWarning("This is a toast message.",{status:"correct"})},show2(){this.$barWarning(l("div",[l("span",{class:"header"},"Message"),"This is a toast message.",l("a","Visit our website.")]),{status:"correct"})},show3(){this.$barWarning(l("div",[l("span",{class:"header"},"Message"),"This is a toast message.",l("a","Visit our website.")]),{status:"correct",showControl:!0,autoClose:-1,control:E=>l("div",{style:{display:"flex",alignItems:"center"}},[l(h("fv-button"),{onClick:()=>{alert("Yes"),E.cancel()}},"Yes"),l(h("fv-button"),{onClick:()=>{alert("No"),E.cancel()},style:"margin-left: 5px;"},"No")])})},showSwiftWarning(){this.$swiftWarning(document.getElementById("example"),{color:"rgba(173, 38, 45, 1)",replaceTitle:"You clicked Swift Warning."})}}},Y=JSON.parse('{"title":"MessageBar","description":"","frontmatter":{"page":true,"title":"MessageBar"},"headers":[],"relativePath":"guide/components/message-bar/index.md","filePath":"guide/components/message-bar/index.md"}'),y=a("h3",{id:"messagebar-demo",tabindex:"-1"},[e("MessageBar-DEMO "),a("a",{class:"header-anchor",href:"#messagebar-demo","aria-label":'Permalink to "MessageBar-DEMO"'},"​")],-1),u=a("hr",null,null,-1),b=a("p",null,"Default",-1),F=a("p",null,"Error",-1),m=a("p",null,"Blocked",-1),C=a("p",null,"Correct",-1),B=a("p",null,"Warning",-1),v=p(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">Default</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-MessageBar</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-MessageBar</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">Error</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-MessageBar</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> status</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;error&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-MessageBar</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">Blocked</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-MessageBar</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> status</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;blocked&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-MessageBar</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">Correct</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-MessageBar</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> status</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;correct&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-MessageBar</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">Warning</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-MessageBar</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> status</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;warning&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-MessageBar</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br></div></div><h3 id="messagebar-dark-theme" tabindex="-1">MessageBar-Dark Theme <a class="header-anchor" href="#messagebar-dark-theme" aria-label="Permalink to &quot;MessageBar-Dark Theme&quot;">​</a></h3><hr><p>Default</p>`,4),_=a("p",null,"Error",-1),f=a("p",null,"Blocked",-1),x=a("p",null,"Correct",-1),w=a("p",null,"Warning",-1),A=a("h3",{id:"messagebar-toast",tabindex:"-1"},[e("MessageBar-Toast "),a("a",{class:"header-anchor",href:"#messagebar-toast","aria-label":'Permalink to "MessageBar-Toast"'},"​")],-1),q=a("hr",null,null,-1),D=a("ol",null,[a("li",null,"Standard")],-1),T=p(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">200</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> @</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">click</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">show1</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Show MessageBar&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-javascript vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$barWarning</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;This is a toast message.&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    status: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;correct&#39;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ol start="2"><li>Customize Message Template</li></ol>`,3),S=p(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">200</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> @</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">click</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">show2</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Show MessageBar&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-javascript vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$barWarning</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">h</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;div&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, [</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    h</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;span&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, { class: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;header&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Message&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">),</span></span>
+<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">    &#39;This is a toast message.&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    h</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;a&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Visit our website.&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]), {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    status: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;correct&#39;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><ol start="3"><li>Customize Control Template</li></ol>`,3),M=p(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">200</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> @</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">click</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">show3</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Show MessageBar&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-javascript vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$barWarning</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">h</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;div&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, [</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    h</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;span&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, { class: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;header&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Message&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">),</span></span>
+<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">    &#39;This is a toast message.&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    h</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;a&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Visit our website.&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]), {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    status: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;correct&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    showControl: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    autoClose: </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">-</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    control</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">x</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">        return</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> h</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;div&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            style: {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                display: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;flex&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                alignItems: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;center&quot;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        }, [</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">            h</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">resolveComponent</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;fv-button&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">), {</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">                onClick</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">                    alert</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Yes&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                    x.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">cancel</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            }, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Yes&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">),</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">            h</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">resolveComponent</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;fv-button&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">), {</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">                onClick</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">                    alert</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;No&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                    x.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">cancel</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                style: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;margin-left: 5px;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;No&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        ]);</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br></div></div><h3 id="swiftwarning" tabindex="-1">SwiftWarning <a class="header-anchor" href="#swiftwarning" aria-label="Permalink to &quot;SwiftWarning&quot;">​</a></h3><p id="example">Swift Warning</p>`,4),W=p(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;example&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Swift Warning&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">200</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> @</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">click</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">showSwiftWarning</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Click to Show SwiftWarning&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><div class="language-javascript vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$swiftWarning</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(document.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getElementById</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;example&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">), {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    color: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rgba(173, 38, 45, 1)&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    replaceTitle: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;You clicked Swift Warning.&quot;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">status</td><td style="text-align:center;">[&#39;default&#39;,&#39;warning&#39;,&#39;correct&#39;,&#39;blocked&#39;,&#39;error&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">default</td><td style="text-align:center;">显示状态, 一共有5种</td></tr><tr><td style="text-align:center;">showControl</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否显示控制按钮</td></tr><tr><td style="text-align:center;">showClose</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">true</td><td style="text-align:center;">是否显示关闭按钮</td></tr><tr><td style="text-align:center;">mode</td><td style="text-align:center;">[&#39;relative&#39;,&#39;fixed&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">relative</td><td style="text-align:center;">显示模式<code>relative</code>下位相对定位, <code>fixed</code>下为悬浮固定定位</td></tr><tr><td style="text-align:center;">autoClose</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">3000</td><td style="text-align:center;">MessageBar自动关闭时间, 单位为<code>ms</code>, 设为<code>-1</code>时永远不自动消失</td></tr></tbody></table><h3 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to &quot;Events&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">事件名(Name)</th><th style="text-align:center;">参数类型(args)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">close</td><td style="text-align:center;"></td><td style="text-align:center;">关闭<code>MessageBar</code>时触发事件</td></tr></tbody></table><h3 id="slot" tabindex="-1">Slot <a class="header-anchor" href="#slot" aria-label="Permalink to &quot;Slot&quot;">​</a></h3><hr><ol><li>Msg</li></ol><ul><li>默认为正常标题</li><li><code>class=&quot;header&quot;</code> 加粗标题</li><li><code>&lt;a&gt;&lt;/a&gt;</code> 链接</li></ul><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">msg</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Normal content &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;header&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Header content&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">a</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Link&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">a</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ol start="2"><li>Control</li></ol><ul><li>cancel: 取消函数</li><li>theme: 当前主题</li></ul><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">control</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> @</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">click</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">cancel</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Yes&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="toast" tabindex="-1">Toast <a class="header-anchor" href="#toast" aria-label="Permalink to &quot;Toast&quot;">​</a></h3><hr><div class="language-javascript vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$barWarning</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(msg, options </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    status: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;default&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    showControl: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    showClose: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    control: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">null</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    mode: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;fixed&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    autoClose: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">3000</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">control_panel</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">x</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =&gt;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> h</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 传入具名插槽属性参数的函数, 函数返回值为$createElement函数</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><div class="language-javascript vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$swiftWarning</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(element, options </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    color: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rgba(173, 38, 45, 1)&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    replaceTitle: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Swift Warning&quot;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div>`,20);function N(E,P,V,I,j,k){const t=h("fv-MessageBar"),n=h("ClientOnly"),r=h("fv-button");return c(),g("div",null,[y,u,b,s(n,null,{default:i(()=>[s(t)]),_:1}),F,s(n,null,{default:i(()=>[s(t,{status:"error"})]),_:1}),m,s(n,null,{default:i(()=>[s(t,{status:"blocked"})]),_:1}),C,s(n,null,{default:i(()=>[s(t,{status:"correct"})]),_:1}),B,s(n,null,{default:i(()=>[s(t,{status:"warning"})]),_:1}),v,s(n,null,{default:i(()=>[s(t,{theme:"dark"})]),_:1}),_,s(n,null,{default:i(()=>[s(t,{theme:"dark",status:"error"})]),_:1}),f,s(n,null,{default:i(()=>[s(t,{theme:"dark",status:"blocked"})]),_:1}),x,s(n,null,{default:i(()=>[s(t,{theme:"dark",status:"correct"})]),_:1}),w,s(n,null,{default:i(()=>[s(t,{theme:"dark",status:"warning"})]),_:1}),A,q,D,s(n,null,{default:i(()=>[s(r,{style:{width:"200px"},onClick:k.show1},{default:i(()=>[e("Show MessageBar")]),_:1},8,["onClick"])]),_:1}),T,s(n,null,{default:i(()=>[s(r,{style:{width:"200px"},onClick:k.show2},{default:i(()=>[e("Show MessageBar")]),_:1},8,["onClick"])]),_:1}),S,s(n,null,{default:i(()=>[s(r,{style:{width:"200px"},onClick:k.show3},{default:i(()=>[e("Show MessageBar")]),_:1},8,["onClick"])]),_:1}),M,s(n,null,{default:i(()=>[s(r,{style:{width:"200px"},onClick:k.showSwiftWarning},{default:i(()=>[e("Click to Show SwiftWarning")]),_:1},8,["onClick"])]),_:1}),W])}const O=d(o,[["render",N]]);export{Y as __pageData,O as default};
diff --git a/assets/guide_components_message-bar_index.md.AEtAWlF8.lean.js b/assets/guide_components_message-bar_index.md.AEtAWlF8.lean.js
new file mode 100644
index 0000000..b5d59e8
--- /dev/null
+++ b/assets/guide_components_message-bar_index.md.AEtAWlF8.lean.js
@@ -0,0 +1 @@
+import{_ as d,l,S as h,q as g,Y as s,z as i,H as a,u as e,aq as p,p as c}from"./chunks/framework.DvIFzl91.js";const o={data(){return{}},methods:{show1(){this.$barWarning("This is a toast message.",{status:"correct"})},show2(){this.$barWarning(l("div",[l("span",{class:"header"},"Message"),"This is a toast message.",l("a","Visit our website.")]),{status:"correct"})},show3(){this.$barWarning(l("div",[l("span",{class:"header"},"Message"),"This is a toast message.",l("a","Visit our website.")]),{status:"correct",showControl:!0,autoClose:-1,control:E=>l("div",{style:{display:"flex",alignItems:"center"}},[l(h("fv-button"),{onClick:()=>{alert("Yes"),E.cancel()}},"Yes"),l(h("fv-button"),{onClick:()=>{alert("No"),E.cancel()},style:"margin-left: 5px;"},"No")])})},showSwiftWarning(){this.$swiftWarning(document.getElementById("example"),{color:"rgba(173, 38, 45, 1)",replaceTitle:"You clicked Swift Warning."})}}},Y=JSON.parse('{"title":"MessageBar","description":"","frontmatter":{"page":true,"title":"MessageBar"},"headers":[],"relativePath":"guide/components/message-bar/index.md","filePath":"guide/components/message-bar/index.md"}'),y=a("h3",{id:"messagebar-demo",tabindex:"-1"},[e("MessageBar-DEMO "),a("a",{class:"header-anchor",href:"#messagebar-demo","aria-label":'Permalink to "MessageBar-DEMO"'},"​")],-1),u=a("hr",null,null,-1),b=a("p",null,"Default",-1),F=a("p",null,"Error",-1),m=a("p",null,"Blocked",-1),C=a("p",null,"Correct",-1),B=a("p",null,"Warning",-1),v=p("",4),_=a("p",null,"Error",-1),f=a("p",null,"Blocked",-1),x=a("p",null,"Correct",-1),w=a("p",null,"Warning",-1),A=a("h3",{id:"messagebar-toast",tabindex:"-1"},[e("MessageBar-Toast "),a("a",{class:"header-anchor",href:"#messagebar-toast","aria-label":'Permalink to "MessageBar-Toast"'},"​")],-1),q=a("hr",null,null,-1),D=a("ol",null,[a("li",null,"Standard")],-1),T=p("",3),S=p("",3),M=p("",4),W=p("",20);function N(E,P,V,I,j,k){const t=h("fv-MessageBar"),n=h("ClientOnly"),r=h("fv-button");return c(),g("div",null,[y,u,b,s(n,null,{default:i(()=>[s(t)]),_:1}),F,s(n,null,{default:i(()=>[s(t,{status:"error"})]),_:1}),m,s(n,null,{default:i(()=>[s(t,{status:"blocked"})]),_:1}),C,s(n,null,{default:i(()=>[s(t,{status:"correct"})]),_:1}),B,s(n,null,{default:i(()=>[s(t,{status:"warning"})]),_:1}),v,s(n,null,{default:i(()=>[s(t,{theme:"dark"})]),_:1}),_,s(n,null,{default:i(()=>[s(t,{theme:"dark",status:"error"})]),_:1}),f,s(n,null,{default:i(()=>[s(t,{theme:"dark",status:"blocked"})]),_:1}),x,s(n,null,{default:i(()=>[s(t,{theme:"dark",status:"correct"})]),_:1}),w,s(n,null,{default:i(()=>[s(t,{theme:"dark",status:"warning"})]),_:1}),A,q,D,s(n,null,{default:i(()=>[s(r,{style:{width:"200px"},onClick:k.show1},{default:i(()=>[e("Show MessageBar")]),_:1},8,["onClick"])]),_:1}),T,s(n,null,{default:i(()=>[s(r,{style:{width:"200px"},onClick:k.show2},{default:i(()=>[e("Show MessageBar")]),_:1},8,["onClick"])]),_:1}),S,s(n,null,{default:i(()=>[s(r,{style:{width:"200px"},onClick:k.show3},{default:i(()=>[e("Show MessageBar")]),_:1},8,["onClick"])]),_:1}),M,s(n,null,{default:i(()=>[s(r,{style:{width:"200px"},onClick:k.showSwiftWarning},{default:i(()=>[e("Click to Show SwiftWarning")]),_:1},8,["onClick"])]),_:1}),W])}const O=d(o,[["render",N]]);export{Y as __pageData,O as default};
diff --git a/assets/guide_components_message-bar_properties.md.ee3838d9.js b/assets/guide_components_message-bar_properties.md.ee3838d9.js
deleted file mode 100644
index 681ee1c..0000000
--- a/assets/guide_components_message-bar_properties.md.ee3838d9.js
+++ /dev/null
@@ -1 +0,0 @@
-import{_ as t,c as e,o as n,a as l}from"./app.d60fa8c3.js";const p=JSON.parse('{"title":"Properties","description":"","frontmatter":{},"headers":[{"level":2,"title":"Properties","slug":"properties"}],"relativePath":"guide/components/message-bar/properties.md"}'),r={name:"guide/components/message-bar/properties.md"},d=l('<h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">cancel-title</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;Cancel&#39;</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">confirm-title</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;Confirm&#39;</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">disabled</td></tr><tr><td style="text-align:center;">icon</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">icon</td></tr><tr><td style="text-align:center;">lang</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">i18n</td></tr><tr><td style="text-align:center;">show-close</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">true</td><td style="text-align:center;">show close icon</td></tr><tr><td style="text-align:center;">show-control</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">show confirm and cancel button</td></tr><tr><td style="text-align:center;">status</td><td style="text-align:center;">[&#39;info&#39;,&#39;correct&#39;,&#39;warning&#39;,&#39;error&#39;,&#39;blocked&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;info&#39;</td><td style="text-align:center;">message bar status</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">[&#39;light&#39;,&#39;dark&#39;,&#39;global&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">theme</td></tr></tbody></table>',3),a=[d];function s(i,c,o,g,x,y){return n(),e("div",null,a)}var _=t(r,[["render",s]]);export{p as __pageData,_ as default};
diff --git a/assets/guide_components_message-bar_properties.md.ee3838d9.lean.js b/assets/guide_components_message-bar_properties.md.ee3838d9.lean.js
deleted file mode 100644
index 8e82d7d..0000000
--- a/assets/guide_components_message-bar_properties.md.ee3838d9.lean.js
+++ /dev/null
@@ -1 +0,0 @@
-import{_ as t,c as e,o as n,a as l}from"./app.d60fa8c3.js";const p=JSON.parse('{"title":"Properties","description":"","frontmatter":{},"headers":[{"level":2,"title":"Properties","slug":"properties"}],"relativePath":"guide/components/message-bar/properties.md"}'),r={name:"guide/components/message-bar/properties.md"},d=l("",3),a=[d];function s(i,c,o,g,x,y){return n(),e("div",null,a)}var _=t(r,[["render",s]]);export{p as __pageData,_ as default};
diff --git a/assets/guide_components_navigation-panel_index.md.6mO__sSK.js b/assets/guide_components_navigation-panel_index.md.6mO__sSK.js
new file mode 100644
index 0000000..0f3f3e8
--- /dev/null
+++ b/assets/guide_components_navigation-panel_index.md.6mO__sSK.js
@@ -0,0 +1,8 @@
+import{_ as d,q as p,H as i,Y as t,z as n,u as r,aq as l,S as h,p as k}from"./chunks/framework.DvIFzl91.js";const V=JSON.parse('{"title":"NavigationPanel","description":"","frontmatter":{"page":true,"title":"NavigationPanel"},"headers":[],"relativePath":"guide/components/navigation-panel/index.md","filePath":"guide/components/navigation-panel/index.md"}'),o={name:"guide/components/navigation-panel/index.md"},g=i("h3",{id:"navigationpanel-demo",tabindex:"-1"},[r("NavigationPanel-DEMO "),i("a",{class:"header-anchor",href:"#navigationpanel-demo","aria-label":'Permalink to "NavigationPanel-DEMO"'},"​")],-1),c=i("hr",null,null,-1),y={style:{position:"relative",width:"100%",height:"800px",display:"flex"}},E=l(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">position</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">relative</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">800</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">display</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">flex</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;fv-NavigationPanel&gt;&lt;/fv-NavigationPanel&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="navigationpanel-flyout" tabindex="-1">NavigationPanel-Flyout <a class="header-anchor" href="#navigationpanel-flyout" aria-label="Permalink to &quot;NavigationPanel-Flyout&quot;">​</a></h3><hr>`,3),u={style:{position:"relative",width:"100%",height:"800px",display:"flex"}},v=l(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">position</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">relative</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">800</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">display</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">flex</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;fv-NavigationPanel expandMode=&quot;flyout&quot;&gt;&lt;/fv-NavigationPanel&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="navigationpanel-mobile-display" tabindex="-1">NavigationPanel-Mobile Display <a class="header-anchor" href="#navigationpanel-mobile-display" aria-label="Permalink to &quot;NavigationPanel-Mobile Display&quot;">​</a></h3><hr>`,3),x={style:{position:"relative",width:"100%",height:"800px",display:"flex"}},b=l(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">position</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">relative</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">800</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">display</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">flex</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;fv-NavigationPanel mobileDisplay=&quot;100000000&quot; flyoutDisplay=&quot;500&quot;&gt;&lt;/fv-NavigationPanel&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="navigationpanel-dark-theme" tabindex="-1">NavigationPanel-Dark Theme <a class="header-anchor" href="#navigationpanel-dark-theme" aria-label="Permalink to &quot;NavigationPanel-Dark Theme&quot;">​</a></h3><hr><ol><li>Standard</li></ol>`,4),F={style:{position:"relative",width:"100%",height:"800px",background:"black",display:"flex"}},m=l('<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-NavigationPanel</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;dark&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-NavigationPanel</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><ol start="2"><li>Flyout</li></ol>',2),_={style:{position:"relative",width:"100%",height:"800px",background:"black",display:"flex"}},C=l('<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-NavigationPanel</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> expandMode</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;flyout&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;dark&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-NavigationPanel</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><ol start="3"><li>Mobile</li></ol>',2),f={style:{position:"relative",width:"100%",height:"800px",background:"black",display:"flex"}},N=l(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-NavigationPanel</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> mobileDisplay</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;100000000&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> flyoutDisplay</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;500&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;dark&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-NavigationPanel</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">title</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">NavigationPanel</td><td style="text-align:center;">NavigationPanel 标题</td></tr><tr><td style="text-align:center;">expand</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">true</td><td style="text-align:center;">初始是否展开, 可通过 sync 方法来同步状态</td></tr><tr><td style="text-align:center;">expandMode</td><td style="text-align:center;">[&#39;relative&#39;,&#39;flyout&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">relative</td><td style="text-align:center;">展开模式, 有占位和浮动两种</td></tr><tr><td style="text-align:center;">expandWidth</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">350</td><td style="text-align:center;">展开宽度, 以<code>px</code>为单位</td></tr><tr><td style="text-align:center;">expandDisplay</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">1024</td><td style="text-align:center;">浏览器宽度大于多少时展开</td></tr><tr><td style="text-align:center;">compactWidth</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">50</td><td style="text-align:center;">折叠宽度, 以<code>px</code>为单位</td></tr><tr><td style="text-align:center;">flyoutDisplay</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">0</td><td style="text-align:center;">浏览器宽度小于多少时开启浮动模式, 若<code>expandMode</code>设为<code>flyout</code>, 则始终为浮动模式</td></tr><tr><td style="text-align:center;">fullSizeDisplay</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">800</td><td style="text-align:center;">浏览器宽度小于多少时全屏显示</td></tr><tr><td style="text-align:center;">mobileDisplay</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">0</td><td style="text-align:center;">浏览器宽度小于多少时开启移动端模式</td></tr><tr><td style="text-align:center;">showBack</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">true</td><td style="text-align:center;">是否显示后退按钮</td></tr><tr><td style="text-align:center;">showSearch</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">true</td><td style="text-align:center;">是否显示搜索框</td></tr><tr><td style="text-align:center;">settingTitle</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">Settings</td><td style="text-align:center;">设置选项的标题</td></tr><tr><td style="text-align:center;">showSetting</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">true</td><td style="text-align:center;">是否显示设置选项</td></tr><tr><td style="text-align:center;">background</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">NavigationPanel 背景色</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">system</td><td style="text-align:center;">主题样式, 包含<code>light</code>, <code>dark</code>, <code>system</code>, <code>custom</code>几种样式</td></tr></tbody></table><h3 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to &quot;Events&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">事件名(Name)</th><th style="text-align:center;">参数类型(args)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">setting-click</td><td style="text-align:center;">Object</td><td style="text-align:center;">设置选项被点击后触发事件, 返回<code>{ event: MouseEvent }</code></td></tr><tr><td style="text-align:center;">update:expand</td><td style="text-align:center;">boolean</td><td style="text-align:center;">当折叠或展开时同步外界传入的<code>expand</code></td></tr><tr><td style="text-align:center;">expand-change</td><td style="text-align:center;">boolean</td><td style="text-align:center;">当折叠或展开时触发事件并提供当前状态</td></tr><tr><td style="text-align:center;">expand-click</td><td style="text-align:center;"></td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">back</td><td style="text-align:center;">MouseEvent</td><td style="text-align:center;">返回选项被点击后触发事件</td></tr></tbody></table><h3 id="slot" tabindex="-1">Slot <a class="header-anchor" href="#slot" aria-label="Permalink to &quot;Slot&quot;">​</a></h3><hr><ol><li>SearchBlock</li></ol><p>自定义搜索框区域内容, 默认的搜索框无实际作用</p><div class="language-javascript vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">searchBlock</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><ol start="2"><li>Panel</li></ol><p>自定义<code>NavigationPanel</code>中的内容</p><div class="language-javascript vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">panel</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="appendix" tabindex="-1">Appendix <a class="header-anchor" href="#appendix" aria-label="Permalink to &quot;Appendix&quot;">​</a></h3><hr><ol><li>获取<code>NavigationPanel</code>中<code>setting</code>的<code>dom</code>方法:</li></ol><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-NavigationPanel</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">items</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ref</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;nav&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-NavigationPanel</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">let setting = this.$refs.nav.setting;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div>`,19);function B(P,D,q,A,w,T){const s=h("fv-NavigationPanel"),e=h("fv-img"),a=h("ClientOnly");return k(),p("div",null,[g,c,i("div",y,[t(a,null,{default:n(()=>[t(s,{flyoutDisplay:"500"}),t(e,{src:"https://rescreator.blob.core.windows.net/slider/1444a25f-3e33-44a2-878f-a628342ad88f.jpg",style:{width:"350px",height:"100%",flex:"1"}})]),_:1})]),E,i("div",u,[t(a,null,{default:n(()=>[t(s,{expandMode:"flyout"}),t(e,{src:"https://rescreator.blob.core.windows.net/slider/1444a25f-3e33-44a2-878f-a628342ad88f.jpg",style:{width:"350px",height:"100%",flex:"1"}})]),_:1})]),v,i("div",x,[t(a,null,{default:n(()=>[t(s,{mobileDisplay:"100000000",flyoutDisplay:"500"}),t(e,{src:"https://rescreator.blob.core.windows.net/slider/1444a25f-3e33-44a2-878f-a628342ad88f.jpg",style:{width:"350px",height:"100%",flex:"1"}})]),_:1})]),b,i("div",F,[t(a,null,{default:n(()=>[t(s,{theme:"dark"}),t(e,{src:"https://rescreator.blob.core.windows.net/slider/1444a25f-3e33-44a2-878f-a628342ad88f.jpg",style:{width:"350px",height:"100%",flex:"1"}})]),_:1})]),m,i("div",_,[t(a,null,{default:n(()=>[t(s,{expandMode:"flyout",theme:"dark"}),t(e,{src:"https://rescreator.blob.core.windows.net/slider/1444a25f-3e33-44a2-878f-a628342ad88f.jpg",style:{width:"350px",height:"100%",flex:"1"}})]),_:1})]),C,i("div",f,[t(a,null,{default:n(()=>[t(s,{mobileDisplay:"100000000",flyoutDisplay:"500",theme:"dark"}),t(e,{src:"https://rescreator.blob.core.windows.net/slider/1444a25f-3e33-44a2-878f-a628342ad88f.jpg",style:{width:"350px",height:"100%",flex:"1"}})]),_:1})]),N])}const M=d(o,[["render",B]]);export{V as __pageData,M as default};
diff --git a/assets/guide_components_navigation-panel_index.md.6mO__sSK.lean.js b/assets/guide_components_navigation-panel_index.md.6mO__sSK.lean.js
new file mode 100644
index 0000000..e2c537e
--- /dev/null
+++ b/assets/guide_components_navigation-panel_index.md.6mO__sSK.lean.js
@@ -0,0 +1 @@
+import{_ as d,q as p,H as i,Y as t,z as n,u as r,aq as l,S as h,p as k}from"./chunks/framework.DvIFzl91.js";const V=JSON.parse('{"title":"NavigationPanel","description":"","frontmatter":{"page":true,"title":"NavigationPanel"},"headers":[],"relativePath":"guide/components/navigation-panel/index.md","filePath":"guide/components/navigation-panel/index.md"}'),o={name:"guide/components/navigation-panel/index.md"},g=i("h3",{id:"navigationpanel-demo",tabindex:"-1"},[r("NavigationPanel-DEMO "),i("a",{class:"header-anchor",href:"#navigationpanel-demo","aria-label":'Permalink to "NavigationPanel-DEMO"'},"​")],-1),c=i("hr",null,null,-1),y={style:{position:"relative",width:"100%",height:"800px",display:"flex"}},E=l("",3),u={style:{position:"relative",width:"100%",height:"800px",display:"flex"}},v=l("",3),x={style:{position:"relative",width:"100%",height:"800px",display:"flex"}},b=l("",4),F={style:{position:"relative",width:"100%",height:"800px",background:"black",display:"flex"}},m=l("",2),_={style:{position:"relative",width:"100%",height:"800px",background:"black",display:"flex"}},C=l("",2),f={style:{position:"relative",width:"100%",height:"800px",background:"black",display:"flex"}},N=l("",19);function B(P,D,q,A,w,T){const s=h("fv-NavigationPanel"),e=h("fv-img"),a=h("ClientOnly");return k(),p("div",null,[g,c,i("div",y,[t(a,null,{default:n(()=>[t(s,{flyoutDisplay:"500"}),t(e,{src:"https://rescreator.blob.core.windows.net/slider/1444a25f-3e33-44a2-878f-a628342ad88f.jpg",style:{width:"350px",height:"100%",flex:"1"}})]),_:1})]),E,i("div",u,[t(a,null,{default:n(()=>[t(s,{expandMode:"flyout"}),t(e,{src:"https://rescreator.blob.core.windows.net/slider/1444a25f-3e33-44a2-878f-a628342ad88f.jpg",style:{width:"350px",height:"100%",flex:"1"}})]),_:1})]),v,i("div",x,[t(a,null,{default:n(()=>[t(s,{mobileDisplay:"100000000",flyoutDisplay:"500"}),t(e,{src:"https://rescreator.blob.core.windows.net/slider/1444a25f-3e33-44a2-878f-a628342ad88f.jpg",style:{width:"350px",height:"100%",flex:"1"}})]),_:1})]),b,i("div",F,[t(a,null,{default:n(()=>[t(s,{theme:"dark"}),t(e,{src:"https://rescreator.blob.core.windows.net/slider/1444a25f-3e33-44a2-878f-a628342ad88f.jpg",style:{width:"350px",height:"100%",flex:"1"}})]),_:1})]),m,i("div",_,[t(a,null,{default:n(()=>[t(s,{expandMode:"flyout",theme:"dark"}),t(e,{src:"https://rescreator.blob.core.windows.net/slider/1444a25f-3e33-44a2-878f-a628342ad88f.jpg",style:{width:"350px",height:"100%",flex:"1"}})]),_:1})]),C,i("div",f,[t(a,null,{default:n(()=>[t(s,{mobileDisplay:"100000000",flyoutDisplay:"500",theme:"dark"}),t(e,{src:"https://rescreator.blob.core.windows.net/slider/1444a25f-3e33-44a2-878f-a628342ad88f.jpg",style:{width:"350px",height:"100%",flex:"1"}})]),_:1})]),N])}const M=d(o,[["render",B]]);export{V as __pageData,M as default};
diff --git a/assets/guide_components_navigation-view_index.md.4AQRiz1k.js b/assets/guide_components_navigation-view_index.md.4AQRiz1k.js
new file mode 100644
index 0000000..556e1b3
--- /dev/null
+++ b/assets/guide_components_navigation-view_index.md.4AQRiz1k.js
@@ -0,0 +1,37 @@
+import{_ as o,q as g,Y as s,z as l,H as t,u as y,aq as h,S as r,p as c}from"./chunks/framework.DvIFzl91.js";const u={data(){return{value:{},options:[{key:0,name:"Fruits",type:"header"},{key:1,name:"Apple",icon:"WindowsLogo"},{key:2,name:"Banana",icon:"DelveAnalyticsLogo"},{key:3,name:"Orange",icon:"Guitar"},{key:4,name:"Grape",icon:"HailDay"},{key:5,name:"",type:"divider"},{key:6,name:"Vegetables",type:"header"},{key:7,name:"Broccoli",icon:"QuadColumn"},{key:8,name:"Carrot",icon:"Quantity"},{key:9,name:"Lettuce",icon:"TestBeaker"}]}},watch:{value(p){console.log(p)}},methods:{navigationClick(p){console.log("click",p)}}},I=JSON.parse('{"title":"NavigationView","description":"","frontmatter":{"page":true,"title":"NavigationView"},"headers":[],"relativePath":"guide/components/navigation-view/index.md","filePath":"guide/components/navigation-view/index.md"}'),F=t("h3",{id:"navigationview-demo",tabindex:"-1"},[y("NavigationView-DEMO "),t("a",{class:"header-anchor",href:"#navigationview-demo","aria-label":'Permalink to "NavigationView-DEMO"'},"​")],-1),C=t("hr",null,null,-1),b={style:{position:"relative",width:"100%",height:"800px",display:"flex"}},x=h(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">position</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">relative</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">800</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">display</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">flex</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;fv-NavigationView :options=&quot;options&quot;&gt;&lt;/fv-NavigationView&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;fv-img src=&quot;https://rescreator.blob.core.windows.net/slider/1444a25f-3e33-44a2-878f-a628342ad88f.jpg&quot; style=&quot;width: 350px; height: 100%; flex: 1;&quot;&gt;&lt;/fv-img&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h3 id="navigationview-flyout" tabindex="-1">NavigationView-Flyout <a class="header-anchor" href="#navigationview-flyout" aria-label="Permalink to &quot;NavigationView-Flyout&quot;">​</a></h3><hr>`,3),v={style:{position:"relative",width:"100%",height:"800px",display:"flex"}},m=h(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">position</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">relative</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">800</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">display</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">flex</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;fv-NavigationView :options=&quot;options&quot; expandMode=&quot;flyout&quot;&gt;&lt;/fv-NavigationView&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;fv-img src=&quot;https://rescreator.blob.core.windows.net/slider/1444a25f-3e33-44a2-878f-a628342ad88f.jpg&quot; style=&quot;width: 350px; height: 100%; flex: 1;&quot;&gt;&lt;/fv-img&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h3 id="navigationview-mobile-display" tabindex="-1">NavigationView-Mobile Display <a class="header-anchor" href="#navigationview-mobile-display" aria-label="Permalink to &quot;NavigationView-Mobile Display&quot;">​</a></h3><hr>`,3),B={style:{position:"relative",width:"100%",height:"800px",display:"flex"}},q=h(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">position</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">relative</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">800</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">display</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">flex</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;fv-NavigationView :options=&quot;options&quot; mobileDisplay=&quot;100000000&quot; flyoutDisplay=&quot;500&quot;&gt;&lt;/fv-NavigationView&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;fv-img src=&quot;https://rescreator.blob.core.windows.net/slider/f2fcea9e-e31b-4a1e-87be-9241531c7dc6.jpg&quot; style=&quot;width: 350px; height: 100%; flex: 1;&quot;&gt;&lt;/fv-img&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h3 id="navigationview-flyout-1" tabindex="-1">NavigationView-Flyout <a class="header-anchor" href="#navigationview-flyout-1" aria-label="Permalink to &quot;NavigationView-Flyout&quot;">​</a></h3><hr><ol><li>Standard</li></ol>`,4),f={style:{position:"relative",width:"100%",height:"800px",background:"black",display:"flex"}},_=h(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">position</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">relative</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">800</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">black</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">display</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">flex</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;fv-NavigationView :options=&quot;options&quot; theme=&quot;dark&quot;&gt;&lt;/fv-NavigationView&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;fv-img src=&quot;https://rescreator.blob.core.windows.net/slider/f2fcea9e-e31b-4a1e-87be-9241531c7dc6.jpg&quot; style=&quot;width: 350px; height: 100%; flex: 1;&quot;&gt;&lt;/fv-img&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><ol start="2"><li>Flyout</li></ol>`,2),w={style:{position:"relative",width:"100%",height:"800px",background:"black",display:"flex"}},N=h(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">position</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">relative</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">800</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">black</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">display</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">flex</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;fv-NavigationView :options=&quot;options&quot; expandMode=&quot;flyout&quot; theme=&quot;dark&quot;&gt;&lt;/fv-NavigationView&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;fv-img src=&quot;https://rescreator.blob.core.windows.net/slider/f2fcea9e-e31b-4a1e-87be-9241531c7dc6.jpg&quot; style=&quot;width: 350px; height: 100%; flex: 1;&quot;&gt;&lt;/fv-img&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><ol start="3"><li>Mobile</li></ol>`,2),A={style:{position:"relative",width:"100%",height:"800px",background:"black",display:"flex"}},D=h(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">position</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">relative</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">800</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">black</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">display</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">flex</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;fv-NavigationView :options=&quot;options&quot; mobileDisplay=&quot;100000000&quot; flyoutDisplay=&quot;500&quot; theme=&quot;dark&quot;&gt;&lt;/fv-NavigationView&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;fv-img src=&quot;https://rescreator.blob.core.windows.net/slider/f2fcea9e-e31b-4a1e-87be-9241531c7dc6.jpg&quot; style=&quot;width: 350px; height: 100%; flex: 1;&quot;&gt;&lt;/fv-img&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">value</td><td style="text-align:center;">Array</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">当前选中项, 用<code>v-model</code>绑定</td></tr><tr><td style="text-align:center;">options</td><td style="text-align:center;">Array</td><td style="text-align:center;">Yes</td><td style="text-align:center;">N/A</td><td style="text-align:center;">选项数据, 参照<code>ListView</code>中的<code>items</code>数据格式</td></tr><tr><td style="text-align:center;">title</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">NavigationView</td><td style="text-align:center;">NavigationView 标题</td></tr><tr><td style="text-align:center;">expand</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">true</td><td style="text-align:center;">初始是否展开, 可通过 sync 方法来同步状态</td></tr><tr><td style="text-align:center;">expandMode</td><td style="text-align:center;">[&#39;relative&#39;,&#39;flyout&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">relative</td><td style="text-align:center;">展开模式, 有占位和浮动两种</td></tr><tr><td style="text-align:center;">expandWidth</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">350</td><td style="text-align:center;">展开宽度, 以<code>px</code>为单位</td></tr><tr><td style="text-align:center;">expandDisplay</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">1024</td><td style="text-align:center;">浏览器宽度大于多少时展开</td></tr><tr><td style="text-align:center;">compactWidth</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">50</td><td style="text-align:center;">折叠宽度, 以<code>px</code>为单位</td></tr><tr><td style="text-align:center;">flyoutDisplay</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">0</td><td style="text-align:center;">浏览器宽度小于多少时开启浮动模式, 若<code>expandMode</code>设为<code>flyout</code>, 则始终为浮动模式</td></tr><tr><td style="text-align:center;">fullSizeDisplay</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">800</td><td style="text-align:center;">浏览器宽度小于多少时全屏显示</td></tr><tr><td style="text-align:center;">mobileDisplay</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">0</td><td style="text-align:center;">浏览器宽度小于多少时开启移动端模式</td></tr><tr><td style="text-align:center;">showBack</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">true</td><td style="text-align:center;">是否显示后退按钮</td></tr><tr><td style="text-align:center;">showSearch</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">true</td><td style="text-align:center;">是否显示搜索框</td></tr><tr><td style="text-align:center;">settingTitle</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">Settings</td><td style="text-align:center;">设置选项的标题</td></tr><tr><td style="text-align:center;">showSetting</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">true</td><td style="text-align:center;">是否显示设置选项</td></tr><tr><td style="text-align:center;">searchPlaceholder</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">Search</td><td style="text-align:center;">搜索框的占位符</td></tr><tr><td style="text-align:center;">foreground</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">NavigationView 前景色</td></tr><tr><td style="text-align:center;">background</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">NavigationView 背景色</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">system</td><td style="text-align:center;">主题样式, 包含<code>light</code>, <code>dark</code>, <code>system</code>, <code>custom</code>几种样式</td></tr></tbody></table><h3 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to &quot;Events&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">事件名(Name)</th><th style="text-align:center;">参数类型(args)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">item-click</td><td style="text-align:center;">object</td><td style="text-align:center;">选项点击后触发</td></tr><tr><td style="text-align:center;">setting-click</td><td style="text-align:center;">Object</td><td style="text-align:center;">设置选项被点击后触发事件, 返回<code>{ event: MouseEvent }</code></td></tr><tr><td style="text-align:center;">update:expand</td><td style="text-align:center;">boolean</td><td style="text-align:center;">当折叠或展开时同步外界传入的<code>expand</code></td></tr><tr><td style="text-align:center;">expand-change</td><td style="text-align:center;">boolean</td><td style="text-align:center;">当折叠或展开时触发事件并提供当前状态</td></tr><tr><td style="text-align:center;">expand-click</td><td style="text-align:center;"></td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">back</td><td style="text-align:center;">MouseEvent</td><td style="text-align:center;">返回选项被点击后触发事件</td></tr></tbody></table><h3 id="slot" tabindex="-1">Slot <a class="header-anchor" href="#slot" aria-label="Permalink to &quot;Slot&quot;">​</a></h3><hr><ol><li>ListItem</li></ol><p>默认以value中每一项的属性name作为默认显示, 参考<code>ListView</code>, 包含以下可选属性</p><ul><li>item: 当前项</li><li>index: 当前项索引</li></ul><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">listItem</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">i</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-show</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">valueTrigger</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(x.item.icon) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">!==</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> undefined</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ms-Icon icon&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">\`ms-Icon--\${</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">valueTrigger</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">(</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">.</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">item</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">.</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">icon</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">)</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">}\`</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">i</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;name&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{ </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: x.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">valueTrigger</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(x.item.type) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">==</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;header&#39;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> ?</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> foreground </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;{{x.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">valueTrigger</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(x.item.name)}}&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>注意在收缩时要隐藏<code>&lt;p&gt;</code>标签的话一定要将其类型加上<code>name</code>.</p><h3 id="data" tabindex="-1">Data <a class="header-anchor" href="#data" aria-label="Permalink to &quot;Data&quot;">​</a></h3><hr><ol><li>options</li></ol><ul><li>数据格式参考<code>ListView</code>中<code>items</code>的形式, 其中<code>key</code>字段建议开发者在有重复名称和类型字段时声明用来区别项目</li><li>开发者可利用<code>icon</code>字段来应用<code>Fabric Icon</code></li></ul><div class="language-javascript vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">options </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [{ key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, disabled: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }];</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">//e.g.//</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">options</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: [</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Fruits&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;header&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">},</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Apple&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;WindowsLogo&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">},</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Banana&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;DelveAnalyticsLogo&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">},</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">3</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Orange&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Guitar&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">},</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">4</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Grape&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;HailDay&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">},</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">5</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;divider&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">6</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Vegetables&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;header&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">},</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">7</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Broccoli&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;QuadColumn&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">},</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">8</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Carrot&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Quantity&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">},</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">9</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Lettuce&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;TestBeaker&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">];</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><h3 id="appendix" tabindex="-1">Appendix <a class="header-anchor" href="#appendix" aria-label="Permalink to &quot;Appendix&quot;">​</a></h3><hr><ol><li><code>NavigationView</code>中的<code>setting</code>项由于不包含在<code>options</code>中, 故无法在<code>options</code>中找到<code>setting</code>项. 但是当选中<code>setting</code>项时, <code>value</code>值会改变为<code>{ name: &quot;&gt;setting&quot;, type: &quot;setting&quot; }</code>, 你也可以通过在外部赋值的方式将当前选项更改为<code>setting</code>项.</li></ol><p><strong>特别地</strong> 0.1.54版本后支持采用函数式字段, 其中支持的字段包括<code>name</code>, <code>disabled</code>, <code>choosen</code>, <code>type</code>, <code>icon</code>, <code>show</code></p>`,23);function V(p,k,T,S,i,E){const a=r("fv-NavigationView"),e=r("fv-img"),n=r("ClientOnly");return c(),g("div",null,[F,C,s(n,null,{default:l(()=>[t("div",b,[s(a,{modelValue:i.value,"onUpdate:modelValue":k[0]||(k[0]=d=>i.value=d),options:i.options,onItemClick:E.navigationClick},null,8,["modelValue","options","onItemClick"]),s(e,{src:"https://rescreator.blob.core.windows.net/slider/1444a25f-3e33-44a2-878f-a628342ad88f.jpg",style:{width:"350px",height:"100%",flex:"1"}})])]),_:1}),x,s(n,null,{default:l(()=>[t("div",v,[s(a,{modelValue:i.value,"onUpdate:modelValue":k[1]||(k[1]=d=>i.value=d),options:i.options,expandMode:"flyout"},null,8,["modelValue","options"]),s(e,{src:"https://rescreator.blob.core.windows.net/slider/1444a25f-3e33-44a2-878f-a628342ad88f.jpg",style:{width:"350px",height:"100%",flex:"1"}})])]),_:1}),m,s(n,null,{default:l(()=>[t("div",B,[s(a,{options:i.options,mobileDisplay:"100000000",flyoutDisplay:"500"},null,8,["options"]),s(e,{src:"https://rescreator.blob.core.windows.net/slider/f2fcea9e-e31b-4a1e-87be-9241531c7dc6.jpg",style:{width:"350px",height:"100%",flex:"1"}})])]),_:1}),q,s(n,null,{default:l(()=>[t("div",f,[s(a,{options:i.options,theme:"dark"},null,8,["options"]),s(e,{src:"https://rescreator.blob.core.windows.net/slider/f2fcea9e-e31b-4a1e-87be-9241531c7dc6.jpg",style:{width:"350px",height:"100%",flex:"1"}})])]),_:1}),_,s(n,null,{default:l(()=>[t("div",w,[s(a,{options:i.options,expandMode:"flyout",theme:"dark"},null,8,["options"]),s(e,{src:"https://rescreator.blob.core.windows.net/slider/f2fcea9e-e31b-4a1e-87be-9241531c7dc6.jpg",style:{width:"350px",height:"100%",flex:"1"}})])]),_:1}),N,s(n,null,{default:l(()=>[t("div",A,[s(a,{options:i.options,mobileDisplay:"100000000",flyoutDisplay:"500",theme:"dark"},null,8,["options"]),s(e,{src:"https://rescreator.blob.core.windows.net/slider/f2fcea9e-e31b-4a1e-87be-9241531c7dc6.jpg",style:{width:"350px",height:"100%",flex:"1"}})])]),_:1}),D])}const j=o(u,[["render",V]]);export{I as __pageData,j as default};
diff --git a/assets/guide_components_navigation-view_index.md.4AQRiz1k.lean.js b/assets/guide_components_navigation-view_index.md.4AQRiz1k.lean.js
new file mode 100644
index 0000000..4ca7df1
--- /dev/null
+++ b/assets/guide_components_navigation-view_index.md.4AQRiz1k.lean.js
@@ -0,0 +1 @@
+import{_ as o,q as g,Y as s,z as l,H as t,u as y,aq as h,S as r,p as c}from"./chunks/framework.DvIFzl91.js";const u={data(){return{value:{},options:[{key:0,name:"Fruits",type:"header"},{key:1,name:"Apple",icon:"WindowsLogo"},{key:2,name:"Banana",icon:"DelveAnalyticsLogo"},{key:3,name:"Orange",icon:"Guitar"},{key:4,name:"Grape",icon:"HailDay"},{key:5,name:"",type:"divider"},{key:6,name:"Vegetables",type:"header"},{key:7,name:"Broccoli",icon:"QuadColumn"},{key:8,name:"Carrot",icon:"Quantity"},{key:9,name:"Lettuce",icon:"TestBeaker"}]}},watch:{value(p){console.log(p)}},methods:{navigationClick(p){console.log("click",p)}}},I=JSON.parse('{"title":"NavigationView","description":"","frontmatter":{"page":true,"title":"NavigationView"},"headers":[],"relativePath":"guide/components/navigation-view/index.md","filePath":"guide/components/navigation-view/index.md"}'),F=t("h3",{id:"navigationview-demo",tabindex:"-1"},[y("NavigationView-DEMO "),t("a",{class:"header-anchor",href:"#navigationview-demo","aria-label":'Permalink to "NavigationView-DEMO"'},"​")],-1),C=t("hr",null,null,-1),b={style:{position:"relative",width:"100%",height:"800px",display:"flex"}},x=h("",3),v={style:{position:"relative",width:"100%",height:"800px",display:"flex"}},m=h("",3),B={style:{position:"relative",width:"100%",height:"800px",display:"flex"}},q=h("",4),f={style:{position:"relative",width:"100%",height:"800px",background:"black",display:"flex"}},_=h("",2),w={style:{position:"relative",width:"100%",height:"800px",background:"black",display:"flex"}},N=h("",2),A={style:{position:"relative",width:"100%",height:"800px",background:"black",display:"flex"}},D=h("",23);function V(p,k,T,S,i,E){const a=r("fv-NavigationView"),e=r("fv-img"),n=r("ClientOnly");return c(),g("div",null,[F,C,s(n,null,{default:l(()=>[t("div",b,[s(a,{modelValue:i.value,"onUpdate:modelValue":k[0]||(k[0]=d=>i.value=d),options:i.options,onItemClick:E.navigationClick},null,8,["modelValue","options","onItemClick"]),s(e,{src:"https://rescreator.blob.core.windows.net/slider/1444a25f-3e33-44a2-878f-a628342ad88f.jpg",style:{width:"350px",height:"100%",flex:"1"}})])]),_:1}),x,s(n,null,{default:l(()=>[t("div",v,[s(a,{modelValue:i.value,"onUpdate:modelValue":k[1]||(k[1]=d=>i.value=d),options:i.options,expandMode:"flyout"},null,8,["modelValue","options"]),s(e,{src:"https://rescreator.blob.core.windows.net/slider/1444a25f-3e33-44a2-878f-a628342ad88f.jpg",style:{width:"350px",height:"100%",flex:"1"}})])]),_:1}),m,s(n,null,{default:l(()=>[t("div",B,[s(a,{options:i.options,mobileDisplay:"100000000",flyoutDisplay:"500"},null,8,["options"]),s(e,{src:"https://rescreator.blob.core.windows.net/slider/f2fcea9e-e31b-4a1e-87be-9241531c7dc6.jpg",style:{width:"350px",height:"100%",flex:"1"}})])]),_:1}),q,s(n,null,{default:l(()=>[t("div",f,[s(a,{options:i.options,theme:"dark"},null,8,["options"]),s(e,{src:"https://rescreator.blob.core.windows.net/slider/f2fcea9e-e31b-4a1e-87be-9241531c7dc6.jpg",style:{width:"350px",height:"100%",flex:"1"}})])]),_:1}),_,s(n,null,{default:l(()=>[t("div",w,[s(a,{options:i.options,expandMode:"flyout",theme:"dark"},null,8,["options"]),s(e,{src:"https://rescreator.blob.core.windows.net/slider/f2fcea9e-e31b-4a1e-87be-9241531c7dc6.jpg",style:{width:"350px",height:"100%",flex:"1"}})])]),_:1}),N,s(n,null,{default:l(()=>[t("div",A,[s(a,{options:i.options,mobileDisplay:"100000000",flyoutDisplay:"500",theme:"dark"},null,8,["options"]),s(e,{src:"https://rescreator.blob.core.windows.net/slider/f2fcea9e-e31b-4a1e-87be-9241531c7dc6.jpg",style:{width:"350px",height:"100%",flex:"1"}})])]),_:1}),D])}const j=o(u,[["render",V]]);export{I as __pageData,j as default};
diff --git a/assets/guide_components_pagination_emits.md.Dng86A22.js b/assets/guide_components_pagination_emits.md.Dng86A22.js
new file mode 100644
index 0000000..d86af35
--- /dev/null
+++ b/assets/guide_components_pagination_emits.md.Dng86A22.js
@@ -0,0 +1 @@
+import{_ as t,q as e,p as a,aq as n}from"./chunks/framework.DvIFzl91.js";const g=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/components/pagination/emits.md","filePath":"guide/components/pagination/emits.md"}'),i={name:"guide/components/pagination/emits.md"},s=n('<h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-label="Permalink to &quot;Emits&quot;">​</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead></table>',3),o=[s];function r(_,c,m,d,l,h){return a(),e("div",null,o)}const u=t(i,[["render",r]]);export{g as __pageData,u as default};
diff --git a/assets/guide_components_pagination_emits.md.Dng86A22.lean.js b/assets/guide_components_pagination_emits.md.Dng86A22.lean.js
new file mode 100644
index 0000000..2007e5c
--- /dev/null
+++ b/assets/guide_components_pagination_emits.md.Dng86A22.lean.js
@@ -0,0 +1 @@
+import{_ as t,q as e,p as a,aq as n}from"./chunks/framework.DvIFzl91.js";const g=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/components/pagination/emits.md","filePath":"guide/components/pagination/emits.md"}'),i={name:"guide/components/pagination/emits.md"},s=n("",3),o=[s];function r(_,c,m,d,l,h){return a(),e("div",null,o)}const u=t(i,[["render",r]]);export{g as __pageData,u as default};
diff --git a/assets/guide_components_pagination_index.md.CnW2zAht.js b/assets/guide_components_pagination_index.md.CnW2zAht.js
new file mode 100644
index 0000000..3b8ee4e
--- /dev/null
+++ b/assets/guide_components_pagination_index.md.CnW2zAht.js
@@ -0,0 +1,7 @@
+import{_ as d,q as h,Y as t,z as e,H as n,u as r,aq as s,S as l,p}from"./chunks/framework.DvIFzl91.js";const B=JSON.parse('{"title":"Pagination","description":"","frontmatter":{"page":true,"title":"Pagination"},"headers":[],"relativePath":"guide/components/pagination/index.md","filePath":"guide/components/pagination/index.md"}'),o={name:"guide/components/pagination/index.md"},k=n("h3",{id:"pagination-demo",tabindex:"-1"},[r("Pagination-DEMO "),n("a",{class:"header-anchor",href:"#pagination-demo","aria-label":'Permalink to "Pagination-DEMO"'},"​")],-1),g=n("hr",null,null,-1),c=s(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Pagination</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Pagination</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="pagination-with-background" tabindex="-1">Pagination With Background <a class="header-anchor" href="#pagination-with-background" aria-label="Permalink to &quot;Pagination With Background&quot;">​</a></h3><hr>`,3),E=s(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Pagination</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;whitesmoke&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Pagination</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="pagination-with-boxshadow" tabindex="-1">Pagination With Boxshadow <a class="header-anchor" href="#pagination-with-boxshadow" aria-label="Permalink to &quot;Pagination With Boxshadow&quot;">​</a></h3><hr>`,3),u=s(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Pagination</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">total</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;whitesmoke&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">shadow</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Pagination</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="pagination-small-size" tabindex="-1">Pagination Small Size <a class="header-anchor" href="#pagination-small-size" aria-label="Permalink to &quot;Pagination Small Size&quot;">​</a></h3><hr>`,3),y=s(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Pagination</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">small</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Pagination</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="pagination-disabled" tabindex="-1">Pagination Disabled <a class="header-anchor" href="#pagination-disabled" aria-label="Permalink to &quot;Pagination Disabled&quot;">​</a></h3><hr>`,3),b=s(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Pagination</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> disabled</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Pagination</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="pagination-dark-theme" tabindex="-1">Pagination Dark Theme <a class="header-anchor" href="#pagination-dark-theme" aria-label="Permalink to &quot;Pagination Dark Theme&quot;">​</a></h3><hr>`,3),_={style:{padding:"10px 0px",background:"black"}},m=s(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Pagination</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;dark&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;black&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Pagination</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">value</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">1</td><td style="text-align:center;">当前页码数</td></tr><tr><td style="text-align:center;">foreground</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">rgba(0, 90, 158, 1)</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">background</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">transparent</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">total</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">10</td><td style="text-align:center;">总页码数</td></tr><tr><td style="text-align:center;">maxVisual</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">7</td><td style="text-align:center;">最大可视按钮</td></tr><tr><td style="text-align:center;">small</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">小型分页按钮</td></tr><tr><td style="text-align:center;">shadow</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">system</td><td style="text-align:center;">主题样式, 包含<code>light</code>, <code>dark</code>, <code>system</code>, <code>custom</code>几种样式</td></tr></tbody></table><h3 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to &quot;Events&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">事件名(Name)</th><th style="text-align:center;">参数类型(args)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">next-click</td><td style="text-align:center;">number</td><td style="text-align:center;">下一页按钮点击</td></tr><tr><td style="text-align:center;">prev-click</td><td style="text-align:center;">number</td><td style="text-align:center;">上一页按钮点击</td></tr><tr><td style="text-align:center;">page-click</td><td style="text-align:center;">number</td><td style="text-align:center;">翻页按钮点击</td></tr></tbody></table>`,7);function x(v,C,F,P,f,T){const a=l("fv-Pagination"),i=l("ClientOnly");return p(),h("div",null,[k,g,t(i,null,{default:e(()=>[t(a)]),_:1}),c,t(i,null,{default:e(()=>[t(a,{background:"whitesmoke"})]),_:1}),E,t(i,null,{default:e(()=>[t(a,{total:100,background:"whitesmoke",shadow:!0})]),_:1}),u,t(i,null,{default:e(()=>[t(a,{small:!0})]),_:1}),y,t(i,null,{default:e(()=>[t(a,{disabled:""})]),_:1}),b,n("div",_,[t(i,null,{default:e(()=>[t(a,{theme:"dark",background:"black"})]),_:1})]),m])}const A=d(o,[["render",x]]);export{B as __pageData,A as default};
diff --git a/assets/guide_components_pagination_index.md.CnW2zAht.lean.js b/assets/guide_components_pagination_index.md.CnW2zAht.lean.js
new file mode 100644
index 0000000..8a3595f
--- /dev/null
+++ b/assets/guide_components_pagination_index.md.CnW2zAht.lean.js
@@ -0,0 +1 @@
+import{_ as d,q as h,Y as t,z as e,H as n,u as r,aq as s,S as l,p}from"./chunks/framework.DvIFzl91.js";const B=JSON.parse('{"title":"Pagination","description":"","frontmatter":{"page":true,"title":"Pagination"},"headers":[],"relativePath":"guide/components/pagination/index.md","filePath":"guide/components/pagination/index.md"}'),o={name:"guide/components/pagination/index.md"},k=n("h3",{id:"pagination-demo",tabindex:"-1"},[r("Pagination-DEMO "),n("a",{class:"header-anchor",href:"#pagination-demo","aria-label":'Permalink to "Pagination-DEMO"'},"​")],-1),g=n("hr",null,null,-1),c=s("",3),E=s("",3),u=s("",3),y=s("",3),b=s("",3),_={style:{padding:"10px 0px",background:"black"}},m=s("",7);function x(v,C,F,P,f,T){const a=l("fv-Pagination"),i=l("ClientOnly");return p(),h("div",null,[k,g,t(i,null,{default:e(()=>[t(a)]),_:1}),c,t(i,null,{default:e(()=>[t(a,{background:"whitesmoke"})]),_:1}),E,t(i,null,{default:e(()=>[t(a,{total:100,background:"whitesmoke",shadow:!0})]),_:1}),u,t(i,null,{default:e(()=>[t(a,{small:!0})]),_:1}),y,t(i,null,{default:e(()=>[t(a,{disabled:""})]),_:1}),b,n("div",_,[t(i,null,{default:e(()=>[t(a,{theme:"dark",background:"black"})]),_:1})]),m])}const A=d(o,[["render",x]]);export{B as __pageData,A as default};
diff --git a/assets/guide_components_pagination_properties.md.JUAPvcTL.js b/assets/guide_components_pagination_properties.md.JUAPvcTL.js
new file mode 100644
index 0000000..037c600
--- /dev/null
+++ b/assets/guide_components_pagination_properties.md.JUAPvcTL.js
@@ -0,0 +1 @@
+import{_ as t,q as e,p as a,aq as r}from"./chunks/framework.DvIFzl91.js";const g=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/components/pagination/properties.md","filePath":"guide/components/pagination/properties.md"}'),n={name:"guide/components/pagination/properties.md"},o=r('<h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-label="Permalink to &quot;Properties&quot;">​</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead></table>',3),i=[o];function s(p,c,_,l,h,d){return a(),e("div",null,i)}const u=t(n,[["render",s]]);export{g as __pageData,u as default};
diff --git a/assets/guide_components_pagination_properties.md.JUAPvcTL.lean.js b/assets/guide_components_pagination_properties.md.JUAPvcTL.lean.js
new file mode 100644
index 0000000..08ac24a
--- /dev/null
+++ b/assets/guide_components_pagination_properties.md.JUAPvcTL.lean.js
@@ -0,0 +1 @@
+import{_ as t,q as e,p as a,aq as r}from"./chunks/framework.DvIFzl91.js";const g=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/components/pagination/properties.md","filePath":"guide/components/pagination/properties.md"}'),n={name:"guide/components/pagination/properties.md"},o=r("",3),i=[o];function s(p,c,_,l,h,d){return a(),e("div",null,i)}const u=t(n,[["render",s]]);export{g as __pageData,u as default};
diff --git a/assets/guide_components_panel_emits.md.DG0REDq8.js b/assets/guide_components_panel_emits.md.DG0REDq8.js
new file mode 100644
index 0000000..2dbb2dc
--- /dev/null
+++ b/assets/guide_components_panel_emits.md.DG0REDq8.js
@@ -0,0 +1 @@
+import{_ as t,q as e,p as a,aq as n}from"./chunks/framework.DvIFzl91.js";const u=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/components/panel/emits.md","filePath":"guide/components/panel/emits.md"}'),s={name:"guide/components/panel/emits.md"},i=n('<h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-label="Permalink to &quot;Emits&quot;">​</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead></table>',3),o=[i];function r(_,c,m,l,d,h){return a(),e("div",null,o)}const f=t(s,[["render",r]]);export{u as __pageData,f as default};
diff --git a/assets/guide_components_panel_emits.md.DG0REDq8.lean.js b/assets/guide_components_panel_emits.md.DG0REDq8.lean.js
new file mode 100644
index 0000000..0587075
--- /dev/null
+++ b/assets/guide_components_panel_emits.md.DG0REDq8.lean.js
@@ -0,0 +1 @@
+import{_ as t,q as e,p as a,aq as n}from"./chunks/framework.DvIFzl91.js";const u=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/components/panel/emits.md","filePath":"guide/components/panel/emits.md"}'),s={name:"guide/components/panel/emits.md"},i=n("",3),o=[i];function r(_,c,m,l,d,h){return a(),e("div",null,o)}const f=t(s,[["render",r]]);export{u as __pageData,f as default};
diff --git a/assets/guide_components_panel_index.md.CsTu0bXo.js b/assets/guide_components_panel_index.md.CsTu0bXo.js
new file mode 100644
index 0000000..1e448ae
--- /dev/null
+++ b/assets/guide_components_panel_index.md.CsTu0bXo.js
@@ -0,0 +1,16 @@
+import{_ as E,q as o,Y as i,z as a,H as k,u as l,aq as r,S as d,p as g}from"./chunks/framework.DvIFzl91.js";const y={data(){return{basic:!1,nearSide:!1,centralSide:!1,lightDismiss:!1,acrylic:!1,footer:!1,dark:!1,acrylicDark:!1}}},T=JSON.parse('{"title":"Panel","description":"","frontmatter":{"page":true,"title":"Panel"},"headers":[],"relativePath":"guide/components/panel/index.md","filePath":"guide/components/panel/index.md"}'),c=k("h3",{id:"panel-demo",tabindex:"-1"},[l("Panel-DEMO "),k("a",{class:"header-anchor",href:"#panel-demo","aria-label":'Permalink to "Panel-DEMO"'},"​")],-1),u=k("hr",null,null,-1),F=r(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Panel</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">basic</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Panel</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="panel-near-side" tabindex="-1">Panel Near Side <a class="header-anchor" href="#panel-near-side" aria-label="Permalink to &quot;Panel Near Side&quot;">​</a></h3><hr>`,3),m=r(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Panel</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">nearSide</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">isNearSide</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Panel</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="panel-central-side" tabindex="-1">Panel Central Side <a class="header-anchor" href="#panel-central-side" aria-label="Permalink to &quot;Panel Central Side&quot;">​</a></h3><hr>`,3),b=r(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Panel</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">centralSide</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">isCentralSide</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;calc(90% - 50px)&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;calc(90% - 50px)&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Panel</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="panel-light-dismiss" tabindex="-1">Panel Light Dismiss <a class="header-anchor" href="#panel-light-dismiss" aria-label="Permalink to &quot;Panel Light Dismiss&quot;">​</a></h3><hr>`,3),v=r(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Panel</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">lightDismiss</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">isLightDismiss</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Panel</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="panel-acrylic" tabindex="-1">Panel Acrylic <a class="header-anchor" href="#panel-acrylic" aria-label="Permalink to &quot;Panel Acrylic&quot;">​</a></h3><hr>`,3),C=r(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Panel</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">acrylic</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">isLightDismiss</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">isAcrylic</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Panel</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="panel-footer" tabindex="-1">Panel Footer <a class="header-anchor" href="#panel-footer" aria-label="Permalink to &quot;Panel Footer&quot;">​</a></h3><hr>`,3),_=r(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Panel</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">footer</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">isFooter</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">isAcrylic</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;template v-slot:footer&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;fv-button theme=&quot;dark&quot; background=&quot;rgba(0, 90, 158, 1)&quot;&gt;OK&lt;/fv-button&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;fv-button&gt;Cancel&lt;/fv-button&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Panel</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h3 id="panel-dark-theme" tabindex="-1">Panel Dark Theme <a class="header-anchor" href="#panel-dark-theme" aria-label="Permalink to &quot;Panel Dark Theme&quot;">​</a></h3><hr><p>Standard</p>`,4),x=r(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Panel</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">dark</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">isLightDismiss</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;dark&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Panel</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>Acrylic</p>`,2),B=r(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Panel</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">acrylicDark</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">isLightDismiss</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">isAcrylic</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;dark&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Panel</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">value</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">显示/隐藏<code>Panel</code></td></tr><tr><td style="text-align:center;">title</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">Sample Panel</td><td style="text-align:center;">标题</td></tr><tr><td style="text-align:center;">titleSize</td><td style="text-align:center;">[number,string]</td><td style="text-align:center;">No</td><td style="text-align:center;">20</td><td style="text-align:center;">标题字体大小</td></tr><tr><td style="text-align:center;">titleWeight</td><td style="text-align:center;">[number,string]</td><td style="text-align:center;">No</td><td style="text-align:center;">600</td><td style="text-align:center;">标题字体粗细</td></tr><tr><td style="text-align:center;">titleColor</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">标题字体颜色</td></tr><tr><td style="text-align:center;">width</td><td style="text-align:center;">[number,string]</td><td style="text-align:center;">No</td><td style="text-align:center;">340</td><td style="text-align:center;">宽度</td></tr><tr><td style="text-align:center;">height</td><td style="text-align:center;">[number,string]</td><td style="text-align:center;">No</td><td style="text-align:center;">100%</td><td style="text-align:center;">宽度</td></tr><tr><td style="text-align:center;">background</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"><code>Panel</code>背景色</td></tr><tr><td style="text-align:center;">isNearSide</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否从左侧显示</td></tr><tr><td style="text-align:center;">isCentralSide</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否从中央显示</td></tr><tr><td style="text-align:center;">isLightDismiss</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否单击空白处关闭</td></tr><tr><td style="text-align:center;">showTitleBar</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否显示标题栏</td></tr><tr><td style="text-align:center;">isFooter</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否显示底部控制</td></tr><tr><td style="text-align:center;">isAcrylic</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否开启<code>Acrylic</code>效果</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">system</td><td style="text-align:center;">主题样式, 包含<code>light</code>, <code>dark</code>, <code>system</code>, <code>custom</code>几种样式</td></tr></tbody></table><h3 id="slot" tabindex="-1">Slot <a class="header-anchor" href="#slot" aria-label="Permalink to &quot;Slot&quot;">​</a></h3><hr><ol><li>Container</li></ol><p>自定义容器内容</p><div class="language-javascript vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">container</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><ol start="2"><li>Header</li></ol><p>自定义标题栏内容</p><div class="language-javascript vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">header</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><ol start="3"><li>Footer</li></ol><p>自定义<code>Footer</code>内容</p><div class="language-javascript vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">footer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div>`,15);function f(P,s,q,A,t,D){const n=d("fv-button"),h=d("fv-Panel"),p=d("ClientOnly");return g(),o("div",null,[c,u,i(p,null,{default:a(()=>[i(n,{style:{width:"200px"},onClick:s[0]||(s[0]=e=>t.basic=!0)},{default:a(()=>[l("Open Panel")]),_:1}),i(h,{modelValue:t.basic,"onUpdate:modelValue":s[1]||(s[1]=e=>t.basic=e)},null,8,["modelValue"])]),_:1}),F,i(p,null,{default:a(()=>[i(n,{style:{width:"200px"},onClick:s[2]||(s[2]=e=>t.nearSide=!0)},{default:a(()=>[l("Open Panel")]),_:1}),i(h,{modelValue:t.nearSide,"onUpdate:modelValue":s[3]||(s[3]=e=>t.nearSide=e),isNearSide:!0},null,8,["modelValue"])]),_:1}),m,i(p,null,{default:a(()=>[i(n,{style:{width:"200px"},onClick:s[4]||(s[4]=e=>t.centralSide=!0)},{default:a(()=>[l("Open Panel")]),_:1}),i(h,{modelValue:t.centralSide,"onUpdate:modelValue":s[5]||(s[5]=e=>t.centralSide=e),isCentralSide:!0,width:"calc(90% - 50px)",height:"calc(90% - 50px)"},null,8,["modelValue"])]),_:1}),b,i(p,null,{default:a(()=>[i(n,{style:{width:"200px"},onClick:s[6]||(s[6]=e=>t.lightDismiss=!0)},{default:a(()=>[l("Open Panel")]),_:1}),i(h,{modelValue:t.lightDismiss,"onUpdate:modelValue":s[7]||(s[7]=e=>t.lightDismiss=e),isLightDismiss:!0},null,8,["modelValue"])]),_:1}),v,i(p,null,{default:a(()=>[i(n,{style:{width:"200px"},onClick:s[8]||(s[8]=e=>t.acrylic=!0)},{default:a(()=>[l("Open Panel")]),_:1}),i(h,{modelValue:t.acrylic,"onUpdate:modelValue":s[9]||(s[9]=e=>t.acrylic=e),isLightDismiss:!0,isAcrylic:!0},null,8,["modelValue"])]),_:1}),C,i(p,null,{default:a(()=>[i(n,{style:{width:"200px"},onClick:s[10]||(s[10]=e=>t.footer=!0)},{default:a(()=>[l("Open Panel")]),_:1}),i(h,{modelValue:t.footer,"onUpdate:modelValue":s[12]||(s[12]=e=>t.footer=e),isFooter:!0,isAcrylic:!0},{footer:a(()=>[i(n,{theme:"dark",background:"rgba(0, 90, 158, 1)"},{default:a(()=>[l("OK")]),_:1}),i(n,{onClick:s[11]||(s[11]=e=>t.footer=!1)},{default:a(()=>[l("Cancel")]),_:1})]),_:1},8,["modelValue"])]),_:1}),_,i(p,null,{default:a(()=>[i(n,{style:{width:"200px"},onClick:s[13]||(s[13]=e=>t.dark=!0)},{default:a(()=>[l("Open Panel")]),_:1}),i(h,{modelValue:t.dark,"onUpdate:modelValue":s[14]||(s[14]=e=>t.dark=e),isLightDismiss:!0,theme:"dark"},null,8,["modelValue"])]),_:1}),x,i(p,null,{default:a(()=>[i(n,{style:{width:"200px"},onClick:s[15]||(s[15]=e=>t.acrylicDark=!0)},{default:a(()=>[l("Open Panel")]),_:1}),i(h,{modelValue:t.acrylicDark,"onUpdate:modelValue":s[16]||(s[16]=e=>t.acrylicDark=e),isLightDismiss:!0,isAcrylic:!0,theme:"dark"},null,8,["modelValue"])]),_:1}),B])}const V=E(y,[["render",f]]);export{T as __pageData,V as default};
diff --git a/assets/guide_components_panel_index.md.CsTu0bXo.lean.js b/assets/guide_components_panel_index.md.CsTu0bXo.lean.js
new file mode 100644
index 0000000..da872cd
--- /dev/null
+++ b/assets/guide_components_panel_index.md.CsTu0bXo.lean.js
@@ -0,0 +1 @@
+import{_ as E,q as o,Y as i,z as a,H as k,u as l,aq as r,S as d,p as g}from"./chunks/framework.DvIFzl91.js";const y={data(){return{basic:!1,nearSide:!1,centralSide:!1,lightDismiss:!1,acrylic:!1,footer:!1,dark:!1,acrylicDark:!1}}},T=JSON.parse('{"title":"Panel","description":"","frontmatter":{"page":true,"title":"Panel"},"headers":[],"relativePath":"guide/components/panel/index.md","filePath":"guide/components/panel/index.md"}'),c=k("h3",{id:"panel-demo",tabindex:"-1"},[l("Panel-DEMO "),k("a",{class:"header-anchor",href:"#panel-demo","aria-label":'Permalink to "Panel-DEMO"'},"​")],-1),u=k("hr",null,null,-1),F=r("",3),m=r("",3),b=r("",3),v=r("",3),C=r("",3),_=r("",4),x=r("",2),B=r("",15);function f(P,s,q,A,t,D){const n=d("fv-button"),h=d("fv-Panel"),p=d("ClientOnly");return g(),o("div",null,[c,u,i(p,null,{default:a(()=>[i(n,{style:{width:"200px"},onClick:s[0]||(s[0]=e=>t.basic=!0)},{default:a(()=>[l("Open Panel")]),_:1}),i(h,{modelValue:t.basic,"onUpdate:modelValue":s[1]||(s[1]=e=>t.basic=e)},null,8,["modelValue"])]),_:1}),F,i(p,null,{default:a(()=>[i(n,{style:{width:"200px"},onClick:s[2]||(s[2]=e=>t.nearSide=!0)},{default:a(()=>[l("Open Panel")]),_:1}),i(h,{modelValue:t.nearSide,"onUpdate:modelValue":s[3]||(s[3]=e=>t.nearSide=e),isNearSide:!0},null,8,["modelValue"])]),_:1}),m,i(p,null,{default:a(()=>[i(n,{style:{width:"200px"},onClick:s[4]||(s[4]=e=>t.centralSide=!0)},{default:a(()=>[l("Open Panel")]),_:1}),i(h,{modelValue:t.centralSide,"onUpdate:modelValue":s[5]||(s[5]=e=>t.centralSide=e),isCentralSide:!0,width:"calc(90% - 50px)",height:"calc(90% - 50px)"},null,8,["modelValue"])]),_:1}),b,i(p,null,{default:a(()=>[i(n,{style:{width:"200px"},onClick:s[6]||(s[6]=e=>t.lightDismiss=!0)},{default:a(()=>[l("Open Panel")]),_:1}),i(h,{modelValue:t.lightDismiss,"onUpdate:modelValue":s[7]||(s[7]=e=>t.lightDismiss=e),isLightDismiss:!0},null,8,["modelValue"])]),_:1}),v,i(p,null,{default:a(()=>[i(n,{style:{width:"200px"},onClick:s[8]||(s[8]=e=>t.acrylic=!0)},{default:a(()=>[l("Open Panel")]),_:1}),i(h,{modelValue:t.acrylic,"onUpdate:modelValue":s[9]||(s[9]=e=>t.acrylic=e),isLightDismiss:!0,isAcrylic:!0},null,8,["modelValue"])]),_:1}),C,i(p,null,{default:a(()=>[i(n,{style:{width:"200px"},onClick:s[10]||(s[10]=e=>t.footer=!0)},{default:a(()=>[l("Open Panel")]),_:1}),i(h,{modelValue:t.footer,"onUpdate:modelValue":s[12]||(s[12]=e=>t.footer=e),isFooter:!0,isAcrylic:!0},{footer:a(()=>[i(n,{theme:"dark",background:"rgba(0, 90, 158, 1)"},{default:a(()=>[l("OK")]),_:1}),i(n,{onClick:s[11]||(s[11]=e=>t.footer=!1)},{default:a(()=>[l("Cancel")]),_:1})]),_:1},8,["modelValue"])]),_:1}),_,i(p,null,{default:a(()=>[i(n,{style:{width:"200px"},onClick:s[13]||(s[13]=e=>t.dark=!0)},{default:a(()=>[l("Open Panel")]),_:1}),i(h,{modelValue:t.dark,"onUpdate:modelValue":s[14]||(s[14]=e=>t.dark=e),isLightDismiss:!0,theme:"dark"},null,8,["modelValue"])]),_:1}),x,i(p,null,{default:a(()=>[i(n,{style:{width:"200px"},onClick:s[15]||(s[15]=e=>t.acrylicDark=!0)},{default:a(()=>[l("Open Panel")]),_:1}),i(h,{modelValue:t.acrylicDark,"onUpdate:modelValue":s[16]||(s[16]=e=>t.acrylicDark=e),isLightDismiss:!0,isAcrylic:!0,theme:"dark"},null,8,["modelValue"])]),_:1}),B])}const V=E(y,[["render",f]]);export{T as __pageData,V as default};
diff --git a/assets/guide_components_panel_properties.md.BaxoCYKq.js b/assets/guide_components_panel_properties.md.BaxoCYKq.js
new file mode 100644
index 0000000..857539b
--- /dev/null
+++ b/assets/guide_components_panel_properties.md.BaxoCYKq.js
@@ -0,0 +1 @@
+import{_ as e,q as t,p as r,aq as a}from"./chunks/framework.DvIFzl91.js";const u=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/components/panel/properties.md","filePath":"guide/components/panel/properties.md"}'),n={name:"guide/components/panel/properties.md"},o=a('<h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-label="Permalink to &quot;Properties&quot;">​</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead></table>',3),s=[o];function i(p,l,c,_,h,d){return r(),t("div",null,s)}const f=e(n,[["render",i]]);export{u as __pageData,f as default};
diff --git a/assets/guide_components_panel_properties.md.BaxoCYKq.lean.js b/assets/guide_components_panel_properties.md.BaxoCYKq.lean.js
new file mode 100644
index 0000000..aab7573
--- /dev/null
+++ b/assets/guide_components_panel_properties.md.BaxoCYKq.lean.js
@@ -0,0 +1 @@
+import{_ as e,q as t,p as r,aq as a}from"./chunks/framework.DvIFzl91.js";const u=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/components/panel/properties.md","filePath":"guide/components/panel/properties.md"}'),n={name:"guide/components/panel/properties.md"},o=a("",3),s=[o];function i(p,l,c,_,h,d){return r(),t("div",null,s)}const f=e(n,[["render",i]]);export{u as __pageData,f as default};
diff --git a/assets/guide_components_persona_emits.md.CnsDPKRU.js b/assets/guide_components_persona_emits.md.CnsDPKRU.js
new file mode 100644
index 0000000..6e00e51
--- /dev/null
+++ b/assets/guide_components_persona_emits.md.CnsDPKRU.js
@@ -0,0 +1 @@
+import{_ as t,q as e,p as a,aq as s}from"./chunks/framework.DvIFzl91.js";const u=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/components/persona/emits.md","filePath":"guide/components/persona/emits.md"}'),n={name:"guide/components/persona/emits.md"},o=s('<h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-label="Permalink to &quot;Emits&quot;">​</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead></table>',3),r=[o];function i(_,c,m,d,l,h){return a(),e("div",null,r)}const f=t(n,[["render",i]]);export{u as __pageData,f as default};
diff --git a/assets/guide_components_persona_emits.md.CnsDPKRU.lean.js b/assets/guide_components_persona_emits.md.CnsDPKRU.lean.js
new file mode 100644
index 0000000..77d0095
--- /dev/null
+++ b/assets/guide_components_persona_emits.md.CnsDPKRU.lean.js
@@ -0,0 +1 @@
+import{_ as t,q as e,p as a,aq as s}from"./chunks/framework.DvIFzl91.js";const u=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/components/persona/emits.md","filePath":"guide/components/persona/emits.md"}'),n={name:"guide/components/persona/emits.md"},o=s("",3),r=[o];function i(_,c,m,d,l,h){return a(),e("div",null,r)}const f=t(n,[["render",i]]);export{u as __pageData,f as default};
diff --git a/assets/guide_components_persona_index.md.DT00jby4.js b/assets/guide_components_persona_index.md.DT00jby4.js
new file mode 100644
index 0000000..71a8394
--- /dev/null
+++ b/assets/guide_components_persona_index.md.DT00jby4.js
@@ -0,0 +1,66 @@
+import{_ as E,q as d,Y as t,z as i,H as s,u as g,aq as e,S as h,p as o}from"./chunks/framework.DvIFzl91.js";const y={data(){return{src:"https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/persona-female.png",theme:!1}}},is=JSON.parse('{"title":"Persona","description":"","frontmatter":{"page":true,"title":"Persona"},"headers":[],"relativePath":"guide/components/persona/index.md","filePath":"guide/components/persona/index.md"}'),c=s("h3",{id:"persona-demo",tabindex:"-1"},[g("Persona-DEMO "),s("a",{class:"header-anchor",href:"#persona-demo","aria-label":'Permalink to "Persona-DEMO"'},"​")],-1),u=s("hr",null,null,-1),F=s("p",null,"Annie Lindqvist",-1),m=e(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Persona</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">src</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">src</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">theme </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;dark&#39;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> :</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;light&#39;&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> size</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;24&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">showInfo</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;template v-slot:name&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;p&gt;Annie Lindqvist&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Persona</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div>`,1),b=s("p",null,"Annie Lindqvist",-1),_=e(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Persona</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">src</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">src</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">theme </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;dark&#39;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> :</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;light&#39;&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> size</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;32&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">showInfo</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;template v-slot:name&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;p&gt;Annie Lindqvist&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Persona</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div>`,1),C=s("p",null,"Annie Lindqvist",-1),v=s("p",null,"Software Engineer",-1),B=e(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Persona</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">src</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">src</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">theme </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;dark&#39;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> :</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;light&#39;&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> status</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;away&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">showInfo</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;template v-slot:name&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;p&gt;Annie Lindqvist&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;template v-slot:secondary&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;p&gt;Software Engineer&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Persona</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div>`,1),q=s("p",null,"Annie Lindqvist",-1),A=s("p",null,"Software Engineer",-1),f=e(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Persona</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">src</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">src</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">theme </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;dark&#39;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> :</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;light&#39;&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> size</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;48&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> status</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;busy&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">showInfo</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;template v-slot:name&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;p&gt;Annie Lindqvist&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;template v-slot:secondary&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;p&gt;Software Engineer&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Persona</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div>`,1),x=s("p",null,"Annie Lindqvist",-1),D=s("p",null,"Software Engineer",-1),T=e(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Persona</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">src</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">src</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">theme </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;dark&#39;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> :</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;light&#39;&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> size</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;56&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> status</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;offline&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">showInfo</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;template v-slot:name&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;p&gt;Annie Lindqvist&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;template v-slot:secondary&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;p&gt;Software Engineer&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Persona</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div>`,1),P=s("p",null,"Annie Lindqvist",-1),S=s("p",null,"Software Engineer",-1),w=s("p",null,"In a meeting",-1),I=e(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Persona</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">src</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">src</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">theme </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;dark&#39;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> :</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;light&#39;&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> size</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;72&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> status</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ok&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">showInfo</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;template v-slot:name&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;p&gt;Annie Lindqvist&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;template v-slot:secondary&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;p&gt;Software Engineer&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;p&gt;In a meeting&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Persona</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div>`,1),N=s("p",null,"Annie Lindqvist",-1),V=s("p",null,"Software Engineer",-1),L=s("p",null,"In a meeting",-1),z=s("p",null,"Available at 4:00pm",-1),R=e(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Persona</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">src</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">src</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">theme </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;dark&#39;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> :</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;light&#39;&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> size</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;100&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> status</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;dnd&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">showInfo</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;template v-slot:name&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;p&gt;Annie Lindqvist&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;template v-slot:secondary&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;p&gt;Software Engineer&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;p&gt;In a meeting&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;p&gt;Available at 4:00pm&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Persona</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div>`,1),O=s("p",null,"Annie Lindqvist",-1),M=s("p",null,"Software Engineer",-1),H=s("p",null,"In a meeting",-1),J=s("p",null,"Available at 4:00pm",-1),U=e(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Persona</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">src</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">src</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">theme </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;dark&#39;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> :</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;light&#39;&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> size</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;120&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> status</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;blocked&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">showInfo</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;template v-slot:name&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;p&gt;Annie Lindqvist&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;template v-slot:secondary&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;p&gt;Software Engineer&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;p&gt;In a meeting&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;p&gt;Available at 4:00pm&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Persona</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div>`,1),Y=s("p",null,"Software Engineer",-1),j=s("p",null,"In a meeting",-1),G=s("p",null,"Available at 4:00pm",-1),K=e(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Persona</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">theme </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;dark&#39;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> :</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;light&#39;&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> size</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;120&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Annie Lindqvist&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">showInfo</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;template v-slot:secondary&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;p&gt;Software Engineer&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;p&gt;In a meeting&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;p&gt;Available at 4:00pm&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Persona</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">src</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">Persona图像资源链接</td></tr><tr><td style="text-align:center;">name</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">名称</td></tr><tr><td style="text-align:center;">size</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">40</td><td style="text-align:center;">Persona头像大小</td></tr><tr><td style="text-align:center;">status</td><td style="text-align:center;">[online,offline,away,busy,dnd,blocked]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">Persona状态</td></tr><tr><td style="text-align:center;">icon</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">自定义状态图标</td></tr><tr><td style="text-align:center;">iconColor</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">自定义状态图标前景色</td></tr><tr><td style="text-align:center;">background</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">自定义状态图标背景色</td></tr><tr><td style="text-align:center;">showInfo</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否显示信息</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">system</td><td style="text-align:center;">主题样式, 包含<code>light</code>, <code>dark</code>, <code>system</code>, <code>custom</code>几种样式</td></tr></tbody></table><h3 id="slot" tabindex="-1">Slot <a class="header-anchor" href="#slot" aria-label="Permalink to &quot;Slot&quot;">​</a></h3><hr><ol><li>Name</li></ol><p>你可以直接在属性中指定<code>name</code>, 当使用模板时Persona将检测不到名称缩写</p><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ol start="2"><li>Secondary</li></ol><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">secondary</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div>`,11);function Q(W,p,X,Z,a,$){const k=h("fv-toggle-switch"),n=h("fv-Persona"),l=h("ClientOnly");return o(),d("div",null,[c,u,t(l,null,{default:i(()=>[t(k,{modelValue:a.theme,"onUpdate:modelValue":p[0]||(p[0]=r=>a.theme=r),on:"Dark",off:"Light"},null,8,["modelValue"]),t(n,{src:a.src,theme:a.theme?"dark":"light",size:"24",status:"online",showInfo:!0},{name:i(()=>[F]),_:1},8,["src","theme"])]),_:1}),m,t(l,null,{default:i(()=>[t(n,{src:a.src,theme:a.theme?"dark":"light",size:"32",status:"online",showInfo:!0},{name:i(()=>[b]),_:1},8,["src","theme"])]),_:1}),_,t(l,null,{default:i(()=>[t(n,{src:a.src,theme:a.theme?"dark":"light",status:"away",showInfo:!0},{name:i(()=>[C]),secondary:i(()=>[v]),_:1},8,["src","theme"])]),_:1}),B,t(l,null,{default:i(()=>[t(n,{src:a.src,theme:a.theme?"dark":"light",size:"48",status:"busy",showInfo:!0},{name:i(()=>[q]),secondary:i(()=>[A]),_:1},8,["src","theme"])]),_:1}),f,t(l,null,{default:i(()=>[t(n,{src:a.src,theme:a.theme?"dark":"light",size:"56",status:"offline",showInfo:!0},{name:i(()=>[x]),secondary:i(()=>[D]),_:1},8,["src","theme"])]),_:1}),T,t(l,null,{default:i(()=>[t(n,{src:a.src,theme:a.theme?"dark":"light",size:"72",status:"ok",showInfo:!0},{name:i(()=>[P]),secondary:i(()=>[S,w]),_:1},8,["src","theme"])]),_:1}),I,t(l,null,{default:i(()=>[t(n,{src:a.src,theme:a.theme?"dark":"light",size:"100",status:"dnd",showInfo:!0},{name:i(()=>[N]),secondary:i(()=>[V,L,z]),_:1},8,["src","theme"])]),_:1}),R,t(l,null,{default:i(()=>[t(n,{src:a.src,theme:a.theme?"dark":"light",size:"120",status:"blocked",showInfo:!0},{name:i(()=>[O]),secondary:i(()=>[M,H,J]),_:1},8,["src","theme"])]),_:1}),U,t(l,null,{default:i(()=>[t(n,{theme:a.theme?"dark":"light",size:"120",name:"Annie Lindqvist",showInfo:!0},{secondary:i(()=>[Y,j,G]),_:1},8,["theme"])]),_:1}),K])}const as=E(y,[["render",Q]]);export{is as __pageData,as as default};
diff --git a/assets/guide_components_persona_index.md.DT00jby4.lean.js b/assets/guide_components_persona_index.md.DT00jby4.lean.js
new file mode 100644
index 0000000..9b08fb9
--- /dev/null
+++ b/assets/guide_components_persona_index.md.DT00jby4.lean.js
@@ -0,0 +1 @@
+import{_ as E,q as d,Y as t,z as i,H as s,u as g,aq as e,S as h,p as o}from"./chunks/framework.DvIFzl91.js";const y={data(){return{src:"https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/persona-female.png",theme:!1}}},is=JSON.parse('{"title":"Persona","description":"","frontmatter":{"page":true,"title":"Persona"},"headers":[],"relativePath":"guide/components/persona/index.md","filePath":"guide/components/persona/index.md"}'),c=s("h3",{id:"persona-demo",tabindex:"-1"},[g("Persona-DEMO "),s("a",{class:"header-anchor",href:"#persona-demo","aria-label":'Permalink to "Persona-DEMO"'},"​")],-1),u=s("hr",null,null,-1),F=s("p",null,"Annie Lindqvist",-1),m=e("",1),b=s("p",null,"Annie Lindqvist",-1),_=e("",1),C=s("p",null,"Annie Lindqvist",-1),v=s("p",null,"Software Engineer",-1),B=e("",1),q=s("p",null,"Annie Lindqvist",-1),A=s("p",null,"Software Engineer",-1),f=e("",1),x=s("p",null,"Annie Lindqvist",-1),D=s("p",null,"Software Engineer",-1),T=e("",1),P=s("p",null,"Annie Lindqvist",-1),S=s("p",null,"Software Engineer",-1),w=s("p",null,"In a meeting",-1),I=e("",1),N=s("p",null,"Annie Lindqvist",-1),V=s("p",null,"Software Engineer",-1),L=s("p",null,"In a meeting",-1),z=s("p",null,"Available at 4:00pm",-1),R=e("",1),O=s("p",null,"Annie Lindqvist",-1),M=s("p",null,"Software Engineer",-1),H=s("p",null,"In a meeting",-1),J=s("p",null,"Available at 4:00pm",-1),U=e("",1),Y=s("p",null,"Software Engineer",-1),j=s("p",null,"In a meeting",-1),G=s("p",null,"Available at 4:00pm",-1),K=e("",11);function Q(W,p,X,Z,a,$){const k=h("fv-toggle-switch"),n=h("fv-Persona"),l=h("ClientOnly");return o(),d("div",null,[c,u,t(l,null,{default:i(()=>[t(k,{modelValue:a.theme,"onUpdate:modelValue":p[0]||(p[0]=r=>a.theme=r),on:"Dark",off:"Light"},null,8,["modelValue"]),t(n,{src:a.src,theme:a.theme?"dark":"light",size:"24",status:"online",showInfo:!0},{name:i(()=>[F]),_:1},8,["src","theme"])]),_:1}),m,t(l,null,{default:i(()=>[t(n,{src:a.src,theme:a.theme?"dark":"light",size:"32",status:"online",showInfo:!0},{name:i(()=>[b]),_:1},8,["src","theme"])]),_:1}),_,t(l,null,{default:i(()=>[t(n,{src:a.src,theme:a.theme?"dark":"light",status:"away",showInfo:!0},{name:i(()=>[C]),secondary:i(()=>[v]),_:1},8,["src","theme"])]),_:1}),B,t(l,null,{default:i(()=>[t(n,{src:a.src,theme:a.theme?"dark":"light",size:"48",status:"busy",showInfo:!0},{name:i(()=>[q]),secondary:i(()=>[A]),_:1},8,["src","theme"])]),_:1}),f,t(l,null,{default:i(()=>[t(n,{src:a.src,theme:a.theme?"dark":"light",size:"56",status:"offline",showInfo:!0},{name:i(()=>[x]),secondary:i(()=>[D]),_:1},8,["src","theme"])]),_:1}),T,t(l,null,{default:i(()=>[t(n,{src:a.src,theme:a.theme?"dark":"light",size:"72",status:"ok",showInfo:!0},{name:i(()=>[P]),secondary:i(()=>[S,w]),_:1},8,["src","theme"])]),_:1}),I,t(l,null,{default:i(()=>[t(n,{src:a.src,theme:a.theme?"dark":"light",size:"100",status:"dnd",showInfo:!0},{name:i(()=>[N]),secondary:i(()=>[V,L,z]),_:1},8,["src","theme"])]),_:1}),R,t(l,null,{default:i(()=>[t(n,{src:a.src,theme:a.theme?"dark":"light",size:"120",status:"blocked",showInfo:!0},{name:i(()=>[O]),secondary:i(()=>[M,H,J]),_:1},8,["src","theme"])]),_:1}),U,t(l,null,{default:i(()=>[t(n,{theme:a.theme?"dark":"light",size:"120",name:"Annie Lindqvist",showInfo:!0},{secondary:i(()=>[Y,j,G]),_:1},8,["theme"])]),_:1}),K])}const as=E(y,[["render",Q]]);export{is as __pageData,as as default};
diff --git a/assets/guide_components_persona_properties.md.DUTPhPMp.js b/assets/guide_components_persona_properties.md.DUTPhPMp.js
new file mode 100644
index 0000000..77cc877
--- /dev/null
+++ b/assets/guide_components_persona_properties.md.DUTPhPMp.js
@@ -0,0 +1 @@
+import{_ as e,q as t,p as r,aq as a}from"./chunks/framework.DvIFzl91.js";const u=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/components/persona/properties.md","filePath":"guide/components/persona/properties.md"}'),o={name:"guide/components/persona/properties.md"},s=a('<h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-label="Permalink to &quot;Properties&quot;">​</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead></table>',3),n=[s];function i(p,c,_,l,h,d){return r(),t("div",null,n)}const f=e(o,[["render",i]]);export{u as __pageData,f as default};
diff --git a/assets/guide_components_persona_properties.md.DUTPhPMp.lean.js b/assets/guide_components_persona_properties.md.DUTPhPMp.lean.js
new file mode 100644
index 0000000..47b5fc2
--- /dev/null
+++ b/assets/guide_components_persona_properties.md.DUTPhPMp.lean.js
@@ -0,0 +1 @@
+import{_ as e,q as t,p as r,aq as a}from"./chunks/framework.DvIFzl91.js";const u=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/components/persona/properties.md","filePath":"guide/components/persona/properties.md"}'),o={name:"guide/components/persona/properties.md"},s=a("",3),n=[s];function i(p,c,_,l,h,d){return r(),t("div",null,n)}const f=e(o,[["render",i]]);export{u as __pageData,f as default};
diff --git a/assets/guide_components_pivot_emits.md.BTJPgNpy.js b/assets/guide_components_pivot_emits.md.BTJPgNpy.js
new file mode 100644
index 0000000..0850c75
--- /dev/null
+++ b/assets/guide_components_pivot_emits.md.BTJPgNpy.js
@@ -0,0 +1 @@
+import{_ as t,q as e,p as a,aq as s}from"./chunks/framework.DvIFzl91.js";const u=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/components/pivot/emits.md","filePath":"guide/components/pivot/emits.md"}'),i={name:"guide/components/pivot/emits.md"},n=s('<h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-label="Permalink to &quot;Emits&quot;">​</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead></table>',3),o=[n];function r(_,c,m,d,l,h){return a(),e("div",null,o)}const f=t(i,[["render",r]]);export{u as __pageData,f as default};
diff --git a/assets/guide_components_pivot_emits.md.BTJPgNpy.lean.js b/assets/guide_components_pivot_emits.md.BTJPgNpy.lean.js
new file mode 100644
index 0000000..e468d3d
--- /dev/null
+++ b/assets/guide_components_pivot_emits.md.BTJPgNpy.lean.js
@@ -0,0 +1 @@
+import{_ as t,q as e,p as a,aq as s}from"./chunks/framework.DvIFzl91.js";const u=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/components/pivot/emits.md","filePath":"guide/components/pivot/emits.md"}'),i={name:"guide/components/pivot/emits.md"},n=s("",3),o=[n];function r(_,c,m,d,l,h){return a(),e("div",null,o)}const f=t(i,[["render",r]]);export{u as __pageData,f as default};
diff --git a/assets/guide_components_pivot_index.md.B_vwQL-5.js b/assets/guide_components_pivot_index.md.B_vwQL-5.js
new file mode 100644
index 0000000..9305855
--- /dev/null
+++ b/assets/guide_components_pivot_index.md.B_vwQL-5.js
@@ -0,0 +1,12 @@
+import{_ as r,q as k,Y as l,z as p,H as i,u as a,aq as o,S as h,p as E}from"./chunks/framework.DvIFzl91.js";const g={data(){return{value:null,items:[{key:0,name:"All"},{key:1,name:"Unread",width:80},{key:2,name:"Flagged",width:80,disabled:!0},{key:3,name:"Urgent",width:80}]}}},O=JSON.parse('{"title":"Pivot","description":"","frontmatter":{"page":true,"title":"Pivot"},"headers":[],"relativePath":"guide/components/pivot/index.md","filePath":"guide/components/pivot/index.md"}'),c=i("h3",{id:"pivot-demo",tabindex:"-1"},[a("Pivot-DEMO "),i("a",{class:"header-anchor",href:"#pivot-demo","aria-label":'Permalink to "Pivot-DEMO"'},"​")],-1),y=i("hr",null,null,-1),u=i("div",{class:"language-vue vp-adaptive-theme line-numbers-mode"},[i("button",{title:"Copy Code",class:"copy"}),i("span",{class:"lang"},"vue"),i("pre",{class:"shiki shiki-themes github-light github-dark vp-code"},[i("code",null,[i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"<"),i("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-Pivot"),i("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}}," :"),i("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}},"items"),i("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),i("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),i("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"items"),i("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),i("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"></"),i("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-Pivot"),i("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")])])]),i("div",{class:"line-numbers-wrapper","aria-hidden":"true"},[i("span",{class:"line-number"},"1"),i("br")])],-1),m=i("h3",{id:"pivot-tab-style",tabindex:"-1"},[a("Pivot-Tab Style "),i("a",{class:"header-anchor",href:"#pivot-tab-style","aria-label":'Permalink to "Pivot-Tab Style"'},"​")],-1),v=i("hr",null,null,-1),b=i("div",{class:"language-vue vp-adaptive-theme line-numbers-mode"},[i("button",{title:"Copy Code",class:"copy"}),i("span",{class:"lang"},"vue"),i("pre",{class:"shiki shiki-themes github-light github-dark vp-code"},[i("code",null,[i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"<"),i("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-Pivot"),i("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}}," :"),i("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}},"items"),i("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),i("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),i("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"items"),i("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),i("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}}," :"),i("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}},"tab"),i("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),i("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),i("span",{style:{"--shiki-light":"#005CC5","--shiki-dark":"#79B8FF"}},"true"),i("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),i("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"></"),i("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-Pivot"),i("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")])])]),i("div",{class:"line-numbers-wrapper","aria-hidden":"true"},[i("span",{class:"line-number"},"1"),i("br")])],-1),F=i("h3",{id:"pivot-tab-customize",tabindex:"-1"},[a("Pivot-Tab Customize "),i("a",{class:"header-anchor",href:"#pivot-tab-customize","aria-label":'Permalink to "Pivot-Tab Customize"'},"​")],-1),C=i("hr",null,null,-1),x=i("div",{class:"language-vue vp-adaptive-theme line-numbers-mode"},[i("button",{title:"Copy Code",class:"copy"}),i("span",{class:"lang"},"vue"),i("pre",{class:"shiki shiki-themes github-light github-dark vp-code"},[i("code",null,[i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"<"),i("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-Pivot"),i("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}}," v-model"),i("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),i("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),i("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"value"),i("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),i("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}}," :"),i("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}},"items"),i("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),i("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),i("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"items"),i("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),i("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}}," :"),i("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}},"tab"),i("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),i("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),i("span",{style:{"--shiki-light":"#005CC5","--shiki-dark":"#79B8FF"}},"true"),i("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),i("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}}," :"),i("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}},"sliderBoxshadow"),i("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),i("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),i("span",{style:{"--shiki-light":"#005CC5","--shiki-dark":"#79B8FF"}},"true"),i("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),i("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}}," :"),i("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}},"background"),i("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),i("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},`"'rgba(238, 238, 239, 1)'"`),i("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"></"),i("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-Pivot"),i("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")])])]),i("div",{class:"line-numbers-wrapper","aria-hidden":"true"},[i("span",{class:"line-number"},"1"),i("br")])],-1),B=i("h3",{id:"pivot-dark-theme",tabindex:"-1"},[a("Pivot-Dark Theme "),i("a",{class:"header-anchor",href:"#pivot-dark-theme","aria-label":'Permalink to "Pivot-Dark Theme"'},"​")],-1),_=i("hr",null,null,-1),P={style:{width:"100%",background:"black"}},f=i("div",{class:"language-vue vp-adaptive-theme line-numbers-mode"},[i("button",{title:"Copy Code",class:"copy"}),i("span",{class:"lang"},"vue"),i("pre",{class:"shiki shiki-themes github-light github-dark vp-code"},[i("code",null,[i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"<"),i("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"div"),i("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}}," style"),i("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),i("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),i("span",{style:{"--shiki-light":"#005CC5","--shiki-dark":"#79B8FF"}},"width"),i("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},": "),i("span",{style:{"--shiki-light":"#005CC5","--shiki-dark":"#79B8FF"}},"100"),i("span",{style:{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"}},"%"),i("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"; "),i("span",{style:{"--shiki-light":"#005CC5","--shiki-dark":"#79B8FF"}},"background"),i("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},": "),i("span",{style:{"--shiki-light":"#005CC5","--shiki-dark":"#79B8FF"}},"black"),i("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},";"),i("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),i("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")]),a(`
+`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},'    <fv-Pivot :items="items" theme="dark"></fv-Pivot>')]),a(`
+`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},'    <fv-Pivot :items="items" :tab="true" theme="dark"></fv-Pivot>')]),a(`
+`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"</"),i("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"div"),i("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")])])]),i("div",{class:"line-numbers-wrapper","aria-hidden":"true"},[i("span",{class:"line-number"},"1"),i("br"),i("span",{class:"line-number"},"2"),i("br"),i("span",{class:"line-number"},"3"),i("br"),i("span",{class:"line-number"},"4"),i("br")])],-1),A=i("h3",{id:"pivot-custom-style",tabindex:"-1"},[a("Pivot-Custom Style "),i("a",{class:"header-anchor",href:"#pivot-custom-style","aria-label":'Permalink to "Pivot-Custom Style"'},"​")],-1),V=i("hr",null,null,-1),D={style:{width:"100%",background:"black"}},w=i("div",{class:"language-vue vp-adaptive-theme line-numbers-mode"},[i("button",{title:"Copy Code",class:"copy"}),i("span",{class:"lang"},"vue"),i("pre",{class:"shiki shiki-themes github-light github-dark vp-code"},[i("code",null,[i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"<"),i("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"div"),i("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}}," style"),i("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),i("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),i("span",{style:{"--shiki-light":"#005CC5","--shiki-dark":"#79B8FF"}},"width"),i("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},": "),i("span",{style:{"--shiki-light":"#005CC5","--shiki-dark":"#79B8FF"}},"100"),i("span",{style:{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"}},"%"),i("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"; "),i("span",{style:{"--shiki-light":"#005CC5","--shiki-dark":"#79B8FF"}},"background"),i("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},": "),i("span",{style:{"--shiki-light":"#005CC5","--shiki-dark":"#79B8FF"}},"black"),i("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},";"),i("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),i("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")]),a(`
+`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},'    <fv-Pivot :items="items" theme="dark" foreground="rgba(0, 204, 153, 1)" sliderBackground="rgba(0, 204, 153, 1)"></fv-Pivot>')]),a(`
+`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},'    <fv-Pivot :items="items" :tab="true" theme="dark" sliderBackground="rgba(0, 204, 153, 1)"></fv-Pivot>')]),a(`
+`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"</"),i("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"div"),i("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")])])]),i("div",{class:"line-numbers-wrapper","aria-hidden":"true"},[i("span",{class:"line-number"},"1"),i("br"),i("span",{class:"line-number"},"2"),i("br"),i("span",{class:"line-number"},"3"),i("br"),i("span",{class:"line-number"},"4"),i("br")])],-1),N=o(`<h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">value</td><td style="text-align:center;">Object</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">当前选中项值</td></tr><tr><td style="text-align:center;">items</td><td style="text-align:center;">Array</td><td style="text-align:center;">No</td><td style="text-align:center;">[{ name: &quot;Pivot&quot;, width: 80 }]</td><td style="text-align:center;">选项卡数据</td></tr><tr><td style="text-align:center;">tab</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否开启tab样式</td></tr><tr><td style="text-align:center;">fontSize</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">默认字体大小</td></tr><tr><td style="text-align:center;">foreground</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">前景色</td></tr><tr><td style="text-align:center;">sliderBackground</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">滑块背景色</td></tr><tr><td style="text-align:center;">sliderBoxshadow</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否开启滑块阴影</td></tr><tr><td style="text-align:center;">background</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">背景色</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">system</td><td style="text-align:center;">主题样式, 包含<code>light</code>, <code>dark</code>, <code>system</code>, <code>custom</code>几种样式</td></tr></tbody></table><h3 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to &quot;Events&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">事件名(Name)</th><th style="text-align:center;">参数类型(args)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">input</td><td style="text-align:center;">value</td><td style="text-align:center;">当选中项发生改变时, 返回value</td></tr><tr><td style="text-align:center;">change</td><td style="text-align:center;">object</td><td style="text-align:center;">当选中项发生改变时, 返回value</td></tr></tbody></table><h3 id="slot" tabindex="-1">Slot <a class="header-anchor" href="#slot" aria-label="Permalink to &quot;Slot&quot;">​</a></h3><hr><ol><li>Container</li></ol><p>自定义项目内的内容, 包含以下属性:</p><ul><li>item: 当前项目数据</li><li>index: 当前项目索引</li></ul><div class="language-javascript vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">container</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;x&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="data" tabindex="-1">Data <a class="header-anchor" href="#data" aria-label="Permalink to &quot;Data&quot;">​</a></h3><hr><ol><li>items</li></ol><p>Pivot只针对对象的<code>key</code>和<code>name</code>进行匹配, 当<code>value</code>传入的这两个属性能够在<code>options</code>中匹配时, 选中项即为被匹配项.</p><div class="language-javascript vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">items </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [{ key: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Pivot&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, width: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">80</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, show: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, disabled: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }]</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">//e.g.//</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">items</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: [{ key: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Pivot&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, width: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">80</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }]</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p><strong>特别地</strong> 1.0.3版本后支持采用函数式字段, 其中支持的字段包括<code>name</code>, <code>disabled</code>, <code>show</code>, <code>width</code> 1.1.0版本后<code>width</code>支持数值和CSS字符串赋值</p>`,18);function q(S,s,T,U,t,j){const n=h("fv-Pivot"),d=h("ClientOnly");return E(),k("div",null,[c,y,l(d,null,{default:p(()=>[l(n,{modelValue:t.value,"onUpdate:modelValue":s[0]||(s[0]=e=>t.value=e),items:t.items},null,8,["modelValue","items"]),u,m,v,l(n,{modelValue:t.value,"onUpdate:modelValue":s[1]||(s[1]=e=>t.value=e),items:t.items,tab:!0},null,8,["modelValue","items"]),b,F,C,l(n,{modelValue:t.value,"onUpdate:modelValue":s[2]||(s[2]=e=>t.value=e),items:t.items,tab:!0,sliderBoxshadow:!0,background:"rgba(238, 238, 239, 1)"},null,8,["modelValue","items","background"]),x,B,_,i("div",P,[l(n,{modelValue:t.value,"onUpdate:modelValue":s[3]||(s[3]=e=>t.value=e),items:t.items,theme:"dark"},null,8,["modelValue","items"]),l(n,{modelValue:t.value,"onUpdate:modelValue":s[4]||(s[4]=e=>t.value=e),items:t.items,tab:!0,theme:"dark"},null,8,["modelValue","items"])]),f,A,V,i("div",D,[l(n,{modelValue:t.value,"onUpdate:modelValue":s[5]||(s[5]=e=>t.value=e),items:t.items,theme:"dark",foreground:"rgba(0, 204, 153, 1)",sliderBackground:"rgba(0, 204, 153, 1)"},null,8,["modelValue","items"]),l(n,{modelValue:t.value,"onUpdate:modelValue":s[6]||(s[6]=e=>t.value=e),items:t.items,tab:!0,theme:"dark",sliderBackground:"rgba(0, 204, 153, 1)"},null,8,["modelValue","items"])]),w]),_:1}),N])}const I=r(g,[["render",q]]);export{O as __pageData,I as default};
diff --git a/assets/guide_components_pivot_index.md.B_vwQL-5.lean.js b/assets/guide_components_pivot_index.md.B_vwQL-5.lean.js
new file mode 100644
index 0000000..2629b93
--- /dev/null
+++ b/assets/guide_components_pivot_index.md.B_vwQL-5.lean.js
@@ -0,0 +1,7 @@
+import{_ as r,q as k,Y as l,z as p,H as i,u as a,aq as o,S as h,p as E}from"./chunks/framework.DvIFzl91.js";const g={data(){return{value:null,items:[{key:0,name:"All"},{key:1,name:"Unread",width:80},{key:2,name:"Flagged",width:80,disabled:!0},{key:3,name:"Urgent",width:80}]}}},O=JSON.parse('{"title":"Pivot","description":"","frontmatter":{"page":true,"title":"Pivot"},"headers":[],"relativePath":"guide/components/pivot/index.md","filePath":"guide/components/pivot/index.md"}'),c=i("h3",{id:"pivot-demo",tabindex:"-1"},[a("Pivot-DEMO "),i("a",{class:"header-anchor",href:"#pivot-demo","aria-label":'Permalink to "Pivot-DEMO"'},"​")],-1),y=i("hr",null,null,-1),u=i("div",{class:"language-vue vp-adaptive-theme line-numbers-mode"},[i("button",{title:"Copy Code",class:"copy"}),i("span",{class:"lang"},"vue"),i("pre",{class:"shiki shiki-themes github-light github-dark vp-code"},[i("code",null,[i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"<"),i("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-Pivot"),i("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}}," :"),i("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}},"items"),i("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),i("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),i("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"items"),i("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),i("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"></"),i("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-Pivot"),i("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")])])]),i("div",{class:"line-numbers-wrapper","aria-hidden":"true"},[i("span",{class:"line-number"},"1"),i("br")])],-1),m=i("h3",{id:"pivot-tab-style",tabindex:"-1"},[a("Pivot-Tab Style "),i("a",{class:"header-anchor",href:"#pivot-tab-style","aria-label":'Permalink to "Pivot-Tab Style"'},"​")],-1),v=i("hr",null,null,-1),b=i("div",{class:"language-vue vp-adaptive-theme line-numbers-mode"},[i("button",{title:"Copy Code",class:"copy"}),i("span",{class:"lang"},"vue"),i("pre",{class:"shiki shiki-themes github-light github-dark vp-code"},[i("code",null,[i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"<"),i("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-Pivot"),i("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}}," :"),i("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}},"items"),i("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),i("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),i("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"items"),i("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),i("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}}," :"),i("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}},"tab"),i("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),i("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),i("span",{style:{"--shiki-light":"#005CC5","--shiki-dark":"#79B8FF"}},"true"),i("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),i("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"></"),i("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-Pivot"),i("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")])])]),i("div",{class:"line-numbers-wrapper","aria-hidden":"true"},[i("span",{class:"line-number"},"1"),i("br")])],-1),F=i("h3",{id:"pivot-tab-customize",tabindex:"-1"},[a("Pivot-Tab Customize "),i("a",{class:"header-anchor",href:"#pivot-tab-customize","aria-label":'Permalink to "Pivot-Tab Customize"'},"​")],-1),C=i("hr",null,null,-1),x=i("div",{class:"language-vue vp-adaptive-theme line-numbers-mode"},[i("button",{title:"Copy Code",class:"copy"}),i("span",{class:"lang"},"vue"),i("pre",{class:"shiki shiki-themes github-light github-dark vp-code"},[i("code",null,[i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"<"),i("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-Pivot"),i("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}}," v-model"),i("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),i("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),i("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"value"),i("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),i("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}}," :"),i("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}},"items"),i("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),i("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),i("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"items"),i("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),i("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}}," :"),i("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}},"tab"),i("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),i("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),i("span",{style:{"--shiki-light":"#005CC5","--shiki-dark":"#79B8FF"}},"true"),i("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),i("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}}," :"),i("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}},"sliderBoxshadow"),i("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),i("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),i("span",{style:{"--shiki-light":"#005CC5","--shiki-dark":"#79B8FF"}},"true"),i("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),i("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}}," :"),i("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}},"background"),i("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),i("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},`"'rgba(238, 238, 239, 1)'"`),i("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"></"),i("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-Pivot"),i("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")])])]),i("div",{class:"line-numbers-wrapper","aria-hidden":"true"},[i("span",{class:"line-number"},"1"),i("br")])],-1),B=i("h3",{id:"pivot-dark-theme",tabindex:"-1"},[a("Pivot-Dark Theme "),i("a",{class:"header-anchor",href:"#pivot-dark-theme","aria-label":'Permalink to "Pivot-Dark Theme"'},"​")],-1),_=i("hr",null,null,-1),P={style:{width:"100%",background:"black"}},f=i("div",{class:"language-vue vp-adaptive-theme line-numbers-mode"},[i("button",{title:"Copy Code",class:"copy"}),i("span",{class:"lang"},"vue"),i("pre",{class:"shiki shiki-themes github-light github-dark vp-code"},[i("code",null,[i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"<"),i("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"div"),i("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}}," style"),i("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),i("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),i("span",{style:{"--shiki-light":"#005CC5","--shiki-dark":"#79B8FF"}},"width"),i("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},": "),i("span",{style:{"--shiki-light":"#005CC5","--shiki-dark":"#79B8FF"}},"100"),i("span",{style:{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"}},"%"),i("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"; "),i("span",{style:{"--shiki-light":"#005CC5","--shiki-dark":"#79B8FF"}},"background"),i("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},": "),i("span",{style:{"--shiki-light":"#005CC5","--shiki-dark":"#79B8FF"}},"black"),i("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},";"),i("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),i("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")]),a(`
+`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},'    <fv-Pivot :items="items" theme="dark"></fv-Pivot>')]),a(`
+`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},'    <fv-Pivot :items="items" :tab="true" theme="dark"></fv-Pivot>')]),a(`
+`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"</"),i("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"div"),i("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")])])]),i("div",{class:"line-numbers-wrapper","aria-hidden":"true"},[i("span",{class:"line-number"},"1"),i("br"),i("span",{class:"line-number"},"2"),i("br"),i("span",{class:"line-number"},"3"),i("br"),i("span",{class:"line-number"},"4"),i("br")])],-1),A=i("h3",{id:"pivot-custom-style",tabindex:"-1"},[a("Pivot-Custom Style "),i("a",{class:"header-anchor",href:"#pivot-custom-style","aria-label":'Permalink to "Pivot-Custom Style"'},"​")],-1),V=i("hr",null,null,-1),D={style:{width:"100%",background:"black"}},w=i("div",{class:"language-vue vp-adaptive-theme line-numbers-mode"},[i("button",{title:"Copy Code",class:"copy"}),i("span",{class:"lang"},"vue"),i("pre",{class:"shiki shiki-themes github-light github-dark vp-code"},[i("code",null,[i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"<"),i("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"div"),i("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}}," style"),i("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),i("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),i("span",{style:{"--shiki-light":"#005CC5","--shiki-dark":"#79B8FF"}},"width"),i("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},": "),i("span",{style:{"--shiki-light":"#005CC5","--shiki-dark":"#79B8FF"}},"100"),i("span",{style:{"--shiki-light":"#D73A49","--shiki-dark":"#F97583"}},"%"),i("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"; "),i("span",{style:{"--shiki-light":"#005CC5","--shiki-dark":"#79B8FF"}},"background"),i("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},": "),i("span",{style:{"--shiki-light":"#005CC5","--shiki-dark":"#79B8FF"}},"black"),i("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},";"),i("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),i("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")]),a(`
+`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},'    <fv-Pivot :items="items" theme="dark" foreground="rgba(0, 204, 153, 1)" sliderBackground="rgba(0, 204, 153, 1)"></fv-Pivot>')]),a(`
+`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},'    <fv-Pivot :items="items" :tab="true" theme="dark" sliderBackground="rgba(0, 204, 153, 1)"></fv-Pivot>')]),a(`
+`),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"</"),i("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"div"),i("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")])])]),i("div",{class:"line-numbers-wrapper","aria-hidden":"true"},[i("span",{class:"line-number"},"1"),i("br"),i("span",{class:"line-number"},"2"),i("br"),i("span",{class:"line-number"},"3"),i("br"),i("span",{class:"line-number"},"4"),i("br")])],-1),N=o("",18);function q(S,s,T,U,t,j){const n=h("fv-Pivot"),d=h("ClientOnly");return E(),k("div",null,[c,y,l(d,null,{default:p(()=>[l(n,{modelValue:t.value,"onUpdate:modelValue":s[0]||(s[0]=e=>t.value=e),items:t.items},null,8,["modelValue","items"]),u,m,v,l(n,{modelValue:t.value,"onUpdate:modelValue":s[1]||(s[1]=e=>t.value=e),items:t.items,tab:!0},null,8,["modelValue","items"]),b,F,C,l(n,{modelValue:t.value,"onUpdate:modelValue":s[2]||(s[2]=e=>t.value=e),items:t.items,tab:!0,sliderBoxshadow:!0,background:"rgba(238, 238, 239, 1)"},null,8,["modelValue","items","background"]),x,B,_,i("div",P,[l(n,{modelValue:t.value,"onUpdate:modelValue":s[3]||(s[3]=e=>t.value=e),items:t.items,theme:"dark"},null,8,["modelValue","items"]),l(n,{modelValue:t.value,"onUpdate:modelValue":s[4]||(s[4]=e=>t.value=e),items:t.items,tab:!0,theme:"dark"},null,8,["modelValue","items"])]),f,A,V,i("div",D,[l(n,{modelValue:t.value,"onUpdate:modelValue":s[5]||(s[5]=e=>t.value=e),items:t.items,theme:"dark",foreground:"rgba(0, 204, 153, 1)",sliderBackground:"rgba(0, 204, 153, 1)"},null,8,["modelValue","items"]),l(n,{modelValue:t.value,"onUpdate:modelValue":s[6]||(s[6]=e=>t.value=e),items:t.items,tab:!0,theme:"dark",sliderBackground:"rgba(0, 204, 153, 1)"},null,8,["modelValue","items"])]),w]),_:1}),N])}const I=r(g,[["render",q]]);export{O as __pageData,I as default};
diff --git a/assets/guide_components_pivot_properties.md.BmoLpPi1.js b/assets/guide_components_pivot_properties.md.BmoLpPi1.js
new file mode 100644
index 0000000..d59fe44
--- /dev/null
+++ b/assets/guide_components_pivot_properties.md.BmoLpPi1.js
@@ -0,0 +1 @@
+import{_ as t,q as e,p as r,aq as a}from"./chunks/framework.DvIFzl91.js";const u=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/components/pivot/properties.md","filePath":"guide/components/pivot/properties.md"}'),o={name:"guide/components/pivot/properties.md"},s=a('<h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-label="Permalink to &quot;Properties&quot;">​</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead></table>',3),n=[s];function i(p,c,_,l,h,d){return r(),e("div",null,n)}const f=t(o,[["render",i]]);export{u as __pageData,f as default};
diff --git a/assets/guide_components_pivot_properties.md.BmoLpPi1.lean.js b/assets/guide_components_pivot_properties.md.BmoLpPi1.lean.js
new file mode 100644
index 0000000..01242c9
--- /dev/null
+++ b/assets/guide_components_pivot_properties.md.BmoLpPi1.lean.js
@@ -0,0 +1 @@
+import{_ as t,q as e,p as r,aq as a}from"./chunks/framework.DvIFzl91.js";const u=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/components/pivot/properties.md","filePath":"guide/components/pivot/properties.md"}'),o={name:"guide/components/pivot/properties.md"},s=a("",3),n=[s];function i(p,c,_,l,h,d){return r(),e("div",null,n)}const f=t(o,[["render",i]]);export{u as __pageData,f as default};
diff --git a/assets/guide_components_progress-bar_emits.md.5b611e3b.js b/assets/guide_components_progress-bar_emits.md.5b611e3b.js
deleted file mode 100644
index f1666fd..0000000
--- a/assets/guide_components_progress-bar_emits.md.5b611e3b.js
+++ /dev/null
@@ -1 +0,0 @@
-import{_ as t,c as e,o as a,a as n}from"./app.d60fa8c3.js";const p=JSON.parse('{"title":"Emits","description":"","frontmatter":{},"headers":[{"level":2,"title":"Emits","slug":"emits"}],"relativePath":"guide/components/progress-bar/emits.md"}'),r={name:"guide/components/progress-bar/emits.md"},s=n('<h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">change</td><td style="text-align:center;">val[number]</td><td style="text-align:center;">onchange</td></tr><tr><td style="text-align:center;">loaded</td><td style="text-align:center;">val[number]</td><td style="text-align:center;">onloaded</td></tr><tr><td style="text-align:center;">update:model-value</td><td style="text-align:center;">val[number]</td><td style="text-align:center;">v-model</td></tr></tbody></table>',3),d=[s];function l(i,c,o,m,_,h){return a(),e("div",null,d)}var x=t(r,[["render",l]]);export{p as __pageData,x as default};
diff --git a/assets/guide_components_progress-bar_emits.md.5b611e3b.lean.js b/assets/guide_components_progress-bar_emits.md.5b611e3b.lean.js
deleted file mode 100644
index 127d981..0000000
--- a/assets/guide_components_progress-bar_emits.md.5b611e3b.lean.js
+++ /dev/null
@@ -1 +0,0 @@
-import{_ as t,c as e,o as a,a as n}from"./app.d60fa8c3.js";const p=JSON.parse('{"title":"Emits","description":"","frontmatter":{},"headers":[{"level":2,"title":"Emits","slug":"emits"}],"relativePath":"guide/components/progress-bar/emits.md"}'),r={name:"guide/components/progress-bar/emits.md"},s=n("",3),d=[s];function l(i,c,o,m,_,h){return a(),e("div",null,d)}var x=t(r,[["render",l]]);export{p as __pageData,x as default};
diff --git a/assets/guide_components_progress-bar_emits.md.BcwXUpsF.js b/assets/guide_components_progress-bar_emits.md.BcwXUpsF.js
new file mode 100644
index 0000000..76a6a73
--- /dev/null
+++ b/assets/guide_components_progress-bar_emits.md.BcwXUpsF.js
@@ -0,0 +1 @@
+import{_ as t,q as e,p as a,aq as n}from"./chunks/framework.DvIFzl91.js";const p=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/components/progress-bar/emits.md","filePath":"guide/components/progress-bar/emits.md"}'),r={name:"guide/components/progress-bar/emits.md"},s=n('<h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-label="Permalink to &quot;Emits&quot;">​</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">change</td><td style="text-align:center;">val[number]</td><td style="text-align:center;">onchange</td></tr><tr><td style="text-align:center;">loaded</td><td style="text-align:center;">val[number]</td><td style="text-align:center;">onloaded</td></tr><tr><td style="text-align:center;">update:model-value</td><td style="text-align:center;">val[number]</td><td style="text-align:center;">v-model</td></tr></tbody></table>',3),d=[s];function l(o,i,c,m,_,g){return a(),e("div",null,d)}const u=t(r,[["render",l]]);export{p as __pageData,u as default};
diff --git a/assets/guide_components_progress-bar_emits.md.BcwXUpsF.lean.js b/assets/guide_components_progress-bar_emits.md.BcwXUpsF.lean.js
new file mode 100644
index 0000000..04feb9a
--- /dev/null
+++ b/assets/guide_components_progress-bar_emits.md.BcwXUpsF.lean.js
@@ -0,0 +1 @@
+import{_ as t,q as e,p as a,aq as n}from"./chunks/framework.DvIFzl91.js";const p=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/components/progress-bar/emits.md","filePath":"guide/components/progress-bar/emits.md"}'),r={name:"guide/components/progress-bar/emits.md"},s=n("",3),d=[s];function l(o,i,c,m,_,g){return a(),e("div",null,d)}const u=t(r,[["render",l]]);export{p as __pageData,u as default};
diff --git a/assets/guide_components_progress-bar_index.md.689c3241.js b/assets/guide_components_progress-bar_index.md.689c3241.js
deleted file mode 100644
index 68a40f3..0000000
--- a/assets/guide_components_progress-bar_index.md.689c3241.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import{u as C}from"./chunks/index.9dba9c16.js";import{d as A,f as h,g as f,m as q,c as E,k as a,t as u,b as r,w as g,u as p,e as t,a as i,r as m,o as _}from"./app.d60fa8c3.js";const V=a("h1",{id:"progressbar",tabindex:"-1"},[t("ProgressBar "),a("a",{class:"header-anchor",href:"#progressbar","aria-hidden":"true"},"#")],-1),N=a("h2",{id:"quick-start",tabindex:"-1"},[t("Quick Start "),a("a",{class:"header-anchor",href:"#quick-start","aria-hidden":"true"},"#")],-1),k=a("hr",null,null,-1),P=t("Running"),S=t("Pause"),w=t("Error"),B=a("h3",{id:"default",tabindex:"-1"},[t("Default "),a("a",{class:"header-anchor",href:"#default","aria-hidden":"true"},"#")],-1),T=a("hr",null,null,-1),U=i(`<div class="language-vue-html"><span class="copy"></span><div class="highlight-lines"><br><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><br><br><br><br></div><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-progress-bar</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">v-model</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">change</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">onChange</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">loaded</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">onLoaded</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">max</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#F78C6C;">100</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">pause</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">state</span><span style="color:#89DDFF;">===</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">pause</span><span style="color:#89DDFF;">&#39;&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">error</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">state</span><span style="color:#89DDFF;">===</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">error</span><span style="color:#89DDFF;">&#39;&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    /&gt;</span><span style="color:#A6ACCD;"> </span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><h3 id="indeterminate" tabindex="-1">Indeterminate <a class="header-anchor" href="#indeterminate" aria-hidden="true">#</a></h3><hr>`,3),I=i(`<div class="language-vue-html"><span class="copy"></span><div class="highlight-lines"><br><div class="highlighted">\xA0</div><br><br><br><br><br></div><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-progress-bar</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">indeterminate</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">pause</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">state</span><span style="color:#89DDFF;">===</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">pause</span><span style="color:#89DDFF;">&#39;&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">error</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">state</span><span style="color:#89DDFF;">===</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">error</span><span style="color:#89DDFF;">&#39;&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">    /&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h3 id="custom" tabindex="-1">Custom <a class="header-anchor" href="#custom" aria-hidden="true">#</a></h3><hr><ol><li>indeterminate</li></ol>`,4),L=i(`<div class="language-vue-html"><span class="copy"></span><div class="highlight-lines"><br><br><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><br><br><br><br><br></div><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-progress-bar</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">indeterminate</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">pause-foreground</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">rgba(229, 0, 249, 1)</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">error-foreground</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">rgba(249, 201, 0, 1)</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">foreground</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">rgba(0, 204, 153, 1)</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">pause</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">state</span><span style="color:#89DDFF;">===</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">pause</span><span style="color:#89DDFF;">&#39;&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">error</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">state</span><span style="color:#89DDFF;">===</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">error</span><span style="color:#89DDFF;">&#39;&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">    /&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><ol start="2"><li>determinate</li></ol>`,2),M=i(`<div class="language-vue-html"><span class="copy"></span><div class="highlight-lines"><br><br><br><br><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><br><br><br><br></div><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-progress-bar</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">v-model</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">max</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#F78C6C;">100</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">pause-foreground</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">rgba(229, 0, 249, 1)</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">error-foreground</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">rgba(249, 201, 0, 1)</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">foreground</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">rgba(0, 204, 153, 1)</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">background</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">rgba(0,0,0,1)</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">pause</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">state</span><span style="color:#89DDFF;">===</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">pause</span><span style="color:#89DDFF;">&#39;&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">error</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">state</span><span style="color:#89DDFF;">===</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">error</span><span style="color:#89DDFF;">&#39;&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    /&gt;</span><span style="color:#A6ACCD;"> </span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">background</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">background color</td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">disabled</td></tr><tr><td style="text-align:center;">error</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">error state</td></tr><tr><td style="text-align:center;">error-foreground</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">error foreground color</td></tr><tr><td style="text-align:center;">foreground</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">foreground color</td></tr><tr><td style="text-align:center;">indeterminate</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">indeterminate status</td></tr><tr><td style="text-align:center;">lang</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">i18n</td></tr><tr><td style="text-align:center;">max</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">100</td><td style="text-align:center;">same as HTML progress element</td></tr><tr><td style="text-align:center;">model-value</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">0</td><td style="text-align:center;">v-model</td></tr><tr><td style="text-align:center;">pause</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">pause state</td></tr><tr><td style="text-align:center;">pause-foreground</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">pause foreground color</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">[&#39;light&#39;, &#39;dark&#39;, &#39;global&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&quot;global&quot;</td><td style="text-align:center;">theme</td></tr></tbody></table><h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">change</td><td style="text-align:center;">val[number]</td><td style="text-align:center;">onchange</td></tr><tr><td style="text-align:center;">loaded</td><td style="text-align:center;">val[number]</td><td style="text-align:center;">onloaded</td></tr><tr><td style="text-align:center;">update:model-value</td><td style="text-align:center;">val[number]</td><td style="text-align:center;">v-model</td></tr></tbody></table>`,7),O=JSON.parse('{"title":"ProgressBar","description":"","frontmatter":{"page":true,"title":"ProgressBar"},"headers":[{"level":2,"title":"Quick Start","slug":"quick-start"},{"level":3,"title":"Default","slug":"default"},{"level":3,"title":"Indeterminate","slug":"indeterminate"},{"level":3,"title":"Custom","slug":"custom"},{"level":2,"title":"Properties","slug":"properties"},{"level":2,"title":"Emits","slug":"emits"}],"relativePath":"guide/components/progress-bar/index.md"}'),Q={name:"guide/components/progress-bar/index.md"},j=A({...Q,setup(R){const{theme:l}=C(),b=[0,10,20,50,70,100],s=h("running"),o=h(70);let D=0,F;const v=c=>{console.log("change",c)},x=c=>{console.log("loaded",c)};return f(()=>{F=setInterval(()=>{s.value==="running"&&(o.value=b[D],D=(D+1)%b.length)},1500)}),q(()=>{F!==void 0&&clearInterval(F)}),(c,e)=>{const y=m("fv-radio"),d=m("fv-progress-bar");return _(),E("div",null,[V,N,a("p",null,"STATE: "+u(s.value),1),k,r(y,{modelValue:s.value,"onUpdate:modelValue":e[0]||(e[0]=n=>s.value=n),label:"running",group:"state",theme:p(l)},{default:g(()=>[P]),_:1},8,["modelValue","theme"]),r(y,{modelValue:s.value,"onUpdate:modelValue":e[1]||(e[1]=n=>s.value=n),label:"pause",group:"state",theme:p(l)},{default:g(()=>[S]),_:1},8,["modelValue","theme"]),r(y,{modelValue:s.value,"onUpdate:modelValue":e[2]||(e[2]=n=>s.value=n),label:"error",group:"state",theme:p(l)},{default:g(()=>[w]),_:1},8,["modelValue","theme"]),B,T,r(d,{onChange:v,onLoaded:x,modelValue:o.value,"onUpdate:modelValue":e[3]||(e[3]=n=>o.value=n),max:100,theme:p(l),pause:s.value==="pause",error:s.value==="error"},null,8,["modelValue","theme","pause","error"]),t(" "+u(o.value)+"% ",1),U,r(d,{indeterminate:!0,pause:s.value==="pause",error:s.value==="error",theme:p(l)},null,8,["pause","error","theme"]),I,r(d,{"pause-foreground":"rgba(229, 0, 249, 1)","error-foreground":"rgba(249, 201, 0, 1)",indeterminate:!0,pause:s.value==="pause",error:s.value==="error",theme:p(l),foreground:"rgba(0, 204, 153, 1)"},null,8,["pause","error","theme"]),L,r(d,{"pause-foreground":"rgba(229, 0, 249, 1)","error-foreground":"rgba(249, 201, 0, 1)",background:"rgba(0,0,0,1)",modelValue:o.value,"onUpdate:modelValue":e[4]||(e[4]=n=>o.value=n),max:100,theme:p(l),pause:s.value==="pause",error:s.value==="error",foreground:"rgba(0, 204, 153, 1)"},null,8,["modelValue","theme","pause","error"]),t(" "+u(o.value)+"% ",1),M])}}});export{O as __pageData,j as default};
diff --git a/assets/guide_components_progress-bar_index.md.689c3241.lean.js b/assets/guide_components_progress-bar_index.md.689c3241.lean.js
deleted file mode 100644
index 68a40f3..0000000
--- a/assets/guide_components_progress-bar_index.md.689c3241.lean.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import{u as C}from"./chunks/index.9dba9c16.js";import{d as A,f as h,g as f,m as q,c as E,k as a,t as u,b as r,w as g,u as p,e as t,a as i,r as m,o as _}from"./app.d60fa8c3.js";const V=a("h1",{id:"progressbar",tabindex:"-1"},[t("ProgressBar "),a("a",{class:"header-anchor",href:"#progressbar","aria-hidden":"true"},"#")],-1),N=a("h2",{id:"quick-start",tabindex:"-1"},[t("Quick Start "),a("a",{class:"header-anchor",href:"#quick-start","aria-hidden":"true"},"#")],-1),k=a("hr",null,null,-1),P=t("Running"),S=t("Pause"),w=t("Error"),B=a("h3",{id:"default",tabindex:"-1"},[t("Default "),a("a",{class:"header-anchor",href:"#default","aria-hidden":"true"},"#")],-1),T=a("hr",null,null,-1),U=i(`<div class="language-vue-html"><span class="copy"></span><div class="highlight-lines"><br><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><br><br><br><br></div><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-progress-bar</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">v-model</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">change</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">onChange</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">loaded</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">onLoaded</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">max</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#F78C6C;">100</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">pause</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">state</span><span style="color:#89DDFF;">===</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">pause</span><span style="color:#89DDFF;">&#39;&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">error</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">state</span><span style="color:#89DDFF;">===</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">error</span><span style="color:#89DDFF;">&#39;&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    /&gt;</span><span style="color:#A6ACCD;"> </span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><h3 id="indeterminate" tabindex="-1">Indeterminate <a class="header-anchor" href="#indeterminate" aria-hidden="true">#</a></h3><hr>`,3),I=i(`<div class="language-vue-html"><span class="copy"></span><div class="highlight-lines"><br><div class="highlighted">\xA0</div><br><br><br><br><br></div><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-progress-bar</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">indeterminate</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">pause</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">state</span><span style="color:#89DDFF;">===</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">pause</span><span style="color:#89DDFF;">&#39;&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">error</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">state</span><span style="color:#89DDFF;">===</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">error</span><span style="color:#89DDFF;">&#39;&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">    /&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h3 id="custom" tabindex="-1">Custom <a class="header-anchor" href="#custom" aria-hidden="true">#</a></h3><hr><ol><li>indeterminate</li></ol>`,4),L=i(`<div class="language-vue-html"><span class="copy"></span><div class="highlight-lines"><br><br><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><br><br><br><br><br></div><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-progress-bar</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">indeterminate</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">pause-foreground</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">rgba(229, 0, 249, 1)</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">error-foreground</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">rgba(249, 201, 0, 1)</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">foreground</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">rgba(0, 204, 153, 1)</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">pause</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">state</span><span style="color:#89DDFF;">===</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">pause</span><span style="color:#89DDFF;">&#39;&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">error</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">state</span><span style="color:#89DDFF;">===</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">error</span><span style="color:#89DDFF;">&#39;&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">    /&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><ol start="2"><li>determinate</li></ol>`,2),M=i(`<div class="language-vue-html"><span class="copy"></span><div class="highlight-lines"><br><br><br><br><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><br><br><br><br></div><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-progress-bar</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">v-model</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">max</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#F78C6C;">100</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">pause-foreground</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">rgba(229, 0, 249, 1)</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">error-foreground</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">rgba(249, 201, 0, 1)</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">foreground</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">rgba(0, 204, 153, 1)</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">background</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">rgba(0,0,0,1)</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">pause</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">state</span><span style="color:#89DDFF;">===</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">pause</span><span style="color:#89DDFF;">&#39;&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">error</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">state</span><span style="color:#89DDFF;">===</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">error</span><span style="color:#89DDFF;">&#39;&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    /&gt;</span><span style="color:#A6ACCD;"> </span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">background</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">background color</td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">disabled</td></tr><tr><td style="text-align:center;">error</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">error state</td></tr><tr><td style="text-align:center;">error-foreground</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">error foreground color</td></tr><tr><td style="text-align:center;">foreground</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">foreground color</td></tr><tr><td style="text-align:center;">indeterminate</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">indeterminate status</td></tr><tr><td style="text-align:center;">lang</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">i18n</td></tr><tr><td style="text-align:center;">max</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">100</td><td style="text-align:center;">same as HTML progress element</td></tr><tr><td style="text-align:center;">model-value</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">0</td><td style="text-align:center;">v-model</td></tr><tr><td style="text-align:center;">pause</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">pause state</td></tr><tr><td style="text-align:center;">pause-foreground</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">pause foreground color</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">[&#39;light&#39;, &#39;dark&#39;, &#39;global&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&quot;global&quot;</td><td style="text-align:center;">theme</td></tr></tbody></table><h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">change</td><td style="text-align:center;">val[number]</td><td style="text-align:center;">onchange</td></tr><tr><td style="text-align:center;">loaded</td><td style="text-align:center;">val[number]</td><td style="text-align:center;">onloaded</td></tr><tr><td style="text-align:center;">update:model-value</td><td style="text-align:center;">val[number]</td><td style="text-align:center;">v-model</td></tr></tbody></table>`,7),O=JSON.parse('{"title":"ProgressBar","description":"","frontmatter":{"page":true,"title":"ProgressBar"},"headers":[{"level":2,"title":"Quick Start","slug":"quick-start"},{"level":3,"title":"Default","slug":"default"},{"level":3,"title":"Indeterminate","slug":"indeterminate"},{"level":3,"title":"Custom","slug":"custom"},{"level":2,"title":"Properties","slug":"properties"},{"level":2,"title":"Emits","slug":"emits"}],"relativePath":"guide/components/progress-bar/index.md"}'),Q={name:"guide/components/progress-bar/index.md"},j=A({...Q,setup(R){const{theme:l}=C(),b=[0,10,20,50,70,100],s=h("running"),o=h(70);let D=0,F;const v=c=>{console.log("change",c)},x=c=>{console.log("loaded",c)};return f(()=>{F=setInterval(()=>{s.value==="running"&&(o.value=b[D],D=(D+1)%b.length)},1500)}),q(()=>{F!==void 0&&clearInterval(F)}),(c,e)=>{const y=m("fv-radio"),d=m("fv-progress-bar");return _(),E("div",null,[V,N,a("p",null,"STATE: "+u(s.value),1),k,r(y,{modelValue:s.value,"onUpdate:modelValue":e[0]||(e[0]=n=>s.value=n),label:"running",group:"state",theme:p(l)},{default:g(()=>[P]),_:1},8,["modelValue","theme"]),r(y,{modelValue:s.value,"onUpdate:modelValue":e[1]||(e[1]=n=>s.value=n),label:"pause",group:"state",theme:p(l)},{default:g(()=>[S]),_:1},8,["modelValue","theme"]),r(y,{modelValue:s.value,"onUpdate:modelValue":e[2]||(e[2]=n=>s.value=n),label:"error",group:"state",theme:p(l)},{default:g(()=>[w]),_:1},8,["modelValue","theme"]),B,T,r(d,{onChange:v,onLoaded:x,modelValue:o.value,"onUpdate:modelValue":e[3]||(e[3]=n=>o.value=n),max:100,theme:p(l),pause:s.value==="pause",error:s.value==="error"},null,8,["modelValue","theme","pause","error"]),t(" "+u(o.value)+"% ",1),U,r(d,{indeterminate:!0,pause:s.value==="pause",error:s.value==="error",theme:p(l)},null,8,["pause","error","theme"]),I,r(d,{"pause-foreground":"rgba(229, 0, 249, 1)","error-foreground":"rgba(249, 201, 0, 1)",indeterminate:!0,pause:s.value==="pause",error:s.value==="error",theme:p(l),foreground:"rgba(0, 204, 153, 1)"},null,8,["pause","error","theme"]),L,r(d,{"pause-foreground":"rgba(229, 0, 249, 1)","error-foreground":"rgba(249, 201, 0, 1)",background:"rgba(0,0,0,1)",modelValue:o.value,"onUpdate:modelValue":e[4]||(e[4]=n=>o.value=n),max:100,theme:p(l),pause:s.value==="pause",error:s.value==="error",foreground:"rgba(0, 204, 153, 1)"},null,8,["modelValue","theme","pause","error"]),t(" "+u(o.value)+"% ",1),M])}}});export{O as __pageData,j as default};
diff --git a/assets/guide_components_progress-bar_index.md.D8vHQw5V.js b/assets/guide_components_progress-bar_index.md.D8vHQw5V.js
new file mode 100644
index 0000000..c50e168
--- /dev/null
+++ b/assets/guide_components_progress-bar_index.md.D8vHQw5V.js
@@ -0,0 +1,8 @@
+import{_ as k,q as o,Y as s,z as l,H as h,u as g,aq as r,S as d,p as E}from"./chunks/framework.DvIFzl91.js";const c={data(){return{percent:[10,20,30,35]}},mounted(){setInterval(()=>{for(let p of this.percent){let e=this.percent.indexOf(p);this.percent[e]=Math.ceil(Math.random()*100)}},3e3)}},q=JSON.parse('{"title":"ProgressBar","description":"","frontmatter":{"page":true,"title":"ProgressBar"},"headers":[],"relativePath":"guide/components/progress-bar/index.md","filePath":"guide/components/progress-bar/index.md"}'),u=h("h3",{id:"progressbar-demo",tabindex:"-1"},[g("ProgressBar-DEMO "),h("a",{class:"header-anchor",href:"#progressbar-demo","aria-label":'Permalink to "ProgressBar-DEMO"'},"​")],-1),y=h("hr",null,null,-1),b=r(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-ProgressBar</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-ProgressBar</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="default-progressbar" tabindex="-1">Default ProgressBar <a class="header-anchor" href="#default-progressbar" aria-label="Permalink to &quot;Default ProgressBar&quot;">​</a></h3><hr>`,3),_=r(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-ProgressBar</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">percent[</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-ProgressBar</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="indeterminate-progressbar" tabindex="-1">Indeterminate ProgressBar <a class="header-anchor" href="#indeterminate-progressbar" aria-label="Permalink to &quot;Indeterminate ProgressBar&quot;">​</a></h3><hr>`,3),m=r(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-ProgressBar</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> loading</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;true&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-ProgressBar</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="progressbar-disabled" tabindex="-1">ProgressBar Disabled <a class="header-anchor" href="#progressbar-disabled" aria-label="Permalink to &quot;ProgressBar Disabled&quot;">​</a></h3><hr><ol><li>Default</li></ol>`,4),v=r(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-ProgressBar</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">percent[</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> disabled</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-ProgressBar</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><ol start="2"><li>Indeterminate</li></ol>`,2),C=r(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-ProgressBar</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> loading</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;true&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> disabled</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-ProgressBar</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="progressbar-custom-style" tabindex="-1">ProgressBar Custom Style <a class="header-anchor" href="#progressbar-custom-style" aria-label="Permalink to &quot;ProgressBar Custom Style&quot;">​</a></h3><hr><ol><li>Custom Foreground</li></ol>`,4),F=r(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-ProgressBar</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">percent[</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> foreground</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rgba(0,204,153,1)&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-ProgressBar</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><ol start="2"><li>Custom Background</li></ol>`,2),B=r(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-ProgressBar</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">percent[</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">3</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rgba(0,204,153,0.6)&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-ProgressBar</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">value</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">0</td><td style="text-align:center;">Progressbar value</td></tr><tr><td style="text-align:center;">loading</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">Is progressbar indeterminate</td></tr><tr><td style="text-align:center;">foreground</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">background</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;"></td></tr></tbody></table><h3 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to &quot;Events&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">事件名(Name)</th><th style="text-align:center;">参数类型(args)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">progress-change</td><td style="text-align:center;">percent</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">progress-finished</td><td style="text-align:center;">percent</td><td style="text-align:center;"></td></tr></tbody></table>`,7);function x(p,e,P,f,t,T){const i=d("fv-ProgressBar"),a=d("ClientOnly");return E(),o("div",null,[u,y,s(a,null,{default:l(()=>[s(i)]),_:1}),b,s(a,null,{default:l(()=>[s(i,{modelValue:t.percent[0],"onUpdate:modelValue":e[0]||(e[0]=n=>t.percent[0]=n)},null,8,["modelValue"])]),_:1}),_,s(a,null,{default:l(()=>[s(i,{loading:"true"})]),_:1}),m,s(a,null,{default:l(()=>[s(i,{modelValue:t.percent[1],"onUpdate:modelValue":e[1]||(e[1]=n=>t.percent[1]=n),disabled:""},null,8,["modelValue"])]),_:1}),v,s(a,null,{default:l(()=>[s(i,{loading:"true",disabled:""})]),_:1}),C,s(a,null,{default:l(()=>[s(i,{modelValue:t.percent[2],"onUpdate:modelValue":e[2]||(e[2]=n=>t.percent[2]=n),foreground:"rgba(0,204,153,1)"},null,8,["modelValue"])]),_:1}),F,s(a,null,{default:l(()=>[s(i,{modelValue:t.percent[3],"onUpdate:modelValue":e[3]||(e[3]=n=>t.percent[3]=n),background:"rgba(0,204,153,0.6)"},null,8,["modelValue"])]),_:1}),B])}const V=k(c,[["render",x]]);export{q as __pageData,V as default};
diff --git a/assets/guide_components_progress-bar_index.md.D8vHQw5V.lean.js b/assets/guide_components_progress-bar_index.md.D8vHQw5V.lean.js
new file mode 100644
index 0000000..571877f
--- /dev/null
+++ b/assets/guide_components_progress-bar_index.md.D8vHQw5V.lean.js
@@ -0,0 +1 @@
+import{_ as k,q as o,Y as s,z as l,H as h,u as g,aq as r,S as d,p as E}from"./chunks/framework.DvIFzl91.js";const c={data(){return{percent:[10,20,30,35]}},mounted(){setInterval(()=>{for(let p of this.percent){let e=this.percent.indexOf(p);this.percent[e]=Math.ceil(Math.random()*100)}},3e3)}},q=JSON.parse('{"title":"ProgressBar","description":"","frontmatter":{"page":true,"title":"ProgressBar"},"headers":[],"relativePath":"guide/components/progress-bar/index.md","filePath":"guide/components/progress-bar/index.md"}'),u=h("h3",{id:"progressbar-demo",tabindex:"-1"},[g("ProgressBar-DEMO "),h("a",{class:"header-anchor",href:"#progressbar-demo","aria-label":'Permalink to "ProgressBar-DEMO"'},"​")],-1),y=h("hr",null,null,-1),b=r("",3),_=r("",3),m=r("",4),v=r("",2),C=r("",4),F=r("",2),B=r("",7);function x(p,e,P,f,t,T){const i=d("fv-ProgressBar"),a=d("ClientOnly");return E(),o("div",null,[u,y,s(a,null,{default:l(()=>[s(i)]),_:1}),b,s(a,null,{default:l(()=>[s(i,{modelValue:t.percent[0],"onUpdate:modelValue":e[0]||(e[0]=n=>t.percent[0]=n)},null,8,["modelValue"])]),_:1}),_,s(a,null,{default:l(()=>[s(i,{loading:"true"})]),_:1}),m,s(a,null,{default:l(()=>[s(i,{modelValue:t.percent[1],"onUpdate:modelValue":e[1]||(e[1]=n=>t.percent[1]=n),disabled:""},null,8,["modelValue"])]),_:1}),v,s(a,null,{default:l(()=>[s(i,{loading:"true",disabled:""})]),_:1}),C,s(a,null,{default:l(()=>[s(i,{modelValue:t.percent[2],"onUpdate:modelValue":e[2]||(e[2]=n=>t.percent[2]=n),foreground:"rgba(0,204,153,1)"},null,8,["modelValue"])]),_:1}),F,s(a,null,{default:l(()=>[s(i,{modelValue:t.percent[3],"onUpdate:modelValue":e[3]||(e[3]=n=>t.percent[3]=n),background:"rgba(0,204,153,0.6)"},null,8,["modelValue"])]),_:1}),B])}const V=k(c,[["render",x]]);export{q as __pageData,V as default};
diff --git a/assets/guide_components_progress-bar_properties.md.39af7fb2.js b/assets/guide_components_progress-bar_properties.md.39af7fb2.js
deleted file mode 100644
index e0f41d2..0000000
--- a/assets/guide_components_progress-bar_properties.md.39af7fb2.js
+++ /dev/null
@@ -1 +0,0 @@
-import{_ as t,c as e,o as n,a as r}from"./app.d60fa8c3.js";const u=JSON.parse('{"title":"Properties","description":"","frontmatter":{},"headers":[{"level":2,"title":"Properties","slug":"properties"}],"relativePath":"guide/components/progress-bar/properties.md"}'),l={name:"guide/components/progress-bar/properties.md"},d=r('<h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">background</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">background color</td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">disabled</td></tr><tr><td style="text-align:center;">error</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">error state</td></tr><tr><td style="text-align:center;">error-foreground</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">error foreground color</td></tr><tr><td style="text-align:center;">foreground</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">foreground color</td></tr><tr><td style="text-align:center;">indeterminate</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">indeterminate status</td></tr><tr><td style="text-align:center;">lang</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">i18n</td></tr><tr><td style="text-align:center;">max</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">100</td><td style="text-align:center;">same as HTML progress element</td></tr><tr><td style="text-align:center;">model-value</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">0</td><td style="text-align:center;">v-model</td></tr><tr><td style="text-align:center;">pause</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">pause state</td></tr><tr><td style="text-align:center;">pause-foreground</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">pause foreground color</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">[&#39;light&#39;, &#39;dark&#39;, &#39;global&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&quot;global&quot;</td><td style="text-align:center;">theme</td></tr></tbody></table>',3),a=[d];function s(i,o,c,g,x,y){return n(),e("div",null,a)}var h=t(l,[["render",s]]);export{u as __pageData,h as default};
diff --git a/assets/guide_components_progress-bar_properties.md.39af7fb2.lean.js b/assets/guide_components_progress-bar_properties.md.39af7fb2.lean.js
deleted file mode 100644
index 29b04fd..0000000
--- a/assets/guide_components_progress-bar_properties.md.39af7fb2.lean.js
+++ /dev/null
@@ -1 +0,0 @@
-import{_ as t,c as e,o as n,a as r}from"./app.d60fa8c3.js";const u=JSON.parse('{"title":"Properties","description":"","frontmatter":{},"headers":[{"level":2,"title":"Properties","slug":"properties"}],"relativePath":"guide/components/progress-bar/properties.md"}'),l={name:"guide/components/progress-bar/properties.md"},d=r("",3),a=[d];function s(i,o,c,g,x,y){return n(),e("div",null,a)}var h=t(l,[["render",s]]);export{u as __pageData,h as default};
diff --git a/assets/guide_components_progress-bar_properties.md.TxiS9ZMA.js b/assets/guide_components_progress-bar_properties.md.TxiS9ZMA.js
new file mode 100644
index 0000000..597cb2b
--- /dev/null
+++ b/assets/guide_components_progress-bar_properties.md.TxiS9ZMA.js
@@ -0,0 +1 @@
+import{_ as t,q as e,p as n,aq as r}from"./chunks/framework.DvIFzl91.js";const u=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/components/progress-bar/properties.md","filePath":"guide/components/progress-bar/properties.md"}'),l={name:"guide/components/progress-bar/properties.md"},d=r('<h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-label="Permalink to &quot;Properties&quot;">​</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">background</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">background color</td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">disabled</td></tr><tr><td style="text-align:center;">error</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">error state</td></tr><tr><td style="text-align:center;">error-foreground</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">error foreground color</td></tr><tr><td style="text-align:center;">foreground</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">foreground color</td></tr><tr><td style="text-align:center;">indeterminate</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">indeterminate status</td></tr><tr><td style="text-align:center;">lang</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">i18n</td></tr><tr><td style="text-align:center;">max</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">100</td><td style="text-align:center;">same as HTML progress element</td></tr><tr><td style="text-align:center;">model-value</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">0</td><td style="text-align:center;">v-model</td></tr><tr><td style="text-align:center;">pause</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">pause state</td></tr><tr><td style="text-align:center;">pause-foreground</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">pause foreground color</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">[&#39;light&#39;, &#39;dark&#39;, &#39;global&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&quot;global&quot;</td><td style="text-align:center;">theme</td></tr></tbody></table>',3),a=[d];function s(i,o,c,g,x,y){return n(),e("div",null,a)}const h=t(l,[["render",s]]);export{u as __pageData,h as default};
diff --git a/assets/guide_components_progress-bar_properties.md.TxiS9ZMA.lean.js b/assets/guide_components_progress-bar_properties.md.TxiS9ZMA.lean.js
new file mode 100644
index 0000000..7c24e64
--- /dev/null
+++ b/assets/guide_components_progress-bar_properties.md.TxiS9ZMA.lean.js
@@ -0,0 +1 @@
+import{_ as t,q as e,p as n,aq as r}from"./chunks/framework.DvIFzl91.js";const u=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/components/progress-bar/properties.md","filePath":"guide/components/progress-bar/properties.md"}'),l={name:"guide/components/progress-bar/properties.md"},d=r("",3),a=[d];function s(i,o,c,g,x,y){return n(),e("div",null,a)}const h=t(l,[["render",s]]);export{u as __pageData,h as default};
diff --git a/assets/guide_components_progress-ring_emits.md.67e4644e.js b/assets/guide_components_progress-ring_emits.md.67e4644e.js
deleted file mode 100644
index f1666fd..0000000
--- a/assets/guide_components_progress-ring_emits.md.67e4644e.js
+++ /dev/null
@@ -1 +0,0 @@
-import{_ as t,c as e,o as a,a as n}from"./app.d60fa8c3.js";const p=JSON.parse('{"title":"Emits","description":"","frontmatter":{},"headers":[{"level":2,"title":"Emits","slug":"emits"}],"relativePath":"guide/components/progress-bar/emits.md"}'),r={name:"guide/components/progress-bar/emits.md"},s=n('<h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">change</td><td style="text-align:center;">val[number]</td><td style="text-align:center;">onchange</td></tr><tr><td style="text-align:center;">loaded</td><td style="text-align:center;">val[number]</td><td style="text-align:center;">onloaded</td></tr><tr><td style="text-align:center;">update:model-value</td><td style="text-align:center;">val[number]</td><td style="text-align:center;">v-model</td></tr></tbody></table>',3),d=[s];function l(i,c,o,m,_,h){return a(),e("div",null,d)}var x=t(r,[["render",l]]);export{p as __pageData,x as default};
diff --git a/assets/guide_components_progress-ring_emits.md.67e4644e.lean.js b/assets/guide_components_progress-ring_emits.md.67e4644e.lean.js
deleted file mode 100644
index 127d981..0000000
--- a/assets/guide_components_progress-ring_emits.md.67e4644e.lean.js
+++ /dev/null
@@ -1 +0,0 @@
-import{_ as t,c as e,o as a,a as n}from"./app.d60fa8c3.js";const p=JSON.parse('{"title":"Emits","description":"","frontmatter":{},"headers":[{"level":2,"title":"Emits","slug":"emits"}],"relativePath":"guide/components/progress-bar/emits.md"}'),r={name:"guide/components/progress-bar/emits.md"},s=n("",3),d=[s];function l(i,c,o,m,_,h){return a(),e("div",null,d)}var x=t(r,[["render",l]]);export{p as __pageData,x as default};
diff --git a/assets/guide_components_progress-ring_emits.md.D2Y6hIZ9.js b/assets/guide_components_progress-ring_emits.md.D2Y6hIZ9.js
new file mode 100644
index 0000000..16fa806
--- /dev/null
+++ b/assets/guide_components_progress-ring_emits.md.D2Y6hIZ9.js
@@ -0,0 +1 @@
+import{_ as t,q as e,p as n,aq as a}from"./chunks/framework.DvIFzl91.js";const p=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/components/progress-ring/emits.md","filePath":"guide/components/progress-ring/emits.md"}'),r={name:"guide/components/progress-ring/emits.md"},s=a('<h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-label="Permalink to &quot;Emits&quot;">​</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">change</td><td style="text-align:center;">val[number]</td><td style="text-align:center;">onchange</td></tr><tr><td style="text-align:center;">loaded</td><td style="text-align:center;">val[number]</td><td style="text-align:center;">onloaded</td></tr><tr><td style="text-align:center;">update:model-value</td><td style="text-align:center;">val[number]</td><td style="text-align:center;">v-model</td></tr></tbody></table>',3),d=[s];function l(i,o,c,m,_,g){return n(),e("div",null,d)}const u=t(r,[["render",l]]);export{p as __pageData,u as default};
diff --git a/assets/guide_components_progress-ring_emits.md.D2Y6hIZ9.lean.js b/assets/guide_components_progress-ring_emits.md.D2Y6hIZ9.lean.js
new file mode 100644
index 0000000..5bfccfc
--- /dev/null
+++ b/assets/guide_components_progress-ring_emits.md.D2Y6hIZ9.lean.js
@@ -0,0 +1 @@
+import{_ as t,q as e,p as n,aq as a}from"./chunks/framework.DvIFzl91.js";const p=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/components/progress-ring/emits.md","filePath":"guide/components/progress-ring/emits.md"}'),r={name:"guide/components/progress-ring/emits.md"},s=a("",3),d=[s];function l(i,o,c,m,_,g){return n(),e("div",null,d)}const u=t(r,[["render",l]]);export{p as __pageData,u as default};
diff --git a/assets/guide_components_progress-ring_index.md.9a33542b.js b/assets/guide_components_progress-ring_index.md.9a33542b.js
deleted file mode 100644
index 2ac62c3..0000000
--- a/assets/guide_components_progress-ring_index.md.9a33542b.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import{u as x}from"./chunks/index.9dba9c16.js";import{d as A,f as b,g as q,m as f,c as E,k as a,t as u,b as l,w as g,u as o,e as r,a as i,r as m,o as _}from"./app.d60fa8c3.js";const V=a("h1",{id:"progressring",tabindex:"-1"},[r("ProgressRing "),a("a",{class:"header-anchor",href:"#progressring","aria-hidden":"true"},"#")],-1),N=a("h2",{id:"quick-start",tabindex:"-1"},[r("Quick Start "),a("a",{class:"header-anchor",href:"#quick-start","aria-hidden":"true"},"#")],-1),w=a("hr",null,null,-1),k=r("Running"),P=r("Pause"),S=r("Error"),U=a("h3",{id:"default",tabindex:"-1"},[r("Default "),a("a",{class:"header-anchor",href:"#default","aria-hidden":"true"},"#")],-1),R=a("hr",null,null,-1),T=i(`<div class="language-vue-html"><span class="copy"></span><div class="highlight-lines"><br><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><br><br><br><br></div><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-progress-ring</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">v-model</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">change</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">onChange</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">loaded</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">onLoaded</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">max</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#F78C6C;">100</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">pause</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">state</span><span style="color:#89DDFF;">===</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">pause</span><span style="color:#89DDFF;">&#39;&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">error</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">state</span><span style="color:#89DDFF;">===</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">error</span><span style="color:#89DDFF;">&#39;&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    /&gt;</span><span style="color:#A6ACCD;"> </span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><h3 id="indeterminate" tabindex="-1">Indeterminate <a class="header-anchor" href="#indeterminate" aria-hidden="true">#</a></h3><hr>`,3),I=i(`<div class="language-vue-html"><span class="copy"></span><div class="highlight-lines"><br><div class="highlighted">\xA0</div><br><br><br><br><br></div><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-progress-ring</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">indeterminate</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">pause</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">state</span><span style="color:#89DDFF;">===</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">pause</span><span style="color:#89DDFF;">&#39;&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">error</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">state</span><span style="color:#89DDFF;">===</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">error</span><span style="color:#89DDFF;">&#39;&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">    /&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h3 id="custom" tabindex="-1">Custom <a class="header-anchor" href="#custom" aria-hidden="true">#</a></h3><hr><ol><li>indeterminate</li></ol>`,4),B=i(`<div class="language-vue-html"><span class="copy"></span><div class="highlight-lines"><br><br><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><br><br><br><br><br></div><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-progress-ring</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">indeterminate</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">pause-foreground</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">rgba(229, 0, 249, 1)</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">error-foreground</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">rgba(249, 201, 0, 1)</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">foreground</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">rgba(0, 204, 153, 1)</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">pause</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">state</span><span style="color:#89DDFF;">===</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">pause</span><span style="color:#89DDFF;">&#39;&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">error</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">state</span><span style="color:#89DDFF;">===</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">error</span><span style="color:#89DDFF;">&#39;&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">    /&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><ol start="2"><li>determinate</li></ol>`,2),L=i(`<div class="language-vue-html"><span class="copy"></span><div class="highlight-lines"><br><br><br><br><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><br><br><br><br></div><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-progress-ring</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">v-model</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">max</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#F78C6C;">100</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">pause-foreground</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">rgba(229, 0, 249, 1)</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">error-foreground</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">rgba(249, 201, 0, 1)</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">foreground</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">rgba(0, 204, 153, 1)</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">background</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">rgba(0,0,0,1)</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">pause</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">state</span><span style="color:#89DDFF;">===</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">pause</span><span style="color:#89DDFF;">&#39;&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">error</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">state</span><span style="color:#89DDFF;">===</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">error</span><span style="color:#89DDFF;">&#39;&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    /&gt;</span><span style="color:#A6ACCD;"> </span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><ol start="3"><li>max size</li></ol>`,2),Q=i(`<div class="language-vue-html"><span class="copy"></span><div class="highlight-lines"><br><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><br><br><br><br><br><br></div><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-progress-ring</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">width</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#F78C6C;">100</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">border-width</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#F78C6C;">8</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">indeterminate</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">pause</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">state</span><span style="color:#89DDFF;">===</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">pause</span><span style="color:#89DDFF;">&#39;&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">error</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">state</span><span style="color:#89DDFF;">===</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">error</span><span style="color:#89DDFF;">&#39;&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">  </span></span>
-<span class="line"><span style="color:#89DDFF;">    /&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">border-width</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">5</td><td style="text-align:center;">circle border width</td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">disabled</td></tr><tr><td style="text-align:center;">error</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">error state</td></tr><tr><td style="text-align:center;">error-foreground</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">error state circle color</td></tr><tr><td style="text-align:center;">foreground</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">circle color</td></tr><tr><td style="text-align:center;">indeterminate</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">indeterminate state</td></tr><tr><td style="text-align:center;">lang</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">i18n</td></tr><tr><td style="text-align:center;">max</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">100</td><td style="text-align:center;">same as progress max property</td></tr><tr><td style="text-align:center;">model-value</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">v-model</td></tr><tr><td style="text-align:center;">pause</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">pause state</td></tr><tr><td style="text-align:center;">pause-foreground</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">pause state circle color</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">[&#39;light&#39;, &#39;dark&#39;, &#39;global&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">theme</td></tr><tr><td style="text-align:center;">width</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">60</td><td style="text-align:center;">circle width</td></tr></tbody></table><h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">change</td><td style="text-align:center;">val[number]</td><td style="text-align:center;">onchange</td></tr><tr><td style="text-align:center;">loaded</td><td style="text-align:center;">val[number]</td><td style="text-align:center;">onloaded</td></tr><tr><td style="text-align:center;">update:model-value</td><td style="text-align:center;">val[number]</td><td style="text-align:center;">v-model</td></tr></tbody></table>`,7),j=JSON.parse('{"title":"ProgressRing","description":"","frontmatter":{"page":true,"title":"ProgressRing"},"headers":[{"level":2,"title":"Quick Start","slug":"quick-start"},{"level":3,"title":"Default","slug":"default"},{"level":3,"title":"Indeterminate","slug":"indeterminate"},{"level":3,"title":"Custom","slug":"custom"},{"level":2,"title":"Properties","slug":"properties"},{"level":2,"title":"Emits","slug":"emits"}],"relativePath":"guide/components/progress-ring/index.md"}'),z={name:"guide/components/progress-ring/index.md"},G=A({...z,setup(J){const{theme:t}=x(),h=[0,10,20,50,70,100],s=b("running"),p=b(70);let d=0,F;const v=D=>{console.log("change",D)},C=D=>{console.log("loaded",D)};return q(()=>{F=setInterval(()=>{s.value==="running"&&(p.value=h[d],d=(d+1)%h.length)},1500)}),f(()=>{F!==void 0&&clearInterval(F)}),(D,e)=>{const y=m("fv-radio"),c=m("fv-progress-ring");return _(),E("div",null,[V,N,a("p",null,"STATE: "+u(s.value),1),w,l(y,{modelValue:s.value,"onUpdate:modelValue":e[0]||(e[0]=n=>s.value=n),label:"running",group:"state",theme:o(t)},{default:g(()=>[k]),_:1},8,["modelValue","theme"]),l(y,{modelValue:s.value,"onUpdate:modelValue":e[1]||(e[1]=n=>s.value=n),label:"pause",group:"state",theme:o(t)},{default:g(()=>[P]),_:1},8,["modelValue","theme"]),l(y,{modelValue:s.value,"onUpdate:modelValue":e[2]||(e[2]=n=>s.value=n),label:"error",group:"state",theme:o(t)},{default:g(()=>[S]),_:1},8,["modelValue","theme"]),U,R,l(c,{onChange:v,onLoaded:C,modelValue:p.value,"onUpdate:modelValue":e[3]||(e[3]=n=>p.value=n),max:100,theme:o(t),pause:s.value==="pause",error:s.value==="error"},null,8,["modelValue","theme","pause","error"]),r(" "+u(p.value)+"% ",1),T,l(c,{indeterminate:!0,pause:s.value==="pause",error:s.value==="error",theme:o(t)},null,8,["pause","error","theme"]),I,l(c,{"pause-foreground":"rgba(229, 0, 249, 1)","error-foreground":"rgba(249, 201, 0, 1)",indeterminate:!0,pause:s.value==="pause",error:s.value==="error",theme:o(t),foreground:"rgba(0, 204, 153, 1)"},null,8,["pause","error","theme"]),B,l(c,{"pause-foreground":"rgba(229, 0, 249, 1)","error-foreground":"rgba(249, 201, 0, 1)",background:"rgba(0,0,0,1)",modelValue:p.value,"onUpdate:modelValue":e[4]||(e[4]=n=>p.value=n),max:100,theme:o(t),pause:s.value==="pause",error:s.value==="error",foreground:"rgba(0, 204, 153, 1)"},null,8,["modelValue","theme","pause","error"]),r(" "+u(p.value)+"% ",1),L,l(c,{width:100,"border-width":8,indeterminate:!0,pause:s.value==="pause",error:s.value==="error",theme:o(t)},null,8,["pause","error","theme"]),Q])}}});export{j as __pageData,G as default};
diff --git a/assets/guide_components_progress-ring_index.md.9a33542b.lean.js b/assets/guide_components_progress-ring_index.md.9a33542b.lean.js
deleted file mode 100644
index 2ac62c3..0000000
--- a/assets/guide_components_progress-ring_index.md.9a33542b.lean.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import{u as x}from"./chunks/index.9dba9c16.js";import{d as A,f as b,g as q,m as f,c as E,k as a,t as u,b as l,w as g,u as o,e as r,a as i,r as m,o as _}from"./app.d60fa8c3.js";const V=a("h1",{id:"progressring",tabindex:"-1"},[r("ProgressRing "),a("a",{class:"header-anchor",href:"#progressring","aria-hidden":"true"},"#")],-1),N=a("h2",{id:"quick-start",tabindex:"-1"},[r("Quick Start "),a("a",{class:"header-anchor",href:"#quick-start","aria-hidden":"true"},"#")],-1),w=a("hr",null,null,-1),k=r("Running"),P=r("Pause"),S=r("Error"),U=a("h3",{id:"default",tabindex:"-1"},[r("Default "),a("a",{class:"header-anchor",href:"#default","aria-hidden":"true"},"#")],-1),R=a("hr",null,null,-1),T=i(`<div class="language-vue-html"><span class="copy"></span><div class="highlight-lines"><br><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><br><br><br><br></div><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-progress-ring</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">v-model</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">change</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">onChange</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">loaded</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">onLoaded</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">max</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#F78C6C;">100</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">pause</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">state</span><span style="color:#89DDFF;">===</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">pause</span><span style="color:#89DDFF;">&#39;&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">error</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">state</span><span style="color:#89DDFF;">===</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">error</span><span style="color:#89DDFF;">&#39;&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    /&gt;</span><span style="color:#A6ACCD;"> </span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><h3 id="indeterminate" tabindex="-1">Indeterminate <a class="header-anchor" href="#indeterminate" aria-hidden="true">#</a></h3><hr>`,3),I=i(`<div class="language-vue-html"><span class="copy"></span><div class="highlight-lines"><br><div class="highlighted">\xA0</div><br><br><br><br><br></div><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-progress-ring</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">indeterminate</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">pause</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">state</span><span style="color:#89DDFF;">===</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">pause</span><span style="color:#89DDFF;">&#39;&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">error</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">state</span><span style="color:#89DDFF;">===</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">error</span><span style="color:#89DDFF;">&#39;&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">    /&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h3 id="custom" tabindex="-1">Custom <a class="header-anchor" href="#custom" aria-hidden="true">#</a></h3><hr><ol><li>indeterminate</li></ol>`,4),B=i(`<div class="language-vue-html"><span class="copy"></span><div class="highlight-lines"><br><br><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><br><br><br><br><br></div><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-progress-ring</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">indeterminate</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">pause-foreground</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">rgba(229, 0, 249, 1)</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">error-foreground</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">rgba(249, 201, 0, 1)</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">foreground</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">rgba(0, 204, 153, 1)</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">pause</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">state</span><span style="color:#89DDFF;">===</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">pause</span><span style="color:#89DDFF;">&#39;&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">error</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">state</span><span style="color:#89DDFF;">===</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">error</span><span style="color:#89DDFF;">&#39;&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">    /&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><ol start="2"><li>determinate</li></ol>`,2),L=i(`<div class="language-vue-html"><span class="copy"></span><div class="highlight-lines"><br><br><br><br><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><br><br><br><br></div><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-progress-ring</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">v-model</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">max</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#F78C6C;">100</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">pause-foreground</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">rgba(229, 0, 249, 1)</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">error-foreground</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">rgba(249, 201, 0, 1)</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">foreground</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">rgba(0, 204, 153, 1)</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">background</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">rgba(0,0,0,1)</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">pause</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">state</span><span style="color:#89DDFF;">===</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">pause</span><span style="color:#89DDFF;">&#39;&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">error</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">state</span><span style="color:#89DDFF;">===</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">error</span><span style="color:#89DDFF;">&#39;&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    /&gt;</span><span style="color:#A6ACCD;"> </span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><ol start="3"><li>max size</li></ol>`,2),Q=i(`<div class="language-vue-html"><span class="copy"></span><div class="highlight-lines"><br><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><br><br><br><br><br><br></div><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-progress-ring</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">width</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#F78C6C;">100</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">border-width</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#F78C6C;">8</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">indeterminate</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">pause</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">state</span><span style="color:#89DDFF;">===</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">pause</span><span style="color:#89DDFF;">&#39;&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">error</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">state</span><span style="color:#89DDFF;">===</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">error</span><span style="color:#89DDFF;">&#39;&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">  </span></span>
-<span class="line"><span style="color:#89DDFF;">    /&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">border-width</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">5</td><td style="text-align:center;">circle border width</td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">disabled</td></tr><tr><td style="text-align:center;">error</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">error state</td></tr><tr><td style="text-align:center;">error-foreground</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">error state circle color</td></tr><tr><td style="text-align:center;">foreground</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">circle color</td></tr><tr><td style="text-align:center;">indeterminate</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">indeterminate state</td></tr><tr><td style="text-align:center;">lang</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">i18n</td></tr><tr><td style="text-align:center;">max</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">100</td><td style="text-align:center;">same as progress max property</td></tr><tr><td style="text-align:center;">model-value</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">v-model</td></tr><tr><td style="text-align:center;">pause</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">pause state</td></tr><tr><td style="text-align:center;">pause-foreground</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">pause state circle color</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">[&#39;light&#39;, &#39;dark&#39;, &#39;global&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">theme</td></tr><tr><td style="text-align:center;">width</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">60</td><td style="text-align:center;">circle width</td></tr></tbody></table><h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">change</td><td style="text-align:center;">val[number]</td><td style="text-align:center;">onchange</td></tr><tr><td style="text-align:center;">loaded</td><td style="text-align:center;">val[number]</td><td style="text-align:center;">onloaded</td></tr><tr><td style="text-align:center;">update:model-value</td><td style="text-align:center;">val[number]</td><td style="text-align:center;">v-model</td></tr></tbody></table>`,7),j=JSON.parse('{"title":"ProgressRing","description":"","frontmatter":{"page":true,"title":"ProgressRing"},"headers":[{"level":2,"title":"Quick Start","slug":"quick-start"},{"level":3,"title":"Default","slug":"default"},{"level":3,"title":"Indeterminate","slug":"indeterminate"},{"level":3,"title":"Custom","slug":"custom"},{"level":2,"title":"Properties","slug":"properties"},{"level":2,"title":"Emits","slug":"emits"}],"relativePath":"guide/components/progress-ring/index.md"}'),z={name:"guide/components/progress-ring/index.md"},G=A({...z,setup(J){const{theme:t}=x(),h=[0,10,20,50,70,100],s=b("running"),p=b(70);let d=0,F;const v=D=>{console.log("change",D)},C=D=>{console.log("loaded",D)};return q(()=>{F=setInterval(()=>{s.value==="running"&&(p.value=h[d],d=(d+1)%h.length)},1500)}),f(()=>{F!==void 0&&clearInterval(F)}),(D,e)=>{const y=m("fv-radio"),c=m("fv-progress-ring");return _(),E("div",null,[V,N,a("p",null,"STATE: "+u(s.value),1),w,l(y,{modelValue:s.value,"onUpdate:modelValue":e[0]||(e[0]=n=>s.value=n),label:"running",group:"state",theme:o(t)},{default:g(()=>[k]),_:1},8,["modelValue","theme"]),l(y,{modelValue:s.value,"onUpdate:modelValue":e[1]||(e[1]=n=>s.value=n),label:"pause",group:"state",theme:o(t)},{default:g(()=>[P]),_:1},8,["modelValue","theme"]),l(y,{modelValue:s.value,"onUpdate:modelValue":e[2]||(e[2]=n=>s.value=n),label:"error",group:"state",theme:o(t)},{default:g(()=>[S]),_:1},8,["modelValue","theme"]),U,R,l(c,{onChange:v,onLoaded:C,modelValue:p.value,"onUpdate:modelValue":e[3]||(e[3]=n=>p.value=n),max:100,theme:o(t),pause:s.value==="pause",error:s.value==="error"},null,8,["modelValue","theme","pause","error"]),r(" "+u(p.value)+"% ",1),T,l(c,{indeterminate:!0,pause:s.value==="pause",error:s.value==="error",theme:o(t)},null,8,["pause","error","theme"]),I,l(c,{"pause-foreground":"rgba(229, 0, 249, 1)","error-foreground":"rgba(249, 201, 0, 1)",indeterminate:!0,pause:s.value==="pause",error:s.value==="error",theme:o(t),foreground:"rgba(0, 204, 153, 1)"},null,8,["pause","error","theme"]),B,l(c,{"pause-foreground":"rgba(229, 0, 249, 1)","error-foreground":"rgba(249, 201, 0, 1)",background:"rgba(0,0,0,1)",modelValue:p.value,"onUpdate:modelValue":e[4]||(e[4]=n=>p.value=n),max:100,theme:o(t),pause:s.value==="pause",error:s.value==="error",foreground:"rgba(0, 204, 153, 1)"},null,8,["modelValue","theme","pause","error"]),r(" "+u(p.value)+"% ",1),L,l(c,{width:100,"border-width":8,indeterminate:!0,pause:s.value==="pause",error:s.value==="error",theme:o(t)},null,8,["pause","error","theme"]),Q])}}});export{j as __pageData,G as default};
diff --git a/assets/guide_components_progress-ring_index.md.CPb-ZEPE.js b/assets/guide_components_progress-ring_index.md.CPb-ZEPE.js
new file mode 100644
index 0000000..e14c6cd
--- /dev/null
+++ b/assets/guide_components_progress-ring_index.md.CPb-ZEPE.js
@@ -0,0 +1,27 @@
+import{_ as d,q as g,Y as s,z as e,H as r,u as E,aq as n,S as k,p as o}from"./chunks/framework.DvIFzl91.js";const u={data(){return{percent:[10,20,30,35]}},mounted(){setInterval(()=>{for(let h of this.percent){let a=this.percent.indexOf(h);this.percent[a]=Math.ceil(Math.random()*100)}},3e3)}},S=JSON.parse('{"title":"ProgressRing","description":"","frontmatter":{"page":true,"title":"ProgressRing"},"headers":[],"relativePath":"guide/components/progress-ring/index.md","filePath":"guide/components/progress-ring/index.md"}'),c=r("h3",{id:"progressring-demo",tabindex:"-1"},[E("ProgressRing-DEMO "),r("a",{class:"header-anchor",href:"#progressring-demo","aria-label":'Permalink to "ProgressRing-DEMO"'},"​")],-1),y=r("hr",null,null,-1),b=n(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-progressRing</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> loading</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;true&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-progressRing</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div>`,1),_=n(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-progressRing</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> loading</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;true&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> r</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;20&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> borderWidth</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;5&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-progressRing</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div>`,1),F=n(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-progressRing</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> loading</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;true&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> r</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;10&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> borderWidth</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;2&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-progressRing</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="default-progressring" tabindex="-1">Default ProgressRing <a class="header-anchor" href="#default-progressring" aria-label="Permalink to &quot;Default ProgressRing&quot;">​</a></h3><hr>`,3),m=n(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-progressRing</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">percent[</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-progressRing</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div>`,1),v=n(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-progressRing</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">percent[</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> r</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;20&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> borderWidth</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;5&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-progressRing</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div>`,1),C=n(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-progressRing</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">percent[</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> r</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;10&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> borderWidth</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;2&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-progressRing</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="indeterminate-progressring" tabindex="-1">Indeterminate ProgressRing <a class="header-anchor" href="#indeterminate-progressring" aria-label="Permalink to &quot;Indeterminate ProgressRing&quot;">​</a></h3><hr>`,3),f=n(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-progressRing</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> loading</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;true&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-progressRing</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="progressring-legacy" tabindex="-1">ProgressRing Legacy <a class="header-anchor" href="#progressring-legacy" aria-label="Permalink to &quot;ProgressRing Legacy&quot;">​</a></h3><hr>`,3),B=n(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-progressRing</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">legacy</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-progressRing</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="different-size-legacy" tabindex="-1">Different Size(Legacy) <a class="header-anchor" href="#different-size-legacy" aria-label="Permalink to &quot;Different Size(Legacy)&quot;">​</a></h3><hr>`,3),q=n(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">ClientOnly</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;fv-progressRing size=&quot;xs&quot; :legacy=&quot;true&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/fv-progressRing&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">ClientOnly</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-progressRing</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> size</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;s&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">legacy</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-progressRing</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">ClientOnly</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;fv-progressRing size=&quot;m&quot; :legacy=&quot;true&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/fv-progressRing&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">ClientOnly</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-progressRing</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> size</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;l&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">legacy</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-progressRing</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br></div></div><h3 id="progressbar-custom-style" tabindex="-1">ProgressBar Custom Style <a class="header-anchor" href="#progressbar-custom-style" aria-label="Permalink to &quot;ProgressBar Custom Style&quot;">​</a></h3><hr><ol><li>Custom Foreground</li></ol>`,4),T=n(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-progressRing</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">percent[</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rgba(0, 204, 153, 1)&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-progressRing</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><ol start="2"><li>Custom Background</li></ol>`,2),x=n(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-progressRing</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">percent[</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">3</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rgba(0, 204, 153, 0.6)&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-progressRing</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">value</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">0</td><td style="text-align:center;">progressRing value</td></tr><tr><td style="text-align:center;">size</td><td style="text-align:center;">[&#39;l&#39;,&#39;m&#39;,&#39;s&#39;,&#39;xs&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">xs</td><td style="text-align:center;">The size of progress ring, only works on legacy versions</td></tr><tr><td style="text-align:center;">r</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">40</td><td style="text-align:center;">Radius of the ProgressRing</td></tr><tr><td style="text-align:center;">loading</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">Is progressRing indeterminate</td></tr><tr><td style="text-align:center;">color</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">rgba(0, 90, 158, 1)</td><td style="text-align:center;">The color of progress ring</td></tr><tr><td style="text-align:center;">background</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">rgba(204, 204, 204, 1)</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">borderWidth</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">8</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">legacy</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">Use the legacy version of ProgressRing</td></tr></tbody></table>`,4);function A(h,a,R,P,l,D){const i=k("fv-progressRing"),t=k("ClientOnly");return o(),g("div",null,[c,y,s(t,null,{default:e(()=>[s(i,{loading:"true"})]),_:1}),b,s(t,null,{default:e(()=>[s(i,{loading:"true",r:"20",borderWidth:"5"})]),_:1}),_,s(t,null,{default:e(()=>[s(i,{loading:"true",r:"10",borderWidth:"2"})]),_:1}),F,s(t,null,{default:e(()=>[s(i,{modelValue:l.percent[0],"onUpdate:modelValue":a[0]||(a[0]=p=>l.percent[0]=p)},null,8,["modelValue"])]),_:1}),m,s(t,null,{default:e(()=>[s(i,{modelValue:l.percent[0],"onUpdate:modelValue":a[1]||(a[1]=p=>l.percent[0]=p),r:"20",borderWidth:"5"},null,8,["modelValue"])]),_:1}),v,s(t,null,{default:e(()=>[s(i,{modelValue:l.percent[0],"onUpdate:modelValue":a[2]||(a[2]=p=>l.percent[0]=p),r:"10",borderWidth:"2"},null,8,["modelValue"])]),_:1}),C,s(t,null,{default:e(()=>[s(i,{loading:"true"})]),_:1}),f,s(t,null,{default:e(()=>[s(i,{legacy:!0})]),_:1}),B,s(t,null,{default:e(()=>[s(i,{size:"xs",legacy:!0})]),_:1}),s(i,{size:"s",legacy:!0}),s(t,null,{default:e(()=>[s(i,{size:"m",legacy:!0})]),_:1}),s(i,{size:"l",legacy:!0}),q,s(t,null,{default:e(()=>[s(i,{modelValue:l.percent[2],"onUpdate:modelValue":a[3]||(a[3]=p=>l.percent[2]=p),color:"rgba(0, 204, 153, 1)"},null,8,["modelValue"])]),_:1}),T,s(t,null,{default:e(()=>[s(i,{modelValue:l.percent[3],"onUpdate:modelValue":a[4]||(a[4]=p=>l.percent[3]=p),background:"rgba(0, 204, 153, 0.6)"},null,8,["modelValue"])]),_:1}),x])}const N=d(u,[["render",A]]);export{S as __pageData,N as default};
diff --git a/assets/guide_components_progress-ring_index.md.CPb-ZEPE.lean.js b/assets/guide_components_progress-ring_index.md.CPb-ZEPE.lean.js
new file mode 100644
index 0000000..e76b773
--- /dev/null
+++ b/assets/guide_components_progress-ring_index.md.CPb-ZEPE.lean.js
@@ -0,0 +1 @@
+import{_ as d,q as g,Y as s,z as e,H as r,u as E,aq as n,S as k,p as o}from"./chunks/framework.DvIFzl91.js";const u={data(){return{percent:[10,20,30,35]}},mounted(){setInterval(()=>{for(let h of this.percent){let a=this.percent.indexOf(h);this.percent[a]=Math.ceil(Math.random()*100)}},3e3)}},S=JSON.parse('{"title":"ProgressRing","description":"","frontmatter":{"page":true,"title":"ProgressRing"},"headers":[],"relativePath":"guide/components/progress-ring/index.md","filePath":"guide/components/progress-ring/index.md"}'),c=r("h3",{id:"progressring-demo",tabindex:"-1"},[E("ProgressRing-DEMO "),r("a",{class:"header-anchor",href:"#progressring-demo","aria-label":'Permalink to "ProgressRing-DEMO"'},"​")],-1),y=r("hr",null,null,-1),b=n("",1),_=n("",1),F=n("",3),m=n("",1),v=n("",1),C=n("",3),f=n("",3),B=n("",3),q=n("",4),T=n("",2),x=n("",4);function A(h,a,R,P,l,D){const i=k("fv-progressRing"),t=k("ClientOnly");return o(),g("div",null,[c,y,s(t,null,{default:e(()=>[s(i,{loading:"true"})]),_:1}),b,s(t,null,{default:e(()=>[s(i,{loading:"true",r:"20",borderWidth:"5"})]),_:1}),_,s(t,null,{default:e(()=>[s(i,{loading:"true",r:"10",borderWidth:"2"})]),_:1}),F,s(t,null,{default:e(()=>[s(i,{modelValue:l.percent[0],"onUpdate:modelValue":a[0]||(a[0]=p=>l.percent[0]=p)},null,8,["modelValue"])]),_:1}),m,s(t,null,{default:e(()=>[s(i,{modelValue:l.percent[0],"onUpdate:modelValue":a[1]||(a[1]=p=>l.percent[0]=p),r:"20",borderWidth:"5"},null,8,["modelValue"])]),_:1}),v,s(t,null,{default:e(()=>[s(i,{modelValue:l.percent[0],"onUpdate:modelValue":a[2]||(a[2]=p=>l.percent[0]=p),r:"10",borderWidth:"2"},null,8,["modelValue"])]),_:1}),C,s(t,null,{default:e(()=>[s(i,{loading:"true"})]),_:1}),f,s(t,null,{default:e(()=>[s(i,{legacy:!0})]),_:1}),B,s(t,null,{default:e(()=>[s(i,{size:"xs",legacy:!0})]),_:1}),s(i,{size:"s",legacy:!0}),s(t,null,{default:e(()=>[s(i,{size:"m",legacy:!0})]),_:1}),s(i,{size:"l",legacy:!0}),q,s(t,null,{default:e(()=>[s(i,{modelValue:l.percent[2],"onUpdate:modelValue":a[3]||(a[3]=p=>l.percent[2]=p),color:"rgba(0, 204, 153, 1)"},null,8,["modelValue"])]),_:1}),T,s(t,null,{default:e(()=>[s(i,{modelValue:l.percent[3],"onUpdate:modelValue":a[4]||(a[4]=p=>l.percent[3]=p),background:"rgba(0, 204, 153, 0.6)"},null,8,["modelValue"])]),_:1}),x])}const N=d(u,[["render",A]]);export{S as __pageData,N as default};
diff --git a/assets/guide_components_progress-ring_properties.md.Dc08Uiff.js b/assets/guide_components_progress-ring_properties.md.Dc08Uiff.js
new file mode 100644
index 0000000..e61ddc9
--- /dev/null
+++ b/assets/guide_components_progress-ring_properties.md.Dc08Uiff.js
@@ -0,0 +1 @@
+import{_ as t,q as e,p as n,aq as r}from"./chunks/framework.DvIFzl91.js";const h=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/components/progress-ring/properties.md","filePath":"guide/components/progress-ring/properties.md"}'),l={name:"guide/components/progress-ring/properties.md"},d=r('<h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-label="Permalink to &quot;Properties&quot;">​</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">border-width</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">5</td><td style="text-align:center;">circle border width</td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">disabled</td></tr><tr><td style="text-align:center;">error</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">error state</td></tr><tr><td style="text-align:center;">error-foreground</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">error state circle color</td></tr><tr><td style="text-align:center;">foreground</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">circle color</td></tr><tr><td style="text-align:center;">indeterminate</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">indeterminate state</td></tr><tr><td style="text-align:center;">lang</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">i18n</td></tr><tr><td style="text-align:center;">max</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">100</td><td style="text-align:center;">same as progress max property</td></tr><tr><td style="text-align:center;">model-value</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">v-model</td></tr><tr><td style="text-align:center;">pause</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">pause state</td></tr><tr><td style="text-align:center;">pause-foreground</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">pause state circle color</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">[&#39;light&#39;, &#39;dark&#39;, &#39;global&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">theme</td></tr><tr><td style="text-align:center;">width</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">60</td><td style="text-align:center;">circle width</td></tr></tbody></table>',3),a=[d];function s(i,c,g,o,x,y){return n(),e("div",null,a)}const u=t(l,[["render",s]]);export{h as __pageData,u as default};
diff --git a/assets/guide_components_progress-ring_properties.md.Dc08Uiff.lean.js b/assets/guide_components_progress-ring_properties.md.Dc08Uiff.lean.js
new file mode 100644
index 0000000..69aedbb
--- /dev/null
+++ b/assets/guide_components_progress-ring_properties.md.Dc08Uiff.lean.js
@@ -0,0 +1 @@
+import{_ as t,q as e,p as n,aq as r}from"./chunks/framework.DvIFzl91.js";const h=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/components/progress-ring/properties.md","filePath":"guide/components/progress-ring/properties.md"}'),l={name:"guide/components/progress-ring/properties.md"},d=r("",3),a=[d];function s(i,c,g,o,x,y){return n(),e("div",null,a)}const u=t(l,[["render",s]]);export{h as __pageData,u as default};
diff --git a/assets/guide_components_progress-ring_properties.md.c897c4bb.js b/assets/guide_components_progress-ring_properties.md.c897c4bb.js
deleted file mode 100644
index 1c051a5..0000000
--- a/assets/guide_components_progress-ring_properties.md.c897c4bb.js
+++ /dev/null
@@ -1 +0,0 @@
-import{_ as t,c as e,o as n,a as r}from"./app.d60fa8c3.js";const h=JSON.parse('{"title":"Properties","description":"","frontmatter":{},"headers":[{"level":2,"title":"Properties","slug":"properties"}],"relativePath":"guide/components/progress-ring/properties.md"}'),l={name:"guide/components/progress-ring/properties.md"},d=r('<h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">border-width</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">5</td><td style="text-align:center;">circle border width</td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">disabled</td></tr><tr><td style="text-align:center;">error</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">error state</td></tr><tr><td style="text-align:center;">error-foreground</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">error state circle color</td></tr><tr><td style="text-align:center;">foreground</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">circle color</td></tr><tr><td style="text-align:center;">indeterminate</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">indeterminate state</td></tr><tr><td style="text-align:center;">lang</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">i18n</td></tr><tr><td style="text-align:center;">max</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">100</td><td style="text-align:center;">same as progress max property</td></tr><tr><td style="text-align:center;">model-value</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">v-model</td></tr><tr><td style="text-align:center;">pause</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">pause state</td></tr><tr><td style="text-align:center;">pause-foreground</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">pause state circle color</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">[&#39;light&#39;, &#39;dark&#39;, &#39;global&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">theme</td></tr><tr><td style="text-align:center;">width</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">60</td><td style="text-align:center;">circle width</td></tr></tbody></table>',3),a=[d];function s(i,c,g,o,x,y){return n(),e("div",null,a)}var u=t(l,[["render",s]]);export{h as __pageData,u as default};
diff --git a/assets/guide_components_progress-ring_properties.md.c897c4bb.lean.js b/assets/guide_components_progress-ring_properties.md.c897c4bb.lean.js
deleted file mode 100644
index 992375b..0000000
--- a/assets/guide_components_progress-ring_properties.md.c897c4bb.lean.js
+++ /dev/null
@@ -1 +0,0 @@
-import{_ as t,c as e,o as n,a as r}from"./app.d60fa8c3.js";const h=JSON.parse('{"title":"Properties","description":"","frontmatter":{},"headers":[{"level":2,"title":"Properties","slug":"properties"}],"relativePath":"guide/components/progress-ring/properties.md"}'),l={name:"guide/components/progress-ring/properties.md"},d=r("",3),a=[d];function s(i,c,g,o,x,y){return n(),e("div",null,a)}var u=t(l,[["render",s]]);export{h as __pageData,u as default};
diff --git a/assets/guide_components_radio-group_emits.md.cEDzKVnN.js b/assets/guide_components_radio-group_emits.md.cEDzKVnN.js
new file mode 100644
index 0000000..e3a82a7
--- /dev/null
+++ b/assets/guide_components_radio-group_emits.md.cEDzKVnN.js
@@ -0,0 +1 @@
+import{_ as t,q as e,p as a,aq as s}from"./chunks/framework.DvIFzl91.js";const u=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/components/radio-group/emits.md","filePath":"guide/components/radio-group/emits.md"}'),o={name:"guide/components/radio-group/emits.md"},r=s('<h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-label="Permalink to &quot;Emits&quot;">​</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead></table>',3),i=[r];function n(_,c,m,d,l,h){return a(),e("div",null,i)}const g=t(o,[["render",n]]);export{u as __pageData,g as default};
diff --git a/assets/guide_components_radio-group_emits.md.cEDzKVnN.lean.js b/assets/guide_components_radio-group_emits.md.cEDzKVnN.lean.js
new file mode 100644
index 0000000..8aafef5
--- /dev/null
+++ b/assets/guide_components_radio-group_emits.md.cEDzKVnN.lean.js
@@ -0,0 +1 @@
+import{_ as t,q as e,p as a,aq as s}from"./chunks/framework.DvIFzl91.js";const u=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/components/radio-group/emits.md","filePath":"guide/components/radio-group/emits.md"}'),o={name:"guide/components/radio-group/emits.md"},r=s("",3),i=[r];function n(_,c,m,d,l,h){return a(),e("div",null,i)}const g=t(o,[["render",n]]);export{u as __pageData,g as default};
diff --git a/assets/guide_components_radio-group_index.md.CVfh3h5H.js b/assets/guide_components_radio-group_index.md.CVfh3h5H.js
new file mode 100644
index 0000000..95c3823
--- /dev/null
+++ b/assets/guide_components_radio-group_index.md.CVfh3h5H.js
@@ -0,0 +1,33 @@
+import{_ as c,q as g,Y as s,z as i,H as n,v as b,u as t,aq as r,S as d,p as y}from"./chunks/framework.DvIFzl91.js";const v={data(){return{value:"option",label:""}},methods:{change(k){this.label=k}}},w=JSON.parse('{"title":"RadioGroup","description":"","frontmatter":{"page":true,"title":"RadioGroup"},"headers":[],"relativePath":"guide/components/radio-group/index.md","filePath":"guide/components/radio-group/index.md"}'),_=n("h3",{id:"radiogroup-demo",tabindex:"-1"},[t("RadioGroup-DEMO "),n("a",{class:"header-anchor",href:"#radiogroup-demo","aria-label":'Permalink to "RadioGroup-DEMO"'},"​")],-1),m=n("hr",null,null,-1),q={class:"row-block"},f={class:"row-block"},F=r(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-radioGroup</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">value</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Options:&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;div class=&quot;row-block&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;fv-radio label=&quot;option1&quot;&gt;Option1&lt;/fv-radio&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;fv-radio label=&quot;option2&quot;&gt;Option2&lt;/fv-radio&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/div&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;div class=&quot;row-block&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;fv-radio label=&quot;option3&quot;&gt;Option3&lt;/fv-radio&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/div&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-radioGroup</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><h3 id="radiogroup-inline" tabindex="-1">RadioGroup inline <a class="header-anchor" href="#radiogroup-inline" aria-label="Permalink to &quot;RadioGroup inline&quot;">​</a></h3><hr>`,3),C=r(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-radioGroup</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">value</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Options:&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> inline</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;fv-radio label=&quot;option1&quot;&gt;Option1&lt;/fv-radio&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;fv-radio label=&quot;option2&quot;&gt;Option2&lt;/fv-radio&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-radioGroup</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h3 id="radio-icon" tabindex="-1">Radio Icon <a class="header-anchor" href="#radio-icon" aria-label="Permalink to &quot;Radio Icon&quot;">​</a></h3><hr>`,3),x={class:"row-block"},O=r(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-radio-group</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">value</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Options:&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;div class=&quot;row-block&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;fv-radio label=&quot;option1&quot; icon=&quot;QuickNote&quot;&gt;Option1&lt;/fv-radio&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;fv-radio label=&quot;option2&quot; icon=&quot;QuickNote&quot;&gt;Option2&lt;/fv-radio&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;fv-radio label=&quot;option3&quot; icon=&quot;QuickNote&quot;&gt;Option3&lt;/fv-radio&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/div&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-radio-group</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h3 id="radio-icon-dark-inline" tabindex="-1">Radio Icon Dark inline <a class="header-anchor" href="#radio-icon-dark-inline" aria-label="Permalink to &quot;Radio Icon Dark inline&quot;">​</a></h3><hr>`,3),N=r(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-radio-group</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">value</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Options:&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;dark&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> inline</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> @</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">change</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">change</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;fv-radio label=&quot;option1&quot; icon=&quot;QuickNote&quot;&gt;Option1&lt;/fv-radio&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;fv-radio label=&quot;option2&quot; icon=&quot;QuickNote&quot;&gt;Option2&lt;/fv-radio&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;fv-radio label=&quot;option3&quot; icon=&quot;QuickNote&quot;&gt;Option3&lt;/fv-radio&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-radio-group</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div>`,1),B=n("h3",{id:"radio-icon-dark-disabled",tabindex:"-1"},[t("Radio Icon Dark Disabled "),n("a",{class:"header-anchor",href:"#radio-icon-dark-disabled","aria-label":'Permalink to "Radio Icon Dark Disabled"'},"​")],-1),T=n("hr",null,null,-1),V={class:"row-block"},A={class:"row-block"},D=r(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-radio-group</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">value</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Options:&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  disabled</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;div class=&quot;row-block&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;fv-radio label=&quot;option1&quot; icon=&quot;QuickNote&quot;&gt;Option1&lt;/fv-radio&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;fv-radio label=&quot;option2&quot; icon=&quot;QuickNote&quot;&gt;Option2&lt;/fv-radio&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;fv-radio label=&quot;option3&quot; icon=&quot;QuickNote&quot;&gt;Option3&lt;/fv-radio&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/div&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;div class=&quot;row-block&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;fv-radio label=&quot;option4&quot; icon=&quot;QuickNote&quot;&gt;Option4&lt;/fv-radio&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;fv-radio label=&quot;option5&quot; icon=&quot;QuickNote&quot;&gt;Option5&lt;/fv-radio&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;fv-radio label=&quot;option6&quot; icon=&quot;QuickNote&quot;&gt;Option6&lt;/fv-radio&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/div&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-radio-group</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">v-model</td><td style="text-align:center;">Object</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">选中值</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">[&#39;system&#39;,&#39;dark&#39;,&#39;light&#39;,&#39;custom&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;system&#39;</td><td style="text-align:center;">主题色</td></tr><tr><td style="text-align:center;">label</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">标签</td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否禁用</td></tr><tr><td style="text-align:center;">inline</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;"></td></tr></tbody></table><h3 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to &quot;Events&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">事件名(Name)</th><th style="text-align:center;">参数类型(args)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">change</td><td style="text-align:center;">event(value,...)</td><td style="text-align:center;">选项值改变时触发</td></tr></tbody></table>`,7);function Q(k,e,P,S,l,E){const a=d("fv-radio"),u=d("fv-radioGroup"),p=d("ClientOnly"),h=d("fv-radio-group");return y(),g("div",null,[_,m,s(p,null,{default:i(()=>[s(u,{modelValue:l.value,"onUpdate:modelValue":e[0]||(e[0]=o=>l.value=o),label:"Options:"},{default:i(()=>[n("div",q,[s(a,{label:"option1"},{default:i(()=>[t("Option1")]),_:1}),s(a,{label:"option2"},{default:i(()=>[t("Option2")]),_:1})]),n("div",f,[s(a,{label:"option3"},{default:i(()=>[t("Option3")]),_:1})])]),_:1},8,["modelValue"])]),_:1}),F,s(p,null,{default:i(()=>[s(u,{modelValue:l.value,"onUpdate:modelValue":e[1]||(e[1]=o=>l.value=o),label:"Options:",inline:""},{default:i(()=>[s(a,{label:"option1"},{default:i(()=>[t("Option1")]),_:1}),s(a,{label:"option2"},{default:i(()=>[t("Option2")]),_:1})]),_:1},8,["modelValue"])]),_:1}),C,s(p,null,{default:i(()=>[s(h,{modelValue:l.value,"onUpdate:modelValue":e[2]||(e[2]=o=>l.value=o),label:"Options:"},{default:i(()=>[n("div",x,[s(a,{label:"option1",icon:"QuickNote"},{default:i(()=>[t("Option1")]),_:1}),s(a,{label:"option2",icon:"QuickNote"},{default:i(()=>[t("Option2")]),_:1}),s(a,{label:"option3",icon:"QuickNote"},{default:i(()=>[t("Option3")]),_:1})])]),_:1},8,["modelValue"])]),_:1}),O,s(p,null,{default:i(()=>[s(h,{modelValue:l.value,"onUpdate:modelValue":e[3]||(e[3]=o=>l.value=o),label:"Options:",theme:"dark",inline:"",onChange:E.change},{default:i(()=>[s(a,{label:"option1",icon:"QuickNote"},{default:i(()=>[t("Option1")]),_:1}),s(a,{label:"option2",icon:"QuickNote"},{default:i(()=>[t("Option2")]),_:1}),s(a,{label:"option3",icon:"QuickNote"},{default:i(()=>[t("Option3")]),_:1})]),_:1},8,["modelValue","onChange"])]),_:1}),N,n("p",null,b(l.label),1),B,T,s(p,null,{default:i(()=>[s(h,{modelValue:l.value,"onUpdate:modelValue":e[4]||(e[4]=o=>l.value=o),label:"Options:",disabled:""},{default:i(()=>[n("div",V,[s(a,{label:"option1",icon:"QuickNote"},{default:i(()=>[t("Option1")]),_:1}),s(a,{label:"option2",icon:"QuickNote"},{default:i(()=>[t("Option2")]),_:1}),s(a,{label:"option3",icon:"QuickNote"},{default:i(()=>[t("Option3")]),_:1})]),n("div",A,[s(a,{label:"option4",icon:"QuickNote"},{default:i(()=>[t("Option4")]),_:1}),s(a,{label:"option5",icon:"QuickNote"},{default:i(()=>[t("Option5")]),_:1}),s(a,{label:"option6",icon:"QuickNote"},{default:i(()=>[t("Option6")]),_:1})])]),_:1},8,["modelValue"])]),_:1}),D])}const I=c(v,[["render",Q]]);export{w as __pageData,I as default};
diff --git a/assets/guide_components_radio-group_index.md.CVfh3h5H.lean.js b/assets/guide_components_radio-group_index.md.CVfh3h5H.lean.js
new file mode 100644
index 0000000..93d9133
--- /dev/null
+++ b/assets/guide_components_radio-group_index.md.CVfh3h5H.lean.js
@@ -0,0 +1 @@
+import{_ as c,q as g,Y as s,z as i,H as n,v as b,u as t,aq as r,S as d,p as y}from"./chunks/framework.DvIFzl91.js";const v={data(){return{value:"option",label:""}},methods:{change(k){this.label=k}}},w=JSON.parse('{"title":"RadioGroup","description":"","frontmatter":{"page":true,"title":"RadioGroup"},"headers":[],"relativePath":"guide/components/radio-group/index.md","filePath":"guide/components/radio-group/index.md"}'),_=n("h3",{id:"radiogroup-demo",tabindex:"-1"},[t("RadioGroup-DEMO "),n("a",{class:"header-anchor",href:"#radiogroup-demo","aria-label":'Permalink to "RadioGroup-DEMO"'},"​")],-1),m=n("hr",null,null,-1),q={class:"row-block"},f={class:"row-block"},F=r("",3),C=r("",3),x={class:"row-block"},O=r("",3),N=r("",1),B=n("h3",{id:"radio-icon-dark-disabled",tabindex:"-1"},[t("Radio Icon Dark Disabled "),n("a",{class:"header-anchor",href:"#radio-icon-dark-disabled","aria-label":'Permalink to "Radio Icon Dark Disabled"'},"​")],-1),T=n("hr",null,null,-1),V={class:"row-block"},A={class:"row-block"},D=r("",7);function Q(k,e,P,S,l,E){const a=d("fv-radio"),u=d("fv-radioGroup"),p=d("ClientOnly"),h=d("fv-radio-group");return y(),g("div",null,[_,m,s(p,null,{default:i(()=>[s(u,{modelValue:l.value,"onUpdate:modelValue":e[0]||(e[0]=o=>l.value=o),label:"Options:"},{default:i(()=>[n("div",q,[s(a,{label:"option1"},{default:i(()=>[t("Option1")]),_:1}),s(a,{label:"option2"},{default:i(()=>[t("Option2")]),_:1})]),n("div",f,[s(a,{label:"option3"},{default:i(()=>[t("Option3")]),_:1})])]),_:1},8,["modelValue"])]),_:1}),F,s(p,null,{default:i(()=>[s(u,{modelValue:l.value,"onUpdate:modelValue":e[1]||(e[1]=o=>l.value=o),label:"Options:",inline:""},{default:i(()=>[s(a,{label:"option1"},{default:i(()=>[t("Option1")]),_:1}),s(a,{label:"option2"},{default:i(()=>[t("Option2")]),_:1})]),_:1},8,["modelValue"])]),_:1}),C,s(p,null,{default:i(()=>[s(h,{modelValue:l.value,"onUpdate:modelValue":e[2]||(e[2]=o=>l.value=o),label:"Options:"},{default:i(()=>[n("div",x,[s(a,{label:"option1",icon:"QuickNote"},{default:i(()=>[t("Option1")]),_:1}),s(a,{label:"option2",icon:"QuickNote"},{default:i(()=>[t("Option2")]),_:1}),s(a,{label:"option3",icon:"QuickNote"},{default:i(()=>[t("Option3")]),_:1})])]),_:1},8,["modelValue"])]),_:1}),O,s(p,null,{default:i(()=>[s(h,{modelValue:l.value,"onUpdate:modelValue":e[3]||(e[3]=o=>l.value=o),label:"Options:",theme:"dark",inline:"",onChange:E.change},{default:i(()=>[s(a,{label:"option1",icon:"QuickNote"},{default:i(()=>[t("Option1")]),_:1}),s(a,{label:"option2",icon:"QuickNote"},{default:i(()=>[t("Option2")]),_:1}),s(a,{label:"option3",icon:"QuickNote"},{default:i(()=>[t("Option3")]),_:1})]),_:1},8,["modelValue","onChange"])]),_:1}),N,n("p",null,b(l.label),1),B,T,s(p,null,{default:i(()=>[s(h,{modelValue:l.value,"onUpdate:modelValue":e[4]||(e[4]=o=>l.value=o),label:"Options:",disabled:""},{default:i(()=>[n("div",V,[s(a,{label:"option1",icon:"QuickNote"},{default:i(()=>[t("Option1")]),_:1}),s(a,{label:"option2",icon:"QuickNote"},{default:i(()=>[t("Option2")]),_:1}),s(a,{label:"option3",icon:"QuickNote"},{default:i(()=>[t("Option3")]),_:1})]),n("div",A,[s(a,{label:"option4",icon:"QuickNote"},{default:i(()=>[t("Option4")]),_:1}),s(a,{label:"option5",icon:"QuickNote"},{default:i(()=>[t("Option5")]),_:1}),s(a,{label:"option6",icon:"QuickNote"},{default:i(()=>[t("Option6")]),_:1})])]),_:1},8,["modelValue"])]),_:1}),D])}const I=c(v,[["render",Q]]);export{w as __pageData,I as default};
diff --git a/assets/guide_components_radio-group_properties.md.BnPxoKsQ.js b/assets/guide_components_radio-group_properties.md.BnPxoKsQ.js
new file mode 100644
index 0000000..2840987
--- /dev/null
+++ b/assets/guide_components_radio-group_properties.md.BnPxoKsQ.js
@@ -0,0 +1 @@
+import{_ as e,q as t,p as r,aq as a}from"./chunks/framework.DvIFzl91.js";const m=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/components/radio-group/properties.md","filePath":"guide/components/radio-group/properties.md"}'),o={name:"guide/components/radio-group/properties.md"},s=a('<h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-label="Permalink to &quot;Properties&quot;">​</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead></table>',3),n=[s];function i(p,c,_,l,d,h){return r(),t("div",null,n)}const g=e(o,[["render",i]]);export{m as __pageData,g as default};
diff --git a/assets/guide_components_radio-group_properties.md.BnPxoKsQ.lean.js b/assets/guide_components_radio-group_properties.md.BnPxoKsQ.lean.js
new file mode 100644
index 0000000..fd9c198
--- /dev/null
+++ b/assets/guide_components_radio-group_properties.md.BnPxoKsQ.lean.js
@@ -0,0 +1 @@
+import{_ as e,q as t,p as r,aq as a}from"./chunks/framework.DvIFzl91.js";const m=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/components/radio-group/properties.md","filePath":"guide/components/radio-group/properties.md"}'),o={name:"guide/components/radio-group/properties.md"},s=a("",3),n=[s];function i(p,c,_,l,d,h){return r(),t("div",null,n)}const g=e(o,[["render",i]]);export{m as __pageData,g as default};
diff --git a/assets/guide_components_radio_emits.md.28506857.js b/assets/guide_components_radio_emits.md.28506857.js
deleted file mode 100644
index c872a30..0000000
--- a/assets/guide_components_radio_emits.md.28506857.js
+++ /dev/null
@@ -1 +0,0 @@
-import{_ as t,c as e,o as n,a}from"./app.d60fa8c3.js";const x=JSON.parse('{"title":"Emits","description":"","frontmatter":{},"headers":[{"level":2,"title":"Emits","slug":"emits"}],"relativePath":"guide/components/radio/emits.md"}'),l={name:"guide/components/radio/emits.md"},r=a('<h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">blur</td><td style="text-align:center;">evt[FocusEvent]</td><td style="text-align:center;">onblur</td></tr><tr><td style="text-align:center;">change</td><td style="text-align:center;">val[boolean, null]</td><td style="text-align:center;">onchange</td></tr><tr><td style="text-align:center;">click</td><td style="text-align:center;">val[boolean, null]</td><td style="text-align:center;">onclick</td></tr><tr><td style="text-align:center;">focus</td><td style="text-align:center;">evt[FocusEvent]</td><td style="text-align:center;">onfocus</td></tr><tr><td style="text-align:center;">update:model-value</td><td style="text-align:center;">val[boolean]</td><td style="text-align:center;">v-model</td></tr></tbody></table>',3),d=[r];function s(i,c,o,_,g,m){return n(),e("div",null,d)}var u=t(l,[["render",s]]);export{x as __pageData,u as default};
diff --git a/assets/guide_components_radio_emits.md.28506857.lean.js b/assets/guide_components_radio_emits.md.28506857.lean.js
deleted file mode 100644
index b99721d..0000000
--- a/assets/guide_components_radio_emits.md.28506857.lean.js
+++ /dev/null
@@ -1 +0,0 @@
-import{_ as t,c as e,o as n,a}from"./app.d60fa8c3.js";const x=JSON.parse('{"title":"Emits","description":"","frontmatter":{},"headers":[{"level":2,"title":"Emits","slug":"emits"}],"relativePath":"guide/components/radio/emits.md"}'),l={name:"guide/components/radio/emits.md"},r=a("",3),d=[r];function s(i,c,o,_,g,m){return n(),e("div",null,d)}var u=t(l,[["render",s]]);export{x as __pageData,u as default};
diff --git a/assets/guide_components_radio_index.md.90as5QGp.js b/assets/guide_components_radio_index.md.90as5QGp.js
new file mode 100644
index 0000000..f856ce1
--- /dev/null
+++ b/assets/guide_components_radio_index.md.90as5QGp.js
@@ -0,0 +1,26 @@
+import{_ as o,q as k,Y as a,z as e,H as h,aq as d,S as p,p as u,u as n}from"./chunks/framework.DvIFzl91.js";const E={data(){return{value:"Option"}},methods:{active(){++this.status}}},B=JSON.parse('{"title":"Radio","description":"","frontmatter":{"page":true,"title":"Radio"},"headers":[],"relativePath":"guide/components/radio/index.md","filePath":"guide/components/radio/index.md"}'),g=d('<nav class="table-of-contents"><ul><li><a href="#radio">Radio</a></li><li><a href="#radio-dark">Radio-Dark</a></li><li><a href="#radio-with-icon">Radio With Icon</a></li><li><a href="#radio-with-image">Radio With Image</a></li><li><a href="#radio-dark-with-icon">Radio-Dark With Icon</a></li><li><a href="#radio-custom-color">Radio Custom Color</a></li><li><a href="#propoties">Propoties</a></li><li><a href="#events">Events</a></li></ul></nav><h3 id="radio" tabindex="-1">Radio <a class="header-anchor" href="#radio" aria-label="Permalink to &quot;Radio&quot;">​</a></h3><hr>',3),c=d(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;fv-radio v-model=&quot;value&quot; label=&quot;Option&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">Option</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/fv-radio&gt; </span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;fv-radio v-model=&quot;value&quot; label=&quot;Option2&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">Option2</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/fv-radio&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;fv-radio label=&quot;Option3&quot; disabled&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">Disabled</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/fv-radio&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><h3 id="radio-dark" tabindex="-1">Radio-Dark <a class="header-anchor" href="#radio-dark" aria-label="Permalink to &quot;Radio-Dark&quot;">​</a></h3><hr>`,3),y={style:{background:"#000",height:"30px",padding:"20px"}},b=d(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#000</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">30</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">padding</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">20</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;fv-radio v-model=&quot;value&quot; label=&quot;Option&quot; theme=&quot;dark&quot;&gt;Option&lt;/fv-radio&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;fv-radio v-model=&quot;value&quot; label=&quot;Option2&quot; theme=&quot;dark&quot; disabled&gt;Disabled&lt;/fv-radio&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h3 id="radio-with-icon" tabindex="-1">Radio With Icon <a class="header-anchor" href="#radio-with-icon" aria-label="Permalink to &quot;Radio With Icon&quot;">​</a></h3><hr>`,3),m=d(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;fv-radio v-model=&quot;value&quot; label=&quot;NUIIris&quot; icon=&quot;NUIIris&quot;&gt;NUIIris&lt;/fv-radio&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;fv-radio v-model=&quot;value&quot; label=&quot;MSN&quot; icon=&quot;NUIFace&quot; &gt;MSN&lt;/fv-radio&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;fv-radio v-model=&quot;value&quot; label=&quot;MSN&quot; icon=&quot;NUIFace&quot; disabled &gt;Disabled&lt;/fv-radio&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h3 id="radio-with-image" tabindex="-1">Radio With Image <a class="header-anchor" href="#radio-with-image" aria-label="Permalink to &quot;Radio With Image&quot;">​</a></h3><hr>`,3),v=d(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;fv-radio image=&quot;https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/choicegroup-bar-unselected.png&quot; activeImage=&quot;https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/choicegroup-bar-selected.png&quot; v-model=&quot;value&quot; label=&quot;chart&quot; &gt;Chart&lt;/fv-radio&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="radio-dark-with-icon" tabindex="-1">Radio-Dark With Icon <a class="header-anchor" href="#radio-dark-with-icon" aria-label="Permalink to &quot;Radio-Dark With Icon&quot;">​</a></h3><hr>`,3),F={style:{background:"#000",padding:"20px"}},q=d(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#000</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">padding</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">20</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;fv-radio v-model=&quot;value&quot; label=&quot;NUIIris&quot; icon=&quot;NUIIris&quot; theme=&quot;dark&quot;&gt;NUIIris&lt;/fv-radio&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;fv-radio v-model=&quot;value&quot; label=&quot;NUIIris&quot; icon=&quot;NUIIris&quot; theme=&quot;dark&quot; disabled&gt;disabled&lt;/fv-radio&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;fv-radio v-model=&quot;value&quot; label=&quot;MSN&quot; icon=&quot;NUIFace&quot; theme=&quot;dark&quot;&gt;MSN&lt;/fv-radio&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h3 id="radio-custom-color" tabindex="-1">Radio Custom Color <a class="header-anchor" href="#radio-custom-color" aria-label="Permalink to &quot;Radio Custom Color&quot;">​</a></h3><hr>`,3),_=d(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-radio</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  icon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;NUIIris&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">value</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;NUIIris&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#00cc99</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;dark&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &gt;NUIIris&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-radio</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-radio</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> icon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;NUIIris&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">value</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;NUIIris&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#00cc99</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;dark&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> disabled</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Disabled&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-radio</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">v-model/value</td><td style="text-align:center;">Object</td><td style="text-align:center;">Yes</td><td style="text-align:center;">undefined</td><td style="text-align:center;">选项值</td></tr><tr><td style="text-align:center;">label</td><td style="text-align:center;">Object</td><td style="text-align:center;">Yes</td><td style="text-align:center;">undefined</td><td style="text-align:center;">选项值</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">[&#39;system&#39;,&#39;dark&#39;,&#39;light&#39;,&#39;custom&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;system&#39;</td><td style="text-align:center;">主题色</td></tr><tr><td style="text-align:center;">icon</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">null</td><td style="text-align:center;">MS-ICON</td></tr><tr><td style="text-align:center;">color</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">null</td><td style="text-align:center;">文字和图标前景色</td></tr><tr><td style="text-align:center;">foreground</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">rgba(0, 120, 212, 0.829)</td><td style="text-align:center;">Radio前景色</td></tr><tr><td style="text-align:center;">iconBlockBorderRadius</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">3</td><td style="text-align:center;">带图标样式圆角大小</td></tr><tr><td style="text-align:center;">iconBlockBorderWidth</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">2</td><td style="text-align:center;">带图标样式边框大小</td></tr><tr><td style="text-align:center;">image</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">null</td><td style="text-align:center;">32*32 图像链接</td></tr><tr><td style="text-align:center;">activeImage</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">null</td><td style="text-align:center;">32*32 选中时的图像链接</td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否禁用</td></tr></tbody></table><h3 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to &quot;Events&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">事件名(Name)</th><th style="text-align:center;">参数类型(args)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">click</td><td style="text-align:center;">event</td><td style="text-align:center;">点击</td></tr><tr><td style="text-align:center;">actived</td><td style="text-align:center;">event</td><td style="text-align:center;">选中时触发</td></tr></tbody></table>`,7);function f(C,s,x,I,i,N){const l=p("fv-radio"),r=p("ClientOnly");return u(),k("div",null,[g,a(r,null,{default:e(()=>[h("div",null,[a(l,{modelValue:i.value,"onUpdate:modelValue":s[0]||(s[0]=t=>i.value=t),label:"Option"},{default:e(()=>[n(" Option ")]),_:1},8,["modelValue"]),a(l,{modelValue:i.value,"onUpdate:modelValue":s[1]||(s[1]=t=>i.value=t),label:"Option2"},{default:e(()=>[n(" Option2 ")]),_:1},8,["modelValue"]),a(l,{label:"Option3",disabled:""},{default:e(()=>[n(" Disabled ")]),_:1})])]),_:1}),c,a(r,null,{default:e(()=>[h("div",y,[a(l,{modelValue:i.value,"onUpdate:modelValue":s[2]||(s[2]=t=>i.value=t),label:"Option",theme:"dark"},{default:e(()=>[n("Option")]),_:1},8,["modelValue"]),a(l,{modelValue:i.value,"onUpdate:modelValue":s[3]||(s[3]=t=>i.value=t),label:"Option2",theme:"dark",disabled:""},{default:e(()=>[n("Disabled")]),_:1},8,["modelValue"])])]),_:1}),b,a(r,null,{default:e(()=>[h("div",null,[a(l,{modelValue:i.value,"onUpdate:modelValue":s[4]||(s[4]=t=>i.value=t),label:"NUIIris",icon:"NUIIris"},{default:e(()=>[n("NUIIris")]),_:1},8,["modelValue"]),a(l,{modelValue:i.value,"onUpdate:modelValue":s[5]||(s[5]=t=>i.value=t),label:"MSN",icon:"NUIFace"},{default:e(()=>[n("MSN")]),_:1},8,["modelValue"]),a(l,{modelValue:i.value,"onUpdate:modelValue":s[6]||(s[6]=t=>i.value=t),label:"MSN",icon:"NUIFace",disabled:""},{default:e(()=>[n("Disabled")]),_:1},8,["modelValue"])])]),_:1}),m,h("div",null,[a(r,null,{default:e(()=>[a(l,{image:"https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/choicegroup-bar-unselected.png",activeImage:"https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/choicegroup-bar-selected.png",modelValue:i.value,"onUpdate:modelValue":s[7]||(s[7]=t=>i.value=t),label:"chart"},{default:e(()=>[n("Chart")]),_:1},8,["modelValue"])]),_:1})]),v,a(r,null,{default:e(()=>[h("div",F,[a(l,{modelValue:i.value,"onUpdate:modelValue":s[8]||(s[8]=t=>i.value=t),label:"NUIIris",icon:"NUIIris",theme:"dark"},{default:e(()=>[n("NUIIris")]),_:1},8,["modelValue"]),a(l,{modelValue:i.value,"onUpdate:modelValue":s[9]||(s[9]=t=>i.value=t),label:"NUIIris",icon:"NUIIris",theme:"dark",disabled:""},{default:e(()=>[n("disabled")]),_:1},8,["modelValue"]),a(l,{modelValue:i.value,"onUpdate:modelValue":s[10]||(s[10]=t=>i.value=t),label:"MSN",icon:"NUIFace",theme:"dark"},{default:e(()=>[n("MSN")]),_:1},8,["modelValue"])])]),_:1}),q,a(r,null,{default:e(()=>[a(l,{icon:"NUIIris",modelValue:i.value,"onUpdate:modelValue":s[11]||(s[11]=t=>i.value=t),label:"NUIIris",style:{background:"#00cc99"},theme:"dark"},{default:e(()=>[n("NUIIris")]),_:1},8,["modelValue"]),a(l,{icon:"NUIIris",modelValue:i.value,"onUpdate:modelValue":s[12]||(s[12]=t=>i.value=t),label:"NUIIris",style:{background:"#00cc99"},theme:"dark",disabled:""},{default:e(()=>[n("Disabled")]),_:1},8,["modelValue"])]),_:1}),_])}const U=o(E,[["render",f]]);export{B as __pageData,U as default};
diff --git a/assets/guide_components_radio_index.md.90as5QGp.lean.js b/assets/guide_components_radio_index.md.90as5QGp.lean.js
new file mode 100644
index 0000000..d3d3273
--- /dev/null
+++ b/assets/guide_components_radio_index.md.90as5QGp.lean.js
@@ -0,0 +1 @@
+import{_ as o,q as k,Y as a,z as e,H as h,aq as d,S as p,p as u,u as n}from"./chunks/framework.DvIFzl91.js";const E={data(){return{value:"Option"}},methods:{active(){++this.status}}},B=JSON.parse('{"title":"Radio","description":"","frontmatter":{"page":true,"title":"Radio"},"headers":[],"relativePath":"guide/components/radio/index.md","filePath":"guide/components/radio/index.md"}'),g=d("",3),c=d("",3),y={style:{background:"#000",height:"30px",padding:"20px"}},b=d("",3),m=d("",3),v=d("",3),F={style:{background:"#000",padding:"20px"}},q=d("",3),_=d("",7);function f(C,s,x,I,i,N){const l=p("fv-radio"),r=p("ClientOnly");return u(),k("div",null,[g,a(r,null,{default:e(()=>[h("div",null,[a(l,{modelValue:i.value,"onUpdate:modelValue":s[0]||(s[0]=t=>i.value=t),label:"Option"},{default:e(()=>[n(" Option ")]),_:1},8,["modelValue"]),a(l,{modelValue:i.value,"onUpdate:modelValue":s[1]||(s[1]=t=>i.value=t),label:"Option2"},{default:e(()=>[n(" Option2 ")]),_:1},8,["modelValue"]),a(l,{label:"Option3",disabled:""},{default:e(()=>[n(" Disabled ")]),_:1})])]),_:1}),c,a(r,null,{default:e(()=>[h("div",y,[a(l,{modelValue:i.value,"onUpdate:modelValue":s[2]||(s[2]=t=>i.value=t),label:"Option",theme:"dark"},{default:e(()=>[n("Option")]),_:1},8,["modelValue"]),a(l,{modelValue:i.value,"onUpdate:modelValue":s[3]||(s[3]=t=>i.value=t),label:"Option2",theme:"dark",disabled:""},{default:e(()=>[n("Disabled")]),_:1},8,["modelValue"])])]),_:1}),b,a(r,null,{default:e(()=>[h("div",null,[a(l,{modelValue:i.value,"onUpdate:modelValue":s[4]||(s[4]=t=>i.value=t),label:"NUIIris",icon:"NUIIris"},{default:e(()=>[n("NUIIris")]),_:1},8,["modelValue"]),a(l,{modelValue:i.value,"onUpdate:modelValue":s[5]||(s[5]=t=>i.value=t),label:"MSN",icon:"NUIFace"},{default:e(()=>[n("MSN")]),_:1},8,["modelValue"]),a(l,{modelValue:i.value,"onUpdate:modelValue":s[6]||(s[6]=t=>i.value=t),label:"MSN",icon:"NUIFace",disabled:""},{default:e(()=>[n("Disabled")]),_:1},8,["modelValue"])])]),_:1}),m,h("div",null,[a(r,null,{default:e(()=>[a(l,{image:"https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/choicegroup-bar-unselected.png",activeImage:"https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/choicegroup-bar-selected.png",modelValue:i.value,"onUpdate:modelValue":s[7]||(s[7]=t=>i.value=t),label:"chart"},{default:e(()=>[n("Chart")]),_:1},8,["modelValue"])]),_:1})]),v,a(r,null,{default:e(()=>[h("div",F,[a(l,{modelValue:i.value,"onUpdate:modelValue":s[8]||(s[8]=t=>i.value=t),label:"NUIIris",icon:"NUIIris",theme:"dark"},{default:e(()=>[n("NUIIris")]),_:1},8,["modelValue"]),a(l,{modelValue:i.value,"onUpdate:modelValue":s[9]||(s[9]=t=>i.value=t),label:"NUIIris",icon:"NUIIris",theme:"dark",disabled:""},{default:e(()=>[n("disabled")]),_:1},8,["modelValue"]),a(l,{modelValue:i.value,"onUpdate:modelValue":s[10]||(s[10]=t=>i.value=t),label:"MSN",icon:"NUIFace",theme:"dark"},{default:e(()=>[n("MSN")]),_:1},8,["modelValue"])])]),_:1}),q,a(r,null,{default:e(()=>[a(l,{icon:"NUIIris",modelValue:i.value,"onUpdate:modelValue":s[11]||(s[11]=t=>i.value=t),label:"NUIIris",style:{background:"#00cc99"},theme:"dark"},{default:e(()=>[n("NUIIris")]),_:1},8,["modelValue"]),a(l,{icon:"NUIIris",modelValue:i.value,"onUpdate:modelValue":s[12]||(s[12]=t=>i.value=t),label:"NUIIris",style:{background:"#00cc99"},theme:"dark",disabled:""},{default:e(()=>[n("Disabled")]),_:1},8,["modelValue"])]),_:1}),_])}const U=o(E,[["render",f]]);export{B as __pageData,U as default};
diff --git a/assets/guide_components_radio_index.md.e5a479ce.js b/assets/guide_components_radio_index.md.e5a479ce.js
deleted file mode 100644
index 7370ea0..0000000
--- a/assets/guide_components_radio_index.md.e5a479ce.js
+++ /dev/null
@@ -1,96 +0,0 @@
-import{u as d}from"./chunks/index.9dba9c16.js";import{d as u,f as b,c as C,e as l,t as m,b as p,w as t,u as r,k as c,a as F,r as A,o as g}from"./app.d60fa8c3.js";const h=c("h2",{id:"quick-start",tabindex:"-1"},[l("Quick Start "),c("a",{class:"header-anchor",href:"#quick-start","aria-hidden":"true"},"#")],-1),v=c("h3",{id:"default",tabindex:"-1"},[l("Default "),c("a",{class:"header-anchor",href:"#default","aria-hidden":"true"},"#")],-1),q=c("br",null,null,-1),x=c("hr",null,null,-1),f=l(" Microsoft "),E=l(" Google "),_=l(" Apple "),k=F(`<div class="language-vue-html"><span class="copy"></span><pre><code><span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-radio</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">v-model</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">    :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">group</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">radio</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">label</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">Microsoft</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">  </span></span>
-<span class="line"><span style="color:#89DDFF;">    @</span><span style="color:#C792EA;">click</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">click</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    @</span><span style="color:#C792EA;">change</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">change</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">  Microsoft</span></span>
-<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-radio</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-radio</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">v-model</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">    :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">group</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">radio</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">label</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">Google</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">  </span></span>
-<span class="line"><span style="color:#89DDFF;">    @</span><span style="color:#C792EA;">click</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">click</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    @</span><span style="color:#C792EA;">change</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">change</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">  Google</span></span>
-<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-radio</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-radio</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">v-model</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">    :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">group</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">radio</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">label</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">Apple</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">  </span></span>
-<span class="line"><span style="color:#89DDFF;">    @</span><span style="color:#C792EA;">click</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">click</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    @</span><span style="color:#C792EA;">change</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">change</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">  Apple</span></span>
-<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-radio</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br></div></div><h3 id="disabled" tabindex="-1">Disabled <a class="header-anchor" href="#disabled" aria-hidden="true">#</a></h3><hr>`,3),V=l("Microsoft"),N=l("Google"),w=l("Apple"),S=F(`<div class="language-vue-html"><span class="copy"></span><pre><code><span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-radio</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">group</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">radio</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">label</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">Microsoft</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">v-model</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    @</span><span style="color:#C792EA;">click</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">click</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">disabled</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">  Microsoft</span></span>
-<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-radio</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-radio</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">group</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">radio</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">label</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">Google</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">v-model</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    @</span><span style="color:#C792EA;">click</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">click</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">disabled</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">  Google</span></span>
-<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-radio</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-radio</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">group</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">radio</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">label</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">Apple</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">v-model</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    @</span><span style="color:#C792EA;">click</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">click</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">disabled</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">  Apple</span></span>
-<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-radio</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br></div></div><h3 id="box-side" tabindex="-1">Box Side <a class="header-anchor" href="#box-side" aria-hidden="true">#</a></h3><hr>`,3),G=l("Microsoft"),M=l("Google"),U=l("Apple"),R=F(`<div class="language-vue-html"><span class="copy"></span><pre><code><span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-radio</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">group</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">radio</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">label</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">Microsoft</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">v-model</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    @</span><span style="color:#C792EA;">click</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">click</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">box-side</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">end</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">  Microsoft</span></span>
-<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-radio</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-radio</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">group</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">radio</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">label</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">Google</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">v-model</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    @</span><span style="color:#C792EA;">click</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">click</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">box-side</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">end</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">  Google</span></span>
-<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-radio</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-radio</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">group</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">radio</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">label</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">Apple</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">v-model</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    @</span><span style="color:#C792EA;">click</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">click</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">box-side</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">end</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">  Apple</span></span>
-<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-radio</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br></div></div><h3 id="custom" tabindex="-1">Custom <a class="header-anchor" href="#custom" aria-hidden="true">#</a></h3><hr>`,3),B=l("Set border width. "),P=l(' Radio rendered with borderWidth "2" '),T=F(`<div class="language-vue-html"><span class="copy"></span><pre><code><span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-radio</span><span style="color:#89DDFF;"> :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> :</span><span style="color:#C792EA;">border-width</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#F78C6C;">2</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">v-model</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">    Radio rendered with borderWidth &quot;2&quot;</span></span>
-<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-radio</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div>`,1),Q={start:"2"},W=l("Set background and border color. "),J=l(" Radio "),O=F(`<div class="language-vue-html"><span class="copy"></span><pre><code><span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-radio</span></span>
-<span class="line"><span style="color:#89DDFF;">    :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">border-color</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">rgba(0, 204, 153, 1)</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">foreground</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">rgba(0, 204, 153, 1)</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">background</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">rgba(0, 204, 153, 1)</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">    Radio</span></span>
-<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-radio</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">background</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">background</td></tr><tr><td style="text-align:center;">border-color</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">borderColor</td></tr><tr><td style="text-align:center;">border-width</td><td style="text-align:center;">[number, string]</td><td style="text-align:center;">No</td><td style="text-align:center;">1.5</td><td style="text-align:center;">border width</td></tr><tr><td style="text-align:center;">box-side</td><td style="text-align:center;">[&#39;start&#39;, &#39;end&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">start</td><td style="text-align:center;">position</td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">disabled</td></tr><tr><td style="text-align:center;">foreground</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">foreground</td></tr><tr><td style="text-align:center;">group</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as input radio name property</td></tr><tr><td style="text-align:center;">hover-color</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">false status hover color</td></tr><tr><td style="text-align:center;">label</td><td style="text-align:center;">[boolean, string, number]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as input radio value property</td></tr><tr><td style="text-align:center;">lang</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">i18n</td></tr><tr><td style="text-align:center;">model-value</td><td style="text-align:center;">[boolean, string, number]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">value</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">[&#39;light&#39;, &#39;dark&#39;, &#39;global&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&quot;global&quot;</td><td style="text-align:center;">theme</td></tr></tbody></table><h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">blur</td><td style="text-align:center;">evt[FocusEvent]</td><td style="text-align:center;">onblur</td></tr><tr><td style="text-align:center;">change</td><td style="text-align:center;">val[boolean, null]</td><td style="text-align:center;">onchange</td></tr><tr><td style="text-align:center;">click</td><td style="text-align:center;">val[boolean, null]</td><td style="text-align:center;">onclick</td></tr><tr><td style="text-align:center;">focus</td><td style="text-align:center;">evt[FocusEvent]</td><td style="text-align:center;">onfocus</td></tr><tr><td style="text-align:center;">update:model-value</td><td style="text-align:center;">val[boolean]</td><td style="text-align:center;">v-model</td></tr></tbody></table><h2 id="slot" tabindex="-1">Slot <a class="header-anchor" href="#slot" aria-hidden="true">#</a></h2><hr><h3 id="default-1" tabindex="-1">Default <a class="header-anchor" href="#default-1" aria-hidden="true">#</a></h3><div class="language-vue-html"><span class="copy"></span><pre><code><span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-radio</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">{{</span><span style="color:#A6ACCD;">label here</span><span style="color:#89DDFF;">}}</span></span>
-<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-radio</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div>`,11),K=JSON.parse('{"title":"Radio","description":"","frontmatter":{"page":true,"title":"Radio"},"headers":[{"level":2,"title":"Quick Start","slug":"quick-start"},{"level":3,"title":"Default","slug":"default"},{"level":3,"title":"Disabled","slug":"disabled"},{"level":3,"title":"Box Side","slug":"box-side"},{"level":3,"title":"Custom","slug":"custom"},{"level":2,"title":"Properties","slug":"properties"},{"level":2,"title":"Emits","slug":"emits"},{"level":2,"title":"Slot","slug":"slot"},{"level":3,"title":"Default","slug":"default-1"}],"relativePath":"guide/components/radio/index.md"}'),j={name:"guide/components/radio/index.md"},L=u({...j,setup(z){const{theme:e}=d(),s=b();function D(y){console.log("click",y)}function i(y){console.log("change",y)}return(y,n)=>{const o=A("fv-radio");return g(),C("div",null,[h,v,q,l(" Value: \xA0 "+m(s.value)+" ",1),x,p(o,{modelValue:s.value,"onUpdate:modelValue":n[0]||(n[0]=a=>s.value=a),theme:r(e),group:"radio",label:"Microsoft",onClick:D,onChange:i},{default:t(()=>[f]),_:1},8,["modelValue","theme"]),p(o,{modelValue:s.value,"onUpdate:modelValue":n[1]||(n[1]=a=>s.value=a),theme:r(e),group:"radio",label:"Google",onClick:D,onChange:i},{default:t(()=>[E]),_:1},8,["modelValue","theme"]),p(o,{modelValue:s.value,"onUpdate:modelValue":n[2]||(n[2]=a=>s.value=a),theme:r(e),group:"radio",label:"Apple",onClick:D,onChange:i},{default:t(()=>[_]),_:1},8,["modelValue","theme"]),k,p(o,{theme:r(e),group:"radio",label:"Microsoft",modelValue:s.value,"onUpdate:modelValue":n[3]||(n[3]=a=>s.value=a),onClick:D,disabled:""},{default:t(()=>[V]),_:1},8,["theme","modelValue"]),p(o,{theme:r(e),group:"radio",label:"Google",modelValue:s.value,"onUpdate:modelValue":n[4]||(n[4]=a=>s.value=a),onClick:D,disabled:""},{default:t(()=>[N]),_:1},8,["theme","modelValue"]),p(o,{theme:r(e),group:"radio",label:"Apple",modelValue:s.value,"onUpdate:modelValue":n[5]||(n[5]=a=>s.value=a),onClick:D,disabled:""},{default:t(()=>[w]),_:1},8,["theme","modelValue"]),S,p(o,{theme:r(e),group:"radio",label:"Microsoft",modelValue:s.value,"onUpdate:modelValue":n[6]||(n[6]=a=>s.value=a),onClick:D,"box-side":"end"},{default:t(()=>[G]),_:1},8,["theme","modelValue"]),p(o,{theme:r(e),group:"radio",label:"Google",modelValue:s.value,"onUpdate:modelValue":n[7]||(n[7]=a=>s.value=a),onClick:D,"box-side":"end"},{default:t(()=>[M]),_:1},8,["theme","modelValue"]),p(o,{theme:r(e),group:"radio",label:"Apple",modelValue:s.value,"onUpdate:modelValue":n[8]||(n[8]=a=>s.value=a),onClick:D,"box-side":"end"},{default:t(()=>[U]),_:1},8,["theme","modelValue"]),R,c("ol",null,[c("li",null,[B,p(o,{theme:r(e),"border-width":2,modelValue:s.value,"onUpdate:modelValue":n[9]||(n[9]=a=>s.value=a)},{default:t(()=>[P]),_:1},8,["theme","modelValue"])])]),T,c("ol",Q,[c("li",null,[W,p(o,{theme:r(e),"border-color":"rgba(0, 204, 153, 1)",foreground:"rgba(0, 204, 153, 1)",background:"rgba(0, 204, 153, 1)",modelValue:s.value,"onUpdate:modelValue":n[10]||(n[10]=a=>s.value=a)},{default:t(()=>[J]),_:1},8,["theme","modelValue"])])]),O])}}});export{K as __pageData,L as default};
diff --git a/assets/guide_components_radio_index.md.e5a479ce.lean.js b/assets/guide_components_radio_index.md.e5a479ce.lean.js
deleted file mode 100644
index 7370ea0..0000000
--- a/assets/guide_components_radio_index.md.e5a479ce.lean.js
+++ /dev/null
@@ -1,96 +0,0 @@
-import{u as d}from"./chunks/index.9dba9c16.js";import{d as u,f as b,c as C,e as l,t as m,b as p,w as t,u as r,k as c,a as F,r as A,o as g}from"./app.d60fa8c3.js";const h=c("h2",{id:"quick-start",tabindex:"-1"},[l("Quick Start "),c("a",{class:"header-anchor",href:"#quick-start","aria-hidden":"true"},"#")],-1),v=c("h3",{id:"default",tabindex:"-1"},[l("Default "),c("a",{class:"header-anchor",href:"#default","aria-hidden":"true"},"#")],-1),q=c("br",null,null,-1),x=c("hr",null,null,-1),f=l(" Microsoft "),E=l(" Google "),_=l(" Apple "),k=F(`<div class="language-vue-html"><span class="copy"></span><pre><code><span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-radio</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">v-model</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">    :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">group</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">radio</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">label</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">Microsoft</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">  </span></span>
-<span class="line"><span style="color:#89DDFF;">    @</span><span style="color:#C792EA;">click</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">click</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    @</span><span style="color:#C792EA;">change</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">change</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">  Microsoft</span></span>
-<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-radio</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-radio</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">v-model</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">    :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">group</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">radio</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">label</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">Google</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">  </span></span>
-<span class="line"><span style="color:#89DDFF;">    @</span><span style="color:#C792EA;">click</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">click</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    @</span><span style="color:#C792EA;">change</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">change</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">  Google</span></span>
-<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-radio</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-radio</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">v-model</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">    :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">group</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">radio</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">label</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">Apple</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">  </span></span>
-<span class="line"><span style="color:#89DDFF;">    @</span><span style="color:#C792EA;">click</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">click</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    @</span><span style="color:#C792EA;">change</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">change</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">  Apple</span></span>
-<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-radio</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br></div></div><h3 id="disabled" tabindex="-1">Disabled <a class="header-anchor" href="#disabled" aria-hidden="true">#</a></h3><hr>`,3),V=l("Microsoft"),N=l("Google"),w=l("Apple"),S=F(`<div class="language-vue-html"><span class="copy"></span><pre><code><span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-radio</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">group</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">radio</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">label</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">Microsoft</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">v-model</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    @</span><span style="color:#C792EA;">click</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">click</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">disabled</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">  Microsoft</span></span>
-<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-radio</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-radio</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">group</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">radio</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">label</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">Google</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">v-model</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    @</span><span style="color:#C792EA;">click</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">click</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">disabled</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">  Google</span></span>
-<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-radio</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-radio</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">group</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">radio</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">label</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">Apple</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">v-model</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    @</span><span style="color:#C792EA;">click</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">click</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">disabled</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">  Apple</span></span>
-<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-radio</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br></div></div><h3 id="box-side" tabindex="-1">Box Side <a class="header-anchor" href="#box-side" aria-hidden="true">#</a></h3><hr>`,3),G=l("Microsoft"),M=l("Google"),U=l("Apple"),R=F(`<div class="language-vue-html"><span class="copy"></span><pre><code><span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-radio</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">group</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">radio</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">label</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">Microsoft</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">v-model</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    @</span><span style="color:#C792EA;">click</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">click</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">box-side</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">end</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">  Microsoft</span></span>
-<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-radio</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-radio</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">group</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">radio</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">label</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">Google</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">v-model</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    @</span><span style="color:#C792EA;">click</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">click</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">box-side</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">end</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">  Google</span></span>
-<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-radio</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-radio</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">group</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">radio</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">label</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">Apple</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">v-model</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    @</span><span style="color:#C792EA;">click</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">click</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">box-side</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">end</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">  Apple</span></span>
-<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-radio</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br></div></div><h3 id="custom" tabindex="-1">Custom <a class="header-anchor" href="#custom" aria-hidden="true">#</a></h3><hr>`,3),B=l("Set border width. "),P=l(' Radio rendered with borderWidth "2" '),T=F(`<div class="language-vue-html"><span class="copy"></span><pre><code><span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-radio</span><span style="color:#89DDFF;"> :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> :</span><span style="color:#C792EA;">border-width</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#F78C6C;">2</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">v-model</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">    Radio rendered with borderWidth &quot;2&quot;</span></span>
-<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-radio</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div>`,1),Q={start:"2"},W=l("Set background and border color. "),J=l(" Radio "),O=F(`<div class="language-vue-html"><span class="copy"></span><pre><code><span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-radio</span></span>
-<span class="line"><span style="color:#89DDFF;">    :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">border-color</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">rgba(0, 204, 153, 1)</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">foreground</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">rgba(0, 204, 153, 1)</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">background</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">rgba(0, 204, 153, 1)</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">    Radio</span></span>
-<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-radio</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">background</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">background</td></tr><tr><td style="text-align:center;">border-color</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">borderColor</td></tr><tr><td style="text-align:center;">border-width</td><td style="text-align:center;">[number, string]</td><td style="text-align:center;">No</td><td style="text-align:center;">1.5</td><td style="text-align:center;">border width</td></tr><tr><td style="text-align:center;">box-side</td><td style="text-align:center;">[&#39;start&#39;, &#39;end&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">start</td><td style="text-align:center;">position</td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">disabled</td></tr><tr><td style="text-align:center;">foreground</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">foreground</td></tr><tr><td style="text-align:center;">group</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as input radio name property</td></tr><tr><td style="text-align:center;">hover-color</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">false status hover color</td></tr><tr><td style="text-align:center;">label</td><td style="text-align:center;">[boolean, string, number]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as input radio value property</td></tr><tr><td style="text-align:center;">lang</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">i18n</td></tr><tr><td style="text-align:center;">model-value</td><td style="text-align:center;">[boolean, string, number]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">value</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">[&#39;light&#39;, &#39;dark&#39;, &#39;global&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&quot;global&quot;</td><td style="text-align:center;">theme</td></tr></tbody></table><h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">blur</td><td style="text-align:center;">evt[FocusEvent]</td><td style="text-align:center;">onblur</td></tr><tr><td style="text-align:center;">change</td><td style="text-align:center;">val[boolean, null]</td><td style="text-align:center;">onchange</td></tr><tr><td style="text-align:center;">click</td><td style="text-align:center;">val[boolean, null]</td><td style="text-align:center;">onclick</td></tr><tr><td style="text-align:center;">focus</td><td style="text-align:center;">evt[FocusEvent]</td><td style="text-align:center;">onfocus</td></tr><tr><td style="text-align:center;">update:model-value</td><td style="text-align:center;">val[boolean]</td><td style="text-align:center;">v-model</td></tr></tbody></table><h2 id="slot" tabindex="-1">Slot <a class="header-anchor" href="#slot" aria-hidden="true">#</a></h2><hr><h3 id="default-1" tabindex="-1">Default <a class="header-anchor" href="#default-1" aria-hidden="true">#</a></h3><div class="language-vue-html"><span class="copy"></span><pre><code><span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-radio</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">{{</span><span style="color:#A6ACCD;">label here</span><span style="color:#89DDFF;">}}</span></span>
-<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-radio</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div>`,11),K=JSON.parse('{"title":"Radio","description":"","frontmatter":{"page":true,"title":"Radio"},"headers":[{"level":2,"title":"Quick Start","slug":"quick-start"},{"level":3,"title":"Default","slug":"default"},{"level":3,"title":"Disabled","slug":"disabled"},{"level":3,"title":"Box Side","slug":"box-side"},{"level":3,"title":"Custom","slug":"custom"},{"level":2,"title":"Properties","slug":"properties"},{"level":2,"title":"Emits","slug":"emits"},{"level":2,"title":"Slot","slug":"slot"},{"level":3,"title":"Default","slug":"default-1"}],"relativePath":"guide/components/radio/index.md"}'),j={name:"guide/components/radio/index.md"},L=u({...j,setup(z){const{theme:e}=d(),s=b();function D(y){console.log("click",y)}function i(y){console.log("change",y)}return(y,n)=>{const o=A("fv-radio");return g(),C("div",null,[h,v,q,l(" Value: \xA0 "+m(s.value)+" ",1),x,p(o,{modelValue:s.value,"onUpdate:modelValue":n[0]||(n[0]=a=>s.value=a),theme:r(e),group:"radio",label:"Microsoft",onClick:D,onChange:i},{default:t(()=>[f]),_:1},8,["modelValue","theme"]),p(o,{modelValue:s.value,"onUpdate:modelValue":n[1]||(n[1]=a=>s.value=a),theme:r(e),group:"radio",label:"Google",onClick:D,onChange:i},{default:t(()=>[E]),_:1},8,["modelValue","theme"]),p(o,{modelValue:s.value,"onUpdate:modelValue":n[2]||(n[2]=a=>s.value=a),theme:r(e),group:"radio",label:"Apple",onClick:D,onChange:i},{default:t(()=>[_]),_:1},8,["modelValue","theme"]),k,p(o,{theme:r(e),group:"radio",label:"Microsoft",modelValue:s.value,"onUpdate:modelValue":n[3]||(n[3]=a=>s.value=a),onClick:D,disabled:""},{default:t(()=>[V]),_:1},8,["theme","modelValue"]),p(o,{theme:r(e),group:"radio",label:"Google",modelValue:s.value,"onUpdate:modelValue":n[4]||(n[4]=a=>s.value=a),onClick:D,disabled:""},{default:t(()=>[N]),_:1},8,["theme","modelValue"]),p(o,{theme:r(e),group:"radio",label:"Apple",modelValue:s.value,"onUpdate:modelValue":n[5]||(n[5]=a=>s.value=a),onClick:D,disabled:""},{default:t(()=>[w]),_:1},8,["theme","modelValue"]),S,p(o,{theme:r(e),group:"radio",label:"Microsoft",modelValue:s.value,"onUpdate:modelValue":n[6]||(n[6]=a=>s.value=a),onClick:D,"box-side":"end"},{default:t(()=>[G]),_:1},8,["theme","modelValue"]),p(o,{theme:r(e),group:"radio",label:"Google",modelValue:s.value,"onUpdate:modelValue":n[7]||(n[7]=a=>s.value=a),onClick:D,"box-side":"end"},{default:t(()=>[M]),_:1},8,["theme","modelValue"]),p(o,{theme:r(e),group:"radio",label:"Apple",modelValue:s.value,"onUpdate:modelValue":n[8]||(n[8]=a=>s.value=a),onClick:D,"box-side":"end"},{default:t(()=>[U]),_:1},8,["theme","modelValue"]),R,c("ol",null,[c("li",null,[B,p(o,{theme:r(e),"border-width":2,modelValue:s.value,"onUpdate:modelValue":n[9]||(n[9]=a=>s.value=a)},{default:t(()=>[P]),_:1},8,["theme","modelValue"])])]),T,c("ol",Q,[c("li",null,[W,p(o,{theme:r(e),"border-color":"rgba(0, 204, 153, 1)",foreground:"rgba(0, 204, 153, 1)",background:"rgba(0, 204, 153, 1)",modelValue:s.value,"onUpdate:modelValue":n[10]||(n[10]=a=>s.value=a)},{default:t(()=>[J]),_:1},8,["theme","modelValue"])])]),O])}}});export{K as __pageData,L as default};
diff --git a/assets/guide_components_radio_properties.md.f8e55d2f.js b/assets/guide_components_radio_properties.md.f8e55d2f.js
deleted file mode 100644
index e5223fa..0000000
--- a/assets/guide_components_radio_properties.md.f8e55d2f.js
+++ /dev/null
@@ -1 +0,0 @@
-import{_ as t,c as e,o as n,a as r}from"./app.d60fa8c3.js";const u=JSON.parse('{"title":"Properties","description":"","frontmatter":{},"headers":[{"level":2,"title":"Properties","slug":"properties"}],"relativePath":"guide/components/radio/properties.md"}'),d={name:"guide/components/radio/properties.md"},l=r('<h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">background</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">background</td></tr><tr><td style="text-align:center;">border-color</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">borderColor</td></tr><tr><td style="text-align:center;">border-width</td><td style="text-align:center;">[number, string]</td><td style="text-align:center;">No</td><td style="text-align:center;">1.5</td><td style="text-align:center;">border width</td></tr><tr><td style="text-align:center;">box-side</td><td style="text-align:center;">[&#39;start&#39;, &#39;end&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">start</td><td style="text-align:center;">position</td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">disabled</td></tr><tr><td style="text-align:center;">foreground</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">foreground</td></tr><tr><td style="text-align:center;">group</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as input radio name property</td></tr><tr><td style="text-align:center;">hover-color</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">false status hover color</td></tr><tr><td style="text-align:center;">label</td><td style="text-align:center;">[boolean, string, number]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as input radio value property</td></tr><tr><td style="text-align:center;">lang</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">i18n</td></tr><tr><td style="text-align:center;">model-value</td><td style="text-align:center;">[boolean, string, number]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">value</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">[&#39;light&#39;, &#39;dark&#39;, &#39;global&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&quot;global&quot;</td><td style="text-align:center;">theme</td></tr></tbody></table>',3),a=[l];function i(s,c,o,g,y,x){return n(),e("div",null,a)}var h=t(d,[["render",i]]);export{u as __pageData,h as default};
diff --git a/assets/guide_components_radio_properties.md.f8e55d2f.lean.js b/assets/guide_components_radio_properties.md.f8e55d2f.lean.js
deleted file mode 100644
index 251e1ce..0000000
--- a/assets/guide_components_radio_properties.md.f8e55d2f.lean.js
+++ /dev/null
@@ -1 +0,0 @@
-import{_ as t,c as e,o as n,a as r}from"./app.d60fa8c3.js";const u=JSON.parse('{"title":"Properties","description":"","frontmatter":{},"headers":[{"level":2,"title":"Properties","slug":"properties"}],"relativePath":"guide/components/radio/properties.md"}'),d={name:"guide/components/radio/properties.md"},l=r("",3),a=[l];function i(s,c,o,g,y,x){return n(),e("div",null,a)}var h=t(d,[["render",i]]);export{u as __pageData,h as default};
diff --git a/assets/guide_components_rating-control_emits.md.blvomSeC.js b/assets/guide_components_rating-control_emits.md.blvomSeC.js
new file mode 100644
index 0000000..5215bdf
--- /dev/null
+++ b/assets/guide_components_rating-control_emits.md.blvomSeC.js
@@ -0,0 +1 @@
+import{_ as t,q as e,p as a,aq as n}from"./chunks/framework.DvIFzl91.js";const g=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/components/rating-control/emits.md","filePath":"guide/components/rating-control/emits.md"}'),s={name:"guide/components/rating-control/emits.md"},o=n('<h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-label="Permalink to &quot;Emits&quot;">​</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead></table>',3),r=[o];function i(c,_,m,l,d,h){return a(),e("div",null,r)}const u=t(s,[["render",i]]);export{g as __pageData,u as default};
diff --git a/assets/guide_components_rating-control_emits.md.blvomSeC.lean.js b/assets/guide_components_rating-control_emits.md.blvomSeC.lean.js
new file mode 100644
index 0000000..9026bc6
--- /dev/null
+++ b/assets/guide_components_rating-control_emits.md.blvomSeC.lean.js
@@ -0,0 +1 @@
+import{_ as t,q as e,p as a,aq as n}from"./chunks/framework.DvIFzl91.js";const g=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/components/rating-control/emits.md","filePath":"guide/components/rating-control/emits.md"}'),s={name:"guide/components/rating-control/emits.md"},o=n("",3),r=[o];function i(c,_,m,l,d,h){return a(),e("div",null,r)}const u=t(s,[["render",i]]);export{g as __pageData,u as default};
diff --git a/assets/guide_components_rating-control_index.md.Q9l5Lfrr.js b/assets/guide_components_rating-control_index.md.Q9l5Lfrr.js
new file mode 100644
index 0000000..3ab6894
--- /dev/null
+++ b/assets/guide_components_rating-control_index.md.Q9l5Lfrr.js
@@ -0,0 +1,6 @@
+import{_ as e,q as n,Y as s,H as a,u as l,aq as i,S as r,p as h}from"./chunks/framework.DvIFzl91.js";const B=JSON.parse('{"title":"RatingControl","description":"","frontmatter":{"page":true,"title":"RatingControl"},"headers":[],"relativePath":"guide/components/rating-control/index.md","filePath":"guide/components/rating-control/index.md"}'),d={name:"guide/components/rating-control/index.md"},k=a("h3",{id:"ratingcontrol-demo",tabindex:"-1"},[l("RatingControl-DEMO "),a("a",{class:"header-anchor",href:"#ratingcontrol-demo","aria-label":'Permalink to "RatingControl-DEMO"'},"​")],-1),p=a("hr",null,null,-1),o=i(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-RatingControl</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;3&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-RatingControl</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="ratingcontrol-half-rate" tabindex="-1">RatingControl-Half Rate <a class="header-anchor" href="#ratingcontrol-half-rate" aria-label="Permalink to &quot;RatingControl-Half Rate&quot;">​</a></h3><hr>`,3),g=i(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-RatingControl</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;2.5&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">halfRate</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-RatingControl</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="ratingcontrol-clearable" tabindex="-1">RatingControl-Clearable <a class="header-anchor" href="#ratingcontrol-clearable" aria-label="Permalink to &quot;RatingControl-Clearable&quot;">​</a></h3><hr>`,3),E=i(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-RatingControl</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;2.5&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">halfRate</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">isClear</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-RatingControl</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="ratingcontrol-readonly" tabindex="-1">RatingControl-Readonly <a class="header-anchor" href="#ratingcontrol-readonly" aria-label="Permalink to &quot;RatingControl-Readonly&quot;">​</a></h3><hr>`,3),c=i(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-RatingControl</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;3.5&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">halfRate</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">isClear</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> readonly</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-RatingControl</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="ratingcontrol-customize" tabindex="-1">RatingControl-Customize <a class="header-anchor" href="#ratingcontrol-customize" aria-label="Permalink to &quot;RatingControl-Customize&quot;">​</a></h3><hr>`,3),y=i(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-RatingControl</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;1.5&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> defaultIcon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Heart&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> selectedIcon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;HeartFill&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> borderColor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rgba(200, 200, 200, 1)&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> selectedColor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rgba(173, 38, 45, 1)&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">halfRate</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">isClear</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-RatingControl</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">value</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">0</td><td style="text-align:center;">分值</td></tr><tr><td style="text-align:center;">maxRate</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">5</td><td style="text-align:center;">最大值</td></tr><tr><td style="text-align:center;">halfRate</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否允许半分</td></tr><tr><td style="text-align:center;">defaultIcon</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">FavoriteStar</td><td style="text-align:center;">默认图标</td></tr><tr><td style="text-align:center;">selectedIcon</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">FavoriteStarFill</td><td style="text-align:center;">选中图标</td></tr><tr><td style="text-align:center;">borderColor</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">rgba(200, 200, 200, 1)</td><td style="text-align:center;">边框颜色</td></tr><tr><td style="text-align:center;">selectedColor</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">rgba(255, 149, 0, 1)</td><td style="text-align:center;">选中颜色</td></tr><tr><td style="text-align:center;">isClear</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否允许清除</td></tr><tr><td style="text-align:center;">readonly</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">只读</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">[&#39;system&#39;,&#39;dark&#39;,&#39;light&#39;,&#39;custom&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;system&#39;</td><td style="text-align:center;">主题色</td></tr></tbody></table><h3 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to &quot;Events&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">事件名(Name)</th><th style="text-align:center;">参数类型(args)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">change</td><td style="text-align:center;">Number</td><td style="text-align:center;">分值改变时触发</td></tr></tbody></table>`,7);function u(F,C,b,_,v,x){const t=r("fv-RatingControl");return h(),n("div",null,[k,p,s(t,{value:"3"}),o,s(t,{value:"2.5",halfRate:!0}),g,s(t,{value:"2.5",halfRate:!0,isClear:!0}),E,s(t,{value:"3.5",halfRate:!0,isClear:!0,readonly:""}),c,s(t,{value:"1.5",defaultIcon:"Heart",selectedIcon:"HeartFill",borderColor:"rgba(200, 200, 200, 1)",selectedColor:"rgba(173, 38, 45, 1)",halfRate:!0,isClear:!0}),y])}const f=e(d,[["render",u]]);export{B as __pageData,f as default};
diff --git a/assets/guide_components_rating-control_index.md.Q9l5Lfrr.lean.js b/assets/guide_components_rating-control_index.md.Q9l5Lfrr.lean.js
new file mode 100644
index 0000000..b1e5ef5
--- /dev/null
+++ b/assets/guide_components_rating-control_index.md.Q9l5Lfrr.lean.js
@@ -0,0 +1 @@
+import{_ as e,q as n,Y as s,H as a,u as l,aq as i,S as r,p as h}from"./chunks/framework.DvIFzl91.js";const B=JSON.parse('{"title":"RatingControl","description":"","frontmatter":{"page":true,"title":"RatingControl"},"headers":[],"relativePath":"guide/components/rating-control/index.md","filePath":"guide/components/rating-control/index.md"}'),d={name:"guide/components/rating-control/index.md"},k=a("h3",{id:"ratingcontrol-demo",tabindex:"-1"},[l("RatingControl-DEMO "),a("a",{class:"header-anchor",href:"#ratingcontrol-demo","aria-label":'Permalink to "RatingControl-DEMO"'},"​")],-1),p=a("hr",null,null,-1),o=i("",3),g=i("",3),E=i("",3),c=i("",3),y=i("",7);function u(F,C,b,_,v,x){const t=r("fv-RatingControl");return h(),n("div",null,[k,p,s(t,{value:"3"}),o,s(t,{value:"2.5",halfRate:!0}),g,s(t,{value:"2.5",halfRate:!0,isClear:!0}),E,s(t,{value:"3.5",halfRate:!0,isClear:!0,readonly:""}),c,s(t,{value:"1.5",defaultIcon:"Heart",selectedIcon:"HeartFill",borderColor:"rgba(200, 200, 200, 1)",selectedColor:"rgba(173, 38, 45, 1)",halfRate:!0,isClear:!0}),y])}const f=e(d,[["render",u]]);export{B as __pageData,f as default};
diff --git a/assets/guide_components_rating-control_properties.md.DKprnl0i.js b/assets/guide_components_rating-control_properties.md.DKprnl0i.js
new file mode 100644
index 0000000..725cd56
--- /dev/null
+++ b/assets/guide_components_rating-control_properties.md.DKprnl0i.js
@@ -0,0 +1 @@
+import{_ as t,q as e,p as r,aq as a}from"./chunks/framework.DvIFzl91.js";const g=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/components/rating-control/properties.md","filePath":"guide/components/rating-control/properties.md"}'),o={name:"guide/components/rating-control/properties.md"},n=a('<h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-label="Permalink to &quot;Properties&quot;">​</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead></table>',3),s=[n];function i(c,p,l,_,h,d){return r(),e("div",null,s)}const u=t(o,[["render",i]]);export{g as __pageData,u as default};
diff --git a/assets/guide_components_rating-control_properties.md.DKprnl0i.lean.js b/assets/guide_components_rating-control_properties.md.DKprnl0i.lean.js
new file mode 100644
index 0000000..ca832ca
--- /dev/null
+++ b/assets/guide_components_rating-control_properties.md.DKprnl0i.lean.js
@@ -0,0 +1 @@
+import{_ as t,q as e,p as r,aq as a}from"./chunks/framework.DvIFzl91.js";const g=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/components/rating-control/properties.md","filePath":"guide/components/rating-control/properties.md"}'),o={name:"guide/components/rating-control/properties.md"},n=a("",3),s=[n];function i(c,p,l,_,h,d){return r(),e("div",null,s)}const u=t(o,[["render",i]]);export{g as __pageData,u as default};
diff --git a/assets/guide_components_reveal-container_index.md.Cut2r4tV.js b/assets/guide_components_reveal-container_index.md.Cut2r4tV.js
new file mode 100644
index 0000000..988b473
--- /dev/null
+++ b/assets/guide_components_reveal-container_index.md.Cut2r4tV.js
@@ -0,0 +1,9 @@
+import{u as r}from"./chunks/index.CvzShnhD.js";import{k as d,q as h,Y as t,z as i,H as n,u as p,aq as a,S as l,p as k}from"./chunks/framework.DvIFzl91.js";import"./chunks/theme.CgqFBnN_.js";const o=n("h3",{id:"revealcontainer-demo",tabindex:"-1"},[p("RevealContainer-DEMO "),n("a",{class:"header-anchor",href:"#revealcontainer-demo","aria-label":'Permalink to "RevealContainer-DEMO"'},"​")],-1),c=n("hr",null,null,-1),g=a(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-RevealContainer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-RevealContainer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>Disabled</p>`,2),E=a(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-RevealContainer</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> disabled</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-RevealContainer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="revealcontainer-customize" tabindex="-1">RevealContainer-Customize <a class="header-anchor" href="#revealcontainer-customize" aria-label="Permalink to &quot;RevealContainer-Customize&quot;">​</a></h3><hr><p>Single Color</p>`,4),y=a(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-RevealContainer</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> backgroundColor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rgba(0, 98, 158, 0.3)&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> borderColor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rgba(0, 98, 158, 0.3)&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-RevealContainer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>Gradient Color</p>`,2),u=a(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-RevealContainer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">backgroundGradientList</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;rgba(0, 0, 0, 0.1)&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;rgba(255, 255, 255, 0)&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">borderGradientList</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;#40e0d0&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;#40e0d0&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;#ff8c00&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;#ff8c00&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;#ff0080&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;rgba(255, 255, 255, 0)&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> borderGradientSize</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;120&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-RevealContainer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">revealContainer</td><td style="text-align:center;">Object</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">parent</td><td style="text-align:center;">[function]</td><td style="text-align:center;">No</td><td style="text-align:center;">null</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">borderWidth</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">1</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">borderRadius</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">6</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">backgroundColor</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">rgba(121, 119, 117, 0.6)</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">backgroundGradientList</td><td style="text-align:center;">Array</td><td style="text-align:center;">No</td><td style="text-align:center;">[]</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">backgroundGradientSize</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">120</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">borderColor</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">rgba(121, 119, 117, 0.6)</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">borderGradientList</td><td style="text-align:center;">Array</td><td style="text-align:center;">No</td><td style="text-align:center;">[]</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">borderGradientSize</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">60</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">debounceDistance</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">300</td><td style="text-align:center;">节流, 超过此距离时, 不去计算渲染</td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">[&#39;system&#39;,&#39;light&#39;,&#39;dark&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">system</td><td style="text-align:center;"></td></tr></tbody></table><h3 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to &quot;Events&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">事件名(Name)</th><th style="text-align:center;">参数类型(args)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">click</td><td style="text-align:center;">event</td><td style="text-align:center;">Click Event</td></tr></tbody></table><h3 id="data" tabindex="-1">Data <a class="header-anchor" href="#data" aria-label="Permalink to &quot;Data&quot;">​</a></h3><ol><li>revealContainer</li></ol><p>若要将Reveal事件监听器绑定在某个元素上以节省性能, 请使用此属性并且需要指定三个属性<code>init</code>, <code>el</code>和<code>revealHandlerList</code>. 默认值为false时, 将会在window上监听, 并在全局状态管理下的<code>revealHandlerList</code>下维护所有的RevealContainer组件.</p><div class="language-javascript vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    init</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,    </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 默认值为false, 定义了一个包含RevealContainer的组件后, init会自行修改, 不需要手动修改其值.</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    el</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> HTMLElement, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 此为要绑定的对象, 必须采用函数式声明.</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    revealHandlerList</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: []   </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 所有被侦听的RevealContainer对象.</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><ol start="2"><li>parent</li></ol><p>当RevealContainer被定义在父元素的底层时, 无法触发到click事件, 因此可以利用parent来显式定义被监听的click对象. 需要说明的是, parent必须用函数式定义.</p><div class="language-javascript vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">parent</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> HTMLElement</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div>`,14),_=JSON.parse('{"title":"RevealContainer","description":"","frontmatter":{"page":true,"title":"RevealContainer"},"headers":[],"relativePath":"guide/components/reveal-container/index.md","filePath":"guide/components/reveal-container/index.md"}'),b={name:"guide/components/reveal-container/index.md"},B=d({...b,setup(v){return r(),(m,x)=>{const e=l("fv-RevealContainer"),s=l("ClientOnly");return k(),h("div",null,[o,c,t(s,null,{default:i(()=>[t(e)]),_:1}),g,t(s,null,{default:i(()=>[t(e,{disabled:""})]),_:1}),E,t(s,null,{default:i(()=>[t(e,{backgroundColor:"rgba(0, 98, 158, 0.3)",borderColor:"rgba(0, 98, 158, 0.3)"})]),_:1}),y,t(s,null,{default:i(()=>[t(e,{backgroundGradientList:["rgba(0, 0, 0, 0.1)","rgba(255, 255, 255, 0)"],borderGradientList:["#40e0d0","#40e0d0","#ff8c00","#ff8c00","#ff0080","rgba(255, 255, 255, 0)"],borderGradientSize:"120"},null,8,["backgroundGradientList","borderGradientList"])]),_:1}),u])}}});export{_ as __pageData,B as default};
diff --git a/assets/guide_components_reveal-container_index.md.Cut2r4tV.lean.js b/assets/guide_components_reveal-container_index.md.Cut2r4tV.lean.js
new file mode 100644
index 0000000..988b473
--- /dev/null
+++ b/assets/guide_components_reveal-container_index.md.Cut2r4tV.lean.js
@@ -0,0 +1,9 @@
+import{u as r}from"./chunks/index.CvzShnhD.js";import{k as d,q as h,Y as t,z as i,H as n,u as p,aq as a,S as l,p as k}from"./chunks/framework.DvIFzl91.js";import"./chunks/theme.CgqFBnN_.js";const o=n("h3",{id:"revealcontainer-demo",tabindex:"-1"},[p("RevealContainer-DEMO "),n("a",{class:"header-anchor",href:"#revealcontainer-demo","aria-label":'Permalink to "RevealContainer-DEMO"'},"​")],-1),c=n("hr",null,null,-1),g=a(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-RevealContainer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-RevealContainer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>Disabled</p>`,2),E=a(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-RevealContainer</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> disabled</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-RevealContainer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="revealcontainer-customize" tabindex="-1">RevealContainer-Customize <a class="header-anchor" href="#revealcontainer-customize" aria-label="Permalink to &quot;RevealContainer-Customize&quot;">​</a></h3><hr><p>Single Color</p>`,4),y=a(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-RevealContainer</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> backgroundColor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rgba(0, 98, 158, 0.3)&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> borderColor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rgba(0, 98, 158, 0.3)&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-RevealContainer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>Gradient Color</p>`,2),u=a(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-RevealContainer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">backgroundGradientList</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;rgba(0, 0, 0, 0.1)&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;rgba(255, 255, 255, 0)&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">borderGradientList</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;#40e0d0&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;#40e0d0&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;#ff8c00&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;#ff8c00&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;#ff0080&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;rgba(255, 255, 255, 0)&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> borderGradientSize</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;120&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-RevealContainer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">revealContainer</td><td style="text-align:center;">Object</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">parent</td><td style="text-align:center;">[function]</td><td style="text-align:center;">No</td><td style="text-align:center;">null</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">borderWidth</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">1</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">borderRadius</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">6</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">backgroundColor</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">rgba(121, 119, 117, 0.6)</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">backgroundGradientList</td><td style="text-align:center;">Array</td><td style="text-align:center;">No</td><td style="text-align:center;">[]</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">backgroundGradientSize</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">120</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">borderColor</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">rgba(121, 119, 117, 0.6)</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">borderGradientList</td><td style="text-align:center;">Array</td><td style="text-align:center;">No</td><td style="text-align:center;">[]</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">borderGradientSize</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">60</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">debounceDistance</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">300</td><td style="text-align:center;">节流, 超过此距离时, 不去计算渲染</td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">[&#39;system&#39;,&#39;light&#39;,&#39;dark&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">system</td><td style="text-align:center;"></td></tr></tbody></table><h3 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to &quot;Events&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">事件名(Name)</th><th style="text-align:center;">参数类型(args)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">click</td><td style="text-align:center;">event</td><td style="text-align:center;">Click Event</td></tr></tbody></table><h3 id="data" tabindex="-1">Data <a class="header-anchor" href="#data" aria-label="Permalink to &quot;Data&quot;">​</a></h3><ol><li>revealContainer</li></ol><p>若要将Reveal事件监听器绑定在某个元素上以节省性能, 请使用此属性并且需要指定三个属性<code>init</code>, <code>el</code>和<code>revealHandlerList</code>. 默认值为false时, 将会在window上监听, 并在全局状态管理下的<code>revealHandlerList</code>下维护所有的RevealContainer组件.</p><div class="language-javascript vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    init</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,    </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 默认值为false, 定义了一个包含RevealContainer的组件后, init会自行修改, 不需要手动修改其值.</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    el</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> HTMLElement, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 此为要绑定的对象, 必须采用函数式声明.</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    revealHandlerList</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: []   </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 所有被侦听的RevealContainer对象.</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><ol start="2"><li>parent</li></ol><p>当RevealContainer被定义在父元素的底层时, 无法触发到click事件, 因此可以利用parent来显式定义被监听的click对象. 需要说明的是, parent必须用函数式定义.</p><div class="language-javascript vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">parent</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> HTMLElement</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div>`,14),_=JSON.parse('{"title":"RevealContainer","description":"","frontmatter":{"page":true,"title":"RevealContainer"},"headers":[],"relativePath":"guide/components/reveal-container/index.md","filePath":"guide/components/reveal-container/index.md"}'),b={name:"guide/components/reveal-container/index.md"},B=d({...b,setup(v){return r(),(m,x)=>{const e=l("fv-RevealContainer"),s=l("ClientOnly");return k(),h("div",null,[o,c,t(s,null,{default:i(()=>[t(e)]),_:1}),g,t(s,null,{default:i(()=>[t(e,{disabled:""})]),_:1}),E,t(s,null,{default:i(()=>[t(e,{backgroundColor:"rgba(0, 98, 158, 0.3)",borderColor:"rgba(0, 98, 158, 0.3)"})]),_:1}),y,t(s,null,{default:i(()=>[t(e,{backgroundGradientList:["rgba(0, 0, 0, 0.1)","rgba(255, 255, 255, 0)"],borderGradientList:["#40e0d0","#40e0d0","#ff8c00","#ff8c00","#ff0080","rgba(255, 255, 255, 0)"],borderGradientSize:"120"},null,8,["backgroundGradientList","borderGradientList"])]),_:1}),u])}}});export{_ as __pageData,B as default};
diff --git a/assets/guide_components_scroll-story_index.md.Vpgb1HSV.js b/assets/guide_components_scroll-story_index.md.Vpgb1HSV.js
new file mode 100644
index 0000000..94c2826
--- /dev/null
+++ b/assets/guide_components_scroll-story_index.md.Vpgb1HSV.js
@@ -0,0 +1,7 @@
+import{_ as o,q as h,Y as t,z as s,H as e,u as d,aq as r,S as n,p}from"./chunks/framework.DvIFzl91.js";const P=JSON.parse('{"title":"ScrollStory","description":"","frontmatter":{"page":true,"title":"ScrollStory"},"headers":[],"relativePath":"guide/components/scroll-story/index.md","filePath":"guide/components/scroll-story/index.md"}'),c={name:"guide/components/scroll-story/index.md"},k=e("h3",{id:"scrollstory-demo",tabindex:"-1"},[d("ScrollStory-DEMO "),e("a",{class:"header-anchor",href:"#scrollstory-demo","aria-label":'Permalink to "ScrollStory-DEMO"'},"​")],-1),y=e("hr",null,null,-1),g=e("div",{style:{height:"500px"}},null,-1),E=r(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-ScrollStory</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;scale-up-to-up&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;fv-colorPicker&gt;&lt;/fv-colorPicker&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-ScrollStory</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="scrollstory-infinite-show" tabindex="-1">ScrollStory-Infinite Show <a class="header-anchor" href="#scrollstory-infinite-show" aria-label="Permalink to &quot;ScrollStory-Infinite Show&quot;">​</a></h3><hr>`,3),u=r(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-ScrollStory</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;scale-down-to-down&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">infinite</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;fv-colorPicker&gt;&lt;/fv-colorPicker&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-ScrollStory</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="scrollstory-over-collapse" tabindex="-1">ScrollStory-Over Collapse <a class="header-anchor" href="#scrollstory-over-collapse" aria-label="Permalink to &quot;ScrollStory-Over Collapse&quot;">​</a></h3><hr>`,3),_=r(`<div style="height:500px;"></div><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-ScrollStory</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;scale-down-to-down&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">overCollapse</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;fv-colorPicker&gt;&lt;/fv-colorPicker&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-ScrollStory</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">name</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">Vue transition css name</td></tr><tr><td style="text-align:center;">infinite</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">Infinite show</td></tr><tr><td style="text-align:center;">overCollapse</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">Scroll over collapse</td></tr><tr><td style="text-align:center;">trueRender</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">Only render when show</td></tr></tbody></table><h3 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to &quot;Events&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">事件名(Name)</th><th style="text-align:center;">参数类型(args)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">show-changed</td><td style="text-align:center;">show</td><td style="text-align:center;"></td></tr></tbody></table>`,8);function v(m,b,f,x,S,C){const i=n("fv-colorPicker"),a=n("fv-ScrollStory"),l=n("ClientOnly");return p(),h("div",null,[k,y,g,t(l,null,{default:s(()=>[t(a,{name:"scale-up-to-up"},{default:s(()=>[t(i)]),_:1})]),_:1}),E,t(l,null,{default:s(()=>[t(a,{name:"scale-down-to-down",infinite:!0},{default:s(()=>[t(i)]),_:1})]),_:1}),u,t(l,null,{default:s(()=>[t(a,{name:"scale-down-to-down",overCollapse:!0},{default:s(()=>[t(i)]),_:1})]),_:1}),_])}const q=o(c,[["render",v]]);export{P as __pageData,q as default};
diff --git a/assets/guide_components_scroll-story_index.md.Vpgb1HSV.lean.js b/assets/guide_components_scroll-story_index.md.Vpgb1HSV.lean.js
new file mode 100644
index 0000000..2fd0e56
--- /dev/null
+++ b/assets/guide_components_scroll-story_index.md.Vpgb1HSV.lean.js
@@ -0,0 +1 @@
+import{_ as o,q as h,Y as t,z as s,H as e,u as d,aq as r,S as n,p}from"./chunks/framework.DvIFzl91.js";const P=JSON.parse('{"title":"ScrollStory","description":"","frontmatter":{"page":true,"title":"ScrollStory"},"headers":[],"relativePath":"guide/components/scroll-story/index.md","filePath":"guide/components/scroll-story/index.md"}'),c={name:"guide/components/scroll-story/index.md"},k=e("h3",{id:"scrollstory-demo",tabindex:"-1"},[d("ScrollStory-DEMO "),e("a",{class:"header-anchor",href:"#scrollstory-demo","aria-label":'Permalink to "ScrollStory-DEMO"'},"​")],-1),y=e("hr",null,null,-1),g=e("div",{style:{height:"500px"}},null,-1),E=r("",3),u=r("",3),_=r("",8);function v(m,b,f,x,S,C){const i=n("fv-colorPicker"),a=n("fv-ScrollStory"),l=n("ClientOnly");return p(),h("div",null,[k,y,g,t(l,null,{default:s(()=>[t(a,{name:"scale-up-to-up"},{default:s(()=>[t(i)]),_:1})]),_:1}),E,t(l,null,{default:s(()=>[t(a,{name:"scale-down-to-down",infinite:!0},{default:s(()=>[t(i)]),_:1})]),_:1}),u,t(l,null,{default:s(()=>[t(a,{name:"scale-down-to-down",overCollapse:!0},{default:s(()=>[t(i)]),_:1})]),_:1}),_])}const q=o(c,[["render",v]]);export{P as __pageData,q as default};
diff --git a/assets/guide_components_search-box_emits.md.-d9sWNNt.js b/assets/guide_components_search-box_emits.md.-d9sWNNt.js
new file mode 100644
index 0000000..50f7b1e
--- /dev/null
+++ b/assets/guide_components_search-box_emits.md.-d9sWNNt.js
@@ -0,0 +1 @@
+import{_ as t,q as e,p as a,aq as s}from"./chunks/framework.DvIFzl91.js";const u=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/components/search-box/emits.md","filePath":"guide/components/search-box/emits.md"}'),n={name:"guide/components/search-box/emits.md"},o=s('<h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-label="Permalink to &quot;Emits&quot;">​</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead></table>',3),r=[o];function i(c,_,m,h,d,l){return a(),e("div",null,r)}const x=t(n,[["render",i]]);export{u as __pageData,x as default};
diff --git a/assets/guide_components_search-box_emits.md.-d9sWNNt.lean.js b/assets/guide_components_search-box_emits.md.-d9sWNNt.lean.js
new file mode 100644
index 0000000..51d17ba
--- /dev/null
+++ b/assets/guide_components_search-box_emits.md.-d9sWNNt.lean.js
@@ -0,0 +1 @@
+import{_ as t,q as e,p as a,aq as s}from"./chunks/framework.DvIFzl91.js";const u=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/components/search-box/emits.md","filePath":"guide/components/search-box/emits.md"}'),n={name:"guide/components/search-box/emits.md"},o=s("",3),r=[o];function i(c,_,m,h,d,l){return a(),e("div",null,r)}const x=t(n,[["render",i]]);export{u as __pageData,x as default};
diff --git a/assets/guide_components_search-box_index.md.DgkrY0oY.js b/assets/guide_components_search-box_index.md.DgkrY0oY.js
new file mode 100644
index 0000000..b378b85
--- /dev/null
+++ b/assets/guide_components_search-box_index.md.DgkrY0oY.js
@@ -0,0 +1,90 @@
+import{_ as C,q as l,Y as p,H as s,z as c,u as B,aq as E,S as x,p as a,U as k,V as d,y,v as u}from"./chunks/framework.DvIFzl91.js";const v={data(){return{value:"",items:[{key:"fruitsHeader",name:"Fruits",type:"header"},{key:"apple",name:"Apple"},{key:"banana",name:"Banana"},{key:"orange",name:"Orange",disabled:!0},{key:"grape",name:"Grape"},{key:"divider_1",name:"",type:"divider"},{key:"vegetablesHeader",name:"Vegetables",type:"header"},{key:"broccoli",name:"Broccoli"},{key:"carrot",name:"Carrot"},{key:"lettuce",name:"Lettuce"}],custom_items:{people:["https://th.bing.com/th/id/OIP.kusjJHHbJMyhkHQXMwn23gHaE8?w=253&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7","https://th.bing.com/th/id/OIP.PHUY3CWgvSSgeoZ5ZE9-0AHaFr?w=214&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7","https://th.bing.com/th/id/OIP.XE7Fk_nOciTNMxXFhIPxhAHaGB?w=219&h=183&c=7&r=0&o=5&dpr=1.5&pid=1.7"],pos:["Beijing","Shanghai","Shenzhen"],pro:["IT","Doctor","Artist"]},resultPlaceholder:[]}},methods:{customFilterFunc(o){let r={};for(name in o){if(name=="people")continue;let F=[];for(let b of o[name])b.toString().toLowerCase().indexOf(this.value.toLowerCase())>-1&&F.push(b);r[name]=F}return r.people=o.people,r}}},as=JSON.parse('{"title":"SearchBox","description":"","frontmatter":{"page":true,"title":"SearchBox"},"headers":[],"relativePath":"guide/components/search-box/index.md","filePath":"guide/components/search-box/index.md"}'),_=s("h3",{id:"searchbox-demo",tabindex:"-1"},[B("SearchBox-DEMO "),s("a",{class:"header-anchor",href:"#searchbox-demo","aria-label":'Permalink to "SearchBox-DEMO"'},"​")],-1),S=s("hr",null,null,-1),A=s("p",null,"Standard",-1),f=s("p",null,"Disabled",-1),D=E(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">Standard</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-SearchBox</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> icon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Search&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Search&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">options</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">items</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-SearchBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">Disabled</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-SearchBox</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> icon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Search&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Search&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">options</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">items</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> disabled</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-SearchBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h3 id="searchbox-revealborder" tabindex="-1">SearchBox-RevealBorder <a class="header-anchor" href="#searchbox-revealborder" aria-label="Permalink to &quot;SearchBox-RevealBorder&quot;">​</a></h3>`,2),P=E('<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-SearchBox</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Please enter the text here.&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> icon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Search&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">options</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">items</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">revealBorder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> borderColor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rgba(0, 0, 0, 0.01)&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> borderRadius</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;3&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">isBoxShadow</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-SearchBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="searchbox-custom-search-result" tabindex="-1">SearchBox-Custom Search Result <a class="header-anchor" href="#searchbox-custom-search-result" aria-label="Permalink to &quot;SearchBox-Custom Search Result&quot;">​</a></h3><hr>',3),w={style:{position:"relative",width:"100%",height:"auto",display:"flex","flex-direction":"column"}},N=s("span",{class:"list-item list-title"},"人物",-1),T={style:{position:"relative",width:"100%",height:"60px",display:"flex"}},V=s("span",{class:"list-item list-title"},"位置",-1),R=s("span",{class:"list-item list-title"},"职业",-1),I=E(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;fv-SearchBox v-model=&quot;value&quot; icon=&quot;Search&quot; placeholder=&quot;Search&quot; :options=&quot;custom_items&quot; :focusShow=&quot;true&quot; :customFilter=&quot;customFilterFunc&quot; :resultPlaceholder.sync=&quot;resultPlaceholder&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;template v-slot:resultPlaceholder=&quot;x&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            &lt;fv-img v-for=&quot;(item, index) in resultPlaceholder&quot; :key=&quot;index&quot; :src=&quot;item&quot; style=&quot;width: 25px; height: 25px; margin: 0px 3px; border-radius: 50%;&quot;/&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;template v-slot:searchResult=&quot;x&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            &lt;div style=&quot;position: relative; width: 100%; height: auto; display: flex; flex-direction: column;&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                &lt;span class=&quot;list-item list-title&quot;&gt;人物&lt;/span&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                &lt;div style=&quot;position: relative; width: 100%; height: 60px; display: flex;&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                    &lt;fv-img v-for=&quot;(item, index) in x.data.people&quot; :key=&quot;index&quot; :src=&quot;item&quot; style=&quot;width: 50px; height: 50px; margin: 5px; border-radius: 50%;&quot; @click.native=&quot;resultPlaceholder.push(item)&quot;/&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;list-item list-title&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;位置&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                    &lt;p v-for=&quot;(item, index) in x.data.pos&quot; class=&quot;list-item&quot; :key=&quot;index&quot;&gt;{{item}}&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;list-item list-title&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;职业&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                    &lt;p v-for=&quot;(item, index) in x.data.pro&quot; class=&quot;list-item&quot; :key=&quot;index&quot;&gt;{{item}}&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/fv-SearchBox&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br></div></div><h3 id="textbox-with-underline-and-borderless" tabindex="-1">TextBox-With Underline And Borderless <a class="header-anchor" href="#textbox-with-underline-and-borderless" aria-label="Permalink to &quot;TextBox-With Underline And Borderless&quot;">​</a></h3><hr><ol><li>Light</li></ol>`,4),H=s("ol",{start:"2"},[s("li",null,"Dark")],-1),O={style:{width:"100%",padding:"25px",background:"black"}},z=s("ol",{start:"3"},[s("li",null,"Underline with Reveal")],-1),L=E(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">1. Light</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-SearchBox</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> icon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Search&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Search&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">options</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">items</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> underline</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-SearchBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">2. Dark</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-SearchBox</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> icon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Search&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Search&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;dark&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">options</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">items</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> underline</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-SearchBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">3. Underline with Reveal</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-SearchBox</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> icon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Search&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Search&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">options</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">items</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">revealBorder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> underline</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-SearchBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><h3 id="searchbox-dark-theme" tabindex="-1">SearchBox-Dark Theme <a class="header-anchor" href="#searchbox-dark-theme" aria-label="Permalink to &quot;SearchBox-Dark Theme&quot;">​</a></h3><hr><ol><li>Original Template</li></ol>`,4),U={style:{width:"100%",padding:"25px",background:"black"}},M=s("ol",{start:"2"},[s("li",null,"Custom Template")],-1),j={style:{width:"100%",padding:"25px",background:"black"}},W={style:{position:"relative",width:"100%",height:"auto",display:"flex","flex-direction":"column"}},G=s("span",{class:"list-item list-title"},"人物",-1),J={style:{position:"relative",width:"100%",height:"60px",display:"flex"}},X=s("span",{class:"list-item list-title"},"位置",-1),Y=s("span",{class:"list-item list-title"},"职业",-1),Z=E(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">1. Original Template</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">padding</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">25</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">black</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;fv-SearchBox icon=&quot;Search&quot; placeholder=&quot;Search&quot; theme=&quot;dark&quot; :options=&quot;items&quot;&gt;&lt;/fv-SearchBox&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><ol start="2"><li>Custom Template</li></ol><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">padding</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">25</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">black</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;fv-SearchBox v-model=&quot;value&quot; icon=&quot;Search&quot; placeholder=&quot;Search&quot; theme=&quot;dark&quot; :options=&quot;custom_items&quot; :focusShow=&quot;true&quot; :customFilter=&quot;customFilterFunc&quot; :resultPlaceholder.sync=&quot;resultPlaceholder&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;template v-slot:resultPlaceholder=&quot;x&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            &lt;fv-img v-for=&quot;(item, index) in resultPlaceholder&quot; :key=&quot;index&quot; :src=&quot;item&quot; style=&quot;width: 25px; height: 25px; margin: 0px 3px; border-radius: 50%;&quot;/&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;template v-slot:searchResult=&quot;x&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            &lt;div style=&quot;position: relative; width: 100%; height: auto; display: flex; flex-direction: column;&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                &lt;span class=&quot;list-item list-title&quot;&gt;人物&lt;/span&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                &lt;div style=&quot;position: relative; width: 100%; height: 60px; display: flex;&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                    &lt;fv-img v-for=&quot;(item, index) in x.data.people&quot; :key=&quot;index&quot; :src=&quot;item&quot; style=&quot;width: 50px; height: 50px; margin: 5px; border-radius: 50%;&quot; @click.native=&quot;resultPlaceholder.push(item)&quot;/&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;list-item list-title&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;位置&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                    &lt;p v-for=&quot;(item, index) in x.data.pos&quot; class=&quot;list-item&quot; :key=&quot;index&quot;&gt;{{item}}&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;list-item list-title&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;职业&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                    &lt;p v-for=&quot;(item, index) in x.data.pro&quot; class=&quot;list-item&quot; :key=&quot;index&quot;&gt;{{item}}&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/fv-SearchBox&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br></div></div><h3 id="textbox-customize" tabindex="-1">TextBox-Customize <a class="header-anchor" href="#textbox-customize" aria-label="Permalink to &quot;TextBox-Customize&quot;">​</a></h3><hr><p>Customize border color</p>`,6),Q={style:{width:"100%",padding:"25px",background:"black"}},K=s("p",null,"Customize background",-1),$={style:{width:"100%",padding:"25px",background:"black"}},ss=E(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">Customize border color</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">padding</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">25</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">black</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;fv-SearchBox icon=&quot;Search&quot; placeholder=&quot;Search&quot; theme=&quot;dark&quot; :options=&quot;items&quot; borderColor=&quot;rgba(0,153,204,1)&quot; focusBorderColor=&quot;rgba(0,204,153,1)&quot;&gt;&lt;/fv-SearchBox&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">Customize background</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">padding</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">25</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">black</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;fv-SearchBox icon=&quot;Search&quot; placeholder=&quot;Search&quot; theme=&quot;dark&quot; :options=&quot;items&quot; background=&quot;rgba(0,153,204,1)&quot; borderColor=&quot;rgba(0,153,204,1)&quot;&gt;&lt;/fv-SearchBox&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">value</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;"></td><td style="text-align:center;">Using v-model binding input value</td></tr><tr><td style="text-align:center;">options</td><td style="text-align:center;">[array or object]</td><td style="text-align:center;">Yes</td><td style="text-align:center;">N/A</td><td style="text-align:center;">SearchBox搜索候选数据</td></tr><tr><td style="text-align:center;">placeholder</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">等同HTML[input]</td></tr><tr><td style="text-align:center;">type</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">text</td><td style="text-align:center;">等同HTML[input]</td></tr><tr><td style="text-align:center;">readonly</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">等同HTML[input]</td></tr><tr><td style="text-align:center;">maxlength</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">等同HTML[input]</td></tr><tr><td style="text-align:center;">customFilter</td><td style="text-align:center;">[object(function)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">客制化搜索筛选函数</td></tr><tr><td style="text-align:center;">resultPlaceholder</td><td style="text-align:center;">Array</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">结果占位数据, 显示在SearchBox左端</td></tr><tr><td style="text-align:center;">focusShow</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否开启获取焦点时显示结果框</td></tr><tr><td style="text-align:center;">leftIcon</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">左图标</td></tr><tr><td style="text-align:center;">icon</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">右图标</td></tr><tr><td style="text-align:center;">underline</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否开启Underline风格的SearchBox</td></tr><tr><td style="text-align:center;">background</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">背景色</td></tr><tr><td style="text-align:center;">borderWidth</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">1</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">borderColor</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">focusBorderColor</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">fontSize</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">13.3</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">fontWeight</td><td style="text-align:center;">[string,number]</td><td style="text-align:center;">No</td><td style="text-align:center;">normal</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">foreground</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">textAlign</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">left</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">borderRadius</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">Textbox圆角大小, 启用revealBorder时将失效</td></tr><tr><td style="text-align:center;">revealBorder</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">status</td><td style="text-align:center;">[&#39;warn&#39;,&#39;correct&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">状态边框预设, 默认有警告和正确两种</td></tr><tr><td style="text-align:center;">debounceDelay</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">300</td><td style="text-align:center;">搜索节流延迟时间</td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">system</td><td style="text-align:center;">主题样式, 包含<code>light</code>, <code>dark</code>, <code>system</code>, <code>custom</code>几种样式</td></tr></tbody></table><h3 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to &quot;Events&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">事件名(Name)</th><th style="text-align:center;">参数类型(args)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">keydown</td><td style="text-align:center;">event</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">keyup</td><td style="text-align:center;">event</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">change</td><td style="text-align:center;">event</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">paste</td><td style="text-align:center;">event</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">left-icon-click</td><td style="text-align:center;">event</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">icon-click</td><td style="text-align:center;">event</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">lazyload</td><td style="text-align:center;">array</td><td style="text-align:center;">搜索结果框滚动加载事件, 滑动到最底部时触发, 返回当前搜索筛选数据</td></tr><tr><td style="text-align:center;">update:resultPlaceholder</td><td style="text-align:center;">array</td><td style="text-align:center;">更新搜索占位数组, 在清除搜索框时触发清除搜索占位数组, 再按下退格键时若文本为空, 清除最后一个搜索占位数据项</td></tr><tr><td style="text-align:center;">clear-click</td><td style="text-align:center;">array</td><td style="text-align:center;">清除搜索框文本时触发</td></tr><tr><td style="text-align:center;">choose-result</td><td style="text-align:center;">object</td><td style="text-align:center;">搜索结果框选中项目后返回当前项</td></tr><tr><td style="text-align:center;">debounce-input</td><td style="text-align:center;">string</td><td style="text-align:center;">搜索节流内容反馈</td></tr></tbody></table><h3 id="slot" tabindex="-1">Slot <a class="header-anchor" href="#slot" aria-label="Permalink to &quot;Slot&quot;">​</a></h3><hr><ol><li>SearchResult</li></ol><p>默认情况下用户可直接在<code>options</code>中定义<code>name</code>来应用默认样式, 不需要修改此模板, 可缺省 用户自定义样式时, 包含以下可选属性</p><ul><li>data: 传入的<code>filterOptions</code></li><li>chooseResult: 用于回调的选择出发函数, 需要传入一个对象, 包含<code>item</code>和<code>item.name</code>属性</li></ul><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">searchResult</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-list-view</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x.data</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">theme</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">auto</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> @</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">chooseItem</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x.chooseResult</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-list-view</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ol start="2"><li>ResultPlaceholder</li></ol><p>用户根据自己的需要在搜索框选择结果后将值显示在<code>SearchBox</code>左侧显示相应数据, 数据模板即为<code>ResultPlaceholder</code></p><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">resultPlaceholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="data" tabindex="-1">Data <a class="header-anchor" href="#data" aria-label="Permalink to &quot;Data&quot;">​</a></h3><hr><ol><li>options</li></ol><p>数据格式参考<code>ListView</code>中<code>items</code>的形式, 其中<code>key</code>字段建议开发者在有重复名称和类型字段时声明用来区别项目</p><div class="language-javascript vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">options </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [{key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, disabled: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}]</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">//e.g.//</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">options</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: [</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;fruitsHeader&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Fruits&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;header&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;apple&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Apple&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;banana&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Banana&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;orange&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Orange&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, disabled: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;grape&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Grape&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;divider_1&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;divider&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;vegetablesHeader&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Vegetables&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;header&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;broccoli&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Broccoli&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;carrot&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Carrot&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;lettuce&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Lettuce&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div>`,21);function is(o,r,F,b,i,m){const h=x("fv-SearchBox"),g=x("fv-img");return a(),l("div",null,[_,S,A,p(h,{icon:"Search",placeholder:"Search",options:i.items},null,8,["options"]),f,p(h,{icon:"Search",placeholder:"Search",options:i.items,disabled:""},null,8,["options"]),D,p(h,{placeholder:"Please enter the text here.",icon:"Search",options:i.items,revealBorder:!0,borderColor:"rgba(0, 0, 0, 0.01)",borderRadius:"3",isBoxShadow:!0},null,8,["options"]),P,s("div",null,[p(h,{modelValue:i.value,"onUpdate:modelValue":r[0]||(r[0]=n=>i.value=n),icon:"Search",placeholder:"Search",options:i.custom_items,focusShow:!0,customFilter:m.customFilterFunc,resultPlaceholder:i.resultPlaceholder},{resultPlaceholder:c(n=>[(a(!0),l(k,null,d(i.resultPlaceholder,(t,e)=>(a(),y(g,{key:e,src:t,style:{width:"25px",height:"25px",margin:"0px 3px","border-radius":"50%"}},null,8,["src"]))),128))]),searchResult:c(n=>[s("div",w,[N,s("div",T,[(a(!0),l(k,null,d(n.data.people,(t,e)=>(a(),y(g,{key:e,src:t,style:{width:"50px",height:"50px",margin:"5px","border-radius":"50%"},onClick:q=>i.resultPlaceholder.push(t)},null,8,["src","onClick"]))),128))]),V,s("span",null,[(a(!0),l(k,null,d(n.data.pos,(t,e)=>(a(),l("p",{class:"list-item",key:e},u(t),1))),128))]),R,s("span",null,[(a(!0),l(k,null,d(n.data.pro,(t,e)=>(a(),l("p",{class:"list-item",key:e},u(t),1))),128))])])]),_:1},8,["modelValue","options","customFilter","resultPlaceholder"])]),I,p(h,{icon:"Search",placeholder:"Search",options:i.items,underline:""},null,8,["options"]),H,s("div",O,[p(h,{icon:"Search",placeholder:"Search",theme:"dark",options:i.items,underline:""},null,8,["options"])]),z,p(h,{icon:"Search",placeholder:"Search",options:i.items,revealBorder:!0,underline:""},null,8,["options"]),L,s("div",U,[p(h,{icon:"Search",placeholder:"Search",theme:"dark",options:i.items},null,8,["options"])]),M,s("div",j,[p(h,{modelValue:i.value,"onUpdate:modelValue":r[1]||(r[1]=n=>i.value=n),icon:"Search",placeholder:"Search",theme:"dark",options:i.custom_items,focusShow:!0,customFilter:m.customFilterFunc,resultPlaceholder:i.resultPlaceholder},{resultPlaceholder:c(n=>[(a(!0),l(k,null,d(i.resultPlaceholder,(t,e)=>(a(),y(g,{key:e,src:t,style:{width:"25px",height:"25px",margin:"0px 3px","border-radius":"50%"}},null,8,["src"]))),128))]),searchResult:c(n=>[s("div",W,[G,s("div",J,[(a(!0),l(k,null,d(n.data.people,(t,e)=>(a(),y(g,{key:e,src:t,style:{width:"50px",height:"50px",margin:"5px","border-radius":"50%"},onClick:q=>i.resultPlaceholder.push(t)},null,8,["src","onClick"]))),128))]),X,s("span",null,[(a(!0),l(k,null,d(n.data.pos,(t,e)=>(a(),l("p",{class:"list-item",key:e},u(t),1))),128))]),Y,s("span",null,[(a(!0),l(k,null,d(n.data.pro,(t,e)=>(a(),l("p",{class:"list-item",key:e},u(t),1))),128))])])]),_:1},8,["modelValue","options","customFilter","resultPlaceholder"])]),Z,s("div",Q,[p(h,{icon:"Search",placeholder:"Search",theme:"dark",options:i.items,borderColor:"rgba(0,153,204,1)",focusBorderColor:"rgba(0,204,153,1)"},null,8,["options"])]),K,s("div",$,[p(h,{icon:"Search",placeholder:"Search",theme:"dark",options:i.items,background:"rgba(0,153,204,1)",borderColor:"rgba(0,153,204,1)"},null,8,["options"])]),ss])}const es=C(v,[["render",is]]);export{as as __pageData,es as default};
diff --git a/assets/guide_components_search-box_index.md.DgkrY0oY.lean.js b/assets/guide_components_search-box_index.md.DgkrY0oY.lean.js
new file mode 100644
index 0000000..41636be
--- /dev/null
+++ b/assets/guide_components_search-box_index.md.DgkrY0oY.lean.js
@@ -0,0 +1 @@
+import{_ as C,q as l,Y as p,H as s,z as c,u as B,aq as E,S as x,p as a,U as k,V as d,y,v as u}from"./chunks/framework.DvIFzl91.js";const v={data(){return{value:"",items:[{key:"fruitsHeader",name:"Fruits",type:"header"},{key:"apple",name:"Apple"},{key:"banana",name:"Banana"},{key:"orange",name:"Orange",disabled:!0},{key:"grape",name:"Grape"},{key:"divider_1",name:"",type:"divider"},{key:"vegetablesHeader",name:"Vegetables",type:"header"},{key:"broccoli",name:"Broccoli"},{key:"carrot",name:"Carrot"},{key:"lettuce",name:"Lettuce"}],custom_items:{people:["https://th.bing.com/th/id/OIP.kusjJHHbJMyhkHQXMwn23gHaE8?w=253&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7","https://th.bing.com/th/id/OIP.PHUY3CWgvSSgeoZ5ZE9-0AHaFr?w=214&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7","https://th.bing.com/th/id/OIP.XE7Fk_nOciTNMxXFhIPxhAHaGB?w=219&h=183&c=7&r=0&o=5&dpr=1.5&pid=1.7"],pos:["Beijing","Shanghai","Shenzhen"],pro:["IT","Doctor","Artist"]},resultPlaceholder:[]}},methods:{customFilterFunc(o){let r={};for(name in o){if(name=="people")continue;let F=[];for(let b of o[name])b.toString().toLowerCase().indexOf(this.value.toLowerCase())>-1&&F.push(b);r[name]=F}return r.people=o.people,r}}},as=JSON.parse('{"title":"SearchBox","description":"","frontmatter":{"page":true,"title":"SearchBox"},"headers":[],"relativePath":"guide/components/search-box/index.md","filePath":"guide/components/search-box/index.md"}'),_=s("h3",{id:"searchbox-demo",tabindex:"-1"},[B("SearchBox-DEMO "),s("a",{class:"header-anchor",href:"#searchbox-demo","aria-label":'Permalink to "SearchBox-DEMO"'},"​")],-1),S=s("hr",null,null,-1),A=s("p",null,"Standard",-1),f=s("p",null,"Disabled",-1),D=E("",2),P=E("",3),w={style:{position:"relative",width:"100%",height:"auto",display:"flex","flex-direction":"column"}},N=s("span",{class:"list-item list-title"},"人物",-1),T={style:{position:"relative",width:"100%",height:"60px",display:"flex"}},V=s("span",{class:"list-item list-title"},"位置",-1),R=s("span",{class:"list-item list-title"},"职业",-1),I=E("",4),H=s("ol",{start:"2"},[s("li",null,"Dark")],-1),O={style:{width:"100%",padding:"25px",background:"black"}},z=s("ol",{start:"3"},[s("li",null,"Underline with Reveal")],-1),L=E("",4),U={style:{width:"100%",padding:"25px",background:"black"}},M=s("ol",{start:"2"},[s("li",null,"Custom Template")],-1),j={style:{width:"100%",padding:"25px",background:"black"}},W={style:{position:"relative",width:"100%",height:"auto",display:"flex","flex-direction":"column"}},G=s("span",{class:"list-item list-title"},"人物",-1),J={style:{position:"relative",width:"100%",height:"60px",display:"flex"}},X=s("span",{class:"list-item list-title"},"位置",-1),Y=s("span",{class:"list-item list-title"},"职业",-1),Z=E("",6),Q={style:{width:"100%",padding:"25px",background:"black"}},K=s("p",null,"Customize background",-1),$={style:{width:"100%",padding:"25px",background:"black"}},ss=E("",21);function is(o,r,F,b,i,m){const h=x("fv-SearchBox"),g=x("fv-img");return a(),l("div",null,[_,S,A,p(h,{icon:"Search",placeholder:"Search",options:i.items},null,8,["options"]),f,p(h,{icon:"Search",placeholder:"Search",options:i.items,disabled:""},null,8,["options"]),D,p(h,{placeholder:"Please enter the text here.",icon:"Search",options:i.items,revealBorder:!0,borderColor:"rgba(0, 0, 0, 0.01)",borderRadius:"3",isBoxShadow:!0},null,8,["options"]),P,s("div",null,[p(h,{modelValue:i.value,"onUpdate:modelValue":r[0]||(r[0]=n=>i.value=n),icon:"Search",placeholder:"Search",options:i.custom_items,focusShow:!0,customFilter:m.customFilterFunc,resultPlaceholder:i.resultPlaceholder},{resultPlaceholder:c(n=>[(a(!0),l(k,null,d(i.resultPlaceholder,(t,e)=>(a(),y(g,{key:e,src:t,style:{width:"25px",height:"25px",margin:"0px 3px","border-radius":"50%"}},null,8,["src"]))),128))]),searchResult:c(n=>[s("div",w,[N,s("div",T,[(a(!0),l(k,null,d(n.data.people,(t,e)=>(a(),y(g,{key:e,src:t,style:{width:"50px",height:"50px",margin:"5px","border-radius":"50%"},onClick:q=>i.resultPlaceholder.push(t)},null,8,["src","onClick"]))),128))]),V,s("span",null,[(a(!0),l(k,null,d(n.data.pos,(t,e)=>(a(),l("p",{class:"list-item",key:e},u(t),1))),128))]),R,s("span",null,[(a(!0),l(k,null,d(n.data.pro,(t,e)=>(a(),l("p",{class:"list-item",key:e},u(t),1))),128))])])]),_:1},8,["modelValue","options","customFilter","resultPlaceholder"])]),I,p(h,{icon:"Search",placeholder:"Search",options:i.items,underline:""},null,8,["options"]),H,s("div",O,[p(h,{icon:"Search",placeholder:"Search",theme:"dark",options:i.items,underline:""},null,8,["options"])]),z,p(h,{icon:"Search",placeholder:"Search",options:i.items,revealBorder:!0,underline:""},null,8,["options"]),L,s("div",U,[p(h,{icon:"Search",placeholder:"Search",theme:"dark",options:i.items},null,8,["options"])]),M,s("div",j,[p(h,{modelValue:i.value,"onUpdate:modelValue":r[1]||(r[1]=n=>i.value=n),icon:"Search",placeholder:"Search",theme:"dark",options:i.custom_items,focusShow:!0,customFilter:m.customFilterFunc,resultPlaceholder:i.resultPlaceholder},{resultPlaceholder:c(n=>[(a(!0),l(k,null,d(i.resultPlaceholder,(t,e)=>(a(),y(g,{key:e,src:t,style:{width:"25px",height:"25px",margin:"0px 3px","border-radius":"50%"}},null,8,["src"]))),128))]),searchResult:c(n=>[s("div",W,[G,s("div",J,[(a(!0),l(k,null,d(n.data.people,(t,e)=>(a(),y(g,{key:e,src:t,style:{width:"50px",height:"50px",margin:"5px","border-radius":"50%"},onClick:q=>i.resultPlaceholder.push(t)},null,8,["src","onClick"]))),128))]),X,s("span",null,[(a(!0),l(k,null,d(n.data.pos,(t,e)=>(a(),l("p",{class:"list-item",key:e},u(t),1))),128))]),Y,s("span",null,[(a(!0),l(k,null,d(n.data.pro,(t,e)=>(a(),l("p",{class:"list-item",key:e},u(t),1))),128))])])]),_:1},8,["modelValue","options","customFilter","resultPlaceholder"])]),Z,s("div",Q,[p(h,{icon:"Search",placeholder:"Search",theme:"dark",options:i.items,borderColor:"rgba(0,153,204,1)",focusBorderColor:"rgba(0,204,153,1)"},null,8,["options"])]),K,s("div",$,[p(h,{icon:"Search",placeholder:"Search",theme:"dark",options:i.items,background:"rgba(0,153,204,1)",borderColor:"rgba(0,153,204,1)"},null,8,["options"])]),ss])}const es=C(v,[["render",is]]);export{as as __pageData,es as default};
diff --git a/assets/guide_components_search-box_properties.md.DEKFfPFw.js b/assets/guide_components_search-box_properties.md.DEKFfPFw.js
new file mode 100644
index 0000000..8893ae2
--- /dev/null
+++ b/assets/guide_components_search-box_properties.md.DEKFfPFw.js
@@ -0,0 +1 @@
+import{_ as e,q as t,p as r,aq as a}from"./chunks/framework.DvIFzl91.js";const u=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/components/search-box/properties.md","filePath":"guide/components/search-box/properties.md"}'),o={name:"guide/components/search-box/properties.md"},s=a('<h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-label="Permalink to &quot;Properties&quot;">​</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead></table>',3),n=[s];function i(c,p,h,_,l,d){return r(),t("div",null,n)}const x=e(o,[["render",i]]);export{u as __pageData,x as default};
diff --git a/assets/guide_components_search-box_properties.md.DEKFfPFw.lean.js b/assets/guide_components_search-box_properties.md.DEKFfPFw.lean.js
new file mode 100644
index 0000000..ac32594
--- /dev/null
+++ b/assets/guide_components_search-box_properties.md.DEKFfPFw.lean.js
@@ -0,0 +1 @@
+import{_ as e,q as t,p as r,aq as a}from"./chunks/framework.DvIFzl91.js";const u=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/components/search-box/properties.md","filePath":"guide/components/search-box/properties.md"}'),o={name:"guide/components/search-box/properties.md"},s=a("",3),n=[s];function i(c,p,h,_,l,d){return r(),t("div",null,n)}const x=e(o,[["render",i]]);export{u as __pageData,x as default};
diff --git a/assets/guide_components_shimmer_emits.md.CTMInlI3.js b/assets/guide_components_shimmer_emits.md.CTMInlI3.js
new file mode 100644
index 0000000..12dbdb1
--- /dev/null
+++ b/assets/guide_components_shimmer_emits.md.CTMInlI3.js
@@ -0,0 +1 @@
+import{_ as t,q as e,p as a,aq as s}from"./chunks/framework.DvIFzl91.js";const u=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/components/shimmer/emits.md","filePath":"guide/components/shimmer/emits.md"}'),i={name:"guide/components/shimmer/emits.md"},n=s('<h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-label="Permalink to &quot;Emits&quot;">​</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead></table>',3),r=[n];function m(o,_,c,h,d,l){return a(),e("div",null,r)}const f=t(i,[["render",m]]);export{u as __pageData,f as default};
diff --git a/assets/guide_components_shimmer_emits.md.CTMInlI3.lean.js b/assets/guide_components_shimmer_emits.md.CTMInlI3.lean.js
new file mode 100644
index 0000000..a837553
--- /dev/null
+++ b/assets/guide_components_shimmer_emits.md.CTMInlI3.lean.js
@@ -0,0 +1 @@
+import{_ as t,q as e,p as a,aq as s}from"./chunks/framework.DvIFzl91.js";const u=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/components/shimmer/emits.md","filePath":"guide/components/shimmer/emits.md"}'),i={name:"guide/components/shimmer/emits.md"},n=s("",3),r=[n];function m(o,_,c,h,d,l){return a(),e("div",null,r)}const f=t(i,[["render",m]]);export{u as __pageData,f as default};
diff --git a/assets/guide_components_shimmer_index.md.iZlHuTxw.js b/assets/guide_components_shimmer_index.md.iZlHuTxw.js
new file mode 100644
index 0000000..1e2947f
--- /dev/null
+++ b/assets/guide_components_shimmer_index.md.iZlHuTxw.js
@@ -0,0 +1,43 @@
+import{_ as g,q as e,H as s,Y as t,z as a,u,aq as k,S as o,p as n,U as p,V as d,a3 as r}from"./chunks/framework.DvIFzl91.js";const K=JSON.parse('{"title":"Shimmer","description":"","frontmatter":{"page":true,"title":"Shimmer"},"headers":[],"relativePath":"guide/components/shimmer/index.md","filePath":"guide/components/shimmer/index.md"}'),c={name:"guide/components/shimmer/index.md"},y=s("h3",{id:"shimmer-demo",tabindex:"-1"},[u("Shimmer-DEMO "),s("a",{class:"header-anchor",href:"#shimmer-demo","aria-label":'Permalink to "Shimmer-DEMO"'},"​")],-1),m=s("hr",null,null,-1),v=s("p",null,"Avatar with item",-1),b={style:{width:"100%",height:"100%",display:"flex","flex-direction":"column"}},_=s("div",{class:"sample",style:{width:"35px",height:"35px","border-radius":"50%"}},null,-1),q=s("div",{class:"sample",style:{width:"80%","margin-left":"15px"}},null,-1),x=[_,q],F=k(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Shimmer</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">auto</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;div style=&quot;width: 100%; height: 100%; display: flex; flex-direction: column;&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;div v-for=&quot;(item, index) in 5&quot; :key=&quot;index&quot; style=&quot;margin-top: 5px; display: flex; align-items: center;&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            &lt;div class=&quot;sample&quot; style=&quot;width: 35px; height: 35px; border-radius: 50%;&quot;&gt;&lt;/div&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            &lt;div class=&quot;sample&quot; style=&quot;width: 80%; margin-left: 15px;&quot;&gt;&lt;/div&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;/div&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/div&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Shimmer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><p>List items</p>`,2),f={style:{width:"100%",height:"100%",display:"flex","flex-direction":"column"}},C=k(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Shimmer</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">auto</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;div style=&quot;width: 100%; height: 100%; display: flex; flex-direction: column;&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;div v-for=&quot;(item, index) in 3&quot; :key=&quot;index&quot; style=&quot;margin-top: 5px; display: flex; align-items: center;&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            &lt;div class=&quot;sample&quot; style=&quot;width: 80%; height: 15px;&quot; :style=&quot;{width: \`\${100 - index * 10}%\`}&quot;&gt;&lt;/div&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;/div&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/div&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Shimmer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p>List items with two column</p>`,2),w={style:{width:"100%",height:"100%",display:"flex","flex-direction":"column"}},S=k(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Shimmer</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">auto</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;div style=&quot;width: 100%; height: 100%; display: flex; flex-direction: column;&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;div v-for=&quot;(item, index) in 3&quot; :key=&quot;index&quot; style=&quot;margin-top: 5px; display: flex; align-items: center;&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            &lt;div class=&quot;sample&quot; style=&quot;width: 80%; height: 15px;&quot; :style=&quot;{width: \`\${50 - index * 10}%\`}&quot;&gt;&lt;/div&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            &lt;div class=&quot;sample&quot; style=&quot;width: 80%; height: 15px; margin-left: 15px;&quot; :style=&quot;{width: \`\${50 - index * 10}%\`}&quot;&gt;&lt;/div&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;/div&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/div&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Shimmer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h3 id="shimmer-dark-theme" tabindex="-1">Shimmer-Dark Theme <a class="header-anchor" href="#shimmer-dark-theme" aria-label="Permalink to &quot;Shimmer-Dark Theme&quot;">​</a></h3><hr><p>Avatar with item</p>`,4),B={style:{background:"black"}},T={style:{width:"100%",height:"100%",display:"flex","flex-direction":"column"}},A=s("div",{class:"sample",style:{width:"35px",height:"35px","border-radius":"50%"}},null,-1),D=s("div",{class:"sample",style:{width:"80%","margin-left":"15px"}},null,-1),P=[A,D],V=k(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Shimmer</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;dark&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">auto</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;div style=&quot;width: 100%; height: 100%; display: flex; flex-direction: column;&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;div v-for=&quot;(item, index) in 5&quot; :key=&quot;index&quot; style=&quot;margin-top: 5px; display: flex; align-items: center;&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            &lt;div class=&quot;sample&quot; style=&quot;width: 35px; height: 35px; border-radius: 50%;&quot;&gt;&lt;/div&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            &lt;div class=&quot;sample&quot; style=&quot;width: 80%; margin-left: 15px;&quot;&gt;&lt;/div&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;/div&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/div&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Shimmer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><p>List items</p>`,2),$={style:{background:"black"}},I={style:{width:"100%",height:"100%",display:"flex","flex-direction":"column"}},N=k(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Shimmer</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;dark&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">auto</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;div style=&quot;width: 100%; height: 100%; display: flex; flex-direction: column;&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;div v-for=&quot;(item, index) in 3&quot; :key=&quot;index&quot; style=&quot;margin-top: 5px; display: flex; align-items: center;&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            &lt;div class=&quot;sample&quot; style=&quot;width: 80%; height: 15px;&quot; :style=&quot;{width: \`\${100 - index * 10}%\`}&quot;&gt;&lt;/div&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;/div&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/div&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Shimmer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p>List items with two column</p>`,2),R={style:{background:"black"}},L={style:{width:"100%",height:"100%",display:"flex","flex-direction":"column"}},O=k(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Shimmer</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;dark&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">auto</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;div style=&quot;width: 100%; height: 100%; display: flex; flex-direction: column;&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;div v-for=&quot;(item, index) in 3&quot; :key=&quot;index&quot; style=&quot;margin-top: 5px; display: flex; align-items: center;&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            &lt;div class=&quot;sample&quot; style=&quot;width: 80%; height: 15px;&quot; :style=&quot;{width: \`\${50 - index * 10}%\`}&quot;&gt;&lt;/div&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            &lt;div class=&quot;sample&quot; style=&quot;width: 80%; height: 15px; margin-left: 15px;&quot; :style=&quot;{width: \`\${50 - index * 10}%\`}&quot;&gt;&lt;/div&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;/div&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/div&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Shimmer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">theme</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">system</td><td style="text-align:center;">主题样式, 包含<code>light</code>, <code>dark</code>, <code>system</code>, <code>custom</code>几种样式</td></tr></tbody></table><h3 id="slot" tabindex="-1">Slot <a class="header-anchor" href="#slot" aria-label="Permalink to &quot;Slot&quot;">​</a></h3><hr><ol><li>Default</li></ol><p>默认样式为:</p><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;sample&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>自定义<code>Shimmer</code>内容时, 将要呈现Skeleton效果的元素加上<code>sample</code>类.</p><div class="language-javascript vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">fv-shimmer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;sample&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">fv-shimmer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div>`,11);function j(z,M,H,J,U,Y){const l=o("fv-Shimmer"),h=o("ClientOnly");return n(),e("div",null,[y,m,v,s("div",null,[t(h,null,{default:a(()=>[t(l,{style:{height:"auto"}},{default:a(()=>[s("div",b,[(n(),e(p,null,d(5,(E,i)=>s("div",{key:i,style:{"margin-top":"5px",display:"flex","align-items":"center"}},x)),64))])]),_:1})]),_:1})]),F,s("div",null,[t(h,null,{default:a(()=>[t(l,{style:{height:"auto"}},{default:a(()=>[s("div",f,[(n(),e(p,null,d(3,(E,i)=>s("div",{key:i,style:{"margin-top":"5px",display:"flex","align-items":"center"}},[s("div",{class:"sample",style:r([{width:"80%",height:"15px"},{width:`${100-i*10}%`}])},null,4)])),64))])]),_:1})]),_:1})]),C,s("div",null,[t(h,null,{default:a(()=>[t(l,{style:{height:"auto"}},{default:a(()=>[s("div",w,[(n(),e(p,null,d(3,(E,i)=>s("div",{key:i,style:{"margin-top":"5px",display:"flex","align-items":"center"}},[s("div",{class:"sample",style:r([{width:"80%",height:"15px"},{width:`${50-i*10}%`}])},null,4),s("div",{class:"sample",style:r([{width:"80%",height:"15px","margin-left":"15px"},{width:`${50-i*10}%`}])},null,4)])),64))])]),_:1})]),_:1})]),S,s("div",B,[t(h,null,{default:a(()=>[t(l,{theme:"dark",style:{height:"auto"}},{default:a(()=>[s("div",T,[(n(),e(p,null,d(5,(E,i)=>s("div",{key:i,style:{"margin-top":"5px",display:"flex","align-items":"center"}},P)),64))])]),_:1})]),_:1})]),V,s("div",$,[t(h,null,{default:a(()=>[t(l,{theme:"dark",style:{height:"auto"}},{default:a(()=>[s("div",I,[(n(),e(p,null,d(3,(E,i)=>s("div",{key:i,style:{"margin-top":"5px",display:"flex","align-items":"center"}},[s("div",{class:"sample",style:r([{width:"80%",height:"15px"},{width:`${100-i*10}%`}])},null,4)])),64))])]),_:1})]),_:1})]),N,s("div",R,[t(h,null,{default:a(()=>[t(l,{theme:"dark",style:{height:"auto"}},{default:a(()=>[s("div",L,[(n(),e(p,null,d(3,(E,i)=>s("div",{key:i,style:{"margin-top":"5px",display:"flex","align-items":"center"}},[s("div",{class:"sample",style:r([{width:"80%",height:"15px"},{width:`${50-i*10}%`}])},null,4),s("div",{class:"sample",style:r([{width:"80%",height:"15px","margin-left":"15px"},{width:`${50-i*10}%`}])},null,4)])),64))])]),_:1})]),_:1})]),O])}const Q=g(c,[["render",j]]);export{K as __pageData,Q as default};
diff --git a/assets/guide_components_shimmer_index.md.iZlHuTxw.lean.js b/assets/guide_components_shimmer_index.md.iZlHuTxw.lean.js
new file mode 100644
index 0000000..ac5b739
--- /dev/null
+++ b/assets/guide_components_shimmer_index.md.iZlHuTxw.lean.js
@@ -0,0 +1 @@
+import{_ as g,q as e,H as s,Y as t,z as a,u,aq as k,S as o,p as n,U as p,V as d,a3 as r}from"./chunks/framework.DvIFzl91.js";const K=JSON.parse('{"title":"Shimmer","description":"","frontmatter":{"page":true,"title":"Shimmer"},"headers":[],"relativePath":"guide/components/shimmer/index.md","filePath":"guide/components/shimmer/index.md"}'),c={name:"guide/components/shimmer/index.md"},y=s("h3",{id:"shimmer-demo",tabindex:"-1"},[u("Shimmer-DEMO "),s("a",{class:"header-anchor",href:"#shimmer-demo","aria-label":'Permalink to "Shimmer-DEMO"'},"​")],-1),m=s("hr",null,null,-1),v=s("p",null,"Avatar with item",-1),b={style:{width:"100%",height:"100%",display:"flex","flex-direction":"column"}},_=s("div",{class:"sample",style:{width:"35px",height:"35px","border-radius":"50%"}},null,-1),q=s("div",{class:"sample",style:{width:"80%","margin-left":"15px"}},null,-1),x=[_,q],F=k("",2),f={style:{width:"100%",height:"100%",display:"flex","flex-direction":"column"}},C=k("",2),w={style:{width:"100%",height:"100%",display:"flex","flex-direction":"column"}},S=k("",4),B={style:{background:"black"}},T={style:{width:"100%",height:"100%",display:"flex","flex-direction":"column"}},A=s("div",{class:"sample",style:{width:"35px",height:"35px","border-radius":"50%"}},null,-1),D=s("div",{class:"sample",style:{width:"80%","margin-left":"15px"}},null,-1),P=[A,D],V=k("",2),$={style:{background:"black"}},I={style:{width:"100%",height:"100%",display:"flex","flex-direction":"column"}},N=k("",2),R={style:{background:"black"}},L={style:{width:"100%",height:"100%",display:"flex","flex-direction":"column"}},O=k("",11);function j(z,M,H,J,U,Y){const l=o("fv-Shimmer"),h=o("ClientOnly");return n(),e("div",null,[y,m,v,s("div",null,[t(h,null,{default:a(()=>[t(l,{style:{height:"auto"}},{default:a(()=>[s("div",b,[(n(),e(p,null,d(5,(E,i)=>s("div",{key:i,style:{"margin-top":"5px",display:"flex","align-items":"center"}},x)),64))])]),_:1})]),_:1})]),F,s("div",null,[t(h,null,{default:a(()=>[t(l,{style:{height:"auto"}},{default:a(()=>[s("div",f,[(n(),e(p,null,d(3,(E,i)=>s("div",{key:i,style:{"margin-top":"5px",display:"flex","align-items":"center"}},[s("div",{class:"sample",style:r([{width:"80%",height:"15px"},{width:`${100-i*10}%`}])},null,4)])),64))])]),_:1})]),_:1})]),C,s("div",null,[t(h,null,{default:a(()=>[t(l,{style:{height:"auto"}},{default:a(()=>[s("div",w,[(n(),e(p,null,d(3,(E,i)=>s("div",{key:i,style:{"margin-top":"5px",display:"flex","align-items":"center"}},[s("div",{class:"sample",style:r([{width:"80%",height:"15px"},{width:`${50-i*10}%`}])},null,4),s("div",{class:"sample",style:r([{width:"80%",height:"15px","margin-left":"15px"},{width:`${50-i*10}%`}])},null,4)])),64))])]),_:1})]),_:1})]),S,s("div",B,[t(h,null,{default:a(()=>[t(l,{theme:"dark",style:{height:"auto"}},{default:a(()=>[s("div",T,[(n(),e(p,null,d(5,(E,i)=>s("div",{key:i,style:{"margin-top":"5px",display:"flex","align-items":"center"}},P)),64))])]),_:1})]),_:1})]),V,s("div",$,[t(h,null,{default:a(()=>[t(l,{theme:"dark",style:{height:"auto"}},{default:a(()=>[s("div",I,[(n(),e(p,null,d(3,(E,i)=>s("div",{key:i,style:{"margin-top":"5px",display:"flex","align-items":"center"}},[s("div",{class:"sample",style:r([{width:"80%",height:"15px"},{width:`${100-i*10}%`}])},null,4)])),64))])]),_:1})]),_:1})]),N,s("div",R,[t(h,null,{default:a(()=>[t(l,{theme:"dark",style:{height:"auto"}},{default:a(()=>[s("div",L,[(n(),e(p,null,d(3,(E,i)=>s("div",{key:i,style:{"margin-top":"5px",display:"flex","align-items":"center"}},[s("div",{class:"sample",style:r([{width:"80%",height:"15px"},{width:`${50-i*10}%`}])},null,4),s("div",{class:"sample",style:r([{width:"80%",height:"15px","margin-left":"15px"},{width:`${50-i*10}%`}])},null,4)])),64))])]),_:1})]),_:1})]),O])}const Q=g(c,[["render",j]]);export{K as __pageData,Q as default};
diff --git a/assets/guide_components_shimmer_properties.md.CdkU1o6H.js b/assets/guide_components_shimmer_properties.md.CdkU1o6H.js
new file mode 100644
index 0000000..94d782a
--- /dev/null
+++ b/assets/guide_components_shimmer_properties.md.CdkU1o6H.js
@@ -0,0 +1 @@
+import{_ as e,q as t,p as r,aq as a}from"./chunks/framework.DvIFzl91.js";const u=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/components/shimmer/properties.md","filePath":"guide/components/shimmer/properties.md"}'),s={name:"guide/components/shimmer/properties.md"},o=a('<h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-label="Permalink to &quot;Properties&quot;">​</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead></table>',3),n=[o];function i(p,c,h,_,l,d){return r(),t("div",null,n)}const f=e(s,[["render",i]]);export{u as __pageData,f as default};
diff --git a/assets/guide_components_shimmer_properties.md.CdkU1o6H.lean.js b/assets/guide_components_shimmer_properties.md.CdkU1o6H.lean.js
new file mode 100644
index 0000000..e507478
--- /dev/null
+++ b/assets/guide_components_shimmer_properties.md.CdkU1o6H.lean.js
@@ -0,0 +1 @@
+import{_ as e,q as t,p as r,aq as a}from"./chunks/framework.DvIFzl91.js";const u=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/components/shimmer/properties.md","filePath":"guide/components/shimmer/properties.md"}'),s={name:"guide/components/shimmer/properties.md"},o=a("",3),n=[o];function i(p,c,h,_,l,d){return r(),t("div",null,n)}const f=e(s,[["render",i]]);export{u as __pageData,f as default};
diff --git a/assets/guide_components_slider_index.md.C7zZ2d-W.js b/assets/guide_components_slider_index.md.C7zZ2d-W.js
new file mode 100644
index 0000000..9466981
--- /dev/null
+++ b/assets/guide_components_slider_index.md.C7zZ2d-W.js
@@ -0,0 +1,19 @@
+import{_ as g,q as c,Y as s,z as i,H as n,v as p,u as k,aq as h,S as E,p as o}from"./chunks/framework.DvIFzl91.js";const y={data(){return{value:50,changeTime:0,clickTime:0}},methods:{change(){this.changeTime++},click(){this.clickTime++}}},D=JSON.parse('{"title":"Slider","description":"","frontmatter":{"page":true,"title":"Slider"},"headers":[],"relativePath":"guide/components/slider/index.md","filePath":"guide/components/slider/index.md"}'),u=n("h3",{id:"slider-light",tabindex:"-1"},[k("Slider-Light "),n("a",{class:"header-anchor",href:"#slider-light","aria-label":'Permalink to "Slider-Light"'},"​")],-1),F=h(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-slider</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">mininum</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">9</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">maxinum</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">30</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">showLabel</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;template v-slot=&quot;prop&quot; &gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;span&gt;{{prop.value}}&lt;/span&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-slider</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h3 id="slider-dark" tabindex="-1">Slider-Dark <a class="header-anchor" href="#slider-dark" aria-label="Permalink to &quot;Slider-Dark&quot;">​</a></h3>`,2),b=h(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-slider</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;dark&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-slider</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="slider-with-tick-mark" tabindex="-1">Slider-With-Tick-Mark <a class="header-anchor" href="#slider-with-tick-mark" aria-label="Permalink to &quot;Slider-With-Tick-Mark&quot;">​</a></h3>`,2),m=h(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-slider</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">scale</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">20</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">unit</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">2</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-slider</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="slider-with-label" tabindex="-1">Slider-With-Label <a class="header-anchor" href="#slider-with-label" aria-label="Permalink to &quot;Slider-With-Label&quot;">​</a></h3>`,2),v=h(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-slider</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">scale</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">20</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">showLabel</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">unit</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">20</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;template v-slot=&quot;prop&quot; &gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;span&gt;{{prop.value}}&lt;/span&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-slider</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h3 id="slider-with-vertical" tabindex="-1">Slider-With-Vertical <a class="header-anchor" href="#slider-with-vertical" aria-label="Permalink to &quot;Slider-With-Vertical&quot;">​</a></h3>`,2),_=h(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-slider</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">value</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">unit</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">20</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">vertical</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> @</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">change</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">change</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> @</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">click</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">click</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-slider</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div>`,1),C=n("h3",{id:"silder-disabled",tabindex:"-1"},[k("Silder-Disabled "),n("a",{class:"header-anchor",href:"#silder-disabled","aria-label":'Permalink to "Silder-Disabled"'},"​")],-1),x=h(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-slider</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> disabled</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-slider</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="silder-custom-style" tabindex="-1">Silder-Custom-Style <a class="header-anchor" href="#silder-custom-style" aria-label="Permalink to &quot;Silder-Custom-Style&quot;">​</a></h3>`,2),B=h(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-slider</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">value</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">150</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> showLabel</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;#2ed573&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;template v-slot=&quot;prop&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{{prop.value}}</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-slider</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">v-model/value</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">0</td><td style="text-align:center;">绑定的值</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">String(dark | light | custom)</td><td style="text-align:center;">No</td><td style="text-align:center;">system</td><td style="text-align:center;">主题颜色</td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否禁用</td></tr><tr><td style="text-align:center;">unit</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">1</td><td style="text-align:center;">一格的间隔</td></tr><tr><td style="text-align:center;">mininum</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">0</td><td style="text-align:center;">最小值</td></tr><tr><td style="text-align:center;">maxinum</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">100</td><td style="text-align:center;">最大值</td></tr><tr><td style="text-align:center;">icon</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">LocationFill</td><td style="text-align:center;">MS-icon</td></tr><tr><td style="text-align:center;">vertical</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否垂直</td></tr><tr><td style="text-align:center;">showLabel</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否显示标签</td></tr><tr><td style="text-align:center;">scale</td><td style="text-align:center;">Boolean | Number</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否显示刻度，刻度长度，如果为真则跟随unit大小</td></tr><tr><td style="text-align:center;">color</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">按钮的颜色</td></tr></tbody></table><h3 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to &quot;Events&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">事件名(Name)</th><th style="text-align:center;">参数类型(args)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">click</td><td style="text-align:center;">event</td><td style="text-align:center;">按动按钮触发函数</td></tr><tr><td style="text-align:center;">change</td><td style="text-align:center;">event</td><td style="text-align:center;">当value值改变时触发函数，默认第一个参数为value</td></tr></tbody></table><h3 id="slot" tabindex="-1">Slot <a class="header-anchor" href="#slot" aria-label="Permalink to &quot;Slot&quot;">​</a></h3><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">prop</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;{{prop.value}}&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div>`,9);function q(T,r,f,S,a,d){const e=E("fv-slider"),l=E("ClientOnly");return o(),c("div",null,[u,s(l,null,{default:i(()=>[s(e,{mininum:9,maxinum:30,showLabel:!0},{default:i(t=>[n("span",null,p(t.value),1)]),_:1})]),_:1}),F,s(l,null,{default:i(()=>[s(e,{theme:"dark"})]),_:1}),b,s(l,null,{default:i(()=>[s(e,{scale:20,unit:2})]),_:1}),m,s(l,null,{default:i(()=>[s(e,{scale:20,showLabel:!0,unit:20},{default:i(t=>[n("span",null,p(t.value),1)]),_:1})]),_:1}),v,s(l,null,{default:i(()=>[s(e,{modelValue:a.value,"onUpdate:modelValue":r[0]||(r[0]=t=>a.value=t),unit:20,vertical:!0,onChange:d.change,onClick:d.click},null,8,["modelValue","onChange","onClick"])]),_:1}),_,n("p",null,"Slider: "+p(a.value)+"% Change: "+p(a.changeTime)+" Click: "+p(a.clickTime),1),C,s(l,null,{default:i(()=>[s(e,{disabled:""})]),_:1}),x,s(l,null,{default:i(()=>[s(e,{modelValue:a.value,"onUpdate:modelValue":r[1]||(r[1]=t=>a.value=t),style:{width:"150px"},showLabel:"",color:"#2ed573"},{default:i(t=>[k(p(t.value),1)]),_:1},8,["modelValue"])]),_:1}),B])}const N=g(y,[["render",q]]);export{D as __pageData,N as default};
diff --git a/assets/guide_components_slider_index.md.C7zZ2d-W.lean.js b/assets/guide_components_slider_index.md.C7zZ2d-W.lean.js
new file mode 100644
index 0000000..2e6d5a0
--- /dev/null
+++ b/assets/guide_components_slider_index.md.C7zZ2d-W.lean.js
@@ -0,0 +1 @@
+import{_ as g,q as c,Y as s,z as i,H as n,v as p,u as k,aq as h,S as E,p as o}from"./chunks/framework.DvIFzl91.js";const y={data(){return{value:50,changeTime:0,clickTime:0}},methods:{change(){this.changeTime++},click(){this.clickTime++}}},D=JSON.parse('{"title":"Slider","description":"","frontmatter":{"page":true,"title":"Slider"},"headers":[],"relativePath":"guide/components/slider/index.md","filePath":"guide/components/slider/index.md"}'),u=n("h3",{id:"slider-light",tabindex:"-1"},[k("Slider-Light "),n("a",{class:"header-anchor",href:"#slider-light","aria-label":'Permalink to "Slider-Light"'},"​")],-1),F=h("",2),b=h("",2),m=h("",2),v=h("",2),_=h("",1),C=n("h3",{id:"silder-disabled",tabindex:"-1"},[k("Silder-Disabled "),n("a",{class:"header-anchor",href:"#silder-disabled","aria-label":'Permalink to "Silder-Disabled"'},"​")],-1),x=h("",2),B=h("",9);function q(T,r,f,S,a,d){const e=E("fv-slider"),l=E("ClientOnly");return o(),c("div",null,[u,s(l,null,{default:i(()=>[s(e,{mininum:9,maxinum:30,showLabel:!0},{default:i(t=>[n("span",null,p(t.value),1)]),_:1})]),_:1}),F,s(l,null,{default:i(()=>[s(e,{theme:"dark"})]),_:1}),b,s(l,null,{default:i(()=>[s(e,{scale:20,unit:2})]),_:1}),m,s(l,null,{default:i(()=>[s(e,{scale:20,showLabel:!0,unit:20},{default:i(t=>[n("span",null,p(t.value),1)]),_:1})]),_:1}),v,s(l,null,{default:i(()=>[s(e,{modelValue:a.value,"onUpdate:modelValue":r[0]||(r[0]=t=>a.value=t),unit:20,vertical:!0,onChange:d.change,onClick:d.click},null,8,["modelValue","onChange","onClick"])]),_:1}),_,n("p",null,"Slider: "+p(a.value)+"% Change: "+p(a.changeTime)+" Click: "+p(a.clickTime),1),C,s(l,null,{default:i(()=>[s(e,{disabled:""})]),_:1}),x,s(l,null,{default:i(()=>[s(e,{modelValue:a.value,"onUpdate:modelValue":r[1]||(r[1]=t=>a.value=t),style:{width:"150px"},showLabel:"",color:"#2ed573"},{default:i(t=>[k(p(t.value),1)]),_:1},8,["modelValue"])]),_:1}),B])}const N=g(y,[["render",q]]);export{D as __pageData,N as default};
diff --git a/assets/guide_components_swipe-control_index.md.DwrDVPc1.js b/assets/guide_components_swipe-control_index.md.DwrDVPc1.js
new file mode 100644
index 0000000..83cacfb
--- /dev/null
+++ b/assets/guide_components_swipe-control_index.md.DwrDVPc1.js
@@ -0,0 +1,125 @@
+import{_ as b,q as o,Y as t,H as i,z as h,u as r,aq as l,S as k,p as d,a3 as F,v as E,y as m}from"./chunks/framework.DvIFzl91.js";const C={data(){return{items:[{key:"fruitsHeader",name:"Fruits",type:"header"},{key:"apple",name:"Apple"},{key:"banana",name:"Banana"},{key:"orange",name:"Orange",disabled:!0},{key:"grape",name:"Grape"},{key:"divider_1",name:"",type:"divider"},{key:"vegetablesHeader",name:"Vegetables",type:"header"},{key:"broccoli",name:"Broccoli"},{key:"carrot",name:"Carrot"},{key:"lettuce",name:"Lettuce"}],leftOptions:[{icon:"QuietHours",func:()=>{},type:"tool"},{icon:"Info",func:()=>{},type:"info"}],options:[{icon:"Pin",func:()=>{},type:"warning"},{icon:"Delete",func:()=>{},type:"delete"}],listOptions:[{icon:"Pin",func:()=>{},type:"warning"},{icon:"Delete",func:this.deleteItem,type:"delete"}],disabledLeft:!0}},methods:{deleteItem(e){let a=this.items.findIndex(g=>g.key===e.key);console.log(a,this.items[a].key,e.key),e.disabled||this.items.splice(a,1)}}},V=JSON.parse('{"title":"SwipeControl","description":"","frontmatter":{"page":true,"title":"SwipeControl"},"headers":[],"relativePath":"guide/components/swipe-control/index.md","filePath":"guide/components/swipe-control/index.md"}'),B=i("h3",{id:"swipecontrol-demo",tabindex:"-1"},[r("SwipeControl-DEMO "),i("a",{class:"header-anchor",href:"#swipecontrol-demo","aria-label":'Permalink to "SwipeControl-DEMO"'},"​")],-1),f=i("hr",null,null,-1),v=l(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-SwipeControl</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-SwipeControl</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>Slide Side</p>`,2),x=l(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-SwipeControl</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">disabledLeft</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">disabledLeft</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">leftOptions</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">leftOptions</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">80</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">border</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">white</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> solid</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> thin</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;strong :style=&quot;{color: disabledLeft ? &#39;rgba(0, 98, 158, 1)&#39; : &#39;rgba(248, 176, 75, 1)&#39;}&quot;&gt;{{disabledLeft ? &#39;Only Right Side&#39; : &#39;Both Side&#39;}}&lt;/strong&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-SwipeControl</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ul><li>leftOptions</li></ul><div class="language-javascript vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    data</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> () {</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">        return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            leftOptions: [</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                    icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;QuietHours&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">                    func</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {},</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                    type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;tool&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                    icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Info&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">                    func</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {},</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                    type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;info&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            ]</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br></div></div>`,3),_=i("h3",{id:"swipecontrol-customize-options",tabindex:"-1"},[r("SwipeControl-Customize Options "),i("a",{class:"header-anchor",href:"#swipecontrol-customize-options","aria-label":'Permalink to "SwipeControl-Customize Options"'},"​")],-1),q=i("hr",null,null,-1),w=l(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-SwipeControl</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">leftOptions</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">leftOptions</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">options</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">options</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">disabledLeft</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">border</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">white</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> solid</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> thin</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-SwipeControl</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><ul><li>options</li><li>leftOptions</li></ul><div class="language-javascript vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    data</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> () {</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">        return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            options: [</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                    icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Pin&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">                    func</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {},</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                    type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;warning&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                    icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Delete&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">                    func</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {},</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                    type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;delete&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            ],</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            leftOptions: [</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                    icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;QuietHours&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">                    func</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {},</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                    type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;tool&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                    icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Info&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">                    func</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {},</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                    type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;info&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            ]</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br></div></div><h3 id="swipecontrol-with-listview" tabindex="-1">SwipeControl-With ListView <a class="header-anchor" href="#swipecontrol-with-listview" aria-label="Permalink to &quot;SwipeControl-With ListView&quot;">​</a></h3><hr>`,5),A={style:{width:"100%",height:"300px",padding:"15px"}},D={key:1,style:{"padding-left":"10px"}},S=l(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-ListView</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">items</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> itemPadding</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;0&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;template v-slot:listItem=&quot;x&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;fv-swipe-control v-if=&quot;x.item.type != &#39;header&#39;&quot; :value=&quot;x.item&quot; :leftOptions=&quot;leftOptions&quot; :options=&quot;listOptions&quot; :disabledLeft=&quot;false&quot; style=&quot;width: 100%; height: 100%;&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            {{x.item.name}}</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;/fv-swipe-control&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;p v-else style=&quot;padding-left: 10px;&quot;&gt;{{x.item.name}}&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-ListView</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><ul><li>items</li><li>options</li><li>leftOptions</li></ul><div class="language-javascript vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    data</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> () {</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">        return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            items: [</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;fruitsHeader&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Fruits&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;header&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;apple&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Apple&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;banana&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Banana&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;orange&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Orange&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, disabled: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;grape&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Grape&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;divider_1&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;divider&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;vegetablesHeader&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Vegetables&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;header&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;broccoli&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Broccoli&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;carrot&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Carrot&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;lettuce&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Lettuce&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            ],</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            leftOptions: [</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                    icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;QuietHours&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">                    func</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {},</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                    type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;tool&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                    icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Info&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">                    func</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {},</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                    type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;info&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            ],</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            listOptions: [</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                    icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Pin&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">                    func</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {},</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                    type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;warning&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                    icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Delete&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                    func: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.deleteItem,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                    type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;delete&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            ],</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    methods: {</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">        deleteItem</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">item</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">            let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> index </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.items.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">findIndex</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">it</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> it.key </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">===</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> item.key);</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(index, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.items[index].key, item.key);</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">            if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">!</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">item.disabled)</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">                this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.items.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">splice</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(index, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br></div></div><h3 id="swipecontrol-disabled" tabindex="-1">SwipeControl-Disabled <a class="header-anchor" href="#swipecontrol-disabled" aria-label="Permalink to &quot;SwipeControl-Disabled&quot;">​</a></h3><hr>`,5),O=l(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-SwipeControl</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">leftOptions</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">leftOptions</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">options</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">options</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">disabledLeft</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> disabled</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">border</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">white</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> solid</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> thin</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-SwipeControl</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">value</td><td style="text-align:center;">Object</td><td style="text-align:center;">No</td><td style="text-align:center;">{}</td><td style="text-align:center;">当前绑定的项目, 作为<code>options</code>中的<code>func</code>参数</td></tr><tr><td style="text-align:center;">minOpWidth</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">60</td><td style="text-align:center;">操作按钮区域最小宽度</td></tr><tr><td style="text-align:center;">maxOpWidth</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">300</td><td style="text-align:center;">操作按钮区域最大宽度</td></tr><tr><td style="text-align:center;">leftOptions</td><td style="text-align:center;">Array</td><td style="text-align:center;">No</td><td style="text-align:center;">[]</td><td style="text-align:center;">左侧操作按钮选项</td></tr><tr><td style="text-align:center;">options</td><td style="text-align:center;">Array</td><td style="text-align:center;">No</td><td style="text-align:center;">[{icon: &#39;Delete&#39;}]</td><td style="text-align:center;">右侧操作按钮选项</td></tr><tr><td style="text-align:center;">itemPadding</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">0 10px</td><td style="text-align:center;">主体内容内边距</td></tr><tr><td style="text-align:center;">disabledLeft</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">true</td><td style="text-align:center;">禁用左侧操作按钮</td></tr><tr><td style="text-align:center;">disabledRight</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">禁用右侧操作按钮</td></tr><tr><td style="text-align:center;">disabledLeftFull</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">true</td><td style="text-align:center;">禁用左滑到底</td></tr><tr><td style="text-align:center;">disabledRightFull</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">禁用右滑到底</td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">禁用</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">system</td><td style="text-align:center;">主题样式, 包含<code>light</code>, <code>dark</code>, <code>system</code>, <code>custom</code>几种样式</td></tr></tbody></table><h3 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to &quot;Events&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">事件名(Name)</th><th style="text-align:center;">参数类型(args)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">status-change</td><td style="text-align:center;">String</td><td style="text-align:center;">内部滑动状态, 包含<code>normal</code>, <code>left</code>, <code>right</code>, <code>leftFull</code>, <code>rightFull</code></td></tr></tbody></table><h3 id="slot" tabindex="-1">Slot <a class="header-anchor" href="#slot" aria-label="Permalink to &quot;Slot&quot;">​</a></h3><hr><ol><li>Default</li></ol><p>自定义主体内容</p><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="data" tabindex="-1">Data <a class="header-anchor" href="#data" aria-label="Permalink to &quot;Data&quot;">​</a></h3><hr><ol><li>options 及 leftOptions</li></ol><p>其中<code>type</code>包含<code>info</code>, <code>correct</code>, <code>warning</code>, <code>tool</code>, <code>delete</code>几种预设样式.</p><div class="language-javascript vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">options </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [{icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, disabled: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}]</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">//e.g.//</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">options</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: [</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;QuietHours&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">        func</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {},</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;tool&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Info&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">        func</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {},</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;info&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><p><strong>其中</strong> <code>icon</code>, <code>text</code>, <code>disabled</code>, <code>type</code>属性支持函数式声明.</p>`,18);function T(e,a,g,P,s,L){const p=k("fv-SwipeControl"),y=k("fv-button"),c=k("fv-swipe-control"),u=k("fv-ListView");return d(),o("div",null,[B,f,t(p),v,i("div",null,[t(p,{disabledLeft:s.disabledLeft,leftOptions:s.leftOptions,style:{width:"80%",border:"white solid thin"}},{default:h(()=>[i("strong",{style:F({color:s.disabledLeft?"rgba(0, 98, 158, 1)":"rgba(248, 176, 75, 1)"})},E(s.disabledLeft?"Only Right Side":"Both Side"),5)]),_:1},8,["disabledLeft","leftOptions"])]),x,t(y,{"is-box-shadow":!0,style:{width:"200px","margin-top":"5px"},onClick:a[0]||(a[0]=n=>s.disabledLeft^=!0)},{default:h(()=>[r(E(s.disabledLeft?"Only Right Side":"Both Side"),1)]),_:1}),_,q,t(p,{leftOptions:s.leftOptions,options:s.options,disabledLeft:!1,style:{width:"100%",border:"white solid thin"}},null,8,["leftOptions","options"]),w,i("div",A,[t(u,{modelValue:s.items,"onUpdate:modelValue":a[1]||(a[1]=n=>s.items=n),itemPadding:"0"},{listItem:h(n=>[n.item.type!="header"?(d(),m(c,{key:0,value:n.item,leftOptions:s.leftOptions,options:s.listOptions,disabledLeft:!1,style:{width:"100%",height:"100%"}},{default:h(()=>[r(E(n.item.name),1)]),_:2},1032,["value","leftOptions","options"])):(d(),o("p",D,E(n.item.name),1))]),_:1},8,["modelValue"])]),S,t(p,{leftOptions:s.leftOptions,options:s.options,disabledLeft:!1,disabled:"",style:{width:"100%",border:"white solid thin"}},null,8,["leftOptions","options"]),O])}const I=b(C,[["render",T]]);export{V as __pageData,I as default};
diff --git a/assets/guide_components_swipe-control_index.md.DwrDVPc1.lean.js b/assets/guide_components_swipe-control_index.md.DwrDVPc1.lean.js
new file mode 100644
index 0000000..56bcaf5
--- /dev/null
+++ b/assets/guide_components_swipe-control_index.md.DwrDVPc1.lean.js
@@ -0,0 +1 @@
+import{_ as b,q as o,Y as t,H as i,z as h,u as r,aq as l,S as k,p as d,a3 as F,v as E,y as m}from"./chunks/framework.DvIFzl91.js";const C={data(){return{items:[{key:"fruitsHeader",name:"Fruits",type:"header"},{key:"apple",name:"Apple"},{key:"banana",name:"Banana"},{key:"orange",name:"Orange",disabled:!0},{key:"grape",name:"Grape"},{key:"divider_1",name:"",type:"divider"},{key:"vegetablesHeader",name:"Vegetables",type:"header"},{key:"broccoli",name:"Broccoli"},{key:"carrot",name:"Carrot"},{key:"lettuce",name:"Lettuce"}],leftOptions:[{icon:"QuietHours",func:()=>{},type:"tool"},{icon:"Info",func:()=>{},type:"info"}],options:[{icon:"Pin",func:()=>{},type:"warning"},{icon:"Delete",func:()=>{},type:"delete"}],listOptions:[{icon:"Pin",func:()=>{},type:"warning"},{icon:"Delete",func:this.deleteItem,type:"delete"}],disabledLeft:!0}},methods:{deleteItem(e){let a=this.items.findIndex(g=>g.key===e.key);console.log(a,this.items[a].key,e.key),e.disabled||this.items.splice(a,1)}}},V=JSON.parse('{"title":"SwipeControl","description":"","frontmatter":{"page":true,"title":"SwipeControl"},"headers":[],"relativePath":"guide/components/swipe-control/index.md","filePath":"guide/components/swipe-control/index.md"}'),B=i("h3",{id:"swipecontrol-demo",tabindex:"-1"},[r("SwipeControl-DEMO "),i("a",{class:"header-anchor",href:"#swipecontrol-demo","aria-label":'Permalink to "SwipeControl-DEMO"'},"​")],-1),f=i("hr",null,null,-1),v=l("",2),x=l("",3),_=i("h3",{id:"swipecontrol-customize-options",tabindex:"-1"},[r("SwipeControl-Customize Options "),i("a",{class:"header-anchor",href:"#swipecontrol-customize-options","aria-label":'Permalink to "SwipeControl-Customize Options"'},"​")],-1),q=i("hr",null,null,-1),w=l("",5),A={style:{width:"100%",height:"300px",padding:"15px"}},D={key:1,style:{"padding-left":"10px"}},S=l("",5),O=l("",18);function T(e,a,g,P,s,L){const p=k("fv-SwipeControl"),y=k("fv-button"),c=k("fv-swipe-control"),u=k("fv-ListView");return d(),o("div",null,[B,f,t(p),v,i("div",null,[t(p,{disabledLeft:s.disabledLeft,leftOptions:s.leftOptions,style:{width:"80%",border:"white solid thin"}},{default:h(()=>[i("strong",{style:F({color:s.disabledLeft?"rgba(0, 98, 158, 1)":"rgba(248, 176, 75, 1)"})},E(s.disabledLeft?"Only Right Side":"Both Side"),5)]),_:1},8,["disabledLeft","leftOptions"])]),x,t(y,{"is-box-shadow":!0,style:{width:"200px","margin-top":"5px"},onClick:a[0]||(a[0]=n=>s.disabledLeft^=!0)},{default:h(()=>[r(E(s.disabledLeft?"Only Right Side":"Both Side"),1)]),_:1}),_,q,t(p,{leftOptions:s.leftOptions,options:s.options,disabledLeft:!1,style:{width:"100%",border:"white solid thin"}},null,8,["leftOptions","options"]),w,i("div",A,[t(u,{modelValue:s.items,"onUpdate:modelValue":a[1]||(a[1]=n=>s.items=n),itemPadding:"0"},{listItem:h(n=>[n.item.type!="header"?(d(),m(c,{key:0,value:n.item,leftOptions:s.leftOptions,options:s.listOptions,disabledLeft:!1,style:{width:"100%",height:"100%"}},{default:h(()=>[r(E(n.item.name),1)]),_:2},1032,["value","leftOptions","options"])):(d(),o("p",D,E(n.item.name),1))]),_:1},8,["modelValue"])]),S,t(p,{leftOptions:s.leftOptions,options:s.options,disabledLeft:!1,disabled:"",style:{width:"100%",border:"white solid thin"}},null,8,["leftOptions","options"]),O])}const I=b(C,[["render",T]]);export{V as __pageData,I as default};
diff --git a/assets/guide_components_tag_index.md.BhhxkcHn.js b/assets/guide_components_tag_index.md.BhhxkcHn.js
new file mode 100644
index 0000000..dd62674
--- /dev/null
+++ b/assets/guide_components_tag_index.md.BhhxkcHn.js
@@ -0,0 +1,8 @@
+import{_ as h,q as k,Y as s,z as a,H as n,u as p,aq as e,S as l,p as r}from"./chunks/framework.DvIFzl91.js";const f=JSON.parse('{"title":"Tag","description":"","frontmatter":{"page":true,"title":"Tag"},"headers":[],"relativePath":"guide/components/tag/index.md","filePath":"guide/components/tag/index.md"}'),d={name:"guide/components/tag/index.md"},E=n("h3",{id:"tag-demo",tabindex:"-1"},[p("Tag-DEMO "),n("a",{class:"header-anchor",href:"#tag-demo","aria-label":'Permalink to "Tag-DEMO"'},"​")],-1),g=n("hr",null,null,-1),y=e(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Tag</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">modelValue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[{text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;default&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;default&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }]</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Tag</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="tag-different-types" tabindex="-1">Tag Different Types <a class="header-anchor" href="#tag-different-types" aria-label="Permalink to &quot;Tag Different Types&quot;">​</a></h3><hr>`,3),o=e(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Tag</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">modelValue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[{text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;default&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;default&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, {text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;success&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;success&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, {text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;warning&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;warning&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, {text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;error&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;error&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }]</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">isDel</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">isNewTag</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Tag</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="tag-customize-color" tabindex="-1">Tag Customize Color <a class="header-anchor" href="#tag-customize-color" aria-label="Permalink to &quot;Tag Customize Color&quot;">​</a></h3><hr>`,3),c=e(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Tag</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">modelValue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[{text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;blue&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;default&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, background: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;rgba(0, 98, 158, 1)&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, {text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;black&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;success&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, background: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;rgba(0, 0, 0, 1)&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, {text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;pink&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;warning&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, background: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;pink&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }]</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Tag</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="tag-disabled" tabindex="-1">Tag-Disabled <a class="header-anchor" href="#tag-disabled" aria-label="Permalink to &quot;Tag-Disabled&quot;">​</a></h3>`,2),u=e(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Tag</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">modelValue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[{text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;default&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;default&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, {text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;disabled&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;success&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,  disabled: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, {text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;warning&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;warning&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }]</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">isDel</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">isNewTag</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Tag</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="tag-dark-theme" tabindex="-1">Tag Dark Theme <a class="header-anchor" href="#tag-dark-theme" aria-label="Permalink to &quot;Tag Dark Theme&quot;">​</a></h3><hr>`,3),F=e(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Tag</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">modelValue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[{text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;default&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;default&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, {text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;success&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;success&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, {text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;warning&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;warning&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, {text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;error&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;error&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }]</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;dark&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Tag</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">value</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">[]</td><td style="text-align:center;">标签数组</td></tr><tr><td style="text-align:center;">newTagPlaceholder</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">New Tag</td><td style="text-align:center;">NewTag Placeholder</td></tr><tr><td style="text-align:center;">size</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">尺寸<code>normal</code>, <code>medium</code>, <code>small</code>, <code>xsmall</code></td></tr><tr><td style="text-align:center;">newTagBackground</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">null</td><td style="text-align:center;">NewTag按钮背景色</td></tr><tr><td style="text-align:center;">isNewTag</td><td style="text-align:center;">[bool]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否启用NewTag</td></tr><tr><td style="text-align:center;">isDel</td><td style="text-align:center;">[bool]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否启用删除按钮</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">system</td><td style="text-align:center;">主题样式, 包含<code>light</code>, <code>dark</code>, <code>system</code>, <code>custom</code>几种样式</td></tr></tbody></table><h3 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to &quot;Events&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">事件名(Name)</th><th style="text-align:center;">参数类型(args)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">tag-click</td><td style="text-align:center;">object</td><td style="text-align:center;">标签点击时触发并返回点击项</td></tr><tr><td style="text-align:center;">add-item</td><td style="text-align:center;">object</td><td style="text-align:center;">添加标签时触发并返回添加项</td></tr><tr><td style="text-align:center;">del-item</td><td style="text-align:center;">object</td><td style="text-align:center;">删除标签时触发并返回删除项</td></tr></tbody></table><h3 id="slot" tabindex="-1">Slot <a class="header-anchor" href="#slot" aria-label="Permalink to &quot;Slot&quot;">​</a></h3><hr><ol><li>Default</li></ol><div class="language-javascript vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">fv-tag</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    Content</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">fv-tag</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div>`,11);function b(C,m,x,_,v,B){const i=l("fv-Tag"),t=l("ClientOnly");return r(),k("div",null,[E,g,s(t,null,{default:a(()=>[s(i,{modelValue:[{text:"default",type:"default"}]})]),_:1}),y,s(t,null,{default:a(()=>[s(i,{modelValue:[{text:"default",type:"default"},{text:"success",type:"success"},{text:"warning",type:"warning"},{text:"error",type:"error"}],isDel:!0,isNewTag:!0})]),_:1}),o,s(t,null,{default:a(()=>[s(i,{modelValue:[{text:"blue",type:"default",background:"rgba(0, 98, 158, 1)"},{text:"black",type:"success",background:"rgba(0, 0, 0, 1)"},{text:"pink",type:"warning",background:"pink"}]},null,8,["modelValue"])]),_:1}),c,s(t,null,{default:a(()=>[s(i,{modelValue:[{text:"default",type:"default"},{text:"disabled",type:"success",disabled:!0},{text:"warning",type:"warning"}],isDel:!0,isNewTag:!0})]),_:1}),u,s(t,null,{default:a(()=>[s(i,{modelValue:[{text:"default",type:"default"},{text:"success",type:"success"},{text:"warning",type:"warning"},{text:"error",type:"error"}],theme:"dark"})]),_:1}),F])}const q=h(d,[["render",b]]);export{f as __pageData,q as default};
diff --git a/assets/guide_components_tag_index.md.BhhxkcHn.lean.js b/assets/guide_components_tag_index.md.BhhxkcHn.lean.js
new file mode 100644
index 0000000..7404f45
--- /dev/null
+++ b/assets/guide_components_tag_index.md.BhhxkcHn.lean.js
@@ -0,0 +1 @@
+import{_ as h,q as k,Y as s,z as a,H as n,u as p,aq as e,S as l,p as r}from"./chunks/framework.DvIFzl91.js";const f=JSON.parse('{"title":"Tag","description":"","frontmatter":{"page":true,"title":"Tag"},"headers":[],"relativePath":"guide/components/tag/index.md","filePath":"guide/components/tag/index.md"}'),d={name:"guide/components/tag/index.md"},E=n("h3",{id:"tag-demo",tabindex:"-1"},[p("Tag-DEMO "),n("a",{class:"header-anchor",href:"#tag-demo","aria-label":'Permalink to "Tag-DEMO"'},"​")],-1),g=n("hr",null,null,-1),y=e("",3),o=e("",3),c=e("",2),u=e("",3),F=e("",11);function b(C,m,x,_,v,B){const i=l("fv-Tag"),t=l("ClientOnly");return r(),k("div",null,[E,g,s(t,null,{default:a(()=>[s(i,{modelValue:[{text:"default",type:"default"}]})]),_:1}),y,s(t,null,{default:a(()=>[s(i,{modelValue:[{text:"default",type:"default"},{text:"success",type:"success"},{text:"warning",type:"warning"},{text:"error",type:"error"}],isDel:!0,isNewTag:!0})]),_:1}),o,s(t,null,{default:a(()=>[s(i,{modelValue:[{text:"blue",type:"default",background:"rgba(0, 98, 158, 1)"},{text:"black",type:"success",background:"rgba(0, 0, 0, 1)"},{text:"pink",type:"warning",background:"pink"}]},null,8,["modelValue"])]),_:1}),c,s(t,null,{default:a(()=>[s(i,{modelValue:[{text:"default",type:"default"},{text:"disabled",type:"success",disabled:!0},{text:"warning",type:"warning"}],isDel:!0,isNewTag:!0})]),_:1}),u,s(t,null,{default:a(()=>[s(i,{modelValue:[{text:"default",type:"default"},{text:"success",type:"success"},{text:"warning",type:"warning"},{text:"error",type:"error"}],theme:"dark"})]),_:1}),F])}const q=h(d,[["render",b]]);export{f as __pageData,q as default};
diff --git a/assets/guide_components_text-box_emits.md.0bf89ef8.js b/assets/guide_components_text-box_emits.md.0bf89ef8.js
deleted file mode 100644
index 0ff9256..0000000
--- a/assets/guide_components_text-box_emits.md.0bf89ef8.js
+++ /dev/null
@@ -1 +0,0 @@
-import{_ as t,c as e,o as n,a as r}from"./app.d60fa8c3.js";const _=JSON.parse('{"title":"Emits","description":"","frontmatter":{},"headers":[{"level":2,"title":"Emits","slug":"emits"}],"relativePath":"guide/components/text-box/emits.md"}'),l={name:"guide/components/text-box/emits.md"},d=r('<h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">blur</td><td style="text-align:center;">evt[FocusEvent]</td><td style="text-align:center;">onblur</td></tr><tr><td style="text-align:center;">change</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">onchange</td></tr><tr><td style="text-align:center;">error-input</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">onerrorinput</td></tr><tr><td style="text-align:center;">focus</td><td style="text-align:center;">evt[FocusEvent]</td><td style="text-align:center;">onfocus</td></tr><tr><td style="text-align:center;">input</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">oninput</td></tr><tr><td style="text-align:center;">keydown</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">onkeydown</td></tr><tr><td style="text-align:center;">keypress</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">onkeypress</td></tr><tr><td style="text-align:center;">keyup</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">onkeyup</td></tr><tr><td style="text-align:center;">right-icon-click</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">onrighticonclick</td></tr><tr><td style="text-align:center;">success-input</td><td style="text-align:center;">val</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">update:model-value</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">v-model</td></tr><tr><td style="text-align:center;">warning-input</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">onwarninginput</td></tr></tbody></table>',3),a=[d];function i(s,c,g,o,x,y){return n(),e("div",null,a)}var m=t(l,[["render",i]]);export{_ as __pageData,m as default};
diff --git a/assets/guide_components_text-box_emits.md.0bf89ef8.lean.js b/assets/guide_components_text-box_emits.md.0bf89ef8.lean.js
deleted file mode 100644
index 0aab096..0000000
--- a/assets/guide_components_text-box_emits.md.0bf89ef8.lean.js
+++ /dev/null
@@ -1 +0,0 @@
-import{_ as t,c as e,o as n,a as r}from"./app.d60fa8c3.js";const _=JSON.parse('{"title":"Emits","description":"","frontmatter":{},"headers":[{"level":2,"title":"Emits","slug":"emits"}],"relativePath":"guide/components/text-box/emits.md"}'),l={name:"guide/components/text-box/emits.md"},d=r("",3),a=[d];function i(s,c,g,o,x,y){return n(),e("div",null,a)}var m=t(l,[["render",i]]);export{_ as __pageData,m as default};
diff --git a/assets/guide_components_text-box_index.md.7ccfc637.js b/assets/guide_components_text-box_index.md.7ccfc637.js
deleted file mode 100644
index bcb702c..0000000
--- a/assets/guide_components_text-box_index.md.7ccfc637.js
+++ /dev/null
@@ -1,69 +0,0 @@
-import{u as A}from"./chunks/index.9dba9c16.js";import{d as C,f as x,g as v,m as f,c as E,k as l,b as a,u as o,a as s,e as c,r as q,o as I}from"./app.d60fa8c3.js";const N=s('<h1 id="textbox" tabindex="-1">TextBox <a class="header-anchor" href="#textbox" aria-hidden="true">#</a></h1><h2 id="quick-start" tabindex="-1">Quick Start <a class="header-anchor" href="#quick-start" aria-hidden="true">#</a></h2><h3 id="default" tabindex="-1">Default <a class="header-anchor" href="#default" aria-hidden="true">#</a></h3><hr>',4),w=c(" Input single line: "),T=s(`<div class="language-vue-html"><span class="copy"></span><div class="highlight-lines"><br><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><br><br><br><br><br></div><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-text-box</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">input-rules</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;/</span><span style="color:#89DDFF;font-style:italic;">^</span><span style="color:#89DDFF;">[</span><span style="color:#C3E88D;">0-9</span><span style="color:#89DDFF;">]*</span><span style="color:#89DDFF;font-style:italic;">$</span><span style="color:#89DDFF;">/&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">pattern</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;/</span><span style="color:#89DDFF;font-style:italic;">^</span><span style="color:#C3E88D;">1234</span><span style="color:#89DDFF;">/&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">focus</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">focus</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">change</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">change</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">blur</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">blur</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">maxlength</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#F78C6C;">30</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">hover-border-color</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">rgba(0, 204, 153, 1)</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">error-input</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">errorInput</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">warning-input</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">warningInput</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">    &gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-text-box</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><div class="warning custom-block"><p class="custom-block-title">Warning</p><p>Only input-rules characters can be entered. If you input other characters, the border color is warning color. If the input does not match the pattern, the border color is error color. Error color will override warning color.</p></div><h3 id="width" tabindex="-1">Width <a class="header-anchor" href="#width" aria-hidden="true">#</a></h3><p>Input single line:</p>`,4),S=s(`<div class="language-vue-html"><span class="copy"></span><div class="highlight-lines"><br><br><div class="highlighted">\xA0</div><br><br><br><br><br><br><br><br><br><br></div><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-text-box</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">input-rules</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;/</span><span style="color:#89DDFF;font-style:italic;">^</span><span style="color:#89DDFF;">[</span><span style="color:#C3E88D;">0-9</span><span style="color:#A6ACCD;">\\.</span><span style="color:#89DDFF;">]*</span><span style="color:#89DDFF;font-style:italic;">$</span><span style="color:#89DDFF;">/&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">style</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">width:50%;</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">focus</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">focus</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">change</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">change</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">blur</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">blur</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">placeholder</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">Input numbers</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">hover-border-color</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">rgba(0, 204, 153, 1)</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">error-input</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">errorInput</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">warning-input</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">warningInput</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">    /&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><h3 id="password" tabindex="-1">Password <a class="header-anchor" href="#password" aria-hidden="true">#</a></h3><hr>`,3),O=c(" Input password: "),R=s(`<div class="language-vue-html"><span class="copy"></span><div class="highlight-lines"><br><br><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><br><br><br><br><br><br></div><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-text-box</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">placeholder</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">Input your password</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">style</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">min-width:200px;</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">input-rules</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;/</span><span style="color:#89DDFF;font-style:italic;">^</span><span style="color:#89DDFF;">[</span><span style="color:#C3E88D;">0-9a-zA-Z\\-@!</span><span style="color:#89DDFF;">]*</span><span style="color:#89DDFF;font-style:italic;">$</span><span style="color:#89DDFF;">/&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">password</span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">focus</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">focus</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">change</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">change</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">blur</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">blur</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">    &gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-text-box</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><h3 id="multiline" tabindex="-1">Multiline <a class="header-anchor" href="#multiline" aria-hidden="true">#</a></h3><hr>`,3),_=c(" Input multiline: "),k=s(`<div class="language-vue-html"><span class="copy"></span><div class="highlight-lines"><br><div class="highlighted">\xA0</div><br><br><br><br><br><br><br></div><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-text-box</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">multiline</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">focus</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">focus</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">change</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">change</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">blur</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">blur</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">    &gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-text-box</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h3 id="readonly" tabindex="-1">Readonly <a class="header-anchor" href="#readonly" aria-hidden="true">#</a></h3><hr>`,3),H=c(" Input multiline: "),B=s(`<div class="language-vue-html"><span class="copy"></span><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-text-box</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">multiline</span><span style="color:#89DDFF;"> :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">readonly</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-text-box</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="disabled" tabindex="-1">Disabled <a class="header-anchor" href="#disabled" aria-hidden="true">#</a></h3><hr>`,3),L=c(" Input multiline: "),P=s(`<div class="language-vue-html"><span class="copy"></span><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-text-box</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">multiline</span><span style="color:#89DDFF;"> :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">disabled</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-text-box</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">autofocus</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">same as input/textarea autofocus property</td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">same as input/textarea disabled property</td></tr><tr><td style="text-align:center;">error-border-color</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">error status border color</td></tr><tr><td style="text-align:center;">font-size</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">14</td><td style="text-align:center;">font size</td></tr><tr><td style="text-align:center;">hover-border-color</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">normal status border color</td></tr><tr><td style="text-align:center;">input-rules</td><td style="text-align:center;">[object,string,function]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">input rules, limit input</td></tr><tr><td style="text-align:center;">lang</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">i18n</td></tr><tr><td style="text-align:center;">maxlength</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as input/textarea maxlength property</td></tr><tr><td style="text-align:center;">minlength</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as input/textarea minlength property</td></tr><tr><td style="text-align:center;">model-value</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">v-model</td></tr><tr><td style="text-align:center;">multiline</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">true use textarea, otherwise use input[type=&#39;text&#39;</td></tr><tr><td style="text-align:center;">password</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as input[type=&#39;password&#39;] (multiline=false)</td></tr><tr><td style="text-align:center;">pattern</td><td style="text-align:center;">[object,string,function]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">input match pattern, error if not match</td></tr><tr><td style="text-align:center;">placeholder</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as input/textarea placeholder property</td></tr><tr><td style="text-align:center;">readonly</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">same as input/textarea readonly property</td></tr><tr><td style="text-align:center;">required</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">same as input/textarea required property</td></tr><tr><td style="text-align:center;">right-icon</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">size</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">multiline same as textarea cols property, otherwise same as input size property</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">[&#39;light&#39;,&#39;dark&#39;,&#39;global&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">theme</td></tr><tr><td style="text-align:center;">title</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;input&#39;</td><td style="text-align:center;">same as input/textarea title property</td></tr><tr><td style="text-align:center;">warning-border-color</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">warning status border color</td></tr></tbody></table><h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">blur</td><td style="text-align:center;">evt[FocusEvent]</td><td style="text-align:center;">onblur</td></tr><tr><td style="text-align:center;">change</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">onchange</td></tr><tr><td style="text-align:center;">error-input</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">onerrorinput</td></tr><tr><td style="text-align:center;">focus</td><td style="text-align:center;">evt[FocusEvent]</td><td style="text-align:center;">onfocus</td></tr><tr><td style="text-align:center;">input</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">oninput</td></tr><tr><td style="text-align:center;">keydown</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">onkeydown</td></tr><tr><td style="text-align:center;">keypress</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">onkeypress</td></tr><tr><td style="text-align:center;">keyup</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">onkeyup</td></tr><tr><td style="text-align:center;">right-icon-click</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">onrighticonclick</td></tr><tr><td style="text-align:center;">success-input</td><td style="text-align:center;">val</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">update:model-value</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">v-model</td></tr><tr><td style="text-align:center;">warning-input</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">onwarninginput</td></tr></tbody></table>`,7),z=JSON.parse('{"title":"TextBox","description":"","frontmatter":{"page":true,"title":"TextBox"},"headers":[{"level":2,"title":"Quick Start","slug":"quick-start"},{"level":3,"title":"Default","slug":"default"},{"level":3,"title":"Width","slug":"width"},{"level":3,"title":"Password","slug":"password"},{"level":3,"title":"Multiline","slug":"multiline"},{"level":3,"title":"Readonly","slug":"readonly"},{"level":3,"title":"Disabled","slug":"disabled"},{"level":2,"title":"Properties","slug":"properties"},{"level":2,"title":"Emits","slug":"emits"}],"relativePath":"guide/components/text-box/index.md"}'),W={name:"guide/components/text-box/index.md"},G=C({...W,setup(V){const{theme:e}=A(),r=x(""),u=`MIT License
-
-Copyright (c) 2022 Creator SN\xAE
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.`;let D=0,g=!1;const m=x(null);v(()=>{const t=()=>{D=(D+1)%u.length,r.value=u.substring(0,D),g===!1&&window.requestAnimationFrame(t)};t()}),f(()=>{g=!0});function p(t){console.log("focus",t)}function i(t){console.log(t)}function d(t){console.log("blur",t)}function h(t){console.error("your error input",t)}function b(t){console.warn("your warning input",t)}return(t,y)=>{const n=q("fv-text-box");return I(),E("div",null,[N,l("div",null,[w,a(n,{"input-rules":/^[0-9]*$/,pattern:/^1234/,theme:o(e),onFocus:p,onChange:i,onBlur:d,maxlength:30,"hover-border-color":"rgba(0, 204, 153, 1)",onErrorInput:h,onWarningInput:b},null,8,["theme"])]),T,l("div",null,[a(n,{"input-rules":/^[0-9\.]*$/,"min-width":"100%",style:{width:"50%"},theme:o(e),onFocus:p,onChange:i,onBlur:d,placeholder:"Input numbers","hover-border-color":"rgba(0, 204, 153, 1)",onErrorInput:h,onWarningInput:b},null,8,["input-rules","theme"])]),S,l("div",null,[O,a(n,{"input-rules":/^[0-9a-zA-Z\-@!]*$/,style:{"min-width":"200px"},placeholder:"Input your password",theme:o(e),password:"",onFocus:p,onChange:i,onBlur:d},null,8,["theme"])]),R,l("div",null,[_,a(n,{multiline:"",theme:o(e),onFocus:p,onChange:i,onBlur:d},null,8,["theme"])]),k,l("div",null,[H,a(n,{ref_key:"input",ref:m,readonly:"",multiline:"",theme:o(e),modelValue:r.value,"onUpdate:modelValue":y[0]||(y[0]=F=>r.value=F),autofocus:""},null,8,["theme","modelValue"])]),B,l("div",null,[L,a(n,{disabled:"",multiline:"",theme:o(e),modelValue:r.value,"onUpdate:modelValue":y[1]||(y[1]=F=>r.value=F),onFocus:p},null,8,["theme","modelValue"])]),P])}}});export{z as __pageData,G as default};
diff --git a/assets/guide_components_text-box_index.md.7ccfc637.lean.js b/assets/guide_components_text-box_index.md.7ccfc637.lean.js
deleted file mode 100644
index bcb702c..0000000
--- a/assets/guide_components_text-box_index.md.7ccfc637.lean.js
+++ /dev/null
@@ -1,69 +0,0 @@
-import{u as A}from"./chunks/index.9dba9c16.js";import{d as C,f as x,g as v,m as f,c as E,k as l,b as a,u as o,a as s,e as c,r as q,o as I}from"./app.d60fa8c3.js";const N=s('<h1 id="textbox" tabindex="-1">TextBox <a class="header-anchor" href="#textbox" aria-hidden="true">#</a></h1><h2 id="quick-start" tabindex="-1">Quick Start <a class="header-anchor" href="#quick-start" aria-hidden="true">#</a></h2><h3 id="default" tabindex="-1">Default <a class="header-anchor" href="#default" aria-hidden="true">#</a></h3><hr>',4),w=c(" Input single line: "),T=s(`<div class="language-vue-html"><span class="copy"></span><div class="highlight-lines"><br><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><br><br><br><br><br></div><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-text-box</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">input-rules</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;/</span><span style="color:#89DDFF;font-style:italic;">^</span><span style="color:#89DDFF;">[</span><span style="color:#C3E88D;">0-9</span><span style="color:#89DDFF;">]*</span><span style="color:#89DDFF;font-style:italic;">$</span><span style="color:#89DDFF;">/&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">pattern</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;/</span><span style="color:#89DDFF;font-style:italic;">^</span><span style="color:#C3E88D;">1234</span><span style="color:#89DDFF;">/&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">focus</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">focus</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">change</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">change</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">blur</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">blur</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">maxlength</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#F78C6C;">30</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">hover-border-color</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">rgba(0, 204, 153, 1)</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">error-input</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">errorInput</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">warning-input</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">warningInput</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">    &gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-text-box</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><div class="warning custom-block"><p class="custom-block-title">Warning</p><p>Only input-rules characters can be entered. If you input other characters, the border color is warning color. If the input does not match the pattern, the border color is error color. Error color will override warning color.</p></div><h3 id="width" tabindex="-1">Width <a class="header-anchor" href="#width" aria-hidden="true">#</a></h3><p>Input single line:</p>`,4),S=s(`<div class="language-vue-html"><span class="copy"></span><div class="highlight-lines"><br><br><div class="highlighted">\xA0</div><br><br><br><br><br><br><br><br><br><br></div><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-text-box</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">input-rules</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;/</span><span style="color:#89DDFF;font-style:italic;">^</span><span style="color:#89DDFF;">[</span><span style="color:#C3E88D;">0-9</span><span style="color:#A6ACCD;">\\.</span><span style="color:#89DDFF;">]*</span><span style="color:#89DDFF;font-style:italic;">$</span><span style="color:#89DDFF;">/&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">style</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">width:50%;</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">focus</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">focus</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">change</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">change</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">blur</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">blur</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">placeholder</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">Input numbers</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">hover-border-color</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">rgba(0, 204, 153, 1)</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">error-input</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">errorInput</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">warning-input</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">warningInput</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">    /&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><h3 id="password" tabindex="-1">Password <a class="header-anchor" href="#password" aria-hidden="true">#</a></h3><hr>`,3),O=c(" Input password: "),R=s(`<div class="language-vue-html"><span class="copy"></span><div class="highlight-lines"><br><br><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><br><br><br><br><br><br></div><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-text-box</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">placeholder</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">Input your password</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">style</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">min-width:200px;</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">input-rules</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;/</span><span style="color:#89DDFF;font-style:italic;">^</span><span style="color:#89DDFF;">[</span><span style="color:#C3E88D;">0-9a-zA-Z\\-@!</span><span style="color:#89DDFF;">]*</span><span style="color:#89DDFF;font-style:italic;">$</span><span style="color:#89DDFF;">/&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">password</span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">focus</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">focus</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">change</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">change</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">blur</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">blur</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">    &gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-text-box</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><h3 id="multiline" tabindex="-1">Multiline <a class="header-anchor" href="#multiline" aria-hidden="true">#</a></h3><hr>`,3),_=c(" Input multiline: "),k=s(`<div class="language-vue-html"><span class="copy"></span><div class="highlight-lines"><br><div class="highlighted">\xA0</div><br><br><br><br><br><br><br></div><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-text-box</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">multiline</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">focus</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">focus</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">change</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">change</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">blur</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">blur</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">    &gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-text-box</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h3 id="readonly" tabindex="-1">Readonly <a class="header-anchor" href="#readonly" aria-hidden="true">#</a></h3><hr>`,3),H=c(" Input multiline: "),B=s(`<div class="language-vue-html"><span class="copy"></span><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-text-box</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">multiline</span><span style="color:#89DDFF;"> :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">readonly</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-text-box</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="disabled" tabindex="-1">Disabled <a class="header-anchor" href="#disabled" aria-hidden="true">#</a></h3><hr>`,3),L=c(" Input multiline: "),P=s(`<div class="language-vue-html"><span class="copy"></span><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-text-box</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">multiline</span><span style="color:#89DDFF;"> :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">disabled</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-text-box</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">autofocus</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">same as input/textarea autofocus property</td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">same as input/textarea disabled property</td></tr><tr><td style="text-align:center;">error-border-color</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">error status border color</td></tr><tr><td style="text-align:center;">font-size</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">14</td><td style="text-align:center;">font size</td></tr><tr><td style="text-align:center;">hover-border-color</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">normal status border color</td></tr><tr><td style="text-align:center;">input-rules</td><td style="text-align:center;">[object,string,function]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">input rules, limit input</td></tr><tr><td style="text-align:center;">lang</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">i18n</td></tr><tr><td style="text-align:center;">maxlength</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as input/textarea maxlength property</td></tr><tr><td style="text-align:center;">minlength</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as input/textarea minlength property</td></tr><tr><td style="text-align:center;">model-value</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">v-model</td></tr><tr><td style="text-align:center;">multiline</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">true use textarea, otherwise use input[type=&#39;text&#39;</td></tr><tr><td style="text-align:center;">password</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as input[type=&#39;password&#39;] (multiline=false)</td></tr><tr><td style="text-align:center;">pattern</td><td style="text-align:center;">[object,string,function]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">input match pattern, error if not match</td></tr><tr><td style="text-align:center;">placeholder</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as input/textarea placeholder property</td></tr><tr><td style="text-align:center;">readonly</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">same as input/textarea readonly property</td></tr><tr><td style="text-align:center;">required</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">same as input/textarea required property</td></tr><tr><td style="text-align:center;">right-icon</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">size</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">multiline same as textarea cols property, otherwise same as input size property</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">[&#39;light&#39;,&#39;dark&#39;,&#39;global&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">theme</td></tr><tr><td style="text-align:center;">title</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;input&#39;</td><td style="text-align:center;">same as input/textarea title property</td></tr><tr><td style="text-align:center;">warning-border-color</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">warning status border color</td></tr></tbody></table><h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">blur</td><td style="text-align:center;">evt[FocusEvent]</td><td style="text-align:center;">onblur</td></tr><tr><td style="text-align:center;">change</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">onchange</td></tr><tr><td style="text-align:center;">error-input</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">onerrorinput</td></tr><tr><td style="text-align:center;">focus</td><td style="text-align:center;">evt[FocusEvent]</td><td style="text-align:center;">onfocus</td></tr><tr><td style="text-align:center;">input</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">oninput</td></tr><tr><td style="text-align:center;">keydown</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">onkeydown</td></tr><tr><td style="text-align:center;">keypress</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">onkeypress</td></tr><tr><td style="text-align:center;">keyup</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">onkeyup</td></tr><tr><td style="text-align:center;">right-icon-click</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">onrighticonclick</td></tr><tr><td style="text-align:center;">success-input</td><td style="text-align:center;">val</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">update:model-value</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">v-model</td></tr><tr><td style="text-align:center;">warning-input</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">onwarninginput</td></tr></tbody></table>`,7),z=JSON.parse('{"title":"TextBox","description":"","frontmatter":{"page":true,"title":"TextBox"},"headers":[{"level":2,"title":"Quick Start","slug":"quick-start"},{"level":3,"title":"Default","slug":"default"},{"level":3,"title":"Width","slug":"width"},{"level":3,"title":"Password","slug":"password"},{"level":3,"title":"Multiline","slug":"multiline"},{"level":3,"title":"Readonly","slug":"readonly"},{"level":3,"title":"Disabled","slug":"disabled"},{"level":2,"title":"Properties","slug":"properties"},{"level":2,"title":"Emits","slug":"emits"}],"relativePath":"guide/components/text-box/index.md"}'),W={name:"guide/components/text-box/index.md"},G=C({...W,setup(V){const{theme:e}=A(),r=x(""),u=`MIT License
-
-Copyright (c) 2022 Creator SN\xAE
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.`;let D=0,g=!1;const m=x(null);v(()=>{const t=()=>{D=(D+1)%u.length,r.value=u.substring(0,D),g===!1&&window.requestAnimationFrame(t)};t()}),f(()=>{g=!0});function p(t){console.log("focus",t)}function i(t){console.log(t)}function d(t){console.log("blur",t)}function h(t){console.error("your error input",t)}function b(t){console.warn("your warning input",t)}return(t,y)=>{const n=q("fv-text-box");return I(),E("div",null,[N,l("div",null,[w,a(n,{"input-rules":/^[0-9]*$/,pattern:/^1234/,theme:o(e),onFocus:p,onChange:i,onBlur:d,maxlength:30,"hover-border-color":"rgba(0, 204, 153, 1)",onErrorInput:h,onWarningInput:b},null,8,["theme"])]),T,l("div",null,[a(n,{"input-rules":/^[0-9\.]*$/,"min-width":"100%",style:{width:"50%"},theme:o(e),onFocus:p,onChange:i,onBlur:d,placeholder:"Input numbers","hover-border-color":"rgba(0, 204, 153, 1)",onErrorInput:h,onWarningInput:b},null,8,["input-rules","theme"])]),S,l("div",null,[O,a(n,{"input-rules":/^[0-9a-zA-Z\-@!]*$/,style:{"min-width":"200px"},placeholder:"Input your password",theme:o(e),password:"",onFocus:p,onChange:i,onBlur:d},null,8,["theme"])]),R,l("div",null,[_,a(n,{multiline:"",theme:o(e),onFocus:p,onChange:i,onBlur:d},null,8,["theme"])]),k,l("div",null,[H,a(n,{ref_key:"input",ref:m,readonly:"",multiline:"",theme:o(e),modelValue:r.value,"onUpdate:modelValue":y[0]||(y[0]=F=>r.value=F),autofocus:""},null,8,["theme","modelValue"])]),B,l("div",null,[L,a(n,{disabled:"",multiline:"",theme:o(e),modelValue:r.value,"onUpdate:modelValue":y[1]||(y[1]=F=>r.value=F),onFocus:p},null,8,["theme","modelValue"])]),P])}}});export{z as __pageData,G as default};
diff --git a/assets/guide_components_text-box_index.md.C5moAPfB.js b/assets/guide_components_text-box_index.md.C5moAPfB.js
new file mode 100644
index 0000000..7128ea9
--- /dev/null
+++ b/assets/guide_components_text-box_index.md.C5moAPfB.js
@@ -0,0 +1,9 @@
+import{_ as p,q as k,Y as t,z as i,H as d,v as o,u as g,aq as a,S as r,p as E}from"./chunks/framework.DvIFzl91.js";const c={data(){return{readOnlyText:"I am read-only.",maskValue:""}}},K=JSON.parse('{"title":"TextBox","description":"","frontmatter":{"page":true,"title":"TextBox"},"headers":[],"relativePath":"guide/components/text-box/index.md","filePath":"guide/components/text-box/index.md"}'),u=d("h3",{id:"textbox-demo",tabindex:"-1"},[g("TextBox-DEMO "),d("a",{class:"header-anchor",href:"#textbox-demo","aria-label":'Permalink to "TextBox-DEMO"'},"​")],-1),y=d("hr",null,null,-1),x=d("p",null,"Standard",-1),_=a('<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>Read-only</p>',2),b=a('<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextBox</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">readOnlyText</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> readonly</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>With placeholder</p>',2),v=a('<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextBox</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Please enter the text here.&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>With an icon</p>',2),m=a('<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextBox</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> icon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Search&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>With type</p>',2),F=a('<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextBox</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> icon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;RevealPasswordMedium&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;password&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>With pattern</p>',2),T=a('<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextBox</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> pattern</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;[a-zA-Z]&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="textbox-with-input-mask" tabindex="-1">TextBox-With Input Mask <a class="header-anchor" href="#textbox-with-input-mask" aria-label="Permalink to &quot;TextBox-With Input Mask&quot;">​</a></h3><hr><p>Standard</p>',4),C=a('<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextBox</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> mode</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;mask&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>Customize</p>',2),B=a(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextBox</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">maskValue</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> mode</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;mask&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> mask</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Tel: +__ ___ - ____ - ____&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> flag</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;_&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;{{maskValue}}&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>Customize Flag</p>`,2),f=a('<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextBox</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">maskValue</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> mode</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;mask&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> mask</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;mask: xx-xxx-xxxx-xxxx&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> flag</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;x&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="textbox-disabled" tabindex="-1">TextBox-Disabled <a class="header-anchor" href="#textbox-disabled" aria-label="Permalink to &quot;TextBox-Disabled&quot;">​</a></h3><hr><ol><li>Standard</li></ol>',4),A=a('<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextBox</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> disabled</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><ol start="2"><li>With Input Mask</li></ol>',2),q=a('<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextBox</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> mode</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;mask&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> disabled</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><ol start="3"><li>With placeholder</li></ol>',2),S=a('<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextBox</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Please enter the text here.&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> disabled</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><ol start="4"><li>With underline</li></ol>',2),P=a('<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextBox</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> underline</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> disabled</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> prefix</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Disabled:&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="textbox-with-limit" tabindex="-1">TextBox-With Limit <a class="header-anchor" href="#textbox-with-limit" aria-label="Permalink to &quot;TextBox-With Limit&quot;">​</a></h3><hr>',3),D=a('<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextBox</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> maxlength</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;5&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">120</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="textbox-with-underline-and-borderless" tabindex="-1">TextBox-With Underline And Borderless <a class="header-anchor" href="#textbox-with-underline-and-borderless" aria-label="Permalink to &quot;TextBox-With Underline And Borderless&quot;">​</a></h3><hr>',3),N=a('<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextBox</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> underline</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> prefix</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Standard:&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> focusBorderColor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rgba(0, 90, 158, 1)&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="textbox-with-prefix-suffix" tabindex="-1">TextBox-With Prefix/Suffix <a class="header-anchor" href="#textbox-with-prefix-suffix" aria-label="Permalink to &quot;TextBox-With Prefix/Suffix&quot;">​</a></h3><hr><p>Prefix</p>',4),V=a('<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextBox</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> prefix</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;https://&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>Suffix</p>',2),I=a('<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextBox</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> suffix</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;.com&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>Prefix and Suffix</p>',2),w=a('<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextBox</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> prefix</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;https://&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> suffix</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;.com&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="textbox-with-status" tabindex="-1">TextBox-With Status <a class="header-anchor" href="#textbox-with-status" aria-label="Permalink to &quot;TextBox-With Status&quot;">​</a></h3><hr><p>Warn</p>',4),R=a('<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextBox</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Warn text.&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> status</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;warn&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>Correct</p>',2),W=a('<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextBox</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Correct text.&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> status</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;correct&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="textbox-revealborder" tabindex="-1">TextBox-RevealBorder <a class="header-anchor" href="#textbox-revealborder" aria-label="Permalink to &quot;TextBox-RevealBorder&quot;">​</a></h3>',2),z=a('<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextBox</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Please enter the text here.&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">revealBorder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> borderColor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rgba(0, 0, 0, 0.01)&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> borderRadius</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;3&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">isBoxShadow</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="textbox-customize" tabindex="-1">TextBox-Customize <a class="header-anchor" href="#textbox-customize" aria-label="Permalink to &quot;TextBox-Customize&quot;">​</a></h3><hr><p>Customize border color</p>',4),M=a('<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextBox</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Please enter the text here.&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> borderColor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rgba(0,153,204,1)&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> focusBorderColor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rgba(0,204,153,1)&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>Customize background</p>',2),O=a('<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextBox</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Please enter the text here.&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rgba(0,153,204,1)&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> borderColor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rgba(0,153,204,1)&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="textbox-dark-theme" tabindex="-1">TextBox-Dark Theme <a class="header-anchor" href="#textbox-dark-theme" aria-label="Permalink to &quot;TextBox-Dark Theme&quot;">​</a></h3><hr>',3),U={style:{padding:"15px",background:"black"}},L=a(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">padding</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">15</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">black</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;fv-TextBox placeholder=&quot;Please enter the text here.&quot; theme=&quot;dark&quot;&gt;&lt;/fv-TextBox&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;fv-TextBox placeholder=&quot;Please enter the text here.&quot; disabled theme=&quot;dark&quot; value=&quot;123&quot;&gt;&lt;/fv-TextBox&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;fv-TextBox placeholder=&quot;Please enter the text here.&quot; prefix=&quot;https://&quot; suffix=&quot;.com&quot; theme=&quot;dark&quot;&gt;&lt;/fv-TextBox&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;fv-TextBox placeholder=&quot;Please enter the text here.&quot; prefix=&quot;https://&quot; suffix=&quot;.com&quot; disabled theme=&quot;dark&quot;&gt;&lt;/fv-TextBox&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;fv-TextBox underline prefix=&quot;Standard:&quot; theme=&quot;dark&quot;&gt;&lt;/fv-TextBox&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;fv-TextBox underline prefix=&quot;Standard:&quot; disabled theme=&quot;dark&quot;&gt;&lt;/fv-TextBox&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">value</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;"></td><td style="text-align:center;">Using v-model binding input value</td></tr><tr><td style="text-align:center;">mode</td><td style="text-align:center;">[&#39;default&#39;,&#39;mask&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">default</td><td style="text-align:center;">Choose TextBox mode</td></tr><tr><td style="text-align:center;">inputmode</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">输入模式, 可选值为<code>numeric</code>, <code>tel</code>, <code>text</code>, <code>decimal</code>, <code>email</code>, <code>url</code></td></tr><tr><td style="text-align:center;">placeholder</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">等同HTML[input]</td></tr><tr><td style="text-align:center;">type</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">text</td><td style="text-align:center;">等同HTML[input]</td></tr><tr><td style="text-align:center;">mask</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">mask:___</td><td style="text-align:center;">The mask mode input template</td></tr><tr><td style="text-align:center;">flag</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">_</td><td style="text-align:center;">The mask mode input flag</td></tr><tr><td style="text-align:center;">pattern</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">[\\S\\s]*</td><td style="text-align:center;">输入字符的正则限制</td></tr><tr><td style="text-align:center;">inputRules</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">[\\S\\s]*</td><td style="text-align:center;">输入文本的正则限制, 在Mask模式下无效</td></tr><tr><td style="text-align:center;">readonly</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">等同HTML[input]</td></tr><tr><td style="text-align:center;">maxlength</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">等同HTML[input]</td></tr><tr><td style="text-align:center;">prefix</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">前缀</td></tr><tr><td style="text-align:center;">suffix</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">后缀</td></tr><tr><td style="text-align:center;">leftIcon</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">左图标</td></tr><tr><td style="text-align:center;">icon</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">右图标</td></tr><tr><td style="text-align:center;">underline</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否开启Underline风格的TextBox</td></tr><tr><td style="text-align:center;">background</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">borderWidth</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">borderColor</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">focusBorderColor</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">revealBorderColor</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">revealBackgroundColor</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">fontSize</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">13.3</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">fontWeight</td><td style="text-align:center;">[string,number]</td><td style="text-align:center;">No</td><td style="text-align:center;">normal</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">foreground</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">textAlign</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">left</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">borderRadius</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">3</td><td style="text-align:center;">Textbox圆角大小, 启用revealBorder时将失效</td></tr><tr><td style="text-align:center;">isBoxShadow</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">开启<code>TextBox</code>阴影</td></tr><tr><td style="text-align:center;">revealBorder</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">status</td><td style="text-align:center;">[&#39;warn&#39;,&#39;correct&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">状态边框预设, 默认有警告和正确两种</td></tr><tr><td style="text-align:center;">debounceDelay</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">300</td><td style="text-align:center;">搜索节流延迟时间</td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">system</td><td style="text-align:center;">主题样式, 包含<code>light</code>, <code>dark</code>, <code>system</code>, <code>custom</code>几种样式</td></tr></tbody></table><h3 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to &quot;Events&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">事件名(Name)</th><th style="text-align:center;">参数类型(args)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">keydown</td><td style="text-align:center;">event</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">keyup</td><td style="text-align:center;">event</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">change</td><td style="text-align:center;">event</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">paste</td><td style="text-align:center;">event</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">left-icon-click</td><td style="text-align:center;">event</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">icon-click</td><td style="text-align:center;">event</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">debounce-input</td><td style="text-align:center;">string</td><td style="text-align:center;">搜索节流内容反馈</td></tr></tbody></table>`,7);function H(Z,n,J,Y,l,j){const s=r("fv-TextBox"),e=r("ClientOnly");return E(),k("div",null,[u,y,x,t(e,null,{default:i(()=>[t(s)]),_:1}),_,t(e,null,{default:i(()=>[t(s,{modelValue:l.readOnlyText,"onUpdate:modelValue":n[0]||(n[0]=h=>l.readOnlyText=h),readonly:""},null,8,["modelValue"])]),_:1}),b,t(e,null,{default:i(()=>[t(s,{placeholder:"Please enter the text here."})]),_:1}),v,t(e,null,{default:i(()=>[t(s,{icon:"Search"})]),_:1}),m,t(e,null,{default:i(()=>[t(s,{icon:"RevealPasswordMedium",type:"password"})]),_:1}),F,t(e,null,{default:i(()=>[t(s,{pattern:"[a-zA-Z]"})]),_:1}),T,t(e,null,{default:i(()=>[t(s,{mode:"mask"})]),_:1}),C,t(e,null,{default:i(()=>[t(s,{modelValue:l.maskValue,"onUpdate:modelValue":n[1]||(n[1]=h=>l.maskValue=h),mode:"mask",mask:"Tel: +__ ___ - ____ - ____",flag:"_"},null,8,["modelValue"])]),_:1}),d("p",null,o(l.maskValue),1),B,t(e,null,{default:i(()=>[t(s,{modelValue:l.maskValue,"onUpdate:modelValue":n[2]||(n[2]=h=>l.maskValue=h),mode:"mask",mask:"mask: xx-xxx-xxxx-xxxx",flag:"x"},null,8,["modelValue"])]),_:1}),f,t(e,null,{default:i(()=>[t(s,{disabled:""})]),_:1}),A,t(e,null,{default:i(()=>[t(s,{mode:"mask",disabled:""})]),_:1}),q,t(e,null,{default:i(()=>[t(s,{placeholder:"Please enter the text here.",disabled:""})]),_:1}),S,t(e,null,{default:i(()=>[t(s,{underline:"",disabled:"",prefix:"Disabled:"})]),_:1}),P,t(e,null,{default:i(()=>[t(s,{maxlength:"5",style:{width:"120px"}})]),_:1}),D,t(e,null,{default:i(()=>[t(s,{underline:"",prefix:"Standard:",focusBorderColor:"rgba(0, 90, 158, 1)"})]),_:1}),N,t(e,null,{default:i(()=>[t(s,{prefix:"https://"})]),_:1}),V,t(e,null,{default:i(()=>[t(s,{suffix:".com"})]),_:1}),I,t(e,null,{default:i(()=>[t(s,{prefix:"https://",suffix:".com"})]),_:1}),w,t(e,null,{default:i(()=>[t(s,{placeholder:"Warn text.",status:"warn"})]),_:1}),R,t(e,null,{default:i(()=>[t(s,{placeholder:"Correct text.",status:"correct"})]),_:1}),W,t(e,null,{default:i(()=>[t(s,{placeholder:"Please enter the text here.",revealBorder:!0,borderColor:"rgba(0, 0, 0, 0.01)",borderRadius:"3",isBoxShadow:!0})]),_:1}),z,t(e,null,{default:i(()=>[t(s,{placeholder:"Please enter the text here.",borderColor:"rgba(0,153,204,1)",focusBorderColor:"rgba(0,204,153,1)"})]),_:1}),M,t(e,null,{default:i(()=>[t(s,{placeholder:"Please enter the text here.",background:"rgba(0,153,204,1)",borderColor:"rgba(0,153,204,1)"})]),_:1}),O,d("div",U,[t(e,null,{default:i(()=>[t(s,{placeholder:"Please enter the text here.",theme:"dark"}),t(s,{placeholder:"Please enter the text here.",disabled:"",theme:"dark",value:"123"}),t(s,{placeholder:"Please enter the text here.",prefix:"https://",suffix:".com",theme:"dark"}),t(s,{placeholder:"Please enter the text here.",prefix:"https://",suffix:".com",disabled:"",theme:"dark"}),t(s,{underline:"",prefix:"Standard:",theme:"dark",focusBorderColor:"rgba(118, 185, 237, 1)"}),t(s,{underline:"",prefix:"Standard:",disabled:"",theme:"dark"})]),_:1})]),L])}const Q=p(c,[["render",H]]);export{K as __pageData,Q as default};
diff --git a/assets/guide_components_text-box_index.md.C5moAPfB.lean.js b/assets/guide_components_text-box_index.md.C5moAPfB.lean.js
new file mode 100644
index 0000000..4774d89
--- /dev/null
+++ b/assets/guide_components_text-box_index.md.C5moAPfB.lean.js
@@ -0,0 +1 @@
+import{_ as p,q as k,Y as t,z as i,H as d,v as o,u as g,aq as a,S as r,p as E}from"./chunks/framework.DvIFzl91.js";const c={data(){return{readOnlyText:"I am read-only.",maskValue:""}}},K=JSON.parse('{"title":"TextBox","description":"","frontmatter":{"page":true,"title":"TextBox"},"headers":[],"relativePath":"guide/components/text-box/index.md","filePath":"guide/components/text-box/index.md"}'),u=d("h3",{id:"textbox-demo",tabindex:"-1"},[g("TextBox-DEMO "),d("a",{class:"header-anchor",href:"#textbox-demo","aria-label":'Permalink to "TextBox-DEMO"'},"​")],-1),y=d("hr",null,null,-1),x=d("p",null,"Standard",-1),_=a("",2),b=a("",2),v=a("",2),m=a("",2),F=a("",2),T=a("",4),C=a("",2),B=a("",2),f=a("",4),A=a("",2),q=a("",2),S=a("",2),P=a("",3),D=a("",3),N=a("",4),V=a("",2),I=a("",2),w=a("",4),R=a("",2),W=a("",2),z=a("",4),M=a("",2),O=a("",3),U={style:{padding:"15px",background:"black"}},L=a("",7);function H(Z,n,J,Y,l,j){const s=r("fv-TextBox"),e=r("ClientOnly");return E(),k("div",null,[u,y,x,t(e,null,{default:i(()=>[t(s)]),_:1}),_,t(e,null,{default:i(()=>[t(s,{modelValue:l.readOnlyText,"onUpdate:modelValue":n[0]||(n[0]=h=>l.readOnlyText=h),readonly:""},null,8,["modelValue"])]),_:1}),b,t(e,null,{default:i(()=>[t(s,{placeholder:"Please enter the text here."})]),_:1}),v,t(e,null,{default:i(()=>[t(s,{icon:"Search"})]),_:1}),m,t(e,null,{default:i(()=>[t(s,{icon:"RevealPasswordMedium",type:"password"})]),_:1}),F,t(e,null,{default:i(()=>[t(s,{pattern:"[a-zA-Z]"})]),_:1}),T,t(e,null,{default:i(()=>[t(s,{mode:"mask"})]),_:1}),C,t(e,null,{default:i(()=>[t(s,{modelValue:l.maskValue,"onUpdate:modelValue":n[1]||(n[1]=h=>l.maskValue=h),mode:"mask",mask:"Tel: +__ ___ - ____ - ____",flag:"_"},null,8,["modelValue"])]),_:1}),d("p",null,o(l.maskValue),1),B,t(e,null,{default:i(()=>[t(s,{modelValue:l.maskValue,"onUpdate:modelValue":n[2]||(n[2]=h=>l.maskValue=h),mode:"mask",mask:"mask: xx-xxx-xxxx-xxxx",flag:"x"},null,8,["modelValue"])]),_:1}),f,t(e,null,{default:i(()=>[t(s,{disabled:""})]),_:1}),A,t(e,null,{default:i(()=>[t(s,{mode:"mask",disabled:""})]),_:1}),q,t(e,null,{default:i(()=>[t(s,{placeholder:"Please enter the text here.",disabled:""})]),_:1}),S,t(e,null,{default:i(()=>[t(s,{underline:"",disabled:"",prefix:"Disabled:"})]),_:1}),P,t(e,null,{default:i(()=>[t(s,{maxlength:"5",style:{width:"120px"}})]),_:1}),D,t(e,null,{default:i(()=>[t(s,{underline:"",prefix:"Standard:",focusBorderColor:"rgba(0, 90, 158, 1)"})]),_:1}),N,t(e,null,{default:i(()=>[t(s,{prefix:"https://"})]),_:1}),V,t(e,null,{default:i(()=>[t(s,{suffix:".com"})]),_:1}),I,t(e,null,{default:i(()=>[t(s,{prefix:"https://",suffix:".com"})]),_:1}),w,t(e,null,{default:i(()=>[t(s,{placeholder:"Warn text.",status:"warn"})]),_:1}),R,t(e,null,{default:i(()=>[t(s,{placeholder:"Correct text.",status:"correct"})]),_:1}),W,t(e,null,{default:i(()=>[t(s,{placeholder:"Please enter the text here.",revealBorder:!0,borderColor:"rgba(0, 0, 0, 0.01)",borderRadius:"3",isBoxShadow:!0})]),_:1}),z,t(e,null,{default:i(()=>[t(s,{placeholder:"Please enter the text here.",borderColor:"rgba(0,153,204,1)",focusBorderColor:"rgba(0,204,153,1)"})]),_:1}),M,t(e,null,{default:i(()=>[t(s,{placeholder:"Please enter the text here.",background:"rgba(0,153,204,1)",borderColor:"rgba(0,153,204,1)"})]),_:1}),O,d("div",U,[t(e,null,{default:i(()=>[t(s,{placeholder:"Please enter the text here.",theme:"dark"}),t(s,{placeholder:"Please enter the text here.",disabled:"",theme:"dark",value:"123"}),t(s,{placeholder:"Please enter the text here.",prefix:"https://",suffix:".com",theme:"dark"}),t(s,{placeholder:"Please enter the text here.",prefix:"https://",suffix:".com",disabled:"",theme:"dark"}),t(s,{underline:"",prefix:"Standard:",theme:"dark",focusBorderColor:"rgba(118, 185, 237, 1)"}),t(s,{underline:"",prefix:"Standard:",disabled:"",theme:"dark"})]),_:1})]),L])}const Q=p(c,[["render",H]]);export{K as __pageData,Q as default};
diff --git a/assets/guide_components_text-box_properties.md.aab3a89e.js b/assets/guide_components_text-box_properties.md.aab3a89e.js
deleted file mode 100644
index fef2b38..0000000
--- a/assets/guide_components_text-box_properties.md.aab3a89e.js
+++ /dev/null
@@ -1 +0,0 @@
-import{_ as t,c as e,o as n,a as r}from"./app.d60fa8c3.js";const u=JSON.parse('{"title":"Properties","description":"","frontmatter":{},"headers":[{"level":2,"title":"Properties","slug":"properties"}],"relativePath":"guide/components/text-box/properties.md"}'),l={name:"guide/components/text-box/properties.md"},d=r('<h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">autofocus</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">same as input/textarea autofocus property</td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">same as input/textarea disabled property</td></tr><tr><td style="text-align:center;">error-border-color</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">error status border color</td></tr><tr><td style="text-align:center;">font-size</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">14</td><td style="text-align:center;">font size</td></tr><tr><td style="text-align:center;">hover-border-color</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">normal status border color</td></tr><tr><td style="text-align:center;">input-rules</td><td style="text-align:center;">[object,string,function]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">input rules, limit input</td></tr><tr><td style="text-align:center;">lang</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">i18n</td></tr><tr><td style="text-align:center;">maxlength</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as input/textarea maxlength property</td></tr><tr><td style="text-align:center;">minlength</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as input/textarea minlength property</td></tr><tr><td style="text-align:center;">model-value</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">v-model</td></tr><tr><td style="text-align:center;">multiline</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">true use textarea, otherwise use input[type=&#39;text&#39;</td></tr><tr><td style="text-align:center;">password</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as input[type=&#39;password&#39;] (multiline=false)</td></tr><tr><td style="text-align:center;">pattern</td><td style="text-align:center;">[object,string,function]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">input match pattern, error if not match</td></tr><tr><td style="text-align:center;">placeholder</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as input/textarea placeholder property</td></tr><tr><td style="text-align:center;">readonly</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">same as input/textarea readonly property</td></tr><tr><td style="text-align:center;">required</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">same as input/textarea required property</td></tr><tr><td style="text-align:center;">right-icon</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">size</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">multiline same as textarea cols property, otherwise same as input size property</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">[&#39;light&#39;,&#39;dark&#39;,&#39;global&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">theme</td></tr><tr><td style="text-align:center;">title</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;input&#39;</td><td style="text-align:center;">same as input/textarea title property</td></tr><tr><td style="text-align:center;">warning-border-color</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">warning status border color</td></tr></tbody></table>',3),a=[d];function i(s,c,g,x,o,y){return n(),e("div",null,a)}var m=t(l,[["render",i]]);export{u as __pageData,m as default};
diff --git a/assets/guide_components_text-box_properties.md.aab3a89e.lean.js b/assets/guide_components_text-box_properties.md.aab3a89e.lean.js
deleted file mode 100644
index 69e9786..0000000
--- a/assets/guide_components_text-box_properties.md.aab3a89e.lean.js
+++ /dev/null
@@ -1 +0,0 @@
-import{_ as t,c as e,o as n,a as r}from"./app.d60fa8c3.js";const u=JSON.parse('{"title":"Properties","description":"","frontmatter":{},"headers":[{"level":2,"title":"Properties","slug":"properties"}],"relativePath":"guide/components/text-box/properties.md"}'),l={name:"guide/components/text-box/properties.md"},d=r("",3),a=[d];function i(s,c,g,x,o,y){return n(),e("div",null,a)}var m=t(l,[["render",i]]);export{u as __pageData,m as default};
diff --git a/assets/guide_components_text-field_index.md.CXSimJtj.js b/assets/guide_components_text-field_index.md.CXSimJtj.js
new file mode 100644
index 0000000..e8d1290
--- /dev/null
+++ b/assets/guide_components_text-field_index.md.CXSimJtj.js
@@ -0,0 +1,5 @@
+import{_ as p,q as k,Y as t,z as i,H as l,u as o,aq as a,S as h,p as g}from"./chunks/framework.DvIFzl91.js";const E={data(){return{readOnlyText:"I am read-only."}}},W=JSON.parse('{"title":"TextField","description":"","frontmatter":{"page":true,"title":"TextField"},"headers":[],"relativePath":"guide/components/text-field/index.md","filePath":"guide/components/text-field/index.md"}'),c=l("h3",{id:"textfield-demo",tabindex:"-1"},[o("TextField-DEMO "),l("a",{class:"header-anchor",href:"#textfield-demo","aria-label":'Permalink to "TextField-DEMO"'},"​")],-1),y=l("hr",null,null,-1),u=a(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextField</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextField</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>Read-only</p>`,2),x=a('<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextField</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">readOnlyText</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> readonly</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextField</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>With placeholder</p>',2),F=a('<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextField</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Please enter the text here.&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextField</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="textfield-disabled" tabindex="-1">TextField-Disabled <a class="header-anchor" href="#textfield-disabled" aria-label="Permalink to &quot;TextField-Disabled&quot;">​</a></h3><hr><ol><li>Standard</li></ol>',4),_=a('<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextField</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> disabled</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextField</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><ol start="2"><li>With placeholder</li></ol>',2),b=a('<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextField</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Please enter the text here.&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> disabled</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextField</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><ol start="3"><li>With underline</li></ol>',2),v=a('<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextField</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> underline</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> disabled</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextField</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="textfield-with-limit" tabindex="-1">TextField-With Limit <a class="header-anchor" href="#textfield-with-limit" aria-label="Permalink to &quot;TextField-With Limit&quot;">​</a></h3><hr>',3),C=a('<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextField</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> maxlength</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;5&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">120</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextField</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="textfield-with-underline-and-borderless" tabindex="-1">TextField-With Underline And Borderless <a class="header-anchor" href="#textfield-with-underline-and-borderless" aria-label="Permalink to &quot;TextField-With Underline And Borderless&quot;">​</a></h3><hr>',3),m=a('<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextField</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> underline</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> focusBorderColor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rgba(0, 90, 158, 1)&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextField</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="textfield-with-status" tabindex="-1">TextField-With Status <a class="header-anchor" href="#textfield-with-status" aria-label="Permalink to &quot;TextField-With Status&quot;">​</a></h3><hr><p>Warn</p>',4),T=a('<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextField</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Warn text.&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> status</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;warn&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextField</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>Correct</p>',2),B=a('<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextField</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Correct text.&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> status</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;correct&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextField</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="textfield-revealborder" tabindex="-1">TextField-RevealBorder <a class="header-anchor" href="#textfield-revealborder" aria-label="Permalink to &quot;TextField-RevealBorder&quot;">​</a></h3>',2),f=a('<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextField</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Please enter the text here.&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">revealBorder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> borderColor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rgba(0, 0, 0, 0.01)&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> borderRadius</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;3&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">isBoxShadow</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextField</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="textfield-customize" tabindex="-1">TextField-Customize <a class="header-anchor" href="#textfield-customize" aria-label="Permalink to &quot;TextField-Customize&quot;">​</a></h3><hr><p>Customize border color</p>',4),A=a('<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextField</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Please enter the text here.&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> borderColor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rgba(0,153,204,1)&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> focusBorderColor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rgba(0,204,153,1)&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextField</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>Customize background</p>',2),q=a('<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextField</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Please enter the text here.&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rgba(0,153,204,1)&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> borderColor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rgba(0,153,204,1)&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextField</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="textfield-dark-theme" tabindex="-1">TextField-Dark Theme <a class="header-anchor" href="#textfield-dark-theme" aria-label="Permalink to &quot;TextField-Dark Theme&quot;">​</a></h3><hr>',3),D={style:{padding:"15px",background:"black"}},P=a(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextField</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Please enter the text here.&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;dark&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextField</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextField</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Please enter the text here.&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> disabled</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;dark&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;123&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextField</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextField</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> underline</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;dark&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> focusBorderColor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rgba(118, 185, 237, 1)&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextField</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextField</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> underline</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> disabled</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;dark&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextField</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">value</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;"></td><td style="text-align:center;">Using v-model binding input value</td></tr><tr><td style="text-align:center;">placeholder</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">等同HTML[input]</td></tr><tr><td style="text-align:center;">readonly</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">等同HTML[input]</td></tr><tr><td style="text-align:center;">maxlength</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">等同HTML[input]</td></tr><tr><td style="text-align:center;">underline</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否开启Underline风格的TextField</td></tr><tr><td style="text-align:center;">background</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">borderWidth</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">borderColor</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">focusBorderColor</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">fontSize</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">13.3</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">fontWeight</td><td style="text-align:center;">[string</td><td style="text-align:center;">number]</td><td style="text-align:center;">No</td><td style="text-align:center;">normal</td></tr><tr><td style="text-align:center;">foreground</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">textAlign</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">left</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">borderRadius</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">3</td><td style="text-align:center;">TextField圆角大小, 启用revealBorder时将失效</td></tr><tr><td style="text-align:center;">isBoxShadow</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">开启<code>TextField</code>阴影</td></tr><tr><td style="text-align:center;">revealBorder</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">revealBorderColor</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">revealBackgroundColor</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">status</td><td style="text-align:center;">[&#39;warn&#39;,&#39;correct&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">状态边框预设, 默认有警告和正确两种</td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">system</td><td style="text-align:center;">主题样式, 包含<code>light</code>, <code>dark</code>, <code>system</code>, <code>custom</code>几种样式</td></tr></tbody></table><h3 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to &quot;Events&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">事件名(Name)</th><th style="text-align:center;">参数类型(args)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">keydown</td><td style="text-align:center;">event</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">keyup</td><td style="text-align:center;">event</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">change</td><td style="text-align:center;">event</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">paste</td><td style="text-align:center;">event</td><td style="text-align:center;"></td></tr></tbody></table>`,7);function S(N,n,V,w,d,I){const e=h("fv-TextField"),s=h("ClientOnly");return g(),k("div",null,[c,y,t(s,null,{default:i(()=>[t(e)]),_:1}),u,t(s,null,{default:i(()=>[t(e,{modelValue:d.readOnlyText,"onUpdate:modelValue":n[0]||(n[0]=r=>d.readOnlyText=r),readonly:""},null,8,["modelValue"])]),_:1}),x,t(s,null,{default:i(()=>[t(e,{placeholder:"Please enter the text here."})]),_:1}),F,t(s,null,{default:i(()=>[t(e,{disabled:""})]),_:1}),_,t(s,null,{default:i(()=>[t(e,{placeholder:"Please enter the text here.",disabled:""})]),_:1}),b,t(s,null,{default:i(()=>[t(e,{underline:"",disabled:""})]),_:1}),v,t(s,null,{default:i(()=>[t(e,{maxlength:"5",style:{width:"120px"}})]),_:1}),C,t(s,null,{default:i(()=>[t(e,{underline:"",focusBorderColor:"rgba(0, 90, 158, 1)"})]),_:1}),m,t(s,null,{default:i(()=>[t(e,{placeholder:"Warn text.",status:"warn"})]),_:1}),T,t(s,null,{default:i(()=>[t(e,{placeholder:"Correct text.",status:"correct"})]),_:1}),B,t(s,null,{default:i(()=>[t(e,{placeholder:"Please enter the text here.",revealBorder:!0,borderColor:"rgba(0, 0, 0, 0.01)",borderRadius:"3",isBoxShadow:!0})]),_:1}),f,t(s,null,{default:i(()=>[t(e,{placeholder:"Please enter the text here.",borderColor:"rgba(0,153,204,1)",focusBorderColor:"rgba(0,204,153,1)"})]),_:1}),A,t(s,null,{default:i(()=>[t(e,{placeholder:"Please enter the text here.",background:"rgba(0,153,204,1)",borderColor:"rgba(0,153,204,1)"})]),_:1}),q,l("div",D,[t(s,null,{default:i(()=>[t(e,{placeholder:"Please enter the text here.",theme:"dark"}),t(e,{placeholder:"Please enter the text here.",disabled:"",theme:"dark",value:"123"}),t(e,{underline:"",theme:"dark",focusBorderColor:"rgba(118, 185, 237, 1)"}),t(e,{underline:"",disabled:"",theme:"dark"})]),_:1})]),P])}const O=p(E,[["render",S]]);export{W as __pageData,O as default};
diff --git a/assets/guide_components_text-field_index.md.CXSimJtj.lean.js b/assets/guide_components_text-field_index.md.CXSimJtj.lean.js
new file mode 100644
index 0000000..488ef72
--- /dev/null
+++ b/assets/guide_components_text-field_index.md.CXSimJtj.lean.js
@@ -0,0 +1 @@
+import{_ as p,q as k,Y as t,z as i,H as l,u as o,aq as a,S as h,p as g}from"./chunks/framework.DvIFzl91.js";const E={data(){return{readOnlyText:"I am read-only."}}},W=JSON.parse('{"title":"TextField","description":"","frontmatter":{"page":true,"title":"TextField"},"headers":[],"relativePath":"guide/components/text-field/index.md","filePath":"guide/components/text-field/index.md"}'),c=l("h3",{id:"textfield-demo",tabindex:"-1"},[o("TextField-DEMO "),l("a",{class:"header-anchor",href:"#textfield-demo","aria-label":'Permalink to "TextField-DEMO"'},"​")],-1),y=l("hr",null,null,-1),u=a("",2),x=a("",2),F=a("",4),_=a("",2),b=a("",2),v=a("",3),C=a("",3),m=a("",4),T=a("",2),B=a("",2),f=a("",4),A=a("",2),q=a("",3),D={style:{padding:"15px",background:"black"}},P=a("",7);function S(N,n,V,w,d,I){const e=h("fv-TextField"),s=h("ClientOnly");return g(),k("div",null,[c,y,t(s,null,{default:i(()=>[t(e)]),_:1}),u,t(s,null,{default:i(()=>[t(e,{modelValue:d.readOnlyText,"onUpdate:modelValue":n[0]||(n[0]=r=>d.readOnlyText=r),readonly:""},null,8,["modelValue"])]),_:1}),x,t(s,null,{default:i(()=>[t(e,{placeholder:"Please enter the text here."})]),_:1}),F,t(s,null,{default:i(()=>[t(e,{disabled:""})]),_:1}),_,t(s,null,{default:i(()=>[t(e,{placeholder:"Please enter the text here.",disabled:""})]),_:1}),b,t(s,null,{default:i(()=>[t(e,{underline:"",disabled:""})]),_:1}),v,t(s,null,{default:i(()=>[t(e,{maxlength:"5",style:{width:"120px"}})]),_:1}),C,t(s,null,{default:i(()=>[t(e,{underline:"",focusBorderColor:"rgba(0, 90, 158, 1)"})]),_:1}),m,t(s,null,{default:i(()=>[t(e,{placeholder:"Warn text.",status:"warn"})]),_:1}),T,t(s,null,{default:i(()=>[t(e,{placeholder:"Correct text.",status:"correct"})]),_:1}),B,t(s,null,{default:i(()=>[t(e,{placeholder:"Please enter the text here.",revealBorder:!0,borderColor:"rgba(0, 0, 0, 0.01)",borderRadius:"3",isBoxShadow:!0})]),_:1}),f,t(s,null,{default:i(()=>[t(e,{placeholder:"Please enter the text here.",borderColor:"rgba(0,153,204,1)",focusBorderColor:"rgba(0,204,153,1)"})]),_:1}),A,t(s,null,{default:i(()=>[t(e,{placeholder:"Please enter the text here.",background:"rgba(0,153,204,1)",borderColor:"rgba(0,153,204,1)"})]),_:1}),q,l("div",D,[t(s,null,{default:i(()=>[t(e,{placeholder:"Please enter the text here.",theme:"dark"}),t(e,{placeholder:"Please enter the text here.",disabled:"",theme:"dark",value:"123"}),t(e,{underline:"",theme:"dark",focusBorderColor:"rgba(118, 185, 237, 1)"}),t(e,{underline:"",disabled:"",theme:"dark"})]),_:1})]),P])}const O=p(E,[["render",S]]);export{W as __pageData,O as default};
diff --git a/assets/guide_components_time-picker_index.md.CQJdRRaG.js b/assets/guide_components_time-picker_index.md.CQJdRRaG.js
new file mode 100644
index 0000000..8b74a41
--- /dev/null
+++ b/assets/guide_components_time-picker_index.md.CQJdRRaG.js
@@ -0,0 +1,9 @@
+import{_ as k,q as E,Y as e,z as r,H as t,u as i,aq as p,S as d,p as g}from"./chunks/framework.DvIFzl91.js";const o={data(){return{theme:0,date:new Date}},computed:{$theme(){return this.theme?"dark":"light"},divStyle(){return this.$theme=="light"?{backgroundColor:"#fff",padding:"20px",color:"#000"}:{backgroundColor:"#000",padding:"20px",color:"#fff"}}}},V=JSON.parse('{"title":"TimePicker","description":"","frontmatter":{"page":true,"title":"TimePicker"},"headers":[],"relativePath":"guide/components/time-picker/index.md","filePath":"guide/components/time-picker/index.md"}'),c=t("h3",{id:"timepicker-default",tabindex:"-1"},[i("TimePicker-Default "),t("a",{class:"header-anchor",href:"#timepicker-default","aria-label":'Permalink to "TimePicker-Default"'},"​")],-1),y=t("div",{class:"language-vue vp-adaptive-theme line-numbers-mode"},[t("button",{title:"Copy Code",class:"copy"}),t("span",{class:"lang"},"vue"),t("pre",{class:"shiki shiki-themes github-light github-dark vp-code"},[t("code",null,[t("span",{class:"line"},[t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"<"),t("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-TimePicker"),t("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}}," v-model"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"date"),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"  />")])])]),t("div",{class:"line-numbers-wrapper","aria-hidden":"true"},[t("span",{class:"line-number"},"1"),t("br")])],-1),u=t("h3",{id:"timepicker-24-hours",tabindex:"-1"},[i("TimePicker-24-hours "),t("a",{class:"header-anchor",href:"#timepicker-24-hours","aria-label":'Permalink to "TimePicker-24-hours"'},"​")],-1),m=t("div",{class:"language-vue vp-adaptive-theme line-numbers-mode"},[t("button",{title:"Copy Code",class:"copy"}),t("span",{class:"lang"},"vue"),t("pre",{class:"shiki shiki-themes github-light github-dark vp-code"},[t("code",null,[t("span",{class:"line"},[t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"<"),t("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-TimePicker"),t("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}}," v-model"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"date"),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"  :"),t("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}},"timeType"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),t("span",{style:{"--shiki-light":"#005CC5","--shiki-dark":"#79B8FF"}},"24"),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}}," />")])])]),t("div",{class:"line-numbers-wrapper","aria-hidden":"true"},[t("span",{class:"line-number"},"1"),t("br")])],-1),F=t("h3",{id:"timepicker-disabled",tabindex:"-1"},[i("TimePicker-Disabled "),t("a",{class:"header-anchor",href:"#timepicker-disabled","aria-label":'Permalink to "TimePicker-Disabled"'},"​")],-1),b=t("div",{class:"language-vue vp-adaptive-theme line-numbers-mode"},[t("button",{title:"Copy Code",class:"copy"}),t("span",{class:"lang"},"vue"),t("pre",{class:"shiki shiki-themes github-light github-dark vp-code"},[t("code",null,[t("span",{class:"line"},[t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"<"),t("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-TimePicker"),t("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}}," v-model"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"date"),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}}," :"),t("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}},"timeType"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),t("span",{style:{"--shiki-light":"#005CC5","--shiki-dark":"#79B8FF"}},"24"),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}}," :"),t("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}},"disabled"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),t("span",{style:{"--shiki-light":"#005CC5","--shiki-dark":"#79B8FF"}},"true"),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}}," />")])])]),t("div",{class:"line-numbers-wrapper","aria-hidden":"true"},[t("span",{class:"line-number"},"1"),t("br")])],-1),x=t("h3",{id:"timepicker-custom-style",tabindex:"-1"},[i("TimePicker-Custom-Style "),t("a",{class:"header-anchor",href:"#timepicker-custom-style","aria-label":'Permalink to "TimePicker-Custom-Style"'},"​")],-1),C=t("div",{class:"language-vue vp-adaptive-theme line-numbers-mode"},[t("button",{title:"Copy Code",class:"copy"}),t("span",{class:"lang"},"vue"),t("pre",{class:"shiki shiki-themes github-light github-dark vp-code"},[t("code",null,[t("span",{class:"line"},[t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"<"),t("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-TimePicker"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}}," ")]),i(`
+`),t("span",{class:"line"},[t("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}},"v-model"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"date"),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}}," ")]),i(`
+`),t("span",{class:"line"},[t("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}},"class"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"custom_style"'),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}}," ")]),i(`
+`),t("span",{class:"line"},[t("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}},"innerBorderColor"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"rgb(0, 204, 153)"')]),i(`
+`),t("span",{class:"line"},[t("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}},"hoverColor"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"rgba(0, 204, 153, 0.7)"')]),i(`
+`),t("span",{class:"line"},[t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},":"),t("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}},"optionsStyle"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"{"),t("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}},"backgroundColor"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},":"),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},"'rgba(0, 204, 153,0.3)'"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},","),t("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}},"color"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},":"),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},"'white'"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},","),t("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}},"borderColor"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},":"),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},"'rgba(0, 204, 153,0.3)'"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"}"),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"')]),i(`
+`),t("span",{class:"line"},[t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},":"),t("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}},"selectStyle"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"{"),t("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}},"backgroundColor"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},":"),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},"'rgb(0, 204, 153)'"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"}"),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"')]),i(`
+`),t("span",{class:"line"},[t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")]),i(`
+`),t("span",{class:"line"},[t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"</"),t("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-TimePicker"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")])])]),t("div",{class:"line-numbers-wrapper","aria-hidden":"true"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br")])],-1),B=p('<h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">v-model</td><td style="text-align:center;"></td><td style="text-align:center;">No</td><td style="text-align:center;">Date()</td><td style="text-align:center;">绑定的时间</td></tr><tr><td style="text-align:center;">timeType</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">12</td><td style="text-align:center;">时间制（可选12，24）</td></tr><tr><td style="text-align:center;">period</td><td style="text-align:center;">Array</td><td style="text-align:center;">No</td><td style="text-align:center;">[&#39;A.M.&#39;,&#39;P.M.&#39;]</td><td style="text-align:center;">上午下午显示</td></tr><tr><td style="text-align:center;">inputBackground</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">输入框背景色</td></tr><tr><td style="text-align:center;">selectedBackground</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">当前选中框背景色</td></tr><tr><td style="text-align:center;">optionBackground</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">选择器背景色</td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否禁用选项框</td></tr><tr><td style="text-align:center;">hoverColor</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">选项的Hover值</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">[&#39;light&#39;, &#39;dark&#39;, &#39;custom&#39;, &#39;system&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">system</td><td style="text-align:center;">Custom theme</td></tr></tbody></table><h3 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to &quot;Events&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">事件名(Name)</th><th style="text-align:center;">参数类型(args)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">focus</td><td style="text-align:center;"></td><td style="text-align:center;">触发焦点时触发</td></tr><tr><td style="text-align:center;">change</td><td style="text-align:center;"></td><td style="text-align:center;">当选中的时间发生变化时</td></tr></tbody></table>',6);function v(_,s,f,P,l,T){const h=d("fv-TimePicker"),n=d("ClientOnly");return g(),E("div",null,[c,e(n,null,{default:r(()=>[e(n,null,{default:r(()=>[e(h,{style:{width:"50px"},modelValue:l.date,"onUpdate:modelValue":s[0]||(s[0]=a=>l.date=a)},null,8,["modelValue"])]),_:1}),y,u,e(n,null,{default:r(()=>[e(h,{modelValue:l.date,"onUpdate:modelValue":s[1]||(s[1]=a=>l.date=a),timeType:24},null,8,["modelValue"])]),_:1}),m,F,e(n,null,{default:r(()=>[e(h,{modelValue:l.date,"onUpdate:modelValue":s[2]||(s[2]=a=>l.date=a),timeType:24,disabled:!0},null,8,["modelValue"])]),_:1}),b,x,e(n,null,{default:r(()=>[e(h,{modelValue:l.date,"onUpdate:modelValue":s[3]||(s[3]=a=>l.date=a),class:"custom_style",inputBackground:"rgba(0, 90, 204, 0.6)",innerBorderColor:"rgb(0, 90, 153, 0.1)",hoverColor:"rgba(0, 204, 153, 0.1)"},null,8,["modelValue"])]),_:1}),C]),_:1}),B])}const S=k(o,[["render",v]]);export{V as __pageData,S as default};
diff --git a/assets/guide_components_time-picker_index.md.CQJdRRaG.lean.js b/assets/guide_components_time-picker_index.md.CQJdRRaG.lean.js
new file mode 100644
index 0000000..0294eaa
--- /dev/null
+++ b/assets/guide_components_time-picker_index.md.CQJdRRaG.lean.js
@@ -0,0 +1,9 @@
+import{_ as k,q as E,Y as e,z as r,H as t,u as i,aq as p,S as d,p as g}from"./chunks/framework.DvIFzl91.js";const o={data(){return{theme:0,date:new Date}},computed:{$theme(){return this.theme?"dark":"light"},divStyle(){return this.$theme=="light"?{backgroundColor:"#fff",padding:"20px",color:"#000"}:{backgroundColor:"#000",padding:"20px",color:"#fff"}}}},V=JSON.parse('{"title":"TimePicker","description":"","frontmatter":{"page":true,"title":"TimePicker"},"headers":[],"relativePath":"guide/components/time-picker/index.md","filePath":"guide/components/time-picker/index.md"}'),c=t("h3",{id:"timepicker-default",tabindex:"-1"},[i("TimePicker-Default "),t("a",{class:"header-anchor",href:"#timepicker-default","aria-label":'Permalink to "TimePicker-Default"'},"​")],-1),y=t("div",{class:"language-vue vp-adaptive-theme line-numbers-mode"},[t("button",{title:"Copy Code",class:"copy"}),t("span",{class:"lang"},"vue"),t("pre",{class:"shiki shiki-themes github-light github-dark vp-code"},[t("code",null,[t("span",{class:"line"},[t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"<"),t("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-TimePicker"),t("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}}," v-model"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"date"),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"  />")])])]),t("div",{class:"line-numbers-wrapper","aria-hidden":"true"},[t("span",{class:"line-number"},"1"),t("br")])],-1),u=t("h3",{id:"timepicker-24-hours",tabindex:"-1"},[i("TimePicker-24-hours "),t("a",{class:"header-anchor",href:"#timepicker-24-hours","aria-label":'Permalink to "TimePicker-24-hours"'},"​")],-1),m=t("div",{class:"language-vue vp-adaptive-theme line-numbers-mode"},[t("button",{title:"Copy Code",class:"copy"}),t("span",{class:"lang"},"vue"),t("pre",{class:"shiki shiki-themes github-light github-dark vp-code"},[t("code",null,[t("span",{class:"line"},[t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"<"),t("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-TimePicker"),t("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}}," v-model"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"date"),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"  :"),t("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}},"timeType"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),t("span",{style:{"--shiki-light":"#005CC5","--shiki-dark":"#79B8FF"}},"24"),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}}," />")])])]),t("div",{class:"line-numbers-wrapper","aria-hidden":"true"},[t("span",{class:"line-number"},"1"),t("br")])],-1),F=t("h3",{id:"timepicker-disabled",tabindex:"-1"},[i("TimePicker-Disabled "),t("a",{class:"header-anchor",href:"#timepicker-disabled","aria-label":'Permalink to "TimePicker-Disabled"'},"​")],-1),b=t("div",{class:"language-vue vp-adaptive-theme line-numbers-mode"},[t("button",{title:"Copy Code",class:"copy"}),t("span",{class:"lang"},"vue"),t("pre",{class:"shiki shiki-themes github-light github-dark vp-code"},[t("code",null,[t("span",{class:"line"},[t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"<"),t("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-TimePicker"),t("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}}," v-model"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"date"),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}}," :"),t("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}},"timeType"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),t("span",{style:{"--shiki-light":"#005CC5","--shiki-dark":"#79B8FF"}},"24"),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}}," :"),t("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}},"disabled"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),t("span",{style:{"--shiki-light":"#005CC5","--shiki-dark":"#79B8FF"}},"true"),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}}," />")])])]),t("div",{class:"line-numbers-wrapper","aria-hidden":"true"},[t("span",{class:"line-number"},"1"),t("br")])],-1),x=t("h3",{id:"timepicker-custom-style",tabindex:"-1"},[i("TimePicker-Custom-Style "),t("a",{class:"header-anchor",href:"#timepicker-custom-style","aria-label":'Permalink to "TimePicker-Custom-Style"'},"​")],-1),C=t("div",{class:"language-vue vp-adaptive-theme line-numbers-mode"},[t("button",{title:"Copy Code",class:"copy"}),t("span",{class:"lang"},"vue"),t("pre",{class:"shiki shiki-themes github-light github-dark vp-code"},[t("code",null,[t("span",{class:"line"},[t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"<"),t("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-TimePicker"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}}," ")]),i(`
+`),t("span",{class:"line"},[t("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}},"v-model"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"date"),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}}," ")]),i(`
+`),t("span",{class:"line"},[t("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}},"class"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"custom_style"'),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}}," ")]),i(`
+`),t("span",{class:"line"},[t("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}},"innerBorderColor"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"rgb(0, 204, 153)"')]),i(`
+`),t("span",{class:"line"},[t("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}},"hoverColor"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"rgba(0, 204, 153, 0.7)"')]),i(`
+`),t("span",{class:"line"},[t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},":"),t("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}},"optionsStyle"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"{"),t("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}},"backgroundColor"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},":"),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},"'rgba(0, 204, 153,0.3)'"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},","),t("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}},"color"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},":"),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},"'white'"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},","),t("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}},"borderColor"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},":"),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},"'rgba(0, 204, 153,0.3)'"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"}"),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"')]),i(`
+`),t("span",{class:"line"},[t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},":"),t("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}},"selectStyle"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"{"),t("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}},"backgroundColor"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},":"),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},"'rgb(0, 204, 153)'"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"}"),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"')]),i(`
+`),t("span",{class:"line"},[t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")]),i(`
+`),t("span",{class:"line"},[t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"</"),t("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-TimePicker"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")])])]),t("div",{class:"line-numbers-wrapper","aria-hidden":"true"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br"),t("span",{class:"line-number"},"3"),t("br"),t("span",{class:"line-number"},"4"),t("br"),t("span",{class:"line-number"},"5"),t("br"),t("span",{class:"line-number"},"6"),t("br"),t("span",{class:"line-number"},"7"),t("br"),t("span",{class:"line-number"},"8"),t("br"),t("span",{class:"line-number"},"9"),t("br")])],-1),B=p("",6);function v(_,s,f,P,l,T){const h=d("fv-TimePicker"),n=d("ClientOnly");return g(),E("div",null,[c,e(n,null,{default:r(()=>[e(n,null,{default:r(()=>[e(h,{style:{width:"50px"},modelValue:l.date,"onUpdate:modelValue":s[0]||(s[0]=a=>l.date=a)},null,8,["modelValue"])]),_:1}),y,u,e(n,null,{default:r(()=>[e(h,{modelValue:l.date,"onUpdate:modelValue":s[1]||(s[1]=a=>l.date=a),timeType:24},null,8,["modelValue"])]),_:1}),m,F,e(n,null,{default:r(()=>[e(h,{modelValue:l.date,"onUpdate:modelValue":s[2]||(s[2]=a=>l.date=a),timeType:24,disabled:!0},null,8,["modelValue"])]),_:1}),b,x,e(n,null,{default:r(()=>[e(h,{modelValue:l.date,"onUpdate:modelValue":s[3]||(s[3]=a=>l.date=a),class:"custom_style",inputBackground:"rgba(0, 90, 204, 0.6)",innerBorderColor:"rgb(0, 90, 153, 0.1)",hoverColor:"rgba(0, 204, 153, 0.1)"},null,8,["modelValue"])]),_:1}),C]),_:1}),B])}const S=k(o,[["render",v]]);export{V as __pageData,S as default};
diff --git a/assets/guide_components_toggle-switch_emits.md.5146435f.js b/assets/guide_components_toggle-switch_emits.md.5146435f.js
deleted file mode 100644
index 7574542..0000000
--- a/assets/guide_components_toggle-switch_emits.md.5146435f.js
+++ /dev/null
@@ -1 +0,0 @@
-import{_ as t,c as e,o as n,a}from"./app.d60fa8c3.js";const x=JSON.parse('{"title":"Emits","description":"","frontmatter":{},"headers":[{"level":2,"title":"Emits","slug":"emits"}],"relativePath":"guide/components/toggle-switch/emits.md"}'),l={name:"guide/components/toggle-switch/emits.md"},r=a('<h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">blur</td><td style="text-align:center;">evt[FocusEvent]</td><td style="text-align:center;">onblur</td></tr><tr><td style="text-align:center;">change</td><td style="text-align:center;">val[boolean]</td><td style="text-align:center;">onchange</td></tr><tr><td style="text-align:center;">click</td><td style="text-align:center;">val[boolean]</td><td style="text-align:center;">onclick</td></tr><tr><td style="text-align:center;">focus</td><td style="text-align:center;">evt[FocusEvent]</td><td style="text-align:center;">onfocus</td></tr><tr><td style="text-align:center;">update:model-value</td><td style="text-align:center;">val[boolean]</td><td style="text-align:center;">v-model</td></tr></tbody></table>',3),s=[r];function d(c,i,o,g,_,m){return n(),e("div",null,s)}var y=t(l,[["render",d]]);export{x as __pageData,y as default};
diff --git a/assets/guide_components_toggle-switch_emits.md.5146435f.lean.js b/assets/guide_components_toggle-switch_emits.md.5146435f.lean.js
deleted file mode 100644
index e4894fd..0000000
--- a/assets/guide_components_toggle-switch_emits.md.5146435f.lean.js
+++ /dev/null
@@ -1 +0,0 @@
-import{_ as t,c as e,o as n,a}from"./app.d60fa8c3.js";const x=JSON.parse('{"title":"Emits","description":"","frontmatter":{},"headers":[{"level":2,"title":"Emits","slug":"emits"}],"relativePath":"guide/components/toggle-switch/emits.md"}'),l={name:"guide/components/toggle-switch/emits.md"},r=a("",3),s=[r];function d(c,i,o,g,_,m){return n(),e("div",null,s)}var y=t(l,[["render",d]]);export{x as __pageData,y as default};
diff --git a/assets/guide_components_toggle-switch_emits.md.CLGzrNut.js b/assets/guide_components_toggle-switch_emits.md.CLGzrNut.js
new file mode 100644
index 0000000..1b04b19
--- /dev/null
+++ b/assets/guide_components_toggle-switch_emits.md.CLGzrNut.js
@@ -0,0 +1 @@
+import{_ as t,q as e,p as a,aq as s}from"./chunks/framework.DvIFzl91.js";const g=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/components/toggle-switch/emits.md","filePath":"guide/components/toggle-switch/emits.md"}'),i={name:"guide/components/toggle-switch/emits.md"},n=s('<h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-label="Permalink to &quot;Emits&quot;">​</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead></table>',3),o=[n];function r(c,_,m,l,h,d){return a(),e("div",null,o)}const u=t(i,[["render",r]]);export{g as __pageData,u as default};
diff --git a/assets/guide_components_toggle-switch_emits.md.CLGzrNut.lean.js b/assets/guide_components_toggle-switch_emits.md.CLGzrNut.lean.js
new file mode 100644
index 0000000..7fd8ef6
--- /dev/null
+++ b/assets/guide_components_toggle-switch_emits.md.CLGzrNut.lean.js
@@ -0,0 +1 @@
+import{_ as t,q as e,p as a,aq as s}from"./chunks/framework.DvIFzl91.js";const g=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/components/toggle-switch/emits.md","filePath":"guide/components/toggle-switch/emits.md"}'),i={name:"guide/components/toggle-switch/emits.md"},n=s("",3),o=[n];function r(c,_,m,l,h,d){return a(),e("div",null,o)}const u=t(i,[["render",r]]);export{g as __pageData,u as default};
diff --git a/assets/guide_components_toggle-switch_index.md.61en_q9-.js b/assets/guide_components_toggle-switch_index.md.61en_q9-.js
new file mode 100644
index 0000000..ebb3d75
--- /dev/null
+++ b/assets/guide_components_toggle-switch_index.md.61en_q9-.js
@@ -0,0 +1,7 @@
+import{_ as a,q as h,Y as i,z as r,H as t,u as e,aq as d,S as l,p as g}from"./chunks/framework.DvIFzl91.js";const z=JSON.parse('{"title":"ToggleSwitch","description":"","frontmatter":{"page":true,"title":"ToggleSwitch"},"headers":[],"relativePath":"guide/components/toggle-switch/index.md","filePath":"guide/components/toggle-switch/index.md"}'),o={name:"guide/components/toggle-switch/index.md"},c=t("h3",{id:"toggleswitch-demo",tabindex:"-1"},[e("ToggleSwitch-DEMO "),t("a",{class:"header-anchor",href:"#toggleswitch-demo","aria-label":'Permalink to "ToggleSwitch-DEMO"'},"​")],-1),k=t("hr",null,null,-1),p=t("div",{class:"language-vue vp-adaptive-theme line-numbers-mode"},[t("button",{title:"Copy Code",class:"copy"}),t("span",{class:"lang"},"vue"),t("pre",{class:"shiki shiki-themes github-light github-dark vp-code"},[t("code",null,[t("span",{class:"line"},[t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"<"),t("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-ToggleSwitch"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")]),e(`
+`),t("span",{class:"line"},[t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"</"),t("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-ToggleSwitch"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")])])]),t("div",{class:"line-numbers-wrapper","aria-hidden":"true"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br")])],-1),E=t("h3",{id:"toggleswitch-disabled",tabindex:"-1"},[e("ToggleSwitch Disabled "),t("a",{class:"header-anchor",href:"#toggleswitch-disabled","aria-label":'Permalink to "ToggleSwitch Disabled"'},"​")],-1),y=t("hr",null,null,-1),u=t("div",{class:"language-vue vp-adaptive-theme line-numbers-mode"},[t("button",{title:"Copy Code",class:"copy"}),t("span",{class:"lang"},"vue"),t("pre",{class:"shiki shiki-themes github-light github-dark vp-code"},[t("code",null,[t("span",{class:"line"},[t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"<"),t("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-ToggleSwitch"),t("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}}," disabled"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")]),e(`
+`),t("span",{class:"line"},[t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"</"),t("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-ToggleSwitch"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")])])]),t("div",{class:"line-numbers-wrapper","aria-hidden":"true"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br")])],-1),b=t("h3",{id:"toggleswitch-dark-theme",tabindex:"-1"},[e("ToggleSwitch Dark Theme "),t("a",{class:"header-anchor",href:"#toggleswitch-dark-theme","aria-label":'Permalink to "ToggleSwitch Dark Theme"'},"​")],-1),x=t("hr",null,null,-1),m={style:{background:"black"}},F=t("div",{class:"language-vue vp-adaptive-theme line-numbers-mode"},[t("button",{title:"Copy Code",class:"copy"}),t("span",{class:"lang"},"vue"),t("pre",{class:"shiki shiki-themes github-light github-dark vp-code"},[t("code",null,[t("span",{class:"line"},[t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"<"),t("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-ToggleSwitch"),t("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}}," theme"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"dark"'),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")]),e(`
+`),t("span",{class:"line"},[t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"</"),t("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-ToggleSwitch"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")])])]),t("div",{class:"line-numbers-wrapper","aria-hidden":"true"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br")])],-1),v=t("h3",{id:"toggleswitch-custom-content",tabindex:"-1"},[e("ToggleSwitch Custom Content "),t("a",{class:"header-anchor",href:"#toggleswitch-custom-content","aria-label":'Permalink to "ToggleSwitch Custom Content"'},"​")],-1),_=t("hr",null,null,-1),w=t("div",{class:"language-vue vp-adaptive-theme line-numbers-mode"},[t("button",{title:"Copy Code",class:"copy"}),t("span",{class:"lang"},"vue"),t("pre",{class:"shiki shiki-themes github-light github-dark vp-code"},[t("code",null,[t("span",{class:"line"},[t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"<"),t("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-ToggleSwitch"),t("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}}," on"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"开"'),t("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}}," off"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"关"'),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")]),e(`
+`),t("span",{class:"line"},[t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"</"),t("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-ToggleSwitch"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")])])]),t("div",{class:"line-numbers-wrapper","aria-hidden":"true"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br")])],-1),C=t("h3",{id:"toggleswitch-inside-content",tabindex:"-1"},[e("ToggleSwitch Inside Content "),t("a",{class:"header-anchor",href:"#toggleswitch-inside-content","aria-label":'Permalink to "ToggleSwitch Inside Content"'},"​")],-1),f=t("hr",null,null,-1),T=t("div",{class:"language-vue vp-adaptive-theme line-numbers-mode"},[t("button",{title:"Copy Code",class:"copy"}),t("span",{class:"lang"},"vue"),t("pre",{class:"shiki shiki-themes github-light github-dark vp-code"},[t("code",null,[t("span",{class:"line"},[t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"<"),t("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-ToggleSwitch"),t("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}}," width"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"50"'),t("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}}," on"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"开"'),t("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}}," off"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"关"'),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}}," :"),t("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}},"insideContent"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),t("span",{style:{"--shiki-light":"#005CC5","--shiki-dark":"#79B8FF"}},"true"),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")]),e(`
+`),t("span",{class:"line"},[t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"</"),t("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-ToggleSwitch"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")])])]),t("div",{class:"line-numbers-wrapper","aria-hidden":"true"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br")])],-1),S=t("h3",{id:"toggleswitch-custom-style",tabindex:"-1"},[e("ToggleSwitch Custom Style "),t("a",{class:"header-anchor",href:"#toggleswitch-custom-style","aria-label":'Permalink to "ToggleSwitch Custom Style"'},"​")],-1),B=t("hr",null,null,-1),N=t("div",{class:"language-vue vp-adaptive-theme line-numbers-mode"},[t("button",{title:"Copy Code",class:"copy"}),t("span",{class:"lang"},"vue"),t("pre",{class:"shiki shiki-themes github-light github-dark vp-code"},[t("code",null,[t("span",{class:"line"},[t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"<"),t("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-ToggleSwitch"),t("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}}," borderColor"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"rgba(0,204,153,1)"'),t("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}}," ringBackground"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"rgba(0,204,153,1)"'),t("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}}," onForeground"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"rgba(0,204,153,1)"'),t("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}}," offForeground"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"rgba(0,204,153,1)"'),t("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}}," switchOnBackground"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"rgba(0,204,153,1)"'),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")]),e(`
+`),t("span",{class:"line"},[t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"</"),t("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-ToggleSwitch"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")])])]),t("div",{class:"line-numbers-wrapper","aria-hidden":"true"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br")])],-1),A=d('<h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">value</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">Toggleswitch value</td></tr><tr><td style="text-align:center;">on</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">On</td><td style="text-align:center;">Toggleswitch content when value is true</td></tr><tr><td style="text-align:center;">off</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">Off</td><td style="text-align:center;">Toggleswitch content when value is false</td></tr><tr><td style="text-align:center;">onForeground</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">Toggleswitch content foreground when value is true</td></tr><tr><td style="text-align:center;">offForeground</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">Toggleswitch content foreground when value is false</td></tr><tr><td style="text-align:center;">borderColor</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">width</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">40</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">height</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">20</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">insideContent</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">ringBackground</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">switchOnBackground</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">system</td><td style="text-align:center;">主题样式, 包含<code>light</code>, <code>dark</code>, <code>system</code>, <code>custom</code>几种样式</td></tr></tbody></table><h3 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to &quot;Events&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">事件名(Name)</th><th style="text-align:center;">参数类型(args)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">toggle</td><td style="text-align:center;">value</td><td style="text-align:center;"></td></tr></tbody></table>',6);function D(P,O,q,V,I,$){const s=l("fv-ToggleSwitch"),n=l("ClientOnly");return g(),h("div",null,[c,k,i(n,null,{default:r(()=>[i(s),p,E,y,i(s,{disabled:""}),u,b,x,t("div",m,[i(s,{theme:"dark"})]),F,v,_,i(s,{on:"开",off:"关"}),w,C,f,i(s,{width:"50",on:"开",off:"关",insideContent:!0}),T,S,B,i(s,{borderColor:"rgba(0,204,153,1)",ringBackground:"rgba(0,204,153,1)",onForeground:"rgba(0,204,153,1)",offForeground:"rgba(0,204,153,1)",switchOnBackground:"rgba(0,204,153,1)"}),N]),_:1}),A])}const H=a(o,[["render",D]]);export{z as __pageData,H as default};
diff --git a/assets/guide_components_toggle-switch_index.md.61en_q9-.lean.js b/assets/guide_components_toggle-switch_index.md.61en_q9-.lean.js
new file mode 100644
index 0000000..ffc0457
--- /dev/null
+++ b/assets/guide_components_toggle-switch_index.md.61en_q9-.lean.js
@@ -0,0 +1,7 @@
+import{_ as a,q as h,Y as i,z as r,H as t,u as e,aq as d,S as l,p as g}from"./chunks/framework.DvIFzl91.js";const z=JSON.parse('{"title":"ToggleSwitch","description":"","frontmatter":{"page":true,"title":"ToggleSwitch"},"headers":[],"relativePath":"guide/components/toggle-switch/index.md","filePath":"guide/components/toggle-switch/index.md"}'),o={name:"guide/components/toggle-switch/index.md"},c=t("h3",{id:"toggleswitch-demo",tabindex:"-1"},[e("ToggleSwitch-DEMO "),t("a",{class:"header-anchor",href:"#toggleswitch-demo","aria-label":'Permalink to "ToggleSwitch-DEMO"'},"​")],-1),k=t("hr",null,null,-1),p=t("div",{class:"language-vue vp-adaptive-theme line-numbers-mode"},[t("button",{title:"Copy Code",class:"copy"}),t("span",{class:"lang"},"vue"),t("pre",{class:"shiki shiki-themes github-light github-dark vp-code"},[t("code",null,[t("span",{class:"line"},[t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"<"),t("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-ToggleSwitch"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")]),e(`
+`),t("span",{class:"line"},[t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"</"),t("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-ToggleSwitch"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")])])]),t("div",{class:"line-numbers-wrapper","aria-hidden":"true"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br")])],-1),E=t("h3",{id:"toggleswitch-disabled",tabindex:"-1"},[e("ToggleSwitch Disabled "),t("a",{class:"header-anchor",href:"#toggleswitch-disabled","aria-label":'Permalink to "ToggleSwitch Disabled"'},"​")],-1),y=t("hr",null,null,-1),u=t("div",{class:"language-vue vp-adaptive-theme line-numbers-mode"},[t("button",{title:"Copy Code",class:"copy"}),t("span",{class:"lang"},"vue"),t("pre",{class:"shiki shiki-themes github-light github-dark vp-code"},[t("code",null,[t("span",{class:"line"},[t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"<"),t("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-ToggleSwitch"),t("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}}," disabled"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")]),e(`
+`),t("span",{class:"line"},[t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"</"),t("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-ToggleSwitch"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")])])]),t("div",{class:"line-numbers-wrapper","aria-hidden":"true"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br")])],-1),b=t("h3",{id:"toggleswitch-dark-theme",tabindex:"-1"},[e("ToggleSwitch Dark Theme "),t("a",{class:"header-anchor",href:"#toggleswitch-dark-theme","aria-label":'Permalink to "ToggleSwitch Dark Theme"'},"​")],-1),x=t("hr",null,null,-1),m={style:{background:"black"}},F=t("div",{class:"language-vue vp-adaptive-theme line-numbers-mode"},[t("button",{title:"Copy Code",class:"copy"}),t("span",{class:"lang"},"vue"),t("pre",{class:"shiki shiki-themes github-light github-dark vp-code"},[t("code",null,[t("span",{class:"line"},[t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"<"),t("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-ToggleSwitch"),t("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}}," theme"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"dark"'),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")]),e(`
+`),t("span",{class:"line"},[t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"</"),t("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-ToggleSwitch"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")])])]),t("div",{class:"line-numbers-wrapper","aria-hidden":"true"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br")])],-1),v=t("h3",{id:"toggleswitch-custom-content",tabindex:"-1"},[e("ToggleSwitch Custom Content "),t("a",{class:"header-anchor",href:"#toggleswitch-custom-content","aria-label":'Permalink to "ToggleSwitch Custom Content"'},"​")],-1),_=t("hr",null,null,-1),w=t("div",{class:"language-vue vp-adaptive-theme line-numbers-mode"},[t("button",{title:"Copy Code",class:"copy"}),t("span",{class:"lang"},"vue"),t("pre",{class:"shiki shiki-themes github-light github-dark vp-code"},[t("code",null,[t("span",{class:"line"},[t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"<"),t("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-ToggleSwitch"),t("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}}," on"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"开"'),t("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}}," off"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"关"'),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")]),e(`
+`),t("span",{class:"line"},[t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"</"),t("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-ToggleSwitch"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")])])]),t("div",{class:"line-numbers-wrapper","aria-hidden":"true"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br")])],-1),C=t("h3",{id:"toggleswitch-inside-content",tabindex:"-1"},[e("ToggleSwitch Inside Content "),t("a",{class:"header-anchor",href:"#toggleswitch-inside-content","aria-label":'Permalink to "ToggleSwitch Inside Content"'},"​")],-1),f=t("hr",null,null,-1),T=t("div",{class:"language-vue vp-adaptive-theme line-numbers-mode"},[t("button",{title:"Copy Code",class:"copy"}),t("span",{class:"lang"},"vue"),t("pre",{class:"shiki shiki-themes github-light github-dark vp-code"},[t("code",null,[t("span",{class:"line"},[t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"<"),t("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-ToggleSwitch"),t("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}}," width"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"50"'),t("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}}," on"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"开"'),t("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}}," off"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"关"'),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}}," :"),t("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}},"insideContent"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),t("span",{style:{"--shiki-light":"#005CC5","--shiki-dark":"#79B8FF"}},"true"),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")]),e(`
+`),t("span",{class:"line"},[t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"</"),t("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-ToggleSwitch"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")])])]),t("div",{class:"line-numbers-wrapper","aria-hidden":"true"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br")])],-1),S=t("h3",{id:"toggleswitch-custom-style",tabindex:"-1"},[e("ToggleSwitch Custom Style "),t("a",{class:"header-anchor",href:"#toggleswitch-custom-style","aria-label":'Permalink to "ToggleSwitch Custom Style"'},"​")],-1),B=t("hr",null,null,-1),N=t("div",{class:"language-vue vp-adaptive-theme line-numbers-mode"},[t("button",{title:"Copy Code",class:"copy"}),t("span",{class:"lang"},"vue"),t("pre",{class:"shiki shiki-themes github-light github-dark vp-code"},[t("code",null,[t("span",{class:"line"},[t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"<"),t("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-ToggleSwitch"),t("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}}," borderColor"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"rgba(0,204,153,1)"'),t("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}}," ringBackground"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"rgba(0,204,153,1)"'),t("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}}," onForeground"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"rgba(0,204,153,1)"'),t("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}}," offForeground"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"rgba(0,204,153,1)"'),t("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}}," switchOnBackground"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"rgba(0,204,153,1)"'),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")]),e(`
+`),t("span",{class:"line"},[t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"</"),t("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-ToggleSwitch"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")])])]),t("div",{class:"line-numbers-wrapper","aria-hidden":"true"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br")])],-1),A=d("",6);function D(P,O,q,V,I,$){const s=l("fv-ToggleSwitch"),n=l("ClientOnly");return g(),h("div",null,[c,k,i(n,null,{default:r(()=>[i(s),p,E,y,i(s,{disabled:""}),u,b,x,t("div",m,[i(s,{theme:"dark"})]),F,v,_,i(s,{on:"开",off:"关"}),w,C,f,i(s,{width:"50",on:"开",off:"关",insideContent:!0}),T,S,B,i(s,{borderColor:"rgba(0,204,153,1)",ringBackground:"rgba(0,204,153,1)",onForeground:"rgba(0,204,153,1)",offForeground:"rgba(0,204,153,1)",switchOnBackground:"rgba(0,204,153,1)"}),N]),_:1}),A])}const H=a(o,[["render",D]]);export{z as __pageData,H as default};
diff --git a/assets/guide_components_toggle-switch_index.md.8be48081.js b/assets/guide_components_toggle-switch_index.md.8be48081.js
deleted file mode 100644
index 111d7b3..0000000
--- a/assets/guide_components_toggle-switch_index.md.8be48081.js
+++ /dev/null
@@ -1,52 +0,0 @@
-import{u as y}from"./chunks/index.9dba9c16.js";import{d,f as u,c as g,b as F,u as i,a as e,r as b,o as h}from"./app.d60fa8c3.js";const m=e('<h1 id="toggleswitch" tabindex="-1">ToggleSwitch <a class="header-anchor" href="#toggleswitch" aria-hidden="true">#</a></h1><h2 id="quick-start" tabindex="-1">Quick Start <a class="header-anchor" href="#quick-start" aria-hidden="true">#</a></h2><h3 id="default" tabindex="-1">Default <a class="header-anchor" href="#default" aria-hidden="true">#</a></h3><hr>',4),C=e(`<div class="language-vue-html"><span class="copy"></span><div class="highlight-lines"><br><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><br><br><br><br></div><pre><code><span class="line"></span>
-<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-toggle-switch</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">v-model</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">click</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">click</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">change</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">change</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">blur</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">blur</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">focus</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">focus</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">on</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">ON</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">off</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">OFF</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-toggle-switch</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><h3 id="disabled" tabindex="-1">Disabled <a class="header-anchor" href="#disabled" aria-hidden="true">#</a></h3><hr>`,3),A=e(`<div class="language-vue-html"><span class="copy"></span><div class="highlight-lines"><br><br><br><br><br><br><br><br><br><div class="highlighted">\xA0</div><br><br></div><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-toggle-switch</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">v-model</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">click</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">click</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">change</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">change</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">blur</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">blur</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">focus</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">focus</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">on</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">ON</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">off</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">OFF</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">disabled</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-toggle-switch</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><h3 id="custom" tabindex="-1">Custom <a class="header-anchor" href="#custom" aria-hidden="true">#</a></h3><hr><ol><li>custom color</li></ol>`,4),x=e(`<div class="language-vue-html"><span class="copy"></span><div class="highlight-lines"><br><br><br><br><br><br><br><br><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><br><br><br></div><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-toggle-switch</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">v-model</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">click</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">click</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">change</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">change</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">blur</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">blur</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">focus</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">focus</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">  </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">on</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">Yes</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">off-foreground</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">rgba(0, 204, 153, 1)</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">on-background</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">rgba(0, 204, 153, 1)</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">foreground</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">rgba(0, 204, 153, 1)</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">    &gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-toggle-switch</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><ol start="2"><li>box side</li></ol>`,2),v=e(`<div class="language-vue-html"><span class="copy"></span><div class="highlight-lines"><br><br><br><br><br><br><br><br><div class="highlighted">\xA0</div><br><br><br><div class="highlighted">\xA0</div><br><br><br></div><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-toggle-switch</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">v-model</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">click</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">click</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">change</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">change</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">blur</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">blur</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">focus</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">focus</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">  </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">on</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">Yes</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">off</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">No</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">off-foreground</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">rgba(0, 204, 153, 1)</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">on-background</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">rgba(0, 204, 153, 1)</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">foreground</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">rgba(0, 204, 153, 1)</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">box-side</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">end</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">    &gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-toggle-switch</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">box-side</td><td style="text-align:center;">[&#39;start&#39;,&#39;end&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;start&#39;</td><td style="text-align:center;">box side</td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">disabled</td></tr><tr><td style="text-align:center;">foreground</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">text color</td></tr><tr><td style="text-align:center;">lang</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">i18n</td></tr><tr><td style="text-align:center;">model-value</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">v-model</td></tr><tr><td style="text-align:center;">off</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">off text</td></tr><tr><td style="text-align:center;">off-foreground</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">off circle and border color</td></tr><tr><td style="text-align:center;">on</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">on text</td></tr><tr><td style="text-align:center;">on-background</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">on background color</td></tr><tr><td style="text-align:center;">on-foreground</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">on circle color</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">[&#39;light&#39;,&#39;dark&#39;,&#39;global&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">theme</td></tr></tbody></table><h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">blur</td><td style="text-align:center;">evt[FocusEvent]</td><td style="text-align:center;">onblur</td></tr><tr><td style="text-align:center;">change</td><td style="text-align:center;">val[boolean]</td><td style="text-align:center;">onchange</td></tr><tr><td style="text-align:center;">click</td><td style="text-align:center;">val[boolean]</td><td style="text-align:center;">onclick</td></tr><tr><td style="text-align:center;">focus</td><td style="text-align:center;">evt[FocusEvent]</td><td style="text-align:center;">onfocus</td></tr><tr><td style="text-align:center;">update:model-value</td><td style="text-align:center;">val[boolean]</td><td style="text-align:center;">v-model</td></tr></tbody></table>`,7),w=JSON.parse('{"title":"ToggleSwitch","description":"","frontmatter":{"page":true,"title":"ToggleSwitch"},"headers":[{"level":2,"title":"Quick Start","slug":"quick-start"},{"level":3,"title":"Default","slug":"default"},{"level":3,"title":"Disabled","slug":"disabled"},{"level":3,"title":"Custom","slug":"custom"},{"level":2,"title":"Properties","slug":"properties"},{"level":2,"title":"Emits","slug":"emits"}],"relativePath":"guide/components/toggle-switch/index.md"}'),f={name:"guide/components/toggle-switch/index.md"},N=d({...f,setup(q){const{theme:t}=y(),s=u(!1);function o(n){console.log("click",n)}function p(n){console.log("change",n)}function r(n){console.log("focus",n)}function c(n){console.log("blur",n)}return(n,l)=>{const D=b("fv-toggle-switch");return h(),g("div",null,[m,F(D,{modelValue:s.value,"onUpdate:modelValue":l[0]||(l[0]=a=>s.value=a),onClick:o,onChange:p,onBlur:c,onFocus:r,theme:i(t),on:"On",off:"Off"},null,8,["modelValue","theme"]),C,F(D,{modelValue:s.value,"onUpdate:modelValue":l[1]||(l[1]=a=>s.value=a),onClick:o,onChange:p,onBlur:c,onFocus:r,theme:i(t),on:"On",off:"Off",disabled:""},null,8,["modelValue","theme"]),A,F(D,{modelValue:s.value,"onUpdate:modelValue":l[2]||(l[2]=a=>s.value=a),onClick:o,onChange:p,onBlur:c,onFocus:r,theme:i(t),on:"Yes","off-foreground":"rgba(0, 204, 153, 1)","on-background":"rgba(0, 204, 153, 1)",foreground:"rgba(0, 204, 153, 1)"},null,8,["modelValue","theme"]),x,F(D,{modelValue:s.value,"onUpdate:modelValue":l[3]||(l[3]=a=>s.value=a),onClick:o,onChange:p,onBlur:c,onFocus:r,theme:i(t),on:"Yes",off:"No","off-foreground":"rgba(0, 204, 153, 1)","on-background":"rgba(0, 204, 153, 1)",foreground:"rgba(0, 204, 153, 1)","box-side":"end"},null,8,["modelValue","theme"]),v])}}});export{w as __pageData,N as default};
diff --git a/assets/guide_components_toggle-switch_index.md.8be48081.lean.js b/assets/guide_components_toggle-switch_index.md.8be48081.lean.js
deleted file mode 100644
index 111d7b3..0000000
--- a/assets/guide_components_toggle-switch_index.md.8be48081.lean.js
+++ /dev/null
@@ -1,52 +0,0 @@
-import{u as y}from"./chunks/index.9dba9c16.js";import{d,f as u,c as g,b as F,u as i,a as e,r as b,o as h}from"./app.d60fa8c3.js";const m=e('<h1 id="toggleswitch" tabindex="-1">ToggleSwitch <a class="header-anchor" href="#toggleswitch" aria-hidden="true">#</a></h1><h2 id="quick-start" tabindex="-1">Quick Start <a class="header-anchor" href="#quick-start" aria-hidden="true">#</a></h2><h3 id="default" tabindex="-1">Default <a class="header-anchor" href="#default" aria-hidden="true">#</a></h3><hr>',4),C=e(`<div class="language-vue-html"><span class="copy"></span><div class="highlight-lines"><br><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><br><br><br><br></div><pre><code><span class="line"></span>
-<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-toggle-switch</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">v-model</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">click</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">click</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">change</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">change</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">blur</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">blur</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">focus</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">focus</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">on</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">ON</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">off</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">OFF</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-toggle-switch</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><h3 id="disabled" tabindex="-1">Disabled <a class="header-anchor" href="#disabled" aria-hidden="true">#</a></h3><hr>`,3),A=e(`<div class="language-vue-html"><span class="copy"></span><div class="highlight-lines"><br><br><br><br><br><br><br><br><br><div class="highlighted">\xA0</div><br><br></div><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-toggle-switch</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">v-model</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">click</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">click</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">change</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">change</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">blur</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">blur</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">focus</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">focus</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">on</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">ON</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">off</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">OFF</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">disabled</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-toggle-switch</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><h3 id="custom" tabindex="-1">Custom <a class="header-anchor" href="#custom" aria-hidden="true">#</a></h3><hr><ol><li>custom color</li></ol>`,4),x=e(`<div class="language-vue-html"><span class="copy"></span><div class="highlight-lines"><br><br><br><br><br><br><br><br><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><div class="highlighted">\xA0</div><br><br><br></div><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-toggle-switch</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">v-model</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">click</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">click</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">change</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">change</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">blur</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">blur</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">focus</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">focus</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">  </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">on</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">Yes</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">off-foreground</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">rgba(0, 204, 153, 1)</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">on-background</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">rgba(0, 204, 153, 1)</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">foreground</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">rgba(0, 204, 153, 1)</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">    &gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-toggle-switch</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><ol start="2"><li>box side</li></ol>`,2),v=e(`<div class="language-vue-html"><span class="copy"></span><div class="highlight-lines"><br><br><br><br><br><br><br><br><div class="highlighted">\xA0</div><br><br><br><div class="highlighted">\xA0</div><br><br><br></div><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-toggle-switch</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">v-model</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">click</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">click</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">change</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">change</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">blur</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">blur</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">focus</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">focus</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">  </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">on</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">Yes</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">off</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">No</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">off-foreground</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">rgba(0, 204, 153, 1)</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">on-background</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">rgba(0, 204, 153, 1)</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">foreground</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">rgba(0, 204, 153, 1)</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">box-side</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">end</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">    &gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-toggle-switch</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">box-side</td><td style="text-align:center;">[&#39;start&#39;,&#39;end&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;start&#39;</td><td style="text-align:center;">box side</td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">disabled</td></tr><tr><td style="text-align:center;">foreground</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">text color</td></tr><tr><td style="text-align:center;">lang</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">i18n</td></tr><tr><td style="text-align:center;">model-value</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">v-model</td></tr><tr><td style="text-align:center;">off</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">off text</td></tr><tr><td style="text-align:center;">off-foreground</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">off circle and border color</td></tr><tr><td style="text-align:center;">on</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">on text</td></tr><tr><td style="text-align:center;">on-background</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">on background color</td></tr><tr><td style="text-align:center;">on-foreground</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">on circle color</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">[&#39;light&#39;,&#39;dark&#39;,&#39;global&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">theme</td></tr></tbody></table><h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">blur</td><td style="text-align:center;">evt[FocusEvent]</td><td style="text-align:center;">onblur</td></tr><tr><td style="text-align:center;">change</td><td style="text-align:center;">val[boolean]</td><td style="text-align:center;">onchange</td></tr><tr><td style="text-align:center;">click</td><td style="text-align:center;">val[boolean]</td><td style="text-align:center;">onclick</td></tr><tr><td style="text-align:center;">focus</td><td style="text-align:center;">evt[FocusEvent]</td><td style="text-align:center;">onfocus</td></tr><tr><td style="text-align:center;">update:model-value</td><td style="text-align:center;">val[boolean]</td><td style="text-align:center;">v-model</td></tr></tbody></table>`,7),w=JSON.parse('{"title":"ToggleSwitch","description":"","frontmatter":{"page":true,"title":"ToggleSwitch"},"headers":[{"level":2,"title":"Quick Start","slug":"quick-start"},{"level":3,"title":"Default","slug":"default"},{"level":3,"title":"Disabled","slug":"disabled"},{"level":3,"title":"Custom","slug":"custom"},{"level":2,"title":"Properties","slug":"properties"},{"level":2,"title":"Emits","slug":"emits"}],"relativePath":"guide/components/toggle-switch/index.md"}'),f={name:"guide/components/toggle-switch/index.md"},N=d({...f,setup(q){const{theme:t}=y(),s=u(!1);function o(n){console.log("click",n)}function p(n){console.log("change",n)}function r(n){console.log("focus",n)}function c(n){console.log("blur",n)}return(n,l)=>{const D=b("fv-toggle-switch");return h(),g("div",null,[m,F(D,{modelValue:s.value,"onUpdate:modelValue":l[0]||(l[0]=a=>s.value=a),onClick:o,onChange:p,onBlur:c,onFocus:r,theme:i(t),on:"On",off:"Off"},null,8,["modelValue","theme"]),C,F(D,{modelValue:s.value,"onUpdate:modelValue":l[1]||(l[1]=a=>s.value=a),onClick:o,onChange:p,onBlur:c,onFocus:r,theme:i(t),on:"On",off:"Off",disabled:""},null,8,["modelValue","theme"]),A,F(D,{modelValue:s.value,"onUpdate:modelValue":l[2]||(l[2]=a=>s.value=a),onClick:o,onChange:p,onBlur:c,onFocus:r,theme:i(t),on:"Yes","off-foreground":"rgba(0, 204, 153, 1)","on-background":"rgba(0, 204, 153, 1)",foreground:"rgba(0, 204, 153, 1)"},null,8,["modelValue","theme"]),x,F(D,{modelValue:s.value,"onUpdate:modelValue":l[3]||(l[3]=a=>s.value=a),onClick:o,onChange:p,onBlur:c,onFocus:r,theme:i(t),on:"Yes",off:"No","off-foreground":"rgba(0, 204, 153, 1)","on-background":"rgba(0, 204, 153, 1)",foreground:"rgba(0, 204, 153, 1)","box-side":"end"},null,8,["modelValue","theme"]),v])}}});export{w as __pageData,N as default};
diff --git a/assets/guide_components_toggle-switch_properties.md.54984c3a.js b/assets/guide_components_toggle-switch_properties.md.54984c3a.js
deleted file mode 100644
index e162c81..0000000
--- a/assets/guide_components_toggle-switch_properties.md.54984c3a.js
+++ /dev/null
@@ -1 +0,0 @@
-import{_ as t,c as e,o as n,a as d}from"./app.d60fa8c3.js";const h=JSON.parse('{"title":"Properties","description":"","frontmatter":{},"headers":[{"level":2,"title":"Properties","slug":"properties"}],"relativePath":"guide/components/toggle-switch/properties.md"}'),l={name:"guide/components/toggle-switch/properties.md"},r=d('<h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">box-side</td><td style="text-align:center;">[&#39;start&#39;,&#39;end&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;start&#39;</td><td style="text-align:center;">box side</td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">disabled</td></tr><tr><td style="text-align:center;">foreground</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">text color</td></tr><tr><td style="text-align:center;">lang</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">i18n</td></tr><tr><td style="text-align:center;">model-value</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">v-model</td></tr><tr><td style="text-align:center;">off</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">off text</td></tr><tr><td style="text-align:center;">off-foreground</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">off circle and border color</td></tr><tr><td style="text-align:center;">on</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">on text</td></tr><tr><td style="text-align:center;">on-background</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">on background color</td></tr><tr><td style="text-align:center;">on-foreground</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">on circle color</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">[&#39;light&#39;,&#39;dark&#39;,&#39;global&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">theme</td></tr></tbody></table>',3),a=[r];function i(s,c,o,g,x,y){return n(),e("div",null,a)}var f=t(l,[["render",i]]);export{h as __pageData,f as default};
diff --git a/assets/guide_components_toggle-switch_properties.md.54984c3a.lean.js b/assets/guide_components_toggle-switch_properties.md.54984c3a.lean.js
deleted file mode 100644
index 9fbc994..0000000
--- a/assets/guide_components_toggle-switch_properties.md.54984c3a.lean.js
+++ /dev/null
@@ -1 +0,0 @@
-import{_ as t,c as e,o as n,a as d}from"./app.d60fa8c3.js";const h=JSON.parse('{"title":"Properties","description":"","frontmatter":{},"headers":[{"level":2,"title":"Properties","slug":"properties"}],"relativePath":"guide/components/toggle-switch/properties.md"}'),l={name:"guide/components/toggle-switch/properties.md"},r=d("",3),a=[r];function i(s,c,o,g,x,y){return n(),e("div",null,a)}var f=t(l,[["render",i]]);export{h as __pageData,f as default};
diff --git a/assets/guide_components_toggle-switch_properties.md.tFppK_IS.js b/assets/guide_components_toggle-switch_properties.md.tFppK_IS.js
new file mode 100644
index 0000000..d0ff951
--- /dev/null
+++ b/assets/guide_components_toggle-switch_properties.md.tFppK_IS.js
@@ -0,0 +1 @@
+import{_ as t,q as e,p as r,aq as a}from"./chunks/framework.DvIFzl91.js";const m=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/components/toggle-switch/properties.md","filePath":"guide/components/toggle-switch/properties.md"}'),o={name:"guide/components/toggle-switch/properties.md"},s=a('<h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-label="Permalink to &quot;Properties&quot;">​</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead></table>',3),n=[s];function i(c,p,l,h,_,d){return r(),e("div",null,n)}const u=t(o,[["render",i]]);export{m as __pageData,u as default};
diff --git a/assets/guide_components_toggle-switch_properties.md.tFppK_IS.lean.js b/assets/guide_components_toggle-switch_properties.md.tFppK_IS.lean.js
new file mode 100644
index 0000000..9eb68c0
--- /dev/null
+++ b/assets/guide_components_toggle-switch_properties.md.tFppK_IS.lean.js
@@ -0,0 +1 @@
+import{_ as t,q as e,p as r,aq as a}from"./chunks/framework.DvIFzl91.js";const m=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/components/toggle-switch/properties.md","filePath":"guide/components/toggle-switch/properties.md"}'),o={name:"guide/components/toggle-switch/properties.md"},s=a("",3),n=[s];function i(c,p,l,h,_,d){return r(),e("div",null,n)}const u=t(o,[["render",i]]);export{m as __pageData,u as default};
diff --git a/assets/guide_components_tree-view_index.md.CUrwan4q.js b/assets/guide_components_tree-view_index.md.CUrwan4q.js
new file mode 100644
index 0000000..330e9de
--- /dev/null
+++ b/assets/guide_components_tree-view_index.md.CUrwan4q.js
@@ -0,0 +1,103 @@
+import{_ as b,q as m,Y as a,z as e,u as g,H as r,aq as o,S as E,p as C,v as x,a3 as F}from"./chunks/framework.DvIFzl91.js";const v={data(){return{theme:0,backgroundColorHover:"rgba(0, 200, 247, 0.1)",backgroundColorActive:"rgba(0, 204, 153, 0.1)",foregroundColor:"rgba(145, 145, 235, 1)",files:[{label:"Img Folder",icon:"https://img.icons8.com/bubbles/2x/folder-invoices.png",loading:!0,children:[{label:"Folder",icon:"Folder",expanded:!0,children:[{label:"File",icon:"FileCode"},{label:"File",icon:"FileCode"}]},{label:"File",icon:"FileCode"},{label:"File",icon:"FileCode",disabled:!0},{label:"No Drop Inside",icon:"Error",dropInside:!1}]},{label:"File",icon:"FileCode"},{label:"Cascade",icon:"https://img.icons8.com/bubbles/2x/folder-invoices.png",children:[{label:"Cascade2",icon:"Folder",children:[{label:"Cascade3",icon:"FileCode",children:[]},{label:"File",icon:"FileCode",disabled:!0}]}]}]}},computed:{$theme(){return this.theme?"dark":"light"}},mounted(){},methods:{alert(l){alert(l)},click(l){console.log(l)},addChildren(){let l=this.files[0].children[0],i=[];for(let k=0;k<20;++k)i.push(Object.assign({},l.children[0]));l.children=i},expand(){let l=this.files[0].children[0];l.expanded=!l.expanded},dropItem(l){let{root:i,drop:k,dropParent:y,drag:s,dragParent:t,mode:c}=l;if(c==="enter"){k.children||(k.children=[]),k.children.push(s);let p=t?t.children:i;p.splice(p.indexOf(s),1)}else{let p=y?y.children:i;const h=p.indexOf(k);p.splice(h,0,s);let d=t?t.children:i;d.splice(d.indexOf(s),1)}}}},I=JSON.parse('{"title":"TreeView","description":"","frontmatter":{"page":true,"title":"TreeView"},"headers":[],"relativePath":"guide/components/tree-view/index.md","filePath":"guide/components/tree-view/index.md"}'),B=r("h3",{id:"treeview-demo",tabindex:"-1"},[g("TreeView-DEMO "),r("a",{class:"header-anchor",href:"#treeview-demo","aria-label":'Permalink to "TreeView-DEMO"'},"​")],-1),f=r("hr",null,null,-1),_=o(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TreeView</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">files</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">200</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">viewStyle</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">backgroundColor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;transparent&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;transparent&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TreeView</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="treeview-draggable" tabindex="-1">TreeView Draggable <a class="header-anchor" href="#treeview-draggable" aria-label="Permalink to &quot;TreeView Draggable&quot;">​</a></h3><hr>`,3),q=o(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TreeView</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">files</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">draggable</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> @</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">click</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">click</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> @</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">drop-item</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">dropItem</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TreeView</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>默认的修改项目顺序的示例, 其中<code>dropParent</code>和<code>dragParent</code>在根下为<code>null</code></p><div class="language-javascript vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">dropItem</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (event) {</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">    let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { root, drop, dropParent, drag, dragParent, mode } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> event;</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">    if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (mode </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">===</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;enter&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">        if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">!</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">drop.children)</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            drop.children </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [];</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        drop.children.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">push</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(drag);</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">        let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> dragParentChildren </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> dragParent </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> dragParent.children </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> root;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        dragParentChildren.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">splice</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(dragParentChildren.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">indexOf</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(drag), </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">else</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">        let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> dropParentChildren </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> dropParent </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> dropParent.children </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> root;</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">        const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> index</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> dropParentChildren.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">indexOf</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(drop);</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        dropParentChildren.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">splice</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(index, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, drag);</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">        let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> dragParentChildren </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> dragParent </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> dragParent.children </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> root;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        dragParentChildren.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">splice</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(dragParentChildren.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">indexOf</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(drag), </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><h3 id="treeview-checkable" tabindex="-1">TreeView Checkable <a class="header-anchor" href="#treeview-checkable" aria-label="Permalink to &quot;TreeView Checkable&quot;">​</a></h3><hr>`,5),A=o(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TreeView</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">files</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">checkable</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> expandedIconPosition</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;right&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> @</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">click</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">click</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TreeView</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="slot" tabindex="-1">Slot <a class="header-anchor" href="#slot" aria-label="Permalink to &quot;Slot&quot;">​</a></h3>`,2),w=o(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TreeView</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">files</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">200</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;template v-slot:default=&quot;prop&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    {{prop.item.label}}</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TreeView</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h3 id="treeview-customize-and-draggable" tabindex="-1">TreeView Customize and Draggable <a class="header-anchor" href="#treeview-customize-and-draggable" aria-label="Permalink to &quot;TreeView Customize and Draggable&quot;">​</a></h3><hr><p>backgroundColorHover:</p>`,4),V=r("p",null,"backgroundColorActive:",-1),D=o(`<div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TreeView</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">$theme</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">files</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">checkable</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  @</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">click</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">click</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">backgroundColorHover</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">backgroundColorHover</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">backgroundColorActive</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">backgroundColorActive</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  leftIconForeground</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;black&quot;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">foreground</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">foregroundColor</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">draggable</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  expandClickMode</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;normal&quot;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">10</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TreeView</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">value</td><td style="text-align:center;">Array</td><td style="text-align:center;">Yes</td><td style="text-align:center;">[]</td><td style="text-align:center;">数据，详见data</td></tr><tr><td style="text-align:center;">draggable</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否可拖动</td></tr><tr><td style="text-align:center;">checkable</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否可选</td></tr><tr><td style="text-align:center;">space</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">20</td><td style="text-align:center;">树形父与子间的间距(px)</td></tr><tr><td style="text-align:center;">foreground</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">rgba(0, 90, 158, 1)</td><td style="text-align:center;">前景色</td></tr><tr><td style="text-align:center;">expandedIcon</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">ChevronDownSmall</td><td style="text-align:center;">扩展后的箭头</td></tr><tr><td style="text-align:center;">unexpandedIcon</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">ChevronRightSmall</td><td style="text-align:center;">未扩展的箭头</td></tr><tr><td style="text-align:center;">backgroundColorHover</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">子项Hover的颜色</td></tr><tr><td style="text-align:center;">backgroundColorActive</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">子项激活的颜色</td></tr><tr><td style="text-align:center;">itemHeight</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">30</td><td style="text-align:center;">子项高度</td></tr><tr><td style="text-align:center;">showLoading</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">加载时是否显示进度条</td></tr><tr><td style="text-align:center;">expandedIconPosition</td><td style="text-align:center;">[&#39;left&#39;,&#39;right&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;left&#39;</td><td style="text-align:center;">扩展箭头位置</td></tr><tr><td style="text-align:center;">expandClickMode</td><td style="text-align:center;">[&#39;icon&#39;,&#39;normal&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;normal&#39;</td><td style="text-align:center;">点击展开的方式</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">[&#39;system&#39;,&#39;dark&#39;,&#39;light&#39;,&#39;custom&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;system&#39;</td><td style="text-align:center;">主题色</td></tr></tbody></table><h3 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to &quot;Events&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">事件名(Name)</th><th style="text-align:center;">参数类型(args)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">click</td><td style="text-align:center;">item</td><td style="text-align:center;">当点击时触发，第一个参数为点击的item</td></tr><tr><td style="text-align:center;">drop-item</td><td style="text-align:center;">{root, drop, dropParent, drag, dragParent, mode}</td><td style="text-align:center;">项目间拖动放置回调函数</td></tr><tr><td style="text-align:center;">item-drag-over</td><td style="text-align:center;">{root, drop, dropParent}</td><td style="text-align:center;">当前项被放置进入</td></tr><tr><td style="text-align:center;">item-drag-leave</td><td style="text-align:center;">{root, drop, dropParent}</td><td style="text-align:center;">当前项被放置离开</td></tr><tr><td style="text-align:center;">item-drop</td><td style="text-align:center;">{root, drop, dropParent}</td><td style="text-align:center;">当前项被放置</td></tr></tbody></table><h3 id="slots" tabindex="-1">Slots <a class="header-anchor" href="#slots" aria-label="Permalink to &quot;Slots&quot;">​</a></h3><hr><ol><li>TreeItem</li></ol><p>默认以value中每一项的属性name作为默认显示, 包含以下可选属性</p><ul><li>item: 当前项</li><li>deep: 当前深度</li></ul><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  {{x.item.label}}</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="data" tabindex="-1">Data <a class="header-anchor" href="#data" aria-label="Permalink to &quot;Data&quot;">​</a></h3><hr><ol><li>value</li></ol><p>其中<code>icon</code>表示该项图标, 支持引入图像, <code>expanded</code>表示是否展开, <code>selected</code>表示是否选中, <code>loading</code>表示该项是否在加载, <code>dropInside</code>表示是否允许拖动放置到该项内部, <code>show</code>表示是否显示该项, <code>children</code>表示子项</p><p>若想在外部控制<code>expanded</code>和<code>selected</code>, 需在传入数据前定义它们</p><div class="language-javascript vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">value </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [{label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, disabled: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, children: [], expanded: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, selected: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, loading: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, dropInside: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, show: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}]</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Img Folder&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;https://img.icons8.com/bubbles/2x/folder-invoices.png&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        children: [</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Folder&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Folder&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                expanded: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                children: [</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                    {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                        label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;File&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                        icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;FileCode&#39;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                    },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                    {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                        label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;File&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                        icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;FileCode&#39;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                    }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                ]</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;File&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;FileCode&#39;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;File&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;FileCode&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                disabled: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;No Drop Inside&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Error&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                dropInside: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        ]</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;File&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;FileCode&#39;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Cascade&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;https://img.icons8.com/bubbles/2x/folder-invoices.png&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        children: [</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Cascade2&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Folder&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                children: [</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                    {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                        label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Cascade3&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                        icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;FileCode&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                        children: [</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                        ]</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                    },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                    {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                        label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;File&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                        icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;FileCode&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                        disabled: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                    }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                ]</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        ]</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br></div></div><p><strong>特别地</strong> 1.2.31版本后支持采用函数式字段, 其中支持的字段包括<code>label</code>, <code>icon</code>, <code>disabled</code>, <code>loading</code>, <code>dropInside</code>, <code>show</code></p>`,20);function P(l,i,k,y,s,t){const c=E("fv-button"),p=E("fv-TreeView"),h=E("ClientOnly"),d=E("fv-colorPicker"),u=E("fv-callout");return C(),m("div",null,[B,f,a(h,null,{default:e(()=>[a(c,{style:{width:"250px",margin:"5px 0px"},onClick:t.addChildren},{default:e(()=>[g("Add Child for Img Folder/Folder")]),_:1},8,["onClick"]),a(c,{style:{width:"250px",margin:"5px 0px"},onClick:t.expand},{default:e(()=>[g("Expand Img Folder/Folder")]),_:1},8,["onClick"]),a(p,{modelValue:s.files,"onUpdate:modelValue":i[0]||(i[0]=n=>s.files=n),style:{width:"200px"},viewStyle:{backgroundColor:"transparent"},background:"transparent"},null,8,["modelValue"])]),_:1}),_,a(h,null,{default:e(()=>[a(p,{modelValue:s.files,"onUpdate:modelValue":i[1]||(i[1]=n=>s.files=n),draggable:!0,onClick:t.click,onDropItem:t.dropItem},null,8,["modelValue","onClick","onDropItem"])]),_:1}),q,a(h,null,{default:e(()=>[a(p,{modelValue:s.files,"onUpdate:modelValue":i[2]||(i[2]=n=>s.files=n),checkable:!0,expandedIconPosition:"right",onClick:t.click},null,8,["modelValue","onClick"])]),_:1}),A,a(h,null,{default:e(()=>[a(p,{modelValue:s.files,"onUpdate:modelValue":i[3]||(i[3]=n=>s.files=n),style:{width:"200px"}},{default:e(n=>[g(x(n.item.label),1)]),_:1},8,["modelValue"])]),_:1}),w,a(h,null,{default:e(()=>[a(u,null,{default:e(()=>[r("div",{style:F([{width:"20px",height:"20px",backgroundColor:s.backgroundColorHover},{border:"2px solid rgba(200, 200, 200, 0.3)","border-radius":"6px"}])},null,4),r("main",null,[a(d,{modelValue:s.backgroundColorHover,"onUpdate:modelValue":i[4]||(i[4]=n=>s.backgroundColorHover=n),style:{width:"500px"}},null,8,["modelValue"])])]),_:1})]),_:1}),V,a(h,null,{default:e(()=>[a(u,null,{default:e(()=>[r("div",{style:F([{width:"20px",height:"20px",backgroundColor:s.backgroundColorActive},{border:"2px solid rgba(200, 200, 200, 0.3)","border-radius":"6px"}])},null,4),r("main",null,[a(d,{modelValue:s.backgroundColorActive,"onUpdate:modelValue":i[5]||(i[5]=n=>s.backgroundColorActive=n),style:{width:"500px"}},null,8,["modelValue"])])]),_:1})]),_:1}),g(" foregroundColor: "),a(h,null,{default:e(()=>[a(u,null,{default:e(()=>[r("div",{style:F([{width:"20px",height:"20px",backgroundColor:s.foregroundColor},{border:"2px solid rgba(200, 200, 200, 0.3)","border-radius":"6px"}])},null,4),r("main",null,[a(d,{modelValue:s.foregroundColor,"onUpdate:modelValue":i[6]||(i[6]=n=>s.foregroundColor=n),style:{width:"500px"}},null,8,["modelValue"])])]),_:1})]),_:1}),a(h,null,{default:e(()=>[a(p,{theme:t.$theme,modelValue:s.files,"onUpdate:modelValue":i[7]||(i[7]=n=>s.files=n),checkable:!0,onClick:t.click,backgroundColorHover:s.backgroundColorHover,backgroundColorActive:s.backgroundColorActive,leftIconForeground:"black",foreground:s.foregroundColor,draggable:!0,expandClickMode:"normal",space:10},null,8,["theme","modelValue","onClick","backgroundColorHover","backgroundColorActive","foreground"])]),_:1}),D])}const S=b(v,[["render",P]]);export{I as __pageData,S as default};
diff --git a/assets/guide_components_tree-view_index.md.CUrwan4q.lean.js b/assets/guide_components_tree-view_index.md.CUrwan4q.lean.js
new file mode 100644
index 0000000..af1b065
--- /dev/null
+++ b/assets/guide_components_tree-view_index.md.CUrwan4q.lean.js
@@ -0,0 +1 @@
+import{_ as b,q as m,Y as a,z as e,u as g,H as r,aq as o,S as E,p as C,v as x,a3 as F}from"./chunks/framework.DvIFzl91.js";const v={data(){return{theme:0,backgroundColorHover:"rgba(0, 200, 247, 0.1)",backgroundColorActive:"rgba(0, 204, 153, 0.1)",foregroundColor:"rgba(145, 145, 235, 1)",files:[{label:"Img Folder",icon:"https://img.icons8.com/bubbles/2x/folder-invoices.png",loading:!0,children:[{label:"Folder",icon:"Folder",expanded:!0,children:[{label:"File",icon:"FileCode"},{label:"File",icon:"FileCode"}]},{label:"File",icon:"FileCode"},{label:"File",icon:"FileCode",disabled:!0},{label:"No Drop Inside",icon:"Error",dropInside:!1}]},{label:"File",icon:"FileCode"},{label:"Cascade",icon:"https://img.icons8.com/bubbles/2x/folder-invoices.png",children:[{label:"Cascade2",icon:"Folder",children:[{label:"Cascade3",icon:"FileCode",children:[]},{label:"File",icon:"FileCode",disabled:!0}]}]}]}},computed:{$theme(){return this.theme?"dark":"light"}},mounted(){},methods:{alert(l){alert(l)},click(l){console.log(l)},addChildren(){let l=this.files[0].children[0],i=[];for(let k=0;k<20;++k)i.push(Object.assign({},l.children[0]));l.children=i},expand(){let l=this.files[0].children[0];l.expanded=!l.expanded},dropItem(l){let{root:i,drop:k,dropParent:y,drag:s,dragParent:t,mode:c}=l;if(c==="enter"){k.children||(k.children=[]),k.children.push(s);let p=t?t.children:i;p.splice(p.indexOf(s),1)}else{let p=y?y.children:i;const h=p.indexOf(k);p.splice(h,0,s);let d=t?t.children:i;d.splice(d.indexOf(s),1)}}}},I=JSON.parse('{"title":"TreeView","description":"","frontmatter":{"page":true,"title":"TreeView"},"headers":[],"relativePath":"guide/components/tree-view/index.md","filePath":"guide/components/tree-view/index.md"}'),B=r("h3",{id:"treeview-demo",tabindex:"-1"},[g("TreeView-DEMO "),r("a",{class:"header-anchor",href:"#treeview-demo","aria-label":'Permalink to "TreeView-DEMO"'},"​")],-1),f=r("hr",null,null,-1),_=o("",3),q=o("",5),A=o("",2),w=o("",4),V=r("p",null,"backgroundColorActive:",-1),D=o("",20);function P(l,i,k,y,s,t){const c=E("fv-button"),p=E("fv-TreeView"),h=E("ClientOnly"),d=E("fv-colorPicker"),u=E("fv-callout");return C(),m("div",null,[B,f,a(h,null,{default:e(()=>[a(c,{style:{width:"250px",margin:"5px 0px"},onClick:t.addChildren},{default:e(()=>[g("Add Child for Img Folder/Folder")]),_:1},8,["onClick"]),a(c,{style:{width:"250px",margin:"5px 0px"},onClick:t.expand},{default:e(()=>[g("Expand Img Folder/Folder")]),_:1},8,["onClick"]),a(p,{modelValue:s.files,"onUpdate:modelValue":i[0]||(i[0]=n=>s.files=n),style:{width:"200px"},viewStyle:{backgroundColor:"transparent"},background:"transparent"},null,8,["modelValue"])]),_:1}),_,a(h,null,{default:e(()=>[a(p,{modelValue:s.files,"onUpdate:modelValue":i[1]||(i[1]=n=>s.files=n),draggable:!0,onClick:t.click,onDropItem:t.dropItem},null,8,["modelValue","onClick","onDropItem"])]),_:1}),q,a(h,null,{default:e(()=>[a(p,{modelValue:s.files,"onUpdate:modelValue":i[2]||(i[2]=n=>s.files=n),checkable:!0,expandedIconPosition:"right",onClick:t.click},null,8,["modelValue","onClick"])]),_:1}),A,a(h,null,{default:e(()=>[a(p,{modelValue:s.files,"onUpdate:modelValue":i[3]||(i[3]=n=>s.files=n),style:{width:"200px"}},{default:e(n=>[g(x(n.item.label),1)]),_:1},8,["modelValue"])]),_:1}),w,a(h,null,{default:e(()=>[a(u,null,{default:e(()=>[r("div",{style:F([{width:"20px",height:"20px",backgroundColor:s.backgroundColorHover},{border:"2px solid rgba(200, 200, 200, 0.3)","border-radius":"6px"}])},null,4),r("main",null,[a(d,{modelValue:s.backgroundColorHover,"onUpdate:modelValue":i[4]||(i[4]=n=>s.backgroundColorHover=n),style:{width:"500px"}},null,8,["modelValue"])])]),_:1})]),_:1}),V,a(h,null,{default:e(()=>[a(u,null,{default:e(()=>[r("div",{style:F([{width:"20px",height:"20px",backgroundColor:s.backgroundColorActive},{border:"2px solid rgba(200, 200, 200, 0.3)","border-radius":"6px"}])},null,4),r("main",null,[a(d,{modelValue:s.backgroundColorActive,"onUpdate:modelValue":i[5]||(i[5]=n=>s.backgroundColorActive=n),style:{width:"500px"}},null,8,["modelValue"])])]),_:1})]),_:1}),g(" foregroundColor: "),a(h,null,{default:e(()=>[a(u,null,{default:e(()=>[r("div",{style:F([{width:"20px",height:"20px",backgroundColor:s.foregroundColor},{border:"2px solid rgba(200, 200, 200, 0.3)","border-radius":"6px"}])},null,4),r("main",null,[a(d,{modelValue:s.foregroundColor,"onUpdate:modelValue":i[6]||(i[6]=n=>s.foregroundColor=n),style:{width:"500px"}},null,8,["modelValue"])])]),_:1})]),_:1}),a(h,null,{default:e(()=>[a(p,{theme:t.$theme,modelValue:s.files,"onUpdate:modelValue":i[7]||(i[7]=n=>s.files=n),checkable:!0,onClick:t.click,backgroundColorHover:s.backgroundColorHover,backgroundColorActive:s.backgroundColorActive,leftIconForeground:"black",foreground:s.foregroundColor,draggable:!0,expandClickMode:"normal",space:10},null,8,["theme","modelValue","onClick","backgroundColorHover","backgroundColorActive","foreground"])]),_:1}),D])}const S=b(v,[["render",P]]);export{I as __pageData,S as default};
diff --git a/assets/guide_components_verify-box_emits.md.DT17Iazx.js b/assets/guide_components_verify-box_emits.md.DT17Iazx.js
new file mode 100644
index 0000000..90b38b0
--- /dev/null
+++ b/assets/guide_components_verify-box_emits.md.DT17Iazx.js
@@ -0,0 +1 @@
+import{_ as t,q as e,p as a,aq as s}from"./chunks/framework.DvIFzl91.js";const f=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/components/verify-box/emits.md","filePath":"guide/components/verify-box/emits.md"}'),i={name:"guide/components/verify-box/emits.md"},n=s('<h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-label="Permalink to &quot;Emits&quot;">​</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead></table>',3),o=[n];function r(_,c,m,d,l,h){return a(),e("div",null,o)}const u=t(i,[["render",r]]);export{f as __pageData,u as default};
diff --git a/assets/guide_components_verify-box_emits.md.DT17Iazx.lean.js b/assets/guide_components_verify-box_emits.md.DT17Iazx.lean.js
new file mode 100644
index 0000000..e855a21
--- /dev/null
+++ b/assets/guide_components_verify-box_emits.md.DT17Iazx.lean.js
@@ -0,0 +1 @@
+import{_ as t,q as e,p as a,aq as s}from"./chunks/framework.DvIFzl91.js";const f=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/components/verify-box/emits.md","filePath":"guide/components/verify-box/emits.md"}'),i={name:"guide/components/verify-box/emits.md"},n=s("",3),o=[n];function r(_,c,m,d,l,h){return a(),e("div",null,o)}const u=t(i,[["render",r]]);export{f as __pageData,u as default};
diff --git a/assets/guide_components_verify-box_index.md.DwSB40wR.js b/assets/guide_components_verify-box_index.md.DwSB40wR.js
new file mode 100644
index 0000000..5c21885
--- /dev/null
+++ b/assets/guide_components_verify-box_index.md.DwSB40wR.js
@@ -0,0 +1,4 @@
+import{_ as o,q as c,Y as e,z as a,H as t,u as d,aq as g,S as h,p as k,v as y}from"./chunks/framework.DvIFzl91.js";const p={data(){return{value:""}}},T=JSON.parse('{"title":"VerifyBox","description":"","frontmatter":{"page":true,"title":"VerifyBox"},"headers":[],"relativePath":"guide/components/verify-box/index.md","filePath":"guide/components/verify-box/index.md"}'),E=t("h3",{id:"verifybox-demo",tabindex:"-1"},[d("VerifyBox-DEMO "),t("a",{class:"header-anchor",href:"#verifybox-demo","aria-label":'Permalink to "VerifyBox-DEMO"'},"​")],-1),x=t("hr",null,null,-1),u=t("p",null,"Standard",-1),b=t("div",{class:"language-vue vp-adaptive-theme line-numbers-mode"},[t("button",{title:"Copy Code",class:"copy"}),t("span",{class:"lang"},"vue"),t("pre",{class:"shiki shiki-themes github-light github-dark vp-code"},[t("code",null,[t("span",{class:"line"},[t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"<"),t("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-VerifyBox"),t("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}}," v-model"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"value"),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")]),d(`
+`),t("span",{class:"line"},[t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"</"),t("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-VerifyBox"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")])])]),t("div",{class:"line-numbers-wrapper","aria-hidden":"true"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br")])],-1),m=t("p",null,"With Highlight",-1),v=t("div",{class:"language-vue vp-adaptive-theme line-numbers-mode"},[t("button",{title:"Copy Code",class:"copy"}),t("span",{class:"lang"},"vue"),t("pre",{class:"shiki shiki-themes github-light github-dark vp-code"},[t("code",null,[t("span",{class:"line"},[t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"<"),t("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-VerifyBox"),t("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}}," v-model"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"value"),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),t("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}}," focusBorderColor"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"rgba(0, 153, 204, 0.6)"'),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}}," :"),t("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}},"border-width"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),t("span",{style:{"--shiki-light":"#005CC5","--shiki-dark":"#79B8FF"}},"2"),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")]),d(`
+`),t("span",{class:"line"},[t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"</"),t("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-VerifyBox"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")])])]),t("div",{class:"line-numbers-wrapper","aria-hidden":"true"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br")])],-1),f=t("p",null,"Reveal Border",-1),F=t("div",{class:"language-vue vp-adaptive-theme line-numbers-mode"},[t("button",{title:"Copy Code",class:"copy"}),t("span",{class:"lang"},"vue"),t("pre",{class:"shiki shiki-themes github-light github-dark vp-code"},[t("code",null,[t("span",{class:"line"},[t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"<"),t("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-VerifyBox"),t("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}}," v-model"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"value"),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}}," :"),t("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}},"reveal-border"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),t("span",{style:{"--shiki-light":"#005CC5","--shiki-dark":"#79B8FF"}},"true"),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}}," :"),t("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}},"border-width"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),t("span",{style:{"--shiki-light":"#005CC5","--shiki-dark":"#79B8FF"}},"2"),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")]),d(`
+`),t("span",{class:"line"},[t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"</"),t("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-VerifyBox"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")])])]),t("div",{class:"line-numbers-wrapper","aria-hidden":"true"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br")])],-1),B=t("h3",{id:"verifybox-disabled",tabindex:"-1"},[d("VerifyBox-Disabled "),t("a",{class:"header-anchor",href:"#verifybox-disabled","aria-label":'Permalink to "VerifyBox-Disabled"'},"​")],-1),_=t("hr",null,null,-1),C=t("ol",null,[t("li",null,"Standard")],-1),V=t("div",{class:"language-vue vp-adaptive-theme line-numbers-mode"},[t("button",{title:"Copy Code",class:"copy"}),t("span",{class:"lang"},"vue"),t("pre",{class:"shiki shiki-themes github-light github-dark vp-code"},[t("code",null,[t("span",{class:"line"},[t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"<"),t("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-VerifyBox"),t("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}}," disabled"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"></"),t("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-VerifyBox"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")])])]),t("div",{class:"line-numbers-wrapper","aria-hidden":"true"},[t("span",{class:"line-number"},"1"),t("br")])],-1),N=g('<h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">value</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;"></td><td style="text-align:center;">Using v-model binding input value</td></tr><tr><td style="text-align:center;">length</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">验证码长度</td></tr><tr><td style="text-align:center;">inputmode</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">numeric</td><td style="text-align:center;">输入模式, 可选值为<code>numeric</code>, <code>tel</code>, <code>text</code>, <code>decimal</code>, <code>email</code>, <code>url</code></td></tr><tr><td style="text-align:center;">underline</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否开启Underline风格的VerifyBox</td></tr><tr><td style="text-align:center;">background</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">borderWidth</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">borderColor</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">focusBorderColor</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">fontSize</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">18</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">fontWeight</td><td style="text-align:center;">[string,number]</td><td style="text-align:center;">No</td><td style="text-align:center;">bold</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">foreground</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">borderRadius</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">3</td><td style="text-align:center;">VerifyBox圆角大小, 启用revealBorder时将失效</td></tr><tr><td style="text-align:center;">isBoxShadow</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">开启<code>VerifyBox</code>阴影</td></tr><tr><td style="text-align:center;">revealBorder</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">system</td><td style="text-align:center;">主题样式, 包含<code>light</code>, <code>dark</code>, <code>system</code>, <code>custom</code>几种样式</td></tr></tbody></table><h3 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to &quot;Events&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">事件名(Name)</th><th style="text-align:center;">参数类型(args)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">confirm</td><td style="text-align:center;">string</td><td style="text-align:center;">完成输入并返回结果</td></tr></tbody></table>',6);function A(D,s,S,w,i,P){const r=h("fv-VerifyBox"),l=h("ClientOnly");return k(),c("div",null,[E,x,e(l,null,{default:a(()=>[u,e(l,null,{default:a(()=>[e(r,{modelValue:i.value,"onUpdate:modelValue":s[0]||(s[0]=n=>i.value=n)},null,8,["modelValue"])]),_:1}),b,t("p",null,y(i.value),1),m,e(l,null,{default:a(()=>[e(r,{modelValue:i.value,"onUpdate:modelValue":s[1]||(s[1]=n=>i.value=n),focusBorderColor:"rgba(0, 153, 204, 0.6)","border-width":2},null,8,["modelValue"])]),_:1}),v,f,e(l,null,{default:a(()=>[e(r,{modelValue:i.value,"onUpdate:modelValue":s[2]||(s[2]=n=>i.value=n),"reveal-border":!0,"border-width":2},null,8,["modelValue"])]),_:1}),F,B,_,C,e(l,null,{default:a(()=>[e(r,{disabled:""})]),_:1}),V]),_:1}),N])}const O=o(p,[["render",A]]);export{T as __pageData,O as default};
diff --git a/assets/guide_components_verify-box_index.md.DwSB40wR.lean.js b/assets/guide_components_verify-box_index.md.DwSB40wR.lean.js
new file mode 100644
index 0000000..b8fd23c
--- /dev/null
+++ b/assets/guide_components_verify-box_index.md.DwSB40wR.lean.js
@@ -0,0 +1,4 @@
+import{_ as o,q as c,Y as e,z as a,H as t,u as d,aq as g,S as h,p as k,v as y}from"./chunks/framework.DvIFzl91.js";const p={data(){return{value:""}}},T=JSON.parse('{"title":"VerifyBox","description":"","frontmatter":{"page":true,"title":"VerifyBox"},"headers":[],"relativePath":"guide/components/verify-box/index.md","filePath":"guide/components/verify-box/index.md"}'),E=t("h3",{id:"verifybox-demo",tabindex:"-1"},[d("VerifyBox-DEMO "),t("a",{class:"header-anchor",href:"#verifybox-demo","aria-label":'Permalink to "VerifyBox-DEMO"'},"​")],-1),x=t("hr",null,null,-1),u=t("p",null,"Standard",-1),b=t("div",{class:"language-vue vp-adaptive-theme line-numbers-mode"},[t("button",{title:"Copy Code",class:"copy"}),t("span",{class:"lang"},"vue"),t("pre",{class:"shiki shiki-themes github-light github-dark vp-code"},[t("code",null,[t("span",{class:"line"},[t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"<"),t("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-VerifyBox"),t("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}}," v-model"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"value"),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")]),d(`
+`),t("span",{class:"line"},[t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"</"),t("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-VerifyBox"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")])])]),t("div",{class:"line-numbers-wrapper","aria-hidden":"true"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br")])],-1),m=t("p",null,"With Highlight",-1),v=t("div",{class:"language-vue vp-adaptive-theme line-numbers-mode"},[t("button",{title:"Copy Code",class:"copy"}),t("span",{class:"lang"},"vue"),t("pre",{class:"shiki shiki-themes github-light github-dark vp-code"},[t("code",null,[t("span",{class:"line"},[t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"<"),t("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-VerifyBox"),t("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}}," v-model"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"value"),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),t("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}}," focusBorderColor"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"rgba(0, 153, 204, 0.6)"'),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}}," :"),t("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}},"border-width"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),t("span",{style:{"--shiki-light":"#005CC5","--shiki-dark":"#79B8FF"}},"2"),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")]),d(`
+`),t("span",{class:"line"},[t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"</"),t("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-VerifyBox"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")])])]),t("div",{class:"line-numbers-wrapper","aria-hidden":"true"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br")])],-1),f=t("p",null,"Reveal Border",-1),F=t("div",{class:"language-vue vp-adaptive-theme line-numbers-mode"},[t("button",{title:"Copy Code",class:"copy"}),t("span",{class:"lang"},"vue"),t("pre",{class:"shiki shiki-themes github-light github-dark vp-code"},[t("code",null,[t("span",{class:"line"},[t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"<"),t("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-VerifyBox"),t("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}}," v-model"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"value"),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}}," :"),t("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}},"reveal-border"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),t("span",{style:{"--shiki-light":"#005CC5","--shiki-dark":"#79B8FF"}},"true"),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}}," :"),t("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}},"border-width"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),t("span",{style:{"--shiki-light":"#005CC5","--shiki-dark":"#79B8FF"}},"2"),t("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")]),d(`
+`),t("span",{class:"line"},[t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"</"),t("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-VerifyBox"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")])])]),t("div",{class:"line-numbers-wrapper","aria-hidden":"true"},[t("span",{class:"line-number"},"1"),t("br"),t("span",{class:"line-number"},"2"),t("br")])],-1),B=t("h3",{id:"verifybox-disabled",tabindex:"-1"},[d("VerifyBox-Disabled "),t("a",{class:"header-anchor",href:"#verifybox-disabled","aria-label":'Permalink to "VerifyBox-Disabled"'},"​")],-1),_=t("hr",null,null,-1),C=t("ol",null,[t("li",null,"Standard")],-1),V=t("div",{class:"language-vue vp-adaptive-theme line-numbers-mode"},[t("button",{title:"Copy Code",class:"copy"}),t("span",{class:"lang"},"vue"),t("pre",{class:"shiki shiki-themes github-light github-dark vp-code"},[t("code",null,[t("span",{class:"line"},[t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"<"),t("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-VerifyBox"),t("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}}," disabled"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"></"),t("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-VerifyBox"),t("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")])])]),t("div",{class:"line-numbers-wrapper","aria-hidden":"true"},[t("span",{class:"line-number"},"1"),t("br")])],-1),N=g("",6);function A(D,s,S,w,i,P){const r=h("fv-VerifyBox"),l=h("ClientOnly");return k(),c("div",null,[E,x,e(l,null,{default:a(()=>[u,e(l,null,{default:a(()=>[e(r,{modelValue:i.value,"onUpdate:modelValue":s[0]||(s[0]=n=>i.value=n)},null,8,["modelValue"])]),_:1}),b,t("p",null,y(i.value),1),m,e(l,null,{default:a(()=>[e(r,{modelValue:i.value,"onUpdate:modelValue":s[1]||(s[1]=n=>i.value=n),focusBorderColor:"rgba(0, 153, 204, 0.6)","border-width":2},null,8,["modelValue"])]),_:1}),v,f,e(l,null,{default:a(()=>[e(r,{modelValue:i.value,"onUpdate:modelValue":s[2]||(s[2]=n=>i.value=n),"reveal-border":!0,"border-width":2},null,8,["modelValue"])]),_:1}),F,B,_,C,e(l,null,{default:a(()=>[e(r,{disabled:""})]),_:1}),V]),_:1}),N])}const O=o(p,[["render",A]]);export{T as __pageData,O as default};
diff --git a/assets/guide_components_verify-box_properties.md.CW6W8fFf.js b/assets/guide_components_verify-box_properties.md.CW6W8fFf.js
new file mode 100644
index 0000000..8af5226
--- /dev/null
+++ b/assets/guide_components_verify-box_properties.md.CW6W8fFf.js
@@ -0,0 +1 @@
+import{_ as e,q as t,p as r,aq as a}from"./chunks/framework.DvIFzl91.js";const f=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/components/verify-box/properties.md","filePath":"guide/components/verify-box/properties.md"}'),o={name:"guide/components/verify-box/properties.md"},s=a('<h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-label="Permalink to &quot;Properties&quot;">​</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead></table>',3),n=[s];function i(p,c,_,l,h,d){return r(),t("div",null,n)}const u=e(o,[["render",i]]);export{f as __pageData,u as default};
diff --git a/assets/guide_components_verify-box_properties.md.CW6W8fFf.lean.js b/assets/guide_components_verify-box_properties.md.CW6W8fFf.lean.js
new file mode 100644
index 0000000..86ef3e1
--- /dev/null
+++ b/assets/guide_components_verify-box_properties.md.CW6W8fFf.lean.js
@@ -0,0 +1 @@
+import{_ as e,q as t,p as r,aq as a}from"./chunks/framework.DvIFzl91.js";const f=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/components/verify-box/properties.md","filePath":"guide/components/verify-box/properties.md"}'),o={name:"guide/components/verify-box/properties.md"},s=a("",3),n=[s];function i(p,c,_,l,h,d){return r(),t("div",null,n)}const u=e(o,[["render",i]]);export{f as __pageData,u as default};
diff --git a/assets/guide_components_web-window_index.md.Bxc8vEeI.js b/assets/guide_components_web-window_index.md.Bxc8vEeI.js
new file mode 100644
index 0000000..5f31b62
--- /dev/null
+++ b/assets/guide_components_web-window_index.md.Bxc8vEeI.js
@@ -0,0 +1,12 @@
+import{_ as k,q as p,Y as n,z as a,H as e,u as s,aq as c,S as h,p as g}from"./chunks/framework.DvIFzl91.js";const E={data(){return{theme:!1,show:!0,showResize:!1,showAcrylic:!1}}},D=JSON.parse('{"title":"WebWindow","description":"","frontmatter":{"page":true,"title":"WebWindow"},"headers":[],"relativePath":"guide/components/web-window/index.md","filePath":"guide/components/web-window/index.md"}'),y=e("h3",{id:"webwindow-demo",tabindex:"-1"},[s("WebWindow-DEMO "),e("a",{class:"header-anchor",href:"#webwindow-demo","aria-label":'Permalink to "WebWindow-DEMO"'},"​")],-1),b=e("hr",null,null,-1),u=e("div",{style:{width:"100%",height:"auto",padding:"25px","box-sizing":"border-box"}},null,-1),m=e("div",{class:"language-vue vp-adaptive-theme line-numbers-mode"},[e("button",{title:"Copy Code",class:"copy"}),e("span",{class:"lang"},"vue"),e("pre",{class:"shiki shiki-themes github-light github-dark vp-code"},[e("code",null,[e("span",{class:"line"},[e("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"<"),e("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-WebWindow"),e("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")]),s(`
+`),e("span",{class:"line"},[e("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},'    <div style="width: 100%; height: auto; padding: 25px; box-sizing: border-box;">')]),s(`
+`),e("span",{class:"line"},[e("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"    </div>")]),s(`
+`),e("span",{class:"line"},[e("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"</"),e("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-WebWindow"),e("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")])])]),e("div",{class:"line-numbers-wrapper","aria-hidden":"true"},[e("span",{class:"line-number"},"1"),e("br"),e("span",{class:"line-number"},"2"),e("br"),e("span",{class:"line-number"},"3"),e("br"),e("span",{class:"line-number"},"4"),e("br")])],-1),w=e("h3",{id:"webwindow-resize",tabindex:"-1"},[s("WebWindow-Resize "),e("a",{class:"header-anchor",href:"#webwindow-resize","aria-label":'Permalink to "WebWindow-Resize"'},"​")],-1),x=e("div",{style:{width:"100%",height:"auto",padding:"25px","box-sizing":"border-box"}},null,-1),v=e("div",{class:"language-vue vp-adaptive-theme line-numbers-mode"},[e("button",{title:"Copy Code",class:"copy"}),e("span",{class:"lang"},"vue"),e("pre",{class:"shiki shiki-themes github-light github-dark vp-code"},[e("code",null,[e("span",{class:"line"},[e("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"<"),e("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-WebWindow"),e("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}}," :"),e("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}},"isResize"),e("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),e("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),e("span",{style:{"--shiki-light":"#005CC5","--shiki-dark":"#79B8FF"}},"true"),e("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),e("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")]),s(`
+`),e("span",{class:"line"},[e("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},'    <div style="width: 100%; height: auto; padding: 25px; box-sizing: border-box;">')]),s(`
+`),e("span",{class:"line"},[e("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"    </div>")]),s(`
+`),e("span",{class:"line"},[e("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"</"),e("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-WebWindow"),e("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")])])]),e("div",{class:"line-numbers-wrapper","aria-hidden":"true"},[e("span",{class:"line-number"},"1"),e("br"),e("span",{class:"line-number"},"2"),e("br"),e("span",{class:"line-number"},"3"),e("br"),e("span",{class:"line-number"},"4"),e("br")])],-1),f=e("h3",{id:"webwindow-acrylic-background",tabindex:"-1"},[s("WebWindow-Acrylic Background "),e("a",{class:"header-anchor",href:"#webwindow-acrylic-background","aria-label":'Permalink to "WebWindow-Acrylic Background"'},"​")],-1),_=e("div",{style:{width:"100%",height:"auto",padding:"25px","box-sizing":"border-box"}},null,-1),W=e("div",{class:"language-vue vp-adaptive-theme line-numbers-mode"},[e("button",{title:"Copy Code",class:"copy"}),e("span",{class:"lang"},"vue"),e("pre",{class:"shiki shiki-themes github-light github-dark vp-code"},[e("code",null,[e("span",{class:"line"},[e("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"<"),e("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-WebWindow"),e("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}}," :"),e("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}},"isAcrylic"),e("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),e("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),e("span",{style:{"--shiki-light":"#005CC5","--shiki-dark":"#79B8FF"}},"true"),e("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),e("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}}," style"),e("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),e("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),e("span",{style:{"--shiki-light":"#005CC5","--shiki-dark":"#79B8FF"}},"background"),e("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},": "),e("span",{style:{"--shiki-light":"#005CC5","--shiki-dark":"#79B8FF"}},"rgba"),e("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"("),e("span",{style:{"--shiki-light":"#005CC5","--shiki-dark":"#79B8FF"}},"255"),e("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},", "),e("span",{style:{"--shiki-light":"#005CC5","--shiki-dark":"#79B8FF"}},"255"),e("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},", "),e("span",{style:{"--shiki-light":"#005CC5","--shiki-dark":"#79B8FF"}},"255"),e("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},", "),e("span",{style:{"--shiki-light":"#005CC5","--shiki-dark":"#79B8FF"}},"0.6"),e("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},");"),e("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),e("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")]),s(`
+`),e("span",{class:"line"},[e("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},'    <div style="width: 100%; height: auto; padding: 25px; box-sizing: border-box;">')]),s(`
+`),e("span",{class:"line"},[e("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"    </div>")]),s(`
+`),e("span",{class:"line"},[e("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"</"),e("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-WebWindow"),e("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")])])]),e("div",{class:"line-numbers-wrapper","aria-hidden":"true"},[e("span",{class:"line-number"},"1"),e("br"),e("span",{class:"line-number"},"2"),e("br"),e("span",{class:"line-number"},"3"),e("br"),e("span",{class:"line-number"},"4"),e("br")])],-1),F=c(`<h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">value/v-model</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">true</td><td style="text-align:center;">开启或关闭WebWindow</td></tr><tr><td style="text-align:center;">title</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">WebWindow标题</td></tr><tr><td style="text-align:center;">left</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">0</td><td style="text-align:center;">WebWindow默认距离左边的距离</td></tr><tr><td style="text-align:center;">top</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">0</td><td style="text-align:center;">WebWindow默认距离顶部的距离</td></tr><tr><td style="text-align:center;">isResize</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否启用可变尺寸</td></tr><tr><td style="text-align:center;">isAcrylic</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否开启背景模糊</td></tr><tr><td style="text-align:center;">refreshPosition</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否在WebWindow打开时刷新位置</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">system</td><td style="text-align:center;">主题样式, 包含<code>light</code>, <code>dark</code>, <code>system</code>, <code>custom</code>几种样式</td></tr></tbody></table><h3 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to &quot;Events&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">事件名(Name)</th><th style="text-align:center;">参数类型(args)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">close</td><td style="text-align:center;"></td><td style="text-align:center;">WebWindow关闭时触发事件</td></tr></tbody></table><h3 id="slot" tabindex="-1">Slot <a class="header-anchor" href="#slot" aria-label="Permalink to &quot;Slot&quot;">​</a></h3><hr><ol><li>Default</li></ol><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-web-window</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;div&gt;&lt;/div&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-web-window</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div>`,10);function C(B,t,V,A,i,z){const d=h("fv-toggle-switch"),r=h("fv-WebWindow"),o=h("ClientOnly");return g(),p("div",null,[y,b,n(o,null,{default:a(()=>[n(d,{modelValue:i.show,"onUpdate:modelValue":t[0]||(t[0]=l=>i.show=l),on:"Show",off:"Hide"},null,8,["modelValue"]),n(r,{modelValue:i.show,"onUpdate:modelValue":t[1]||(t[1]=l=>i.show=l)},{default:a(()=>[u]),_:1},8,["modelValue"]),m,w,n(d,{modelValue:i.showResize,"onUpdate:modelValue":t[2]||(t[2]=l=>i.showResize=l),on:"Show",off:"Hide"},null,8,["modelValue"]),n(r,{modelValue:i.showResize,"onUpdate:modelValue":t[3]||(t[3]=l=>i.showResize=l),isResize:!0},{default:a(()=>[x]),_:1},8,["modelValue"]),v,f,n(d,{modelValue:i.showAcrylic,"onUpdate:modelValue":t[4]||(t[4]=l=>i.showAcrylic=l),on:"Show",off:"Hide"},null,8,["modelValue"]),n(r,{modelValue:i.showAcrylic,"onUpdate:modelValue":t[5]||(t[5]=l=>i.showAcrylic=l),isAcrylic:!0,style:{background:"rgba(255, 255, 255, 0.6)"}},{default:a(()=>[_]),_:1},8,["modelValue"]),W]),_:1}),F])}const P=k(E,[["render",C]]);export{D as __pageData,P as default};
diff --git a/assets/guide_components_web-window_index.md.Bxc8vEeI.lean.js b/assets/guide_components_web-window_index.md.Bxc8vEeI.lean.js
new file mode 100644
index 0000000..6a8f5ef
--- /dev/null
+++ b/assets/guide_components_web-window_index.md.Bxc8vEeI.lean.js
@@ -0,0 +1,10 @@
+import{_ as k,q as p,Y as n,z as a,H as e,u as s,aq as c,S as h,p as g}from"./chunks/framework.DvIFzl91.js";const E={data(){return{theme:!1,show:!0,showResize:!1,showAcrylic:!1}}},D=JSON.parse('{"title":"WebWindow","description":"","frontmatter":{"page":true,"title":"WebWindow"},"headers":[],"relativePath":"guide/components/web-window/index.md","filePath":"guide/components/web-window/index.md"}'),y=e("h3",{id:"webwindow-demo",tabindex:"-1"},[s("WebWindow-DEMO "),e("a",{class:"header-anchor",href:"#webwindow-demo","aria-label":'Permalink to "WebWindow-DEMO"'},"​")],-1),b=e("hr",null,null,-1),u=e("div",{style:{width:"100%",height:"auto",padding:"25px","box-sizing":"border-box"}},null,-1),m=e("div",{class:"language-vue vp-adaptive-theme line-numbers-mode"},[e("button",{title:"Copy Code",class:"copy"}),e("span",{class:"lang"},"vue"),e("pre",{class:"shiki shiki-themes github-light github-dark vp-code"},[e("code",null,[e("span",{class:"line"},[e("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"<"),e("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-WebWindow"),e("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")]),s(`
+`),e("span",{class:"line"},[e("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},'    <div style="width: 100%; height: auto; padding: 25px; box-sizing: border-box;">')]),s(`
+`),e("span",{class:"line"},[e("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"    </div>")]),s(`
+`),e("span",{class:"line"},[e("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"</"),e("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-WebWindow"),e("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")])])]),e("div",{class:"line-numbers-wrapper","aria-hidden":"true"},[e("span",{class:"line-number"},"1"),e("br"),e("span",{class:"line-number"},"2"),e("br"),e("span",{class:"line-number"},"3"),e("br"),e("span",{class:"line-number"},"4"),e("br")])],-1),w=e("h3",{id:"webwindow-resize",tabindex:"-1"},[s("WebWindow-Resize "),e("a",{class:"header-anchor",href:"#webwindow-resize","aria-label":'Permalink to "WebWindow-Resize"'},"​")],-1),x=e("div",{style:{width:"100%",height:"auto",padding:"25px","box-sizing":"border-box"}},null,-1),v=e("div",{class:"language-vue vp-adaptive-theme line-numbers-mode"},[e("button",{title:"Copy Code",class:"copy"}),e("span",{class:"lang"},"vue"),e("pre",{class:"shiki shiki-themes github-light github-dark vp-code"},[e("code",null,[e("span",{class:"line"},[e("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"<"),e("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-WebWindow"),e("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}}," :"),e("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}},"isResize"),e("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),e("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),e("span",{style:{"--shiki-light":"#005CC5","--shiki-dark":"#79B8FF"}},"true"),e("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),e("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")]),s(`
+`),e("span",{class:"line"},[e("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},'    <div style="width: 100%; height: auto; padding: 25px; box-sizing: border-box;">')]),s(`
+`),e("span",{class:"line"},[e("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"    </div>")]),s(`
+`),e("span",{class:"line"},[e("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"</"),e("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-WebWindow"),e("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")])])]),e("div",{class:"line-numbers-wrapper","aria-hidden":"true"},[e("span",{class:"line-number"},"1"),e("br"),e("span",{class:"line-number"},"2"),e("br"),e("span",{class:"line-number"},"3"),e("br"),e("span",{class:"line-number"},"4"),e("br")])],-1),f=e("h3",{id:"webwindow-acrylic-background",tabindex:"-1"},[s("WebWindow-Acrylic Background "),e("a",{class:"header-anchor",href:"#webwindow-acrylic-background","aria-label":'Permalink to "WebWindow-Acrylic Background"'},"​")],-1),_=e("div",{style:{width:"100%",height:"auto",padding:"25px","box-sizing":"border-box"}},null,-1),W=e("div",{class:"language-vue vp-adaptive-theme line-numbers-mode"},[e("button",{title:"Copy Code",class:"copy"}),e("span",{class:"lang"},"vue"),e("pre",{class:"shiki shiki-themes github-light github-dark vp-code"},[e("code",null,[e("span",{class:"line"},[e("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"<"),e("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-WebWindow"),e("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}}," :"),e("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}},"isAcrylic"),e("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),e("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),e("span",{style:{"--shiki-light":"#005CC5","--shiki-dark":"#79B8FF"}},"true"),e("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),e("span",{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#B392F0"}}," style"),e("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"="),e("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),e("span",{style:{"--shiki-light":"#005CC5","--shiki-dark":"#79B8FF"}},"background"),e("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},": "),e("span",{style:{"--shiki-light":"#005CC5","--shiki-dark":"#79B8FF"}},"rgba"),e("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"("),e("span",{style:{"--shiki-light":"#005CC5","--shiki-dark":"#79B8FF"}},"255"),e("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},", "),e("span",{style:{"--shiki-light":"#005CC5","--shiki-dark":"#79B8FF"}},"255"),e("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},", "),e("span",{style:{"--shiki-light":"#005CC5","--shiki-dark":"#79B8FF"}},"255"),e("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},", "),e("span",{style:{"--shiki-light":"#005CC5","--shiki-dark":"#79B8FF"}},"0.6"),e("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},");"),e("span",{style:{"--shiki-light":"#032F62","--shiki-dark":"#9ECBFF"}},'"'),e("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")]),s(`
+`),e("span",{class:"line"},[e("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},'    <div style="width: 100%; height: auto; padding: 25px; box-sizing: border-box;">')]),s(`
+`),e("span",{class:"line"},[e("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"    </div>")]),s(`
+`),e("span",{class:"line"},[e("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},"</"),e("span",{style:{"--shiki-light":"#22863A","--shiki-dark":"#85E89D"}},"fv-WebWindow"),e("span",{style:{"--shiki-light":"#24292E","--shiki-dark":"#E1E4E8"}},">")])])]),e("div",{class:"line-numbers-wrapper","aria-hidden":"true"},[e("span",{class:"line-number"},"1"),e("br"),e("span",{class:"line-number"},"2"),e("br"),e("span",{class:"line-number"},"3"),e("br"),e("span",{class:"line-number"},"4"),e("br")])],-1),F=c("",10);function C(B,t,V,A,i,z){const d=h("fv-toggle-switch"),r=h("fv-WebWindow"),o=h("ClientOnly");return g(),p("div",null,[y,b,n(o,null,{default:a(()=>[n(d,{modelValue:i.show,"onUpdate:modelValue":t[0]||(t[0]=l=>i.show=l),on:"Show",off:"Hide"},null,8,["modelValue"]),n(r,{modelValue:i.show,"onUpdate:modelValue":t[1]||(t[1]=l=>i.show=l)},{default:a(()=>[u]),_:1},8,["modelValue"]),m,w,n(d,{modelValue:i.showResize,"onUpdate:modelValue":t[2]||(t[2]=l=>i.showResize=l),on:"Show",off:"Hide"},null,8,["modelValue"]),n(r,{modelValue:i.showResize,"onUpdate:modelValue":t[3]||(t[3]=l=>i.showResize=l),isResize:!0},{default:a(()=>[x]),_:1},8,["modelValue"]),v,f,n(d,{modelValue:i.showAcrylic,"onUpdate:modelValue":t[4]||(t[4]=l=>i.showAcrylic=l),on:"Show",off:"Hide"},null,8,["modelValue"]),n(r,{modelValue:i.showAcrylic,"onUpdate:modelValue":t[5]||(t[5]=l=>i.showAcrylic=l),isAcrylic:!0,style:{background:"rgba(255, 255, 255, 0.6)"}},{default:a(()=>[_]),_:1},8,["modelValue"]),W]),_:1}),F])}const P=k(E,[["render",C]]);export{D as __pageData,P as default};
diff --git a/assets/guide_index.md.Bndlt3sL.js b/assets/guide_index.md.Bndlt3sL.js
new file mode 100644
index 0000000..ba088b4
--- /dev/null
+++ b/assets/guide_index.md.Bndlt3sL.js
@@ -0,0 +1 @@
+import{_ as e,q as a,p as t,aq as s}from"./chunks/framework.DvIFzl91.js";const m=JSON.parse('{"title":"Guide","description":"","frontmatter":{"page":true,"title":"Guide"},"headers":[],"relativePath":"guide/index.md","filePath":"guide/index.md"}'),i={name:"guide/index.md"},n=s('<h1 id="vfluent3" tabindex="-1">VFluent3 <a class="header-anchor" href="#vfluent3" aria-label="Permalink to &quot;VFluent3&quot;">​</a></h1><h2 id="get-started" tabindex="-1">Get Started <a class="header-anchor" href="#get-started" aria-label="Permalink to &quot;Get Started&quot;">​</a></h2><h3 id="install" tabindex="-1">Install <a class="header-anchor" href="#install" aria-label="Permalink to &quot;Install&quot;">​</a></h3><div class="language-sh vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">sh</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">pnpm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> install</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> @creatorsn/vfluent3</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div>',4),l=[n];function r(d,o,h,c,p,u){return t(),a("div",null,l)}const k=e(i,[["render",r]]);export{m as __pageData,k as default};
diff --git a/assets/guide_index.md.Bndlt3sL.lean.js b/assets/guide_index.md.Bndlt3sL.lean.js
new file mode 100644
index 0000000..e5aa06a
--- /dev/null
+++ b/assets/guide_index.md.Bndlt3sL.lean.js
@@ -0,0 +1 @@
+import{_ as e,q as a,p as t,aq as s}from"./chunks/framework.DvIFzl91.js";const m=JSON.parse('{"title":"Guide","description":"","frontmatter":{"page":true,"title":"Guide"},"headers":[],"relativePath":"guide/index.md","filePath":"guide/index.md"}'),i={name:"guide/index.md"},n=s("",4),l=[n];function r(d,o,h,c,p,u){return t(),a("div",null,l)}const k=e(i,[["render",r]]);export{m as __pageData,k as default};
diff --git a/assets/guide_index.md.e3dca1d7.js b/assets/guide_index.md.e3dca1d7.js
deleted file mode 100644
index 8dbe0cc..0000000
--- a/assets/guide_index.md.e3dca1d7.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import{_ as e,c as a,o as t,a as s}from"./app.d60fa8c3.js";const f=JSON.parse('{"title":"Guide","description":"","frontmatter":{"page":true,"title":"Guide"},"headers":[{"level":2,"title":"Get Started","slug":"get-started"},{"level":3,"title":"Install","slug":"install"}],"relativePath":"guide/index.md"}'),n={name:"guide/index.md"},r=s(`<h1 id="vfluent3" tabindex="-1">VFluent3 <a class="header-anchor" href="#vfluent3" aria-hidden="true">#</a></h1><h2 id="get-started" tabindex="-1">Get Started <a class="header-anchor" href="#get-started" aria-hidden="true">#</a></h2><h3 id="install" tabindex="-1">Install <a class="header-anchor" href="#install" aria-hidden="true">#</a></h3><div class="language-sh line-numbers-mode"><span class="copy"></span><pre><code><span class="line"><span style="color:#A6ACCD;">pnpm install @creatorsn/vfluent3</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div>`,4),l=[r];function i(d,c,o,p,_,h){return t(),a("div",null,l)}var m=e(n,[["render",i]]);export{f as __pageData,m as default};
diff --git a/assets/guide_index.md.e3dca1d7.lean.js b/assets/guide_index.md.e3dca1d7.lean.js
deleted file mode 100644
index 300c612..0000000
--- a/assets/guide_index.md.e3dca1d7.lean.js
+++ /dev/null
@@ -1 +0,0 @@
-import{_ as e,c as a,o as t,a as s}from"./app.d60fa8c3.js";const f=JSON.parse('{"title":"Guide","description":"","frontmatter":{"page":true,"title":"Guide"},"headers":[{"level":2,"title":"Get Started","slug":"get-started"},{"level":3,"title":"Install","slug":"install"}],"relativePath":"guide/index.md"}'),n={name:"guide/index.md"},r=s("",4),l=[r];function i(d,c,o,p,_,h){return t(),a("div",null,l)}var m=e(n,[["render",i]]);export{f as __pageData,m as default};
diff --git a/assets/index.md.1e9773d5.js b/assets/index.md.1e9773d5.js
deleted file mode 100644
index b7ff1e5..0000000
--- a/assets/index.md.1e9773d5.js
+++ /dev/null
@@ -1 +0,0 @@
-import{_ as e,c as t,o as n}from"./app.d60fa8c3.js";const u=JSON.parse('{"title":"UI","description":"","frontmatter":{"title":"UI","layout":"home","hero":{"name":"VFluent3","text":"Inspired by Microsoft Fluent Design System","actions":[{"theme":"brand","text":"Get Started","link":"/guide/"},{"theme":"alt","text":"View on GitHub","link":"https://github.com/Creator-SN/VFluent3.git"}],"image":"https://raw.githubusercontent.com/aleversn/VFluent/master/examples/assert/logo/VFluent.png"},"features":[{"title":"Fluent Design","details":"Based on Microsoft Fluent Design System"},{"title":"Vue3","details":"Developed by Vue3 + Vite"},{"title":"High Performance","details":"Documentation created by VitePress"}]},"headers":[],"relativePath":"index.md"}'),a={name:"index.md"};function i(s,r,o,l,c,d){return n(),t("div")}var p=e(a,[["render",i]]);export{u as __pageData,p as default};
diff --git a/assets/index.md.1e9773d5.lean.js b/assets/index.md.1e9773d5.lean.js
deleted file mode 100644
index b7ff1e5..0000000
--- a/assets/index.md.1e9773d5.lean.js
+++ /dev/null
@@ -1 +0,0 @@
-import{_ as e,c as t,o as n}from"./app.d60fa8c3.js";const u=JSON.parse('{"title":"UI","description":"","frontmatter":{"title":"UI","layout":"home","hero":{"name":"VFluent3","text":"Inspired by Microsoft Fluent Design System","actions":[{"theme":"brand","text":"Get Started","link":"/guide/"},{"theme":"alt","text":"View on GitHub","link":"https://github.com/Creator-SN/VFluent3.git"}],"image":"https://raw.githubusercontent.com/aleversn/VFluent/master/examples/assert/logo/VFluent.png"},"features":[{"title":"Fluent Design","details":"Based on Microsoft Fluent Design System"},{"title":"Vue3","details":"Developed by Vue3 + Vite"},{"title":"High Performance","details":"Documentation created by VitePress"}]},"headers":[],"relativePath":"index.md"}'),a={name:"index.md"};function i(s,r,o,l,c,d){return n(),t("div")}var p=e(a,[["render",i]]);export{u as __pageData,p as default};
diff --git a/assets/index.md.MTRqI42u.js b/assets/index.md.MTRqI42u.js
new file mode 100644
index 0000000..5aed724
--- /dev/null
+++ b/assets/index.md.MTRqI42u.js
@@ -0,0 +1 @@
+import{_ as e,q as t,p as n}from"./chunks/framework.DvIFzl91.js";const u=JSON.parse('{"title":"UI","description":"","frontmatter":{"title":"UI","layout":"home","hero":{"name":"VFluent3","text":"Inspired by Microsoft Fluent Design System","actions":[{"theme":"brand","text":"Get Started","link":"/guide/"},{"theme":"alt","text":"View on GitHub","link":"https://github.com/Creator-SN/VFluent3.git"}],"image":"https://raw.githubusercontent.com/aleversn/VFluent/master/examples/assert/logo/VFluent.png"},"features":[{"title":"Fluent Design","details":"Based on Microsoft Fluent Design System"},{"title":"Vue3","details":"Developed by Vue3 + Vite"},{"title":"High Performance","details":"Documentation created by VitePress"}]},"headers":[],"relativePath":"index.md","filePath":"index.md"}'),a={name:"index.md"};function i(s,o,r,l,d,c){return n(),t("div")}const p=e(a,[["render",i]]);export{u as __pageData,p as default};
diff --git a/assets/index.md.MTRqI42u.lean.js b/assets/index.md.MTRqI42u.lean.js
new file mode 100644
index 0000000..5aed724
--- /dev/null
+++ b/assets/index.md.MTRqI42u.lean.js
@@ -0,0 +1 @@
+import{_ as e,q as t,p as n}from"./chunks/framework.DvIFzl91.js";const u=JSON.parse('{"title":"UI","description":"","frontmatter":{"title":"UI","layout":"home","hero":{"name":"VFluent3","text":"Inspired by Microsoft Fluent Design System","actions":[{"theme":"brand","text":"Get Started","link":"/guide/"},{"theme":"alt","text":"View on GitHub","link":"https://github.com/Creator-SN/VFluent3.git"}],"image":"https://raw.githubusercontent.com/aleversn/VFluent/master/examples/assert/logo/VFluent.png"},"features":[{"title":"Fluent Design","details":"Based on Microsoft Fluent Design System"},{"title":"Vue3","details":"Developed by Vue3 + Vite"},{"title":"High Performance","details":"Documentation created by VitePress"}]},"headers":[],"relativePath":"index.md","filePath":"index.md"}'),a={name:"index.md"};function i(s,o,r,l,d,c){return n(),t("div")}const p=e(a,[["render",i]]);export{u as __pageData,p as default};
diff --git a/assets/inter-cyrillic-ext.0877b0d9.woff2 b/assets/inter-cyrillic-ext.0877b0d9.woff2
deleted file mode 100644
index f2728758683cd7264fa26d1acb93075505eeeb6a..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 38664
zcmV(<K-#}|Pew8T0RR910G9{=5dZ)H0Ub;L0G6Ks0|eaw00000000000000000000
z0000QgEbqL791)+NLE2oiVg-~KT}jeRDnhSgBUM@5DNNu<a98C{$>F-0we>63JZfs
z00bZfhXe;8TT%~EBHnhA>rO!R*7e$c>rAAuaR8x!861faHVyz3nFF)`KPA}_!(;70
zQD1GK(HU8}lLsm@tTC`e2@`$BB^aQVCa84a5HY9`nSE7KM2sumK3Il`(##qMh4<}2
z7-|M-6-~z}$JP7u#qA%}_`R>VN7#11&;Hwta)MK~5vg7arUjK(xIMoAvD!iBqIfA&
z{;2tmr@YX-7}4UOXz?r)JJDA}oPlj4f0C2e|9VyZbMM|=EWsrNQk1$K#ZgM>vR<#B
zrGD1N#ZoS>mG)hFbGqUvV<o0(2m}{HeB1irQ1GUtGLJ;>5-mI_El5yNOz%9f#Op*&
z^DI$GsZ25SrX<BYGS|$~E!I#-DJ|{P>eanwEv0|+Z`9g4J-t(VyLwu!q(yoXE3rrm
zEJDCq$cg|NWRQ&j*%mf-s7)N%p*BshO&x4wn^5W!M?WVdr7o9qTaqCiUypXU8!jb1
zCMBuca;+}M<rtUCa5*JMb813eHBnr}QSc&`UH||2+U)na@4XtB1V>Pe)d_9LG}C{)
zH2|fp8SUAXHM!PG=06QR-22|EqJRPlD6xP73sMpSr2#BWi6x+-5<?8>g)>o-CbQk2
zUf;}G#kOHjA-nr6082E1c=)vWyyr@*UE9wA#Oc`|vHE42E|V&IEeE+Gpb~2UtngXm
z<LA^4F5I?^o~l!OW2foV-MXynC+eaplcLqos5@1s_V}oc*0fFkQP)rUPk-CX#kn|{
zb9KN8m*50*c)=VdIENEVIKZR^Txx<zj^HwndeqBK-Ho~IRC$?+eg5Az|2J=Rz2|Ld
z>p;D<VoSZ0^1NIxZ6hK*85o3Aqc_Ef5duaUF~*1yBgAO0zG<F)!#Mli{56ii|JUAV
z_l531(;ISdXplIQgzTQb35iS!sSujNIM{a<r|PCV4-XFx5ZZ?G-IJ?0iXyx6S?7NL
z`%j(ctk?3oZ|t>M%W@F5Fl(D4g6JBuHVR%C1w=PQCZg*@FiMB6rPQ?c@mcF%DOD+*
z+CzPJ{=YW;JL5<QrG&ONu?fwyjqUUFESqolv}$Z)w`KWSc46???snUa&nBKWi%n=^
z3>vBvJ29gojyURwBMf+jD~>pl5iWP&|M~rXt$q1OB$Ek|Xb-hf&yzJt^AI&^6phn@
z`dRm>+B;aTC`bp>{Ad0whZM@6Qsw8Oba|zpYXhKu3Z;8jDU~5bUE<y8^C%JrE`h~j
zFgrWDsIv-6>bk0{^U2WEA;-tOPdH55jld6hG*`|9|7UiS{6)3GRGK7*oGZbCN$woU
zf&x-yp=&FjbhsHxF{G#|jloY55Wcu(NzWCG+$52mBF>HIfh0D<*dY_f4&*@&%%&rJ
zpq#_p^7;2wtI~G?L41(u0jOpdIBub?;aRB0QDaky?Z?=7qxIotAMbteJAnGYr>Z^x
zsstm|d=O&Q2Ow!cNIWHypoUKEyvA7j0Z`K*P}NNms%c4VBR9^PXpMD|vEihf?MAVU
zW+RuT8-yE#o8$}szn?5W4x=9yi#2{WVSKM9(_<ltNetDXAMUrh{deD3!n$aTq$<8U
zToWELjSy*>7BKOr^^8Qjuw`^whk$X615UnP|0>mQt3G);wAniNXY<ez5fNjYqEZz8
zWxZvNS!C1gFT02!79=GVhs)2H+6$V|EkBp0E8RJpYg09XBZ`RdM8eMrg0PW)(3Jqr
zo&pk#s)12Upg|jkfv!TE6wy}#r<{eVS_8%=V9SNTW4FDf0E`D1dca?x5TU|^ixlaw
z=*9p{JeVXfDS<TUGG)qg#8F2TD0Ez@GNv<{)Cm*lanbG$;iedtLc|WC6M!HEb34(L
zJEqN;^~6*27ChhA-htsCK%WA@WdNQ4;Mw5d-yq?;fdQF<3jpYQ?n@*7Kw1)lqNJ!u
z(^D$9S&nxG1t0(b2LRaO!k%%iluhCmV8DQ7yHU`^5WoOH13T;i_e|kMtbb{-WneuZ
z0077G7B4Pu7zh9W%)NaGHArCphZP3^BydX(Du`IHzKk$1Fh}L7Fm?CfWq*tP6JEW*
zKrLgj*4<+;SUAk`j9v1OZH#8+F_ylVgT)IQw{h;Myk*?XS|gO7-}^P?SS+vOGPj0&
z_xNa2`tQTI6aE2thWi*V84Hh+&y9D@rQreLUR-&x$MM<Wl2cn~nWxO!$x}=s#*_11
z@lnHa@j?00SJJ8S;g@H~%-TM1#rWB!gn43WmgI|PV#HR8)kFNV?#Jav^_Q%*c=(H~
z<#n2)nyP?JvszYl)a;Rm*nD1mdPhQYzU--V;jJrAa2VT$_l^9NHdI$%%x9%O?YJx$
z9z9ijx{U(T=!TsR=Ayl9<Gj|nil>y((?+;XnMj|T{OF~>nALk`$HISHY|d}sx%{pK
zmDY4=I|^we9A6yoYMI8&Qu0~9l`1tFG-=U3+Y5ct#N1mJRxB9!lIGQ%-4Co)r=Dkj
zlV)wLXuQz{iV%4Y7y8<GiIOBsIctae{aLc*Adj7|OG~jydcV1l7OmRs5Y=U;n7CbN
z-0uwo1|{saS8Mm#?=2|@&fH<y`V_f4W<B)CV^1u2<~cYoKHLdbQ59-Y;ngVG2%6p0
zi!8-i!uaD~cO?T+1Up}Ka1N%4=Nq?MGY#iPqd^_sYM_e{C`^Q#oeWltY`CgHw^0(M
z;gSFbRG|h$$##P)!W;=ou+}vKQ3{1Ab&IeTWm=VM!7&HVd}qza*QU{20u|?C6FGJ_
z)nRB>iroeJAaf}e*+XvT4MS5Tf0I#|<M-q#0h{n)h#UMtxQC)Wa)VX1J&CSHQ+*in
zhJhm~wW$1l-MQ-p1VejC6pm{MIEqr~4)*ZA25qDRc2hUUmFR}j94bO|&<3p&A@M-j
zfHpcHf>0+~Ks5+m!W3zn3QK{(3PqjxkVWkr=k>1IU5n0jRa6Xz$&U>M>%y*Av4;vz
z+QNfC11(UW2mtdRI^kgj<{&_yZqh0Ms(L4Z14ICr1xY7upkcB&fIwmsV3?X&h*lEV
zH{{|C@dviV_vuN#ALNtv0d;Nad#nv!ycNGu{-ospae9j58Mq67BLDaDL-BMR@B+La
zU&aqUb^kOf*Zx2h1?f#HN4Bw*+y8I248M2z+;5+3d-7i||LN5~y-B?D>U-^<xcoz3
z#lJ}wn~RBJ+wV=OoAxD-)n)3>MRL!bd*`Bd>1@R;U^Y>#LowU^Gj9LoI|l{;mR}6{
zRbXBV=beyV5AUO3-v<00px*)Z9mu{H#ShTQr+|HeoNv)&8uT}S{2h?}4bcAp@P7dB
zop_B30DwVJ@tg{X^=e^sOHcCj%5{46Z7`pS%Bcez-~?`3<_PanfQ2*Pu#lQyel^KF
z>JP@NF2*T8V^trGR6hlLI8DV9V4ow@*M~x-2&6=@NrGgPJJ|*s6~Wy2REtW%A|hE*
z6x$}MA<bC}G=tI`SfuQ=a55%#Y&9x-T$e#U8z0>bZ8#MBfBO$m#uT|<%f!pSrQkcS
zfzH>fnERv(#y_Q2pQQl&a~YQOW56r^>5B#rP_tZsyL#=*@apitqRDIIF)gY~zoO<;
z36q6u=6Tky`vG}(nn6Ra`cIVow}UeBn>IP}ccj2S`KRG53SVcqc<J9zWb@b;byM-r
zNgw>9W&^6GSEB&T7FnD`C;|p0Fo2G~PFQ;1HHJjyL(4OWnoX4_MX(O|$Sq`S0z`og
zkPtP|SS%c+{IcHrPs+HuCq+JVT`{l7+6V}z<6ZoSez5c63;!L^f@veOdC3Sl3L^Lf
zr5*_gHbVim-d;?AMcY7>DvEupr+P8-WNmrxIXd$AohiHCQic^4+j(oEC(#fpTHVgc
zNPl2z%3<imhHZH?6{o7Lo#YtatqZ0|ZszgR<9F7Fxn5yYH?gBr*m2n7C*lvfX2(vW
z%2%OQ;5{3jp=c-Stn(Dc0KVu5@4H7M%uUu)&yJASf^2d0^@eR!#8elVyERb@QK+5A
zK+#=PooX^RQ6L?vp&{?cga<aDybX;-1G2EkxpU>Bb=-_6f^=@SHUADH(?taNRHUFu
zILwJ5sbIxx={6H<YXt4YK(DB-#>?^5%qB=77gvzbfaLM>D1bkQ{pv>~JIPckcv6vz
z2LNrKd~ZGg$x$x0+qmlz&{4((=<R^tK<BZBIt6KH_s!X-1+Wf(ev)Q+^Z>l<8I}jZ
zY-Z!q<e-CMWhzps1pxrvOCPY^b015`?icrbD{vGAc|G!#{P71x)!y@v(z5tr<$E4c
zqx&9JF~HIf9NC^O7zKDNa)#3Sc^3RI;#$V+*GF}FP4(N(M~cJP(Qbk~4|zNO`2drN
z^1;LTND4;V<H_%QK48p%-{RRT?gL#e>2Oh}IgLhjnnXu%5=U4{xBE;Q*KR_q!x|iL
z(zFRfj+t@KeOvUIRm_M-o5T3_+2S}4F)q4ngL7z-VSJOOEZVY#Ds>QBi=-}ZYj=*&
zc{sxkDD#K{0SX1O^|*2k1|8MoL*5eAd69-3T8^l-+cFo~QLq4S$rN?}jTtgUU`nr#
zbek8U!V15%(wkPRV|7QVUz_oOo89(kvRAX461VlOF1Uaqnu%v_@%O_3<mGT!M$}YM
z#Isr8dZv&RY{`UiNIr-a(tucB6kWP_<*%_Uwv@wi&k|X&7rR|s2@zQ338B~%LW$=p
zR(r0JHGA=2YNZf?wVpI?@TAGQy$XlsfC&7^W8y})DSGXbALKa2Zl?M*l<B81GNG^m
zgE(L|4)?SHa|Gv(#}UhYq>?)k3{v|cF=}>0;R^P)IO}=p!XJP~QM|^0!t@7lX+#X$
zskq~2Hep`r#$sWQCtz9XCK*10n<Fq8!`O?>5?7)y0NKp;Sv05$I|-?6%yv?>)Pvd4
zPExcKYk6f?NDw2!eI3Je0k$3@!73u7f*B#P8WFrua&-wh;&3vxYpw+r$#jl75;{TG
z$%O|2>UauME%oj+4Y{xY)|xti?n<PMMB_TbT6SMfdC~#G{Uf-g1aT3c5!7b@I+_*W
z+=x@ig;-0*!NdWX0M%^RDg@v-?y8CGWU&y;k7<@^@XX)%lj07A`cw|>X|5dGlnK2)
zv6!)J^EDP$-Fh;y58-qJ=3T%joSL2d_#kv9g_T+uQYkb(e(ZKntW_NZ1~9uyWi2G$
z#e;AnLu!a3T$O89$^Ewy+jXvy6+V|Q+nnSvH_pzl<`DDwOMR&j9XLos))Y2^HVGA2
zF8B1}>!<4rps6z;dC@3OY}Q&sNwvT@U@Mh&MQgZZlA<9j3a2~xVY{`HM(~-PV%^;B
z%Pe1_+SaYcQc%U~tW-8WRM)`3PEw$pvs{a?mT8L?qB*iTX^PAVVGTk{1r$Db3wMkl
z<))ruo!O&atPECQEf_-jgBgLD_zs|v%Z~^cNSC_Mm;djRhBwtwc%OvEi&}o+^WjdO
z7s85sSqruL1_HC8Xk@V24c6Ytk!b`eui71paO_mMppjKpx8d=y`Wh};IMFO<E_j(n
zvOTiLSWsPk>bxvyU_VjiIR^fXD5Ch&_gwfWFpHC#3g?_Qa<vxaN^HvYW7FHbIzQny
zjSk3{oHt*O!`0EwfJDOtM<Zo9n1@Q(l`xueR?p>XiN+Nyd*QNI$quI}Yov}%Qck{v
zv-t(_mAFOSH3;7$s?h5+aT)3`fB{#$ijEiKgUqU|x~LrN3=vqACrV}%2gluL)lL>c
zMbZ3p>)2G2jnu8pY_r$_gJU#mc+n!0C8`bTo^T1(7}u!_ZOqdep#x|$5pWOiu?#4D
zSu;-lBEucQh&t6*(<QmJlAMahSB8vy&uNh0OkPPklAV~<#f`z30=69kKab&<j}5ve
zF0>O|Sz#ovf<BFN#pO|SG4Nb1b0rFn^G^%QL{OW-6nFFOF@ND~+Z@!*|6|6do(@`f
zP@@eyixw`PeYVoYcU^W=Jbi-+rtloDD1$PlFZdv(80^_l!pOL|Qy%%`Mo=o(oFM+&
zBNE=#S7H=BUihTeep{dIOSxvBJ>JOYTD+v9PS1Y;oN>kjX2gGZNYpa^!qKQNLESu8
zLRAg}>MIyhrZ*^6qrvltP|@d=LY?ZdLAjADU3gIqaJ>NPzT=F#pbgEC_AbMnpan&S
zDO0sMWg)>~WVNjC(%x6KN>%At^BX5iv0V;R5KB*ON@@T4{ED=Gc|qHnCB5guw^(UX
zq7TKV9mjFm(NJcrt9Vvgkf(;h&dJEKrfp2jb46Xj3ZM3x1@imT+So@`e+F_T^F~mA
zc<}@gl6<H|lsroRtSqW5Th*E`v;?t~hK}S^FmZxW=V6R})y_+(>5)rlb;IVO)(Ku3
z`<*N<S(!I8Y0=O!p6tzgZy}(_hU4JsFqfO<i+}wK-v+JcDRs<<XO!~v$K>rGE1Y;K
zXHi${3fT3P6(K>(#?y~nr6-)}yCDnJ*vTwpn>)^e+(p<}Y1SZ_fX3X|rMYX-!<5a9
zCw$wATNMxRTnkS1`P3q5sGw0#W>0XG5djMA+BR=8%xHl_%bN39uiQlql4+|8$7c_h
zq}N;thNhy_qmmSX>MP+It_9;`C`Qc)KA%0zYBm_wzWhgHB8E@KYj~5UVNDj8<^l-j
z#H;3+=d66W6z=Yrcv>AeGVjjxiLC-y$jg$^nWxXhxe8cFxHyejuu5vv^c*DkfcSBU
zy3bQuN1Rd1O?BAKDLds0J<S7;z}cGN)Fa<?P-gk~E81;VpIjUoGBPsB*R>~YExrp#
zUh^I`VskMu?nlK+UM)<N#r_lBb3POF>{n4XV=0|U3SavrwKrZWCWkRr>pqtq7CEVf
zG5EZQt3Oh$%P*Z;`Pbw|b>=A<2LquDqB1XM>tWT1mG$D?#f`%kF3GftW+Cl%@Qe*&
z3W;xu;d)9`T0@?Vvq_6KljeBoW|vp#m)t}^Zj5a38J1oRNJm@x|K;%B)BAV0U2S)O
zjoG_hZapb*n(GPP8>>Z=+v>jRPRkU_9LnwvjA7Vm&NCB3)M1Y-&!|{%JENA%P8nyS
zhx-DG!d)C*yQ<yLFtsOQo$OyQ{T#%*xLn~GB}jq0W73NO)IoLcWQQfGK!kSb9`dHI
z{;35M9glQ&mh6*acB(rVL)&LBi49w-i}_XF0DO@<(E#{QHgdhE7=xn-^dP+>2kprs
ziOD2+FeCBVi;VOjMKb^W`gH+l`_Leo3?Oq@00~AF&<CI@t9P0*@1#I-2n?TKD>tR4
zUuey|>5_N@e{(QHT^+)#-$)c8-&lIbrWB=tfdBnPKPIA0wP}5Ro=R0gbxWHH`Y8TC
zKmduy!}8C0Wr)gq2?<l{K^*yy%DBIE89gq6QfNvsr@?z>-sNs0$C?u(1A-;Owl!U7
z0L1{R?9(U^1;*?w2ofN@43Fqv>sQuq7FsDtcc2tlJ4iWBoD!fD0M<5@B0X2E#kK?y
z%dytL8;S+$Ql)Jb#3rmKlob%=8eXi&By9zJhXZ&T<xlz;U#3toN{e)K(c52^Yo)rP
zzTv!7%-f4c^4m-C$U%U{@c-=l`4-o%owXtiEU!RIT~pbS6UD`m<99N<hXJY#pli$_
zCIAp7im)F9wxEFtA_S8)x2A$tHeVI$)<-qp9+v3<832Z66=J>a|8;3-M;-Q6`hqsI
zvtKe#KWyYAi7p>{XqT#Wdc(lR0NdT@dSPd0?=8M%@N0k9({jPreYrjo)8VxIXCteM
zIn8WV_V4~NkE$gZv6q<(Z{rQiu|?V;42|=S%;d=8>m@^87VMt@3jew<2jJEND@(b}
zzdn}@Z_gBb^1n5dZ80A&oEa=noEGP?&&-_4cy*jRP`EN*Qgf)$F(cK;|2@g<NbkT8
zroUuv+M~&j_&F$9)PMMqU5X~r{UZ?3{0pLv9?7@YeQlf1QOZu3WU5GctWl___H!t3
zWaAcGrn?gsKldj(-<|6~<af>M)++RqM>_<k?$_kN2Zpjx_Xn$^8c0d`n}QX(Re}X@
z9XLsFugJ3gScRfL`I$O+p)X5OFjDR90EQHSKmkZ79IVsPh3aeP{wgU4le$7OB9?dO
zUXMw>iK%*yczYo3>&igFtj>Ly2`gVy0c~a<ou9rCgKBM!QJda-zL7gM3>lSQ^!As9
zw)9onm*0bCi8GEfCY_a7?34+;Swwr2-+Vkp0!aR0)vzh5WFWS2!fL!L?(fxK;w>g5
z^;cq}kGEj)z=J%HfR<7<^^<~lb!i)moXj@zq`Wvd(5nQjBj&>_ulo=y*oXPJem#Ii
zayzt9&viC*Q-wxi@{U}ae6vb4(C5f8@-qnFC*Rl{Efe(7+guJTf-HoKGg&c84%STD
zFOmQ(nx71B$I#!E)UjG!TVNc$s<2jk2{(NWDOJBWDpihkTX%~fCx17RB10=b%0a49
z1a=ZIXrOEzFErTB!CN98-(y0lR=5y#%0l+t-P+JpT1_)UR0AU0aMH1A_-~YO4HcVT
zGk)MGXPR-OGd-KtKOZ9yL87A3u;ljiWJb%y(CpM3zIi-k!itLU+TWH{SH^Uj>weT-
z9{$#9hZ#41hL-LdM!PhDNQs|k)6c%F*?vL-aiMmX!tZX84@S~voQVwBkpOEfEm<uA
z78N4M8lE#gne_9o_8{wPvxpbUYonhSCl_t&3K2j<DHM1Lo48vR<tqZT4{q!;o%=G>
zZQ&H?4RJq{ufY+QY3x5F{p-uSqieOwhr$7Xpr;I$*go;Q-5G(#bi5}{(~PRbQI+WR
zdWW}1r*>YC6M#rAfVKbtWxTKkvtXT61OWv^x?fd_V;6S|VB|nZG^g~Bdvb!?H0!t2
zm{75A+_B{*)mtuT#y#Fu*rD_8QMib{JR#tbC4*#)+SU(T0MJhg5`6F!Y}w;lks=yo
zS1V8%8WQN(wLpgUTFcSZ6It;?@%*=sAJWp0L|ytHA%|okkT3M{5#Z+Ee*7`0xP8<^
z^5HSZT{%3^Je9_}qk9JEN(XlB8Cd+8wsc#huh5rv#4LVYbsrqC18j**f#|8T*A!*H
zW<IS61yg+AdheNouS#aPhkvOs&n`&z@ZKVe7<aMCbJYfmV=L*GyAq6s^=1Sf8~+%5
zOujYbeV;8j_=#5*9)7kme5pQp2?}o<0~*>Ntkx@6T4xZ}MuEtG)Jx~?ozU{tA8rhM
z{^^t7($y=rf*=W4YQWp6M|}EAGuhSGni_17_I-Ccfi%nQ+H>0&ILi$k1v>Z7Z_C~G
z>}u8jk*hIpZVB}Jqa+|H;CqsEUhW=}!*73lU?#VXs@DYldwhi1YjS$$Cd%v;-o97%
z;OaWIB^A_+(~h#IL-YGeSxIAm=8cKu>*w-hNIY!TgsD*Z@JwH4^fUHvLzq2n_pcL5
zZ~YIPSmaQ~MNitPA8;XiQ!U~xE+%gV|M8$I)&r^*fUQ)Xo{R@fPP}0%m_W-96xw2+
z?&iXdMYF+^+SPD|{<y8wRcscr_R8g=jcn_Dc6*e`z4t-o|Del;9vrn?o>l-dqyWK5
zu%-fKnF0_1-l&prMfk_!+z;FWD}?3?zv->l7I+F?$@<gnxNnwHO+ysFpk7g5puq?E
zRcolE{<PCIcXBHZ&~r|b4x=9j&Qz8%lj=$;tF9Ix4=WMHwPWAYg&kkB$|XhRb?q4@
zn1d?pSg-TU>W2F&Sv{Sw)W$I&ebSC9!T?n$SUaQ$`<j4~r{4;+z^ZLm+IuUC;jZsh
zkGY_<3SvK@o&SCF^~TCyUwT`&x=NF`w&zE7MdckIewA?6s;bA79i;%n9pH~q;mtP8
zxA(?ULkz!aj;n@zJ){Xio=LE#L8g^pluiK<(SzYkJhe@!D*16Y*l!zBmN{-QLy7IT
zC64#Tuz@>_Y{HSe*<J}Gb(3H%Q9nf>(i6PR1P7$)Pypn@{~8;8p`hebhB~1%euWb8
z?YD-HUsfOP@Itle&eNEx8w1O$3Q7<a!&IWRb?6PGR2Nm2u@n|VY3*ye@uQuW`$@Ai
zFn@SHbNXg+^$t%|n(k}8X!VWGN#0Jix+w_;K34QfjZRiD2&=^W7lO4fAb+EC_{)09
zDtor-D-?>O5lt=L%*MZ+!EP!Q4Fzu9Z1s5hl*gmmMjIZUDt+^vGt43H%FWeR`ME_`
zTdGG7lq&%&Kteq>?G=qUpfS`AC51CyRq;zO|B?M;!PbN54}|`y<pE3a(IXwTbHP~;
z%^x*0W{A_xQRa^x_Ndf1{AgJUi)}m~6#-6wn_V$KN{Qu6<&Dnb2}lTm#&*c}o@@7z
zmE>F%db!Z1?=qXHfBslRACrAlI>+MTDwy{1wG><~gxHUL&WSB%e0PtR{Bie8-Bzzh
z#l{^40ixK-D(Tyl%ENG>sshTgH{hQFK_ZwjE&HA<W_%dzPesdyxm;OC>gIvrHzV=h
z_n*%Y=6kajvu+exKI`K_?pfJXX;Ie2TrK(T<2A1v%Ybn7a?bOJh@5HRXx|mo{s!Qo
z3LqWIR53T;uZ{*l>L<)c`_&3*3KptPG&j!t__>CTSXg5|_lJX7ny_Fy^X)^of@4*j
z-dIYd*acwjn$4Gs&209QGYw>eE1+?TJR%ZRX>#)wT4&$gK&EjY3HBHrA*C3+r~F4R
z^~mWyxpS5w0c#!`efb+B7eXHO|NrMbrbnsCPV2@2Uhb8FdB0Z<bUdhR(Hy++!8j9`
zsx~`xqtm+6Uw0#|x`8PQtj8|P6uneEjVcFAoE+4@|D$2K*Y_lUyt>x``5nwlNr}t@
zTTrrF{SRoArRJ4A?wCcj9V*)6;gLYdMg!NyIqzA^Z?g;EX7LTP;0l!ug^>Z2Dg(dF
zA1oPv7lr@pMkLEWyop?p9alE5_m(gpDHgnXN9?8yPh{S{lU~*Gsy<)$R`W>FmS+N&
z1;YiP4*=nqRe7&Mc)s@wp<+hfBYPp1@)}34NQJlN<pKE^jT^nHR;R|ODUk;~Xuh$D
z`?6VA!z_A=G6xH;{MY}4SkTLe=*}5=H}*uPruyFH<!{Rp3@e|TmX877*8!Dz7bxc^
zZ}jG!x!ybQ`FHpAmX%FjuiW|zc}#d}fk}<^iT%htBUB!%`2`N{AMIc2*RCRm4_}f@
z`IG(IUXEHWan!9~jL=MC6I@9FWV)Vsmtdf_C6GsGBwZ$a4r9^f_HhoJrD|u7^tkW`
z?Mr#BV|OrjS|{>&BfSIE4^#>7*Uz_v!Zq$$>_g1l#lCim%3fOP7%U!k4)YM{HEst^
zMN)Si1J`@c6tqp;!Q5#Z1D@Wy1_kMeHu<2Ez4VidfbgTa=pZgfs>{y{z8pJIJ7x<A
zcfWfH4c7t^w(JwO|Lgu+UDW5EHQd_U@$-|y^2_dF7aIdAkxPwB2FP%$58+f>k!*OI
zNM;=$?;1U5`$4uZPEIr=0v0D83M2yvmeMBj5$j3=1Aeu-p{y;dtj%rFU~n53SfU(t
zrUg6=Y^IPEGm11XB~}Rn6!OyQ5>h6Qc{$<ih2{%ib=JPN8O<66n#%C`3+bF!ggktv
z_Asjb4N_ocMFG&s78z#JO}XH3V9LtG->KgCtgi%IdNHGz0X3d$?{#~Si0=ot1Ew?t
z8ikU`Z+@7s+4t1tZf~+;u|LlF&X4&AW6Ru9*FUKV5()Is^nPQ|B=LE3oauwPJ`}$}
zr4N}JdZB^AEWglBhn*!J_gN7M4Ck<OfUrP#MJuuST7FUMHN7~oTqG0S%ukK!ia#&B
z^;*6+=*H}cy2t9pBUE|wxfijltGzzbFR;qNuOolDHS`tc=KWDJA%ow}+1l+#9?e2H
z)$B{sL+YoUKc|hJW6x4b5%aGK{1fVS$?~?_YU_jfuW$++zq6W|H&o4ke``TCE9JWT
zxNkqR>O;=%$PFpoAN?enQ}dct_7*gG762^R;Gq{@y4|He)W5zWJdjZ4bxGMzas61?
zkJrUDH7{AEZ~Mp)ncrHS$85TIrGB8PcQ+e?nEc*>`YZg4%)Il}{3E&VjQN_yJNuZ$
zr9Z~%#ic)AmRQ_m(dBmb`q-58m~aca+bFp}OlTpo32x3EaBLZ<@z)X>ieS$avEK$;
z_OH=zLMwe`Z(p-&7F5}{f?eSkSC13lh1iIk+h$N}>mnC}+-g?JsXzAtzo}6-)@4Ei
zsg@AfGEmp(DAuC|P)KfULJLVuC?JDva?E>O7Q??CaSIK0P5yE7Y?e=rn(6<clD`!!
z<GqM#s`f;N8!XrU75AIB|30$fV0QYi=->E%=`NrC7<cvF`uCQ?#b&$Bq)T99m8ODU
zrLEMj04r(~8eQ>BBczh52yvub?!S(zriH`lO#~Jxh5(4Fb2Ll9tKzirSk2C)KpNdG
z!~u3ykkedORVAp)5$tvgqSIW1)_-><*v8{j2^tBU-2&+z`vNy0;Lo96Kp18yjpiny
zYz#uGarS;^w@@pbQ29XkF$dI0--LUA$ov03Qay*$-s{={aZ>YJ_bey+z1hx+D(uZi
zjA)Fs=S8%HG}Ub+!|JrX+w`Vyk;g+GD&m?_A}l?c!PgyhhN~!C31QKvq+yKTQB+lc
z16&-w8qc2}Rt~$BE9La}AzS>T`SRtaE%cBrx}qLY*mtze>0we@PgcvhjvH@U#yBHc
zJy|K<o{4V)4?7kE2Q;}}QEy<Q99Hf?XnsO|Z@@5z(Rbl+s?Ql0M)pBrc%Z%8K7S{R
zB)XBeMWVmcJ`dVnmHonkp*F4;H=GM(At->RYbKWH9_4GkF|p9c9^obNK(Fwl`)zZm
zAKF|IWn>oRY*rx?ZHki_b;j?E7MV$94ij&1SRBZpkfAU#fVSQWCCB!70<e!)oR@CE
z;pW(KmM{v76Hcb`--E&R`@X&*;Jx~>nRAsZ7oGcY<J#ZqJ;(zxegW-y$<7o3u7bD*
zZt~nK=Dc$gAKag*+<)mEpuh0#l0@~0?>^BM)T{>#0I2X%_%#S`2u|>X64}#)4wTy<
zfqK~+^90g!GuceB*E(*uTX-XaWmY+`uNPyM0h=FV3$Lni3bjtkd3FND<8esnwQxR+
zN3^2&&!<r_BWjC{*8XOzv+fSaa9TaAn+JBTy_QfVoZ~Obem16;=feq1BEH4F!vM(_
z)YYpZai&Q>t1)oKP;D)KezRdJeX|k7Pf+xNwEk7xjtuz|4N7vTPf9X5p~j<OW#$?z
zBMNYwlySQ8bW0gZ2&T9KlA1@DQcdG1!^{Df1(I07G@zWE%oLLRXqk&8+_3dzmSb0!
zMoaHp70y2WOj`iz@!c|)bz~z|1&Caa&%G0BTaAQw1wq@!brh_p=h)V(AZ#!#c|F`B
z2tnx=B2F{nId)9}M0JZesNXM@MZ{kSfy-M=4e5ME?Ee62<S>=R_WgHbQAbi$z;O+F
zQ{8HF711$=ajYc)YI}sr)&$$0H~o%YUn_L~y>agFpsZJp@Xr#=3LSi`()j|BCecr>
z5m_H`Hl`X21a?9QtO-0(D~xp6`TtHx(SV3WVtI=%s*Q72VTwAYVH)^jCm_qFIqIFS
z?!MlGQS_+b%L42EYvAwYb>k)fhG!K30T2YK$}587FVWm?03bw_b2j&dT%3|1zISR;
z#@M4m;|F(YsOr&((NHKp4bBXETM*3yHWsl&>;BG5&PqKpG0fIuT<G9&%0jPYwWJk*
zBuLpm!oU`5`mGKIF9UW)X3E<XFIs`e|L(gGAHV9ia)8HQ+a*U|+qGpYpg=YKI+h1R
zwZh4NArO~mK`S9$7BxO~+(Jg;WEyf(ljCU{gw(6dp-Y_rJqN{7BJD<4cZ`gWM_YF(
zmtN1am3UqN!Q5r1Enq}Q0T2r||7bag`2G^Cnagji{YO-e7)7p0`h^NcS}nrev^VM%
z3fv&ZYJC9*$7?hjcwlfOpDHf{{j%NSGg#2E&ZIvBq$#TaF#U)h<*h@3ki_zTDWm9B
zzFM9rQEi&a3z!7Fgp?S30Q8<9JO-nMP$Ov~YQ(tvUn=8HpBR;vv~VGOG##9+%4Y>2
zc}9$wZAM(3kcrmUnut@*i~=92bk<-}9ibKtXgn4UA|<ctIeX_Nr;1}5bR4rd1tNQk
zCg%Sa!zm>IHut#`viQFj0RV^NUUu*qs?;Cp1-3ClB?tBI$-3UA_o}y5S^22+xl%^E
zZ_$`@0&QhM<Gk@FgR;G0KV81lp0;7>a>Y}X?^pk*y1qJCQ+8~>ajx)2;ZKT64fTfL
zX+z<;o))^h=R)t1-pQ2}MZTi{*zo5K`O-qBo;l{b>YFNFKI8n^AD8G}qHnEFF~~L;
zGsGFnjBK`{w;kK|&N$n+7H5kaG4U|fH+41*F*|48ZE@N%%JQz2y4AGR|E=w;{jKj=
zf7~wH0o!4*BhSXdhGNr&N8vN@r|^CFZ??L&0k#>oQoC@w0=vsQPwy1%+PKSc*HwZG
z;emacgR{d!$8@Jl&gw2Gm*>Rr-6wa;_Z)G>xq7>HxoNr4+>+d?+`9Ji_YUlx+52f9
zYM+#}OrF@^N;yj%q)t*lP}e**dDwW+J(4_wy)wKYS_X|v6Vb+Lue`IotGz|u6W$+v
ze0-XGBtBp0GWuKkn(t;`dtdqil%KI*hu?_bBmav5$Ab<9=LWwF{yPL6;u5MJY8FZg
zWrPlgzB)(=-yYr*E(w1X{wo3-L5T2+NR4DN!Wij{Qw*Km+j@F&dGT9M&nVSPkA3pi
zlg|MyLP4KWR#5*z3L0Qw4LEiJh9Ur<fdU#p_=jjA>>m<bAYUAss}TpsOn?q)`J7at
zt5xx(`~gpb?l-H$QV0lUa6YEdViag3eV<b=UL);6;ox=(3nwL|umuKFp&V1#CZEPT
zBA(H1JSn9jDP-abda&#1YOv0l_Szf+_fdb^Rr+C#@NBrsRbzNc4Heo6^P)-IWo<s@
zkDU#!oY_xu7)X6k`qLE=ZX<3WGQ@Od9Ba;GK*%#~c(zn~%8=Biv4?6o7$e9Es|-~)
z=93rkh5+}&GrfX1<$J6nfx6wv_0*<5OIb}Ps}@BI4b;Ac-UvIKLPG;M&1J!3<EB`0
zKQZ6hm&%U+f@^BByjXIKer&3&cSC%^S0UMrO#+oe>(^GqJ>qyWC1oXQRDI9^R%Z6U
z+1cS)2Q^yI$Y6x{SeSu?8#(EXWD<|}FS067Llmfj0Pexn$UI@ndDINW&0vE%YI9Jt
zL+}b%;D9l#(W<KNJ;9~IQ{)GXQ^o7m!n^accFCb*Zd2D$rxO~zvelOW2@exWtK`K}
zc=0Bndk7P#$DCqv{Wf?n$6lSqW!eP-T(}7+d=(`n0%7sR8D=^zgmcYl3NKj6JJ}sb
zEro75J)^dv+roq(x@b(j_DQLP&Y%iDqAc;iOqdOi&59~9PvC+lQRD%lag8288_{_`
z1mxta>s#fE8Sw{~7TLg^sadq;bgOND`uyTrVkhgga|>t#S=1*6LDfsP_2DZFICNfp
zE(YXRiA(*P_ks6|BCOWE7*)v>8)d;h>J73ks0U58%q^VlJ<DMsIP8SS)47=SgKsKT
zr#7NYD4N<`bm-4TZYQ&mf0O}c9JAt`q_C)Rfh(K@;uc<?!K2sWB+vU#M#>q))R$@3
zqEYpMfm4@6S@s{>4c4D?Q`qH@<77oc_v;Rc-I4H)zVrozMt*In4F(3kKL5!y^5$vI
zo5O+W`(c?_WBDb~E=PUzY(|s=XFD?%<BFvc7nt{CvSk?p57F2pI#(Xv)R4DDl>IZe
zdu_34I}O^)WM5rWv7Ku*%QKg`M2zKe9kDm1XCf-3o;E8IVulEF@kME6j%FANu}J3|
zI$aa|7$k;TA8k<MBi{<8Lz7YiW4^9M<G-DOtb-i=iG2oKl1%5BpWkR=wCDFWQJApd
z-wV{Ts=}BpUM%z<!hVD1=^-o7ftfN6s&y>Y?&>BV+;)H4&8rO%5{U$H4f5y_=_Rs=
zK*#;D1XP|GzWAy*g+(#5o59H0lGrpDv=yVs6f|7Iqj2L9vwYiIxVf=QbXBaaVi;>H
z^@gFU+3Yhy+ja#PW=6}8X}|OK%u+!^(FhESP4@5L#9&INxgmo(lZTZ*j+6EB4o3e=
zKNYn@cp^8|^Cm}#Vd!H4Wkv)yApaURV>3P@a+`>hc=Za9dgeo##&gGnZIH~8$QBOB
zB9AnfKcMlTNnx=iPdJj|IuU{d7)E&c#Y=DlLJW#5G8+5ovstMKKGLp0!FIvanSF;W
z%IR+BHS&M#%&nxpR3R-5oux{u$gv2Kp{UmXutkfun8>Z=HSId{K6{1R>98{iT`m<;
zLkgcI6y4ZK3<5RqJ~AbOzrsc*$qKZQ#3hM7ih+7Qjf1V+D&GXi<_se~2r-}+D4!8T
z*!Mw*M^GGK1q(gV?<JE4oP0L1?WXtUwzr+SGT130tDys9j8j{(?a&#8kzs99aWD?G
z)RUNw_#5_SfMA0WqFiXy`BR#lq8UVKD=!p)>MKe)T-x43A@355tWj`c-hdqAn=bNt
znSE8XX1C$sswbcZbT<GA?2~AXC@2xOGw8l2i*Iukmwk`!$?K|H(2?nP4mw**nj4ZR
zp2)I-_Jl~6q?B^|e&m1^Sm~p*OwFG6#-<aYfC&<G=+4&sNe!2>Vd3TwA%^3AH>OVh
zg3-c=eocfdjiu%cK`Xbk^nTi(Qru<)H}1q82U>7~c^yEBs%KPJ+&c(t3!wP}E-}b@
zLc;St8c3f81dk3oG*BC;4tG=s2oOAUB)7$fx;rN32;27Y+i%5UUZj*x9|qi=iP7#a
zuYWs;L&EgM+d7IWD${&2^-n{aAX6x19G&%n7SUL}2n!)(w*H@r`eOQgchZfem&ahM
zMn<coRgookG~&vQ#39sope+U%_!F*)fj<!$7OI`9GY*Oq(k#FrXA5iv)X8yz#lkIl
zEJlU}<pB!}(5$8KJ{k^in8=y~tCLtKy);VcEX4w>Gw1=^L0pA$uspoRh1>pL`B3_3
z;9l^*RsUZ><TpOsy90g#(TmX}?D%hl90U29F`5Vv*%Z6aHvO#6*97hhxTcI5#U+h`
z(o$6(lP!vGAnqK95)Mi@q6&uSNZ+Zzc)+$kM>IfK&1d7*2I0v$7%4`iqzkv#&L5yg
z>7NH*^1wS#_pxrjWDsy8kVio<`fwO6@SkT+Ca0okWgV|_g(&aac53?WOivw8^G0pG
z2d`}ET85E=w5>wbID9oO)Q26oUTn;qK3%vTEWX7R<ZWnyO*Q*|z>SuEDYE_YX18Bw
zKnxTTB<i0Mk6toYd!v9?YBkZ8g6=PQ)GwPMGZcLf16Mo2x4gSO{yMf?jnB^Sv!&bl
zGrtCqhg);r{&H$)h{H}rv}4Id#(@mEk-+&3uP%fugf&)ZK~@;-A5AycW(aDpQrA+b
z)oc|?BQROl(3w@q)jRdp#ALe|i;#9c3RHLH8BD;zI76gy#tF!13B#Rh>^5DAp(*K>
zcZ3RI>ns;inaoNdWzF`#AW1{EKv)Z2!QbQjGiP9u-(bKK>u#5mLm4K|8XpdozXv^5
zh~Sq_Wo8}e3v8`j?99zvp+65WuuxLh7Z~ljES9~$%V5BemtwiN?_azJ9u?^pP7^yf
zUGYSGpAyPxVFh{G7DY1)h$VRo*$8K^K2Xt$zAgBY46dOpM;e-%G~wvcN58G{V{d)u
zDQ=})e7vM<S+Gn}96Kvo>OP4BFzEtVb9G+mgmQT;KEV<g_oFR%Zek;-#>nar3J>9Z
z>$y|=iP~mB)Sfd0IKly(Mic5#(;Zj8c&i`j>Wino_qc&Y9L$Ta%zY7Fm?%_m!`oBP
zYhotp?gK6gqDDbsm%H((M)Kv_=sNc-7AZ7->=Rd;K)C2hN4IV^nAcj*12+bO_O)+4
z%J3*uwq5fz(92eQoTzU|d?iHnhO+s8UxT}$toJwzcPD+#?$c_3oby5T>Efrt9zmnW
zMMtFf{nLC~nBT^g)pu(S3%dF7?N}&bc)mu(2pAn=7_h)v!D<9j6>Xi%W*cZ)!~raM
zy<iE;LI9<b(K3}+kpWr1d?~nQ4NoJxh&gy?)^JW$tz=u)UX%$*!fcHy%lI0fW)hfz
zbj3y#QrbZ&hu{TWDa5R$^?SLFHN4c4;<yQvD<CPw%x^^~jvhiY;gUD$s)Sw-h>?U;
z1mQ=Lq)CYw{JXFnJ83a!0ki^nR0VM{;b=>&0`Jl1l36xFQM#xpJX^+e0xaYu8`BQ1
z$*7oz-Au?|*KE;K64-W~qp{6$2Es7t`c?hh$TWi90bgI7T``Xuh}$_>M@3vg>`}<o
z5c&KjkanVU03CwP+4a2(mn1HLE(ILfCWf>4pE);nk44at*p<ZZpb9h!KqUavt&);E
z%1UEdwuFb`KFnN_R)TKM79Bdu*Rl~j_^`~~?8|C73thN^j&4Xu`O%%rF}&keo2}G9
z<i#3<CR7@R5{Zz}APIGf^?kfI_+VoO-(~<j5NHus(I$8v_|N21!=EU8o7ZA#9T$&%
zE0HaK9A;C<N_XikzngoCD3=;Lg+`I@mlb**0+KErq)h)t*IWDVJ-+|q%L+Ay0_sUm
zE$Zox=<i6R+`fp4DnlkG+p8g)w{1J^>hZbRnW;(f;Wj{djGWnmx}dFRm}_*@aO+P}
z*S8zpziPgsnYbTFp%g6JPF~mel3_j-h{3G`o(|`U<-Xo(ZhIx;U!S3@n|{+3Irqs5
zPoscFFz0Q(<_PdD)6sPCe|mZiW2A@CH^E{?-Pc7gO`U@+j*b{CM?5_WS(hQv_Rfmt
z{+;hdD^hz^&^7eCSUfiQ6~`ch`U?5!4b0UH%3uGhz7e~5t0^8&O-fGjBGL{Qx&w}X
zo79e_d0MmCB9Y)EdELncf`J(bP<}T{XKk|z^ZTQQpD^;XZ(#TXr{xlE>&yv6&zu=s
zSgVC5@mMJ0Fhc$cgh&jjUo6nbq6-ZO=}3s<1?wkSmR@_oI&OYmti@yr2#PdmZ`g>O
zx-83@eyT2+;M<PV*s^>cTx*OFWKY^q$R9(aU`z)rnJmRZUosPpFpOvjxB|yCKB7NB
z2R*NzWs#$09VuhY9g$6rp{v!RX5XaxUME;=tby>`VfSREOHAJ9pIv$*_tn4r2m|NA
zPaX}N_nFdVr~6JaAjofza*`G6>lptqr_ye}V8&rZXIxM+zbMW*>hN2b9pU0Ere3kX
z3AF%5e>(1{tNVSf0<h9&8&V6)6;JcFy1MS`%q=VGoK?LN#Qq!v`tO2-Yt_A4FOTJt
zM@W#DUJ^Qtp3?p@1o~?;8_X;aU5PhE8XZIJ`>N+2^X6h5roc~h%M`xg@sj+OJ@01=
zsF<?{zUm(vNcoT4mb{I*+7ta2X#b4@*ULgPpO|8x+;%*9ewXlRC3kNRvgEvWP808E
z-f|VAFO|M)B$W7M4e&<`IUSs)lc;ZrXLHm4_OshPo+6c6&Njf<l0~K*!f*OxXDm8v
z?LfH86N+n?NB*l@H#z*JOMc9_b>JAFyRUT`{~y~fu6}T6Ac;@X(-a8T<$u><&)jXi
zeQvV6kxl=RSX4uSBhZpT`5;%bWa2^l`hb9f!Aei=BbNec(Q>7s7hHR7GDPpE%I>(F
zBp^y}1m<5>3XsO1cd&%p`F0;$&9=_%bAe4O98cQ|^;GPes#{Wo|JZ)Wx8_4IXJ@pd
zQ&Gy<AQEI>EVi?Mbjsgfk1i+~268rotdOG}Yy)5(TExF&sJE{DGkPEImMSJCMgK0J
z<&<(I!n$I+7)e@+k5+JgF@rR$K;|#YIajL+`@lA1$TmfEbFG_ZgUUFhh?{`NBSORO
zSDhL;@@+or7%?Sdt*Y@1L+wIIDL(tfMv5_&az1Se)-wWxa4lkrws}J>9)-zDEW7O(
zeXah*D{&0Jz;88Kt}mz`>n8X+3Yp6tK_j7FT!0IWsI-iWj*5tMEK%n!9od(9>d>Q{
zfB)#xCQtC}==<8b16lQG^xz+X<7J*QkxAg}W6vxmXH5NJG5S;BY&*`n=^@VTeBeWl
zTO6aEIR=M)Mwq4&ix*$va49HqSMa}WC~Ej%SJZ{zlzco16rL6+jid=F=zqLb!ixcg
zT3D`whH4BcdBO7(a=tv<0qN+>c8*^FcRf9^-*1qQdG?h*tc)ML`+R?3Y+!6!@HKt+
z-s2)?TM{6{fKwAWr(2J3CKV9xljTTq)eYabRE&YsA*?e1`v@aXQXEc(MLAv}%qvQ4
zMu|WJ*ownkxsBsE6B%!S-zdM*LoB|H7Br*TD!RJ1B*M^ARVKG`RjB<T`r8ZnuF6z<
z9v2h38F55E=h1@rn!c&D_tc^Sqanp^ubAE<e;?t_;vLNvx1)<;j^~dP*HI2B{i)DX
zEb%pBvmIl9uDFuI1uHPfR=V4XkP!GP;DR<GQ#ue&`A@%^Q;jYS_yySwoCiODM(fGP
zdq#?FYYtZwZTce0g?DwtdIt|S^o`&fvO9suHcd>>q4C5=!Xg0$Ih)CE5LR+z+t`0%
zXAO#6MxK6Mk>{40+Psp%|GpM}O*u_(u*n`d+2_`hw*yerMDA>^<Tl5;PQaO^lj(C7
zwzbvG1|(~hUP;~0v#u$sRp|~(lw>)eIt?nQ+{%7CR#NYQ`0bM=U<g+ADUSpf97Yuw
zlvqqKSmAZM5ZwWvFF<ntSNRK}Ga7`Pc(pT;L%|+qUY~;fhX)1hnob-$faa4MF{c}r
z{D<wEpnm%%(e{1WrXOgWOj(PTWDlJ!3(&*<nqVSeu6BVQVvg&Sjw(NHc?tE^8Khvk
zFD@p6Vd2<&N>PMp%n!H)A-{$L18(ycYUV(gV~lSFzva5faCps$QUtPEIl4J5Pt7jA
zQ?HuZEqmyNNn=JxAQb1&f)=z`md}dV2t!y!dT@UtB>65}C=X3t{2Z#gE2cKV{|V?R
z^R>DDaL_0(oko?QwK$xW{im3w^`%qDcP7BQ?{nLp!>dtFrbbD{(OnL<MSXTwWVKEV
zI5N|)()s%VT&tkUJ_c4KbH%#a2xPs<AT3%pp~~r4br^qn-}QH2`_ccY)zJ-%+Sk40
z@3~0x>1Lx@9LkG7`5RmIeMVcnx=~M^$w&9M7*d5!nnrwN%_Uy*eBH)sY%-$NX-g|(
zXs_AroTP>IM%t_=swVtwa2s(5L4~nKg+WPNxB&A(mfMi1&-JRw&FE(1BTfsHXeADb
zDT+u}haxKe%RZ&_1H^2D0IwmA^Us~9GvjFes%~8CZWp|BX(rDc+Z`%*2RtqkA}__o
znPCfV0bTsPnz;}4=S~JbwmZ^+aBwJh?CrtYH@{TN*$l5wd|4nZbo&L8X(y;ITB0vZ
z#j%{fh2jW{^|Q{3MSJCv9%84~?5(LFN-pTRz*0CNe(W{94{Ww#A@yAl?K#3N1PiN`
zgq_y`0;YbNoWEV7VS>ZBgm$!}{nMp%ebwuGDvwV$<?X7450xRGAqDH|bGdTl(=UfF
zN)=_vr|l+`)u!di)9w4Ti5nph%ao_vr{6>-mzI_*Pq(jbPSvINCF_-GV#Q^W(0jqc
z5&Cz~hDJEAOSQ-(z{KP6TrPRt$~b?#kPJ7l+3fm3@zWdS_fE5HHiy$LhdyKQY^U?d
zyd&gLK3MTw!Hw#NoCY#Sg@TeewNnM93BN`7DXdI9`Q~q5oJNMo8GPR09f<yL04YG$
zzl>`qviRU6cP9}N<Y17V9MVqMPay54D6Al<i=WU5G+rRQ%fUJv%QU-GZ%$;ss2rhj
zfjdC0<S3CU^}{QaG<48gaybXyU$L|0ZskM~{MG}Og(gQ!9p+e2i=ehOo#~YHder$i
zoXVSbQBN*ZEC%U!IrVkoAO7Uhb&gDYV1Rq!0)F?QUWSZ*LbJWqYo9zH+oLA4j{9^(
zO~b6&=pg}3foT@)NI`xr^Ty_Lz*;icURgxMlswRxW57CL^l^o|2r7UnM733w24Y>X
zE!NROjWvRhViE}3az#7~u-}t;FhLc}FjLY|<{y@+uF{^Ak{0<S{XvtB6TE<z0+T1a
z^%9O1U0-a16&|e8`b|Ah#w?wt0u+;ilRbfYi5nmcHn3`8vCtrZ0=>zeuL&cuqIL1u
zfa~FTAST1e(Bd)o?qCo0!iy?eh5wGze3GZ`^$w>Q{Jf~YV|ht9zqMo1Ob|T|n3ROO
zO|ei|^^~~ccIv~o*wT#Q%^8^bAI-XPW6&2K;yCPgpX0#@4;xsFiIsz=B+YUU7U*Wm
z)8T~M34=-2+ZT>+^a2;S#4tJ1u*^`y5vaq@4E)C&z<8Q05e9dkqHI~~N#va2F%GXt
z1n5s@5{n1}%e-O%4^Fd`rYcK;IVUKdq~wNJDnBF-w3eGSdC2By12_s&6@1E8kC+n_
z&m<*N#R)uvQGD%Ej;6@u#g8!{i8VhKRjyDi?%Y&{ZuHAa8P~kz#Y@eUgYA+*L!kb|
z&D_Vn9b}+T-ev_DWsEv;ea2-9<f|Fik@Q%zI&grmJ4+5ZbWv;hIkRy71N(}%Wouos
z#yPWl#n{D4x6(jevcx%QWB$YRzpNIarD^~=39Li-7;`l!QE^>0SQP}JPC?Ag9F7A8
z^`XkiaLGbTEeeX@{Oegb3k)<TM9lFZ*zwkKs>({_OAi9Du;V!}Rtt!_OSJa_*R$ak
zX4U)>M2jP&U5y?7NaRQ`X8_8J9B}mF(4it`R)1*renUYY(E{%K%uD?p{|TG=gVUv6
zt2L-Tf9p+35+oLAjNY20bZ)XKmhQ<)7Thsuc=S*ncMQp|q>U576Z8icJHI?wk5n-1
zmafSX916XtfdiIOkhw}?j9OLc@;^@PJAY=7<QZjcyGEwQ;vhr0D(m`&ARrHCNv^p~
zyeCS0ct_ON20w!>Bq(2<(>AF1jQUDX3vx)Z4oaQ<$@U;4T03paxn|Vr3F2+}cGTVK
z2@6-%Qnune%4XVANy<x7$l!BBcIr|Pv`R8qG6n4=T@P2<c6Vk+g255(yza{{Y_#?v
zVt;Pe94KYgPH9gst`cUFcB`0yvvLG-Y)&-k5L1(I<y4aOFghabtZmREQ*W@@xK`WF
zTDQBFFJWKUnJvJ0j8ONf8zOiBC`-*(8enu=O%PWp>IJeof#yTUzW{}=**&f!qzsx0
z_Dxw8@Gd5P7oglfB=I|-4c+X5S}n>u@<i1;b%u8RKxBYO;ssY$Yx)Je3pgw~oY4du
zOh9JqdD*^Bm>+lVcSzUBd0ISzCo7eCOwF59C7Uya8h8O|;(AhobK{1mi>nXa(Hjbc
z8!Y6V(lu;_9W%sgQ*4fnph}BCi*dnQ6cVBXIV&oiiim#L1AMvkZkYCXb5By+i=?oG
z1#8W?W)y7^I};`lT~aw9AN{)O-3}z^Q<Cu~oq=Cu;n@Il9LHpAP~n49WpI9VliS;w
zSY<sOKdctjxE$W|fBbdH&zH~XY!?xv{h^xR-!-6h@n9@U!*D4>%<WF#%6-#7PDxOE
z`ry;%v;9J58rquYfPCQLKhk!$*+BonI?x`WZ7Fh53u90K@~aih6y_>-ZeMf6h2}J>
z9&x_--sK7!E9Z#|uB>+S)#3I?`+={@_O>BKB(+;jeIL78Ib@t7n}f$djzi8I*(qbC
z8?UBR%4V5n3R&ma#D4N_&!*0;v<dN^Ief1(Sm{(V{p*dz3Of4Mf+ttb{5>+yz}8Z@
zkcbzL`P&Yj6Z={lLJjegGP0M4SwH1HRClH^fG5j=C*);-(h<jeK^-1<2DuyQA9Xsb
z1<Bvpo8J-?j9r4ny<Dm-k#;_j&eYp+rfQ89hUSEvh4~q_53z<xTeFSGx|O>86T)Lk
zYrcKLwG+OZBw4OHskMm+2wXL#vh;6LA=Sk6;aKX<bo?|C6>ZbWQ3<F^7Kc|(Wqa21
ze0?wN@77-bcWkGarChhS3>zY`gVGRbxZkh&#)-8oTMl+T_VMi`b*ThLRlIqaQqk_W
z>QhwE3ww(f;X0|-yasj)Ui)evL+mht5Ae$&*<&4yo%)$3Pi;-f9%DRMg-k{d(Sqz`
zOMxePxzqq*FY5$gyF#%T_}UeUvB2vcA=uG94$6WWp&21GT#1$F;T_XYflX+L;U3@g
zsupxAcZXhB{UDg;F|a|>^-YKQ6frY}f0ba~01*TCa-{G+<w}?wJ-oeT8WL{<WQ4I1
z01|D<)s{MR=dsn0+liAdr+W`80!~rXCNu;zh|<P*SYhlm^aLa*tU|^yyy+=u1dknj
z=eLw}PpcH%y=zlv8GL2Dw{i1__+%`7g(D#Wi6hbPo?(v^UAH4JBfKa1Wyu*DIQ&Q%
z<i0mf-paR<G_K%e5o$s%wWsvo{Se#r<6n~=4_4Pw<-u%BZ0ck6iss}dwiT9*#}NO8
zQ?65y_0dhf2{>OoQK;|EeddFeb(tGn_lNc4l!^N<jv|3-d;NFr4Ivwq^2U|&H@9>G
zy`xKuvsP!ub&J3QG1<ySywSBqn74O9BDv1bDK$0vBC!YZ+}9(YCDERh)tqty;9C$M
z2&WEl0~lPugX^&m1-jdA_Zg_Swn|R$Q_(HE*iMTk+nBL)4%jK&%A~kzT|vW)pnbU=
zdArdnpgkF#mZcgfI3T9uZYo<}#?|975Rjr0mCkY=4RmKUQ{_qDsYXk<pT<$M^p_eZ
zg^542Q(W$%(AL$cI*(Y5v9pV-blf1E50l8pLgT{r@?tusuE~au$29;L7{F1qUt$0-
zyyMKrk0?IQ4+tjhi?Q$FjdvNPRxDI`rm5L0W!``TyXZ+L(RSth3&&jR1^JsdGaz5W
zj2FB?xEK0J@M-TWcP|BcynTD6jtc<hUd~~0BMA3nZ<RO&+`dH5+@xRoabVNXrAr$z
zWq~VvC`BcTwnv_mK78|h)~Z`{JA#RhK&MEF1q!TMhX2-uXT!;z%~LU|Px30cSz`Ze
zqb=w~ntXL`dwLr~s2;jpU?4|;7~t6Rq6!t+4;aOxU!##Ghvp64urg!m$OJFe!4MT$
zejUtr63s#&Ah$0QBazs|xSGVdU+KAKeS#6e@P?8fz#=sX2(snzGSS86W}0C{{Mc1*
zs=?|{i0nysI^aY#icn-|bLd74d!y02T02GL)?oF0;H5XHRKEjVM}(csynM=0f7T^i
zqy7imU@%9LZh>)+n8-t&avsu=qaLfoiJa0%sIgB49i99^(Pt#MRb!q)L~a*LEf#S1
zcVySDfjF@DScMU{rl<h*x>X%mDrOf*=t33TC@TWeEdsf!@}-+&2aZh_?9|Sooqb0J
z(^hi5onXe$H(JY3z9+=;aMwWc(RqrCuJzTS7f^jTLu4!X;vC)Z=IMoTin`k6TJ+Ox
z)Y^0UuWC?Mjs!qeQWBp@VFv~|4ePnMn0ZP6p=pt6-NlOlHuXNCWEF?u71cZ4l!_wX
zwA=Rf(Xf<iIEaw!T4Ur&i*<w$pl0?5i%Y5<4jW@6jDra>DS^B%EPw9M0y%4#6rL3;
zC=@JX*%C{U5oMRVen1Qgj&ha*lwC$?P`Q;)c@=pTY&U_Bu;@cjsQMoXw*8K90*oCf
zH(N);F4Na%iA(HDhdkV+EEF>fY5eJ^j&4wtbpE_CQW-58ZzlGqMd|-UeJaICd~O;&
zYd0*!c=p0$e)PGrnih;1xH^Gq=)rKJ$1JX3NYmQ;YxbBwm(k*bySuv&{q-ccJ?-!9
z^?R2d$A+2gnzlT?sr97-|Bi!G!@=M%H>@>rT$7X}v*PY!8FbmMz+#!f<I0uL<1CK(
z9}MCNWrKBvo62NMrE4g}sZRUMj@Y(++*PMIQR`CEs#~!_M_ZP|Q}npEN4Z_sC+EU&
zES$uKxw4_-hr-ZkBmq+h&LtLy(c%8yzJamH#N>C5DWOB9;29`##?_HE8AT2a4hMsw
z6WwH-?>lST?L0IPGSKWo3Kwc%v7w}QBqKALZp%-24>@wtHiMh5d+&+Gez_0jw2sNS
z9iubj3tqPxv8}c2jKz-jFXVb2J-DR9n>=|e9Eo_*&|uu+HSVXEp20qE)cviVX0+0R
zCLq((4ezxWt{3OT>9`xy(+{?-9!}BMWT8*r4*A-=uCTT)RwHHsRyv-X)_6gS-LZT1
zy90gPP)LkKWq2pK1CNE|STxGC54xJ~tfglZId8-BE4z4~JVz29H|Y*eaU|{>f1x{F
zkceTlpaahJq1Ssue_3lsrFnKCSg1ULNxCmB@63S>)XR2PEuE1&8qw398PVz*3Wn0M
z{8aYKmhykMDrvEkhvv&#uCdsYOE!y7#~i)_MK$RS_P?`qls=zktFb}Y#>0?@aonzR
z_=i96316<wI}9c*b7fUr{`X)SDSJt%4cD$ElcE4nL|O*V2L5TxGpy=p=Jf1v&vKW?
zH9_v0rZSUGAD{DR!WHh{r9=!Nqrhv?-VEYf*y6BJ>g!Emn22pTAo{au5qFG%niQsi
zIFoL5>3CmvHZsi)tasE+vN2*^77y<>Y1c{@9itIzDzgfEX6$zTxUI@^3)6xgsAn{<
zXBs2zw5jXR<96#6mgmi0%}m(-N=i=H8rNl2!lJJ)GZICbOpV<5V7(PQcEDI*ugW2e
zi&TTjEZA_$*#t1~_)oxxHmF&00UJmkBs7P{XWRma!T1c&fTH4Egn%YddWRvrO;4kj
zmHL20+elkMJ!FqaG`rjDHd8J#44%Gl0UJFtli%QwnYusq_qPd;4OH45?3tvI!xbuj
zUA6OEA%JoblC!g{4Oh4<7PeB)$Q5T1A-#0VGr?nH$Yc97B*^xX1_j*As8&=xY_5In
zv4rTis>bk)_MZR-6ukAe*FDD$Y<GGaVRxsYDS>#iUC+oB*YhAS&V`<?Lk&yum4LW7
zu1-XuzgJOlhMU20WjtMxMa%=EkX*5S5(5O6!p0EFJ<Nte0pBi1ZM@_19uOXD`FL00
z(aCac)V8&qm2Mh?MEn3dmf5lLRB^+P)JpzLp$?^fJmpbg*BZlhu<c4@)DsgOj6hdK
zP2jSgG{6+0%b5}|^@Q?A!m}2Q8vouEY@~4bJw>q0(EhCVsdH_VkM39YG&#@&{~Kkr
z4W$G5K#MW<H}?S4Nkh(x78a$rCiIDQEvg*qM3Eebi<wk)Q&Z+OLua*%U8OMIYRGja
zCQr--HIj1^W9DPUX;DF6FMJ^;v{Cwy&~2Ibbr9X^<o9OMR9C4{K}V07RepI<(LO8n
zqJEyNZ;#(B%c>j_<i1U}Une4S6WF^_+{6>;K!*WX=wX8kyQcWmrm^9_I9NNq#Q*Bn
zAWbsca9alH-ETf>EOTtzjNzR^KZN`>z++CNQ|5mX3O&#tg3v8RNP-Jn`OR{v^xY-f
zH!XD(yY+kC_6)PRo)R^hQEQY0>uR;zC*qY@4Sadr%CgmauVz4*VW|=#>va|9U2z0i
zUj{<!;3fvkP*KG~vT0)FXlb<stJ;{CbzgSp=1q0gKui(?>&8zLdwn&B)L4Y@-&K66
z>fLh*xQ`vBm({r8wT`S=q)DLk2-7rV=Iw#oIfyPZ{MJt`=f`oJpJZ(Y1){>mw-Vi7
zZjbdOlA&6`ZSNAW0a%CcH;lH>QeXehBMqbBZ4lB_W+p9R#H7aB#3b2VBTY+W%(QYg
zBc$pzN};q(og_iRH{|Q8@slk3<og8cfN9`s_YFa`T(;Y=!W&64LMc{?@admQX!F)Y
zcw*Tu&33w+)ppV3_>!jqOK=0J{z4ZT3aI!mhesIl9w{xWuutywwRLjj-6r+*#+s*C
zY`=rs%Qp@4yABCV!6m>-CzeubrmB<!s|$N!EO?aOva8kqBe#-wrAC}`rY<^w9uu{>
zHU-;k{HfirjS1(Ev*?3Mx4!N0qC)VKqa625#DgqBxl_}?ecS$fs5umBZi!B)x!6uq
z#Q%Ri@J*>X=ZSAQx#(evS!XEij5^bw$kbtY&$j$x62G}+^k1vY(dBR0$_P<+j<UvG
zEV(5A;NB>k*{Sot!SPQ@+-{1J<GsHP44%lj+z0I(MolRY<gplvGa%i0U19xKFF2A7
zSw=Uom%XesX>Nyie->|FytSj*cKh^X-SanpxYQGJPZP>%j|wu$kSjM76hqFnmqJ$^
zGWz)iX_C(5pF`-Yl!#sQpVsmntJUhFKbnrlo2sDEW@n}qtJ)?Id?&+*4gq$Nfvadm
z9d;#vvvaw68RsC(QhZbrxv%x*#{)Krifm{yQe9=LncOIrgpae)C!{EdVlX9r^i?Oc
z{gC^@`1=W+`Cn}UI|9TvCkJd&aBd05a!*wdl?8}bQuY<$9_L-}TSADgZ2KYb#r{-k
zBV}baJIv(pUj^Je-_9idcXR+KEU9~WV9bTuv-Nr$%~h!rLm~SkW?=DoV~3=~`wo0)
z$EF4G>4PP!V&Co<Lx!f6%qeywm|`e#aHJ`10&-TY_$!6`x&gArV9M|-7(s5#k$3gT
zO(O2Ejfx|)2G*u#goILt7V%UxdJ4iJFtfz)iMILG9P_OaxJ=X5@+zL^XbO(bAY@XC
z>@G-R+_x@hAd@g_zE#5a8%}RiaRN{myRip0Sb!=NkB`iJ<&ubXZ}^VZUam9|;vLb&
zh?dZ~PL_2aJ+Nd`1}`}62JQ4dtVfS;!qpUvbh2#jG)=SL*0LQucIAonrd8<j(IasF
zcKE$N?5wRDpiJ{<93N+pqj=qvH}@N@RAog~He{`IM49wIku@0<*`i#<QhL>+zRxow
zQI=f8V-_i3Ksmq!3R)E?!<!whKlNNkN7Vw%+<Vbw3YmbQtSZK`x`@L<b|QqPqoWAs
zk)%2gjN;P7iCG(Qdr+w22?n%8O)Qa!O1P77;oprcoI@jgC^PjH_p)QnYiIh$G_AF+
zr^h4-G%cBeolTl+?$o=ck<05fw|45*-EIeY)Rx>RMFj=UONNQY^`=-i;jeB=dfcWM
z&#a~X=kz=iW6c9V&m|}U;x*`G8+mE?X2c8Ht9S0&8_0QTX^{>#(C4k^q8bUr)O}h^
zepW+t#6AOP1iYm5#qA);sLebQ@1i4CO~gtp3=6F11a(oiQEN?|;ntqK-4|o!p)bI#
zchB5-K681dk17O<pKoULqK}-lwx^yPvcI$MeKIc<kIqCDc?QOzhVy)3qs+p&g%f!<
z&{k>ENs_{X5tO;kcq`FP1!5Hn!qpL(CmvV^aph(T)u@f~R@}6*yqZ*=Fgn_&s`ls(
zq4s=OLD~Xl%sU7vLxI|pp1OgTv0u|V^-h(60w`;*K*J0z(d{O5j`bhj+$O1w4`n*V
z;bV5&^re|`)o!24@$xj}?+G+u?NvPoJn?)(`8BS9?-O?UB{ZO2qEy&BRMOz{6bPE@
zU@ik3v9AF0<d+NwChdZVQ+VP4Dp3rk3-G#NYRbC)QiwgM?rR>_#;jOEwngFW$P3wv
z#Z#nXPn|HWI>HWHu!lrv5_LNSf2Dq2Bai(>;~L3J^TAO~I;m3uIhOE3){0%L{GMQe
z<9LCnq@J|T9uiYgG-j$(UNLBERk7N_Vo}2xqkV-)(=E~Ds}g#Ewa%KUPIg(HmnO<B
z*h3<N&<lFoWme1KCU!@f#Vg7Q;}8#d_#XD4UVEg{AWp%o%Wr*qc|S`RBu$nTaY^;1
z4>rmi>|5@-YHjXXf2S0tL!rJybJ=@H2WQ@+;y(%%()c)M&u1KsDN+2mEJ1q*aO-A4
zlN74RQ;2lL*yf>aWE3S?Hl$w(QwgzjT{p}0DTmKoFEjft@aT;W^q|+*$}K7C<=#FH
zV<ggoDg9ZC!#LS{ZF}3L<mE3z0F_M^^pv%>{csGe1%zCDEXV)&<2IT5W<^9iMFmv3
zCozXiUt`b+UE8|)cfB3m!QtbhbD7R}m`#qRL*-IAA8&eeok5ChWPfQ!yi!9jJ@B9Y
zy$vqgv>FE+*lp~+3&-~s*g&2p+B3Pik!8`k^>%v!Bvsr<Dbd2hz}a0!g!#N<2}Sjr
zm|_E|*s~Ivk_nYtSXeSJlpkGz849i-o4Unlg5R5I*i6eDprMBTmTQAgJs#S6=&-^&
zj&ky{S)RyFD*=o#v3e-<F)4DqBQEAWo#%zec}7Q(`sAsVJ#BbpdDKoThKJlnpUm~?
z^!|pK0F)O{S1DMI2cpSK=SP7Kvit%I2Z$@jvfmSsD&SQyj1)y3Ni}$*A%Hn`I>3N}
zQB|71I3^Zqr3)HgZhSp?LO_SGbh?w4KqQ6w4s+D#zuXKf%wLZK-zXW&DPrXFs8kc3
z3A4j}9H4;hMkZ~r_6lk+LORRUT5FwqW;|2?MHX!c0o84|Ydb=q)2~AdYVpW+uswU6
z#@RkUXzJ2e8%SP0t;XTdPIKcwI}s}zOH|LrV#7o(3mviRpH4y*#u33!=igi?*?U5g
zV!`IESk6Awi(VHw<n_uE4l(t%{B2YW=gtqjCs~aXFSYM6H{hr-(l1!-7?ZfE*depH
zg!mw^!{w$F;pB-%)_^k_STjy!c*wVhDnEWf@?_CiWv`F+r!OLu9?CSP;d!A+fdi4-
z4T)HtjBHP=NL>E871Flv6{1)xGRYK?cS24Y@}U%Boa$e}c9x0=$7V2Tsw4Ne5Ytqg
z8y3Au5lHa^ky<Eisip&J;7~%vN~yL;9+W~cV8;;95ac&${5J~71MKuRIS44in3-*;
zxpJ5UcrNSqL^CRj<EzlZJj7B4^C$J*K|i=O74T+a{w5soW6c6oD8GDNA_snIPy-sF
zrjL&K?*&Ee*xGn^ls3Zcc+OCj5<L>qrAsO6QIs25U}RX4k9u&RVSa<u$z(b2bcRLj
zT&?n=h05bU2?2C)%j)RjUI-q^(-PB6(8_nTdIqpOT1a7@+;W_JC~-p)C+vDC2SiVr
zeUSs?3VXPac31$00Vo}!jM>Ja+$M@r3b3IYhRaGj#q%n#cOUlD2Ut-A<5%63M~&`n
zsNdoA%_e@i?*##W@6@aeDk-F^C!5~i+W*|Prs9jaMqw50rK8;kQ^_HO#l~1bDO&Zc
z?bB1e0^(EJgMx;ilJnTfDX9*ndwRan8jkbW?qiGDu%WQndI*32WU~;)4q-_{m`X1y
zu~=du!a6<-P2u<xW-W+oDaFVlAMdd1HXDRQCiV_43sn`-j3FOEqP`i>P%o#jh(}gk
z{rTX*gK-w@kULorU~+XNZ3+kzRG=J?B1Z@O<W<jcUAz7FYDu?&fd)z1m{h0eXEX9E
zVtncz$cu~d9#j#e*ZE{Ls(?3FY<o=cG%-O)2#A4uX}@m;=q<SVx)zHP3WY@L%k*#|
z&`W=^^!`$SeHq~SC17S1O=wahyu}XUSYosQ+Tp1$1S@{`f(AeFHIsygYNQ_Kg^v#1
zLo?4^#+t%o$m!qB(H-Y7`*na^o#;lAlO#D-(=&cpe9^cIhHNamxlKNxbgPheg@|)J
z+RKx^RSgqr<Ulp-Fu`<EZ6gjR>@oF6s}~fy?1w*;qb7RqqsVo6D;`>qKGhi;F~5aT
zN34DfD-hXg6Yn6>apQwU6RkxJ<GFreMA!orhp`(r*mZb>8!NxUA&n*D{U!Qy1ikmX
z$ebv?Z4dnj4~1BT8YwKd&bT<7L9HE|-6Low!w_%ZdQZIzoHW|j9uwO`p*?ym_Wu_Q
z6~o1c5+gz7Vm|5qn7z?;;vOlezbjse>^Rx)A=UcP{(=7It^nMsP71$=05~^M?p;<R
z?PuqmVp%4;me9=GFe$Hi3e9KwyOQ|-N7q7{#`+-X*mBM!`d9?vHy3EP3P0Of{J=b8
zHbX>ptVO-oK%a@6_hhi**K;BtAdqAFpFjv1hk6dLoqN)U=GIH~fGkqA1R-30<O=yD
z#tU$SX!Ik509sDq6%)M1EAIB|iJ@Mfh<5iRKQD6yis`9yrOrnh4$hGO&rY3bKT${n
zlgHe)^OHS^V}^_8mRf=xi)|cor)*SmR4ljF58PWP@YkyGd0FbRj!0GNo6n-BpY$7a
z@AAx0A=(v-y}{ixvdQTNdLz09V}Wu%lod_V;0Y8i1d_h$(IF2#h-QfBJKcOelnfn@
zJN=!&2MVhJV1N+V@Cv{ATH_-&(YVDJ5u${-Oau;^Boqk*j05nszLo&Gi^KZErbHYF
zR<1;9F3fPSNt@WMvw**PBmNyi*JkTGB1<0EY@@kZewCO~TSJ)-Aj70gnG$EXP&I2Q
zlIV;jLY@x}FvDd%fi)AiiDu7KzPE3S-TDguF*{@I-xAdMVPma@;;^V$U6}gv$>V^>
zuz%Z^^;^l9AnRVt==dfQ_d@po#jvB;xhNLfwD$Y!!r?R7!skfFH{Oz76lZ~zM$zk@
z@n%0^9$jYO_Q38q6R#Ug+m4@ag|Fd{?UM<pTJ{>!m8c}SQ)ia#D22M7w0d8W*q`FC
zfhmlCXVkCx4pBQ;F}g2)+q0%dgTY~P{-_fv=KJ5;Hk2O%`<@zQiB4>$qLzs5MoUv}
zQ4<TPKuvr`;(NLef1S>{7PXX+%`q8bHcI^#VoB0BVB$Ln96W$XH(p+>JwU{vSP4WB
zC7(KLTid;L>GLTo%eT$>aw2`YD1JA<rIdjd{XgM4f0F4Xo+nmwf3kh9bgB9C#(dHp
zTB~N2S5NY3T>)I92OuOAlzUNOnIp+?fDXa#B=4RRPJUNOebbjaC!KadPHuKtCh+hq
zci@bd%gVJ=-=r*`&e-_3SS%`e1y`Sn&nL_A4qIR8ZzqmuzEGDydkCQSgF$`kOs6i5
zE4tw-&#m^XcWRlwCcAy=E79L3s_Hf7>G-a(nK*G{{Tl-4jZ6ksXU(9woZhmI+0sx&
zxniv`hjnGsVt9rrgx|cHWi3S%DH_S^d}{`&#2jGXD6`e-rU*hecvQQp_D^!6SYNb}
z;E5?vO(qNx9lwm7$G@fe<9(>fO4+HL#6y`+r^`p@q0Z!4BBoje|I=U10CO^|WNF0;
zeuIU`4=_vyoat~`AbFe%Ec$>dr(g*VB+^F{qqupNXWeK@w<TJFy=@>2HH|Gy2IkML
z*G7{{kK}B^@9xyI1^@pob4cU}2&KhlBdGu;bJDPkD=(z5J;c(_WI(_%NQch;gPGg3
z_73m&L*b91iV_YJBWuEf(C^`cDSGe+0Eo0fWMByOXof3~FaG*7C1iukcDuD8Z~lBR
zMQh(X+R3&%{%YyPS59e^cbViVfOEKHXyYVn<Q~_iM%^{VqzGd~)>e(x2bTn4ug5)>
zP~B$72^Bv4BuTfZv)-k*7>tPw>yE4U9u!_!DfRVPv}#EvKbG=W&zi0eXQWm|-W`^<
z@o&B6)<bBNE)z_!e16x^(0T9!o3-7_+$_IRsN!2g(k6#Ios?y3yOkUH(ZePJ{VqFW
zwjbC9I_3#fS`2#O@Q3$>N$}Boq>vp)WqIh2UGZIqQy_4Ir}}dGT>vQ)3SF;P`Z5e`
z?cv~=nFeAWI&16rtQu7pF&-l;V<mTh=XLn?hEafDBR_a%O^ziI(uoL%yhH>zs+|?(
z@+OY2%S-}syp%z8l*980NiL3{0S?r(z`k~mNFNH1lecYY2lt4XiSv%?_A15qxqaJ8
zkju@1v$@>rY4@eG+|_)W{N<^1rt;W|rlHMQ{$iyk9XXxm`oeZQO#cN2+;Nu%dnS5i
zyECKEFqvgO36zvv%e1@8p|rR8i7}A;0@0819r96aa`>%3S+g_Rw8^(OR$Aq5f6OYk
zX}4_u*kw(Vvoo60BwKAn|5mSGsms|071_!bLgI-*Y1(<c4lu>f8`?He&q;(~&32B}
zx2#E9$)w{X%_{&}Rsbb7D=4Xt`hg4yjMAE?8GO-=ov3kD+@3Fz^%BSC8T<*CU3AK<
z9`FfiZB3_xp5w-k-f>-rRZj^bm&^UHVGk!M_H26Nar4K;iEP>KeS{pQoOY5g<pz7P
zTpKRK=ET>$cUULMC^4?1#E$quRi=!NPAZi_<IKFcha0&y6)M@;dKC>3;Pd%0Jn@!E
zo_?+mSI~U<r}oY&+bqlmHJnZ^jeVtq@;l1bL;FT-Ie9;gaS!>)o}qC=YrKLpJtIzx
z9XGU`Aull`&e%BpQfbCc%{5S@u`ZSV00T+VXoHyWoI6z}W&rL?FO1?>IE=H{Yj&Sq
zdq;7F4DwnW!}vK}8Tp@=GI1)!>{c5eWxi{Zx7#*TkD;FvzOX2X!>pVACKc~G<*!lF
zLCOO}Y2Y=@UT?q_G?%~ZpQ8#2t=P^64xIB?@BSP=w@6Hiwd&<yvh6LsNwEZxmxt?#
z-mxo>_Fxy<c==k9cez0sYyVk_Hq^^sF`%`cdg7_q=@S~FhV(ZoN<juNT?bfPz@ET2
znrb0Vvp6|Ur;dvaR3n3u{|XMrUM7uh$0SV)-s*f?N|LzNU@0jTEO%Y17S+hJ9&2h>
zNDaU8O`!-=&2!Ae!XrBQ!Kd~S*r!JD6SK*MYB8ODS7B|_LiAo@xJgf2;ySy1a{>#V
zzfDs}X3A+gc7_t<2ln<{n1<=YF@D!SumB=|b4n?Xb1>Z<HwFRg@B`n#U1htKZ&)=%
ztRz|ssZr(5Ficsk78+`^Dht5DMmb+K4gG00PY=0HxxOYX0gX4Nf<$0Jv}VL`nuRV<
z*nHL=b`jB;>IhST=n+qORjko;cNi?kiazO`^)!T_|5VCf`uP=J**`4t)F6CaaKOhl
zR8fZ`YH~?5Td#c0bQ_Sbf3o=d$A0-rqdcpc2SHtnt0X5VB*mdHYOmhwf*URB&?LWK
zPP7PeKb1A+{3sq4@s_tby_Q}P1c-Mu2f^Z*<XApY8oJ@UQd?6Bh#EQE)o|*F6#)Xp
z$BtRez&;$n0cZ1n9e<V3^^XjH{%=c$$jy`)I<`LsZUga(Etwiz3+%1bL1>E9C~bIZ
zb&G@NK7Pe*1$_i4X<bMqj&V25{QX#FDL4l~EDrk%%hZuCUd<$(T&v}58kkw%xWULh
zG<P&LQ~cOekgh}{pJW^9<!2a&)m}%^9wb5;Ht>52e)%s5dX&er5;Vs+tF;CaQ4^h8
zdCPD68sEv$(|F4%23-K~kfA~ltn5xvb;qKt<_D?lKib=(-LJnj*|{sg-PyZGI{T~E
zojLv1ayBC?jf)ngSfn1nUTBJV#0=p%lS-IUTW6}0TG4DY5p=*3aNVe9P4A>AV{GYw
zQAp-T)EhS)2ymTIcyJuWR!(6A8`sX2SWJj5R6|JBoFkykhP-$>{@tnb{$1beJ#%S(
zJgNuRnYWN`$37C>hh{jT-_<AUF_*qmXtg-HJy@j)ONe|#OrSzvo|)p}+PNf1q5~D+
z#;nkgTXl6+xU0AOOEIvcJJlB-iuCuJrQm)_mp**r#^L%Xk@n$={fyl4VbqHt9H{C*
z;w9am+?524F)E9<-w`rWMrYJEqZ9FzB4(p9c|!M)HlNbT!c9(e)z2F1^9{@=y+>>Y
z-7wv|>l<Ww5vkeiJ}BXK!wsTH42Rbj>WM0Wyf~o9;@~YeOwzdmH@9$yU#j*<Hp{tP
z#`9RHj|-2c02}ZDm$-yCa14Fe#Rg$C8m{BSuZ*?C>%7S%g^w=cP`#Xyba6C1!Kwys
zk4;9LfzRNw1gy+Tv(`YhZq1Wv5+qk=mLd4yq3NxH8pj!$C$C9YJ=>fH9DcVgnyXxM
zFB_Ej_fpIDuMyB~bi=XbL=DK-a@ONfW?Ap(o*kRXb|bZ0z@3v83%Gndb^IZ%Q)@tR
zIrMZXS#}Vkf1umG!BIZJ7EtIid}p(S^Dzz{KS;9zkGm%0dIv4KNs!)4Z__(eLY3>~
z?=(x&$e5$o=qL1@0&fkz(;&fo^)pyr70t~ynb?8-{_3RQ<_5P_u`Y3xc5o4UsqOGJ
zIah5}DGuFKqIcK#d`KJLT<vKi2kv8|<UIF=o{@tC)5Wx?tgrwG<HW@m?^XWk9<gn#
zCO@4H&*uQ%{hwfQb0Rep3~oyb^0H25L~MBqoRq;-q}lFtI@9N0lrOCCNHqoJ8(dV<
zP<tI}kLW>yL>WZ#nJChpR`r-f{4Fu^oQTof<iUGxD4;yWIPCxV7F$A0ah`xQ0kJf;
z>+gj9b-!j>&?qsj)Rv&#LYF#5XSVQWs@_H!P)utoymjo1tzBkGD*-DjL4cm!9Ihwf
zwzoi?X&N42Okb%689hKlGLVfU6Hx=SGx-o$vWxq4D`VSiCt~$Ltbg1KA^Ljw(SvXR
zE<7@Ifb1VmOO!vOIaGQnlWTI#tsF9!z>{}K;xwqy7Hk`@vRZ{Px{0zonyw3Ep!woU
zc$chiZFPF|ifCPNtaBv0i)=}IekUZWTQxS#ypBXxx61C!Dy2=h=Uq^WwotO>M<I{P
zM9C+&+{t~5&*2w2Rc*IpCt#7AA4QS=tL0IUE?G;89L=+gc9t%RMyg4@g>;1SdT?Ft
zTk1e5eACS>;Bh;|0Tfj?h9)#IN-j(^RKc~psmQEU^#v7a7gy@B!W?E24=I%<%yn8}
z%@>5M=PED>mVuFjBt^##l%WU)2Gml#mftbGyvcFpC2KapKN4V4qEP~6(<oJ$<2B0%
z+HxfpT-3KaQggb$wmUN=%m77aKJTb946fmw#y}w!+f2#!9W|^ST}z)OqN=mKIUnct
zGN~3PMrE!Ex|L5Dim(#Gq-~XLjimagjerddm`33KHBv|CkUxaAR*y#*xgy|e0>Eq`
zPpla00`Z?-O6{9W#j5d0bE;%Dc{(r_LmNyeP`Uxr*Qx^^H<$UjdJO*6G4vTk>Udi3
zbW3j5k^?L7T*nVeA&DuW;HvgknU52otyc$N7BL+ce66Y1`;@yy+;^6JVC1=h)h&hr
z^8rv{MIp45bfhp>s)66^UA%{0nG9sDwg}mxeXO$15Y_x4&ym2G(D!rMg`%Mnwwj#l
zHkMnJ_j)THMPXrOKZ^-rl8c?aP#>z=_0%1?VM}AC@I)MyHi<*CA(i=Ex%DX}Lr*xb
zRIt$O!`Ms|r|}vNqQ+e*^Tvd*&NBJkfS0#>tuxC&Wsoq3V|6|Ed|<4)2Sm#9tXZ!K
zoXuF7>80ApOIUToYMi@i^6853%O^StOL_N+6<>7Qnr-r+8KJil0j;k65RX0!s^sM_
z8R-f0cFBuX4C^YbLH3vj<$bhJM*uk_U7{l8QtY(~gCNb*4GFo72Z2V!M^hh5l{Z~&
zsnTIe_XEGlBd*}eeK;7vyHRk@^z=;XuWl&SoZ*x#m_qYmi$BErHLYd-7R%4dhVC93
z3Zy^~b^Q3QM|alC3ueT=ug~wz;9xW4k#l(6gAu>3hLyT$Csv9js$LUQOl!c#aaD~i
zoS-61-8O}$P>^Ag<sCjVyqZiyE6CkHD~Sx5)$!Qk{DRn7BPE6yQep<WVOSM-xY8en
zUF4KkI5Bor+-v7{7j-BRc=$OO-DiZ98)4L@f$K|Bm7+Z@f~<XJS)gWI*v!=J!Ku%F
z*gFb0$ip1u7RFqUAHEi`ID;lspt(dh#ScxXtc(P?WBx>9T#hT$GuFG!UdQMnK@U%&
z;SL5e!P(@>OZ)Sr?&Qo-P1f8Ed9Sh9kFyU^51F~WF4x_w#!dNL>7Lh<PVRKG$nl-Z
zZq>eKn+T1s>@u>r6g&yRqTXO9G<!sX+aqdff14C5O0-ecP_ioa)k%v4s%^&K&tKip
zhBUjfV}DA6*IKr7_hoD6Jt^=Mzu}a=(w}uXP{x}EV?LdqPIi5BxaX`K!mW|8zqU^J
zQcb2LN;-4Q6J<=gw!eSSBFFYj>n$%I-@SMB2sNRx&Z%c!{!e6aw^#z%O0RAvbnCYT
z)jp?O4a1}-99^!*PoppgdY~O|;5^#Uo-<DxDcY}kb8r8=(*Dh>>}gow6yNLIy$)nF
zIr5j^DqZZtbeN$?^U6CRT!wC6MfZJj!7;ILmpK1j|CmcmT~EvM#ct4*dcM(dRog1$
z1$ppl^_t^^$vHgn4Jk3i)O-FzyPLW0RHT}3^XQ_EoRl4$&2DZ@?>(pJEbHgQSfBZ1
z3Zs#q@R)I3`|g;h>-Pr}gO{CsF@Fk##kzEgE`xL2&Yi0JJX5hv->Sfns5Q_gsE()l
zWBX7<c_G@Z0-kcdGz9jo((|njEzHV7ZaVgF^;5~B-ZSXDoYh3gu||(tj)ia2eOb5A
zu@afuSH2!yx9Gc01~XnnM~F6K9v0xR=!BiS(Is&^iN9R2Sqz#)`rLpia;>NJVa<xl
zHU?D+gA=+?3=km3EVVP;u>mp;5xj|IgPsSd@v!;a_**CUa_-h~UH+Z?kY?1N2S3=f
za#+~JFcwJyB<iu;G0g^QA@pXgO4H;D9u+vpmBKM|HpcZ594DPfvqd120E82faCMCW
zm{E#B>qu=2;6GK+Yp$@{E3A65-XxQZW+L_UNN9sU;65ME!G{*uHO+`|nZUq_Fw-~7
zdBQl==yoO>#pBH<%tmC^Flcq6bLjLL2Y{ZdIjF99wHh*tIqRM_Rywj<dlx*caNe0H
zt@{ibcL>d~{X<!wmQJQcPba$X@0esOk==Y<5@3<MLnGGluLTEXYv*@$OG0ty_o*r*
z=MF-#v+IYRg;S7j59rJkF-7qJN4mopf|Ht)-Ge*kdvd%ayKav6MQR5&$)nSE2zwUD
z?mDa{k>*~RO-)47^BS-&+EIbImoi#*4akp613?`D18a5MW{}Dh%nCi7)M-FeTDZY}
zi!1IjjB6wx`v_-><own?WDwGE4g2ATLoV$T72ZYFY+_<kU0B1iD|ug?4D8x^D0620
zfbLc&m3#g0!fC-p5V7T01#JzXihzf#7v-p^ldD*EU0qa_+Y50Z-Yv2^fdRcN()NGL
zW}5ZBfcVuodolyoopKOTe`oJ6r2($zSiyzcVU1O2dSVqP7d`416?PO9N<mitu1;nF
zp7EHU!50R=aRHSx?lYiX`xDZim&d(-5|5o1cGmHITxzoPj;}K|#2I*&zs(=@4zBnV
z<27S$gi?YtN1!v2oXIbdbdlqzE+V91IUb%$<=JMyx{5KNQmC?w|LTG;3OT$E&$}o|
z2BuJGBC%35kxL4^w%53Vyp@OzW)-DsFWrJkgmI!UbUsIh454Nz6QU`Ui$w5tn?XHT
zTsufb!h|=?lu(O{Q6k>2n27EHK=FO=p~mC*a91s5O$|r#tkX^z9RJ>LY~+TE$DUR(
zQhK)<&m71Mzo`t`UE|8<`LRp{awwU+B9R|0@zvbsMDy;Z<{GD;_)>knz1&g$+>Jtz
z|AdL%F&cQ&$|DENj<(*i+h#XPh3`#&>7kFlajK|TMg{{iE~#=2jpAst>?M!(nSX=h
zUhOD<v?-c(0N4L56!k*p(GZW&Bz=Qze2Oik+mq~IntnhO2_<AbPv4J74FIz#N>U07
zXm?CB7+^gqB-&AvC0z@civZrPpG4)4(@V+&jN+XlibP2tWb;DA@A;7eZ%MyO+iKxD
zpi+6$_Mi3d^I_1XOG`gP%AVGcflckN&#Z3LOY<Phrw2piS+#|mr9WrSJV0wQOH1wP
z&e;)&;sGbp^TiLBYx<55)*`T|eOrRI8>{ygNJV)XLU>WcMAM0qb}}_H2Nj*R$Q<-N
zwcr#{hsD;j@7woT3(p>#tMaY+Tk_kv+b7h=dV!nyOj4sQ5976OpZsC!>|lChrRO>M
z=($ea=)v{zj@#8mJWN|QJkXdl<%zqEh`N>pC4x!}mWwt%G@b5<XE#?tMi3saZ@51>
z8syP8_`z;RP#9Gz+d<IK!fhLFKaXhv4pfI8yXwRYW#+uzwzNql;emrvI8P2Qsu(%Y
z4@gHAoFSi>%E=m5KR+Rv+Qb`+;hI-@R3s+LUmJq|q*gU%s*-|}{#c@VOgPWd>-r}j
z|L_G~0oDHo?Kbu}kmR&;{<PbWLcz486tyU^tLM3i@P>mV&obpiY`3^gsx^rn7R)9D
zmSfkXq_;@`DMOihFrdL<^7<~<eDRdxnTYdWyQ*3qn_z$Ks$D%>ZkvvN9)44+H+evw
zbK|@vs&mxn&*nW%=EdWusuB_T34#)S*{Sn8;&4o2@&ONo-;E54weRFzn8%{owe;gc
z7{Z4Xr6ljT7$rD5mS|SU=Bl0R`}mNvM&FQ!l{F)z7im&jR4DR<52okpY)*69*pvF-
z&9Qr}<nTI!Wb48k)GlQ*g%N;C)c}2EE}n=(<hJDm=M>p5tM~PKFZtAjYOr-|c1)oH
z(_L`h3^k@C(grnWStnaa(xFAO(UbW6u-q3rw)aFfT+Vxe4b<{#=R^LRSmGl<tBI@r
z5CZ)I7#<g><yBx+{{n=M%=+;0v|d*VNV;tF_Lb|7h0A;|5_Y5K7F^><*A^@Y;2pSO
zb{eo-t^|oZN=Bp0>AuGRSqOHQDoP(B+|yj(E#gPwA-@C<H_?n{)L8zrMc+Z%tK$T@
z{00FYT88MO6)`@pRQIJuE6?ZTsGE&WC;VHYZig$2&IsoD^5n!c+uYYRx*=SDsPa4^
zrCs=gVk$8@s{lChmUiG|SUp}RfEwJ1mD4}Mcz$&;ywc!Acs-sD?VUR}RSX49H@7zC
z==W5@yg(~_5jwi8SZL)-d}C0W#N}=PaV%0(<l$Uq_hLpN=0Q<xu=0lb(morT<>cf<
z|1PNoeq=%{FW*Vicx<eircX4dH7pSKMp8oRE5l;;WFND&%ok#e=S%RA`o4G-)Uk^Q
z9x4TCH&80f?M<wng1A4HD93R;EQto!d!QMVYi-7Y6o4qWrowm?Y`#HS?@XXcR3%7u
zeI^Adaf?AxeE+iNcF2Q=p|^Q{?yA&gCaDAYC!khZGYHhGMn)3T5&?QKgAVLRvpINa
zn3udt0L?bO)z>dFFEy{1oDwLU4F4(|yx!*R&UmY96-4swL}7200Gg?#*O(1vZd37V
z$!j39dAsBK$JYnQV=90B!-i&_`q`?$|GnocsW&$q_v~%WX<^tB@B#$kf<;;d8fyOU
z7$8oQ^q<t0V!hq8C(jZu7Dni|v;^F8k4>jFhPh;%k(n}4V`|t5rT(u51&-&jaD_Yq
zLhrqZ4jxf_HsiDF#i+t%?{^nv-MMG<b2VAr=jWepfud}hA+U!VL42^q2#!>z1~*=8
zwC7s1p{fp4;=VpI8fUp<x@o@Qh)1Geb2On8oMw{69&oLUBq`Rq-V$<)+LadBY--3^
zo{4Hb^4TWdI^m_GI{oO@Yp%Fa>CUub{pMr_7C|-`&QgL3HmMhuv8zZP%mjTTUn0q%
zuP9X|YL(8JjIgMbJLE=K1%IncIB#9GgYar@FQ5c?Mlk^#Y5Bl*b9e#QPPq1BI37;G
zZ88^U=oo|i7SqDu-i`p;`AF2D8rI^zvrKjg@J!-tL*z*+mx=8;NKIy&=q{EEs#S3o
zk`2JtQ&bW^k&{<eD$|?RUSq^Kv&@L$>?0R{4L+G7k#w2-S9NRK*u(%0YKA5l(x%xR
z=4Y#hQe+{Ps?tH|b3kTId_~G4&bkw1c$Xp`(E?kfYaxKE4amngS`-B@P}Zc2s-(vJ
zsk7QHd2Rn*NT><dtFEwnb^Zu$<&N-PL|3ck{;5}1%Z=;&W&!^V4jUdv?v+dNBJEPv
zo+$2?!#(WBQCb7K6RYMd31a?~mKtB}Fs3_>pC(^|tBPHbNaXaw{jrl)boe{ApIWKj
z`+m1ILC@JQou_g-4=uY(=bxQKD3kyVa`yC;W_h2FKe^iOtn}L;yAMqQCA&OVjR#o~
z#Tz|TCSmbm%Oo#>2DywvW!1w${#w3nIjA`YK|llmZcP0W7!LyU(gM>OQGI$R*u6K#
z5>)_X4?@HqkRk|3u{`FXV>MWlS7NsEu7&wlKtMgUA!fFSV;b&#p5128uI;EwGd{Ml
zt`1D(aja4u>~5`{6(1IvDjiG-bZ{dWcE8&b=GJIu>fIkFx%Pgvr^{_wal*Z3mHb7M
z$d79`veR^YvpQL`Kncln#ddq^l6#3{W(`hJPSqIN&nH<OEALR8Lm744!nLr}txUyI
zoLT^ipod;GS)A4wpm*XrH+=T0z-X#d*ER&V2=F$1D^&;teW>G|8Q7gDw|v9Lr)3$u
zkQ}ge8h2V^>ZgKi^#gRa*wRwDqhE6g2vcYdf(fH3cMWN@(W3PvBO97TPOe62jggQw
zeL7OmTC7!c?<A{afX|i!ybfAR46R|&@b!SebUmAp=wfhz&}q?PPvjC9An2indSl8@
zUb_8lLv4n3{HK}ypRJFfRx(5(-8urX0$`0wIEE^8h@@Vtk-HH5@GS&_v;j(L9E_tG
z`%$S@jYU!QyO(bd5TEUDWV_){EtUOl>zn!rwAjWr@tpcH&4Yg**Yze0ALsbfV0nGx
z%G-|aTUpo%UH5z(;KX51Ey(*AOGo)mJ`Z^;vb;`}B*RpS))7ox%+7e;;nV!(yg2D7
z9>1B>3?5mypRW)lT7n1$Q{@lAio}&7+9jMU`w7Ig{WS|)3nmfxHLH+eN@9RhLAjHr
zRa6?<J+b|Y+h5mUEYxazxunk>BbdYyGF)|oiSoONuD+3xvDxrQ|DlmRoehmm9RsO3
zJTyG&!~14=gzDa<0KcJVminUuM+=9+iMOs4Kr^{hRc1&c3+!tnwdE`W@jwcO5qt`?
zjn5>M&V9;(HaLb5mp`tc>pGmdBlY1=MpzA@(c7?fKupbN3R_3j=2q>yg)(8?&60(N
zdCagS$3#Tu5xjaOtm)HwT@9uBFz-{A)i^qI6-=C^4WJEZuoFnoeSPN$!{&6K(AgV}
zK6Q-R6b~FwVo?&T@e1xPh9vNl7IkU<XR2W@8&E%^H^l9Jj00`~_Ou=Kc$NDtNNZL#
zOF3D(=k}zpYDJbG)b?#N811dRVoMxdz5KYH#W7_PJnoaIuhe{TK*oZwJ7_taLR1x1
zm3Maxg->loBe<*`OANY!wU`SDpC{%YwV_$wa&rbK`;CqyNmbqR{0*DU^Js}>q!%df
z?(TW?hY8<3Ki~$y!F6e{=DSujs@Oz~`e3t#W{Z_$ptOl5U@o^}Wn;Z!T+lW@O|q23
zuYF*{u|3o<vngS#t=-N=sVr5UZ~B958qI;Nh8F5XP`=eKv|$z}u@{ZKn<rt!7Ya4C
z?@leKoz}i(OPAA}%C)-TEP@@>^mOCNt&-T{7==FZP63z~{^A<lyuyD&l~9FitB6@w
z(B8D<s~<%HmwG-EYig)<k-Yn$^Wc^evK7w!fL&);TIilX{N=Cr=<ca?zL2RpOWz6G
zp)UvhJ7CxVBW|z%xCx9ra+o2;V4gs17b*hDHQqEB9azgzPY-vI!wPtce<)kVpf9e(
zea${ksK}5T=d&ALV{|gfn8s^77f>z(IiT@-U(dI+ky|wsQhNXWeuts2^Q3GGacSij
zSRrG;aYaJw?!A*NDOtmDs%Cvpk@LEkd4v5qLrCzNJRD}UX-Ct+g<`RrQ}++}nl~yO
zJMN+~35A~!)6|Bd(dyYZC2L|mhN~nGo8L6Pw&|*4eJALn%OX+9U1c+t^~wRd7DegJ
z7RAfzsj!sG&2AknXEwd&@E`|WqCus&l_KX)p!w+PCfYC}<7;AUWQy$>(HzazjX3Ud
zuG)R}-aC>qVb+Qu<)U#2Q&6xU72sXP->7Ag&YR>u_ahAlmL`$G%RA_#OKi5Ujg?Mp
zNe*>y!N49ItB375!1M1(rr*<@L06hguGpv^q#omrD>{_T4{uve8QJEae~I_4_JdqG
zSaSKxh}~fJ9`<h?LX`6d=Z2P8otw;VW#VX6p7!sm)}>6AJ{86OVIrgTzLCCC%Ea1N
z+!Of5u5GRJptxSMG0wr93c*Bj)(v5<NT<ox-06{sLOqhHt@zA#Iy~9{D8#lqFs+vp
zefcry9ObMdyTw*95)j26w4z$m7)ochkA9G3daERfRZV<X3@J}l(Hj%@Q$B;WM#62~
zyC!B%_X6^WEtHa0Khnof*q*hWEhO{0+3Ix0qrmeQo{G|gD=f|1;Isb`X{7iWyQQF+
z3Xx-#@<dCL<Q$#KYZ3l|Of%aotgfAhMWFGq?>;DUZ64$h@MHg4KlC$PaTW769u;NQ
zuZ-eBjzWiSmTataY7o!!<e{?SYf@dD#9E>akDV-&G+t*p3q`PMn_A|<x+-eZkdcBm
z0-ZIZzH(9q!~*hNaWHqb2;xl#Vh-;H@MWrayotHV_PZV1^V)cvX6}g#g-1GT72QD5
zjza8%7j~p!iT)iNU0EhdUA!Yh@Vd&EQgMjvrSey0a)`q(rQXeLBK`(;A1{@P@TEKd
z*_Z1J*o}+kh&Zv@X}Zo9-@Ub&xEe<%IcFGK)|N3H`RqfN^GM7G@#XoKILrq|zzBEC
zCGd$_w-AVGk&3Lj57rDN>sJA>&_u8=uYsGeSg7KzO4o_o02{XJ%XW7+D82I#2)~;)
zMp1+qJL0YO);-&C>T|%tTe;2!CN}yB2%nh4H!kM`i(ifzgJL~R1H}Y)7=<vTsYmY_
zXr_+EkO6F~TDa084cIsyV{27RtmZ<M$Q7{{lgOImTv$>Hh+V_)il|x!sVS~)yQM9M
zy{w1;VsKUp1Iwz23Kx1@j+o~~ty9F9%GHYeiZ~&YCCoT0o?-g&x`7nAKemp8{LdsY
zaD{|*Gq;Z&XL_rIQR(ynw8T#7aQIn`Y!c6Cz+~#zW#YGI5_oDKy3QXVDY7IB(x(!R
za5dH4wIp#eMgkR7a6@wN>*MYF^Dmi5c`Tbt(J=n?V*zdvAo|KV7Q}E&b534c{SxtJ
zqK|E|@x-d<=Fb8@{8RTx=ku*Qb~teSf^o+yzbijP`{KfUaUsv&TEygE{u5Q>kbSk;
zVlSYh^xxEqg@f}HwGiSVW?ZDh8$-!=`P00xiK7(kKW!=cgWLENTf;i}3$j?}r3CRt
zS9&uyzTE74SUsHNZ&s0wV$4veKBofa!GCkvh3I4>I$QmQ<<wJ70}Ir@N)8yBBN|!B
zW_A{Mi(16mW(LjAc9|R^`kg2qbfORd^CWJ0AaI|Ioc16F##@LA4g$i<BZnfe)ezeh
zbf;f<P$xc1Ks+`+@VQg1s6fgnEbTz!i8oh|Hf+b&wU)=(4*?~o9^6dMSW2r*`hsis
zBVVB~ruwTc_Lfv_nMZO|*J?h~Dry@Xy7W6LD3<3|m2T~hmLvD>H?5d1n0QglQ<&&G
zP>D+J;~js)w7@@#+48H4nzfE3P?;ramV2E4bBDG3TJ<<M5}}|p8{4?^a?(%47~_}H
z_DrsEWOg$5>C57wVRodi$EgfzSE2^%qRk1!kd>Pn_0e9lQ3`QS;#WaO?d=)YZFNmq
zamKm*+cLdqqmfLokF@K%y&)xR)zx!bC5v<Sb4dkOb{pfwUu<kTxuMUt*45C~$h&yF
z{JxqUrzC(`?89-?6}pD63=4iywW(H9d@P!ZoEA-vC`k+-X8PAPhm_R4CKrqJwR!}<
z%fXC56r#n8c2{%go{VC$TyvQGzv0e1wdf%=L+*U3+ntZHmWQX}a^$=G#nuYy36FOF
zCKbm@8=YleNf6kb_RtHWDIyMPP2_wl*Qi<QCsNDCBZ1`asaJA!zW*n$LHJc{{uh0%
z(#F3~KcY!^S+Dtwc7L|M)=D2&_|TV?w8XoWB}#`;PW$s5cBPMmeud0IcrbPyqM{i@
zl6|>pWDT8WFWyYfq+<O$>(%EQ6M>x_5qrrbWA+V;q-iZW5!+7K*t$8RF>vN`GO}7!
zAG&tNiqLbJ)FF5BGfr|i)~E-z02NS$gN8J+xf)rOX(r9>{k1Y@BJsIS3++C8(dviv
z#QfW~qHz%}#T@N+1bsULXB2k#OSep&S|X`yH=E-guo#Ts7=1;8zCXK1eV>&1=&m~7
zuH8N(Rw;wHjwqAV*c(`FYd9PX*85G}<0>~9eV{6xJ(UL5)c*{X+<Vbq*(^a74)^jT
z%2SV-!r6NJ3X1A<a!Ow}Xe%k_xU%x{o3P8E`fO_-KfeDroK8jkN?UhrguvoWvM7)0
z4q=lw^k5vW-(1(;zoRjIV85YFh62G*#1Ja70I?!gnUIR~X;z^RO%%9VN8YFvD)a<s
zn1G3IqX|CjvCuU*DljyZWH$V5cB5MyLRWR|r=K&lXW3|_-YXv8-Vxoj5>lK7iS5g@
zK`Uyk^_E?x)sCUR^AXc7$z^C8$z1ovKewqAxnesr-4q8lz08|x@E=v1%hMto{XLUR
z)&WRI-GT$9C;Wb$>@bbsO~#-9@BFS##5cA;ZnM3kS?K$;h^&>R^M#!qQ%}3y%Yyyt
zF~VoGQ~S8*`g+}lqq&Na$>Ub%nK{gAN!uTDHUd9t70d+(=75pJ)t(%T$2<3Zq&r=q
zx>_yf5<%G}!2b^<)v(Fl#aq5tE=rb|!*F9-h1{;uuwIQzvnj)xwR`4J8LdH8AV0x;
zu!atJDiag5PgJ7?V`TCwLvFSV)sdA6ZIx(0ht`e7q!NuMH5HvevaY6I@VB3U?LFp@
zl<)wqWhzNP;mGBv@joua<JBe7a7ofmhs0Al5bW`0Gv#s$fP3H%JtT~8$xF+nYZX}*
zCP0HIi#bbD|IGnEK3Mb7k9Kie$2&WvuKBW!J!j}vDIrJZ0vJg3{4u5K>>Vo`PqaD$
zpP!KI!SAYKO9s-WF7ZT2_(e4<Y8DHi0|u-dId|lF4+Yw$8pIsKUA!*Og49kVmQa+A
z?a(av>CAyhE-^Bi8W~m~pT&Skf{XkX5MyWQW(Tw=gmzr1TD)~EJRMxBi$T}$_qf)Y
zg;2;0B>GcEy;DntG$_Or?yIeY2#*nIl}v!2k9SmOP<B)~KH)EJo8&85q<n}cyMnKQ
zY`Qr09?o_pSJA(FR~_;BxUaf4dFU|5=4yZwD<V<MkCp_yUrmev1NiU~B+B?l+zgeO
z#*yQKV)f<bi=xljsPI=8scH(wgtX&)?KJZlY?ytII8lq6Z?DF@<e<_T{sn)4ejJ2c
z>r`aw;M}M?Csj<t`8A0Q!fkzVEuCbTA*(DG2qiISeQ{~dHG~HAIWbQKI<LdWKHATc
zs?HUl6m0lFy)tLS)r$Tzr)O^03npt{{uEIzdReCcjXp(4$KV<kB{}C1stl(DE*VRA
zqGV#^1w|8O9}d4<rKA5N!@x9U=BifIK1r5UCUUVTc35_^8NWxF7QMU_a`{e_d>hq+
z)fS7QP-GclsqAF_SeJjnplQBdYFS$PSF-(1BR(ev6*2FkXALnDUyApH+{_R^ODMh$
zx6&sg&%_&|y3o@l24NC`ENS_ra{`HFGz@Ia5MKPts6s!zfoqs}#dc9?<jct$6l09T
z*@8%9INIuTFMb9I5eVn{>7xf=eWTLH8Sa9FzAEN4c4-6oY%jLRRdZRq`9Z8T&cdkh
zOaX=dj<%UgPEXT_HocbKPeN1sOW(5Q&_Mlu!%<(e8C?6Lqu3yxHA5QRJ36dB5J$A(
zLGKE|kei{Kv7FRV%dN#|SAWkF`U}@H#`oSr5ZnM*H)+e%=sYgxgNUgB+e_hOFu~b0
zG+q@48aP*>G69hHMgM+|C}H&X*o%8yiRGAVAs;0CW`oz)%~$yx_=1NzvxpcRo}z*v
z(R||(?#%JAQMP4;_U&c*6XSa;IT{Q#*oUhB->UklYVPk>BLCf6Cpe&RcA5LDYq{&P
zzp#t}tL>xS|GHdWZ&yr8->_9+wYafvMO4pr1wVe`Oj+G~LlMJ3!utX@zL4T$YrWTm
zsrLe|*v$*62|l2Rl4j@(Ld?3PC|YNFiuZ?tu|$7Fh)5(Bio|2apobL9f(5B^WQ9gR
zw9&sECoNP<&NF>|)yiC;K?9QuC>RIYug~KWxL(%{(s-Oq91NNTnv!@-y0OKvrbH?V
zC17K5qRZ0CWdv7l92*oGU;wW-mH6oDaB0zoKlPvN0oCyo2B9L*QjbanDyZD5eG@PV
zgT@>q0dEHc!1I9x`|$o{Q1$m9!o!tOOMA#&ztG={--c&dTZP)PlxphvB6VtcK6D?-
zNdO2KXObc3il|5@ivZ2jw-PtNj9}s<eGyJ$H+EPTIOMT#2oAu7u?|~dQv<PzUPv;F
zqNnm<@#1PDhnx&SB?j9xE~SMuNjjG}p>aQ_Y=YItG!a|r%E!?QT{jpM=QT<M%ip!H
zSGZ%%`s<hYw6?_G<ia#jD_{Q4UdOioYu8(@s|UAS$8w+QP)&t@OK+;?Bv~s>f#*sS
z>K@4@Jyud;C~T4HRl}k6nA)ngfp0_cRZ3l<_nXy6>f@~nX^$z5Ou)*mWefv?KlC__
zO|pYY3fJ%wKc+~@q$~C^h7pAZqNwL9MFLH`(q?8FwSoAyqBMLl#5&11HivzAY=(m5
zqnOr*Z<k0)GOb!cK_HOiic&o{RYgUU^gS$b+{RoJ{}cMQ?T-L96(}V>1JA=NNX&x7
z&ags1P9pJ$$a@_d&Sn(jdGw+KHD_SYWv2lMs`q*fqSY~N=gmp$D?|M<i=tCl>E)^y
zV)p|ZEK(@5<f(VQsj85^4qaKh*uBQyBw{5%zFWeE32jw&Nhn2Q8?XP_-fUV`=Wt~P
zRmNUyx5SGzK+^WEvVp2dUU>RWTy)sEGL!~OB(kYYr*!Oq!^sg&R~I_DM8sq3B7;am
z%Wlgma2ql)2T87);Ga5W$b(lDWk?D=7N(3NTfD9JMcsPRdDI#&V(o=7Yp-%1Ql5gP
zWI3qill>}e0Pg!1Mp1*Jw9jJ#XNSXrXnFn<=67hNcQTCWowo@#O$j6dO&ZdK1{^rD
zo4iJsKms{cYg)%VXid$Bv07CkC}IU|ha8Bh$dbfDzLa;Q_67(cfl;N&P?oMa1SZGg
zVc3%lcsgKoGI_P{6n9<b)6uk?N~j2|{!T4V&QxLRpo-P>OWc_6)K{TcqJVMvII@Mr
z==Xo0V`mo#F-XP;^&r;dxYY6w>LSIEKL~*%I|bQNc6L#yl_n>##kLsmnqQyW-iage
zdrn5Gv1~tmG{8o2cPBWN(l*^3mt^~n_!^(DM*3$gn!VFkM5MJRjhIK^g`KRHL8<bP
z&SAiDmkZ_HX=yn3j{%9pUwp-)QY)0_84odlW$mukfn`u_B6_o?R7q*`wlQ3Tb$BD>
zebcQ)*6E-B8w`E|VQHC7AUq7BLtdqONm#@`uuHQ1L)#jE2cqfmw*T5C+JD@L6ws@l
z2PoOwwiOP98XH(IO!26#eY17Nt{Z?(ns%av2Ol6~nbIGHQGMa81d8pZBw$)1z9u!N
zTKO}TGFELTZvynowovgFs-SCyv)89vK2^y@DUj7E?PUjU0}yC4ThFpN7SHsX=G|`p
z|F6++Qmb;RKUGH~tUHjDU)HBWZU!o9Uh_N|xm$L7=1OIoIFleaq3o_!BLF@t0`z>v
ztxWUoH9qS;yTs<;VI`#q!l`~Sjd1y6GDy{_GLKyKi>`G_dJd=U$|QGj&`66HRG^A)
zqO=DtU4)ld&06ABP=Ga8j-3i~Z?O1=b#Fd5Dgsr3%19b8g$IU3{NitH!u>mNoqPrc
zHZiQE4ZB$WSR!V(PN(M=wdF>`0byFT;renyY$&5j$*AZ=Tq%gOhp!fSdw5cTJBW!q
z?NFncb((6(##tgUzgno%gcgGiY3Mki=_OmI>uba`!G5&C<T3RIUOv<kH8XXs^znO|
zcoz_*hIoo;q$}tDkid~=^E?mxkHV~!wfW**`;IhBH~UknG!9Bzgun@&087v)CEFkL
zSU5y)Jm9U?b9)vGB%sQs>xZX>(s2o*7dgY?zs~I6?$&1<2bIKWp50#LBk+pGKB&r8
zaE29L?@WV{xs*dv^6;wF`nQ5elFR6BTY_FtM2Z51bpW=5V)VeqmAJJ}D4Sd=-5|$!
z&?~8~lUj9!<m54>5vSCed0mwocwXJc?)>so_Zte=&X#yxyNy|On+?df4at`+L48Q&
zlQ?y02<_0V<<(|Le2SLtV}AHh5Ylkg7XZS<{UiNzf95uPB$4QCxD;78nrE^VwhJ)Z
z*kRF)-2_On)Y|li@SYEt56x>>LHchYcY!OgtOF3`#-DNowqI1%wMuFP)*GSk)^4bM
zHT6P;qk_G6I8+C@R^2Ogp6Un#0AApt>u_&N5C#Ag>VI$bYwtLHvgy3lS_#6FYyUdD
z1}?Pz-A@a@89Lt$0RV`uyg~fWto0IcKy{r0p6$P=k9S!xl0n2@_U!C;v4OzMd<*Vg
zYsVlNqiHhE=@|4t&pI*QTEcr}gCArsxPxX9j0Az(=lh3CB0e{Ow`b?{&UR0Ke;5WE
z`%%mUNW}Le`jb5mqh;aMISMB3F+tpE8{8xd*iOI&!+qpv3?fmoKwxEIj}#v;l1_p+
z?fq*YzOAI!C<@pO{s*|Nkeb-4ByihV*tG%FWXCe4>!*RZ%p=|`(6(vBLZbk5U#bZo
z85GdgF*%bk7E99cxgQuJy$zNHfO!<jCDxFjzCkgzDJudZo4WK%r2yd0`76m1S!co6
z_{(bKC9CD28A)kp&$C(hVyVw<Ac7P-&eLd{D<C@|aON<DUk24Iv{AVfHGq7{DZ>3|
z`eIoK#H3>!<yon>P3+n(YA<i2TTe~Em4fM>yL%X%-s~l{4WnPdyU!-%YqZj?wn@*d
zq(!=3zD_Ti<kEP`LZD>fx*EW2ycPtBFEZ4YImtDunUs;eFfQ@t<XHw-wRUt)jLj17
zLc@}UmwfU*&{lt*m^OKk_=7o%SSBZ#)fV1iAwTgxJf_xknBGiEHakpHHpfi%a1D8H
zV(YPbbIl1lZOKB%E(^R`<+d)!!VT9xY^`Ac@CiyS2Ca)E@LSjY08BG0Ju(wEsR6)K
zfo%vzUC0oew!=dRb_NzB%R?%hy}C#>_YN>U&@|`8kOvwvAT16VncW{MWDXgk+1oH=
zqKUmjW=wIdh?a;U1{J+Zar6ufSy<{EvNE=Ph{eSYl^`QARLYz-REF-_5XaVcL*+Du
z$=ERCn`_6CrBIF(Ns{Hl`KM-I9e0w`T|h#zL*{`$L5|WDk}Ro-7FRvJRi0eQSi1N~
zl@b(`q_UYVroV8p_BhT{BLkG$Wxv}uI2GI)oDt>8LoK0GG6icW#i{4wmcnk$&J|u&
zF53o#jk3^!N3wB@zMQg13uB_>mX-8me;f}5O3rW`r?YYX%v?><T32!QRyZI*eE$l0
wGB8)Q5?n+^0jCWsUnzc>ZKX^k)X7XLN<ZrC$7K`dMQLuXqJiLlZ!xMC0S0U9%>V!Z

diff --git a/assets/inter-cyrillic.f8750142.woff2 b/assets/inter-cyrillic.f8750142.woff2
deleted file mode 100644
index de6a128bc11ed2dbc4976e69de1ddb4b240ca6d7..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 24680
zcmV(;K-<4}Pew8T0RR910AOeU5dZ)H0J3-h0AKz90|eaw00000000000000000000
z0000Qf<hafejI@~KS)+VQinJOU_Vn-K~#Z80D>GZf)EPESh-a&f!qQCHUcCAgg6U=
z9smR&1&0I&ARDf!70T@soF{<M+FR|O6Gho*ZBh3Bw*)$5*rE@>&>MgfPfFEer<M~i
zfZ94WDpC2U&YS;f(8r9w{{C)%zVx07sxnGpgHn}23Llk7-_z9LTeWH%ZCkfei-u*D
z5$XuF4wkDltj9*DP|etBPcG#XzgC9E=Z>js;D`XizvHyXdydf9C%N`LuhZZAkSSG;
zMTsqA0m4-#3RVcl!g)wf@{<uD+lu@Q5A=ius3FN9x)AyiDP5V*FP%*IwI`kQPCEIe
zG8raAO4B)@wlyH?rkH5>q?njgSY%k3lwR?vT<0Z~{Z#n$YhhWLQsI+Qp`wzZk&%*`
znP*0q78Rx$l@+C3T(_50UU?UpcTsVd7gW$~_5;8Kk^~;uZWgt4XLj7%^Y)S@F^L2r
zOOeF>670W}<o8-R%=eq$Q1krepZxZ^wC4M5Yl9GJ7rL~PNRiZB-fs&6(%P^s_Ar-i
zZsUzR@c(72w{sJ!s!>2_E99xaX8uTvY=OOOt(UK}7m+8{BI3S(kE+)D|37?u0-qoV
zf)q%B5=223ZPPa0nM8>xxyh+c*Ou-r-Mf3&w+H|wyKn1F*F70u_v|P;x~$IO<uqBv
zODnVl1M^R9+6PA@iLo}%?$VZY+na9Px4yUbxXH1v?CoCHJuu{^t()4^_K^gSHZ;MM
z8X7SrW@;v8HXUKakxb;P<2b?ypJBieM;tL78UU<z1ny-V+1@YhH6<P9v__7SxOZtc
z%Lhom1$^K8UQd+lbPwqB0sa%fVw!bb$92Z?$R0^YbLGrslk3my28DlF7PhYPfg#y3
z$(0Xe!8j7O!iKJZ_C)IZd3z_xono6(FNspSli&6VM!)uyUUqMFl5AxAz%mFUi~!MW
z0g4e_(Bm|RP?Xl4QmTCZP1Ub`7eh!7ju_GbT5o^@&Vn1^uMI6tYf~=D90%_WI5QZG
z2n|RXfwD=^VL*yHgMny+p!AO@LRv`X4>4;~9%95J5VX&S0LwvXW6E7DL+)IZyG6a-
zR$H_w6n(R8zt-D+6xB`msbj?+h!`><LgaASci;cV(#rRo%PDy_%VsTOEFvO)ksvW>
zv*&$`%><v1=4+p=ZlGe(;tf3(81irtQvL!CdvH!<P{lG7pa={l@mVZGxu~WVcc{{8
zATsO{8FV5;y#%q*0r8MS;$cS31d*XdWM~x`+9Zf(?V^=k6p3Odr`W?I%KAmG5iuw%
zMqSXxAu=St;_{GkEex(#0s{s>BM*QP&<z;Cfm^kTM8M<GD!ntX>)sh7DV7%`q@obi
z=el0KG3`<Tt{L0hChK)`0gJvI$!*0EmbI~90E(g4j1%lmH_9WvL=@#v0YF&YCp<J3
zMIpd!feJ-eb123|a~uFQ#qT=N5dbA<Bf5dWcS)MKphB;4!<icKEUZKhCw1%PmBK;e
z1;G62<QRIU02IKnI6&u?gB)31sl<`F^sqo7wzQeLRZQraWw21F5n~I77dC+Ar+>lW
ziq{BGl3lhkNj35w%AWDA_ktRt1GT-0y>58Fpo2fLlLBhrIv1&5o8LP^;g3T^3Q+bJ
zkM&S>7ee}#9q{ZHG}{iF3SJ%)C#AM(YQ_O&{}WQ4=;@XlAb<DL$l-UR&e~eSHpV~3
zh?n*ge@t{w45@N??k{chj}1uzAW6bazQ_E5xsAK8v4gjgHkn+<I${4bo@4+Bkh<M5
z=TJylUuJlp<}u~Ibpbh_#PZqowiJ~0r&KAYf5@V|JY>w=ekS2E4=3_yR)FJJX&cW{
zeU}A0{Jx{N!NY}&m+z!^r^EOd9BPjzZ@B?hn1&}mg~R8e!%fr~svDT~x=en@%a8y4
z+XUnZ6KQh@&q>ht)aqds%d;#D9iB*8lS}=oVX8lW7$pPcgYS4wRrczG*#c1|gg)Ft
zBZs3g3LM-8kKVZb?KwFQa<bI>Xz~x_v=zu_%%K(s4*0H*zzN%ge4$V%63T>fp+Zm#
z+l8uJwPr8wViL7l#NArOT5bBC?*K^`MP7$yl}bGuyT*t6_4n!2<$xX%gFgM@<u&Q3
zlxr;cP7l^x&EY0Elu0URsrcaow*d$sGBBEFK|}-S96$;HS_#c4GX@3Z;Am2H(22~o
z7J!1GD+ftP@K{m|4!CGGrv$EKeiczfV6KExtDLF=T|3F&Eqy!&qU(CK0h!CNWV9P4
zWrnm2sz79w29%=)-cizMpgAKX#qle-ETHQpa)xCMP=i?srlxuThz_6=OuFzafHeCF
zN(O31rclI=b2by4<ys++!YKcw>&*aYO9;~gq7#L>{A7SCFsF)AE?xRHj90J+08{}5
z5KN(fOo4(E$N+#LFyuvo2rxiUzyN@NWl+_E6f{B6DF|8U234waKyKta-rKB>5xO)r
zL#+7U{!T!!m^57MQo<quZ|D@;4H!U^AkG4A0Dw`6{R}w!F#sT<OC{E@SB%*LKn!m>
zhr>)@73`V;%!<4cxHOpP#7n!$@El$t?+4g%I0xsW8%wbjPvTYWvk4*X6oA@0ldo`Q
zeLvg*NC8JVDf~obxR(0kOHMx*zVFVz+<Di1H?1bDrawY`?n^HSUgfXx))LkPYoa$<
zZ^x{6{Dc0Fjt$C&W5cy&@BM1)Pai+l`q~=v(L!4Ks@o9siyYw6<B@$Lu04^i`H*@h
zYR^G^DH5;5=~p8CO61;(#Cvi4<G`N;{!fDb*B9_>p!;Wl{S`R)C$s&0m;itQ00Gwe
zn$C!qU$ywLf2f{+OJ#AXhWDy$mtp^?3fn+?5o2_qKmmXxk1|}Lp?4g#`AQ<U$f+a&
zDe=_&!liNfr_&(FJ%I@bu%Uwg@%*0^b`oLXrA9yXT6+H7a-l&W^l83z9S4NH-j5t^
zte*g#KKTs8geHM`gH#mj%gy6Rg;4;?gpljEei>u<*q>BmS1mqv6S+J(i#J_vGj`pM
ztwKp=N=~Lppz;~stpEY&-V|2e+_ZuK^Zp+(lvvXDNhU_Tb*oXPV+fN)(1KE~a>ZlE
z<rCqK0RfNKi$9^xnBDVs8Du=P91Kg3dBQd!<Ck>D2bmpW;-rW&U4Rh$!pOh9)f7MF
z!)H}K9<hVwFg)y`*6nn@)mGS*!rlkQVLcuZgVfzl9WDPJG~|Li%EQ;P24~@rz$?b~
zz=1J5S(@!`uMPxdcu)a!be<BRQ-LQ`Q(9&shR0MJJ`6!C>dT`ZfvTWMS)74_y~B3_
zyiCJ+Z(4oWyplZGC6B}L`|Z@}x9iMtHLE*Y``P~`m}zPXu^$1c{3k;fmcQ-`!2!@H
z0iefCjRX>`0vP|J38sdjO1&m+PVyKOHR~D`FaW@|<A>_X9Xugc%7DBu$EuaRiMzM?
zmW#CoSMEwu<8J<yd$MkzE-!)=YFtt2V-#>!*#S*xnmH9!tWYmCY&}&TQ+ZXlm5Y~^
z(oK+D168)P6`UaB?|otYTjmp<0sw_5g5+u|?NWwvsGW9((=~itD;@`)3JWX>U?tF~
zVq>>M32LO}$yb2SVbP+8DRh6$xSZm4B@dlmePja~c`1Bukm5YQAtu9G)Ei+I(DsAS
zg@{p~)}r|8Oqj6OJ_lTHuU3~ZYIebx{ca@posbUwQf`I;pvHlN#zjgUOW|kk;5N;J
z{fwNGIVdDdOp*uV1e3C|Kx$Ah{;>(R{~seo0BPtYkO2e!cfs+$3uS)~6@M=>2%s~%
z3o@YU{~3n-KZ^_ln5TOn14jHE)P#;qwqI0C;WJb$Q{#`6d~Slg6_jWi$Tlq?DP#~R
z=L6Xxi62KPpD;Nq0s|T^5m!n<OXQOjSgtTS%fUbsJT9p;DV$Mq1OpjW8hNQiM?np*
zC=Ha9T#3?7CbTtelay#@O=+6W9${>&^CRQqQVyW?2%yZ#e7@Y-fVoxLHWxWfm;#MG
zSxca$Hsqp&C{dD292k&(P(^QzI_RTygP9RCpV2t-yjp5%SzAS734vMZN)iQHnk{1S
zR<eqsI97I=W(jcwHKrNP*H3L-)wP&RTS^m%S%Lv8$Wcx~C10=phc?W>u+W+`I+jXE
z3#IXXL4UWMUi{^~QZvgXS7{&iH|JUXuTuGIB})RKib^TEv6qaTQ8ymskrtU&$^8%Y
zyGG8>F{O+zncbwBwsR_IS&UbeC?!jxaoWdwr00LMmSc@Lo_m)6Mv^(-r(lkucV)zJ
zXJ(RFC?OY$Po^saMj+0ZDj`%gGgCJf^*^m)H7zLMkJiY>wVP5c_Ps6jsC(Q$ZDKL`
zxaAQG<vXTkqRE3#H69^-LOIiK7C(TQ$K~L6Wc~i8UMEbX)k8m<$A&+zO85C=fEc4d
z&QjinOuucErtOa~et&MrVX8{;NLVpaZQN$MMaKm<7?CjK1EI-De7oE;X=q!r>#{^W
zV_8|3PIm2?+G_@BFqiq_KtW}K35TjP1NlChGv-(p2L6aC;c)5N?)oly)|N`Uf=qp}
zOT06ur`_&DW@a`svB+4=`e-Tphh}eIAMEMFgZ;iv9!q-@v$NLWYRP5m1%c2<BttAO
ze8mUHPJ$#&{%&>TunHeL?{b#@zIdix#)=%<S&hVBD!uKzS1Q(Ifv>6IU$!`h@-8C$
zhR=R_iXvY`Cgf|D54J}vd9;?2+?EehL*l2cm*f^LvDp(v?s`wjM@GnrN{e#qB&@!D
zdTDMqACn7a&RfzBVX8(N4Yk}P2QW+O$k%HYtY*U<tK<kKu9TXV**J`#{7kGYkwa)}
zcVGa^bEt(k<!L2yiJ_|FGM@#>P0vaMnI!eJ;`gd&irDLaF9>nVRGyVcZ!M>EvplmM
z=s7lVRR%+cn%g-5--Bm@)TG*<Cmej1j!)}*=_ss!FH`b=EJlc$*X0{gpV7|RaRaBp
zN*q>H<jNXXr^cJxDHfIy)H?X$Z#L4Ta*F*ky$FzOxyV7@UoK4&VQ*TIJAW?DyZqI)
znbpW+NgN6${5f})8?(<YD?T(=?e%U*kxN&LNAS*(xHtMq_ElvSn)UA8-Z7DCVZO^G
zZ~Gw!%wc>$?z?oUlpK*#N|q^0W_~vXA+AQoO|g$l`E8h>dBugk)-x}u%A3LrPngf_
ztgat16l|vC0IfIIa)R#2<oFWQPCrsASIp+-GPq%{;d31BEcZk4-+~!k>uP>7^7IM?
zG+tj^UXV>dvB7u*+4AiO^9?utWq2mV<egNky(3@)Hl}y4J@q#DXw5?kyIS(!n<ZH`
z@J@uzT#&_WQWPw^tu@lV$A<WvlSQ*7J7!)s3N7zAzBs_FWDf*0f)P6!S;|~UfG6@M
z%r`*BFMC?<O#t?tKuzu!N}QfR=BoWsf3O2V-#2clDE?ekDEwtr>RCVHI_K+mE)3Sy
z9Q!o0?4NgOwA>df-V$u<-d1EcGr!ZV44qED_L{zL0Q}`~QoGN#^fNU(?upuTm3FNy
zquA|R*Bh=~-IR7(vm;XHv(+A`uKe;_h_L#k%ZbXL&+g?x3Tc;@h?Hk4KkM}v_#TX?
zQFVtEeK~FSd084x@s=Ps4~2jn@K40qIB(ip=H*;6*yNmZ{Pii@$`#TR@xJZHS9iA_
z>iCepJ#Sutofp}yj_gUJ(F!^o!7l{Q1gOUsY5mQG3J8X=G!dx{ER+bz;a6=oxcq?_
z2W=F@ew+v~wwFH&xjVo*f?KJ^ihE2PF;|KB82*{i{dsmv<&?{pE2c%Xei%jN*Y9Mm
zxs{u{rt9u+8g<|rhUJe3uX&Ef56kYY6j!I5UYwPiP)sj<6qQKq`CfN$;<lop#eLB!
zE9xxy`G5CDjJs7<^@N{O`chcXARf*<)R`C#`WpX%=jV8ozX~y(J-r{3>ptRYfW*V7
z2;l7<xQ6X^J@Bi75G{!?MWOPbRVg2hw+-?rVR2aqssu<!6zKikKZm4no-X0j1UPv`
z#rqw{o>UcXUb(RDrSNSY$HugJ3uewkl-c_Fb2lreE*ngYK4w&pEXZ19n5^4A_3IUz
zm2J%2nc11>>z5lcQZ9(rUjB%bPs|ygwAQ`$4AGV~xj#$55M*=I{l<;|`YW`l<({e6
zY2Vpr6UwXsTRQ60M<15%;#vpA1rN*R!f!0xyw7KubwaV)4F4f=C;0`drzK^>8rt&9
zA2I&z&%~SUnT^lVG<|LPo1WJ1Ntg5;&3NaKtTlV{*}uxxeUp)~EhzEz!qDC4TK^SE
zx=eB<FBFLu#){U+CvDA|*oA9EU)jG52a>H;TfqwJpNNrr&GO5q-bwPI_e+Qz(i<DI
z{*oNHHY2Y?d?)CCr%g4hGJ=Z8Bnltf^ysTU`G^j!%$`-q>RK{mfmLE$XF}{l)^RvS
zELAQmAD^X(GXb&b5fl1V?50xD^S6Gl#QWn>JQ1IsdT`Ihr{@|k*2%7AwTXGVHT8qh
z){P-)s<In5M^Xtb9!;LOe<r!0rZ>6hetm7D)@vMULH@lBp4|cnAF`272$QWT-@G-g
z>ul<Ww&&9tZyCBSrg#rl6KN2;Y28@Ztt?gcs?&<KOHx$5swzddB9((ByQcnVMnYNv
zd!*#5G*vpZu{h*))Psn-eLaO$k39BWdN=1jwR`Z<;N14y+s@vSr~dyFbQ<7@{z^p8
zlau)scfMuT4dL#9Ee1Ou<Aa0`j-dF6WkJGQhlG>AC1#zsfApi}J_YWZwoK2Ou`jd;
zfq<xyU_Z`)W61K*-aK{l4<fU|V}Reg1#1yN>~?@ctVRR*a^${uHaLQYm#LlG2i2b8
z)u`(;M7~>`)}HqDmjlVHh#u=&73)L%AN#!A_Uu<l5|1g^Zjr$?u^JKj1`9@a+z(f4
z*@6q)2cx&G^M$oTt&1Rjg0LuUs?z{1ge$k26w_RD_U{9gG`U;OZ*Y=>DM-DHV%<Nk
znjc+L_LX-1xVP~B+THc(7k0KhOIB-9ZO)x51E<piYpWZUU)XjvVM2l1IO?of|IgIo
zi#I$~v;Qr>p!--8PUs5$73pr&AyFq_%_pH%Yx%Lo4hZabrO)AJQ|ELSMixrI|5=Q*
zq<%q$+e|DMwOHf$V_2uAJ9}OCyMhSxV#gH3SoI(deWAnN0jU=ZOBea)an>#g{(%-p
z#)tCk<Vi)QUpigbhHdpfr+y!z<9Oas^8LHN93B1g*U1lta<|v%vm@m>MY_S9g77%4
zJSYqO2*_P_^90Gp8u$pLXIhuStvE%)6f#)#r3LCoLC>qU{;DgkaM}0p%JHQkJfej|
z%ny<Kox!IL(D&DQzFLf(>WQ%R7~q3hfbNhEmn{AMd(9>0WjqrG!=%t(O#p$c0jxAM
z@TP5uf`7e3;q!q1GD7s&A#oWc7F**ni|JK!L7=W}v1>byxo{4>?eD$79APfYiCxxC
zk3$^v03CuFmP>cX?K`mdOaI@R*9+ab1wM7p)1!K0Vo&rnz3#I~Xaf3n65RRh%j{a4
z_4Z$44MUul^Qo>?b!Yp|yAw)a!k$+8{MI-BZ6ChfA7BmWu1o&ch{kDa4Tnw5<Noh~
zuHkOl+AFzpYubz(v{VayB%-#`@ABo!z&UlJx)|OT|6nJT0ns~2Z&OE%eO`uOQ|Hdl
zKd^i14B>8%apTU!driOC-vBqBx#TTF{LptFFV#xXt!1~}igowLj1MJhA}*<il7`@M
zP5x3&xH}`m!mhe7v0JhJ@0U(Hmc7d9w`0b2+keVg{rVgHw;KZr&jZ)89bC&%1{x{?
zcpFO);9^JN-=lyK&myvlAnBO3uPoMjCGxF%N#Jzgaam@C=id>3ESpeVs|#*y{Qkqg
zUs>0zfB5j>Tj!-DEk@|I9?5m;aw=;MYD~G&cx-#_LR0$x@BXu7^Bu9{#S6MI2e5xX
z3}!6I`d8>+hy1K6FCfWXb78Py|Kz^T!R_jg&$OH)yZ!r)$a1#&x;9+P;HU7C&+NEG
z3H;9kJO=e)D_8)IQL@Uq>TPbV?U9X2sfC+4TOIn!Lv#8DQ`3W0T06vdo~|6?Bhw1}
zN59_;+1EJXU-{ABQPvbzg=G2eb8hO#soi*zYvo-_R%LccCH6gG%yo0i_8Uv@W)=L{
zx$DTn^~eBH5<8@9E|*+Wd?{PC-tLrJcH>LBrfx)>Z^+3nKb=uWSm7+a<V3CLrsEHt
z#ZC2?ZB;j*`$6G6Edg9$eQh{S+mxH|@6Pn4>S-tG+h0%PlIUNG2V@}l9y50BT;|b9
zb{9inBeXi#`Y^*U)K!1lq)lDtlGDHuE2Pk1d9Vl!*Y*Ou^KQFq%@LgUhpx}0qXIOl
zk{#{Xn3d1D`mn_)AXBIX>UU~|XkfT_aI2Hh>i^&Q9pVp|QbXHysroCAV-GLo!{v<l
zeyW_h_rm&k-Q34n8>xAuzbVOY8T&YuqH9lWxMC{3q<>$F@WhyD_s;uMpvqzO0I)4=
z?nA0}@XzA4hi(Y0GvlqJ+PU)a6KPfUUG#H7r)U@aw>ZzA7+|I6Usj)}{$8p2XD)ce
zK7*&wUyZ<mtWN^SHZ-u()?q|{e3-(&x1IJt$M_(xCr1yhe<{=z4*jdSN`9#_YxYvL
zyaR$;0evgFZ$@!wecb%xRd(C!=_`vUxc*!rqV&Mfar)CHZR~1FPA`t+rLy4OtI$=Z
z`Q0t&hW#_9q`hL#T)X(@Z#y$*FcU#@w@|*|KWQ7T)Rmc*iJwsVRcoJN-d73r{ZE3<
z%AS9#hgYUl)e6tSVXnO{`LjdJe9@;@>vJDM11LPHL~qm3J10l|WM2CC2dpoWES!%~
z9X)j@zN7TO{3xobUuNv@D=9tn^vJKzX2S)R_k4xd=N3aHy=_B3Yp}fiKJJ@;iMn@g
z%f_2fYRlcX>>a?~j-ogU_XJHJAGJh1f{(sQ6#4k1-5q-4`6V#tQGl-=d_Z1&@t_x7
zykgJRt!wsx9SBCxDWVX;C2Xq#asH<<VKpbcZ%f~$+@)XkWc8QIN_W5f^v@N_fjzrY
zTjtCCe=ffRr!x1t?D5L%vgW$ngc9&t=MD1=HV7CLf)iYPM;!|V*bkmDVh-eD5ZnO3
z<0#&E;hrIQ3f=}$8m5uBkgFCD{Pcj65G;fs6h}D#`Pl!nnn2NKNWM<?UI)T-fhI%<
zbM#0MqV#z(LUb?}RSGzpjIfV3q&GfbHBR_3gVM}@EuzAtl1y}m;2|s!777yuXOId(
z2r5zwWcx9uloxZMZ~}iImr)3d`N%#sGm;xGFwvJH+@He*`~Q|&jpR#-?Ehtl{Zgf9
zbZ$nG1A_nndYS~lG(fEjfIa|znqHzTUc5Dh5mHTGgOb&<v<SoYl&<@e|4|t#E_2Y2
z%P_hgz?VEU=BhlPF*+=2h+<2folm^nQq!CCi>;~h5#RxIB@Jg_NWYA-Fw8{w?f-vZ
zGFcoL7}YF0EMC!+q6JW$4N(3nAK=9$v%Y|3gRnf07m|`@ei_)RK4og32q>3GJkEQj
z;{?Nss3EgO<Zb|85H95aUk=Wo|1lh{VK7oW&)_QMM^((|uUI{Wf#Tp=1OO-~0A$yX
zY~slOq5)b|7pV%zaIurHLTo1X7;9h_?5Dc%Y}9F?(><p_+$>y)UZ;=NyDMYPA1w&~
zSm>7PGsIK87&%vcz50pU;hLJ-o%l!iVGpOQ>v6t8)$rcaCHEW8K|(x1NXYc^@S5!P
z&Kta+@P0kv)r2oZHgN^<rBAv~q0a@M-+edxp7f*psr-8<PMDZ8u`?h%&@C`2@HOcm
zsVj&Qq@T2CQeSWjc}d9BkoXYuWL;=R=mpBvDbgv;Q(jNap89!OKb1fgQG3HY!xF+I
zVHc+xX1L9Wo1vRwrwM6~XQs}48{Rx?A>EDsJYv=C8M6~-@0opaPTZWjIae4u#sK3_
z#<xhnNLnO2a%JSM$kNEx$o|NYxo&f(&1KD953q_8z$ySdhT}JJyn;Wdz+xsa@B^S2
zIJm(HEW1Snwj~Q0_oV{Lb|jq?3QkLLm<=0j+Q7i?#04ytfU$?-nU+=o4ox&6p$|q9
zU`bGwCN-jjh)IVK-7!+Z#sH_P2JJEqZDL6vy1am|9veICVoc}jGAg)$gMxx4gW=Wa
zOqoC?vKZFl?bwe!xW&FXB7T{CJCCxR?~~-jmA8G}+m7rpr5P-+?6beikN8I(r=d1F
zQ3+K)(06?PKLT31aRbR^Ws(1ATWLSsaqMm(e{#OC)%{uv{NT}bCE0TKgcY3!M@L@i
za!oQEywmb?5j#kmooVACT2g&^7s#!ozuig^^Q{wJgKY3iRX<>pw|h*gM^-ENB_7xi
zz~)=Vob&{U%UL@W6c+7=H`aj<!F3Yj;6;BmXm4q6Zm+Dt(QYAf2=9exi-)xHJ%MRN
zNi~Y<1F9Zzcd|k3x|Z3i#;$yeRaxq~ls&8(z|6AaL~(*7V3aB;z`P0|Av8{c$&^y0
zB*k^dY$}_QTt^&99oKPv8bTsQfQAf^^jg3f27t^v1kOiQoVSBY`*`3_umOLAqu7rl
z&Bems=4QPOi1S;NICgM>zl`qj&dyCg@}RhdTd9nFc44j|OY<Mcfu<zujqfA7IM4)5
z@*xHo4;(2=hm%hw2b}U)1S>QjhiLHmTaA5jizPTverXygbt99Rn|Sa<WN?FlvY8S1
zt16cKw-zXAK+nbb4l42e0MDcxKuzR8A+=~4WCcbl;;7Gu>}iZVTB!+(kKiU_hwr@a
z7{gc6M7f*j`M7^n@E(=VMw2}S*e&S?W8ow}aUBCOj-Qo89lNelo@mfNx1x#D6-VT<
z^Pg!canQ^|7{(bT2u(YCT<^sa`DxuDO{ttYGS<m2Ns-M7Sj&-`tHv?+abvy`>tO>I
zYGO<h7tP=WNwxdsi~A`>78e#XQl{)zs>79`+DO?l3U*E!QbjK4TA@)>CXxX{LY-vI
zbO=xih?Iss6%2mHVVD4imJFKpB%5U_CzO0i^XWVNlE0V7Is8)pz>_~nxz7TU-$5!W
zq&aDI@+J-`z|0;j<u1aggFN9lpUVl=g<YfD@vwYX_P&VG`4-Iza_q0yuYCG2W8exE
z3KY=XZ1U8p-Xe;?%VB!&2$6Vz`0yDa^FnZRwj7=)QOBUVccgBMlgwWBtIM)q;!p#j
zfN~O~g>>4QBzA#S0VTkM$BaBdXA2e+96N+%VnQqn%VkGYf95lXc&^TjiE&hVKE1bh
z`4JI(#5G7LZG)8ZhpYIVIX*v2Jr4WcNN8wAP>i7DwjwRQ1YeSYd*%hc1DDc3_hTUy
zP5`6rnD$>(Q%=@1``<N(QrM2TW7E-%rl;5}Iv64kYwla{;QqcE&{XnjbU%C*g;f1q
z0T>U!1{*#?UpF%Ro}F*uV2CW22Fa=!f8C*h6KUjOW0-;YnDO_=gQmH*nJ&25u+n4X
z7h(0U%G1`#<DJRG+)exG*wQ(EcmF<#kjx^d36OvqPBT^&ksK3Oajw?ZlvLLZnWCsm
zkQa<nqAU{|mPD!F{2}>e*B{-ybI;Dvyf^?-yFK93@EnDkIq;MNLa_r5B+ME<EoOaj
z)8gJeIb8*hZ0tB4u9-8ur$RpHL+p@}{N487oU#&K7=|VMtv1y-!Y6kiHas$fz$DSr
zJCD5Ztwy@ajvA|~5AzY{XF2e5kxJhFD4>e$Z3poQgkv9SFksZe^oFD~#C`9YwvEsI
z9sm3Z@5^Q*h=w#nXk}zF3h{$ew{uW7%%4n5OpyWt6|K1Grb5oR%b=2iczuW?Q8%6Q
z`6v?2$y`^;!}?hH(!+-8l>_N&s$0?{jv#+CFl{bznJ#4l1rkFGR8zO-`*Op?F$Hy0
zkcW0WHocTea0FB<HzYSLACKTMDa{<^Lxjm#gRX{h0P6arnex1;9J&kkUUw6+Q%Zk@
zkeJHbyKznQp|nw5q8eUesuJnGecIgXT}HeTbbh(l75D_D-w(|G5(xPw8t_hbaEZ;d
zFVxpT!n$`e_7f?V;RL-0dH~05QwODD@lg@2Y?0Dyh;-yKf6p#7(k{)<X)NCQ;q9&=
z@FA!r6Y5S0*NxVDYOr5BjPG5R*Mc`Muy&?(e1zC+`!dEG@AwnPn&nHH?T7_FZOY0D
z_%BjFTV~1;BT$sQ8X_U6tEBZ81Mq%YUkh3fsa;~frS|j<OgzNpeJ}HcUhTVfI)VJc
zapSz1<{G{x;1%+yZ!D&FMA`7jC2T+mr3J`_X{yPJ#58tu^We%Bj4sk-hCv(^hTLjV
zz(zJNEf&@iR=r8-PUnnO3SmaNsYXQVWO`f$+3gO9>Bpt<fc2(Q-=U}&@nFsMs%FHh
zYO8f9q@W9}mjr(dSp`y7H6bnP#fORDJKTeP7{|E9rp1j$$<8M!C3Q)j`ue+p?5B%c
z0%)0eQhUya8mgiH*5>{P0wm8=iZ}Tmu)?D!2Tt!Cf4JfY7Wk<5F#D2r+rD(jA*apB
zv{T3S>&3@!kfqXI{Tb=7X}oTv2R=)?_{eO#GO456cWUo<iAjdow~U^wSvUAHZ+Q1Z
zfut3FenLe}7(^)@5Flip0U)Q{MuI|Uxx8uib<2@3N@d3hfP$z-5h^jL1e|gkN%}b!
zC@;&6LQZ^&(hP*3Ilj^<!TD8Y!)Ag<D8%RRFkXP?l#AwWbCEvYt!~kf-HxrbrO%XT
zTGO`XxwR|ywI&BO`<d=l&s8sPvNYACS=G=>;s3ai6sNf)MJ@zBwh^G`fX_Lmca(2T
zlHrUH122i1M7(j5Wy$9)6Z>hNjn4@UO^9-(Wk1pb#~pl;DXhaOnTv?ADG_>vApki%
z<QUn=5OI~aFq}kVoflRi&*$#hHVzEDOHodUaXn?xSxe2CE=qUnt$k-&&UgP$Th9R{
zS~Lv=0n$TqTC>{$_ly&L|IS$=6pE80eSGM6z_Z|Pjvr8FQxwqf8FmlbXrJ_FHH9pi
z&1Ho<?>yMIt<nOJoP<(zNq1+FuOvH#iSfLcsOdg7l<eYAGO0SFLT@%xXEf5oPxnv-
zBM`~7mDzDnMHf8!wlYE`5_&q-+#Aep%H$-ptFBwp5$Vka%K{;dU0(o6zaTP&EH4!*
z%tAM%lmZj47*a7JQTj>}+W`oum!G80f+|))qy&(K3}(!zX(i7ydcLUpVb*M!%b+3{
z3C0s8?|GwjR&A~oM7mX$HN6zIhC`6(r#V3)4Rt`^Z`VCVfSh3zA^->okb!82BxQyP
z!y5%^8&rCd6_|qBWi9c~b4rTwEoGbICMcdjlt;?kr)P6ChcSdX=4xJ5xX%LPNJ2h<
z`+;1cI!|<-6~eHMmO-<iXFUTIeA4BOsRmhcCi2&cnU#r68v^TOZAm|B0{2l*_#NAV
zU=v#vAP=zw+InKs>^!7vKSz~hnG6W@Y0_%)35sVXC=PDv@hw-X6K2H;d5b<<BQx31
z8t=MdeiJg9)m_P?Ac-P(u?aS^khS1&awbDKJY=Y{Hxsc~G4YU;5|hczVwY_?3?E^b
zpg?8|(bbG8tW5(Kub>i%Nv)}@2o}U-t~$v0S%EL;kUHCuItD}u#7!;_L%3;{mlWmd
zffP+t0JTxQ1Sc@RL_%mB{JA$}|Id}yVo={*E~61&8mMA6BBhj-)BQiZVpDbH^5Dqj
zLe|5)LeK4B2u~c|Ea&HIS{@9<(*>26%mpR2SI^TK$QO)WPxLnk^Ke_X%pQkRr#fDp
zu1U+v+_7zQ+Nv2~f7t1WcQ^HdCLLz#N@dC;+HxvF?{m6Xw}}ni2<oX|Q6Qb4vX2LP
zZVtQYq)>}PvmUX^L>nyOQao)MET`U^M&om#3RBX3+6@WeiI+(U3xg2kPY4Jh5;{2K
zPNGy_V3X38wyo1IohUUAhlpisBfIdutk#UT`Omg@>h(8zNA6t90%i9yoyJ+EZN|ZM
zH*ccv#K|-oZ}XO|@l5{u{TwjQi)Uur!uI`64l~mxhuZryYlb1%AcI)VQuMiuBf=!X
z<<}r+|F$VH7Dc%s>X=7X)g7$Zf+kucwr2*-rYQ(4{it9TZM%>+O+!FzjuWxoAdYna
zAsR1;sU*!o4Ia{X+8puvzYwZ;S}Fwy-_{&QjqB@RpKKwlF7RB+??IZC$OQ-(&4rL(
znE)SRJ<N(bx}~o$ObE;IdThsjj9J#FO`|^BRx`bSF0J2mkz73b>v4;wNter-1L~He
z0sp;QwjKnkl64LhH{8(R6jIJu(2e#kQJo>4utdOJmCw4Vhtg^v5At~ryPPu9(m8O6
zZo);KAEoc&!BgS!7ZE(GS#+;oThtu1(Zy+{01H{T;4n?l1w(pT7)Q=#Kz6G~Rx&~R
zOgPR!5*~+woK6SAaMe72uGGE&_g`GDt<DlBFc`5LM51^Sy!wDfzXqFc^z}u`Sd{Eq
zsoVcG0S*XQN&~0ss*mq`MHS+82xoI^3e*c7P@rTUO%cFc_5Z%v4xPq8;wR1hB|%u2
z6J}){wmP0SQu92oC^{XWolwu>5^6U*h!p%a4&XN2W(|C~rRq!ckh)T>|7X_pXYNaO
z7FyFmo04VHOuk#Y`aX|)W%;8@a?O~mC6YCsct6+bay`<s{y??NuS=QkjPj33bUiuf
z=ihD+#eQnv>$Qs>5a6MMUqxM`cNxl_`P4^_F&h$8L8skZtTVJac`RYU&w0L1ZE#gl
zS24$$5>{8PF^FZ`O}*zWa-scd-ISSc|M++7kbInTTJ7ZFOA&o3k@?W`;DJkg`@Y&P
z_^aOiSPysDTkr8Hfu4ruUMkd^T{5us(b%dar}+jH%ncA>cCTli7eO0LkXC+H(^|^+
z4=MW;>??dX&w3;A>=^-OOS#%bDOk0E#ze`jDBZlM;a(6y`jrC{Nxyc%jTOU0v51R|
zJXcz_dlt9mmP>i*<dgtJwS%@-c70|$Pzi}@XgG&&Ai^siy|1jKi7(Aq*kP?UxesUz
zUH`t#Usk@EawupMd9nptMfNS`G0ud?qa7yA%S<JkUba2+<;P&Aw5>CbseTVL^fLC^
zL!o--#pt$M`2mZ6`q4gD5OBWjd&L)x-G}6Ps*QBy;jjt_`OgNN=V$VCl7J(AnH^;~
z=WpTSFcV7zYV9M;X=)*RSsKln?ix}d+xD|o%Q;gOIRzCf97U?~XH+&;_*$G}b!s)^
zgc^}$|2&sNV5dfI^G)u+Z?=)ZM8bOG^m2~)GBvd^wkDff75T8la##8z6TvGV@{@XP
z{eB)+gI?h0T_EHqpAcDKA)bRBa4}-J$z)5*>_YS<JTF0V#(6!%L^H`L?&oqS1Y(^L
zcAE8!S^)+7l^8c%V$!<hYZ()&A0)n4{2gF(o)kqSaug}ON&4;AS7IL4flE9WOTsSn
zlU8y`+-qmI7}>-A$zVH?I;1`WWsPIy?8*twmlSh{oxV8JbSY$khdu0GtPu3LFz$Gv
zqPUEE&`pjU$9oLm18~IxaNk1&At6`uJjc@W%448&&yO+2#w-*>NOiB?+6+w37xj_s
zzpKL;Y{fY|4=vo9-G0Vtab5h_N^Fca8ar=kJ8%fRvdgOcaHc9HuW5(mq}(w*E2*)>
z!yvRnPJcm&^U`9RcJ_2CwPN$$fnt%nudP3%wyvpC(&WU$;Lx*lO6$0;QtS0+QrzWc
zH&~0`aJO~lpIr_s6~n?yl$?o=znXkNj*iVLXOwZex-jLm#%1Q_GTZqSC_>W}Ld%bH
z%naxF3f9NRpXgDiJZoG=snQ1h5wBDlXwWf(77YwxNOtglPezKoz0`R8K2dg)`$wE4
zb)Z=gN*N`LQ25>kYHzIDk+dMnR{A5DI($ZYO#=r4A%wu}0dTOTbatSqwkqdUG)Q%s
z=Ll6x7_jt9W<ugb)jmkd)sgS}`g)f9KyzNc9!-4xo3d}J%`c_!NQYYB?B4>P0G?)g
z9AgRY#>3c$ef&q`kx@^awOTIjmYLgm-Rik=AmLEI_tQ_^{)R`PbctqA9h@BQ$u4o%
z_P_&*pEXX5JG7`g78mdW1){%D^PV_0Uf%2iejvBJFY+q|t}zKu@-jQd#hkx|--em0
z?rJ=uVH-$u9h=vv{t(}HU0<t;TqY;y%hW-{LY`8}bq8B)7&Oc+5wds()-oj!V#(7R
zrgN7hXcqQz@)7@mIFMYd^77~sO8ELI;!({50tvPyKwviA0$g~&@&gm*dw_rtQ^mKA
zy>!e#5#_AKmuPlx_@4(T6H}VKJh+f7IXL1WfQQMSZoNQfhjsw9O>p@MUi+P*m?=IH
zDQ3n-NhnxrAszzB2zgwi&0?n33FKTugvg!1V=T60lXU?LZTcL4vSihAr>g*VQAc@1
zbb>~sfr~A(Ahb4IqiJg<(vfHFq2W0mvAiUX4(FHXqD%20tsB^i9mljA38CbiH{GKZ
zc=p+-{?dbmWt@^^XHqoo19^9Y)3g6LfS7*Jttou>nF2R%l9g>a`;2kLj2^q*NCi|~
z3um7Qau=Ck^eKCro9t>{)TpI4k7dE=DmNj)LPoNum&!>jxBXWN)y8$+mP?8h`*(#5
zTpd>K(&gZl^Z;-G2dv7wbsk@%T-F^wmyaqwDHraQ<{ApJG+?84n_J!lY{>c+6Q8vb
zv2UcQ!=#3Mr*d>3_VM4IMQv%r9y`o!y~dYJQaU$TyY7K`Z?cuQoi=cT9_2|q?5BZN
zJ8=HARUJ=&H-y#Pvrsrf>Q)NL6`TSMjW@p`o;+-Q?<+nZeaHI7B)nYf)6d2hzi9S7
ze{yWHx30>ah;`0c|E_uPbSN6K?Wl_9<|wHn>98kV;)#!RmQG(=3+c~ZX0(jLI43u%
z&CO?ZTqsy}DaY3l|25novM$VW!C4%%^*$&ed#%E4R8X>3R-BBIetb)#f=N5$;#}Uu
zX>J24@}HX>N)A@q@hkZ54HHHRBHWJcXt>u~TJK8<|FJAX_9SV~mL3(yUJ&mp-ybN;
zm5W-K8N4n}g`EDnTUIr*9uq>mz8P345WK^)V{453)oqn|Sw<B5jT=tp71a#@xqn0R
z8%fA)f`R8OCrBmU-=c93T@ZK*saa_<w!WB`=pk;CdnT2h-y2X;&fI8-g{v8IlPj#1
z>iG1^NXpf`Ssmb02mO@M%xh^lm;^*Opx9x?x<xwjA0f}|RT38Lf5furp!s(vEJ|6q
zG}qs+w))fP)!`+K+VZy9b9AuGQ46p^zjde^awVj0w!usy=5(B(p`JmsT&jY#Jm!xL
z@W=xQiNQ}W6b?e1icuL2gNYbQ5o6F8u18fR#<>vx>G@+pKXmcU)Tbgw0aH<xT>dIH
zp$8RV8Lq^V1vH;B@yl=gK$Ue`XE-SpSEb(kc`8+Q^k>u&V3;rplTT^yJ7RvL3|az9
zWbNca847Y=<}1jKu2P5LHa}O&cN$Z_=;3(&zMHHYN8C9H331W1Py!Bz)dChqb)z}o
z!b^ao3?eXxpL7h&vW_u)#bb_U@z**X2X?&X%sM;xrs3vu+YocAsqv<Rc>>NTNXkM-
zu*fe>FPCO4qf=a;d&zr&K(KPPfbNMyoMC}f{9GO6>vo<<vftD-oo+Y2*~kZ7_u|L!
zRwRo=Kg7%oB;s*@Fb<Y+XwFH`o~G6tFP>7XFZc9kWbNz4%*A45qd@Yv>@I&3g`<y(
zx%imu9JCelAfkM;EI6*`<`CR@U%W^y^iiSEn@>;AYLL2V=5)bROP!2zDj5kKOI8F*
z^dSOeOkm7<$Z&F9#X@k2c3huMqmwrZ46H3(pjL7VMHejz(w3x-{63dh+?XBDH<Nj7
zUC2DM&yKGd4I=Pe1UGkiHbZ1ZudIdOlU`bQ?S@g*VG~LyQQ<i*GTTnbXxGokKu)B8
zOutAA^VSw9Lg2?8);xhjQ1}@R1O>n*mOCt<+~RB*fs;UBrhA9OPtaSb8(G`}FEaA`
zQj7raUDfrXCKHZqj3)|~0#QI61_&q4io4)K@`eG-#~o;46WxUW-&M7%>*DHYLcw6Y
z*``DqU|KsU?#Uv}41qvMf^v!yRvb?G;zPGdHLeMEZB9>XVva8u>&sK)kyL?0joSQ@
z16~2LkCfq7<2V?SoRujgVL6|^&{1v^0aC#t(n0U<sNVH%^j@E|-BzFSu#@0<!!P>p
z5P*BVMH{@QdzvF7L_mZUgGuO|k<`F^buLpx23VE^3v;bupG0+<bIghm24sslF*fC}
zRvRg4>rfe+YoN){SmbHF4Ur;*0kb300Y~7B3@8-P+K^Oug1TV?_{0TbOXNow2T4tX
zs-9#PLq@20vCEy2Ehqe2OovDvdrF(MTZ|e(tL1tdusoIdn}E(MKroow?LSk(bWNrx
zL2E@4VV<nIbs$?WG5rV3FrnXK5>})6>)~10B{#dFCCCrK#REnyNDr4-RnPQw`jMRo
zGOO$q*Ks-N?n{?Bi3u01$MSP}OmOl1&HJw_ZkqzcHd<BtEnZYanv(pF6pXi~#2O}J
z1Nx1`Z$VmSk@vbVRh>x<g@#hNGwk^cE!g8|Ug2(Q32eY5Jy5slg900gseS1)4q^7N
zd3o$rkgBzzEE$(!{V3x$JI>QeRxTTgICSYKRD{a;bjR)uqD?jWIl5K1TIcOLZ_qZS
z64d%{rB&5rHv<-A_zi;JLS}PjRhZrYPuDs>#G$($1Ihup`4J=zfiWA>2AEmT2Aep-
zifMvb?#LFM=X7pEg1o}ZSzsw1p$*V6v>AXCsJ3l5w!rm$u!Up}=jl^yoo$il9WsBl
zK3~(>kO+`{MnpwEvT<)j-WNN_ffcKmj*`|B=QQ6#7D<6rcn2BcDf9-3f24Oa%HSD>
z!o7?!vy1E{M<&>n1<({&I7iZ!{f66oP<!q>$SUYQr1-Ko^SIDC8SCeAYoESF7}=CG
zX#$jUniWMNE^_PUF?G^AYC)Yn&Ez$MK1|iTs%jm!nqI!3I7M1RTx31mkA&{^JzEJ0
z=}yROS9pL~!`EakVJ>b(4MmvQ$$iFurC?|KHW<k#sn)a3PY3s&pMR8#Z>sljvuTfT
zp2KAnT|q_4jc!FNqKh^&H57zTGx5v(Cz%kEGUTBjV=9Y76TbqC6v4Tl5EqR_@{%+a
z#ni4X@#`Z`fmV)HKgsuuNzTjIQ=!r_8QC`9v7$f$Jr@Vy1FA^go=w3)d<ZA;LcGv{
zOKTT4Th8yQ#Ff5XQr(+v#%j{^r=3p>-{)*)(D`$IJo(Fg<}x>w%`l}DsqEAshq-*%
z%Qv5p63`$2gLK$WDIJ!#e)5ozJNFzkd)t#*^Ea#5UN<$ot`)0Jo`JYNlglpErQYE3
zl&d)C;|g7QG4=10911$%;9C9yX>|0WPuHqd)t#Tn3pkLEj*hDAYWRc1cCnz#Hp)Sz
zrzc_^w|aYz<0%Q!BhM*#saPBfD()ds`=!+ZL6AvH!k<6&O@};|x;5#qGOiO@ow+iU
z@9tRHKe2@2GG+1vm%<6MqN;1=fy=!miW2QT6g7sBNh~Jwhi#HXD4_*|3?8AGQl#b8
zT;o2p-RpT2^XzrAX|!o}bL`}?f*|Y$>Is$an;M%_Qa5#U&}X?_+`q0pLztIm7wK@X
zae<**6nTNfGNVbe$Lv66N>z7wKm-v{4b#YKLa2y9fUZ|bkoZriMD;ex#!ZmxvgTDH
zNXUb%DH#IEn<d$KWNLcBvCH)xeslY<W2J_1EDepui;azZBg;y(kphS*H^Z1u4TPZh
z$KkDxwB>bDlNyFG$F(rW5*%ja6&kP=4zkGRGbIbAE7{pyF5LAeE5~m(IHqxOhoJWE
z45<Z){Ej+zL>A<gWb4WWzjX?-Y_{rLfRSm^r|S}T%I<VL#f`xjAHn0^(#mI?ZA7|R
zwxFfHpe}`|_0!#{k9{z33#zCff5y6PBeBLe)jyW`huccCp7fOC`NT^=3SpB>E5gc4
zDzihIN~Is$H&o+alQWRt1xf}fowI?u&k)R0O+XN02549W#_@x@DOy$ON@U-@AYRGL
zp3SDK42-4XyLL)UUy347kwj?;5dpWeT3m}diXc5jgeM{(dHzV*j`R}LktXdIUMStY
z3t5lKp10Ebw~a}Xw_H!XK{-IkV!BBShi5tHEyV$VgBN91W^lF#&7c8lFRDl$&8Yd=
zqY23iCyK~mZA4?DaY$}_k%%k2Z|(Dy*l^n9lFm3py&iC%Jr1iBBRm$uQAWRpI_;Bk
zx#T&{&5GyB`>KMX;faY|O~3mbBZAx}bT9xh1Xc`Agb=Nu6Z;uXlI8R@$~tD&dFu9s
zI9fiqljin<mn3%ml`!P<vxNX3^fbn^vkNz_OF5(cL~E;TRmPwzrPVE1f`AP*sL-S_
zwzGN3cAVHa`lT_}Nc;(z$Blda3Yfz9Hw)<APKr;t#f{dx!L2^$!2GY(t)u>!wT7re
z7KI)0Xgan#=Oq7dbmt6AkHjpJEn3`i5@U>RP|^(bBr8+`8*>@byKf1X+5S6eQ=C?m
z)2~#<55DR71jrFaBDa!PGAYuQ#-b}G+=vd3(q$8O!oy`a>^{bRWb(kw(X^G-0*<0f
zB25&i=RuazW9l-fCVN><b!LjOV^e(+#<)hFeZjcyFghuvrI(Vg$NgUdduRFyHbS`k
z%SA|E8x3%BmvPnI1sqZnQodSg(OVy<#4%&_PQ`35O>`~diyXcW)YRL?I?rHEyq=J3
z7~E#*5I5OECL^IWA7yO|#yEBLh6^0{=tK;OrSoSVl%6?4h)hO-5d!J>fd}Y|%+fqs
zhlYVM-yd^S*vRLF0|Rg>I%=Q_9r{U3`ndU}zth)`ip!=}3tU=lo3@7q+}+%=Tl#{>
zBd&m9NNG)C2pFQYk#o`EG*lQj(6Mbd8E9%F&nHVoQ|qY(@8vMmVW{P(`#*$C$dpW0
zLX8k$DvSu8g+klmqMdqAE4|Tq`}Ykzex>tt!>tF374g}Q!Nx67pgHm;5dOQNU{}gh
z%{qaN89}E<#LOlXgRK=qMBTu9uEBC_+P-E!9>15x%V9r0gB)SAeX<LNk<|lEtdWPI
ziejM>4RWjE@M4EZ-E_TgK#LlQTD%T6`ixZzrjijGIt|OVrc_D7-_p0<aiRkPT*gVb
z<ig38H&iw_5<rCyRm#=zEn8}i#Vw1&O1M<-bPzHHA+0Fc?lI9U&C0OrRx1ORxw>38
zmdHieQ_KVu3&9zDj~Q&nE{rTj+xC5W5Ep1~7fySd(`7rnJ@FUcANGswc1o}A0(i|n
z0~IB@XWO=MwP7mGQ;eMVIDfbG(FDsTsDye<FAEg)H5-_xt=Ab#W|v<tZ)@{4@x>$m
zHrcfD%H-9nxFFMAD`X9rQrc@T-eSy}SQ@oL-9nyQRA$p8UL=i0{E+#8MSyVCz&T0{
zVLFG8*jRQnQz+WJEq!L?bet^3_>N#dBPIC;z%R$w64RoTm8Au7bxFKGI&!o3aY{_R
zzD9^5jEfQmzio637>WqXPEQ>}p<xwZay-GZ$*E~*d~IsP#e7NDtw=98!!h{6p9Z=m
zjqPTvjt_zaX_LbbQpjJ1L%wMsV3%#TaLr&$5K4kBX>{#~p~u}KRaQH&(Ak#n71QZ7
z&UjkfDapgeDR4fGFlf`jIEu)z(Ul2GNj^S<$(&d_jj4MJliYWUT9}fn$Es=m>Suh6
znSme?i1|ELk`S~Zb1N(SB;9>3-z0x#AgTvOZ!n6U2HN4xQrUpM9vTOI2sE()L?FB0
z4W5e~_8sR-zciLu2F07rw{@bwJnnj{-CHJ@gD@4BMY1tUd$+vf1#f|hly~7FEkeIK
z^ng$C?VAi03MM2ZWj%*Feb@$by^ve}fL6)L98SZqvNwF^G8^Ia;NspllaaX*3U(tb
z+${soZBtRMIIL<cu+cZA0&QQ6xlF~A+^h%#)6_lxKM5B^5wyveUat|`V<xH%<(RnC
zfj81A@aFa=c_`d1@NKQ}lSlUTW!R3bsN7^0jdrH(DQEP+^f~yaZ1z7A<X}=~r)mT5
z+d8UEbW~hRrPC2GFjgLv`G_m6G5a|w&zNL9|GB{tOklx=&7hSY;ER7aV0*DArf<@j
zhVgMC_vDFrVjN=%r~0sic{qY`Y~E%UX@!a-Z=;ChCke!Sc$5hdd7+r-ogg0Xv0b_=
znjjhj4B3m_IE5Atqq&~82-)dup{S_b9--sDrN!;GIp!5_n}7SEcMgNOL$&Navg0Q+
ze%rR|i2cNlnv+5ezv$x?GpTxUQj$;6oLch~a&wMP4p=;Fjd=SNMRqi}zl@79G0R|)
z@PQ#TstSz@xGF$^5cr3@*6DI}utM4s3N_}(nem&QJW%6cLbQT`Wr{e%90i9-`@KJ3
zIahq1^;}84b=?7r--|>-)~OBpn`4vWOG;QY4GWi&9mZ5%9J|aaSt%9fF56C-TyZ@}
zt7c|pr08rUfd82bC}#Gj2w0#PWOR;^&ZpIMN+KwEBi>Ni4gzJUZ78cMBzd5Q>2PSu
z=oiAFconu_8>&fFXw&Jm?a#@q%e@XILdlbp`Rsmj5A4G6vV^&v^8d2O%uDns>((U_
zVIR82F(qmF^=I>ryX|4d3#EU%kp1`1yk+n^YbNp4e(8SI|5^LP(wjkvGueR;*W~$&
zl*$5Ne+tZf`KOE#ba%3R$gGoSi97je#lk_KHY*0RG&Kgqwa>JHt$EXo+8ImTx?5rc
zm^q~SresN23x9zFIEIE3r^TPG3{SGHZ25%Uxa(e89aS<s^{+bCFFgI;?K|xi819r)
zShJtAzSDsA2;TZx;2De1XY<=*ru_8Uomc#g6+N0<?};*Lzhl%41NO4NREa|RZ-$r&
z38|5<YQ});1m~fqX}_NGtGnY#3(oQkUH%8ReBVhsJbX`%w8+%W&f^9HocJQR>TKvH
zQ~O^eS+sxI*3^FKf<vQzlhf%grKQqP))TP)qaLf}5nQU_L)&hxAlf=ute-dWVjGU3
zVaIo1MFVC5xx~@@!4fmuy1m=WeC4TnnCL%ht;tv;D&}U{>xwRAMso&i$x-n2a<<&(
zYi6?<=&YZ3XlQy~xM`pjs2ymlPK7M}SLwb^$uah-x<d$i%=ZU`h$)*B=A>efnt8?3
zF+DVVKNiJ+CERJw1BC|Kb~barz|kN(_iB(3+GBUH4vsrzEG9H(0yPCV7v&!#o<0Z~
z7{Q23+wrp;^@WMEQO2%4MDskm<5;V=+ssRQD2}5d*_Ei!5z>aA*zvmEu<bu0ApdA#
zKhip$4@r=79MPmTx7jgFj}X`u`ta@|zNwCjPevvGM!jXIY|tk}fG&W&A#KuOyK7cm
zdhI^9ki{BK3;B5I^^FMZ$~nTq##wAXv)mE#9R08mbRD`UB;XJ^9+HGxc002|Et*QH
zizp|jDH}+}QHG`oq#8b}fCh`k$HpIs5>T0X8tJB&@}Cns=e^PhgP|5dCg9J}#$DK2
z(tn@cq)5wWuZ|AR;xspu{;h52wXqi;qY>IcV$i<PFm&R9TR6?Da%dM#HfNB>8}N&e
z0WudlF5406j#9n;sDKyABzr4mf%8Az#E@}P{hplt^qNre@V$?gF3Qvdt0YcOm0!K+
zUJHDv<Z7ny>do4RZHQvxg_r9((U=>^S^4xOF4XzDy8%wRL+Z5Z<^`G1Yd^+H-JWs1
zHT9aw7TbUB6tItCvS!aLVruuZ@UHty*=T`P>)vTGov>kmr|{+(qa#HFDFG)?an*s<
z3{%Usku1NJJ#<i($6n?%mx-;G9St09IQlw|^Ooq>t>irCj{3Vd+eU&lPBZys_RP}k
z>*Gk0St%N1g~W+~APuRn)hOCR8qkaSv7_S+ABmpz#`IY>i21^-Fq>VIao-;HhRZo2
zl=Q2-S-nCGoMAnEDcFnsXm}_K6i<!yIW*_2-FU=_W%({iEN>a{hM%J1LL^LboFdA4
z|MLkBT-B-$5ht@&PSYkS>R7IMZEHyAD-Xa2#KW-OZl^8sclU_!k>nZ%brl9A5SaV-
z4E`a;=W05UO6mJ*RC-NC3OJ#oK51}7tZg&L-1NVHngY5fZ#x3o<xXloUhB(aH{O|;
z>T)`dV9U%K9YW-m4(^xC!|LNhZ7{;Z0b|{L)9Ml+0=NipF4%8<%QHpAt8r98lAM-M
zH8QG0RU5u}sGa8|gajJ~=oiLVmuQd+4AFQ}t70%wV-$gE`P}%tvMr#uCNJf@r1M@0
zs-STJ(t#bGK_EO7A)zNB5PFZ($j^S2#G0BoJD`!rB7HdKOlS-I%-mZ^M=toKtneY`
zXdG>kT_k=QsrA=cnJK;nvM!h6#-<IxN?>DI9*`y2Z_>oGh6GLc9%m8L0j->0)&2)*
zsJXgUUEO@oFxbpNo&9f?36$7zgul&P28&v;m@#fF9W3I|B-nTLc03FzW_>0XN~!f{
zaiR#G6&9Y)$Njxjc9d=P`|C=1{};e8GI1(gHvA8HYf_0EWrN>u16}CcmqA4nZJ?B4
z<^ozYs8MnlAu{UusmYfgpVFB47k#{^uW-RgltyY(%oiochWE_JzhjAGLC;6>cAPw@
z(+#o$tVfPg`wsJDQyuP2=W2Dj);@{4GO2#;;T#IsH#x=$pbWdRA4);ynpkqWhAs$q
za%z5V0qeFn9u{auxGe9^xSi@nMnXbbjwE+I70j<-(ZV1VniqKLK_2`9-~Rs-ojy%-
zrt>w}?Uk!mB}Dqb(^msd7H2<5vSQjryPWOKW@RzWs>ax*f@Z0I$}?<Rb}mQ6HWJdz
z@fb0;z-o?)4XYpumAH|YR+GMZMtKhsL&dg(L5Jhz%-ZSG)6z1t9!(=5L`Dczh<Hg8
zA`VS!%piN>`b+bIu&Au#h|_^0OEDO72ADLW<mt{!5sh}tYc{2YX|qnSiL8KzE&I=R
z&~B8N#<QjSt5n2Uq63oL`8E|;qQEVbKF=TbpR$T~A%WEzt>yI}1D1mH-j@9kYe%5y
z`FBzv25}F83qeAe_}*(lLexaV>H{c8PKqg=GHlJ6!x!No&WrDIVZb$)Yg(4Et=srs
z(-)1-<{LjRD-K$yvnCjgEySiiYFunU;^vngToXfaLzL@06)qp+ojKcS{Jp#l$Z;nG
zg)<kem1VM=QH-`#9+~~OH)w2Y#PvL*!A&QSDGGFdwNL>pFXfu4C^oFB<3vj9H8u)#
zN?=YI1UjcV1Xt#dL_~!HXF!1p1r_u>Z@}amM6t+VOvR!k0W44q0EqxjF^Z4?%!mB_
z#t?atuZ2WHP?|w_#|ZE|TizA$fZI7y6D~^_LcpNy1U5?0iE$xUid4D$ufHU_cev-a
zn<J#`U(@R>V>JFfCH2%DAhQW|fa|4u!1kH%0G`SM$WGc-K-=`WmtqS>FxXr}v?`6(
zfr;s~Fa=~nL>q+N#8YUEFQn#i8r_!v)&M`H4e!oPL$UN&bWVsU9dLGx<2~J~(W*gg
zkKdiS8t3Kp8&quN@1TPbmgIxcuuK<uu9F5H4dFFG9?D4oB9o)2R0H)8ixDg%Ool7>
z#jV4aR<7NhHhIK{Nh78Tn3{c^Ob_NfS*r~L1q<ro@~ntf>Z0aPOJ*2U!)3-+^K_x)
zsVY*v9~o-1?&!8Hu5)U#8X@RimnFM)BwFC3!cmN&3}*vqS%5rMNu^C%`<;P<<_Gbv
zxcA}8Dr}Xe7iubQ^g^Dd8<HVlDpCuV?A{DH(MF5N-bz}pK%(}V`IFsZ^ETVW-OOYf
zL+gZJsI<7@Q#>Qga;Qo`k~CXR*}Zu>gKmuy#^yh+%U)HqDl9%#@uZsH95ZXC=oZW~
zT8O0~vax}?l>&S~f=t=HSw$%0oxj=GgA2GFyRjn!&8Z63>BHYX^D372NdZ|_+-tr{
z9%|Aq)91DA8rOR##-dUhP9`r8hc%x<8tgn3hC<@n<j#9pJ}9s3Kkjy~8hE*}4Q!HO
z#OycTbu3~Qxkx|3%17Gg75A8J=kSf;?I9NSHOXT%lY_iQ<5bLJEI7bl$W`aGt6C=n
z9Ji@vQYjipD0zB;R`%7E&I8LyUGioY6a(b8<pxvpB1zJ=t4ANt-AR_lGKXq<Ojh>$
z39}pJVsaAEUNq@9qv5{rLqn6<a{FDS;+9+Q@(y@A+n%^DW`T#aS+4A9yHDekJoDSw
zTOFW6GV7v})oR_zl-@Wl9jr%O&za_0g}pTVO@0<h8Ledu6{JW($4|0@7SXziQrcyw
zoEPi{iY*o@>Cc}*xkOr0`&xlS8f1`0aYS99OT5%{*q}DHXZ*u0&R_Jq!g=yyOY1z0
z;O!!UGt#LL2mSj=utQ+2BIzuG(j1<peV-1v$k!ybv^gg&KCD}@(>-02Uv#-z85y{Q
zO#lW*pr8Q<5>`@)SaQve?54t0<C?PeO42Px*cC42OA;uc>C$3NGf+y>^QR2HcRN&w
zct9TVF><F*pn?>L2TH-oEj0=f&6T5~S@9uSS}4!VBJ$2=nH|3Y(R7?#<*_U0E#re=
zHk|;X3-ni?hff{8cl+EqVYHZ*mQ|8UR#azv2>}Wz*VnQu9qk^I-Y{GKC{_<kUB|S4
zu3Ws<q0@AyB};H&`D<RKqNK(PfFDwxHB$K=y(I3~v&}equJ`@9&vhEp#D&`*a<0x=
zn^1<A?<x;d1t+8~YRfA{M7W5{*#7}V6*%S$8kr{!^e7BiEc$2S$q4{vA`~G|fzSr~
zcw7sMQu0Mv4tw2NEQ25;ZOP^|@0|?K0t$D?8F$jm=YS0+*sLq6)uHihgQV{iW4bP1
zL=p_?9pS>f^4nFwi)U51ID?Z$P*Iw@86k>uyTDTmMmabFO9_&<dFVIEmf!q_!yNxp
zl&piImeY}dXDfZ_sztEo3To!F8OfM~LDvE5tr$J8$o2|$TG8tC_4DwYi=5B}_eK+n
zH)?>mDzJU$WlP_V8n{6_K$o+jaix^_gb*c539zYKnLXMyoAKOSmVP^78Nkyh96=6|
zFIE3gvgPM<Xpq97Fa@P=0#Eoc=K232b-Bgpd9X7TsSmE8u?MmgE(-=9movd}e3Kr>
zXlZ)9t8<giJK>$S_8+^Kx!Ycl+~gH<UI!NWZ%Ye{+M^`gPD_7djiA0FY=+#dUL)!H
zw^r{LaGDC~#Z%cUI>EQX3p(u_JhQQq82uT#P}$BhOAj93y~4ZD{~IN^$=1L`*r!UD
zzYN-Lv65=1cZx+iSd-dDzwTuDAVtSq(`S+C>AhM7z5Fen*!X(z4ThAV(_3fghMA*#
z>2WEjJdNj-tJy3f38WJP<i%er3eFMx1y&ATswOb$oCZ4Vi%*OycAZa+VDC=i2)BeV
z3^h70g{I=v$4*Y=WewQx%w+z>ru6k0WMBZ!w5^U~2gSNK!5x1ZvodP4WTDAk#F|qr
zE%5fEiyb3cezSU5-BSx*zsKkG@$cUZ3r`flZLK~<Syr395MUH;GKX+s$hI1%kVSYl
zTl6+2>kiBm(szHAD^|ghD>+V=n9l$q7Xi+DK>!5OpIuTbc}oiamr@lPibGLTn)3k!
zA>bWW$#dw>W(48ROb<W^>O(EWvB^fSjzQ#LCYslMA`E`Cp`H2folBSTRNAHhhGsU}
z8enge=%T38MGjW@Dkf3oagbhu)DOWurRiOm&Q;ZxM#<^f8OSU}!D&@N1ME4HypGTy
z^s~qCMhSz^8nqVRhP{t3O=(kHtXF~FjzJb3L|uE5y8pi_!bD%r0KCh$b{{WNQ~}V(
zRhrYW2uyQ6WBC-ba68KIQFb55X8+*)V1#-1nTorQ<owK>(x=?K71VOfHyrbmZQfEc
zjG^wefgCa`lq<W%a5(j&aob^;M^_&5JrrhuCb?ILXH#w4;P{W$i<k2oHfc=%qXvJW
zAD#ZH9L_YqH7)K_S<;g%o2cFN)}-OqbPE?QnGYC@rM;1=sKQ{0#Do^>8MR70qU6Fx
ziz5yS#^UJwIyIUFN$f*Y(Jonf@Gvv<8(6{Cd1G(_YbyKu@Du+!+DWiR(E%eK^fdgE
zA(@d&S28Z{lp$Ykb)XBah`yibQgska#W*&jNSuR>G#^8$mGWoh{Os6Qkkc6SO0iD(
zJJw?=00tv`kK&Dyw~Ac@na@1)v7_qeJ=ooTKhG@04D-&8wH3oO*NUF=LO`zn36e)N
z)`GpI$b7Uhj1df5B|o1OT8PfgD<|pCS`qV1$VWPY$vtK2{4?Ice`>CnZa-KhVxEb=
zv|<v@DuQ{TIZ~W5yLgh7U+%mVklpA8!?KKbuWbF`oTYbKb(^@IVUVcy&RyqXb4C3o
z!&lX^?fVyNlTJn<=0jDKt>S`ZRAtB#s`hoxBUgKc<c={G>HIj?tqe$k3WE3(j;RKb
zNap~gF)YS$)G>zPHJNQM3D1$=X^WzvDkX=Kv`$!PXP%@Fd+16<8PmXyl{F50@k;h#
z>s2Rkkl!_gcw`uC@D_=%7>T$bD-%la`u#i(Dhem)ST*~VHjb2W;EL2rIM>G-q2d(^
zw}1d(&(K&);byS_+XUYU2o5l+ip&rZ@6^vE6-b958u1829YQVNv`#6Lyu4Po{c=|K
zF9Yd+b-AfyPhWrG8Yi(%Y)kQ`85`eB%7MmDEMp1AHXUfl+v=K&$c?rSJ@rnXos?uT
z=^GQ;k&0c2L<?x`+`iQQshdRdCQ_1;IF6(tTXVkr;@zHrUJZvb8}yU8vU*GmUmixE
z1)YXGB(KgU<n2ZzAfq>uEJOR%+yL)-2~O4QwP`rY1}<DfZxxFC14XTNGXL;Rl=qEI
zjqfQqU?J10hgk8p?nWmo+!qb0+G(9ntV`5{Y<41lnm>bTwWtO|tszP|SGnLlj{@yF
z;F@}WMTV~sn@)uUacCASybyJ4MlCti9i<!k*yNBndY&#@hQ;4RAG#&pKgbq)#W64)
zZf$PUKir6NDSJsWeVZHO84^ELM|?G#bp6h$ZS`iqNsIRAfJert30WURy?M?RgZ>Bj
zR=DJ=yMBx|i_KD2PHq>~8jYkj+SeYpuRl5kOBhHd<oFt%P&C*c3#$M<ob!w>=I8Q;
z5w-8zAhP*s$j?y96@+>HTCK&HPKP2ryMqk;S!(wpN&(nDO;<lX8uU<4uPq<Uu9x2q
zZKAdQ33a*l4}Z1%)K~YZqIE*PXj=i<_(vMRFwxD4Q#Lz{ZClGCX6^~Zn6=*h55v6W
z(1Op~Z@o?D8#+4Df&HAw*@*Zn#oYd1jGZS>k0~y#oHubIq1Nzm+xk?>U){HCZ?Yx5
zHc7PevG!YU^gJ1lNsG*G_t5%eq3}G|CbW58@9kJ$(K@+wMjF@6^?TUSokwf5iCo9D
zXLAuYXR5w?dpb<*hkUaZ93VmB;u8n0@cY+FA$#{g7=LG3ZrQFpuntZ8Yc%aVzy*2D
zRmdqpn81c5+c9%%TV`7$7K`(eC>0GJnD&a5Ujc@4L1zh&2s92&E=q7AhmhvIXQw8{
z!1$@1BPq?YN3W8A*i0eNP)(K?S-1p$f!k2g2~170*PL1BOd!<@!{qZ%<9!)5{?qiO
zv$atTH=hrFU{Q_F;Pcc;4uwcXu6-Kf!Qw~P;rQ-ZC$TsoVcB21`|$9$<_8kFIB>r3
zAP>}NiCsNAC=9qNLzAlk!Z@hqZ+b-orQvI2#;#L~{cPoRnc&<G3naukK%jBRO+oPc
zy_|;2t9xmF<b5WUh8z9b^JAC0rAjPT!{!zBbHH(FoT$Al+7HYx<Av%|G}$e01Dm7p
zYgVWMZ$6S$0~+V`rrn3dz@jLOLi$td0-=b?6N`nlNS23d-e8XQ^F^Xf2PhO8>UJCJ
z9RQek(kj)&Rdqb4Lkfx4&9(^41pIJWEN}M6FlT_J<VOS1eiV*f3?p1ewpv>9Cn?4Z
zJG5?nsL^&dZj&EMPuSwx>tL`!4`Jaoj&p3aqqWF^{BGT|#~#~TIj1Sfe@t32h-Mpn
zwb-g@dF$ngSJLx_>~2lEnM%wq(C`gmxuBb=B`?*_8YEA3m|0!eKH?>LqBC~(Jh{(q
zx+^PXmv^dOyyx!G1-<liBye9S#yHMkK_sSaw^^mUre$c7Qg7ReHP}ydR%j|cCxT^p
zKpE9~6{@0qv5YmR#EZ^C|0P1~!W3%yWO$;Lo%WI|kI}1%RvLG2<W%iLWs&v2y1@qy
z&fnwcBwPKO!Tisg?H0{iv8!=1M6mEJd39KRB2sQ{S%Vfoy2W$V>90PmmJMKxiV-`<
zwsJ~12)KZZ4ZPGXzs><aMGYe-lUx||rt2iq=T*&z8HsTC4}xxTS6SfJa~cqUljbst
z`pt60LYJkSSok=(-7l0e-gE=OBZN5p&Eg27%q1;VA*viG3CaA67%#hWV_?q_Wwt!u
z0QIdA;Z>H^Bg$u1h9f3>tG0tm#VLrS$reO0uQPkWMDCtKT%(~j@qp&Y_Vb*pG_ZGC
zA`7YEl5rAI_D)NXQJD%fy8go2kb^WLNb3uftgIj)&~m~917;YrE>8DT;RSR19{~6C
z9BooW0RUgZtKwjLBiUPR;a4*j#X|!LjjBMn2f!;fIIPYT(ORTA^eAvy{CAbwaY0QO
zAaoK6y`kBykD@p+0P&-LL*T8DT~j=z=zW9iru#%dFhEV@l6FpzMXf3=5*A|-jR#G1
z7UtqHu(<5B_D9UVoJ3SvORl+3=_jYa(^rc56wISTo+GC+o)jN7o@%$mY$~-;jaw@G
zeebcDS`&kMi&Z`aF92(AS2N^1T30Ty_5^$0%xWw0TQKbj^_U@TMdKGfTl&kJJVwFx
zM;L-p4KEf@(bPVAzf2T1$k!f6)phor7SKc<FttM)Oo?-N?AB4h(p%vP6C9c^9)G)c
zH#>f@U<tShEe|Ty)rxQfl^Vq>F$#XffEyU5O7DD9xJm?7-Rb2XSgKc)x?>3+qtW7>
z>Gt}VCW%<Wg=@M~MNNGRZG7Y`3VR`o^c@Fq7|U=9^E<&t_(m2KT_uqijjkevLZ@re
z3v~KH*RQnJ*J`dlrD?VZ=D%u-rKC$!^Q}#1%(8Q7&<nhFS>Yq-YC5o3R-jrw&Q)4N
zdxC?A!%l`OYI3*t=Qs|OtBYSmIsUVE56dyz-Q`LCibf-pn^*!b7Nkf~qC`ev&B@}L
zxr?9(ITf5jOSD=}G9{~NNwVMOIFQqhF^U~*z>0h}Bj^Qx)j+F9Ls0}-wA)8yvgzT1
zF3nHH**hnD*j@YxvZ?zwb4lBs5&WN5__Q*a{;2+*X3}>Nq)VmF7iRH6j+S2dqc#?s
z$j2<<d@7&6AxnRumX7E@pIYQ8YXiUF5)KPvC4C+hiyVn#dv1K6Rw!kvSZ6ONNxC-X
zj4o$aWwPSBgV{trdy44NAX8XCkc32Yi3TX60oV|>BFZ9{-fBb*k2s)9>@!Ck`=--P
z8x@kA#v`d=pEk=)BB{w}DL?=a0tA1k5fEf@+yevhp9^O~_lMDXBLK8G^KX;XfT?s3
z7<5AAu>2Jt_5bln!ahG!_a7|iQ+=|J_z=*cAh?lr!z)mCVrx?WU-2X;!z4WcH}9`;
zVRL9B%bJ+Mv)=%A-&CKtd?F~Kiqmg|yuc#tYd833USJ$DITgTw@hc8l;PhCIp%98}
zCahoeo1ptF#oc$C-2qQSzAwv)PXSi<AwqhCsDc2@-m}MkKP~$-q5;oa{;y&X)c!Ki
z`c1eKc036Zz>W@y%}T!)hA)2r_VQ=x33L#Xp=_p5d@h6=C2co?KsVDq-sf%b+Anqd
zQPefjg1C#OTflVrDYgv2tkWYaLGS(u>zo(@01O}JjXnHD6*1SXgE{~JEdJ%~$<+J)
zPXyyZ?Jr6J0C>bD<i8tEx+)H+h7_iyWbws$4fNqjxXOMi*gujO;7h|{SQo|qB~kZ{
zZ0f27e|i%m4eU$*`1a%J{ud*-)j&WWB78~|LAG_mD1d8VfWq&+v1mW8sJ5ij$Pj(J
zqM$&LNh&H9T{R?;?AM@QRSTf2zXpGMgMkd9W=YV8t6&V<&|#hU5L|OHK0N|l9zEr&
zuK?FLY+nSfNr%i)JP$3JgpA|hJP!RFGu72dXVdAhIq2Ljc&zSqvoA()A<<lD3}0DT
z0S9Xtd~c9w=`Ao<!HBrdPy+4M4rEs`{x&Fb7^SV~m{=hdjpA1>z(<3`B&<y_FiQ}3
zaSQ-obkN)f(pjZb6FR3F{A{2>Rvm@bfC<JL=jhf0>j+}PdJP~T8S8z}ZJ#iIY!JJ9
z#4Wrj)i66=pCs`n@NvpaiNyo}7dec6(*KtbU19HSknThs5X=C;Lx3tmK!b-O6byJ_
zgu!;CHzGfxz&_M8@TNCGav<SyfSCTpNFETl8nM6^Bas655=LyGP$g0XH*!a$1pYLw
z58#p^;sBn!SSv^W>mn5hpudU?f;YV<;sTjI7pVe579vC7OP3<UK%^%k9!#dS$OyPm
z=b_ZVpAB$5Rxxoi#srNBNYMGY4Ky?6ble3D<s701;*c@THRobNiGE&qVTTC`0WobH
z7t&78+DJJU;p+~_tTrBYO=!?AUBgB`m&HSDiy=mXJX}#ODAt$j9MQyh_#<`HF(ZN!
z4ol$dh!Of3olGCYuLf6zGDEaPS&JlBpJy|zjrF(aI3<^FIGB`D)Wuy|mAVY^cTY26
v6b>e=ohf3}u454s!E&{wpfn_CorWn~<x{=tqyS$-I6oLSlLzwN<=U(Qcej&u

diff --git a/assets/inter-greek-ext.3e6f6728.woff2 b/assets/inter-greek-ext.3e6f6728.woff2
deleted file mode 100644
index 701afd3cb0c9d9febc3447de874cb3b432f903bd..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 16820
zcmV)7K*zs#Pew8T0RR91070|>5dZ)H0HiDc06|Fr0|eaw00000000000000000000
z0000QfkGRH5*#W&NLE2oiVOx|KT}jeRDnhSgcvV^5DLm5!#Oa4%T56{0we>74hw`1
z00bZfhXe;88;YG5*tRr=dA9@1y86dmMo~#?8b!G#tvCDs|8sI8Lm?`V)=d2&I1Yps
zW$i)`7MkK5Fx^7~Q=maN_l+)ER&m2H$?$?5V+v8Kc!fmWS)$dA`1e4KZc$F0)80>o
zRd4(~GcWJ+-h<Pc>~8GEALXD(wJETt>SM;*qILaTczp}Qjg63uUDybk?h7bz7giTG
z+2ltPVWoxnCr4c=<vzZ0%k*jThFYgdM~~3hC%N$7+s~>SA$_o&)Ifap_`9l+*9e28
zC^<dEu<F$ibL#ngsI&fzMx)VaYztc$;SM<95Qn9uJBeXQ>ul?6ui3W?n60I=wO?z=
zHExf~rI5scuzV;t`?q4At|?v7)RGAe-LQxSn$j!`pFmT{PXh!x$QReE+u3iXN4<&R
zL%8X`lVGJb5&!B*+I|(iOUfZl73MYJZ?vP%M4d0H{5-vG{h8@)GEE1FkcSaxH4h`3
z)u45aY{9G>O4P`U7_dsjF4ncnR_S8#)di%w`2n#+Hn2gf1}s=1g$fZW1Pl-{K&%mB
zi6N9ALkVSsp$;&Vp`FeI06kx~efMWhG=)S1gHY-g=S)_Y?hc(nPw2?99H?u5ebur_
z_d}c6Xiw)`2a&3jfJI4Pq9uRolwV>A*b!9#?4vbnm60?W6+nPBw_^6a<No-;N?dTk
z&<BEQe56AN%>REs0jIC;`%#NLzSi#J8%Tm=h>V+jb%W;rzpwh)o_$~7d!N({Ku!Q=
z#x}VA!Wzg?p=j^`O3M>N?@-i__dW6g1i%1-O9&M6_YmR)fSdr44g~PX4}#zyCwWpx
zknp*T$&mQ7973#|<q%Tm<<7Z}rKhMJQqj1mr?PYDu61A7|9APzX7Uo+gPu>b)!09p
zR+WB)b14~G4Ts~|BJ|H}o7q++D_4p2WzD|4B!CSKHgq~ukH77Gp@+S;9I&+5TExg9
zi!45~q+G7G&pXE2_YOE}z3ABUuGyAI+2rf!L*mo1y*dmU!p`zfLlHr76oD%p+;uwK
zvlQLkeC}1wyVr=i_oulJXSvUEo%<S<?pws&PwRKTWtsb3Tisv#oBJPriS9{m!xStJ
zwosh+NZ?cy1ehS>`ZIt5PkXtOVi#2{Gt<Gq99ivX&xNadvGkOi&p8cCn^8WmrBA;7
ztn2Cdfa3*&86%g!#-RWsD9z{rKg-|ehlR5TmFo4W&8LRcV{opj4WDkCmfJ>_s_f`2
zZMCSlHqRbQhM9IAl>F<1Ja{&7La&pPn&upV1tCGImXeZ3;w2(UG5=DC-8lcHC#Bb=
zi&w5jp|VMAt&W8jk$I$9(jsZDG(&PrUWrH)Lb9W}7t3|CP0Z%%4Z`NdW)h<dRq{$q
z@<>e5z|8>arv0L1=>rFn^+AH!i}3*)<+|33vtA4@xi7fab)9dS&JwTsmirX&P2ksH
z^<Z<smIFH+*oDBZ1y6yugI^8)dkTGc7~->tzz&FO5guy)D=+{!fHD1}wa2S7j=VK*
z&)4!4%7Fj{0>G;;Li8o@zXIXcA^Zlkz8T@SA@DA^K8VgQ%axA>27m?t0hVhP0S7<>
z3K}r#AFRGm01_xr0El!Et!)d@*6B7WC!3|>PT2{_X%3mvr8-0Y8K%W*X$eRR4gdpy
z00nK&oBu~D+e1KrfCdBr2KT;6Z!EJ9Fk)1r6`E18{0#vJFzFoCG3iy}|CgH#tt_#q
z7WTjK9gY9O1OPe!2Th{qiwM2`=FchJ`~!K7m+?2VNFUZyMgHSDB*|n0$rs5+EyHFU
zw2u10iA4OWh7j-@yNJ-A%t$%*n^j+6X$#5I-zKp{{Kq8XV#8RZbpJAvykw1xRx?iO
zwlKrF{?Du=4ZkalFHlA1!5AOOAAEDx&n#d-q2KfJ#S}ag(`~`q4&SUi0z&dxT$J$U
z3q}=rh`#JY9fim%`G|xEU)P#Tn|~3)t#8e{#zXKOT%`WMyFR6KtNgr#JKvT36lFkr
z{tYV4BQ!TnNf(GPYqThRiHXa$6r}=7YgnGUB1zutuodx9MLyLVcp3R;z-7^-B^1{o
zW`hSPV|e4DigH{@o&V0o40jK=w{9DGFU6H-p+A4dr#|~>=Rb3G_v=@I$z5`G+m%BL
zufnk#wbAx|q4SGsz51ndTe^fdt>3Uw`1n#=Hlya3<l%=JSG=OVXS~^YBSf$3;GVIZ
zv_IV2X*V$NhLdKksw!}dYlL~(Nzl~W8Zp(?rWg`5J`5T4n!-^s!+`P5AV)>&50ue#
z!=}k%MoU2&Ff{H@fUn*5r#}qO8HcW6TVus?)ArhX%_h8irGJWlM>OA!*OOom0Q3+5
z97%zIK!5`5%K|tSJ^#)V&LJV-5zlGo5F0^My%zJW6qixbaJ4D~0ISjm?VTgOa93wU
z`m9cB3WC4upRJAO&hh1}O@{BB9$jDE_&{>*u{jyhz;Y9O7R`Zu{ruL=DD#{y<GaJ;
zF+$bA!Gb8H{fXr0So4}CJsVD*`Heq<B?uc3NU$L$2V=iH#yg>8-=^Hz>ql4#jAXM<
zn-iQr8#o_5zRy$G@Gjm7^d!(fpP3zgAxv-&`hz_MxBzJ|BqIvg7R-wOsW)V&H8$m*
zUYuy}Sd#2KWA>c6^X4xotp6O+_z}l(0vY^-9+Y0Gef4jz)%|_JJH@r1efs&XFKU?N
zuO}~$4%t=Vh*N!UO>JF$Lu1p-{LGepTHD%x^>gl2{&eq|`q$rB*znIqZ~DVNO9i6;
zWv>qW*51<E79W$I-rTYMI={Q8_xC;h7c5#_ymfo{$kAgX`<89_ezw@cBBIXwAHwh>
zf3uuVUYZpp>}QA76pk=8t2NL?yAkG777NXA3vuQ%yE`OqbK>D$U4w`uKJ9~}eA-_P
zmXAlVK#g)ET;)d8Dr1N#WBxe!f$;<uNGk6lrM&A;L(0T6SfEZBLcKI(yTorexB|Em
zasm4HVEr`E|LW|J`>A~3kaM$+^Q7wDT|MqxEJg&MB&n!FnQJZi94xTa@O9{=_<6N1
z=l(QMQz|*p#6d*cm|)}F3P-w9DQ4TQ>}<viZsilP8atP$jj^CowsMuGxMeg~DqNH9
z1XHRru=r2HvI1&zV3~SHE{(AL$-P5f4gj48q15)q{T9gwI$6G-P!usgLlFfxx~(kH
zY|iuch<Fj}*IJt+2dX+WkIgJa#IP=u$}ry?zigIowjAe96NDZAt<vO=H8d1qmsvi^
zl7EzMgjN?igyNX|Byf$jC~=!J<X^UY)Ut9ZSgKGdm$iJTp-jk_$iAXD()(7LI&gU{
z$tWz>D|&m!bQ?WxivVntoQgqX?>v)s^p3r`cR((vYsk%!T9$hY{Jj_Mte2Ll-pSeU
z8{oAtIq<N#e5q5FHFFehlH%K$gO!y)iu4(jry`eVzQZ5*`g3|G(|Ocf)^dfa&%)wV
zb&EVKlgr(=`76bU9GM;-^`=hWwcIO^^sp)TYfbMDaE-^5#j2#$?!r$<!FN_iJk%TZ
z){9N$63hMKjZxV>10Mfi6|!>NmCwrG+e97chaYpVoiQSZxf(X<M_hIiv-aclh8a0j
zu&j-~{*bRm2VQb-IbQUQ**tmTIH{P4)!Q+6Qu}HfIZeE}_0UwYVm>=!E0cPQL9xy&
z*npKo(W~BE&b5!1j?Crow2I+3(aB4V+{$b<ICpUQOSPp@++;P6)>%#WxgJvPT)qGs
z^%7iLO2hEeNj-S$;-P5D9u{EwVa=14zSO!IcWnXTncvPiAG7U+PaXC6?%j#^`e`4G
zE6+W+usDC}+MyBqogwRUSkmy?BDCO?oga%QCr^ID8d(CbO~MO~JR@c}Pm2d9SEanh
z+RXD`J%4UV*HyfC^4k)H00F=Hexa*69Zr2)c)VDC-uchF^}Xo)7vbJ41kendm$3fk
z)JGXbKbc%>ZA*Wfp^83r>Nm@lvB|Y_W3BY%_v&B%_-u6Y*S%F!A9?-<?l<O(&5P%~
zzkGS>z3&%o?SWDc<Og+3X~i(<Xw*YJFJAd?J4|I<rt-*+2mZ*te7lTfZ2F-;51gB5
zbK>O2?VIi!K3Q<z?1#^5De}1tA~IZeg2?wf^NzSa+dA=#@5#TE&0M?b=wym1<KMea
z%+f8%>rCgh-m}j3uh1XNb=-E!4~N(O()8k<S2df~bY^E3pOsovu6zYsmMW`V=j|S)
zJ94PL!7Cor9U{N`X2T=DxwPf}<Gw%SY=2|T%9G#Gb}U@%<%RO^(CFoV{`Mbx>tB6%
z<BjNJ-L}>T#@+K?eaI89KjihoPmY<XdcnWqXQ2De4<1{7|Efc;!{ns<p)vO4tBY=M
zeCDU#j(G1ohk5@b7rypP%bP!{dcSMfqDMEcxZt77UVp?7HqS+wokwQ8W$txfuqL{d
zSh#bE>-CMB#<u*aJ^qb%URk@c_=%gIeBrGrP`e+j{uUJQk3Y|vb<US-I;y{V&y6Gs
z^(ZLd)lY2y;@S7zcgGtTrNHR&$%mf%OKRzoi*)|gv9_C*b-oYB&V*72zWK%jBguK+
z{cB75Mbn{CnUBl^Vr#+&mIpt1?9+woZNKlh<E8WOd-&DuksE&Q9~Hgvz-VK{X>Ypv
zKj3D?^^95x_I-11eP7v?S9dmSczUsgEUr+_Qcgbe&p&LE|1l;nuesvr&py6gf6woa
z&FI1Sw}7l|f6(sx=kn3prmwfFzdV<Y?>PO|<g?+r_FoUhqx$5;C5cYLzi@j#|0lBh
zuD>68cins8=TAEwf8TL#!<U{1pA)!pr|SvFT&%;O=hKjS+ZK5A(@=QB2R|kby#M3o
z^sE;vg+i)=iJvAK9cMmx=24*o3nR(im)9*6jAwoY*!$Lp<JG60oH3e@*gED>Gw|76
zM_)&pkX+K+tDL{%@Mq37p9@u+Q>M<U{bjeSddFV(lgUX>hMqO2PMui;b5&(k=B3%Q
zo_(px{A_jBRyf!D_+Mt%W;yf4q1)Fu_lf`4UYjg-T22c()Ms^UPY-l|HYJ^UXQ!#)
z=bde9p2@9V=kw3@uaGNpt9BFpl2M~DJ7w*Xp3f!Iy+@ucnWTc6kDhvplW^~ok>d2}
zoVvDSe-(_mduuawOYVRByj*<#@#h||EK$4`R`>}vxUU@M?X>m3T07S~<f+F>hFY-Y
zDbc)q&GtWu!;n<o$M?2R@#$0huo&L->%Z3>d)YUCI@tJU;m(Djm+Kp=+S7gUNx6r>
z0O0WVQ-#*gF}(=$2JC34fo5sB9a}ol&dqqLp<-sMS#W6H@`PjLccxd%{o4fVE)8^{
z1E7^|pr;i=Nf^=}N`Srq3B)_CPVek>e>&PRj_D7gD+L_vcvaA=L^WYa-M#B+2NuH<
zFY7YeVdM)6k`{FqE2gp#+R@DE5*>h+c9*|Rb=|vuPa&T8KYMa$_vNjWv0gA~=)BWe
zafeV{pYv?gX?vab)HZ7g-|l02LcK#%s5k2hwGG<Bx4W>uP(=D6<7Rb~cP8_zEY7=4
zqS2J1CSZ<iV#1M0NO-qS<iX@20Wt5k6(-Zmt&K7u+u~E+MHOCZvaY-7v^I}_mr;WI
zt}w#}rh7seQ3jw2S8hMCr5n4XA+|9gz1ECj#P3y&`<L%#ngrrZt1Y94qutsJU3s4D
z$5AyjL^meX9H^e_&l`J(RlsIjd`_az$%|x3Deo68z3}*72Rv!SKf}lm5M8pJ%vRV-
z_|KhI$&zuz|6(9D5aRdzl~6I2S2+LcUA4}T1Sr+7`xl6N<%a5df`*G$Kvp-=h^=X2
zx9n7qtIa#7SbY@Up0ypRHZ35&qlAc5hF*Ob?fhDP&e!Yoysw_r^wgSlJ>Sa>+5#=r
z-k!_OqB;<Cs*6V}zc{}*zc|0RX)&BX$E-f(e$uR9Bn2<`Z4(9Hfe1(o0f+$zmH<%z
z;TB57pTbr$bt|?wh)(xT8)e}yDakP_Y=bAXREI5Iv{Xf13;&Ys1h&FnoPX|wcSgpE
zi6m)@b=irt>uA`nql8^Y0ke+HVAmb7M(U}YU}VxvQn=mzcO&e9<<W%%fJzDo0cZip
zrGO%UC`jsR-WrlIrD3}+OSCrVhK_o(MAO0kH>QKzXQqSO)24%EG9BE|bg=472g_nQ
zI{aJV|8r~mOryHRnW?m|AX43C?EkB=Ig^hS-#}^mP4m4=wiDh8d#V3(ry;v^oYel<
zn1GQ<Q_I+72Ei{>6$be&GZos1RJZx<|3kMvC!^`^pdN7BP4t{w3QvdE0XOaj4|~XT
zvp1S<rhY-biqxA0;DHE83jv4$2$ld*0O2GM2k9OdBW*Hz1mRV-nFw25{5i8|ap+pR
z4vXp~I7Ywujsywz8@jjJU7k9k|9>$fyyHJKyxsilfB!H4TYscO-x?0@EqTd5`m5~p
zH}%1u`(qpd0G0!WLF{x_KHW$7t#<@}5Id4GtuddA1XMvGeaESSR{6A@%i@mU7b=6;
zr*|{0@@FD7+Q$itk&SmX>j@$b?v!AC2`UD08VfKQh!9e`C~_-j?qZQb+*P)FKnco;
zyP90ps)+ry1Q6$XwFseZ$0=M4LeB799FBz&loK3|MMQwr2l`@4TZ&wFSG~<cBr4s6
z9=ZCi%;&XIkdHx;rjg*+gKRp!i1Uh?)_$H0mx{tcP^be%xjP}3f>OH4fKz;E=dnn`
z)f|ai;RB2$0a%S55z%EemMcs`KL>~qa0`Y`nGk7y;|z-CAfhHP1ScTudM4Gc6BNwk
z;_j45qoftF&uCiZ%A^SUQd5^wO|~)7BW;IFT1m?y&%xo0Lj>bS4DW;p>Ktz-qTG|R
zIIl%&$7#0Ba5#c7z(x+8QfOQ|Bp0}Ksi>dKXkiHXo%c&yv5njlZ`{hkE^Ql}as)jt
zjZljf;C3Y;meT4LdL{%R;rEeR*KE-wK#kB`Qx?y}VZ4_JWg@;J0sgbPrp2TEMzda4
zPgjV7`{`*&?R;Ds^F-mwnu^=XJ@Lj5c|u)ahm?A`;PKKBdLarY5#^qg#Wf<N?>J9l
z)Rb~Wj#CP7?c7RXtgr+s%q>&mnVO5GKU9NZwPeOOX69EHc0UXN3OayJ{O1i!`Cn*Y
z4GZwGnS?p9xA8^z2egA8!;2-jme3y8=9MffS;uy<A4;wu#JbUZ^d9<*e~bD`k=~$J
zl{S}tqV3airF>-^f0Vzd_?Ke6>uc93g)pQwrW*5<&B{&g@07jD8+o~yA)X=rL9Fs@
z^>h<g$`oe3SylF`>S6h;YN6_VUx)9A>by#}4zs?>%8+-dsp@6&UGg*kH~u^+Ouj47
zH%fXS&9F3R+2c_a9kDTrSb&KaE*``ooJC1<@L`Sj@*s=!+LSK+s_P!@RaV`MJXczI
zXYR?~4DO!(-1b90;4`M`b=F;_x~V$qSpDCww<B4CgSZ19#UJBLEH>fM33JGsWHs4J
zQsfKjj%V+lPV4Bq^ke!pJ;^SjUS><!f7w^;1pAKrl1;yRn%8kR|BN5ty`oR_i0?qa
z2G|dI_){0vP0`JfZ^|`tyX=-<Dq3Cr#D^w6t2U^s)$MAx`nBe5$lW(nds7Q(`?Pa9
z&o=9y)0_0q^aFaIL8dj{|D3Vi7@8EF^vI-{<^t1YZZP9kdDHRM?!JVWW}d!q`gPMU
zKJd)`9W!Si5RB3M#Rtz%o^dF0;tNL<4`=uJx?-`X{p8b+C?A>Cc4==KU>FPVZ_D3<
zEhKPt;9>xWnP5-@K!OGm7!(yX4W>&KN$AOBdb-TStN<3N5isE4Q#RY!c!h3uOnC7k
zYbQ=X@FWqMNt3o_u$aRgFtl81BSe=>L@IF!gDlzGOK77lA@(=gTOQC1IZvGB?4|Pg
zt}TT!n4qAb)BVN^ObcRMgMGFsT9Z2H&?Q|q6;q7RE}4a80kLk+%t)f0rm1xI#02Z*
z9uVYA5oTQ`Gm0fojPAw^Y8}%tQ7vlEfwh>AY(w$dpOp%oiD6Y;KBa3G5e?XIiQ96p
zzIjC0zCW|(D})FOqG#H)mhi8LNj>w2=$F&p&7WlQ43qCnEN<)E(6wb}GC5{H{U%Nu
z^oc-!`!oyI<44iHF)VgKfFSu4&F+WiNfM*&efbEnfjy+i*ZRPaVNNr|?S?aMo8?vE
zAYlY~DeAiIB@w35Q`<u(KwP8=T8osIP8oXFt`!vKL`2sCTAXcWs56FiPatt{QAz6v
z4LAjtqJ2Q?Z^<!*(V3$c1>z96b(y}$VAC>5%XSc5X}-=BrQFRGXUCPkyf1&t+UmsF
z@HK=dZhrAI>YL`Os%R^(n9(5%qaQ1<Ay_z~`F9(g@DHXE^_`u6D$w*VSENa#wtW%3
zjDHpwg?B&-p_U^@ZW;KxW}2;B;aKKJLfR|t{{SlYHF^3-+c*zc7;+@euRg*LWR5>V
zoCH0vSNHP^`Cs+=>7t!hU)IP(te};4x@yUIWTs1jsiXX5xQ**)D#__2a`b4&emQ&b
zM&xo-02%(zjzOr;fh@r`zHE>AvW6TLP;!<O!Zd{)JpQU?haIOntOyvS6B;8_sbsv!
zm|l|RV9yhc!Syg;7zp&6edq>{b*I*=%yC5!>NW&KNMPIpy-QaM^1Q6Ti(Q$dy#-iA
z@~f@P$s~x?^+~#FR5MH*;pe2@7T%NQGlChq1cJJfWmBHSB_(Jh#?^Y$_E19DpqSEV
zoDeH2DhGWf?f2GPBO#Q0{C<)X2t^+li^wRJJQ4c#m_e;$Iwqp%a7<B?VH!d1s&tWB
z)YPam@`*z#tz1{va$2G(Pa>(5H=<j?ZCGu))W)H?AgTp)=Cs0;oY3``KVKfJSW&Sd
z@6rid^vbDAg9P5(g#?Wxtlrwuwb>d2I>i9=?<VUg+PpUxT=&stVVA=*?5oH4N#qFQ
zn;ntQYc!**!C>jFRT>H%#<G^qLc4cSr|l}j5%R&DH^3}sWEq2k1w%DFU6UY?*Kt`Q
zP%;nX23koR6Qyw9dM335znXw9=&Uo;#(M;)NX34}y$MA+(v1N_S~N@|wHBaZLZ}2p
ziDtB`0G$R(rNWgZX>fFj8ehRf+_Jg>iLw|1?OJXC-8mjF!Yo&(Wlq5na*S|(5Annc
zJBBn<SxqCz1s@{?luu9|_#8vdqN4eN?<U#@f!L7-t*R?Jg<dAgsO9b6$I3AVQO!M4
zvvfNxx4X#TgYSCqdB3`d2JC^r1te5MaN0KkRnQm+1YoF}G#B2kWS1DGbvd8$MjJ1D
zrg2JSb5Yl*tEa#~W|>(GP~-C;+#psjazl^=K~tovd)PXl*FZmYwbDKpNH@sitl|G|
z)@rv>t#gFz@p>;C1VJoV;-Miew9d@+3jYD?Rky-O3>e~}CCz{}-joyKR7)0`2{9BT
z3K3F9G9MyI4l>6YYRli$@W)VYG$bUGUd9B4dBc;i@_N01YzQDPHC|W|3zo#{b&p8{
zm?_VyBWPTgv;y3v!q|HeRu3(y_bjlJ>=qE6S0ligL}L~`7jahoy@hJXkeNWv8HQNL
zB=ONqKo9@~Bm@M+fmm!$5;{Y%=4uKHt)U3f=FF@i2BBNPO?1Ul^(2eh-8G8nJ<KUW
zqOR=Riijw$pr|JdNK-P~E-20>F{cQNIYoHPDWb(8YB(axglTF)arFr16k*UNLmSg5
z$L1$fv@$VOTlr)k{Rk4OSe2{_EyEz0au{4uSipW;!yi?79bmy?RzCwK3P}UpF{ij5
zAuW2m@WEd3LB6^*;+7%Il;zb%m&_@yMf)&_5p*Eo)D^w2n1-33jpl(Gr~4Dwl%<r;
z?DOftic2p>K7tI78;X#yz?FM+uYYivtwHSDXxdCiyFq6yxKvd)7wp!R+*voMc1aC_
zrMzSh^lNNT45;@HHk>n@oEdWrq<01v0?OwC)V8Nvr)|NM)s(tzRwuaiQ-E-fppJ!n
z81+QS2_oboCs%@SCT#`HSO^7D!zP4lLn0W}H$3w!g}f_edcnSCFsFKk133$J7AI1L
zvZQN$DV6H#jv`JpdWTtccjGe$M<D5UHo~5<=Eba_24NHNJo>N(i%~3%eyC?lAA57E
z-rl3VhwV#sJ$PGS6MHaX%E8+@tXlr<-HsgcAxOD7$W;ov|Ecn=5~zCxM6zS^KktG5
zmzq)oZT+WSgFxY0gT-^tt}HI`#*)^eDIg$=22&6fHxXn^2gS&w+6oAkE~B6}1R1!d
z@{JCR-Sn_AVeB|xeL~P;q3^()^YI;GX6DPCQ@w_r+n(lx7XNNMnqV8pNpqYIpKo*$
zd=#MH);Q~jYJ+&-WwCjyiz#P<%B9LyrGtFfOjBrX-f)q!uac4&Q!-*Y9S`FFGL<ql
zcs?$bNLCA&{O$ST#jCfq?__QLb(|H!?U+0XS+?ONVyTZ1hk#To1cv-Q9m|0DMv>|3
z8xZrm>l2xzU7{@KRmO!9RJ5TEu^)j#iygS749QYA_OfZX{RrKGAUl1YsmpMlJq!UO
z4ryL)ABN|tM?ql0z#t2~9-Mu!5sZ3uSv>e`=>){Q;D`u}JUk&FLP`(+BGMXYC-@7+
zYskUi(KyJz1S`-`@a;nC8o%!mMDw8iynl@B`-pWa*&*CZdgw`u0u>rB)Kl(ck!fZW
zoiDQ;e#SYll#RUPT#TROp3$;XYbr4cgFj;pW}^vB9cwn*&s%jh-6e!Bw)MrAZS_B1
zEHhbK^Ai8yd5DIcGj2xfoQ($22kZOBRBROCA&eJT@_=*YxqlN7$XfR`51Sn4oA(Q)
zh|dD;wtCNWNL+t`Ic#?O=dRKMP5oyc?`@pll<%r6cyWZ2hb`ecpX{G%oMbO6*Xn1k
z9~Nm@Cf(6%FcD#P5+&*`h*3F4K(Nax2I98{Vn_%Xs<Q2};3y-4(OTCX0CE>I87Z?u
zmSC%_ftWmDTI>~uA<2-KFs<U*LctB>wz=#R+kKZn4l%i8^j5-3v>`o7u-5EF0_9VJ
z2{Uj%8sQ)SwI1%&RXh=$)Hg-6wBQ;CLEbt^G8wmyOSP?FF2pJk#4nmu5Iq-D-hjol
zFKErpNu3t)I%VpvoI9RKx6$t{6`D|RG;uIbRwPk71B0!3wCfVCteB!KER7AC@ID!L
znI34s64xjnsOF0;feDM{w-;N$S9GJ9c;dJbQ8kEYoTR(2i)onY)lXe@ObCA-!$y0+
zdK}g3z@*ODa6&iSN@9-b6*qNj*c2^}*N)?ZV3>s`LTQ~xu)PpcV=ptU<dh_c&MdF1
zT@30>b~Nr`!~<2icd}cV%uw<Ik856Ts-!9TNJcU!GTrnu4uQi9I3A0!7>k!<zb>J&
z7Ld@GA9p7LdUi5b_0DxWt}?|hO}W@6b$$YwklE!nyX7QG%T}r_=#q(JbIUF?ZL@&Z
zc6s?Ubi75ES$&4e$s`_iQd+mM$q38o-8l!dRjwo=FI2Lu@hQ0IGcx<C!B$)aj&LES
za|Yk)WJrb1x*<ghUwS}XYB6{F+D|QC5D#?0N2-o(Q4Pm&!=Y8Xn(7(KZd7Gey<g%J
zmKRG!Y1L5Q?kZbyq=rcfL!U9Rv-%N(x0BphmPu3BI49%1Zg(in$3?<UG^Cio;JdyN
zL>GM}TySj=nrDWaNM9c$4M?Ty;Q(<ly1!>jKE@<Jl0BZif+=JokGS|JyGq3Y)C{pp
zWlzuDiHtQ^jW`s$he?nedWgLi$XtgZg8WA4c(vHHN<Y>_v>>yFT;P}?!frbPRk<bs
z*uhnBEX+`4sPTa8@l_8{wT=lxHcH6K48{Y-$b<%<iK__^_yqDzZUR=pg&VO5UC8H%
zAvb8H*XR9V?;uk(&g2dz<MB3A6)l%~!(H~j;-a2}nj9F#{IFS>s>@ZaTitsg3z-lF
zqMJ4>$3HCoHl*_H<^}p-A<oK?aOMuPV(E+Y_{Ac&5@9R;G+SBN8qq8vOA=pU$V%y1
zXoa@g{;S$h%*$9o2;6aK3LTRO@wfL)DHlvDzcx4}ba25?)*7GZMw<*rhysdPyYKTq
zO@?a2!<E&!&Qry6`+M&_Ow$sC*W4<`FOW|VB{TGvr^Qp<IG7>g4!K>;&GD7obf6a@
z66B#YL1@EiLI>jI0wI#A_ciqj!8*D`yG_Hp&mGtNC6*L+hZxka&3?P-L+}J6|8?s`
z&s_Zp?artBfBj9!?uf-|BbJ1n@qXH8Ya>IzO6j0B5(sW~Ed;063y&d}t*a7BMg~2&
zW{9e~Y%VvDZ){E}82fQHo9$(80eNq8eyGFQgAJdi$$)tbqf=m*n4}3}(M3dZ7SQ`N
z;bS;{cSiO>wL>4ln=-?vdTpy5AvP}P%BD_>fB;|Od7Oa5(Uv2GNc?rQKFuTqc6=wb
zr?w&#3Yv;FE=49EZehA0u9`D<UiyEj?N*^KQBtZBn(*~KJ%&!A)K|8)>aCmHq5<nJ
z4j7&3CpGpsV`0e~6fhIe!LH`!6io_qI?LWQuJgj1ws6!k{qB6t@!?bUk&-UXH2nP~
z&CCVoJt4%hF*U;oaMtc5l~9Ob+V^c{4>FzEZ2RN=v`npIJJpVZW><a6{ybqF348!O
zi4Ojd)9|I%d;vi_@w}vcSZdaeY;uYtMkBQ9L)Ghqd4=;tw2CGx`d1&-mJf$x*Oli9
z;74DE>@7*MhYhsgBS@I9Ns=un#_AKeoHjdm@$!``mszfP`PX%#uXxoV*ZC@U`W$mz
zsHCY)wix<MF2gbZ^w#D>pulx0gzt|5Dq8>8&58Ek{hq8_E|Z~NLsPaclgZRKH09d5
zh%9ru)g%4Jj067f#^-lt@{3n0+*;^jwUc_&F|_H<rF&|N&xA63{jNjL%gxXiV2{l}
zr5K7_17X2T{pXRNo&Olj^Vh*5aZjS0g)}{J58V95KpQ!*5Gzq;w0N=u9;)#a8Q)J$
zF-9|RqTGreS`T|(Ze|*W=5z~)dV*Q9Opv&sIO$<rtt-c#g~+m022D=YI-YWh6WFa}
z_ewUX4DIcA+9jx-zv(SPv6lnNrGw64<hwtejiD{&v^h*p5gK!faF|nsLZ@-(Y=0t@
zi3v2;iYT%D7Dz|TG5Ih?*jW@N`2YTO#MX8c9?BRm$}CthW}J*~X+2AdHP&KIaS9<P
z34xG9dl6A%s6qv%we~~{(v&eppv)<*M*D!eu8oD-t#q7;5Bf*o$`^PSr{f45fP<Fp
z6YJ9%yRoUb+jf+#Ehmz-(-FYc)l8w>k&Q94Z;<}89}UTU_HPfOWmcOcG`%@*51bF7
zNggRCkDXa*h?jW}92cO2JckHvj?asX@Z+<JWOjN;xH@RxV~`=^HDy?7s4)0fnh*NR
zRp$7QxiryS|KgTZ_S&XHTM~}I!&hpCHJi1QuVuSa@kgIHKhbmP2AD!<@>GOUG|28<
zOX(G)^mD6h>0s8P&b!Gct=Iyc-KIACzfvzxBu?KF-kd<FDUA$=)*N@jf7<L_@$)U^
z?t|3rn<mVnvQg~oid94x@4gPr6I{iWNbaaq5F<FUYzqx?(IE(t)Jj3moqZTeC0vLS
z6OfYkSng(s#IB^`>a|9nLLsGFt@9WL2sY8{W1BwRcU`(&`b<dP3ngyJ#j?})D&x9<
za8nLhXIbA;XprHWU)G5bjFc#%WMCSOO`^|8+lKi6Tshvn$Q1i|P-#<%l&io4p|bI!
z6kfx4*g~0$e8iKft{|a#N340+jkD+CNO<|Y+@p7Qp^sZ&0;ZUvRN^*)rw0Wov?1BP
zKxv?m-x^q#@aj3#7(g+lPd~#nwBxLxcsT~V=LXOoODl^Cxpz?owHU`jDZ(mKP6{L0
zHQp&n)*Dksl?Y@YG!8u+uG-kwO`9fN=ey>Q;+TS)60Du#x+K$>c?}Auozc*r?Cs)_
z3NE5E{xO+E<ysMGoKPyr12ARV(@s&R+7qb0HPD{A<!M6FW&5$a3YUY5XL)}-tjz3@
zGNAlVRM<yYq3%JlR#gVtf*EQ{m|w$G!V;&GorHS+<#jV>spvy(F-&mm#IjEAktJ2C
zl3?NxH-OSoA1x=-m__4n#zZCTC&pgOXv~?H;44cXGL5nfpJpV;OP%tb?*Lo9nVohP
z*eM#JP|lrFouD2wuw%VDDeK8Zd<dk$>ZeWug;Mq@IeGpzN$vUE7VzUP?1v+;af7aU
zymeEo)EuGPP9D*=tNexekJrVQ?d_#Y_4Z}EO!q$RGxv&n4bz?Ny<N7UlI;9IYG>~b
zQw_PQ=8jEUkPFX**h*S`9LsMtWnkOx2ZVH;4(7_cNA57@VtCKBe5j&#bPq49vh6+r
zAz1ESG4cmdWP`s5VSL-H<5Q0DBWaH3e;BcNwMjd>*f3xESK4>;Nb(3fZhR5pIlnx!
z<J-iy*N>cF3;3J_ojKf}u|8HpFL`?Tk~+c#&EX-$t62TTeWtSov_boBjv$O*=GCSc
z<)qfMP~$!7BSLKp4<GK1F#Aktu-t`?l$z05X(U0E(KSz}ziDZ1S#}`3za}E+5~AH(
zPF|L(9<4mtUf8cHzz@yW->&A(>$8*w_=jA4m@5S!hrqlVMnHfB2u22gd4Tzc;<yls
zPuOOEv8O1&t-tn>GHi-!CdS&LRP!rR>NWc4OE+t?VXmkxG~Vs?^ftwyt)QZ3)gc))
zs6W_YMj#aAB{Cdp;2tVtXr(-Z<JyA)1*2}%;K_R*h<t<+M0}6PdxDYwzl$I?7BqdX
zpT{A><$lEl=7(%|vQI*CO!foWLJq|n`?euRt*n_*G$1;@6X<;cx$Cf<AlHXW3xKK;
zH;m_Cr3?Htm)4F7*D#`v)X8$SDUI@F=P>4i&rVb!^G-w$hpU$7dW1)19bUDDX&V!N
zO2wfGVZ_?F&vMSLyfqdIHN~o8^Nb2Fr~BFPMhBTdL!}}mkKdkBIY4Z+B0?DGqM;ga
zhgnz8<rMOHerE9MjDSplaXl$%($@3>CAc*X7D!f_PG9!WD-3d@?R=%RT3*uQv{b6?
z7X~g|?sOIf__9EM)4Fqdmz(Q#i;k4{5cGH#K=X7e({aE>ChW&!;j7FL5%G~8i4vyy
zkgl=O!uW-2Md1!*(c~H$@wQLvVvNoxs>IhSY|kv#rLh{FV(v7T-w4H4cQ~0+RL$I9
zgigXYlkT|**uga^jJ;%H!_d~{c>v_6E=5>n%28po291ZZJ|{40hgC6^aOs9bH2o#P
zozSV`pDD!y0aczh$RwsylS&X{F$c7-6F2QS1duOKuR@Y6FGQ;S1PbMi0ga+u38{J#
z=EREwl_K23vsOzIxOXPVVI_80DtLtNp`z}vfl&_;`SOK9VI)MI6|}QwS$8}sj44r1
z0d3@ssm$eW5jQ1fa&K->6c-xOWeHH{$hrtRf;w#I3fe{Ej1$XRzP8gmPEW5gRt*~@
zXQN(RqlKwBj1kEw3|6(P%oU9)8G)f|2->6dp%M!bM;uOCvxKa;NR~{smk9N3`j+-J
zH;)xzkrVP_x2S97tj-QeF_u@*#V?l%?lPh!YBCn*5UdQl3<%(lY$cMc*Ez5l`fv>q
zz9S)8?xM5TnuxL4y;t<&b7Nvhv#oB47fVx2T)c(Xc%w3#xpJX+;Q}p20c2>zYXNiQ
zF7V4-DwD#G%w&S$lu<*0xuXfeq(zM%=E)hx5Q9I51>{~-q%bQ7;=2urd7}{Oq5)A*
z>?%_At}ZpLBX5X!0KgS+VW!i2f!w>)1Z^$q)3>e@D<24ICRO3|J|Ymz+1WJ5_^pss
zow3580<nwmT_&)$9gGvOT*?*uj7g_jRZ5-4B!dJ6I5hB4VI`zohTPc!thkiI{$I1k
zaccUy;P3#9)um+A*P1Gr;9TgSRBMf9!w~9m8RlROTB2Dy+`q7M^rwA`-tF2`+3b;w
zpq|%vnCT;D%%_f|HP?GK>S`xfF^+~9P&~sTIwBBj$|saW=ZTYaOS>)kbgUjRiiN!D
z5Oon^?!UA_;eX9a`?Qp{{JGpV8!OmJ2O;?4uBVMJiSj=0vWWx&0%z$+uT+%nE>QjA
zkJj6X>3k6<xQzgJVdP~}gBnpi-<wt_q;wBvpNE|3Y4zMT!A`Ow9ZUbZvu3MR&S@t!
zZ?taOr)%dL+NY1{;~L^Bf&c0g4l3O**tduKFBPpvU|*WY=?f3c3~ofve!bUPV5_G}
zd@08{PQ;doQB4Fx2Iar>o$tTgf8p|w#3Rjf=g(>2JnP~w{5HbOX{0|Qx^Ul*XQ>5F
zD}P*LzD0h#;1gNMC!-J=C?QyB@MwLjZP%o-6qs=Y;f)u6q+S)M9>7)r+cav-gm5%m
z>Z%=40R)H8XTVWM1U!ZHXha**om<ncEh}$4L_B)zbb|@-unONsPd3|QU+LZ57tmdE
z=0fF`l>2VIse%mUJO8#JL0SVYvB_L-T)Lrb%yv!JZVGswPkaiFUnpOy)6{f|o>oTY
zM$P;&4F`z~azyX$9;ic-ywQpfN%;T6pQl+cnk;E*2UmV^P1)7FcStk)F15X;x+e7*
zj63Hf#>&!K=>JHCscA7yr_K*SjMt7v2;;xM(0AeLaE3E37_Bf!ZJ?A<PQlz3kysf<
zuc9Nw3c2_YguLp6hHOJJ02-o<QJrCGCt(oT)31$T^>%}*w+Ym;eo}z02;Lz{o<9(m
z<LEQ_nW}+^at?G{QR#hZvFaLX7<!eovHisPpf=-3C<)5?y0zHEomR2u(N>nH8RIHm
zJ?<?+j^qg{=*g-jgMN_nIc<0B7V;GNsH~_zXr%`ZCQu(&r*+LPcM`-saG(^7u|4y4
z+WALwWwm_0@yjIn9XVyxD?Gw@3Cl1GvpU3`7quR#EfJS&xSt-^g7lv?mU~hrSQ=D8
ztp86_0vnr-&5>8DOaL=Kc1jhRA#DIkHdfpwnbK3r^sP%%spLvnT4zW;ZRP$6-&V;q
zyCwbJ4+GB0I?KbACaU%s;Nz-LrW|yYXIe{BAMV}aAYJH-2@kA1>wTX6wuWpcJ4u`P
z=yq&0enV@w)wOeClOb|}uUJcn53{v(@keAA=^}d({d+t^fup$Tw&?MTv1vq&<3!%)
z$80RR+uV|C14EViD&||T_bR8$gZg_79uL2i>-$yV=8FIH<t}+>#VM`tFInX!;+CI|
zPxI4?p~+g0`~7azO&wS1*;HS@nXRlGO|2jA*5vRJ{QhHp`Z)Qu`|*7Ed)dv8wrn$g
ztj)fR`#+Lq&g;9PPv)uu1|M%Qmu^yPfKX^;fa4Sz8sH@wC^nFX;an8cVmX4Mfsu+b
zAm6y;9HfDc&D7UL<;41EM7lL>Do_+}UF2vkmxx3qEyvgO1u=y~LsA~eIs`_-@W(vz
z`qt?&AGOW9CXRY@?U9O9In#iHGoG~06F(dlxPor8cD8dncbXe=ClCv*f+-Dan#DvA
zdrfIJOfYnvXf$}>o`BGmc5ZXY3ZXvnlEH6C8#5phVgVrw7ha#z#zRNNET(~O>P{0N
zF1Ho(?Nh{I@3pU#*x*+QN7l36I(-HM=F{937q#GDpLWUlmgYI#3r%;nPTcPZ2Io#n
zENm!<>b9omlo0DIXx<hK3Z4+I>*Q1i4cr?DhWU<9U9c5SeR38B`@^L}{taW45G>VV
zd+aC^mr{`{Yo&BY?-3&TD)!<TrwZ&Ak~6cLfk|BX<~LigP*Cd=^NSKOI30FYgG<gy
zyQDCJ&g~oQ3eG9JlsT#cBxFK$dy-lSy<FNY1r=+yeqC-ctpc3ukPgfsOBY>tsOC#9
zOFWhrTv;$-xg69U2Gfy74XW~Zc9)i?z-5-vPe)+?f$NNCzD}SmBr0zbD4;U9oUvQ%
zdzrHfJ^aM`^I4;h9Icu@d?6Tug>YmWat2F2r6D(`CwJU?Rj8TU$A>bu@3Y)7x}fA(
zt<1)$6;sW^iKl2OaaYiit>C1BWuf5Gl8AW4G8uZL5r>Q5xRI9&+?bs?ye{Gcg0iEc
z6A0lox3@RS^lxfIVaV@8pm3UF3+7hL!=m-~_N8;DSg@Y19;1C%TqUY(Jkv^q{pD?{
z<yp9t%Aykq?<6frD)NAbVB|94z0=_B3nW1+RDUk6x{)Wyy++Al2+BQ4Imeo7r39Sg
z<cU019V<zWBYWz2wJL-pObenyON#bg0ms39<=DTMD~!h#VM`+{YaQYjIbu+^%{e~g
zR%e)mMl>LS$XwOuhqoC$cyW#O3u9Hy?{=dzn8R^|b$gj%q$B;gRlzIrY<*hlTd!FS
z+i`RSEquN7V{DX#drpN#h7DcQd2@PAyUgG*y#A;MHW>SRfVxK6=%A?7vX~@JZYNc+
zBq7_#7ILuUV4xBMQgXu(6vP{~XmI3S-kkTaZ)u%=J1KSvHl~Q(V*xtQh?!p&MX>{U
z{8Bn!ymX1VF)#OOZD0EQx$LpTc7;d`t&VO;o9o-%abHU!@tw)Fc#V3Q$t(PCO_<QO
zXp>P?y~Fz+D8e)U_v`7HaArn)-0szW>klPh@m0Z~_oOjDv$3@}zrT24U?eAmQ@VvH
zU8EoK6}uGfCbB)<N}MF=%_YR^LaKF?Cx7HNqVq(R$k}+bdN^NANkR^Sxq-Pt@6gez
zXifCy4UUAvRdzTkm7EL9k}_DbfVqjhAU+Mjt{s36m*5y|Kt~IW5Pyvn%8{~pPfi#4
zfQY4>i=}F36S6Psq?gkJse~b0#^{~1pnCrNYA2+twMcaDsDF1+!<<-CBP?1NGj-*p
zdW2=&jz{2zQ=Z{vOWY>X?HxV)dwMQPGsx!;{N|@^`MJVW3Hy}sRL(H}Yd+v&lnak@
z&H537SafJjKopM7OKSRw$|VTL*8Y6W%Jfzpot%0l7l!qkIV)7vclsZB%$>x^T6lc!
z`?%*IH%NJO?$>1RnL3ASMBsf3dh}G(HJURYH-E)5ba9~J&Aie@gz%<*<a@DJI6h(o
z0d|nT`Yab<jy+430#^)u4ES*HU$?UT!IKo&u3jk=!J1gLh5Q|zeum82M2$JXo59gR
zsr#OQ%D=JIM_;-T*^GM$!3L>_v34P$eaVK=E0i9{5-b2&ogw0gG3q&EjQbct^Sfzw
zfV@9b*=tJOf`c=zBaUfEWV&@YmA+>iYxQ=xd?N=ed#_*bh+i)(q5&yTc|0sQ4)<tL
zzFi^5P2;bIvs$NTGudg`EG%?IDN0scdt=2@tucD5#HnTQo(N&uJv1K~-J0eW*_tw>
zcdf0lfJHlV8jJU7;={O?C0|Ym)dnKJfJBphHHzYw`O3n=LJ`r$jU-Q8I8>YW@EGO9
zQ`AOgh2-RZvE}<PSqt^S>ueh&eI3BkqLKHg$Y1LDwYuTD25(+4rz=X-0m~pP#N#25
zXRgIh04K=ohi6I9ML6oh^vCQn`8~-ToKjFyHv&P)G=3B?x$<0k^ybJiQm!G!i|P>E
zf<SE5+2u@oOQpUM*;MM#lvuz2b5=i32+1|1xmkp-gSPf9oX$jK%+j4vO>>dIyfryh
zf6-$-u>#A`jD{Ou^V9YPOLt^?PMqjDe6Z(d@xR>JUvla0)A`HH&WtOZL)`H^qo2h1
ze<+!qpu1qbY>r+~!qRjxY1_fOTMC7a%xd`7klNX;uNW-&<6)7Hd$R#NF1Npx)10HY
ziJfkf*?t4~7?|KXY^xzs#OUM$e2w!}*h!33Z5cNxgb8EAL6rtxN>TZ1<KorfLB&)T
z2&JH9p%6o?@l~>s5g^#0M<R-mBu)l$5EsJa@ctfvDABz7n_U5py6Y`?Io}Oeb#6#?
zA3N5)zc2AM|J(7ObH|g1f6B~|qnm=};M>I%_1vMe2_FsP`S6L34qcj0scFkvuT3Ok
zP4kz_1I7b6+oR2L^*_z95U`~4M5nabNElUk3^UPyG=k|REuB0vCG&BuhN$Gea(G`Y
z`_^StP;5DOZl@fqFKrT$9c%6^d1I+$eSNaHScn3(qrktZGJT~Di};{wPgKz1qDM{Y
zLEl%r*Yu5vME{uC#mD#-a1mffjpiyi7lJBE1+5fFB}xGdMnCwlG`4hl8)Ec=C{vjD
zkCzBj{d_$l$>fnWG9A~d2~K<Dk+&@>miKSL;ez=EeaU1zkyuet;W#BX^A=sJrM|Ab
z`H(oB;j!Q*7MPGA?&n+2a!&>p9MGIq-V817)2yPmEs;yq<Mh}<XL&$xUad|YN8f3e
z2;t2Or+30aw3j6QLpk?3+RbQbWzQAYWVXo_<YJBH;?DuvawUU|Nrr7Tzy?d#v$U*N
zbjT{DafPZx9x9(%s-wxhxg9R}M{Z6n8#HH?7sKli(Gvw9O3wE&p}+pWe{j)kF)r%5
zswSo2QH((-YcLO4e*PmV+nd+Z;jYM$t9bv<<&U5Wh6;^-LFyBI*0SxgSTuWk#hoFz
z@E&Age~a^*`HCW$s%9<<A3~UX6P#si=CNEb?c)P%D|7wGs&5{zkT_R*IH}Cws~?m`
z;dYTxlehUe&+$qk##|gI5t#gY|0Qd+r7@uHepX!>@+bY`=Jn(r=Gk*`XiVU8tIay6
z+3ki+W&}rgivO5>NC>m{KLcPP(7cXQj!N7Z3V~}c9*K=ufDWY3s@@kEMkt-E+0f?w
z?JK8rXJe$Xl5+&{S9_?p?6ka$5YT>-Zda^>OQFLNG8y5K|KWI^ImeZ%$gsa6zznAh
zB0erP>qo-02dL>MCT+<CtVqXirp_gL0K{Z$5CRsxcaR8-8cBp%EL=7G`a){mNL)l-
zP;E`9QmNXHpG7LHcqu?p*rX_5ZT%3fAlzvZ86jp-zt)n<IzuNf?m#tSGA}<(h`-LZ
z-{;h~1-Irt$Eny3wjsXgG-BMzldfdhJwT|-#zpE+#>QrBXlN)a>}&G2PF{zbeUQs0
zrNVx%k5sKC^?E!3{d}z&8Fq5}4%rcR!a)e8CUqGdK|9pQyXh(!=}9S>3=0Lg-E3ZM
zhr>c3G<FSQy+!y8=HtTw{WYvjnOkU|-Chb)47v*la~uuYcobU+Uj~it$y7;vs+C@_
zEd*0|<m-K{BlyVv*N$M=&@O*_OLvu3?yu^H&7qO&Rwaf*$LT0XN(=7jagKzk>9E!i
z>DHB@u8Z9_umSB-L!^DIc(Mvw$GElHTEs>+Gf9NmOKVue$1EUR|HT$StHRhXC@lqQ
z5kqiJJ+bI=yFj=m^*ee3UxaT6KTyS8d$VKBvr1Xj)r#U5`>e<3#@pTo(BY<~1+9M6
z*yY3YV`6;4hu%}WGN{~c1@-ri;RG+C!N8w6O`z75LEwrCV$XryCYrN`Jk+vpx4L=j
z>iq}t&-pFbY*dTJM#CtKC-vY|wCyhwe6fH5prJp%_D1R6dp6CxiMuTTfIt29twY|n
zdeXmW@zKN^ivfs1bBJjI_&;98ljVWNo2LW@XFmvn$?YHvjbJ;_q?9guK(HD=?f5Lb
zEwN4d5QIU1x}nJ0T&K@sXs4_`Ho5iS1BF=uQnQq{hV(@kev0XH20WavZ-N|HwiN1O
zc%A@fK*)_+u9@gt85N+&u6NDk_c|lzGi{mW_F>{AY9TTTiK{xHZlTMEO$cUE(ipL`
zR&DAq?}V!tK^UFj8ysL81+dTCDPU0v+q|h~aQuj#Rl+`_(9j1F+_FlYp9kldl2fJu
z<~c`EKhQ+&x|sz{)-8p3o`28-i5ty*(24&b`$oubd7Xs}5){<sP}F~f8p$XP#K9wi
zM%2T3_xj!jscWk|jejKpd;x?0LwGX>?OMS{lXV{MGoLHNrFm#@LPkqw1kkFaSb-92
zo_ALEA;H1Y!+xHNr*TUj346_qI+9lo0}usng@iLuex``&?)!_|Oeg_@Obr2C53Qd-
zqSsFm#NmDoEl#OrVZV;q?ylj!k3~XI_(3PO@+W^4fq(hKqPF=Xq9MN{+XR0#Nf!B|
z+-!*&Eso!%$dS?7qjHKrCe~7aT)1`qgiP)JBtbs$r$kHp)13PJ8TAeN>qzR()pOT$
zar-K>)Y%I13=Ymy)Yq;xlhIp1F0(@Efjh@8Ue8umjInHVrb{Jf3}vpJii(DpXug~=
zUG$rF^JnePD|UfQoB6T-C?~WXIoq*3juy8vWeUpSmlvl)i&kysS>SjDjzbBQ5WR>+
zO7e1CKT_DmF7HXyDM!t-{w#?bwZklDbz*f-r6kcf3YNEdzZ~kHqGFOt(a}f|lX*_J
n^7U?Xx7-eU#I3WQiJ&-knvd7b%rz5xm4cJAaP~<x&oBT0;f@S-

diff --git a/assets/inter-greek.117e1956.woff2 b/assets/inter-greek.117e1956.woff2
deleted file mode 100644
index 74125bbc86cd16d42ddc9da4c6d7f1ec0cbf5769..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 31884
zcmV(^K-Ir@Pew8T0RR910DO!95dZ)H0M{r00DL0=0|eaw00000000000000000000
z0000Qf;StV030emNLE2ohgAk(KT}jeRDnhSf>bYp5DL~P#ceQxl}-UR0we>3ZVQ4s
z00bZfhXe;88-~mUa<WOTx2UQDup9pvA}VOvBLl(40if`9%<TV+;$#fLfN6TO{|z|`
zRrTS!Pg<dg$)7|mp`)*j#m{-5N8uH`i!^5;q#U<=9GG&CmT<!xPJ&FM*Q_NY_+I)+
z&_N{^20ZCylZCfczBHD!g&jAy-8gZp%B@~*c;{0rRL@d9c>eBY(`{3cZ2Av)^IJ_7
zJWOGUN|;ccGq7#sPjd45|Ieq>-{-!orzh!2ewLr*XIYk?jcf}e+X93KEE~xK2oPY5
z009OZFu_fnFpNz|YDos1ae1|LnCVPseoALL^HY8oKcx+sX%}UY)TK`9xW*`stmpqf
zpIiMt_uUL&z+vw4chl3%`m1Vob>H{$64KK=-}~N62oNC*Dnf)OL`-SasE83!Q%Y&d
z??AcuXj@eOREfh(|Bu7!_9r|%=?r`Sk4BO=-XK-Ay;!Dbftprhh3F8V1S|o|yVTho
z``S-;AN)&FKvw9g^+5@Q0v=yU!qg~0c=)%g@AgI?z<{WFud3mJ8#Q!~P`_3Rf4I>)
z0weL{U<lw1{hak9A)ZOxoJsadZ(pVMkIz?|;I-Cvv#onMFVAF6)>w%_KtvpH#1Tgv
zhJ95(0T6^BijrmbYh}K5%9v##<?kzfSTjzU^7gCM@yW7GqJ@{<1K>pWGpAn)mM9`3
zQXcI|@~@TY`n2D)`Wd$E+EjXO3Uk`7d7HY4@A>;aOo#j1U&(QOUhe<<KirIL%Z>mA
z95CR3aD<~HhA1E#g$k;G009aSL~(_qCQhn?Llsb{oBF7mIugY5YyX>b5f4o(gaVEI
zDh(6ex44ynC!%PGTB7(F9>Qs#Gm`8r?O*EvhM*2nptZW5033h<0BU+usxze(T~4&F
z3nG-}BKqSh;4#9y<&SxUWE7C(xAc-psZ;vYe0y%sFft}v#!{zDS*F^*jGg*=S^w|D
zup9DQ+oxKR+@0ePz*q<&hUeeipVr;F*3_z%Rg396S-oMjSEJQdCdt%j60MrPdl^DM
zSuOOE8hxaul75m(h8{yK2}u%$p~v+0*kg|{thW4I@5>!0FU2WM#ux4egfB0n_FQk@
z&Jjprp{5IZ`+sA}hX!}qw`6T^b)jfRX3|uDC>8un>&$oA`$m%OO{oR2&OitVAYn8p
z2!@qXH~*T?mNowO`~5y|7FHK{gUC<{nT9t?z8v(-!u$-$OxvqaX@n}FLFlwd?eI04
zPj6~g`X5>teH2H#ge=x$4XS!pyLTKZNHmnzMt7<4N%HZ#VY(Zj0B}az0H_hr5G9!5
zstJ%Y4S-Z}W;iMi&w1BC&#0Q<PzM6T8$)SjxW@YEjLR-aoQZ4}++~-f=cDuK1zE89
zSuI)7Ga+%!W^Hbam>?1s(W?91=XZXN*Zl{s!EaS!2oge0g7iwyHK=PHV>4m$(XPwl
zh_rc+;j|nXFIuMFiARZGhXiOJ13`e38Gltm$G8B37)Y>03vH0;Kmnap?*a*01iF>c
ztAdpl_-c?)OTxkk3~2B{kgy~In>712kkC%TiU{noimR<*T%7A|;6{B+*vcLHIbbjM
z8{!Db&)ATc0H_2XH0$c!gh}#mC9z06a%=$TrLiBYGDJaJ{rxG8Jx5ce2NfeU5Z=W|
zsB=pIu)=2v)_oD|#4-FxY7PfD0Nk2xdH9K?IV8Z#28Shw!3t+pOaqh-W?dZWo?-18
zpB^?%o@!`0#o{H`_t{w0wMQZom4M;ljUZG3^%}GZ3o-`Vc!Wn6(#y5{mf!Jv{>)$a
z_kwx73#&x|@Q8^3a6wlffT-s1W~%_=X#jwA!T?yGApmSRWUo9nDG_KhumxL{%+|Kz
z+Fn9Cly(-<?f?&JzrxTYN2iJ6cxq3zn@!+|dWeVZR-+aQ0>X4{3$;T9hKN;CPcn3R
zifUDF%4{16ZHBh2Y3t#n6>(9^aZj_Xx~Cc;#t?fvjmyz0Xu8~C2|(oo!@70s9AXG7
zS(-v|Jgw(f&o+TRd{%u5H2~{_v8&)R=3pv9J`Eh>L8G`exUk@SgO|halVhCJe}?h%
zz&*p=KG*q<Nk->(@-9lpSoxYuQdHXnp?XQKKB@mZ>H?TfqwXSevby$T;Pk4`Y+#x3
zw)1o_ewDb0f~$|*431^$ZzlCukNP|}J*xTyA0Pf3jU;pOawHoc|80!=Az3aLYUh=1
z%wDX?M(&7rbEhwpyV-o(I9!#=?cg-R?`61f7k^?^r5N=We~k09cjG5h_7>`MVq>_x
z>uJvZS%wJnuQgo53CVE!as)!S-!m@FEPb9^qf=3E(Rw?##!6Mw)oLwV?wAZ(BGkoM
zs}GNgc5SwH^EwHeZLzge8z1n1J=4ITeM=-y4|~EVF;rpT!9?0&ky1a`1eI#8J`oz^
z>?|R`1v3g^L2+LJLTHluOWz8r+Gs|Ynsy3^s+6m@O_9)!ILoY)yUQ%-5aaD>ic}u<
zeKLl@5>L>IPfijT7PSHs$oN@X?`%%j7VKA1I_QEN7T6%cA=V-az#xK9)Wmyg*C<pl
z2q>0wsZnx&4FT3Z0XqYoc8Li90SqpfQJ5soXCuHsYbqcB5REsn0A>-)l1d=3nlvPs
zjMXfA7p>t>()JjUeyD~X0P770B5a<WRt~-Z;5QUTnid-Bup8qzkK3f;V{gI}-@7lt
z1=I5gKmv)_VJsbSs@eeXVog5z)dd&-{OtSBfB)k9Z+`sl>mMFuYCoDEKm76QUsvC$
zo~-?L>CB(zfA5#WKoI%XO5*S54&Js1z>NcxXCb@>;dO9t2lF1V?+5)s&>sfzd0<}w
z`eQ)+6iB}Y%x?hw2O#|y;Qs>%00IDlF!!fI`yK}r7<{Vk-;GhO^e~jafPDQOW9Nq%
zHouh-@<|syKjXsW=UgCv1{zt$E;I+kYZH#ze&}Kal(!kEJYSicqZN86`iiJ=?)`mD
zNIjVxLkYDHB-ia#+>L~UjKRu-2^&LwCSk;TMtrunDDlRQkowWayvP!-$;=77kwK_d
za{SyUh1lYsz4amJdFMlbAn@IV{KymkOaJeW0nz2ik>x!uEWvc*Mdjs<jF=1JN#n*q
zVdR{lP~HrVCd5G?ER=iY82t(v0R+G_1A~F*R_A#Bn;%bqJ6HWdZYZbxAjhTmVVf`C
zTL#=;3CqGM998oqbon79xiZF{IB;8lVxRBx(J}fs#D#wA7S@2!NqOv2=Iuf2+3*Zv
z0w3%2y998OMFK$<K*4;p*%MC{&C;F&+R^5z>Yoydq%CL@nYyGT`(RisLh66ybR$S$
zf`9_psXHLxS*>{dWIB7%aJC@xGoNPlk=Pf9A`pF{OY&Tp2oocU#bCUWVv4*$^+{u*
zeJnI<7SS0!o?fAQu!PaR6feiMQhk|)Rz|<GdZ<1eJ`y4&BPxSvV|0siHZS1j1{&u9
z%r)ZY0597o3vc>ysWO-ZtgOnrykg%Ab+pC5E6SR=f^4Ok$<UW^xd=(qU*z1AAb|m|
zIU4{UcH*gtl<PQf<j<vCCqQti(qOqYw%FrQk2#|Q0RR<Z5ZpCIxau#a0E8f;5*mL2
zyBxo*lxA>E8B4A#PhV3Z=vPz<qoBNI#F8GOfaKqd8@Z;&x%G33C`z~x0T51<y>fR+
zluhN85*QufVA(9U7Ef+1gJo7SSLW7v&nGCn{D38rZh$iy#Wne>kMVk1uNDbw{DjM+
z4iYd-MgfY{>$Vw#h&Ew11Ub;oNyFh*p+lt=szuZah+3#q7gd8bHt4g(16Dt(*v@*r
zHrgcNq@+`xuuYTgcG&rxXKlcs*2fsHimmo&w%3s7{l=(}l~&njM4O~`zn1X}Cmi;;
zBhvmL^>~J1<B#jqWvwcd`IImF^vlW>K*55l-thPpf-=Z2M(Lu+feNl15@IGu3Kb$b
z=p~%aXG9bwug0KyuZD^N3TQ6KK#6x8ns*$f-Wj;PGodnoB{dIZpxk>IUhm~l1t92}
z4jHKQj-pB!m5ug=9nwPa2Wq{qI+<v5_n)%%F{30P9C}C&VlhcacVo&!k<1k(aeO+-
zSdBabJ5+?A5hfTVRwR*-kE0Q8IHHxJSy7G=GKr;irUdXcPNU$Gw?bekjRJvzCk2-j
za1v`!UbCIKq*|>tHB{!@C`?!Fiq{o|jAhe0tk#sZRu<+>FipfIa$aLbxzxAC=_DFo
zRM`|Mk9<7UI6Y)i!kw*vuQa_<=)b4LCFOZEbahscQa7>7b}q|rVHQMJNsv-q!^ly=
z=_DeGCX<7AjcO&bJP;bcP!XRL3Kqy!6BFjADxCyeoP_%}b6%wk@;@QUVm-PP$*u=!
zxUD+!&{}Ca_tts9kMlMURnBt@o)d<YVji9>jT~uR9Eu~xQA4eDz#l1@ZOY@Wc=g@v
zC3V6YCbh6lY1A3Mq$U0gHx@h9MC-z!(kR{wO%YAv8B2CFOA8X5C!&k0xTR=vQ02uI
z$ja)ZGm<<k40xk>pof2h!{TX~nc0c;t4T}?VKyo{^oWGS3LQyb3A(H*h$v)Zr<#r^
zjj{D(qZTwC<hCR<lGw6DL}A|`3Tgr-A~YRBXVt%dBR9kO=5ym&>_dPiq{gL?M#)f>
z$6rR(DHOdZ8_C1u<X9a@gJx~znGUwkj$arwk66kG#JE0@a&sw%__<EZM98I|0nDbD
z(>SY+O1F?ElQVCecY0p&DTF@OTTtheG>j$8UmZXg4^D`}<EZ#FoSmQ)Rgkro&baE8
z1pI^}lNg7f@gOO35+%3XP<i2n*o+%K8NP5Z(u3-pH)VK<tF!7US^x}vW>r}p%(vH3
z8aBar5DG>zF{@Er_)qh>F)j6PNgC?hg<)0L$sVt-*rm7KOlh`S&+x3i|CPaTLFKnl
z#T!%7RQc_xmgH8WwV?N+*iDX1N^XTMS7J7Ky-Uzcl)+nc>zfA<E^ulGA%a@v$H=1W
zCOFkfjnd|CgG+?%#=jahUp&4SsLH`W?|)6coMd!UY|_Y(iR{*j?dF!ms9tl$w@a;1
zdPt!UM$WdADhD<x3s5Cp^rh$O%=r|F3MpfVkR?v7L^n4KW{H}vDFz#rOrDK}S1r&{
zU5wdB+5%3tW?qkMh>I1qFAC&k@lG*mdD3#+(5u(UKV75KEN2N?(!l5PP=5}Vz+~H!
z&+302Hg#L$6^9xZ#))@x>X2?!cOVhHFt3!5QN*1Lt3(x-v?`IresU)dZUmfYm!^>X
zdMm1zlWx_qR5rIIz|@T7ZOm!w3-mc_0>uV?`Gq<Yt&CB#^`w^dt>&yI9y(hFdawsG
zM9gx^P-k+D@}QC&9%yBrTcgCnZAz2p!pv*>$W$`c{OX;GAjR#YMzmFgF^%ezyeXFb
zaLVL;>0;EJf6$Dc-Lbl=VBfR0=ckbPDql>gXTLXifLB^m^52PznDCQumz&_!=`|5z
z_Xy7H-l6-FPM_shrCa?>ns>h%Ps5XJ`=B(|ZI~lx9LL<6sFnuWp)_5swJtSvXHprr
zYjN=EtoEv$Ywp&T5#T1jcz9g95gR_BtcOeD+kdR%Le@&m+R0o#%bi^<U!p!;iDU>W
z@|2Oukq9xUSXR0Sj)|3BF~8qPuEBS<8S`W!zB)NS;WfTrH+dQdb++I;?sh3w#cS2L
zT&+r>XQ836)lf~avBEQM@cB&I%>1Isu&)I<1CVKxb!Xh2v&5gu&Cn7_Bx>d{S6Ls+
zf9++Wa#QKe{(otqGY!O%+CBbKEOkt<`&#Bx`Il>?j^h;#8<I0QPr;ZWY9J>mja=_a
zc9k;;2qz!fC6wuD3Gc*cTr&}vkdhd0TZ|YUR+Z2skd{iI>u{mDQx<7*uw;4va1K&`
zvZvfR^H-L3;GO&B%5Ou}&LKxzdcj5^GJsDsvz5<YA*)+Ix&O@FbhS9+%kZ(pC(BMD
zvaooOg$;P~ORwzg@lW=}ejGI<&iRRTmcA_$JI%WqcRsVR?D1WMv%<Xzz;lkG{mmFN
z-R%VkjVe3zj7HD)yc}WvQT8oeK}}6_e(t79CaGR+5Sl^dm2l`c2>|<`Ks75BSRzw~
zSL4B%*FTU2jNvK!qX)lL7sZ~bPK=&|+l;)rXW#3l+CyJ`%0GWNq5Co{985{=QKlU*
zs1%VrI;}x?@QPx19PEyY4fbimleHOF{E{w{uk`$ZMuWxF<)oaI{Rx}wQw`3titjHN
z?8Z9OG1I>Ti=|9cs5)i(VNmf69Q&BTAvL|}*|F&-9nuVh6Gy*&BAbo1zFM2fqu=Rv
z7@t<lWolWUPQ70;Bw5l`u!~g*uHf&V5HPH#jKEd=zz}|n{qSO9LIPv>zYgy|V8lTI
z$e#_A+aM43wj*<@-kz9>-XK1<GCsX(V?@`!LN4gR!M{rktfflX(g6XPEa@}NyAQUE
zfg9g>pcyX;X)$SmQdJUgi>e?$0d~<))Q1Myc_wDq`NODiHJ&b=2g0i8g&0^n+;d0|
zavi{Ol>OLl|0kxXqGF5TkGfzR&rtIKxcO~yMmi4YVU)kWxU<6J!iA$=i@HAP)n?1>
z?J+lVb7OAY$!L><3Lm7i?rJ^&H=PG1YkQ%@59VuJY|)*>0z=$=PqVO6bYH*%(hT?*
zxb%$@1s*>#f-g%RZU{gAI-x`4nmL91QV2>EtL8Dl`t=r2B~j&fuWjq(`_80gcSoDd
z_q05<E7v)t^fk#!M#^>|x_U(xBS%VOs{)hv*hlH?4$4#@AG6N@3#fx-{0BF;S7Pw8
z8iSLCiTS%MR*FIrHU|f5GGxVbw~o?obtQh(cWs3_y3@DnKjsWB4<6OuI~i|LTN^*?
z-l=*QKc!*BElPKA?EOHB=t}pdD6XZ7#n;m0m7Z6s11RWbFw0NA%omH*`75$8?)cyL
zdkx4loDx~CtSw>IEPu8CjtWxxcE1dl0O!O|`?r&le-^A=9Kx~=J%1Ku3)6GxnJ!+=
z66#Nn<``f#W{7saP#*TVPkkM_smYiQ`y8vrmMOVgn=&)EwkmmLSkPYt>S;Yq!vHbo
z|5ck;P}AmzOklw-o}uQeqYPzm(eye1Zhk=0tj4R^O0n9Y2HPS4NHB;Asj%W+snzzp
zAx(S)rPFc%n0P`tL0Dw2>Kr90aU>;Syc0a2tcKrbD8?cuCLVMDxTYD`q$?gpPP`e7
z5?;OVcDQS%ute9`c=-J<ajUA`RM`A*US;orSR1qgF!X={9`XYNHx~Y|`@D{%ySk`0
z86gAzSG57Tw~f^1*nRph7bWEX{eTNMJF&OK@7mm66bb*I6?SBB&{$+C^}?-Wwe!Jt
zs#SQ2-^<DUjQ%I5H!i$)^T?OXp3!*R$^LKl&8q*`84vugby9XD7<_E^?_cub`&w(t
z-YQ{mt>5i{+kSiV|16-awVFEb_5Stt-r59b^NzW|J_f8G2S@@w@pbU+@XTYed0h$B
zH@$AOBz~UyT;OrDzw%r{T>kOQ<-xe71Zc3PTB?*LB09Ua!ph3B%0Za`4JZZTbu*W1
zCzAjDr!~Rj&h^rJX=PU_Ik9f(7zw1dR6<tl<u{TqHD>L|xl)me>}XAd&(~yaJC(ET
zGHcK}3@w4wmQ2X)1ZPQZ?X@SVfNVAnjlt*gY@}T$9h{pkZc{}@WqvPC;J5T9<`rJ~
zW9#`eK}>J6NHk!<VwbBo)zn5@-<rSAV9`9BIV{R-j@xj2L&?~M<4NsNf~o`nhb93W
z`jYI2Z8<0x0Vp-4_yH-nDmuZ}@c}mW<edGJZ^90@SU26J`+iAT`(jqQ`$iRR-0S0;
zj@ySLjMT3pT^}9yzAjreLTJpMb?<z(3oKq-eFLS;CX_@@c9s+$I8(B2vV<Utdw#ZY
z*PP<cvdH(qM<ZSr^$Aaetj}B}d?@K^zp&3mV!)&)cDLlc4*s(jpV4@G|8n2`IXmC5
z3j;^HRm>eiQo-`FiaT(6cQ-1ve$ckWfKR@%ude=TQ98eQXIme5C=TApJxbhmr18;)
zr?ttus<zI(<ac_>jpjK10hMS=d2RrcS>WrLv4-!Q>!zf=wvz8#`c!c1h%zSa!zq@U
z1qeZzOb1ZV%;J`2z9{RG{hMC^B%qW@fP(xN_gX|f@kv*}V<uNUstyJCIsdvUXJvo?
zJY_?b{}k=SVVA4@H(jpQ9sU#@K9V@^T-ENbzay50FMYSAYj^jFcrRcVfzA<%0s`lT
z&VDzcinnDSzI^T#h=KjDyAD!H=Rky2Z2@(p)Yw#sUHqJY2Xi*t(OX`gVRRF36+iI_
zr(@hKOa44~V11*5$AQ?m>qN&Q8K^z3@p>v>axk|$D0XkmAx-szf#%^y^xfT0kCe4N
zUa)5%<%SE^eDSsBfsTLU_b4mtuRQKvQ0I2br==hRFjrTlA6><0*b^)8O><wdiLn#E
z+WPm%0<Z7Ojt2oj3}n8_0O|>Vf(|IqZWghrD<kHR=Cfwo-&AdNU?0AC?iING3^4T~
znz;D(o|^x5x2iW#uM<X(1<&d0myPF2-!84IQ?k8IZ#s57e#e2cB~hAULJt?;(^OJ=
z_Ef|VP=G)JEDqz&A`X?C%b_zpit>GzrCX<4XuC3Ry*YYnK?A8hYDEGg`{;W?RC(^Y
z*hLA8SsRw-Ilo*?x?V|8(B3!lNdw^2YeX}Ah|aHCvXRMj&R*1gar4g_f?O6zx;-}L
zeY<|W-B+TN^QE(*q`0FZ&Xy93Ig_2G5Ajm$%&K6H8mk7J7|4{=I$bG`!Va|}`hp1&
zfmc|I^9aGRhO4jIoqx!3)x4gvaE^H3M22On*>;LWgoV!`!-6RGFS5&l6RTYt-ux))
z`nGf-3(yP(u+YA7wz^3{y?b%XtA_abkKRTXe$(GnbpM~&-_F#BJJi0}x%SZcwJU{f
z{&&o?>kFOn=O(o7XG&%tH9wXPls&~uU@w?;Gz<J&yVWD-H@s5IBiD>*Z2I5XgpbH0
z)vx8z;rHL!KJo(A0j;^u`*ISiZO${j?#TP8?Kx@PKClbh3&*PSOh@ck0{{Ada<aqD
zA-iePt>;gxQp6^w8$QYag&WuS>c_1M2OOVnZ-||L|7~R9H@Kkp;cm}Q_jCXr*8zti
z;2vlen7O^3Yt^x!N+Q#~9##xL+u`$4)^K*}dO?cm)44s-;!aHZnV1?i<*ZDdZK$)B
z^6Zt(zCNKX6qM}`pO)vky%U%L8&i)o$7=R*ktqmEO%3~<vWT*dLjldpt<$mFS>~(W
z&0)$PEO_XRn0>%<n}vD!eP)N)$$SJF&R-{2ALxGcM>;NDxeZ&s?Vw-a8eT-iI$mJl
zI&N%Q!(G%L5WH?<F|sk3*=azO!+|uA=O22S9Sh5rs)g!6^X0!0^lI>1+rFqhZ07hE
zW_mbt7$u;sHVY@t5~K@qY>)QNd3h?z`RU`2@W>nlH+;>bz?;VE!95Arg><wO4qICh
zcnW3-;V@LXebUbCEL)p%bDo|u2e|P`qC;JQ$KM~=f2t#ttKWrWNwf66H>q?m75dt8
z#k<nK{rPJ6>-Xk=wpvtKFoQ+gt}_coZReSV!l-*eH~C;4BTTG9uJQBtc7A-l;%VqS
zO*#FZ-uX^b#=Gy2Zf{Wd*gqz?zI*k!zw^VXY}#x6k(gH(Wq<lUXlU^}*_M~Iwf5!~
z5D>!j*p|y2M@H+Z-W_8quNTM8vji(@-_sqYa_(^VwC3?PcH9=VZvJ~-X+YG24DxB$
zz+GDseCX?wckDh>Ak<QqU5wiLYj66Cq@K;fO9x8A#+r8*7kBQC94oogHwG|5QJ<&}
zTowaB3M*pixT#a&Rlg&!hE%nvs82nt2H~MlK*GfxYBL-bXKb@YhN$2eEB8GoSM1JV
zoXa!@1aae=c8B%ugzP>9w>!PqYzc^A07T&AZJtvCzXdZA7JjgGD*!79=<QbeO86km
z;j2^B1oKA6fxHP09wIkMba)7ta~$ALfSLsd04RGN!j9Z)TDx(92hm)n6Wb`QoezT5
zpF8u`X#N%)6oLA044}U42BT*dRDPy^Uu7w>uKIj#_w($27=GoezB=(QdVP*LQaZto
z;#B#@+f})IJAMwy&oONqVw<;&-^%_POxocTi#xZloXb6FTKm_JqH|9c<$iS!c4D{^
zG_p-3<=B|FvVN0>(0^o+-MOzX@Xo!F4{`|gkv}@ii;I;-y`GR$u*yphz<*SIKX|D>
z^aD3@mN{Yi*ON!Wj$WM?brX}nG$DyuC`!N13>G<=Q@0<JfB*}liP#)S59F~vBu4Qa
z&+&?@*J@h$gGVC0M&9(IDk_o4(-2(WGgMuBTE^7p^GkT$)mt|?AKWJPEGsKnN8SHN
zTq_mq<z(B_hAp@RG$og-e6;ZmzGlypanYgiU+|aIT-6-QBfScIU9ID_VeIhb%a2>C
z&ko)hst}0d)~EeZLa32^o__A4TL>}~4w~)go%uXZL(m{3MW7M{d$_>&)VzpATQ+&G
zupWQY*Rp!n{6sZ%S90*N#M=wiK#kPKaigY4bGQ2Slf7BX8w5?mF9MGA;pxUu%v5J;
z?Joc@zE48Em3LkevOf=?fQ1PE0->nl?tcQDAa{AVH~zcZ?f&&vVBa~&Vogkbby&jD
zHd%;1KfIW2=%_#1)HY;U4_TZ(inOS>^wMMWXv}E%V0EP1$fIt|;S+B`^!@4wJTp%@
zuJIZz?<mklkHp;je$$IOT4_W!KyZ1Fvby$kJ=0K3D-JTa?y{nrZLkDF9%|O1%S!&?
zA%mjCN4SF9qZi?xAJ*w+B)XzL&+mM=^6jqaLRn-s4IKSIihs7peH|=&<M`80OT6L^
zElk8ZXaVzn#hHC;$;yGY*Ff;55EO9lZF~FOvcl`V&qezX&s~vML%J6#_UsJo-Idd{
zB5{7Kl}cs5)K)0TIGh=zNPNDi!P&KJZm-{2yI;;M+S{~ZS5DwZSrAsBWg0RW%%K40
z=dHhtt-;lt$_?<keEJftZq|4WmUDzs4EMVECa>0>mNMUq&*tOl$|XnCQ)&?XijC|{
z8S_m(EkESVU8{Y<)L+gTqzzt~7@B6wJ@;%X@VS(^MK$mO5%j<904VJRa9FjQx7I{&
z#NdEUbba^i;gueJOV00V-SZ6p4;@!8yt?K!MZ}Na_71GOH=U%te#%+va_dyaq-lO%
z{ndrwr{78{$T~<FCDY^PS}(DbzH<aj1ZDuN1_S^R89$E<fMly+LC_Sn`w2>U9Bp=Z
zrJZ=5tH7FTp!^&Fv*s!S&}<F`dtuHE9R(MGpb;~7>rV=&1b4wxAZgw;Z?B_fKoN+r
zQ20$)q%8rKGS!yR^7|RS_(+$3vaBs~RS%5WT~rZzirXMyA3YkY!`W`EAEEK&#<&0r
zi5XFu4X}udSfQ>N+sY77!j32JE)RS`#K2u5L@TiFifxlXt|DkI+3yorPG*n>z%PSx
zq&J5g291`drCw-)zsBAX%#}3OXD-aV61an-KrO(MFZrL}8gT|(Tv^*$(!poZ0LT-V
zHor}R?LC45fEf1!T<Dr9MI!h<)AXT1fLKcT%<npM6_6bGXqG6HeVtb1j>4nX2ww4L
z1rkanX6*BkCLV46xLk|$r42ojdJgz@a*T@-m*hCdgdZs>tFm9TMi6h|$zJ1qqBeVR
zhWctJoQgz1M<83)>#GbY1z;jLUdaKP6N{TDPkue-N#cyAqM~2zEUSSPM^{7^EJl&e
zi5x{bBt>Al8Yt`Y;*|C~tR<_<{ESgC!oHbTQHM@Ola7jO4C^-ygB*YucxkRX(4%~c
zi%S3#wcQJ(mG06jH3HsNMz8KGM57o4z+eLCqwjdZH~*IaSjRs=@gboa$Pqiu*PExA
zx0_!ze+@ZuUmgJ^BkfJzrd7x-$bXSD;RsYB>IUiw>Vw51^FE6ji?eVpEQNb!m7!g&
z0oI-9V)QfgCrg@aCohm!W8yK*n7?KVXBSwxI2Jp8?T;<+Ex3b~*r040ZG^UAwo==E
zJ1?9KuG{{&{bh%0hdzfVbI#+h;$Jx-oI0KB3D*cOUHa$J=5Clro!2<;^1SEsz7o6V
zkGZD0g}5cUFZXcu=<*Em+~S$%Df2o)%3HA9dzE*Zccu5oh2n*E3*`$Z$cKEWKE=LW
zza6C<UZh@Zws^~8;S%POV@p0!k<=mTKI)mJxBT4wnrMIh{=^^Q-{$`yz$IXNz&Cp9
z@;_IIR=f%P$+#MnAM6m^9Xt^Hj7emnS)QyA)=Aby!~pyj0>EzpL=eX}aI^vq5(v~|
zh7tg*;IKkKL^*K?5|S!(Avb-w3`;dYggvU0$CP$M``s=_L^v6~Ylvpzp%fRy)uB)#
z4@hvjQl5e+B`Io1;z44mqe(VSp;v+UEkkUJdPx2pU9Il!SLvb53MhzRU|?$M?BmW#
zgCm=xY0P|e0B;f)5sSj;_3Mew0;<%GF2a>0CuPAI<vu6Caav#6a%6sQV6Ir^^BD8j
zN+Z{nD7gm?>3BwFiA{KtHbX<$wPKEiUhluDM3&;h|99?O_~kqCp35hXzs;3w61kr7
zWMtj=ei0{fFCp9P8V8@|6aQhrMzIJDCvJ#G)1~?5WLsRwGxZln@ed0~IIO%h@nn2O
z5*iL`DBF6YtKK@H{A1gU8?nFM4-p{d<*CWb5w91jL|9$O-SUOFpxU-;>}&L;)v`L+
ztwlbUm<nRRL~Mm|wF7cp{k2!((y$rV8bHs``Vq7|aB|396ACuCXQj!vq)a0?F2NB3
ziR2;^>x@)ZCoEdGU1(`BvBwi~$;2#u*LQi7Mch@D_xs>xu+|z=_9z&H)!V?XxT!k9
zFeF4wnBnHVJC;-YKZM)9;vw9WBuU&QC<-ut20Ro1b{c_QHQ8Aj4%y+0L3NBcJVsYR
zo9Vrh5=i539NkQ2PHOKNT1g*ozAy=o+r7E9{`#rb2x@X8=Hmd$EG(b(pLvj1iv2p{
zupo}Qlzkx#of?2qp&Wj3sIi$vk<2uQt(bivuve2A(I7l@C9P@Z*p>$kQbELa7$1^D
zWp6}6VsVMEUV_9?hF^VG<93`w{Tl?BC~CngHHl@|C2g#6?9fs!;IVGT6{EM`4`vX9
zU|?&kEX_Y7V0%2x^ou<<OBvoZ=`!dbk)Z94L|$%Nch~x%u?r9`eACgCh;O?`-s7g<
z0>!*ZaY7%NJ?p^+{>GATseL%(h_dloPZZVzL<5S2dBLaiMv_CSqD6|)>^(ZkPgBP8
zJCF2F+fdY+uIY~4y_O*6)e1J3qi=k{qI4KB&ekLWVl;p0rUT4o44gBT&M5B?pVAmo
z@i<~=Mb7{T3dK-vt9mg)ObXD%H1KrkFKt!0cI-*8#`N#Akr_>8qsAidt_^$Y?sn+q
zCPP~bYQafxo5ZKdLhfvwm(dY%IcRVJ+CQjkM=%59GzetFUxi9!*zr|EIoVEatYvJM
zbjbvkJmRf|jYo&W2Mo5Oq9)%I6VIN?Y0x6DW@w8((bl4&<RN)sSeJk9Eaq=#ley8J
z34vP`;^Y4XhHcpG%+r~<O`F$ubst7muSo}i=%4|S%o&<+<JWJ}VKPPEW{ZFNn^-*7
zkv*%1^LVQa**QMWG<i~frG*mIikxLN-^l5MS(=f!^EF6NJ8M0nCI$xqM*974Rj*c7
zblVwVJGhAoCAl@DTDB#VwPp7BZ>KR(DmaU1>)ty00{-b)j`I+6oTSH*4mX+Aj)fro
z?X)<mv7aT!lH-N{3CQUAaHVjk(m%H&dI2#~y7z@#9(-1iZ2%*u71sbPcBF?j?dxf2
zx4}2zwfZDCVJ7y*sPxt9q;;}?xd1)-I5n_@P436$In1q&E1!NavJj7o$RY(0V{;ir
zh2rJOnvn+&z*zuG>0u2Q)zYY~?qnO6n;if4gKuA-6N7Ddqy}-0*!v@7vqYEf<ArC=
zpJ$&BdU#bE#Bzo99gHa~634;7sTo@Sizj~*E(O2TGzwEd1tL8N25$q+T<Sz6D(!2A
z8Sst)EkI!w800#F4S*?`jP#<nMh!uXMIc7$hg+hZ4X^vx#?r73UD$v|1f^8f;G%#@
z%E#N|>66SJ^X#s*@#lnTPCGtr{06<*9IyS2U*p){Wq&yT^1(-*s%08S(;d$y0`GVR
zE=9fj0|l}4nYv?QV}b~=&m=rj+siKvzeEq}#y2^iD|5SqO*Q%aI)NrLDdeUF<fp1x
z%|&)HUxH(tYP(F7p%rVIeM9b?wAi>M?B$H+T*p3#Ivy}j{+x@7uICT+j{YQ`86}xB
zWatlmq{Piu%7<l%$!LBMx(Z_T(OK`B{ds~_--JhCf=MuqO3BE0P3L}^kx7cA{+JX?
z@jY1vmZJ*+_~EZ0C>0G4R|#8APBdc+d{JfE*q7{^SmJ*RqQ5DoQdEKe|10Honmrmu
z9ke`tUW9x~-tE*EDC*Ww$!q(v23a2&AM=uhcV|-o0d0!WTguX8wQ*GyUF$bNLp3&p
z;fx2pB5%1RzTcXNugg!QwhneAJGY+JM8yom7s!lKH0=w_+$?3(!kmX&xo+P@q}%Ng
z*Z!FFjKY#YO$Id={L_8nmu>SO5L@N(Em*iXw0J?G6ahhJyd^psUxdhk%SdqGhDK<R
zp|psR*n>&=^V2=w0$n&)9?T${rDriX#vwGK@lh&Gd~op4UFzrPA%@vc#TzHZMZmt8
zMmXIaZlybkeym+a$bnR)ds;UYPa-p})frh-MiV9KAI7DMG-je1MTZN4+?RzfnotD?
z9Ic2|3Kos_nDXt-BVO}8`>u1Y8-bssHnTAFa1UB)G3aR!yTDU8+^JAltU*4U|M|pV
z2ALGI6mRqg3W0f2NkBwcCHj9j5#{O&DaN||aZHx3I@z6y#x;>B!IUYdGaFvg@$`#4
zbVYK@_9+j)>y3N#AvnRa!qX-MEfNv&*~Mc@K$W6o<h}umcAG7NkrpX=aivh9;A>XP
zuiO8(Y{U6po&L9IAtVv@;zWoAIq4y}A~hA18X6f^XnTgn_G=*UfFEuY!g?wpa;_^b
zphAy2!FF7!iEx{(^prxtuLom~(;!Zf>crlXx=stj5qN0$Sul!7{kITNz-4#mV&Hn%
zZL$h+P4RfnnwqSprM1caTcXyXXm|+|OaWE|laFPwctTgWaO3HgFMrQ%<1mQAAYBJt
z!6_q@!1c^<QGwn4LxIyQrKZ2VE^>KttT|+OK)ZtnZXVV<iryqyTGAXX<K8`ifA0dq
z^k8A`@P`+Z?=s?2R?Uc<nzzD8nfJe0mODoVBQvTJAzQghQEi>Q>a5Yi4?<dV+VIy}
z(#KB({-vA0NV9gL>&)SPq(gi80e;@elwz__>E}%qY5JQu_8QC@`f^JkY4j(hu;7x(
z=sqmdwsgYf&L6wc9>BauNHxn{9M$u~_AG&C<$P(t)jayJw9v1sTFvSkc}jkGFw4yk
ztWm9Mn~px2F(>Gj{*eicbF@*w_Iu4x6q~NEWRHOt`He`Ms8@>C>}};}b%b_L(_GiS
zjPn4+YP)-ARn>p^^Nf!Mn9wfV@XS`mr8X`-Jz0Y}-VW#q&@Tz~>F{jyp&LElFYeCH
z+hbPn<HXzh(c!0H37J)8{(bbH%3c$~>sNcHt}+ylKDS8m*LGA3`9TnRc+AN6Y=f}O
z4<a#tVPhmVluHfi@18@S2Yd2k^hPO9BQT8<Am6t)dM3=n?c+qqlD-Ajp$WC9wGkq*
zZ?_2jBBrg7J$&QpNAB#qi>S`k^3VKBNwCeXwObTy?wfGr{YGVfN}t3x65}JEuKVzU
zJpv+e9%CCrs(P*76c~z1;dyAHV|nTYciFb~qsXlZx@8QhmCefK*SYp!r^+W2AOBf-
zhj`CBg4>ie7e1u)XuV=-Vq#lD8pL8#3?beZ0|Ia-06fTDU{yDna{dz&D{WTRm<<-T
zl|W~~4&2XO$P`A{G>oX9=x%7sl621prx+_kK9vA|tq)^;JqdZ9sQ2d{_nP!DW;jBR
zBBeK(<&Ty_mR2l~?^z*B>czpCgu6i6!_%Vu&taK_?m!Lfm(=-hVb>M_%_c6?Z|=zJ
zRHYMrxxVgU$Em{t)T0!3*xMq8iacA_DfUWuA%1VTC{|oht@3KrkR}~HI5(dAV5E3t
zm#zycB`DnZe_)DO0iL+@H5%Nq9)K{V<bwL8DV=1;8m!idJR$>_5&5n!`*zJ}m{ibU
zk4HN55YT#*31%!ZS@xKyfX3m%12svN6UZrOQxKGX_DwpZgiOKlFvjePM%B3BvmPtV
zi=aUY?-N1k92MCN20q+D^G;>#o5&sAe9&4}eH6@y3`o{Uj{)W=z}fifLsk)XR*XL^
z$zUMF5VoP^##+cl*V<1q(5$`7tGBwLX}@gQu)fcAOp>s;>IV3P2X4n^ib(qJ`mS(h
z^@5wGQE?W_j6m`v>n3o?&nYHf?A?X?<pp=g6U%zhWJNYo$xF2qpqg3DO@(B;1m`#l
zzr;*Sm=}|+%L+B`yN<nT!<I{f<R=a+IBq|9>v#jcs2Zv(Zk11afnJ%%+<iY?MLF^4
zvUbg0w!I1F=NUhy;Wsmj{AO>RT%~&xWq`QhCJ^os0}S^lh7-z8E*|M2M5qP21{Tx{
zfoG|?2#C5wedQmYUeM1?_{)k+WJv8eA!z8Y0i|nVuC^>b7jC(h)P2>HVz^20y;0mv
z-LIX@owVFAMUeL$z-IgbUo^v`Y&&b^=JSQv(`D9_G=8CvAB)y6bqAX$?e|>!P;b35
zMWDERWen)Cpi}^9<{$bzW=xVSC$WasAw|zAQA3^BXT`ZVeJ6=3lK7@111@poVZo3o
z>>$g|QVts|1_oO3TFnd=zQLqafXz?nj|3p#%?oiO-$b6K$5>c^D-?Z}%rXjo;Gu1i
zAUIDVR&(z{o^cO#@ml=_aQ&bF1GhU42CG6nNz3wF!JBWn{F~yfhfb!a+k|YSW%V=*
z!9aqMkvg{W`SfBlayK$k#q7u7L>o6_U~~o*Hei&@C`B{D=)%nM?D3`9h9Rpfa>XD3
zy+YS3t8`s2mPXgWY2`$lLdfll)3DjtMEz-4gvK9KJx#<2bjG+|T+z9%&XJoArF`B+
z?q${a#4FC^|42F`kQv9|qfo6B>58ABT#bDImrlund;6_zd^#^B(@TZD)5D*hGs(tN
z5(X#%_!Oqnh6M`UTm<iiXzY6HaZc<ZcZwdH<aIN0Im!-Lf)wt9L~DWW)kPo?5v-m|
z%$R&hoq_yzvhD_dfb(ubG_)`hatd}7Pr<vGnkbIEON05y!rUO;P8nll_g@aO`}Z~&
z)0h)8plmas#mx3Uw@&2>+Uj&?$9}B93aogH`^yr7$s<h6ug$7x_>^HCpPb2j*VMl6
z^e(mYB2b&Eu~hi|K9BmW%PTfS+xKCu<TUU9c*_^%F6S>b2-B!0<@ZT4vyYwJw<BS-
zmA!pMH)<?aNjNUb@v4=emO6jkZRmp9_P(Y`<S?viLi3t<C*&{}E8fyS8;pm&>}$!D
zh<6l>yuR+~*rt~_Qvd4GYJd7%HX3W~*n5?8icQT;nWyKJp$`5fnRx+~<j4h&_qQ8c
zr<zl`(v{YT;L%+!XX|=C3#mpK5Pml}5K{@NsF*M)iANapoydcz+IlwVW^9fhKLV2I
zn4QlyL*lMJLc(A2(iD3GpWCf0<av5Lr|OMNRs1W%ANJ8oBzWm=5!OQX?f^-v=*HP-
zLLI6Ka(!@=qOMFXe^OE}cR0q^xINj}`%}BHRK<=1M5V)Oz%KL<3bSA32DUP+Qkd3k
z*3zVZv6DN&{ERVP%A7Xj|9B`|mgDcgUKRwNqX%u;mGHyWj;afh_efY78G{iYNcr@u
zgF$ubXaviL7&>dU_33na@1!Bmxea2O$#fX{n4nao?Fji{lNmh&XaUBorSDl5vd?xr
z8e6?O)dIz46U9-ROokN@KLf`~jK?#IO67-@@@k*2T#+(WMml7XB%Y&@j7>8^hSO2m
zNWw4;lk_2)ogze!5^B7G_KicbsU^Wqz2Xr%DZsWVdqR~yceceJ)=phfL6-NW;BYOq
zBFAkEYK%wrclM)YUPkA_$a@xsgpV^)Rj+w(mAkTEaaE3R{`BPPL{#Lf@!*-;-MS`p
zp7~E{&5fPWzRS)WxW}MHXE%B*Vu`@|S~kFir|+~^5_c8{X44qa{$EAIx$X=}8P#m~
z%UG)O$;$$f64mhRT$>xA)vhsRrA-=VLamu(fDt}y-Np|FuidmcHZ~X(LLXvIQlue2
ze^AmQw$SPHAIwSiU1)2XriTJaaoW$p<Bdi?AV^aHD%-PR#9XfvVJ_Axurry%=rP3D
z<lEP;Cnn~=py!@CCuNrcr=z;jj4*g004E#g)nYMSJ8`v6DuwzR6WU$;%RPV|;A${|
z@|4700nzgx20XEtREy3&Gt3F*O-TSH?zK0PsR9;gh0MyW4gr;1=(y2FO^xDq3y46G
zlAt*dt@6cwex^ko@@7noz>e2TF(JXSBBPkuxsy${og5aT7qNrMj7=&1Nlr-YqrXH5
zk~%dl{|E!@@$6W5?RMM#k6>4kU@RptvnxFZMT2rmNS=!p#{C)XH|G_A5_{=Eq|Hrc
zxg#6Sax(vR#X^y92;>33b-MiEt0IcKW1I5Ts;x~xgWx`MNL9N0Y?uq3I-wHmBnY4-
zo=!DHYg`R~bGK(j#tyd6O0d{<_Jr=FqRQ}h)+&*e4X;RGr<CG!+J}TmovpoJJ<@yh
zO-TON^$?3yAHiJy&UJU+u!_Gg_}(6l{w<<wTDbUhof&t`e7Z_m5|Ln~vosGyPzVES
zId^V5zJ$2bWeP&PG5N<4>R&=(_z)0={Lqt!c_L^F<DLUz{e}vePRmsh?Ml}-mGv=d
zo3tiy|F0883|MY|arxM)yy?c=)fp?em~$1%gvt*wl%h+gVMUeVCH4&McrY>h<-i&m
z%ITK+yQzF>{|L6g7kGY1)fsuzA!)QJ4PKO>C@;@r9Z8<gTujfp{+_Y1kXe8A8tnt>
zGV89T74oDBwn_XW2l<`nB34<65TceP5yJLA&8WHaqb@F_MMv#Jd%7L~^tNyq<{2q7
zL3&yjN+tP5Wcp2=XH0f<?OJfhg}77cS|#Oal)VG4J-{;wl*e$T?Ip^0vQbD%Yp^WK
znXXSl3(>RCfjIn@h<*EuN6H2rOM9k2sK^@*L|hBh=;<_@TjieNy&LrVB0~Nw)?iH8
zC`WnRouotg(;Pr@)w|G1kqxuA*33e)Lr0!+ovKK>wT6rIfE|)%O@(>b?8ZMI6}1c7
zXoe;9-~byFm;3z-Lpx*O!KR&5N9}MvO*OO~Sa8V_m&RUwr_p4g7;uMUUJPq?70s7;
z9&8vd2@<2;g@5NBMac}iRJE6jca3u8O44we9Z9@9bG1dCg?&aDTs=C<4(aE-y;%I>
zsP86|2K``Z+(tE6t|zC^0j_RXy&wq);wK4I(dv?-f2Xb657)LgvJEMPIZvJlBNDgf
zoi1rT26Z!$^=_EL`N@u1(y9u@2Eh>LOdpHNtF<%zxg(!dOE!BSX*U!UQ~WJ@P1k7g
zRy~%><*O|>aK69i3&d?M3=Ciq>foM@$x}s(gJsL(uNBw){fL;72kq8v-d$X(L3p_;
zT8fh!3|ZINi@Vk{SxN8xBBlBVY#tlb$Mk4c(eMS;ri%wQ93sKsncBWK!HC1&HIvJf
zs0)j~GdmcJy6_@lQIxErw~9?QG0x1ej@qQ#2Z}?Bfg%qpKq~?5xhdmx8*bgyf|^-C
zrzZaVWXo*#3F(b3OMK0iepRLYxX&oFUfW0ovno{(SEKbwi;PqxgkW@rtz|}Is*0c$
z7AQ(Vq2^J?1@()A!NvY^&)I%d8^jn#2cih%>1}=kuYMe}aO<uYeqf}x=Q5cshW6wZ
zzs@}$8V~R8>FsN^PaOUvW>|J)pJq9<cQOmqCWGpw8*7S^*75}Y!&;WN2Xpx*wQDM!
z^H^<}KJbuauejCWWt~~QSAJ#Hn)HzrW6n_hP&r1Y|7yhik#R2pVd@tcBz&C$OSkF`
zLDzcV`pHR?KFa|W&iLaXig~H6Wsq#)c4+t`<S#a-xka%*^oY#mo7Qhe;EChM$;t^K
zr|cq@ci2&ei&wRy8W3rt!?I)MAg3nXgo$)w6@_o)h4`;Bb(562{6AKIaj{e5O1GYA
z?}jS%?|e?$J0!#Iue57*DQ99Blx}Gkit~(jyw@8oqNV_L?i1P@T}~7qD=<qj4w@NO
zi$@fC7Hc=}UDl~B7-P*QuTR&D*lZo{R-n!+W2U6>G$o@4Ft4i%jP8(-j)QGwSR$-}
zs3L(FmH1r40Xs;-0on)c<W=8<In<1*&b;cH>VR)esqoIx_mao#=G<E!(wEX_i#ZvH
zLN+9gw!znA13By_j%QmPA#4a119eG<vtx0ZW@)PsjNYN_?YfYhQ!}o?cEecSKAzfL
zr`NV|keouvW!*Acb26++)?Nj8R}QaeGV++}5l&4uSc`5625dbFBy>+;x6refNn-Lq
zQ(&b)v{X9!9KAo1*c*$Oeo2CXr=~1AuFPc09hRK>n_rZ=Q(o^(`@|NYtHh=jZiZZ-
z<{M4csh&AeaaXx@znAmW;(L^v<N2J|5BU3XkGG^y3FJk|K7(lsF6B2P%rh_u7N7#O
z*c5;q`P$brtDr1{3lA%{iM4!8`RplNi5I8eUK0`<EqofFVOU{A31-6TpqhS=R8<Ss
z@{{QTnJQ^h1ROFzCO9t+v%VN>otwlM*@<d15e-*Xt*`nZe%S=ZkWvkg!w&j9bf6V=
zn=#jqI$6i5e-V*hi=SIbZrrfU>K-nXw#S}r9=})}EPB_N`z+2O22aZN>L8k$GUVvf
zpTbcJhXDv7bFVFJ8ieSGa{f0?<EaPDijOKq8l)2<xHBwEjXik%rAxo=z;f1SxIgD@
zXy`Fa(UtOW$mjUP@`~+ztgme|Q-=fztV9voHGR4ZIyQK0B_Lwxn<)|<)ChXG<tO_2
zWIjskWuaT8N$8Ta!?SYHMQ)eQa||}s>ShJWoGjj>%VVY{lZj>Qv2{rFL-hee2JKIt
z8^~nvZMS8L^l85Bx_?I8u9%TmQe1Cr1ja3G%ELXg$f~J;S62I~H4$^yGklmEo~Q)!
zBJBGJXptFxQ8D}spVF|3DyKP0MDG8E#nXlb!TD=1n`#(f{=<h-sg&8?XxNJb*p02&
zR#x(=Ds*hsTc$03U@3M&y7JdH2xyIM@@NxLUE~p28)ix6ja&9K8aDhZeq3VIosPeo
z^vrmK`awEg1a-|icSr5uJf#~S#ODqf0o;E%)L?z<fUq>04>~F}V=ZQx<ylu&IBdl-
z=I3(hNZ!yh#Z<O^djGD;v^;$Yj%vDzU;ln~F17Xh#}4$T>K#C}rN=b?KS1)dHgEmN
zh(pLf)@U|NP*Co=L%h9jtyHWwNqE0l?1eJ5rSZXOp47jVTAvQpg>#q7&?j73vT1r|
zDtIZUa9zpHZD$;iSAj0xe(8sHO?TmaGOOC2qj^H8y&j}Oy2l%Vs;G8ak!v?SPr0z9
zi3h8_SHj}lW~ug=TjjxdJj+GJ=|XiC$2^0EWIkE1f^@eEQ;-?O7#9lBD^tZ}G&(6`
zCjnwSox?^L<^@kk%C~$s^13*lYKEp`*u9B98VU}^eW1pIe=&is@@2^e@p~O*Y92FU
zm`8-aY2v0s)i9y;P9uLSS0qBrsO1b2j{XTGa#4CTb{O0<G#Yd-9y%t>fu7J`ZNDHt
zuNWGtV3>>_#Ny(EO%EnvMm#@m1zM*ysK<MInCiH(+iHzA^o_h|@2R`prLdvV{M;>o
zPFZW573Ijm&j+M`?!lqXN~X!g->kd+<7of=nL9*nGj5R|#d#TD$@ui&FlGNzgELar
zl0pPlu_!|D!q=?<g}vPoz1RZ=BhWEEu@CzUa{Es9>?=p4M`~~Ac(es!p`Z}#dTP5E
z(%Z`8Q5|pXFWNs%i(`V*c>f{pUb+0jn|YvD6`~zI#wkBaM~$p86i5+=20fkECkSY+
zgV?dPTRGJ`>&Fv~LNIOmHR4dytbN43N;bJ8#FzC&7A(wo{d_ZBJxa`e_){iR5BI#$
ze*WQ`FE(zjuB<m~a|hjMw&kY<c`9Mgix%aFgDPR9+KU~iGh7**!ZG>fypqqnrp*os
zAXQWO#vj~`ZZvGKtCvd0{${0>EBx&K{^gWgw+I+DWg-z8P4@1FPObsTC%S(!Nwf9f
zgt=Y_3_YZp?W#az8CXS}oqHMYJa9)ri~a^ej-)K0dFzM@p8cSep3*rit9o4f_!&Uh
zHsEH!cIet3T@C^C!PW~wO<DVoPdw=933ro`;P=;ehi*5p=V-1~!XOkzK0YgVwGO~K
zc}YVF+7$<Sad!_cQM@K3H<pS3q2Nlh6t1*UnAur+ZS>$5coYY)bq(t4`<y;xktrJ#
zX{%+Nn=_Eror>btR!*S13u+fn;{GAFW}ZiAZC^N3B<BdU<^o->+?JeG+Yo1=C+$5{
z(NMR7*H+1EYY$%qi4~(Sjv8ZqIkdqM2JOrVdD#|fKAn=&6|3X9lZDreZ%rLBdp)H?
zXKA(_xPB{j-4lPe)BaIlF-@Fga_taBD1t;z@#F?|%%vlgS)4ACTuH`#44{hH?V5#!
z)_h--LN=S2?U`3}!NE#96&UKFoNucX1)uVdtT5K^=Qz`7sFCd-n+h3lTc@wq?^iPP
z4ackgJDw{Py7dP}2MyYZ#ZYY<ey_KDdP^>M@wCjxpp026uAh-MV2CitpcvAQDgXFr
ze%6_f7`ny30}r(m4w+ifZw*apG~ANKGT-0VKYYO<(ctP}sM18=odp8XvS@ci06vyM
z^eND7PI88Tcx|)K1E1q%)NR5=F)<85&a7aM_H@>Dqt@&)iYl5)spC-^!48QbEhuFu
zqXzG-$tg1$k#v_KMAIZxunfqxky>i#1bu;Zqi*3Db~P1bt%^8omS8(4BFVSCE)t?)
zjdytpUbfv?0I)!2imswSmqbMZIKa>#4Cfe*V?A~waxT)^+B(>GSXOd1J~WP4uHVws
z(0=*h^9iK8-k+8H&{i}(!6cCu;PlTqNsy^%vw3?zKOcxUv31(%!B&t~u#-Cs^;9!e
zTd;{x*X14rA(4neYtudBOJtH0dOM<ihTT<UAvDWI!3u&wC6rBZ<f&^YNkG0~JbuIY
zC+aYZ`xwRuPbQlwWWk^rNpxGYHVc-2y(Qh!**P$P%sO=p@&6m*jn6Amb_9b{5YfqH
zmrShRL%?&W%;qfq3E2p!Q?L;Ep?}<{JA+%TyD8FOXs%8bS{r@dGdK^%LPt)At_$Hp
z=vUh?{|cTt%1fmRNtc4e8HRh^`qulyS6Z4|E{_jiK2ajZ87s~YJ$gSgs}O1FvV^{V
zcW_tN?Yp?$7EYo-u$Jzdszy4N9q=pAIS_pQ2_e$I!vhccgjBr@@uX{u8i9@T$O_Ng
z(@Wo!OqMRWy&~7UeZ9-F?fH0d&g=+4FT_c-n`;Wn+ELV#MmqM~L!uDMF0Ie@>^9u2
zjB55wM46ciC}U>MiwuL65;_dByrN@Vsm|HI)$srvUL+<1AQ2`*aV$>Ut>%?R_Plx}
zi8>*VjiY9MY{enOu@XH7^M5@p@NFPV$w5|X>G_Y`S?x{X#ZRX$?lujXJ;S;OYNZ8c
zo5zzShvQ~bK0!jBvoE>bY3K-SKK)we#3=T+vvV1Hu-aYkX(^epT=<k8Pnd`H(9kgR
z0?j4_z4o<$FlJ1K*>~R&|Dd!~D6gU<j;Q!5TujfTGBM>kKp>g|xs$fjCr1Ux4O)fp
zSi#%+E5)hPYn)1{H3xHMacH)xNpXRG|1i8TUbY)fYuN{d$saTB`VZ>UE$c@@x5^5_
z;2y+I>+bW;K}~%lQ9J*JsbjX)GssI5a4uiWgxqZ^=xcmO2V!jiJKVTfULF?vDKm#l
zQc0ehQkozFd(TnW$6%Vrav(L7r*i3`eV)eV!SVS%7=uyshG0?y2F|>Ik><=jUrS<f
zb{4250NxE5qK1kBN!asg%;|)6sP#HkO%k)7>x#z*yE?kMNzARQFF*bu0kz?oh8by)
z&L86~DPj*u%tk>E6S^`sIsC!u@2*?40X+;bQLvP0oO+afw1bGlO99g$t!!8^1@^(@
z3qYNjb&j+JM9IqVBhvagoxJ3fHdV@P-C2!MSoMwp_K22cdhpe|n2GIEUW_v(<#ra?
zWjS8P=4eRZf`O*aXhSKrT|Gfp@^=AaJDBdSRf0E<OnMgD(1p4Z#p97kQw`5LEVd4`
zvJ|>3S*AI2Nx2)oT}5_tqTzAs)Wqz3g96EVa9<H1$tz#G+4<=1*OV*irAoQ`g<Z!a
z5zqV_KKt^OyY4u6ApA!AH66JlekNE#QS{NNwQ?zj7LbB3xM2_4u~nb)|6(nwrY)4q
zV*3XIG&(s{VssA<E7S81AuL{~k4-=dG3Cp<G5N1;FPwFRd7l^gACESN*|nqZQ2`!d
zzc<As9beC;+G~UR*S$u@P1{FP)t0b&OTTq$CrYcs2MrR`vRk5vWY&X{4s2nX_jDh5
zM)8ec^t$-$o4N1Y_P;`Bh}odweN2Q2r`uordmC@bm+0@mD%GZMcF5WyC{Sp}Y$MpQ
zxw4rq9Q}!p<yS0vcwl(UDi2Y!e@=h@7aZDrZSOYBf59=Lo^3YJ(2g>cLDdCu4zoj=
zbd@!Z&1EgwUg%y{foOFV_9c%x??-bINL^llQ5|?7_o2X(LQcF^APfFWAmA;ev#GGA
zbAS=hhttGO$vWmFX2e@KOHBz!xA3R?2Zrg*8Anyyuqi8uovKE=rfRAxQ$Gaym*Ka-
zssQ6^K0)_}a=C{y=8rJT;HneLp%#GcVwoVkdj@tVR2mRpr7b{O|8oJ4`DqNz;Ux`z
zrbmId@?;1<I_B#Mr81-mv&42Z0QfkRToK3&-wqYzUpmg6zwq{ox-0?DAJU*<&OGg0
zIh@UI-Q7Jnyz0HNL#8P`**t81AGkhj647R7=oX#PHo|;;9O8^KBuVBy1Tu-Zv}eW2
z(;C(BmUbEVMr-vBSrI?6dUPg0#3wL7=Ab!~MEfzq+H&2EnJWTdD4-EMQENZ?z##tT
zL!WVi=Jat#%t>3ISK2iJ;YXNed|0gm%;$i1pEW@}ZB$s#uN7NAzb`-&N&;u?%P-Q2
z`CZXbzQbj0(|~CZ&~ZN7nv&JMZ<EOwpgZo2tiG(CrBZ)6i_z(L)gDqB^*hMp(fHR8
z_)l!GfyWl=)n$pAhSP@;F{OCGAa1GFk2rVp>P87JU<U@#){UpfUiqm#XhJ=6fAWb^
zCZjdGebO@*)@L?OX0`0bu%&>A{>K1M`tD~b$BDYfOE=A17YrP`8$Ep}7Yg`N!$y#h
z+HJaVcYD?B8n`TT6&K19<%PNr&DC4nBUmL)9Qi8QYPSv?{68oC#^^cC<OmI|wR7qj
zQ4mSd{xOpldH~vr=WY%4M(g+oUMz(`EIK&1MZL=b7&7Uv6De+3it30xb6oh=I};oW
zPmiht_LOnS^J@m#GX-MeUXG1}Ukdr)G@Ax<6CHtlgBHgvs!emth76{kdArzl$Chl7
zciUWi_9FSo2t)~0#YukyDh5|t`n3tp+qUQ_8<w|iSaQ=KW*QwhU+*1<$19dBuB3^D
zZ_|D2<%cZFn|2+Ezbv~97yq1=u|?c`VCJB>bKr^GfhD@P$b`A;Im9u6jQszD0b{=B
zjau!Nyw`=R=EA!C*s;0!-D{7`%wUe&Ou0T09c^YnyvI30;GB(dQ$D6C6+pg^ogQP1
z4ft#*rOgaOa2C&1PF5<a?Sk30jybR2K~9gw7g3&4bG3>5NMVJpR}?!PVk&@PCXq3w
zme?50iwC$C8?X%lEI^4K&1?|Co}8ZfY3{t6Giy|*WgCv;FY5-ftShL;MM_T&ND4|y
zZ^pA!seBbRnZ#pOSU<OlG|i#*=R+kFU^Iq(fKFmIQtM$Vpc;~qbPY?_9mFOUJ`jK{
zabX#$PftJO=LX_NN8H_5PDDOp`^Q}=m_<d|x3KBwGDC1fY6Y2GhQsRO2Yb>LrKW2P
zOr#&gLyqzVbQ}3udm@~T#?xZ*o1s+tPUlobAqA(=jCE*GeAv@?`$psFrmbr}m(ON@
z$q*qqa?Vhq%w4W8^X&9uR9LBE2Qy7Bx^n{ZZj9Ys8}P_^+QE<ND^*}hx2c2~?cmhm
zVHf#U6qs9sb<6P#(Q#>vy^(-HeZru$H9GIds`p=dhzf|m#G(=xwEQS&+0(K43{g)=
zj`$p!etFh58A+ZOyi-mr9QK;h_*on2aA%3Fdj^9vrt@X@FAcYAyr~}SMS0gq2<y+h
zad4aSC*<iY&UAjU_0PsfCXgnZwag>am`t=MC98=8e)SbzE`Y~#5vFb~<;*)~GTKZE
zl21xiH+9wYI+{Ot`TE7V-iwLNuUo!|)U!X*ls}c!sGEe+A8k(~>y4C%O_m!~vjI`%
z?#F!h8Rt4)AV%5hc%!LS$mtIW5nvQ>Q@HnPW~s14b_Qwy3=B};nBOT<!9{W!2-0vI
ztFQvgHn0>&Hm6cwUwM42FYK+BZj%y04t<%O1y+ZhPR)z<YvsRzJ+r(Pg0Sv=3G8ZK
zh^uY=u?0y_z3$NV`&VR-erqt@(cRab81+Jz`d%n#tLuU#7Ck#^=NaN06?EcYry7!v
zPq^962t2dk&b&cizQt1Wg_|`ZQR8IRvFK!Kg-C9s5psAJ#Xl)O<>H1RvNMbLEQ*!x
zlOzdPJ8wNa(%=RCM2+8CD!Yp$Wr{P8#+RCI9Tr)>i2RG1^rf+^I`#cff4lmC4%Gm%
zU`crzORy_!&YUA$;6V*+ZH8kBCGa_c59UIYct2Sy&B>@v{$w^SXtryzCnpk^h@p{-
zn1ia$P>JgkAh;(|gxfS7vvY$i%VtlyV(w!wf}bo*WQCZRnGu|4!RU*C7MYCJH03p4
z<l-qBBH0@z(m|TT*gl@zIAG6J!Lcm4Y8xz6I`~R?Iy?5%UMQb32&3ZP%9k#r^Wv8;
zq{fq=xvj`6ImUD5-#(R^^w-2M%~4c)J;hEUeo~dsU&JS)pU*mFwy0%xHIJSSQ)*Y^
z)MDR;_0dpID(S}Oz*NK5PJNn7*2bLTZWkN|wcsCiZ?d|6oDg^JLRTI#*drUWnmwOc
zCj<JnuLwaY(#CaNtW*w9$4PTWpcxj&tp-6NVbQqN#zO458X`=L906Ou{}Mhf$O6~i
z_4U=c5v#k_F@qLm`??ojngWHA-O8LV5#Z32px)#<d3}>#cXqy$L(~jbEsC?Kz$QD)
z+$@=m{N(5ACo2l1VVIXyc)XgGc|0tmK`zyL+G|FP&3V4a5fVOpD0mPIQni>SNIDz!
z8j)ezT`x{X|9uy{uuB(liIl1`n1<dUK=vngavnJ7g%3WIs8PR;#&T7bZ&GBPU0}H2
z5qVF#osKT1HkM?7cwkC8;?SVwPBgx|0xg;gJm<d<f}uyaUYo`C*R6B$FDir<Q-mUk
zNj#!bJ9QHo%A~b`5sh<EKqB2kq&eDYX^|LM7x2dlg2pBxogH+^@Z520q?^3^q2PBA
zny^tf*vhFt{3GtjZ%<voB2#bL;*SbL_IbW64$l0{ng=#Tz3v@^q8Bw-jEeqkPe0q*
zHZT=gvTtj1Ti~-DcH@|qU6dW4omF|q<`$rpV)|^G;TmFfDL&zaWLwH>v`k0;s3VZ|
zlnCyW46SzNGK`FEN*`>OSxKc|V|T@4I!uR_CcQZ{43DiyRn<+H1Rp!>DG}Hl$at_S
zKK!dK(0{tP?9}!b#cwyJHs&vZue3b0y*+Q9!{j%U1}7fItIRuie>q|d+d)-SYoLfl
znUX+AYng<=LS~32=%EZ24SpOl9ygcImvb0EnV88kjN%0W1yypRKf3mYW|)E_xeRD_
zySyKGE{Box8vqo;0${Pa<xxWGw^|Tcz5|A|s+27(@3RSco07ugdJ~KhCF%h4u{eZ}
z(+J5P2_q$p(82nE33bzBh~5v?Hk=9x`_4<vVj*9iU-LnMNj*r`>>``GHaSI>a>H&N
zS7Vx>OPfvPj8|53$~d<!=I!G}OQ_MkmrU(#bd-N@to?7c)wIAT^VVzgEajul`uY$x
zjeZQQbO<{-NvB8&hYICJvPmKe-q}7zcXN$si;{3bR71U#LPF^jNL~t(6OY7QH^!OR
zNF8*Nq(xbZf=PX~38VGk!4@Z2I&-aM*#bSVNX5{ftWjd{Nx^4}O1cBO`BPbN*OqOj
zh6%aseMsPk!D@UBCcoAGyRY@g{u>e3-c=3kw!z*;kM!P{%bh%M6@1&YtYlkIQ<uih
zcZ!;t0s(~JvJhf3CQMSt$A<s66ujj%psV~Ez**+Ieeqm$1%tpqa7`IT`JpMlvH}rh
zh!Eqj8p~2pLJ}}tCdBzjr&HDGk=5nwsAOcrUK~Roy0L5!X<}tC#D%$<dYuAi$Vr()
zAo8N-tLZDl{!A>ioy@ScU)Lt3q6Lf6V0p2ql#Bt%3vo#^K`KqGq`U}bAjufrYZ*tI
zFN1G%OK=1p27HLt@Xu#-DQoz-_0l}`M;a4eS1c7$J6#~TWjjcc=Q+LYV`DRmEb((Y
z5TcKSC2a5lea=%g`H;fT^d1``Akm|w*PI#1%6#`u2NVXYqYH<}8fCnHw6m+L=V%*X
zo_TP_5wcZ0I1R3i?dYJ;F@I+ko_|!DGJL4$U4L|b;Lug@O_8vygt!3h4+mUZ0a}1I
zpkgMY66IL_&UKCuAi{#*QhFt$li}FJ88iUM`6ZfGQeZ;vpAAz~>*j4vk}vJ_v&jb~
zr-@9^e2b!381nZJ%Ps?ms(e94dd-MnpslJ-qdoN)S@M7g`_YUrD)fRUpJmU+!Ks-g
zggV&mdDl6@n=U&h8uhRn*18s)gon4ZxT20Wr*r_rLRTNO&(y9-EZd5b){5E4o_`jQ
z$`^FZU{TJmhsH|GEWNaFw4ETH0e6ndw$U#LpR;0FzS{a_9o>ExhBT_9CJGm8Hjo8Z
z5CivpZusiu0i1T#!^}{mtyce4k+_Um;a<I{%$o9{O6t4!wk$`QeY0~<HdT2G-{xF4
z9=r~=)Nfq8{GF#=$-1IGSS`oTMVQxe1Mm)vAr+W7t*j`rv|`i@MB_DvrcpKOR&U_;
zy_WIhNdGGGnh{L%WHIGK*{mG7fB6C-gfSH`j<_rJN|&rSETWL|Aw-Kqu}eaV%;>41
z%7+a9gH>3DWqsl^mzlC#Hf3FgStn?dRLcuYUj4ON6V|Y`d@zgl!3%eI&McrT&h?^T
zQWUeyv`A0KBb2(<?9b<O2Z5xB9rRyQ;QoIV!}+Y2O3x+gbz7QSSWtL6#qA0)%a`_A
z>cQH9(uOsLSt_p_TDPVl^GimfjLuLuHIkWdvcjvQttJ3B9{IqCw-R;=Ymd^}vyV|P
z$>|c5txJ^vJv3}2dal2n{7J!x_!)PJE~2ngisS8b;i1mi+KBv?XgO@=50|C+KWU{A
zF5swtE#>M0qYUrfe0$KIlxr@~HLMhWuF_D>`@B)mT9jYxaoywa;+9GIb)2{+JI{IS
zy>s4>Sj}E1Z_3?{71v44e#D1(-z#jYb<i16Jll5Hg&g-rz00E=5re^mKslHi5De`g
z(W*|TBWBtDvZ&n~1Gkz1nPFa4cRQ=O3yyQ<(j1L);zHXrSE_fb^=bl2psXijRz^W{
zNqMrb6<psX^Hh+iZedq;MAztTw+J!mFKkc<8_Y0wrkhm}g-bI+4KMuZ+Ry+aATkTL
z*;l7REBt}kZO^6=9vdEF5lebLN=QQ;Jn+C{7CpoSfrX45$E1hNqlFOk8DV?*%w<sV
zsP)h4-cf2&Y{$B1N6C)!M9uZ+l*G1xBWn(MiCXKF7?Ab!rFu7}QY)j_R#hhC!_6>Y
zsyJKiY7^leA#K!JYt##7FgOYfMEJn<?LdBA7pO0h#cZpH=EfpvXvb1Cpz)5v6EGu$
z@wa}j_VGlEo6kSl+PpmeDO$$=r$NOoDJ6CORwLHyLcOT2huutSYh`BU{WG#&NPoEg
zo~fl~tQ^O2X6Og0ZIN^EYAnVsCngSm;MlAu)#Qhv4VVPi`rW46fmCkw@{Vv@dpNu@
zRWokVqdt1-?ioq<TuXPIO?AWE%bd^CLC($c#5u|Sz^ZbJ4V226fO<fEvPr@&tyIW5
z+KGF9GZr)Y-;dGJs0kWpa;B_;Kwl$yqJv-v=2iz+8d+Lq&LIB-aOX-4`uByfg9;lJ
z>tH@FI@Yh}`JitTsd}|3Xkig`?Fdmyn39IE15Ve~Oc0V8HXzqV0>HG?Fp45~Ng4sx
ztX$Q+ELBCPgIKZ{7QHR`6l=6C^E?Iu*?9cnALIW92x7~Y(AXf-55tsJ)q~Qb+z?iK
z(|4IH%l0Z8y(!w}tcA<Whmijq!(k=a8AldvVXro6#L!I`9p~tmxT@?2pS$Hb4{oe|
z?v|%IxKX8nA{u>YLkN}q&>L8f5%DAd0dJs(?cHo!3`2WAz%<d=51I@1XDs{B;kmtF
zLwkE<5|7^mnNMqA8eHF*&EbDbg_n8nBp!}}46$1x7&pdVKQo43up>5*sX6}q+l5{T
zB-#lXQ)np>5smPw!j(F5DBrE;#{CR9a;B0s!4@qz@$nC+wZ$(XzQ38@;!Ow_%7i8d
zQOeZ@Z}KvB%-a9RoW9~wVsk#BA&b>QCHS9`XB;?In)V$y_Pvs>OAriw-1{Nvm6%uK
zDx*}HaDkUrq)|0Zb7dn-vQ-8%ZiuFukAM4#mQNNW8GcQ@>@Et(76}UYK?8&-NCV&k
zC5k>@Q|Zqu#dVZCc_({u<c3<};<)7>Y^%0*V#|Z5oPB;{cHA+m%!f<$OUsrNBY8@d
zTrR7rcacnNxQHKOJKE54;pDhMvji9&*Yi{Pa>eM!#1CEj!`a#EBu*YGw(!c7XUcJj
zS-W0L|9{t3JnFG&+n5a)4QRHRY3p{`mTb+&fo&5x<<*f4XLVohL&s8}es-VUQKQO1
zd&B}Ir14S*Gfr^mioZ8ZEPLxYuY2b0uVD3y*H0Xg(eU6TOy2O)$PyIZ(uozF)VSbO
zU9f&pps{&n?UG<%@!-g6j1UT~A47;v>Y!@MrZh^Tjl?Ayou_g53{Jw&oR!Hm3Ew(s
z8sESkDGD|u!xCF~d}wRd-tXRQv$On0Q<Dt00a|#flP1jq>Ky7!NqAS@M-SY3>T0oh
zh%06gfeQ&p7-ctS_#pI(m82Jce<H#TE%q2XD?<n+rRfg)G{H0b@ZVb%N3nF*k+g~)
zYKd*Mnc10Xca<<Kdz&9?0s9}-J(KIsksfbFnY*-9D=pD51JmJpmA@_<U2uJ=JeNFi
zI;|~Nsv6Ei*Qw8dnOY0Gf6>kCILPK_c(Yk-o9<;-H-KZ+Ia-NJz2#ka-(GLXg#)uL
z9b$I3yVUJIvldPpr&Xu|#?XTZ>NkvdW}Rk-SI%y2iny-Guo2ec;dE878mC?!%NRdf
znioyJT;%VjP9YZu5Op3NAMmB8J+mD-{(diB=T2dTdW9P==?07Sc}ewY$&|V!QAQ<;
zLH_#*=M$k1`N>Td63In%<R*=DmaC`WQ3dK6r*OSh2JZxh7Sd4~f;hi)<kk|`(U6NM
zjFfJm#_4#`{PKpaf^indjQ|AvsL*rZ`MD*Xuw9bSY)tBD*(5ZjZB;fo7&kF%5;ZMT
zwEwS!h#%RIX`}91VP;tM+U@Y~-Qb4N^MKv4(-Q%!f*iMM?zM*8xppS?y}s>fz}!j*
zjT?CXhuZF2_g_I=EpPRD+zt0tNh&2zvpEHh-~|=670Xw%zhT>7M!qEIiYSB7y+^4h
zI>T+9s;pF02W53oyqpC^wH8ijEVA$ktVJI}or{KsVv`f&C%=BOGbUk6_sZ(VPGMyc
ze|7Pp5h|ptncA$+a#u)qWeM!S*eV=osMHOFoa+V-PV>;bvK$^Y2LeZz`Fz_%^VRnc
znMKz(E5agr%>iUn%C+*)-0X}hS`J~iKHVdmnn5n!>STNGl3>UQdYOPByF%a=6sY~b
zj*=J-nK0?r$t^DcL1{7!tur!bdwsf*nX!9CXEv}bTxm{g@8^@rt1J_sb9R2ctj~od
z!aPZF6CSF=6h?T%aY}5kSp>EOsn%?9*0P>L_rQ)vOp^VzZVVAALxX{qByX4<b7F_f
zc>d#!eO;y$me$XEY!}%s?;39KE21wgj`}P$^nyiN?^n6&yYa{0w8(eE?l!i|wW6nn
zA>Yayff2rM-q}-MKaG?Q^}9!97w6A{^S%$@Y`#9}q(4EcgE3yup3YikTOT+Li|Q5y
z8kQ`qDmKlFQEozE?5hoq^Y{&R;}}-7WAt1P0@#IRYSE6rdkNoneI@yc+vhY`@}vtv
zMZ%@LYv21YQyVj+TfL?X_gOq^J>`yR#F1g%u&>J<o+FCeb$~eCtEaGb%ESZe)C%tE
zaseX?ri6v_tNaCJEeIxK?~bO7v*#WY&1I{r?rOXq8ON6s3fCRdA`P>z86t-&K6L$*
z2%$A%xzEoNVZb4s@Zfne_~R%7F<=Ukzt}9kqgPlro=OwZAT&e|vXh6f9tp#EES@(O
z+=op1dvKj9Itc<&$9ax`2vYN^^gY`r-Ei9TwW9nqXOmudM@OaEqy~4s_YkMC{lJ>w
zB+=%zhHEFgUf&jQcGt>UKRIbUyw7~+4ODn;czH?f)Kog6vpSr-esplq!vR@lqv6ro
zYwi%+XV!y6v>-s~swMY-;vW5cx2`Yi?5zs<#HqsU&}H~Mnh0eM%hfZ>XdgZ{#6kaV
z=(64K6GAzWNiKJh&5`Yyt8g${T<-R`tRJ9$ukwnqNO>!(Yp_Sdr5VL%eDLev0+|UZ
zf_R!6yN*i*lqfh>LZT_nr>PIjZ*N0Bm@W$%LI88T2GYfZh0>mBf)O1`zkQy9pLa3F
zT?k4z=l3x-Ov7xmh$&mpWt(uSuInnxHgxf@)LB-sM~+Z|?FeJ?IhPIG1u&(<p?C1X
z1`w8nLTaWFC4nr79{F@VmY*S6C6&Rkue&Z{^rdue5h!_CEtGQ`6sj)o?O3Qqu=-5M
z;dpr0haA%k^{7_#O(-P=pbIqoe~!37w+!CqLNu4sm*-HX6IeL8Q(O$-FPy$WCk%$!
zK>y3*wl>Ph-(_b6^9(&71eD--vONnp{5CY!qo-&q?n+(%RepLvh%N7Yu|aV*?VZ%3
zI8GV$(yPeb;0fq3ciA75Tgz?b4p;6izd%Liq-@;ic46@v1Li^Oh%1zId%?#A%i(Sa
zD#UN@{GiR#0903B)1Uz#9-=Iz7#N?yjXD^1%bl^-dMB3^%2HA9jG))BmQ4zR))mXr
z!K9DB8YQ$o!`*mYHZp-AH=C*Q>rAaOZ=-E*h<_K0`23X5E!v=5yHVcQO$gc>;b9C$
z`4;xAHy0)zT^mot<1qu27maW6583-XRX@>pHhnqRyZ_`(2j1U1I50Svmbw-G*!EUN
z!y5EgcwD4K)7Xc#xOT}zDKg)wrVpMi7=~#`UmQZn^pZ+{Ue@R~Mzahz%*NCwfRy6K
zzQ-b|0Lo@z*)X%0Xkkh_v#p`vgCN|HAxn<X;S;BJs}mCkM^!sF5o)IzpN6Aub>2ne
zZh3sGqL^<wEqxnY^ov)818s*!CdQz61zH$@QFaV2OsOPqpFy3)L>G*Bw^qx?_0?);
zTw6Sg9kJUT&B`(D#K~$Zkphz|2deb58_SlRsLi!cK_P`kZPsX_u#C_ZcI`4Pr!%#^
zW~Lq0h_ju;-h>zN_qq6~C_eNLg$$9jr8u5Ii5@Bjf|Xd|+{a6$0nJrObm9OAt5r1|
zLCXQY%?{)dxjLL_N5$NvbB1?0#WXV_{A9YQcG?-w+b`!M^SYO;92pz71v}0yf-;T@
zUo^stGLLI}Z>Wl>!a5-AJYtMlbs4IJCC(;PyA=$kSijx!%={xx?><eCM!O>5rH3z`
z^>*DEbY<YliuYlVBA}FI1ddevl`B59z4T%}fvRt;o!L|TvIozM4EmMy$af_gtNH1<
z1wFG*My}gBzbr&YoAx=Dq95T=%R>&7Ta5WmKl_O&GZ_^HM)7IKvjo_ukthi1_O%O(
zp@b-+);d_IRF}f|P$U&U+h3=VblsonF;ycCm+{C3O;Jp3we5s`8TB%|2Vu1`kZNRR
zFwvBgo)hi(G2H-`(`D$<WWp*6-S*>P`He`C7ScBzeQCL{D{4nSjQg)GaKD6cr!JNl
z1&^{z2_H_Z2UL-@x?ULJt0h>%x}TNRmv#u}pVb;~=XaG<ny~QhyT-jO7jr=N6D;6m
zwJ-L`Cva{ej)<7;0<@(2s86a0Pp!LTa6AEDX9;9RDQbv>Z1fKNIT|`;22&t05D+nR
zWO6`@c>AZwzqZh7l+`plyQSNQ$D)hclj=tMoXT3RJ(FL<cA05b8UjXl(2AeYW6;C&
z-c1Q?iFXB}RWP5gxvWqa9+>v<RBF@6c_ed*cxUcJrq~%y^KV6=Uxu_;(<bkzm^wJd
z%Ei}&fzUfifxMddc?yV|UA~jq8#fJ&Hyd|<e(-d1YG!8F#$6lM9gV=b!1biGx=t;!
zan7wyHBeC?rQ1tYU#~Q*H1MOy@ctoG4NP_j^&!BgVTGQo+vlketkrc#L^7^9;(?Mf
z43E&<5-(J^E3f1QX4^67p+S;JngsEUpkqGE^f0?V6C}$M<DP~^s(i7}Gtyillihp9
zJ}__tkv+Tdtu@|;NY(x1EDyaT(#X9upPxX2*QOzo=aG3Q>b9#y`XgTlr9wn+;<;Y}
z37xLu+TaDek+|~Z$6ui6T|ohIh{@U4!rCxo*}MrIr{`NYzaXi0pK%Lz3jBQhckjw%
zd3CUL_ns3L<4OYv7mAB4Z_TZ>twl+P8p&idX0GH{$kW?)0ORjdH9)j(ryl#*jWHs|
z;6}R(Na9JVvQ426^ev&oTtC$Hw&Hbi5SY%9<4_lK1kt<E7Xr81O3k%14uD!!2z(v!
z+#9DOh@BBC*X>rLU{7|d-w5ybF6=6;@Zg+?w=CIPw<^z48dZiNZ-YFsj#tala+9sO
zT!vS(k*N6$g;Y6<o2*jb*}`%1Kf@0_s6{QbNisvi^I2LSdlR9xERap!@xI%Yt*P6i
z;9Og>=F6F;RoJ*{c{14-3TrPNxlnmJYePRra?EMVGBVXb6nR78au|`I#E(e6vO(b5
zqKofZvDunValNRv|0SOLeDALyh`7jVpvaPPr|qDjh#;=qzu~Y(VhF#(g?EI14`|xO
z?;TRk7?xElIP>n8+wvD=_L`LmI7QLk*>~N`wV$*??utsOx8Xh=;jAeDc7JZ{!xMM}
zTd}z;a$Xx_hkp?9lU?U0&hqXT6DP&**Ttkc`0orKa)TomFU>O#Sa~j3>j&yk=$-?J
zdWTzHc>{R%g+rHOVO|o7RO@qxmNLdl8iK(?k{HTvZ8dW4%Gr%kp|<NA%H&@#STwWb
zLT1mt{Jy(zxXuZKZf$g7cwI`T5jHeu8RbZj85XT=P$31PPxV2py%b8acpeDxw&2Dq
z`{JFsoNKjB;ZAQ}oh!|e@31-BM^PkO5K35U|Jn4ZgGSd~v45q>ocIA-ainBmhI>8F
zlb*F6*m;pe8cynT@!k65SZh^P`?kdPaF&$SlD#`pgCRWy3kH$64IQ%zY^B$H>-l-(
z8GTE$0Xg#W{Y?(ZHn@9en0HI^p@yQQEnPY5MiL$yoT#eK&|fErC06_a|K~<pRArYn
zpkUDU=e!i>S5u(p9!>LIAufNLz22>ctaiIlAM%Ci0qk0!rmf|B9hf~icU_ZrFZyd=
z-hM2BZYZ8V$vU7=2<`7&`|a+{@d@eMynj9s!N;@`X#O1}unj9Z6vUn0aapq+#Jh@o
zrrE@C&GuTg^#q9_@`Z1-FWh?Zl9tfYyG+O&j=68%UA&M>tyzzj7HE39JJKmz^ffHe
zOQbaSNZdT`2wv@I_s@6TbRscl>e22GZ%SlmK3b~<g+H;f_V#U?Z5@SrLrS2jrKQf}
z7Pg)65R(p=u7khw)z}W{pQdpod{GHbY|j*4^m7iH#F$oOeQ0zPwKRz{*MYz{${dea
zNn>xKS(1o@Wc8GQ#7<gh%gfUYA8Lt8lMPAxm_%mR-x;*4GYvK6owKr4ot#~_vw$|6
zV-h9sVuvM+a*dw5*`Nsc5&%Ip|12=3QC3dv)>HK@4TYk))g<$knw6jkqyg$3j|2|P
zoDoVUFZA(UBxwimxg|+9uPfg)le$#lgb^F}t=m?<%we45Uz$}-HQ{I*qUS_LXPtK!
zYj&MXKrO2bowcZ?KuJ5eu}vI1{Kfjg4~7nLO;rqw$f3(IqMWE}kXK4%kz&&A{=a-K
zU$u=^=;c4+eb?TOoXWsaoM!jobL0rDP>?LqXl{1ox9f~A?B!r{GDur~F^J>BL4y1H
z5v8AQp+sm}BxhE_UfRE9l+VSK8GvA;Hf#mkMoD1OiXOZmy&7FJI}vkAQ`GxV`dH^l
z#=xW%VVkkuu%ZsCrpW)&H-t5`0^YG6QO1w3nqWmPI9iD+uI1}>+DW<L7eIn8$E0_T
zU8DP2c8Gq|OFbp5d}*W(+m*#G0;(x0jg7+-3L7kqL3(oZ-X=bMyX(_UwOGDy?ZD8g
zZdc;vgAeYMvp>=zPnc1OT960h$z=?S#JHW|oJ4^!;sqXGHl}1nRf8~bM!Hc7u14k4
zt<|++gM`oA^a1otp;)FBu(4r_66#BX=i~xhW@m)+=H>c`3hJ`+_16OevW4NhR=5w)
z`UQLp)ShvV)gdUs>E-L_5w9^~F13=0HkT=75lym`Sz_){RM|wf8C2ba@((uiIH~l6
zlMF6N{e6wET4Tl`zrCKuH?>&dV6m?`uYg=wCSIu{A;lYoWT;T2L6FFU)XrR_hDdZX
zLldF*Cc&-3Vf`qfS@l%5N_jjs;&LT3*ii(c?-3ltXdOxK7Owj09D^_>-+YS6I21KR
z)b`g)IE;HlVk-8Q4`W-TNcI7d^x(M5mAro*1A7K-JCF5{yqYG#MmbSP=;R<R6E(jI
zSL7f`ZM?<&^=PDVjA9z^+S3F>#5zs*Z3W&!;F98`g$~W<2`cQ?VlGcho0(o1$u^Y@
z$9%P{gUQY5^pGP(d8*N4kgrU3<%!mf`u~s4A#N^ddQD>hVfQqVl`G|QC@=Hy_8d#}
z{6#z-ra@>mbv2j+S)aBh_IdyFl6l@yG1uHp{j8fgXnmZWD7m-D_NQT^(F=ig!Iv5v
zRlhg&=cT(lRpHk?+)2AWVA@iGt(9EP$L)Hr@^f3D$psN^1D0h6j`k$7U+!_;kmt|Z
zE(kltsu;o39Ud_Wh|uA7sjq_0sv-dq=*GB-34?AC-Xg&Z-8Z#)@~-!NAeXy5T<EbB
zr;cZ{0!<&8S#n+7^TU9i`M^cOmvtu-$rhh4GA+RTO@p;Oo8JxJ*3ZfV_7I!yitbuR
zKW0~rw=Y?Mr55GbP)_R7R=%P?=3#PwGX=!`Q=O#gxFX9<$K@si6Vnn1hIPSg*rdmB
z2y`sRqIr;}O$~$>4mUrq9GJond@vE&IP^KazvNI;0_)fCc!<eRPy0wd$_J)b37X5Q
zFM?>w4)Z~Qzz2*^|1dsAV+WC_OK~COw4BAtW&#;34huYtVH?xrEpKp^jgH>e7$s)>
zcs3}T>9k`Bca-ilyU7;E4ROQpEayi#iNW9ydJy4#H}S0O5OALWwSen<FWdEIUkf$)
zFm11kg5^|{r~%B>ioEzu0dk7O^e9Vd@Diq&Q5AY@aH68d-1!bJmtZUsqtT9<BN}|Y
zEZW!Qne&&1XGX|tpjiejP7m_*ToJb=j^zv)YwtESoxD0Wrl@S?PUqs&B<CqkMQNK(
zLZ#=fd+bTh`-KJ21EqMQb6`Y-ygLOu@C1n9pDUrP1pN*&$2kLMrPNRc<`_bThR%(y
zsOl2pDp<oVp?ZQt@KH!WM>_)70&|9GzzE*y+~~{Svb6V7t*Rl&l-4)XV1=4govR0H
zUB~DrTN@QjK>${@7pd+2WpsGBA!(w&N08dAhXOYT<i?X2jNhFK9cE!5{fcSSF`B~V
zdO&aG({CY<1n0C&;xB7HpZxUsC&x+2u+=3JgsiE(d=$v+Z2W}+Zm=T+f1XqBeT5x*
zSWE{l8s%^@@+TpJsX}03_1BOy41sBES!bsPLJthAkNx~A%>H#~U*E81`KR$sqx5l<
z?^gGy;++va;{{!1EK(%lmjS-tbY#6&x=sE+@v*z&g}cNJEXpk*z&lswolU&heYg00
zw<)0e;4_q_+pD|ZwSla+CykpcYhLZZP_JaA3Qe=uAfaI}%nc#1*Hm27GAFdXY09e=
zolc5dxPV7EtaeMHqGaDWg|4-B>dt`eo)%Xtz|1aeP2J`?D%{ndrsogoUbd5+`@X<d
zJa2z2Y61n>cML%doPcu5f-j0m2*V$P!b0!RLfVK)lV7hO4}wr)F3fJ{ljv`bQiXEM
zlaQqPNGD?#ab3*mgiHAlJRh5u?C*rJEdF9e)-#RcK`<wWY?{W(#+<o-&Yn9z16z4!
zxGCt-(i)!6P%-`-mvIh#=s@c*kz9uZy`N6iIe%?rHM{IsoW`}Q(_xFO&TwQQ8~4y1
zE=*^!jHL%?H^ISI@FtOpyV1Gdj#<o{&t;W&f{sj=rSalJMW(&B;2fzx2zz$^H9h%D
z^G}zbIIT6^cghy%JHAmUBT7-;(0%31v-iufc@lQ~rdQ#((Iw+8aZvX~h{C=DffG6(
z1Tn)H%25gJHad}+e|XzVKom~~*JY-G2a`d6QDC9MoBbS9uIZjKfAW)7<6xPxgpVX$
zp*5=POZEo1U5s5bP}^H1PL&V+wpci2U2&SepsT<&3Y8!9ZMJ_l)f-Q48hP}JJ;kGK
zN30Rczn-Yu<4+f|wdt>$Kc*vZjKCAFzks(0v%s1woQJ1|PUt97bE)}1SI1c2zbirc
z-~!5?y=Fyb^l>ZC^8xXmG_hv?@dd^13__YCHbHtoyH=RpKItBGcN4|07m~H5qfM&|
zk(6DsKJ6B)(ci5r3r;iAs&P;KhS8J8f?ZnJh7q}G+rt_$H>~EOa^&{>fF@8z#9|oj
z=*9wj_ub7#`;*y1NwfANU|s3GY-#6rUtZ=peP`GTs?%R>D(m@~saPDj!D^Z=F}gHK
zaTLRPbN3Z7<SuKp>J%Ur`#S$O{N0_U<!5-Hli6s=a)yE5SGG506a{57qxrGG|A)nK
zds>_A$fasb*+mw8q6`+#>?S^A)n9O{17bggzOX*~uGudm%mZ!r$OFm!nqhVz`Trq3
zmbZ<e%nLyIadtVH*z(5r^4PXRUsRC=dH08(@;>8B{B^a(LcXsb%azT(h;s_(Vt@+J
z;s^$=rQxXfMFm0#%01xSJVuXlf|0sKU^!gXD5_!_cKg3knV8v<ivbU#2~pHoy*Imm
zyzOhx+!~0yrn^Vh?+}fgF<U2YpUL^ps{Uj4tuCeO5<rwYxW8Yx2D5P#uRQJ{Pov}~
z{^oM~>-y=o$<ta5j*&Oat)y1wB1Qiu3>QI*we-g62MiX%j6j5!avPXdJyfKrQplmo
z$XOmEz$|g_&Md)3Qsjv&3R*j>?JbjTimRlwB6KFpB&BBegW$&Dq?{fB5!PFyJ9-&>
z)3EpoH7;QCd#=6ZjXc(h4ohnd0sp5WAk6kv&FU+^Ng07rKh(rsHMJBi2&tHd%f$5B
zX=TRVlpt#Cd2lnr)r+pdul2Adg}j!)SNYh2t?;1&6&k{ns`5dzZgU}9<%^3_!$(|j
zjs>HA?4o=bRTFOLx&?5Z>G0QNCtUAKOJ$~LNf1B3(jbajHzm+)&(A!$o*EN*%tS`c
z<_6#c&?+XvS9HixI>qhla;~NHtma`lmP{f@SPv*@Lm7PT;~HckU(CHLQ{6fwr5d<E
z!~WgwkB9j<X8VAk>t)<;zwi8OPnOG}uR2F~oCS(xk(Xc{-=(ou$G83dx6E0eT)a|g
zti-|_O>Hd}<u{=_#I43UD<p`c0*$C>#>7szD}3d6O}`yXh18nYuaY-VQfBSIELgNk
zx?RrOgd;tuW-X+(Z4TbnMSZ(S-K3>>+)bKUK6h}Z#0&XPH!J;t+ntW{?|4A+x9nVR
zNHhfemxj|2NmT?R9OhTPN157gB}?P}ux76~70b#x#i^@0-?kt5x_InW0vwtXWL?~w
z0mBp}dsF)N{)2eg^WD(vh-5RHH;mY2N;OfEHt6O7WP^TJ3SBTt&mmvxRpzN?SYK%b
zFCsAL%)L$7KWn+$M-l)Id4*+fjmHxk#{&|4D=UN54L0=2>($;cHErZZuw}w9)#!=z
zRlk^p`##eQdx~)`JsN=u%y1_;jMK`5f$`;-%tatJf%X=RrD(XK(27KSHzs@G1(R>>
zK>964u9n^jl5rB7(TSc6W`cQ|JncJP`=29Y+}gQUC!f%*;jqlo*8KVnAzeCc^p}%`
zeK-hgY-B3^v!D<bvwFJ}v`VlEMP;Yby}+~wmcZ`10)46a!%$H}*~B0+72#UR<L0{=
ziP;pSjg(0>poOtMBR{RplSQnL?G#32{K6I8izx0XVo8Z6GA!;cF)ddIOjmLF|8Kpc
z4$1p0!ShR%FRn1BX?~Yet+QsH9ok-W5AN7yKpMkog+<y!CIK<;N?DYw!Vc~3Ua6}r
zU}WQ4mvHWuyIkOROTe?9-<l%WX%xACS|%FV^wW~kgV;=#_|6ipFE7_RiU4OTD>|5j
zkD8mg=NWa28ynBt0t8mlTzNCG*RNkiEl1s7e#?{wQwViwNSb3<7bCAHwd)c->E2C*
zcs5-{-nq)N`6>cP&{-3+pIiPc3|=9?XF|!{H(wcnK;erIJo6YxUQwvpx3-#iAk<@V
zUit=4)X)VaJzK#j6u$q(*(B#TH{kYmb)=u&1Ey)5-qJ~LmG%qb#(LKcM4bh(W{nIk
zh%Ia`rBYTf$y`goj89tN@*<eUY4l^B@_BduZSJlii+KZV2f~g{&B`I=<J=hJXOK#a
z?1($m?4Q5AHZHYhU}Xj%pJ+Bq3}knLzXfI&@qhpU2>fr~`@Z_(%H#BVkun<q;N}}!
z9@%A`{_@i({%iU}M*tuq#}onon>baz-=KL+fk&I4`twJ6VDKHp1Jlb%Fg(T&Tu?t_
zjj<91T*vnr{Bxo^3}dQJK~60wWSmPdv?M&vs0NU!9y@^y!*f+#eSZGf6$6OpYASjd
zqY)VJ1fPOpA^d6%9@sz8h|>585Xa^2kUlnL6?JNqA_o4wzYA;d#&|u@j@&kRjdIlk
z(FCPN@BF@*fzT}F(JjT;nb<&QmhsiLjB@A`2II;y7D2BQ;IE&BafJ~`pS~a9qX>Gq
zR?aIrpyGg|T4hx5*OYvepkO>3GAn~s2SVdabESZk7gOq7hxE{yX3RPehGRBDDlo1W
z92AzoV^a?%Mlp#!so@dO)36C3b4Moz+Fvn5^**&x5sy|Rg_)1P7JVqBb)b3HfjTOg
zP>MX-m)?nrc%q<2mG;~-5Y=JO%n6$G;tGQdDo=BXCAs8wCq!4DV(P(Yuz>)+Aj}O}
zt>TKPnf&Imho&_I5VxeO5)dL-kq9w3uqz~>!SG6+4w=y8b1THyJSu>U>q=4Jy%{Qm
zgm*$txV#rCf-4?U;maK=hLt)(E@;KH5?(Sw8e|$!O4U0Ya>L!pP#K(kJmi7i*F)uy
z=t{^7SJy%nP`e${QPpgy5>}=as-Vp_*X4kNKI*WK*l);Dx^KHHmI!8bi3;{*S9`SK
z-{-K>yJin~DAV?mo1>07YRCayd4#0&t;+toKJ0;U=~`vEEmo>rL0P;7gC4Lf9J5XK
zslLY+NQJT=abTLQTdF~@S!vZ~f8|>^s$K@RMw`$!)#UX!e^!}z)bd8c;(x$!Wv?D5
zGv)AfP#4c!hCWtSY<F47qg`d4eFn#`a?B$*7FpR;#Uo~2rvrv@yx?d=BQd+Y#$w6X
X&T`AKhzC|Yynd|YqyY2T<?H<xSMV(e

diff --git a/assets/inter-italic-cyrillic-ext.33bd5a8e.woff2 b/assets/inter-italic-cyrillic-ext.5XJwZIOp.woff2
similarity index 100%
rename from assets/inter-italic-cyrillic-ext.33bd5a8e.woff2
rename to assets/inter-italic-cyrillic-ext.5XJwZIOp.woff2
diff --git a/assets/inter-italic-cyrillic.ea42a392.woff2 b/assets/inter-italic-cyrillic.D6csxwjC.woff2
similarity index 100%
rename from assets/inter-italic-cyrillic.ea42a392.woff2
rename to assets/inter-italic-cyrillic.D6csxwjC.woff2
diff --git a/assets/inter-italic-greek-ext.4fbe9427.woff2 b/assets/inter-italic-greek-ext.CHOfFY1k.woff2
similarity index 100%
rename from assets/inter-italic-greek-ext.4fbe9427.woff2
rename to assets/inter-italic-greek-ext.CHOfFY1k.woff2
diff --git a/assets/inter-italic-greek.8f4463c4.woff2 b/assets/inter-italic-greek.9J96vYpw.woff2
similarity index 100%
rename from assets/inter-italic-greek.8f4463c4.woff2
rename to assets/inter-italic-greek.9J96vYpw.woff2
diff --git a/assets/inter-italic-latin-ext.bd8920cc.woff2 b/assets/inter-italic-latin-ext.BGcWXLrn.woff2
similarity index 100%
rename from assets/inter-italic-latin-ext.bd8920cc.woff2
rename to assets/inter-italic-latin-ext.BGcWXLrn.woff2
diff --git a/assets/inter-italic-latin.bd3b6f56.woff2 b/assets/inter-italic-latin.DbsTr1gm.woff2
similarity index 100%
rename from assets/inter-italic-latin.bd3b6f56.woff2
rename to assets/inter-italic-latin.DbsTr1gm.woff2
diff --git a/assets/inter-italic-vietnamese.6ce511fb.woff2 b/assets/inter-italic-vietnamese.DHNAd7Wr.woff2
similarity index 100%
rename from assets/inter-italic-vietnamese.6ce511fb.woff2
rename to assets/inter-italic-vietnamese.DHNAd7Wr.woff2
diff --git a/assets/inter-latin-ext.7cc429bc.woff2 b/assets/inter-latin-ext.7cc429bc.woff2
deleted file mode 100644
index 2fa148c30c8d34aaca4ad1bd18a853d17fc7f594..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 87212
zcmZU4Ly#_9tnJq}PusTLr)}G|ZQC|a+qP}nwr%77x8CgCOp*+e+O;Z!tX0`=a-vKC
zAOHXWq+A6+`p<&^jr|w%13*Bx|I7Z5VFjCE2NZkbc=Cy>3Mi(ifa~)qDGMkEhyo%F
z=>rj=13O3pW3?H=CU}9^fJs2o^kJeL0iXn6VW1EMTKh+iq^SfK2D~X;Oe&?}k{c@+
z_Td3fyEVqv%$bWy(rgq|pLTLo2070TTd^@suQ!ikzrVk|BpO3)rf6JVZYpX4kX>J1
z9595`$ANiUO;E*`)TGHk#3jMOKFkHv8jSKc@Ei|FfAih5c<R&E@R_zwv&Iw*ZKM4)
zFUo{tg6SmRz@Q={5us}^DLrDTpgEQhj*9+b#LN{sA%o|K$xHGX8%VT%f{=56nigbK
zteQ#8cST}5a>AH}hY+XcvLnMobcyX6ZRa)meD>V?ysG`(r)ct(3?v?MOslH=x9=+M
zt*<Be6rp#O{V=J0#h0-$F;B-a-@)a<1+$8p)abj9tYZ$pAAM?5v)f$T#L;_pxHP8g
z<Eek;7}dRquG02?h>$ReC90=Yc!v%*o<+Mm(!IHCyCXP!ij4jAHo6=pd|)m2FDA&Y
zV<MdZ6WN%9GbWtB$ggM27qTt}Y2z0W?wlxWa?m&N38~zY*~!Z*Y7mGckN^}Z9ugHz
zB3XE|NfK<0lzk&X%B*7{h2Gg<a2tq3yi6m(Dox6#*ah8ZV3vA2q{Tw4mI40o4plR>
z?C@sxarMJ#H?Q2(O8ronj)=_vPhW^7;W6pw=OS><K$glTqdwCP>>#5C+vLpT71Qi>
zaY=*LtQm5{?Bhw!=`Ms;j`hiV2CPJSuyNK9P#A`NAEE&YaWudn7)i7x1j*5;HOBhC
z5QFgk&iK=ttF@xzb3WP_0Ezo|lYN0kuuTE5<aRL*XdBY!pZm35eo9~b;nDi9u%*sK
zBh}<{J=Mkl6q13UkFkNaZwp*oP?4RGa(w%;L?ieto9A}Q*46K2=5{v6?d9Zlj?QZ_
zwfFF3aY+V>G{!0~@{b82C=e{3ezjxtaFY@Th3gliyMKt_h)@X4)|HP+h#(;?C?eis
zu)e%HnCJmcV(?dr6wJ8#0cIYiX=pxXUVsMXc+aU%!CoSYliRw;xXJzR^=FxO1FR7D
z0$>m-mN5_s@77O_^LxhTDEL-i(2z7WM%q|wk1fF_gMxrRHMc{r6>C16&DLHh*xU#c
zbW9y6V~k*v;^Xpw@A5)YLCH^x`;lF3g4u7Io2!wWOM|b_?XAKGo=|gP(GoZNkYnb=
z(r%aXn>rix`m)($^7_&9KTs&3Nd)X6VZp%&0KW)MJ~{t@=hrSaLZr!log&a-hSrnC
zRa?<W^Fj0tfOawQ9$w^T<W<QgsC>+hI@JDA-%KyJjh^UEb*J033@2`3YK}S3p+(9c
zX*Uxo`@Zm{NH*(H{kBdZBy*a#U$ITE=E<uEBTw0vS+Zilf`cFu8APNe-3W=BRCJOP
z=uKUxZJ$z+?e^@HE=!_7!pohh{+fPd$}Z;PPRNfiCFjF(=nsY0Pa6(F0)ZScKp+{#
zSXUttfx@aY3i`7|SPzehRADe$9;;nf^Z2TId8JHR4AHnUPMR_{)Q{Nq0gwzaC*(t&
zGySQeo}{$+Wa1DR;6?8|JikmoNG9E{uin|%r(DQQY}1ox7~o{KlRdYh{%L%gPZS*u
zY%$QiCnbOJ(8^eZwI@E+hl|hv4-xTKfsI)i7$Xw!gJ&ew!~T_T<Ix&nT7SHLXLCN>
z{7`N<-6Z@grt$tOSKH{Dt5r<3?gtD-!V$4xfZRczVQ2dB*r`G~8OX6)(tDosW73`W
z{@wZ8s!Up5XY$|B(niOd5L*+%AQE8jLuz4w1Y#V_-86yR3`u0MjL-2%vyUHkzYKDF
z(_P-X)GlS_WWb$s4vE{OwmC@qlUR7+0uA8T=@m2ouB*;_(MB_&vC1qnu$h>l&~8M8
ztJW2WM*N4>oIj!WT@WEC>^=yg_W=1!2g9Ys%VJBG86WMWXVqfX$#nhZ?LXBXJ)J~P
zvnH>@X78NILquYJBt#=2p~7g`^cXn#U_zq8c)BZ*%WAX7EZN118oLGOcRLtJE2nKG
z#%RIKY_6=qn~ic~P_+1^l9tgv0AuMg3`~}wW)jbD&yC(JvESurH8;r>;T|C<9x|^<
znvU#R<XLL<#2_{K)q~10Ah#hbm`8m%%zqNft1Sou0S_1txo1$RzOPZ(h_?^Gs}B^_
zwz21L!@z}I-K-0K7AMQ+Qk;BWB8A%si+L(-mZX@*GpPRIT>ZZ3?H3Rt?;(yrSV!Ud
zHYDfpN#gNXsO?jNd#Cd)uXfv&kwD|s-GYARJ&F%3E|a9ZRxC|D4&%l*q^vxq<5}eI
z#3Z5$C%mb13bih0mW#qQQ^R63fy;iaQcT#CD~NBvVtKVqw|)sp1-SBc=?nPSVYg7)
z=TQ%~3DNYl_DK_%m|(W{cykRT(U_e8p11RJ3vm7u3ET>G`zzfnd6@=;1)5LTk4ej^
zy2P2?$Ouq8^k%`<@f29nQQ-%&fkXr~2RMd4ByZ-I&5!MHv2|ox0>jY`yUbXa#>7O!
z%(lHLS_zpId?nsBL>+Ry)uvJ|@0PBORTCO15g#Dyn_Ao6I#Sm@{2lTaG-flVL=v6?
zxoujP>ap;;z!6VA$#+1@WE#W}QYBj2m?bV6n5fS_?rHbl?56Dei&imG)Cs18)+6|A
zQj43=$prPR5a!C}pW9E7;0>JntJv(Tg-%dbFbGQ!w{<5x#`_Ukg<rPv>qk3}B`1FK
zPD!guiBid*Ux6113?!*jMpR5hF#*PJjS5ht0xl9mp=6a=l#q42(U)u4p5OKpT`ZMH
zv_Y)<lHgBXFW{-3vn(Bd3BI}?yWyq`+t#D|<*iX%v-vfBpZ%#tBdqRKvDB2zt9OnM
ztFn`@3rruwa9uWwfaY=&3i7bJI@mQsXM)7{Y>nIUprr2Z90*k&0#Dde+aK>%nW@a=
zv2FF#0woNVk1&WB{5w>Dd&>QTyesqW>)hQxoR5QBluST`JRl?pskqy^)vJxo49AP?
z>5CU5rA6Ag@X84^$u?0lOn@Ue!wUL(!xdzGLzVtalzOyM1qniBJhjEcKxM<V$_-wG
z^7s{9{QNn!Or3pa_Q>UiP*SYgu1o?7g<Q0BP5Ae__9%XS+$U3!>0}Z#h<uOGO1;53
zb=eOD7~VV;WR@`qn;aXMPM0`OJOd54Wa|B)bxYEKXh<r#lt16_SU9uEe9>SGi#*$P
z#e<nH%0qvdyPkF)-Lu^x92AN~0(xA3m^=+<m`2@XnoVrR<AF|GJi~E9Nxpr8N@cmM
z9bN|x!*;D>Wqqxz+NQDa8{TE8enh(E$YQoQ-QvjfQ+Q548bj8grKyif!XT!oLDsTa
zLbF6>;XE1Ev&ih>aVMaT9-@cJX3`Fkqc0G?vCxArAh)je3rOae1vUK#NE`s1hY4r_
z?n4J+06<fL3_KW9=<i3d51RGf`Jl+M<V>JTnIxL3$D-$vz_^;P^TI<FBsXpmNdou*
zeJNF0&8WcC0S`um-dK=`?p*9mBurz$Fd@W@P(XDFO~$0?h=6qU*kS(e4vWL1-E3;w
z0}>3t9=!ASbx5(u8*l$KqIi-%Q6{Luc5`<9&3i9svB46+egcfX{KU^P>AKg9IGxTf
zA?@?ah`cT8bn9XM16NAwQ(LFzu$$&&{z1|uO8TDYGgfP-ei%2ZQRgaLTa))D@lqyg
zlL|LtSciBNVf9*wOKry6GEbG4mR-lgR$@24d5U+n@}$eV1M!`vDB1YG&9y34o(2~G
zT|CT%j3+co`?((X0)dQ0rT5J2W&gDM+-y}``%?a*8;6yF9#2Qp<{Gpd^CM6oZDT%L
zl@IL|D|cwauRCn`^mnU|RSW0puIGq&mDjtCl`nS?^)*O?ug%Vejq$R?GQex_Noj7B
zJ8G_bI|++J!Gjxguy@ur6&Sk0<xICk3tnrV-r@r+`z=}`dTaW8z!9={^nyO8rm+qI
zF8ll6fldeXWGRf!a7yk{)3#sE8ZI@7WXmky3Fc41)93{{!p~!?_v$Rj@QWANo-g!k
zA())*%r_98D3b%>X65)+(MM0I^L}wkxgfv*GFR4djImvoiLOEQsn-phVWqymwMlwY
z(*xoLD(eW%?di?~|M4BwJmF$l6ayj#=>{A|f*yWk>R#(nI<TdMFNCXay@~5aZ}rmH
z=$w675$zR-dTfI)?jQ=*M59=B*A6><7)Oi!)T7nLcj9`tVk;oz6rRqsQ7G&D&T$-9
z!}sRwujA-S3Rh45wColH+u!op?Q;~^>pyU4hmF6eu;L`ZccdDCPGq>3z0Yt%znasJ
zs=tQ)n0Eb}(s%H;4|qvkwFnml`4vMzqx+q4`Reqdq)Zw~6k&wnYWPj8ZBTBay4H<i
zb*+|PAtS#abMhCIN8uZ6wQ*(h-jWvYj!c~nmowcEaXH*x_ZQn?a(X@AZ_lTCyrdM$
zS)ysi81YPFEJsZoVNr-s)RHVXT^LX^lBq;89k8cIV<M?xfn@l&Ad4Pg(DmB(3iVQw
zDU@pYiYb#7%VjR3Iz~4c3>Fhjn2m2YUWmDFq`Yy9XTFjQVCvQag!@XL;!LFs#%sJ5
zpD`001Xj{B0%16*abg{vKPBsT+h#HHQh!<-0|~J7!#!V&I}C+SfR<tg(5O>)eE(+V
z8R;hyMuo%#MTN=n$8v*3CQ~ToOUk@)z@(x@SU5k>ha__qt2WfE&qN-M$Sg?i5^K<_
zYS_rIbO9j60m13CWPnIChrE)K0-528?eSOfl_(Wetv_%ww;lh7B?17l)rwNqlmL?b
z#R0p2*LVokr!LhL&k<G>uem}?kp9QrQkPK(QK*Ig+h@0`VI$KVLnS<Ck(B`O=l@v}
zLpu_U8xJY?VSidnsrj1DuByFtpf-0}IqSaC+x8YEw-2X}{XCPm9dPj2)w6oeL#dwp
z{WaJ`Y#6DcWgqs1mnUhBA1Zp<%U^t$bgcjHiR(Aa>NL#2)lKREb&-l=AONEIN{N(P
zVbYe^hgsP4{}N$9e=>fvNMh<cSRYSTVdLr<`On;`|2G**p*(ir;#dI5xTPlt_H#w!
z>rSQPnXVgXUnR4I!XI+rCVyyJS8~j?WhmxA$PWV}RMjy;sIFH;`-NBWp0vBAxt0H#
z`&T-D`t=3jwvP3ng{vj<R$NuCcOW=K!&ZTyS4UZPZnBiT_b&uTAc6Yd0~6;Q38Rk;
zN#p|=iX}ne@fpd_Pn(>OmkIwA{4`5X@%-?Ta1QGIYY%}2y{J9W1&h5!-Oy^rbY<!B
z1+Z?;u3NlteTKX_IN3GTaJw1FQQ&Icmj4-8=$(9*S!AKt{skRI2OmqeQi)qr`;wMZ
z3e;(Wo}uuA&Zx-J4@}+YcT#Y7gPo(B8Thq6CZo=@TfVmp6rHHb{*QAyV4LUhbC4x5
z>e3vJ_fHJTxmU<=`!R<F=DDp^9}r{_O}tCtL65`9pPP$Q0z<QX0o4xzhHLz>h6H&2
zS%v+W+J4sG0JbqJt}plMzQlSSyP_4S@wfL>b{7LUZ0X=&La5B*N^12yK>@q`y-95Y
zkr&_ty_E=L_txTHN)dc2IpQA(c|~1Rwi|RgEvc=$j{FI`o#x`Jqy8NWlQPC;lkUu9
zLw%FPfnFSSqi;Zu%GnrNtEijeAOBc(h;~c^-Q3e&(~rI{f^=AjKhT3(LSI^{Krs$z
zd(yk$x!kKq?OxZl#e(ch4z6*!pl;n)y~w)p`OX%0R{TF-q4r;bLgS)}g(2mz6l#zG
zsqbC-9LTdoshJ}dUYNa0nv1HTV4F;l70Tz_d7r3mn1gtqtvK&~86*m!DfWsPsoGlk
z%I9Yn=hzrnnE%RXUptnx6x%HN=KT<h`VY>mmeIj<LNgGN09euvnh0291R?gMws~B;
z7ps5+eBW>o=qb^6CD|T$UdK4CSB1(S@avl^<@@bpy~xvD2h_4^R=Q<gmCg3Qqc`74
zz%EMzt1#0kJyEs%?VVB%zO)L*HHWWstwIWRUkHtBPKWRn14y6EGVsw-=J__DE0kB*
z85^(t5&#M4v!<!#BFjfTas9`(V&KUQ?dnPL?XZxXU>`cDlG4i;`i5f9&i;#lquX1P
z*W3DL^wF$+;60TC!@uQFHz`ta0>!UIwvLB9XKBjJw41)nQffz^<IXH6e&wk=td75#
zUSl{WPDP%TT_c>CEX#PUbli>`nNb4lVribDZv#~d<T7!!OjNJs^&^{K=IyzvOA76I
ze;vP}cWoCchV_o7M0-QLG-F#g$!dWxRjYU|AD8D#o;&&-8vZ$xq_&;aGcTMI*9#jO
zlJ9A;Qi(j92XJ~w+wgQ^&f7Yk`cVKMpvkJN{B!l-ra7OWe2ICP(n)`3R>%;wOw5(`
zU_N|1Ul=26?TW#(@uKGxrxBx`%%}j{Xq&t!1FKZ}tGoq2Le7wxDfLpX1dY=cG3}j_
zob|eQdA}^N9sH*=uj9RbY5dc{g=Y|oM_tIXJ1JI)ww^Tw)Ai|?6S`;UZ+XCKj<+2b
zW5{jo<+v=*>4v0&6GG=VJS{%YrC7z&I=R*G>?@fQDpe0N!*@e&7v`;v54A{%+^E%0
z+vpjS5A3lh*yYZ9$z^NWm$qCY?L7UXm}G_*joE8P&ifI`ZTMmJii;-i@@sf1P2W*m
z6~m&Kl2POD`zfWS^|TKo4>XTa(&4|EARP)pnBt<yS`@E0$w;fNeA%s*%B8)aa9U-!
z_IlBq>>hf<moblu-|qn>t^g%gacHO4C;NCIIFPO5b3y8;U3@x?oN!mf@uEbTbKekF
zw#+QfmdQ;z><dVwz!OY*_tCJ6w2)T!RD#mvxMB+n4bkjKbY<PuU`PUJ!t+<Nru_Ma
ze}X8AGTE!_<*`o<JYNW<8T)K@<hLsAC3YtH7h!O%j14-`n+-El9NF0&+NHF+=a()c
zD}SBLbWB@oCkF_Kph1U(+bbeuVO|df!Wg{|C8CdnVBt>xK&!P)BoIw|rCxa^AbwgB
zbIOd2GdS~Mu5bYH5u(9>;dXZ%1>IoPI??lD$Rb4N`+Yzy8@%oF<9|rqmIz~_s?&Js
z?STpcZx)`M5@$lI_q8Pk1T$Ian-W+uPi+<m+dJ-^W+o^|RWDg7iFtY9?x@7Qu3Y-S
zMT4)C!1u+&y~FBmt`Fe`p@r+U_XUrPS(`uL=h#$;m^LjTSF*eJVs@VuBUA=)Q)mJ?
z*o)^km2$vXl~otjwCPW!fUn|ZF_cXy(RqUV)kg_I7@3C}D#OjoM;9gN>GQ7O2g=)d
zDU$FGXBl|p!F^eQM`)rzN@wusl$ed{PR^4IYjp^I9|C!08px+=A4pXRaT7R_z+xyN
zC)PiaW<v+EN?@3ZaQE>G$mDx^cjImE$y6uG`y8K8ouOr33=$|gJk(rVCM~|gZ%cq8
zm7<d(+5n8*-;Vw~vtpFbvx386Vfmj+u;1&>?7UoSX6hQ5=;?a{FT^+D2MAEmh>=T_
zFQbl^>Lc2aLcy@%)H^Rq8X`s_Y39X|ASIZKc$4{OCZo}kLSZZ@tw1X;$@0@R5(x*0
zQf~oKjm%FEJ<o~W&h~KUv=`oSrh5PL#+w4j=a7X0_eD~5)TDkc?98AOxL9ElpxJjz
z@Piuek?;@T4fQYk&L|eJc~6}5#x$wBA!LBNL&_=enF~4kg8@y|iTe~qEaXAyL)nGT
z#egg=f|r0I2<HoMx5*TK28jU?ii6wrXQA;W!+_OVuHUo&Y5=yO_zu7nB!STYkbv~x
zd6=kxQoXlQ^q$v+-tHeayQMCLSKC7`8+;aT<zJ0UHCDZ4pXH~`@&_lQ7{R1DA{=yI
zhD}Y`3TTOJ`>EqJ)d|Xd@|0+Izb1T003>9~GkPB=0Dub#4A>d@mwM=jx<w!I-NW=l
zD+>Yy1Z3Ye=nnLRPWX;&P9O5&XkQEXg{G+Wf1tvs4R``4*#+!R$L|0inDza@zU2no
zGY|D*ujLBeppU(w$NPd^)W$!Mo!bR|u!{GBKd|S0fe#Ds^@6-X)cpeA+3}z5`q%UV
z_4ESW_yLZ30k3|5+h4$qpY)r<o+pHTFUa041M4>^B0k{A4Dg6)e?z?!;s**0fCE5Y
zpZFo}(VM3-3+M83e^h6$CcT%*vB$OV;haUroXU6nm{EudC@%fNuW=zU+&WjA?f^|?
zLls=uE-ar)sJsICnZ=BG-X%)#&v8pmX9ReMN$8+UuNwk63;sini&)p7hwQA0<Z}m*
zK^zSOCFvy{8zNDB7xF$Ck~yfL>R3siV>%TGO%YQMjzuS;-6vwu7Q2;68JJ5tpV7Zw
z3`}z*3&MtQ&@C~9V$i{<j)`EOGzt=kD?khO5eaa@8Bn2US|LdL(B*wt(r#lWpP?nJ
zmxziXg;uT&>d*|~A~6s&)%How_Bg=dcrXWa`Z~ZJ`Q{c>U(HJG*1SEvka8q^f2T>H
z`@XTs>o!9tv$yppv{nKC*f4Rt!Pv(Crl=77#6}PCo`Tc=#5Ict9{<(^l&A3OvHkX*
zU!&FjEJ(|X@qzE~G6(@DtgK&)AwO=Ol@Hlm>XDZqiSBAWS8W~tXv^R5h+N~*lyC03
zYd)(^>%Y&6qrEg*(vteBE{by}A^%>HZ^|w7XIzs`B&Y~Kk5Re^Eyx$hmBpfhc7C^_
z;z$stcYbUx;#ndOmIe|+LV8DbHRsfV{apXmpGVe-^9SR8V$Q7vN#1RXfgbz4Sx|y>
z|2ct}J<)xi()+!xH43UtUaS?XeY3MXITI{Lsr(`06`ptfv5>U7AE*JA1J<68l8){r
z7o!8&P0-JhI7M%Hiil=6^^PUt4dSxmjo$zKGn~^L{kL#~?TvDde$bGel=a2=h-}=L
zx^)as`7r;<@+qEYC|?2ER;KoN(S~>#OG2SO$ay1UDU;@2n}sUJ3Tv<z^w5WbWf17(
z_L_{1-_?0hx+DLeUT7D~Z-<)}Io=2N=lWC>Iy}?3gzC7$QkYl7(uADxa&(rlx>?No
zkcD-8RRXHS&sPgA3GBK~E-2qy{6`ofM<9aRc=dyWo__(!<Q1vGx)*-t^3^6%N3z6g
zgJYkLbj1uTT+*uIY-m04GxhkgdT7-%ex4nZ`#?ig0j>WdFQJX`M=V_HF+&Jp*eV-h
zCazm%2~AVjS_;!+p)-NWbYKcAN^h*Auwyq<ikcJPa_7Wp=fFtp=>)rb2AgBeY<t{O
zROyr&RtRgdVY7~RdMW+ZSP4CTB7o8HX|>ZS9l26sQu~i5XGGqE$gLYQPo-S_{7{~T
z&8{zcra4y+_diViM9%2us_G<dSJKf1BOviVO-~t`%Fekx^OxPVCCePG_wc0}&k}!m
z<y~hjSXpb!kFb|?Kse){(Y-JE@eSHb)0kCOTJwp~JrQiA%2C^dg*GBLq{*pWF5x(Y
zHuejPK3e?1W6rR9TtkA?YI=*V=`iYhcdWW5&!~CTEASGnCjAq`PF_w;p!;sO4X+6g
z#E}v0@5B$;pQL~o3@AO;ALlT$U|Mpfd;6ny*yw8@@ZgJP#o|T5K_SKcf%v0I05oB!
zJttBmaCf(@!^jE*@%iFuq;dg<CKL*_*uVh(3imy}INOauX>85Fc<bzz7iCN0&e;d<
zo50ZrryO#(F)OYD`z2t@#+myD3{3uDDS+~HL~$GT$RBS%RwW91e$ktlX*<GKz6%)e
z_iX2uVym=>l;2`tAP=^CX4t@92)n#($9D^#J^J2*?cS+RJvq56<{}f|9Gz;ACImp8
zOPWyX@20R2*_}8NP=?}oilyz6V`&b=_SZ@V`=g)+%1DE~sz@E3B7X=lHL`O3o}{oU
zZ4VV?vt+f7Cho#zqQWCMmg*eVu+0|O^|kUc-SYL0JQquoiWs?ztE5^foa@v^iMH)V
zis_cs`1cOv^NR58oDcgdLV|DRZQ9$=-oE(S2GagGMNaI=`dLog{&2dkEE!Ho8j5KO
zi{Uiw%hutP(c!wHwwJ3`>o2zyC;Eu<O3LiZ{dT6y<1SU@Nt$>L3960x=7{TXXSV%7
zCRwYeTFk36_7-mF^VQKELo3%xpTcS9GwmQv;=f1F)!s&~)+rMk*V9)Uzm4bZHH#83
zTY05RHtRCRWpN$TZ8qom5#w&W$$$0TxTBp8lO&-}@$rPVs;a64MT(?04fRqrE*?Hy
ziyJNsl>Fu<!CqI@Gkx)#x+}4*WoYM#{3F(phFVQkp2n+IPHJtPkyqX0yzx%FPwhK)
z;}J%`b~Ck=>)t(DYleaC@xmWhk&GLx>>W3z?Cu?yCM!0#Z;<BtQeFo_EKV!t`F7ZA
zi#(5Qy;40I;RE1a>oCmSvZkqHV}S%-j-2tc38Fbq52d?~;MMwTlA_gydNg4N9B8wY
zgr~?f^m6LQ1(m2u*=rXf%9J(W<INIPA{PHrSPQxoSg#c}bzQENc717a7d8xRaOW2_
zy0af;PqS|WwYC=)ZMwJjuWRaapkB1w;z~Y(FB;E#)X(C~{b*m}++g?Ogc!J>-s}?Z
z+>PJ-Cijeb<v@7FdSE~PqUdW9N^^0S-~%y-ho6&$Vu}t#C-zAv4NVoyklk<}PE-GM
zS!JP^a&Jye(3;WH-liZBfGCcIvn=pSz_8jhInON)i9<1?GL<LFz)_pfkvh^wXpL`4
z?JH2tF1V-6bi#5zk5}*B+?-$baPjP2=KtVfny={p-oLJG|FAD*?Vo^Y)^S~V?ZhGR
ziG5=|cJ9rFnm0!AequO<bB<<fULB;hgp<;F5=v>jB|>Yi1xu}sUh7Q}p*OerY^<1~
zH~IUlM}X0}oFf9(82bDJLcN7C!ukBO_5Zd4isN7cG+hZvscxMDq#l(f0NY$>5a3*)
z>6lBd#_|3%m!N2uplqM8I4_tE%qUlP@qpZHU?8rLBc{wQ;y6$gby|u<&3f2Hx815A
zJOZ6~Ux>M{L;ni|Kmy6+x7aVdB9If+f~CK1S!-LBRP7{N_*@hf(Zqw+D48BXLUpxM
zaD_NOQp%sLD(j$Hn{Ak59RZOPm@9kOrog;V5xci*N7i}Tk0NL6izxpoxSA@_d_{uc
z-hQg(LRVLzOV;p#ME|2bK328$fa|y2gr=A~!dwWpeLb@|$9J(vL>I7qFLF1lalEFT
z812B&iC;l8VsY<oo3N(iql1mY>pMx!lCGWnl*01P?&6x+NIogLAGe=2%TjYxwO@Ff
zvlnMN5(EqRYE`*YlTd6u1?~3UKR+rf_a#k^-1C<*RN?U9*$Nc=(4pf_NGEx~f)vpA
z#hm`$1jkf-hgGvq=V&MThC|YkB#c7J7qiwb3aTs&t*57(%8@ALlepRwL}{Ez58AB)
z6Q0l7_rVgfIY6u>*K2N2Ou$~Z-qRRWQ@+Un2$KP5c-@b^oVg4}X8NA$W(jvAr{bC!
zc?jF)y}FcHp9y18j0F`@%y=D}DaeUhYIxca`F*Ig*#lq_M$yG>ah_JDzt-2Vptg;K
zDT_7a+QIhEhTr22l9=`LihapY!rm?P^x@~?n45I{>x|TCqgj(I&mDhrwfDr7k(4$;
z>$qX$G(@2uI4BkL*@{4|r?vLlj<W+NXg1jC&P~7#ts}tO_XE52^(KW!f<X~UT;V8@
z<`w2G!#rh$s@l&kv32lFNK@l}t4xYirh<WasDzP_g5XVe3&TZ7uFy$14n~U!^%`cq
z7BUp5N0Kgy)x=y!AFWkGSf=m>+IyNC(;ZsIJtOl1Q0tBb3})%pnhmKLna|d;0zwv`
z(fsRVw*F?}qBXM9mn^4)kN!+8!nU*8P32^pqU8+L%KBodg#%Y;Sh4j>mAcY-LEIV{
z$gMXcZtl@Cj!}5HFZ@gysmfRWMDg))N}KlBr#NV%Svl^w+Is0QQd(n+hFt-Jc*0Em
zSqG9cHS*@Q4PLr$+c@ovkGTC}8K?ZWfB?1{neO4$V^aD3_;$dkU8&xx0WqcJV~J^0
zQeUcx4gZ+Abg~I`TE3H{2dP%nNBj6WP}W-~PoHbntiV}2UeO#Xa938fW6yH>#9=v=
z)Fo{OBhYBYD_V2E<(!p6Dc39;jUP;I`f{E?<BI53OP>G>4S#Ij4?S64bTp=9Puket
zHZ&2<@@Xl+%3Om%%Gw~W@l||yINI5uVnNA}%XDzqj<^bqUefd2hRl<-a;#}Zmm$?u
z{Dp^F3T=?BLu@BgoQFgoo0P^RG07?%)0U~iCfIN@#*_Elh7im6P7-x*IoIJ?!`k)F
zWZ}-b{h5DA!=x4YgGJ>USqt~zVl+k}o|_@kFo>4ma$|!@^Pcw~lG*}z3*40bu&A}}
z*30pkr1JM<R$D^{8dPmx4VZ#*II66-N(?jC%qLc6D{EcwS$~@qB`!5?wV6A8F3sHl
zbiu1DPb(;{v{ut**DQ&y0ByPb5`h|Bmdj?DA46?*xTjb%wHGoP0km?;;c~&us*-)v
zSvtEeu29N*8v!}kYM8HDVk#y98(nEW6Pbq!=mGHIH}_v)y~8Rp4EhEjYwQBYKV+%`
z!s5BT)~sb7-e5=Yk~dAIDiw`h>sk8%$0-t3u<`;&EvvbM$(0u=G3@-?(|A5=#W<@&
z+rY+{KPT|%Mk)(>NCEovamu!BUW%F=LY+(y`bFdpU%|NWXO;ti6?}b^O;qlVx~NW?
z;3r0EkyVs0!ijiQ7b7_p2r@C}@V3RWpK~WJ>6r?XxX7F9WyHe}G?h_7NV$4anln$#
ztOUZB;$}R}1{B9eagB7^o$n3go(`#fqXRg5?U2oipWq9aK7Wl;LMf11y98H9O9kPH
zA?6_=q~{F_5madEguCOjy=*%M<3$g5Uz1qBUW=>V(de{?4066xd>-=HtqB-T+-hL$
z)%F|rPjGJ2yp=`1TjL>wD;>v8u<>ur4{DK8yDodtF5eGFBu_1S)YogquuP>U4w#!k
z^k>5k#WG!~@9lT-9-WE7CKw^Nqt|;<jyxeOneZGMa&={l4pq<{3_N&qom1WX?+uT_
zkgDYNvOwIFY=}Ew99XwUA{el>RVAOiy-BMY2x;X_(Vc8gk`q<bF6wUTyKoYm&V}_?
z&zXH2jLtRu=KFwZ?<_NvXfdEphgr!WQjaZ23PdMh!{jg$2)c6>g|Os6<)%d7DHJ^{
zT(>(}N*39Yd`qY1O>usP5y4OW%i`;Zhf`5KZOecw`M!Mu8wKm+&_~UZR9S2;6x1v^
znw>R#c3sv9>yFhP1ve}omTd5Jiw9v3ikhflZQ&g|P}2@jcSG(!h;>P%1BOg2ZZ%Va
zv(5m`Sa1F`2@nJ6)h_2@-7aG~Jr*@Oy-ah~)lHW1=bhgFv^SH6*6WZ1F;#UqA_Ihh
z&jB3N#WSb)0AZK{{vw1K<&a<uEWN)&q=(_dSg=`feIdRars?y*T7PJ3z{Se&UY%qG
z3;T;e@&&xh1QGa3p^+Ktp7ZLJZ{d?ts^?+y{~cZQR8S6NL8D4+QsdTX$!H|rRhnkp
z-2F-cA~tdXo8l}tM^FPOW$;St&w?ExPTJIpvW!=iH-cAQ{(a$|&0&{rA03)dn428<
zhw}F~jrfy!ir$vqT`&wz+qu~G(FX|{MY)D*l+Qngz>fdP&Igs8ZjCJ|>`cgev73`^
zGe&Osgr?Iy<*ilHM~RaQpoPzS7fva@lY5(++|cU}ak8|eiQsSY4F@?BU{!dp&3V=<
z=4;83CA_6+w8GEXWY4~*O_}_>TRo8oG)RoJy%e_2$;~U^i*#f|6q=9AgSI%`k7fBy
zTNd#8Hzwt*VKyMU5Win>vn1@M@7A5eX2t1Hz550&He=b+4s`VeLSb75m)*eBWr|))
zStWF5dr>o<^DtQs88ZRR(3H1^-2Hku3}+Ski&YbjmFIgaj;1o};j45_!q#Qpb#QDT
zxEW;bdSJE+vyWINt3HT|t)E;GAy<TA<C^#J2v`iHan6X4a^6-vcNa<}@S8qO@`Ob)
zAt`u-;pInPZ|mPme0cU@!%m;n`>Qp&nfLvQPVi%m_(D{sb?^SLdJCeQo4teH&5Dmh
z!M~3)TQ*{(GFBVVe-J-LMk$FpI(-~kBS&0Ir0Ng9u^a1zbS}<Q{8H!r?Z=(wD#Sme
zOPvJ`m5HP|y?KLZjQt)R8B2(0#qPyrkxgZosX0GhlB3Wkbn7}$ezUw%$$bsNxRF;|
zuaJvH<S3v@Z>Fo-xUfzuN|kkHe4cRas3=zr{IwmFurYU@uNb0OWs~UYw^=^;7FcWM
zapK2?=i50>Bvx<^0{4agrYv-<ER2^728k!rT>1KYl$ooEs=#gdN2#K-?AWd44)WAF
zG+S3$1QW^sDb0VN?C>IG(IM550D`q`aI&HwI^)a|EtVCRmUox{mDhAu@pUu=X#&2H
z2*e0MPkGu!x)330X|z<keJexQ!oKIZiA?GG4!G9lM>Ta(L6Z9>OZ(o#+#7XmL4+{#
zo2EJ3V#Zy%d$x}AxO-B!92%@FUx<Tmo{3BrK?B<tlSzsys6us_z_-qHHNQ?gEupeq
z!|T;HNktEBQs1HPu#Zh$b#7F@qQl;Pc=w6r!_A|UV@tTk+-@ag>*80G)J<~t6sSst
z<<=wJu?_SSr~lqKwC*6?_1Lnn8P3q?ToIM`@Y`m=c6~Z<zjz}h@qhO<5CtKiJ=*y2
zmakN^ONA4!pW)?fHC`+pFK105yB2Q+;QRXtnA=h2HOznuXp*DTDrgp~dj>9{7N+A%
z!6>P|8S6o(U1{pBeXl*wWj{$a3QAz%Oj_ZArTrajWtvRhujK>wVzcG|qbR<X59_$6
z5naxh;I)4(EO@VUr~kOn)YVm*AWw7asu_F;@tUjtoJY*@M10FZ%UDKC5!NlT?+6XE
zaqbIUT6ezI*8%3ke`UehYA0GhUB8HVO&!9FNLZDz+|pd*<lV*ZjL2|0+;dp#Z*(!5
zM5m^5tVyG!)*Bm-=nM6;TT6aOVq)3G=jmM@*J%9JW>}saWX=5tn(IF`{0E|v&G6U)
zCSw`t%XWJpeM8BMV80+zLzX;TS=BcPYI3Rk)>1oRtmdehmDRX>BQn-fDyXNMD3u>a
z<ue3NIg=3YtH`r9QCq5T@x9t6)e#>M#xfwa3AgPG=2*RN&Tti97YoBn)jopye&w7H
zQtGi`=jZ=vm_wx^Hbcc~cR{+?v}-N-Jptxi8ZDHJkW<Qq^E-{lL(hwedXd=I>uKo~
zrRYPK;i6H%y%Q6WOS5+3dcjsXN9REovkq2?AX1Pv@wJYlM$4UNkDvYMn)|PS8Eh?%
zPv2t)Aj<)T-57B(Gjs?x^~K=6z=#0GVm-JF5rsIcbP|Tad648{-m#IGu6+vGe3;45
zl&`>Ncu!}2oZlkajGQ868RP0CufCxqej4%OtV<#7xws-be3IDR=tvW-C$cJ_U+&i-
z?-{Gf{-78SDqPnS&p<yo@e#!)0a~l6#SwJr-4#cjfT~9L7AJ$b)g#@z%i1!s@EaA?
zPteUJp=5zOJu)n1^o~=xK?tV2OOLA<cN#J?94$!t&*KKFJ-cg6KD78TYgTx=0nQQ4
z>zikQ`Mu#LdUQU<Q4_p;)PZOENlQh+26ZYAMqrT&>ouXtT`^kkJXoCrdJ`?fLY(>q
zdvkXYlHYUyZ^4e0X`OE^87lCFboSQOklgmmm6fRPwr8PsurG#o0soFXwIg!X1Jbf(
z>n+NTn%B<T?2i9<@KcPSpE>1b;I|^fV0)P(nu<mH!<o&cx%}p!H?&xfuO_?)N)+bs
zk9$%C*ntU<10ZRQp8^LHl_ub%ZUtrI@(GA&!74}u7QZ87>PV^`D00!0LHti833AOc
zX`K2fd@ja*c1l{EG$g|4h_tO|Fj)#{{om4uPiS;xZ;{aM$Ak99MicAwwhbmW#drLl
z))!%YP6vB}#IoZSE9_sDP-x^@6ZAlE<JD=2hPReS?rD;zOns$c2;{`fIc#zru6T-2
zo$9w+uotjZR@hswC>3vrp<5v2il@z1-3Ph#UbLrQ_BO$<Yo7J2J0)+{6$9@^jQBvS
zM03=Mlhk#&+Wl_j6_@-vW4m$<3ik<rFn(E;hGet-(Qu(Kt27o%K>9XW@g-p^3A>?(
zK*dGqCsiInp8c-wKrv8ayfRqNuH)gA6%(>24KoVrd!QO7)tWYJInt4u5?O~Z*4xlX
z<kIE~WovBQQ%*`+o5PCx5uIFp2iD(<@?;Wal%HRkB$BnjrE3}<w;xe6-<?xc-tD4L
z)Ca28rAq&B*`w7vR(sHFH{pKFjg|qPbMs3qZNYX@)&81Uz1i}pUCt`e?8%oE##1VS
zzcD$pco5VNt=Xy?O@s#Ch5fOA{HS$Z`?y%nZ@WLe-haMBj@?KY&s946?<e_ZXxr%g
zo%tuZBbACji}Y?U<7e8xJ}%HsU}LVaQk*&0O2a(e#1FJ$T43uNk4Z)yq5Td(jm*Vt
z>khC>)=A((+OJt0*H+Qk&+N0BcPD3AzxQo|u2KmJ&tL<EOkev*Ln!4r`fdQvd^F|?
ze*|tBtO1YUWq5U>LIE8>cxTqDrjOBDIQLO;JiM58pQ`@7tbsyHMI_3a;B`JR1zS}Z
zs>Gq3Ky?|WWC-xz0*GCC82G%Tielw(RW>olU~!v#TpH(CQE<AMeY$?G+I3matJTz6
zjR9Y*7WtiOO==2Sgfo=g<iqY>t(#olpm9=mV>UEnulCi}ZGCle4+ySp%9w_05bVwh
z&&nIrDP<ti7yn810U7mO#?QCi{l1042#SzXzB|!B%31@fGG!mHX2L&cm~Vz7)k{4d
zje@I9r;jD}g)VHY#zgGwM?2p~FF*t>U}YT*{rkvlbqNj$hQa1ZOK@=ZLg7FQJu;6a
zk}j8$DvKX-WKN#MUt@?n*H?4>pKmR8NIB_MoD*g998{RVSBqFCR>tiPcW)vL1fXT#
zTv~E<c>3YZ^S->8?Ybdkq)scobCj<@k|)j@*lPWU72@Gt&X;~6)%;(28p|-YoTT)F
z7&b#|$`>}u3;TLCx!EdiCvAg$9Zr@bT`qh7mKgT3z)V){f7u@oGAP|Y8P-@!KW-Zz
z=~s&eiD7>}NmIwny)ac18}~*kcCz6~#O%J~x=2tww2!HpQcPqK<V&`F@|;$5Cxr08
zz{cl?HXtz2JVuhVfqR5L&gF*55m=_w{9gSW8JGOf9_9D#hfV72B1_Fxh7j<%u&N_8
zDUGrB$kI;06}Rb;6xv4*jMu(QS^@?mZ26!|8`t(x;Sh7ci|SGlVfe>D4Yh{&U17u>
zWSi<1DZ&o9QnOdFEcS*kaQ)?yBz5X_1y%X0MO?FBuvha>Be${8iR?g6O4NkxV@H=d
z7>?1HKaQgq1k~HuN_#ecgjtP@qSm*+>63aC;3~Gpu$3?$Fsv*p+UQVrdWoW*t!ol2
zEez)RAa$8=xU&_26i6$`tPG1O0s8`+bw0DOe=2-4%fW#vLaw!e`@Ge|HQ>iO`WeST
z&leV)z}<A;Y0heFvsdm-nGuU{`n=*9D^8*rh);p&>(wf1m>TP6;m5a@pxP;fhN>?2
zz2PSF__EC5i1*dUI$;Uw)PrHzhI%Xs3F*QSuWBF7kdLVMX)#$C0?lph_`<-ojT;7n
z1;p*^Fx3Y&&5l!Vy3}zAsy)_mql7rKcIZ4e1@@%nzn+<&L$Wq5LjswVfj@pt)%a^v
z{6^c>y+fu)z}5|4$e><N1o}~@BmENT>6DodHEY7?F^aD&)>j+xZOo}xx7W6|I91CJ
zdm|fq$4<TfrkpbVjOG_z@j<i-KSq{QmbWS>L=7LB71kQ1=^Yq2o6qd1<U?Q5)ZG)d
zw~i4&JXrNO{q+vg!&^021YYo3QrD|^aq=$o7mM@Z$du?Lq4@jB9<uCY`^ec&(zS75
zePFO;6|CrKHj6-G>7Db?@iq)kkG?w)qs}6!T9o`t#^z|JYh`hP@msvEqz13;GQsCZ
zqv071!-KP?_(6#19fl*UCGU#SPTt`u`07o4bGhQu^)lqX9CIcvNh?j#zDS;oT}f4*
zxxaTTmRV3tW>qmsHfi4pIP_nqVqIEY`rB8}4teKC+7&XV-qN##_xJ+BzH-s;on-8K
z>2wS~pI?+uCOdza*ren25#FFS88t{pe9)lsB{Bh*WnvFbXlrjS6wAfUUvd8!hkwzG
zcwcC?Vy3vHrQ?MqdJPjUpmCV>5~BLGvU<s}?e%AwXWqb=%~=Z6zA8#zC?Oep{yd5_
zNrlnTtF2AP$i!rsnRQ<ApXS{|5>8*0ztjK_yN1b}RIO*%efKF4U3tNKqo6;L-@Gaf
zWB(%DpMyaA$6b4sv3g|V(}r4gVxmHkx8xOc=IY?HlK^?gZJUl?=_^A?w-_>$n9(uH
zn@?7PgApyBbTz{ddMa_5lpBh+OPLgr(~GBBLqCRWv-!lZ5|m3)pOG-+ksrc*o^Y6{
ztsM(#rjshq)<vNdkH@dIDHeWdfD?Xts2nvaAU+AvPDo^$t2PdK?5p)I#>M)z*DNzK
zMu9jQUm=+8X?UOh`;aYqBOFIp__<Ej4&72|2`itAS7ACTmY{LDWhLM}A%pim0#+nT
zZQR&*s<nn~>o=+RKNPOcvgPdh?50tGa{Bkf0r2x=OH5YnZzs!f#(&eZ&|?r{A2yk7
zMTX=2KbM^-_VUc@65+@$_w-^4MgqnJ&<1#K*P#!+MlYNH_OhX!RV;`O5%}pQw;@a+
zN)WH3?LB1Mi;0b!;8#KOYX3u$CPG{P6ZlDXl`C22^ru`U(lQcLq^tl$Y`jW7Pu3(G
zL*+SUq63Lb<vp+dNINOiwmK|IzW)d+KB&WwZ@}BmjxFoRU*LJXf87R&!D$|irTACa
z{QO>mNYGP$XtdvIhAdeFT>1}>|0x8@4aiw1pw`0-KTad@8;3No9kH-_euft3ILL%7
z%Ta!LYkL+w&?{3TG}GnbSzp_!L1IVigH?`uxNgMi)_GmUIgYssE4-wC2U&-P@-Pg0
z-z(<t280%e=fEm^{s^a>#xg5{IvXcqXI0#AbzE^kB2D5&hmNd82cv_B(VvksYZ}PP
zxB*9{QIQKqqi+5YNeP5g9#Z`1-5yWdSZ;HPW0B!#f1Ls}Gxw<Ibnz~^J&hXV1n|vW
zP%tO9AG61iq@x_qo|e|3@O|m5XZRD3e-U_FrPDd-1T*-PjQ?^C!AVchF7b7v5^-yy
zHhjw4e@56hP45~w|4@7bbInMMyj`v=bHc^<n!>@DK(3mh_*xGd`NSz-Owg3nZFYJ~
zxmr<aj`DiO0yukmz+f73Y0jYb20*S_8<u7RV|L!>1&r7;W*0NtKarVzUOUndzg}X@
zUVuze&Hn7Ma&$q)wZQaS5vnlh-g9laW-Jcs*DqmhmNDNE48q31);c<3;-ESxz^=|>
zNqv9{xg)`}=y@)ZP=QM|skArG*1?6#r5(;~y^Zg?g-yWl)+9adRBWv5XxVq2JIKJ*
zXqn$jzANaCbgG>)=U2+z;(2?LelOmJE(JA;K6dV~6JV87r$xehNMTsNfKgl^c@5mj
z+ygUMxY2B2d+lSwJEVnLv=LZJ@7J%cs7afFuBI<Lc{P0UW$G<pYc;1%UQg26WmAmg
zD?y%zxn9|2#?rIQQJeaevQ<k>2ZsHm{@i4m!j4YM&O+bTkyi=GV;^8EA0=p5hOK@b
zGmYB}SvPZ4{UbG7{bxvKmd7qlN0a$t9)<SL;ZHAt1?}xDPhzKKHLr!M#8NAJr)R9k
zbpXG9hxxX9H1eNd>=K=d$~JdUuqkhSEVget5m0H7E*<Ce(2$x9>O-xfzVFz#&VZvG
z;5w(fLWj$#&Qjceysg6ZJz)2=v#Qxd`nHY|k)mAt3TH_<g!diuWYI-G*r(=K)Z0ON
zE4gF~WF@z1pPSm^1NGHJI{lpyCCmv3|G>#6Z6MiLmL#{5j#1@sY!gt7*H>kDOe#?>
z+~jZz8&d>Y1IJqhx(>MYf{>?1;G5zP_aV;wUzOJs7J8eB)zJiX(Sj^H71gk^+S~v$
zgNM?@?Kpb0%iECkdULIg5nIG{cVtHV48eY#soS)x-0b&h%r~i%ct&_jo-ux;(7Uy!
zeCTBZ^5HS7vkYS^H1UNUb|H;c;9&1rbaHL@3i^yte<{o3I@68uQ;!{lnSZ8`zVC{_
zJ6)^U{)F|UX(Rr<WJ3YyLpo+Iub^+}fT&8-3`vROH77F(K?*Wh6LrUnC4ywlqj^(z
zg-}@IG-pLZ7)fDo)7aa9$+TaO7LY50&j)>1IpZWNF$-aXrVzFvX6nK6R4~Q(4%4p-
zdWeK~J)${3j=XWIteg_a!cE#zLH0$&!07?7cbIC~=lT~st>H`wGEQbLV+8KY25p@J
zf`?bV7kFiY>_a9kSy%kJdE#*VRxqva><bR8!0mV?iygkWA8K1+t(r{;(V4PeOQf7a
zB;Fb}8@)|O7(?gz9^vJ|5dAoWUht+qR_jqEAUn2Bvget7y3gMN^g#y71#>S&&E&Gk
zsIkU3q!+ibU6P)qaS&Bi;bTKRH6u!~ryE-{e8<JuwJ<>WA;;z#v8iT%h@CA$Eh543
zHOS-32x~M&f1dWZg$hY1P@%oFZ)@1udW-y04}UOP_P1`NzE9yNJ*Fyd$E9<EP~W?c
z(dwZ)qP%y}`ok0GYuHUI8rn#G@xNMur(!~Wi?A_#*CdZbhGYGOHXkC261{9Sn!*Cs
zb(WIbI_;QlTkhNruH5&}{K>Ef;&tP$EMvctRyHB(J0IRsDP68$>Rd>{ED62`I@7dZ
zK5`n$CuX<nm{@j)1d$242++c<dVGKeThQ~zUuJcXo5b5;P2uLM00d#Ta0IL7BSjJW
zUswZEe&Iytle?-MT*q!$6X(JQNyv=%5&+hN8c_S@ctpY?Cs6ziAre*5@&;1<^#dIC
zn#<T!s@CQVhX^|(!8?SyT?i-7Q<yzh6u9uFeG-|5Y<Z?AS#u(UnyK2wEY<y78>~u%
zJFLhfnVRq9dFMc(m&P5sXb$qzCTJ9VIK&VRZ(~9<er3U?^#8tnB(n+r+gBwjK!_9D
zvYajhA$_X`zyI%W`vOQ8Uqz&u@D|Tv#`pJrPCkv9vS|r1s*td3v4)CxCBX9Z%Lh`k
zJ(kdQT4TxgHS1!1=?XiH_*A}vj?QeB2skj@Rn`5doOnmvXo!gDQ5|)#kU2VaQcv2*
z6_Q+rlAF-_CA$(by?|<3y<!P^F`l3R-ZpA|O$TxV(Y7hN^nF^M;^*)c(gvi~ZDmX5
zutu>uKVQ*D2#+Gs4QkOsUv-gE|IF(K$s|4z^?N0s*7iS|DNH<9e*!aFRXWi}hR(jP
zf)#H5vvFX0n_YnkY1k_l2LuXJhZ2`jt=1;hV6B$3lG!>Pd%C%@UU7VZyqhesYq9Or
zl+0eIv|G2{mg4>5-PpaGancv8O8Vlj5Adb$NeA3Nk?{q9qfDc3Z8Id-xLn*&0AD(d
z^{1u^im0}j%MDi=l#{Fwjo#S*B@*~<UbK^|kkb4FJ8YkGxI>VF8Ah^B4Q2WI`PMH@
zKgO|ZcUszAuJ2=ibQO?WObXN#*=c?*#LPS4PL?YM5_$BnZ(K;v+P`yd%?2FJA6!1a
zSs+N~C)@Pp!7XKa`nQ``Cg9jH(*|8hY~DZX#I=OZ-g)_rv!OK?yexGEjz+rEAcdg^
z$Z&>7dVv>?vxDY5i8X#Tq7Sy&(q{|f^-K6~Z;$n8HaI=$Ap?U+{|^95K(xPD^Nddn
z5fV2lutqZ<a#Ro4!n>`7Z(T>6p1zE#{JvL|@)tqp)+k!6cOM3_FZdZ=!IRtEa)#eL
zYP#`ixHY{a_EJrG&COVfuz4+>Q=3(j65}M{w#yF<N4Nzb0#HE+Ae+HmL;}K(J~cV1
zweo8I$!L3aMw90}&vsND8s{wKmc6!IePz;3w=<Mo8<kdYy~ux^<;)3?-Pcf5%x&;_
zpA70~AWoSxaVy?5DJ+&?z@|1uJ=K@<LmKh;Axf1Y@#Ii(NTam`M3?cenWaJ^$&{f0
zB5fgyyfrEkZIQ4Sifoab?)$(V0;CT=Y?WKYdPS-E6bO*sBHpeOTR<qO`9*T#`;Hn&
z18l99UUm7uxufxSbCt{2ZAJU|<9@<>(N^Mne!r3av=oqmxHbm<r>len;h}LR4JSxI
zhzB}?rhxoy%BM#)0K1rz^!U@)v(F!v9}usV>HIEh;p}t`Xuc4XpFDU|058-4ps0r8
zTjGUU|A*Um*PF$?6WL#!R|lG3XXV$9dvrw*Vz1r^Ov&oOMqJMn4YVp9VfPQHu&+wg
zr=p+D$n=gr{0KQF1VIPPjtY$%VZ4JEJHN@U-rUo?HgJ_Pl}UWeD9BiNc#aMtFk$!S
zox0dJn|i_^*HFdzI}UN9I(;3Mvr|20raYkF1`^HV8~(%PSP+kd1djunn)sqk!1fXv
zfDokoKrJTCbub(FtGVC~xb4LmspRa2D)rL=(eLW+C{w#+;^u5_ud9i<8)Y&Fprj<f
z%|XrPKu8Ihx63896IR=$blZX6K4pzh*G2^nZ04PhkUM`v6J_uq=@-UoXNLx5YkMa0
zZ8171(*PYSTc03AzY?csFyAFu$HmlJ$JW*(2sl^3<qke*uYi9vtv(vR^Y^1Bq0gDj
zgoKbxz*OBaW^RZZ+Y*ee#bRz~iHwbHii~JjmWrrt3XWk1B&EA~CXoUHYS`0lDh0Ss
zF{!hYg!X1IywPYeji3u7s`Qj^z{!)AP8Bx-xb6eI?~YW}xDv`+p(-&mf2nCs_DXn;
zor_D1X{sDt8U87KxjjYt<92Ca|L(l|oX)4Y<)0s)C;H~V#6#Go)hFZQD^Hq)zQI|s
z1k5=fpdI2)Eyqg-8k$(;nTE&?%q^9YV)Mhj6#(_e<tZL#36t^dL*bP1)ujgfS2ZEz
z955!Se#ZCt)wl`|xy8=fHeXuC3jF^uG&!MB2S>WEkE3K%E0ldMS3E()_u(sFE-lCb
zd>K@hOor-}`ugg3n^X$dkOLd@`zANn)}G#)uf(Ic*Aq*Ci?y`Dx2Wj()WN&`%l`b-
z1FJgT_b%9_r+wqB!NBmEm|%2$AFgWco%M6>TG>5R)U_OXTEm1p>7{VK5+-;k;dyTS
zu50G~Uk_AEp`Z}6y}P+?@q1Qf&+pcvLpS(6n&u7nYv#MhAVF)P00tJnL0|6<e=(i;
zWjMq7`5S}s!IhZa7dDV0g5)o+*u?h=2MzL`zsay3{xY2z@#58P=;F75PylN|knXYh
z8otH)9!>s@qC>x1dn&(YU0IYX0;w`XN)s`EUg320gOhc_pJ`Elan&Uw@93wccTeUl
zoOW~@Ra)7Cbl5sBcu^~aVO4{kN(UQZjW4rsuf;C;bEUi79~SHz01_MucK-<?eS>-h
z*rZ^eVxRNtw7Fs9V2yWTDo<gl@XD~n(0R|5MxO8f#yg*)>)kmjjfQAVr#V5MafN36
zew1p>KdS?VjVcQ_>D$2A4`!Ez$7{meSk&UVAG?)N<=lXofIW7<JZA6;n7#)aae%MX
z*RPZVg&BmT{b^9)a_C<D!Jp#nz^jJ_K9_-bI7>}K?dV0$x^43{#i^pRFXtM{bv@Ow
z>!ZcP*szvZVnEwaSTz}l-J=mK@m_bDcEVWN2?5rjj<F;?^`ymi1Uksm*C!N?@Cowu
z@eT#nN}mGTE0_KH$~`501AIKu0l?_o(i&y$+T>(q?(bwoP#7U0BuqJ?QfX~f=|1<j
zh*eZJZdqEUJiB&h_)o(!A|Na_)<+Z-GAh{{y({>zuKu}WAqu(o9}qA;WM>aKFb^*Y
z^H<u&@BH1CFGK`l6A~^b8nckC8Jk}o>k({<GKCwSayHLZ$K`Wk4c!kr>$)8_Fm!YV
z)=r}%I?&VCCkXM1HG|^W?kpivi!*2m)rA3s-+A_RmK8ywvO7YvA<7@&KA}E7z7LNC
z`BdD1^Nq5Tgg>&z>&2KX_uFKgmTDYu^eg^mni@SxAHR(y3Di@8fnP5-Nv!ls^4Iq^
z_rdOtA%AH<4MUSeU0>Onfx&aJA<1ZGIk0pTn^9tgTjs_3Kc6s>DMx)71z2+zSPb{L
zzB@uIN!^!Pgw=OaUqq_w>bu*6eM+0mM;B>O^uc)n$o7Z}H?QOx`)ihAS^!yM4iSfd
zk1ln63HxtEI5DojlKSc=O_2jz=Y;A_E-dJe)rYRbMk)?KhbC1Wc}lnPh-6}VsvN;N
z09KFw!7VLfaZCMv)We$CUn5U-6lj$V7GQ)RR_)X@hQ=8e&cO~Ex5OzV0BN6}3tkT^
zAGUQs2YdSX20J3q0p2Jd48soT8|34O4npv}Jw;wL3!@A=I(*IrRRm=h_Ov?*VF^BL
zqQMuVWBf;E-?1iwMCIbyl?wsZ?pUui@0azJf~Izv__OHOpaNTz#0Jh);Wd)H69R9!
zs<Pnr*mmA8l9KY6Yv=a&o)&j1|9v+wQYhtgK)ik_JUL{)^or$`a0TVb@qa%YcNNj|
z78c2L+7g+vK&MfbmMAp(A|-EW5n~r_Y#rr6Af;g7k*3yBZYk#oz(~@Kw<*+Lg^dbE
zufi1GZ`(H9-uGL4WMh48HJ+0eGDV&zht6EhaE@k9ofwy#ng^!X7Lblv)4j&W$IUKy
zO`RAAw{swQVC;(tb?}k>>OM$sciSFVQ?D#UlRYphjEC&R9c#JsHZ$&S3N^b+5J=4)
zcO#X^#{qH(?CLO?;FWRr%pD=W@*?VLGAr<^Nqm-cB7|JL25Fz+Nu`v`GD&$o-$^&M
z&mAnZwnUxsp$FH-D?JM8`h~l2Ba2zs{%>5XCPV$Amw6~~I#ulK8k*`(^-7I%Wv2qh
ztw2{oswdSY730c`W0u{QO6}qAZ!dmDfl6+UBh{MuL>F4Rgi7Km0+Y)C`2ffO3K^i6
zL5q<bZSZlwQa*SJdiV5B8r5KdmD(d}-g)j6s>Vc`Xh|2w6z<s9T+Tk8r1fS?L4V>1
zdFJk_l{dGK`DOnRm0_HFi0NEQJ?!CWVYbKFG%t<W4e$*>=5LzP{$5I}GQlbRl6#nW
zQ;U>a$pn^V{<?;&?;)x2NBhnZxpC3=3gE>d1~(2!{_IPC1paKeZtPd+!CZKPeYA;-
zV_BsX*`kLM1~j&#4UA#_#z}?z4nAn`H-2wWGjCuFYR-MPAm=;g71ZHAp(t;(M*A4{
z4!(hccY?X_p5~bd0E}}}0<J(o6JZT9$_~*Kd}IcS1pw9e(f-CT17nxg3UoO(DQqu=
zfjGpp0#5zD?2UcbDJ_s$f`A;P)PAbu_0-cpMg<isndekCfpiKYQ?z*TvK*0BT)M~K
zHlm^yclzmHOI5wdCaHXKKs_G3j3-qO-Ro~~a~ct$QMU;-i7dkoSP_;ruU7ia*gP!9
z={|WC&oe8DFn3@=;b&uyIaaqdI7)Qev_-z}%|%Wl0f|F^%#y+0Fx(&zq}dQo4=7jg
zv){K(-y*U|osDT;-eiUcS~;(o+);(6e9?AxRywu+)+HdG5tD8G{Nav%fwr{FHcl?7
zt@6j+pGK>l*@iyAIk7Y1YAphfc*@@&QfXB}hUu9_pq0K{Ho2_e4`t;>2EdOwE7F9^
zG5g&ju3{qZ)dM|W>K&b3cC0~XeQl|ONYes}>Ol6<*!;_}9>L})bGYFtH}m-ZaCw~A
zQ(>kdrgnyoPVdyUVSS*Z9#QaszBCtTl=o)fdtOn6SlCy=*C!NZg}nGSYHt}-iubL#
z;1}Q$qT_1nqho939SZN4jYV+^g97?EQjZ!uP0ploaL*CQxsrMAJP7!;NJiT0;eQFK
zHvCbUSYgp38r5}r)MDnnYgF=McHaB8imZ>jE-YaAmfMr#+laEVDO_e@Yjs;bv#z-|
zlW|7ENU6{$0+fS9HX>J5v#9DBKTf@5#z{x$?@?oS{Z6&TReD53_=RZz@Kykj=Nj_w
zGUOV?>wAu0c)#P`mo@0s>Lg-ZzUNA58cmMit2DsQIQ;F-`I<P)Cu_OwomolDeEA8q
zygdK$bQ0(12<>h8t-0w5>WFV_ITqG6@B>~bn6YfQAw4>B*C|l?^1VI8i&s*QH`WD+
z+P20+!#*uHsM)N4GR~*(x?2dn*ApcGjrR*gHg4RmRc78rW<fX$>6z&ZsVZHT%jy?v
z{&+V0!)f}XDwBP&3Q;XRfs+}Lb6SR2p*rinbrpt<0U@)70@(s5d3q_lrgGam(n0uV
zqw`(8#JirC9~msTPp|+95Xb>o*`pfIFc<DCJy^PbAc*x$<1U7EA9_=8e_zmrf1hjI
zmz)#`BnOu@?n@5M-Itt@{Ag3LpkKi%X3|S&8p~|i|MJRSap&hZ0wQK?diR*kpCdiy
za4TN@mvLEknWjN6VHVR^3;JMX4{1CLES%l*U}^S1Kr_rC%))P0DX{S0Ia+p>mYsFq
zk>}4zeulq7S+Wz=6jv8C(aZ#wrMK$K#C?w+fAdSY^OJ@-X^;EL#7U+g3utC7|8Jw}
zVtUPzT^Z<?l!Lu04_BHRWeV`+V;Ggaks#%dr9NU_|A^vvX@s&YUFZ3uqw-?k*yqDr
zZPZhvh8hT@qSkWv@24ad1DRzg$YJ~QbP?=zX@ugrk^UdN5+CJ{L3{UMRLaK$c;=|m
zY<aly|FAmu@2%xUqy|FNkb0_(atd~+IXU}cN2TWvaC!y~vL03SbyY5q^`KnzXx%1c
zFg%=N0N5#TPG^O~TZ$lDtM5!XJ20b~*DF`5DBV!AE#KX@ZZKho1v6jF>2u&Z{N87x
z1`&{@sk@c3G8ekL#f<Y3ck7Zqf4d++a^VfMvAS#Yr7Ptees^~$G#(0~IZ*aZx!Mbj
z8i9!t*PNWP(RBl}Ku5)1%8$iXik47G!M@Fu+<0?mXLCajQ09UmP8iVN0AybHwj2AP
zA0|Jjw9@J-tw3U2Vw(HUn_LI8=QL*hXkhl&>OUGJ;r^Gvfw63LUF|$Bkto%_HC3!}
zpnksfE9>e@@BKwy%dWIRThy|wvBB$(WB*iC{pqBBeV{M#OGj>4T78&bAB_|Dw3ABV
z8$}px!rKJ8kQ6yv>G^J{5$bnlE@<}z+0JZhO-sS8UG>ygVL~_EmMwb>*HGG^#)8oo
z^YRwyw7jK73cchBEB#ppowB%;NBwRW9??Zf#Mtf|8P0=nE(K`#07DW>CqF97$8<n+
zu`qhzciK{(9Tq1Z8CtKa@~S$)Vxe6K6#n<Qx*Gu?{$5Fk=io?6^aK;?J#(zjDdqhY
zF#tm(r4amnXvC;EZR=(m@t_4ZmxQ+_!}DRzhnBrHO7@$3qWxTa4i~GbP7zd`jO&gK
z5J=&Vrt>&06V!l5S(*L^`e=u=r<tB}tNkF@bzR^KK=2s{0n%}-NlMC*(~1ki<*5B`
z1?-fQgM|GvEE#?Ks&D>wgZ-A7TgL8yj&Bm&F^(a=m(&x=#+}Q)F{(UX7{r&D&~x}u
z`eeiv!?}~{P4$1*aN2*EmOp-r*xRa7r@@(BSueQm=U)<n&0#Es7ivGXWw&2^SJ%|@
z6<)A(QR~!ywKb51{t?~4CF))m8f(Zs;sUVrX^`8(W<LcBg*W$^OvI4tZT>17niqeL
zLwNba5q<$KBB5f(>yd$m_k!W3(LD6@;c-r><o8d#{i^*dA5jYas6%lkX`|)ugin<s
z*wuFJ9_P=F@ko5z@R9z{{UftrUQCTlo^*qJB><r=Y1|`G$ZWa?HO*%ha&`wXY(eb{
z6$r{XVDUhK+-J6p{TV5c&LG8s(dW35yOLw)17A5myKH`FrL^hiY2iETw7~`K$IfMb
zU%2Hg(ltV)cbiWEeFz8u4E8&el6r!32S_V{RR_<_%SizCc1g{JzpJFr{l1a|;3~sP
zk#k2>IX!gYA<2H>zoFU-mlW~bqLN41bDts)gXcaCKuza9Lkh|-c@}CUV)bm#zaF9V
zB_CbOB_9j+ew>uD^$Ai*T(KA2M_OlNCiKvNr`M(H^>{E#ha{RMWe}hqUxWJH@QXKI
zSPRLf?Krp0Ds{VRA4POX%9d{G|Ld8LMb>yb6rBq*DFR?kA(Rw92(&=yL!*jo8MO7@
ze7$3d(8>Yi3g{2&kVG&q`2iMPWaK}?E*nRb&sdLol;p3D+5x7oiH<6c6Z@3@-TERw
z(crm~5<nhA1dU_;;A||xHLdMhU(?#cO08&aTK6M^Ks?$RaItR7%f3JdDWXGCng!Mi
zFm-L(OMw_DQd!>O%-bOOR_(bkgYQ;cqfEe(Y6Re|NNc(@rm6w3NneuOeBrhWp_})~
zDFC2;bo;t0zU9fqfx0Uj2lsH6k0%Zdp~6x3c0q?Fi6inUw1-8xm$6?h$pZkS;LFY8
z#XWrzBrd(caF`5Nzd<DznB*!UEGcOK(m3|Bx1KTs7AOgTKF2gCN=gv*-XqUh8Ml!S
zr+ViDUZQ&yWeNxP^h$aO9ct)4U2?OCLo2JgX86dZL+Ca1W|%r8rC3sJ0R8bpqpGd~
zYqNDTaddDoXwo0#O_D((=JW86KD6y0R%S;NyheO?ta0?Mw~m=5H9m12eqXf!=$}jI
z{u}&Ni5g(~TA(G>d9A2gC3cuA5Sybd+M1&+^)^RaQZ+}{DdMGz@KNHbHzS?vI_xK>
z1m;CHzWcC3T|zW^=XFGZB4VjB9k9S?fM;Ad*rot9u~p^t9G{61+X={|Sd(c9q!=>s
zT@%P!pnU}BF$geqQ%i+bO_)HLzANMKVWpp`%O`cL&-}hU(sjY5G_aHoEM-8Q(&Z5M
zjR&^l(HFmLBTObbK;i!2Ifq%0cM_Ba^UMQ`E_E}&@2V;QeMzDDU#dn@uYB9K+N%$&
zs+%0{RbyUmai7`|=%}jVpGyD$j~&xUfoDppDbvOqy2y=i<(jMB49(R$=y*w#qkniO
z<#X#JgdQ8!;5^WqDW|<sn75J$K@K(KQE;i`b|Fw!4}r18&vuOGfsb>=%~c0TsY8-k
zZ$`tpl9C7cgj1z68EXVHp6P`pM#-Qq^8G%Rls<s|_@x&JhYaR$5GruuQOLXXDJxdm
zbLz)j`8Y&nd;*fnshj!UQ*dFW?`aQYKE38HW!Ij8F!Jwl_UtDT&vn=peeZjUNjy;w
zQ4W9~DbF7$Hh}FSD-|434uJd50Nyb#K>+?9)x+fPkZy3@-;fBFEDlHkx?ahS2l>Kn
zrw1I8tN>b4gfx!j+6!L$py?3t_qi!MZBJu%tohUntV;r*i_f`&`pOXH5pqj7l-B$J
zEzp@mqssPW(AFK1dPhYAx%$ARf5YD3!rXgkFqeZtmhYo^8d4XE4!dF;Q4WHmM^OO&
zy2OSuzJ62-preZU#6BgoTVLcS8q|{Fx>i)|sMy0<fBE@)PZ0o?=$;l$Huex3bM={l
zylavIS2)k%wfSG#5zNod&k3Oc_8|@EAhJ3n;e4K9aB%9{v=>?o6dCt@uV(j}Z!FYJ
z^Si#QLjWu(ZUEj=51@c!iVYyfGjZ?(FUxjRgZeX1_1BZ&Roy2?76<An(qI)_<ZS4z
zy0^`>Vaef$d<@)sMcIRjYF$YVj_(wFW*dOS8M>E+<L#c5$)I+ZVES<;K6s`;A-sEz
z_SWUwz-**(e0;YTZtnp*cNn7ZYRa68RFd%?XN5~3kI#_{;JK1~2-I6g|7DqT>T#ED
zRNjuywO3N;P=o8mk{g3_ZGG8(`k#_T3pBXN#Y>#syy^R7F!3GYtc?4f-Uaga$ab9)
z@nJ4a?GIkNiEIcAjllS$?`->rU9;JPqY*!>U`PDDw@W%uDmp~sZQwHar=u9a%9}R9
z(2?S$kz*yL%jOYW5uZUIns^;eai~qaZcXuIpbMv->4g~NZ5g+Guju;kewe((hQ9<f
za1&kS@dL!gRM^4nOjaYVj`*V~L$-Laxan^y%(d>UZBHvFnyag>Bd#1m0XR{T1E?QL
zZ5sGajAxAF)r*YZ_LXy%dgLhG#IXW7v;Ld<0xc;@KBBN7HXhlj&-{VCl`7Uea^Z7y
z3j75NPyr6%#{n$4+yMP?9d%hw-%@YGvF>;qOTM3=T>FEXBR6j%BLd7zDgbpM=aZhp
zmlXr5c~r3?u<{*0FJ@dF?p3k?=su-eM-`L)2^09=C03NNq;vqxPL_{IQ%ARA2FZJ4
z_h0-U&GYU}r<NNRCTc4!gmJvP|Nka+pnW9j&BSUiWpt>4(~>&a<yh>#`v)qM8(F{Q
zOHd!`1Lf!d7#*V6u^gFm2Z~#XYb7<|MTdSs+o)>`%inqda4>4S%+%X+_Vty0_jpi^
z4?n(zSa-Ug@4Qbv`eSr9XS&;Ug~=h)jOYCaz}(OL7<-x)v=wNsGjP#MUibISkrn~o
zbO8U^<Z<^0vIWVWY)Eo%7r;G~O7E=q(%&xwqAjCuwoKM%T@;4d-(|DA$d<w1EA?tU
zi~4Q5)_{Bm*mCI)s{Z~OYFL2nYp-2;eWF}ePUj~dg|q$gJ^hiNu9Y9(`JubtC@c59
zfz>}gp#0jyUvtJoUQJGZ@q?c{`=i${eesP=qx{JM-}`xerONOAJNs7!09MEVaM#~m
z_76Y-P6CDkzy@@Uy^gz6;dzcQq06|N2Qnq*BQ$()+e|=~C))10XJA<nn?2{w%+Hi{
zYr;~G=V6%Zp2!d(N0p#xgj9fNd?BFAT#2R>qX=UW3=KbInOYYjRhBc6NHR9<ZGeYt
z%pR+i7b;jEPTiHEStA7_$4@8n*<0tVHSJ75<V70_Jgp3}eilF}&oFlkS;Bix+?nFG
zO)p(Pd?FnKgoeFcj5H%I*S|H<)ZO(R`|&zbRfreE_-8gAKe7kVD2rOEaTIMjrMa}0
zq;b2T_~`=+40ZIV=<E-x8%5KjX4!jbJT95pdjD1d>IY9VBb*mN%v}`YNBdLKDs$&<
zpE0HEleL!W(AcoDn69-V<N4+&g+|<gP?vD3T&x-{Usq99X3gOEaRBvV$-)T5zPL_#
z)0BD)Msoa^LmaOhoHsDr_wteg)DdGH-Q$d0U%ZFR*@e&}n3uE82+bHUt(yUR&YhVr
z$0*fH{le`cM3xa!2_pyFbu-45Rg#WiC5CS&i&+e@g!ytVkhlT>L~WY9taOMO&ej-`
zy8-6>nl}>1i}Q3laORE^%%cj+Ip#VT<b1LqJyTAuskK}oU>A{N_@nYEV^8x4Z!VsM
zl9)5@X;%W@j=1a6Dvq_+)18tkkY)I6=96QfYR!K%*Y4hb(iNf{G&0a)<vD<oW+lAb
zlG@E+z|f&Opo*|DKodSj%K&Aj6@_6AGeRmrl?MDEpS+eD+q^o25|(;AAJ`A%Ox74-
z9>vBj9JtT1nJ&>RsEanUSbXkv9Mv-M5gc~PXG^O5Ss(U8XKz5)lF1Z&d>aLFACSi#
zVb+F<`nd>W3>{Xlm~Jr1ze(T69m*HwF=P#@j13hs_v%y_Q@1kPmk<Z*Er}TzdQ2E~
z@zaA_*|pKm1VmmV5UPBt)noA^*t3RldJSjjHgVjUwhO{O2sAE^8+W44&@Pj6OXXn<
zC~mi7(~M34!Z|)tfGH+vqB1HSsyxJtB~NjF+&OeiuC!wrb4ugupr4p)9<S5&o8xHZ
z{G@=!A?)o@9`Y#TReVG%SZyDOyp_;HQwEVCH{5$`cfuNoxW$rB);`K+5Fj!_u}#Qe
zyRC#4Zm84stF@D>?ED#D`6w>Go*A|KHQP4S7}-5OiWr>}``!MZAvK9a^v9$=1KX*e
zofv@WP|mf-U?glJZHg-6F3zqR_t!@Vz#Op;*2fvSzIY|GJ3S1&PMVRI2&)hpAu|Js
zcKqxbra}yN>{t#G3<U&U*oJc4E)-ctNR2;ru-(R8y58wACEdm7PC!G<(Cw%c>-I`p
zA>8wBm?^-*`8mzUhATo7k$2n+&7s@p%67&SWrZAKhO>1BhPg&~r_kIAN5pyh%Pn-)
z*{{dKsn*{~?FPfA`O*mNkJR0$OVw0LS#V2z9jgGO*Bv?-htIjG5z3kcp_JJ&TM&DR
z^S;yqTLyH{_1mj^(=xO*hNZ{nR2*4GIBy=u1+-2Ya!u6-u+{x2g|R|}&<Lgc(RFFp
zTJ5!xAMbk3$uI^*ER#^m3@~j^i-UlcD>V~hh?o&l14Jj~6mN1)hV(0C0A+Rzh1b0E
zV>~n-9+^&cAw(CC{bmGyu{iG>D|I!Xv+vY%xeRCj_BqR9Je!+1_k!5}F~j)&256Pv
z2e<7xb;??m<zs-Zv#9orP={YYQR)(4csTI?H9n7b@FjjlKM=pC5(&DG){%n_P%nLh
z{DPviMAAxDX}|OV`;z^PPWG;Ch#$FdWFmeI8^LaGRP4Cto~Q0rH@X|&c7N_Z<NNJ+
zUEuWSjZfK{Ry94>^oQEs+L%A%FP?p*?tkl2C+nN<X<pU*O!J=Rx9dNzPoDhsc_gy%
z{`>D=fB*CMA8hDrIQjhf03hyrqA1psP;xiCOdqGtq#`G?fcPtsX~Oh(rMjBrh&(U%
z70Q^&tfDjMCbd<a&+BEk<>zxg-_??3!17^|m`Y|?AJ=zusYuxxY+LqB0TFN>*$lQ7
zx8Wqh50K4tk!6-FMdRVxxiNP->r<KS>+($`CHrzNBblh3e$k)X=q){?z$-UF?^S;P
z*pWZ_{&@Vy3r+moKeV#7Dz$pG1X|CviSv$WpVAJ}PS?Jq-KjmTy`+Pie@q9V6Rtzk
z;phzNJk$B8t8}N4u9NPj9#gMTZ}fPFzPmn7KUcp_|EB(;{u=}Fy9^AR4gNROG_*H7
zW0+=GYS?W!X*g&2&xmhy(%9O>#)N26Y|?2mZgSt`lc~bJdZrC#`evzSAIyi%2h8Wq
zpIhKnM=b0uf-KT4N-R1prYz<x{#YKiJZTwXnQ2*R$+LWH`N9g{qG@%?D$MG=wSx6Y
z>mch<>t*ZDHV_*l8#kL6n_D(>Hg9dsY;W2=vD;;L-)_<FuRYA(-u{ezzx{vk{ct0=
z7d!!e9^Q0P<)ryZ!Kt}ZKM@BI<_HvmfVhBYLrfs%5Py;CNE@UtG6h+PY(m~a3Xwk?
zR2)t?xI4r;P@RrC**gU~A9S{Kk#^B=fxBQ%%ey{woparAlXQo<*|=fckGdm0)IBRb
z`#l#tH@)_HpYZbV!h2D?n!QOrp*}f2Y@dFgMW1gd2+9QIjY>gXM0KGAC=puT{{-3<
z9fxM2JJAo&AARro9rx?>H}UuMj}0IP)CSxPm=E|ExH~{M&@nJFa3%2jnKzgWOev-t
zGlf~h{0veFG74e@ae_vIR)c;A!-8#t?+3pPkqSK)f(*fikVDo({twLvEe_KQa|(+L
zBZV!7SA=(m^TS_-@01rtm_;N-T!@T|ERJlAyc@Y3xrJ518eu)LBT>~+H=+bl8_{t%
zM|=^!0Y8ji#D9s|E!2uZ#stS?#gxQi;w<8g<Gtcz<MZR|6P_e|O5B~Iljxinok&is
zOT3x5nD`}WPpV$h=_Gs-J*hG2ZjvzRC*dH$ju1>B5vmBiXLFL-$$iO>h-#^b)Zx^X
z)SqdpY1V0H(nx9Sw86BMv>)l>OnfFa^GfDW=CjPNS$hhOXE|j>WRbHSvu8+M=L&OR
zIhHy8ImtN}a$0i6a#nK0xrAIM*_7-}jwk1nYsr1&$7E67?($=Kwt4<}sd=S&J$VoF
zUQ<9t6UCkqOv$2DQ~D`SsIrwusrJ+wDv$b*`kJ~;Q=ysCJZM$4UfP5FK>88-1bv16
zgRzfsg5kozGZ+jG;{#KcNjiV>eDL|q^FIsJ3M>my1-A;@S+y6kiWV+<6dx}B?^0Qb
zO^K+~tQ=YXtpZo^xpKHl`|_E~gVoLK`kM2#HMO5Oc2||J_SM7d0~@Rx0vplSWUgs8
zL7SLO9ZfHq)0!_e_cwoSQEQoOCARjr*|bHq-D%&|-rEt}akW#rv$(Un^KBQhtG(-e
zw?}s=SCTt^-R(N|dS;JAuXHc0_XBS??-B0}Z~Mlf8>W2@{m1)V`u`eex*2uz(Jk9s
zZG$R<H-_Se{<)ogdu&)~xNgK_<m|}k$jdti?>xR+HijG5I=66-G+}mOW72=}*3|0s
zz3FGuUuUk*KId2R-`#)s!1j{XCH%u{0^Fm$k5G?_AN4-2o~xM~n_HQeo}YfAeB<rH
z#v*y?;GF|^&F(&Yp0<qn6Z67r#c^dvSpL`BRkOLVSMjfn7pK<c)<@qsya{<jdUN}2
z!@KhviSNTc-1`{tkKCuEPmexV^a26+89M-e20#W4fzUpI1UR5r4Fn4SzyyN{4H@Mi
z@vsWM!Xx>mRtXXrU{{$zje<h`gY_?0)p!gfe!MfiWCn&K1nnfz;YKLNYEUyE5SYjc
z9)FNWXjs^XuY<!?$R;ybSJ1`D6>Xb*(MYFavN6CwEN~A3Jl{(LibybiR0$=(?v{)c
z0mx|?gN^u5L6{A>2LcN^K)~u6-V9|y9GrqeEt((H*b*pyM6QF^cT)|ZsoeU_SE7ww
zhz4I8rUxiVbiRCY+kPh&VTj^QHVhBqONl2c<Z(3eWW|45O3`Y_(1Z79C@ad#Qww*O
zt9RNVc@@6wGZr+6L^SOq!ZY$iM0QwXzMjjbXp?A{FCn%P9~#esR(7zOG?6?6J8nmk
z5>l>$i{Ap2)Dv3zu^0Rdh8dZ(FcW(0Vhl>OS2&y%QADNU#3}MEf`Suh_Kf~OODY&(
z@DMbbT7l0Z;4rISJq3AO1CZc3VRCjddB*XsaRT7x7U!TrbWFE(#_?6-B7n9Q<4{+8
z(}bA;$0nfI^HX!uN6qnbe1-&ze6Xe(ZFpPVD8&`?9Y0hZccTKn4l|^YaRJ(=VSfAw
zd=?*y*B}aiE|S*%gPp@skC8~i%zPUnlW$uPlsKPGgO0!$frhLxzuA#U9sn!v-1lAz
z(N8+42SF1%bt6DE=o$pLCv4X%C9PQWSYZAN*b}@vklsh!g>$hKaVnmgVgWKC=>7>5
zGv2EUeNb7mds8l?nEbarCWnnkYb&&&!D3gIY5|nLSusV34akQY*??9n8E^_ocyhzx
z{2(X0Y9&Y^2Ok&w0Lb0M!t#+8O^jjAr-jgvNX@fi#ZGkgBfL<)EoE#?<s1s-$A~x8
zNwjo2)j)09ErKQu8Guiuubt0T=nnl4IRaM*UJ)wM5s#~ttLiCUx*$BKusxzqM?8r^
ztVc688dvy@?cM&|<6oX7h=ob7|FL&l-nX@3wy|=UeqYpo-mG&NEz%p1O{=aU$nfU#
z87UW!OQ_V@qINOd_Fk{=9fkT_=9R<Lf&!KzT@FM(VYsY<x@;4z&s)|?P=PAj#tS;M
zk#+|fe<l9kLMz$|kzVv^;!4~80<q$hY1K{dK<yFYDH1X(gS5HRAcNtRgToX*f%-~j
z+Yf@!jk3%Ec!@O~T<i(1X}wz|HM84%s8fhEzFA(Xr71-j&X=1KCGqQHR^1$xt<@RH
zJ4?h#uhrw{DQ=n&_PT08t3vB(0Z{`pa3RbaqavQwPzxfVn&Hl2RRB{@N8wFrXw=I!
zrO_O~#89S5jR3NfA%LN6Br0qStC4$c){j%qJLiK=bUFZo9q(0s6Ht<<fYp34jTJ%O
z&8(szL%SXTXL6n;Bz6=0VCuCx!5`IHL=vJGFXBpEgq=B>lSp;xlBx)*WoLsC(-7<A
z^E=dRxF?9zs8!~5CcW|-;~O2DNT+IQ-xfpb>9VzrALGW0bMt=0Nii+&|1*lS1s3@)
zm`73W!s41adO%=j?n@9kX$vNh$Qsut>Sr;=-scIg5GvBs4hk$jKwHVMXeR|MpQFdf
zPElBGTL?oz!zA;S-RN#Nd(7J130TS#Jc_E{2=aeXKycCbNJAY5-#jbgq*-Xc<-KT1
z3=!_iASjn<may325&x<jLh$(}ilMlWpXWJ`Sp;ks7G_%O$_HdkI&l=TX?=Srz}FD5
zTXt0AViDWVae9DmqeRiZv~7G1P?Jd~;~YoR!lqU(G?Y)=p|a{}ECeh39=D<s>(OB^
zX4`IEojO#ox^!(cjSq$wq$dxqu9a`Uy;&=pJ|tMGAh)IJ>VLislyum{?RF{<z^3kx
zfT5du6g2aE{gp$V>|S=rD`O^{zBi?j4F=Pp|FkvQv6Uy}qa3@zz+8}On<F#-$~3D{
z3hgS@;%>W4zGg9>QX@B^05^eK(K?Vv_$+#8S_VZnWFKCg$1N`UC&q`uUTHRWZ6@rM
z#}vHK;AQ-8uUgDrxTfKf1vhDM!;dh@(%4<G{*lrZNm}UX*%@)hKCEijG2;%}oDdI8
z?=}k^w9@nnEkb1GrQL?e*92K~0$q+i_r?=#(0Pr%^V9_vTaA&6$4BWkY~KCfvEFpR
zbE$-Cc=Ndi>#i+$yb?)hgC!O`6aiZ$14F5#wzf+XAc87l`fF;;FL4dJd=NjuS8%Pf
zhi^fT{&r`iO#;qO;rQ;gp5ELn$;{RLfNXcK=nbZBB#Uni{mYewTlKtSGZ=<wM+GDK
z^W$JhM-6Vs#S1XT_7FN=d_th`s8^X>slV@1@3IGlU=P2zTUG^@A|wULo*xEnmVr~T
zWic$j>sI!6izI;-q$YODpOiFx4N#sXRx+~8ugxGFv_$J05+J6@s1}n~DoYt$s*J>h
zt;EKBj?e5>GS1mVI{9-eEX~p4X96c(Anmx*=!;=o=+0~sC|L~t1AhZMxo-CW7NO19
zN{?;9!@`EEAvUT0ZgS@U(_5I@TKis50P@!xg-{a>*$0@{>&mx?peu)f{r@ETMsoy$
zwjlf(3n4P<>}i1l&w*#)pc@;o<1VzeR_+pN_JS<D?lQ|y{L4Wr+bhIc5##veHi2qr
zE={ywE>_3eMCm&49$wu+aI>(%bLc}CHljTOO^0H(nA_fZ#mYDeATl&_0Q<-A0bDEc
ztc;qj{=c;}Wypp)_Ky#%=IhQ)@b~>X7YEhOIq)e1VGe8Mh2xWUpV3x)qJb0cYMbMd
zj?B%_R0F^BMqL-HJ*F$8`P80z?SzU;(m@b?PxemWbd|y7=*FP|;ib)N=VPpizihp{
z2e#NZ#3*JgeTzHH{RL;04ZRjl1qbGxa%}}hzv?C8*uh#&Ar~9j-ye%lqv|UfMyWJo
z<}qb=KCh$Gj199Wv|HPa@>tKX6Y9xb?g!^kFQW9GPOWWfE5bVGiZjDJ@nE&0{AbeX
zVkr&_kkIck$H!FHRf!cQ`0>?DW$8w_CdXP=jrF$UGfO5eP7w@H#W`?F$N`L)Qypqm
zS+#|$`vLT$4N=5SkZtNKi}>gR3(S0U<&9enGYNEn^ZraH@jetX??QDp@4?{Rrggt;
z>3Z})*Hq1&jmQnX1tyDg3bf#V<aPg$yDJ;Qt-VQCRBA!FM8t54?tj$9!c-Ecyi^bB
zIvy72oXO4oMp?LB+@DIFHj6VVhAG*x(Cr%WNCsyPhv8%ttI{=wbL~vZZtMYTj3(Ll
zDpv;WI_OEr8P&ZAFy{_wR~RfSc-~`${+#2MAN!SzHcqli(=v722|IBH<4B?_WVJ4u
zBbDkhB<ScUp%k}?RETzPwq+dg@r6_5>=wVKFAA=&bZC=X4twzW?1|CWCwHV!H@uT$
zhzh|#cO`{Fa9jm-NcjBTtRqB%<E<5g?7R#Zxwt5Jf|_OrtaJKAI}|uR*abcinEhvS
zZm|M}e848Smc`AZCVIZVKS)#c)h(n6SvQTPxh;)i4He|O>m!uT?ntriAR2U&Zo56a
zjr*MQs~zGC`;*0f%`7Y~u@ulA#N9iG;Hfs*gIs1%{shY|0xb`5GN|>yA?kTu8(le6
zsyrK3F)p4RnQ%ZipN>|A0A`D7PnJ)T`zmk?8>G9z^6LS~0QlV!VLH)iir8lWmjGWV
z{BoJc^Ym&T?4uCH!K3!5<{-ulNMihE2T@oBm&0~wgw==jYiYjgz>k_M<+_x$QU9XM
zUCej-fl@znCAWw_X{ISYS9ruHbDLQug08bUq+-Od&a>1&q)fDe!(U|_Q<`l_)IV3I
z@h|LosZ(@`w79b5lqAfgIoye8%}=eyV$rJEGVB&4`pK79i6EzBW*MM(E|OYWCppZP
z*`ffOy-z^UsA^_epngn`CNcsoCDkp+ZS>{tw;+d#%>Zz&vK<Y;XI=&jm<9<W?lD3h
zvmS4#;z+w+$-BN3Ek$R!cIW1~lL9~Lp!pXc2|HhRVs1*uC7ZWeUCzp_uC75!^Cei;
zh;ER@DWhCmgB#;MGkcXo3#Z*LvDgKZxVWL_++dE&s(})8@W|D*z>+L_!_&iP5jXt8
zutves3t1ze!IYrHputW+`80iX9}7Q9nX<t2N8I<7Z!1ahQ^Q?JZoruGVrjegvINpQ
zyHUf?UX=t~cYRlIZ5zl7U;xJf`*E??35AuzQIw=S6%(8m=kU5&^;^JlO-%K=QjqLW
zJ%}$x$P}kJkTub@yWIW-#DX29AnPT#h4OU@9*a$Fo;+66mUxO&95?2;QA|3(pvH0*
z6Qdvot(JU$XA(g8d@FqzBSQS;7d<Q~HHFXg;@AcxOD}^g)vVdGFt{Ki5oOlj<f8>K
z!O@I*!wGUnd9Lz{2J11Fcr?KxEQZw;tOkt0uGc)=^C?ZIxRR?wmFf47N;$UrJyUyD
zu#<e6y~e+%p~aK_!)KkPZv5_yL^AW0UNzilzOWYxd$p>TI_S~+_1+w{Fn*519&V;h
zL->Mg>8lah2>x3u!toH+GE5uZM17FV;T*9Rk$mnXM0A&eMx4B9H&AOSf)(lzqhlUA
z=wWI{gG?vfU+=m@&Azd!DVlE$-<nZ>v2KXV;TMj^T&a$_Nz8v6xM>!5h4r`!TTzdO
z6bM5|Xo_^T@eq2e!FprMQD0YEjiVGD?GI|;_T51ZsA;;R7qb<}m=3D8-jG6fOcets
z>FjDG-@5uv6uu>uXa?YxfIjrz^<tjK4S4M~@*^<B-ODG$-c7xTroogt4qnPRsq8-t
zLr%v3eJ$HG!@1R2{9wc;kMKPt&LlNx`GjUJJoTAM6Q$%B-dZESR2!hOs<<ypN}8(B
zw~Ni%x2I6x(pgE9Xqzg_L*Yx8l{~)$u>JR9SjrA@UYiN7h(!4YKZ9dpQfT6~lp)|w
zfDjtPk^SDh4O+P7>$ncUj>j>K9NH%b3sdy!ZqFPN#*2eAmLK&Ouh&nOitLU-keE$L
zYW?Rxwsu1I@vmXLEXgsr;o-h*TN}9aI(>Pf&g4zq8qK-XXXfBuS9K6>+(Ri{oQu0O
z)6~{?@mOw&<JUtp1C#Y|q~Zfzkmp5#u@>OQv+YKB`X=ivsje-VFB*W87Z(}^%6OXv
zUcUWfHf6uu#$g<nJDcX8QPlt36rE-Ex=KU?({QC?vBqO$U)8``Wh{(WuA4*Pi&rqo
zvG=VQYZS4}6+ctaI{l$yI*B2gxNG!CP<nOv@fd*D6J<3&dm%<b7>=1mG3zRn>;2G+
zAMiXD-FtFW4~N(`hNR~}I_Y)NNt7bcJ)q=4P#LTJtUf+k#tBSoSlj)~)6cYvgSA_n
zu~Gn{MH&?<a8EM!8UoTo2r3IWLu2;q>CoNAD&GBkyoVaG+QqK}Uf%tZI*LJt>Ih9i
z=Jipuj19Z;`&TStt}ApGHD>Y@WN@2dWTIg5UDSwEK7!G%VQz{4z^mAUFQW4sRb{#T
zs(GtZOw0@w3J3Nk;|IzF+dnWLDHQT-nj46lQC|Y@@W&Pkw{E~iiouVPqJ1Vfv_+lx
z^=C_9$sPrU0%qJr7&090ikwhUITWVKGU?weU^VJ+C)ts)jZ8Zng<`zUtTBX(yKCsm
zTOdp4b=w_(p?Nf~c?+a^Hw)s(4#c$!TffGcudYUjv9XcTsVG;fKoYr3KulAj9!ThL
zvn#_f(fgK+^JzNTu}5Kv1oO>c8P@0H1hEG&bJs>vTp02m<tRakNP~UG3n;3s4&IBA
zjjX9UH&W0wOiw=Hf-uRS)@Tz31?UG2{+z*t3(5cH#M1=C#fm0!apr2<$ViveBw-)0
zXHW<6YQk9aS@zfZ=<`oM|M*P^QerwE<Ts-YOQGsTnkIpk0b6|04o&Rtc=L!&lvTeg
z1TB%TcLnLyNvxHHlYzmE(Yh^@|J8h!6hS~Bd>C%bC17vgK4O}i#s<GFLGpsIbQGon
zALQF=v}-S{qFRA6M|?n>wIHP*9y1k{xGPv@{f!;Gi7c-X0uzo82-Xe5?WUCy?z03^
z140QEO}Ig$25Hz-jII`Ib~d>!tRl?RzL$?f?e|6Sb3w$xnv;rn@^pY=!K_T9U~_E?
zC>PAPj|@jay}IF%kL`PL<VMV9gv8W~=QlKBv28pPqS84>TCg1+#+7sv=(R8>QGrE`
z;$%*&Ymli-<2S<lMqRc@ed!p_DIlL*qSIyW8>=;n<V{Ln(k)P&pWa<;5!QC0=EK}l
zvjYIpMT<uu;w!kHMXES&QEyVZe7L))Iok#lrYX;isUM73<SbTE(}S0VeD|cgRr0oN
z{y@c7r5~wCjm%=R(B{IM-H|*awE`7LWUIrG`+0m&xGE&#*m4;<s}oBsU}AAc8j5m<
zR%$45UXm+_C{bgWAkUPcX-(T0kzTC^Ps)PeB?LXTczzJD0vpvJSRMjF0O-_-BbDJU
zI6|2!3Ycr%=BRw3dsy9MbAZblQHOK*GhIHT76nuZZlIAqe!MPy7>20?btUq*NW*o+
z&41df8dg(OAXHA-E#(7%#SI91Gz0}D&mfsHq%h;5Za`H*0q!skc}>2ghVzRM-8o`H
zT^JHnliN?QaDMs3FVs^xU;&t}*7a;0fX4wuwOxqhcZ1ta@-0$;GX2o>tl=*;@*#mV
zl9D(sMg1-`R8kyvRG+9Ek8{B6pwl)v#vIsjkHmv$MPqA&<A7=sa2~AzvVAzeQ5WXZ
z0%`9DkIyez?g@ifnk=16JLT&?>Q41~`-ld4&3I=KgK;w?{^)&7ot}-%_{(fgCo5}w
zb~}$=*`|OUm?qOiy-QSkX%d{ynQ<GN@`WSj>ni5_kag|7&WO`joTu=8J<;CmC1xTD
z+@ntcH6XW{bFh*_$E;rarZWngrbSa!L!Uc}rWxp<J-I_q-ArF4KD)8~`l)B1>QnC@
z2<>)!YS}POc`tQ;z|Z8Y&~%AB`y`0vvOrDfZeYAm1OQbk1ecAuSc?QK*dkZyiuk9y
z!@o7W8E?NFE3g^R%4JGGO;UUO6o_m`Lm)>tq{4&TaF@2<bgdle?Kafg#o;$K1^CTC
zIaLt~PnwbT@O)GQQ<ejT1YdAXGl6FsGbxvIwZT0>wHD}$lAw#~>XZTsyNYb@EJt#>
zuWUs9w~ub`5{r}yz1m1Ai|f@#f9;8YJrA+aA~{}l_~095c^3rhryM~?4hOql)$`e1
z{}>wVq*s7WLs%@r_-M<)muJJ{j1>kF$A0mD;A<>(nQu#+_)T6ZJp@R@`mqeI(+ibM
zNm~+IK_X?%#K)hsV?CsB`;_3{h8aTZpEt>-UNP*YRS6aosg)a2ywA@;6Oj-*5)-ap
zTX{+NjBke*b?Z~RO|ENDqe+^(3asveC8N>%P~~Wo0_I-e*08~?{RsRI#1}cW6O$=d
zkjknPiYLGn3SH}=D?MXF`i<*-RqFcaV5>6Zil1^|?-4C@z8fiDp;(-}X*&ay&$(ur
zlh;C>jjKz-_RJm(AQ-mA!d!(>*g%0r!SWmI#|4lz<!v~Krw2KYRy^!FRiIA_o3so2
zu*22>>l*ZOKQr@)(L(~n(ZDw!d>_EBtBZDToVXRLas{#YOQpmTwc{Xu%GUWY2g?wK
zjUYE<Y^rfx<{zY(w67k4TPgM2QGY(5^#h@|I1<*eDrd<UG%V&F>Y`Ww-?_FhSzYC1
z@jI(S!eU{>^kNbd<hf@gYXnoVU+P$nWM*|Lv(`-qhkMkX2SBi*L`7o^H$kun>#!7I
zgma;*6-wr;GreCWbfJ9w*+;rlDL+b@!A{z!g-uf3SNSfG$55n+WdtlXsSOm0|Fm=K
z1sMyV?TojfB|2PW_#x4fuG67HtGrUQbPmqmIQ*`V)oW79!blm`s_?`H^crTT=89<+
z_=<jsi-?763<Mrb!=?Lps(@Jd2nRO|kO>B8gj6JDQSYi2h{(S_8_XPmtNy6}30(pG
z#yDg0XrJb#J5a6*t|+t!{99MI^}NyV@c(TmZ#*$5#IUA{Tbdp+cEyplp^BsvNuw`g
zSTbE8`F>e|Gq1%4Ay!x0cy;N=Ls~(g8JeK<g;Aq2UBuW?eLlEKGLW&v8Z~_qBMzKF
zAWzg(XI=&a@CHSvC<=h6AcT#N&%6?5h`wlju>sd&CmOLf1^!LNqnyh9Ym;+{J=saK
z+^|pYe{4r5n0rp@km!L*Y&OS%?X?O=8{V2$`Z6vUm$*NKzU$?)6(Q~gouuRJeTw?U
z233$!;Bw=baSCa0DAYjiOZb0V225*ciJlgBIZta8<FGiKHH-fs&F&L<W=VI+8gy`X
z{%L$9O}n^yopeTa*&tC`e6Tk1C>A=+XW|(e+{7c#4_^-wzg=F0zSmzZ6H%Q`kCWxo
zlMRCwZZ(Z<G&{=k?tA}GpDM(#uxw=09zyUaNu@2|b7-ZP0!#D^+{C-U4Xxz?L`+%A
z#*606Tf;?yZ>QA6jB8eH{CdArrW(CmqPouIDnr44|C7>6>p$tI^=M{3Fs4i3X|*Ys
zK(?*-AWGnp305pkCWn}rA1BG@_|tIW=;B6LZS`N+Bc2l4x8zO2b?dAMuHc2E(J2i3
z03kREBx=@+yg^q3Ww&W5kMbqhk!S&ur~_VtrmzWO`x^#)oHxR$7c~roz9WYdISn2Y
zD!EZ%;{+9lw4NUrLm!ku^rb>Yly>R@w<i%P|MTY!w-$nJ-iL3OQ}>J4Kb*gSR0^sI
zxU$@W>vyN@Rs&6^PA|A#-yOp%Sk;XO2Mag7$&$O>Bq;?2<lxTs6i&@?n0|w<xiARs
zv!`vd1&wZb*^OZAB2rxx9KUoEhK6j-<9MydW|JB`;d^5hcde&53fsl=B5sw9Au|v3
z<$|{BmUw)6TvHw&9T=CZB^~tBLCmjiN}*@J8m5=|DGTO=4^D%LRc$Ki!LZ1LEO(Nh
z7{K_#r)9gtkVKof%&<nTnT5Jy1gf)9hCzRs3E<p~!@JH<1ryJ`O;scaCQWKAl(a9<
z^(oYI_F^+}2lgS4{9VGXev0Vh&pkw8*M(-lqq{*;ZJt<Q)ICheH!>x_thPEOyN_Y4
zMQE_@FUYsZiAY!i8{H}=F#AsNS>qWB#3JHX4+m2~OYi>Y3F0S&Iju}60X3H9qhKjL
zV6P>m$k?Z_lzTpnS2zxVzsYryyl%i2`<1F(yJ&Qnv)D=xPH-bG#*XI(n7WX)S^9Gm
za+$+oZ0O)Q=IR9AKu<)}!D;>eCV*02Rl}V~8=`HV$#y^*4sBE#9EoHG(bQcq)7w<6
zppGaJiEu&n+d@FG@Zb1{z?!+XEEAh+3;BGm-1Ih@Y}x&Wdl|y3XVJqlnMmxb?gnVV
z``96&=g3I5oNvgVcJ;ix6a|zoG-v=`K%u|VKEkW;4p0<HHr*c2o^t`5Vb652C?1sv
z#d2Mm_hbUZkS66ZOJMLSd<o9Ni9Szi6M9Q0Z#pD{jNiJvDh?faZ)j&GGrI3+C3soW
zRCHAHM{CoA1@|xE(7T2h-GkjE<YLyf&1h>cq~+Rwd{sxRbm=fns9#e`SUs^NuYfTK
z*Ho2uQ!!0nGB-2BTU3Jxn-zpXdLO)K*bO~d{iX~5V9d2;DKuUkNkzlkZG+B9$e1N#
zbo5Mc3tq#ahL<Y4Tax{et>~LZG=-~-5FwX}zj||+&}QBDj?~bEXs|Uc+8d5Fwz;OZ
zzg#QX+`xp2b6AkCZQpveZ9x$jbo)^h?^#}4&X%a}vPTEWrrXKA%d>96)+NZ^XA*vj
zzmofvi3B>lN`Q0dN)AaJ@P+e+#2KifDrr7vL8`Yn{0e^`QSsmua$RE7hTT|2?<{B$
zt$GY61wBu2l3amQa?lB0=<}TAn1J29qJeqLI!=HAfF0Hd@RW(whLhmT`F;q@avXXC
zyfhDSG$o7rA;dI1=yCHKa?2C(GzyDI>RapFMpm%#>INs;a_BL{wzs2vpU8HB`uG5S
zvcMn_&0(C>611ByfEWT0Ab|w!Fm$$b>bfSM37>VZ=mj`wcv_dstt5EMSqDT6Me2K1
z;<@fRp(@m%&tvwni51<lQa-MdDDuQGB@)L_2;88p1bE;904F#K1%%l_<kC71;sdfu
zdrBV59Opat1R}K_P0JSdK-~n*uEwqLI}Hehbho0Y`NfFGgS@*c8TX-DXJMz~xZ-Kn
zH_k~O38ko<_lABPdY<w2;xUkVX*;oD2vznGOLwsv49T1cBEtfaGTAh=mC@MaK``((
zgCG24;5nt4@=sB1eo%UtV<=~>Ub2IuS&!Ezn!NwkuC7VqeBlG`Rt?ikN_huNYMG+W
zrJAeC7tG#LRPSVzLHy^_){x0x+$>R2DPsPX0GY=!9;ybs^=ScOHbJ)Eg(xM%gL{iG
z8NAa>(~u<ohu%@b?|wyC-85lFwJ7RCJXVaM6EVbeW0&#V^dyfHV#y^BA6@HC-MCnr
zpk&QuC3p~0TJ_T!rLL(w)OT{l2c;<$VJz63<Upi#eY*k@iqDqgDvJ93i(W-6q(-B6
zzLhg{FF31N((Uv94ueS(?zJRZ)BbLwTZ};Kn{J*O7Y&OX>?z-bMmI!(_Cmg*f|b<!
zg^yG`n1>~eLILnR1F#)?AQ9hP0Bo@%A?>=*dL#`~A&?nS35(dnY;}Pa;Bx3>)P+bW
zosot{Yg<-e{?0y?z$2>Ks~QVaz^4?z=l-}i!0ikGJ00!w>a?pFgc~j{!Dg)Al#y&I
ztNE>!)jyE`DcgW{&sI4uGkTYyw0mYa)zvDo5~t_%pAE!Dvhq}2s~5hXmg8k*{2iL!
zn^~W_8?UN1tFd;Sw`;R=BR6E`^c;N=ZX^QsG}Gsx5=K)XluD}=uQI&Q^ifvj6m&~Y
zVq9&Ds;<~{ihtE?wr)C8c=8~3#c*rXQPAbB{y*2uf^oCmJm*NnFEyx^aqL${8tMO6
zH^>N7o<_aa*hms2OK+2D9%~ovmCEBbW`}bx!>$A^$Py=l&(p{|8h_#w@i_MZMr_B3
z0g&Xi<CP>_;1SHC8-mo(-WCYYH-7o}njpxRXluS1>ld~_O{;!tOl%*pp+47l;Q?`6
z1!PX<3cmxt*YXy$@>5||=as$_g|o+koIf4+KR_pEse$^zk|wX<ySUe99BN13_AI{J
zP^$A+I8dsgG(DDSM0D>+KLSlP+VsvAIG{-q(wb+JXS{^39s2fK8!KdC%MPk6;DfGW
zUI~DJ32&p6tPP9sh7^=d;G)Gu^I*#$aGE8Rl`#B;J8r~O%MJm23kHcED}mFh2=p4b
z8602*h}#eWJlDm3&?)JrBIYZ602T=WWemJwc=}g(K>Evip`NTu6RMhgzcLnx#SH_*
zeTNBiOh&3(jdz&fh@IBfv(`7#Q3%%$NY6|`xgyDYXxh`@N1i321KTKAX+u8_=FvyD
z07w-qKdQxl^q6X`!)t?yEE+el1)AogI}97PSs|)FhtviWiz&68U28`bROd_bzdWD+
zr}H=>Bvia(GCAe)OMPu35G~ya>E;Tu@7`VbVW$lap3*?!>l@nCot81tD7Gu-{8Av3
z;mvDGsx?m;xv+V?6ht&<({Z1mglrm|QHv~svI?|(W>Yba(}4D10_9q`oxzXuxCOUi
zp9ybjC;vgcCtO&!M%KRLOaC((*yij!w7A#YDW@GP#+S|mi<LQ&6PaUz)o8UiUuA<a
z?kFLY6nHrc4m}L`s8vDEb7PV4C4?AT5*5hUnIncFUX3IF3i;?gz9`gmjhbhM!ZT|i
zW4e~-k{Th^(P8KT5kOVMd2JAySn~ne6`V=<WZ@6}^?F`Mb5EoiVpZ?yo>QD(`)Ba$
zbZ>6#^nv1l0veB7Q9l4)D#oRketvsy@4m@Qrg-l0=`M)?1ZwJ7vI9-U6ewt(6Z6T?
zP5kkc&2{TQ{@jL>UG5VW+UL+uMzfegp1Ch&hLb$j8h35+L`Tek>G^PJkt2Ik)NuF$
zU$l@E68DyMjJS;}$_EW;ABp#$95s8Z<RLnF+Gm0aiEwJQDi8zt4FUY`5KRG4lpRsj
zL>7Wj<%HEz#w3XB2taKK0Rz1ZP=gDG2o<O#78j@f+{WRbRRa$ev1H=Nh*rZ0=7Ojn
zFs-}Ho3&DXm8#HE7?_wxn9P%0vd=9pyjF#{)@48wh)D>3@gh^#pPY?@fQPFm9Z2dU
z1O`zeAic7l{o}P@F=jJnW$OFMQ}&nC3x-LtoTEJ>PACKc|HL8|7jUaxqro-lL6!Lt
zeK(PF9~n09I6yFVg2)0e(X(qUI0vr&7)bRjPGApNeP>ZQcN&r?S&sp7o50^uPbiS4
z*6^Qn0b$Huo|TkPPgTeyK0Vl9Hvgld`b2;<_TcmMBy=Yz(FrQRR{Vs9zX|8BJ2XC;
zpM9C@e7dVt|J3q>vclE_{nN{bTV&F~>3`D5Tc=kU-Z%Ks-cVSKxK82^zye8W?2Kvl
zRAss0fRagn&+BD|5%&)7fA)y)6(W%@$8B+bNCoVuo>Z~pu#aO+7spD!WeX<yT*aG$
zYlhZu!yeV1!D*GZ^7Q$r4rf;P@&Ix3=l%I3Hn-76ZVat->z)ND<&y6=rP3I1N3dou
zdBmY#Ii;&pzAmoY@znm(2a1zPY^oTgAf|M*haU6e92kfum#gDYF*BKbNAlffQ{C03
zCI^lQkWyndB+#Kwc=utuony_k1G|=@eM70CgXa>7p!%upX5@6L+#t$H)v)I)I{Hjo
zfgHi$3d}j)iWA<W^Dd-iIu6fP=NdG&h>jz`|G!vQOXDkJh2?OGdP1`Wc=C#DnypU{
zvQ`%cec1$A(t0x-^+c(Qh#*cI7dZgKW0A#ioQTM;$9axF;5p=w!vJdu9Iy``zR_yS
zo~2ddjtlz`Fbc4HYW>rzUA^|SV)Qqn$ja@FwCb9<Moafe_$#r9t!X0U`V<^Fw)nmE
zGyB!QyO7>3E_go?Cw9~?H*P)hpSr%X@!;>A-mm|39zzz9Nv7gYN<f7w4~y|pT#Eb2
znddw}GMJqzE6j(AB}@Sn>zK8x-%AU#44s?ZRxTI1)5?@otk42r50g*93VYC5HTE07
zr|zb|?w#%>B7G`!K}KQPKIa>m+dp1Guj?0#N)pA?PW;Vwk>~jZ^jh~0PLt0X#Lv2f
zJSh-w^S0E3*U4puQbVVO?V3azqMxdPGu<a0!SUkCty@RLBcnVi4$eZErrkF-LTUmV
zzr2rKZd-O7`&N(VVGE5Z>jvjJpyC(QJq(lz5C~#PtUO!ilZ+m9j5QF`Frm_?$QrqO
zuF6WQGMr{9V`iXi4hA*sH>lMAS|R|YaIlW+(IBU4+EBA|X~N|n<dRT*>g;sxs}1xE
z6jt>8=!%2Qs6kqA=TYQHy&WK7lKn3Rzo$oU80i#BbyocbA)((G{S=8P5^W#;?F-Wx
zgW^RbOxUi9e9ESQ&(=Ii?DRE-%RL(6;RE8_&=xWq6I7+j#4O>W*$gq34AdCyfmJA=
zMhj}O6qTgaHOBkXxW_Ac_dvvEKU>(y3oJr%GYxle(q7{XPCI;TiVpK#hmqw}Y6PRr
z=<Z11Azb5-Px}_s=0P~))=j?yE<9Z!BY!%#Q_2#)rArFc%z<<zK`zuHbM9k%tQnlN
zh~L@oYJ)K!#j+0TZ-+jYKvKf*Z{<XaudZ}F(U+ox?Q;Gw_vn=qddCFkVG$N}*$n_`
zAoP$%t?jAD?n9N_Lu1SJ30YStI_mrtjj(~uXHN+r`&U{=JWD&`s>PakT2p+q*&Ihs
z3z-&@L~DoX?q~Ze`KtZQ0$NNS{C+hO9yue4MH}SZ@!#5*9?VWEtG-mRx&(EC6x?x@
zoYAeT`A-_b`<6*Ah>)fr^W2X$w*UmFLf-)-PxvKBM;(C`yW6h($S1j{&Ar|p$~vB_
z$U+?Px3u=|x6oQU9plc+yL}g6EeZA-neCX)*A$3##1g4rB0<BiD-aJ&(wHsUL^Wv`
zAFbiV5AmhN1PH{6pcYV2W{qrdS%JjjnXN!}&Po{f#$}8BLT^Lb9Z?N5RNWgzxp6`F
z5u6w>(sU~*+)THNi5lszbKDOMnp^w3jI&HK%hqo$>bgaD#$Qo>r*F0|2ZkwBe7)?u
zJD?z%M#bQ|OYJNnIkQ{ZO`2|*M$ky(jvKEE$1fgs5x!0!E>tYqLUS&t(?MJTI~ON~
z_j&L5%~uxNQLzTTN#xp-G3clQLmpE{XQz57@@%idciHF0!pea#UOTx#jrHe}y7(FR
z+I1}wx!Q_7PA(TyF2TXy(q+3fXnwQ`6Tw7?#|z$`oR&PI$8h5BNm;%nAZT?8q0HBs
zzQkO|^%GQO2~f|;0jdD%*FzFe4uVH`S?zc-nps~zxEfOQNPi7sw{8cKjI4bK_ynBP
ztP)jB9PxYa@-%C@fFwXx43h*?sC@**5ZX1p#b=a_4bs3tU;kylM9{T8$u0n{hc9bh
zQ%G_A1P9?oO)E9qkDvh|w*7x6ZqXT7Y-O%LRM%dy&<;#MxFp6Bq#<Ntv4K;&gUT`T
zo&2YO^%Plv9KyZjbEHNAu6>k$qLbOf%YJ<2aV`N9C=~o~F{M`p4lZby96gI9?|EFu
z2c#H3z)i|f3KucPP>}U9$f2Xie#-amgp`IOKP4}qYzQjb;~zDH*u)_i__ZzUvEn9#
zs)^$)PUU{1rxS6jau@**_UmJD&?phQSP6#a*@aLUnkvOZmh^rVOb{`1Bq!o9F6cVR
zO?qP)uAo<fPC{7r%!pJB3*4pewg2RzN=&1ue#)@_VTLQV4Eqpor9_lUExK$Q$?Cr8
zJmd^?<FYFqWp)IVwvdpE99L04->W^|JkU5Gb)l$hQBoT0PD{FwLe=@N_WcsHTd>}W
z`Rn#bhk~Y^R_Vb^q)-VCo|#e3fwXLYr&}3B=JAOL?U;OK_czB55kK-VQ!nek1wt`y
zY{xg3RMS0J)PgbVY3+hi);UirLL+1ZTcEETX@D?n+PmR805n0$wiTSLkYI)Tu>s3q
zBU~Ogc@+V2NNv;#DSPAcPO%k||M*cZ8eG`Zk<TS@>@`e_MpM0$n5}Q34JO)OM1_3H
z3F;*mnx_y;sMdKxbKZm~<V`nqhbtJt^BMOL)9z@GU{lQuVDAl3BI!_*Ca}oR{Md3F
z)A6dXrVyCTsB_FA>writ2sxjPmfDEd!xuCoG+Mk>x}D;x7lx~aakN}<J{TMxj#G$8
zGQQ6VdTFvMO76v~Mz|v+&={_j1Z3K9acD2%fy|DQfdyENg$N<U^2@sia-L-;nH4da
z6p`X88K$c36BLZv)j{z2+hd177=@_FL<aG{Yc^qNz^2N8Hl_^G4G?)-Q~Y<fI8|?i
z7sZ&Y#dG43%n|99v}PE+8kX|o2VT7S09o=9|DCJbIX#*pC}7&fym`Z^?@^FxG|5OX
z4|P(EBCx`cC_XV`(iWn0dm<SZjnFhHX*xK&DA|$wmZ%X#jBJ#|rYs4%t05Hau0&*L
zz=}~r9lhIs#dD(8*CAYDE=xYJt`3ukL&$ujZW%%w+8(7$Lrnux2MKT7(C?5|UAX(o
zRZR`fL*^)(>`Ym}?%mQg-;2~on+1L-uqNV#T3+pEuKV4n0x$1%*g)}{)I&~sh*pu7
zx~Pkp9fZ<lnu@!!@fJ{TKSWU$+>|(y5GpaSwI>JJ7LErqd{)fksuZ$gjDJe|f+4F^
zoj9_b@i1<dbv)Y5+_>aJB?>yc5VR40)tu;Qx_l85TF8cXZIm$-V*b$Lk#`_;FQ8T`
z!a?r_S7XDaZQvqObUV-Nd6?0Y)N9K0uUoUz<5Xqe%{p4IEEUYwb#VHOM*04!bc9jA
z&Hj4vmyN%`H9#0p<NUwu@N;sgsH6WFZ}n?LUB#>g9bM=44h?O)vr5hC_g*So)n@48
zb@oU}|Mx-S^wl1xS`1>0n&?ha(EP8*8)+)l{2rnO7F^3~hv!iY5_if>UiDoylgTeJ
zZuZ_(g>hJQ6xPF7<@*}bg~6eOc6BK>qwj{ph0s=fzr=Xs>|}*djUlx@ZXm&aa*0*_
z?3|<a1wEXjlAr>D{4}#&0)`O~d6Z^WPDn5`1}Z4l7-l<cL!d}fw}Wpa0X?FLDDCp*
zMJFJQdjaP{3M!yNoFV;+lULo^`z}ps?CDp$qS{3E!dIfC{9WApCaRL~`olNX+-eRL
z9VKNBP<Ll{SC=-!5>y`F2fTDHX&s+b{Ll!=%~h#j5hDDmkmkTcb(70SZw0*K__kZk
z)qVp=eY27$NYQ~b@&f426DbQ?h)A`C%Z(d|WxobsDU@;=BcCh$$`E-sHJq;ybX^0(
zLxB1bq(=xH|J1Yp)y1Q#i3|GaH`1{?6$F3;GLvWDt?5}JF(e-XyZEB)iFPGve*(u<
z*n&OH+hie)=qB+gY$oo&1JR6w5nK|xjh2;5sGBT)`=nh6UtS=`I%yD}OH?|wGtugw
z%<qeD9ha`u+Fj-!gHCyL5}OqBRQR6`hZM?^U_4x%aKPDx<1=u{fxF>NvMAp*Q5W;e
zQpGDH>kmUNsH&y|&F)_&jDT)XA!3Sgs`b?|*mWA^OlC{$^SJ;ggEPB&A0$`jTVir2
z#w)ZwMRE=6Yw;r_Cy6gHvSom~rg%x84uMk{JAT0`6d{8LQ`z=AvACI8S>`n9g?kgr
zwvqMkU`91A#8_!K>Nve85KRZ9hk(rzI?CR@@Tj&ZXkIyTIGkmX^)2mbwWkS7v38lr
z!Ed$I!Ug(saK*F{i$r)-hB{=m4h;^Pry{C~6Wq7MA$5yeW}v(&Ob|TZd{QAhE<@F&
z-SAeIKj>`JBI6ge?h#OexMOh3b?wDi>pbmt>1@bBfpuizdDrA?M)}kn!6=uLAL5bn
z`zkLgBC_^NItM8R4=x~&eoX4}mUW5frMJVernhSvOZ*!@{igE>`4T~HX8i(YCtYG*
z7n#_hT6&=4mJIt|N4Dmp(6Rxt`6?e8$X#S3$%3rgs)9x}jqMx}>{iU!2a7eus%+19
zRYR3J?c2#}Tj|Ng`PrQFC=mbAE;_2idol%*!<|lSr{SfLxtMh>)^18*lMugni)-X;
z(@PwxTiJm4V6b&w)U&Go{i-2a*f!eudmj^XDn^(v%W@y;h6db{r7kqW$B=B0BER!4
zL58@J*MzE6q$}y%$Wn_YW8#Eli)*jttgX55_Q#K&D3zwp79YEnf$k~bX8Z0?zOuS6
zk5aTJB#P>6el8i+XRjnAO>Xxt=(1+*NMff1v^ktOG{=L3drjC@^B6UlutJ2Ovv}g*
zWf8=_Q(ZJIq9YnFD^sHIu%=>NFOGu=cnUUHc`^!-r2w&jnZxKbC`$y|k9Gc_U%|}a
z5DaO<L{I-rsn=6c2jHurVeTad$4l<QZms96g_Zr{6bXUJA(a*WQU?-efj*dG+pg%W
z09y78_y#WaD7p*_X`{QpjuZ~f*M+gL;&9oH{VChWgx7<1OgbZ@?v#}BN`8WqHPkyS
zhj9^3cYOWFBC=SwE`aG{qLmIqFp>b~3*-46oc%VUa9v(8kgm*dt|5tPogwhOf473k
znEdVH<W@g|rj{I^NP{Aga7D@4e)3!NRYaicI7i&QFQPq2L`95~0x1DZGm%JEgV-z&
zZxv`dP{-=Nj-+?9>QW#Fgn=4O?@5+K%<CZ)&b#h*KOP43;4YR&5s|#GCflJ<a1zFV
z&T@WuGg;qYSZEHQr%@Jt4y)t(vgvoBM74+`n&anz6Wj!PqVg%*4lSxltf*f;Bv2AP
zjR{iTztiT?36xSKG=U`&B)<5CTq&NtS}@ZQ(9bDki0~i|;2vwcza7E~1ziyS2}{(M
zpAgCPP3v2Pw9giLrh6*d-Fvf{jYF@LHEp1WUUWUYv}hflIVSt^L?w9NEg*kT1Zp~s
z4Z<&y7L2_=n}05E-PS8lc3@!8v{{lLqrR*6t^1^3IvUNrTLU!m8m&%`&Cv;I!8xwY
z-2QaM@Y)9%sB-in=xc~sf}rPb@zkr;Hi0=OjMCT!WW!nfVEr8xDeNvMReh53?jw3S
z?)Z1FZP?#;dm&r!Cm8B-Vr>S2W7)NF4C}Y^TU)u(-Q0~_lo&@c8Dw{Hji~2OSLJ4C
ziD6D8wq9*ff+Aa@$^1L3FV7&OlVvh?m<(jG24R2C9yL&vXTLT@q5AJF;LU8}OgjVK
zlC&3XhX=iNy3%&e!N7O!$GtQzLqTs-@ln^EGJ?bo?@y%$Gm{lO(+)cr7>g?M3f_f-
zI<){ecVx{^<%iqu->;A9<S2uJjy4PjCqu&!jtGawx`4eJ;(iWA)#RQ8%yD}dL2}b$
z(Yiri6M!R|EY%Vp5FBi$gm-TB1|Ny*!JM3$j3LCK)Itc^#9;@G(W_o?b`6KKd133&
z7(7Bl#78CaRdMFVOuE`8DR8@fI~j$%L!80jW~&c9KG_H0^;0F3?QrNKS5Cq|`gmN2
zx^Mu=x?+6*?a&~j1ra+TXZ%4TntV;oM6}+QK5~iMI@cXdr&FoPx7DiEIqW*2I2%hr
z%Yc?LwX<%<ls~KBA)A*fwu@Bn%A^aO4X$6K=Cy@)x5ezR2YeKW<QC!1z$eS0Ct9TK
zC^O}i6i5P7TnH}7Ad>Htr4_$E0}_Kd&E(Rmc8XEjikcxH<<SvpsfH1-(H%UB&g6BZ
zhA*k$WkA1J7K7wzm$l(&*-BQ|TW6i@vb^?d&&VMC)<8gum)D0g8G-Ddq)47v0mlZ?
zq2l*t->N{lywu7P%;bER93~j8zIdAClc)l$2|jw<W?y7-d47A}E0NI3RC1_1n9>Br
zZoNEdUqH8lolo=e(wVaFX*(I_1%~%xKrDsF+d>+00sht7u;W?mK`UZ^;`n9i>imlv
z#=0<Sf?8ah{MEg&x&@PJ;!Ax_Izk}_v2$<qVnCW6kd5=&wq5Ia`VMl!MX{U7>2LQ~
zU3s)AoR9mg=|h!S18VRg_Qm(PhP<%OMUue7Iz9_u(j-PRG>Hv-hMjgc9>X1IMi(Nw
zqkLo;Pg!4$aA|zJ_^k~)^M80x7sJE6iN7M(b>?%oCSSY^<aBB)4R+SYjOoI%u96R`
zbxPu8$+3>1UpVL%W&zGTOh%PUX7RLwWt)60oV%gCm*YVY(NTiGO!tSU{?(h%k=)i3
z?Fd1n0-2IAXD<EV@+tBe0F%5wO>n|`A+bQ6L#7^6A3p+nr2eBeaRq$z&?@s0PBWtF
zpW5jfxbVj*GO|;1w7=^>a@^CRdXgj91;BvHIjddHBbNnKKF{;1{9Y$`!ITjK0}kVu
z2c%%fo~Tk-UKt{JuS(1bLV8t5Ar%}>AQTKCgj~44170VurNV*-(TQF}-XOr$qw33<
zzpCv&O+6WW!-xC@S+DGZwSMbUX|42Ttby`6D=F%~b}|hmCISwe|E<+Ot<nt_zK9Ww
zp<51r=Xstxj$es}`f|CUU44;akrxB6XCsa`QUAi>o%!0bab5K&n}VJ}nIjr__37fA
zicTD-2Fl*z>RHAwhISHVGHgOW;n`&kwLqucpdkZY=O@U`0+K2*Th!2pMdM52nAugn
za@{RDt*cZgy#09(ESajRD?Q?lglz+4Hy^lv(&o$X$<<}n!?OaC$_f1T@ie^-*Vhn`
z0#7Fp_F}ZwvL^xLD3J<h7>q7?_?Z;oJ#6W!FOHf_ow}*PkzM;P<0*+UcSEq+Sso8y
z;}cOs!m^(e=jsS?U)UcJqS|N3aZsPfRy=}Uhz?PiD%Bd9GF*dH_6cdhoug>=Kywnh
zGEc2kBYKU)6yDb|lsa_6gnY58+6utmjv1p@%tCUQ5UKKz5u`7cFjq9@czSboO3WL)
zNq2{fFVQHA!Px%4yA`-Iwwuie>`Pk*5zxG1@3r?V*bF%+>vhB&B#}@G-Z&W6sNmMe
zg+)M15^2jLOeV-p8E-jU@VU!UaLT36^3F8D^J&Cox~6B`#uvfU^D_L{)s890NnlTG
zS_)*d`#QMZV<<lUjycdj?u_&O=;fg}P$#>UwFjlDqfkTDGd0m0zoWdFrviHt*Xzx?
za7(ik#FNK;g^8fho<s!6GHOfuiQwLo+OPUF7kSZf|L)|m!=w!>NSxK$#uRjM|6VG*
z0(IhjMg5QC3c)krC3+dMkkIn=U@YI1-?58dXif@VVbFFRe<@|0&Qt2dZfSP627Cn^
zGpQKY%jP{!#@02R-KT`Pf=Ri5xNP%0D@WjXoqnl}zv8szyHPWk#$j~U@OC)A$9FQ=
zp>k+xw=d}id(=RHt8}N%l24*dTrtO4uRp{vduW<!jQ!~4dqb(A$#;O+IrIpK(T*B~
zP+m-=I5Txyvdh;~am|a`OCb|on5mf#tY0zC$%5@Unw73)%Q5?%Dx#0Y&x&{4zv^vY
z_}~eB&vOkYv4SO>#>_f^CSlR{*(KX7R=*+M){L*1Y5SR>yC3Qwo4qr(%FgihjR<WN
z4<l@dQGrZ9A|jN2p49`zh}?f>$+($Q@9vBL5a{`frRu;qP)GA=bUijCG_8q6@cD%B
zC2whAbKJcMWAKK@H@;Z35VysNkwWuUyyC3<RB!{ib&j3X>`4joo9?Uzx<)P+TKXYH
zH3|$s+09~Yn9v-;J6~R8SvDE&(!~0ejN115T$flB(KgK<ve!4SMq<c#tx-qZ;e>Ox
zg3c9ghH%Tjp&EH9cr8JX#kl50{ni;hw4dvN@HI@adYb~MG=|V%@hJ`Y(^E`KLQMn1
zcx_M~v4Obu>`Cl-+;J`aSX>w{qKvy?*Snl1rR;vV)u0Y95S64MymIOV-svkmE4#3Y
z!u<;_ewO;euR0eY>a#JOleAcEiHaB3QM)jgHO=5y9M%^;OJ?MDRee2<1hI^X&`i{o
z`LHe8xZW^kVBFVk<8*EB2urZgFCqkTNqjmp5#j2h^-r9UUk|63a<m@l+kM!XHV2lG
zmb9?hLBDRU)TH;Il|<PF-+W62HwwFOMLuir*)>hH+?x^olD<rx%HG^euT1!SzOt31
zaX+eXrUdcGjgY_AedJExIdMKe;zBdNKf3rUhHx;ZYr+W55fy2IJqfF^Op&kutLw+{
z@j>q&!s7fZk&dpo8}Q{RoA-mRDZI4jfPg*hb=8}@`C9lNkuCiEcU8cAPeLYp%DrCc
zaM~e8x?StUmNx24Kua6{Q~mVpeS7NVO42K*@O%CWqa^AN*69Z3Zix8V6oa4thWR;z
zYS7$F6$w7SASyo4*8ZcH;{vXMw;@K=+>s83iN~v1j$jSg0@`=E1NY|YUAO()Dj_`(
z%Ux4r@1G#{9a1-hdKxLDq=9!7HXfx3*?PvUYi#NsxzL@(4`rMKc(YoBu_#_%sh_-c
z0Fjog_RU~u$<QyeCOz1X<=HW#y1vZJi5V=}A!cBJ(OF&h#EkBb-UBcv^|Bf0v@C^!
zO?|e%-`{jYSfz?3X0X)0d#g+s=l9om3Z{8N^FId{o!H*G*|w$LzZ)6$r*$@i!6V%l
zE8}j1#=%+zk9v1M2kQq&jTO8*xcJe{=e`TbZfgGs!P788hTEAk9eLUSRof8&)<rqo
zn<Ig%)^HL%%Yq*{3%;@*w|8Kj)Tu7Fw?|;T)$){A0A5^7cW8PkI;<$fxY9q@!}J&&
zl-F^2W2>0K4b^%e{{9g3BLdiT50o1mGP_LhR$KG6@U1+bF|8X13I+^DcyPN@gh5Xl
zbnQ0MeDVWe69_IKY<{kK1+=0nIL{zMCzg^r6|RF(mDbnSUN;_aoNUJBD=CjwV?zJ}
z^3BREQ$gg{(V^}Bm9Bb!NB|f~ansr$;2l~{2STRMN&H)V*!mq8x;s07yc;9GSrWHC
zWt0a53CK;D$`=b8M0{Zwv-Srw-~hv}=-@GZTBAWj0ASjfi9m`Wfg%P1q*dU9i?*QX
zrf|8LhVc4ZV3Cb(;2e`!X)i_KP#Kjl&IBgQhuD<7Ps7NtpUXxwc1TDiTHzSCVlvqo
zw}2J5U=y}rt75OBK`o5Q63tt--F0}P1>5Q}z5D1r3zaLCRV;U0n!P%ZXkC^oj1j|)
zqKaz1_ILdb*Qzi78I8GDchK2vW48_OeemTDG)y`@n=ab>Zo5dGU$PWTn;ogpcsMv4
zu{NN&A5&Csu>{VwIdsxXm9M@3{ajuFVTm?<b$D{EGU6{$te1_mr#sszN%}o)yH9~c
z^QMiP!VBAV8}7iRMU|imyqjCnd}l2ipSCFkN3IFtk?ayMn02rhhSTXi<8LWM^Xz<X
zdLk9mXUYu3fyjWl>#TMM{A$00w|BvR4llN_P%5S}U&WanhC98nHjM}(gXE$d24F^r
z`#|NNg?Mf_)WS0M4y$JwRQH-Udr^fS!TH1CnsI6T6nlE$NX!WPOy0P@9IJUt1Cm(`
zi?9{7s77Ttx`T(^OJe^RPhOgeNkva)1Y!!6YpH5P<8T`$aDFYl!+oa`Rdtn$YUKbX
z$poxkoNX%1Zp}cZ;3{!=$w?ADOtH2dsg=wkoB+QEp5g%ri&yb*r*?#IW56C05+o&E
z1FdfLFdmXz4l#tt0}>SVx!>(0fCQ5tT^ldTDgMI=Ag}|gu^82#bUcyx-c1$bm^Y!U
zo~T9ICY^FqUH+}6<{@-rQE>kOVL=8`D_RHfeqa-vRW)#6Sl#KC!QrWLBrdGG?zGzV
zZLiXLbmWm4RDDY)pk|z_SdNR(h%^#hH8LV)orHq#%C5a=v0XntJX{f#;~QBKpyXJg
zfEIz(2IAF&(5R}PX85*p3Q_+{WfRPUQG;86Jq9{Slk3AGLW-=ffs_sd9+r1Li9q!Z
zRH$jfH6fu~KNjBO9`t8!+1-IVL3dxoJGm5+g(B&p_kZ(rXvOw^P;>cGl1#GnbZ(-j
z1ToYK4_?MH7zZg{AghZ7v4XR+3f^oA0CfO|@kLCd9~o=3sy7CN3u6lsdzhz@6nce3
z#RvF{+xY3sdXva;r%Vi&FHwm@NH4;EqVDZ-7JKPQD7MmQ9&}u)Q6VrreX(jgulW)3
z$FHEX`Hp*Wi-cFzfe|SENZphhkJ$ss`h1Wlv=&t_AF`tSUMX+H2W1iGX3cBo94F$m
zH&WIIJ9;*G70_;eAJL+sn|XD+*|E$-ITKZB;EbZ4+^&G9nP=ueL84-v51UeIbHI7j
z#~~@(y+Ez%on_G$@o?3qzN79a%?~q3{c$4#njWl;sRWd<vAo^A4&K0gKHKj&;q;QF
zacJoOl+Xad;Z_tExbNLpx@JM@S?8?U2Ct0mvrY(fBdHGBj7uT6G=cdMu_GqOsj!*D
zybDynOH?3nvl%w%7JZULQ#Rt1a5FI>_F)(=$@A-$x&(|&OXMw5&m<95DCwysn6>$$
zRHsr%6DVG{(+mt~-GKB_S<&HX-tw1GeD88gf~+J%-1s?<_Xq~xLt)&~7djUjKi-Rx
zomx{aH$>bpvF@Y0zC^*@i!Ch_Qbry_FhnMhLGeBH78QW2drhOc0&zp+&POs)(6hKD
zi7^LS;Uc3BULyUDa6J);d_rA~LL{AF(1CjFkl&yKi3qgB#gR$mQ@S<YP$m83c)19~
zAm;PAR2(gACq0l8vkA(3aqAvxGLEll{*=J2Em@;CYSBAOB$1Q-`q<J5?$V+lk{_3Y
zvF6>!Yc6JIUO^bHbHAMjJ;Jl}fa_Y}4+T*RN<%Ib5af0gJhC)^7{{C?VsXhrjeUxA
z#z0}&vnMNja&7aEqfbjHE|tHHos;?L4J+ycaH50@k-=tCL#+?ROfh(u_*xb9bYpJ6
z2j-646I|0RzU`3};L8A$D7gIAc*D&MEe~*T6o4|W`Omy++rD-7%U4&PK2xkpx}i?g
zN8?3BG71ir`#H9I*Ed_pxYuN5ej%UT871U3Z?uTv{BU~^Gr$Nf4$eBqp%0fG$p3RY
z-uXMvc+r~Bz_h22`N1TV(>vW!YB9|3{_@Q-bhvX{w+2&#r;ir%$1k)r{pVB32GR?U
z0HmF7gmY4OsF6HY<A_=dF2+6-!dd~Yj+O4NiF+O|9Ofx;0(6G?lsrRnnPWLcrwm&e
zrzxemPYE&Wh}<{B$?P7t;8M&Y0u6N9@P+_!;KkwNA^K{t7AY*5NUAN|?k4(tx;@;(
zn#1{*%um_`AN^wM0cTg*#%r-1%xt1Av=4PTm{Tz#lTpBO`<N=C?cSLXypih0azMqc
z@&mN9YUdCSk_sEj%ROL!UEnxasY2VIo>d|Si7UY7%XE7&h~Nh}(Xm=dN_qy6RB@ES
zvs7R_oi9JAfE6#NJ7=kE4iM1Mm7Q6VG1FtzdMZ`$7AM}4*WVZ;#xpn88~;`;IEeZZ
zSBXK)dg1rJMyMgd(Ifd<```7qDNwY-r_%Egv-2|!M`b`lgxpOaI6Sb`fmt<$+=eU|
zjg89lm{lVYU~9flsF9>sb9NV1@Z~|iwz!DiTk$OSRXJ;eMCiwHb|VI>4o5S=0sacG
z-5&vaSW9-da%#vA3IPkU_D>kx5r2SpdsQs>GPD#eFk!;<(5ytkq!cd&%0F=fypr*+
zN}A|A{l>cA4NC^G^Z6W5lw<+>?#Is$)fCk9Bj*L#>xljr8U)AvF*e6F*TR)k<O~Wa
zpx`AGv)-j20KE$Ymp~)si2xhtvPYH2?^H#sBb<5|3oyM}w7k6ut7+AWI8Vgy_vY~K
zUrlz6MrYOWl+`iZpO9v?PGElWbgJ&^9qDK_iCox`l`XLZLFDgZ0>Bw|a!zZjS`lgy
z<(aVvVE;u)N)!QF+gl3Jtpk3WbTI~9<0^s7$^%jHxC0j?`#8jERC#Qo-Yk41tfBgf
zqjg3p=*y~DQ(3^|dU>V}w2-)hA(epOS<{bX;k#C#>}q|wsf*i9;n&zpP?k2v5b&Ur
zepm7g8(<^P>$uetlH*(*tQ0;8Krqbd!&yXS^!!|Fm4s91Bv7dWyVMe>-#FJjaBoYg
zL144KVL~`IH_*#`IvG!vf>a7Ps!&F&HqY#X)dcS<!6Lc?&=CX|JhDT%!JE`OalIr_
zER8Y`Y+<Fzf=5@Jgs^s@p{>`2>Nqf|;5j^ijs1xv=_PL7Um(exa%(^#7iDeG1gTL@
z>^5pOa)5Jz!HYWqmm5xs1O&BA5&ECW3Z;ouAZ&_6HYBOE5_Z<h{EjF>S{exHWT&jY
z0FW^tdBjz5ba17I16rWaaUgk8ag0w>fcxNYqoTqqX_Tig<DtYVXZj8PLC86wwMMAv
zl{B`M8#|w-L$GkFEi~y{vE@AGi&JKS6}N8bVeEW#POjSoC~Eog(u@9Kr{T;L@Ob#p
z2Mc=j1k<#D(1?}@<xJE&?zo<8yh@6FD)yMZfiJXE@M3*Zecg`5Di4)+99^LI=>i8l
z=ARg>J?hNxC#hGp=2^eugHo*9s;!Z%Yk(K5I?Be2Hw$7$x!^$+(BhzIRcy*<4y>XR
z8&VdQYSr-DB~Fupo}?B_@#~CS)yTgSwau(EX{0=$@E1U_A@vguhb2uHoz**?aW~Rp
z<_D$QLzHo8P+%Qhjn>NaQ3E1TuekWu?h3F~n6sf=$cf&BnPz*)Cb9lyGT+607#L_o
z5n>Ng+9z+^1ymT3o&AKa%a*<rQ{U5mxJIeFn`QjC-LL@@xewt2JoFv~pHT>y>@mzL
zXE}oG0Lzwf8VNeXTwvMWLtE$@VUILq8&K03X#73nejx7zvP8IEA2ZqWsxs0a5W>*W
z&{U~`2s%^X^%gKCN8v`yq#~RnL#Q27-K35ZFZ$U*4h?sy2I~g$p?|1FPPvJZIxGZ_
z(&q8bv-hSzP`P0ffin1zV9!VL4#;ewNztaO-V^}gT}bD^8hGQFdx^&Bf36I|;6fq0
z?73yN4+Kk5PsvKI|J!v~R((^}-3>0z@mr<v*K|z#Fnf+mHBP2@(<2z%y3$!Bgj&N<
zEU?MM6vz`fI=J*#xEdXAWK6psiq<%L`~@?)BtAWv%xQ|dn35wMCX~_~qigIiqznlM
zr1T#O(gZMhZUb_J+b&d!w0aj-H6iYRL`iCAw!`^Wua5wZGe3eB9I0YWm=@Rrt#t%b
znN5M~KpYmgAU`ezKjKUaNDawPBr;_iEL)7jp=$YAH2W*#Krp3&`<lNKp7nEd10H!w
zMVCGu$-E^$^*+fI#TCz-YFEV(KlU?t5|kVtzlMnlu#L3Oq+?M%h*MP$9|6ZnN3s41
z+VMEXkVjOkJ1lB1X^MxLP8eS6=H}nu@bK>)t1!zjF-wv@BWi5F!Md2*gOCqKE1o*@
zjqt8IdNxlhL&E5~`+==Jdulag_IJaDFvy!}C-&FAaiv;mZ@xVKzY|B#EWFOiZ;a7+
z=f_JROj>b^CibEpEp%7?zxGD7Cs$F<Mi5GCmCOzY^b07^H(PmQ0n1ZgtrpBaI%gZJ
zP~n_uJ4d~2{LF3!^Z6qM7eTUq1~9H15^9=T=)I#eo`8>h3n<koTIr{iCfSDv8Dl;6
za8}TSYlYRKS|*wCJ5Y*IQ6XE9q+&^QaELL9S~G2yVM8jUkD@3)b;m}=MO|`*|5Hr_
zNl{G5@$TH|3L3X|d%=omN47f1mCE?UKQ+cX)Q)HKdPl&P1$=8>TS*Q99RUToO+)l>
zw%gqWe?o#5T>th;IZ#-1&8h4VAQLKbLEAodFJO>$MF1=?T>v#cV^%CPPc5H^YpXXk
zfv&E(>mDQ0V+_~{sOe73`NK(Mb;3G&>hK2}{%dnK<bKHN<?W1*Ce+#Kg+9E?js3Wo
zI0=Niu?GkokX$dHrPenA|EC#e^mj~;EQ9VeeHyZA?c^!bhlZ;<N?xn2_lO1gJITxY
zNI?o^oFZk(B6pqp`2s>1X`*=!Q|_S6m_*LxgEjEuZD%4ftF!o0Dz$H4+71XGy}iYu
zo2Zxp|L+l#&~8P6#sU$c+GrV-5zyTeYEw*fZ<~%>RUyay4L-yVU^I{z>$o}HgvT(9
z4kTw;yFva?%n1aY<Z#sS+0%x7)Z@;VMkjsw^6+c;TB)<xRZnD=;4;8)3tj1Fidu70
z#-b6d^UQA_ra&hZKH=0G5>FZLq=CZI&O9cU&r|5J2uRP5R03cGQ#_^|;Y3lzH4X_+
zZ;;b8dP#*UPrBC(hSODBb4nv~hUlb=R;{p7A7K`;<AsSAY0}*T5i2`eJrJZW0++*e
z+uF5Ydc+eUk9gz}moSsR+<&s-oHE?SAcILFE<Eeffn-uyrO%g9h3Jd~(K)I2@Bm$1
z2OU)!);tzGBw_eY5)XI0r^@^j&L0dDwz$U}MdRgAMJ48EuJZg{<Q2%K*OUCpx+2A1
zJFb4-x5o#-839ovZW(;KSd`i8LefNo1Pg5Eevb&yloztK%Gnp|iN!(QWu*T0ikXSR
z!0pXRPdzJZhisP~h#zd#E99gtcUj~%6H#vPO13~rv7gO1_S<0ekUKRz8inT^d|E<r
zJz9f;p4*~8in}$&3DA5v1!WuAJ_kJ@#Y?b)1|uLr8d4V2-{IssZ7?5cPbSj?);Q<&
zQ6Z!^O*VM3=p-3$`w&W^4L3Kh6zeGo{bm69nh^Ycf3Puk$1YqbTHpFUS%1k?5`!uw
z#W%HisZw;nRVEiVpXaVyo(AnnHC3YfWGOg*#X!MJN4r@2U7bK~+urfnFm9R2gZ8<C
zd__>k`7yTum1PE)hhw(^DSlKgUu>^HLZp=qLNq7hXVudOO6DY4`6&M)O&GRu%dto1
z1damcMH|sx2FDkeW&|r84r^XhzudU+N5?P5R#0l5;x!n_fR-VXow}JC@!Sx({xegw
znYoSULh-%cVW_Lnf5!as%UdD8cTSz`$?-W+^|Jg_Z-&>dOT$lexBYhfi0X0zjJaul
z$0^UvV79c7P0{sK60~{mQmOVVI6E09dqkNqNqI*>f-0+Nfx<iQl}^4y_dCTKTJ6id
zk3=YPDhX;J(rka-xG0aCUk{-T=7r+6*AWBh!yS(%h{vNrVNTX)p1Dk+R92Dxe%oi)
zIbk8o8oq2%0h$XzHU^~GgRBf{5<H@Y<ttm)3agSbF^OC&nE8YhCFfJefzNnhQ@PE-
zVNzQv@j7Cp?tT)*t3U-8eA+fwGV-J{C~p)HC-7->ie(YZ-%rksTZLdhhy{e7uKZ8R
z{C1(th9ZBg|2jTXk_ga%ih}Y0uHoGb0Sv<n1LDY|-VC;gnGkhVdo~FeQ0Iz(=^9dQ
z9*dZZ&<~bKF`fEB78a2f2}@wTDv7!7x{yV;N>npZM&Au9fQWv86X9q<T;Yw%on0^=
zKE<o+0^FGd?uUqBltVuTzDREewqv_qeeDPx#E&!P-yY2Q6)vJe^X!Wb{g#8bz2nyX
zZv!UHx|)oFjos>E^_ER+*PeOy2cnlOJ&&Eerw^WaNw4Ori==uNb#CfveqX)r9SNmw
zlGTYPtgxONSf%}_>Y88HzM_6mAk#U6-M~}^<vMGzA^W=OLj3Ye`cqRi`YUTZEa;Ky
z_a6)mT{R2Em8F%514Z_7sIzDMnwibbFV1Vbi{fC9Wy;W+!vp17esV~2&T7W@!me=~
zFax^AIi9J?((tg->7Z!4Z0^!L?wdsHJez$ZnoDWR4wSJxR;Ix(m~NwW*i3YF`t~A=
zmF%32up1_`nGz9_UUorc@Kprb8#dx@3?hr6yTt#4Ch`(jtk)|_LNf*<F?_-g+2Y$_
z%%1MBU+ceYO}*<QEoZd-aqR4CCJ*nHdS$8UID16NL6(7zI)tF|0Fk7?jF1^!m)l<F
zW51l$<sexjZ(E|}Yeet+syp{i<da>zTJ7MSTZTzE<kxB!?%acth50<oweE)yc5Y*^
zz4-BLimZV@JH=Wr@C0X&M*+h+FlR+G?+G9K<aVj<`Yik!tvgvGJDR|VXl;%os+mRc
z<1ozEf$L91)tPaoehtUrvLVIxM5D3T;AHFL&Ov=PP1_jDWab#cPhs%w2IjPFo<%EV
zGR^J@nZ|+7CqHN@Q2M(%oG7RhZS-06F;T5ol6<{x8P6(MX{_B``@yUziHSnE9;3t!
z%2<~)Whsyx9tPi$PYE}3OBcJ23WVHZ5s-(%p9}mhi4`Y!feh;~jf3DEoG^}Z1q%8B
zo#(BbOe^;P9{HmA_6?y=!_wUBR7?`fJ%|2@@s00Q{%blJ*+EIXu9@M}>qgfqYYh0t
zIT_cSzTosY`X|{#YNLf_XZaiKFf0!x(Gz&wp^8%ncG2pTv?UTOyrr+V?$cYA{KGyH
zP9q{2)0ZvkLvdrXXh8zKSr7N5eqYTkredaRh>*o)Y(Gpp7;-tx`a19VeRmrw9004z
zQ!loxr~!=M<u@idfe&63FXlQL+xY_|T@#$e1(GKtdvhM`1q?JS5R??-7gYsSC;C}Y
z*Fzw11W1Av3Q4pNRL#)B1YGzEPD<C$!ctS5W^tUKDuF(p8Rn3ev1~!*)vYA$qeHle
z(Y~;ff(8`i^HXpbY~?Tm4IW~EZ2AODE($Hl_pPr}Gg!&y$8j%yOG?PgaG;M16e7G^
zH>611z77FsBzm(q<d9%-&{>TWeiL;QrbAQN0xr%<V)EbMxJqI~67IoG9H{^6MmM?=
zE>T#>M|+o|0|{3gW}kOCATlq!?q{4lEliHn$EJOWAzGp+zz`{#N5@SQyvf~7k~*3e
zdeai7Vqo~R)w_cEw1hzm%z1P#Nz`$>XqR%5p7IdQ5JiDmWfIZzS(>;S!I&yl#PDlk
zkr|DSEub=O(|r5uXvrIel(G^g-^V4?+drb{w$6dVm-AK^M+_KFpD`RNbeYVg2EvuP
zAOmQ{vAQXkX*ZOg`@MYFd^~|$aw{$-t<-fR#VftGO}HhA5z?>OI?>_F6WUnU{&Y6W
zoqIG~8X3lK@?A4GIGr}o22dv}qO9l8vx};s$K+Q^3orN(ayV;YgpY)RP8<0F1|4@)
znNb5d%Vf^oF$M7<hie4;`3UIeLi6B77AK1=<oGJ)Fa*`kwD(Vxf4$Mp9fa(JXQ*|n
zG(R6;mf=>KHPvt6<5Pcie(s7GVx7h*)ce5yaW2AO(ms{{@$}41G(~}{npv~L;0-*g
zx{#eLO}))yZrs+CSU0KG+@N5L@m;})>F0lw_w07%QmVb%AIqA1p5vLej<!;O+Ls9}
zw91OlGl$xW67miR#n^>~54+MJp}1I2YUIhpZsN4x3-QP0{b<@+V#!7!4QX+4ECAF|
z=NM~ZQEpN>Z1^0%!BG^^XD}a1|GbJv8urc`D<pZj#)(s!_2Rpx5apTLuTPoy0V}<n
zKOVXgv5Q*;Uuxn`FY99PRWWYJ1BdL+YRG1Oc|E%0l#fPC@ALCc+GH_iPIX-rT<_-=
zXaDRoW^6(}iI=4Y@V-}UAU<YJs+1!c4*v7KCna!dQG}aIr(p5@w)UF#LXxeibce3=
zw=U<F_+r<uRl6up7Qgh47>zEq8s|gFHl^$4_V*76CTX2%MJtOoZ!r@lQPQgLm}%tJ
zEwcf>MRh-MBvT?gd@I>;Nw?6b!_0drGM*ML_lJnyEvq-FzD3*YUdW7FZf1r%^fV&f
zsjeDdmRw8j+R!u@(f1kfowGG<e)b1<dlNdVZf}jGNDWrl%hS4SVIKQwro>><o&CL;
z*APxEZ_UQqW<KBE-RHcn=Ej+!r{I)v%<;5VNdl3+2h^)Cmwsy~bCBLH)QuILMvV<Y
zX;L9t6?RWPK_hnYJ}D=NZRlqCdVo=Fr_(iUN+sULCvgO~qbF=AlG|*FuA#sFrq6Wt
z4Hw>dIH8PGB5KALyxzeDIf{(8r9_e3b$z$9lQrS*U(hX9r4Ij65MXZ#?vy+10g2>7
zTiSN>ksZnogE3u9UhJIE$Wu1R$oW;n41--^@wPW2u`hC!V><>~eonw`F=${+=Tj|R
zmv2YNzxy;vFD|im@nn<?y&AFY9sfBVVRO)B)Peg=a5M^j9`<=XxfE!f!?ZwA5pf%n
zTjXxK)$8y=l~!@Rx$D(#U6%vPaB1EzcU7Wo7M2Dx4HLPgEt_JM+q<#GysQ*{At~7*
zp$$7YyQ4Qd<-%^=kvJ6{o~;rm4N%sl5E-rNf7e;lxzV$R_(P6f3fZ!OwmyV>bJaRP
zknI(Jj(gi0UoT+t19AGK@`pA*H=Pd?1u&ft<v~n-_;=mfzv!2=(q1uFUq&8UQxPIe
zHfTuO0#4b<@AG9!=Q>`%vP+dgj56;U(@|%wgP3@ben&zLR&XZrA@w{axc5>S7M|%m
z!!C)6bj{*M{Qyby@>l>2AqE$GA^=A~xWB&79TbTltBe}j{iNY^V~OmJkdKgL22??x
zi!6doe`&4<jCV&{Ot_)*8FFa(34ZHV>4}?ggkSq0e1Q^mHBKrLx%KkPJ}bhGIM3-`
z@*BKePX5Gp>4fhrnaNCMsEb(y<~Tt1g{#Y0IL^y)Zj$JPn?-mXS4_mnsV>jc?_+T;
zo)Y0b+eu|CaLl6T*p5i2#+nJDaxy#(Rj@c$(vxJg1S_0X@eFrc1Ef$4PXci(E8POr
z4i}utT@kZ>dJbXwCt(`oQQ?Uqz@LOB!1xZZ9ex?$a8E5SVEgTczF=CCI$VA8T^Rr#
zY&Fu+5L%OR3G?lcR<?(LL@yC_6RQYmpOOxp1SZtr6bx8NEQ*h0*Z*cq2#~X-#5|H>
z2e88FU1*YBI&iQFOH;1l_7gVYNlfDwOq#{_ZMoyEBzN1!H&`fN5|**jVtKysblb#|
zk-$fm!4pz>`YLy$3t}=-xujwM1+&;~2$X;N7sc`<x4PxkB=zH~-TIf1yXln&GN!5b
zE5alO*&>~jZ^yWe2GvB=`vj}HTtt(yPqS~qTh;lSYe#h)X}#yJN4_eLUr}=O&CKZZ
zn)>^=9J3ZVN^-T}1`LM)ndRNJrTSFfIy-KK>mXxSF~HET%@y#?v3t}njvvho9<5{!
zydd{=`j~F)oa+w8?)Fjy{0lYErDkX4K88z`{=JFB`0Qc^DHGR|$BQ~#^}X=})}#ng
zPK@*toQ(@fqK0if@lmw(N*gi>!N3ah)@Y$ngRodD0WD}NLedD&9lAJs*3Ha1ql*T`
z5mj`WfC{B+l+`|4C(1J0_(W|_ol_A)NxNeqzc!gP?vg>>XNqV@dWueShP9k$|1&cY
z@q+0tC4?di$U7tsi1Z~DK_d6VpzQD9$8c~9zWyz=Kyh{|bbsbvcE-iEzS%doeb?iQ
zF_D<8Fa0{|F10lH*Cs_qB$G}WX1J)H5}5xQ0h`?($>ud&vV{){yepG&_jh9crZg4P
zl4;F(4G|1_tCk>zKJ1k=ONHm;YzRf#o>Y-EB-IS*KbNsKoKfyJke~WRF+<{2<6e>m
zC+tY&x2Qf-*iQ*-{QCSrCA*!M*5fINEde<-+}Y%39R$7wHhJ877ldOJ4J6l)qS#<u
z(sNY+k=9D4hZj&4S$?)_1X)`-3eV&dYmgA3c~}H4S4m({+1;AcFe1hTgTjgmPb&l=
zvS>?8?8Ao%Cl}jdNfUfsfl~cag>s0ct|Qk?RgoC|^L++KlQxu@D4|P?b|?7$uup72
z4AuT31zZr)`sA!?z9|SPEMgZo-H|s9OvF6a?E(D_##gK~lKExep4_MCuo;VJM>85t
zwP|Echb{^_JM!gx9M&KF(?VsQ@O0aWMTM5+qsrPuJY-{<?TSFmdeVnMW{1Vz0n_Zs
z-8`as;L8<RO3mxna+5@$bjm<K`LvT?Kq5jT8@ja70BFr8Q2_~953XX7_Ngi^RP8Q{
zI2jBVfd4z!cU&GTO<hq9hYfRykKeCA^=q;YJV24JswQXDz+k3uzG*@Y%`)~F4Dj6S
z!C0gzKYrG-;`RTyHOqlPF`BZ-FspdtET8eB9iIn_YDVK}d?zlE?!dJBikDEWgA2AP
zr)Otoh7}a^*^kZK!ibMRn2#*(7a7kA*I|cfbhY+{tM(8(oP!Gzp2U@{EHl<hRcL;r
zgBL*`r4DT9y0&ffSRE@>d59tN2-LL{BZ$C<a3I5yrk15;A8>b>i_CHO#ASJWTarL3
zX;l1*0)6^%h>X&6z^PE7HOy#CL)5Y*#rn2mKgcPa2(QzNB$`|t*6V}M=MzWezf#Mi
z8kVfX{%;E{4$@fCQGKQcAtfR&xg82*((`q;DIXcxn=NCz4MrK4s(7^!VTx#=6$SB8
zbeVGGohyCJ!r36N^7;Kf6fyuvl4JAU&1OL;h7%4fjvY%PE0c4d<K%5n^-MU<<c0Ys
z7hIPzBr);0u5@+DV#PGu4kRsOC+^U|p%SQ;LhTF^`Whs<*LF_dQTq!;t|@0wleB&C
zytp~vA8!s{WcPzv+^OEOyM(&_R8vppDK)#}SmgufWmkFeoiPApln}gUeI8a&0?6R%
zR|R!i+$#c)?gxqq?g=5fRKfN#EaPDe&(z~{N9yH!Jq+NW5a@l$D658%!6hC?Kf2MK
z1UokrL4WKjyw^hIKjNuy$Fapv8NVM&cx|(x2tIWs3rhz;z4yP$D!x|dH=C5d8#tid
zn6D^N8WQJ>QlQ%7YkLy%%g@F(58$Thx9;RPoN+?_n^6HKh%AG}<=Rz@N~5`^)_aMc
z?ETpaJ|rmy4fgYC7A|sI(_315?PlAgLV7{`b0-;Rr!CVT{yaY{&}g-ul{@xauI%46
z9Q}ZoWokwi8x_EoMBZk8|8O2Nm`f&-x#Fn>hJiW4l_<Tf2+i*TV=<doTPm^l_-xyv
z*qnNZm4Sgm#e+{1f(QNpLfH8zT-y>w<u(2KG7qFL$>dj}12fBnn|EnwWVF$-PpgoR
zt)7+2;CEi-xCv*hkY)9J61gz5q>&DXt1^!oBO#8CQp8>iWIo^u0C5=#hNt$Nqq3T<
zH}u$xID&|M@{K9(WAX0j&dIwa^w!qJlf+XQY4>zZcTNuEa*;-JrzJv?$WH3j-m8!p
zOf&)>_ki5L6LVgYkf=wyWL!7b;z%<{Av3R4^ApY*rkOQH7w9E?5~G0W&x9AJUd}SK
zhL*;6J|o3W4y1<vBenD|z^_S)X6Oa%U>_92m9SuY{6mAzjZ!hih60QdR5_3osQEc5
zS}wv=xdK&yXoZRx+@N(PZ~aBO8XZToQ*kxa+4;O|l?xWq3A{62t(>gt)Q=rB7&8Q@
z1TOuZl1yv-XqnU6Mjqy8N5@k&*=)Jl+;e;W0qk0as46#u48^816$do+7?ECNjcFN?
z8))06c|<NZAg$_PY3aAxoSk%&e{>!jfZdr?7$qiLD4^Q%#Wdv;VbN`b%vA^v?=Yfv
zM>`{K4-b5ltgmcjKmsj@s^HvBm!KVT`-dWVC!F&3>IFvA?A6B?i%^T-w4T-!IgXIG
zXEm=z=M5Q~+4Vfl3U5md;pC%@^d}(4$%ANs%S|V-<#5<4(I4_(NX|@>aR&Ja-$vG#
z51*ec$H`nxb30*gZjme4Xi7A%!>73;)vGRyPL*nSigdj~Y=}oVtR}&iE#!6^VI!UV
zn3bz}fno`m98;CNpaL4*Q;!LnYjhmr%!iU_lb3W*lE+m@GDm`q+8&RY_DPe0!P28b
zDw=x7S^e4fxHJbzeL!w&9kt||u*jeQ;%Z6?#ghs>TZI@5B8jxe;e<+VK>qRY8e<eq
zKVWF=;=4%tmCGP9A1mBK8afOtq)<Fsm=j)zAo*&ba@P^meS9)_FW~0uNn47V)Kn$$
zK?(Fb$U;~<-?1RKnS&uvTO4h11%fg{S!$<Oibiq4)&XKyItl!g1idd(0rodsdHLy+
ztD%E{gNyTk37+@m&XxhE!QMsFTzx*8$u9oK8xDt9_G(@CHN>O-4+o>1E|wvZ4>z9@
z0`1rwyy%TGC&UQge~6kwxa37C0^vk%VyA9(6FmtRcCk;d1;e0_gbe|4G&7>~Hz^fi
zw^Z^u(37@iNa)Q=Dsa{BTTrNN{02f0rEW}20%W&GaQnLJne2az?Up2)%v3ME<L4T;
zM=N&=Q=l6<7qQDxs>n4#xJs}P>rjIj!d2pyup-D^#`@gib=dZJ;*oT&1DfkTo;)kw
zPJ&q`;z<wrr{lX|7o&M6M7B8cx6e_CE-BNnfx-F@sI=uxc_}D_i_JAYy&FcfbeC)%
z;q6B|kyNE$Gup!FMK-t`p|zO#fgxz-Rn{r4yLy$~$m#Yrr1@ai(++xIk(|X{(Mbyh
z&|s;TMxFdA6o0%^9fVy?P`EaOv1?G*bLoW?Bcs*GAw8ZmvNOOO)FCd$Q@q0yw_~WR
z!=EpgSkQOk6VudvG6<%?{0Tq5kCO@Gcg~Xu6@)lZ-$5V!$`ug!Q(D1cPN1J}00rRz
zSC>buv<rlQy{oEN=unb~d89oLPJ)|&*$hFBiRU_uk%bh3NG;%;xk1p8O&_O$)^Je-
zjcX@ZSVE@&WJD3Qv!2{XPKM@-7DGd}N3yIQTc^RqS<sy(p_b}U9(0vqaoy1!R6p6!
zs_Hi#1HYlI+gIoOu{<YVGVDe%k&}Qe@D6Zt&7&1fl2>Q2i!oHT2I7wMWCkX)I-UOQ
z&aoB|wHlh1lBFY^NDV#U*hml)ID%4TK!~|3mnT$)<%gAYFrQq_Y)Tp^XbORA_Yljx
zT$a9tW%$pVN>M@FQ8u)tp&)H7Liswm4UU9O%?nBsE#mfttmGWS(>UN7y_9yUP^XM<
zoY+&Gxnh9(n}l@_Zr#cBfrCf6PU6QA@(py-PnLW~hQ_r*8l-S>up8iIN->nLJ?i|s
zf-g;+nrCL`SYlGD9_L^sBS&Au!HNnx>I>D`NW|CWx#ODP#5q_2e~@U8UAq^`*`r$C
z$ak(E#)LJr;*uGZA&eLLzMZ@WG}jNpGu<3dIeki)B|PT0Tq|AMhBkz@)9b&g6hX`S
zPi7X><ipz-eGiRC#C>I;%fnn~qpJA>kQN9}rsCXk1{@a15$=?e10f@THJHR6#36F?
zt3EC_XXF<*w$2Sqzpjk!B1LGa<4wy1q(haQz(gW2TyjkX1UHtAkB`G+X%4=9dUx(I
z+r%;Lt=QwEtDFrl`M8i?rN0KlNlT(&KStp-EvzixC6YG4C<5Ko&QJPLuz|*fx~XFF
z?mUF3*T^@hx@d&8mEyT=>TOHZVXFen*(uuWelHX=5JQ4<1g)#A98Fh>fvB*6_KoY0
z?V6S<9YvpU9Zw8Yod^NSzlP9AZVoG{Q=n^59*;Q}XN>$T5jygexDe3C1`$!I_;8Ap
z5ELBE($ds~TK57Ngh9bBIp(-1(wp|tv_`RLTHECk(Ule;FW|8&+K)DC(gyMB;YMw8
z!NUoNy4TBHtP`^lT^_bTy|?62U)hkUqO@CY`sr#1YoU>1G>P1l&$Q=QY#px!o4KWi
z1Kime*%v66#dV%4J1J*cWSkgh5G_a}3>r+B=#J9bNv+JymrCn`yVZ3bmHk3UN&EI6
zIhJ&>gEmsTJ3DE)_LhBATg)dXGS?-$!8prxIQ52wgon6P0e6Zm`WB)&CmN=L&GSsK
zH_-KR*OtfoCZfZXvb{m1)P`_Z>t8$$y4N(~(N~3oi4(!*BN<I0%LtW=W3O*RK^Z3|
z8c*<=ls9n!az}Ei?hfq4!$=~6Ncw=Bh!%fTM0xcH$9-Na$`F^#9HttR&JJ}niyUK_
zN=bIx<6}FB*{Vhs=t8b9x!jKw*j&uJbF{;TdW^=e!39SwO(z-5`6P6V(Ja!?V`QRU
zauWyMUER9;H(_xiE-bueb2`#_D^IMW6`ia&WzM2FK6f{4!m;b{t2lRdh+nzOz2x_q
zPg{42k5qv)QUo<FLWJd<4s>@9W76?%t!dnUA75MyPQQ{asqz|S)QK}znEv^jm14Dg
zW^)@DP-^XefR@*v0Y_mz84(%;yj{raJ@b0H?hawz8bt}=v@9G156(e_ib>P~NBz7y
zb~O`NK@U$5MF{L5Q=?eSn5LRj*|Ulc7gy`}rxIM$&JehPs*A`Q@M+uuDhzjlktBuY
zwj`{vF5kB-DEtH(&ZviFZ>wT5Vmhh-;UNqo<n?&v=Yq|Q5wg7QXP>_|vq#X?n<4gi
zA>gRB2HI@}`pjika-(w6RlK{(1z8@m!gdF~e88P}lO$L^tRWYY3N^~uUtp^9yToC*
zvPb9hu+tKXKhx<7qQZ7r=~hH{BKYBkQze2F(*$F@guXZBj+9ExmOXK!(qm3s%`0YD
zRoq0Nu9)~QD#Wo5hLq|6h4dIz0DR1MN!67TX=;GJYMA5rein%UHYAgv;)oC#gCq|@
zauWDOk>0XwmC>8C#~O2H!wG9BgqLVcCqXj~y$DK%QLZTrk%Kl&xDsYrmS-6Wonzl`
zdlIePhK7cs(L<X_5LQ`#M0copsPf(5X=G_0KI@EYt&;ZPBYI1;{NT;>vYPz#BC6B}
z1&~Z)GAeK^R7f4wIJ`a?y!xtvgZlmpa9y~??o-fdf||x74?;)N1?YOSmsM5zbQUee
zG$1gG9RFgGV>>X|5B$C!m&Kc{w)mC<YR|G2?*a{E&cM-Cb!|2?nRs;;NBuyFw+$cR
zp#0Pe=~5U;Rn}=(4FLBKUi4Z~VNu<~rSaThJoXSJ+M9FS#-5jMFFA~ud=jHXoK0-j
zGoI~Yfl}DbeI372gOrsdSo|2bw-?2mF(Bctwo1CJ`JQ*lB389$sI6nX?s|MOPmAeX
z30Ny=FVgA@QG3n*b)_&E2Y=lYRO7!bas~#Yv7ic_c`k9C;;?Y6OT|P598L+$Gvu;>
zt&hf7hda&j{H9u@uvALk%KHi8{v8Y-p2P_Dpr<&v@a-iUof?<MzXy{L+RdF4@4Iqx
z;%1lg)>jQ1u%baTDK-qU+d#B?*G>lpkADRn)2Nhw%?LZ3`1pT0>5Qw{7EW*#^n@OB
z(1jb@?LmkxNQAbo3Bj?lioX*sE>jj!(Mxm^$&$=Z=n=x<`MxAI1%!zaOe?6Sexit@
zhsZ#dokuwQOY&&P6awUq4OKPuMnV6LY<-Ny=q34HD>bmFz=}87qAD4#Gtg!4Vn&2S
ziLJ$zeynbFBVNKu6Ro-~$aXF6ejynRE@~oq_)z&_ONX89nhMhKfl4^mkB7>Pu7s5t
zU{|Ey9`drWgDyr>RjBlE@$R(Xsj91$RK_)`wEf&DNrjsg7fVwwGTARbhJp-izF>Jj
z6}J;%$*ZrT_xo;{=Yt<DGN}|7d8t_QpXdTs;aNoIQ3;&{eFdMMU<%pGsCv6ncm3G0
z?RST~TA{XmHt^(epRt-|!V%ltBBIPlZ7|)jPyA*JjnL+fmp?ua#-Os`AXL)C^>NwU
zk`eKdk)+&yOww>vMIWITExQ9;2{nzZC^~`}BKRKe#9i3i4IfB;+4^~+04cM;tCT9Z
z!X$Rd2xK~!uw)=Ft$c-pBb1vtBlDkoz*kYC7)FO64fi*GW2LY@9N>Ut)-&t3C}?zt
zQcqT$+v<nHk|f|rOl>>g8{BPky*7J6SSdQ|uB8MzRoE_?t@_^!y<VN*NQJ>!T%Oq~
z(?2@ia2>nJ7n%GIf&`Pn&?3t=LoK~ZEycb^e+Dw)hc8eoO!gXm7UJ+0Qa7ZJ7(k=E
zdMyGZ_A<TF)BA!;2x8_v3If~d^$#x7N8D#@vu6&%!(rWKbXb=}nE{_F4D@gUsnfVl
z0>33<9Jh1%D<_=eMiPzG^v>3587Ic>y_kRdS^X(E>-J$qUQC~5DvRrQQdZxxZ{@-f
zvGmJMgq%;-b9}xe{$*d$ot|fiK15Uw1B1!I!j+OZZW=O&9>aZIY8jT9l;k)yh6unb
zoUPp_G{;7sz`?Iubf$}FGG(FMKwc1@i^D{6Bw*~0cC8dh+Y+*{Z6lb`u(QXDBql}A
zaE9uil!&76LZmcv-6U{Mp*&a^0{kCh?tK`#zy}1~Uzp0!!b;IV=^C4s)gUa}&RTZk
zAbmrm<2LxY(KV0qH3@(oO2uRX3y?Jj=7A`97SF=7ca6a@0oJ7BUr7ArZ!WL4>seA>
zqB5vZBvrbwMyB$oT}2;=vKueYiw`#>x;vAavvk#G0Hx2cGG%ecFd92>u4)Rb9f6m&
zc=y<b`!Iwyv?YO<5lGXkVV4$6f<)fdyBUq}3IBdL86DChXU)tVI_F5>04MewCxXX7
zBuyGQ-#9hySKe3e+*hD=^Qiu?IdGFj*)1vTY#1)#VGr^Ra#s1SZDB26n13y_X5W2B
zGR5L{a!kP$f`$wz;VgQlXZin+JdF@4Le8QF)?JW1|5QB_BQE+h<E3<$kDG&-Txw5q
zl>fw=HaMRmR}54_s;xkzCIFww<jHwD6!RGk0(r5$q+*AYS0g@=lxTGP_n1FI5`wVX
z$uk4N;)9abURh)p_+$gcmnFb<SBo7@cGz0a<S{{fwud~2(W?mo3`MsQWxE;%5{&kz
z0H^=N=&bl_q_#Fb20B0zryYoTO+|r+yK4o0cRYweq!1$gW?4ukvMfBmpB|r@I{j91
zn&JL1Z?5o{p`mS_;F%gqj<yr`Sk}gyI-u}5^TL1LNszi~(L@8a@16J5Am|4I?UijL
z4|ib39FZ(PidN`daX1VmQKa$dIdc@AJeymK5-!+P>_K*34N1*Zi3w8EBAQD$o=<C^
zk+sg_HwCWOq2cKE`_W94Vaj<IZ_b^RvYjNe+ODkeJ87~77jxP6kU%o^XMth}PF^cP
z_4pN+%R`{7S{&^Rc%$eOrYfb|#?fI%zN4<TQRRUD5Q?xi+uS|vvMF`)2@LBh>YW6P
zArmr3vtUH;u`*{ggi&S-x5KTQkvtTaVTPXVhlHijrfSH}>dA5hW=x~e70<>F$68mn
z+S)ZL?qdQOf6%~$lJmb-M9<XVge8@wfmSe0MF8?2GCJZ=v4e|;a?xpTd6m^~2Dez#
z)4i9-(WFT)ABwH&Diu{+z8a1TlofwZYbdzgif!3Sc2OB<Lsm@}1>1RxeO{_d=s{=W
z=xqz(-C0C#u<vQ;LDqcy-%NVf$H)HgIF6eqoj!i86%{q<iv|8>g)d>cByjGf;DixL
zQ?a1Nk(yy7AoMW2t^k50SuA+(anKO#Mn{de4zhG0iYoGTIUqb)p(o-DHhdbZu>vV3
zQjtifPWA?t)$|kds-ES@;<L-t9ox32kp5RaNtj0Ro3A0A>h(E6dWAXrwRe}SEmt(o
z<)4%((MDiw2#8P4P`Sl{TSe$}^1+)*v-PL~7%Z!TeiQ<H{UGioWi{ZkH-k1Wb!GuA
znbb^0FRh6si8$v~c2G3ujS0W>G}~3m(fp!B86nwK+-hQ*bhgM59*xA6!!u@yM~_^b
z_F=qWP!cvcWXM`j<qqP|Xg$G0GNNf?+&oo5P<cU}!TH7cC2`(<>Yx@GmA_2$>SNAx
zF-VhQRo{d0iEFVD=b)BtrL}S&3hIA+mg+ith>h^yQZK!WZ?p)Zs$;;1rD5uF467!J
zT73HuA37di&@X*^34HH6GWYM+FDl@O>B>Dbo;zhO>kHC$M-~Bhs&W;BijC?d`4Xjj
z0lGNH1ALMUPcE01HB3Y`?j|#AQgatK^B@G5a+-`R0=xK?Ri2a#E2$M<-L+zBS72Te
zawqktY)iUA#%qgbgEIQ0W(x-THfV5TdZUYDgfYqc)(-E_T~<%?T=#RhAI2SVFD&H>
zagN3<V%(Q12H{WOJa0>}h~B+s0_T^TUMYlmWK17ZO6N(yg0`9B91E4*B%;Ay>U}(p
z;yAji9MX(S{xiWXDSmE4%^frt=ld{652#~k;orU*#@2WCgPI6Ihex>75_1-LSZj?$
z-U7r-mGnvy1xl9&#LQ3=hD<t8Tmo~84~#UmHc$sf@c?cx*%O(}#Kh`(`0Xd_<Dd8i
zj5BgO4+Q_yV3rlvh??)tO6n0gFT3RhF#Nk5k`wYM`*jIrkBkwaOV4LmD)RsIvOLX}
z|4#lyQu2mW<+f4bI%4(u7158$hx%1r?BIxS_)MRd6EddO0qz;!P-tGl)(=G95i7X(
zh6IVlu5TVX<ms*^I!eD_bJC)@%uKmo_N3BLIk~Uo)pCT*Hsxk~{`&yTry?`tY+{Y)
z#FCfg_qFKl-h)6W=RJP0QfAh;nJGn9L>v|#LkLNXE^+eN{y`cF5j*m((j=-CArOB<
zj1BQwFqsM-RQ!}A!P2EdvPl|AE0K~@jnaBaPteZn=JVqJj?`)wHF(H;?~zWhl@d!S
zWCIaIN><4vJtsLOqr^$GBn8AEPA}OH(Gglh7_sW6ENYO1o=Z$NpnIvhbUmJ~`E8|T
zq$G;wl7jTK2ETQ#wWmxIp(fSA84PzFeNUii!SJ-{pZO+_PdVbHJ9~``PwneLQ{?nt
z3-GaGA%9tEFwJ6MW7<>r2r|Yy82DncSIkV<Y<6_vvdNWPCOMdWuA75z8D1O$SBluL
zq$z8V8DKq$3d*;{=ITbx4b}MS^%V=(RE!sWR?){etV5VSw(N992O5km4l@){b>?J|
z8c8~>OquWbk6fvOXPrmd|Ku#Qnn8+qc4c(Ds4nh@`xjv73LrU0BawY<ruREFFX_R#
zEf2dZM16XyAhB3x3|G{z`h?V3#inf2IotW3^R^OnYA*izkb4f?#&{V?a8#}D!Bp+9
zv*0HcFuutY#ud>zv9Djl7oi{j83U-K89b<LJb?R<AUME7Qb7<-hP}`Sn8^3RFyt*<
z4#8omj^a4}vUVb~0^v<L2WXHs+6V$G#q{Lmpxyuot#uX<j+IhsX@U(&I%r{@*6W6d
zTI*8c!iRkNrnvz0mI;od0|=3*hiR*2&jM$G6=14U1pQ;-nG?v)*N#FV(CP(S%*Ucn
zM%G>c&>SrN3(vr8r5C=_@)=pVdMSerZ-?@gdO_-$E#h4BcfBSVB~&E2dCH_ew1;9s
zEUluK6*(?k#tp)<5)rtWe!LW@06(t0Dc2gpgo^u>$hVYJyjM$(l-Tp;yDo=(!#xp;
zmz@+#9;`9VoR3RD)U};c*5@IrTI`juN5y)I0fNP?3!vMoWXN*hT*6`dxb1-gL1wp;
zf7tZZj86y}c%EL5Dx^Hn@=@Hyv^oKT1NCycsPr>!=?8gSFiLoPJs=bMS>r)YoQ6=+
z>+{@FnRZ@+Lpt`krJu8@y~yZgNOKys{|IlW-ANR-Ts&bHBdrl~yE~!*CQW&&f=bZs
zB0|JXtEP3}J;GeUxY52yi<E3qxUo~x2iaV;uEi==f(?|a#KfDgdba4+tv+eghkb;*
zYolElJk^iA?z%&wUXpkHvT%uO<~7*2u&Kg`U1&rCaWUIW-4N;2@&|akkqn51uNq_k
zej>r|QRRdsGLr)KvK{Vz|Kdizb@fwl7+Zb!`ug>CQp-GxE}<^eEL1Hr{An>~L#r}{
z&`b^rJE<&2iC0*fydybO*{$4}?1)cI4xh}Hf?cN|%5Jf%ld-2-7+bT8O8~lT{>goT
zB_ziHl-bN~klT4W2GM{OX&F&)vOi`S*Fvoh@OO&j?B!Bv#cn5W=9ck)nxfml`Lp5M
z(*#K#mljEoO7ro$Pj0DLgOYYNiUdhL;oD%cyUGqn{6RY0ewTu41j2To^5(^_zG=4g
zKj`ETL3&jXVIm7{#QS@@!NUyVd3Q)1s=lm-Xp#Ky>b}Ym4;k)yfp{>1^pYxE%{pY-
zIGQ)?j_c5=6+>8iQ^{D#r|jCDKr!l7!NTF7?R3+@)SOX8?O5*-nasa^w|za4$-a1*
zA66{rflVUhB4{?oT=VAUI1`Ib=G1K3XiHW-Yu4wWwY0Vhp|~m{t5LZREyE@PQ4iyx
z2tblxnBf!lwD|yo08uxML;+U~2D@t%uC`jQ#3Y}DI|K%8q7!}ueYg+Z2*C}v3TO2m
zvN<>&JbVI%0?w2dQH^(u@2nXpeCCyJojrtSz`$uftlmt!_(Lp&VrZpyCIU6vb|yY0
zPhW*0EAmz-<6xODB3~@plY&42k~*tmGitcd3dD-P`xiJ)0@4>6WqDqZ3zGc7QhXq-
z;ZyuKrZJC>sj_q{nP0PdRO{+VxA~(aBjg5HRLiIOXq7isMr`M5vr1MZxP-1t>=uf_
zy-thXx}*Qxm^wIPHYwjYId@8*ygNkPJb2AJeKpVKkh$*AQcY!=9hquEe^Ok(@*)E}
zxhwyYsUwdF9^giz-t@;pW6v$Pk@v9Kk3!!fw|OAR%fitS${`s*T8=tgOEj$_KYd6&
zGEFx<PG->9va7U`#oG~pNG!p#1c%f5v^wWLV>bOTouE@lT!ekK8uHGfB0}%cG1{}v
z8&$P#R!uv44K+uXYWQmGH{gG4S321?H0x8!YU^*6Jd9S=<clYJ#MKk?EsoBLOdeKs
zT(0pykzUDIWur4rOVPftYlte^_KfY$senim<V6!hHXpq%-H*-g>7%(=t^(Yz9MI_3
zI*Rkm$uTKzn<cd!ksPN22f>h;tMzg0yI!2xWYofGJu{H1U}0xlABn6%bfAs;m|Yr@
z^6{*vEVBc%TY1GVQDuX3B62caN+H0*)}B79M(T6g&q2vRojT~n(SW5}nV5h9vGa0-
zB6m6~Td=_QuhNWuoalQ9x1vW+NL$T8Xw@C?ZPeqzU)HR1FvFc){Ba!ts}eW|9Z|2R
zzb~qh19Ls+5NR^=+@KJPjvgU^cO2H?XXD6!_oZr%s%Kkxc`^dvjD8g+d|1&O^xxIC
zU#SctGDQ8c^g#GKV)=%LPhkg|?|L??w+KOAxNh?-zzcunoyFVw6=H?#;lD790M$qd
zfZwkpZ|nJl^TB(#KD@0#UBFi4aS6I`WzsGdZ@CMKjSQ8|tCb*|ww|WS%`fu=1wCKF
zv#IKja5(~IQ=n_5h15{yY)LOSB!D*g2RgmXt0h)ap$yu~QFx~61xF_f(fPkPopxhi
zWLwPt&`@0ep)&D*YqB9bGwgTwEe_!Yd<xsJEq77zMmEMreSIBlOnqje$s@DuY+&|(
zZd*GS+`iuCLu-`}xFgpXXVuiq{8HD`ZMPOFnLwxT!L}~S1j{Doa4y%Ev$;u8{^Gq!
z`tXwjiHK7wy=h~~mdUf6Y*9AcmRCf=s$zX-8MO7#jblzXUUhiymAaAz(dW_bnFI>u
zkFk_mD+8?YKoTfT)qEosW$9}_YXPf~C|xVs(!AeL(a~+L!=WufKCt;}o^(|!Fc$!x
zVlZW7a#>ryE8R|+plB#uR-u!(QA5#Q&TBkxcE)+@B?BE<uEy>8D;kCgmdTb4oj)Eb
z|M;o&zOkv-B#F7vrUA)%R6qKl>i0Tk{Tf%fBHupTr#=O|n50Q)SDbn4a@4eLb*V~C
z<TtuYq0+-rpJa@g))Vy|PUJ%+;vl!WIbG<edRLTK9$!aI6hXNuf52UbheF_w-c(EM
zQhG-kq>cy;v4D#h)D;3^R3puiwO~#M4&b<lUgALtm8e`7T%2!e=FdjZ<sMiS0g+Tw
zO<R7F{K*;L3Be*0Y*v|Fl>u{6^ui4D-)CbJ$&cCRQ=__UuR1}l<VU+?>UE0~Vn-R*
z;Fx#BUhA%+ijCmNcS5~vSFFG__%@z|$954UP!GS`K>Y8f#aTBr6IKispD76s<E;y=
z*fP73I#lEbSs34FC;#*+1%B1l<+HC!6#>mn=GMb|2g1$T6wai6(Yg*Vhx&8VpfVQ4
zD0*Kg$A+jBLc%{YO<2IJi!veK(u-lSIh#oRBPCkAmYPdU*RS<sHWJS@((gs3*Tu-~
z+LNaTgx}_9$S^)InOZebPoeghIUK-NQhDc{KN-Fl2aLAaLNw9-a6_}yzC*ps3pU5O
z#^KJGp0TJA0=c_-$jZ>1_Wwz4(9jxsbDQ@_->A7hrnxLU*ju*2JujAXsjlE$)6gT3
zQS2A@y&vw%$U}u~4*8_J<&{e|O0f2-QQ{)J^NJ`W3omtFOs^yftryU0zvoFHsvrMt
zHne0|f3tMyEq2&uN0ALWmvJl1;yO&8ik^S%9czDU;NfoTXs7C_zU@s9j}g#|4wjgC
zl5m6w4(@o;$hykz4lqEMw*3E@rll$buZx|lDzfbD5aLMrMSfBU$4=$Od|f8i;>kC+
zxcOeMTATKDtMb?W6M{9FbvLdsVQLoG5_#sIwyTUUcD;OTzG+GNO<vSZu@jU*H?YDn
z%YuyFx+w-vxFtv^5<eC5nbF@B>s)F^V-ov^KsRufmPxK+CHm|T2yeFyVWxZ|D+yqH
zWq2=BR=<oFUsaH=&h&qB8PVppZ}e1@VaUMYaoE`xwSe6%DL?0!f-nr3w;6j&${#L2
zeZafm#JrrNe7(jK%Sve{lSNcRGr1jgOp7H=oor2ry}MRTcIt8WabDA67zFQ~3y+Fq
zS7kAFycy=9qtl{Uf?zC#K6bR}x`H9f|5Wn+-GL?BAKX+L8-%r<+H^T=DnJZ*x?1{Z
zCb+L?(D=qao4F_=x&crxGdT=Uoj4PxR9wf!7%mDi6|!|8T;r};Zhbi;<xx>rnT~2g
z8Of=2BGA9OM2<^FDJ#T;5TY_fW19{QBFB_c7jZ<2l4cp$v_MSeR846<hRb97>m>0y
z3{LZ-hU9jH?5Cm%9is~O4mNjGBQP6g{T8>O4b50-TAS+plzt=kb$tDN$de0y<&0V~
zogK^NFR>IcF<vSs=KZ3+RYTEgOp6GZ7HS5f`?BCc9I{+LTZsuYxR>Pd15T}S*>!u}
zPDTb#C=ZGJY%FcNsbI~1q~R$+PT{d}6(SpYB9i}tSWK}p*8$0n4}?AJ0oK4An-YL-
z%0Acc0fUu5%w|QUX(6AWYYG%Ox+#OzdR$u5iCvF-<>ihu_NbR(r@rr?!9Z8tNk&=h
z27EzeF8qPXBrl4s%QLJuk4e?^R+F7A&92-wUFq6Cugl#L&2(&;d`BM53W<dDPlkC5
zXZczm`XEFZA-T%)Yw0EPOY_#2DK`{8B@e^f)8VEeEEnqnuz3>2(6wH9iVb_{&X79c
zLjJss+rF3VuHhiUXat)J5~{edj`bl3n-^hQdq}8rL#bZl@FQ(O3ztIfj;?=z2YgZX
z=XklDfNK_0mT!9~fIyu@kVW!zw#fwxHkEz>;&+Cnf0}Maz8e7gry~G$(3dV>^)C)m
zlYhqaRoYLmfrV!AHhV!jv&fs8YQXh(u8CWFX?V5FSIWVYXk^HAQkJw^wmu=BYI^kJ
z;S_tkKLfSyenfHpaeZ<AH@E%Znh@6DW)ziuCV5yHU^xsW&Ogj&OH$0CvXB?RA3I=U
zKt257mg^QVW@XLsQK!P(&#T8f2@{3EpIC!2gdl*?6^&jN@!c2x?q;P=Fqpkz1)uT9
z(EDBqugj*s<Oc`SByyPjLl|Naj#b`HH|5?f@q`-g_dUe}%qL*l)H{D&#T!0=pm~Lv
z-+yTSD#sRs3fQ8Q2_D$d)1<81Yn4DOs=+Ti-08#`lGR#*`@@|ckz1(ciPfaMXZiJy
zj%s7ah`0B6;l9^&qrtc@gqT{?<ZBX*u@Q}guBm*KSR#rpP11`Uw^+cW*j7|c1Usx{
zw;S<A_hTwR%#o!WA4)2)7n+ooo`<L#hd<K%q~gse;g?aLVDsr0J*8p9Xa5);9;fAu
zJN$$?{07-!sLPX`X6KxA3WaTw$Q99~tZ)``jt<v+S89o#2;HX`!VB@;Tupa#`6+G3
z!I)BzaM=-3!S;}hQFWey4tM1;D(F(B%=Y;13ptdl>6^c<KxSCfIIS#HjpUX&)&oI+
z2tSJlb82#DQF^hvL?KmT5n0mGH@)6vI93bOSsQ;du1e7V+Z})7ndFqg`!PCnccPef
zs5Q%q+r@NRL?XvNWJWonMB1NdD}7YzE`xu@oik4DOt`VhWYX5bkLD4_ElO$^L``VR
zIZUw&v1n{<Pt0<b^hGwmE(U}ev5u{(E|xJTWVf%-tkp}1sXUz4)!3<Xi=cV*kG%*U
z)p@&qXs=tk`I8|z2wYO$RK>LG?BlA|XPu%mP;b$Dz<aP4D!MP;ol*Yj(J}U06U*Hd
z!ZsbX1L>>3q=)h+CS8v96rr_k&=7<*%ilX8Zo43R6Mi=6+!~@QjG2h_Xy)PD?UR6J
zcoBYw@aiw&uys4Z%OMMi+baDRK<{ew;omVoHiZw@=#?a{Z_>mVonC?WQmIAqM3r!1
z$fX8#YQA+q%?EH0p3{WtNiW)vkdYQR;N(g(c0lG;>Xr&ZYfn;{E90$Zpip}roouO!
zB|4#?hd`M8cIuinm%_4#;6LpxjcKNl<eZMXcTT$9ee|ar(Pn#4Z5*$O)|F0IWG|n%
zLfkvh7u87<2q(pp+I07Lp`xSTtef95t|6kMl&zIbtB-0%_W6xFukH~QK6@-6BV#aB
z@6F3&$uAc3a-7SCTYSE&npNgz&^m#T%Yql;1)_|!k}vwFZl<ggD$nw4ESAd4ys<YM
z=d`ZY#pY=AOJG2Kd6ba43zpwb2{*p?+<(M$x=z2#hdnqejWfcKw84wcEit?O#jB7h
zQFFw|j*l*G@$0$nsBYf?3P(Sl-H{KlWCLV02hz^OT=kpM9f)}d$hlXw4sPVh;urFw
z!ruC1@lra%Y4<C;zKpc&0AW)e_nC%MP6kSKA3-qz#3y_KxGZ3x8QR%Mo+Hi>VbF&l
zUH(=oAqVn-qktPx4=wc1^fme_)zMe!ufVmHqoj~%j=xGX#{{6HL56kirMga*`q~_`
zE3#Gag~$i$m%-xOP2@+UM9AuICY75=iu3Yd4o@zyV?(J_;Z?~T>6W`CL7Z%%@;ie$
znsr^J*`_aYv5oW2-Q%WeH<0<2`R1b6<lYzEMS7(75QhylOk{9VeOuLCfI<lI+B3}`
zI4FZ0zgG#1v0b7gz;?aBhB}M|4wh&X!&!cs2JHq!W(ZJmmL3966kkYFEq&DKJBfbE
z!EIQ_tbLS@>d#hd)cn&MPkLow;p)lbeESEFbViQedYTy3BJ?h3#g*Pjm;Rx<7c*K4
z8Yp)$=Jmr@PAY|}WypW!R;G#q8M2z&?ve8npAFf}z(aT-nb@;8k?;)uu+1zb;GdZ?
zkclsqpf%R(7O_-oThuiGLw!R*0JfD411y?etRH{!sS<)xlbx6bLXCu~0u#rfoWYM)
zPqg3chdDj1Ovn>JOqh8-Uk?KY%`7+MU=V@ESkk}A1r{6l^O0!5n@?9?t{~1TA{Ij~
zt~k{TC!`=a!6AwzdOMCKsEd{)T5pF(hIh65bd3gVMh0upBrn?fA(xs_#lB_lg3M@;
z*Z;ucy(vs~H9iA~H1CcdXg&|*%cG6P%Eu*Z;hv|_D^iWJc5kA&6!T2^M60@^?&ow<
zmBFjit#h_LKxLXtx2K3jJLZihjh|QtR7<g^n;Prc@3B%${i(zMf|PKYjI=#{0t)vo
z!GP}Q99sl~4z?eWC09`y9Vrx|jZ$YFrDLSX6YbO*ix!9G?sPFhFreL3(nJiQj}WG%
z=)hB04Nb0fvWBr0<wdoc1c;Mj6MV`~K~80e7e)FZjtJu{9N$onvJAHf*%eWLQ!(%?
z970Wx){)TVx{bu}g%;5`wTDR@L1y-*xaY6h!XFB<&zMW21J_b2S?(Jq0N}4Lg(lR%
zMvx9c!B<a6!R4h(9e7Ea(uGNI62(99j)qLOnNco!uiK%*f=~uc1WY1Y5VEE*ggq({
zI~V8aD&-4>{PlKVCP8lSi3ya}gu)+(f2J_umBa`17k{(}aC7n=nY5b)iI~2z7CWWR
zw1>65ooLp%59A_peip?A^Ng)E^A@cg{O~i7pX(CaWq+eci+~C7gRoJ{UPkEe)AMQd
zVy#8*_weL(k<mCCrAJZfms#m!6x%ZYB9TQZWW@6ASZiY8YP;z_)WjBe4RwCb#5Rr=
z>U<pnvny_0tR^L1ec_-JhlGYttk#3$H*P}i=9o3~q|Tv3N?yvC-|k*zTmdSq(kiI+
z?31(4%|5Y6EoV;Y+u@t|^k`^X>h4Bmz&7aC9$moga82W=A}4dMgPFSXB4jaYij%k*
zH=x9dg6m!5iVmfLKGCcQvoi7ZF>&WDB_srj%Lvo4slhPCWx<DmEYoT`Pd>>(Pf5Bd
zUvYIYA?Y%EIN3L?+eDAJMX=18qF5GW4$oec!{HUmcp+j|0|~SvhNiiD&NnTz3t)>x
zY_DS7-AY+%41bLl`{3jPlf5^A`~G0Yw?CKr^$B<1nDa!B*EX`hr_*v}HD?vOi~NaJ
zFKH2$J6Hv;Z^S^~gk|a73b83FDUFX|x_E#I5!1g6i=#-<bE0OD>LQ+*O1jB80*PW0
z`ksvh0m~6@N~OGet-xn2D;N%0R>U*mp`#WMpYS$7KxA`+0U-=7Ea+xWMd$$YTc@4M
z3rc?J0<jphMv1WDBUul#*)8=q)ZiVx7TXGXP6588K_c-AR)wH|)x$XQp<Y^GrhgMP
zfyF72a1R;~fE)Gg;HwJr-H(LXEU_{9!mA~7HwP|FoUw*&a7L5MX{z1Tz1CsZf){sd
zo8JtdoF>!OX&j{WI!>?@<f{>cF10h_dqO~%i~zZDO`YN=rtRKchf=T_x)!B)J9!@a
z7{=;k9HsP#b2Au{@Cl2)1JQm2i{wEd#vUsO%*Nktd_oH#M-Urb$1#ql1L;z)TWt&k
zS!s2gqWcFTfDHOtgXL<Bd49>D<5pu#m#qk9c#OUlY{n|AR78B5jipq^?{Wr1TJQD8
zudh2Jw3At`pSt3s1?)2jNlzE)eQVNf^NUCntPdaj=`*`zw3JCFZCBWv9xYkVAdu;3
zB9Shus{IHe^lL@XYkn)Hqjy)|1fx=uE03|7vo{M$ITyHTf*DS80@@O87`!e}7vlXD
zVQ04f93qM-cCb=p8VIr$*qj<5vj2qHNL_(|X#yM9MD#&%Px(fr3Y3O0E6IX`?liu<
zSF@6D)Y66L@GPDU8Q#poVxWzt4c2A}jNfBZ>#9M=@*uoGDerR0vu{QrIyb>M+R>G=
zhY@N2&CJ|ICVT1CSf``0lqz*%FqiDMd$@F_2iq!|vph$~7S9dmay<?{O~MKd86o1L
zA9drBs5M1Ks$im_D@-b~l$W27#V}HOyVLrWx7N&EU1ArDl`7aD6mEpT6y)IjuobG{
z15gbYKpGMdh28(0ENp2OUicmhKM2Am&e1u@p|$W8tE)BTkg@|oVZOAzb7}$TPqh<%
zT4`E6rWc?pU+NL>?gD#XTq^Fl0nmMaasgeK2Nxo?U|5Kg_-)hZn#gBC_Fmjh<4OsC
z$S5FAseeyJ9`8hnj=FhGXm_{y+{fZB-l}nIHj^~I$O%?_lEZw#V22c|oH+`<&>W!M
zjGYVWT?zAgs98fvjfllMwa?P!RIU{T&5@yGOqSVZ1m|7nVG+6z0t2QHxcbdDncg|J
z`iFjXUS(Kv7w|(1cBL7pm2!)BpZ%sbv=(KfzLr$_ghVa86LN4N_%b>w8kSi&yfkIa
z#7Uewp;$swzWg;L!R4ajL%;om;6Z1FsBc4%nJ5~Qc&PG6uUUs8U?S=O2xmOhR2PwS
zY<E>NVX192IbSTqJrr;4kU$e2%b`L<9E@gudg=<1=~sGbre@WP!@K+emX-$G`t3O6
zbVDFhw_08J*cXy_DiDqf+|2#EM=u(jx24U><vc>bbQR!oYR2Iw#ZQ_l&&M3iN&mQz
z0R^g>aUHb)Y&~aW?3*PkEb&q4y&|f0RBEWy4Fig*$-ogtiC0d}FlNF_I{{q_6dnh#
z#d49z?mJ@_bG;_>m|F2>7uD#^71ndcM@Bo=odaf9kHlG$=IbQkfLpIEH}-Z_c~NZN
z&g;>)3J2wQ{DF|edDdMX3jCF|ojGMJol?0(w%m+w5_)30u-sj25)&I;>}`f~$=!}$
zdHBf8fBsfX#Ft{AMWeyjobDe3#gUkc94J~(kZ{u@AY&g)owq>_vrnRT*ENzxsM##*
zb<r*_s|$DmUi;alE>1nqWYQwxbfzzO@J1WL@Hw1XPY&zJ4c$rTGW#eFkf;6qnmr?Z
zzJ?4Ro=R!WS^nII8eUm7d!W9(D7{yHEdMC`ME*Y+-<CI;`qB8nt|-oG4O-?wG`<+$
zOcoOtMg1ujuAniQ8vBbN0Gc31IYA4=-rLZ3CdZ3Fl&qG;@n>bvVvv!?ZW-J|+;VD!
z3+0#@xm5_S7iCkEzAdO>^)Mh$yk07|6m&Nsk|drLtfbDh14i_6%U-3()Gs#F<V^Px
z&p9Z~V}3&jnh2|#f|-jmN5m})M-9-Yn5vnY5EcqyYpW#Xu%SR3f^frOX<GM*f%A{d
zD42_e%rxy@U79%6Vn=M<?mkYKVVPH!t8F5$WA@srw>M^A-6j-Ut9sTbDk?KHwRxR}
zdYU7yvi6l|t~seT>reJ>?^JEJfs)DVQmIa1DjhwhOBQAE)pW|J=pZjpElSiw1{L@?
zW`@;mdOi4o2C%@vfjb4$?BG-jA*QdH604k^&OgkipUU|=XDW4+@%B!^JM_l06ak<p
z7VPKF9K$pQlT1dHFXd&`h;!z9;DcZR+CU(IL<4ScP)j>~4%+cRr)BxLK7goJb+fj-
zyVK8zz~w=<*SGldik9=vq3^d{*Bc8y4e?<EBn1?K@Llw!0%Hr_xrizz{8)J<WsWk~
z#!oS9l{qk^*t}L-hee%~vm93h^>MU%z`w`CKHcz7%AL@wktUia7)5Ssz-2&7=nh9&
z2d<mvL>QtlY9YR%!q748FU`7x9lrJZuBor%Uamxa^Rd_m52WUvQV}LgclIv}JWG-q
z3&@o2pKMwyC(00j<r%>?QCO3UasZ^V>NZ9TzpG$uZXpP338+NxiT4j5ad)~6`|@xs
zVf4X*sA~k~NURRUsw_dyNm7YL*<;U_jo?slSgb>!68cy|co8_m%&MPnrGMbqh@wby
zL0f{WMZ7PErXYpsJ)xV#yYvo)IQBLj@j|#lUhhj5J4A0-1V5>6fmGIq2xfQ~Q&Om5
z2-eDxGrp62BkDi2z#|twl3TTJs0_g)50<AkA!}OP!b=zV1C#U11&5&lhStW+SM$o!
zr9k8>XK<JF&C`dNMw1$jJKNC4)5B_hBcv|$UfML^a0k~GZefv;y4~(0HG?#SZ%?mc
zC--m1kidOjdYF!D$I#r=B~zr+`;RX$5z~!`raR+cs&6`_8`DBTEofbK+-J@UO^wzz
z6I$)}WBOP8fa)THP!D|Ole`kJJQGP>z7K}49XPmpd(<Jua1@%Tq*o#B?RA4NSVR2>
zIw#-PG38^O|8T|56Nml@AO0(v3+2s&2^d7O9|IXse_Lio`-GUtBwZ0;t0cpm?9{DS
z(YucI^$<j3hD%7Ef|P|KR<w<w1Y(pDy@vZy6apYX0Phe4s7VdUEGRsFIQ!WR2%jk|
zD!9Txt<@eOcAtgjmYiXz5X{a+wijw<hXdI_CSxTwp{UU3ZM(`!(i0)8{G=5RU|&`<
z8En)?R+x4;aAzfMI~WdDQ81jYC_b_&ZkKWKf_KM$l6Qml2>6)ZRc-ck+eZAaBiUUl
z^ON$FR!#rAr_*b$UFm=i<UJ*nakhryH@`k@Rg&wt?{TKBEq|f7&Na_uaU#EH!I+1T
zXtLF*iwqrQW2j!2C9qkSst~}~bN#XIiZeLw*HdSDk6(*1Z`-UZ)0hRe+PNe*y04s1
zTgHGji8|vH-R9_3Wde(fYxNfskIavNa!(oTlit+`J|u9#SGw&eks?HUEZek6o<i60
zk#=Qq9^lKw9;R!^fQ){8Ij?#de*~f1kco`*eQGxO_^jPkr7wTh)OJM0G=t3Js{=9Y
zl0=C-=65kD*mZDK$EaKOfG5^@v3pfRj6_TcJ&$tDrQ^603C6FMzcl4d_0A*`Bb|DW
z%C^4ai!~j3@iA@_keUa~`c7(MzR>OwPZ^btzc6oO2*6x<@;#@(ykUt*EbMFfYQx!*
zEVCn0m*uBwWBaXpXzf2(1F<TJS~j3CiPdr<OJ4mkUd&0F{L;J-9bW|^phdsHR=O8#
z#}?E_V7YYZw&muzXqjI?Qk2@>da)eo9ZJ=de=QZjCGFNTi!kp%O9UecFv`ZQi9W+J
z6d#=WFK;|`i|hX2JP))tzwsP+mP{uW=t#jLlgzz<2mJ<)r{;>T>8~|YBtrXiDgZM;
z%)ip}ob7JprkM60*A-g&xY)jfnx^#*YHJ2ZsY$k+hF;t9(evM}?OhX|4)J@J%C!)y
zh*kDhBGp}AEz*_}^L1C({E%<%QFC@9W9jsI_N9H2G`Sz5dB8fr(5&uG*w4<i`&6v#
zS*lHH9it3Gm2$eIu(iG)GuYk~$1xJ#+Gx~S1^^JvVWbR}Vq4KF5p%`T?DR`pb?B?k
ze#q#&QuN8+W{h+&T4XSPT7VPz$mL5r8r+K0G65>sMCp#^p|KecjLq~JwW#$66)uM2
z8f6Sc1(VE7)tuqMHnm|^X-uElesdIlPZtz$ZVRj^*Xr?rCYk%}9}#*X!83MXn&;U6
z-m-FL%V_)6sMm0?-AiTPl1;BMo=rU>6(a*FcL#KHUHQy1y5p39iWI4WaA~~`R}>&Q
zR1A%#c~9j5ZhiE6TgqQz@<Cjb{WoNy2TD!+dF_SUwL_}#`^ASfT;J`cDKBdtL6ua?
z1`aB;+S_}xm+KOpaz9qKD7$4R7Z){6yKc_*bTnJq{<%3gDWJ}1nQwqhsi+B|Y{{Lm
zcih<R1Y#~&E(Ch{p8)Uc-o2i%@6J{}ST%!ucM^YRi}U|6Hbj0&1A33#u{Z5?4}@8A
z)1VU!$)s-3p%Pk>(G2SASa}R9NEyRt;5)n9MghXk|BfFFu~=3O#E0oemH#Ak<8#;#
z1)YJCJ+HF&UR0<y$+2uf;QWJ5{Suj4M6u<I?`;rQ78b7>nso``)Tl>&RepF!cb%`H
ze0bWywviF;^5CT>8vC!D>J_q}Ufy?a{q*Mk!@l>AY-#yS@;fu&1X5|cyXQvAiod(C
zEIEm2a96YE@ON+nn?%O7#o0Hfq8_oP5|rzno`|vkB8b*U@N*k9U6UNXrsDcfVd=C?
zZPhM4q~VISh$RhJV-Qw`N*4=VSFKoP$UWd#QYX1@uW@zL*1?^nm2YcL8KA3B&lqRN
zHY|L)@<v^gfn^3+;+RWY$~7;A<8RWUuMbK(Tip$v{6DlTbKB#Opd6a~qh?WRVSE5_
z&xlzllz>m>J_hw19Lh?YlZhbCC2Cd&{(ldYKD0H~3e-6+n#+;W8cL~}<AkS~l4aAE
zoth|Pj0`55XzH+Y3B)G88MX;|auo)8Jr}IskOy}W4K?QAaI|7^*LGbco^*ft#ubdQ
z+_s#+LuUGr*m1F*YYt$}@jj6_gPbd`TRuojW!9f#48*4AKl<srwS$Y8dLlYSTtFcP
z9%gWU9=+8`vly;`b7@x5sobs7j#E}2J8skoK8Dxs)?NC|SLdbSj_Q;VL>+SiUDw#J
z{q?tWrtQ>rBb}6D+i+<PEPChR9hQ_dvn$PN;i{pYGCnf?U&r%FkW@OTJ-To(ZZX-k
zm|%o1zb}*9qQfeOPUfvMzPjVjFFUYQ<vs{gHK{5XQ`w!WR~0r+u7s=2^0DWg21z1t
z{`awACOx%BcTNuj;w*;5Nw})>H%ytggo7f!wz->r{U(=$Y@iI5hmM?U*W>0?o8XaG
zdCZQ-b@bfv3ok!YSI?S=WL*ni*RkP{14`L)YF!GlTsOtG2ZwRIar+eJ5_iPS`#S@4
zt#0#uC*0HzM>yM!r}@#r;$Rumvp9QZhBDt(9m`0V0qSQJ`0>Y97Z<U|;G%cxH?3gC
zI)6~U50Bzj#Lx&YNo(b%i`JlA>|j*j?l~oKHxE1&z+;I-2P_oX@jbQ(3awq6MNPZ7
z)-X0_CZPoykOLwXG`?6@23S5#jrzUiJHdx&TY0RfXXU94FTz!aQA28anLTA`*xHHa
zN7sihG#A3#^Y|tfpvIKelNOgYZ{qv`rSjSYsx+pVlF|f@2j{sCjn?i(4JF!VJQ>eR
zr2s}-s&@FK)DI9?@L9BDE1GnD=2z0;kXkhfC&+tGKEDON()3s+eO9P(`=tju_!8($
zS)vV-IRt+cM4|p)V=F-#UC-%GON7jD@wFCYg(1V2y5$5YSUE`!64%dUdgHh+4LtoM
zO&9mzfR-~nq)U*7Qc<;vnpH66o!Y6!RY8(~+!gcy7QhXrNr$fQj?B=LZ=I7SYz|xM
zS?QaoR|AS5!m@ZQ%Yg&)7NQikJ4S96LV^`BS3JjTHG?u%@$3RrgSalVE^{-lJ*Kdp
zhwgJg95bkh6vMLucw@>*0B{>veHhyHZNCOT_AgE;vz;X?h#$`{H+&lNoevEmPiu8$
zqv-97cehOe1C;zAXLH3YebwD&R+=5eST%fc0D+-!+6aFlR37`m<C3>@WW;j$FAh1Q
zwuT~6JhbI4Ygt`B;%^+-)Ul=dzAVD7f^EvYpefmhdGw969UY|*Iw%hV(DGoHE|>z5
zFj)-jyy=jZsfPUupH<^hqU2?`IL--zb#<k=ne0zP(QvC>hx^OQC09rL3{~qSXUf#N
z(8TEMS;5BIU_GbGj>FC;A~PwHOe8w`r<XWzlNPE@8Q~3ZX&L1~B2GH?KOmnQMIaoq
zg4PLsTZLR4j)!7`K;U8#L{q3l^PQunF?yCUDtGVID!r0Q=_N5|W3nRvHQEtI0FDUQ
zFQ>EqvrF0sJJwvaf~;JY(wI9$cMX<_z<jSRKE2P+?{L^(!?dn=uJCvv{feQhGtuS%
zAVOU8?!D6OIHkE<xm+1g)TFl0^BBTd$--Z}?5DIr=EQ`#mi|og!k@O}!WeDqDOa8K
z<JM0X5nZ$82ec_wjcEYHj#6uNyKd~Hc6^IsF**@O5Y9nhz6Bm#l_5U0HhGL9w!`gD
zUaX^3W8^QoM-Hl8nawvkdIhr-7kPRO^Z(HGeQI{?5zfCsUgPQmWg0R`*?;KeeGP^t
z$6zqX$fpuAylhus7=!GxB*b7ByMh6h10m0@M2rRHc0_o_YE7|g%5axfG9tyy-(`Hr
zH}u-8tw3bG@F3a{gBSLMYGQS8-%^;(r6wBp?(`jsO^NWgX;lgQ;N^4HL6}hR`5>I7
zdFh+VGOwe(gJsdVy>ajNY;(9LKfmVHsrm%aQ_J$da2J2Wff84i9rNZY*facRbr=g|
z^_n`tPncGk2>=1C^j+%?wnchly^%o<217qR(O4|nr61pK%Efl~$i8NfkLg^CHFLGE
zMqrhpzikiu;;6@butefLUOwc^t~F(T&;p*YPYM5xgwLtXWb)$rZ1308)7hCCA;|LB
z*Vd!|eB22h#|ZimbGl`9g|eU#^5C}pO#A~qoyIPf^<h@pKhEyyi}eg86U}D$sah|t
zz&Xyn>-xA76{U$d(J1ch@~En=)-xd3ir(HB8kX{n_0nj8A$r~Z61@;(W9yQ1{L%7i
zF^>?;&gDrM$qf4;>YIbb#{466oGuoZgWG!|d47B}Gj^9g0E<uwHj?$M#BL+HuPsPT
zXlP1-1l|tRHewcr3klL1<1BuA(A4xZ?mMNU;~!?dHK8DMWT-if8H^!@u%6XfiF}le
zzSEKSzjx9XCXV#^9C5sJti(FV+q#`_r{i$FlQz>6?eB{SUE-QMxbt(%c=_xme0Aey
zR%$%EJb8J0tQs!%k+$M&^a;rA>FDg*YZ*XkN$>a19YZV6@-^fv(0Hn1QXD=$*2l)i
z$<u4G+s+XUZ-x^SYP{5fUU(uOpB3e`@8C;p$!IFRB%6`;RQ+&`rwcb}-ibI9Si%OJ
z(UM(qSq5I+j{-T{Dg{<1viZ@V!Fi{L+UB!Y*fG#sv6`?n#?)%%N-rPXz;v3$38E4e
zx0zgM%&_1}C&$a=L8xeg2)f0e&)94`+CI0Y`2>b(E56fWy)=jD3}%cN=^Ju*B)ror
zwX&h6_9ykVi%a)Xo6p;(X&eWc$(YsBEWoQmSr~+<Zw8r_llnqKZK%*TC_7cWy~-G;
z#&FgMNmc{y+d*F5f|D^1xT?=V3ZnVqFGlG^jRv~M8;j+6CcjsNI)@DyKGN|%7=Z%@
zqz!>8e_lw2Ff(WcO<@>I8{iE+6zAid1!{s3G$91{274HWs38PJk?m$khR9_hH!)Hd
z>teGE@lyB3Qu(-<Zt}cGh1qTP15UVh(vR>0W>zOIws>RxH&a?$=uOJwlwlj@GO%T~
z1xTrq?%AJOm4G&(yF>sTpRA{7)TF+H{VimShu6Jgnh-cvKxWyg5Q7S-yw>kxVqShF
zI9^S~%+5F&yHjPcrsFHtYU4A%Khgi>f!Ls)y!tLpDZv+&w22FPfDKGgpePC*pS$oC
zr&eKnZ|uZlQp8#p<!3ow9gaDlD&XflJ_kO}jR8p%tcc7D;!=8ln5-tgQ<N{)oqMV&
zYx}zod<sF6H;)k*GPvA3t4l=0Tj1O~*cjF+NYIHcf_z&mx&LF~E|=h{dy?j=Q@Z4r
z#-CT7VKXO{rz^l-e>X4{LJHu_pajG7jP8d)YlR{p5o#cdsRd|ZvpV}Jx%?@4oueoY
z+m4mKh<fR71pvQ5zG?c)sz!@4D1D{Sc%AL9mc|wkmXBJa+|L(8A6g-REw5HeA2!aY
z+KtEJN&T`Y*)5h#?(J#mBqk@S{!BiB5yapI=3Nv9w_q@VW2fpZK0TWc&J9aFKEJMz
z;`)h&u$}>KIlM*)k>G_14hZTmfI8^)y9OJH_f50;&Q0O#-=E4INF?Uy1xiQ@*q7p5
zGLnx#FnIqoNr_5_-3SyRaWt!U{xQ>d1l0$t%G6*sBer28B8~ZSm@wfm$dp%ZY21TC
zf}M?mMp_$HD}}_?yvE#P5*oK5jZh?nVnxa8U!LZh%TpJfFR8Gsa#ga79mxS;y3nja
z7|f7_xQ;5xyV{*I9=y&v_o>pH0c&O?UxM7+^i$<4b1bCA^Od~uXFe%QZOpqk0(J(a
z+01D19m|8@$<~O5btA>y-_li%wk?^l^H&le;AKY-&|>C&+4LGG*OT74JCjcN#xkXe
zyt_~=Z9R|u6;=vnaz$(K6LA(GLwn8^Ie=c+j>tS_S$a;RjDk{GzJIkQzV$ea<QSXC
zIB{GF2HrHU#Md32<r)}I3~<H6(*8~Nz}z@-yLDRU3anriW7@8xe5l1iuNZsgb?}H5
zcD<kU&>)$D2y)q=Ul#P5xP4zkP7q3Y862=AmbVrG;0T*$P<|eKy~7~1&RD8qaF1uT
z?Y}?%=X`@z!+8yx&Eui3m>Er!8TzU{?+#4GYT_%3`r*M?EPtg_(?FM1j38KXPln{i
zSS^EiMDMJw-v;jeA{^v$i<y7#Q8Sm5Hf3J>0>PXQY@865r9gj^JnL|Z#m@rZJ3(Ro
zh!T1LZ9^nM9jPO=WgIUX(gE%pKEliN#Ynr6mF8w*q}2AsU+wqBa2;v1$<yT}nq(;u
zf7&6H1l47nG89a&T)(DI2B%JWM#<o7zPm(=TL@BgVG!NAjf_nEmX-G85TA87bH%Am
zVRSt%!$u!#>*L~X46^tUL8i8}?HR#%5Tt(2`2=?x2Zf6)26h&CNq>86B}Z!3rKig)
z#{*cM@+DB(iJBzR$<{pyf>gAToUr^hI!sCAB9a*TKXjb>sfW7CirAt;ckg2ApdKoC
zbndgHBL#}Yl4MguS535<$BCHS+=?_3orIFxFe8??<hoibVz)H5Hg?Tcv3_X-7g_Ym
zPP*~U))@!2kI*ela52YROH_2>cZXhl4_F?`RN{@ubU-lmXYp8fG#WPSyObr2J0Pvh
zwk7;U<uCI2_5K%m9&_L&!0SC9MW=E#%IN5=t$E-XjTq~_*EJ&R__NQf+$R_P(sZ50
z$om#|>)z-t&W+joV?sKca1&A1qJ`{JL%#6uGc)5guTuioJ2XH9Fb6lIHcw)}n0jj2
zS{DKXNDVnBHVn2~Xr;;_apJ?ZGgLv=*H(BA5EqC?2)gjvAtOLa_K)a3fC;prV^Y}B
z91{81_?sSm&0hW0gZ(6ick6|V*2w>O)Z~Z&sqtZmV%G+>a`b=1JGzj3f_=EW{@4wU
zD(a#%M)m!2>VNw?@E&;uJ>)H=C$2<Kr+YYAVoC1NRXHo{O$}%DQirDA5LV;Zb2-zl
z*X)bS(LftE!nu%x&5Kk6oPx&f2sbhBYQ12Oh4kbFNfOI9H=~$=*`ji5?NJN(YUPVt
zw`Ad4>CN(maqDkz4HXc~W!6^L<xQiF+@Y)sDToE#SV$<vSB<HtIT@1$xO?p0m_~c=
zAd2_QItf2(xv!Yv*)z5mueWIX#ko#bxY$a<Rv4nXB<QaMPl+Vp6FbrA6E|-{CYDRV
z5LtexBCC5sglU@Dqa`}qGUk}N_1=*=t4jQ#JxMPf<6JMV{#u?EA^QZI_0bvS8yw3$
z^f`_b_2+uxXq;%vtB2EXq{NGpqlJu^N~HMJjI_D-AdxqSncQX~b{nzp2y?=+*+ctz
z#3GJ%dSVgd4+#v7+<&C*#n_JH7>0_5FKy|Rz~=lwXU2B{{=A3a_mKu;xOwiuZ@VVu
z+d9N#f<XU;E%d_kR0bjj)9GKAxy_0v@3X3ybcbKO&@Wx(T9p`nz^a0^D_~+fd#9r;
z4o^Vaj%>{<hC1kQJD7J`=ouYX3E>6{Yl3=$keG;z*WRd?to-|kI>X~<vzH;fb=3>o
z1iV3}28t18QpMSp%bR8?SNj&So034rMDt^p#ASTpcEUvdLI5}s;4JVNM^6jzcu_$5
zXS`mX@}?cMpBOB`-QzgTw{~>PS*b2~L}lh86`+oiGxR{IoKE?G7S1-85t?IQv~C=L
zM%ne~Rt5KwCjtnwQ2S2j2xJUif0;y0a2Wl_fZyt-0fI)vxrpGkSPN!2Cp<M?Egl=c
zPWE%hwX(#vL_uPg@i92k+3TGnp3K#!MrX<_3d?5aF0}*^g5RtFFUvE9TA9W-7V%0S
zR1SUTaxdOM`P#Foj>}+usZM8`MVd!?NC<Bq*rXFWmIw7(bAYS=Bk#tEha=2qx17+w
zg;|d<Al%o|!U1$b3%B<K14&s-$r6@td@b$SVu}082oBe%{KtZ&ysny<@#$<S5bzU^
z5UEiqd9Odn(7bHrxsv@_Q=GM5#bX%@s~yAMn{O25rO{6xS0an^QJaTNZDZ(X7{F4d
zBD*K%fXte&+E(LHM~U>bkx$#+MVq>|xw}+~y^SN{<!a)p`QoiwdAM3bUX70eF|Yiw
z^Av~d?%y?C9`6qLbgqe@JGKi2VE(}g8<vRZduO1^M0I=VT2(HfYH`5hXNZ*LJx8JT
zaJecuAk-6l4V{}U?;{x)R#=S?y9$=8_w_%;KxfO`U}Yn_Y&j~MS|hke4kb)zXsOjw
zX6$fQrf%mAODAmv1@t0;08zJfQbc+~c)O$uif$*;btYRDhz?4Y6|T^9&`LZoPuw-)
zq5UdI$-=+1_J$=o>v+fVx^_rTTbjJ6a9&mjfDPIjPXqrde_c8CT_}_lo4@Vf&qcu(
ztvtJaU$97<Q?hfh(!=-YPce+FKbMHz89b|fr`Y7WxK$EHC0%b`U5F5Sxd}1Dq*^1C
zjEH+GFrpeTipE0p3WkgcZ!k1E<BuIuJ0uV4G;QDqD|Zzm{tR7b{9on05Al<47|sNz
zG#=+=?JBHkN?nhJLq1P-sM$nPrfKtAxIiS3@`8|vkv=?eQ#UMp^FJ%&dTvbUp1!QL
zAo(Az=Msd|VH4!wy|4u;7bzCbgwt;a-PC<CKiPO9_+HfV_`#9k<UlepIFdWO_GE?=
z`(SwFz+oqmaEN7WxKNr27N;f)M~-XJM5%l`W=1EbNHG15Hy-C#UflI!Wz9Xb)l%{P
zTl1mZT>^Lw7n@bA>(n=D*^bOz!Ap-XS1GFrF(1bd`Q01S#?3?2W?kcKywsz_>r|B0
zur4&{&kY!o8^KwVAuPDwVr24m&`qSfA^}OBh-y<?+RkSj+p<SSGt(E=o~$#n51h=@
zh4{LWII%oAGBGtvjF$0<V<)tzI5l&-XYpdWx&k$tujE95cI*Yk9t3ArKet%A1k^iU
zreyNi<h<dfKzHhW!NKC2sg@%TfFE1Sz3&8SM<n9Ax9O<={MhUJjakL_O{4~sr|yD4
zpgN&AV<F5;JJlTN?i&~!Ob(?6`g^$~sHo34OjaQ%+h)*<$)2xtJFBckc%Vzj*qc`o
z6BW_luL3P-xugXl7$36XtYsUE4Ro$~1MWv>mvHCK1-jI2nkH$=+}*>(uP;?4m8XdR
zfvK83_kizT%dP7O)<LTw>&-2{-8*%)GM6{??PRdmYDJQb^V~;z8~pLOo!p%q9vvMy
zkQpA_V+GftY}U$z5i#-TC>bF33{f{hnARJ5w5|o-$G34Ub|CA9>F?xd_UjB=VI~EO
zVW+2O+CRK5!S$Igzn+>kFABM5U03und>-2Mws+2~@W~rK4Pw%k^zD6u!K;vDSc*;S
z0hWD>DFGq4G&m@}GrzZ_^WUtTzRDr`6$+(y-rF=~&1m+L17Jl5>z1r_pYJL7=!WHc
zsF(hmzD2T)<4A;pbU%7)E6U>sQdp3Qsq_rJMcwo!wIAwJ{qgjPf3tT-lA=ekWr>KS
znMsEx*^pj&Lsb2xC`-A>2nMt{lNM<F%xNY-_rI(c`<3g90`x+9lyp2c7KMVWO*Oyv
z3?G;vM|{nb9A5>;45z}GBuvW&i2#4#yuuLO0SSpz&9!iQ%AoQjL%4L5Dgz)fW~ekK
z<D;n~TE`=g4m{(xS3(uqoFr5IsJ0S4vft>Ixjo)&taiy=aA~DBjs%ZYj&$wiC@5+6
zU_M3ATPp7G0*a^AL$KcC*Fu)9KKx;HqfkKro>{_Gc8;E7S5Pjy4%Y->Z7mHU!n)^!
zq(#;SFVN4x9%Rsx<*8^l&%2mX3zhD_8S(b_6=(OoM!g`f5N8(dWGdYq&+H@OM=$`U
zIk4t-YH^?X(wzS{_>EbcSE}2RoKXR3$&QC^vo<$J&bG@i2aLgc>in~yV#P#?V*b=_
zXh&o6U@j}X*f5{K4ch$G;rAK>Q`ZLxHS9nA$O@_x4YnbaK9U-wv)uKT+c|wZ72LLW
z+R;>IMN+-=efRj`0=us9Et|OPx$-CTEEX8^cB={*oW9%sJI*~I_f5g4rK&`sWI9yU
z3E&w*o-s|E+KYU+%Vq(*M~Kwl-6j5R;){#zv}qP<2e%67#xVrj4EkiO5Lw(BR4FT_
zYVwo#K!l+ihXWi|pGT+}pp?iG(g+U&7?uO;e;Ma+pin6sbIezZW#&TO_1n+w=wQs+
zR3arPXSXbAuIJ!wLVarVIFe2kFaAjg1;^9ql{U$zpe`q9NAs7sT!Uc&@z73WPof`+
z4NH-HxRCK5Ja(OVJBODH)sGpZtV8W)lqg`##b-|QqMdM{)S@h_UEN&zS8|>>Qk1Ui
z>M)%QEt`D?ri58%CvDrXsKT0U<=T@<Bn*<E_@TvJ@vi{x1B>(X`Stt)-<O(7AOxPw
znUTHfWMut*afaiBc>@+U+Y2e;pw~#F=8UE7e5}vw(jp3`G>^^0G&t7N!O@=;<*^qI
zUYnS3UNKSdy=}USrGk~xx#YFe13*t6&eU2WVnar!{!y1cVS2w)ISUD&E)fIA`Qgn;
zWE>2(fUar~FHC$Onq0A}BUv>kC&Kd~hU^OLR=kDx<0NJ=UCHo^ju=;ueX)(5@vAoI
zBKuq7=T=`RD^4+>7>qkQ^NNJu%msVmzpdf}yvEp3z<2iBXWFQ@dlzOB@~8#d#-1(+
zhkO33b6cb{(&u->bU*d(8|CrCoY_EAv*CM(bBCs{luCD0p>E#arF~h`?Bqx?41J8f
zyQsl1|6!E}%@9DuPC1=jtd&xclf}A&K6}2u$$p-2PrZq(*sFjFIQtkV*FBVdT<#Pf
z)xHB;@ian8I#8iLXOK<%d_(F?_|Ny%I~Y4^ZKa~k-N~M2ucdfQL4D5Bdkygu14oOm
z9n#e|v!`DvZC*2R+F&Eu!D*r%D3x3()fzv<B>B3P`|j;*etc>!mfkwU?~r54v%!5m
zk+3Y8VjXmZt&s&OCwu+hx8BUJ0)wLP`EY?r;E(6<;c|N*8p~`WQ^#_)?fU%p)P?b&
z@qVY2@eq4Yd^*8e<YMCB%mJBkW@e}gs)OjOO5tU#VmP((aKR^?8U2Nmst;M}BWg8s
zfWlhmz37>#HD=_!naP=|(&*))*AbJjw;d)Y-T>5qvQ}Cgz*~42C*W37y!0Y`I0o$%
zYbHL@Kti)~?TyO3{fXDVp2k6qMSOH>>`S{hzyIvBo{}nj5|(}Q6TN49^!P(_bM~-4
zSTR-Z1Y&6s>yIU%vS#O9_l5r?-Cu``mnshjPuM>u;vhF<K{QpBU0;+MpSJQNmDkmS
zQQZ_*(rUjRZ{3^63vNM5sA4@+C(Mi09kV`44bKV2;z-x5sfJ((eBH4M>SPy?`7ZXR
z#^+P{GPWd<9yo6jRg}Uf*Kukf`o(ldPtG&J11T3iF!{Yx>~igZit0vyGEApl&e7qF
zW5@y98P~~m-<aofoBQAxs{wJkX_8Y!HHS)^B0?jL@Zlz?u^6)g+!0-~^shTrSOuk5
zMB<?I8P@@Sgdl+h0fI}`tX-?)BBquO_xt=X1scnU^b!neaM@`~rm<(TCbj*Qy*BfV
z7}1s&VH+$IB7Q}j#EKoz)(mRegSWC_r%|cDg4St`9^k}iv4K*;)Ser}qSb9nwc%4$
zg0(Z5_Fl>yrRXse4Cx%6!U!7C%sJ;=DD&#I8AAa-`o^1heI}Edbt8_~aO(O$CLG>9
z)iIQ-Y})9M7<e;0I@YJ_`N(h&%p_jSLZ$i)v{zO38aR0H_sSQ?mtXO#^b5v>5OD^Z
zFCS|bj!Py?8Wk(02t6%UvPx`lfuRt7{v9Y$lpRr|kZDOsK_0>jyMes6zVRApTORIf
zAZ_EbqxT|&loYjf6`xkXnJ8Idy~;t@%I@=kw&fL(ykC1XMOeITB{VA)QKjY^@XOf3
zh%c;p>WJNCfBOrE_?Cf#`-g{zhK9Y}(n!{_m?xI``Vv^zEJb8d`n0+wu|Bo|ZEC}`
z9>7*%IP%5XCSw_?W)%R|k`F5_czTrf9P$&xE?54KCy_XW#(!yTjj1Z*Pz(6ZkA>>;
zByUL8$5wAQJj$0#Y{qiLVCxyh&bS(TM(Fd~p|aH3-l_IA$5_od=4o<bv!%7<zJ0R;
zj5x5{!O%I{oN%i6$<t36H7+L90fSQJ_P1y&emt1!+5MeTwBey@i>mSF<q_uOL78QO
z1cHb^jUzL<f$FhF6s>;1j1X#+YW1>?*~>AR=t7=n=i#Ed4df+sVlT4ja@O&5Mz+uc
zqutv~6L;KO8Vv_p7a&|h3v5rKFi+w|Jyv)eh;o)$AH3dn*rv9iuUQS(OtpkKZ^pAC
zhuS@P^v=$l@m{Cn_(PARJ4FouGlUNb(c@?~fJ2XkEZD3nJJ|??z;FW{paC+Ax2TOO
z;7~D`*V8bR!-79FgeiKE3<uWJ+I8Ll=NPKCtvChb&l6{s1(CM9AG!Jgj<Pqxtu6|p
zOdvgU;3I=9z05#IL(pBX#K6jyl2+opnneRx)b3?t-%UZV;dR4TKTnD^Pld0bJhJBQ
z+(}uPhq$*yf6qUyL-Fk;B99g^2@h!8saxGY`ScUR>h=m0L1=iJga~pXgLPgqlo}{R
zvILnkdT?6%WhI2jXiW2(ViBU#BDs<0IhvxVDA&X{Npe^895mK%@Pf8NyID66X@g(x
zTrQe^Jnmluj{TAm)UsX0#8K9KJwtgig`aw$)?**brf<pcb$Uyxp*@?uj{+ifc6z&f
ziRUwt19op$YO7fr^wA_D-Gs(^-hSoUHx1MlV&uG<W}#c8O!%(Zh2IlggPU@1omsBQ
zOd0=?&J7{|+^7P)=_$tXf-I<CoPNES4B_2;=DyRLC%6kKbRe|VML`s~53Tf93V!t+
z95BPxY2edSA~u}E8pBt#S3AdaK1hFy0tU?l>vFm+pKQOg#=!;koZ)teWu$~F@jF+)
z<=Ek8IX&D>@3LJTBv(@FSavu@x79Vc<U@E6#<bWiBHiCaw;}Q3G<zJa7mSwf?av{j
z3dynxG&(J$AP!9=?)C*5p~y_R-UYAoapz?IkI@K$&qSh0m=QT`3eGG<Ih4<I3}fkz
z3CKp%o2hJu@p3HZ)zQMPg5&0$dKYk)T&ZosAa{0f-Wt}UYYDR9N0&Sa#PAniXPoN_
zNQG<6Vw4}n$}M>co^AF-7?_rC*O58;g5g>1L!PeVo9KJbRI+#`>4kIMK&nj}5pLrQ
z#a~y2!bz4nl_4gp+(?yBV`9L?t4C(z-lg(b&N~#Hj|+7mMvSw3G*!nKEL#Z`GND(d
z2D^O;gdLlCn|*L|se!7B#w{$3hn<R=2RH1>!U!dbMbIWxD@EC6S=vM3T;jIcNpqea
zO`f8XUOG}8H`EIGEiX<>S)>fPw7+MwLt>|3J2SJd36$uJMb&6t*QH8vc5YOUki$?k
z%>6*)I8?Cc*1Us?S**n(xYVDfvfVOJmkR00%VVMVxD(oe>3peGU@UAwS!S3L_%dmZ
ziI|CFHm+IysyWlqs8r4h<yE$DV<pyG-WV9nAjaT+B5*}WJZyJi^(|Ear_3uxh%+)d
zUVlPXE&|GYW0~;cVGLj#QKIeba<5X}IXo~4N5oQUt=FaJ?#TuJS*c=3Ov$B4u!d9|
z-l)YuMFMu2i5GR93l?+wy_RB$tDPnb75ZA#VDG&2y{E-DSMt_=5M)`nw0(0TnGDz%
zhfyMW7&al4-_VvWBf`ltvQgVP1?gdljRdD-zTFu&!;nPtL&O`Z$@)?co&rk57u3hb
zmv^vxlXghKe`bb@ZVJEcaz-*bwQ{qv-<VN_zskhYou>_)e4k}wy7wVqd0<{uRzPY6
z7}>l^D){Yu9j%LNx48|vEMxFGhbWU4u@FuAD!=3{oz5}{c_fiF0?)Ftq{NWMNko*f
zHVza*;iiVoMVn~cR{{B*iPv#EI<W&A2eQ(IvW&NiI1gMQU*D;0?C}(Lr+9arUZn5I
z++_S;zaj&eCZsU<4tz{n%Awx00xM*7)6p#VqBl4pw_bVU&@VOowcpJlIFr*OrOxbT
zMqI+tIYe5^X7Kem7rtuYs2->-o2-GTTHQ3GfP!Y?^wyE?q{*gf)a96udQ#uVdwTYh
z9kbIQr2~tWg75o&L<(p)9t}_Xtm;EQLMPO6o}IDlxYs4%gs(PTT={lcvEm^O)+#P4
z=+;D@*p$E`{VF~{1Xf(`p43Qo)qVHv!L8bVJGP{P^5=%&F+XJYg1c3C>eX5D5)T3K
zBZ1UUTA@-^*I~U@!V^d!O>0eNAEIaCW4P`Sbto;{9@S_hns{67C_Td}JEQt!GZEeX
zWY2&Ab9?T3gt;phgsmmRh8g&!dv5MK+jS^?L^Zh>qC>>T!}LD=!ni6_6KJ{V=7U`D
zEcRU+h>(67Z*0D@K7Rek&;K#8Hi!lCLR1TGr8oeS{mq#NW0%w{RTv$nKA*On1(!Tb
z6{Z9?kzP09)*>p{z)|Vqu>ILzzO6v!>b0yym$8;yphkLaoo`oH_3q2wJp}2#*BK&I
zX2WepUD<$QsptQ*<S})G4H%?nKo?0KLREm^ML=Vr6X%1Ax9w&g!vD9)U-#{`;rXm0
z%;I!{_?~o_v2r9A#x`ZSA~s_j36@3d*ST0mR%)!T2gnOWHSLAD7v~D4(vry8eWCbR
zc7Sy&yOfmGx&gK8vf-~iX5zTHbfR$4=wH%(U;*EbAJ;L#yO6Wj?Mm5bM8*`ENC@ZC
zuT!itAn;&Pkb)46$;fo9KMkp_%30%;_+`<U;TwPdi9}*@>ijG*S}c`^i)Au=KRiVe
z_=)1gboo9B`o_HcvastVT=f<=3Xm$Y1HhF2DGOm{b5GKzP>9j_JbDgX;gb-qBj7cj
zv1L)2>T>EebZQPsFvA?$gAjlRq;5Z2xMIQgw!d(qP-78F3MEdWYNW6#L%5k&Wl*hQ
z+Km1%;ZC1sx$4S&>Gjc702Wq2^U@sAbvif_beH76ZCU%+U5(Ca4>b`Js>Q)^&j#kP
z66~D}R0NoGwN9x7X0IFJ1i&GD03#Scx1v;_@xU@l^WU;|_()IdUmv&T56DmD$FfKM
zrz{hn&t=WuDMp^C!14(L`2D=p`FtM|iV8a8%e1OL8>$KN&hZmdt2FLgS>QV6eW@$U
zi(y?eR6Ygru}oY@cvVWD$;Z<srOERiizjGQxWe!-I&72Ud}yUMvV1eu(KqPtAw^-m
z)L#i1#2n3~NWpn<8l-g=7(**(>%)jg8shLksXhGiVLQWAeYj;)bu7&?c@f3~YzE5;
ze=&zq3ZaQbgQz;GD$3~30$Cv05<?Os=cWnB4BQ;9vKj+oL`wWldcIzWD$3{OXm%Eh
z0=Zi$@q)J!k8`pL?3L1Gk#Top+%MRFa?a>VjBN|iJS!rv9gr;HE|b0>MHDa)D0sVZ
zNw{&yh&YRX5L@dUX@NLT3Nsg7gj(c?zGff^#F7EhK+x);2sF{8DPL%f<ux?@LGoSl
zR}<FeGohO@)@F0l%a?@rghMTp)53J+6}{H%w37OKp&s09e)@IijAawllNni%p-(|(
zsL5Vf8|{myYLgW6zrg!WzEw@VBNi)@p08PxdJzu>1Yf`J<o|khk0ZEj)^we$_=E{@
z^;U#HaF>)O2S!D9f0w4L-6yzw(7U3eGxz^|_xkbeTUFJ<7f<FMjEy{4U5GvTWqPm4
zOGF0xs;;N9{loKTPhTyMG{%#&oCWmcTOfSpNj4<*)!FxA<=W}VG7-S3sKWdA2q|l4
zaV*HSS}6_2guS><8qs)|25(L}S^xj4Hw`6pRaa%%EKOl-i5$?&ZD9~h4Fv$INrP+P
zZan2W3~4?@M`Q6u%0OzsN~PE}24ZoHOq}8Ihhxj%p~~p`$LHi7=U}}}6&Kb_fomiY
z>GA%o8QnEMHM3?YOYN6{G{(qN_Ra4Zg2UkqZHNH|L;_E%xrEwU2_Ki=xWPnfZ&<ej
z8AWfT)e0_Yza%4EY4u!+Me=@wj`yr=*Oksx9qErUSe1a5+Sk#pi)>(!Tk2Lr-RgZ}
z+bY%DoL1xd-yb7W100Oy+D|sJW(yJ`(+S<`4LH*6j-?;leF*6OM@iZf;~Sfrq{b-k
z_cM%b8cWgjX5?R0BX~IJ_tZi4|Elh>z(TLP))#;miLyfdzn*uOc)(iwV%`IgDBX`S
zLj<i;gCe*}8JoNz6qzjaYw&rTL;-C9m5Q#e+1@je-F%#5lEEX=@!9C-iCi~dYMwCh
zY|+K+g+r(<lR7&yHSel;XidoL%dX{_k^V)kybkixdSh2V*2yC)?(OULdS!yG>(obs
z<0-4V7ou9r^vFnNVa0x{OG|^hp7dK~!r`f~2qU>6mAgZG%!0bEOlcMHn~>QTv%}9y
zT)Bfo%)(p<aylzc)-@iJRVzvs-+q(r0~#hqOw(Z7Zj-m5qeq-X8EeE7UvTWV98o7j
zm|LCEemCHFe{0U29?RrMeE%E(Elkj5aRl%dB<$v00aUxTLJFpXpqC>XubRgxL0HzW
zw4Hc_NEadCC$;(B4&=z6a_Nek%c^q&Z$`b&SiaTWhUjyQ?&j#^<cJDY)}~e=^oGY*
zI#wA`PL&%R--2)zF{_*0;LSzKq>Gj~L29NJ5YI2Pm4w|}UUZROUxcq69&4D^fk|{h
z26aShukqJ+6ehEixop->Aco!Uomrf9Mn<hKOla&A`<<nu&C??zGpq6~FODe>7utRG
za~lU*&2Y)*9$aDL_YJ0;a*?`u-?<GEt0R<XMBER3H_Ikvb2fFiOTH4_)540ERBB(%
z#nAwg*7E?mCwKX=m=)wjVR8<ECmI8T{L2m^6K{5h&DTl!7i&LqeWsLH2QkLnWeNvx
zuKdCeC0F%x(+?(IeNaq|kDXsySSfHkRuFMXc(Z>go9uf~dj6=!BdLCOCP}lKh&bul
zjc4xS!OU)_-82TSluUJ^Lp&v9rusDndm)umpfim)?THJx<RmW(mD=4R{+?`eN(&e!
zg?_nzLw3ss1$c7A^r3sivOk*?r20CllSiVY!&;ur^Cj?rMIX-{$aT4lwpIDVy7y$9
z)v6KIhXAkQ*|9Air)<S%<K^LJ4BX?P`Lcf10Nk|p_@e&3p3=|hXZ7nL3Q6k(6ZfJB
zjywrBGx9`UMQzs9V@syGR*NY`gzB6_`o2!2{Il8q@ntEGU=eKJo$4}UZZ6#F(NrOY
zo2?n(B8b?A2j`u3q!l<$#Z7E<kE95FgW8Fp5cR-Rep*WvU{sH;aFvHl?0@JVGl}zh
ziITY&B-FsCH*vhUE9mFeL3xO_XEx_-a+V^e6DVKy>Ih#TprRerp0eL}I+z=3D0p!0
zTSGy1-DFvQKbS6}uCjO-Tf1M0k5`alXwwTh3&O`uWy-beLvoqV=h&<2xV3~Zv(ELS
zPN%)1tht({Hq^>E<FePYt5^;tc{gf?r5McUGTA|~d1YX9$@7)ABYC7Xfqj`g;><=N
zv%R_vm*<FOK73sk@8Ofkp$B3Ore`ym+^Y0sxm5|cR@LFgRhAiqq)yK$;@qkiQF7^M
zY`d1KHGE=?V#|%iawpq_w~vVTIiyYSSbRB=eDVg1ls}m|sxifTE2{0_*A*2rcCcLD
zT5#!Y+i1itLnh4h1Z}6~N9V9B|AdH`=vIZ?J?Py0%*afk{^@nbHI8>;Cebt#KTI!K
zyT2aw=(;CknXocpy29g@6!DAgSdr?txfvNN6mTm1m`iFfioHvFV$qOXeume2$P8Ta
z4*zEh8AHJ*v|+K12~3m?N0j4vO#q@K@FRfLCR^u;2w@$wi@o=-Y{C-d*w7l7jwlIC
zPgG_nNj!O_>ztCT01a3!VQjb1b;T(&SB@b`0+rA3_(28u?+v~_2Jd9lmZfk^-VrzB
z8g!st%sPhBV~XUz;hHHsjJ@OnD+HQI2&w9U`y!q;=!#glJtOtN?C%-%wg;~U$Ewo&
zPCmQ;XOEOW(yn8$_^;|&j8PtuaaS#uXKp+@xo@KO?K&&Fsn{y{5R}2IJSK~|sUE~E
zvd|`amtLhcq~&5Pts)ya=`i&}kx%I)@)zWQ;EmmAHb-V;4c4XqFc?#BLD-xbz!{&`
zuHu5=RR5*q^Vd#amZ-I04i@EOW<>I=cH-`(<N2Y^`G0yUR%{ypHKU2(an|6|OKG;}
zyFPAZfjO9@OHX3b1S(^ajik{oLk}Xj-54SIc7KcKii?_;Rof6W?=O|NicY-+c`Z>+
z<OzA=s?R;Ya^zo2DRx&gvNS0jR@-@zw~UDJx~G5QO#5|75|`N}ZgK|7LZe9q)Boky
z<uX<(`878#o7d9-3b!X19&LGUt~u~gX^~^c4!oZp0R^<$TBp!<({O$!chBBU{hOZ|
zFXPAE$jvLU$!qOxZF?uLHvh!GClcxS*)hI^K7WRxV{#M<{UDgC^4!ouV}7iNw&4g*
z?#F9u)m&PE+#!!Yak}67dNz?R-+N-V3urC(;U!JD48As2v;1&h`7*P6c(|g#pio*F
z$L9<W09ra^-S>vF_eb~8#3x_u5e=IAcI$#{?PZ2E8TLaY0;`}HdRb@HZc00iZLFPa
z%C(r!wwG7V9c2vL|36UXoNh>Vh$G!F4^E*Yh3lFt+k&OyqeD4cMv~og<upc05GEI2
z6%#&t!lqbrsMNK0Ps$R1EYalLWIR4`-!F>~h2)&5wMb!MYnp!KQAGNH0b<sDzH8-S
zWeTbYRb%N^Q5f6CSkYd1<p_J*88^t3Bm?#H2$+n_)`2u_3RV?Bs)(BJ5AL?}ba5yO
zx?bnLIIo7h!;Zi%1nwJhrXqzSZ2K6`(@54MkZN<?3kh+%ns-y^ncLk-|Ak=9ZkpSa
z4-)nETL+^Zkw{mbf3ese>7412jozO!=?KPBF?^kW(bclw0ko_~>^n)2wsD==E@c==
zULz(Mas{Zvm*VVHytG`eS83U)sxwjBL%C%ItKKKHQg*L-U=X9$VepQNBQkXUf8Dr!
znX$wCjLCq1MHf^2TbFm7CoWhnk3>$HVm=nBRdFJbBHD|0Jjl-KI1g(ZS?}$bGH5j&
zpO5d(Y70%UaVV~ohRzqTIUAY29(Y$D`>_Ynry9lSz%N~^{n=9jmfgyrK2#0F;xq2n
zKB7?tGpK0sN29aW09P2Z!S;Z9CsOpvp6&Ck9UZialzlfy7bDW+f!e(52aXIkeJ?x;
z<rm8OZ*&(p2TQPA&(!{*KhvFj%6c=X^dZqQ+JdnA)&!54qzx*T`CKzQC|Vx9H?{&{
zJe|fexzu}Wy{zJ$i7<z5VIJx)zSe@BUfP>Zf$uLsV2K$*qk|<@QlRY5F_~4ot3#1i
zURUOwAiSX@uNYkAzUK?&9<jelO19*><tU;l4igSuVq70D)E}FHJ0vh$OgDbq7(@q{
zdD9<?Zz6W9lw^+m;@eP7&fD^kzxer!7mqh%=dX!%dQT@;0<NAMlJE}nUc#So8MosI
zhI@_o<xa+{Po|r`Y%-UeTqfVwo=bR*!yw%8xF05+{k(m{D@{V*Hz5of;`K9MIu52X
zgA+@d#P52!Mz+9-lm>^L(U+%sB1)V*A43&iaAKL54Ng8wpQeZJ8_JR4!o6BM^;ep~
zo6T*<5}1>CD2~o=x6O>jX`W+aW*7cj3A92RYnHCL>o+X2xf&t{;ndW#ce^<~qE@)E
zcVXn%iaw~V{lHL}cYouCN5$*2e>maj-(Ik-Up$8PYUq@uFVtsJ@77p2#WoD9y+@OI
zj^uu%&f%%o1RBGtjS^!z*ADrroBO#wn!7`!tm9xx3cM&*bZ=2(6P<xOTIkk1!HjiN
z%76dD5n|S6_d;yC0Bob+&?ai)`e<MvySmz2ACu+ozdilOrQi4F46JS&?wB93<U;Qc
z5AS=Gt0JQ=W-k~BV=RzWP%KDSgg4gS1%i6o2Ih={Q&=wg{1%LTF)drpn6>H9=WViI
zt$l-5P~{$;(Uj}UVKL*H3&E=aR)0{ci@CeQ`DCHYyWstz>pZK`!n9zFW-MjYOkiGW
z&=B}TgX+Oq8fXNSS5IAQ+ePD@u7-{!65455vl*^UU7I4Pjrh6!a$IHU1m4*&f6?sN
zg=#H_dO0ii>XAJY-Fx6ksp3!gIu7Ges0Qb!K13&n@L$}{dxs{Mw(XC87;f{i6^P87
zx%RaVQFu``<J^s0S%XzkI&*#DzkIm*`r^@*Znxhfy*{cB8Ral0l140%K9@Mfq;@L2
z8uXK+Xb5kOKHdv`h8msudG7UxMn9E*?~haS3Gkxpy0P-PRB<eZna^b6(@Ub_Zb3~?
z#_uZm^45B5W`3nieua#iPOxwyy-0G%p^9WM@bKgC1OD)>GjyGM#qUfLr!JIP9YP7G
zSxEH_v=1%?lUDlpN9v-p;Wz|`RUIXUQ;|h3y?VMNj}G$<`d|H2KZfZr^Nx+`Z{EMV
zEY~FrWYw{w5hF=3_F)#8t0iEoz=8Gy!_jT&rt)x~TvPSl`j{+7yp<F^?>$@&=VYB_
z%1w0hr$q_s*rK5mQ(dDCGd6J6HTcrr$Jt2F;rkXRyhZd8Mom6;b^EAk)~17>N4?Nh
z*`SZWIl>7|rA9tLUvQ<k8+z@o*bRJpr}mCw-^O^U93jxBmbMl1<`_Nk^2mH0Eg{A;
zXAt&FfJTF(YS5t0kiAqWP{~4Y-b<R&1A_?VqgCY0ruo?Lil~;{JE;jI0(&z?L=oIJ
z-UweYY^WMy<@QP0)7)x|VgnE1G)BUakEryXd_`~R3mMQ=nOz&byZioz@~j2pe)CpO
z{(~6++kCQPej1;j+=DMmS)CgyDAhG%2-V2B6Jq&pl`1RZmz;tcwz>yaZJm`&CUja?
z5u1vdWRs3fs>0|@Q{c|J&9mi`E3-y-<Ij08rp=FL?=y;?BmSYk3qtBpV?zg40UTRJ
zOqI|2UhnL`#OW{LiQ6m7r`GQqnnX>fN3VTTJi9kW&C-ztH_Qxd(c_Eyv&oB4)(K+~
z)1oe*t}|;g5z4T57&+nnw14n^9kZSUjsiB5WcIY3Z!?<IUsHY<BVZj3FbyGw=e_=L
zz}D6Ys;7D)?{-;jjtp|2P-jn<6)bQfwaBqks3niz(bmRX9$g$tUBTf$?AcjZ?9vK6
zgQcW;q9ymPCur%>O5>e)NCZyDP~Z_F`*>~G^lIQGibVGnOhV=P%epo6p``a8ysBbr
zk2EL`?P0$UmdvUCY<9A{@jr`q_YLoxx;79<s-D~E@`H~XG(USB6EF64G(885pFeob
zT%8BojfJ0Ojx~*B@o9cvlzjW)h2t=8gV#;EI60r%tJ9~yocDF-=|D~4(Yl4+aPm#O
z5h^2|w8PKLxTlj{f9k{JeBP%$W~L=CKkh7Ed^&WcF&Jmh7aD#!J0JZ7FEhDxTB}!0
zuHZ@tuM*=xjBRj22W?X#%4N>c2i11BFby@z3(pf_lQywf(<_XWL$n*KLj5NNXM5bq
z+XzqkD~|<Qyo1Z|c1jM|n73JO*K6LS`^)^fTqZ*1cwG`S8PhdL<=2aQCVLHnaKuKp
ze0$`Ym(NxLuM2#!Wi5w_B!}F}p8iVnyD?kk(c{zED0t;o{*~45Qfet*c%_)XMBR3j
zL0Z@BvXi8i(H{aS8wf`p8A{ZZ|1KGi-0^}E@=h+P=8j`x2}xkNh|+<n!M+z(sOI1S
zRYOgls>?pl5>@U6P{4}3=VRm2ZfrpQ%2<oT{B9~UVU`!jKI02X4mc1qHsY7Vd7nJF
zInYDO)!m;M+h!C!&AR#h^e678nT&<1z%v(aVD6v@=y3cO;<Rbcv3cbmi&3RA48o~I
z@`v}1-)wEiq?^{vL%3}_nsJkBscK27v~}>*q3P*QnUH!-viXSb1UuU^yBeDU%Kwt5
z^16P|Ij^CQM7Io-XY3!0s;Plj>x4w(k=vF%XQ4o|4z74ED%Gix{9?r`<TPakOBK58
z5Git3^D1h(Gj`yjhA7T_L}IpuQnZ`)h-qlQKO39*iWVKHU9^!?VX1w3ux-Y8t?pN9
zRnry*n{9?|7Wjs$m<LO~vx61D-GugM1_B3$Qi)u9(5YG<+)Jw|je>&IoC;<QL0g%M
zDyVB@$nMBf$CBtwS-7Vm=v5EizzhfBWKL1Zvty<GgWe3nfw_LA7c}YT(g}*Z9B{nu
zV2etgn63ut-MOA{5D=3`mNK-@@4uKo{NC{gn)!0w+_DveLC)*PX7V}`g~2>;xlG-}
zN%i|#dbVm@L$`PF<1(BYLyh+mEGKL_<r}$jwdB>UZ15IGyfLqSdgaWPcQrMo4qYr<
zJjVi6*=dT(WY(+vfrAeBH!bJbF051&6V=V75<UpUg88u`jF(N_r0(S~ndMB~<hI@8
z-C}&Xn4>TlCng^TL2Hu>SFf<FCPlxv_m^}NLVyo;V=>U^$!DL9Q|MG*QH@c{Gr}C=
zHw6#w)>1pdqR*eF5)Kp2;MNK0E6wQUo;K>$i2t70a|gG1c!0w!S4&Fm9VBbgB(%wl
z7CMAHte2o1WA=j#0p!t+BVYqMro^5_+km=Pa}dm!koe+@Yq{ZZqLw}gqy;y4agL2w
z(iwTvd1chAT;YP=*Ya9J;wE+_4|&-_7;ph>UVa8d;Wde%m&K5vLJa6+wumqC26HxY
zA<^EDARup}(5iY*a2`xusDIhWCP9&)YBh-`LN}ysezMR9Df`~Pcx8`0PqE`Crk2d_
zl5wNc7c7JfucN;Mhh@lyV)rdWON3cl?ec;;t=?bv<O$X2(b8!@(sUmCoa1F`OnzgA
zgb!p~ivcYY((I@HSXXryeXPeSg%D1-zJ;H@o$lhOw@3a2gNVZim##=vks@Ea(5A8^
zf&C&6kt+9@_+)bZDI>;vdU@%owW>z6WBj)y5iQ+^b_&GA<IYo1Q{~mC^7APWNSrCx
zN%A*`%A(PAQv$ykOeH1hC2p#RnxUI=c)^EqqE%A<y2R>fFyf~a#o?csH`n{uqkyTM
z<X|W)%W-};V`h-qCo}+bC;s>XmxRx;%Kl_p<EKzQF*+nTfq-48>yABH7kg+Z+heF1
zFX-=e7+yRBj{nmyHq>KTx^=!CSG}N+F#%6(Fnw$lF4~pFaqg&Bm471c_hh|veFLRj
z;5XlPI9!)Ov^6OtB-v5Z0-jKV#I|UaP+J5UPeZ!!-1`{(5S?3r>NtQS8yd0L2U<{m
z276uW(NHWW54pU`T(M>g1vrRK?!<w@ge`pf&J#)t>Sy#3JrCCfi))79B;2lE&<XT%
zjlpZwQ5|>gu?cig=~j(yEx5N*=!GM^9b(yiKDod2SBHPp6*;qQ<PEKO+xc2+>ZJfY
zZ~8X<7xhbFCw&ew@D6a^d(~kEj^g9^7UfOf;bkwHUN${Xp5mRfoQ|UnF7msa0(0Jv
z_C?;5YT{AV<^PzliVofNBawbCc@IOZ>>ZH%Srx~dv^dwb_`HfqW|X{D+5+*W_GI}(
z)yz5FvV8bF@2OZHD!!{>ji)tSHo9Z&k<fGg?Bi4=bvMP6Cx2-iV!Gk;)8l*Aw;eGH
z%V?_W^%@iCc{k4mqvh-)ZHhXeZr4*V*LVm<DGTXAD#1BrGAjj~U;_oKcq(l>S|@~Z
zomv`(UJE9F({<M=9Nt-LO-zS5osfNsm+@Y7VFZFYEcMUiP_O7bC_03&HgxsLY>s9z
z{G=lbE2STk{W7NiT~E{4MZ@2wS&c3G^<Lwa2d~RJ(|N~N$6Ds7g#PdHnVItw=g$9?
z8a91_x}noTpA9oyX8=hm{Wfl+H%+T%%5bLvz#m2|i7g}FE0xoaC9!uyf+Ohc9c0xx
z%e^ZB(Nc7T5G={jm-Ldo_KXUO26|U91%_hv8}BIIE{HTFc5ZtV`x2KG%Hxv`&Ueo_
z6vbW4vee9}jQL#@5PbI9cxq+6G~RqP+cN~sWh+g?sTy6&l!5-mL_#`yeqrpB%6Z%E
z^HZ6U3aUl9-;N=%gkXj}SVlL-(Wt=k^Km8ZKL_mUz5fv3bWnS->Q;TvVLLlG5xG}7
zd8IbA=R^V>;Icn;5I3OzupJPR*KY=#%+$~2^zz72eWcsByC9odOWIy@GELLDXu;&<
zdsWMX=!kiKGnu>2T<1K=4({PW=7TG!2?hU<`546Swa0W1|Ai)hwn5EttSW%<&1<{3
za!Mm#n(L-TlH6gowJXMKeqEW0l;xzmmJG0rs3$E9o{NmG(h&kqWcFV)gEyQ;Vguq)
z&m6fIY;^BUaaVu2@?fxbr19pBLM3IUC<il!zne>Ld(*j6WyKX)bBr2FTVoGL|DRId
z)=n}sX57z#`E_odiNxnypzG)`VPH&Wnss6HI-<2eo{&s67}S`|;Kc01Ac9CqJYdPv
z<9nF6c)dkV>e!p^v1euX<jM#SX4KS1#%6nkrlE<HF{Dr^;sSJIrQTAzhHJRjD|vfw
zYu5dV_DXC#VLn>dfh#+6wJgy-o(Ohn_SjW+>OaRc5w`}8A(=uiQZ;z`E?wRp?fhEb
z$O<))SNek7RFmj%uy30qB6{|eJu>zwwRR;O>B#uXfiJ^uxGGGD@5|Jz|6P~drEpD8
z8p(lZO>8LEd+H%|PKE0C9C|nd%c-6?Tqne{2*Ib&(S|LeVrP*#cj?y-5#I>b)F(_*
zlu|p{-GD@mL4nUq0RF`5=fILCqds7-Q6kB`$zBb@I~#(J-?%V(bNx1SvwQXxiR}|w
zAs<KhCq3XWcO^bH;bZJ!nBdFk>HlccXtP078m+Eg^!lXLagtKGHH%jlWp6i{?CH|H
zR$}8IH-q|FVX;(c=00x$oqcC^`Ex)z-a;%&Gj^(_rjuux?D0;Y40E_s92}=V&?iXX
zFSr9o9KAW0e$**-X3V0nQcNt=y!QE*`X{ney6gYzd-aRL<%iNQU9kLR`Db}f|5?AZ
z;@|YI<QaoB#mWSx=6FSpAoWfX>@Z6|EbaAIQU1Txd6_ndr4jNLIHn1&p*3SH56-W9
zm47ea^5|+sdH621<KemzvUU1bx{%@oK2*Vr6}HOIGk&Q@v-)9vT01?j`yMZuAHPw1
zXEWgMf6s5evwR+ioXXfPlLR?w!2Dba$tNg8mL$_O^Yk-wE{|Ib6vT)Oi+E0~AmDJn
zs<k86J6Goq*u3)3t3w!18ZqJ)IfQkwjtUDXY+7W4){`9<)ZwP&l;A==2qo$v4#X`}
z^|LsAQSx@FG;j72Ze0k&Y}r4bI|%>9`=Jp5LB-mWTB-F)a7yXWe0!*L61;L!JdH!x
zJo~bNegj*9XNo=FE7pzXUqqj=3y`tG(0@*pDE;<CGM1lzUAw#|%%u=9<F)GDcvso5
zM+)XkV+=uSN_;Z2Gjaze1Z=Lf^ie$jJoS!wBpQ6G0ZiFdOLO&tN6e+JGzmlm*nW|N
z2#`RSQ>3tEvfF2XzXVFjWe*m|7(DaC2L8yUE*xf4I9OCuxosPC>IRt2XI%+#>DeC+
zg;yk!L(xTHTbSQGoe(9Cecb0n1VD4%ZuOd1m{(d&p2b8~sn`Ym3K!!8Yk-r3k%%fO
z=h)f$nscB&qYC#;E;gH}=YW?>!FZ}u`sq$Oti{5zBsqmbOfO%FPMFHkd!|zEkLWE5
zk)2-Jv#=5_y!6orXd9rdN))e>L^1Q%`AN^@?HAso9O0J9P2JsV;80l!?!+bPOFMMc
z%BHh|n1&gBGSN`KRxcWc`$9yiDC+VESeQ*KI;13Gv8Sw5H^3@X@Hn1BmgG8MbL*h8
zb3Cvk7|?uiN8jbz=weCws~rMhvFP|&yTb!-xD7%^kve7+tAoqF<4+B4k-TH0j(0$h
zFO9336-~^2-wq}z=_Z<Y^H=gmgOSiOb5Oy9VwLh>CgsFw@3icemL6;_OZ678N@&L*
z*j+rm(%BAt(5?RKbqPy2P3X^_Kl2#FkvK1EkP&*o1YfD%>v}&tPk7=-eg(|R*W|1I
z79TFZa;hp=?b9Pa$7GW-pD3ybqab|HtJs7+Xj@j3zuQh$R(fN2E2Hb-7o4BKAR_kL
zd1>=v=fDnP=`cM(l|UYoRLVX<=gq(XkI3HydnjclC`}hv;~S=n3)5!6^!b^dB^8`i
z3|{g=;V`>~d#3wKvv4ZJa=h_7a9_aVcV{8cIicui<CWa?$F7cNQzJ(%^(XBw&v2Ab
zz{u$juW^;H)vInk>nH)Kl;UWoR`WUq9S%o037WfwMm3VZq|kl=M;9(D7dS;j?3Ejy
z^Xg95U8RhM$NX}!q@$n01aYv7P%N|)5s^O7gvid7Kdr<T(^uKio+E{f?$jkY8S15M
zJUEL@4}2cSXPQAX?2b~L;8M-0ot>35V9OMvkMl8fos8?DSUk142C*sXrJVK#cbu~#
z0OP3xi*sE3?n?~=L)}!RA|I<hHO-B6#^2xxOiWTBBBva#Kc@4lyz=CakDJtHeH_Q4
zOL6sLv||<;5$!9hWqeqhYW%HMppyEEh3Z3Brvr%)AzlOlPg{B2`Xas!#F6k8H{qKe
zI7b@exDww)R=v6eSp24e+C(-T_3E?{a$Z^5OG{oV)G<*SuCLA_{JL5zw+{4(6qMD^
z>XI(-1p~Fp;k1>6dPXY^i`RSPaOEKRz-Us)N6jHJGZfAaMRLSO!kRVOR7yb{5oYdj
z=uCS)PE}DJ3~|u6FDo6Ay6?PYbps9h@#se*;h}e$PA4!XzAN!f^hR)H_6gfzh=x5=
z`&tI6?>KEIx*Okl8B2>~kYy1iI5J-)#Au2m$7M8Pep49W#7+v+AP6n#CO6qgO${g`
z5YL^YTvknX`hbQ8enPv+L`HJ>YMtx6QB=9H)>GSFELP=aJ>8nB`Oqz1*&9A9o^n<N
z@gB;Ytd#8G>Nmkgrz@)@;(`^~w=iq&2+^hc_|d#<76puh@A=;k6un7j_pwFUG>kOH
zaS_I}jL$A8JG!I`3ra~FUiKr8O@S6S2ectA_l#BHpYwCW5zg^Oie=@L;`^y7$6%dJ
zD-9>fkTFb`IqEFnDcOA#E5T$mxUtlC7uXcm`+i@c<H84SE;s-oP65tRpa}=k$Od_j
zt6&pnB58UOEGAoehD<EUr8(`zQiw4xn*|-`765{7)6pDpt7=57XGkXCir|Qt<E#~g
zO4pQ1X(TV@@hG0a-DqLVRtgfB*iY&D`AKXCpSQ{r8soq8m7mVbLvR{Rgse_>6fO6&
z0DgHtCmpa&A)06+i4LX-1Ahe{haSRRmk|atvL&Afp<oV6gBIr^gL;IHxQV&ep}>;j
z!*8d!W$$M^yx_1=(BOQ#CGfc=@C9XEu?I=lj7DdISCR`8VeZo!+u_oi5m(i$H?CQN
zvUp9&0SdL)pK4{4daoyz-xoCG6KQ<nW!*>_JY_nJ^}|XJ#ujJCGR66UgAIys+e*z!
zXF^A}>4cMdC+c;re_3(HE=4}lAZ^uBRd1_g#qF#TqfN(Y+{UKBB0Eb#1&;BnFs$dN
zJ8iB}tqD5obXS@dlgINEYlocMdRYvA!x7XwrBiTyAz`tRRXp6gv`^kVGIM!l#c7Ad
zi?=(nv{mzlj2*sGfeZH(s6svB8-dT07iJ<ew;m2d#!jBb=$IZ_5msVv+kvN^(3K&)
zQQp~<`5YcbYlB7wP+~n<+DR4-(Ya7mD7~z~J|HG5gX#pYU+u#J2mnof=O{X~GIhV^
zHEZ%d001!Ywf{|~2Uo+upBc@a+R_97fP(;F3j9Bz3ojB|S`lst1j}0~`fH%<O{6^R
z>t(j`u5?TOT#ZE*PFdI)K?6~La;+ZZ?$lM}`I*3tg7et(&ygQKhA1u|d3EOMN$4xS
z7p1!=5((C=?!-TN6Z!mK6MTq#t~MB>Cn0vhCIo^K4Gg8u(xz?i1<CT+*tP;u5?}wq
znuw%UeVCkjWeH(!cK7tzJ)FPgBigp|syPj}M|FuHo80eFn%)#l(f5<h>>x38L?G36
zoxk=*GEz<W6V{#Ge4T(X>wH6xMV?Kt?)MBI>e<A`FX_Ig?u6#b2T12R!9hyhsO7Kz
zLR6(7`qN;+qaI~<^TF;!FEeD+gkhXv!jYVxxl-1ktKtX#2%P%<90>oBVeHX3rY-qF
zyx1#V<5RqBoQ3NUk;`10JE<d@h>Hbt!p~k9W8G5nrAtDL^a)Z0Mf6+RqiZY;=3>YT
zYi5YO*c%ho0lA|Sm1rSQqQTC#+gB>BcC4FKYq8^hwFcYxNZdd7_Ha0-(Tg_IU4l7*
zrgAtW)ZZ&y)l|n1;fUUHdoCd)ELElsiS|$g?e269tfayQQ|jl_5tMh2v|T3&@&9@Q
z3%5$ws~@2a%P4sj0^)*Mb=l&aOB0+q689s}H>s*`a~5*lwrlb}b(e#_n^0ApKN4}?
zBsor+hr^(XxFa;xRpO0|<tGF>2wRKJT&F*~k0f8~?>QTn!O@wU$BLcZ2G0d!;L2L~
z|LM~1S%v6)%S|qRkGnX1d(KSVjL5D!XX(<F*wPN~<G)fNrfSnFDLn-I%Ai5TLmt8|
zU~QA98smZ2^6An8p*m3~j-<K@4|#kLfIH~9d+D?1wEx2mXP-kox6Oa_8ZYSEj3$WZ
z$Ie?loCjWraGV8@xlI=F&?=itWqjKlgoUWbT`U8d>H?Q1XMnRS0ROp=2kVOL*=gYH
z)8DU>hic%yLYax|Hqa$%y=Se>HR;(ck9oLTclK~~@EyGY>>_6R#coxz1aj35r`CnM
zXr{DR$|cFu2|zYJ=hEiBP|HKM>etj15KQA$ig+h9Eq)muF3x0zyl(;g9|GXF#9Eq9
z9gV626n-3F1=%E}cS4KKZr!B-UTGQMc5TsiyskfS%58!(gywLxQ#;Z041$fZCBkhx
z(_X)OTyY_%d>_#K81LBmpXlMhB(25~pd2vl3iwM9CUz|$gmJ?X4Qt>S%W{_JScjuy
zxb(vaSU4_%jcZ~_1u&dk5=8?>`ASYFxFiOa8kbZ-PTQ8mL6M#;Xf42!1aRuXLf2Q9
zRHKnxOP;;BXmu~)k#A%P9|?^w5s>Nf5;=?(mdI1=>k<VL7)w*cS`erIcD*Prlq^w_
zJo2`4h9Ui!yj4pGV;(ZL9-$n;zsEAABob#B=pbL7B$+lgH&a;Ag~XklCg$Gpxo#<t
ztF=@S45r2UVwfcKnG#BfEf8U`ShCEPF3*TAeI+bdNnGAk9vu^c)~tlAtjpG9*T5%F
zLC3B}$lD2NX>lAEMM6&7D9_tmO>nf6QN7d3@cT!72*uwolP{f4hRVtfq#u>%D09^-
i{<&XOwCFTfr!v%A-IC^jm`Li2P8l;eSZw)grh)*;^^3j$

diff --git a/assets/inter-latin.4fe6132f.woff2 b/assets/inter-latin.4fe6132f.woff2
deleted file mode 100644
index 1a4cd429ecffcaf89a687488e7d06fd41617160d..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 61412
zcmZ6y18go#&^CP6Jhj_X+o!f|+qP}nwr%&+ZclC7wt0Wg`zL=sOg5R#ZZ?_SNp|O&
zxz=4?j0pe&_)l(+0LcF-P=dSv`Yr%4@a_K@{eJ}~m;*PkNd#|%m|sFoP$|v{(tuxC
zMNlPB3=pco5QGF9*v}G}3(goaZ2`gtN(vUE02f9L04Ib92ZtimzJ+n3*dlbBup$u2
z$R#FQe}!_lI46W1t%K^(ghsIfM!_DPWP+XsB7BU05PkxIK>Y-ju&ESDEv-P=EfshF
z+gH-%8V<aDa|YGyA#c<X*k9;+3Q}ZC99`|5I#tr;ab-ilS2fH>+#Hvl**<#C3%YUf
zTlF?$WVg}H?SsRz)tFZFM4-?`SD_TAuFuI~4ZGCf6{Sj4aB)K0*5|tRFPQPH?v9e~
zsl8Cs>aWpwg5{EpGstvUSyhtZtL7LkqqC>eBBG;Kn`lOm@X@&TGfCxvyoC(+w3<Jp
zyD<?Su(PlD&cpR@N4UtyL|(oA$P7BeiQ7#3_OQw(^rx0I%43De5tzbCKlx_ZxPolx
z*;H=z4G#^o7-P4eP_?rhlzk(yP9>NJu{{{~nOvvs@C~|N@QHJ@PAu}?dF|8r&bOQG
z_5@v%O+0I*;|u9(MG=(Nmut|CMq_cmxe1LdHMkV7vcau4%Iwi(g|{gqagY52<>4RR
z!(9CM@^kU$-=!X+i?K$K2Yx~7R4EL-I)%YrD1ilLO$D6ulr0EsFO_`kL4uL98dTuI
z&l7H%0zdtnX;&wIj=A*H@0;~*X8WeUCoM*KP7YZvW;>>i;a!zM!mPfnkOW;r9%(gO
zcg<gAZoLWa0Se)*>zsQ?XaA~G;*Af8c;8NJlNg!~Dj}_1ZU9|e=}s@e@>R>%*gUb~
zc?ldz5=+w9<3^seF(Vtqwgyv@tH#7w8+d4v2mn;h5(vAaR`?vRjS$Yb5@oq-n_ZgS
z8vaX-d%E9`&8qq8<^uipvB|ow{i>y<w07Hl8OxY7UJ;UE2)6XlkoV<#3fXd%Yv<qS
zr}s}^<F@e!TsF4+_0#BSHnx+l>0uuuzkH38e3nuaIXKDViPTGT(eGO&&hwdVDn6hO
z*LCk}Z*MQ1r(tyJuw}~V_4omc9U^lfbI!@RG#kSDnaidHV)NBDhSv#iPyNVCJDrUo
zIP|A6I5dd>76>RBl0k$NUXcQYV?;Ce($HV!4Php}QxBuF{9S^t*&5#&Ujr1B5C&%c
zum|BLAxG5gtwL_z-YQTu+CNm6RrIrp+PXuN=UTZ{<lVL3mr6(Vrrj~$&Hi@fW*2gg
z9=UGI$4fVoL6i|8lo=rw5n&Y+IB5nriG<i~hM9>5na4=st(M_#>)>*lzq6WnX9T(F
zhddh`D$Ll1g=nOTX05ef!m%c2pD|5qV1rAHDfy37I72G9LyJkH;F5$L0PukPpXu{_
z6A#;_N3D&y6a`^;*GOT!1CF4-4s^Pcga5gwA2cLUFd-Vb0Lw6hE@!0McDL(lb5%P{
z7ARh|0rdZw`N{oF8%8K0j7B=CVvJID>EuGaox1S3T$Bkx$yuthU8+kZ${=4Un}|A*
zW~wEImk~yZgm;A?-?7erfK?=GyY%%_lmAgUspi%EX?eLLxPAFE=6K~xitV*YZ(Ca$
zg`>OVBN`ik!a9fqg=ZK5g1?{0Gl+ygPU1-_%oIWjPXyRI2kvzD8Q`QvMT5ZiVC(dI
z`TTi<2E!U0L6>+Z%-j?Qh)FQysv3J?#ac+xS%d&U25VRaom^A(vFc%x?u>4Czxp&i
z^PE(3D-vCsptZGCS5MVdZ#+#-OEk%eLJ|<akjM?~A`IwqWkD3c?s!u;_d$z{Bq>Q~
zKtijkke`o#>vH0~=$;O6pZf3xY(QCEe%4$Qc*qZT=VqATm(IcFlD7@`x9WGdcbV^K
z7a<xpg>X%j5!=kp*eQgDHt~dqm$$xNZdG0QJw1j?W}w^cNHZ}<+bvV4gf!VxOBY1^
zt0jh-s_ZtC4L#SeR2<EALTVofnZ7geu#(Ie90+O}5+1nKO}nnAu4HZ2IvsY}^CPE4
zF~NXtz-BBAo54&Py3*Zk(V|ur9q{GyHYd%~)C>dqXEEuLaInooz1+wNbY5O{(W`){
z?bC0eVC$j4g*$tmSCf$_^uq>hZ#j);{3fG_xqc1QdU<D1{cO7p3VA!b!%gVZDvd1I
z`T%S7FW6%Cr&F~1M&czZQI$Yc6~(B6MS=sE5+$$!HZDLZCm<ABkVUcy1!2Ld#@x(b
zHTXN7=|Pp)C8Ycb`<q1PHGePjcYTJ}<QwsQjvF>+9$%Tix+fpH@m8B^)u4O<fg9D=
znYt>|vKne&u&6XZFXq7U_XahO4-_>`Meru@1=N4AnujK_jNiMh3wm);v_ATwkOrGv
zOPl%I)4$LIY-zTpz#+520P3NHEfaVN)Jb&;RU+#q_xaN$s;xMc8{uDY3pzYvMCcPi
z{T7i8Z$SR#BH;PCT<-#_YA}uyIc0z;4|<s3v2@(ScPR^5R}<@qsa7*{t(P@#w;DjY
zvVlO4OG{u61v0(=*|_g%mzg9%%{G&pXqcE-@yT{`^`cK0$a+e=PmA&u7GX{F3OldO
zM?`;2Vt$2L?K<|9OWXS+eagiZ&fH8xOsphCB`QTp6heG}uh1a#Opn5m7GEeb2s5uL
z{(QMCeDXy>*}A>ZSZgg%MF~=LOeG;hKRyl|TB8MHu-@mf6)3Vj0sb=P_nx=et|I%~
zy1nhF>ktqT5D^qHt$X#fBg{#h)(ieas1@=w%Ka(geEmq*z|b_IXOr74dQ~DVSQ~wX
zv#{1$(h7y$FoxY&zHWPaiJ+Yrbn60bKn4N}LIYwB5+A@7Fbc@}WkDBn!I?w2>EYb3
zDPi>2{O1)KfiR;#-<+Ze8S)Arj;ypGstFWX4Q5fHR%mM>0MklDQ;{_+b~I5CD{%iv
z8Ocfzo)wm+Din1zLl=X-Kh4}!+7aaxiD9DXD&QWXQJ`H8UDfp$oh}m#Qe+fi@!l^I
zQaeHva74dgP*g?*^B3Qcet3AaYuXLES$f8W-s^>23aaRouxp2dipV(vhv}-)IaGj$
zaqsL8dyNJx%oG=>EEEazjTs=gIP7qSF%upXj|POB3*{h}6|!CVS6~mkA?O0luocA7
zCeSH*b0gW}&^YWM&DD~P*9vjp{t)&x45yQrzML9a^KjfJv#WL4n8!eeJbq(G735^>
z-)LKd<bvp8YngF#<U6$N3CNT5*-<KoZp$@U`8LtyEG+|U90(>?$^pbwToT;-3m?Hv
zkjU0f`t^XDHu?SMhj?4#QE&Nn3U*W9RMbnK#Ti&MM9M0YIWSyaww3t26{8OB+4y-j
zj>PNns}mCSyS$VxX7YO97o?C}gJvc4qBP9GSh=L5RCRk}1%G>G9$OmzcBk20-wJpZ
z_%t9K9*<za5<6ouLUsopDOuDavwnnzoExe5SpK%mYIx~nXs&)ufR`ptZh$3P<l$x)
zNNPbnoyM$bOP0Q>{>nl#Rs0Zx<K>b>DbNQ3VGXZUZIMgVzE*X?wit#@FWVV217se^
zn*i|CAl+dd$-jC2;8|9)1XOF|cdK)Q*j9wDfbu9f24J!>B_^1rWA=8Phj;sp{`oA*
zuj{Kx9y9Zk&Mz*m;PArbYZ~XgL&A^;QP$i;kEAz!eVKFbRT6jTSeSN*bn~@}{V)8o
ztlrOJ&DNz^m^YnLrWuo@-aqq8@H+wrYHHO<7wlvf9NV+2u&D==?oz_=-b`DiePcS{
zCnWd@f1Tps9jlBzzeTEv!saYtsV_3opeNrxch(Uzt==B{qqp?4lw3E$N2+BmfU0gD
zI33@;QB8m~8C(&QQ$BpKxAe?3Or&C*&*Ticb0&{&OG7xj{2P!#nY3ISrDXB)7xTrE
zE(Ju9r!@zqiqEd5$i&a8Frqq>{ZK~d7MAHs%JFPK>FmrPu0>|oCRzj$)KT;CXMU%A
zA>PIK&ks6lO@5`GG0Y($lBi6A2czS<Y2a}<Zr>DxTfi!3j=GpJCTmWaAyk{a(3{Q-
z?Lkvy((-Xa*?S2SJF2kgAw%=-R{ywxc(<rD2Vt0@;(?$OTagCk{5yMUc0HL$H}h{X
zJw<E(xOLv#{kP=0x05zu0mTD(#1wbG*zMaQBn5MGO@=%MBE)JE2(#6-_GbbbOLp0@
z8gy68h%oDnD+}CD95fCrtng<O5VHqefuu;%acQ<~zUtD2eB<E&FW()2>&PSqipGaG
zhRH&4hX^0YE`C8MG6p~~p`4qtfF73<H8DdxtjziCnX1faCbs@wOZjHh%@&pOcp7!{
zC5xMBmgRZEdJ9ZUNvGI}(}x%9lL<miy4ADzMh!TOB(xZoK_!j0G>iPyYzC>p5HY+{
z#q}nlk|Mf5XzX%+C{OybyaO$NGD4w?K?0f_`xEI0@0vg0h&KKZ>{3Yi0al{Jv9~p^
zovKtSl}e>jsa2~?$(RJc&T$BdePRh5Z9_p9ULIn9p<<DcmQ5}hTR;WzfnuhAADf+0
zmtz54UbOckVL+s)Rt2ddCx5EU=xT}YcH4>#P8!@2TlO9Inx(_^9H$s$at=lo{8J`~
z_6AT4utRbU$uN8CbKY*LR-Ka9crG!Jv^Ta>#LxCcVSVQPSI5?a%y+pkAFPef0QjC?
z>6wqaIwc6|W!1#DZ#U)5EM{W!^~n47o-*+<>LTGsvZUbj1(0*<M#>`);GuxPcZsRR
zz7ZAT`~yb)qf0y-{<8A=Ksr!*kQ^*iTmi;$EXV{JS_PmoDA<3SB3G0=?+_5UeQ8VO
z-kWh~U}SOyqrWu)4Q<tzhR2-q$)cHq93|Q~@8``FP2`G7fdhk%Yn=}L?N9e6URzO5
zq)N5KTqRfvrZX2>HN1teXpgE5gv3g_8jRY$GGzE%n;oEr61V+j(=amgg3cSh%&HMY
ze3y`g6cGTs4TFafAd*D=n$z4_-tt=ji*PS_X}ngycU><5ioY;69{)goz<)shq}4Qj
z=~?zU2{;_C%M+WC!{HjSUlgbl8gdT`YZ!tmNUA7;8l3vKJmpxwO$p;y&*;}V&s*X6
zd>PvG7-`-IufjbK^t=aO<jUjPwi>*E2mDjSNC86tv6mTOqj{%nyni1=!N3NO6%hak
z7{I`hZ!~iplg$s2?t(?;(h>?krYd6)EZsch-5WHoU`9+v`gSx%6kfLcYkqvg3Xu)O
zZ#x!-2i-IVt2a)tacq_$5g~Z+;~Fu3=(}axc5<rxIiuwhLXD?Nl8K{WRK3hlbrWdY
zm99@ZXCJ1hN=n=I)f83!t+ICH2Wd|r%tO4H6+*O9H7%sAjeoK7V*IhHYegEET>W6=
zkFD5YFrL(VNEKtl8P!tk)fOi)xz4;8+}ujzlBI2zg^=M@WXeI_Y)LJ-%0YtRauF_#
zr5=<Tr21pq@jBeP((@W)In%?icqCQJbE@8z=cO*47_wkQaw5Ui=}*IzuzG@)Cg4&g
z>b~lcO@!p6$5}tAT<6>Th%tkvc9qH8Z9T~~k<{7R4aRZ6&*2>V>UXV8_916`^D|J<
zrAjnnsk8#C2KE7$#iE1*gf@!HEgkyGPWEj{kW3<RH>e|H5M^0w#0<+-s%e<U`}Fv#
zl}Va8vj~QGK{Xq8(^}1K>z(U@HxtcoJHuDeG+?StnEHv_JOLb?Nr+;Xs_(^1GV;1*
zFPnH<1{0Mct~A=5?C^T8!8}%ilI#*IiErrR!Qh>}44S21<m2*%FwAfIqICZ1{1wr<
zS9%~2)52aG^d%X8+x`os&|ENm+l5_iDH=mLS5$|@gO+LPgt+5Z-!XHX0Nj=U9S!NL
zhst{X7dq19`K4-E47zjZZ~gE}2Nh({?@DLt`C-^}pA@SUl_wmbI<AHsB<duAvZ1Pc
zHPt`}hRxu}txs^57H^`2Lt;9&&_zlD)NaTM3ht^~@g#j~QCWRvlv>|x<DpdAPYL~2
zDV{xkvA_2VWMd-}V{KW*qjgGXS8Sx-jS?=}E_kq7;-WOo1SIxw1hDA7@3^bI7)CC$
z9VR#3^6Nr5ed@cABdgyU%qkQf$mWN&F|rd1CWJfO0~HJyN$E|)V5Qc#jk}k)*xP<P
zg0}0T%a<fEs3RKb6k!jdxBmj`2`p_%0<hahEtAE)X#QF)8yoxLLI(vC_h?s=ZPpTR
zz`M`WQ*zVm5=mp4q#95S^>Akzdp#+3Lk^q1BKy7=uR`a)RZBi>5qdNDYLeT&rhiUY
z<m-x#!}Db_Vp6Hgh}}GyE3>9nx^57JIuQ73dCAH@mME$J^&2^7DmIin`lfoP#9y8j
ztXJK!b~X0iUJ1%RIplDdesaf0?1ua7)Vu8hR~fzYY7bb81zW3Wb&2n<;m_nDfs8T*
z=`B=gQ8+!cqaeV`g;p9*u4wU;6yX*2BUxRvN%}}$VSu1(s(SW_9m&S9H~;EcE?V$!
zW@RDv`ys_T=sD8X*m7lC)J?8%{2m$*q0Kx}6|sjp6JGG>)5AWaO9A7-m8^_vc~sUf
zCHZZs4X^jAQcr$AeHkY2$DG7~{lOe@>RCn^n5^yC{2`xLx`i@$!M#l2#Rb@`RNB#_
zVN&{fa>~&(g2bz{F{6Asd}JU&=J)?;NWRBBo4LU!EB2fXnqX-y>7y={C!h)TSK*Xy
zIjwFe(Q^&9{kX*Q`R6viT~9x`D++e+6k@SkjZ(^Yh_>Tr%-{wSQ{zLH&hsI$WZrQ~
zQ)kY=P<j<Xj^B8B(LrQ_-+G&;|JC^5ct19rANAH@BaZ}BBKU$w@#mpK^RMwy*^(eI
z@x|Bt;1`ej`1$*}r_IcI?qBjayPNZyLH66cl!wPND0gC*1#{kJ>JBlvdawp<Ded&<
zw3BP!PS=)dq>(-A)o$)IeiuIf&Gu;uXt3IH%dPKGUFz8^+WC-Z{w0Wsqd%HIQ2vK7
zZuZXK9C?N%fg#^KljuUI`oWiL<dGxX<bg%;okzM41?NvTGAnwdh^+9Cz{yB_TAIMD
z#B_SS2dpS1YBEwFXecy_2nMZ20us?+NTjEuktQ1}YbY^tw<%mbW$%fZv^4Ja&JI#+
zSi9|`yNj0bpT=rTOPu9Z@uyoC1bD@vp@*C8okZjobB1PnedP;4vK&-CM@(D{sywgg
z^t)o^2TK-JZg1qk+JuRaW{s;&ouJU57`{DwzCD@51|`~0LQW9_1~4P5lZ<(hk7iPp
z_&zO&Z+-aGDWX0v=VmhY$M*bwY%=NRVd*dx?&ktEezoDJa|-p>7HaG|#fBPUD;&X!
z#93%9BBCBX7PXI?N4q|a&w-c!;lJ(pcto}x?Du~?jfg<DpZ!l%ZUUKJ#$SkEe9wbJ
zcYzelFXi*Ovu5sm@$2TNZoM&^`iZ&rsNB0`*SF_0h&I5nsYSSru^+8{4Cl|jqkKKB
zO`yHyZj|HMrr7lBM7di(B(k9Zd_=Lm1d8D#*Fu50#e=9!08vnJ6-rLa{@W4EJ>`1{
zypNL*xm4LPiAgky(jV>rpi~%Sq9?M2B{HwRNFmbOy||2wPbLImAm}?R3aJVs9LlH^
z5)H;U-k?QoKMWxjLHAL<?a~6q@qR`H4DKvr#n_AoBr4&f06vO62xR!ceON-`9FhoO
z*66GiOcQxVt6<cSMQ&z43`HbgNh_n!vzik}1aTH+QKVH-uF$XtuTf4U)+xziC}BF@
z+<u{Rsp6J^1H14kFU__bb)!gv6fM>8L{^{axwFe~vH%av8E!6QlhD~*vGDHMSA+sj
zd);X%frp^D1nRkYNYUYPI#>Q_W4qF}WaElI*mIx9GSImBrdJ)b_zc?!p@)5-8XI<T
zR(2dKl3qDREdPDfiI#;g@JSWUuO`*EUc#sr2QP>ljS1cXR){RwKRi-@89$Xw7m`tW
zBIYAXjxRGr(CH)w4$Tq@KyHFS_-`kGNE=avg-vi2B%tK{F6V_9{w%?kToi#(&x0GO
z;y1p)@R(N+bmH8;kvLUk=DxbHpoes_YQYvsfLa(*0a%R{E5HERND&$%UcUE@a2c6|
zS3S3l->eAYPjER3am*f(<k+`g+G~&5J+;P*wq6@J3=o=AmiRg#bv-)Kd+vgaCIJd5
zqzPUqGNi`2>S73DorbLY{VrE!@y~#fpb&3dplqfV9f%H9$25izaxgrLK}NTYJ<=MX
zQnhtzJ$<sQEcEhIT~@1ol=m0{Jh+dL3<Q15t#Zb#5fE!7LSX3-j~J0DO3(QjDH#c*
zpNCedw8LPXY21{o(MBZtXd3Qu$fPjb^gRp7h>hka13Tl=t-mUdo!Z;DO6_gRcXsSe
zl2NG8X_-%@o;LtgRaSy=20q%RVbX7G>M&F+Q?SLkc&`@3WM0RF*F82*xA>I$e4Uh+
zy_LRx#TnU^Q*pL#fmzjyO)wp{lV`O@C*4@<Nm>yA4O$>I(mHj?yGyXl5l}V@DwRh?
z(&V}L1Ch4q1+Oa^SwEmmUKM&Sh3|zbbRs}opTpMjsaU}j0m`Dx>FY2H5&=^VkXuaM
ze@Pdv#l5IFpLlE07CZ>+9Caz>`LB-P`1=BDF%<a7`|SOXx<D)|V7>6?(8_PKvi^Y1
zG6F02<1YaSsJ5H8yjs9n^lt&|T(4Vb%Lpby4b$6@e0GaO?ZnOM3#ay9QcP-m;_>o+
zTW>;!xV8;?Fk+@HYk@wgJ3KKa2pkgs<+m#N)+-~AerI+|NOLVDvtzrQEtRV4#pl>z
z(c1||cZ*5?E18!TJh0DqK>oZVa8A91VQNLU7W%?B=Q@j{@Eaf_zak|k=@8N|z1T{c
zJfG)@#+IaSCpj9UEZNU0`m5L)0=ube<*Hs36s53qpwd*4lr|Wkq!#;ENfnBQi4bIz
zZZWFj%E<TwuZ$RVr|F2qv<Ah%O9f-esc8~!wb99S#4%AD?q~<Q!oG%VVUA-9N(-l5
z9I0Eh-1~utb_vu>;P6k}<xP{A{&779#g2DQui9<C);H{u1mw3=8&>l!V2BL2e2x}9
zZQURn2MX`8O!SsUlPKhup;Qn|Ioa>?al&`Q0hY*g`?Qf2%En2<^7ZYf#x9*ai+iPV
zEX#5I`3OaC862w?nfJ0x<3?7t&1=)vhZ8z#O6tQzsa#pq7ki<abkEx!c4p>eQWyXr
z$>ee7<K*N)6Lxy%PTi&kFHe^4H}7j~QerauZTqGUyJiK%RDgrd#-G$*8Q4e&UB=Y7
zjLd|viT-f%*j%)GA7O?7Ml<kvoXZ7%ERZl!QlS+5q$@HBM8yv*LJ(<$M7WAARAdsz
zufw;ill+$dtmX&4#Ba}!xcLQ3$8BDe*w+6&eNKa40o;KnT9V8V!s~{dk<CC*E(kpQ
zyDGRx5Doa7m{=mgMN}#*UCpWXv?F2u=4yJ|IF!;JpS)Ubps{R+dh=&bkR&gWncP@y
zfDSIr$CYputH=^H8m+e6#2ao!xuq9UYB){$O33O}bYxuTaD<-s|2u8{zE4wLtEoqX
ztQ2R}aocFVO=e`9ppT&OR&;yDvO1w>j9Vd<bA$IIw*{|w^1<FBRT;zo-w;~;C^F`b
zua%db?@vO-x*3{`zt@PO8=aqvB&f`xM(;`rE|bbAxAJYPIo&XgdM7=vJ5y6KNu&UP
zM3UoY_8mFA$8FE6nVDG<DF{FyDQ1=ZBDotTxcha-o0*weG6?`6lpL)ZO(K>2-|hb@
zHwOHlGbW4%k3>4*2=PSy<OI=UhxZ=vLyYjk&_p5sv*tfl^XD4MZzu5u42{@!q+x_V
zXbdM35U7VJX~PkasdZ8?;MwnvIeCV|#L}e$RzPZ_@h9kBfnyN1_d|MuG_h9*Uzy&-
z=nnGvJr*mGt+}vnwIpNO%!lAdEHnKZ0mr5UZwVeWG#V~4g;6EI;qkJ7+kSxJHN3m}
zYXz*~2zQ9!35QyXZiC8?9Si054Z8R5&k~v@q%Y`3r)H>cT<0W1#|1Azcsfzm9LsjM
z$fJw1jJmTrGdl&ZX_%d+v)4X?u!R_NR^|I3H0|T@AYUw>s*%BrGgD~=CpT=f;I(Cz
zqdX694Lcp1T`CKm2MmEfE3xMlRBV?2e{dA2OakhZ!acoTxNFO7Csn3NZTr&Hj-CQz
z{FCVX$F?IUa%-lT>G3W~t;r}#pHo#G)2b<?szI}%O(fbTvbMtYiO#pl{HbYYxwU8Q
zv_&!ouLXpC_}9AdbOE*<;wuz1BtVhz7#5ijmI%?ogt>^&Sfe+FvzYnqR}9u~i=B(J
zSN=1!I7N*_G-$USrFUhz#&<CKQbZ-9*#x(x{C6S<a?~WEXL65L5eHRtxQkfgPjJg{
zENs>v8ojKKEPZ*CY1Gexxe%Yu3I*8fO8vo3-=%;Dgl?!?wh2%QvKvn151q*wA?man
zzW58@#Ul|-gV2Pj@Mt1s-(S_8G`Q#zF&O5jME{zW@|6uX{#s1SK2(BS@`M{<sS6L4
z7_gIED-_A}XvMuK)jX_tn&!yS?%;BBXWntEWvy~Gp)n-8$~A2pruX<bbomlL48cr3
z+Z0g#t?SY*_Bu7-8A!aJp>KxIFj$p1F20VDF@=&TACgsrAN$KZ+O+D}L&wqmkGj&^
zV#3$Sqn2o>x5{#0<l-DoW<4ARN%vSPJ6&p6QD!vz)^z1D=Z!g%)jY=S24tAt>RLJ@
z&90Wzaq<c#$0vJZfRL|Rlu)!%4gp5<7d0#u`Y5sEy`TnjUSGPz1lv%DW*!f_#0)I*
z-lp00*a#8Xq^M|A7R1N^G3#Zd1QBa9LjIiuHxe|1e1g&_;kO8g5KV(t2`!tOSgoaa
zDc`tEiHym;)C*D~+PIF?_`y80HzI2&X>!g2$=#NhVT<lro=UCP{gw~A?-?sSKBsiC
zTC;1GgnOs7khEH_VSx?&pUmHvdG7mn;y1?LsnkCk!x?UBCMUy+ou<uKCCp;o1BnDq
zCiZz3g!?kts&d#gQofqr-9ivL!kOrKyhYXII0NFc_J3^a$_9Gj39x3I$|vQ5C`|vx
z;}dgXbpXmz_HE{yOIrq#`^$zLcB70Mq!447XcYK&Yd^EA3^oK|Q<RBn8SOA@#~)k0
zD%-?+&~^8I-@d7IUXTQ!ljtVJl~u_gXdK&xPW%O*Ux9HSYQ-c8#S+D(q*&Y)%^8<v
znRjW<7-s`_Rp9iFV^a);!_4h(M^Mv;mk^Oa4r7v_1$5oJT5nx(E$1JJm+xp=U}op9
z=ZYfq;(A_y{n8Wb@~rtN>1vp`l;bYes@QeB{my&k^w|@pkIiDay}ZAkKlNMq==y16
zHXUbk<Da&kNVE>(!SXy!8SqmeM|nV1$%n<Rj2OXD-zwO)ex3E@d5QUBIS!8ga+^gd
z7H=Rc2#5>7fnk7ubMemXhs6{S8W_z2fH7grPp<t503DRmFtnsGu?zprj*<_UR<#)>
zzluTphj?uRZZ|0W2GCFD-*{)7>gT!&s=jCBBj@M$3*GO#^`iOZ0{YZv-?w8CMhXC%
zbG#g%5lNWgHUBpviD9|)9D8f)a>NydH$qV7<dy43aS6{&(i(T^Y(-L6L(|T8^3wTj
z*H-u~Cshd}TwxUB1WY1h{Ql0tEtH-g8*H?Q$UYl8kq?VNx*$lY$tmo)zyk+x3<6Ym
zF}*X~pYOgKh~YteT>-7;1t+vVKJ-<y!b6@8IssXe4&T%|e<8W+hSFCPzY&v944dw#
zRJH>yHt+6jhfgf8I^g2E8V>P|JaQjC6<?90@`RV2|Nh|7cZY1GD}3Tu?F4`F>byZO
z=g;4zJNStj_Zg4L#{u0O08mJNyC_#<?%qF_0MM-4cMjSux3;;SKI=ilti`Uf)IAxt
z-d=5g8@Y~epza-U7|0p0j^k6GY7fX?f8;Or>uc7Q=A#d-=(8GRdsnr#Kq~eycOz?&
zBzNiT;g9`AjbQp^z$SOl7@^z2hQ!)GrP#}oW?j5WN7!N11EI9AJjP$FPGl+l2x&K$
z430F_2s3$rC<pMpfpdJ227l^QeOF)1J$2M|xsgnxk~b^8S}*<<P*guPh*Wm${%1{0
zgM)POzqf8?XIZev?f(${eV9gU%q^>)#6v}^jfQ_d`%eK2-~{>7F6qo3^2@R&5YTUK
zb;mhwO${isZd=S;^(LFHdmq=^8S|bzpL*lf?8>Q?3HKlQ<EOn|nPGM97?<2dnel7d
z`^P)<q=h)bxC^HttA`8H>mop>LdVi5>Z&FCzniS%Z(rfp3_m+4JXiUgx?lE*{^CK6
zRdyOYl)+oRRB+4e<GiZtmHhE+s7oz0$fVAH&oS>OLq*6uw*D#Uxnr1b$aP;nR^_@e
zF|<-+S<J?w9HV_`g;pmurENbLN9cM#byX_EAP~JF`Rn4Y-*TAiZ}=%rT0;0IoEf`c
z@EFTv{L;0a-VS*kY|Mffl+Nnbcjr)wD=%F{sRDfhy`0YUFu~B_bURl1w!Lzj%%(ya
zz(q*IdYpRkvMo;$sd`9}m8z8j*QtZI?1r)G!J!v1lPo%1EyW8`25jm&u;u(EriF8f
zU2?%zjT_|-gdt?R7=T2-4D6y6=O`fW-$39vkZ%5>ud*$5+WEJh?e-Yz-1S+=L>Mq*
zY`~eAP-9A+LOE?YF=0_hw#d=e>UnJffIGZ$X11}1%WfIZaHEdtAd5zBD~bRJCsxb@
zmRD}B$IGr)MFiIQq_yBfu5k>!NBISVd`D)tS1i_1*V)rKZ)ZT*zF*;31DWH{oqXun
zS0@T;`3Sf}qhBz<!>?uRd^Vm>EO$8TXr)Ency(@`a^v>pqQwloe`{i89N|$bFktn9
z-a-HVg3Fo47hB$Y9a1so`@U#n9lK@o0?ncAv7h+C1O?ARh^vEeOJsq?(0Y>lDaKIn
z03mJ^wx`w+%??O~qSX~ui0E^WY>G)RPb*!ic0d9VD9!|X+-UT%B&Y|?Gx)<9zEl1-
zNv>Vgs+>%fi?7GsJp5>;4uY1+qNb!30Xjec&>&ac_bi8v+(~kz1#dFxu{{|#=S?V#
zIkl6LrafS~_aMZ`fcCDrkv6QnBSF`%2SlT3R&B1tnBBR9rzsj$b8+>Vek5%pjt<?Y
zpZWskJVrO`?l}m)9%<O%Bf;Pu3C`f7Gq!%N=c!&ANw516@;R$H;%r_mXKFU2<$VsD
zxK1H<-i^xZZQ6O|2yvL`c=ciVf7bAq7+DY#Jzyg6y%Km>vd<Hw<KE)iY>L`{AhApw
zgz=9>WDqfZRC~wG4DF-~b&lkWQjO_3ZZzE*Cb@8Pns-F~X`qr6-bUd<xO{#QJTrGz
zoSPNO*_8$Z@0r^ln{36_<qL=puvjB8?IHPMra-}&OmX0-Bi(U{bb|kRuS{A!KBbn%
z<E?)*Vp~)ghT#Uu60@viQT^G5hsf}c^3O0!97)pvcwRrvueN1nn(#?RRd#0v^XVir
zm7?grU*`;wB<@NHT>)=>M_Nl9cYB6;>ymSqIuGj@e2*`44iZ0d%*!WAXp~FlMC#0b
zBXC>Q`?^tN1C!iHoXAc*7IYp}GVDS0k5(}}Cyb<3w5k}u84a*P6WLg$rYsjc34f~y
zk|>)A6t$rsZ^1E!XJW?B$DJbLWc!TIbNEn=zRoi-gAiE|&lF2?#FHPgX9evJFY&dt
zXNDoM{Fa}G=OHtDxz{wq5Sp{e5pjMaJrZ~t7o``+Q1nX8BA-8N4<C6ANbtdmQK*e)
z!WAz{=3p3e+M*zpBEu+qxTF;sEMYoa){MAJlW_8*)R2IXO_Pm+@YEP4g@Egxf|#n#
zD)Fc^C~U}UPH2ghKFD0YAvRK&qUB5k$^Q2O9_ksZs_S%GWK;}o$y!<y!_<;cwL58*
zg(iodl82#U_3%s}(aIiZPPLmON&dqW8R?{Tj)A<nEi&Hf&?S(dg1qi-X%LG3VqEzT
z`BIWy?}#o3xsQh!Fi&rj5Ky`$uM8FN0Ntfxl8TgsNDTUy=UM30fd+4~bJ|u^*d)`&
zh2HYa7YZs|gG`9*OQFrVl@4%~K6|Vb<KqOWsYwzxrNLPe9M;A;KnHJN4IUt&HLRU^
z70YHN!uAGEma%=9(4ZE8btMY&V~z$Cu^G4kw+17Jx2zfrh`Op^vn~NodvsTcz}FTv
zLC7F}WSehHqLBo{fJNhJZ98QWM4LX8P_7p#Z(Jpup#Vv2lQFkRk-*A;f^^>z&m8V4
z{sG^+=p^q7ZI#m-*^QCfm)*4C$SM5?Mo?-6$kyn(^KyJoVpig42a$|vD&gKZ&m7OH
z$unXu5Rzte<jud6TvE-p<al6x2tx`iTm3KrvyO3VgfJ!DHmQyX(R~!mM@-T-^MN%7
zVXFvnN}trIFLJgFTr=7!^PI$qT~(dY6<s=-X)gQyOVYmSNM{15*Hc&5upwNh1<OEh
zX>gptN}A<iA5KKo<4EXxpWuD^%SN!&ycWS2*^Vb~T#&*<*l@G4;NP?kEP809tocwU
z&*(C%9w2mpX<Dj9@#Wv4ZY|j(c9{ywf(exue1fNSyv~IE$*bqK$@$ZSFiyD&JErt%
zvy-}n-QGu69qRF+i$u+(DYwdCwU$zx2~)bKDz;?YV<Q(;1`gt9AZ`YEY*SM^0iWTH
zU&?Jap=g(s+csTs)tWk5Y*J7VXe>Xx<iQUUw>$smh)B(<lC>%%lR3OmrolKe*-Ii_
zIy|LGiW|7gSPyINruy84VcPG+k%1jua%`jpO!`@M3;O{mjCPgVczV%HEB^vwm904$
z_DiL0VN7vp!1cT~%@!OA+=b8Oq?U`bIJr>8xkMDw%iE)Cyrb^5<s$g@M8ZRHQurPE
zG(mz%C*b;#dMTQuXV~A+_y_IN2KpQo<PEB_cF6?RM@C#D<?EH$q6k@XbgVgE9->p0
zUqn7N-|d+>y(u$CHz*O-Pe)1HB?D9m0r4LeJY`Mvdu2fYV?O%B$PAs2{kUxBx;H~c
zO*5aIM=B4QFJT@Z!!+Kp*}XtK_0N@GZiJEc9po%MiNXr2MARkQsR<5cZ{3;ZnE*?U
z&vSC-aO%!x{|vrV-<Gq?p^3veNB6+Jzzh1=Fv8So$>eIOR4w&03kgRzTvkHFKi2^L
zeibloXo`}1iXB#u==(f5!SP}SAd<^xCM~{S`Wh)7JZFW?tUnnAk)nnzO&JZWNOEra
zaAkEUor-s_jG1$5M&+?l?}<pq=h<p$?%<X-zh!R)`nR-BfdMLaK_SFo*vW~7u*<z|
zw^Q}a{f@Hg%}&V?mMt+wyrYB5SGpz2&~wxukzbwDKdyEsKAb&H0wbhNjG0q7k}P6q
zyTNQY%fl}n(Pmnx&A}#|Oh&H<jI(KZV5oLn#p&eMx9F2!hmmh`589Vm5qi!T#U&de
zH&QIUjY$OV45?xqraHe(7NuwMf{XA3;o#G=n=K@jE-A>)_gn<uF;gZHEYJFd-5W0h
z)0fb85C5(m=(vpnsq?dVXRQL8+<fKV4f2Fgqa;g29sV4JKAnGu<Ldt{TI<+MHYRm5
zV*O)c(B72d+Isik_?;*vLk%<}jMYSsWng3=_wm23Q47-?=gh;1ZTc*|hI9f~Z5;fY
z)b*Yf-zX+m>G)9aSxo+XaJ8?k4kVyAbAD5vnfj;QgPbGy3G;AaUqXtD`i7iw^xx~`
z)+mpF7I+F4Kzq6RR6Pq}uiA1rK~@4J=<Jp|M@r4Sl1o7cy7NoIPLL87D3tpXF7}I{
zxy>{DWuj`eL|4%1uS^r-!*jBBdLlp*j|dTkT*nNYs&}E-wDpM$h?tiE3pwd*i;z0m
zr;0p=M#W$rGz$?OS2i#w`HorCdDW@$=q*6$`$#r;#L^k}x5{(Kba7u(+(=702fN+q
zj*Un{{W#c;y(RoeL#wi(F6+okG5&4%DPq46ER7I`3=$eoJ3Aq>c@?rrnp+UKSa!`+
z>r<$tpa+WPtYUOPlY^~m4WdY}vLg&GfG0-fQ@j}^{$pyXWwjzZ6GERvv95M`DoQXF
zMgLjG(7iS|b4^As&=ShyAp&=F9OIx#k8PHADj<y}-nSR$DAMIb(_U+B@>0I$h^<FG
zXxm8_OHV347EhFS_ILQRU>F(EIIi;(7d>3G?_e8++~Ua|I|Uy-YYa8ciQC{!H`&2L
zQ3%JpV7*sL`|j|socD->!i)TyMaJvL`kuy@$l|xoJ`Qkj??^WOe0aca3!SjeZ(F&X
z1?~<|r^Z%QYWg4!36zk8agSQ3E_$(h9Xr4{UU>kad+VNLK5kB@-XJ&vRdyJOR9EfO
zE(f7p>W`mLbbexEFxZ`L-%7MM&*LM~r~t`F{4ePBZoB!98lMPuO&ou4ors$>X77+0
zWr25xfBZ}RKUQ~M-4=JHoQ?H&eJO9RKmw-dv3Op1;PU|c;-D!GaDU-ZpSr)R(Hyrv
zS?FRvfn?x(pm;;FRfxC=%IQM$mh`szvuaq1yRc|b7(o$6YtH%4(b<mIg%Q*ndZmH=
zk?lFA4zx(Xl(&42<X~-}?%@Pm(31_VXjUo0Y94JT6-(Tk_|BWvh_m3z>)*9$5dBHZ
z8^-X^y*`@m53YN1mbz%>fv`@&^Uw<4miyKSnt4(iK2f}bB-((r{=8}0Ow$iEhXB%s
z^bm=N*_|V*nVLd0d@GR)EM1TavF!q7vR_adu}<ZQe|a(3mAl>p*SP#*Gf}?u&u{Js
z8i;^{T(V+Jl5y@}BdOQkP9hw~fBp@VSSd|^;|=ge({%k|c`X+OS`$C?YYNiz6)rF`
z$fu`%RR;LF`HZRWr_MExL71k4D%H?V0DVg%x;KEZy;;to8DisXlSkOdWWWn9<rB@V
z@3lp!Ce25m2Ir$iPOGNV6MUWHPJ{9`xY9!`qw9la!7R()yu0jALI{vF?1pVL%E$A_
zbnjm!d+&NO+9~sW_0Oc|lLvFr)4xEUL_hEnvkD;i@4Kr^oTI$G;><6?M%7Y(N}MgJ
zo%wZfwbewEZfW_u(cCEpy(Uw3ksj1%9?d7qNOJAd<<~yAJr9alypuu9T)gW*Zc9@y
z{LC^USf%BTxF|W*J%b5%<W6Ns{Y9E2PxxSK)Jlavsjg+%+q2zE@Vpts03Vzet@6d;
z@Pc#+zcyXX6bzc~?FOP{ULJ_V58k6=p6;Vaf%&=J(!Zkb4G(7I932XD@Uie@XsZS)
zk(CdygSg#dy7T5KSOadL2H<h$Sf5zWa6V35>jSwS8V;u=Se4id!E%w7eEVu?Z*Pk^
z=gq4vJe08<rx~b{)=xSI>m$jcfqvdUlS)MKzpJrhCw1M@-+kZylFRMv%^k65G|P5g
zVUBSsr!$^S;c@U(?Bn1D3*s7_)YQZ;cGJ17*A#x`mlLxT`Pn{S<QFJRX;}LY$MjvM
z0AuxOAd&Fmto5xHc=qeb8GgQh;DO$I6<ja>F-BzUuLo)O+Am$$<s)2o%7pJ>0fbZW
zce(#=PG9rAFFVjiyr9`+UL#!(VEdIM>CPOhm<CkccaFh=Pdi3Ovvn>93}Yo#(QW?u
zqiUNMdEZq7k>u$cU8^CN(ywx6vwfxQS?nn;S&pRz(G9SJW~5Rc_Bdjy0Nn3yV8Ra3
zGu|$q?fcyQOekX-<0q`%3@$a2)jqCX=gSV3tqf$nOvDx93zNUkUH(p_LvhBbamGz^
z`e^L*eVm2=mvF*4p98u5Z2%nVpxad40UBC_R#1Khid6+j(5Nw^USjdY&3q4~DSsxk
zf^>-oJ~<VH;>SuT?wXgpc(G84F7EuOb)4c%4tV$pvC@DZIQn1UjPEWc8!G#wb=NdI
z&uyytuA=62i6QAg4I5_N2eUJb(9;t--L2?$e0yAR_m#M&-*&iE+T`2Lo`!D5u4D)O
zOMH6zciE1z@fn~<%3}%hq}t65$qkzu>;AIK&J{x(7*b5q)3G(xy|vVKpFEw@Y8r%A
zdA=g9+aYTIX_C(9<x}20YE(Yph@=L>X0NS_tFSftXkA$-IQSI6lYQVlgSEDH*GoJ9
z%T)W-t8ej<>#cHfw|irtGc~H}^Q`3nbN+#iPnobIDiU}O)Xi5ctA51?;QJaMzKHtj
zhj0Pbd$rX80d;s-qHazAmgq?=SAY2Fh*MdAKTwQgd+F7WwUw{XtVK8|L_ZFsJZ?yP
z2%a)vc)a&XHiW?iKI~IydzN|~*4BfdUgpsV6Npf_qI~uqGT6l$^I8Te#T<p#4YSTH
zF*z$)fDQQAysv-n(a>)Tz4W&q<-XpSultvm#Kv?Xh&bSo)X^|+`p?^T_G+9a@NGkc
zN4(pg#ZGwtB#&-DT!$!J)ynm>^`U1?Gsb&gWQan(FyBpG-)AD3M*12Z6-3?vUD#8h
z<XCAok)W?2+k9w&?VxCdohxBI@jRW`VF#zDPucFfoOE91tSvP!4cdur-JGp8A!Eu+
zNe0zwWQk3jvC8pY(gNu52cbNRpX>V!k#x|A>L|Yl^&Z&gH}fTy`-V8x3Kzs1e^Not
zx<17%OnhEB4tn!QD=L36SbT3}lnTavLor3eP+c;U=MTrYK?Up9KoHRi(^blSGBB@!
z+VqTg0Ltl7R@x!F8Dsv9Sf1FFoCaepCb}kXNJr)$_A3DxU;OP}$Hi3~uEpAP`ysk<
zu)z6|hiop&keZ@u%{Qy=jg_ES_SdL8&~9r%h854eI;B`Di|-#2M!ffS$CSsXIs4*y
zTlG3&>GS+b();hLpOdhlu93(OUd%T!_jpWEb+1OHHpA2Q6ILF`Y(wofi()bQg>;PB
z`4`<j)n(z>nTjwv$%v3Nw?{1{H3rsm!Fvk`u!Tk0MS{{))k9X5p%aYGdk!eP$+Xk9
zM!SnIANI}jHtDdZOz?v`sTY!?+K=^r2S&ga*K+{sI_gdbpr)2$VRpBlVz0x@Jkh<a
zM*{PYXrzHHx&!05dEW^urlv9EF>vO{1p*V{>$z<OLJc>$EV2@3&AS(_nbDuiEdNC<
zH4G<NvB$SECIZIYo}L0)79Mn@m}xY<j%}lT-qUp1gVnWFP*fi$9^}zLc!(!qZfAg#
zoS(ka<wIDE4a<Gnx*lG(1&%>^EqL#bNQ-cY7v){1s0d+&NPe&iE$>cMfNOv}Ff2+<
zpEo*c{8bDboqV(P7k-A@A3AB1qe=0erxBCjh?KJCu3Mg<Z=Ngw;oRfC-gmjKuSpAR
zhI`Pi(60Sm8o~_MwY#Y5v~8#~&Jx|bu;S%5YrnRIk*>OQbC$O_^)3VSgPf|J3rXk}
z-Q0sM<~&opL)qW*{dihztV=FkobGMnIR&gTgh3<f$5GXd^3dBqMORYr8-wLJg)6~O
zvF<YpF&7t<mp3_9HY$+nPPnQ6b5#kx#3^O`@fBi)>sZ<US=#o-n|qY<N&zEmTa_N<
z@GUb44~(b7#+lp;Hw3dzi%K+S)~DtdZ7X9Sk(-<7Yikiggf^2yzk*(BzJ9|qH_}}~
zm9;mM4{|*Ijkxt2^vubAr4ocHmeBA>v-jfJ`l7aznN#(ZtwiU`z<-SEW6IO~BlKxu
zC6QQ*F+RD)c=@}l(ikzjY0}Qmzwo_vU$z8w{C2nQLwx4^e1otOIOp_pP>!O#7U8)5
z#HjwWU0q`@_nNgCF}Avh>koW(+RaH(935^Ep$WHdTakZB4`%Hfs&@;B+>6ZjcoaA;
z=u#}E!+Wvy&-^Ojuz?HW!%K7I!+iT=IM0JLPcNX4+-r5CIAbPBYq}d(n0*{FiHxm|
zZo{UZGLDZEmns#0SVU3WQ8;p>ao=3yN}-!pzGl+CiWIXfZfFH{&`#a9QE;CpsBwK+
z8=EF%HJ{|cA6`eGONknLc{k=`BA|{2d~va^20AQ?`31vU2lqZQc1m;N57TXK-^y-~
z>(81Hpy5k3PJ|lxxHjt9@ubjNpFP++S3eQ&(R+w@?mA8o34^&{3&(}ME5sq3xqCEc
zeY`Eau{1XB{O!=x)EQN-m{H(~GG>7bjcHR9`h#Y${Oe^$^xs2v<hsbsHc4N_HvwO1
zzU+outF#9~a*`1wcZ%Q6#LB}VmzuXXhu2V8x~j0)q<%c-g8!x9dMwXI_Q6%e@;uID
zoqAF)H9B(s+70>r07sU5MlNu34EQzleXGxBx7q%EzV!oXPLH0;17}GAV4;894f^6j
zq@On!Fy)zX|MBV3-XlR*;J!aZoJANa$7lF@lD^rr9;q<-UNlbb^J%_``rU-IbC|6!
z*6_XN^t{u!{=(lQ{HvbvhuH1$k{Q1j$$k7@YJJ6|%-#Fn+4zUtqw+5@f5z+?PhJF!
z?#B&Aex=HXXwp|P*f4>m+#yAF;gbGWxR$)6Z9Hu#(H+^&*W1gr50ZV|Y)E<M*x1Oz
zUV5P+WQej9w|Lp_M7__~kL7R$O2(yEchnfT9K#>I-9G<UM#_T2!qX-Ns9+4Fl;(%N
zzdPREH~F_TvF}Bn#pts@UCKWvWZQiRO<W)W1*o0T?@ivO=+)=$OZ7>nty+C`SO||U
z_E-!Z;dst+EW4|n=cmS)pKYr7E7oY>{CN7_erGdK7JUdNu#fjK-Myl%R-&@9RK55a
zInET+lGDg{odk+FS}t^!-yUwL;lEWkF~}oup^>P5VZ&Lgq+=96dWEwur~G*D>FlN_
zix;j6=Svh@`y!nh3;6mijEHOQ3-V_i0)8)GSLi48XU(1jf^#@IPsfMm>MuRRbq00x
zE@~PR|LA(w-TmY)*$52B*4Xp=Y@M}HT|W30%jk8VOyg{L7Y^N<*~aJALUN=BGe7_E
zd)-=^HF2iQJ8c_DA9vWHik@ORA1Z15oRyx)&n*g=IE*ewLiHH4s_~v)kMdu;G+*|8
z(pnQMzY%H==Hp1u5?6jNnDE)oTSg+1n*d%s^|6+O*zp5idt#>?4o=*gCuS~#qZ6iA
zpH=VLvhcQ?Z@Bq_KbZBW%RlHd@|1i>#OHmUKYw`1rQ2WBhA#xDwCXRr@N#mfy3q$z
z!RV9JUU$q)CMmE7^%B5ujGl9$|5<Pr!pU>~G8)KIT#ZB}%^g9$1i&>yl+PXnCL?#l
zeDPoJ9LmhcO;54amTIterpcJ6(TW<UXY<=}=B{iuv{uG(OyA_;pT=|RT-EJ(?<5j+
zGo-eaBwo2H9t`jDVQ-`b+l#0C=hI}T(N^6|!%wpZowcSlLQyIPN=|5^u;So}1*`5q
zcE-5VwnxA3n;sE0`l8?#%JSf<FY?IBV@T7|`6goO+GflZ>VA_hYBBs-2w`4=3$`g<
zSxpw<RjmBJYc#YPL`G;}5eRO*ebyC5Q|MdM=(EwzPB6f2klgO@ZG4r)nwcTzI1<lz
z=G5A__gB=Aa8yRElw*Qtttw$-ByYhPr({K`#d59sNg|!b85%rbP=$%ui4p21*`ZSV
z@9$f>-QduZGp5c`0?eDq(&Qj$l(#1Qv?NZ<)F`d)XW)ukp5?ynvS85-&G@?`blF%8
z{e|&InZe;FTt~_S7e9}N?+L?mJE7@4e>uJ07WLS@&-fJqQwCD(4kdTJeZQEZ2dFkZ
zMoDa`E?b^gV3wgEDaReXU(`pjo@|nQYRwC2KeF1h-aBS*)z>V*_~<{pUXsBN>80;t
zRo*JbKFGix$4+l=7FPb@hukh^-g1i8)(?kgSDU)~L`{Ht^2VhanIiZ}wpFp&2IW@&
zWgM!yF6V&RT}rl=H?Px#Q|-@+pcIuu?K~&seY7^11)~miPPuiKu8c^amwNb#*kg{!
z*#7yQgsJr1^_<tH&x?$jo5tU!%jQm<woAv#jnv4au<g?Qoe<N=H$|E{VZ}qvn1H?W
zmY(A`tmKGq*7jFd`n0yZR{1tgbT;Fz9G#<xG-;e_%l^3&)K=rg>SfFDq7^Yx%2z{l
z0GPKW^sg+FIN^T*GC<A0@ZABmt-JG;C*$^WVH?hy=eEZCKWXd04yygdiK=AWm{5wG
zt1ST2eh_@A8AEQl?7TTc3e3QGgiC&nu^rTl9B$sZFMIAort6g}nJ#lL_Q^WC_RFFs
zamh7_YwaztKf7}#{UQBKZ`Avo3yoGLS6W&&o>N&}(5QBAym~aprKx?ZnY!Kh`2MYC
zO=?q9vbJN|$W*O1MlQ_PZfXYHDg_5lR6JH2u&T9huzvXw!6>G|uG?@6wCGyEgY?Qw
z)K;BNsss7_Ge`iyVTC0T*DV^;R4GoqnVftxH7$9(XI2|ehL)C^Gt>>xTN`zAI?%LC
z`sx~R;O}pk=hYex4k|<D4Z3dOmU-KnlL&b9Q#x~~iZ2YK$`gA2nj&qJ_Jz9j^Sd!#
z5|(E~^a!sX?1+Q>GwcM~25oWqxpwA|J3il8llEEA!)2*?d~-Gdy_z;Hf(lRuC*GJM
z`|ch1Elyt-UC#q@?-4g?{>d3cu4=P2RoB{L`u!Cc83bzBLFX#RuZ2?HGGoi47R%g^
zkG=#Eonc+!0tkAydP7+y`aa*V#o8a94lrvwSB}qQ`<~d~cDYBhV9G+eJyeUnw#!)G
z9~8!ypwX;G`E@SPDF3+Xj`G4|$4q2M$?*e&RAsWrAiFz{WV8LzY?gjuSuC_ai*1-=
zVmHp(I>as?1ZLlBB+^K(eE;D@e|r-;X8`YJ=(h@PU5;WhI|!VZ6J7*+$8cJPUh?BD
zJO9=d=XL@&2JIE`@`tebdf8y}#Y(>3r-91%Yz@8lr0`sU|2~%T-`@oO@nOqx^BMEL
zTFz_OYjiaP0nnkJCzT;cH-T;v&`r?m`FbE53~b$E7@1_abeJD8?p!n-y;}I=XaSV!
zm`7gR?sXCDWhI-gBz+*Y=iRYvVl&IiYVY3+;DD-lnS3PH&W{}&639<*wcS{(vkdS?
zpaQIas*5v=x)OEaVib@oZI<aXGwGIXZOS4`<=V2Dt=BrXs?}RNI+$^3M|^_du!aj~
zHf&gKDPCB2`u>)jMPKHnY$07up{VI}Vq~NXRoO7+V%1Q7|7~h<OA~9Xv3qOA(=7F_
zT`ig5DV_v_<*rQi)0yHti(P7*Cz2ZP&K{Dycp*6mI?=V|(5xSjob5UQ`cfL~LPyQ~
zWz#_^K>ujrGn@0uOx!s!(L5)e16tRdN~$99_;5bhuN6zC($l9Tl8&KNl4fSzM2mcU
zL})ZIDn&;h>wukBJ&g|{ghVoY5FfS{yuUQsH#7W;2C*^Kf9Z24*ZoHIgg8FR!`0st
z=aOg};JeGT=_hZM>{RQ8u2Z#twtWPeI~=DtY3BFLvghBNzxSNr$%FLTdK=%vIq4}X
zu_#fM&Jic6ZS7<=fRqDxJ$!A>q&?c##zuqoHoozGw)aJWZPAX7Y51fDVwI<+a~ei(
z^-ND|IO22~O)3SE>fIeq;nO2+^}7c8apjSYr}RyK%^30SFJ+-Lv_m@D`v-QlJ*E9~
z^RWX{Vg9-_yX#bBqPG*x&I8G&h5j#p#h{&tit{KT`UR9{3H(hBhk7Dg$Q32S@1k=W
zziupit9oCqX~^SsaCiYo2F<6reU|wzG#n2l5$#)<DGD)#ybLsuGcvU^3B`4@*{N^W
zAQ#;n$zcKi=e@d`Xp2k7k%eh~hm#&vr&-5{fY~OnD7$}K@AGJC5=ga3)uSe#V?>H|
zltW~GER!QoBu<_E<|^gfjN!GgL%j<NE4d_tS8lon?77(S`NvUNXY^uq`oWb{o~SAw
zhf~Gp(N%O_1q~OJ$zU?eX!_VGz1Xy-yAjgt8+cwVl~bM{zZr56*3iUbW~!b=gSF-F
zJ9f)GDi)?Tc|j~SDeuhD?5RnR-Zaytte5P@nWtI{;$<sO-x3u}jQ&zEE)sRxFQe(d
zsem=}jMr~YZ@V%D2h!tbS)^b*&nqaE7#W#L4VkEYGdwWxZ1@z~B|YmTD{ST>WVany
zHIz(*C03HBeR3jcG--?v`V>BqP(h&Og!>=_5s{IZkv@}pL~iLIRxG{}#8ME5^7QzP
zkmzP*0WDgfycG(fZnvy|M877)e=wX9NTbUJUod6^rVZ-{vGJ99lu7--G-4$4WHOPQ
zpTu-!+djFy&)t2@4%_E$m{Z{%!tM@dHn0<TXKzrzp@wN~$7He-w@<ajulwy}-Pvcq
zY|NipkBSQl$&vp)0I?XYAu{7yBS`hsI8OTrMczcq5##ZBLNX%W#XSZOiAWQG2FqwA
zgxulLVKI6f>}x2$7m`vKPOhsJZiXy^r4-{rxw1k3WZ{56M;3}pDUOFh*25}liQy@Q
zzlO-lQE}ED7#p;LMMH3oz%h2{To(H?UQ9tC#6*0gh=@RlD8N#iNaY_wOT6)KTwTx8
zM_7&SBF2JK4@uGlXF7Wj-EcW6G<2Mo6N%(VRzi~x0WEwRm~H}k`xCn>xS)}zwxwE7
z{S&RLMI;yfY2vz0azB`M@9zd4QQ;5P$ChfoOtJL?<BIK9xS@i|N%s)aBj>N2(C)A9
zS?`F+!pIE+KVLTYk?Tc`V_4FR<JUg1!(zA23*XgM!wmpIrBV(*df)<Inth%hF~DEg
zBL_6KdihZUcV;+5d>JP;yo~q+_SqI$79hXV^is&$yDAL^^_Py$w1KPqZ1Gthirv{$
z6KAhfT1;4HacEIySuAIvU7L8hhB$D})tE{h=;uq*&Tq))LE>pFQ|R)Xi;XKwLejJ;
zYhZw%nc2n1yY6z=g5Aon;`8Zc@o}-Ch=J~xa(9$kMtb;B@p^7qTs&Q6htnBGvTqPE
zi+%IquOwrj|I*5l69Sl6>8}6zAFuO0BtOX)$d_9b?*5-Wd;NYgT6IU=anDrrIRmok
zvH3nV6l}ljxMEb>Ga_@v@5R{S_By!+5xg#LYUsHl^NHB&V;i{F)zyyxV4agqbkvvN
zOS|5*pZhO}r;b^)`>(Wbo~G{F4`Bk=%i=_`>E?Sz^~5wcA0LLT00J^d7t&Z&ra{TK
ztlH|-RHh2(%#Bjl7ND!kHxoa`0iYWSo@>^=d-Lwyfx?-Yi)5gCo1%NtR+Wb7REU?g
zxDW-+)!@k%J&4`wUh^f9?KhG1pq8Em1nzgFzJWAK&qV8ZWH6;r&ggU$)$_*STqVXV
z7tz|%I-c^rN;pp87vC2j7V=j1S#8U+33_;vrAVpJN*g&+!v=rB+~dr)##?z}`DB@E
zxo><3adAp&{Y|mDi&fXArmjAC5ZMaKp6rPNspg(+Otn<mH+xyC(FHx^idJf(&f9qi
zA7yn&Qoo?-^@w_61S-0CEmR79tPlYZ%K=e~KFAkN#kX9G|12lH>!^+gzGYgclj3U9
zU0>_-xG-sc^B1N7>D_2$^d7N;Ye%=O>o$=*s+z@3LH8C=?mn-ec=yJn0OLD>6@uGX
z(Pa#>p5;yTnGyrAVQa8g2q7p)y<UeC0w%-2oP!rV;u#@fVZ8X=ZvCNPH2wTVq#=sQ
zdLeYd5biyN2#jbp1Vtdcf^gGw4aE7Idj;ZQsocA4!q)^55@Bcrg5a2*IB5ONggo&E
zWdL2iDITm}wlVL3e(bmRH;#wwLTs!<Z0+RgmI$%7^NVHspNNeEn9s={vGnEYx$k>m
zXju(Z&fI!|C8&<iC#mIrx^OT3`9ya~JT`Xw#VRf^7FxGu0MUA3l!D^}BBPs)JJ^xU
zEMo<$uqxZpbR!yA6KiD6>;k)#1x~1^KZ};W*C%B^Vt%#4M{+hS+CzdE$szbI2Dkz`
zz8&Q_yQ!RWCsfNF2#rpxJMQN~JCAjIv|7oV2>pe7HIz(L9S6Q8s;p}kgnL_A=GXy6
z;vw+|FFT}zTz+4`#uQnTp#_6BZbDhe^YTHt9F*<(NbULZAXtkAH9N2j6@`a;M}?zM
zo#qWs<xuKL86q=Fi$l4a@P&Zu(|`iNL>`S+LI0AgAykkLyn?#!M*>y>*tG6iLRyj&
zvxJBVj9r23sz-uwkR*=~c^kI~WTiHuRVx)Vj-HBcUcj<Pp;siW<?_Fvl}l*l_o0>l
zCRrE78LZ>q!@AM$TlWYka9|_bcoU6*5vv{vlMf-u)hpV4)M=QGh-KFz)!t$5pp=M5
zv4f{*k1*YP(=cOKD&2#RtSAC_U%@Kk7K^4hkkvZFUCl?qAcU|==;8@<2|fWdG0+H@
zuz(+a>+tGs8?M5}VLsuloCZRJFJZ#@N`i-3JGuQdOy_41BCh)q1m^Ju{v2P%o46?c
z@*LDkX!ttBns3YLoAgHVEyB0yyR?k&;rqB^{e6=eS4-ln`A-Vs@t5=?4Wsz!;3Gg9
zR|m8K&hEQjC?GTn)BQJ=;l_Y^X5R3W+z>Ml9yd6b=PIaGOEcIeB31*$4F6y9i^92p
zo8tFn<itA;+!Xhm$|_aG=lc+VASf^rXrvIa-`c<dI!J#(hv+}-!xE|zqYn`Z2~w6I
z)-jY501yNPMgoo0k~XlPWa>c`^2h>YJc7xnGqXY^FEJZrRLdG9=|U3m%vs11o`q-Q
zd3ZivfEVILcrm{uH-dF5#m{f<8ZoZx6#ngRA~Z-W{mFZUyS~5q0eq7DvDEpaCQR7O
z`o_EPsn}?NfIryspLiR&4nJ#XVFObDl|gk%c5yZ>NljtajImW;3dP@~845?J6e;)|
z#KZxqg9ppiE~UJ*Y}n|I`;m~LC1ivYn-WFWa`Q$D0|w)_^BBfH4#b4Z!2l9mwxYgA
z?mg$Y7XQ-6AM^y|kgtmPy$^f-VHlti2=p#J{b>IQ2msjr>!)LVdsYBQLQD_PM_sW`
zz1(X+`2UDIOm%|_X`JZ<Ob%+*=jPEZNJFDs%Jv#s-q5sx{w$1-@@lcxhaxEzQ>)Le
z)VvenHD<LGZPWz4YZ{{n!xIpn9rFKi*O+c`h3QrYv`$vPF9c0sZ4Dsi3zkws448!)
zmL?6PVN4mW*z0FNF~|C++IEce;*=pxvxW!7QmtVK|6ka8EpM+5dE*Hbf`Yt5bs^fj
z{V}=u?UzBzRj6N@5h!$$s<Y@RP@2X?egGzYQ1b214{~|RvI3+ExYM8m(Dhibe!#_P
zy}fQqdXSevVPX(hwl0!!INIPl@0&DS+IkI0vFIAteNY2Uef@sdGmu~)aAVR8yn(>^
ziPL~AgY)A*ZzB){<jx6x*z80ZHY~lyp)`#<b2H0htgfKv5O2IfSu(}&5tyd$PJJHV
zAhDsBkUb`VKNfxYd?NyvBE#J=Yw&}M7LA}WuophMlW2e+ceAXJ9}Hi#vN9%vNHxIu
z(0Qi6KUgy9;A=?+$jDNkwNN`TH3FfTqL3mVt4e^Wk*(h$IpDi+5zjD;0^T`j@X9}^
z4UUngz-U7ZQ=RyMhc#IpR?Wp(OIi=1!!YZ<7FxB#0o61}Ay=HLj$|QRC04euxyoVA
zC!LQpcCcjOz}J!#$jDNk2L%f^3}UWWfHsNA8M=AzJTwp75o-dFw^ET$Y<v{hq(`5r
z2oG>|o4R0WT8N2L$QD*DKQqR_P-G?bse~bmCG;E^Sp!$Z`~zrAX<W*yU%DXidD9$m
zZWcFwtMs$RV{O3|1c97+N{l$uH$=D~uDAmL<aD9rNBBahd-L0EK<zM401z+&3|}~g
zPW;{fQUbu9_zZd+`UwJLl=c&iE&rhXMw@WCjqBzhxk5gT{8uuj|9AD@xxcGk&rcdx
zjXRbHTgPhh+cvhJLuYIM=o#?NSRd(c>)XRXAEfW4Z~2fID%iYbi^~@NmOp$Ad_%T6
zZN+Xa-1=F8!}4Kj*jvB<TDJUf#Ppu&ZGhy*Dl;du|7_>XZ-<oq%-VS~^kwKb%FLqP
zvUk^!UD><pt?*Vtt5U0;-F~}UcMtD=6*au~*xvAcJNJwBD-UoFC=N6q_~pRkIQ60U
zLvIt_B)&<CJ^C!^>q|=Oc57|&Ov+}P1e<<aq+PU~&~7B%#{ubR;e>Vm(K**8z;#3K
zx~w%>AG!aL9dOLjlj^C4TX^FTmyvssp2$Ju1Jtt5W}gGcgMCl>en#WaMd$}7j89<v
zu>Q0_n?S!ndSGT?Rp9x+iNKdZ2QfckJTMeYIc5O!9P=f3Yp`2zWH2XqGI$|mb4X&y
zWXR`G!_c2X?LvJ+iJ^(1iqOW;m)JvCZ!8^~fvv=C#O=kwaq+kuoC-ILdxQHPwj+!Y
zb}j62*vIfZycPZu{yu(%u%F;Xz!Ox2HxWA`0wM$vS0bY#>!ZA*3Ztf?*F<|nlcPI`
zfkY-zO6(;5N?eWkG$t?R6UmS?O4&f+QF^FC+FBZ(_6yyJ?!#DN+A^Q8CfIw~z3i8<
zDRIQObMX<JW1IwTaY9N$L&DXBhY4SJP~IWlaUO-2$*bn|^6v8f<QwwM`3`&xU%^)k
zss-m0>4_PMy@@vyXOmz_9!cD!=fXfCTPPPc3a<)(6aFF66YUV$h>nX`q5{#`<iEwU
z=~3yj^!AL<jMdC9GjC>Lvof--OA;gxrDjqq=^?3|)K`j?lE$GNsaPtJ=Ki_w$e^+?
z*?HMtW%k+P?BC^f@^bl7xj1KKoAXJ*$;&5ioqT@suL}EIaqg*HRqn;y@!Xl*PkDNI
zKjb+m3>5*2f_#JgfP6;2I)5ntLH_50wFSO~Nrhkb>?x`&8Y!ARb>Y-haZItU1Xa>k
z^0ef8<w2#NQcy}Q%`5FLz0<WXj17Pjt^u?SKk<?dm|2lTfC(exWCC056h{9V7`<g^
ze|e_ACov|}VXJ|I+XDC<r3#-G6>YUqfXjc8q814V?CdtGQ<ns`1UJoiNGb>=^&h>3
zhe>)Mfcn6FifZwN74W*s_eWd~SvPjMVZMl#VNujer)Z3}ZC1yDjc(mK<-Oy~xsKL%
zo0K`{JlSy@AF3^bjefjU7H-K2jr{)xdd*U)r!D4+Z#te?QCeHkCj^8lO11Z5KJS?n
zD0#YKQP-R)G0GLOLX!xd7|pWO!T4yQ@P^?{_=67U(eAm3pP=Ml#bL~U1B(&pFj_{3
z&O@iVu$)=u99mu6$E<v9ODBV^wHds_)L&oDSK0KxV1`Z^unnhVr=g8GW77p&C1;G1
zmMpfn2VwDN#B^usgm5LH&Vkpk(1mxiYD;JxGAv+3K-j)eB^|_`B(gohA+Qtg=;ohD
zqI2X~U@fdwn@aVF^{2+Mp5*g(t`KaYY}sMWo4mj-*eZ=RugB1WS+r;tW+MwZmj_G&
zvV?UI<HS_{V*I@par54!>)vT=t4Rkuy>h6b;kEM3y{UcN6X;HN>kaNNx&xjdeby%x
zJU6{#G?yEQBWOzMB<Ccs@5Hl*-BUNu^7qp0Q+Bbt;VvcYPCITlKEv)Nhx3gDA06mH
zPJRuC)L(*LtHxh+FPrRtMjvLn37wewqr!FuF0pTU|K$Ubc<Ay$%d7H)K!r&ob7ndf
z%kl%_-E1!nwCc6*oabFo>68wo890O2E|>0+%lVP1@t~3Vbxj;?Op&nHT}zfPajO$(
z9jWCqVFLgrcICq8wvC<Z$53da<FKMfsv<NdFG$(GBZfOL>v-pDE<iOn1z_1gdOx7o
zfQCeRKx8@s8ri-DM6HT0qn&)SslnUn9~;j2%1&iB|L>C=F49jGzL^0y+(HZA2Pxkm
zCk0nPj2H-k?R6*se&hv{+ho5s%Q2Qf`aT{PaPulnAlVbDAU|o<9_RVX86g5lq{hu!
zsPp_bOs=eaNiXaMb?a6EyK-^G)Gi`Bx5nz_9OET`6M84C2Jhgrv=cN6vn~KMbxQx8
zxR&!N<zYb>A9xy%-Kd{?pe2JW{(509(YgKXbQ1M?3yf5CEfO!0=Tx>dGs9>uXKIdy
zEkD0&`v{Tmr(fUBKgWYZm98c2HU2dL^n<I!>ia3B<Sjv$<A*H~>L`vAMBuF1si`K^
zM~Pe4I<z2*Iy^^M;FqfIxv<#Y@M~-4n_0<2`XF@}j$De2`1g78`Sj*r`h;l+7w7<|
zRO<;!-WHz`V^Oumzm7w#LS*2Wz-*g9wD1sf3sNL<>IYSwMbYNCLma$gj;jABojzol
z=hlvJm_eL<_;@}aBN%$B*IEgUDi;tj8vWfE5fj$1^g!6hGI*&mE6I6+rxA?#C_yPu
z6zk(cyC@1M+7P^pm#_<+7_3Z9{QO*b`tTZTGj&uQPhFZ~A3R>JxOe?JyNw(aSjjiQ
zt~0awmm@&;k}iDc6b}LW)cz>&CsyB59lOuHyd_81Ylmkv+`#&{q%$FfH(_2>WF<Gd
zFLr|BR)}N<g?2I;_)TlO=1@b7RRx>dUYYv<`jzDT@;)AfEVy7a2`4(7<Ous=s<Psr
z$4mEPm;K<A?w<`h(n8~v`N)hmr=htaQ2B{7iiW4ENu0FdHL9S6>pDaFom6t$zS4EZ
z#xD+Z+3|xPIiD7hcb#lRh|ffiK~h7Fe2ap0nB2UsL~+YXqbaa%0b4YId4qS>GqF`{
z(v`F_rn-&|@Y{uMf9Apd+sGu%1Q#xz+tb(GI8>RQWn&AQvKHFvJk7ca17eWsN@WQm
z5GD#gQbg;U8wQO;$$d<*mVuimV+U_6RXNx`LW)HfAXy$20dUWdmLS6x4A3^vFy4TT
z0I<z{elh-Xc3c^om~B~TIh4QzF!zsjuybg6%Y`L84e*a)WxGn5d5P<MiN&;9M<3N%
zwx_AyD{D|g`bo$X4RK5`VWB+if?gTXH0B6@Nt}ItTPQtp$XU`wIvM0OvMftq*mcXL
z%kjOAbJ3(660jf(`Zv0Te|x2YQ_E|x{Bk@^6ysz*V##y~@Rc6cpSQHS+*!F~=(e`k
z0h7yNGCzO^CCNu~Y!I4mI3zS^e5KVHYZ4~FZX84}6g2NL&S8uS%MCkMDT>k)or^>A
zm3--+6e)o-4Pj?mGv`8~^`hpuL$+jniAWCu*Qrov?Xu7Wfxy*VB$gD0!b8<e{#xT7
zd1FvyZmg;8(ypbcTspeK-ZeFCD>Vymo<0_@ym^%h#N8!4V3G|ZilT^k3wxexQF-Ot
zRsm3Umq36|c8trZsx0Er)5oaiX6c0`;NgLlSa+m)b!~lgF;PlPAeW^2lQojuT!!lV
z)R;_MkVrF93R&kHs(#6H!{+`Phy4&vi~6!AwJBC?P_%JMf_H5Rwb;d`Z<Si5t$n*|
zbBp`7+=jeryI;t-n;W>#PgltrTK@0?xcS`xOl3k7IB>8K3)Kmqj82Z;peI@uvFW<C
zZ>*4i-!arx;l|QfB)zSZ()%dxToA4i#w!>`677eFvj@b@v_ti!zIfeW`dpznziYo^
zllwG*#Bhuiol~~ovV%*!V=(A82ntrt?A?wB;n6G2)%~)hZhPm%=bg2!RB$!q@aQs^
z^x?=%b3l=aGWX)1WKq`NWasPCQNt%qb$MjlFuoQD<56!i;$DM{V79h+%4VPJ5{GXl
zDRs0T^B$HEzs$q^FSM=%v{Ul$>s9|MNk2c$)sVrZF>jhQuxdAtc@lmp3C=|tG@iaP
z5QhJF1(lE8v|wIV@Y&O*9(c3F+DFa<DWs@oAc*9W3Bx@Mr!c)PUx$Ve4S{AdnsrwH
zXkDh%F<=%V>LIY_(lAFi8Lk91unO8@H&kOu4BVFhF{0N5WAHl6A4bD`XNs+W`BUv}
z?RDgqbC)|AjR*);$rK?WRHj^ofesK9-%Bm<wDAQDXg0U0b<@4u9HhjM4eCDB5frU?
zsv3bvVsAM_A|8JiZdp-kNPkBtSP}j}EgTcmpkN5wX`zhYV&O$(9JP!+IfZJ6%VwXt
zDw6toEQfdlJLx{O75yqerlfq1hY0nf6C*8aaF5O&ogaD44w)wmUbOi{EtS?{76dH0
zF6ez2fcwB28RI&VEv2-#CFgmt(F?KkKp<5ISbWmt>x1Oh4W<`wGPHlWv|PL!nqM|B
z{Sk^T4&H2e+3KxvJ|>))p>uk4z|9_wjv5yhM<;9VvP;?$tEH72&1Y>5M02y{<&BCM
zNmqmCl|WmK!U=xMH@(>X<YKVJ*qZm?8MglQuFYQCo<zp&w{T%Ac0z#+IRR?WcjbXv
z$Ez#Vw5?w1^KDiZv6Iy)u2qFhN?Mc`Jld0cz0P2$MK!@&s9=lJJhT&9pukg@p5BXk
ze|;%uVo2(n6PY7-?@7Q3q@?Y!zzi`zbr)cFe%=*u$RCk-p3dKrSFH#q`|S8ou_^`k
z3?v4}t`eSFSfNl7=-ESQoJtv8b-2dK8cowQlj&@r{v?WZHCD2BOZJ>k&nRBfou{L#
z+pEcn07T7+B*T7O29JzgInnuaCf}V9KfK;ne{kIzyiO;;WjK&VWQ9T!H|~+7y&jc7
z9K)(b7LAe6*f+6-BOUZnxLp$-8BoH#G4|PtqD}Fh`ek=Q*#+oE%flT>loH2cl9Xw4
zH*A`sW<PcLVFd|NsNhLDIydcVefl-S7k-#!_(+1!N^<dUDWwKa=?W8(HV5jE#pBU+
zpdCO6HrR3@x%V|U;6E3>xxMP*rP<bD$LT~#YCs(d2BIgcxraty1GSGX^vHO>Z>Wj2
zg+lR%9iK)8bF9o_tevarCc0W4krN@=zW*QfM9%*PS4$d&CnON>=2L@`6d+G%HK+1x
znMoj1b7ce$pAt`EzOfuai6CShnIIw`ojep*fps9!dEZ3B`=aE5&+ru8@R>f5A`~-z
zTK+$)tZq*1)BlXtbbIlq;-<1>?(p4^DgyVVuISl0nT}^^aBLDarj1xlf!kID9g==Z
zSm8}N0ejF3Z68meP>HiudpGYeajARL_MvOndb?}<Z<2ZD%>19E=1@yP7G*&*S$MEj
zYV#A={#D9bUo~h8v-~;Sw@VQ%68soKm=CI&#e*6iNYL<aq^MlS##I=qRZE0ZklB?P
z?P(is3~OpZmwN`S9+T#dV{{dST1Q#kd;HdQ`+xmR5n55K9O4ZYbC`ev)fnpXwW{Ma
z*AD8!T3A9Ctvv~BvM}4QaY?<*3q1X?GVMUUFg8=5VzvuyA)uX%c%~<n{gIgZp{H03
zDFv6@ZA<D@Evkd;kU_XM+C-4i5tm6~=K1b1#FifH8@f^?Rw$_ILO7^&VA_&mO0s}b
zEl!{u3%AYUDc79SLpm}|QNB($aieG0M<?7zm>r$73qG)t_IPjt0;uB0AxkLw$Icuo
zwWnStR!NUrfUn()FGaIXNd8+Qbt+k=8>L+4&u{;H|6#Gb-t2m&@ge`T_+Y)n&E{@2
z9FQ{&7N=4aPn)w(7}twb9a_y-zeEZw-!1=H*CGl_5P@9eK3f7aKc@~bpBF+eCc1q^
ztph>y9AK`s#<TqB#Y`6+{3_r{zB<}ZA7A37twG%@X%E?nOsrs}vu**l*HZpGQwEig
zCE^!<SsDW9)xF1%vL=KX=#P<rdasK9^A`10P=Y2IcUOrKjun;lC@t$lRI^rLg>=M0
z5B^q3QL3M7UBGS|do2m<HnIuV7T)4M4c>_fM4_Or-?NJ7!4Q&Fcn#9?lH{#0!#gPh
z($LY8_*snO&odvxXc~<07BkaQJKX|>mj)Itrwh07Zb(YT3_~$&AR-8nbdE8Mok8dn
zx9xN_zwy_}!=IDdw-ZLVZl-rPxl{bw^xN$K#s!uT#;}dpj6WOnAN@e-_D43)7d~_x
zO=3+YA{|+iJH~PIPWw*yGdlZCRq=_DA^WzB+AWpZU69oZ)5^yrNZic(I5RxFLnXXL
z0Kdb9)-`tGHTU2eHrbd|WL>QhO8Q4t>i&OF=dx8eT~L(#Zp9vZ(1AuYnix8hzg^>Q
zI>40c9lko}b#6V}7Nw^74t*{GDOLTFEo$c|gFKWQe@Gn_Fo}yRoNGz@srgUypn~di
zur<nYORt8Mi3fwS#jEYSLoXPRiamS2yEo`6VYF$G#I?7&w*(uN0Nj4l(tqln)FXN+
zJly!$;J1pk?P=x-;B1gcg@f&th9V%cMo~cV@CuYgOml{1%SFpVig_Q;=YUCz=}@a9
zhlIw$E6{p^9ZOScWtuX<j?7~01}2rJ*O*q<QVn!ZIKnZ!io+Pj?i>wObB*}x&-AG?
zjA@Q(lFwdjB&X&q3c}Cd>GZez_MwgxYIMCo{Bm(9N&E~!z2YUA*Pt}nb}TC;(<vTr
zMX!uC-*!Bh3l9YFMqWcvydw9idyo<#_kwtFhAZBRLdF_(Dq`$H23?T7O-#`yTxj$1
zwK-MQ-lOz}%bWjGBMPbN7dI;HgDT|vdrv)}>=ghQBYlBK!lT%utq2}aqla$rPz<ae
zG^+ZUG(QK1x9H4+saWlNa4Yxxl7M`9@3xiT_Ml27d9Desgx98(aZ_v;*?S!}S>9)R
z#-ae0ZCKI9`MBGRi_GG%Rg*z$)<KFgz0*1Vc>n-5%BygXS{Z3+2C>Q-G#+vF6)6Bg
zDyG+{-GdsfFo4TAh$nG4gKBGMZ%Zcy^PA40va;h#f1VBGIbDaROQDWfpH{(m$sL$3
z*QrkQca|(^Y{vEfus6xAIDnD@Uk(DodjM|O9h7~KCIx?5h=Vh69W!rVP!!<}ga4<z
z<IKrvwYqaeJ~J2zn3*|IJ+2o~;yN*eVju*lz)i=DA%$)GBiU)tGGYoQuKJI2c@x!b
z(dv(zK5m*tBfCyq2+qrwatAMND93m(cyK{50g6y<2%8noZ%&rl_v^ZyKk0U>3@~2X
zJ(()hp|E8-SmFQ7&ngdsdmW2gj`{raX%GG3iclE84+(N`9H&u7iBIc8DH`vLxJy_#
zs@=>uzfqb-;w6VBj$FYRj^#w<30Fkg6)1dr>6J3xi5z}=lxDN84y4_N;8JFq&Zs*8
z&tXFVwI?#2l!b1Xv)rMz!c|lzDVN-3{9x|f13Vkw#QJ=N6J|mX6^t_XF!)yXa30wZ
zHyf^|$v6>(evD)$#_5oZqcImXYJH>`>t{~hoLa(Ns~{j8x8iXEZ#D-#@V8ta#0YeR
zmS?Y7y&W>iXD6JC2Xxdd*R#)FiG{lgC>~H$;~Sep0qnxFq)5<g=19E<2rr3DP`W;m
zTeOHsO*j=cV}Le*dY}eHeUQ95PiL61Dv6XNy}OAs9}$aV36RJIT{5g=OkKMJl|)_(
zZl?Rx1mn3oR*$q(XoJY@b|i=z>n(-8^Zt?GDRw9~p`|pO9EJBvZ6!y1uTs1j7`S5J
zt4WPldMQ1A+_W4Hdgf*QTYbI$N??@vif<M2+rv7l6gfjMwD~BaU}CMZlaz*05$L3}
zH;B3VNJhPzDf@tiL-E#?)f8CQia>&^`1GxEYj$hjw3^$9miEW+WUed8^a0~+q%C!y
zzwn_;fd11BTMXK}A0(BLt^fqMK!QxyhU#)gbEX>9l31K|niT=}V83sVVG!{{j11!G
z#KHg`X1;+ZSn6zx#eifOPw5e)0AC5zsfg!=R}e!zSlCREkJEhJwP53rRGd#~PG%J)
zH-BB=+Q~KagKnBt_d}Eq#DEqm5UTW*7=jAfzsF~hFKHwvNgRfp<Y+W2vsbua$p{w=
z8P?JfByHhMToc~WtdMCs2G9q?BqzJwc?ED9L{}H`kT-ErhifFAw+v<Y3p7(7s1>Re
zXM{v@{*H!OSax6D<0QN)_J}b^h7#7R>}}xr>th%M!jK}0o`C|@zkZPsL4$jv20SYs
znS%&IK|xl&L+RPcq_$Fe%}W%e6|v@97;LC9!|<*^t^MFc8@tNPDzlI~tVY<%fzg0Z
z4%t<Ii>g&S#hb5Ac9SHpxH*5fNJr!T_#zA;hY+epGDeILjH`hr&idsdk<B6zi@iH^
zWsV8&#a`i3TTPd;v0h2Y!Cn6#^+}w;+6atVY(%VG5>;b40yEtfSb_wX1d)RX*EhJ-
z_zE~8)RfVl*vhEgr@}9>I1M_dQ-E+2jkj@BIH5?0e1S6YdCMr0UC2?(n)uIbmfOfK
z*2%&a9KL}R2C!d`)%iAVnZU+>U%zAiU;W`4vmcL^Dh|V5ILAJ}>yyG(sW#g`H%~n@
zsHg6942y=}l~tO)0JNo>46z6I*@e39U#IWRd|XISke~uKRV#BGAb(*)Z2wK8Xqh3K
zZMRO)8P~mSGNua!32`hs;SgB9gRk<taYKDaAIaw86^kdkYzLl5bQ0;E$~*?QH75HI
z_k?qH!Otl^_8EJi6{UI3h{Gcef3-L0iG~%Aw9~)DC`kcFxq`;aDMrOR8wgwV*cogM
z&-&{)cF|M~oa|ISps}c=Gj{vtOnpwn<vg?Y<-VDtE?eu{d&f_eN@p);YL5~y-HG&g
zAN*OqGPh2*IFB!+D2cOdA;l$g8@->&&AI2q(4ZoJx~n7A=%w`GNeni|261S@Qde3X
z(iMUJ?li(LX9MH0b2E`=E?RA9Y8F(Lu6E(>hPy~0d}eyXG3S;@3#i#6SF)K03jhKA
zr+FTA1cQlvoU~@X^fIN02fRu!z9!Dge)VuHkO8blOxXGe($x=VfH#jRxS;4!`q31X
z_j9&P)~m;%u7=>Z9u#SNKTm-S33jIz?xhf4;rH~*=(OwW6-wOEvK#;UyjyxC;#|@+
z%j|^m>L8{_H+ArDg{zZdr)uN;Q@2!;Yqj6LAMSOqcLUcPcdrioQT#|3<8O`9Me)V;
zzwY;{F!VJpICqJZLt~)PyP=Sq&ix46U5pp7&a7uW?iASRB0N&mQ0Ix*Y_^ly+^JQ)
ztv+1TFzF(z<bj2ayE6$UZ7o_TF;TGtkN?Bx@jT94AHB>Lok-V@xJu}K5u7@81`-=)
zcG-#RS#gDlN%b!U$Y@oomwPzSZiO5m6#n<zfkPp4X^p#D%4UWw%i5LMU)maOf3Zo9
zX*hARz!K3RoKSs@+q8X<`Aefa%DhF<`$k3g1$_hjK2qsQ>8*7SRO$WHwu-u1%WUem
z42)jo;#VUYKq$*ehGil^q|yb4L9-~UGR$WPOm_>e-&V1U@Y$g8csd7DWNy>HKn>|Z
zty|p7>4REg*=#k7{uvxk#Qe}%LZj@p)kmYc;RtGw8ZtTt{Y%rUXL6XxM-~fiffH5z
z>&I4swOaWuZRERl!uS&$!wcs2#oZ7dELTb*UW5ev`JU{Id*7@tE%+^=&+dVW(fmYC
z|N7yV3+yFU%QX)Mr`D_lFWmEWx}*1|7ZCZDI4FAA*dkw#a+uEzr=ChFcNNP=ooM!%
z4ioZf>pz<n;gvF-98ctKR0E6kuqiz_Nh7SS*}DGO&>x--dY-pSBb5_wTsCC5I!Jvb
z=)7vSiO4Y#Oe4Cq4|^$o_~u2=^T<mus0ZaBd!~I6=R4Pi-HX>Z#tJ;m?*4ePn|&?k
zta}gQ+3orRuL`TzbGOP9LLbUW0e^_gESR`dQy!9;qBKTJZ<s2uO3gI~KD_v01#<AY
zWjRia5Kx7ca0TS6F&XUZwk{D@{jiPCqzgMYXdqgizKoS6hhwdBxS0X<TRs>M;qWzl
zmy3)T#<Ub<%edQdMzW_X!E8@Bu3E1t(=%=Z0kjJ90CVh^{O$Z`cmG|wpBt7M%43)O
zJJkZ`){Y69e7ujXXgQ4<x|GeWX}W;5-{l!lZL95?b*}8@5yAcIex^@Zt;iaB7SMAk
z;X;2wY;^5Es}>9s<x+KoEatEsf~8r{zt72ZSYut~DuON%G^B)CvuSXjY(29<Pvmno
zD7LI!J{+g=2RNnab;xj}-_x=VIoOUIVrWH!x!fszJe?SRy?A@npLXq|SJBF^yopT4
zaZbNqG~GW*r4Bqky5m62aDY;x%c2P@f23h?eISO%6!Gvv;R~%5U{s;2Mr4{baw06|
zNzz_N&4Nx_oz@#gqwT~Q7TidKBB+=V5>z%2#=Kj$>D?i<p8Hcc=39%N5>8MTJey%A
z(jDB4hm!H#tBke7*2d=WWC*-E(2ti5kbl#<e8s#<y&FGVGnw2f{fugdWGKGD@Rxmg
zeKeaDFh1>)r)I&P4!Q_8<;PAlPoWx$UI9k^qh{XWbM@8ZD2~!H;68~fykuz)UUWCV
z<sb{SNSy{fmUMw-s5k8%9;(w&z5_FuDCEaTfPHu#E!NJM^VW|2ZHv~JM=$jqFK(>e
zWj=k<)P?tOlX+RQ-!y67bo$ISpn2)7OL-?q=0vQ04wgw9(Br4@Z*HmA++?2W8V7ks
zq`@hZGR5PZtNd*=cZ)tnaXXmk0fJvor&Y&qI?^VRD=x-Cz>%o~t}CfIkZ+nhl)LkE
zxTND1(CC7#R)J%LNEj@yG~r4*x>B;&!DHW#)31xl(dfW5CZllwQx0ikXD8+Ee&+f~
zJtJysF@q`)1gZVjd_WT2CeZJ~IF>5q;Mh$=2?(-=4h1wqQ1nDgy`*RruUVxosp`U<
z8ly!p`9!fUB#NS&>h;1&<e0{8lJ?t22Rgu<h_<duL@J$I%ROR_vrpkqz1z1?;<mY*
ztvAYWpGe7l>Qm6In;ir}74MEovu2TD!x<?!R9w{~bqZ?A8uJXuqt`4au#MUoWvIMn
zfWFNJ_PQZXrnYEAS6cW1-54#tAQPVKP1YjGB_rbPWi&2@a$IvG!vPm@7K7x5#h62y
zZxBiM?5AN#3yaj$345vIWO0UBY#Wr<;^3ObT)WoW%Qm<kt@FpZ>=p2l05a-5V3p0X
zGz}i#6usqY?6{^Sa7TEW36G8K>E%|B7gNVSFx3u>YvYtl2;Fh<4dfrUEFmk;sY(?d
ziKSouRZi6LfJ4iob98)EL7YzcTBROy2UCW?`|%8_OV^khRE7&mx2y0t<!RBx<?ho!
z5?OeTUfjoh{a|Tp&x~`o9ZaWJAK4?_XR^)b2X-{0zPeDXGL@(cdc(dk_4E5GnPC00
z#uin1Z<XK=TOT86)w0%VDAbVUu*kmC6=9TOQVbj6;H6@(z8*_|tUr~+4P{Va{(nwy
z3uWP0+<e_}$wb)=gDmvyi=3OJ))cm6lY1TP|A9JP-<=bmsJUfN-e5zA*;2S;hckNc
z%!wYb@6KidlS3|;xz*{!8$#CrMO8(8LS3!7YNqx}lHf3m3b}l!;^fNd_3>EL5PcUM
z$Ml*jsE2P<gx7_xPXnN&_D?-qt(8n;m!NYi)^^F<4RxBwp^!cC=SX)>Pz{sD(c~9=
z-IiVa8@`7;PF%MqiPZn+XLxkzM<1qdD8aq&!l~OM|B(#2Ks0`wEhHgZ*9Qv5g#B39
z`n9|3?)u^0<U(n#Rl8>GiVtWxeiGhw-c1R(xhUhnv{DH9`m~w?3MgvU*TFa{yXb#i
zO#6Q_>YMco2dP9}<ag%;UH(Z*>UHTjbFIdqXtRSa90qo8wWSO&ZfUX<mGGLixoDx)
z+-8EEH|UX&lu3A7xQ81<XhslzgD0K-<!O~Bx;gxvlfzf<g;~az-3Kv6ubLs<4z^-w
zbWvOnSx_~L#KyPA6-U=a)b7Ue@71&nVFrgr_;;iY^*Fp>)UKm)2K~cpmYner$X_;2
zpGwfICE=U{f*n@?1}C24HWGEr!GbO7Tm3Q?=qW)gT#f;%tI~}v1bn=YWeeRDB`SeN
zR$xDinc&VJ*AXBBD?grB=a=*xTr!1o$0d9X2QYwsb8)KTua&=XaEih05~*tF4<gMx
zFkjO)JQ!N6Q3OGiGOS#cB3nf7!9SI5Z<W>@a~jGa*lY?MJ=J8Q1(k97=f%+WeeY1;
zu1t*D)p~rd#)vs9v|L7caaHr5yg9-8zEl*NETeYKSv=X34~83xaMLSu`v<S!x8sug
zcFPNH{BjM?EgG=gZa!Our*L(1Sh6o3Ns0ad2wF+(_!JKwWE=&=H711(b|1uwp<0=5
za5K6+09|K^WU8zy3D&vq@=I||51k>9`jZB@j-yZ%7zSy2h;y3h4an!mw#DPI%nY|h
z8Tizn1OP^YNxHahe{xT0juR7EEh{wRi+A>@Q=$p0JcvJzFOtQ)zG8_nk>$ufmQ26Y
zP|tFd@a$|t*Tt@g9P#6b7iW2kLXIWSAvl(twB3QviIkbI6GL{;qnVk5BVHtdVZ*i>
z2PuPipO=io@giAF>AIY+%SVV_XLn7Wicat<_8<%%H9BwGYuv>s#Be+ki9=T3>5t?<
z+J>4K=@fD(>3p%0BfckF=rY(01~BtR_z#8k=-EhE7Lf|d$`47Bdwi+=>jZZFrT3g<
z6P@N{>Y@Li;BtVcPSOwsPwQ9qT8Ftm;3bnO@R&rH+Vv)aS>fMy%rKNlJ_>XI-lz)$
z1j6t-(OeWo-Z>_m;vwXG=g3*Y4AsrZ(ZyLDozMP6wAT`UUxVKs<_%iiT?3)Tm{_k~
zSi#&ZrrgB3$jmVX4;kC1R1qp9SlDB#gR5UZ&qFbePd)X?fc6Z;Aq@~ggzO1`#ZP&u
z15+M}rnQnmnsl4ul?O6_rN~T3Tq)1330h_jNRnl8GI5ZDh!4HhB&t=`cfqyyCsFmo
z0=m=3&HxU8XlIXw7{NhwphL*Cqw|2%mwt3Sd1w{xk@JV<w9E0}oziT&r?d^K0Wx`F
zT~3c!*BN*)I$Hkq)!ym;CJhhS6bX*@OuxBs`0-Q&0FS~}WZT78$Uig*nYarMy0aF3
zgq<#?GP`O5T(oTrH$f+R^G~kr;@qa06gWZE&8!owq75gGWehrnv29Z?>HxP!+tyGN
zLI(TNYWvXUdbdEgsjd(Acc*}X2@VlJZ#D>pBtUcm5?GKivFcOEWX)OWZR3KqyB#NM
zgAi`9f!FB)RQ6*FX$^r}akvx{p(-S2FC+&~Jm0%2E2GWliUaA}i76Kun)MKrZ>XB^
z((_JNmLX)}1QXOAzj_Pad{z|YDKyqy`0~g#h96H;08XxelEII{q9E;!@%5nU{eI?A
zU-Hw=t41ipg<JKoS9uo!;usm#$5YEt6pg53nxDcw7O}PWVo9ak<8md+8_5Z$nYNbI
z%Z}Kh?)W}9>_AkYkhqq28MiW+Go;1ZkUDYn55ug&%15zRU6>C8?FJgA=)I@_!HEv|
zx4RrKvg|}iSMH@gj9vxjNGJyhp`AwC=ch~(yHFs3+e8N%1s&4{@Fh@-g+e<f$n}Rr
z2Ls0BtgvakiYhr!q6(KOa865BhQW6gT#k*v1il9t(21cY09r|LJFW!*{7x#=2sxr)
zP0F^yfB@k|`wqy0j%&fJ|3Mm!*$rSWwJBdP=}=nLiGf_v3+U+NXw2H9Xf(Q@gYbj|
z0~Q`UIM@PRI0}03GKR4Y@rEsHVi%I}a3nrFnuvF}$_g&;Aq=(ZWx#Xel-i-Kd$rDg
z(`VmNzzkEuVqo7%(!7V1xEuk8`sL5nqf^Wg={adMCJrRG$Yf!IB+5rpbkJ}Q_2-Jp
z2&e(OP{Zq_H;xH7!vb3JW98J0tOzJDf%!3xmSLKc=RIs@OpANSLrYHM5IIF-7-C}c
zH74S)XvuOjN4~rSGD|`+I9ZQ3>te=rZ-=v@b(eugLU&u+j(o+TE-|ZmfQI3i4;D0?
z=(YWwhUrVw6u~By%Zy^QvUkJ$$`JCg48<K=&hPRM7H7y%?0-u3h2w%JG$+8IalHx-
z_c32mDIN1*F^XpwbzPP{*(Om6;IT?P$qey5$$?}F5{jbsmD9FXNIL7;xr=-}1g#b|
z=Rre6Krl{-1J>kc#L8D7ilyEklSQT?w4yM-I}W_3jOigS0ms`DXBe)%E5$nBngr1J
zdc~SRG;WM&W%POLa=(M?7zj4HGUS2mL;`>l`DB~}81~^LdeMts-9NWQkmMv7Hb%N~
zPK6iga$RQ6;SVUe+^pur_km)pTjcO%D>Xbe(pijO?-aYrb-%p+Y&ZVqYkIAtGAU|!
zvLcUeTHKTM+-UfwNmr$C?6Os#8U(O!!c2RYYeBGmeK!)#Q01xv>j_^A8cB0)qwaXk
z{Ij8m{lOAZoZnRa-d{y`zhRQcO2yJd%LY6Z?Hf2gXYwZt%Z22X8}Y6IB{g6NN)zAx
zg$15)eQ%|dYKby4S)#PY?V;~Y%x7Ir&STe;lk2RbMr4D-phYVesEZbiDL7Z)&M76^
zmQ{`=skc6?_;KYLI11BMr0FW~z`xm6Cp`gCNMjU#g#w<vZk{8?lp9IYNU$k4r>4J9
z=YGvN_Gu+}aq8I=%R=I7D9#V6_OBXKmAfI)ZRdZ4LKl<8)6T4=KIMQOqbF1Ls9VZX
z%lbxWcB4-|<XUMCbT(_4C^x0DXNq?Sj5LahCLh)~0L7Qd$%j$Q6=s#y5>Rf+0e<ML
z2k55LunRje^lS;1nk@?=$9#ozRjtF^Y*RZSXLodY+wKH0swA#idS0EyCav}NP~Uyi
zS?)PfPp{TYavz0_m&<n7p#=I4v!((@pkL8m*j3ly+g>sy$%wwsg~dDX+Wew(*b;ST
zTo7I4$g_4o9w`?_7di5*-48jA0x3t`3mD2Hs%xK1<~Y{OU$)3xOH#MOi{g|rY)Q1{
zEO=>T(~G!kGpwRFhMuU+p7bOzISh-Rgf;6K{ufYf1js0+B0vvt5P9rC3lv3G7BWQQ
zcS%_|V`FqmmH6PB;+c_19Gs#BA*O2u9?+?d1SI<@svMVkXl{7FVvkNt7QRMHmMWt*
z5uxacMKB1hkcaFdBHTr2fcU6)YL9f=6;#!${#M=OVB6K$_9MD!Ko_Lft|NvcB?=5J
z6d}%>l2Qfck;sgVaa)hXg`1-|oxWibcFp+voBM`bs%Sl__L^gml+?7=PB8Kk*4^14
zHFzS;li(*PaNN6%Y3W*L*xwndL2R(NQnphK!?9Ier=9@FF>9UmC2K_C%zqtsN2$(I
z`#rYgqpGFvgIj5MtLZNyr6`8n*hYk!rWQOg^|j($uhu%zJwdX`P26`U`1jyJvHf*}
zBPl#RbcMZk2jmIIa0Bt@`$oFQG31uatCjFL4**lA=uuUzR$pfxFYP+<ZY3~~V+6gX
zve2`uU+vT|D^Fwa7!+()86m81P|q?knJGivav$$=nV|fOWY3<0A)l}TD<MKSlB9~F
z(^6xNmBz=hYoyAA+1&_6QeX>)&<Hnb6pBIiu~Ww?w}Lt}o}4euh~5rQ5FcLB-3mHp
zbc7uwua@liOmxLtI0Ij#0oA(~{jFXUr-=&)Waz!!g(0Hu&WgHD{&@O1>uBQQ=N5#b
z-k?&q(9CI5h;49eYA_CViCJJ$CTMT0R!0fV0foIRW9cGsV|=A5Wq!BHl%EREpqW^l
z1Xp7^3Uzk?aSjJ?5c@NgM9Z>=QFPhDF;Xa>5T?n}bRjIC?>;fJ>B7Ml!K${!J@?T0
zeuzme+KPaAbbLp)`^D<*pD&gN(A>%lgZjQRra^l7yS3Q|`bT8(v{KJv<~@0i$){1;
zo{$mqJF3ptW`rtc9bk7_zV>#FK0aG8vEYGAm*chnQtrF1-;pn5_n%vGe}R>FKFd*(
zYZ}}UbOSv+&fS@rT|Fr!JFZ0R%={b;Abc-38$W8de<PIp3fYnIN@8OMa$n|)C&u!I
zF%WMKa17rjb@rQ9@F*WIl`7YErPIeJCKFVD{HEAmTay;?k9{;$XM)z=bi6}_JLcj*
zqd=8-5JjH#AqK-R0Or9(au7Hn7}tW!F-Y#n<f3a!UY6NJVepx3=7q8MniK~|E^h&i
z4{w_)pjWlefsB{iolmjsZ3>(DkQV`32)T{O?90O0cEg~mu4?}<wPcPbEN@D{x4M9S
zRpd3Znv0bTFj-eB{aM1}05r|qN!4T2=JV&ISnqiX&4$Pl^DxL*C?-}Yah<wy)6U?Z
zbKAev_08h{ImMZV|4H9jWK&R*!r-Z!mAs`)`8Sx5+>B39eWEa3J1%nD<!E=Z3Jh7_
zc&?sQ{xP@jPlr$sIkrC$g(?6$K*Ya?(Tivhy?{OiDhPtE$|^k6Y-IJA>BJXos`URT
zj_u0`0JLaD3lAi>&~m0c;{o?Rl{NERjRF4fD^HMWVCdK#O}q|5zMR+mGhe$7O<=(+
z-i>gZ7h%z!8AxRzRRy=a7munfczxiwoFnx76IHbo$QoYqC{kozdJ7YYtdc+#LlMd)
zkNT8#Eu1<Z<Si;1n!|!CX81Oy+3V-lF1*te{9;}gBOE4J&W5_t0j7dPK^2E_R$5+$
ziLUX+5c;YFnmpXjT@BzEHz=Gja|P9x!(ls7Bd~%LE91*XlWw9ICs=bBXqf3WM6nte
z=o-+iq{lYwMgwY4FFKt?V==Yhqi!#w(Ge6paZOv_RaGe1<l<)}In?i?sxWmFeQpip
z4M#E`K-2|G0s7a|yo>j=BE2GxB3fQWQh)C{oVUy6U&+RolGw5X4t+&v<zx*NW{3N0
zz{8s(lN&ye%_KW4Is7Tj<6~uhyFJc0QzPq>ILQhfz!XL!X={iK`bn<G;b}0<)dYhz
zVu%1lt0>Jcg5+o}=^0dzKqI^sPjrLw`AjitT2f8-#vrrCmn^Zg0^NkL$@<Jzzj@!#
zR5GXzb6h1l$tz8YwPprkwDwy(eCv2Y<67Yf{H`TFdEjl}?5`pHHcBL_J;&>Agin#C
z!x48xIvV``DvcAl+>YlOIbNFiL39=d+Q}cU@;lJ%6h2>LMM_sXB3~-AMck%<F%ZB(
zCw-DMk-HSQ7ER=~I*^18c7s94gXDFS?!OZqh#=%=+Ni>i%;t-e7^TTSuY0N{DjoB0
z;jRbRcSDEO8=48?ek(A<gwImOnSo>-Gi>pA<r=@D8O=nk&=vnq1w^sf)Yp#It#I#0
z&gjOGUvr=;Kw;WEWg*U|1xVrISL2sT&Moh%Dp#z9juAjkY%RhYX6NxK4BE2U0c-}V
zo@)DY16>gm-zu!DhF8t9W$oT_euGy@Mb7Rlxz;^J^csP0$Tc|ZL{})lEe+h&G)Phn
zOO-W{7nul0&PzqKRLUuQx=m!DQVF2wJA_))sZ59T<kPlzTxdIx2soktObN7CS;5E}
zVFfD!U_pU;AhlsT(M)T;Q>yY)kV-3HBaOEZwP5N$;@fJe>l5z>j@%xkLa~<HIKeB|
zGv6Bf`L!O!jO(iT9ank1e_c2Y+R%YoaIiIqT2#&Vb~^k-cAgx*mu@Z6qfkdb+O?={
ztg^=Qi+g)+%D73*k{Y=W$0$>icRfW5j}rQy*Ai4`O7od;fujYAmTkF5MS9|xF1<@O
zPK2s+geBeZF~ztu&Jep)ut`(u+0En}jmVR%*gTkPv?2_T;=z!`A9qZv(Fl=T$hvRj
zpJ~b$yJIkv0_*4a+4DK|NG&~0J))rC`LCBz923M%15Pjnhdl@L{2)LVIAC#cV%8;q
z1HHed+EsAHqK)G<3YLfMfmswqjh!|3RAlrZhA_gF=o{<kLTD_*5lck}=bP>6r2^8I
zfw%ThYzsZlV9_VVyt_ynZ<L=a7HT6y|B)^0`y<`SJjbL}?fpfa8buF7yWrZVOkOlM
zE%f6S#f@@Iynf<<U@DvGD6F?tqHVPEHC9Amn0dUC&_oqrbR!Xl+FR76hfKs*$>K&;
z>h&!GUHB3f=1^MZgMVj^)rCBU*SzYoVp`VEJr`OW2PY@6UeOQOQ5aQTdYg&%JI%y3
z`tXJ2GdPR=>x?sskz)-92Q}TC_o>Ejqi-Ftr7b*1zS~|zG3wXlOD5)!!R(I3fZU7M
zNSg{XH>7@NCU0~zw_QD6<srrOjPrncbayn+0#cJ?u3D~!Kt~d~YyUzYCM(_aDJOD=
zmfNt0$^ey{lw;Y59(Hz-jKS$iz&)boL!vmKP)|8OwfhyP&p<2erPQ)ACfCf1MeRgJ
zfI7hA7K|^y(3F`()?YEiZ#5$#3IP3mex9QvnOagw3ozk)y;c`dee5@UCszVha&UZ(
zS=O|x=m)j-3LJ-r@4X!bl<ZelFpLH$@S6nIX2n`jy|Xi+=<s=!emk#A+vD3qWdrzq
zs#Vi+x?U>dWo_gyoDRKS^!980H9$A>{P|Yb1jQ;1>gO+qqRJ}BEql?b_U{bvD5R=o
z<ka8E-k*Uz{`!r?yobGcDxvLas(H8W(RlSKDeQbtHqo5oYZYyhor>BnwMr?1Hi>EG
zF~vh{*_tks)Jhp`c+!Dw?kef*EC9BqR*_Ct;mQ(ut&`iv<F$5!YS+YN%prmO*pX>l
z8Jm(CBCV2=t^LZ-{8PMhqMXF#u06%(!TxqcYAV|Dr+n?~2?-qfXMIW?1p^67w(Ugy
zs@sP*4N03L`YN)#cXExP@x>!mlSQlvV`A~Y_dFqhiaX+6^!JX0JL(hLjmEA=vYr!J
z$<1@qojuC#Yj<&MR%e^cpqqbf_x`bhOl+LqzR^)SZz+HDPtQ+NTvi7;Qh61Al&IV6
zP59Qo^*kdGzaMvVyHch}Fu7xXN!-}8KbMJj1)xK19yMRz=x)4jh-)Y|YTDv`n6lH`
zDe=g9$Jk}uWTy)L(IP9FQ$%qhiI{EIrOfiTSfmm@$*u0^k_ggAM)lC+Y+HLbN7cA)
zYE{Y+bUxH7P^;^Qk<Q6hN@GuIneN|ynl3@3kN5CS6RdB{^8|9GVF&~bL<=_&Ero&+
z80e&gMc}mlj7l=*O5^~rSnG#H^~EeRJ}INT*)T%Y8wHNm$>_j&D`2c?3;7{i|7AeC
z?SMFmKSK|?5UI=5R<LrG)pp&fyCcufiGl5wQ&NR;q&K=YIla}Ox;{`x+T+UEGpT0m
zDtzi6{)N`WAG4*Lj<cj_HAx$%?<AJOLq5e6CHTPnspY2?G%Z_$KdsO1>lvU)e$+|f
zbtQO=`SA#Il+jq5-TeZOO_I$Tu^Rs$Fw4<Ir<5Ejct?&zrwO9|{>-3cJkS|y|ASi&
zI)U1$YlOowS(owkQ^?dZ@Q%JYLJSEk1q`^ji6fSC&xnzp5hO<bkfcyLDYC{hLPd|s
zau28J9N<aNd?xdfqxoy|+`zIvE~&M|c}B7v6Evd+eOj)Vql|&_ormL#IuMT3gFdP}
zL^KTITR4W}IQE=o8rkpUd;`5lT7Kq9{uG@d=r0Ww8`rBDf-wHAp>a<^<Kq1hPfP6c
zX@2@=44R%8LA*%2KzHEPrv(6>haztcPFTuU^;%pcwC!ikNi*hI{Yb+Lx1QjJ+Gbjq
zZ#w=;r81dV)wTQmF>=X7c`%x?V5+1&>AA^iId6iPUi9mgHbqiy0mrbAUej{6ktl-}
zWFTYJDrB#il~Ia063FFheB3z4BQAq+x!rc#65&*_ymvdRvMu-s^Kmb7a5m8YHHyVh
z&}FRLaU_E2+T8Va^HpRjQ<axzWH|=m!~{$hmG2Y^Cyy1zOOr6h^wKoBcK0!c{FYHo
z!U`_B9jHYO+>K~Mx-7O?Ao}*W5Nq7?j?a3>`}aB>OgsQ$5_dtm22x()Lv7o^<M|bj
zF2k?gKrErErU+h<xVxCzeE#b>;76pJrOIutip3;6mova4m*h``!tC&Vo-+NxVG1u%
zN3vqIgRx7iFP265Z3d(Q)+a#ByA4UlJjy#fRrWB#AK!7oY-K=6Sf!g7Q(;F~lv5MI
z;$?JMyH25{^nl~)e1p0sOZQs1#zSpzZq0Gr!4}DU?*3i*#}|sp#`o__y!1AylpcnR
z4U2t)ZepV#mL8B4eHb3B+4Sg3V@Da+SLCsT!^H=qHBJjVd>=X<gu23j{2F;X{%3IT
zzHMZGSEDR7c$>yn1rU-p)!O3TYmcXS#A6Y@I?GX01~8Bi#Xjh8NsMPGfKdh={<V2y
ziDn|WRzy35>+K<@WKD8T^}gKj$<HdMPrdYC=hEM=>*O{3?bV>E&;kpI8KXeyUE@f}
zRnfkGsU&`Bg+^_wYK+iie4g6Kx~8>3nvTlbcAI`%*<XR>k{&EiQK*toOD=cFm=8#d
zvtGf;k)X|5jll!5j7R#gZs{-Q_mcsK@M&mhMw8JtW#fzf`I6K>+tI*SqarQ}T#>sd
zf$hz$v0_f#Oy|KRjl$p8KE<~>FE8v+=)AmYm>1?je0958cmk6w;F-q+t<iyeZ;Age
z>pGM5Vw5k{&(_C2>A51rSdLx+YJLnRu8q4hQT9x+;^tx^4RjoHD<upie9}ch@mt`j
zk%~hH$3}wi5GOAhZG$))NT9)cy2r7S^=OLbTml|Z?qEDV)>tmSb{AxftXFYtT-XH^
z$iAK1A1s#JdY8b^#_8*B(kwRE4>qedwyfte0;{i14!beDY|Miho?WCIfnLK1D)sR{
zfl4^3FzExJN5J1flMuprU0?3v%R^yNH%d+R)v+)Rse^E|!ZX-`ZbaA7)vSG&>jS0h
z2}M`b(Q0Ds;@($$o>_C}P6DRX>cxaT(zW0KcSF_K6MNu^{~V=oQm?`7mvha|Vdi&D
zZ^EhSCzD{j5h3)<=yW3={I8>v*NE{|<02UQ5k?2lew4z0EIfL1dU-KZ(uE2x4CCCA
zCd%Y8qz@c&l13QyFD$+k1`^6+xYgC!F1;JbGx}>tDV^tg`xdzS=2IB~3z+}PXuS$t
zdyDFV!$QMA`|g3s-EbTuzZA|I#9T<Mr=qzK=B1|Bs8h1h5p$q!>x+PL_ugt~-C9m$
zQ2l#m@84NZMl9z|EgQxw>hl7Q8yEpnREPRr6tJ+t4;Ls<N}o%Ve_Hnd8@K^x8&l1u
zML%^wo2RWVk*F#X_;J-|om_sse3rwh8Y=za2yV8s)G(t&nd(KZhzKXSvtt51P|<1(
zw5dYxei<X@*2!(hdB%^MMlTp+2glA<n+A~_%_4A0;pQ^aR#EOR6>K9@d@ms_WYC)y
zWqE6Nyx-SJpK<d{7QFYmGo)9z@ID^1IjTAhSkC)<$J03HEttITZ6S8!Nhyr`ISNN_
z)6Ks-pJ;cLr1&~jLuERXsc19$!g=BLfuV$nPNkmfoa0-&*YZRpob}o^eg+vY%b85N
zYA!_;qGRjCq;R0zPG3R+jluEd1bL6B&8VDg2L!<_oSK_jq9|FL+@7bjS;2ASOyP2=
z+dI1ODvsXKZ4$$9IF{0i#&s3EM;z9fx^OrUhnWVu2x^h7a2^*ijbk{LhTka#)EJFs
zI4{qhCtJ2?bZ+>a^yTIEH9j;_D_llhiI}~1BYOw-IB7hpCstYSW%KWwtOZ6Bka%+E
zEoC^lPfXJ7i(a{Z%&u!DNh_8IFCyU_sm0Pm*6<DkP#-olw^?gcsdG!pq-?;^x<~%#
zgxNR9%0p*IU9Tx>Z+vijduscs52>DhOp+<naR0s!YWgS=t`LO05|Js2oIQemCrc-c
zq+~CQ+IAAGYslKzcXTdwXt^EIIlBG5fZc9}kRK%iPH^dyvmTE=_{R7WhqGOxi|qLZ
zqeEw=;oY;niQdc=%&c{ypmDL?1#bv*-b_+^<s|?PExJ6)k{<O2dK-VTOHmrjD7dpn
z%{{V&5=ge;r0Pp@m-4v3w~KlmHAV)%<8fUtj&n#6+Sq~d#4<D1ePa$F*?b%NQur>?
z!s&()NtppalcDmPqMPC!{rJh|8tJ4bzLvmHj}3>40W;*Vce+dFv!1KNi}~`r_u2o3
zafOAUIG$<HN+DX2fN;(8X5{@H5#l2|c6)5&Bg9z4j<NL@SHoQ4W@bi(R$h;G)PVz+
zXKYo{ziia(<kxN``@-v$J|}P`hdnHdw9m@`3S}N~oV7^v^DnvbO7kyI|Mw6LCTyq{
zHS_F=B%3EBxIG{jL(!JM#y%g%{=Mf2Ppz@K7n~&xNv^8e^i?fa?<QEiX82GUlvtFW
z175iHLA8uZ_FuXH?JT<n3@f=Y;3W*A9kDcAxRic?E8C5YQaLQVW~mcvHx=RBe&+%E
z`MBMQpNCO$A|->KlcU<K#N;U0lthaPmnuc|74@Pn9X)5SWTJBJr91WQc=ov}r%KIg
z>!H@d%5OT0CWaaBZNk0!6r2KId`>li4dqz!J|j1jR#Y|RjNb%<DO5292sQZLY4?w6
zlC9Wd+Z4xXaO8=)SJtnDY*u*{@=%f4rq@^hQhdLL5e;fIMEB&=T{^vSdJ5jz?Kp*3
znW>>G)}_kIQerFI`bS1{hQaS^%E!5zJpxq0p@Je*)%|P*?!CV9B911@fZtIo)-odA
zu<}K1w2SG)^xC|0#89fSY)Iag851i|-E4FIqs@l=Hi3`tVyT46+};w_OMa6%8Jed^
z(Ix)DuH$f=i5eKfU*i-$fr+@KBF6pjCyn3om$H3z$DKu*?Mu%G2V!v%aDhdiNk&3i
zwnXFF>U1S$Fg!@Zd;B|0OPDNIV&B9NIFiDxy*3gkUfq3_2P*M*_k)Yqjaqt6bYVH4
z)rccyg{%|J3*&mSP|Y_c6z?>BKj0Q7=ctk=)Ot76RXBciO>s|nD7=m#b>U(qxe_z}
z7Zi};dvQf%ED+%X%(6i*Z`f@g^b7q<PiM*^E_yc*0wQqB?~8a*;nuEDcEsvv4D8#E
zbb5riS_h54u`#t>TK1X^DYlxNfkz#yJNbKF_ZdT>FK*ht97wWi*OOg?$8J%3WYFe2
zRi3Nq6UPbT2rEiN;_WX))Sf*firQ-%$fvuKLr1S`_&y0qJmGuH(6u2Yke9wF3#U?5
z0v;5U#(By<wxeQQI*X-Fqd8^u$!g>cj=Gy~*}^D}u%CDT9`M{p=tLad*a+obe6yA@
zJi(KclU!nIhqu_BFL8%JFE!_5%Vi`C0(DQbSmLx{D)knUPV<IMv6>Xre6RIUL_0ii
z1mgh2zAK&3Sc5=Lhv*^AHIJX9)Y#lD)W__Za{dZ3p`bpN%(W30Ymyg{yJE)C3OjUh
z1}<!2nG*^5(`u72@4P5LI$ld*!c)x1<Ot`e%<~hmin92L7Whj<{05nki5h+kxDRpe
zO|3)B=n>S$^EoI4hZeRH#yjfgzG6|uIyg{@O(?nl<L2evvHK6$cm@Q(EiEi}7_{HM
zcD4U%V^L9kcdw@R%Ds6#x4Co%!g&5hEn-!Kuq?GX^JIP<B9<KsUps%h0l~kV1W|im
ztpGLbHALMcv&GUzi?^vz2bvuYkEma?*0WHojho|Fsj+2*#1Wm2zV&g9Ny=Z}Eo)AL
z>{w!2$n{&lY7F<52E+lpX}Of6=}Pxx2CV(CqAdZq)mR$1Y3<7g<{j^>!^-XJh2yi&
zO^R6ZUeus2+5_`&c^%fa-Nmz;TQ^hFZd(O~A4<2pvv4XYz4g{+6(Z?Ye-z8Q8sVu{
zMvPn5rqGYai*4Uh4gZ}=rOq+>i3H;K$(v}uC$@z&k=DyL3pbJ3pQw3~@g3)Jjtk3j
z%Tp-;%dU_~Fb1)AB#a}Wc7wBsdbh=rJMu57d6%p-&2zAPb^Gcq`<GL{-Wi*&67@PG
zUgML4Jy%p2N==7}Pa1ZdNkgNdZl(-oM?E^2pRH3mx}jJ&5*6xGK~MGU3VmP~mLhq=
zQ_*lLWzmI5TC-a2(?Kk1@<oSBtk@jI*i;}qQ~S;<t1q39Xp~-~&p>EP_pWS&+?5Ff
zbi*kp>+|$rsnR?Hc_}w__MUyKX3rcYa~f%MxfQ5$>^!8vz})c8F5AG|G8&h2DYKCk
z{MV+v*VoPnyp;_ERiUZZqf<%LmhNrY2-f+8fzpQ4Nsvxw+$T0C%J^&OhDNNmc!Oy?
z!n3{U)ZO1#_KWosNwdm2`=&x3>PWnsTYc%9)iP##K*ZzaJ{2c^RlJfA)zX)7&Lh`S
z7o?D|KO%Y&QQK(##0<g6<MRErc0lbdm}q))BEyJb5(%27b+>WXzc*q#6IA-O(v~C-
zqMDEG#P>=HSJ3~J*f-ccJtkVH`Q3i$AQt@Dm8(M6|5LH_;{C4d$l>!s-;EEAtW)g%
z=f)m-VEbyiYhAjWJ2>?S@cB;Y-BW||{8}}C^&!S6ST;0%bjiZe6_Ks?U=B^cAcs*4
zu|4<jGgIc$T1?w+^e*!L@r&z0%Ek;hcXODteC1TP-RE4u@aC3e@<zSvr?v3zVJivB
zwhB?mh3)xC^%%#x8hW3!cmQkmI_4<cO<dS}?WUEe*5`MlO>iwwXYXW}qHQl7t+#M6
z%(6O_<yJR%MIc%;CAL#D3SCB;=D2C++wc$t>AW5>tbv1uGZDTVU`TN8qyn*YaBtn>
z+&rOSh>}Rtkvp4@TfvGHt157Y(<aMo$nqJ=2pQ%!Cs8ON8XGkZ3}(kc5jl2<v7$JG
zXh#ue)+96r+fC!gn8LF-sXL~@pSIZPF+})bd1O((VRdN4$^g$uM_c!N=k(1!$C0C_
zuEavR;iyZ5tnvplMMI~HS5%Y76N+E#J~{)Z#+8vM@XLG@>8a_x;Lw1RnXz%l3$f1m
z+}?28U@xCDDGHdsdT+={3c*=Fw|5NO#En~5g7!L#*sM}!W3Gc?%y*s%GkI>Cy+*M4
zoNT9_q<CQIO5UT1*%Z>`*!&EhsJ^?|_Ck^<Z*$#Oxs5bPAkXR0n41`AzIQ$r4SQ|Y
zUI#i%gKP76|78s&H+uQlypW~9$F~dy79Y#6gj}SJAR1C?+&Oefk=%rTnQI^CGAI7v
z=6$q>{DovPHFJ2x-hSlhpktDt;}E6QXDedwiG0=2o*Z?_l(FV$iH|Q-Q=oBAy!kaL
z<R<Y<hFlQM8=lyZK*=dWVa);U=o{lBw83yImajSd!!m!h#BujWZWWI1ar(GkPs&B$
zy8sW5$b9oNB2Z`6)(vq}w@!~wI%90pYNEwhqGnR0l-8!HTT&*|VSg}Sd8yPwPMzP-
z1XP{@o<tt~HUi&*robUJ4*-<(sLY{yF%$*<nGtMm)fbJ^5+^&O+9+-IwQ$G)mBne)
z?PP}=yJr}tK7`5s_HKbkpOqH`mJV>GL<BCW1m4nTa<%#<cCLIb(<Kpi(STDp6<KEB
zF86k&6e+D$jwRPJ4e4LvdX}lWG)e@J;)eZ0H$W2`N^AY4Z<jB3r`Jv;LAyaQ<{Dz*
z)Ka)T8qDGQ(jITX8cL*3(L*!2ZAEovU%IqoIK6XMIvp6!DpI2ZE*@(HU9D^Y46DCM
zYo(c}*X#7so{IW(`07G{NUsrEER-%ST(Cvm8er)-g1N#O@!@&ky;v=-&|mmzH_(ix
z8BMszW>kD^!<-8xd*7n*=hK$mOi+!<0@X6?2M-(18iVM*jfFtV3Nhiu6e7h~Fml+=
z{mvivZ&ZIF^OI#RAIutX5vf-<Lnmj=dDEO5k1{uB)&y^-y7(XG75$v3$2~Nu3~_XB
zn+`X}T13*qIoy0+Pyy6R9eM0m#5uMkz=6V%$heBOKdr!oR^FQFE|vk#sbFa{*A}<w
zMYw<oJdFb;wzctY(c-p`%ETj&(ODa-se<+d$6P*-ZtqUZY~OA>Vs+d0j3vpy4&C4B
zIL=6%g_Q7dz|GeGpJO(;Ug-MNV5(z@x12d54`q#MkK8|ZHbbPfmb6A;KGoV)Q^T;f
z73}dFT)xi2IX7VNyd=|nQQI$o^eZ|*9uHTh>_MdcJ~)tMxQBed+dD$l!PZ?b)gKc<
z66;%5njhg^cwoNPGm#E^nbziH&~8^Exc(Xz!wxa`*5-vnlWfeQnef7v*aV^VYKB0z
zMEaz`oHJ~-h~z0@$5~0BmlH`}9Q}?1*Yzr#DsyF`R*f&3z~)&P1H2NcL~N)k@lNWh
zNo#M_OvKEMbF|>+Eh%Xx$(==0%m*<r){|$Ra9nGWYolKzOq&{r0xMZJ&#cxg{B72%
zR5>gwlm93;BQrRm9nu#lKRhtyk%5>PqvODw8HWQs%jfqGk8(kyQ<8n0eJp`@m!4Dt
z)8iFhAjf+J0?J8Sja>*Mp}QjKv@QMKAPj$J{W6}yL9wPyt~tHead+_KRJoc@=8jMA
z*nM34_?}Z$RIs<HOg9fGN?4L^`b=4@FNG=Kl)v>OYOQImYCre${aYmvf3N@gtdR4m
zk4aVxvh$FmX7u8L3yO4NzgjU1`-C$TJOl32UgJkPnDS|-?W$<-!RRP@1`VJUP``!i
zT5F=$F4rRu&cI{WF-Py$7s-XCeg|bl{>Y8Wu}>AxUnMdJd0*!QO6rnhVn^{sG@i7{
z848XXWn8)8G#4XpCp0&O4O4CkI(J!QZY%#vgk(g(@v@+E*Y$i2CFo%xFg|LF4sFKT
zJBd-23=~7N#0iC8OnuBh%nsx$3c>?>-6*#9Nh5KBu_QWtfdKpNX`szy(^{jZ?7D<y
zb;c}-pLU?=a3pKiaxUDy>1sKdI!;A*QKi5r0nW9c;ecyNNZJODR^w>ZR?|$g%h)bN
zez*v^5R8_r^*~sGf5#SAy2gXg=sou?pLxhBOM-wCaK8i*5vPwRdD&{$r1&d5k0Use
zX>DZfyCf+gduNQ`dgN*AmOk0>+%ZQVl1AUhox>MX0KApeu~=-M80vm5Xp%J@QYX^b
zL`#XA$Ma!AfZV)TxnQQ(CIo^`oj`7E+I3BKHy_AtA;x8NKjh$2hJ9Dt7y_=H?2L7u
z63b5hrXi@}oNh5#i+CmzSSL?s(ns;>H$J*deo3A!j^gqM_>RF5M#!7vZ-_f})f<iP
zW=em4(peYRyo#}2HS3eUDUm-R`OPCgY4zu)_lF{FDSCziB5$>JJr8n&ap(9V*)QL3
zOKs7RyyfG0oAQ1Q7&N7goeA<@uTP-%`HA-FOdf3V@pzul736t%S~L1u(bd@J2p8}>
zSxSw&`B{u(OL~dLQNM^9Dq2ilIK~cjp`c71bW<5Nq62mCfjfesS@=-;f^oVL8Rti?
z$=$OWjMLegF@q}+<i?EK&0jj70S|9TUnFf^d6pF=_J#Q30wZ6E%pvCoJLtY)e#1Z#
zfs>w%Q%4-X@xCJ`il;9rdHp;g_fcHTtg1ro?N|%D`d-ixBXZ3z=w?p}GVhdoewYG)
zdh3ZXD=mX>(MDxOGqBFxhe98qxq=<TOK7)-zzM}(8QZx6uf*y(_EmP0@Aq<z{3Uc_
zV<-2)J_r2x;S+<m@9{wi(abi;*~uekpO<|ou`^?0VjFd`OQD>nT_5VdSv>LoNWAA_
z<?TXHLH}J<yg2_CGM2!s>&q4H@ejX)Ht0?bMXo^K95bqO6(u_U)G2FW_Zb7<p#Aoq
zpc!t;`DdC<hNS`*^n*C6dl`U884cP=bRy7_P~tr#1Z|NAVAqH*+%4wz5gZZkJ(#R0
z9HKqwxIK-MBnMyO3-hoHHPq*)Hh(FL=HPa#)u8=LfNb7(4S8^P#9c5w_yzN#o+Vui
ze+C9W;15tRx*u(~3m$~y>iqy)0Tsid_BXM3c5caYR;$cIR7h*GIG>2*;U&I~Wv7WM
z2e{y?nunjUF8ILsKm$mFMRpThUK8ieWrbkrMF~6sKIi)4E_c<*)f19j?bTHrL0{vs
z1wZ|4q4;_%2hK0^721|=4+GQi`c^lzBOE;hTvV0f#eow^8-l|F{3ggfZ?9{HhWgU4
z{I*5&b`P?TJN!j>%Wv;rv%6c<0v;X-^i)G$3!OD84rZ@ODFWo+BxGU=XJO{nlh?9M
zOTXQ$AhYoVbF;li_dqN15vy5Z0=a~a4uah1wegV!M;yfLI<941A|7TaMAc7ta2Z`D
z&A2uQG0wG@zi$~m46d{c4%Nt5wk6nfBcv8{E$Znux>?YCx0IHKPoYpkS^T}tCLXjp
zpF|;lRXG<MTacP(#Z6pwR)s66E}J(Cm@V~)dCafY(z`}V4LdRl%<ZQXyW>=KJ+i3g
zi#Ph%M0AtXk*RK&%EF;8ctv7-(EF8Np2qdI#MWEmuj&kT1MoKB1U>l`)%pxqX+plb
zj~&w@TJmaS9`!0$4iYU1tU9IOOyllD&=)}nFT@ybg??Iwt;MC4Zr=a4g$ev>{1BtF
zpQ2tMT!Tln;yuc}L48(AxmUEkf4;?M$(g)xb-{_`_&QdOUzdB61=Qr$cc7h!KTkK=
zReDnH7bI^saEV*6^06n(Zc2mI_R-^o#o0?YaiL#6^n+i)YBI=JTPDkl_aD8k%Oqx2
zr`crV>Xt@9brXm7S)WcF$j&ZCCZgKZDIOE15jC<~Os&I`H8M!q$9HRQ%Cgdz^Cp+A
z8qAj*d^))$4OF#};~%YwFW<$_Rpq815n5KZ3<0QXJre=7TEC3#9h8G)5wp94+S|KQ
zhs$2)g{3Od4J^BxRrN~#0!ot48Dal8Vk19jnDQf*U%5zqeP24d&MG>oq*slFX)-xY
zN+vfDUog|$A5fdXj(Uk@c{!e>pg>AYiq}i@Zj5l8=pOM-cQ=HJILhf0`lzbkN(BfZ
zmBf!I$=#>3S~ELh*yVHue_G*y1Tih)7J&hH9rUCcRgc2#QpsD<1Ht9iHky>5-7tO9
zXc@IJ)9y8LJ0>4g<?|qVeLXtQk64vlkGJ>1rQXS;9R*uK9w#wj@D~1J^I|%+{hP|g
zLsQ1e9=njAjePKI0wn6nSR$yzT78(=cEU>AaMg&h4Cagps=iC&VeBfj<-rtI`}+SC
zIr47))TNHxfh$1!W+-HJ?BNUN_OyK-JP>@UWtX&z^^jlJB9`Fjf<aI}`ufGFGWGbc
z|EErkwx?}dJOJ?Ws9TygXbbCKK4@vf7#7x^el;tzqY19ErT@I~6E0~=^CLt4Tv4^)
z?{mKL(|<q79KmDuoPGmGo)HL7zHQTQ#K`gjs4h-t4|K=6Qrg0y#JvCt^La1&LO~b$
z7Xw{K0^av5Ta4S2-9aZ`c*mD+Drv&bpR{5fDjiqugdfthrFQ|>#$NLuM7x>4%0Ug^
zx!{nUy-7N$*ibICs9sHI=ho!kF_1-=(Wn1>>>1Y4%@11qD+DDg*<`z2Hgu-Cd#Yv$
zTyIFWsk{5~_(R<X^B_J=WF`EdL9FtKK~kEO*~Loa3T}{3MieQ_v*D|mFR67uh0(}#
zzK~CB%TRWw6KkjXLibEpj?OLCuK0tJ*JYiQDTV`u=CO9En@m2jWv&vw%3Vm6*Y#Kj
zvNy_+|72B1ks3EGS%d;-G2v&vksxw}t$ekju%WoIySt^l)|KBd_<F_VjHS|<WL!W1
znLIJnp=!gQV28ppP@o1KjVdJq)pGeJ<+n=yhb|RO5aAH4&8a?;*{tavnp@$WQQRF{
z=!$r?TYjzi0!JaDp%RyEqcbk-9N;F4k^Qm<MtaN$Y(9}8@{L<`!j9{;Vpnu_yD+;x
zW(#CUg%G?S>N&ehswa}KA|6rlgGoM3;5(nK^k^I>-EcC`?P_?KDhtYB`{^!wqBCp|
zwrIM{&dfv$<u*|?UN(};Z71{1fHd0PT{!y7jQT}FbL<NHvYcaBxQAcg5!e(0XZqn~
zMjJSfY%c4e=~(^(s>u6){EJ5Ji@0smUpCnRTbEYh2Zi}=En#T*)8xty$g)c^t~d)9
zcF+vDyOZe@&X`wkd?n|xkbG<v^Ik25ZX<-3^oZ`61nz9+E2RW}{z!xlT`{_8`^Ou(
z4c2&^4~4^_Rs$_<Z7umh#jq-h5-tf>2aBVqstHCix8N|1{Ww7zU<h88#-=fyrpKhg
z!M>Au?c}-VOHb_SJ)n*rFAi!Lt2@6~I$KKzXcg39xC*|SZ1Wm?HOMBK-i_7W2?|Qf
ztMFVkwWwx5>d)kO3?f@_cPD%=r*anW4#E~ZI(2=py2rB0!W8=MV%~&9!}@x`y?n7W
zjvx~S6exjGGZn^60f$W^lj3QmusHEad@EjMb&-IJ@M!`eVv`AQgmqAkPDbT123#=*
z{azXq%~1M&uvD7TfoM&r+*0U6_nTN&a)_Ed{lC`8lN3`FnwXjnM3}p84e))#Y2L}d
zR7l!k2YGxW{f_hH!#v<VM9jrX>uy%Cm5wi$Ku}Jk7grycFx7y?sg9iUp1+bn>nuCn
z?kzsshMLxKYS<YK+cdeLHZCU9mE5E%3T6e8P$)bpMoA$-Au#m|i=cv{(ijyEjEz?x
zm$Eepf;l2`5h%4$a^#Edx3T3<yx@&}kO7yTL+{%+oVb}g=0*>nW~>UXVOarA+)R{U
zw<$7qQH>dg4scME@l(priU-4_vakaFnO<`>qpNxse1>NNuQt$NtN9pW+xR!(9wb=B
zMFa8o()&e2*H?L7d8*dx17Me-z~Qq_mER(KASBQk4234>hZXby=Yj~py&j-Zu>-Pb
zhqRofHbLB^@h<<l=(0vgUb#{iVj46fLu~jG_AE^@jG*$ysSc{ra)a)QI%fJ*OV+ga
z2XL(})oZ?CJ%E5D(PNWsw+lORcj*@rW`eqMM)_Agr<m3!=@r|B#~KPjW{sb#pFgwm
zyGmn#km%vQ5e(~W=j>)-6N_fEQY#i2D8@q!2N#|2;bMO&iv3RsuyVvQ_ZHgXaPMZo
zX4IjM)Foi41w;=;A|zDD@Hat3U80y?P(HRFiHD9+D5CK)bc`|*lKmPuDFp>bz;7H4
zxrUoV)2sB}t^q!I%1_?=><}-tx`tpz<JCbAwr()bx~K}zSSFn*5!sA0FGVISgRS9g
zjWo>WAEzoVOp$9M+!-o48DGtW7v1t`fjVmPmt&(xfYccN)W&$}2gzg!Y0!#FeBuYR
z-L+nL{fcTYMjTnxRzlO;7|kF-Qqr#=g<PjZ?*XL2+$ah-P^}vu&C$=kpzu*juiNuc
zf&g&hj=t(IRRI*J8&6}a14Iy8487(h0n5>5wp{uqKh2?Q>g##M-3H>F!FTVA;y*uM
zoBae}rPuTssyrJEcm-G3-;KYKnznu^zLyd`11SZA%BGS{Ua<V~zS5jIyq^)J^nq(L
zR!zUChL#gH*A&S(x?=C=%<L|9meMg)it3u{{dlcNaEI0*tVSce@DgWx(I`RsPvBZm
z1~0IZU%BZxr{2;ulm($9xbZ8=`|-V<@vtYnF$jXrmqpZ`BNOu!L^|<KjQidJ^6+0-
z1q;)|k?f>=xXReV$o15ny;)c=`?4Csk=mhNvFmc0J=E10HYnTS%d0Dc@5bG_?)nm6
zm(?f!5D$+I#S{H`AcnO(AK!@w5dZ_WVqm^{&?l9wz%&&lrNtnyAoa8!7g!tF!>a5?
zv%!zY(#>YAw}$<2?WgmIl8D?ATSC{{_tIen>fwV0)__S%c6?q9G&WDj8DVa%&aPdQ
z4zsOCNq~0J?qwpqwaY1t_K|T_iuWeC0)`(9Qktv+lLTduhI?Ox5=Ql-1jW8Ea9b4C
zX1VnG@_-gd2!I0{VDh2OyFOJNQbrgr7`WGt7-zC*aB6R4<bl&y&vuXHixZuPD$PNv
zeWiKv(mUY@nDXtIS6$$eeQuc4g<4SvnvW8_x<(jEuLoS)k(8Jl7|W5u`E!6+gi=}*
zhqzqwnv?*TtR@rs*qS_WCUsnjp61Il+A%(UAzSglrT3OfOp?x%EaI6K9PpuBt;JzU
zO1pJ4qBlbnzdn@qqaV$v1D~*Zk<ok9gC{|@;6o`HZ#!C5jwE2+@3n`SfcusfxdAws
zNdoA}>D4(1JPO4zCpTeMr6w<~8}#j)od*0EhFum~+3O2#TzC`pc5z@ewh|;7AZq?D
zw|Jt;FmYO7;B|xs3jmff!F{mrg!JAeGH!EA2s3nkU|*lW-tQ*ZNINXVLF8aFI1Q$N
zjEyT`)5bjpw}hLRFeS-3Az`~;aF32Qjl_p{2ucVkfpSc0CA%?q3H~3uqXJ`ln2pw8
zVlor{`wO#Jj(z{1arT;Aj2wLU8s{FLiHR7}#eQn{gNCu!c-}Gmx~<O~q-!9&c?6`A
z1X+v{T>76>)_+=^FIGT+A6{@D<<^AV;}nZ)Hg$F<WbCG3V9rB%LgZ_8k<*nm%X;XB
znm{u6b_xbxiRd}1+SK=Sx~ttBJ^EYINsp%UDh|iqD)?rj+BEcGK&9R=6=+0K$R?&G
zycfe^3PZ-4upt5g0)z<ZLZ_-Y*(a=ceYz}Ju5zaOnpVA<{+2SfJ(}Th0_#Nma0J7t
z^`1`TG_{2+vvHW(LVhuL<v!UbBTBQE(c|@xdm-V=S+HLX-~QxjJSn4u{Kmz;Y-bT)
zoVxEuhkg0TZKe`cco{?3hHco^XQ{<S0YY|05;0$$o$$rIbU;Hiyti;IuRVq$vY8^%
zTCOtG)^l^VB+t8kb@-H}?!;i$*EddR*>Oz^%!TMIbh7!TOdqDiHXUo0RN=_X3<iy-
z?C0sG(8*=yojCv8sm^B&dO@f$Mbpgvfq<{gX~Z7w*q1|OwOwgGN<cUJV#~?Ra1rf{
zPt5&odQ~W1dmpuD-n6Kb=n?9!-i)(uNb=DA;h~|xob}V=ZfR}3R030x$oe8ap#fAk
zjiN|(g7s&C@`)E$a%&VmkHU!UpZRQdgYL+YEpD2(&H&R0t&*xBMiSq+mauzC9&DvM
zfOfQy);(}E0-6xwF*lw=Y#%w4ObCe*PjNGrh>OWkS13Sk!f&W-Vvd4+*4oWI@$Ea}
z@xb7P%M24`Gad_?3Cftrb!I3!`Gl)D&<8eeX*OLX=XsxDJRC%MadhqPc2aSoPMAPz
zj+z+m>UZ9H$1B1m4vPcRdI*dx)I_|rf-IRO+e+npHcn?lF?)F+#I&jh1Btcas|K9l
z-q|%{8H2FDM!Cyd=X({b5_TDZwRSxCEo&B<xD9=n%Ksj=k;y^_I-DPq??jZ2IMPeV
z$sZox<CYUB0NvxZPXOx?O`RRZcFw4+A1Ac%eQsrAEFf)klGfaMOOCY_b~t3<+6950
zN2@ZUMDr^(1T`tWY|)@lRhF_^rLxewg+2#E_JX1kbRXyi;RHCKYHmrtgBLZ(3caRs
z`De#2YbW}rZq-|3nuxs>6Va_EV=}wXbJt9h-n)Jp2PuYzQU^7fMf6eIvh0zkV?IKc
zozie~B+3Z<+dPL^J)-UDbS8M5VQ83eC63%EUKVEq5Y(<auFf?^QHvx<l4n1oMa5qw
zCNo9CYnh&4P(d&-t2tN<cX<X?jS;3!d{rambZ}d{*p~lqkcAV(F)2}ak4mimb>Z8I
zj+Uep{MSSx#P^`X80x&WQNH|Zlf`#RdTNL5qLgQtoeLz$51PwdnY*&#WI?W-0EfUO
z9Fb)lI?_N)sUIKz=wGb-{dwkiH}!Tg!gF6&EL_g6_mg&tvoia>^_^_am{M1OV<Pv@
zNPFl7ZSS!62J$f!eMp_so)JP;7hF;ED)+Z>-E*L(`;~3~HGDB|o)RDXa)Dw=U-C}E
zI%!WX#EN$|gcD_z?$NJr|MK|RZ?3FKmx9t23GX%;qETz*zB(CHmhJSH1+pYV=6_{s
zBae(CY}6}(M`HbK$9BgtLX{X+41BV=@d?%;==#BfJk=DpMd}JiXh&}Tbj<IaYWCj%
z!pgA8$qmNST(VU)Ih)u7Rql_)8ngOjvK)YL!h6~>!a-i{L0_DI$C@O(r+&TaK^2Rx
zOc)e%H2*<+qp%%izS&yRUpv3!K;gNI!rh+So*hpu?mwfm6>DW)lf_zuHbC%^`O8XH
zr;bl)KJc)T*9PspGtrdUxgeHwip@NkPZhB#BjXBFh1tURNlfe?PRdf!cgy*nH*{R8
z@jA~krrGxUSf7K*92?;*wu+v2fP8`7d=w-Cl=GKkg;Roh-+VrXwxP25+CSf4gXDpw
z`(Q>+M`U<~k7H!TK*gUj4TMS*3W;MH>P^T#!P-B?jjxxF`?0Ztm79NH@r{BGC_j*1
z>rN8PGKx7Kw#Y)}Lpj86ZDG*0NtI6R^t+#3REo-LQ_uAsY-Y>1SOw6Qn!!Ib<}32b
zCgz?zel$JQZHVXd1*H9(cUoBf;3D7n`geEVTWmGm{_UscgYmHpZ;*{s>Lj?22P#~k
z?I2u_hWMzjX}M!9CLaw7p+FNFJX<alQ7z?LpSaGJN@b_I7P;AL`q^qUJ5<CPY(Il)
zc%(zLOQ)>eIUv_C6~Q7HeM-ws7J%Mtu6vDUhFGz8gkmPwmMgy{X=2NqBG+K8%)wA^
z#+b=E&cLOf9p{~HXqzzBzH;8vpJOGZNKxyxuQGwb46FqC60z`$eQ0H-2;M2==Z_X^
zV~X`odgTR4{?%rxYXQ>IrXf3@35P?WUtN4Nn5*R?p}DCGW-={J%J5ER^hyH%n?nz|
z=<K`gPNy}kLs0SW(Gu*Q^4~j(c2g#t6#M}we~6t^mh|(7=?i?dpYDE=3x}2M(yc9g
zITw(ITJXvb?*W0U2h!Mf^^W$q$GgyUZ|T*DAVm0r`_Y}9yT`jhyQJjpj~*SZp?^sH
zb=G=3@n2`<y^I}_)w8XfnH@U3rcHlsSN|8X-bv=y1;~~Q$A5b?d;bF(brp4EVP7%*
zQ6c19Hk3jWhyOC!;f!GHytA>Sz&5&2X7xnZgm<~FQfp{c(sXR4*W=pNxA+wYikrRO
z`y!f8l4Ml5*Zaf$OY2Dhl$4<J-#@XEm@Z`S{GsTteM;HoBBHUVN2ggUrE}+TGjmo+
zG$}-~S117BqxL$&38l04uQKOSKXwFe)gn#O!<U?kO{a!%Sn7uz7FfFDdoKOUbRYmV
zK9c*)APl%SpQW?}Y`e(otER{8X4#m03)Sa)G_X&^g~#Ds%dAvUX7m5Cc!k3yjp9+w
zR~wM*K^<M7b+(Ovhcbb=ltszaW~u-`-xDjuk*SOG(l8LS!gjiuE4O(ZlFi&IR|Llh
zKq8cVe$b<;p7Kpv!jh0D+;D^4oN?Wv^@~4zFIPB4G_eZhP~k*+Bd5}C{dj_c8u%e1
zX$eVxMtRs>Nx9XTwCa9dh|Ert7ZAvj#Spb&A~y1|L={v}E8*LLVijr-fF1U9V?L3{
zuOttj>S6zOTc-0{89*xYB`s@<s9I+y$uhLb)4%k~QwXI#S;%DI^XJG|#_B*7_-zB=
zH;Q;70r}oO+xs<K9ILxEh%2_l_j@1{0d4@bKsny{(qF*ZK?G;&;E|QuvA{}$c3Wk1
zx3|n?ffqUxy8-UbeyOJ`2Oyc+B7w<L!cbg2^B9b9MgmWhf1WxJSTvT879Reb(8tFf
z%v{t1)93gs%`zU(INPy=gi;mrBScJ#XX4`x`K`g3kO8pW){Z38N@o_Pr+`V=J!o<E
z%30PD%GT<HD;sk5*w<T+q*wxS8|KHmJd50kJ!nE_xTYDkJ@h1fg>fDo2&siv_*XWy
zlT?*ypw^7)yun8r7w1#oTpv6}0IL0O#b~&p3ayVQN=e5p=ZVEY_DsHdw8aBZy8kyf
z>vF1DAGQ%C399bOkWR+s<;MyuS?GGRco#kV=Q~=lQ8d=H?y3K|Ti5xGG)ry1j4{x?
zp#bGKuW#c45xN`%Ri3d}E8$avj>{}EGJ?rZLjW1F6}6g&oA+Lvt6~ZNu3(#L*!ONS
zB)@h_Q7OXc1{br?T*F!CMR05=4c-m60J}m&eW>!ejANp+ns9=-r@bARf?a1!hEM(7
z*2wsXM?Ur50G|Zj74hidb?FyOC_d(75U~9)h5ZYV^gK1D^(Xa=_FemRZPa<^J#L|#
znB5h9fq-t0CQ-RwgRlhE{G6h}x7@^joXaz<W(d2=*`H4jypL7^V)qO<I5eU7Mtu?8
zawcFA?d5ueL?LLS$Iv_?w2mJSk_Xi33t^>62QS_*>YpNrUV2d<ek(qkTF&clgPCKC
zWEuArgio;MjCtYJUtb)Zh^T6(X{qr@w)8*;VpUdqL^0gb*4EHRqn`~;%m0SM`Q3fv
z1aqZrpeW2&?@jSBLWVcXUjB3>upW&>IFAQPUnRWoP#-*U^|Dy8C@B&1RM>A?(9#%%
z`bsOeI`f%RZ`+iiGR1NhaW~F`b6+y-c;{wDbpa`YVhTeNfVXWx;YIDQiT2|b?q3d+
z=9qiaA|o)J6-woQPN|*NZmCu(J;uN>CO`I=s^|J6J<Sr=jPqC<uBlD>0CT5E)xzvc
zct}qHJ(&e@nq{d9g}E7xi*<e`j#H<#&J8bg-qIOJ(dlMnPEz4llu&iYo?~^EsvXX|
z`^{EwPZT3wSSp7n{Ne75IlfQm#FZTyS8oftvNzOw8RsOG3DAM9u)$W*R*AG#^na{S
z>dQVkNs<xV%niQoZW#2786^TO;aB*lW3b9x;hH4K20M=Uy-(Ai?_DeHA}vB;QuQ#t
z_c9a`g^ur?az5qPFCSDKIg)6FL|l{b-`eYBVc)(ZjOL4(Q6K$rW#llYMNmjfpr5|r
zr(66WEqES3CIr?<k^S;Wb844MaL?E;cvnbauD|_g9~h5%b0juIpFASv)8{q<+O-R}
zL(AKE@_nZl;Xjjkt{uO(h_Ibi7fOPQcL6{y%y?@?Zw-r#Lm0#$sFC<ag50)EC7jh-
z<D2lR-Qfl&fnoWVg}Umk^W?^ffpz9-q1E1Fg?S1rIXxjZSz&d~U4Srra{&0*(Ij3<
z1uLkG6XyXP()%n(R&>@`kd`~w+bv@|mYLKjoB6m$tF#nj{t=e>a@we>QaYmLEw2}B
z(=<|0A6MiU)h4D*M}9)hNX;rbaB@oA?-7{#2O^1V9k*$U!KlcbUPG!>c=i!sK$8Ec
zJQhb*so9B{{aRQQo3?8puZftOQU{2Wq-rE8M&fBp8__ZLd@B*EF5T@a#Xu87U@<|E
zGbwB{nT!{$yqp*2Rv1%p7+qx|0rui6Hw{N>H`)NPZ;tk(tq*8_o{_O1acn~zlxCly
zWAs*jml)OSWJ@!L<SY};EWF<c{~f=;A#Yr~VZAZT%vytIDNUE%2CL0&`WMrUXx$YT
zsL2$C?%Vwn?R4zSs8g2Hysk>|<hqPHVeqT6HgG};0%Jw=s9YNBcmS>u$R+F&kp}><
z3elC;4$RR^#P~<Zr}I%l$fTXzVIg`?|3cp_nt@ix(<Q@Zm4Wg9CEVXgCGr541^j}&
zlmw%I`$5ALCz;oDRg%=BEeyNtW()7TbGHa7@uME~VBs93Yml}*C#+Cq%NO2RmmaHa
z=?S-+R^Rqz=eL8Ss{HrvMkv5-@LdyzZfKXvGmDn__A$*9<2NCXzGv``u|0vxqadQe
z7TPPfk~zY9IjB6iP@J`6GYiR$bt(Zc3hgZnWq@9&6l>9pX1L)^@g$S2&P(8SrnV+Y
zYZ$Hf8KS9)0YwR`1Hs!lmpkRE)^P2Pi1k$UpBven&K4QuF~b(A-@?EziE2~H(`pmU
zU5hLKu;OH*Eiy#69Fp@CYN$`H<`@8HT_EgOB87()^_>I3*t<-Pwrt%X@7uJP;(Ao>
z6S_vQ6#z2Tq*i~Q<j-fq>!prWD%tKdbxGdobNo?xfx_W)?;;>_0E)_$XIcx7#Exc+
zy5ehq=jXosV*rtKMpq286iAm;LCWA9qpK$yZ31R35g)#c0PQ7Z^;KZ8<eoI~Lqr`&
zm86FQg5>&YRV#z`zdL@L?8Gkh6}ZGM%hCRd&PU~0`y2<=i&E<=<)3kIBXrhlhXTmy
z=<b7+%GCi{5`rxEe<{%WaUs}_qAJ4pEWT<vG&=v~Wjh;6tK@DCpUhPcrk?gOUC1;_
zH$0_V&B4|Bv}>k|MbVW6&37hn`qqZCR3?~>AbtvTp6fRhgBhYJ#(Ftbphk_-nO)<)
z=Q+tD>i(ywt>legzx}AqT>ll+mz;%qxu@5k>Vmsp=}b4Hcf={fixyG*IIpDy?ddbY
zQbun;QxAT4>rtjQ{hVh<Z;0yp*AbehN^eh1bK9CdSt4L&r=K?N!F8??6_pU4qu15s
z?v#dvB(B){)SN*fOj~k6fe1<v=pY&<6cqRvrdlF(Rk`>@8j{W+ZhC#U$IiECQZnqa
zcI9rVsJ+lv7UFd&CxLVH`6k|AfqjyQZ5GJzfS<}$dtCtwFZ9q$z^RzDh}=Qz{YKJT
z(sm|`%u7xdSF&+sf?{j^y23*{xrt45V&-`@9#0_UJw;f6FD}JK0(kWORBwNF0=0#d
z;E2Gp=v3}qkN$MeQM|PyY1%*?4=bOUYk11$QKv!1-}WaU5EjYqeag$AMXx-~OcHMm
z8b^&1EEbOpS{+)}lqQEM8I1uUfZ?vNcqk-x=kn9hWXT~a2~F3TgbB1&CCK?le@NSv
zO6Ah7n3RQ1(XpvNCQniR+_uLF+p_Ns2c=D!?xe7M$C0@l83wIKp29|M)7lv`946X3
z;_c3huvKI%jlx<|T2W0`d<)xEI<o%Jba=z~^ZOuqT19myGn=M6J<-1S_2!Z-0YT{(
zDrA8~9&_0oHoJ+0J+|gt<ttVCnNZ4*K>Gas|DV;t$`z`$sE@63u28E|KL|LahGCZ@
zv&PCyoMT%vZNt16Yj^9TO|sSmkp2eiNnc<n3hwW&_RPs@()zhhjGPzk`7rA8*H`h4
za(khLO~U4&&lP86X>uk96A6p(_{++BELy`$vQ|9!^Y!SFg8g>KgyS6g+Hs5ID=HTd
zZc{z_Ttfo67P;9>0Skek0|VHDPAKevE`aqR1yg!3>dUTiGaI8FY5H?#%L;|LLJ5t`
zy5TahN@~(k-N}gRoT)MGRl0|0^t^3bzB1v~5X7{=wPm#Xv^=NoH;9b#QM=1)*7i7%
zQq)DX;AR}%vi0u;rzd4?MxWb5qrnN)35dkmE#lBdK}tJAp&GM5l`t$w@up=ODDZ%&
zn;;`PM-!BW08UhAMoc}hM=g^QMad@?WJD0O<SlP<v02mV%n|KaMu-x`pNUut1yqF?
zQZ!N#U!PmMkRr3uS`%^7QB@*}k#>n6&&)hu2kx6BB<_iNWZ*caun!}qt@GfK&!`u+
zRM>7!&X?C~#T71Ai8_DR>#W`oC=&&4SwE7??Mlm#p8`_K4V_{fh>JV-PIZjj<Tj)M
zXHgmuJyg)@9M7A*Rvp!$nm%eJZktfPeW;IrUyyT2yp3y#)8;zgK5jf#A!ea%kA`DR
z*T)U>fevs>dAGr~xt_CdHwq6#(#X;4eYU@>F=fzGX|;kfK-t65)br9x=cs86pN?%m
zXs%9z^hQFQ9C?!ruYf3x%`0_6N)DuHtVkA=m(yExJSWF9(FmZ6>eiCveajI0W;Yp&
zFM=DPtrrVtpwRnM3pHW&DJt>?N#16wMYPh^H<QSY<OZ|OHHg2pit{yQ^3pZ5Sf<<(
zNzKYhY})H(lWJk(C}^Q6l$_CPnkc$b#_U*uLt<v#_79=Tl{Fq(2Sh(3gPK7XZdd;B
zz!WW9?r1?R+;Ht{Y8JGos@7Rsfw}DVg5i|B1eb(flz*9<n5WA^0}wMWxdm0IlZxLz
z+)JqpC6sIlxPkj}pVy01?-WQ%4<Xv}Il@c|ut0%4Wu79bgfeF0he9m=dL#L<o}=Wh
z|A(ny@h%MFKel!Cj~rlOB}zyjT;|O180(E50g&i$N}e<D_VV}kTTk%6Jkq7NU;Z(J
zStrzmAXCF7gU!%Tg9hV6sn<cn57jvWcV4aTw37pFo76kT^-1Op@vFW#_)^j;7{d)l
zcnIvHgK+1~`ajJXuzzC>VDILm@62qA#ahj0uZq;x;><>!ByHl`DPS@Nk4069f!4*;
zOTD&)%{q!uUu`mFFsx#lhIcw(c!_q4)?hx+I*BDkUAdXS<fAt7hHt2GF=vL&yXayW
zjH>{8g;t=IJeIU^ycwv>w&t?1tTH+2nm32eR-$ChabjHa%*5i175A=0UsrvyaK&=Y
z%{7vxhoeyd(%5pp=X39zf=2Y>NF;i&4K3Ij_pIbf=+Mjz8~1$KHrjH&Cq@6BLW#F>
zVh+^|??|Omrw%Z=`O7i5XN=`aY>;wu$)t6Mpca2-&9a;)9$!`p)V{bQ%>o~b5|yy9
zdeO*4>5D}6I{G_=3Ob>m2)Z|+O>Q^0xbEW%Q;{Ne^`dA8y{*dGI_~D=V2TGR;JIfG
zs|Kj`@gQj$T!_~<<M+%>=5!b9F>%K+8#iP#GStmwNDU?~J2z-Xs}-GS1P-Tlw1}Z^
zE=|A?HWt~qVjKoahFOD#1a^kFUoxWQqECQWM_bY+raD!<lzxFdoWOa1qefWW7S*kT
zVP94Tkr;#nSvkgw#RHkxiC2LPgQ7y%l@OE69dq9@2kK0wBrR<l8$7_aIVwV99*a&@
z{O4Q4)UZW+KrGDeZ)09&TlY#Yy_08!NVkSV*0fQ1hzo*Ks;mpHupbk5g#Az^4V-x}
zeqNdB`)@kIGv8_J0btU!8heip+JmEod}gaXkSk7%LrB$yB6f<>#A0bTMb&P_1|R(p
z<8a77+7pIA;)Bg8^wP4meTz1Gi>3}w7D}DkCiObwFf+03Jof0ena8RynTizJR|zZ7
zD48=~))b?tKvgj4zE#9)Oqp-gP}tVmiybiaOoT%twtTjRnj%Ue->9103>qV$Hf1eD
zPE)Y00u-h@Sg>~II=6mep~>N|V~?tI2HupDGzG=1K|MTR!K)4~X|!BOT9%iH`Nsr=
zB=j{m%W89$g&TmJd1+ahNOrFH=j$!&ul|I-)`(z|(kF68(hkju-v;`Db2X#I)h?D@
zL~%?*_=Q5sTk&8GF=nv%%0<pSthGVWNHCN}g|&b|X`HdY8<^A$UZ=y*fo|FjQ>mKT
z5t1$>k5_ep#aES~K(2+poGE6qh5f0a0W*K5ry-_nti&M<rp3Lac@t)7C7Sa_r}uc&
zkc^g6?Qz{gz0OFGKi`@P5ND-V3vxuA%$x-`qNEet;GnEQ5(dwDiF)ta3311$p9ajX
zs?_ZrO|Nk)A{s~eRATRwTy!8)C}f8cy<?@TQ9>dRABc$p`&ZzI#4jKJJ-$CX4|a|*
zcf7*lot){qyi|yZrt>&j77HRboU7Tmv`u6fTCD$pGL!6<4f&>%c}~pKUn_@=YKYYJ
zn`o#l0wGNXlu!d~lNca_bs;SVOVLiWN0G-21_i+m;4nrpinO75Y60wdfU4v=>gkF5
zRuDhFm2BJWZrd?ZMtQ!jkCa>6;)#)qz@PHL+FD2B%La}&NK*VXJ+Vrdl0t}}Kt`ZF
zsM)l=LVMHd5qsGAh)~y#sM5zA{9nF2tSIV&Dk;+pht?yr<$B+&CT5x1y%qc^UGibp
z(zErodv3SkaD^wwxk}N9=)^Gb_*24To_e|*%3-ti@PO*tb#7V@sA@Y8U`0rlA0d=v
zO#9<dU|(<89ynC0q(}mV0tdEYJC8*A?@721w)2ll4s?Uz!xwE)r#tNH-En62WRg~u
zF{35UV?-QA6&%MvEjY@0R*tkTNF?)~g<8!CA2_l-S;xr1RHxuzDSE@ipaGKF!fwtm
z`Q2PuNxYFF-vNs#=sgsQkO@?U%2qbyf%{G|PgJ=co?>ZWckk7Zyg~z8UK_v+$q}7E
zO{qT06TY31#s#b5qS0yVqDy{A)3%4RbR?aWct|wcglJUA!uCA?g|OB$QU^fxpkuMs
ziU0?O(PG4K8Yl5Qp3}Rgm{q`GwstS?L|ufTbII61CX;#?GG&<gV^xmFFgPT*V^gaV
z_W<6AE2kKyVZYbS(GVqYoeRSTSn36Yccf&EXvW`tYMO12+N`$1Mt#$$B6N>o(j!z5
z|9KJ~{|bi+;R18gfb_RU9o-}HshCrn$Pzyj9XU2MpmS~P12I%&<rF>wRB$<fucVoG
z&Q$s)KV2*6vz)2v6%<q;^!QYOttglg6Dv<dqmRg#m%*1vDJpwxtUmd9Cw~FUJYJ&a
zo7&V4#Y1iHp}_4x6I}0!xq)4|LU|U3<zQj&_N_*4M2gtq;kq;=4hmKlCHghq8G1?H
zl)22~%0#y79MPxrVVw0mfv*D5H%7^<h^xe6>lvrzoDAE_u`o{SitWMN2+8xd&V?d~
z4+Y^=d2thnf<O?JR}WyZbaS*_nvx7gQUt3|>q+98Ic+nu<+vGS^L6amm@+?Snb?-m
zjOVc%M~GUAhLv2z14p#`5FV{nK|L4Y;6yOt4&n3NZdsC<xEY;v;1c(kZJ6qu0>n9n
zLr7!4p=D;oKNKf-tcpqv@`dEdY{e+l`UEK~DefrZK~`GE1y$o@(Qyy>(+xT4BQLNs
z_dUe;_Bri}!!2Ac8Tnh=2iw^-*lM#f*E3Q3j6;s6nd<80Md}>-@`hf~7@3ZWIGz!l
za;)4jq(+bO<i&Ns70PJLn|85fVbp^*`H8j(JO1CA+Fvo3!zwGo=<APOBPIod{Q_)H
ztGZZQv$upp?}x44kwQK*n0r}?3I`-<GG*8ft8$np<Jp8PAv}(EmL3A&c?@!iNug&C
z0%{Wjm1aEZ<4I%L=rJXJ70k7xfr#y^(gev>fZ_!hMC-KXY8|37Y1lFZO06!j@K^+&
z8P-4sjk&gHo8mM2rRsW_tVm!TwnbD~y(XeZB}c8dQIScNSX9zv1mjR?AtfwiH|vTV
zdy{2{lHf`tdv4jHWue3utT1`ZFei;qCBI#e(@wes)xooWuke*j%epR7&cR!0>HgN}
zS81X^i-G{(SVwL_k|hRT(W592IB8K0V6d<|i%fP7eVpOuEpXaZG}vIU1(aRB%l$be
z+=Xqy3bsS*77oe`TYzn`7`_F%Ep164Ixoi1I%4EO!{sOxooKZ0W=X#V0iwvrq^J;P
zc^cg2%-yYIk#)|rDWa?Mjx9ppp>Zd=EO*>Dq8zPYB+P`MsgecLiXt!vYk%|aP&a{r
z#K<aTYmKk1w>bG_K*GMCiEcC8ptr4sH&Dvk;>c3Pc9#guW(WF;0*=TxO8IfF$fKod
zZCGpz26thX@~;k_50>4qp<~BLZX(my5kEAuT&Y$yB*o0hS-0(u$di$^(3TyWh>0L&
zc0k@qKve!g0GK03<daH!a{|hMv5l|@EkT~vh3lE<{{59~C~$k<S}?vhmm48Ho#}a3
z!L)>IO!%d!{gFcky)A8wW%{{*XtA9+p`KRSgvAoYB5fXkUD)y1b{<}ks3nM)Jc!~u
zAd}~6GosB`yg(%q?n~z|fOZ8ylrp;#o4fW34t&QqRpqYNU2R3c)Pa?!7+$*FxC{U!
zdq*PSJ^fG5=qs_OA73k!J3$ISduXw}T%cPU0hbP~u!CMj8~??ZHz`+9=3lWAUvB_J
zLq+Vg6MWzJap*Dq06sW*BNspw<{FMJ7;WWZX5!{o7C)~|ep&Mm#Mj^PT?1ezhS;Ss
zHF(<5huYd^8AA)4r$b^3Ige3M1yql7&<LX$^#~;mKAstQWzc7^9l$$p7%j}wDmrmF
z*<cfbl4L{M_4oyj^ZWA4Bvvh)DHU#6E1ug_Vc_fi@wV|fy-g<J-d9K6WH!!sLO4x-
zbxi!6@=FtQbhw@4loK_9_OPynSE6W8#4xEEE*vuJ1TzBmuGgf+_bUdS+on5G+bRXx
z!o-w$s?A1`hRMnqq?*Ob4#l~ddz@$Yo}oqP6)<jybZeWylJJF<OBSnnW|<y8$Ay|g
zg1?VSQk_Q`Aybat3dc1@?1xd~kO^psI^P=6fcz_!TiKZBq4|(<sotGd3Ix`UeL5&`
z$JtKs?O|gq#zHc|c6*vS86#S2V*Ero`;HiyXH8k^+kR3DN{5Mr4eg0hmqg7<S3Qpa
zT~wqhOJ$+UY_S<EIcuNgp7+T8G)Vj|vc-p%^6dS&o4WjH%NCv1B5sbup0W^>Kv8GV
zLRhuJ^JYw4m?1mWbX^8$qaPGVkf3%OC=k?cREu7<0-%(PQb}LsN1Kth44R!-2J5;o
zGpH`9)%-}=+B8$N*}@$_Vh4a8*oIfZPA?weeQ1CYEk5GrmR_b1m+nS@J4kW_#>9++
zfQ=fhzS;X2zz7!bGLGV?5^nP+9--^I(%yOa<n+3mpI!Gdiq|{dL8C`*C-u|aTiPAU
zy5UvJB~^HBrKBh{A;exSoYj2z-wR_E^UZt2^ET-8D)%Y(gEIM@BI#@SnH5i2)fSU-
z6mRpKToJD@ZENr~wwcOjrmC4VINO?Jb`|AViJ1)JaOgZkhr^+{Cx8O2xQiA~zMthN
z7}wVU1;z+}6H+Ax`{PMO00o*cR%Y-+ADqAk)IsBpt`h_}R~_bpiZh8#EZr+mg`V^>
z0TbQF5_xn1{8*QIb9>UxC%K$HI}&huG2_<kNk>ag`#w1Qwp+Js8|ITnR`N^OtTk=s
zWp4&9ozAewbSD%#j8F&nbGeyzHHG6y87>;vI{YF8#%XOI{4X#vh&h%f4y#V$Td<uO
zQ=rs8RwSq3dvg2!uiZ<%8>j_zI~=~zlQfhO;VGdWLlG#y1eLqB4-24Jg6Pg2V+7=k
z!a9>oyRz(9ntjeii*?wF5(3w{A(96=)2o6DI;M508#0TtVXwm(on}^Ay$xtzel5E_
z2+dS`jVJ}w{k+5*3nK(+T@KEtH*Ud{I9q`s$-{P1;BRpOb6RaPNymqB*9b9=9GlGU
z6y~(<l00eM^+S1}1r<nIe0O@R+uO%^zB99$KwO(B@3mi>5x{!S&h4SGkpKf*qMW+u
zvUz{TZ;kmGoE-o#qty#pRfbtU3B;j26q=vXjhx;|_*iZnBt@=ib`O`7!`tu%)scsh
z&pU-NtwB;0?NegH$0|H{x-L_RgPuHP&&!j#ku;=%)Mu5d*6@s!wt5;zTTc77<v`vT
zGW`kX;!l6^@T~hIbh+Q3sVh;=0h5jlZ*_#OvzF!Wb*W1F$CXTWSVu;OI-N2FjZ|>?
zz_!z$j7<#NM_*sz;ndao`yE$^@rmmuT-^!N{kVha^itATy2vyJmniM^l}ZeK+)bv!
zVKVF-n&LfySR$s2Ot~$!d0i%VAH<YgLCvoVza~q~?c^w4hb7EgudTOUl&|dkt#=-t
zOg*^v`|{n?`CZ>wZ<Fk!joq1&TIW8{KF#>m7aBW5HU_NQzvgbFVbzce^I5`aB_s&k
zg}N|7-uc@I7E(UQAez(Bc4;5(I4U{9Mf=nQQ+C-9Jg)gkOjr6rnl&6r;X0p8IeR?2
zu;^`D_O!KO*<FSkD(S@9RcVY``YhhIyGe|I3OQU{9%KY`H(GX57eE6U=BknLh!S}r
z@4Y@lS!;cQJ?LTC&ELAw?@VFJKjktb`&H8qpLX}14kk!qbi*+{S32_{cuU?MxSjRf
zzw@kva^RzX4JLmWKWuAHWWf4_fRgozh$O3Lnr=5snTBb%I_3Xbi1ub5yug<`lXt_%
z!8g#l{PY{G=34<y#;n(B-p90CbbCE9>|6z`=ZU{8o9OfTlX$~63<q03k2uaYW6cX;
z+9sUbq^p`Ne3+nyzcV=XL~mOF?+$;rTr8T%puGd2Y5v9uN4iHWu7`Q>OEz)^@211M
z<vmr)!_Iu^x#w&$%|%hh2m+uVn-9UeL!av>epR_&JW<@d7+`};yRmY^f~Zu}ggqE8
z-6j0ST2i$bqR*;Ow*VfGESo}$XSIvA!8dP4eMQyal+lZ->+A|q_xSSFDOh!h{0^&p
zoYP3IzBX~E=k-Fo1^l9@Yz>{}x|vK~x4yYGSq3#}{rKkAg!*ZY61C^`w>LtQOxAx%
zSe>m#{HHfJ(Z_H7gimv%8dA>lbc@PChK+mPFXknp9Ti%fM^~Z)Xz$Zd3uUPK!E|v|
z5pHqFnkOg4A!;s~U?oCu!w&OjF4Vg0)N!{Q(R?e|6kr-6w@TGO@g2&WG!>DtE9?Xx
zepIcx>EdB3fnqZFPDyX>B&+O{EXY83WxH*t0B)NuQz%se_unG$ejrBOw~cNgigq-j
z`NVyh<~I8Xh=!&MXv#~a7-vr7noeGU<(oRyYnHI}cV!)WbGbh@+IshBr+d8CWM7gO
zG~<FmkL`=Nach7zjZRmo87bd{L+`VSBE}S@Ijm|s-X#l}4N9b){~8=fQS&Zf!VvLM
zCt--dd%i%TWC(p{6Up#c%}l-4{eT#Etj&vtwaqgB7(*q{kWecDFqJ!yXCkQ<3!9N+
zh8~z^T95ujw0<EX){WY^pbzX3i{$&m=1F_Jh}{15!<TQ~y#33w_d-M8)7fYDZwz<l
zfR<9z=xEDnY_|qAj&pr|U$bq#VdNE3<R*zbcG!Ai*>Qy9z6TD%LAET3jR`}zBEw0E
zYT4^FT~YoFi9)%~^+ZIm&M!sv2%3(s=&F{NU!w&oI`km#{QIIs)D7Ja9m&HTP{{=l
zkby1(@~^wI*`_Ddn#W-n(HLl~FB;DNICut7xkBP%6|}4jHK{5RmS_bqc>G{b4z^z<
zDm)OSG*J91dbyRBrK#b&%yrWYKghHXa*1bDb(2-?`nH>u%E{=aA_I_InlAIxpr4xj
z@WIz-)MP%xKXtrz&ZfNvF7f^j9WS!!soYrs0z<c37Ky)16rd?C9t6}S@^Yrf-suu)
z>9h(D`*0N7u>}#GN}XGzsG|3!IxG^S!E?vjfU#Zq5`899`wP6tv%p8Boj*<f7ZJ#c
zWM4d?VThAJ5;>7{LA*o=iHN^PeuXsDf!fPY;ml?BQ>|kf8WDHt{~B~h7YIo*t>i%&
znSA5TPaX8}ScU5eGxxjC`K5fKW-nNWPK3aNpAYWcX90^Xj)iKA%Zn7>T}AzHAi+lt
zdtu834y*q(a=T|ImtVIO3*td^7%idu!qteKP2!wgIf5<FkMXdStW&xvde5Jqql`>v
z^gJ1`o;FdFnn&goO#)6PSy01JgMCoeVF=i0IRVvKH*6UJx}24+o(0GAgzQ7SxwgVV
zpQ3;wl6kV<+<@|foBA<h*W-Za_7LK^TUF7UO*%X^8!yAZQvPSzV4{6dr=jIO=^mOO
zpbc5r{Y3V%8$Ed?QKT37pv>b&x&6`t5C{bl0NK5bt<z%EfNq!25U%)FDjsLMxb4T_
zvjtV`Y3v1Iyl6T_>9@sL3yIkIoMNg~WMr@5%>w6QQOgfgHNFFC4~&qt4lG=$Gnjow
z+{&Jvde{~D!T2*Pb<Xx;$|>5>t8xKW*@{z4{=dO=az8!u$>Ga9;Z|-(UbcC{@Z(EV
z7_Aa!8Fu08IxCj>Fx(0rW!wk3TWg*7RmMwlcY=pqf(o=^8~or}z2?V;ct35rk+`<^
z68CUzFQlLGz4qe~v-SfaY6;1#QG&hMU9sQh>W3>_HUs*@u=PkLrPP<C=zH~0nr+D0
z8BjU%#9lcRE6_@l`$D)D=dtpv7<G5XQYMWp`mJ@Ly$h8!Y9=?zJioz9c306hZi=|g
zgK#)yjqJC5k`)6)o-14*U(LTe{vS6?#UWO{B2BT%ntbDE)lLmZ(;f}m=Pu5^$wjn>
zoOM}8m4HW~^W?Wz)VDIjJ<DqX@0a*%-)-KzlG!10!2(&+k_Q$E-ZH%Pf3uXf&XI?=
zI83Z9TSVP@JF9={5>Ahvec@=*83N)Quj~=+<Wh7;Te_NoN<CD}hnjD9e4gV@>g({l
z67*vnOE(j#p-?G$h*GcE+Gj;^2tMx|b`5NxSr#%#xxTwXYKWHGZmpyv&h+F3HFwz8
z1+8%I-7R0FSUHr^<zBBdcZqfo$j{aBMV_ruSp0UXu?kzz0Kcau)rJol+3e9Xj2x=S
zN5I&^&xU!4k$M0>!CuU)9ADbz{{w`RiGANC(gS<FE(4rj{6X_A9QF9=u$fr<!V@oc
zPc2#dX7-ZqaX5^JWhO(|rK)8{-(}P-(He=hut(KZ!1VFErOI|#r!&~}g1oPKCi%O8
zR!Kcv7)29;r6I=YJ?Eeq_SMf;V2m5-a+Q6SiPZDVbh3wXnX%4;Pr4GcUVFk7W~Ad*
z@tjs-vK^&m1@sqkmfg<Dbf|@lSBQ0<9`~ijRed@7K`ms#o)xjLCnL779vla~B{%-F
z#wftj(tuDUn8Om!?0s*TMt(4^1ZQco-(4_188+kUr8N<V$CkrF7Qh}l9Q_1$qF+wO
z40KzN4bB<T+*Ys+>~y?9Y+aB{m4X1baM{Mk|HD4~%t}7}h&c;pDP_38rx!jYSq=*o
zIMs6fDW~RF{fKfs<Ab9&GwrjZowd&f>1um#tn#N;?uCB*&>y?1?zTVfflq;fD2Gi}
z-6W2hzuBB9#bfm0;AtxJvU>j%%6~WwJ0Dwn(!U$G?C6_3`o|NdZX!f>4-J-putCP%
zxt9GqbK4CefgTRSxhm|+i8b6Rjg@eBPF@~}idcBz+9t03KZf<_pAvLgk4~KwZ9r~o
zEsJR)H0^f7LXj$<bVdx{q5@+*T1drwuy)}fX3>jgH2>^~T1H5~+STkW`Nx@CC10sf
zk-Dp@KmCr{ntDfR%V$cZ%mnn>Q}BpAB_45rk7{$<r4`lAuTtJ4PzTpxVYzudlAu;x
zIDKrL+5{tu4O_flml#!yIZt#(`#=)H6>TC>OY<H?Vy(7hV|F;10Hj8eZABuPjHtX8
zmmJBR6%WK#P`#4(xa3=Ehvg|KJ^d~0?(!=OkTIWTS#<o=d~qfC{HE=$%k_Z)!>a`A
zcP4^)lFXIv@zT{XH{i%mwDQCxP=-^bV>L-`2Vh~YgMO8Mvck;2X^4^UVnHTY>ThAp
zg>~?R7YwER_oZ*dNSpb4F7en{I$(GZ7taZI4c;~_p9l{ua}okk9+c2XAmxzA&KlWe
z2Vzp{1aFY*lJNG`r1u({gwkkPA=bSV1tW>9AbsJ2#bRmf^yD+aw!}?U(2;^s?}~eK
z*zb|`7OmDb|8z|s0A=A&Nk~NlU1G{rPSvkFS~t3fuE3Jzx7fngd)%T~f5p6x?yD1!
z4o8jO$w@`g*oIbwQ1igpPW(QtO5OX9oNd{}zAarforl5_$t13W6w_8f&4_OIsw<#+
zffX-drJGdDIKS-~Q}(?@<VmA*Ou!6H8nbm=U#2J>j+_rw^{DJ&s?W>O{1-{c+EO?w
znJQUAgXv^%m=c#Y<0^QP<t<YhI7qLXY}@<F6}{FE+AzO4se&G_vBsI_|6|=XHy(8u
zC(C)AcUPCVkkaXNmBaSd`_-t24>s5WrnYu+amdv0PBO8cwWhP>O^lyyv#oE>>lV(v
zrCmHN;J8e(60im@yVjA^@)L?QHAh2vgdYq_#<m&)3OSQ66z+Ys1WA^PV=Zj08E%Va
zVQsT%<y4$$t}m1}^yCTM7LU#>j}~X@Xb6Xui1dKSo`AKb{vitX*?pzy)q40tdX%TT
z3ddg29V++8k=OWpw!|urU8=rzDskn%11BPhHHlnapMCrv{i^Q+Uep?!MUlY9J;UIu
zeh(Rn!-d!ibyt2~*PxUi8^*4vC@~MNodblTVsfr)C4f!QQ-GUHm?aqqP9xONt%5wH
z@hL>D*B#Pf@bO^&?XV&O6fFpVhZEKyv-T3J&%E=Aw`sVNl7aYt=@oB^7l}jccg~&I
z?O-&e!3WQaf!zMW1RtUb>XtKAViU_e;_{T<Ck+g@2ryb#Rg~&LmNe7}5r=-jsxNR{
z!H+SFerz|}bs=r~=^VZ#XQg9MCm(P9cXM`zV{C(9uvUAK53!kUUO%ciR|y|{_4}nG
zE_$Z!Z*J1PU(HH5c<10Bz90Tx{N49E`n#W8sn(6}O#uFFcESubJd8jg?wPQ~uPgT!
zIokln+WH+@FF*9@5v;lgL>X(iDMDh%JT(o^{O1|bF-_zvxt1QwS`(AvisZ458dpLz
z#f*}>S&m8+!5r-gYn`w{JAx7mE|UMLEUMr9bKcAPjHfuyQd0Rh?6wUi2RJV}cvlL`
zHAa_kG)7CiVw|(2c)4ox!Kuh4YrQooynn%2jXJ5QpSUV^ChQppMxKu+lT{~V2`~K9
zBX(oHwy7R%5;+XlzIq9A1HrtLm+t_W#d?NW;K~@&3}-}R{>)?Mt>K*Fn?}?q3jIQK
zIR&kd)$IHPqptOQD=xpzaYh(!D_z=%O7cHGrtY#Fxs5`i6fK&w%}SZ;n?;pdwEIQQ
z&)IlJ;r3N$Sc-b@!~ntwK)8)_8K7=uB2B0gW3GyIw8@q2Tb*Wly1MbwCsorfb=Sh`
z=iNBCP}_jS-*pt7<}F}cpmj<se;F3#7YGa34b9&jmPgVK^$3p?M!IytPzv_+`B@|1
zSS`Z9`S1(WRIkCD{f(fdOgl@PZ8bh@Oh-&7;Z~V_Ze(R4g9#K~G7T^Z0dDfs($h02
zD!Wh$GB8;XTd7#(gxxl{SsTmVq)zx9Y|AkG-DWW|je`;2e6wvc$lqsKxybFvnSy#4
z^_V~E@#mSs1Kd4q^l~c7)9*3RLcMx&rI)^;D_0Qi)t4BVPHkvF7+j-FW%uqr=_l{!
zZgeC^P6TCi)5Ycvb6%G*z1P0^KM%W1w0w|`BUbXt-eTIEuL<t2|AkD_U#eY9V#N&#
zX33>E0{5AXvbL{CU~en=jU4b_o7eIi%Eqd-!K1<$gZK%V9ITM}s%b+{Hd;Ac%U`E)
za!IC0Ric$|6qfBJGE~>A-gtZ|07iAXGQiDmO<?5DYm<H<)LE=@;o7k~ID7GyD)xC6
zj2v&{AQZypkc8{YXWT>-W~sAx;gGN5<=4(SveHqHlDT)7L4j-`19AuHUXTMi_h7;$
zEjkBUuvjF7q&S9McoL1@<1t0HrIq{M@8f~A)xWP(jT>lXiJLe<J4eyC`N6nTx-s49
zd%4#HU)%_-o4iWeb$Rb&XQ^~wa}&lLYn$J*Ix4&o`()^SVi;a-eDb^ZOa6!kMudOk
zj_4~%?0SFzcPzNR>7SnV|GAf}dj_~d-nZs5DY+t|mdUuxt1wbjWj9rRe?t}yWqV%v
zu4K$L>w6n%MevHOVZsV{=|qn|lG^U322QdsS6w6=`DgN{s`otk?=yL%@^b5<c?_t$
zk0Ay}uvU5{7_)jZ&!{e6DxxriI8Jbyk6{=_e3u=^=IwC|Zv$}d-EmtPX`hKR7{2Jj
z4ytJTbWJIdNEoQRlZJ{r`d4=%gC+<F7+uQ&B}iFOUI5XnbZs><BAW@nCAHT#hBWbK
zjBM;s;m|1B70oY<8+`r3L-Hr5tcSDEhHWO$p@qi?Li})@KZ;$=5YQX^O+N~fkZ%(%
z*un$osfgG2pdL^pXoS>N6F8WHYs0q%x%VCM2`<i;<e{~EkTP1gUFA6a3VQ75Ifv=y
z*i9A0Nx@^8PRG=UY64K^0C*f{spgJbt1OH&l_S<2M#qt`IZ^`@RFvk5<c`}Cs33MC
z00kaDT$6q}QTySS%7Q!<ma`eP)(3@eO8p_}_Ho40CH?b8k0B8=QV4A2lb;_&bXbBj
zuF8q3&Z~So1cT%cc*NC*C(_(dEPAKdla%$sIqO^*xMGSYHBHM+L^AFBRkKZQ!KGu{
z*`qjWxaf|Qjqem!uH<(%Rd=M_V8F}!{9bEoqw1b+<pCL-L@Dv$xHA7>nCj|GI;2Eh
zIi}j?W-*(tU96Nu$M1Hc2oowAAi!~I;KqrYbkPmlUU0VND!DtoEwAmq5-z3GmU~t|
z@d`zOm%bS$yxZKXJ2+I5;K?NN{)ADCIlVbDmidh#kC}%6r=+ZFT9k`;AV_MJ)(doR
z!zW9QQDOu~&`c+sFCWh2pj{*j>q&og{<dpUZMP#z=w@ZLgzYM*{syw@MT4|Nn$O2=
zAm=`3h1tCWN$LVCFk}K~7l#8nPo<RfFQsrhcSjbEp}V;`9qD>6^Z&%nI@5O*zlb>a
z5mI1S5-q&Q0Wxa+*%||Q%}h;EUog%ca}+%RJ=<Irw=0cs@iv4Ep!P5ynn?ejfPW5m
z-IMjj692+<@`l5BZ;+Uk`HR*5yMFLE{q5F?FHgx2Hjr$&_{K7|%5}SIEEm_BNK@vr
zO<t?N3G0{bW<AbW6&y1OwEjmYPR4;>MBUT^4rK;@wi9LzHx;<6DjL-Yf`DXo$XbKa
zvlEi$0~1UuH<m3a3aOQh1hP3#A|<Duw;-3S%-vD=SWIOg3qB_MZnN-cre1&mO=$#;
z=}c}S1AGiO^hjdo@*xE5Qzp0Y=*ek3*QKa@Jg$?Lr;L3mqN@R>iFqAN7Sq{ff%Kdm
znX(gbD$FcgE5Zb|B}G#?ZrTXWI$_G!8na7aS3!tzmAg;x%CW4-UH^qL;a!j=Fsbn9
z`*-3S=tUR04AT98F|xox=Y(%}%HOx=yLb4ctN*h#b>;a<7P}iL-gJ8UxvT!J%X<Sm
z{_wc;gC{bLcPIUG%9nj*Pf|dz?F)}|yf~cMmR|2ckATeVO8QUHJQ*s?I>7cp3X^pa
z(Ce}^Gxzk^Vz{WOzsj;a>TY)Vn_IuA9!=+8F+`1!fIj8_GL(fytD54V2y?qY_TshK
zUCw*wUGPPC5SJVr&7Hh7IM|aLO_DSEn=QlY^pdqSt)@>qk^C8ENwe`$b5kfzmxEYH
z;hvGrxuSmPDazb&o#NybTRfw=yaS`h<S9J5m&DEFglz0VDeWL(VUl!ZC3ytc<ogRI
zcY7l)wqRm#F+c?S#4M*#5;l1>rfrF$(aORMGcgJ+19kCiLF>C)nQUT)aQRrwm4p_J
zxrCOOuFz1<a=kQ>O98+5w=0nVByr(2Na!LAF!Qg24DcQy2ml7{7TYJz?D(;L;DKeg
z1pokU|K&$_zm5IvPt`a(^w~X#oFq^B5#axrUaJvZyhHWU69a|)T!fOfGN|dV!Qh#0
zjSH=MK^1^+a4QiMf4?`Ur(sy~Z?#~Vvx7=5v~Ny&i*ssrDno45Pvk*bcACzWqrXxw
z0fBB4eKQQtzrvxMGR&_?7+n8+CM2O$26<pF>0bq55PyW`I`GXd81ikM(NO?JeLw&T
zTM4IB6@0VIMh>-d2?BWKTN;9Qaz<)(Y0?>JJwrEh=g!l=Qgfi`w#?0ws4;BPtWcb;
zfus2r17zkQr~$V&pKyr4u1zv2arEF2Qwt_$8N_)!9bYS9O(7iQ+V*rk=ACRXF^{9V
z0$Aq7$L2I@^KH;Q`+%HzaB0?7IC3fpg;|7xqwC9A(*;C!y$~ft6v~fQJ6l!?1LtH<
zI2TwYOb2ZPK!zve8=7UH-6I&Q5^z?Qgo$PqMT1i(@MlLBh{=DB1?$K*^b&l&<5qJP
zT1hRY$Z(aS!eGHcp}$6FY0Xu-U~v-a?4WM|s>SG>pzDDGKf79By5g|B0cLCM;o`Lj
z)38pzaOFYW_#!-QJ^{BF{t)KVWHmL#<q+~ImzjDYIstI!c~&gYTM~Yluat2F7Fygw
zGK_`*e%>NL%p+iFAxk?LswW}RAc!_yU$_kZyA8t+>QP|Z0L0p0PD1NiFT|XKRR^DM
z0T-SvY{jat#<^Nlc-}Y!N*RXmmpm@hwto0FO3aMF@Y)1vmjyj4anl*X|42yDIl|5B
zLST8yqS}g(><nWi1);XnK*^N>(L06?Am}5YKvD+OC}5$693{$qXsXYA1|tVNum)O?
z7Tf=*x5l{`EXKF9GtX%*O?#Y+<g0X@XJo>gVM2S-mdhN|_?m_bov74Jy+ube6OA+{
zu}nj8P7YNIT<Ix3mNX^RORnVZY-!JylcALfQ@qg2Q4)eHrQ>rVQamsoowykRAQaZu
zs>wa?Zq5uP!SG;O$3h}jRjH!|Wf+cH4S<O-Zy>UX8yLOm8@MEkONH<Tm7Y$Ph}<ah
zhL($D1FQ`je2_ffV8q``w=d2O-k=Z}{{}zg^xNQ%IZ4%2mWT~zv?)M<b@7Hk0&`|V
z5XQW*As9<8ZwNt3?S>xsXK6zyO5WXIAw26F!jOx3IpLT~h(8#T$4^a+WwC`8oqC>~
zO~?XQ0V8xGVaLu$l!HTv7niBD=xlG1kj>-Lq$oKw$gFyhL$Tv^!Y%wbiy36w*<nL*
zblJ{M3>#{=kSG+(a|sLkqqS69S9g|ua>645;Coh~VsrBO`10Mcv!wZz$ilkJ$vS90
zVmZ-WY7rnTf|*DpnWBP)b0UyIw@)PEVxnjnTLm{^f#8+1(RHDcm~L0(%A}z5wAgff
V-B>J%A0`U+8vH+OZdD5a004fNo-6<W

diff --git a/assets/inter-roman-cyrillic-ext.e75737ce.woff2 b/assets/inter-roman-cyrillic-ext.DxP3Awbn.woff2
similarity index 100%
rename from assets/inter-roman-cyrillic-ext.e75737ce.woff2
rename to assets/inter-roman-cyrillic-ext.DxP3Awbn.woff2
diff --git a/assets/inter-roman-cyrillic.5f2c6c8c.woff2 b/assets/inter-roman-cyrillic.CMhn1ESj.woff2
similarity index 100%
rename from assets/inter-roman-cyrillic.5f2c6c8c.woff2
rename to assets/inter-roman-cyrillic.CMhn1ESj.woff2
diff --git a/assets/inter-roman-greek-ext.ab0619bc.woff2 b/assets/inter-roman-greek-ext.D0mI3NpI.woff2
similarity index 100%
rename from assets/inter-roman-greek-ext.ab0619bc.woff2
rename to assets/inter-roman-greek-ext.D0mI3NpI.woff2
diff --git a/assets/inter-roman-greek.d5a6d92a.woff2 b/assets/inter-roman-greek.JvnBZ4YD.woff2
similarity index 100%
rename from assets/inter-roman-greek.d5a6d92a.woff2
rename to assets/inter-roman-greek.JvnBZ4YD.woff2
diff --git a/assets/inter-roman-latin-ext.0030eebd.woff2 b/assets/inter-roman-latin-ext.ZlYT4o7i.woff2
similarity index 100%
rename from assets/inter-roman-latin-ext.0030eebd.woff2
rename to assets/inter-roman-latin-ext.ZlYT4o7i.woff2
diff --git a/assets/inter-roman-latin.2ed14f66.woff2 b/assets/inter-roman-latin.Bu8hRsVA.woff2
similarity index 100%
rename from assets/inter-roman-latin.2ed14f66.woff2
rename to assets/inter-roman-latin.Bu8hRsVA.woff2
diff --git a/assets/inter-roman-vietnamese.14ce25a6.woff2 b/assets/inter-roman-vietnamese.ClpjcLMQ.woff2
similarity index 100%
rename from assets/inter-roman-vietnamese.14ce25a6.woff2
rename to assets/inter-roman-vietnamese.ClpjcLMQ.woff2
diff --git a/assets/inter-vietnamese.2c644a25.woff2 b/assets/inter-vietnamese.2c644a25.woff2
deleted file mode 100644
index c2ffbb0913efa81e8bae6d78a803c286fcdeead7..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 11812
zcmV+<F5A&}Pew8T0RR9104^i|5dZ)H0A!>904=)!0|eaw00000000000000000000
z0000Qfhrq}2plRuNLE2ogcb&1KT}jeRDnhSf;caN5DKXbq!2LnJ^?lYBm;yX3xW~=
z1Rw>61P34+>t7S@Fl-zEWBHj|6s3~0Q}%yJZVtikfN7E7K%vGlMi>&jj*)FnXcgp=
zd2Bpbm!>Hk!>kn<gYFKl(ful6s`L%nriGNzJQC@H^q^mzqA!dUBH6`4->pJeT?Jho
zK0;&H<oeH}s{Xm}Jv=;s5D8Hn5DC&SO-r;4Cu$-m-U4kowYQqeSz{6eow!@=U#nvb
zHGg#u{jKb+@6rw<!^Hp4w))1doN_L!oMK}Xf(MGx#25+2;)u8+3^4Spj*Xbx?c3W*
zwu+5vuA0k)=fBqYJhyvhmcnQp&>|U`@+hZ&`vA&(C1T{tQ2AA<*v#Xf;$m;vn&#j@
z0&6A>!YHOw%l7+xHqAev6&aAqyneJghAQEryqAh*glj)hWSMma)cH1vju1mo0m~4d
z`{m>0xD3Kn2${?mQdS-;#qjO}iapT@_zu@J*Yf4RD16<<LQhQ=2yBvX*^!?SXf&#S
z9?<11T`QWz`Cfny!6Yq##U)JE<xpT@0W2)+@Y2%n^Zn}DTI<&KdObeAx}KdE*Ij*^
zHI=)-<+uo{BTUh$nj$XZDoD3T<WLSpQ#HyzI!zG%<zN186V_Y_C~VmXC2YQ3HFCQE
zWeX5?-7qY4)@C|y^_8%N&2(OCIyZQomzwm|_W!@8<@VqIs^l-*Ge<B4^7N@#VF%Zi
zA%rWU-7G^@s*+1msnY7UCn?Krk_RMtKn}_pv|P@SDTJt&2Mj^OFgZXw-~n6(aGAv>
zC#x(LOEMX{xP%lfj-$1v(~bW7zNwl|I8?jkEVf}08lhnbnvWUtaOyIq61+R_GRv5T
z$Rx#6dOsQn99jMFHN25Vo-l~f`AZ`GRV=@c?>|MJf1`5$PF4Or8vSQL{pZm7uR{25
z(Vci;53j`ln>PRtV4Qc62p~a50XUgM^XAVDl7i5G7m}W0J?0|=z(idJ@2RVrCJ4N)
zMp_^c0ss<Q0MNCqPK!%82m%I9p20+x7Z?CL3A*Ssunq!HWZ1Xw%a2e2o_FEjSek|c
z1M5n>P?RKDic~CYTs#>v@d+U+Nys!qwJ|ZXu=2*4lmKV_T$*sz&ww-r5dhgU8loKK
zsX#??s7$W4&BvO?80QbfaR#C!B@q%)*_JUeh$dud$jU{^Q-O-)P?=nt+-`Lkw}AkD
zp4*r>K*K`+<O>J$zUT=rAnA<G`Xp9+Fyiin7T3D9BIe%v<t-h224OrBF`jJpCP8!t
zZLtom7gay8)>z_JU(=lkbrX*uDK0l9wCGx{e)+Od2@gs_^-bOxZ)|9r?)kofxFcDH
z>KT}iqtQNNi{n1luU_1QiCbP`<UPP(y_XVbfb!(fN;<(>|1L_m(rt7*-8meC!}cK!
zGFZX@#8N&Ctig#;7{>$*Pf8Jn7ByL`-<kSX;hg<*ufe$<g!_{N6s1WJZ8K5+1hBX#
zDa-lZPk0h{ZqkO<o<PJ>Eg<j~0D-jtkb{6mAPEs9fQZO2KsP=E9(n`~kE`-S)|vz8
zgCPGpShx!zK8Vla%Xox6DkwFAT!2m??20!180|-Z)AxL8nJ_BmwONnl6kXcAU+Y4f
zpa3uc^vJd=G9O(CEkqV#T`%KT00RIp5EuaJ^Tb0w0i7>Q0Oo!`>J<4?jGhwx*YO?!
z?hmjE?AY)4Yvhlu5RX4c?ij=9p@Ce{^40p2e6o5qnqUf(K6Qb>zyT0MLglaj12_N;
zI5?O1QHWWJF9njq65q90NZRt(q^u&P_EU-drMG={BOrrMo?746fkU6Y`dyQ*zr%Wv
z(6Mqlkx%=QyOVj7>my@X%cGplkIiW?Zma?Pn+`2Yr<Wl~fY)CtOz!v$8kRe9>7|%f
zrPOpZg0Fr8&0+=g5&5@(|4J?VF;_1zXdF8sJj?nTqo1kMueK2`#=NhXspBXxzsOQR
z{{(=90ss#c1cCwskP`r)&il>|PI~16w>}H$l?N{r#7UR0ij0cIfI0X90RS2V2J)Um
zxarT64<2Gvq}gY)f04HhQx|)d*;&<<`ku?U7hKLepaCaIo}2_g=f;-7t(+W9eqX9z
za#=J!V8m&VR?*ckLFwvW-d7SJMm9C*Dj26PtDDQQ{hUw#Cdi@-!FUg}qbK>#Wh1*v
z;bb^)(d5|ld~h0Hyw?;oO~p2Tm_osJZ(%EcY!ZMisF?IN0)g0Ux*9=h1*=0R@eZjF
z^+GjZXcVDYBvg!6ObW5u#F;5xy97#!IwVm^rj`PeN`pl!ox!_|xJ-D=GFW7?;v;11
zl%q>7Ql4&J0Bqi1$O%Gy)CFKeGz;y{fHKbj9cCXQn+9QD#!}hnO&S=oe<dL&|4PXN
z$hQhGfTBDLN1ny7+(k+5DrEpW%W`1=75QIKmH$Oq2H>9M!2p)a9n`2}^wyyt%of-n
zSYL=2g!boy+y@>omb_gZgr4G^)4(kcKVY%W4NQ5w311AY)6K3hIeT4K3AIRxf)JLl
zZDr|#iQ$pKqCI+t84DE6VonHQIBDBT3$)njqAu3Q)*W$5SyE&!31o4xs08xv&w-Ww
ziy;Ufek|A8{1zM)22oUri+G}4LMao9JX+fS+U||>C+jw4H>Wt;Z*zA`vwrCA&r#_5
zUxJ;%HEF(lD{z~HTSwEVCJaOmBmgt0*BqJCz83SLf3($gSQ$)YFdAT`<5o?kvsx3^
zw47`R_^7Js6CAivAuiP{*)={`X65`T@<-H5c}KU=)kg=2n>yJ#FSCd&M2CLQ7L}NX
zlS!#mvqQPqX*=zxUb6F(oEHCyuXi`UhmEdJ-_430RpO@{-KeTJaUDZ`>RXQLQ|Qt-
z*~Pu_-o{B}G#|`lM59z)y&5M1l!Dw;+Hy|GXAwHIMU?aknjr(J<q-M`)qmG>FHo<7
zKroEfTAB5|RFZAAlIrc$3p86ivUHy2UKZ0%6)IL?0s5|*%&bi5(3X@=PG%qdQzUij
zIc%qo3+q+vjFuKVl<ExgQg2V^^g0@%u01DbiOY3d64#v}CygndWVjeWxLvOQYp-n6
z|7}iag%^MHb<tV7e*Ks)7JPd5=<jI;00sWkA-Ga_ia2$9>Q8H~W0S7QQ*IY5BWtx_
zZ~~C8U##^=DXLc^x%3CI{~<H`?3pv7O0|Eu)rDTlDtDlj7*Ls9ddWBX!a9$79{ee5
z9$&4{IDh&{RZTqpSG)UnJ9o|aSHDi|+xOeV*jH;{w8Hk)Rnp&k-qWj#HnbKVedA{s
z<vR}|uOD|ZF8|MpOh=B@{276b@hiTwEPT9XLbv@u+v9Y@+Y6^Vf~1^0N_O+MZF?@P
zOltg4Qn2vm<oCs7)y24D#@<&ae|3x0o2|1>OFEt`x@cA%P`>;aiyWg51U9t>Y~m|%
z`QQl~@Hpnh#LGLdUl(W8$(Js#ai|owwe(*%K*48P<ob5|VO7_YC0AByD31MV?<>oe
zt+~EV<-2t|=6`(>vN+}kf~)&gZufpX`}V`WuO%0b%u0NLZN7VGOnb-KJ+k=j0`vRB
z^BjFYe*enSwl#dSAxiRTNqpBH$6rc#2_(3I1ix}9Rkevks<zT(9<B|1hWRk}nnV5l
zj}8rz53{5BvA$I?&x0qM?riDs+pwYItvlN`h4?nr5cj+P0~T86kgm_J2fSOrl=aao
zlc%mXXREx)MPvVi<%V_^`RP{2vJdUUa8-0)-0i%v5<SskI}O-W<l#EW-5c6t+iiGZ
z$XK{f{P?qAEh%gZViY`>@y>XF7H5%Zz43D>5T3kAyF63SnD{8IXLNFJHT?TW6u<>m
z5aKTn+H)Sji6hHlzvR{u<p-f9_YqC}-b?#umIjQ8Qz!k_J1&prH77}UO-b2#b!f@a
zX_JnVqoplLrM%jtyu2zDGI@An&xiLep8Me5R#%;@Td$XQ1AFWKt1s~>G7dL;h$r`3
z`{3!)KJ92*Z2<5w^iY&$9)0?e{i7{cu4Hw86PGkAOnSK@c;?D!AALAY_Wg4IhgjM6
zwx=)c&$paA^Q!1&$qa>7D;KIn?({jR@<yYQS^cr{fUaA&P0e*Sq>2KWLr-0!Z+2ch
z_rcClSBXri*M|$S`EhT&c67P6s)Z-v6>^G^%)tot=%kiY8HFTQM5S>=2>6sa*BV{X
zVSf4~p3>kiM;=ND)q$vjT6~ktmBw#>xnR5-VFX?{WzhKNnt$5<G5yS++_(Ew;}i*#
z!!;z=`;8wv*{_vbqzDDFQq*mdKii&2{7;<O=5}jL{rDVZW@)5me=4i8B*7R_KfFN6
z5=T4{L?qu73f6jH@y>hGFNcqS0O+_kLB?9|-%J3l_iZZP(He!Ju(bm)xAkCrq$&>?
zkMIeM;_d{PZ}LIG#N-yec9>2a(~h5cogVt$1p91&(zd;1%8)&94;Hq)0rE<AQxzn;
zi6q;!MY4AxTWLNxjM%xU4yA@C70al}TJB#;08*v-OrN0=XJR^x1(7LLn)FMRri@CJ
zrud~wW5!Hhs=n2o$<narU23r@O|;&VJ_dRm?A0>$$g2ZA$!9T8$o8kAe%U8(8ee7l
zMf&zyi$V6<N0U@}Emh^Uq|%1By4N_i=YvYtsBAb@$LqXhQfsKl-P$(BdrSlYhKF~z
zQfsGP5w~(sq10m}9(qrRrXjYO#x0;7M?Kt93@{pvQp+8tE5+VzrG9xg;zoEYiF>{l
zTcZGoKxeOtEsKiMZhWM{*i=>7pP~1_M=cH<0<aG}uNxW2GnA3e?%Pr<wk-7bK#4*_
z6eK#|RmIp+Xk0p*-<8jv%zM%~+wN4PLnZF|kIc!;@G|!>^w?8ZHp%`x>!S4R*hj;@
zdK$_}S6ly3MUCkdd3EY$z4bd8;(liY+o_u=DBa8+o@I#)Fxh|ohYNGZr)}&1?#x$5
zDFA>SfZi~ZIH0X~Z;C?8rj#2KXwVKhk_u>dG2>G~$Q3)IaR7SoYfq2@pt+4|T;+c*
z`9hmJaY@{Lm<&>pkP29ivnq}xAkNbkv9CHQ{7#FQs{p>}d+BpFw<tw}fsWjABo)v$
zI^u7q-)pisBt;SPivyOaEX?GI);VSR_(J*=;G0tv9!W<>pEM<1tD-l*uLVJ6e$rO0
zg)&0;1ZJz2_ZmqU@MRCk4agOqIjqWdw<Z`*4srMX)ow&mftq?3i;PN_{EOEH>_}4I
z(L!8?1|5y0|2b;h?oN(z6*?@Jr-m4ovp~j^%>chk`LO`7Lw2fFS?c8hnkAYGJXZ;=
z?&K<woAP=!7Z4IUUQgD>Ce3OD<`)NSqdkjixic-Wph}+xplP)5NE)qJQ_{66N@NJJ
z|2Zf3&PdG!&@=|E&7U{{Jx~AyfI$Oj<a040Z1^u1*y~|K_L^`ZkXFz}`Uee?e-RFo
z@f4lFf5L6Yt31H(<j?W#>{E8kF$<ldA}%`T2#2i6Zux+GRlcts)=m>w4sv>@{&#(X
zd|qX2AK8wRv#prn8GkkIGWOUH+0V2#kMgM-QyWtcq+UtooS!*Qwbd!g8nbS*wpg!Q
zyRsh~7|Jf@4CL(2`FeG2H9D_kZpl25VRHY!rcMXhC)xX^Ck@SJvum=uv-<4Z?2hb}
z?8jNpb#-WR=z^i4p`UU_?)$mNxu5cxyr18b*XQRJf(ok(y9)ZkSYc=3ZsF(R+TtTl
zh;zSl*?BRH3?D5?%2Ugym$$kc_esx}fA9wQksyE{0SItsKj6#?95leN281F269OhU
zf@;!sGz$fB_{H?o?!<;oYam$Y^t%`^_<u`%H;s#lkoj)ujFMhJd{MzG1VUaxFwv@X
zG=wRsnh6rV5JtL4`pq&}Y=`0*IT7_+yp0&$(2Krm^`&7H3>eU$fjzTjz@Q{|&tQkd
z=6PY3N<-y-m>#r|jEFT8Q&OWR%uy0vGQv0!3Q+yhLkp4O`z$3)U1+9nJ4pZ}cCR)N
z&dl)-B;Aj#7n#Q^$9eRs_16H95dnlQ49#AYTDkxyXqTt1uIRGlGjUq@U0k6avbtmP
zvzW=JI7Ja6WC)9!Kn(BgEwzg=Ic!x3NIJGG)21C{bDS82WgP_~y4TF7na0oK9_sb5
zl@+_GZ@q}gW)8_uU@m?cuhPA<ccI3!wg;*N#Rzhuvg>zaCk}{72p<>o8gOW@)M{oy
zCWHaZ%daa~^eZa3^u$T=#Hk-Mv1Mn9_nT=Lq0+<7?mC8Uz`xuhg8a%)IIfA~!<6~H
zySFRBy)P&o=NDBDUDOb73V*38{O!gW=8C;d;LxV0LnpazB=2U2H&kw@&Pembr#B{Q
ze8pLs%o5Ql(_dZmW5Sk_)8pf3aNil_utPbtjFAY(`f$0wVSHo=51|b|dOdm*AszQ|
zXxSD#$d?I8o{LSOKAyYyE67~IcA#{P3tHNFR;^U32_M7W#dgM>DSH5ZxEKPzULQ7L
zyr@<sfRZ%8y1fKh7M9{p(=xS#93@KqGqA)E98vJZfT#AuyhRdAE_%6RE_O6_w#o?k
zjIFwPuu0M%-GS4GOMGfX6sdh57L)<dx<WEGw#=<-ljD4LT6&`xJmYe@#)<Wcntarz
zT5YGlp?Onuz0jx9S?kx{YDH9sUs4W)JeHnzL1w7)Fn<J+kjENd8!?HJDBfFzxK$`r
z%Z?`L+nd-`a*PKQ-}76J079H%se8FM(aFmvXqHVv9S5e9iUMOAUWc9t<x+D(YA7+2
zeetA+k$9(Sa}U@h5m1YMVs_4kW(xy03}JalCAF@neR0}Bh7)4}xTIJ8T>X$440_|a
zfWu}b#9<bgN<%&8Jq$Vos`CT_R{-bbesn~rmx!s58-Pv89M4w)5sfExIlLd2iM_-m
zY6l!Be0T4~8SP4@jz#UG+6-U%;3<jF4)^Gh+1YJFM}GdjR0Gu^Nt@B;t1KKjTJWU?
z+}DbrAntm3yb50WRSyl<9bYG0(#20a7I3fqlZ0hnu5tsD2+|cq;2CsYgn$?ijKqA8
zjf2@|s~(6AN$Qu{{4&DY%phBn#n-P^#6zl=+sD{+6^=lOh98Sf)9yXI&j=Yi|M000
z*k_Vp(tq0helG&=8pj#8<4jKj9U4pwp72qf`hq(x+j6$~GF?z%+cRBa1#w!DtZ}Rm
zVh8A$F)f25W<yoCl2_o^Yd<L$7JiNBw~Q|@j}z%d9@`zJY&}6x<7-h9xNhAbMAFcc
z0_>KGIx|y8s$6ruiXBl+Un)4REXCTqi6=_5xf!(jQky_Cq6OEA2j0Pj*oU3h4tV8K
zQb>_}b(CRq6y2(98<bRMH{pM>E4?lYx;}U9wP3`E(`k|w7B7CC+ri*e2@YD83k#M(
z>~dKX^DTzVMdgfz?5z}@^p%XJzrHLQx!T0ikw^BWbm*He&+W2G4w$m-EP~lJsFfg;
zQ|d2`p!kcdh_M%P?6|GJbgjC+o{`o01)I+{m<i=UK|nCEl|cVt&HW;XT`N#f=)yz;
zCRpR4OvF6a1cHGy*z8>t+0(w)nQVeFNS}NsZ{I5$!t$n6EU6z*Hre(A4wRW$RF`V(
z7Lsz!zl*gGcSOQ~L59a|<zlR1<R&YjKt}rnjWC<wQIl<_HbQ+y1ly)IjBZrso08~A
zhSO;(sdn!1NAygHUU^05Ww&NZ`t+R|dz|qB04CqYqWw1R5jJ4ESP4-;X%!rS)N>-+
zN_EONRbElCtmMcaRP8(=q-@j<SLo4jfjSy*Q>~KFQ$P(%oYfK{%K1$Qt1T(QXlTHV
zgIuO{zVKd+lLG}ccJM>ld^tsFU6u1g5`GYYsX)+t;PoBjqu1wb#-|az0XbwNw~Uv$
zvyJcNN$%|6^F}n}(J;<gDr(!TU3nVL>{9<pLD>k-pbeLyjmobWJB1Z_D-i+K1~#a|
zIk-ryhZw`}@>SqKubD`xuYq5~I}&m8&;L#ok&}A7D@4GXC-%sd?Kx;%)9uvEOoxoy
zc^a2$m~vN0i{_|apYn&`=}^*asQ#7I(!zUR5~FYG0jC<TbjnVulvAs#G`+;}cZ;HC
zZ`#DR-m@EoOGVKaBVj8Kx*g~SXgC1{@O*PSd<K#sa`Zcw7iwBM7cno$Bsd#tNZxd)
zY`0?Zbay1|)W}2!a<yZi0$jX@aJLE`kED7wPh{eoIFt<|AEaC!dWMR=&Ln=PW7@?s
zti*`OK@4C?3mk9)PmOV7O&dID>t3uqhoFe5h$s#S%*DJD>U9cWR;py}q>g4JGYEol
zRft#a+gz?Ry7xc=>u$c)PPJrKA}lTDMvtLAM0*rggtmm-sf&sEZZN$D27wVqIN6?w
zD?FfgqA@Bz2?1Y&>s~+x`4A7khg@z=jTrAFEn4tJOk+FVms{5*m;1c!qZ8Bazgzry
zo*qB*j?vZrELZtut|WtcH*(y0dq$jgJRiAi?E!`0{=kzJ?*=z=p*UV|J|8x(Nt0(5
z^r?%*kUhKb-#h=<1i55|cy6lY-jK(y%4mhngn-!Xc5JzAmc^jM&@|Bdc`zXsM}8!=
zmnSnBF%sR2>cs?S!#>S=un9-VscaMB_TQ=(5E%EBf=IUvqTB=BbNQZr%N-%>>f?hS
zZeZ^a!%m`DetQOykxN<qiUP8u9J{nUXV2+1i7@?l+Ldxq89QOqUq1DYa#FpZQQgL`
z<jK3!#@m_QhmIaSe!lK$6+m`IPtV5v+v$tvmd$LgFkJKfDIKma&kfJ)7eP{9Oy^#`
zwk(B_)6>ark?ks<{Nid2tn?C5y_n_?B)tKGQCM8fu=kx5Sty3ZcbI#TlWfH;mvRd4
z7Ywy~c34c?3d1x1EZ}r5H#BJ5X%g|#pNRmmZ6&S_SQ{&!m(`eU0SgXIa7_wv<Xf$#
zcmFDv5@24DJSuE1gS(s+VDV3Ms@{JUYnLJqu#no8-S#8D#n@j{jHm;w!>|DZxWFWc
zaH|umBVPBaA7L86<|E_*zV^ysqjqDb<a--$z!lhJ36Y#Ek5yS)*YvRq3f+f-O{e|n
zG)N1PJOWNciH%tvZB+tvPRd-?=^SP;eu{$&lg)HSCNl4gD8UN%1LL$%N7ltYT$MMK
zx@MyvvFjMk-rx$M?py38X0ka>kwFBY%eYw}3+~~R5OL3;0Rb2Hqlk0{ajm!;Ho}LW
zO~103o=_JZR`|K=xTDkb^p#pyZg<>!?F9cL;b9p+&5!r%^}#&8{SdgJ?5hW{*tN*8
zpLKJWwQ$H#yOo2-<&k@gJX{31vyn^R7!ot$gPbjY@QT39)Zv70ESNQEEcP*3DJxf7
zTT>oaM#vtPpZK)S=RABGY*UXbyJYc(%#P5|DC<aoUa!sC)2f=_wEc!|ZG}uW+HS!w
zt|nU8VvQCP!TKhQkf$p<L-D~waN}j3tE4}BA&LrN8W;6C=$W6N3XAO5xxszk;D6lS
zg0>)0_}u4%z{B}A%ck^u8T)qMC}%A_>vti_wiHEMijA{sY}K$p%~}CgI4|?C6#=Js
zpUtqe^tI)=q9y{LUo|XRo>$KQ-01I@ePPlsOb-Th(s{e?Ky~L9O&ZKagFEmxk+HzK
z=JOULQm|k`an;}3O<Pn!nUa+=AT%UNcO|OGwn>0{nXHw-x@nqs2@9|<aSKdhBR1|`
z?6y{ltGd=a@<ZUs=93?Nt0~%<f;*clEOVPaZLE~YnzqkgtOGq%`M+7KtRV~@|M<L5
zD!p1+KCcawtPfG?jjMmCTlB1UzP~$We%q3?)4k~mkNdslHXtx)n3zm>z75XZ>mU5$
z?JR{8nlO`#^U!*iYjQgcUEW@Ax4$7gG$>-pO|5NLjtQD5`uW|r^rT{r+*8%N?!One
zK}pQDJ5TKqK)S{1aPC%TD0V#pH(VluH)eRXz1}ZRfd<{sSMTjm;*xl}J6#+epWJ!m
z;`ok`XlMY2{T7tjuY5oImeef3kl2}lnxOOVf@Sr1%>CBgL2jI=cmBz>xl3>8$4mlF
zVK?lpv2D)^6Wz^rKO!}IWd$%w244U5N)qN=#bH)GcWEHkCES`jTo|-m8D|I-_P`!q
z9ZL&WYN<_Z+Xz*Yb%)86phJcO;p+eb7=VaDRNxLMD31yf{1{Y)weOhFJcuKP>6*1H
zQ+FfvWITYEGBTwsxgjBo;nD*_qrF2{N+Q$4g3pkw0Zb>2_5y9+1e$Fk@^TmH?v;^e
zHe2M1jAW~uCRo;E|H3KRkcmjhO`wOiO})eP;AW+qs9>xY;Em5Bwp1lX7Zqhstn@_Q
zLlsqHY0poxU_u6eUKl+m?+y^xoCwu2S`{(I8F6Cx?nOFZ`AYOY5tO}RbZBftFZ!H?
zQ-FvFtt%KzF(xKp<kZxQdN&a_xS3CQok##C2niF5_c~9VQkz!2UQabwr#?sw#kkt&
zS0Q)??kEUWB_P$ucQ4T~dIIJWMyh$Ngb9<I;%8&tQf4ddFn*ooL3+qM>sp7~&h61g
zMA)Xb;x|Ss_hUTOA2c8QY$PjuQTsqJfDktd6d=Kv!DwK{0bFTMu3W%muJnq-U1ylf
z)$b0NVSBHs3mxdu@e8W*(HwQJ;#WYtt?V{iEVW1VlC@Jo^ftrS;m!9R^zsHcIh=EN
z`%@Juo3a`WLn26LbM#kFXG@{P0wU^JRPvPpV<wbPy@1&f^_1sAlLE=$YJ-rP*a{vm
z+1IJLVf}koybpgzu4_UPKWm2r6HjpOc|Dyy^4O-dD-enA`yRh$hrwbf4Q|dHh<g=>
zR-~Bqu_qjz>1l1_*D=Xh)-Vl?OG)q6Rh2X!8p`Gh8Dc4D--cG0+actTN^%XNQ;w@}
z78?@7M(xS$0Qs$GN#oD#lCZjkG$~!g2-EeELbGgen!mv6kb#@<0H!g6T{*~RVkn;u
zUms?y*zVirR*fC>n$jL2>@?i38}o9O>P39hkx&0;?#c~pZNW*ql@r*JD@preu|#6*
zFn#)<?3%Pb9tac)y#NN^wdXqx81@v`pbmoI_J*3)0Ahdp0fjc4y>32sdcizK@-?W#
zG~-s&|3B{R9i1b(KAI_lQ=kBG8xNwBxf$WH<_I3dc(|L6D2U`6C2Ls7W*}E4WaxqU
zyxEzSaH-#|!vQ^+Z~p6bM9|HsyH`Vo(X7W6vIupnfvkq+pGB!bup=BAB*}eUUxa9J
z5%va@y535V8LL%hR_LS$1i*r1Y|1lqkt~m8szvG&l6<d6QoI;{;6u_RSKgdrfe3pr
zpG`xzq;<{fUQsG|c*&CR28dHJg;5ky$T`!}?bCfRik3E26$i*Zd`@nVff*^(29lHN
zxE-V|hd&OGa>AV=E9;ZDClSSN&yqIZkV{&Btakk1zP)?hbm+K*50_W24m}BixB*{8
zJsumRS2^(jVpn0OnrwSW--LPz%v~>xG|gc>+mO9;^ywShH~HI9X}kMoVi?+_s767t
zK0D0_O4u}C&y1`I1+@tjZH*qTBkkpMEJ9#l!~#0h5M!JnCu5a9CU7D~^7!PHXt_2M
z_1jq52#zm0)(xiOnwq?D@p@lb>v!uJ<X0dNtbpOr@#y586`v^==JEQM@$v~#k|fCe
z^gFyju|f^nNV42bZgQJQ1m+)~IreR(5+Xn#!VjeTi=#h*U~<agc6$>=^I>&?!c*TQ
z=}Uk1v0ZtAnHlY5<1R3r<MUUIt#n13Q(uJiwew&bjm1{<>cz3^i@-u<MZ;=_(d=(?
zNX3>K+V)EkOUAL4E8#@WN#29w+Str^dI%IKqK0?}+$_(owBxRKGG6>BLNS#ATz`&K
zK(MF<i#8_5Ex`9f5ui{ll6eg2*~$KLdYJ1`K?T%@3Q&#{uSzqtdX&!l+}72@dipuy
zWW#A}z!t2-2uA)3GhbS!m%ceshj?Q=@Q@}6KB0%8Cz#}Uzz#)lYimNH#At)^=K)s?
z7?bkn%#P!+o&N}A<Ii`cL|V{U5Ug6H8b94cSK}wUkQ$1tDs6>RM4z`uy~=<Kiybs}
z7Av`;IO0eoi7LtvQ;!y#F#Y*2&wqFTQ}<H=o0!GVoQ6^%LE<RhA3M)m7T_<PoBc&Y
zAfAy4aQGcj@8h<$BH{=XA+fT9vcUFUYPIDBvk48Gb`-2mn>_Nf<sI`UJ^-~0bzByV
zSU>?RLOjKAjT3R!5Sz`Jyd8s53DF`U(C!sc!(85wT$+M#b+?8}QkR2O)<8oz*s>V=
zm;Vk5`9b@{vw^2+0<>JWo<f)z1QWN@x%MiGUIj9+xXHled;nKmgyBp~Cm6k`U$lEk
z><8~*{im!)_4yrwx;=wgoth{}01&sTVYnwcX{*3vmpum-4}Nq4K9=q$`rYA@m~0ZN
zsEIs~Ng5#h`Kz2XQcVONljjD(4x0*9RW2WVsU~z9lLWc$HW*EWBurw&=uV<C7@8!+
z$z^sCdbRPhlyk<~HA6NNU^j(&qw6J_ACzdc2_X-L48SRvz{wcJnlnHA*{XFJ1E@^K
zE(cQA#97#?$N$x-k70(TJxyT(eP16)g=S3i7r$?EFS_0><E0(H6VB^e$u-UPOU=(K
z+q$v7q6X_xDG4U`OQmJmK7Y-~ctDv|&evCzQn_fWJXTp%ZaC$b%H2+>sp7C33dWR6
z3Uj2CwqOqzNmC(KHIW`$Rw_MUS(!+|9)g9y9tIW_L0~;ueacWum&(HNSTv&$F!BHk
ziG9I%9IQhq;6$v#G88d5fUjN-u0#DQcC7EV^D{cG#m`KzLm?3Lvs@tLwujkd+$P3Y
z?4*C5za#za#D->howOd@G?(pd=$eFDyp2<*^8CbVk_ErC)B5tsz)>YAIXXYf##ySQ
zB84;A$D)-vMIX#2B=wQYq%>0+S2d=|I0-9I!B8F>cEDk|N_gK994FbYw7$NvYxC~>
zL~gA%ar7*zi4pfjWDWK42$@^UTc6GB&Fsq*(wRAwsaU_VIW;mk+!sSvm>UdyG2W%0
zatB8_W4<4)l^1ZgeU#`2GSEdmLv+|DinBM@(k>0g$lCpeVVV+=mqNiJx|H~dP*&)~
zV>njmNGnxqp(di>iIOLj2N&+@1t%sLuDu9_T(yAt|GPUOd0I|d+>=?`i;=+izo<1+
z5U#kMApk+u2uv+*eldC-OG_9Q>l8ahan>|ze0zqu5DzzEQ=X}`!C5Y3guV;&8mGpW
zuo)*|6lG-cQ^mhz^K)C{S+>8*9sfTQ^ng+XUz0tqZI1OJc1-0%=mZ*KK-iUwfhM`@
z>JeVK43a6S3(?^zsUv>Fv|*4Q5<*#KkI8IT{M<MedNBZ^&52(X&5Mck1Pgv4Z+-E^
zKGK?0pI;0hV1D-H5BG$66TPA6`2B(Iuvj7yYgxIED&8a(cQa-pa@9#{C7;}dWf41{
zV*1!xYhm06e`41+pD5D}Qstfim^AwN(5sb7<>!x-DTFYO_K(LSk>Q646rFMTvv~Mx
zdWti#8<QBNq9eb2Q+8^{(UV8lu|5%xxZ4%YL=LO(oge8>#3x3Ri>rbPpZf+_L##GX
zT~F<JHHO7w)>-ZMmh>n;usU)}(bR1}8{zxYd27e_m;^BVO#DaT<g_$>LDM=1`UVIb
zf^x*hD^%eWIcWSokZ$({Wv+Twk|@gP4kG?dEVK;$wl4z_BLz3S1wClw`Q}76&P2*e
z3C4~OYG2P~BT+S)jKv7fc_#O_iZ_`h-OL6>uUAo*VF$;<6PV#joFVVUirlv9xtuNw
z*d=Y}kDE?Ev42<pk_M0IiSpWov}4a9BN#CZk;)r)Y+r1kKP3D5wTBrPqNLf>Xq;|f
zXrPhG#ay}T@a@Z*&Z`L7>1KIw9n6t%B)Z+}#;7^t&3B{0M|n@o#56WcjbDl3+Pd7p
zw(6RHmwS<XxZ%60N#=INXLy8W266}|#J$#9ONcn+93Ic{S5`D$>F9&zJXUBT@h;?p
zph~~n3u<JGWF4dvAzp;^D5bc=Fby77BDr?tR>8*4D4h!yHz`Hj))(|B)wrT?WCfIf
zJnJ|}&HFW}@KRA~H!v*6Fw#h`7cG4bCxJ(>&(zbf5MjBDWcEw3S!IQeBj9C%3_(UV
z61Jt09(!5<nS|R`se_(7m`DGL-h3TB?p=XZQ;U8U7vcj+<YvTS35)d#{`ZkIy(yK%
zAZIZ_*Eqs339IFXJh1*dj$EccK`uz&FEF)*IEw996T#z=kor9@0A}-e6HdMEM9bu4
zJu9OiEhQw~dh9@%bI5_*#qQY8RC&IdSV4+2TH_~|kQ9KQsRTsd*z0v2i;Dp*(lp{g
zCl)L#W+L_x)36JZcn=yVT|`sIS?e*|jtY^^&TL4i^(<s;8y(#qUmA`938}EkIwnHh
zMYLJs5^$4%jv^1otAwTwPq==?_=ZX~(%SuJ{5Eb_0L(eBYEw!%^~Qb#7-7B2WyQr&
zQqH4i^IGP9Gd>(TZth4XuL>u5`MjLif;adm`U4z}f*;BAG>b4{l1((0p!$J8n8PIq
z=@I&IU8e}RnX%b&#<+-mfRHMrP$Y@AMEnFJgf{XFBt!`#BJ;W^eSVlQT!!<}L~V1;
zLnJeA{ad~>;%s8X*b+)bSy)aJRS3x=n>0f3_eA;KGWiIoL5d6oI7371R#oG7w<0*<
zj8`UDV~47@uU{`<2NS{%N9OXk+8I3(QtdG>E`ai~Wl!$2UDYtE<e;J*hNO*{BFTAo
zdE`8qx?cz>$@bK#ARvw!*;TW&XM`g7Qq$w1ovEYy)4sh2j~;U=@fOK>=VD2riNbNH
z2OAb#hFPdnX{hS3p^Y@cd}cIRLqS<mgta8SvQDNM%8-45<(@(u5sz;Na#thHsY!iK
zj5C#v!363xZ@kh&h&lw+6ay>Hj0wwGu>O3UR=NO-O_YpYR8AOx=O!j{Hteu^d~(z1
zdCS27aPj1(hyE8H$aEbc%PDYr*c1Q$b0vk<e*BlweeNSv06>BP00{VRh3QJ`jWD_b
zu(9-o9XhXrso#X~CH!3v9~{+oZdsTwvryw@>=j^&XFxJ(;kJddF%-@wyBg~(x!sGN
z0hlH<UKx*6pGNpG-29k*`N^TOT0*Dsmr0IcN6VvtLbcP$<`m_dwv3#}Qbguu7b;=8
zEP`85Mb*sX;bD4kQJcjaW9MD0bD31O0L-rpq(z4s5T6GSJCB>jZ7DzzwN>^bDGZU}
zV9$_{EDBS#Ja;UOzG|6nhXW)G05brxLNGC-Fr;yT!f^tws}^-d!zuXNDk<FoWnf|6
zOSb%kG6;p2lq?E(OBq6epprwKu2J$ZX^T>TLt(49ECY%Ii!MqGXZbp%gc9{DWn^ia
z;^F~jpH(WL(9e`ALi(Mu4D_B;Jj8WWSq^{ZoRu0FQ-hclp<gFG9UO^i&t)(Jx1Xs=
zfTq8arQ+A<Oh~W$tqjakt49lUBjK!6-KEMm(9r$pH|Zc#I-YzoW%4IT@cxFlI%H|F
zZ8i-q6`Ahz*Q94<!IUW-7f+r7I(j6I0nI&|uo|b-rqh=n*H31QZX`j<2@`8kE7h0i
z?6xu07{?bXnarQAs$+A$mIfAIr<)m-)QLtB<~);#wVV!%W62a^$>qk(s`<mMpVl@l
SRT;ZV)m|U;PpUtTivR!*e|(q#

diff --git a/assets/style.0a1d87af.css b/assets/style.0a1d87af.css
deleted file mode 100644
index d2011a4..0000000
--- a/assets/style.0a1d87af.css
+++ /dev/null
@@ -1 +0,0 @@
-@charset "UTF-8";@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:normal;font-named-instance:"Regular";src:url(/VFluent3/assets/inter-roman-cyrillic.5f2c6c8c.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:normal;font-named-instance:"Regular";src:url(/VFluent3/assets/inter-roman-cyrillic-ext.e75737ce.woff2) format("woff2");unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:normal;font-named-instance:"Regular";src:url(/VFluent3/assets/inter-roman-greek.d5a6d92a.woff2) format("woff2");unicode-range:U+0370-03FF}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:normal;font-named-instance:"Regular";src:url(/VFluent3/assets/inter-roman-greek-ext.ab0619bc.woff2) format("woff2");unicode-range:U+1F00-1FFF}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:normal;font-named-instance:"Regular";src:url(/VFluent3/assets/inter-roman-latin.2ed14f66.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:normal;font-named-instance:"Regular";src:url(/VFluent3/assets/inter-roman-latin-ext.0030eebd.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:normal;font-named-instance:"Regular";src:url(/VFluent3/assets/inter-roman-vietnamese.14ce25a6.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:italic;font-named-instance:"Italic";src:url(/VFluent3/assets/inter-italic-cyrillic.ea42a392.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:italic;font-named-instance:"Italic";src:url(/VFluent3/assets/inter-italic-cyrillic-ext.33bd5a8e.woff2) format("woff2");unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:italic;font-named-instance:"Italic";src:url(/VFluent3/assets/inter-italic-greek.8f4463c4.woff2) format("woff2");unicode-range:U+0370-03FF}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:italic;font-named-instance:"Italic";src:url(/VFluent3/assets/inter-italic-greek-ext.4fbe9427.woff2) format("woff2");unicode-range:U+1F00-1FFF}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:italic;font-named-instance:"Italic";src:url(/VFluent3/assets/inter-italic-latin.bd3b6f56.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:italic;font-named-instance:"Italic";src:url(/VFluent3/assets/inter-italic-latin-ext.bd8920cc.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:italic;font-named-instance:"Italic";src:url(/VFluent3/assets/inter-italic-vietnamese.6ce511fb.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB}@font-face{font-family:Inter var experimental;font-weight:100 900;font-display:swap;font-style:oblique 0deg 10deg;src:url(/VFluent3/assets/inter-cyrillic.f8750142.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:Inter var experimental;font-weight:100 900;font-display:swap;font-style:oblique 0deg 10deg;src:url(/VFluent3/assets/inter-cyrillic-ext.0877b0d9.woff2) format("woff2");unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Inter var experimental;font-weight:100 900;font-display:swap;font-style:oblique 0deg 10deg;src:url(/VFluent3/assets/inter-greek.117e1956.woff2) format("woff2");unicode-range:U+0370-03FF}@font-face{font-family:Inter var experimental;font-weight:100 900;font-display:swap;font-style:oblique 0deg 10deg;src:url(/VFluent3/assets/inter-greek-ext.3e6f6728.woff2) format("woff2");unicode-range:U+1F00-1FFF}@font-face{font-family:Inter var experimental;font-weight:100 900;font-display:swap;font-style:oblique 0deg 10deg;src:url(/VFluent3/assets/inter-latin.4fe6132f.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Inter var experimental;font-weight:100 900;font-display:swap;font-style:oblique 0deg 10deg;src:url(/VFluent3/assets/inter-latin-ext.7cc429bc.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Inter var experimental;font-weight:100 900;font-display:swap;font-style:oblique 0deg 10deg;src:url(/VFluent3/assets/inter-vietnamese.2c644a25.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB}:root{--vp-c-white: #ffffff;--vp-c-white-soft: #f9f9f9;--vp-c-white-mute: #f1f1f1;--vp-c-black: #1a1a1a;--vp-c-black-pure: #000000;--vp-c-black-soft: #242424;--vp-c-black-mute: #2f2f2f;--vp-c-gray: #8e8e8e;--vp-c-gray-light-1: #aeaeae;--vp-c-gray-light-2: #c7c7c7;--vp-c-gray-light-3: #d1d1d1;--vp-c-gray-light-4: #e5e5e5;--vp-c-gray-light-5: #f2f2f2;--vp-c-gray-dark-1: #636363;--vp-c-gray-dark-2: #484848;--vp-c-gray-dark-3: #3a3a3a;--vp-c-gray-dark-4: #282828;--vp-c-gray-dark-5: #202020;--vp-c-divider-light-1: rgba(60, 60, 60, .29);--vp-c-divider-light-2: rgba(60, 60, 60, .12);--vp-c-divider-dark-1: rgba(84, 84, 84, .65);--vp-c-divider-dark-2: rgba(84, 84, 84, .48);--vp-c-text-light-1: var(--vp-c-indigo);--vp-c-text-light-2: rgba(60, 60, 60, .7);--vp-c-text-light-3: rgba(60, 60, 60, .33);--vp-c-text-light-4: rgba(60, 60, 60, .18);--vp-c-text-dark-1: rgba(255, 255, 255, .87);--vp-c-text-dark-2: rgba(235, 235, 235, .6);--vp-c-text-dark-3: rgba(235, 235, 235, .38);--vp-c-text-dark-4: rgba(235, 235, 235, .18);--vp-c-indigo: #213547;--vp-c-indigo-soft: #476582;--vp-c-indigo-light: #aac8e4;--vp-c-indigo-lighter: #c9def1;--vp-c-indigo-dark: #1d2f3f;--vp-c-indigo-darker: #14212e;--vp-c-green: #42b883;--vp-c-green-light: #42d392;--vp-c-green-lighter: #35eb9a;--vp-c-green-dark: #33a06f;--vp-c-green-darker: #155f3e;--vp-c-green-dimm-1: rgba(66, 184, 131, .5);--vp-c-green-dimm-2: rgba(66, 184, 131, .25);--vp-c-green-dimm-3: rgba(66, 184, 131, .05);--vp-c-yellow: #ffc517;--vp-c-yellow-light: #fcd253;--vp-c-yellow-lighter: #fcfc7c;--vp-c-yellow-dark: #e0ad15;--vp-c-yellow-darker: #ad850e;--vp-c-yellow-dimm-1: rgba(255, 197, 23, .5);--vp-c-yellow-dimm-2: rgba(255, 197, 23, .25);--vp-c-yellow-dimm-3: rgba(255, 197, 23, .05);--vp-c-red: #ed3c50;--vp-c-red-light: #f54e82;--vp-c-red-lighter: #fd1d7c;--vp-c-red-dark: #cd2d3f;--vp-c-red-darker: #ab2131;--vp-c-red-dimm-1: rgba(237, 60, 80, .5);--vp-c-red-dimm-2: rgba(237, 60, 80, .25);--vp-c-red-dimm-3: rgba(237, 60, 80, .05)}:root{--vp-c-bg: var(--vp-c-white);--vp-c-bg-soft: var(--vp-c-white-soft);--vp-c-bg-mute: var(--vp-c-white-mute);--vp-c-bg-alt: var(--vp-c-white-soft);--vp-c-divider: var(--vp-c-divider-light-1);--vp-c-divider-light: var(--vp-c-divider-light-2);--vp-c-divider-inverse: var(--vp-c-divider-dark-1);--vp-c-divider-inverse-light: var(--vp-c-divider-dark-2);--vp-c-text-1: var(--vp-c-text-light-1);--vp-c-text-2: var(--vp-c-text-light-2);--vp-c-text-3: var(--vp-c-text-light-3);--vp-c-text-4: var(--vp-c-text-light-4);--vp-c-text-inverse-1: var(--vp-c-text-dark-1);--vp-c-text-inverse-2: var(--vp-c-text-dark-2);--vp-c-text-inverse-3: var(--vp-c-text-dark-3);--vp-c-text-inverse-4: var(--vp-c-text-dark-4);--vp-c-text-code: var(--vp-c-indigo-soft);--vp-c-brand: var(--vp-c-green);--vp-c-brand-light: var(--vp-c-green-light);--vp-c-brand-lighter: var(--vp-c-green-lighter);--vp-c-brand-dark: var(--vp-c-green-dark);--vp-c-brand-darker: var(--vp-c-green-darker);--vp-c-sponsor: #fd1d7c}.dark{--vp-c-bg: var(--vp-c-black-soft);--vp-c-bg-soft: var(--vp-c-black-mute);--vp-c-bg-mute: var(--vp-c-gray-dark-3);--vp-c-bg-alt: var(--vp-c-black);--vp-c-divider: var(--vp-c-divider-dark-1);--vp-c-divider-light: var(--vp-c-divider-dark-2);--vp-c-divider-inverse: var(--vp-c-divider-light-1);--vp-c-divider-inverse-light: var(--vp-c-divider-light-2);--vp-c-text-1: var(--vp-c-text-dark-1);--vp-c-text-2: var(--vp-c-text-dark-2);--vp-c-text-3: var(--vp-c-text-dark-3);--vp-c-text-4: var(--vp-c-text-dark-4);--vp-c-text-inverse-1: var(--vp-c-text-light-1);--vp-c-text-inverse-2: var(--vp-c-text-light-2);--vp-c-text-inverse-3: var(--vp-c-text-light-3);--vp-c-text-inverse-4: var(--vp-c-text-light-4);--vp-c-text-code: var(--vp-c-indigo-lighter)}:root{--vp-font-family-base: "Inter var experimental", "Inter var", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;--vp-font-family-mono: Menlo, Monaco, Consolas, "Courier New", monospace}:root{--vp-shadow-1: 0 1px 2px rgba(0, 0, 0, .04), 0 1px 2px rgba(0, 0, 0, .06);--vp-shadow-2: 0 3px 12px rgba(0, 0, 0, .07), 0 1px 4px rgba(0, 0, 0, .07);--vp-shadow-3: 0 12px 32px rgba(0, 0, 0, .1), 0 2px 6px rgba(0, 0, 0, .08);--vp-shadow-4: 0 14px 44px rgba(0, 0, 0, .12), 0 3px 9px rgba(0, 0, 0, .12);--vp-shadow-5: 0 18px 56px rgba(0, 0, 0, .16), 0 4px 12px rgba(0, 0, 0, .16)}:root{--vp-z-index-local-nav: 10;--vp-z-index-nav: 20;--vp-z-index-backdrop: 30;--vp-z-index-sidebar: 40;--vp-z-index-footer: 50}:root{--vp-icon-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' height='20' width='20' stroke='rgba(128,128,128,1)' stroke-width='2' class='h-6 w-6' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2'/%3E%3C/svg%3E");--vp-icon-copied: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' height='20' width='20' stroke='rgba(128,128,128,1)' stroke-width='2' class='h-6 w-6' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2m-6 9 2 2 4-4'/%3E%3C/svg%3E")}:root{--vp-layout-max-width: 1440px}:root{--vp-code-line-height: 1.7;--vp-code-font-size: .875em;--vp-code-block-color: var(--vp-c-text-dark-1);--vp-code-block-bg: #292d3e;--vp-code-line-highlight-color: rgba(0, 0, 0, .5);--vp-code-line-number-color: var(--vp-c-text-dark-3);--vp-code-copy-code-hover-bg: rgba(255, 255, 255, .05);--vp-code-copy-code-active-text: var(--vp-c-text-dark-2)}.dark{--vp-code-block-bg: var(--vp-c-bg-alt)}:root{--vp-button-brand-border: var(--vp-c-brand-light);--vp-button-brand-text: var(--vp-c-text-dark-1);--vp-button-brand-bg: var(--vp-c-brand);--vp-button-brand-hover-border: var(--vp-c-brand-light);--vp-button-brand-hover-text: var(--vp-c-text-dark-1);--vp-button-brand-hover-bg: var(--vp-c-brand-light);--vp-button-brand-active-border: var(--vp-c-brand-light);--vp-button-brand-active-text: var(--vp-c-text-dark-1);--vp-button-brand-active-bg: var(--vp-button-brand-bg);--vp-button-alt-border: var(--vp-c-gray-light-3);--vp-button-alt-text: var(--vp-c-text-light-1);--vp-button-alt-bg: var(--vp-c-gray-light-5);--vp-button-alt-hover-border: var(--vp-c-gray-light-3);--vp-button-alt-hover-text: var(--vp-c-text-light-1);--vp-button-alt-hover-bg: var(--vp-c-gray-light-4);--vp-button-alt-active-border: var(--vp-c-gray-light-3);--vp-button-alt-active-text: var(--vp-c-text-light-1);--vp-button-alt-active-bg: var(--vp-c-gray-light-3);--vp-button-sponsor-border: var(--vp-c-gray-light-3);--vp-button-sponsor-text: var(--vp-c-text-light-2);--vp-button-sponsor-bg: transparent;--vp-button-sponsor-hover-border: var(--vp-c-sponsor);--vp-button-sponsor-hover-text: var(--vp-c-sponsor);--vp-button-sponsor-hover-bg: transparent;--vp-button-sponsor-active-border: var(--vp-c-sponsor);--vp-button-sponsor-active-text: var(--vp-c-sponsor);--vp-button-sponsor-active-bg: transparent}.dark{--vp-button-brand-border: var(--vp-c-brand-light);--vp-button-brand-text: var(--vp-c-text-dark-1);--vp-button-brand-bg: var(--vp-c-brand-dark);--vp-button-brand-hover-border: var(--vp-c-brand-lighter);--vp-button-brand-hover-text: var(--vp-c-text-dark-1);--vp-button-brand-hover-bg: var(--vp-c-brand);--vp-button-brand-active-border: var(--vp-c-brand-lighter);--vp-button-brand-active-text: var(--vp-c-text-dark-1);--vp-button-brand-active-bg: var(--vp-button-brand-bg);--vp-button-alt-border: var(--vp-c-gray-dark-2);--vp-button-alt-text: var(--vp-c-text-dark-1);--vp-button-alt-bg: var(--vp-c-bg-mute);--vp-button-alt-hover-border: var(--vp-c-gray-dark-2);--vp-button-alt-hover-text: var(--vp-c-text-dark-1);--vp-button-alt-hover-bg: var(--vp-c-gray-dark-2);--vp-button-alt-active-border: var(--vp-c-gray-dark-2);--vp-button-alt-active-text: var(--vp-c-text-dark-1);--vp-button-alt-active-bg: var(--vp-button-alt-bg);--vp-button-sponsor-border: var(--vp-c-gray-dark-1);--vp-button-sponsor-text: var(--vp-c-text-dark-2)}:root{--vp-custom-block-code-font-size: 13px;--vp-custom-block-info-border: var(--vp-c-divider-light);--vp-custom-block-info-text: var(--vp-c-text-2);--vp-custom-block-info-bg: var(--vp-c-white-soft);--vp-custom-block-info-code-bg: var(--vp-c-gray-light-4);--vp-custom-block-tip-border: var(--vp-c-green-dimm-1);--vp-custom-block-tip-text: var(--vp-c-green-darker);--vp-custom-block-tip-bg: var(--vp-c-green-dimm-3);--vp-custom-block-tip-code-bg: var(--vp-custom-block-tip-bg);--vp-custom-block-warning-border: var(--vp-c-yellow-dimm-1);--vp-custom-block-warning-text: var(--vp-c-yellow-darker);--vp-custom-block-warning-bg: var(--vp-c-yellow-dimm-3);--vp-custom-block-warning-code-bg: var(--vp-custom-block-warning-bg);--vp-custom-block-danger-border: var(--vp-c-red-dimm-1);--vp-custom-block-danger-text: var(--vp-c-red-darker);--vp-custom-block-danger-bg: var(--vp-c-red-dimm-3);--vp-custom-block-danger-code-bg: var(--vp-custom-block-danger-bg);--vp-custom-block-details-border: var(--vp-custom-block-info-border);--vp-custom-block-details-text: var(--vp-custom-block-info-text);--vp-custom-block-details-bg: var(--vp-custom-block-info-bg);--vp-custom-block-details-code-bg: var(--vp-custom-block-details-bg)}.dark{--vp-custom-block-info-border: var(--vp-c-divider-light);--vp-custom-block-info-bg: var(--vp-c-black-mute);--vp-custom-block-info-code-bg: var(--vp-c-gray-dark-4);--vp-custom-block-tip-border: var(--vp-c-green-dimm-2);--vp-custom-block-tip-text: var(--vp-c-green-light);--vp-custom-block-warning-border: var(--vp-c-yellow-dimm-2);--vp-custom-block-warning-text: var(--vp-c-yellow-light);--vp-custom-block-danger-border: var(--vp-c-red-dimm-2);--vp-custom-block-danger-text: var(--vp-c-red-light)}:root{--vp-nav-height: var(--vp-nav-height-mobile);--vp-nav-height-mobile: 56px;--vp-nav-height-desktop: 72px}@media (min-width: 960px){:root{--vp-nav-height: var(--vp-nav-height-desktop)}}:root{--vp-sidebar-width: 272px}:root{--vp-home-hero-name-color: var(--vp-c-brand);--vp-home-hero-name-background: transparent;--vp-home-hero-image-background-image: none;--vp-home-hero-image-filter: none}*,:before,:after{box-sizing:border-box}html{line-height:1.4;font-size:16px;-webkit-text-size-adjust:100%}html.dark{color-scheme:dark}body{margin:0;width:100%;min-width:320px;min-height:100vh;line-height:24px;font-family:var(--vp-font-family-base);font-size:16px;font-weight:400;color:var(--vp-c-text-1);background-color:var(--vp-c-bg);direction:ltr;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}main{display:block}h1,h2,h3,h4,h5,h6{margin:0;line-height:24px;font-size:16px;font-weight:400}p{margin:0}strong,b{font-weight:600}a,area,button,[role=button],input,label,select,summary,textarea{touch-action:manipulation}a{color:inherit;text-decoration:inherit}ol,ul{list-style:none;margin:0;padding:0}blockquote{margin:0}pre,code,kbd,samp{font-family:var(--vp-font-family-mono)}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}figure{margin:0}img,video{max-width:100%;height:auto}button,input,optgroup,select,textarea{border:0;padding:0;line-height:inherit;color:inherit}button{padding:0;font-family:inherit;background-color:transparent;background-image:none}button,[role=button]{cursor:pointer}button:focus,button:focus-visible{outline:1px dotted;outline:4px auto -webkit-focus-ring-color}button:focus:not(:focus-visible){outline:none!important}input:focus,textarea:focus,select:focus{outline:none}table{border-collapse:collapse}input{background-color:transparent}input::-moz-placeholder,textarea::-moz-placeholder{color:var(--vp-c-text-3)}input::placeholder,textarea::placeholder{color:var(--vp-c-text-3)}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}textarea{resize:vertical}select{-webkit-appearance:none}fieldset{margin:0;padding:0}.visually-hidden{position:absolute;width:1px;height:1px;white-space:nowrap;clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);overflow:hidden}.custom-block{border:1px solid transparent;border-radius:8px;padding:16px 16px 8px;line-height:24px;font-size:14px;color:var(--vp-c-text-2)}.custom-block.info{border-color:var(--vp-custom-block-info-border);color:var(--vp-custom-block-info-text);background-color:var(--vp-custom-block-info-bg)}.custom-block.info code{background-color:var(--vp-custom-block-info-code-bg)}.custom-block.tip{border-color:var(--vp-custom-block-tip-border);color:var(--vp-custom-block-tip-text);background-color:var(--vp-custom-block-tip-bg)}.custom-block.tip code{background-color:var(--vp-custom-block-tip-code-bg)}.custom-block.warning{border-color:var(--vp-custom-block-warning-border);color:var(--vp-custom-block-warning-text);background-color:var(--vp-custom-block-warning-bg)}.custom-block.warning code{background-color:var(--vp-custom-block-warning-code-bg)}.custom-block.danger{border-color:var(--vp-custom-block-danger-border);color:var(--vp-custom-block-danger-text);background-color:var(--vp-custom-block-danger-bg)}.custom-block.danger code{background-color:var(--vp-custom-block-danger-code-bg)}.custom-block.details{border-color:var(--vp-custom-block-details-border);color:var(--vp-custom-block-details-text);background-color:var(--vp-custom-block-details-bg)}.custom-block.details code{background-color:var(--vp-custom-block-details-code-bg)}.custom-block-title{font-weight:700}.custom-block p+p{margin:8px 0}.custom-block.details summary{margin:0 0 8px;font-weight:700}.custom-block.details summary+p{margin:8px 0}.custom-block a{color:inherit;font-weight:600;text-decoration:underline;transition:opacity .25s}.custom-block a:hover{opacity:.6}.custom-block code{font-size:var(--vp-custom-block-code-font-size)}.dark .vp-code-light{display:none}html:not(.dark) .vp-code-dark{display:none}.vp-doc h1,.vp-doc h2,.vp-doc h3,.vp-doc h4,.vp-doc h5,.vp-doc h6{position:relative;font-weight:600;outline:none}.vp-doc h1{letter-spacing:-.02em;line-height:40px;font-size:28px}.vp-doc h2{margin:48px 0 16px;border-top:1px solid var(--vp-c-divider-light);padding-top:24px;letter-spacing:-.02em;line-height:32px;font-size:24px}.vp-doc h3{margin:32px 0 0;letter-spacing:-.01em;line-height:28px;font-size:20px}.vp-doc .header-anchor{float:left;margin-left:-.87em;padding-right:.23em;font-weight:500;opacity:0;transition:color .25s,opacity .25s}.vp-doc h1:hover .header-anchor,.vp-doc h1 .header-anchor:focus,.vp-doc h2:hover .header-anchor,.vp-doc h2 .header-anchor:focus,.vp-doc h3:hover .header-anchor,.vp-doc h3 .header-anchor:focus,.vp-doc h4:hover .header-anchor,.vp-doc h4 .header-anchor:focus,.vp-doc h5:hover .header-anchor,.vp-doc h5 .header-anchor:focus,.vp-doc h6:hover .header-anchor,.vp-doc h6 .header-anchor:focus{opacity:1}@media (min-width: 768px){.vp-doc h1{letter-spacing:-.02em;line-height:40px;font-size:32px}}.vp-doc p,.vp-doc summary{margin:16px 0}.vp-doc p{line-height:28px}.vp-doc blockquote{margin:16px 0;border-left:2px solid var(--vp-c-divider);padding-left:16px;transition:border-color .5s}.vp-doc blockquote>p{margin:0;font-size:16px;color:var(--vp-c-text-2);transition:color .5s}.vp-doc a{font-weight:500;color:var(--vp-c-brand);-webkit-text-decoration-style:dotted;text-decoration-style:dotted;transition:color .25s}.vp-doc a:hover{color:var(--vp-c-brand-dark)}.vp-doc strong{font-weight:600}.vp-doc ul,.vp-doc ol{padding-left:1.25rem;margin:16px 0}.vp-doc ul{list-style:disc}.vp-doc ol{list-style:decimal}.vp-doc li+li{margin-top:8px}.vp-doc li>ol,.vp-doc li>ul{margin:8px 0 0}.vp-doc table{display:block;border-collapse:collapse;margin:20px 0;overflow-x:auto}.vp-doc tr{border-top:1px solid var(--vp-c-divider);transition:background-color .5s}.vp-doc tr:nth-child(2n){background-color:var(--vp-c-bg-soft)}.vp-doc th,.vp-doc td{border:1px solid var(--vp-c-divider);padding:12px 16px}.vp-doc th{font-size:16px;font-weight:600;background-color:var(--vp-c-white-soft)}.dark .vp-doc th{background-color:var(--vp-c-black)}.vp-doc hr{margin:16px 0;border:none;border-top:1px solid var(--vp-c-divider-light)}.vp-doc .custom-block{margin:16px 0}.vp-doc .custom-block p{margin:8px 0;line-height:24px}.vp-doc .custom-block p:first-child{margin:0}.vp-doc .custom-block a{color:inherit;font-weight:600;text-decoration:underline;transition:opacity .25s}.vp-doc .custom-block a:hover{opacity:.6}.vp-doc .custom-block code{font-size:var(--vp-custom-block-code-font-size);font-weight:700;color:inherit}.vp-doc .custom-block div[class*=language-]{margin:8px 0}.vp-doc .custom-block div[class*=language-] code{font-weight:400;background-color:var(--vp-code-block-bg)}.vp-doc :not(pre,h1,h2,h3,h4,h5,h6)>code{font-size:var(--vp-code-font-size)}.vp-doc :not(pre)>code{border-radius:4px;padding:3px 6px;color:var(--vp-c-text-code);background-color:var(--vp-c-bg-mute);transition:color .5s,background-color .5s}.vp-doc h1>code,.vp-doc h2>code,.vp-doc h3>code{font-size:.9em}.vp-doc a>code{color:var(--vp-c-brand);transition:color .25s}.vp-doc a:hover>code{color:var(--vp-c-brand-dark)}.vp-doc div[class*=language-]{position:relative;margin:16px -24px;background-color:var(--vp-code-block-bg);overflow-x:auto;transition:background-color .5s}@media (min-width: 640px){.vp-doc div[class*=language-]{border-radius:8px;margin:16px 0}}@media (max-width: 639px){.vp-doc li div[class*=language-]{border-radius:8px 0 0 8px}}.vp-doc div[class*=language-]+div[class*=language-],.vp-doc div[class$=-api]+div[class*=language-],.vp-doc div[class*=language-]+div[class$=-api]>div[class*=language-]{margin-top:-8px}.vp-doc [class*=language-] pre,.vp-doc [class*=language-] code{text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;hyphens:none}.vp-doc [class*=language-] pre{position:relative;z-index:1;margin:0;padding:16px 0;background:transparent;overflow-x:auto}.vp-doc [class*=language-] code{display:block;padding:0 24px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;line-height:var(--vp-code-line-height);font-size:var(--vp-code-font-size);color:var(--vp-code-block-color);transition:color .5s}.vp-doc .highlight-lines{position:absolute;top:0;bottom:0;left:0;padding-top:16px;width:100%;line-height:var(--vp-code-line-height);font-family:var(--vp-font-family-mono);font-size:var(--vp-code-font-size);-webkit-user-select:none;-moz-user-select:none;user-select:none;overflow:hidden}.vp-doc .highlight-lines .highlighted{background-color:var(--vp-code-line-highlight-color);transition:background-color .5s}.vp-doc div[class*=language-].line-numbers-mode{padding-left:32px}.vp-doc div[class*=language-].line-numbers-mode pre{padding-left:16px}.vp-doc .line-numbers-wrapper{position:absolute;top:0;bottom:0;left:0;z-index:3;border-right:1px solid var(--vp-c-divider-dark-2);padding-top:16px;width:32px;text-align:center;font-family:var(--vp-font-family-mono);line-height:var(--vp-code-line-height);font-size:var(--vp-code-font-size);color:var(--vp-code-line-number-color);transition:border-color .5s,color .5s}.vp-doc [class*=language-]>span.copy{position:absolute;top:8px;right:8px;z-index:2;display:block;justify-content:center;align-items:center;border-radius:4px;width:40px;height:40px;background-color:var(--vp-code-block-bg);opacity:0;cursor:pointer;background-image:var(--vp-icon-copy);background-position:50%;background-size:20px;background-repeat:no-repeat;transition:opacity .25s}.vp-doc [class*=language-]:hover>span.copy{opacity:1}.vp-doc [class*=language-]>span.copy:hover{background-color:var(--vp-code-copy-code-hover-bg)}.vp-doc [class*=language-]>span.copy.copied,.vp-doc [class*=language-]>span.copy:hover.copied{border-radius:0 4px 4px 0;background-color:var(--vp-code-copy-code-hover-bg);background-image:var(--vp-icon-copied)}.vp-doc [class*=language-]>span.copy.copied:before,.vp-doc [class*=language-]>span.copy:hover.copied:before{position:relative;left:-65px;display:block;border-radius:4px 0 0 4px;padding-top:8px;width:64px;height:40px;text-align:center;font-size:12px;font-weight:500;color:var(--vp-code-copy-code-active-text);background-color:var(--vp-code-copy-code-hover-bg);white-space:nowrap;content:"Copied"}.vp-doc [class*=language-]:before{position:absolute;top:6px;right:12px;z-index:2;font-size:12px;font-weight:500;color:var(--vp-c-text-dark-3);transition:color .5s,opacity .5s}.vp-doc [class*=language-]:hover:before{opacity:0}.vp-doc [class~=language-c]:before{content:"c"}.vp-doc [class~=language-css]:before{content:"css"}.vp-doc [class~=language-go]:before{content:"go"}.vp-doc [class~=language-html]:before{content:"html"}.vp-doc [class~=language-java]:before{content:"java"}.vp-doc [class~=language-javascript]:before{content:"js"}.vp-doc [class~=language-js]:before{content:"js"}.vp-doc [class~=language-json]:before{content:"json"}.vp-doc [class~=language-jsx]:before{content:"jsx"}.vp-doc [class~=language-less]:before{content:"less"}.vp-doc [class~=language-markdown]:before{content:"md"}.vp-doc [class~=language-md]:before{content:"md"}.vp-doc [class~=language-php]:before{content:"php"}.vp-doc [class~=language-python]:before{content:"py"}.vp-doc [class~=language-py]:before{content:"py"}.vp-doc [class~=language-rb]:before{content:"rb"}.vp-doc [class~=language-ruby]:before{content:"rb"}.vp-doc [class~=language-rust]:before{content:"rust"}.vp-doc [class~=language-sass]:before{content:"sass"}.vp-doc [class~=language-scss]:before{content:"scss"}.vp-doc [class~=language-sh]:before{content:"sh"}.vp-doc [class~=language-bash]:before{content:"sh"}.vp-doc [class~=language-stylus]:before{content:"styl"}.vp-doc [class~=language-vue-html]:before{content:"template"}.vp-doc [class~=language-typescript]:before{content:"ts"}.vp-doc [class~=language-ts]:before{content:"ts"}.vp-doc [class~=language-tsx]:before{content:"tsx"}.vp-doc [class~=language-vue]:before{content:"vue"}.vp-doc [class~=language-yaml]:before{content:"yaml"}.vp-doc .VPTeamMembers{margin-top:24px}.vp-doc .VPTeamMembers.small.count-1 .container{margin:0!important;max-width:calc((100% - 24px)/2)!important}.vp-doc .VPTeamMembers.small.count-2 .container,.vp-doc .VPTeamMembers.small.count-3 .container{max-width:100%!important}.vp-doc .VPTeamMembers.medium.count-1 .container{margin:0!important;max-width:calc((100% - 24px)/2)!important}.vp-sponsor{border-radius:16px;overflow:hidden}.vp-sponsor.aside{border-radius:12px}.vp-sponsor-section+.vp-sponsor-section{margin-top:4px}.vp-sponsor-tier{margin-bottom:4px;text-align:center;letter-spacing:1px;line-height:24px;width:100%;font-weight:600;color:var(--vp-c-text-2);background-color:var(--vp-c-bg-soft)}.vp-sponsor.normal .vp-sponsor-tier{padding:13px 0 11px;font-size:14px}.vp-sponsor.aside .vp-sponsor-tier{padding:9px 0 7px;font-size:12px}.vp-sponsor-grid+.vp-sponsor-tier{margin-top:4px}.vp-sponsor-grid{display:flex;flex-wrap:wrap;gap:4px}.vp-sponsor-grid.xmini .vp-sponsor-grid-link{height:64px}.vp-sponsor-grid.xmini .vp-sponsor-grid-image{max-width:64px;max-height:22px}.vp-sponsor-grid.mini .vp-sponsor-grid-link{height:72px}.vp-sponsor-grid.mini .vp-sponsor-grid-image{max-width:96px;max-height:24px}.vp-sponsor-grid.small .vp-sponsor-grid-link{height:96px}.vp-sponsor-grid.small .vp-sponsor-grid-image{max-width:96px;max-height:24px}.vp-sponsor-grid.medium .vp-sponsor-grid-link{height:112px}.vp-sponsor-grid.medium .vp-sponsor-grid-image{max-width:120px;max-height:36px}.vp-sponsor-grid.big .vp-sponsor-grid-link{height:184px}.vp-sponsor-grid.big .vp-sponsor-grid-image{max-width:192px;max-height:56px}.vp-sponsor-grid[data-vp-grid="2"] .vp-sponsor-grid-item{width:calc((100% - 4px)/2)}.vp-sponsor-grid[data-vp-grid="3"] .vp-sponsor-grid-item{width:calc((100% - 4px * 2) / 3)}.vp-sponsor-grid[data-vp-grid="4"] .vp-sponsor-grid-item{width:calc((100% - 12px)/4)}.vp-sponsor-grid[data-vp-grid="5"] .vp-sponsor-grid-item{width:calc((100% - 16px)/5)}.vp-sponsor-grid[data-vp-grid="6"] .vp-sponsor-grid-item{width:calc((100% - 4px * 5) / 6)}.vp-sponsor-grid-item{flex-shrink:0;width:100%;background-color:var(--vp-c-bg-soft);transition:background-color .25s}.vp-sponsor-grid-item:hover{background-color:var(--vp-c-bg-mute)}.vp-sponsor-grid-item:hover .vp-sponsor-grid-image{filter:grayscale(0) invert(0)}.vp-sponsor-grid-item.empty:hover{background-color:var(--vp-c-bg-soft)}.dark .vp-sponsor-grid-item:hover{background-color:var(--vp-c-white-soft)}.dark .vp-sponsor-grid-item.empty:hover{background-color:var(--vp-c-black-mute)}.vp-sponsor-grid-link{display:flex}.vp-sponsor-grid-box{display:flex;justify-content:center;align-items:center;width:100%}.vp-sponsor-grid-image{max-width:100%;filter:grayscale(1);transition:filter .25s}.dark .vp-sponsor-grid-image{filter:grayscale(1) invert(1)}.VPSkipLink[data-v-bea91388]{top:8px;left:8px;padding:8px 16px;z-index:999;border-radius:8px;font-size:12px;font-weight:700;text-decoration:none;color:var(--vp-c-brand);box-shadow:var(--vp-shadow-3);background-color:var(--vp-c-bg)}.VPSkipLink[data-v-bea91388]:focus{height:auto;width:auto;clip:auto;-webkit-clip-path:none;clip-path:none}.dark .VPSkipLink[data-v-bea91388]{color:var(--vp-c-green)}@media (min-width: 1280px){.VPSkipLink[data-v-bea91388]{top:14px;left:16px}}.VPBackdrop[data-v-7832dbb0]{position:fixed;top:0;right:0;bottom:0;left:0;z-index:var(--vp-z-index-backdrop);background:rgba(0,0,0,.6);transition:opacity .5s}.VPBackdrop.fade-enter-from[data-v-7832dbb0],.VPBackdrop.fade-leave-to[data-v-7832dbb0]{opacity:0}.VPBackdrop.fade-leave-active[data-v-7832dbb0]{transition-duration:.25s}@media (min-width: 1280px){.VPBackdrop[data-v-7832dbb0]{display:none}}html:not(.dark) .VPImage.dark[data-v-1d7f37c8]{display:none}.dark .VPImage.light[data-v-1d7f37c8]{display:none}.VPNavBarTitle[data-v-011600ce]{flex-shrink:0;border-bottom:1px solid transparent}@media (min-width: 960px){.VPNavBarTitle.has-sidebar[data-v-011600ce]{margin-right:32px;width:calc(var(--vp-sidebar-width) - 64px);border-bottom-color:var(--vp-c-divider-light);background-color:var(--vp-c-bg-alt)}}.title[data-v-011600ce]{display:flex;align-items:center;width:100%;height:var(--vp-nav-height);font-size:16px;font-weight:600;color:var(--vp-c-text-1);transition:opacity .25s}.title[data-v-011600ce]:hover{opacity:.6}@media (min-width: 960px){.title[data-v-011600ce]{flex-shrink:0}}[data-v-011600ce] .logo{margin-right:8px;height:24px}/*! @docsearch/css 3.1.1 | MIT License | © Algolia, Inc. and contributors | https://docsearch.algolia.com */:root{--docsearch-primary-color:#5468ff;--docsearch-text-color:#1c1e21;--docsearch-spacing:12px;--docsearch-icon-stroke-width:1.4;--docsearch-highlight-color:var(--docsearch-primary-color);--docsearch-muted-color:#969faf;--docsearch-container-background:rgba(101,108,133,.8);--docsearch-logo-color:#5468ff;--docsearch-modal-width:560px;--docsearch-modal-height:600px;--docsearch-modal-background:#f5f6f7;--docsearch-modal-shadow:inset 1px 1px 0 0 hsla(0,0%,100%,.5),0 3px 8px 0 #555a64;--docsearch-searchbox-height:56px;--docsearch-searchbox-background:#ebedf0;--docsearch-searchbox-focus-background:#fff;--docsearch-searchbox-shadow:inset 0 0 0 2px var(--docsearch-primary-color);--docsearch-hit-height:56px;--docsearch-hit-color:#444950;--docsearch-hit-active-color:#fff;--docsearch-hit-background:#fff;--docsearch-hit-shadow:0 1px 3px 0 #d4d9e1;--docsearch-key-gradient:linear-gradient(-225deg,#d5dbe4,#f8f8f8);--docsearch-key-shadow:inset 0 -2px 0 0 #cdcde6,inset 0 0 1px 1px #fff,0 1px 2px 1px rgba(30,35,90,.4);--docsearch-footer-height:44px;--docsearch-footer-background:#fff;--docsearch-footer-shadow:0 -1px 0 0 #e0e3e8,0 -3px 6px 0 rgba(69,98,155,.12)}html[data-theme=dark]{--docsearch-text-color:#f5f6f7;--docsearch-container-background:rgba(9,10,17,.8);--docsearch-modal-background:#15172a;--docsearch-modal-shadow:inset 1px 1px 0 0 #2c2e40,0 3px 8px 0 #000309;--docsearch-searchbox-background:#090a11;--docsearch-searchbox-focus-background:#000;--docsearch-hit-color:#bec3c9;--docsearch-hit-shadow:none;--docsearch-hit-background:#090a11;--docsearch-key-gradient:linear-gradient(-26.5deg,#565872,#31355b);--docsearch-key-shadow:inset 0 -2px 0 0 #282d55,inset 0 0 1px 1px #51577d,0 2px 2px 0 rgba(3,4,9,.3);--docsearch-footer-background:#1e2136;--docsearch-footer-shadow:inset 0 1px 0 0 rgba(73,76,106,.5),0 -4px 8px 0 rgba(0,0,0,.2);--docsearch-logo-color:#fff;--docsearch-muted-color:#7f8497}.DocSearch-Button{align-items:center;background:var(--docsearch-searchbox-background);border:0;border-radius:40px;color:var(--docsearch-muted-color);cursor:pointer;display:flex;font-weight:500;height:36px;justify-content:space-between;margin:0 0 0 16px;padding:0 8px;-webkit-user-select:none;-moz-user-select:none;user-select:none}.DocSearch-Button:active,.DocSearch-Button:focus,.DocSearch-Button:hover{background:var(--docsearch-searchbox-focus-background);box-shadow:var(--docsearch-searchbox-shadow);color:var(--docsearch-text-color);outline:none}.DocSearch-Button-Container{align-items:center;display:flex}.DocSearch-Search-Icon{stroke-width:1.6}.DocSearch-Button .DocSearch-Search-Icon{color:var(--docsearch-text-color)}.DocSearch-Button-Placeholder{font-size:1rem;padding:0 12px 0 6px}.DocSearch-Button-Keys{display:flex;min-width:calc(40px + .8em)}.DocSearch-Button-Key{align-items:center;background:var(--docsearch-key-gradient);border-radius:3px;box-shadow:var(--docsearch-key-shadow);color:var(--docsearch-muted-color);display:flex;height:18px;justify-content:center;margin-right:.4em;position:relative;padding:0 0 2px;border:0;top:-1px;width:20px}@media (max-width:750px){.DocSearch-Button-Keys,.DocSearch-Button-Placeholder{display:none}}.DocSearch--active{overflow:hidden!important}.DocSearch-Container,.DocSearch-Container *{box-sizing:border-box}.DocSearch-Container{background-color:var(--docsearch-container-background);height:100vh;left:0;position:fixed;top:0;width:100vw;z-index:200}.DocSearch-Container a{text-decoration:none}.DocSearch-Link{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:0;color:var(--docsearch-highlight-color);cursor:pointer;font:inherit;margin:0;padding:0}.DocSearch-Modal{background:var(--docsearch-modal-background);border-radius:6px;box-shadow:var(--docsearch-modal-shadow);flex-direction:column;margin:60px auto auto;max-width:var(--docsearch-modal-width);position:relative}.DocSearch-SearchBar{display:flex;padding:var(--docsearch-spacing) var(--docsearch-spacing) 0}.DocSearch-Form{align-items:center;background:var(--docsearch-searchbox-focus-background);border-radius:4px;box-shadow:var(--docsearch-searchbox-shadow);display:flex;height:var(--docsearch-searchbox-height);margin:0;padding:0 var(--docsearch-spacing);position:relative;width:100%}.DocSearch-Input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;color:var(--docsearch-text-color);flex:1;font:inherit;font-size:1.2em;height:100%;outline:none;padding:0 0 0 8px;width:80%}.DocSearch-Input::-moz-placeholder{color:var(--docsearch-muted-color);opacity:1}.DocSearch-Input::placeholder{color:var(--docsearch-muted-color);opacity:1}.DocSearch-Input::-webkit-search-cancel-button,.DocSearch-Input::-webkit-search-decoration,.DocSearch-Input::-webkit-search-results-button,.DocSearch-Input::-webkit-search-results-decoration{display:none}.DocSearch-LoadingIndicator,.DocSearch-MagnifierLabel,.DocSearch-Reset{margin:0;padding:0}.DocSearch-MagnifierLabel,.DocSearch-Reset{align-items:center;color:var(--docsearch-highlight-color);display:flex;justify-content:center}.DocSearch-Container--Stalled .DocSearch-MagnifierLabel,.DocSearch-LoadingIndicator{display:none}.DocSearch-Container--Stalled .DocSearch-LoadingIndicator{align-items:center;color:var(--docsearch-highlight-color);display:flex;justify-content:center}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Reset{-webkit-animation:none;animation:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:0;border-radius:50%;color:var(--docsearch-icon-color);cursor:pointer;right:0;stroke-width:var(--docsearch-icon-stroke-width)}}.DocSearch-Reset{-webkit-animation:fade-in .1s ease-in forwards;animation:fade-in .1s ease-in forwards;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:0;border-radius:50%;color:var(--docsearch-icon-color);cursor:pointer;padding:2px;right:0;stroke-width:var(--docsearch-icon-stroke-width)}.DocSearch-Reset[hidden]{display:none}.DocSearch-Reset:focus{outline:none}.DocSearch-Reset:hover{color:var(--docsearch-highlight-color)}.DocSearch-LoadingIndicator svg,.DocSearch-MagnifierLabel svg{height:24px;width:24px}.DocSearch-Cancel{display:none}.DocSearch-Dropdown{max-height:calc(var(--docsearch-modal-height) - var(--docsearch-searchbox-height) - var(--docsearch-spacing) - var(--docsearch-footer-height));min-height:var(--docsearch-spacing);overflow-y:auto;overflow-y:overlay;padding:0 var(--docsearch-spacing);scrollbar-color:var(--docsearch-muted-color) var(--docsearch-modal-background);scrollbar-width:thin}.DocSearch-Dropdown::-webkit-scrollbar{width:12px}.DocSearch-Dropdown::-webkit-scrollbar-track{background:transparent}.DocSearch-Dropdown::-webkit-scrollbar-thumb{background-color:var(--docsearch-muted-color);border:3px solid var(--docsearch-modal-background);border-radius:20px}.DocSearch-Dropdown ul{list-style:none;margin:0;padding:0}.DocSearch-Label{font-size:.75em;line-height:1.6em}.DocSearch-Help,.DocSearch-Label{color:var(--docsearch-muted-color)}.DocSearch-Help{font-size:.9em;margin:0;-webkit-user-select:none;-moz-user-select:none;user-select:none}.DocSearch-Title{font-size:1.2em}.DocSearch-Logo a{display:flex}.DocSearch-Logo svg{color:var(--docsearch-logo-color);margin-left:8px}.DocSearch-Hits:last-of-type{margin-bottom:24px}.DocSearch-Hits mark{background:none;color:var(--docsearch-highlight-color)}.DocSearch-HitsFooter{color:var(--docsearch-muted-color);display:flex;font-size:.85em;justify-content:center;margin-bottom:var(--docsearch-spacing);padding:var(--docsearch-spacing)}.DocSearch-HitsFooter a{border-bottom:1px solid;color:inherit}.DocSearch-Hit{border-radius:4px;display:flex;padding-bottom:4px;position:relative}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Hit--deleting{transition:none}}.DocSearch-Hit--deleting{opacity:0;transition:all .25s linear}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Hit--favoriting{transition:none}}.DocSearch-Hit--favoriting{transform:scale(0);transform-origin:top center;transition:all .25s linear;transition-delay:.25s}.DocSearch-Hit a{background:var(--docsearch-hit-background);border-radius:4px;box-shadow:var(--docsearch-hit-shadow);display:block;padding-left:var(--docsearch-spacing);width:100%}.DocSearch-Hit-source{background:var(--docsearch-modal-background);color:var(--docsearch-highlight-color);font-size:.85em;font-weight:600;line-height:32px;margin:0 -4px;padding:8px 4px 0;position:-webkit-sticky;position:sticky;top:0;z-index:10}.DocSearch-Hit-Tree{color:var(--docsearch-muted-color);height:var(--docsearch-hit-height);opacity:.5;stroke-width:var(--docsearch-icon-stroke-width);width:24px}.DocSearch-Hit[aria-selected=true] a{background-color:var(--docsearch-highlight-color)}.DocSearch-Hit[aria-selected=true] mark{text-decoration:underline}.DocSearch-Hit-Container{align-items:center;color:var(--docsearch-hit-color);display:flex;flex-direction:row;height:var(--docsearch-hit-height);padding:0 var(--docsearch-spacing) 0 0}.DocSearch-Hit-icon{height:20px;width:20px}.DocSearch-Hit-action,.DocSearch-Hit-icon{color:var(--docsearch-muted-color);stroke-width:var(--docsearch-icon-stroke-width)}.DocSearch-Hit-action{align-items:center;display:flex;height:22px;width:22px}.DocSearch-Hit-action svg{display:block;height:18px;width:18px}.DocSearch-Hit-action+.DocSearch-Hit-action{margin-left:6px}.DocSearch-Hit-action-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:0;border-radius:50%;color:inherit;cursor:pointer;padding:2px}svg.DocSearch-Hit-Select-Icon{display:none}.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-Select-Icon{display:block}.DocSearch-Hit-action-button:focus,.DocSearch-Hit-action-button:hover{background:rgba(0,0,0,.2);transition:background-color .1s ease-in}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Hit-action-button:focus,.DocSearch-Hit-action-button:hover{transition:none}}.DocSearch-Hit-action-button:focus path,.DocSearch-Hit-action-button:hover path{fill:#fff}.DocSearch-Hit-content-wrapper{display:flex;flex:1 1 auto;flex-direction:column;font-weight:500;justify-content:center;line-height:1.2em;margin:0 8px;overflow-x:hidden;position:relative;text-overflow:ellipsis;white-space:nowrap;width:80%}.DocSearch-Hit-title{font-size:.9em}.DocSearch-Hit-path{color:var(--docsearch-muted-color);font-size:.75em}.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-action,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-icon,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-path,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-text,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-title,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-Tree,.DocSearch-Hit[aria-selected=true] mark{color:var(--docsearch-hit-active-color)!important}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Hit-action-button:focus,.DocSearch-Hit-action-button:hover{background:rgba(0,0,0,.2);transition:none}}.DocSearch-ErrorScreen,.DocSearch-NoResults,.DocSearch-StartScreen{font-size:.9em;margin:0 auto;padding:36px 0;text-align:center;width:80%}.DocSearch-Screen-Icon{color:var(--docsearch-muted-color);padding-bottom:12px}.DocSearch-NoResults-Prefill-List{display:inline-block;padding-bottom:24px;text-align:left}.DocSearch-NoResults-Prefill-List ul{display:inline-block;padding:8px 0 0}.DocSearch-NoResults-Prefill-List li{list-style-position:inside;list-style-type:"\bb  "}.DocSearch-Prefill{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:0;border-radius:1em;color:var(--docsearch-highlight-color);cursor:pointer;display:inline-block;font-size:1em;font-weight:700;padding:0}.DocSearch-Prefill:focus,.DocSearch-Prefill:hover{outline:none;text-decoration:underline}.DocSearch-Footer{align-items:center;background:var(--docsearch-footer-background);border-radius:0 0 8px 8px;box-shadow:var(--docsearch-footer-shadow);display:flex;flex-direction:row-reverse;flex-shrink:0;height:var(--docsearch-footer-height);justify-content:space-between;padding:0 var(--docsearch-spacing);position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%;z-index:300}.DocSearch-Commands{color:var(--docsearch-muted-color);display:flex;list-style:none;margin:0;padding:0}.DocSearch-Commands li{align-items:center;display:flex}.DocSearch-Commands li:not(:last-of-type){margin-right:.8em}.DocSearch-Commands-Key{align-items:center;background:var(--docsearch-key-gradient);border-radius:2px;box-shadow:var(--docsearch-key-shadow);display:flex;height:18px;justify-content:center;margin-right:.4em;padding:0 0 1px;color:var(--docsearch-muted-color);border:0;width:20px}@media (max-width:750px){:root{--docsearch-spacing:10px;--docsearch-footer-height:40px}.DocSearch-Dropdown{height:100%}.DocSearch-Container{height:100vh;height:-webkit-fill-available;height:calc(var(--docsearch-vh, 1vh)*100);position:absolute}.DocSearch-Footer{border-radius:0;bottom:0;position:absolute}.DocSearch-Hit-content-wrapper{display:flex;position:relative;width:80%}.DocSearch-Modal{border-radius:0;box-shadow:none;height:100vh;height:-webkit-fill-available;height:calc(var(--docsearch-vh, 1vh)*100);margin:0;max-width:100%;width:100%}.DocSearch-Dropdown{max-height:calc(var(--docsearch-vh, 1vh)*100 - var(--docsearch-searchbox-height) - var(--docsearch-spacing) - var(--docsearch-footer-height))}.DocSearch-Cancel{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:0;color:var(--docsearch-highlight-color);cursor:pointer;display:inline-block;flex:none;font:inherit;font-size:1em;font-weight:500;margin-left:var(--docsearch-spacing);outline:none;overflow:hidden;padding:0;-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap}.DocSearch-Commands,.DocSearch-Hit-Tree{display:none}}@-webkit-keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.VPNavBarSearch{display:flex;align-items:center}@media (min-width: 768px){.VPNavBarSearch{flex-grow:1;padding-left:24px}}@media (min-width: 960px){.VPNavBarSearch{padding-left:32px}}.DocSearch{--docsearch-primary-color: var(--vp-c-brand);--docsearch-highlight-color: var(--docsearch-primary-color);--docsearch-text-color: var(--vp-c-text-1);--docsearch-muted-color: var(--vp-c-text-2);--docsearch-searchbox-shadow: none;--docsearch-searchbox-focus-background: transparent;--docsearch-key-gradient: transparent;--docsearch-key-shadow: none;--docsearch-modal-background: var(--vp-c-bg-soft);--docsearch-footer-background: var(--vp-c-bg)}.dark .DocSearch{--docsearch-modal-shadow: none;--docsearch-footer-shadow: none;--docsearch-logo-color: var(--vp-c-text-2);--docsearch-hit-background: var(--vp-c-bg-mute);--docsearch-hit-color: var(--vp-c-text-2);--docsearch-hit-shadow: none}.DocSearch-Button{display:flex;justify-content:center;align-items:center;margin:0;padding:0;width:32px;height:55px;background:transparent;transition:border-color .25s}.DocSearch-Button:hover{background:transparent}.DocSearch-Button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}.DocSearch-Button:focus:not(:focus-visible){outline:none!important}@media (min-width: 768px){.DocSearch-Button{justify-content:flex-start;border:1px solid transparent;border-radius:8px;padding:0 10px 0 12px;width:100%;height:40px;background-color:var(--vp-c-bg-alt)}.DocSearch-Button:hover{border-color:var(--vp-c-brand);background:var(--vp-c-bg-alt)}}.DocSearch-Button .DocSearch-Button-Container{display:flex;align-items:center}.DocSearch-Button .DocSearch-Search-Icon{position:relative;width:16px;height:16px;color:var(--vp-c-text-1);fill:currentColor;transition:color .5s}.DocSearch-Button:hover .DocSearch-Search-Icon{color:var(--vp-c-text-1)}@media (min-width: 768px){.DocSearch-Button .DocSearch-Search-Icon{top:1px;margin-right:8px;width:14px;height:14px;color:var(--vp-c-text-2)}}.DocSearch-Button .DocSearch-Button-Placeholder{display:none;margin-top:2px;padding:0 16px 0 0;font-size:13px;font-weight:500;color:var(--vp-c-text-2);transition:color .5s}.DocSearch-Button:hover .DocSearch-Button-Placeholder{color:var(--vp-c-text-1)}@media (min-width: 768px){.DocSearch-Button .DocSearch-Button-Placeholder{display:inline-block}}.DocSearch-Button .DocSearch-Button-Keys{display:none;min-width:auto}@media (min-width: 768px){.DocSearch-Button .DocSearch-Button-Keys{display:flex;align-items:center}}.DocSearch-Button .DocSearch-Button-Key{display:block;margin:2px 0 0;border:1px solid var(--vp-c-divider);border-right:none;border-radius:4px 0 0 4px;padding-left:6px;min-width:0;width:auto;height:22px;line-height:22px;font-family:var(--vp-font-family-base);font-size:12px;font-weight:500;transition:color .5s,border-color .5s}.DocSearch-Button .DocSearch-Button-Key+.DocSearch-Button-Key{border-right:1px solid var(--vp-c-divider);border-left:none;border-radius:0 4px 4px 0;padding-left:2px;padding-right:6px}.dark .DocSearch-Footer{border-top:1px solid var(--vp-c-divider)}.DocSearch-Form{border:1px solid var(--vp-c-brand);background-color:var(--vp-c-white)}.dark .DocSearch-Form{background-color:var(--vp-c-bg-mute)}.icon[data-v-4d08dd3a]{display:inline-block;margin-top:-1px;margin-left:4px;width:11px;height:11px;fill:var(--vp-c-text-3);transition:fill .25s}.VPNavBarMenuLink[data-v-66f8d518]{display:flex;align-items:center;padding:0 12px;line-height:var(--vp-nav-height-mobile);font-size:14px;font-weight:500;color:var(--vp-c-text-1);transition:color .25s}.VPNavBarMenuLink.active[data-v-66f8d518],.VPNavBarMenuLink[data-v-66f8d518]:hover{color:var(--vp-c-brand)}@media (min-width: 1280px){.VPNavBarMenuLink[data-v-66f8d518]{line-height:var(--vp-nav-height-desktop)}}.VPMenuGroup+.VPMenuLink[data-v-55443fa2]{margin:12px -12px 0;border-top:1px solid var(--vp-c-divider-light);padding:12px 12px 0}.link[data-v-55443fa2]{display:block;border-radius:6px;padding:0 12px;line-height:32px;font-size:14px;font-weight:500;color:var(--vp-c-text-1);white-space:nowrap;transition:background-color .25s,color .25s}.link[data-v-55443fa2]:hover{color:var(--vp-c-brand);background-color:var(--vp-c-bg-mute)}.dark .link[data-v-55443fa2]:hover{background-color:var(--vp-c-bg-soft)}.link.active[data-v-55443fa2]{color:var(--vp-c-brand)}.VPMenuGroup[data-v-1f0395f9]{margin:12px -12px 0;border-top:1px solid var(--vp-c-divider-light);padding:12px 12px 0}.VPMenuGroup[data-v-1f0395f9]:first-child{margin-top:0;border-top:0;padding-top:0}.VPMenuGroup+.VPMenuGroup[data-v-1f0395f9]{margin-top:12px;border-top:1px solid var(--vp-c-divider-light)}.title[data-v-1f0395f9]{padding:0 12px;line-height:32px;font-size:14px;font-weight:600;color:var(--vp-c-text-2);transition:color .25s}.VPMenu[data-v-17dc081b]{border-radius:12px;padding:12px;min-width:128px;border:1px solid var(--vp-c-divider-light);background-color:var(--vp-c-bg);box-shadow:var(--vp-shadow-3);transition:background-color .5s}.dark .VPMenu[data-v-17dc081b]{box-shadow:var(--vp-shadow-2)}.VPMenu[data-v-17dc081b] .group{margin:0 -12px;padding:0 12px 12px}.VPMenu[data-v-17dc081b] .group+.group{border-top:1px solid var(--vp-c-divider-light);padding:11px 12px 12px}.VPMenu[data-v-17dc081b] .group:last-child{padding-bottom:0}.VPMenu[data-v-17dc081b] .group+.item{border-top:1px solid var(--vp-c-divider-light);padding:11px 16px 0}.VPMenu[data-v-17dc081b] .item{padding:0 16px;white-space:nowrap}.VPMenu[data-v-17dc081b] .label{flex-grow:1;line-height:28px;font-size:12px;font-weight:500;color:var(--vp-c-text-2);transition:color .5s}.VPMenu[data-v-17dc081b] .action{padding-left:24px}.VPFlyout[data-v-37af1650]{position:relative}.VPFlyout[data-v-37af1650]:hover{color:var(--vp-c-bland);transition:color .25s}.VPFlyout:hover .text[data-v-37af1650]{color:var(--vp-c-text-2)}.VPFlyout:hover .icon[data-v-37af1650]{fill:var(--vp-c-text-2)}.VPFlyout.active .text[data-v-37af1650]{color:var(--vp-c-brand)}.VPFlyout.active:hover .text[data-v-37af1650]{color:var(--vp-c-brand-dark)}.VPFlyout:hover .menu[data-v-37af1650],.button[aria-expanded=true]+.menu[data-v-37af1650]{opacity:1;visibility:visible;transform:translateY(0)}.button[data-v-37af1650]{display:flex;align-items:center;padding:0 12px;height:var(--vp-nav-height-mobile);color:var(--vp-c-text-1);transition:color .5s}@media (min-width: 960px){.button[data-v-37af1650]{height:var(--vp-nav-height-desktop)}}.text[data-v-37af1650]{display:flex;align-items:center;line-height:var(--vp-nav-height-mobile);font-size:14px;font-weight:500;color:var(--vp-c-text-1);transition:color .25s}@media (min-width: 960px){.text[data-v-37af1650]{line-height:var(--vp-nav-height-desktop)}}.option-icon[data-v-37af1650]{margin-right:0;width:16px;height:16px;fill:currentColor}.text-icon[data-v-37af1650]{margin-left:4px;width:14px;height:14px;fill:currentColor}.icon[data-v-37af1650]{width:20px;height:20px;fill:currentColor;transition:fill .25s}.menu[data-v-37af1650]{position:absolute;top:calc(var(--vp-nav-height-mobile) / 2 + 20px);right:0;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s,transform .25s}@media (min-width: 960px){.menu[data-v-37af1650]{top:calc(var(--vp-nav-height-desktop) / 2 + 20px)}}.VPNavBarMenu[data-v-4da4371d]{display:none}@media (min-width: 768px){.VPNavBarMenu[data-v-4da4371d]{display:flex}}.VPNavBarTranslations[data-v-1d1091b2]{display:none}@media (min-width: 1280px){.VPNavBarTranslations[data-v-1d1091b2]{display:flex;align-items:center}}.title[data-v-1d1091b2]{padding:0 24px 0 12px;line-height:32px;font-size:14px;font-weight:700;color:var(--vp-c-text-1)}.VPSwitch[data-v-55b931a0]{position:relative;border-radius:11px;display:block;width:40px;height:22px;flex-shrink:0;border:1px solid var(--vp-c-divider);background-color:var(--vp-c-bg-mute);transition:border-color .25s,background-color .25s}.VPSwitch[data-v-55b931a0]:hover{border-color:var(--vp-c-gray)}.check[data-v-55b931a0]{position:absolute;top:1px;left:1px;width:18px;height:18px;border-radius:50%;background-color:var(--vp-c-white);box-shadow:var(--vp-shadow-1);transition:background-color .25s,transform .25s}.dark .check[data-v-55b931a0]{background-color:var(--vp-c-black)}.icon[data-v-55b931a0]{position:relative;display:block;width:18px;height:18px;border-radius:50%;overflow:hidden}.icon[data-v-55b931a0] svg{position:absolute;top:3px;left:3px;width:12px;height:12px;fill:var(--vp-c-text-2)}.dark .icon[data-v-55b931a0] svg{fill:var(--vp-c-text-1);transition:opacity .25s}.sun[data-v-d0ee0df2]{opacity:1}.moon[data-v-d0ee0df2],.dark .sun[data-v-d0ee0df2]{opacity:0}.dark .moon[data-v-d0ee0df2]{opacity:1}.dark .VPSwitchAppearance[data-v-d0ee0df2] .check{transform:translate(18px)}.VPNavBarAppearance[data-v-bf1c94ca]{display:none}@media (min-width: 1280px){.VPNavBarAppearance[data-v-bf1c94ca]{display:flex;align-items:center}}.VPSocialLink[data-v-24097be2]{display:flex;justify-content:center;align-items:center;width:36px;height:36px;color:var(--vp-c-text-2);transition:color .5s}.VPSocialLink[data-v-24097be2]:hover{color:var(--vp-c-text-1);transition:color .25s}.icon[data-v-24097be2]{width:20px;height:20px;fill:currentColor}.VPSocialLinks[data-v-6bcc8b4f]{display:flex;flex-wrap:wrap;justify-content:center}.VPNavBarSocialLinks[data-v-0bf3de8b]{display:none}@media (min-width: 1280px){.VPNavBarSocialLinks[data-v-0bf3de8b]{display:flex;align-items:center}}.VPNavBarExtra[data-v-7cece6ac]{display:none;margin-right:-12px}@media (min-width: 768px){.VPNavBarExtra[data-v-7cece6ac]{display:block}}@media (min-width: 1280px){.VPNavBarExtra[data-v-7cece6ac]{display:none}}.trans-title[data-v-7cece6ac]{padding:0 24px 0 12px;line-height:32px;font-size:14px;font-weight:700;color:var(--vp-c-text-1)}.item.appearance[data-v-7cece6ac],.item.social-links[data-v-7cece6ac]{display:flex;align-items:center;padding:0 12px}.item.appearance[data-v-7cece6ac]{min-width:176px}.appearance-action[data-v-7cece6ac]{margin-right:-2px}.social-links-list[data-v-7cece6ac]{margin:-4px -8px}.VPNavBarHamburger[data-v-5484e669]{display:flex;justify-content:center;align-items:center;width:48px;height:var(--vp-nav-height)}@media (min-width: 768px){.VPNavBarHamburger[data-v-5484e669]{display:none}}.container[data-v-5484e669]{position:relative;width:16px;height:14px;overflow:hidden}.VPNavBarHamburger:hover .top[data-v-5484e669]{top:0;left:0;transform:translate(4px)}.VPNavBarHamburger:hover .middle[data-v-5484e669]{top:6;left:0;transform:translate(0)}.VPNavBarHamburger:hover .bottom[data-v-5484e669]{top:12px;left:0;transform:translate(8px)}.VPNavBarHamburger.active .top[data-v-5484e669]{top:6px;transform:translate(0) rotate(225deg)}.VPNavBarHamburger.active .middle[data-v-5484e669]{top:6px;transform:translate(16px)}.VPNavBarHamburger.active .bottom[data-v-5484e669]{top:6px;transform:translate(0) rotate(135deg)}.VPNavBarHamburger.active:hover .top[data-v-5484e669],.VPNavBarHamburger.active:hover .middle[data-v-5484e669],.VPNavBarHamburger.active:hover .bottom[data-v-5484e669]{background-color:var(--vp-c-text-2);transition:top .25s,background-color .25s,transform .25s}.top[data-v-5484e669],.middle[data-v-5484e669],.bottom[data-v-5484e669]{position:absolute;width:16px;height:2px;background-color:var(--vp-c-text-1);transition:top .25s,background-color .5s,transform .25s}.top[data-v-5484e669]{top:0;left:0;transform:translate(0)}.middle[data-v-5484e669]{top:6px;left:0;transform:translate(8px)}.bottom[data-v-5484e669]{top:12px;left:0;transform:translate(4px)}.VPNavBar[data-v-45c9f423]{position:relative;border-bottom:1px solid var(--vp-c-divider-light);padding:0 8px 0 24px;height:var(--vp-nav-height-mobile);transition:border-color .5s,background-color .5s}@media (min-width: 768px){.VPNavBar[data-v-45c9f423]{padding:0 32px}}@media (min-width: 960px){.VPNavBar[data-v-45c9f423]{height:var(--vp-nav-height-desktop);border-bottom:0}.VPNavBar.has-sidebar .content[data-v-45c9f423]{margin-right:-32px;padding-right:32px;-webkit-backdrop-filter:saturate(50%) blur(8px);backdrop-filter:saturate(50%) blur(8px);background:rgba(255,255,255,.7)}.dark .VPNavBar.has-sidebar .content[data-v-45c9f423]{background:rgba(36,36,36,.7)}@supports not ((-webkit-backdrop-filter: saturate(50%) blur(8px)) or (backdrop-filter: saturate(50%) blur(8px))){.VPNavBar.has-sidebar .content[data-v-45c9f423]{background:rgba(255,255,255,.95)}.dark .VPNavBar.has-sidebar .content[data-v-45c9f423]{background:rgba(36,36,36,.95)}}}.container[data-v-45c9f423]{display:flex;justify-content:space-between;margin:0 auto;max-width:calc(var(--vp-layout-max-width) - 64px)}.content[data-v-45c9f423]{display:flex;justify-content:flex-end;align-items:center;flex-grow:1}.menu+.translations[data-v-45c9f423]:before,.menu+.appearance[data-v-45c9f423]:before,.menu+.social-links[data-v-45c9f423]:before,.translations+.appearance[data-v-45c9f423]:before,.appearance+.social-links[data-v-45c9f423]:before{margin-right:8px;margin-left:8px;width:1px;height:24px;background-color:var(--vp-c-divider-light);content:""}.menu+.appearance[data-v-45c9f423]:before,.translations+.appearance[data-v-45c9f423]:before{margin-right:16px}.appearance+.social-links[data-v-45c9f423]:before{margin-left:16px}.social-links[data-v-45c9f423]{margin-right:-8px}.VPNavScreenMenuLink[data-v-628b2e6c]{display:block;border-bottom:1px solid var(--vp-c-divider-light);padding:12px 0 11px;line-height:24px;font-size:14px;font-weight:500;color:var(--vp-c-text-1);transition:border-color .5s,color .25s}.VPNavScreenMenuLink[data-v-628b2e6c]:hover{color:var(--vp-c-brand)}.VPNavScreenMenuGroupLink[data-v-7e5c6cd0]{display:block;line-height:32px;font-size:13px;font-weight:400;color:var(--vp-c-text-1);transition:color .25s;margin-left:12px}.VPNavScreenMenuGroupLink[data-v-7e5c6cd0]:hover{color:var(--vp-c-brand)}.VPNavScreenMenuGroupSection[data-v-6696c11b]{display:block}.title[data-v-6696c11b]{line-height:32px;font-size:13px;font-weight:700;color:var(--vp-c-text-2);transition:color .25s}.VPNavScreenMenuGroup[data-v-365c1f83]{border-bottom:1px solid var(--vp-c-divider-light);height:48px;overflow:hidden;transition:border-color .5s}.VPNavScreenMenuGroup .items[data-v-365c1f83]{visibility:hidden}.VPNavScreenMenuGroup.open .items[data-v-365c1f83]{visibility:visible}.VPNavScreenMenuGroup.open[data-v-365c1f83]{padding-bottom:10px;height:auto}.VPNavScreenMenuGroup.open .button[data-v-365c1f83]{padding-bottom:6px;color:var(--vp-c-brand)}.VPNavScreenMenuGroup.open .button-icon[data-v-365c1f83]{transform:rotate(45deg)}.button[data-v-365c1f83]{display:flex;justify-content:space-between;align-items:center;padding:12px 4px 11px 0;width:100%;line-height:24px;font-size:14px;font-weight:500;color:var(--vp-c-text-1);transition:color .25s}.button[data-v-365c1f83]:hover{color:var(--vp-c-brand)}.button-icon[data-v-365c1f83]{width:14px;height:14px;fill:var(--vp-c-text-2);transition:fill .5s,transform .25s}.group[data-v-365c1f83]:first-child{padding-top:0}.group+.group[data-v-365c1f83],.group+.item[data-v-365c1f83]{padding-top:4px}.VPNavScreenAppearance[data-v-473e18ac]{display:flex;justify-content:space-between;align-items:center;border-radius:8px;padding:12px 14px 12px 16px;background-color:var(--vp-c-bg-soft);transition:background-color .5s}.text[data-v-473e18ac]{line-height:24px;font-size:12px;font-weight:500;color:var(--vp-c-text-2);transition:color .5s}.VPNavScreenTranslations[data-v-0300037a]{height:24px;overflow:hidden}.VPNavScreenTranslations.open[data-v-0300037a]{height:auto}.title[data-v-0300037a]{display:flex;align-items:center;font-size:14px;font-weight:500;color:var(--vp-c-text-1)}.icon[data-v-0300037a]{width:16px;height:16px;fill:currentColor}.icon.lang[data-v-0300037a]{margin-right:8px}.icon.chevron[data-v-0300037a]{margin-left:4px}.list[data-v-0300037a]{padding:4px 0 0 24px}.link[data-v-0300037a]{line-height:32px;font-size:13px;color:var(--vp-c-text-1)}.VPNavScreen[data-v-3e21354b]{position:fixed;top:var(--vp-nav-height-mobile);right:0;bottom:0;left:0;padding:0 32px;width:100%;background-color:var(--vp-c-bg);overflow-y:auto;transition:background-color .5s}.VPNavScreen.fade-enter-active[data-v-3e21354b],.VPNavScreen.fade-leave-active[data-v-3e21354b]{transition:opacity .25s}.VPNavScreen.fade-enter-active .container[data-v-3e21354b],.VPNavScreen.fade-leave-active .container[data-v-3e21354b]{transition:transform .25s ease}.VPNavScreen.fade-enter-from[data-v-3e21354b],.VPNavScreen.fade-leave-to[data-v-3e21354b]{opacity:0}.VPNavScreen.fade-enter-from .container[data-v-3e21354b],.VPNavScreen.fade-leave-to .container[data-v-3e21354b]{transform:translateY(-8px)}@media (min-width: 768px){.VPNavScreen[data-v-3e21354b]{display:none}}.container[data-v-3e21354b]{margin:0 auto;padding:24px 0 96px;max-width:288px}.menu+.translations[data-v-3e21354b],.menu+.appearance[data-v-3e21354b],.translations+.appearance[data-v-3e21354b]{margin-top:24px}.menu+.social-links[data-v-3e21354b]{margin-top:16px}.appearance+.social-links[data-v-3e21354b]{margin-top:16px}.VPNav[data-v-2a0a2738]{position:relative;top:0;left:0;z-index:var(--vp-z-index-nav);width:100%}@media (min-width: 960px){.VPNav[data-v-2a0a2738]{position:fixed}.VPNav.no-sidebar[data-v-2a0a2738]{-webkit-backdrop-filter:saturate(50%) blur(8px);backdrop-filter:saturate(50%) blur(8px);background:rgba(255,255,255,.7)}.dark .VPNav.no-sidebar[data-v-2a0a2738]{background:rgba(36,36,36,.7)}@supports not ((-webkit-backdrop-filter: saturate(50%) blur(8px)) or (backdrop-filter: saturate(50%) blur(8px))){.VPNav.no-sidebar[data-v-2a0a2738]{background:rgba(255,255,255,.95)}.dark .VPNav.no-sidebar[data-v-2a0a2738]{background:rgba(36,36,36,.95)}}}.VPLocalNav[data-v-f623cd72]{position:-webkit-sticky;position:sticky;top:0;left:0;z-index:var(--vp-z-index-local-nav);display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--vp-c-divider-light);width:100%;background-color:var(--vp-c-bg);transition:border-color .5s,background-color .5s}@media (min-width: 960px){.VPLocalNav[data-v-f623cd72]{display:none}}.menu[data-v-f623cd72]{display:flex;align-items:center;padding:12px 24px 11px;line-height:24px;font-size:12px;font-weight:500;color:var(--vp-c-text-2);transition:color .5s}.menu[data-v-f623cd72]:hover{color:var(--vp-c-text-1);transition:color .25s}@media (min-width: 768px){.menu[data-v-f623cd72]{padding:0 32px}}.menu-icon[data-v-f623cd72]{margin-right:8px;width:16px;height:16px;fill:currentColor}.top-link[data-v-f623cd72]{display:block;padding:12px 24px 11px;line-height:24px;font-size:12px;font-weight:500;color:var(--vp-c-text-2);transition:color .5s}.top-link[data-v-f623cd72]:hover{color:var(--vp-c-text-1);transition:color .25s}@media (min-width: 768px){.top-link[data-v-f623cd72]{padding:12px 32px 11px}}.link[data-v-a4e3bb86]{display:block;padding:4px 0;color:var(--vp-c-text-2);transition:color .5s}.link[data-v-a4e3bb86]:hover{color:var(--vp-c-text-1)}.link.active[data-v-a4e3bb86]{color:var(--vp-c-brand)}.link[data-v-a4e3bb86] .icon{width:12px;height:12px;fill:currentColor}.link-text[data-v-a4e3bb86]{line-height:20px;font-size:14px;font-weight:500}.title[data-v-06b4ea4e]{display:flex;justify-content:space-between;align-items:flex-start;z-index:2}.title-text[data-v-06b4ea4e]{padding-top:6px;padding-bottom:6px;line-height:20px;font-size:14px;font-weight:700;color:var(--vp-c-text-1)}.action[data-v-06b4ea4e]{display:none;position:relative;margin-right:-8px;border-radius:4px;width:32px;height:32px;color:var(--vp-c-text-3);transition:color .25s}.VPSidebarGroup.collapsible .action[data-v-06b4ea4e]{display:block}.title:hover .action[data-v-06b4ea4e]{color:var(--vp-c-text-2)}.icon[data-v-06b4ea4e]{position:absolute;top:8px;left:8px;width:16px;height:16px;fill:currentColor}.icon.minus[data-v-06b4ea4e]{opacity:1}.icon.plus[data-v-06b4ea4e],.VPSidebarGroup.collapsed .icon.minus[data-v-06b4ea4e]{opacity:0}.VPSidebarGroup.collapsed .icon.plus[data-v-06b4ea4e]{opacity:1}.items[data-v-06b4ea4e]{overflow:hidden}.VPSidebarGroup.collapsed .items[data-v-06b4ea4e]{margin-bottom:-22px;max-height:0}@media (min-width: 960px){.VPSidebarGroup.collapsed .items[data-v-06b4ea4e]{margin-bottom:-14px}}.VPSidebar[data-v-3b8ec0c7]{position:fixed;top:0;bottom:0;left:0;z-index:var(--vp-z-index-sidebar);padding:32px 32px 96px;width:calc(100vw - 64px);max-width:320px;background-color:var(--vp-c-bg);opacity:0;box-shadow:var(--vp-c-shadow-3);overflow-x:hidden;overflow-y:auto;transform:translate(-100%);transition:opacity .5s,transform .25s ease}.VPSidebar.open[data-v-3b8ec0c7]{opacity:1;visibility:visible;transform:translate(0);transition:opacity .25s,transform .5s cubic-bezier(.19,1,.22,1)}.dark .VPSidebar[data-v-3b8ec0c7]{box-shadow:var(--vp-shadow-1)}@media (min-width: 960px){.VPSidebar[data-v-3b8ec0c7]{z-index:1;padding-top:var(--vp-nav-height-desktop);padding-bottom:128px;max-width:100%;width:var(--vp-sidebar-width);background-color:var(--vp-c-bg-alt);opacity:1;visibility:visible;box-shadow:none;transform:translate(0)}}@media (min-width: 1440px){.VPSidebar[data-v-3b8ec0c7]{padding-left:calc((100% - (var(--vp-layout-max-width) - 64px)) / 2);width:calc((100% - (var(--vp-layout-max-width) - 64px)) / 2 + var(--vp-sidebar-width) - 32px)}}.nav[data-v-3b8ec0c7]{outline:0}.group+.group[data-v-3b8ec0c7]{margin-top:32px;border-top:1px solid var(--vp-c-divider-light);padding-top:10px}@media (min-width: 960px){.group[data-v-3b8ec0c7]{padding-top:10px;width:calc(var(--vp-sidebar-width) - 64px)}.group+.group[data-v-3b8ec0c7]{margin-top:24px}}.NotFound[data-v-2b75f22f]{padding:64px 24px 96px;text-align:center}@media (min-width: 768px){.NotFound[data-v-2b75f22f]{padding:96px 32px 168px}}.code[data-v-2b75f22f]{line-height:64px;font-size:64px;font-weight:600}.title[data-v-2b75f22f]{padding-top:12px;letter-spacing:2px;line-height:20px;font-size:20px;font-weight:700}.divider[data-v-2b75f22f]{margin:24px auto 18px;width:64px;height:1px;background-color:var(--vp-c-divider)}.quote[data-v-2b75f22f]{margin:0 auto;max-width:256px;font-size:14px;font-weight:500;color:var(--vp-c-text-2)}.action[data-v-2b75f22f]{padding-top:20px}.link[data-v-2b75f22f]{display:inline-block;border:1px solid var(--vp-c-brand);border-radius:16px;padding:3px 16px;font-size:14px;font-weight:500;color:var(--vp-c-brand);transition:border-color .25s,color .25s}.link[data-v-2b75f22f]:hover{border-color:var(--vp-c-brand-dark);color:var(--vp-c-brand-dark)}.VPButton[data-v-5c4332d0]{display:inline-block;border:1px solid transparent;text-align:center;font-weight:500;white-space:nowrap;transition:color .25s,border-color .25s,background-color .25s}.VPButton[data-v-5c4332d0]:active{transition:color .1s,border-color .1s,background-color .1s}.VPButton.medium[data-v-5c4332d0]{border-radius:20px;padding:0 20px;line-height:38px;font-size:14px}.VPButton.big[data-v-5c4332d0]{border-radius:24px;padding:0 24px;line-height:46px;font-size:16px}.VPButton.brand[data-v-5c4332d0]{border-color:var(--vp-button-brand-border);color:var(--vp-button-brand-text);background-color:var(--vp-button-brand-bg)}.VPButton.brand[data-v-5c4332d0]:hover{border-color:var(--vp-button-brand-hover-border);color:var(--vp-button-brand-hover-text);background-color:var(--vp-button-brand-hover-bg)}.VPButton.brand[data-v-5c4332d0]:active{border-color:var(--vp-button-brand-active-border);color:var(--vp-button-brand-active-text);background-color:var(--vp-button-brand-active-bg)}.VPButton.alt[data-v-5c4332d0]{border-color:var(--vp-button-alt-border);color:var(--vp-button-alt-text);background-color:var(--vp-button-alt-bg)}.VPButton.alt[data-v-5c4332d0]:hover{border-color:var(--vp-button-alt-hover-border);color:var(--vp-button-alt-hover-text);background-color:var(--vp-button-alt-hover-bg)}.VPButton.alt[data-v-5c4332d0]:active{border-color:var(--vp-button-alt-active-border);color:var(--vp-button-alt-active-text);background-color:var(--vp-button-alt-active-bg)}.VPButton.sponsor[data-v-5c4332d0]{border-color:var(--vp-button-sponsor-border);color:var(--vp-button-sponsor-text);background-color:var(--vp-button-sponsor-bg)}.VPButton.sponsor[data-v-5c4332d0]:hover{border-color:var(--vp-button-sponsor-hover-border);color:var(--vp-button-sponsor-hover-text);background-color:var(--vp-button-sponsor-hover-bg)}.VPButton.sponsor[data-v-5c4332d0]:active{border-color:var(--vp-button-sponsor-active-border);color:var(--vp-button-sponsor-active-text);background-color:var(--vp-button-sponsor-active-bg)}.VPHero[data-v-4354fcca]{margin-top:calc(var(--vp-nav-height) * -1);padding:calc(var(--vp-nav-height) + 48px) 24px 48px}@media (min-width: 640px){.VPHero[data-v-4354fcca]{padding:calc(var(--vp-nav-height) + 80px) 48px 64px}}@media (min-width: 960px){.VPHero[data-v-4354fcca]{padding:calc(var(--vp-nav-height) + 80px) 64px 64px}}.container[data-v-4354fcca]{display:flex;flex-direction:column;margin:0 auto;max-width:1152px}@media (min-width: 960px){.container[data-v-4354fcca]{flex-direction:row}}.main[data-v-4354fcca]{position:relative;z-index:10;order:2;flex-grow:1;flex-shrink:0}.VPHero.has-image .container[data-v-4354fcca]{text-align:center}@media (min-width: 960px){.VPHero.has-image .container[data-v-4354fcca]{text-align:left}}@media (min-width: 960px){.main[data-v-4354fcca]{order:1;width:calc((100% / 3) * 2)}.VPHero.has-image .main[data-v-4354fcca]{max-width:592px}}.name[data-v-4354fcca],.text[data-v-4354fcca]{max-width:392px;letter-spacing:-.4px;line-height:40px;font-size:32px;font-weight:700;white-space:pre-wrap}.VPHero.has-image .name[data-v-4354fcca],.VPHero.has-image .text[data-v-4354fcca]{margin:0 auto}.name[data-v-4354fcca]{color:var(--vp-home-hero-name-color)}.clip[data-v-4354fcca]{background:var(--vp-home-hero-name-background);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:var(--vp-home-hero-name-color)}@media (min-width: 640px){.name[data-v-4354fcca],.text[data-v-4354fcca]{max-width:576px;line-height:56px;font-size:48px}}@media (min-width: 960px){.name[data-v-4354fcca],.text[data-v-4354fcca]{line-height:64px;font-size:56px}.VPHero.has-image .name[data-v-4354fcca],.VPHero.has-image .text[data-v-4354fcca]{margin:0}}.tagline[data-v-4354fcca]{padding-top:8px;max-width:392px;line-height:28px;font-size:18px;font-weight:500;white-space:pre-wrap;color:var(--vp-c-text-2)}.VPHero.has-image .tagline[data-v-4354fcca]{margin:0 auto}@media (min-width: 640px){.tagline[data-v-4354fcca]{padding-top:12px;max-width:576px;line-height:32px;font-size:20px}}@media (min-width: 960px){.tagline[data-v-4354fcca]{line-height:36px;font-size:24px}.VPHero.has-image .tagline[data-v-4354fcca]{margin:0}}.actions[data-v-4354fcca]{display:flex;flex-wrap:wrap;margin:-6px;padding-top:24px}.VPHero.has-image .actions[data-v-4354fcca]{justify-content:center}@media (min-width: 640px){.actions[data-v-4354fcca]{padding-top:32px}}@media (min-width: 960px){.VPHero.has-image .actions[data-v-4354fcca]{justify-content:flex-start}}.action[data-v-4354fcca]{flex-shrink:0;padding:6px}.image[data-v-4354fcca]{order:1;margin:-76px -24px -48px}@media (min-width: 640px){.image[data-v-4354fcca]{margin:-108px -24px -48px}}@media (min-width: 960px){.image[data-v-4354fcca]{flex-grow:1;order:2;margin:0;min-height:100%}}.image-container[data-v-4354fcca]{position:relative;margin:0 auto;width:320px;height:320px}@media (min-width: 640px){.image-container[data-v-4354fcca]{width:392px;height:392px}}@media (min-width: 960px){.image-container[data-v-4354fcca]{display:flex;justify-content:center;align-items:center;width:100%;height:100%;transform:translate(-32px,-32px)}}.image-bg[data-v-4354fcca]{position:absolute;top:50%;left:50%;border-radius:50%;width:192px;height:192px;background-image:var(--vp-home-hero-image-background-image);filter:var(--vp-home-hero-image-filter);transform:translate(-50%,-50%)}@media (min-width: 640px){.image-bg[data-v-4354fcca]{width:256px;height:256px}}@media (min-width: 960px){.image-bg[data-v-4354fcca]{width:320px;height:320px}}[data-v-4354fcca] .image-src{position:absolute;top:50%;left:50%;max-width:192px;transform:translate(-50%,-50%)}@media (min-width: 640px){[data-v-4354fcca] .image-src{max-width:256px}}@media (min-width: 960px){[data-v-4354fcca] .image-src{max-width:320px}}.VPFeature[data-v-31a8085a]{border:1px solid var(--vp-c-bg-soft);border-radius:12px;padding:24px;height:100%;background-color:var(--vp-c-bg-soft)}.icon[data-v-31a8085a]{display:flex;justify-content:center;align-items:center;margin-bottom:20px;border-radius:6px;background-color:var(--vp-c-gray-light-4);width:48px;height:48px;font-size:24px}.dark .icon[data-v-31a8085a]{background-color:var(--vp-c-bg)}.title[data-v-31a8085a]{line-height:24px;font-size:16px;font-weight:600}.details[data-v-31a8085a]{padding-top:8px;line-height:24px;font-size:14px;font-weight:500;color:var(--vp-c-text-2)}.VPFeatures[data-v-2fe38425]{position:relative;padding:0 24px}@media (min-width: 640px){.VPFeatures[data-v-2fe38425]{padding:0 48px}}@media (min-width: 960px){.VPFeatures[data-v-2fe38425]{padding:0 64px}}.container[data-v-2fe38425]{margin:0 auto;max-width:1152px}.items[data-v-2fe38425]{display:flex;flex-wrap:wrap;margin:-8px}.item[data-v-2fe38425]{padding:8px;width:100%}@media (min-width: 640px){.item.grid-2[data-v-2fe38425],.item.grid-4[data-v-2fe38425],.item.grid-6[data-v-2fe38425]{width:50%}}@media (min-width: 768px){.item.grid-2[data-v-2fe38425],.item.grid-4[data-v-2fe38425]{width:50%}.item.grid-3[data-v-2fe38425],.item.grid-6[data-v-2fe38425]{width:calc(100% / 3)}}@media (min-width: 960px){.item.grid-4[data-v-2fe38425]{width:25%}}.VPHome[data-v-17fa2fa0]{padding-bottom:96px}.VPHome[data-v-17fa2fa0] .VPHomeSponsors{margin-top:112px;margin-bottom:-128px}@media (min-width: 768px){.VPHome[data-v-17fa2fa0]{padding-bottom:128px}}.VPDocAsideOutline[data-v-123cce62]{display:none}.VPDocAsideOutline.has-outline[data-v-123cce62]{display:block}.content[data-v-123cce62]{position:relative;border-left:1px solid var(--vp-c-divider-light);padding-left:16px;font-size:13px;font-weight:500}.outline-marker[data-v-123cce62]{position:absolute;top:32px;left:-1px;z-index:0;opacity:0;width:1px;height:18px;background-color:var(--vp-c-brand);transition:top .25s cubic-bezier(0,1,.5,1),background-color .5s,opacity .25s}.outline-title[data-v-123cce62]{letter-spacing:.4px;line-height:28px;font-size:13px;font-weight:600}.outline-link[data-v-123cce62]{display:block;line-height:28px;color:var(--vp-c-text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .5s}.outline-link[data-v-123cce62]:hover,.outline-link.active[data-v-123cce62]{color:var(--vp-c-text-1);transition:color .25s}.outline-link.nested[data-v-123cce62]{padding-left:13px}.root[data-v-123cce62]{position:relative;z-index:1}.VPDocAside[data-v-35c1bae1]{display:flex;flex-direction:column;flex-grow:1}.spacer[data-v-35c1bae1]{flex-grow:1}.VPDocAside[data-v-35c1bae1] .spacer+.VPDocAsideSponsors,.VPDocAside[data-v-35c1bae1] .spacer+.VPDocAsideCarbonAds{margin-top:24px}.VPDocAside[data-v-35c1bae1] .VPDocAsideSponsors+.VPDocAsideCarbonAds{margin-top:16px}.VPLastUpdated[data-v-819b7a18]{line-height:24px;font-size:14px;font-weight:500;color:var(--vp-c-text-2)}@media (min-width: 640px){.VPLastUpdated[data-v-819b7a18]{line-height:32px;font-size:14px;font-weight:500}}.VPDocFooter[data-v-cfaa3a6c]{margin-top:64px}.edit-info[data-v-cfaa3a6c]{padding-bottom:18px}@media (min-width: 640px){.edit-info[data-v-cfaa3a6c]{display:flex;justify-content:space-between;align-items:center;padding-bottom:14px}}.edit-link-button[data-v-cfaa3a6c]{display:flex;align-items:center;border:0;line-height:32px;font-size:14px;font-weight:500;color:var(--vp-c-brand);transition:color .25s}.edit-link-button[data-v-cfaa3a6c]:hover{color:var(--vp-c-brand-dark)}.edit-link-icon[data-v-cfaa3a6c]{margin-right:8px;width:14px;height:14px;fill:currentColor}.prev-next[data-v-cfaa3a6c]{border-top:1px solid var(--vp-c-divider-light);padding-top:24px}@media (min-width: 640px){.prev-next[data-v-cfaa3a6c]{display:flex}}.pager.has-prev[data-v-cfaa3a6c]{padding-top:8px}@media (min-width: 640px){.pager[data-v-cfaa3a6c]{display:flex;flex-direction:column;flex-shrink:0;width:50%}.pager.has-prev[data-v-cfaa3a6c]{padding-top:0;padding-left:16px}}.pager-link[data-v-cfaa3a6c]{display:block;border:1px solid var(--vp-c-divider-light);border-radius:8px;padding:11px 16px 13px;width:100%;height:100%;transition:border-color .25s}.pager-link[data-v-cfaa3a6c]:hover{border-color:var(--vp-c-brand)}.pager-link:hover .title[data-v-cfaa3a6c]{color:var(--vp-c-brand-dark)}.pager-link.next[data-v-cfaa3a6c]{margin-left:auto;text-align:right}.desc[data-v-cfaa3a6c]{display:block;line-height:20px;font-size:12px;font-weight:500;color:var(--vp-c-text-2)}.title[data-v-cfaa3a6c]{display:block;line-height:20px;font-size:14px;font-weight:500;color:var(--vp-c-brand);transition:color .25s}.VPDoc[data-v-32b7ddf4]{padding:32px 24px 96px;width:100%}@media (min-width: 768px){.VPDoc[data-v-32b7ddf4]{padding:48px 32px 128px}}@media (min-width: 960px){.VPDoc[data-v-32b7ddf4]{padding:32px 32px 0}.VPDoc:not(.has-sidebar) .container[data-v-32b7ddf4]{display:flex;justify-content:center;max-width:992px}.VPDoc:not(.has-sidebar) .aside[data-v-32b7ddf4]{display:block}.VPDoc:not(.has-sidebar) .content[data-v-32b7ddf4]{max-width:752px}}@media (min-width: 1280px){.VPDoc .container[data-v-32b7ddf4]{display:flex;justify-content:center}.VPDoc .aside[data-v-32b7ddf4]{display:block}}@media (min-width: 1440px){.VPDoc:not(.has-sidebar) .content[data-v-32b7ddf4]{max-width:784px}.VPDoc:not(.has-sidebar) .container[data-v-32b7ddf4]{max-width:1104px}}.container[data-v-32b7ddf4]{margin:0 auto;width:100%}.aside[data-v-32b7ddf4]{position:relative;display:none;order:2;flex-grow:1;padding-left:32px;width:100%;max-width:256px}.aside-container[data-v-32b7ddf4]{position:-webkit-sticky;position:sticky;top:0;margin-top:calc(var(--vp-nav-height-desktop) * -1 - 32px);padding-top:calc(var(--vp-nav-height-desktop) + 32px);height:100vh;overflow-x:hidden;overflow-y:auto;scrollbar-width:none}.aside-container[data-v-32b7ddf4]::-webkit-scrollbar{display:none}.aside-curtain[data-v-32b7ddf4]{position:fixed;bottom:0;z-index:10;width:224px;height:32px;background:linear-gradient(transparent,var(--vp-c-bg) 70%)}.aside-content[data-v-32b7ddf4]{display:flex;flex-direction:column;min-height:calc(100vh - (var(--vp-nav-height-desktop) + 32px));padding-bottom:32px}.content[data-v-32b7ddf4]{position:relative;margin:0 auto;width:100%}@media (min-width: 960px){.content[data-v-32b7ddf4]{padding:0 32px 128px}}@media (min-width: 1280px){.content[data-v-32b7ddf4]{order:1;margin:0;min-width:640px}}.content-container[data-v-32b7ddf4]{margin:0 auto;max-width:688px}.VPContent[data-v-564173e9]{flex-grow:1;flex-shrink:0;margin:0 auto;width:100%}.VPContent.is-home[data-v-564173e9]{width:100%;max-width:100%}@media (min-width: 960px){.VPContent[data-v-564173e9]{padding-top:var(--vp-nav-height)}.VPContent.has-sidebar[data-v-564173e9]{margin:0;padding-left:var(--vp-sidebar-width)}}@media (min-width: 1440px){.VPContent.has-sidebar[data-v-564173e9]{padding-right:calc((100vw - var(--vp-layout-max-width)) / 2);padding-left:calc((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width))}}.VPFooter[data-v-a6c8dde4]{position:relative;z-index:var(--vp-z-index-footer);border-top:1px solid var(--vp-c-divider-light);padding:32px 24px;background-color:var(--vp-c-bg)}.VPFooter.has-sidebar[data-v-a6c8dde4]{display:none}@media (min-width: 768px){.VPFooter[data-v-a6c8dde4]{padding:32px}}.container[data-v-a6c8dde4]{margin:0 auto;max-width:var(--vp-layout-max-width);text-align:center}.message[data-v-a6c8dde4],.copyright[data-v-a6c8dde4]{line-height:24px;font-size:14px;font-weight:500;color:var(--vp-c-text-2)}.message[data-v-a6c8dde4]{order:2}.copyright[data-v-a6c8dde4]{order:1}.Layout[data-v-058b7495]{display:flex;flex-direction:column;min-height:100vh}.VPHomeSponsors[data-v-72ed4032]{border-top:1px solid var(--vp-c-divider-light);padding:88px 24px 96px;background-color:var(--vp-c-bg)}.container[data-v-72ed4032]{margin:0 auto;max-width:1152px}.love[data-v-72ed4032]{margin:0 auto;width:28px;height:28px;color:var(--vp-c-text-3)}.icon[data-v-72ed4032]{width:28px;height:28px;fill:currentColor}.message[data-v-72ed4032]{margin:0 auto;padding-top:10px;max-width:320px;text-align:center;line-height:24px;font-size:16px;font-weight:500;color:var(--vp-c-text-2)}.sponsors[data-v-72ed4032]{padding-top:32px}.action[data-v-72ed4032]{padding-top:40px;text-align:center}.VPTeamPage[data-v-76c33936]{padding-bottom:96px}@media (min-width: 768px){.VPTeamPage[data-v-76c33936]{padding-bottom:128px}}.VPTeamPageSection+.VPTeamPageSection[data-v-76c33936-s],.VPTeamMembers+.VPTeamPageSection[data-v-76c33936-s]{margin-top:64px}.VPTeamMembers+.VPTeamMembers[data-v-76c33936-s]{margin-top:24px}@media (min-width: 768px){.VPTeamPageTitle+.VPTeamPageSection[data-v-76c33936-s]{margin-top:16px}.VPTeamPageSection+.VPTeamPageSection[data-v-76c33936-s],.VPTeamMembers+.VPTeamPageSection[data-v-76c33936-s]{margin-top:96px}}.VPTeamMembers[data-v-76c33936-s]{padding:0 24px}@media (min-width: 768px){.VPTeamMembers[data-v-76c33936-s]{padding:0 48px}}@media (min-width: 960px){.VPTeamMembers[data-v-76c33936-s]{padding:0 64px}}.VPTeamPageTitle[data-v-07a07214]{padding:48px 32px;text-align:center}@media (min-width: 768px){.VPTeamPageTitle[data-v-07a07214]{padding:64px 48px 48px}}@media (min-width: 960px){.VPTeamPageTitle[data-v-07a07214]{padding:80px 64px 48px}}.title[data-v-07a07214]{letter-spacing:0;line-height:44px;font-size:36px;font-weight:500}@media (min-width: 768px){.title[data-v-07a07214]{letter-spacing:-.5px;line-height:56px;font-size:48px}}.lead[data-v-07a07214]{margin:0 auto;max-width:512px;padding-top:12px;line-height:24px;font-size:16px;font-weight:500;color:var(--vp-c-text-2)}@media (min-width: 768px){.lead[data-v-07a07214]{max-width:592px;letter-spacing:.15px;line-height:28px;font-size:20px}}.VPTeamPageSection[data-v-142ccd54]{padding:0 32px}@media (min-width: 768px){.VPTeamPageSection[data-v-142ccd54]{padding:0 48px}}@media (min-width: 960px){.VPTeamPageSection[data-v-142ccd54]{padding:0 64px}}.title[data-v-142ccd54]{position:relative;margin:0 auto;max-width:1152px;text-align:center;color:var(--vp-c-text-2)}.title-line[data-v-142ccd54]{position:absolute;top:16px;left:0;width:100%;height:1px;background-color:var(--vp-c-divider-light)}.title-text[data-v-142ccd54]{position:relative;display:inline-block;padding:0 24px;letter-spacing:0;line-height:32px;font-size:20px;font-weight:500;background-color:var(--vp-c-bg)}.lead[data-v-142ccd54]{margin:0 auto;max-width:480px;padding-top:12px;text-align:center;line-height:24px;font-size:16px;font-weight:500;color:var(--vp-c-text-2)}.members[data-v-142ccd54]{padding-top:40px}.VPTeamMembersItem[data-v-bc123a82]{display:flex;flex-direction:column;gap:2px;border-radius:12px;width:100%;height:100%;overflow:hidden}.VPTeamMembersItem.small .profile[data-v-bc123a82]{padding:32px}.VPTeamMembersItem.small .data[data-v-bc123a82]{padding-top:20px}.VPTeamMembersItem.small .avatar[data-v-bc123a82]{width:64px;height:64px}.VPTeamMembersItem.small .name[data-v-bc123a82]{line-height:24px;font-size:16px}.VPTeamMembersItem.small .affiliation[data-v-bc123a82]{padding-top:4px;line-height:20px;font-size:14px}.VPTeamMembersItem.small .desc[data-v-bc123a82]{padding-top:12px;line-height:20px;font-size:14px}.VPTeamMembersItem.small .links[data-v-bc123a82]{margin:0 -16px -20px;padding:10px 0 0}.VPTeamMembersItem.medium .profile[data-v-bc123a82]{padding:48px 32px}.VPTeamMembersItem.medium .data[data-v-bc123a82]{padding-top:24px;text-align:center}.VPTeamMembersItem.medium .avatar[data-v-bc123a82]{width:96px;height:96px}.VPTeamMembersItem.medium .name[data-v-bc123a82]{letter-spacing:.15px;line-height:28px;font-size:20px}.VPTeamMembersItem.medium .affiliation[data-v-bc123a82]{padding-top:4px;font-size:16px}.VPTeamMembersItem.medium .desc[data-v-bc123a82]{padding-top:16px;max-width:288px;font-size:16px}.VPTeamMembersItem.medium .links[data-v-bc123a82]{margin:0 -16px -12px;padding:16px 12px 0}.profile[data-v-bc123a82]{flex-grow:1;background-color:var(--vp-c-bg-soft)}.data[data-v-bc123a82]{text-align:center}.avatar[data-v-bc123a82]{position:relative;flex-shrink:0;margin:0 auto;border-radius:50%;box-shadow:var(--vp-shadow-3)}.avatar-img[data-v-bc123a82]{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;-o-object-fit:cover;object-fit:cover}.name[data-v-bc123a82]{margin:0;font-weight:600}.affiliation[data-v-bc123a82]{margin:0;font-weight:500;color:var(--vp-c-text-2)}.org.link[data-v-bc123a82]{color:var(--vp-c-text-2);transition:color .25s}.org.link[data-v-bc123a82]:hover{color:var(--vp-c-brand)}.desc[data-v-bc123a82]{margin:0 auto}.links[data-v-bc123a82]{display:flex;justify-content:center;height:56px}.sponsor-link[data-v-bc123a82]{display:flex;justify-content:center;align-items:center;text-align:center;padding:16px;font-size:14px;font-weight:500;color:var(--vp-c-sponsor);background-color:var(--vp-c-bg-soft);transition:color .25s,background-color .25s}.sponsor-link[data-v-bc123a82]:hover,.sponsor-link[data-v-bc123a82]:focus{outline:none;color:var(--vp-c-text-dark-1);background-color:var(--vp-c-sponsor)}.sponsor-icon[data-v-bc123a82]{margin-right:8px;width:16px;height:16px;fill:currentColor}.VPTeamMembers.small .container[data-v-03e04260]{grid-template-columns:repeat(auto-fit,minmax(224px,1fr))}.VPTeamMembers.small.count-1 .container[data-v-03e04260]{max-width:276px}.VPTeamMembers.small.count-2 .container[data-v-03e04260]{max-width:576px}.VPTeamMembers.small.count-3 .container[data-v-03e04260]{max-width:876px}.VPTeamMembers.medium .container[data-v-03e04260]{grid-template-columns:repeat(auto-fit,minmax(256px,1fr))}@media (min-width: 375px){.VPTeamMembers.medium .container[data-v-03e04260]{grid-template-columns:repeat(auto-fit,minmax(288px,1fr))}}.VPTeamMembers.medium.count-1 .container[data-v-03e04260]{max-width:368px}.VPTeamMembers.medium.count-2 .container[data-v-03e04260]{max-width:760px}.container[data-v-03e04260]{display:grid;gap:24px;margin:0 auto;max-width:1152px}@-webkit-keyframes ms-motion-fadeIn{0%{opacity:0}to{opacity:1}}@keyframes ms-motion-fadeIn{0%{opacity:0}to{opacity:1}}@-webkit-keyframes ms-motion-fadeOut{0%{opacity:1}to{opacity:0}}@keyframes ms-motion-fadeOut{0%{opacity:1}to{opacity:0}}@-webkit-keyframes ms-motion-scaleDownIn{0%{transform:scale3d(1.15,1.15,1)}to{transform:scaleZ(1)}}@keyframes ms-motion-scaleDownIn{0%{transform:scale3d(1.15,1.15,1)}to{transform:scaleZ(1)}}@-webkit-keyframes ms-motion-scaleDownOut{0%{transform:scaleZ(1)}to{transform:scale3d(.9,.9,1)}}@keyframes ms-motion-scaleDownOut{0%{transform:scaleZ(1)}to{transform:scale3d(.9,.9,1)}}@-webkit-keyframes ms-motion-slideLeftOut{0%{transform:translateZ(0)}to{transform:translate3d(-48px,0,0)}}@keyframes ms-motion-slideLeftOut{0%{transform:translateZ(0)}to{transform:translate3d(-48px,0,0)}}@-webkit-keyframes ms-motion-slideRightOut{0%{transform:translateZ(0)}to{transform:translate3d(48px,0,0)}}@keyframes ms-motion-slideRightOut{0%{transform:translateZ(0)}to{transform:translate3d(48px,0,0)}}@-webkit-keyframes ms-motion-slideLeftIn{0%{transform:translate3d(48px,0,0)}to{transform:translateZ(0)}}@keyframes ms-motion-slideLeftIn{0%{transform:translate3d(48px,0,0)}to{transform:translateZ(0)}}@-webkit-keyframes ms-motion-slideRightIn{0%{transform:translate3d(-48px,0,0)}to{transform:translateZ(0)}}@keyframes ms-motion-slideRightIn{0%{transform:translate3d(-48px,0,0)}to{transform:translateZ(0)}}@-webkit-keyframes ms-motion-slideUpOut{0%{transform:translateZ(0)}to{transform:translate3d(0,-48px,0)}}@keyframes ms-motion-slideUpOut{0%{transform:translateZ(0)}to{transform:translate3d(0,-48px,0)}}@-webkit-keyframes ms-motion-slideDownOut{0%{transform:translateZ(0)}to{transform:translate3d(0,48px,0)}}@keyframes ms-motion-slideDownOut{0%{transform:translateZ(0)}to{transform:translate3d(0,48px,0)}}@-webkit-keyframes ms-motion-slideUpIn{0%{transform:translate3d(0,48px,0)}to{transform:translateZ(0)}}@keyframes ms-motion-slideUpIn{0%{transform:translate3d(0,48px,0)}to{transform:translateZ(0)}}@-webkit-keyframes ms-motion-slideDownIn{0%{transform:translate3d(0,-48px,0)}to{transform:translateZ(0)}}@keyframes ms-motion-slideDownIn{0%{transform:translate3d(0,-48px,0)}to{transform:translateZ(0)}}.ms-motion-fadeIn{-webkit-animation:ms-motion-fadeIn .1s cubic-bezier(0,0,1,1) both;animation:ms-motion-fadeIn .1s cubic-bezier(0,0,1,1) both}.ms-motion-fadeOut{-webkit-animation:ms-motion-fadeOut .1s cubic-bezier(0,0,1,1) both;animation:ms-motion-fadeOut .1s cubic-bezier(0,0,1,1) both}.ms-motion-scaleDownIn{-webkit-animation:ms-motion-scaleDownIn .3s cubic-bezier(.1,.9,.2,1) both,ms-motion-fadeIn .1s cubic-bezier(0,0,1,1) both;animation:ms-motion-scaleDownIn .3s cubic-bezier(.1,.9,.2,1) both,ms-motion-fadeIn .1s cubic-bezier(0,0,1,1) both}.ms-motion-scaleDownOut{-webkit-animation:ms-motion-scaleDownOut .3s cubic-bezier(.1,.9,.2,1) both,ms-motion-fadeOut .1s cubic-bezier(0,0,1,1) both;animation:ms-motion-scaleDownOut .3s cubic-bezier(.1,.9,.2,1) both,ms-motion-fadeOut .1s cubic-bezier(0,0,1,1) both}[dir=ltr] .ms-motion-slideLeftOut{-webkit-animation:ms-motion-slideLeftOut .1s cubic-bezier(.9,.1,1,.2) both,ms-motion-fadeOut .1s cubic-bezier(0,0,1,1) both;animation:ms-motion-slideLeftOut .1s cubic-bezier(.9,.1,1,.2) both,ms-motion-fadeOut .1s cubic-bezier(0,0,1,1) both}[dir=rtl] .ms-motion-slideLeftOut,[dir=ltr] .ms-motion-slideRightOut{-webkit-animation:ms-motion-slideRightOut .1s cubic-bezier(.9,.1,1,.2) both,ms-motion-fadeOut .1s cubic-bezier(0,0,1,1) both;animation:ms-motion-slideRightOut .1s cubic-bezier(.9,.1,1,.2) both,ms-motion-fadeOut .1s cubic-bezier(0,0,1,1) both}[dir=rtl] .ms-motion-slideRightOut{-webkit-animation:ms-motion-slideLeftOut .1s cubic-bezier(.9,.1,1,.2) both,ms-motion-fadeOut .1s cubic-bezier(0,0,1,1) both;animation:ms-motion-slideLeftOut .1s cubic-bezier(.9,.1,1,.2) both,ms-motion-fadeOut .1s cubic-bezier(0,0,1,1) both}[dir=ltr] .ms-motion-slideLeftIn{-webkit-animation:ms-motion-slideLeftIn .1s cubic-bezier(.1,.9,.2,1) both,ms-motion-fadeIn .1s cubic-bezier(0,0,1,1) both;animation:ms-motion-slideLeftIn .1s cubic-bezier(.1,.9,.2,1) both,ms-motion-fadeIn .1s cubic-bezier(0,0,1,1) both}[dir=rtl] .ms-motion-slideLeftIn,[dir=ltr] .ms-motion-slideRightIn{-webkit-animation:ms-motion-slideRightIn .1s cubic-bezier(.1,.9,.2,1) both,ms-motion-fadeIn .1s cubic-bezier(0,0,1,1) both;animation:ms-motion-slideRightIn .1s cubic-bezier(.1,.9,.2,1) both,ms-motion-fadeIn .1s cubic-bezier(0,0,1,1) both}[dir=rtl] .ms-motion-slideRightIn{-webkit-animation:ms-motion-slideLeftIn .1s cubic-bezier(.1,.9,.2,1) both,ms-motion-fadeIn .1s cubic-bezier(0,0,1,1) both;animation:ms-motion-slideLeftIn .1s cubic-bezier(.1,.9,.2,1) both,ms-motion-fadeIn .1s cubic-bezier(0,0,1,1) both}.ms-motion-slideUpOut{-webkit-animation:ms-motion-slideUpOut .1s cubic-bezier(.9,.1,1,.2) both,ms-motion-fadeOut .1s cubic-bezier(0,0,1,1) both;animation:ms-motion-slideUpOut .1s cubic-bezier(.9,.1,1,.2) both,ms-motion-fadeOut .1s cubic-bezier(0,0,1,1) both}.ms-motion-slideDownOut{-webkit-animation:ms-motion-slideDownOut .1s cubic-bezier(.9,.1,1,.2) both,ms-motion-fadeOut .1s cubic-bezier(0,0,1,1) both;animation:ms-motion-slideDownOut .1s cubic-bezier(.9,.1,1,.2) both,ms-motion-fadeOut .1s cubic-bezier(0,0,1,1) both}.ms-motion-slideUpIn{-webkit-animation:ms-motion-slideUpIn .1s cubic-bezier(.1,.9,.2,1) both,ms-motion-fadeIn .1s cubic-bezier(0,0,1,1) both;animation:ms-motion-slideUpIn .1s cubic-bezier(.1,.9,.2,1) both,ms-motion-fadeIn .1s cubic-bezier(0,0,1,1) both}.ms-motion-slideDownIn{-webkit-animation:ms-motion-slideDownIn .1s cubic-bezier(.1,.9,.2,1) both,ms-motion-fadeIn .1s cubic-bezier(0,0,1,1) both;animation:ms-motion-slideDownIn .1s cubic-bezier(.1,.9,.2,1) both,ms-motion-fadeIn .1s cubic-bezier(0,0,1,1) both}@-webkit-keyframes ms-slideRightIn10{0%{transform:translate3d(-10px,0,0)}to{transform:translateZ(0)}}@keyframes ms-slideRightIn10{0%{transform:translate3d(-10px,0,0)}to{transform:translateZ(0)}}@-webkit-keyframes ms-slideRightIn20{0%{transform:translate3d(-20px,0,0)}to{transform:translateZ(0)}}@keyframes ms-slideRightIn20{0%{transform:translate3d(-20px,0,0)}to{transform:translateZ(0)}}@-webkit-keyframes ms-slideRightIn40{0%{transform:translate3d(-40px,0,0)}to{transform:translateZ(0)}}@keyframes ms-slideRightIn40{0%{transform:translate3d(-40px,0,0)}to{transform:translateZ(0)}}@-webkit-keyframes ms-slideRightIn400{0%{transform:translate3d(-400px,0,0)}to{transform:translateZ(0)}}@keyframes ms-slideRightIn400{0%{transform:translate3d(-400px,0,0)}to{transform:translateZ(0)}}@-webkit-keyframes ms-slideRightOut40{0%{transform:translateZ(0)}to{transform:translate3d(40px,0,0)}}@keyframes ms-slideRightOut40{0%{transform:translateZ(0)}to{transform:translate3d(40px,0,0)}}@-webkit-keyframes ms-slideRightOut400{0%{transform:translateZ(0)}to{transform:translate3d(400px,0,0)}}@keyframes ms-slideRightOut400{0%{transform:translateZ(0)}to{transform:translate3d(400px,0,0)}}@-webkit-keyframes ms-slideLeftIn10{0%{transform:translate3d(10px,0,0)}to{transform:translateZ(0)}}@keyframes ms-slideLeftIn10{0%{transform:translate3d(10px,0,0)}to{transform:translateZ(0)}}@-webkit-keyframes ms-slideLeftIn20{0%{transform:translate3d(20px,0,0)}to{transform:translateZ(0)}}@keyframes ms-slideLeftIn20{0%{transform:translate3d(20px,0,0)}to{transform:translateZ(0)}}@-webkit-keyframes ms-slideLeftIn40{0%{transform:translate3d(40px,0,0)}to{transform:translateZ(0)}}@keyframes ms-slideLeftIn40{0%{transform:translate3d(40px,0,0)}to{transform:translateZ(0)}}@-webkit-keyframes ms-slideLeftIn400{0%{transform:translate3d(400px,0,0)}to{transform:translateZ(0)}}@keyframes ms-slideLeftIn400{0%{transform:translate3d(400px,0,0)}to{transform:translateZ(0)}}@-webkit-keyframes ms-slideLeftOut40{0%{transform:translateZ(0)}to{transform:translate3d(-40px,0,0)}}@keyframes ms-slideLeftOut40{0%{transform:translateZ(0)}to{transform:translate3d(-40px,0,0)}}@-webkit-keyframes ms-slideLeftOut400{0%{transform:translateZ(0)}to{transform:translate3d(-400px,0,0)}}@keyframes ms-slideLeftOut400{0%{transform:translateZ(0)}to{transform:translate3d(-400px,0,0)}}@-webkit-keyframes ms-slideUpIn10{0%{transform:translate3d(0,10px,0)}to{transform:translateZ(0)}}@keyframes ms-slideUpIn10{0%{transform:translate3d(0,10px,0)}to{transform:translateZ(0)}}@-webkit-keyframes ms-slideUpIn20{0%{transform:translate3d(0,20px,0)}to{transform:translateZ(0)}}@keyframes ms-slideUpIn20{0%{transform:translate3d(0,20px,0)}to{transform:translateZ(0)}}@-webkit-keyframes ms-slideDownIn10{0%{transform:translate3d(0,-10px,0)}to{transform:translateZ(0)}}@keyframes ms-slideDownIn10{0%{transform:translate3d(0,-10px,0)}to{transform:translateZ(0)}}@-webkit-keyframes ms-slideDownIn20{0%{transform:translate3d(0,-20px,0)}to{transform:translateZ(0)}}@keyframes ms-slideDownIn20{0%{transform:translate3d(0,-20px,0)}to{transform:translateZ(0)}}@-webkit-keyframes ms-slideUpOut10{0%{transform:translateZ(0)}to{transform:translate3d(0,-10px,0)}}@keyframes ms-slideUpOut10{0%{transform:translateZ(0)}to{transform:translate3d(0,-10px,0)}}@-webkit-keyframes ms-slideUpOut20{0%{transform:translateZ(0)}to{transform:translate3d(0,-20px,0)}}@keyframes ms-slideUpOut20{0%{transform:translateZ(0)}to{transform:translate3d(0,-20px,0)}}@-webkit-keyframes ms-slideDownOut10{0%{transform:translateZ(0)}to{transform:translate3d(0,10px,0)}}@keyframes ms-slideDownOut10{0%{transform:translateZ(0)}to{transform:translate3d(0,10px,0)}}@-webkit-keyframes ms-slideDownOut20{0%{transform:translateZ(0)}to{transform:translate3d(0,20px,0)}}@keyframes ms-slideDownOut20{0%{transform:translateZ(0)}to{transform:translate3d(0,20px,0)}}@-webkit-keyframes ms-scaleUp100{0%{transform:scale3d(.98,.98,1)}to{transform:scaleZ(1)}}@keyframes ms-scaleUp100{0%{transform:scale3d(.98,.98,1)}to{transform:scaleZ(1)}}@-webkit-keyframes ms-scaleUp103{0%{transform:scaleZ(1)}to{transform:scale3d(1.03,1.03,1)}}@keyframes ms-scaleUp103{0%{transform:scaleZ(1)}to{transform:scale3d(1.03,1.03,1)}}@-webkit-keyframes ms-scaleDown98{0%{transform:scaleZ(1)}to{transform:scale3d(.98,.98,1)}}@keyframes ms-scaleDown98{0%{transform:scaleZ(1)}to{transform:scale3d(.98,.98,1)}}@-webkit-keyframes ms-scaleDown100{0%{transform:scale3d(1.03,1.03,1)}to{transform:scaleZ(1)}}@keyframes ms-scaleDown100{0%{transform:scale3d(1.03,1.03,1)}to{transform:scaleZ(1)}}@-webkit-keyframes ms-fadeIn{0%{opacity:0;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9)}to{opacity:1}}@keyframes ms-fadeIn{0%{opacity:0;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9)}to{opacity:1}}@-webkit-keyframes ms-fadeOut{0%{opacity:1;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9)}to{opacity:0}}@keyframes ms-fadeOut{0%{opacity:1;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9)}to{opacity:0}}@-webkit-keyframes ms-rotate90{0%{transform:rotate(0)}to{transform:rotate(90deg)}}@keyframes ms-rotate90{0%{transform:rotate(0)}to{transform:rotate(90deg)}}@-webkit-keyframes ms-rotateN90{0%{transform:rotate(90deg)}to{transform:rotate(0)}}@keyframes ms-rotateN90{0%{transform:rotate(90deg)}to{transform:rotate(0)}}[dir=ltr] .ms-slideRightIn10{-webkit-animation-name:ms-fadeIn,ms-slideRightIn10;animation-name:ms-fadeIn,ms-slideRightIn10;-webkit-animation-duration:367ms;animation-duration:367ms;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}@media (prefers-reduced-motion: reduce){[dir=ltr] .ms-slideRightIn10{-webkit-animation:none;animation:none}}[dir=rtl] .ms-slideRightIn10{-webkit-animation-name:ms-fadeIn,ms-slideLeftIn10;animation-name:ms-fadeIn,ms-slideLeftIn10;-webkit-animation-duration:367ms;animation-duration:367ms;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}@media (prefers-reduced-motion: reduce){[dir=rtl] .ms-slideRightIn10{-webkit-animation:none;animation:none}}[dir=ltr] .ms-slideRightIn20{-webkit-animation-name:ms-fadeIn,ms-slideRightIn20;animation-name:ms-fadeIn,ms-slideRightIn20;-webkit-animation-duration:367ms;animation-duration:367ms;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}@media (prefers-reduced-motion: reduce){[dir=ltr] .ms-slideRightIn20{-webkit-animation:none;animation:none}}[dir=rtl] .ms-slideRightIn20{-webkit-animation-name:ms-fadeIn,ms-slideLeftIn20;animation-name:ms-fadeIn,ms-slideLeftIn20;-webkit-animation-duration:367ms;animation-duration:367ms;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}@media (prefers-reduced-motion: reduce){[dir=rtl] .ms-slideRightIn20{-webkit-animation:none;animation:none}}[dir=ltr] .ms-slideRightIn40{-webkit-animation-name:ms-fadeIn,ms-slideRightIn40;animation-name:ms-fadeIn,ms-slideRightIn40;-webkit-animation-duration:367ms;animation-duration:367ms;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}@media (prefers-reduced-motion: reduce){[dir=ltr] .ms-slideRightIn40{-webkit-animation:none;animation:none}}[dir=rtl] .ms-slideRightIn40{-webkit-animation-name:ms-fadeIn,ms-slideLeftIn40;animation-name:ms-fadeIn,ms-slideLeftIn40;-webkit-animation-duration:367ms;animation-duration:367ms;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}@media (prefers-reduced-motion: reduce){[dir=rtl] .ms-slideRightIn40{-webkit-animation:none;animation:none}}[dir=ltr] .ms-slideRightIn400{-webkit-animation-name:ms-fadeIn,ms-slideRightIn400;animation-name:ms-fadeIn,ms-slideRightIn400;-webkit-animation-duration:367ms;animation-duration:367ms;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}@media (prefers-reduced-motion: reduce){[dir=ltr] .ms-slideRightIn400{-webkit-animation:none;animation:none}}[dir=rtl] .ms-slideRightIn400{-webkit-animation-name:ms-fadeIn,ms-slideLeftIn400;animation-name:ms-fadeIn,ms-slideLeftIn400;-webkit-animation-duration:367ms;animation-duration:367ms;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}@media (prefers-reduced-motion: reduce){[dir=rtl] .ms-slideRightIn400{-webkit-animation:none;animation:none}}[dir=ltr] .ms-slideRightOut40{-webkit-animation-name:ms-fadeOut,ms-slideRightOut40;animation-name:ms-fadeOut,ms-slideRightOut40;-webkit-animation-duration:167ms;animation-duration:167ms;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}@media (prefers-reduced-motion: reduce){[dir=ltr] .ms-slideRightOut40{-webkit-animation:none;animation:none}}[dir=rtl] .ms-slideRightOut40{-webkit-animation-name:ms-fadeOut,ms-slideLeftOut40;animation-name:ms-fadeOut,ms-slideLeftOut40;-webkit-animation-duration:167ms;animation-duration:167ms;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}@media (prefers-reduced-motion: reduce){[dir=rtl] .ms-slideRightOut40{-webkit-animation:none;animation:none}}[dir=ltr] .ms-slideRightOut400{-webkit-animation-name:ms-fadeOut,ms-slideRightOut400;animation-name:ms-fadeOut,ms-slideRightOut400;-webkit-animation-duration:167ms;animation-duration:167ms;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}@media (prefers-reduced-motion: reduce){[dir=ltr] .ms-slideRightOut400{-webkit-animation:none;animation:none}}[dir=rtl] .ms-slideRightOut400{-webkit-animation-name:ms-fadeOut,ms-slideLeftOut400;animation-name:ms-fadeOut,ms-slideLeftOut400;-webkit-animation-duration:167ms;animation-duration:167ms;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}@media (prefers-reduced-motion: reduce){[dir=rtl] .ms-slideRightOut400{-webkit-animation:none;animation:none}}[dir=ltr] .ms-slideLeftIn10{-webkit-animation-name:ms-fadeIn,ms-slideLeftIn10;animation-name:ms-fadeIn,ms-slideLeftIn10;-webkit-animation-duration:367ms;animation-duration:367ms;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}@media (prefers-reduced-motion: reduce){[dir=ltr] .ms-slideLeftIn10{-webkit-animation:none;animation:none}}[dir=rtl] .ms-slideLeftIn10{-webkit-animation-name:ms-fadeIn,ms-slideRightIn10;animation-name:ms-fadeIn,ms-slideRightIn10;-webkit-animation-duration:367ms;animation-duration:367ms;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}@media (prefers-reduced-motion: reduce){[dir=rtl] .ms-slideLeftIn10{-webkit-animation:none;animation:none}}[dir=ltr] .ms-slideLeftIn20{-webkit-animation-name:ms-fadeIn,ms-slideLeftIn20;animation-name:ms-fadeIn,ms-slideLeftIn20;-webkit-animation-duration:367ms;animation-duration:367ms;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}@media (prefers-reduced-motion: reduce){[dir=ltr] .ms-slideLeftIn20{-webkit-animation:none;animation:none}}[dir=rtl] .ms-slideLeftIn20{-webkit-animation-name:ms-fadeIn,ms-slideRightIn20;animation-name:ms-fadeIn,ms-slideRightIn20;-webkit-animation-duration:367ms;animation-duration:367ms;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}@media (prefers-reduced-motion: reduce){[dir=rtl] .ms-slideLeftIn20{-webkit-animation:none;animation:none}}[dir=ltr] .ms-slideLeftIn40{-webkit-animation-name:ms-fadeIn,ms-slideLeftIn40;animation-name:ms-fadeIn,ms-slideLeftIn40;-webkit-animation-duration:367ms;animation-duration:367ms;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}@media (prefers-reduced-motion: reduce){[dir=ltr] .ms-slideLeftIn40{-webkit-animation:none;animation:none}}[dir=rtl] .ms-slideLeftIn40{-webkit-animation-name:ms-fadeIn,ms-slideRightIn40;animation-name:ms-fadeIn,ms-slideRightIn40;-webkit-animation-duration:367ms;animation-duration:367ms;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}@media (prefers-reduced-motion: reduce){[dir=rtl] .ms-slideLeftIn40{-webkit-animation:none;animation:none}}[dir=ltr] .ms-slideLeftIn400{-webkit-animation-name:ms-fadeIn,ms-slideLeftIn400;animation-name:ms-fadeIn,ms-slideLeftIn400;-webkit-animation-duration:367ms;animation-duration:367ms;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}@media (prefers-reduced-motion: reduce){[dir=ltr] .ms-slideLeftIn400{-webkit-animation:none;animation:none}}[dir=rtl] .ms-slideLeftIn400{-webkit-animation-name:ms-fadeIn,ms-slideRightIn400;animation-name:ms-fadeIn,ms-slideRightIn400;-webkit-animation-duration:367ms;animation-duration:367ms;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}@media (prefers-reduced-motion: reduce){[dir=rtl] .ms-slideLeftIn400{-webkit-animation:none;animation:none}}[dir=ltr] .ms-slideLeftOut40{-webkit-animation-name:ms-fadeOut,ms-slideLeftOut40;animation-name:ms-fadeOut,ms-slideLeftOut40;-webkit-animation-duration:167ms;animation-duration:167ms;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}@media (prefers-reduced-motion: reduce){[dir=ltr] .ms-slideLeftOut40{-webkit-animation:none;animation:none}}[dir=rtl] .ms-slideLeftOut40{-webkit-animation-name:ms-fadeOut,ms-slideRightOut40;animation-name:ms-fadeOut,ms-slideRightOut40;-webkit-animation-duration:167ms;animation-duration:167ms;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}@media (prefers-reduced-motion: reduce){[dir=rtl] .ms-slideLeftOut40{-webkit-animation:none;animation:none}}[dir=ltr] .ms-slideLeftOut400{-webkit-animation-name:ms-fadeOut,ms-slideLeftOut400;animation-name:ms-fadeOut,ms-slideLeftOut400;-webkit-animation-duration:167ms;animation-duration:167ms;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}@media (prefers-reduced-motion: reduce){[dir=ltr] .ms-slideLeftOut400{-webkit-animation:none;animation:none}}[dir=rtl] .ms-slideLeftOut400{-webkit-animation-name:ms-fadeOut,ms-slideRightOut400;animation-name:ms-fadeOut,ms-slideRightOut400;-webkit-animation-duration:167ms;animation-duration:167ms;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}@media (prefers-reduced-motion: reduce){[dir=rtl] .ms-slideLeftOut400{-webkit-animation:none;animation:none}}.ms-slideUpIn10{-webkit-animation-name:ms-fadeIn,ms-slideUpIn10;animation-name:ms-fadeIn,ms-slideUpIn10;-webkit-animation-duration:167ms;animation-duration:167ms;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}@media (prefers-reduced-motion: reduce){.ms-slideUpIn10{-webkit-animation:none;animation:none}}.ms-slideUpIn20{-webkit-animation-name:ms-fadeIn,ms-slideUpIn20;animation-name:ms-fadeIn,ms-slideUpIn20;-webkit-animation-duration:367ms;animation-duration:367ms;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}@media (prefers-reduced-motion: reduce){.ms-slideUpIn20{-webkit-animation:none;animation:none}}.ms-slideDownIn10{-webkit-animation-name:ms-fadeIn,ms-slideDownIn10;animation-name:ms-fadeIn,ms-slideDownIn10;-webkit-animation-duration:167ms;animation-duration:167ms;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}@media (prefers-reduced-motion: reduce){.ms-slideDownIn10{-webkit-animation:none;animation:none}}.ms-slideDownIn20{-webkit-animation-name:ms-fadeIn,ms-slideDownIn20;animation-name:ms-fadeIn,ms-slideDownIn20;-webkit-animation-duration:367ms;animation-duration:367ms;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}@media (prefers-reduced-motion: reduce){.ms-slideDownIn20{-webkit-animation:none;animation:none}}.ms-slideUpOut10{-webkit-animation-name:ms-fadeOut,ms-slideUpOut10;animation-name:ms-fadeOut,ms-slideUpOut10;-webkit-animation-duration:167ms;animation-duration:167ms;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}@media (prefers-reduced-motion: reduce){.ms-slideUpOut10{-webkit-animation:none;animation:none}}.ms-slideUpOut20{-webkit-animation-name:ms-fadeOut,ms-slideUpOut20;animation-name:ms-fadeOut,ms-slideUpOut20;-webkit-animation-duration:167ms;animation-duration:167ms;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}@media (prefers-reduced-motion: reduce){.ms-slideUpOut20{-webkit-animation:none;animation:none}}.ms-slideDownOut10{-webkit-animation-name:ms-fadeOut,ms-slideDownOut10;animation-name:ms-fadeOut,ms-slideDownOut10;-webkit-animation-duration:167ms;animation-duration:167ms;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}@media (prefers-reduced-motion: reduce){.ms-slideDownOut10{-webkit-animation:none;animation:none}}.ms-slideDownOut20{-webkit-animation-name:ms-fadeOut,ms-slideDownOut20;animation-name:ms-fadeOut,ms-slideDownOut20;-webkit-animation-duration:167ms;animation-duration:167ms;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}@media (prefers-reduced-motion: reduce){.ms-slideDownOut20{-webkit-animation:none;animation:none}}.ms-scaleUpIn100{-webkit-animation-name:ms-fadeIn,ms-scaleUp100;animation-name:ms-fadeIn,ms-scaleUp100;-webkit-animation-duration:367ms;animation-duration:367ms;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}@media (prefers-reduced-motion: reduce){.ms-scaleUpIn100{-webkit-animation:none;animation:none}}.ms-scaleUpOut103{-webkit-animation-name:ms-fadeOut,ms-scaleUp103;animation-name:ms-fadeOut,ms-scaleUp103;-webkit-animation-duration:167ms;animation-duration:167ms;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}@media (prefers-reduced-motion: reduce){.ms-scaleUpOut103{-webkit-animation:none;animation:none}}.ms-scaleDownOut98{-webkit-animation-name:ms-fadeOut,ms-scaleDown98;animation-name:ms-fadeOut,ms-scaleDown98;-webkit-animation-duration:167ms;animation-duration:167ms;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}@media (prefers-reduced-motion: reduce){.ms-scaleDownOut98{-webkit-animation:none;animation:none}}.ms-scaleDownIn100{-webkit-animation-name:ms-fadeIn,ms-scaleDown100;animation-name:ms-fadeIn,ms-scaleDown100;-webkit-animation-duration:367ms;animation-duration:367ms;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}@media (prefers-reduced-motion: reduce){.ms-scaleDownIn100{-webkit-animation:none;animation:none}}.ms-fadeIn100{-webkit-animation-name:ms-fadeIn;animation-name:ms-fadeIn;-webkit-animation-duration:167ms;animation-duration:167ms;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}@media (prefers-reduced-motion: reduce){.ms-fadeIn100{-webkit-animation:none;animation:none}}.ms-fadeIn200{-webkit-animation-name:ms-fadeIn;animation-name:ms-fadeIn;-webkit-animation-duration:267ms;animation-duration:267ms;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}@media (prefers-reduced-motion: reduce){.ms-fadeIn200{-webkit-animation:none;animation:none}}.ms-fadeIn400{-webkit-animation-name:ms-fadeIn;animation-name:ms-fadeIn;-webkit-animation-duration:367ms;animation-duration:367ms;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}@media (prefers-reduced-motion: reduce){.ms-fadeIn400{-webkit-animation:none;animation:none}}.ms-fadeIn500{-webkit-animation-name:ms-fadeIn;animation-name:ms-fadeIn;-webkit-animation-duration:467ms;animation-duration:467ms;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}@media (prefers-reduced-motion: reduce){.ms-fadeIn500{-webkit-animation:none;animation:none}}.ms-fadeOut100{-webkit-animation-name:ms-fadeOut;animation-name:ms-fadeOut;-webkit-animation-duration:.1s;animation-duration:.1s;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}@media (prefers-reduced-motion: reduce){.ms-fadeOut100{-webkit-animation:none;animation:none}}.ms-fadeOut200{-webkit-animation-name:ms-fadeOut;animation-name:ms-fadeOut;-webkit-animation-duration:167ms;animation-duration:167ms;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}@media (prefers-reduced-motion: reduce){.ms-fadeOut200{-webkit-animation:none;animation:none}}.ms-fadeOut400{-webkit-animation-name:ms-fadeOut;animation-name:ms-fadeOut;-webkit-animation-duration:367ms;animation-duration:367ms;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}@media (prefers-reduced-motion: reduce){.ms-fadeOut400{-webkit-animation:none;animation:none}}.ms-fadeOut500{-webkit-animation-name:ms-fadeOut;animation-name:ms-fadeOut;-webkit-animation-duration:467ms;animation-duration:467ms;-webkit-animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-timing-function:cubic-bezier(.1,.9,.2,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}@media (prefers-reduced-motion: reduce){.ms-fadeOut500{-webkit-animation:none;animation:none}}.ms-expandCollapse100{transition:height .1s cubic-bezier(.1,.25,.75,.9)}@media (prefers-reduced-motion: reduce){.ms-expandCollapse100{transition:none}}.ms-expandCollapse200{transition:height 167ms cubic-bezier(.1,.25,.75,.9)}@media (prefers-reduced-motion: reduce){.ms-expandCollapse200{transition:none}}.ms-expandCollapse400{transition:height 367ms cubic-bezier(.1,.25,.75,.9)}@media (prefers-reduced-motion: reduce){.ms-expandCollapse400{transition:none}}.ms-delay100{-webkit-animation-delay:167ms;animation-delay:167ms}.ms-delay200{-webkit-animation-delay:267ms;animation-delay:267ms}[dir=ltr] .ms-rotate90deg{-webkit-animation-name:ms-rotate90;animation-name:ms-rotate90;-webkit-animation-duration:.1s;animation-duration:.1s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}@media (prefers-reduced-motion: reduce){[dir=ltr] .ms-rotate90deg{-webkit-animation:none;animation:none}}[dir=rtl] .ms-rotate90deg{-webkit-animation-name:ms-rotateN90;animation-name:ms-rotateN90;-webkit-animation-duration:.1s;animation-duration:.1s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}@media (prefers-reduced-motion: reduce){[dir=rtl] .ms-rotate90deg{-webkit-animation:none;animation:none}}[dir=ltr] .ms-rotateN90deg{-webkit-animation-name:ms-rotateN90;animation-name:ms-rotateN90;-webkit-animation-duration:.1s;animation-duration:.1s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}@media (prefers-reduced-motion: reduce){[dir=ltr] .ms-rotateN90deg{-webkit-animation:none;animation:none}}[dir=rtl] .ms-rotateN90deg{-webkit-animation-name:ms-rotate90;animation-name:ms-rotate90;-webkit-animation-duration:.1s;animation-duration:.1s;-webkit-animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-timing-function:cubic-bezier(.1,.25,.75,.9);-webkit-animation-fill-mode:both;animation-fill-mode:both}@media (prefers-reduced-motion: reduce){[dir=rtl] .ms-rotateN90deg{-webkit-animation:none;animation:none}}.ms-BrandIcon--access.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/access_16x1.png)}.ms-BrandIcon--access.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/access_48x1.png)}.ms-BrandIcon--access.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/access_96x1.png)}.ms-BrandIcon--excel.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/excel_16x1.png)}.ms-BrandIcon--excel.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/excel_48x1.png)}.ms-BrandIcon--excel.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/excel_96x1.png)}.ms-BrandIcon--infopath.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/infopath_16x1.png)}.ms-BrandIcon--infopath.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/infopath_48x1.png)}.ms-BrandIcon--infopath.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/infopath_96x1.png)}.ms-BrandIcon--office.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/office_16x1.png)}.ms-BrandIcon--office.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/office_48x1.png)}.ms-BrandIcon--office.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/office_96x1.png)}.ms-BrandIcon--onedrive.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/onedrive_16x1.png)}.ms-BrandIcon--onedrive.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/onedrive_48x1.png)}.ms-BrandIcon--onedrive.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/onedrive_96x1.png)}.ms-BrandIcon--onenote.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/onenote_16x1.png)}.ms-BrandIcon--onenote.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/onenote_48x1.png)}.ms-BrandIcon--onenote.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/onenote_96x1.png)}.ms-BrandIcon--outlook.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/outlook_16x1.png)}.ms-BrandIcon--outlook.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/outlook_48x1.png)}.ms-BrandIcon--outlook.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/outlook_96x1.png)}.ms-BrandIcon--powerpoint.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/powerpoint_16x1.png)}.ms-BrandIcon--powerpoint.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/powerpoint_48x1.png)}.ms-BrandIcon--powerpoint.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/powerpoint_96x1.png)}.ms-BrandIcon--project.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/project_16x1.png)}.ms-BrandIcon--project.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/project_48x1.png)}.ms-BrandIcon--project.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/project_96x1.png)}.ms-BrandIcon--sharepoint.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/sharepoint_16x1.png)}.ms-BrandIcon--sharepoint.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/sharepoint_48x1.png)}.ms-BrandIcon--sharepoint.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/sharepoint_96x1.png)}.ms-BrandIcon--teams.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/teams_16x1.png)}.ms-BrandIcon--teams.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/teams_48x1.png)}.ms-BrandIcon--teams.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/teams_96x1.png)}.ms-BrandIcon--visio.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/visio_16x1.png)}.ms-BrandIcon--visio.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/visio_48x1.png)}.ms-BrandIcon--visio.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/visio_96x1.png)}.ms-BrandIcon--word.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/word_16x1.png)}.ms-BrandIcon--word.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/word_48x1.png)}.ms-BrandIcon--word.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/word_96x1.png)}.ms-BrandIcon--accdb.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16/accdb.png)}.ms-BrandIcon--accdb.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48/accdb.png)}.ms-BrandIcon--accdb.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96/accdb.png)}.ms-BrandIcon--archive.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16/archive.png)}.ms-BrandIcon--archive.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48/archive.png)}.ms-BrandIcon--archive.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96/archive.png)}.ms-BrandIcon--audio.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16/audio.png)}.ms-BrandIcon--audio.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48/audio.png)}.ms-BrandIcon--audio.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96/audio.png)}.ms-BrandIcon--code.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16/code.png)}.ms-BrandIcon--code.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48/code.png)}.ms-BrandIcon--code.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96/code.png)}.ms-BrandIcon--csv.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16/csv.png)}.ms-BrandIcon--csv.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48/csv.png)}.ms-BrandIcon--csv.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96/csv.png)}.ms-BrandIcon--docset.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16/docset.png)}.ms-BrandIcon--docset.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48/docset.png)}.ms-BrandIcon--docset.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96/docset.png)}.ms-BrandIcon--docx.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16/docx.png)}.ms-BrandIcon--docx.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48/docx.png)}.ms-BrandIcon--docx.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96/docx.png)}.ms-BrandIcon--dotx.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16/dotx.png)}.ms-BrandIcon--dotx.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48/dotx.png)}.ms-BrandIcon--dotx.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96/dotx.png)}.ms-BrandIcon--email.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16/email.png)}.ms-BrandIcon--email.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48/email.png)}.ms-BrandIcon--email.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96/email.png)}.ms-BrandIcon--exe.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16/exe.png)}.ms-BrandIcon--exe.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48/exe.png)}.ms-BrandIcon--exe.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96/exe.png)}.ms-BrandIcon--folder.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16/folder.png)}.ms-BrandIcon--folder.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48/folder.png)}.ms-BrandIcon--folder.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96/folder.png)}.ms-BrandIcon--font.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16/font.png)}.ms-BrandIcon--font.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48/font.png)}.ms-BrandIcon--font.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96/font.png)}.ms-BrandIcon--genericfile.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16/genericfile.png)}.ms-BrandIcon--genericfile.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48/genericfile.png)}.ms-BrandIcon--genericfile.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96/genericfile.png)}.ms-BrandIcon--html.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16/html.png)}.ms-BrandIcon--html.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48/html.png)}.ms-BrandIcon--html.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96/html.png)}.ms-BrandIcon--link.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16/link.png)}.ms-BrandIcon--link.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48/link.png)}.ms-BrandIcon--link.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96/link.png)}.ms-BrandIcon--listitem.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16/listitem.png)}.ms-BrandIcon--listitem.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48/listitem.png)}.ms-BrandIcon--listitem.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96/listitem.png)}.ms-BrandIcon--model.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16/model.png)}.ms-BrandIcon--model.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48/model.png)}.ms-BrandIcon--model.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96/model.png)}.ms-BrandIcon--mpp.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16/mpp.png)}.ms-BrandIcon--mpp.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48/mpp.png)}.ms-BrandIcon--mpp.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96/mpp.png)}.ms-BrandIcon--mpt.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16/mpt.png)}.ms-BrandIcon--mpt.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48/mpt.png)}.ms-BrandIcon--mpt.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96/mpt.png)}.ms-BrandIcon--odp.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16/odp.png)}.ms-BrandIcon--odp.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48/odp.png)}.ms-BrandIcon--odp.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96/odp.png)}.ms-BrandIcon--ods.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16/ods.png)}.ms-BrandIcon--ods.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48/ods.png)}.ms-BrandIcon--ods.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96/ods.png)}.ms-BrandIcon--odt.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16/odt.png)}.ms-BrandIcon--odt.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48/odt.png)}.ms-BrandIcon--odt.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96/odt.png)}.ms-BrandIcon--one.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16/one.png)}.ms-BrandIcon--one.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48/one.png)}.ms-BrandIcon--one.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96/one.png)}.ms-BrandIcon--onetoc.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16/onetoc.png)}.ms-BrandIcon--onetoc.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48/onetoc.png)}.ms-BrandIcon--onetoc.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96/onetoc.png)}.ms-BrandIcon--pdf.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16/pdf.png)}.ms-BrandIcon--pdf.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48/pdf.png)}.ms-BrandIcon--pdf.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96/pdf.png)}.ms-BrandIcon--photo.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16/photo.png)}.ms-BrandIcon--photo.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48/photo.png)}.ms-BrandIcon--photo.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96/photo.png)}.ms-BrandIcon--potx.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16/potx.png)}.ms-BrandIcon--potx.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48/potx.png)}.ms-BrandIcon--potx.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96/potx.png)}.ms-BrandIcon--ppsx.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16/ppsx.png)}.ms-BrandIcon--ppsx.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48/ppsx.png)}.ms-BrandIcon--ppsx.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96/ppsx.png)}.ms-BrandIcon--pptx.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16/pptx.png)}.ms-BrandIcon--pptx.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48/pptx.png)}.ms-BrandIcon--pptx.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96/pptx.png)}.ms-BrandIcon--pub.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16/pub.png)}.ms-BrandIcon--pub.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48/pub.png)}.ms-BrandIcon--pub.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96/pub.png)}.ms-BrandIcon--rtf.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16/rtf.png)}.ms-BrandIcon--rtf.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48/rtf.png)}.ms-BrandIcon--rtf.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96/rtf.png)}.ms-BrandIcon--sharedfolder.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16/sharedfolder.png)}.ms-BrandIcon--sharedfolder.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48/sharedfolder.png)}.ms-BrandIcon--sharedfolder.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96/sharedfolder.png)}.ms-BrandIcon--spo.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16/spo.png)}.ms-BrandIcon--spo.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48/spo.png)}.ms-BrandIcon--spo.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96/spo.png)}.ms-BrandIcon--sysfile.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16/sysfile.png)}.ms-BrandIcon--sysfile.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48/sysfile.png)}.ms-BrandIcon--sysfile.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96/sysfile.png)}.ms-BrandIcon--txt.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16/txt.png)}.ms-BrandIcon--txt.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48/txt.png)}.ms-BrandIcon--txt.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96/txt.png)}.ms-BrandIcon--vector.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16/vector.png)}.ms-BrandIcon--vector.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48/vector.png)}.ms-BrandIcon--vector.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96/vector.png)}.ms-BrandIcon--video.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16/video.png)}.ms-BrandIcon--video.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48/video.png)}.ms-BrandIcon--video.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96/video.png)}.ms-BrandIcon--vsdx.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16/vsdx.png)}.ms-BrandIcon--vsdx.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48/vsdx.png)}.ms-BrandIcon--vsdx.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96/vsdx.png)}.ms-BrandIcon--vssx.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16/vssx.png)}.ms-BrandIcon--vssx.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48/vssx.png)}.ms-BrandIcon--vssx.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96/vssx.png)}.ms-BrandIcon--vstx.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16/vstx.png)}.ms-BrandIcon--vstx.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48/vstx.png)}.ms-BrandIcon--vstx.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96/vstx.png)}.ms-BrandIcon--xlsx.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16/xlsx.png)}.ms-BrandIcon--xlsx.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48/xlsx.png)}.ms-BrandIcon--xlsx.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96/xlsx.png)}.ms-BrandIcon--xltx.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16/xltx.png)}.ms-BrandIcon--xltx.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48/xltx.png)}.ms-BrandIcon--xltx.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96/xltx.png)}.ms-BrandIcon--xml.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16/xml.png)}.ms-BrandIcon--xml.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48/xml.png)}.ms-BrandIcon--xml.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96/xml.png)}.ms-BrandIcon--xsn.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16/xsn.png)}.ms-BrandIcon--xsn.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48/xsn.png)}.ms-BrandIcon--xsn.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96/xsn.png)}.ms-BrandIcon--zip.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16/zip.png)}.ms-BrandIcon--zip.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48/zip.png)}.ms-BrandIcon--zip.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96/zip.png)}.ms-BrandIcon--icon16{background-size:100% 100%;width:16px;height:16px}.ms-BrandIcon--icon48{background-size:100% 100%;width:48px;height:48px}.ms-BrandIcon--icon96{background-size:100% 100%;width:96px;height:96px}@media only screen and (-webkit-min-device-pixel-ratio: 1.5),only screen and (min-resolution: 144dpi){.ms-BrandIcon--access.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/access_16x1_5.png)}.ms-BrandIcon--access.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/access_48x1_5.png)}.ms-BrandIcon--access.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/access_96x1_5.png)}.ms-BrandIcon--excel.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/excel_16x1_5.png)}.ms-BrandIcon--excel.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/excel_48x1_5.png)}.ms-BrandIcon--excel.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/excel_96x1_5.png)}.ms-BrandIcon--infopath.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/infopath_16x1_5.png)}.ms-BrandIcon--infopath.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/infopath_48x1_5.png)}.ms-BrandIcon--infopath.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/infopath_96x1_5.png)}.ms-BrandIcon--office.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/office_16x1_5.png)}.ms-BrandIcon--office.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/office_48x1_5.png)}.ms-BrandIcon--office.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/office_96x1_5.png)}.ms-BrandIcon--onedrive.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/onedrive_16x1_5.png)}.ms-BrandIcon--onedrive.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/onedrive_48x1_5.png)}.ms-BrandIcon--onedrive.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/onedrive_96x1_5.png)}.ms-BrandIcon--onenote.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/onenote_16x1_5.png)}.ms-BrandIcon--onenote.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/onenote_48x1_5.png)}.ms-BrandIcon--onenote.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/onenote_96x1_5.png)}.ms-BrandIcon--outlook.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/outlook_16x1_5.png)}.ms-BrandIcon--outlook.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/outlook_48x1_5.png)}.ms-BrandIcon--outlook.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/outlook_96x1_5.png)}.ms-BrandIcon--powerpoint.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/powerpoint_16x1_5.png)}.ms-BrandIcon--powerpoint.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/powerpoint_48x1_5.png)}.ms-BrandIcon--powerpoint.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/powerpoint_96x1_5.png)}.ms-BrandIcon--project.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/project_16x1_5.png)}.ms-BrandIcon--project.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/project_48x1_5.png)}.ms-BrandIcon--project.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/project_96x1_5.png)}.ms-BrandIcon--sharepoint.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/sharepoint_16x1_5.png)}.ms-BrandIcon--sharepoint.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/sharepoint_48x1_5.png)}.ms-BrandIcon--sharepoint.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/sharepoint_96x1_5.png)}.ms-BrandIcon--teams.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/teams_16x1_5.png)}.ms-BrandIcon--teams.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/teams_48x1_5.png)}.ms-BrandIcon--teams.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/teams_96x1_5.png)}.ms-BrandIcon--visio.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/visio_16x1_5.png)}.ms-BrandIcon--visio.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/visio_48x1_5.png)}.ms-BrandIcon--visio.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/visio_96x1_5.png)}.ms-BrandIcon--word.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/word_16x1_5.png)}.ms-BrandIcon--word.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/word_48x1_5.png)}.ms-BrandIcon--word.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/word_96x1_5.png)}.ms-BrandIcon--accdb.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_1.5x/accdb.png)}.ms-BrandIcon--accdb.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_1.5x/accdb.png)}.ms-BrandIcon--accdb.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_1.5x/accdb.png)}.ms-BrandIcon--archive.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_1.5x/archive.png)}.ms-BrandIcon--archive.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_1.5x/archive.png)}.ms-BrandIcon--archive.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_1.5x/archive.png)}.ms-BrandIcon--audio.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_1.5x/audio.png)}.ms-BrandIcon--audio.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_1.5x/audio.png)}.ms-BrandIcon--audio.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_1.5x/audio.png)}.ms-BrandIcon--code.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_1.5x/code.png)}.ms-BrandIcon--code.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_1.5x/code.png)}.ms-BrandIcon--code.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_1.5x/code.png)}.ms-BrandIcon--csv.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_1.5x/csv.png)}.ms-BrandIcon--csv.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_1.5x/csv.png)}.ms-BrandIcon--csv.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_1.5x/csv.png)}.ms-BrandIcon--docset.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_1.5x/docset.png)}.ms-BrandIcon--docset.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_1.5x/docset.png)}.ms-BrandIcon--docset.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_1.5x/docset.png)}.ms-BrandIcon--docx.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_1.5x/docx.png)}.ms-BrandIcon--docx.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_1.5x/docx.png)}.ms-BrandIcon--docx.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_1.5x/docx.png)}.ms-BrandIcon--dotx.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_1.5x/dotx.png)}.ms-BrandIcon--dotx.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_1.5x/dotx.png)}.ms-BrandIcon--dotx.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_1.5x/dotx.png)}.ms-BrandIcon--email.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_1.5x/email.png)}.ms-BrandIcon--email.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_1.5x/email.png)}.ms-BrandIcon--email.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_1.5x/email.png)}.ms-BrandIcon--exe.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_1.5x/exe.png)}.ms-BrandIcon--exe.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_1.5x/exe.png)}.ms-BrandIcon--exe.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_1.5x/exe.png)}.ms-BrandIcon--folder.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_1.5x/folder.png)}.ms-BrandIcon--folder.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_1.5x/folder.png)}.ms-BrandIcon--folder.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_1.5x/folder.png)}.ms-BrandIcon--font.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_1.5x/font.png)}.ms-BrandIcon--font.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_1.5x/font.png)}.ms-BrandIcon--font.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_1.5x/font.png)}.ms-BrandIcon--genericfile.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_1.5x/genericfile.png)}.ms-BrandIcon--genericfile.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_1.5x/genericfile.png)}.ms-BrandIcon--genericfile.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_1.5x/genericfile.png)}.ms-BrandIcon--html.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_1.5x/html.png)}.ms-BrandIcon--html.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_1.5x/html.png)}.ms-BrandIcon--html.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_1.5x/html.png)}.ms-BrandIcon--link.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_1.5x/link.png)}.ms-BrandIcon--link.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_1.5x/link.png)}.ms-BrandIcon--link.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_1.5x/link.png)}.ms-BrandIcon--listitem.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_1.5x/listitem.png)}.ms-BrandIcon--listitem.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_1.5x/listitem.png)}.ms-BrandIcon--listitem.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_1.5x/listitem.png)}.ms-BrandIcon--model.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_1.5x/model.png)}.ms-BrandIcon--model.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_1.5x/model.png)}.ms-BrandIcon--model.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_1.5x/model.png)}.ms-BrandIcon--mpp.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_1.5x/mpp.png)}.ms-BrandIcon--mpp.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_1.5x/mpp.png)}.ms-BrandIcon--mpp.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_1.5x/mpp.png)}.ms-BrandIcon--mpt.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_1.5x/mpt.png)}.ms-BrandIcon--mpt.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_1.5x/mpt.png)}.ms-BrandIcon--mpt.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_1.5x/mpt.png)}.ms-BrandIcon--odp.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_1.5x/odp.png)}.ms-BrandIcon--odp.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_1.5x/odp.png)}.ms-BrandIcon--odp.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_1.5x/odp.png)}.ms-BrandIcon--ods.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_1.5x/ods.png)}.ms-BrandIcon--ods.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_1.5x/ods.png)}.ms-BrandIcon--ods.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_1.5x/ods.png)}.ms-BrandIcon--odt.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_1.5x/odt.png)}.ms-BrandIcon--odt.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_1.5x/odt.png)}.ms-BrandIcon--odt.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_1.5x/odt.png)}.ms-BrandIcon--one.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_1.5x/one.png)}.ms-BrandIcon--one.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_1.5x/one.png)}.ms-BrandIcon--one.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_1.5x/one.png)}.ms-BrandIcon--onetoc.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_1.5x/onetoc.png)}.ms-BrandIcon--onetoc.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_1.5x/onetoc.png)}.ms-BrandIcon--onetoc.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_1.5x/onetoc.png)}.ms-BrandIcon--pdf.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_1.5x/pdf.png)}.ms-BrandIcon--pdf.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_1.5x/pdf.png)}.ms-BrandIcon--pdf.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_1.5x/pdf.png)}.ms-BrandIcon--photo.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_1.5x/photo.png)}.ms-BrandIcon--photo.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_1.5x/photo.png)}.ms-BrandIcon--photo.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_1.5x/photo.png)}.ms-BrandIcon--potx.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_1.5x/potx.png)}.ms-BrandIcon--potx.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_1.5x/potx.png)}.ms-BrandIcon--potx.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_1.5x/potx.png)}.ms-BrandIcon--ppsx.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_1.5x/ppsx.png)}.ms-BrandIcon--ppsx.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_1.5x/ppsx.png)}.ms-BrandIcon--ppsx.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_1.5x/ppsx.png)}.ms-BrandIcon--pptx.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_1.5x/pptx.png)}.ms-BrandIcon--pptx.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_1.5x/pptx.png)}.ms-BrandIcon--pptx.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_1.5x/pptx.png)}.ms-BrandIcon--pub.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_1.5x/pub.png)}.ms-BrandIcon--pub.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_1.5x/pub.png)}.ms-BrandIcon--pub.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_1.5x/pub.png)}.ms-BrandIcon--rtf.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_1.5x/rtf.png)}.ms-BrandIcon--rtf.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_1.5x/rtf.png)}.ms-BrandIcon--rtf.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_1.5x/rtf.png)}.ms-BrandIcon--sharedfolder.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_1.5x/sharedfolder.png)}.ms-BrandIcon--sharedfolder.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_1.5x/sharedfolder.png)}.ms-BrandIcon--sharedfolder.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_1.5x/sharedfolder.png)}.ms-BrandIcon--spo.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_1.5x/spo.png)}.ms-BrandIcon--spo.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_1.5x/spo.png)}.ms-BrandIcon--spo.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_1.5x/spo.png)}.ms-BrandIcon--sysfile.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_1.5x/sysfile.png)}.ms-BrandIcon--sysfile.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_1.5x/sysfile.png)}.ms-BrandIcon--sysfile.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_1.5x/sysfile.png)}.ms-BrandIcon--txt.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_1.5x/txt.png)}.ms-BrandIcon--txt.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_1.5x/txt.png)}.ms-BrandIcon--txt.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_1.5x/txt.png)}.ms-BrandIcon--vector.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_1.5x/vector.png)}.ms-BrandIcon--vector.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_1.5x/vector.png)}.ms-BrandIcon--vector.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_1.5x/vector.png)}.ms-BrandIcon--video.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_1.5x/video.png)}.ms-BrandIcon--video.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_1.5x/video.png)}.ms-BrandIcon--video.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_1.5x/video.png)}.ms-BrandIcon--vsdx.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_1.5x/vsdx.png)}.ms-BrandIcon--vsdx.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_1.5x/vsdx.png)}.ms-BrandIcon--vsdx.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_1.5x/vsdx.png)}.ms-BrandIcon--vssx.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_1.5x/vssx.png)}.ms-BrandIcon--vssx.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_1.5x/vssx.png)}.ms-BrandIcon--vssx.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_1.5x/vssx.png)}.ms-BrandIcon--vstx.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_1.5x/vstx.png)}.ms-BrandIcon--vstx.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_1.5x/vstx.png)}.ms-BrandIcon--vstx.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_1.5x/vstx.png)}.ms-BrandIcon--xlsx.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_1.5x/xlsx.png)}.ms-BrandIcon--xlsx.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_1.5x/xlsx.png)}.ms-BrandIcon--xlsx.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_1.5x/xlsx.png)}.ms-BrandIcon--xltx.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_1.5x/xltx.png)}.ms-BrandIcon--xltx.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_1.5x/xltx.png)}.ms-BrandIcon--xltx.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_1.5x/xltx.png)}.ms-BrandIcon--xml.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_1.5x/xml.png)}.ms-BrandIcon--xml.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_1.5x/xml.png)}.ms-BrandIcon--xml.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_1.5x/xml.png)}.ms-BrandIcon--xsn.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_1.5x/xsn.png)}.ms-BrandIcon--xsn.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_1.5x/xsn.png)}.ms-BrandIcon--xsn.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_1.5x/xsn.png)}.ms-BrandIcon--zip.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_1.5x/zip.png)}.ms-BrandIcon--zip.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_1.5x/zip.png)}.ms-BrandIcon--zip.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_1.5x/zip.png)}}@media only screen and (-webkit-min-device-pixel-ratio: 2),only screen and (min-resolution: 192dpi){.ms-BrandIcon--access.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/access_16x2.png)}.ms-BrandIcon--access.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/access_48x2.png)}.ms-BrandIcon--access.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/access_96x2.png)}.ms-BrandIcon--excel.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/excel_16x2.png)}.ms-BrandIcon--excel.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/excel_48x2.png)}.ms-BrandIcon--excel.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/excel_96x2.png)}.ms-BrandIcon--infopath.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/infopath_16x2.png)}.ms-BrandIcon--infopath.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/infopath_48x2.png)}.ms-BrandIcon--infopath.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/infopath_96x2.png)}.ms-BrandIcon--office.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/office_16x2.png)}.ms-BrandIcon--office.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/office_48x2.png)}.ms-BrandIcon--office.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/office_96x2.png)}.ms-BrandIcon--onedrive.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/onedrive_16x2.png)}.ms-BrandIcon--onedrive.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/onedrive_48x2.png)}.ms-BrandIcon--onedrive.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/onedrive_96x2.png)}.ms-BrandIcon--onenote.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/onenote_16x2.png)}.ms-BrandIcon--onenote.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/onenote_48x2.png)}.ms-BrandIcon--onenote.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/onenote_96x2.png)}.ms-BrandIcon--outlook.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/outlook_16x2.png)}.ms-BrandIcon--outlook.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/outlook_48x2.png)}.ms-BrandIcon--outlook.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/outlook_96x2.png)}.ms-BrandIcon--powerpoint.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/powerpoint_16x2.png)}.ms-BrandIcon--powerpoint.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/powerpoint_48x2.png)}.ms-BrandIcon--powerpoint.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/powerpoint_96x2.png)}.ms-BrandIcon--project.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/project_16x2.png)}.ms-BrandIcon--project.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/project_48x2.png)}.ms-BrandIcon--project.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/project_96x2.png)}.ms-BrandIcon--sharepoint.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/sharepoint_16x2.png)}.ms-BrandIcon--sharepoint.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/sharepoint_48x2.png)}.ms-BrandIcon--sharepoint.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/sharepoint_96x2.png)}.ms-BrandIcon--teams.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/teams_16x2.png)}.ms-BrandIcon--teams.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/teams_48x2.png)}.ms-BrandIcon--teams.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/teams_96x2.png)}.ms-BrandIcon--visio.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/visio_16x2.png)}.ms-BrandIcon--visio.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/visio_48x2.png)}.ms-BrandIcon--visio.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/visio_96x2.png)}.ms-BrandIcon--word.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/word_16x2.png)}.ms-BrandIcon--word.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/word_48x2.png)}.ms-BrandIcon--word.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/word_96x2.png)}.ms-BrandIcon--accdb.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_2x/accdb.png)}.ms-BrandIcon--accdb.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_2x/accdb.png)}.ms-BrandIcon--accdb.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_2x/accdb.png)}.ms-BrandIcon--archive.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_2x/archive.png)}.ms-BrandIcon--archive.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_2x/archive.png)}.ms-BrandIcon--archive.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_2x/archive.png)}.ms-BrandIcon--audio.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_2x/audio.png)}.ms-BrandIcon--audio.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_2x/audio.png)}.ms-BrandIcon--audio.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_2x/audio.png)}.ms-BrandIcon--code.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_2x/code.png)}.ms-BrandIcon--code.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_2x/code.png)}.ms-BrandIcon--code.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_2x/code.png)}.ms-BrandIcon--csv.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_2x/csv.png)}.ms-BrandIcon--csv.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_2x/csv.png)}.ms-BrandIcon--csv.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_2x/csv.png)}.ms-BrandIcon--docset.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_2x/docset.png)}.ms-BrandIcon--docset.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_2x/docset.png)}.ms-BrandIcon--docset.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_2x/docset.png)}.ms-BrandIcon--docx.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_2x/docx.png)}.ms-BrandIcon--docx.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_2x/docx.png)}.ms-BrandIcon--docx.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_2x/docx.png)}.ms-BrandIcon--dotx.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_2x/dotx.png)}.ms-BrandIcon--dotx.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_2x/dotx.png)}.ms-BrandIcon--dotx.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_2x/dotx.png)}.ms-BrandIcon--email.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_2x/email.png)}.ms-BrandIcon--email.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_2x/email.png)}.ms-BrandIcon--email.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_2x/email.png)}.ms-BrandIcon--exe.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_2x/exe.png)}.ms-BrandIcon--exe.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_2x/exe.png)}.ms-BrandIcon--exe.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_2x/exe.png)}.ms-BrandIcon--folder.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_2x/folder.png)}.ms-BrandIcon--folder.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_2x/folder.png)}.ms-BrandIcon--folder.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_2x/folder.png)}.ms-BrandIcon--font.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_2x/font.png)}.ms-BrandIcon--font.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_2x/font.png)}.ms-BrandIcon--font.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_2x/font.png)}.ms-BrandIcon--genericfile.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_2x/genericfile.png)}.ms-BrandIcon--genericfile.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_2x/genericfile.png)}.ms-BrandIcon--genericfile.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_2x/genericfile.png)}.ms-BrandIcon--html.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_2x/html.png)}.ms-BrandIcon--html.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_2x/html.png)}.ms-BrandIcon--html.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_2x/html.png)}.ms-BrandIcon--link.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_2x/link.png)}.ms-BrandIcon--link.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_2x/link.png)}.ms-BrandIcon--link.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_2x/link.png)}.ms-BrandIcon--listitem.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_2x/listitem.png)}.ms-BrandIcon--listitem.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_2x/listitem.png)}.ms-BrandIcon--listitem.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_2x/listitem.png)}.ms-BrandIcon--model.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_2x/model.png)}.ms-BrandIcon--model.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_2x/model.png)}.ms-BrandIcon--model.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_2x/model.png)}.ms-BrandIcon--mpp.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_2x/mpp.png)}.ms-BrandIcon--mpp.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_2x/mpp.png)}.ms-BrandIcon--mpp.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_2x/mpp.png)}.ms-BrandIcon--mpt.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_2x/mpt.png)}.ms-BrandIcon--mpt.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_2x/mpt.png)}.ms-BrandIcon--mpt.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_2x/mpt.png)}.ms-BrandIcon--odp.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_2x/odp.png)}.ms-BrandIcon--odp.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_2x/odp.png)}.ms-BrandIcon--odp.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_2x/odp.png)}.ms-BrandIcon--ods.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_2x/ods.png)}.ms-BrandIcon--ods.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_2x/ods.png)}.ms-BrandIcon--ods.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_2x/ods.png)}.ms-BrandIcon--odt.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_2x/odt.png)}.ms-BrandIcon--odt.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_2x/odt.png)}.ms-BrandIcon--odt.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_2x/odt.png)}.ms-BrandIcon--one.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_2x/one.png)}.ms-BrandIcon--one.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_2x/one.png)}.ms-BrandIcon--one.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_2x/one.png)}.ms-BrandIcon--onetoc.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_2x/onetoc.png)}.ms-BrandIcon--onetoc.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_2x/onetoc.png)}.ms-BrandIcon--onetoc.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_2x/onetoc.png)}.ms-BrandIcon--pdf.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_2x/pdf.png)}.ms-BrandIcon--pdf.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_2x/pdf.png)}.ms-BrandIcon--pdf.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_2x/pdf.png)}.ms-BrandIcon--photo.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_2x/photo.png)}.ms-BrandIcon--photo.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_2x/photo.png)}.ms-BrandIcon--photo.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_2x/photo.png)}.ms-BrandIcon--potx.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_2x/potx.png)}.ms-BrandIcon--potx.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_2x/potx.png)}.ms-BrandIcon--potx.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_2x/potx.png)}.ms-BrandIcon--ppsx.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_2x/ppsx.png)}.ms-BrandIcon--ppsx.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_2x/ppsx.png)}.ms-BrandIcon--ppsx.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_2x/ppsx.png)}.ms-BrandIcon--pptx.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_2x/pptx.png)}.ms-BrandIcon--pptx.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_2x/pptx.png)}.ms-BrandIcon--pptx.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_2x/pptx.png)}.ms-BrandIcon--pub.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_2x/pub.png)}.ms-BrandIcon--pub.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_2x/pub.png)}.ms-BrandIcon--pub.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_2x/pub.png)}.ms-BrandIcon--rtf.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_2x/rtf.png)}.ms-BrandIcon--rtf.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_2x/rtf.png)}.ms-BrandIcon--rtf.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_2x/rtf.png)}.ms-BrandIcon--sharedfolder.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_2x/sharedfolder.png)}.ms-BrandIcon--sharedfolder.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_2x/sharedfolder.png)}.ms-BrandIcon--sharedfolder.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_2x/sharedfolder.png)}.ms-BrandIcon--spo.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_2x/spo.png)}.ms-BrandIcon--spo.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_2x/spo.png)}.ms-BrandIcon--spo.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_2x/spo.png)}.ms-BrandIcon--sysfile.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_2x/sysfile.png)}.ms-BrandIcon--sysfile.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_2x/sysfile.png)}.ms-BrandIcon--sysfile.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_2x/sysfile.png)}.ms-BrandIcon--txt.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_2x/txt.png)}.ms-BrandIcon--txt.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_2x/txt.png)}.ms-BrandIcon--txt.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_2x/txt.png)}.ms-BrandIcon--vector.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_2x/vector.png)}.ms-BrandIcon--vector.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_2x/vector.png)}.ms-BrandIcon--vector.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_2x/vector.png)}.ms-BrandIcon--video.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_2x/video.png)}.ms-BrandIcon--video.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_2x/video.png)}.ms-BrandIcon--video.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_2x/video.png)}.ms-BrandIcon--vsdx.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_2x/vsdx.png)}.ms-BrandIcon--vsdx.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_2x/vsdx.png)}.ms-BrandIcon--vsdx.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_2x/vsdx.png)}.ms-BrandIcon--vssx.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_2x/vssx.png)}.ms-BrandIcon--vssx.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_2x/vssx.png)}.ms-BrandIcon--vssx.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_2x/vssx.png)}.ms-BrandIcon--vstx.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_2x/vstx.png)}.ms-BrandIcon--vstx.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_2x/vstx.png)}.ms-BrandIcon--vstx.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_2x/vstx.png)}.ms-BrandIcon--xlsx.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_2x/xlsx.png)}.ms-BrandIcon--xlsx.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_2x/xlsx.png)}.ms-BrandIcon--xlsx.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_2x/xlsx.png)}.ms-BrandIcon--xltx.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_2x/xltx.png)}.ms-BrandIcon--xltx.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_2x/xltx.png)}.ms-BrandIcon--xltx.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_2x/xltx.png)}.ms-BrandIcon--xml.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_2x/xml.png)}.ms-BrandIcon--xml.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_2x/xml.png)}.ms-BrandIcon--xml.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_2x/xml.png)}.ms-BrandIcon--xsn.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_2x/xsn.png)}.ms-BrandIcon--xsn.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_2x/xsn.png)}.ms-BrandIcon--xsn.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_2x/xsn.png)}.ms-BrandIcon--zip.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_2x/zip.png)}.ms-BrandIcon--zip.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_2x/zip.png)}.ms-BrandIcon--zip.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_2x/zip.png)}}@media only screen and (-webkit-min-device-pixel-ratio: 3),only screen and (min-resolution: 288dpi){.ms-BrandIcon--access.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/access_16x3.png)}.ms-BrandIcon--access.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/access_48x3.png)}.ms-BrandIcon--access.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/access_96x3.png)}.ms-BrandIcon--excel.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/excel_16x3.png)}.ms-BrandIcon--excel.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/excel_48x3.png)}.ms-BrandIcon--excel.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/excel_96x3.png)}.ms-BrandIcon--infopath.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/infopath_16x3.png)}.ms-BrandIcon--infopath.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/infopath_48x3.png)}.ms-BrandIcon--infopath.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/infopath_96x3.png)}.ms-BrandIcon--office.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/office_16x3.png)}.ms-BrandIcon--office.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/office_48x3.png)}.ms-BrandIcon--office.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/office_96x3.png)}.ms-BrandIcon--onedrive.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/onedrive_16x3.png)}.ms-BrandIcon--onedrive.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/onedrive_48x3.png)}.ms-BrandIcon--onedrive.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/onedrive_96x3.png)}.ms-BrandIcon--onenote.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/onenote_16x3.png)}.ms-BrandIcon--onenote.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/onenote_48x3.png)}.ms-BrandIcon--onenote.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/onenote_96x3.png)}.ms-BrandIcon--outlook.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/outlook_16x3.png)}.ms-BrandIcon--outlook.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/outlook_48x3.png)}.ms-BrandIcon--outlook.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/outlook_96x3.png)}.ms-BrandIcon--powerpoint.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/powerpoint_16x3.png)}.ms-BrandIcon--powerpoint.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/powerpoint_48x3.png)}.ms-BrandIcon--powerpoint.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/powerpoint_96x3.png)}.ms-BrandIcon--project.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/project_16x3.png)}.ms-BrandIcon--project.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/project_48x3.png)}.ms-BrandIcon--project.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/project_96x3.png)}.ms-BrandIcon--sharepoint.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/sharepoint_16x3.png)}.ms-BrandIcon--sharepoint.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/sharepoint_48x3.png)}.ms-BrandIcon--sharepoint.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/sharepoint_96x3.png)}.ms-BrandIcon--teams.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/teams_16x3.png)}.ms-BrandIcon--teams.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/teams_48x3.png)}.ms-BrandIcon--teams.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/teams_96x3.png)}.ms-BrandIcon--visio.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/visio_16x3.png)}.ms-BrandIcon--visio.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/visio_48x3.png)}.ms-BrandIcon--visio.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/visio_96x3.png)}.ms-BrandIcon--word.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/word_16x3.png)}.ms-BrandIcon--word.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/word_48x3.png)}.ms-BrandIcon--word.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/word_96x3.png)}.ms-BrandIcon--accdb.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_3x/accdb.png)}.ms-BrandIcon--accdb.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_3x/accdb.png)}.ms-BrandIcon--accdb.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_3x/accdb.png)}.ms-BrandIcon--archive.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_3x/archive.png)}.ms-BrandIcon--archive.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_3x/archive.png)}.ms-BrandIcon--archive.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_3x/archive.png)}.ms-BrandIcon--audio.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_3x/audio.png)}.ms-BrandIcon--audio.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_3x/audio.png)}.ms-BrandIcon--audio.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_3x/audio.png)}.ms-BrandIcon--code.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_3x/code.png)}.ms-BrandIcon--code.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_3x/code.png)}.ms-BrandIcon--code.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_3x/code.png)}.ms-BrandIcon--csv.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_3x/csv.png)}.ms-BrandIcon--csv.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_3x/csv.png)}.ms-BrandIcon--csv.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_3x/csv.png)}.ms-BrandIcon--docset.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_3x/docset.png)}.ms-BrandIcon--docset.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_3x/docset.png)}.ms-BrandIcon--docset.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_3x/docset.png)}.ms-BrandIcon--docx.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_3x/docx.png)}.ms-BrandIcon--docx.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_3x/docx.png)}.ms-BrandIcon--docx.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_3x/docx.png)}.ms-BrandIcon--dotx.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_3x/dotx.png)}.ms-BrandIcon--dotx.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_3x/dotx.png)}.ms-BrandIcon--dotx.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_3x/dotx.png)}.ms-BrandIcon--email.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_3x/email.png)}.ms-BrandIcon--email.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_3x/email.png)}.ms-BrandIcon--email.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_3x/email.png)}.ms-BrandIcon--exe.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_3x/exe.png)}.ms-BrandIcon--exe.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_3x/exe.png)}.ms-BrandIcon--exe.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_3x/exe.png)}.ms-BrandIcon--folder.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_3x/folder.png)}.ms-BrandIcon--folder.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_3x/folder.png)}.ms-BrandIcon--folder.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_3x/folder.png)}.ms-BrandIcon--font.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_3x/font.png)}.ms-BrandIcon--font.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_3x/font.png)}.ms-BrandIcon--font.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_3x/font.png)}.ms-BrandIcon--genericfile.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_3x/genericfile.png)}.ms-BrandIcon--genericfile.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_3x/genericfile.png)}.ms-BrandIcon--genericfile.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_3x/genericfile.png)}.ms-BrandIcon--html.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_3x/html.png)}.ms-BrandIcon--html.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_3x/html.png)}.ms-BrandIcon--html.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_3x/html.png)}.ms-BrandIcon--link.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_3x/link.png)}.ms-BrandIcon--link.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_3x/link.png)}.ms-BrandIcon--link.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_3x/link.png)}.ms-BrandIcon--listitem.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_3x/listitem.png)}.ms-BrandIcon--listitem.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_3x/listitem.png)}.ms-BrandIcon--listitem.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_3x/listitem.png)}.ms-BrandIcon--model.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_3x/model.png)}.ms-BrandIcon--model.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_3x/model.png)}.ms-BrandIcon--model.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_3x/model.png)}.ms-BrandIcon--mpp.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_3x/mpp.png)}.ms-BrandIcon--mpp.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_3x/mpp.png)}.ms-BrandIcon--mpp.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_3x/mpp.png)}.ms-BrandIcon--mpt.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_3x/mpt.png)}.ms-BrandIcon--mpt.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_3x/mpt.png)}.ms-BrandIcon--mpt.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_3x/mpt.png)}.ms-BrandIcon--odp.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_3x/odp.png)}.ms-BrandIcon--odp.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_3x/odp.png)}.ms-BrandIcon--odp.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_3x/odp.png)}.ms-BrandIcon--ods.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_3x/ods.png)}.ms-BrandIcon--ods.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_3x/ods.png)}.ms-BrandIcon--ods.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_3x/ods.png)}.ms-BrandIcon--odt.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_3x/odt.png)}.ms-BrandIcon--odt.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_3x/odt.png)}.ms-BrandIcon--odt.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_3x/odt.png)}.ms-BrandIcon--one.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_3x/one.png)}.ms-BrandIcon--one.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_3x/one.png)}.ms-BrandIcon--one.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_3x/one.png)}.ms-BrandIcon--onetoc.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_3x/onetoc.png)}.ms-BrandIcon--onetoc.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_3x/onetoc.png)}.ms-BrandIcon--onetoc.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_3x/onetoc.png)}.ms-BrandIcon--pdf.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_3x/pdf.png)}.ms-BrandIcon--pdf.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_3x/pdf.png)}.ms-BrandIcon--pdf.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_3x/pdf.png)}.ms-BrandIcon--photo.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_3x/photo.png)}.ms-BrandIcon--photo.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_3x/photo.png)}.ms-BrandIcon--photo.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_3x/photo.png)}.ms-BrandIcon--potx.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_3x/potx.png)}.ms-BrandIcon--potx.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_3x/potx.png)}.ms-BrandIcon--potx.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_3x/potx.png)}.ms-BrandIcon--ppsx.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_3x/ppsx.png)}.ms-BrandIcon--ppsx.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_3x/ppsx.png)}.ms-BrandIcon--ppsx.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_3x/ppsx.png)}.ms-BrandIcon--pptx.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_3x/pptx.png)}.ms-BrandIcon--pptx.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_3x/pptx.png)}.ms-BrandIcon--pptx.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_3x/pptx.png)}.ms-BrandIcon--pub.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_3x/pub.png)}.ms-BrandIcon--pub.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_3x/pub.png)}.ms-BrandIcon--pub.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_3x/pub.png)}.ms-BrandIcon--rtf.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_3x/rtf.png)}.ms-BrandIcon--rtf.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_3x/rtf.png)}.ms-BrandIcon--rtf.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_3x/rtf.png)}.ms-BrandIcon--sharedfolder.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_3x/sharedfolder.png)}.ms-BrandIcon--sharedfolder.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_3x/sharedfolder.png)}.ms-BrandIcon--sharedfolder.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_3x/sharedfolder.png)}.ms-BrandIcon--spo.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_3x/spo.png)}.ms-BrandIcon--spo.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_3x/spo.png)}.ms-BrandIcon--spo.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_3x/spo.png)}.ms-BrandIcon--sysfile.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_3x/sysfile.png)}.ms-BrandIcon--sysfile.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_3x/sysfile.png)}.ms-BrandIcon--sysfile.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_3x/sysfile.png)}.ms-BrandIcon--txt.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_3x/txt.png)}.ms-BrandIcon--txt.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_3x/txt.png)}.ms-BrandIcon--txt.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_3x/txt.png)}.ms-BrandIcon--vector.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_3x/vector.png)}.ms-BrandIcon--vector.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_3x/vector.png)}.ms-BrandIcon--vector.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_3x/vector.png)}.ms-BrandIcon--video.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_3x/video.png)}.ms-BrandIcon--video.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_3x/video.png)}.ms-BrandIcon--video.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_3x/video.png)}.ms-BrandIcon--vsdx.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_3x/vsdx.png)}.ms-BrandIcon--vsdx.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_3x/vsdx.png)}.ms-BrandIcon--vsdx.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_3x/vsdx.png)}.ms-BrandIcon--vssx.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_3x/vssx.png)}.ms-BrandIcon--vssx.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_3x/vssx.png)}.ms-BrandIcon--vssx.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_3x/vssx.png)}.ms-BrandIcon--vstx.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_3x/vstx.png)}.ms-BrandIcon--vstx.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_3x/vstx.png)}.ms-BrandIcon--vstx.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_3x/vstx.png)}.ms-BrandIcon--xlsx.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_3x/xlsx.png)}.ms-BrandIcon--xlsx.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_3x/xlsx.png)}.ms-BrandIcon--xlsx.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_3x/xlsx.png)}.ms-BrandIcon--xltx.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_3x/xltx.png)}.ms-BrandIcon--xltx.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_3x/xltx.png)}.ms-BrandIcon--xltx.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_3x/xltx.png)}.ms-BrandIcon--xml.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_3x/xml.png)}.ms-BrandIcon--xml.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_3x/xml.png)}.ms-BrandIcon--xml.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_3x/xml.png)}.ms-BrandIcon--xsn.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_3x/xsn.png)}.ms-BrandIcon--xsn.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_3x/xsn.png)}.ms-BrandIcon--xsn.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_3x/xsn.png)}.ms-BrandIcon--zip.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_3x/zip.png)}.ms-BrandIcon--zip.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_3x/zip.png)}.ms-BrandIcon--zip.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_3x/zip.png)}}.ms-BrandIcon--onepkg.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16/one.png)}.ms-BrandIcon--onepkg.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48/one.png)}.ms-BrandIcon--onepkg.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96/one.png)}.ms-BrandIcon--xls.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16/xlsx.png)}.ms-BrandIcon--xls.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48/xlsx.png)}.ms-BrandIcon--xls.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96/xlsx.png)}@media only screen and (-webkit-min-device-pixel-ratio: 1.5),only screen and (min-resolution: 144dpi){.ms-BrandIcon--onepkg.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_1.5x/one.png)}.ms-BrandIcon--onepkg.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_1.5x/one.png)}.ms-BrandIcon--onepkg.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_1.5x/one.png)}.ms-BrandIcon--xls.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_1.5x/xlsx.png)}.ms-BrandIcon--xls.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_1.5x/xlsx.png)}.ms-BrandIcon--xls.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_1.5x/xlsx.png)}}@media only screen and (-webkit-min-device-pixel-ratio: 2),only screen and (min-resolution: 192dpi){.ms-BrandIcon--onepkg.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_2x/one.png)}.ms-BrandIcon--onepkg.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_2x/one.png)}.ms-BrandIcon--onepkg.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_2x/one.png)}.ms-BrandIcon--xls.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_2x/xlsx.png)}.ms-BrandIcon--xls.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_2x/xlsx.png)}.ms-BrandIcon--xls.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_2x/xlsx.png)}}@media only screen and (-webkit-min-device-pixel-ratio: 3),only screen and (min-resolution: 288dpi){.ms-BrandIcon--onepkg.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_3x/one.png)}.ms-BrandIcon--onepkg.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_3x/one.png)}.ms-BrandIcon--onepkg.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_3x/one.png)}.ms-BrandIcon--xls.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_3x/xlsx.png)}.ms-BrandIcon--xls.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_3x/xlsx.png)}.ms-BrandIcon--xls.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_3x/xlsx.png)}}.ms-bgColor-communicationShade30,.ms-bgColor-communicationShade30--hover:hover{background-color:#004578}.ms-bgColor-communicationShade20,.ms-bgColor-communicationShade20--hover:hover{background-color:#005a9e}.ms-bgColor-communicationShade10,.ms-bgColor-communicationShade10--hover:hover{background-color:#106ebe}.ms-bgColor-communicationPrimary,.ms-bgColor-communicationPrimary--hover:hover{background-color:#0078d4}.ms-bgColor-communicationTint10,.ms-bgColor-communicationTint10--hover:hover{background-color:#2b88d8}.ms-bgColor-communicationTint20,.ms-bgColor-communicationTint20--hover:hover{background-color:#c7e0f4}.ms-bgColor-communicationTint30,.ms-bgColor-communicationTint30--hover:hover{background-color:#deecf9}.ms-bgColor-communicationTint40,.ms-bgColor-communicationTint40--hover:hover{background-color:#eff6fc}.ms-bgColor-black,.ms-bgColor-black--hover:hover{background-color:#000}.ms-bgColor-gray220,.ms-bgColor-gray220--hover:hover{background-color:#11100f}.ms-bgColor-gray210,.ms-bgColor-gray210--hover:hover{background-color:#161514}.ms-bgColor-gray200,.ms-bgColor-gray200--hover:hover{background-color:#1b1a19}.ms-bgColor-gray190,.ms-bgColor-gray190--hover:hover{background-color:#201f1e}.ms-bgColor-gray180,.ms-bgColor-gray180--hover:hover{background-color:#252423}.ms-bgColor-gray170,.ms-bgColor-gray170--hover:hover{background-color:#292827}.ms-bgColor-gray160,.ms-bgColor-gray160--hover:hover{background-color:#323130}.ms-bgColor-gray150,.ms-bgColor-gray150--hover:hover{background-color:#3b3a39}.ms-bgColor-gray140,.ms-bgColor-gray140--hover:hover{background-color:#484644}.ms-bgColor-gray130,.ms-bgColor-gray130--hover:hover{background-color:#605e5c}.ms-bgColor-gray120,.ms-bgColor-gray120--hover:hover{background-color:#797775}.ms-bgColor-gray110,.ms-bgColor-gray110--hover:hover{background-color:#8a8886}.ms-bgColor-gray100,.ms-bgColor-gray100--hover:hover{background-color:#979593}.ms-bgColor-gray90,.ms-bgColor-gray90--hover:hover{background-color:#a19f9d}.ms-bgColor-gray80,.ms-bgColor-gray80--hover:hover{background-color:#b3b0ad}.ms-bgColor-gray70,.ms-bgColor-gray70--hover:hover{background-color:#bebbb8}.ms-bgColor-gray60,.ms-bgColor-gray60--hover:hover{background-color:#c8c6c4}.ms-bgColor-gray50,.ms-bgColor-gray50--hover:hover{background-color:#d2d0ce}.ms-bgColor-gray40,.ms-bgColor-gray40--hover:hover{background-color:#e1dfdd}.ms-bgColor-gray30,.ms-bgColor-gray30--hover:hover{background-color:#edebe9}.ms-bgColor-gray20,.ms-bgColor-gray20--hover:hover{background-color:#f3f2f1}.ms-bgColor-gray10,.ms-bgColor-gray10--hover:hover{background-color:#faf9f8}.ms-bgColor-white,.ms-bgColor-white--hover:hover{background-color:#fff}.ms-bgColor-sharedPinkRed10,.ms-bgColor-sharedPinkRed10--hover:hover{background-color:#750b1c}.ms-bgColor-sharedRed20,.ms-bgColor-sharedRed20--hover:hover{background-color:#a4262c}.ms-bgColor-sharedRed10,.ms-bgColor-sharedRed10--hover:hover{background-color:#d13438}.ms-bgColor-sharedRedOrange20,.ms-bgColor-sharedRedOrange20--hover:hover{background-color:#603d30}.ms-bgColor-sharedRedOrange10,.ms-bgColor-sharedRedOrange10--hover:hover{background-color:#da3b01}.ms-bgColor-sharedOrange30,.ms-bgColor-sharedOrange30--hover:hover{background-color:#8e562e}.ms-bgColor-sharedOrange20,.ms-bgColor-sharedOrange20--hover:hover{background-color:#ca5010}.ms-bgColor-sharedOrange10,.ms-bgColor-sharedOrange10--hover:hover{background-color:#fa4}.ms-bgColor-sharedYellow10,.ms-bgColor-sharedYellow10--hover:hover{background-color:#fce100}.ms-bgColor-sharedOrangeYellow20,.ms-bgColor-sharedOrangeYellow20--hover:hover{background-color:#986f0b}.ms-bgColor-sharedOrangeYellow10,.ms-bgColor-sharedOrangeYellow10--hover:hover{background-color:#c19c00}.ms-bgColor-sharedYellowGreen10,.ms-bgColor-sharedYellowGreen10--hover:hover{background-color:#8cbd18}.ms-bgColor-sharedGreen20,.ms-bgColor-sharedGreen20--hover:hover{background-color:#0b6a0b}.ms-bgColor-sharedGreen10,.ms-bgColor-sharedGreen10--hover:hover{background-color:#498205}.ms-bgColor-sharedGreenCyan10,.ms-bgColor-sharedGreenCyan10--hover:hover{background-color:#00ad56}.ms-bgColor-sharedCyan40,.ms-bgColor-sharedCyan40--hover:hover{background-color:#005e50}.ms-bgColor-sharedCyan30,.ms-bgColor-sharedCyan30--hover:hover{background-color:#005b70}.ms-bgColor-sharedCyan20,.ms-bgColor-sharedCyan20--hover:hover{background-color:#038387}.ms-bgColor-sharedCyan10,.ms-bgColor-sharedCyan10--hover:hover{background-color:#00b7c3}.ms-bgColor-sharedCyanBlue20,.ms-bgColor-sharedCyanBlue20--hover:hover{background-color:#004e8c}.ms-bgColor-sharedCyanBlue10,.ms-bgColor-sharedCyanBlue10--hover:hover{background-color:#0078d4}.ms-bgColor-sharedBlue10,.ms-bgColor-sharedBlue10--hover:hover{background-color:#4f6bed}.ms-bgColor-sharedBlueMagenta40,.ms-bgColor-sharedBlueMagenta40--hover:hover{background-color:#373277}.ms-bgColor-sharedBlueMagenta30,.ms-bgColor-sharedBlueMagenta30--hover:hover{background-color:#5c2e91}.ms-bgColor-sharedBlueMagenta20,.ms-bgColor-sharedBlueMagenta20--hover:hover{background-color:#8764b8}.ms-bgColor-sharedBlueMagenta10,.ms-bgColor-sharedBlueMagenta10--hover:hover{background-color:#8378de}.ms-bgColor-sharedMagenta20,.ms-bgColor-sharedMagenta20--hover:hover{background-color:#881798}.ms-bgColor-sharedMagenta10,.ms-bgColor-sharedMagenta10--hover:hover{background-color:#c239b3}.ms-bgColor-sharedMagentaPink20,.ms-bgColor-sharedMagentaPink20--hover:hover{background-color:#9b0062}.ms-bgColor-sharedMagentaPink10,.ms-bgColor-sharedMagentaPink10--hover:hover{background-color:#e3008c}.ms-bgColor-sharedGray40,.ms-bgColor-sharedGray40--hover:hover{background-color:#393939}.ms-bgColor-sharedGray30,.ms-bgColor-sharedGray30--hover:hover{background-color:#7a7574}.ms-bgColor-sharedGray20,.ms-bgColor-sharedGray20--hover:hover{background-color:#69797e}.ms-bgColor-sharedGray10,.ms-bgColor-sharedGray10--hover:hover{background-color:#a0aeb2}.ms-borderColor-communicationShade30,.ms-borderColor-communicationShade30--hover:hover{border-color:#004578}.ms-borderColor-communicationShade20,.ms-borderColor-communicationShade20--hover:hover{border-color:#005a9e}.ms-borderColor-communicationShade10,.ms-borderColor-communicationShade10--hover:hover{border-color:#106ebe}.ms-borderColor-communicationPrimary,.ms-borderColor-communicationPrimary--hover:hover{border-color:#0078d4}.ms-borderColor-communicationTint10,.ms-borderColor-communicationTint10--hover:hover{border-color:#2b88d8}.ms-borderColor-communicationTint20,.ms-borderColor-communicationTint20--hover:hover{border-color:#c7e0f4}.ms-borderColor-communicationTint30,.ms-borderColor-communicationTint30--hover:hover{border-color:#deecf9}.ms-borderColor-communicationTint40,.ms-borderColor-communicationTint40--hover:hover{border-color:#eff6fc}.ms-borderColor-black,.ms-borderColor-black--hover:hover{border-color:#000}.ms-borderColor-gray220,.ms-borderColor-gray220--hover:hover{border-color:#11100f}.ms-borderColor-gray210,.ms-borderColor-gray210--hover:hover{border-color:#161514}.ms-borderColor-gray200,.ms-borderColor-gray200--hover:hover{border-color:#1b1a19}.ms-borderColor-gray190,.ms-borderColor-gray190--hover:hover{border-color:#201f1e}.ms-borderColor-gray180,.ms-borderColor-gray180--hover:hover{border-color:#252423}.ms-borderColor-gray170,.ms-borderColor-gray170--hover:hover{border-color:#292827}.ms-borderColor-gray160,.ms-borderColor-gray160--hover:hover{border-color:#323130}.ms-borderColor-gray150,.ms-borderColor-gray150--hover:hover{border-color:#3b3a39}.ms-borderColor-gray140,.ms-borderColor-gray140--hover:hover{border-color:#484644}.ms-borderColor-gray130,.ms-borderColor-gray130--hover:hover{border-color:#605e5c}.ms-borderColor-gray120,.ms-borderColor-gray120--hover:hover{border-color:#797775}.ms-borderColor-gray110,.ms-borderColor-gray110--hover:hover{border-color:#8a8886}.ms-borderColor-gray100,.ms-borderColor-gray100--hover:hover{border-color:#979593}.ms-borderColor-gray90,.ms-borderColor-gray90--hover:hover{border-color:#a19f9d}.ms-borderColor-gray80,.ms-borderColor-gray80--hover:hover{border-color:#b3b0ad}.ms-borderColor-gray70,.ms-borderColor-gray70--hover:hover{border-color:#bebbb8}.ms-borderColor-gray60,.ms-borderColor-gray60--hover:hover{border-color:#c8c6c4}.ms-borderColor-gray50,.ms-borderColor-gray50--hover:hover{border-color:#d2d0ce}.ms-borderColor-gray40,.ms-borderColor-gray40--hover:hover{border-color:#e1dfdd}.ms-borderColor-gray30,.ms-borderColor-gray30--hover:hover{border-color:#edebe9}.ms-borderColor-gray20,.ms-borderColor-gray20--hover:hover{border-color:#f3f2f1}.ms-borderColor-gray10,.ms-borderColor-gray10--hover:hover{border-color:#faf9f8}.ms-borderColor-white,.ms-borderColor-white--hover:hover{border-color:#fff}.ms-borderColor-sharedPinkRed10,.ms-borderColor-sharedPinkRed10--hover:hover{border-color:#750b1c}.ms-borderColor-sharedRed20,.ms-borderColor-sharedRed20--hover:hover{border-color:#a4262c}.ms-borderColor-sharedRed10,.ms-borderColor-sharedRed10--hover:hover{border-color:#d13438}.ms-borderColor-sharedRedOrange20,.ms-borderColor-sharedRedOrange20--hover:hover{border-color:#603d30}.ms-borderColor-sharedRedOrange10,.ms-borderColor-sharedRedOrange10--hover:hover{border-color:#da3b01}.ms-borderColor-sharedOrange30,.ms-borderColor-sharedOrange30--hover:hover{border-color:#8e562e}.ms-borderColor-sharedOrange20,.ms-borderColor-sharedOrange20--hover:hover{border-color:#ca5010}.ms-borderColor-sharedOrange10,.ms-borderColor-sharedOrange10--hover:hover{border-color:#fa4}.ms-borderColor-sharedYellow10,.ms-borderColor-sharedYellow10--hover:hover{border-color:#fce100}.ms-borderColor-sharedOrangeYellow20,.ms-borderColor-sharedOrangeYellow20--hover:hover{border-color:#986f0b}.ms-borderColor-sharedOrangeYellow10,.ms-borderColor-sharedOrangeYellow10--hover:hover{border-color:#c19c00}.ms-borderColor-sharedYellowGreen10,.ms-borderColor-sharedYellowGreen10--hover:hover{border-color:#8cbd18}.ms-borderColor-sharedGreen20,.ms-borderColor-sharedGreen20--hover:hover{border-color:#0b6a0b}.ms-borderColor-sharedGreen10,.ms-borderColor-sharedGreen10--hover:hover{border-color:#498205}.ms-borderColor-sharedGreenCyan10,.ms-borderColor-sharedGreenCyan10--hover:hover{border-color:#00ad56}.ms-borderColor-sharedCyan40,.ms-borderColor-sharedCyan40--hover:hover{border-color:#005e50}.ms-borderColor-sharedCyan30,.ms-borderColor-sharedCyan30--hover:hover{border-color:#005b70}.ms-borderColor-sharedCyan20,.ms-borderColor-sharedCyan20--hover:hover{border-color:#038387}.ms-borderColor-sharedCyan10,.ms-borderColor-sharedCyan10--hover:hover{border-color:#00b7c3}.ms-borderColor-sharedCyanBlue20,.ms-borderColor-sharedCyanBlue20--hover:hover{border-color:#004e8c}.ms-borderColor-sharedCyanBlue10,.ms-borderColor-sharedCyanBlue10--hover:hover{border-color:#0078d4}.ms-borderColor-sharedBlue10,.ms-borderColor-sharedBlue10--hover:hover{border-color:#4f6bed}.ms-borderColor-sharedBlueMagenta40,.ms-borderColor-sharedBlueMagenta40--hover:hover{border-color:#373277}.ms-borderColor-sharedBlueMagenta30,.ms-borderColor-sharedBlueMagenta30--hover:hover{border-color:#5c2e91}.ms-borderColor-sharedBlueMagenta20,.ms-borderColor-sharedBlueMagenta20--hover:hover{border-color:#8764b8}.ms-borderColor-sharedBlueMagenta10,.ms-borderColor-sharedBlueMagenta10--hover:hover{border-color:#8378de}.ms-borderColor-sharedMagenta20,.ms-borderColor-sharedMagenta20--hover:hover{border-color:#881798}.ms-borderColor-sharedMagenta10,.ms-borderColor-sharedMagenta10--hover:hover{border-color:#c239b3}.ms-borderColor-sharedMagentaPink20,.ms-borderColor-sharedMagentaPink20--hover:hover{border-color:#9b0062}.ms-borderColor-sharedMagentaPink10,.ms-borderColor-sharedMagentaPink10--hover:hover{border-color:#e3008c}.ms-borderColor-sharedGray40,.ms-borderColor-sharedGray40--hover:hover{border-color:#393939}.ms-borderColor-sharedGray30,.ms-borderColor-sharedGray30--hover:hover{border-color:#7a7574}.ms-borderColor-sharedGray20,.ms-borderColor-sharedGray20--hover:hover{border-color:#69797e}.ms-borderColor-sharedGray10,.ms-borderColor-sharedGray10--hover:hover{border-color:#a0aeb2}.ms-fontColor-communicationShade30,.ms-fontColor-communicationShade30--hover:hover{color:#004578}.ms-fontColor-communicationShade20,.ms-fontColor-communicationShade20--hover:hover{color:#005a9e}.ms-fontColor-communicationShade10,.ms-fontColor-communicationShade10--hover:hover{color:#106ebe}.ms-fontColor-communicationPrimary,.ms-fontColor-communicationPrimary--hover:hover{color:#0078d4}.ms-fontColor-communicationTint10,.ms-fontColor-communicationTint10--hover:hover{color:#2b88d8}.ms-fontColor-communicationTint20,.ms-fontColor-communicationTint20--hover:hover{color:#c7e0f4}.ms-fontColor-communicationTint30,.ms-fontColor-communicationTint30--hover:hover{color:#deecf9}.ms-fontColor-communicationTint40,.ms-fontColor-communicationTint40--hover:hover{color:#eff6fc}.ms-fontColor-black,.ms-fontColor-black--hover:hover{color:#000}.ms-fontColor-gray220,.ms-fontColor-gray220--hover:hover{color:#11100f}.ms-fontColor-gray210,.ms-fontColor-gray210--hover:hover{color:#161514}.ms-fontColor-gray200,.ms-fontColor-gray200--hover:hover{color:#1b1a19}.ms-fontColor-gray190,.ms-fontColor-gray190--hover:hover{color:#201f1e}.ms-fontColor-gray180,.ms-fontColor-gray180--hover:hover{color:#252423}.ms-fontColor-gray170,.ms-fontColor-gray170--hover:hover{color:#292827}.ms-fontColor-gray160,.ms-fontColor-gray160--hover:hover{color:#323130}.ms-fontColor-gray150,.ms-fontColor-gray150--hover:hover{color:#3b3a39}.ms-fontColor-gray140,.ms-fontColor-gray140--hover:hover{color:#484644}.ms-fontColor-gray130,.ms-fontColor-gray130--hover:hover{color:#605e5c}.ms-fontColor-gray120,.ms-fontColor-gray120--hover:hover{color:#797775}.ms-fontColor-gray110,.ms-fontColor-gray110--hover:hover{color:#8a8886}.ms-fontColor-gray100,.ms-fontColor-gray100--hover:hover{color:#979593}.ms-fontColor-gray90,.ms-fontColor-gray90--hover:hover{color:#a19f9d}.ms-fontColor-gray80,.ms-fontColor-gray80--hover:hover{color:#b3b0ad}.ms-fontColor-gray70,.ms-fontColor-gray70--hover:hover{color:#bebbb8}.ms-fontColor-gray60,.ms-fontColor-gray60--hover:hover{color:#c8c6c4}.ms-fontColor-gray50,.ms-fontColor-gray50--hover:hover{color:#d2d0ce}.ms-fontColor-gray40,.ms-fontColor-gray40--hover:hover{color:#e1dfdd}.ms-fontColor-gray30,.ms-fontColor-gray30--hover:hover{color:#edebe9}.ms-fontColor-gray20,.ms-fontColor-gray20--hover:hover{color:#f3f2f1}.ms-fontColor-gray10,.ms-fontColor-gray10--hover:hover{color:#faf9f8}.ms-fontColor-white,.ms-fontColor-white--hover:hover{color:#fff}.ms-fontColor-sharedPinkRed10,.ms-fontColor-sharedPinkRed10--hover:hover{color:#750b1c}.ms-fontColor-sharedRed20,.ms-fontColor-sharedRed20--hover:hover{color:#a4262c}.ms-fontColor-sharedRed10,.ms-fontColor-sharedRed10--hover:hover{color:#d13438}.ms-fontColor-sharedRedOrange20,.ms-fontColor-sharedRedOrange20--hover:hover{color:#603d30}.ms-fontColor-sharedRedOrange10,.ms-fontColor-sharedRedOrange10--hover:hover{color:#da3b01}.ms-fontColor-sharedOrange30,.ms-fontColor-sharedOrange30--hover:hover{color:#8e562e}.ms-fontColor-sharedOrange20,.ms-fontColor-sharedOrange20--hover:hover{color:#ca5010}.ms-fontColor-sharedOrange10,.ms-fontColor-sharedOrange10--hover:hover{color:#fa4}.ms-fontColor-sharedYellow10,.ms-fontColor-sharedYellow10--hover:hover{color:#fce100}.ms-fontColor-sharedOrangeYellow20,.ms-fontColor-sharedOrangeYellow20--hover:hover{color:#986f0b}.ms-fontColor-sharedOrangeYellow10,.ms-fontColor-sharedOrangeYellow10--hover:hover{color:#c19c00}.ms-fontColor-sharedYellowGreen10,.ms-fontColor-sharedYellowGreen10--hover:hover{color:#8cbd18}.ms-fontColor-sharedGreen20,.ms-fontColor-sharedGreen20--hover:hover{color:#0b6a0b}.ms-fontColor-sharedGreen10,.ms-fontColor-sharedGreen10--hover:hover{color:#498205}.ms-fontColor-sharedGreenCyan10,.ms-fontColor-sharedGreenCyan10--hover:hover{color:#00ad56}.ms-fontColor-sharedCyan40,.ms-fontColor-sharedCyan40--hover:hover{color:#005e50}.ms-fontColor-sharedCyan30,.ms-fontColor-sharedCyan30--hover:hover{color:#005b70}.ms-fontColor-sharedCyan20,.ms-fontColor-sharedCyan20--hover:hover{color:#038387}.ms-fontColor-sharedCyan10,.ms-fontColor-sharedCyan10--hover:hover{color:#00b7c3}.ms-fontColor-sharedCyanBlue20,.ms-fontColor-sharedCyanBlue20--hover:hover{color:#004e8c}.ms-fontColor-sharedCyanBlue10,.ms-fontColor-sharedCyanBlue10--hover:hover{color:#0078d4}.ms-fontColor-sharedBlue10,.ms-fontColor-sharedBlue10--hover:hover{color:#4f6bed}.ms-fontColor-sharedBlueMagenta40,.ms-fontColor-sharedBlueMagenta40--hover:hover{color:#373277}.ms-fontColor-sharedBlueMagenta30,.ms-fontColor-sharedBlueMagenta30--hover:hover{color:#5c2e91}.ms-fontColor-sharedBlueMagenta20,.ms-fontColor-sharedBlueMagenta20--hover:hover{color:#8764b8}.ms-fontColor-sharedBlueMagenta10,.ms-fontColor-sharedBlueMagenta10--hover:hover{color:#8378de}.ms-fontColor-sharedMagenta20,.ms-fontColor-sharedMagenta20--hover:hover{color:#881798}.ms-fontColor-sharedMagenta10,.ms-fontColor-sharedMagenta10--hover:hover{color:#c239b3}.ms-fontColor-sharedMagentaPink20,.ms-fontColor-sharedMagentaPink20--hover:hover{color:#9b0062}.ms-fontColor-sharedMagentaPink10,.ms-fontColor-sharedMagentaPink10--hover:hover{color:#e3008c}.ms-fontColor-sharedGray40,.ms-fontColor-sharedGray40--hover:hover{color:#393939}.ms-fontColor-sharedGray30,.ms-fontColor-sharedGray30--hover:hover{color:#7a7574}.ms-fontColor-sharedGray20,.ms-fontColor-sharedGray20--hover:hover{color:#69797e}.ms-fontColor-sharedGray10,.ms-fontColor-sharedGray10--hover:hover{color:#a0aeb2}.ms-bgColor-themeDark,.ms-bgColor-themeDark--hover:hover{background-color:#005a9e}.ms-bgColor-themeDarkAlt,.ms-bgColor-themeDarkAlt--hover:hover{background-color:#106ebe}.ms-bgColor-themeDarker,.ms-bgColor-themeDarker--hover:hover{background-color:#004578}.ms-bgColor-themePrimary,.ms-bgColor-themePrimary--hover:hover{background-color:#0078d4}.ms-bgColor-themeSecondary,.ms-bgColor-themeSecondary--hover:hover{background-color:#2b88d8}.ms-bgColor-themeTertiary,.ms-bgColor-themeTertiary--hover:hover{background-color:#71afe5}.ms-bgColor-themeLight,.ms-bgColor-themeLight--hover:hover{background-color:#c7e0f4}.ms-bgColor-themeLighter,.ms-bgColor-themeLighter--hover:hover{background-color:#deecf9}.ms-bgColor-themeLighterAlt,.ms-bgColor-themeLighterAlt--hover:hover{background-color:#eff6fc}.ms-borderColor-themeDark,.ms-borderColor-themeDark--hover:hover{border-color:#005a9e}.ms-borderColor-themeDarkAlt,.ms-borderColor-themeDarkAlt--hover:hover{border-color:#106ebe}.ms-borderColor-themeDarker,.ms-borderColor-themeDarker--hover:hover{border-color:#004578}.ms-borderColor-themePrimary,.ms-borderColor-themePrimary--hover:hover{border-color:#0078d4}.ms-borderColor-themeSecondary,.ms-borderColor-themeSecondary--hover:hover{border-color:#2b88d8}.ms-borderColor-themeTertiary,.ms-borderColor-themeTertiary--hover:hover{border-color:#71afe5}.ms-borderColor-themeLight,.ms-borderColor-themeLight--hover:hover{border-color:#c7e0f4}.ms-borderColor-themeLighter,.ms-borderColor-themeLighter--hover:hover{border-color:#deecf9}.ms-borderColor-themeLighterAlt,.ms-borderColor-themeLighterAlt--hover:hover{border-color:#eff6fc}.ms-fontColor-themeDarker,.ms-fontColor-themeDarker--hover:hover{color:#004578}.ms-fontColor-themeDark,.ms-fontColor-themeDark--hover:hover{color:#005a9e}.ms-fontColor-themeDarkAlt,.ms-fontColor-themeDarkAlt--hover:hover{color:#106ebe}.ms-fontColor-themePrimary,.ms-fontColor-themePrimary--hover:hover{color:#0078d4}.ms-fontColor-themeSecondary,.ms-fontColor-themeSecondary--hover:hover{color:#2b88d8}.ms-fontColor-themeTertiary,.ms-fontColor-themeTertiary--hover:hover{color:#71afe5}.ms-fontColor-themeLight,.ms-fontColor-themeLight--hover:hover{color:#c7e0f4}.ms-fontColor-themeLighter,.ms-fontColor-themeLighter--hover:hover{color:#deecf9}.ms-fontColor-themeLighterAlt,.ms-fontColor-themeLighterAlt--hover:hover{color:#eff6fc}.ms-bgColor-black,.ms-bgColor-black--hover:hover{background-color:#000}.ms-bgColor-neutralDark,.ms-bgColor-neutralDark--hover:hover{background-color:#201f1e}.ms-bgColor-neutralPrimary,.ms-bgColor-neutralPrimary--hover:hover{background-color:#323130}.ms-bgColor-neutralPrimaryAlt,.ms-bgColor-neutralPrimaryAlt--hover:hover{background-color:#3b3a39}.ms-bgColor-neutralSecondary,.ms-bgColor-neutralSecondary--hover:hover{background-color:#605e5c}.ms-bgColor-neutralSecondaryAlt,.ms-bgColor-neutralSecondaryAlt--hover:hover{background-color:#797775}.ms-bgColor-neutralTertiary,.ms-bgColor-neutralTertiary--hover:hover{background-color:#a19f9d}.ms-bgColor-neutralTertiaryAlt,.ms-bgColor-neutralTertiaryAlt--hover:hover{background-color:#c8c6c4}.ms-bgColor-neutralQuaternary,.ms-bgColor-neutralQuaternary--hover:hover{background-color:#d2d0ce}.ms-bgColor-neutralQuaternaryAlt,.ms-bgColor-neutralQuaternaryAlt--hover:hover{background-color:#e1dfdd}.ms-bgColor-neutralLight,.ms-bgColor-neutralLight--hover:hover{background-color:#edebe9}.ms-bgColor-neutralLighter,.ms-bgColor-neutralLighter--hover:hover{background-color:#f3f2f1}.ms-bgColor-neutralLighterAlt,.ms-bgColor-neutralLighterAlt--hover:hover{background-color:#faf9f8}.ms-bgColor-white,.ms-bgColor-white--hover:hover{background-color:#fff}.ms-borderColor-black,.ms-borderColor-black--hover:hover{border-color:#000}.ms-borderColor-neutralDark,.ms-borderColor-neutralDark--hover:hover{border-color:#201f1e}.ms-borderColor-neutralPrimary,.ms-borderColor-neutralPrimary--hover:hover{border-color:#323130}.ms-borderColor-neutralPrimaryAlt,.ms-borderColor-neutralPrimaryAlt--hover:hover{border-color:#3b3a39}.ms-borderColor-neutralSecondary,.ms-borderColor-neutralSecondary--hover:hover{border-color:#605e5c}.ms-borderColor-neutralSecondaryAlt,.ms-borderColor-neutralSecondaryAlt--hover:hover{border-color:#797775}.ms-borderColor-neutralTertiary,.ms-borderColor-neutralTertiary--hover:hover{border-color:#a19f9d}.ms-borderColor-neutralTertiaryAlt,.ms-borderColor-neutralTertiaryAlt--hover:hover{border-color:#c8c6c4}.ms-borderColor-neutralQuaternary,.ms-borderColor-neutralQuaternary--hover:hover{border-color:#d2d0ce}.ms-borderColor-neutralQuaternaryAlt,.ms-borderColor-neutralQuaternaryAlt--hover:hover{border-color:#e1dfdd}.ms-borderColor-neutralLight,.ms-borderColor-neutralLight--hover:hover{border-color:#edebe9}.ms-borderColor-neutralLighter,.ms-borderColor-neutralLighter--hover:hover{border-color:#f3f2f1}.ms-borderColor-neutralLighterAlt,.ms-borderColor-neutralLighterAlt--hover:hover{border-color:#faf9f8}.ms-borderColor-white,.ms-borderColor-white--hover:hover{border-color:#fff}.ms-fontColor-black,.ms-fontColor-black--hover:hover{color:#000}.ms-fontColor-neutralDark,.ms-fontColor-neutralDark--hover:hover{color:#201f1e}.ms-fontColor-neutralPrimary,.ms-fontColor-neutralPrimary--hover:hover{color:#323130}.ms-fontColor-neutralPrimaryAlt,.ms-fontColor-neutralPrimaryAlt--hover:hover{color:#3b3a39}.ms-fontColor-neutralSecondary,.ms-fontColor-neutralSecondary--hover:hover{color:#605e5c}.ms-fontColor-neutralSecondaryAlt,.ms-fontColor-neutralSecondaryAlt--hover:hover{color:#797775}.ms-fontColor-neutralTertiary,.ms-fontColor-neutralTertiary--hover:hover{color:#a19f9d}.ms-fontColor-neutralTertiaryAlt,.ms-fontColor-neutralTertiaryAlt--hover:hover{color:#c8c6c4}.ms-fontColor-neutralQuaternary,.ms-fontColor-neutralQuaternary--hover:hover{color:#d2d0ce}.ms-fontColor-neutralQuaternaryAlt,.ms-fontColor-neutralQuaternaryAlt--hover:hover{color:#e1dfdd}.ms-fontColor-neutralLight,.ms-fontColor-neutralLight--hover:hover{color:#edebe9}.ms-fontColor-neutralLighter,.ms-fontColor-neutralLighter--hover:hover{color:#f3f2f1}.ms-fontColor-neutralLighterAlt,.ms-fontColor-neutralLighterAlt--hover:hover{color:#faf9f8}.ms-fontColor-white,.ms-fontColor-white--hover:hover{color:#fff}.ms-bgColor-yellow,.ms-bgColor-yellow--hover:hover{background-color:#ffb900}.ms-bgColor-yellowLight,.ms-bgColor-yellowLight--hover:hover{background-color:#fff100}.ms-bgColor-orange,.ms-bgColor-orange--hover:hover{background-color:#d83b01}.ms-bgColor-orangeLight,.ms-bgColor-orangeLight--hover:hover{background-color:#ea4300}.ms-bgColor-orangeLighter,.ms-bgColor-orangeLighter--hover:hover{background-color:#ff8c00}.ms-bgColor-redDark,.ms-bgColor-redDark--hover:hover{background-color:#a80000}.ms-bgColor-red,.ms-bgColor-red--hover:hover{background-color:#e81123}.ms-bgColor-magentaDark,.ms-bgColor-magentaDark--hover:hover{background-color:#5c005c}.ms-bgColor-magenta,.ms-bgColor-magenta--hover:hover{background-color:#b4009e}.ms-bgColor-magentaLight,.ms-bgColor-magentaLight--hover:hover{background-color:#e3008c}.ms-bgColor-purpleDark,.ms-bgColor-purpleDark--hover:hover{background-color:#32145a}.ms-bgColor-purple,.ms-bgColor-purple--hover:hover{background-color:#5c2d91}.ms-bgColor-purpleLight,.ms-bgColor-purpleLight--hover:hover{background-color:#b4a0ff}.ms-bgColor-blueDark,.ms-bgColor-blueDark--hover:hover{background-color:#002050}.ms-bgColor-blueMid,.ms-bgColor-blueMid--hover:hover{background-color:#00188f}.ms-bgColor-blue,.ms-bgColor-blue--hover:hover{background-color:#0078d4}.ms-bgColor-blueLight,.ms-bgColor-blueLight--hover:hover{background-color:#00bcf2}.ms-bgColor-tealDark,.ms-bgColor-tealDark--hover:hover{background-color:#004b50}.ms-bgColor-teal,.ms-bgColor-teal--hover:hover{background-color:#008272}.ms-bgColor-tealLight,.ms-bgColor-tealLight--hover:hover{background-color:#00b294}.ms-bgColor-greenDark,.ms-bgColor-greenDark--hover:hover{background-color:#004b1c}.ms-bgColor-green,.ms-bgColor-green--hover:hover{background-color:#107c10}.ms-bgColor-greenLight,.ms-bgColor-greenLight--hover:hover{background-color:#bad80a}.ms-borderColor-yellow,.ms-borderColor-yellow--hover:hover{border-color:#ffb900}.ms-borderColor-yellowLight,.ms-borderColor-yellowLight--hover:hover{border-color:#fff100}.ms-borderColor-orange,.ms-borderColor-orange--hover:hover{border-color:#d83b01}.ms-borderColor-orangeLight,.ms-borderColor-orangeLight--hover:hover{border-color:#ea4300}.ms-borderColor-orangeLighter,.ms-borderColor-orangeLighter--hover:hover{border-color:#ff8c00}.ms-borderColor-redDark,.ms-borderColor-redDark--hover:hover{border-color:#a80000}.ms-borderColor-red,.ms-borderColor-red--hover:hover{border-color:#e81123}.ms-borderColor-magentaDark,.ms-borderColor-magentaDark--hover:hover{border-color:#5c005c}.ms-borderColor-magenta,.ms-borderColor-magenta--hover:hover{border-color:#b4009e}.ms-borderColor-magentaLight,.ms-borderColor-magentaLight--hover:hover{border-color:#e3008c}.ms-borderColor-purpleDark,.ms-borderColor-purpleDark--hover:hover{border-color:#32145a}.ms-borderColor-purple,.ms-borderColor-purple--hover:hover{border-color:#5c2d91}.ms-borderColor-purpleLight,.ms-borderColor-purpleLight--hover:hover{border-color:#b4a0ff}.ms-borderColor-blueDark,.ms-borderColor-blueDark--hover:hover{border-color:#002050}.ms-borderColor-blueMid,.ms-borderColor-blueMid--hover:hover{border-color:#00188f}.ms-borderColor-blue,.ms-borderColor-blue--hover:hover{border-color:#0078d4}.ms-borderColor-blueLight,.ms-borderColor-blueLight--hover:hover{border-color:#00bcf2}.ms-borderColor-tealDark,.ms-borderColor-tealDark--hover:hover{border-color:#004b50}.ms-borderColor-teal,.ms-borderColor-teal--hover:hover{border-color:#008272}.ms-borderColor-tealLight,.ms-borderColor-tealLight--hover:hover{border-color:#00b294}.ms-borderColor-greenDark,.ms-borderColor-greenDark--hover:hover{border-color:#004b1c}.ms-borderColor-green,.ms-borderColor-green--hover:hover{border-color:#107c10}.ms-borderColor-greenLight,.ms-borderColor-greenLight--hover:hover{border-color:#bad80a}.ms-fontColor-yellow,.ms-fontColor-yellow--hover:hover{color:#ffb900}.ms-fontColor-yellowLight,.ms-fontColor-yellowLight--hover:hover{color:#fff100}.ms-fontColor-orange,.ms-fontColor-orange--hover:hover{color:#d83b01}.ms-fontColor-orangeLight,.ms-fontColor-orangeLight--hover:hover{color:#ea4300}.ms-fontColor-orangeLighter,.ms-fontColor-orangeLighter--hover:hover{color:#ff8c00}.ms-fontColor-redDark,.ms-fontColor-redDark--hover:hover{color:#a80000}.ms-fontColor-red,.ms-fontColor-red--hover:hover{color:#e81123}.ms-fontColor-magentaDark,.ms-fontColor-magentaDark--hover:hover{color:#5c005c}.ms-fontColor-magenta,.ms-fontColor-magenta--hover:hover{color:#b4009e}.ms-fontColor-magentaLight,.ms-fontColor-magentaLight--hover:hover{color:#e3008c}.ms-fontColor-purpleDark,.ms-fontColor-purpleDark--hover:hover{color:#32145a}.ms-fontColor-purple,.ms-fontColor-purple--hover:hover{color:#5c2d91}.ms-fontColor-purpleLight,.ms-fontColor-purpleLight--hover:hover{color:#b4a0ff}.ms-fontColor-blueDark,.ms-fontColor-blueDark--hover:hover{color:#002050}.ms-fontColor-blueMid,.ms-fontColor-blueMid--hover:hover{color:#00188f}.ms-fontColor-blue,.ms-fontColor-blue--hover:hover{color:#0078d4}.ms-fontColor-blueLight,.ms-fontColor-blueLight--hover:hover{color:#00bcf2}.ms-fontColor-tealDark,.ms-fontColor-tealDark--hover:hover{color:#004b50}.ms-fontColor-teal,.ms-fontColor-teal--hover:hover{color:#008272}.ms-fontColor-tealLight,.ms-fontColor-tealLight--hover:hover{color:#00b294}.ms-fontColor-greenDark,.ms-fontColor-greenDark--hover:hover{color:#004b1c}.ms-fontColor-green,.ms-fontColor-green--hover:hover{color:#107c10}.ms-fontColor-greenLight,.ms-fontColor-greenLight--hover:hover{color:#bad80a}.ms-bgColor-info,.ms-bgColor-info--hover:hover{background-color:#f3f2f1}.ms-bgColor-success,.ms-bgColor-success--hover:hover{background-color:#dff6dd}.ms-bgColor-severeWarning,.ms-bgColor-severeWarning--hover:hover{background-color:#fed9cc}.ms-bgColor-warning,.ms-bgColor-warning--hover:hover{background-color:#fff4ce}.ms-bgColor-error,.ms-bgColor-error--hover:hover{background-color:#fde7e9}.ms-fontColor-info,.ms-fontColor-info--hover:hover{color:#797775}.ms-fontColor-success,.ms-fontColor-success--hover:hover{color:#107c10}.ms-fontColor-alert,.ms-fontColor-alert--hover:hover{color:#d83b01}.ms-fontColor-warning,.ms-fontColor-warning--hover:hover{color:#797775}.ms-fontColor-severeWarning,.ms-fontColor-severeWarning--hover:hover{color:#d83b01}.ms-fontColor-error,.ms-fontColor-error--hover:hover{color:#a80000}.ms-bgColor-contrastBlackDisabled,.ms-bgColor-contrastBlackDisabled--hover:hover{background-color:#0f0}.ms-bgColor-contrastWhiteDisabled,.ms-bgColor-contrastWhiteDisabled--hover:hover{background-color:#600000}.ms-bgColor-contrastBlackSelected,.ms-bgColor-contrastBlackSelected--hover:hover{background-color:#1aebff}.ms-bgColor-contrastWhiteSelected,.ms-bgColor-contrastWhiteSelected--hover:hover{background-color:#37006e}.ms-fontColor-contrastBlackDisabled,.ms-fontColor-contrastBlackDisabled--hover:hover{color:#0f0}.ms-fontColor-contrastWhiteDisabled,.ms-fontColor-contrastWhiteDisabled--hover:hover{color:#600000}.ms-fontColor-contrastBlackSelected,.ms-fontColor-contrastBlackSelected--hover:hover{color:#1aebff}.ms-fontColor-contrastWhiteSelected,.ms-fontColor-contrastWhiteSelected--hover:hover{color:#37006e}.ms-borderColor-contrastBlackDisabled,.ms-borderColor-contrastBlackDisabled--hover:hover{border-color:#0f0}.ms-borderColor-contrastWhiteDisabled,.ms-borderColor-contrastWhiteDisabled--hover:hover{border-color:#600000}.ms-borderColor-contrastBlackSelected,.ms-borderColor-contrastBlackSelected--hover:hover{border-color:#1aebff}.ms-borderColor-contrastWhiteSelected,.ms-borderColor-contrastWhiteSelected--hover:hover{border-color:#37006e}.ms-bgColor-communicationShade30,.ms-bgColor-communicationShade30--hover:hover{background-color:#004578}.ms-bgColor-communicationShade20,.ms-bgColor-communicationShade20--hover:hover{background-color:#005a9e}.ms-bgColor-communicationShade10,.ms-bgColor-communicationShade10--hover:hover{background-color:#106ebe}.ms-bgColor-communicationPrimary,.ms-bgColor-communicationPrimary--hover:hover{background-color:#0078d4}.ms-bgColor-communicationTint10,.ms-bgColor-communicationTint10--hover:hover{background-color:#2b88d8}.ms-bgColor-communicationTint20,.ms-bgColor-communicationTint20--hover:hover{background-color:#c7e0f4}.ms-bgColor-communicationTint30,.ms-bgColor-communicationTint30--hover:hover{background-color:#deecf9}.ms-bgColor-communicationTint40,.ms-bgColor-communicationTint40--hover:hover{background-color:#eff6fc}.ms-bgColor-black,.ms-bgColor-black--hover:hover{background-color:#000}.ms-bgColor-gray220,.ms-bgColor-gray220--hover:hover{background-color:#11100f}.ms-bgColor-gray210,.ms-bgColor-gray210--hover:hover{background-color:#161514}.ms-bgColor-gray200,.ms-bgColor-gray200--hover:hover{background-color:#1b1a19}.ms-bgColor-gray190,.ms-bgColor-gray190--hover:hover{background-color:#201f1e}.ms-bgColor-gray180,.ms-bgColor-gray180--hover:hover{background-color:#252423}.ms-bgColor-gray170,.ms-bgColor-gray170--hover:hover{background-color:#292827}.ms-bgColor-gray160,.ms-bgColor-gray160--hover:hover{background-color:#323130}.ms-bgColor-gray150,.ms-bgColor-gray150--hover:hover{background-color:#3b3a39}.ms-bgColor-gray140,.ms-bgColor-gray140--hover:hover{background-color:#484644}.ms-bgColor-gray130,.ms-bgColor-gray130--hover:hover{background-color:#605e5c}.ms-bgColor-gray120,.ms-bgColor-gray120--hover:hover{background-color:#797775}.ms-bgColor-gray110,.ms-bgColor-gray110--hover:hover{background-color:#8a8886}.ms-bgColor-gray100,.ms-bgColor-gray100--hover:hover{background-color:#979593}.ms-bgColor-gray90,.ms-bgColor-gray90--hover:hover{background-color:#a19f9d}.ms-bgColor-gray80,.ms-bgColor-gray80--hover:hover{background-color:#b3b0ad}.ms-bgColor-gray70,.ms-bgColor-gray70--hover:hover{background-color:#bebbb8}.ms-bgColor-gray60,.ms-bgColor-gray60--hover:hover{background-color:#c8c6c4}.ms-bgColor-gray50,.ms-bgColor-gray50--hover:hover{background-color:#d2d0ce}.ms-bgColor-gray40,.ms-bgColor-gray40--hover:hover{background-color:#e1dfdd}.ms-bgColor-gray30,.ms-bgColor-gray30--hover:hover{background-color:#edebe9}.ms-bgColor-gray20,.ms-bgColor-gray20--hover:hover{background-color:#f3f2f1}.ms-bgColor-gray10,.ms-bgColor-gray10--hover:hover{background-color:#faf9f8}.ms-bgColor-white,.ms-bgColor-white--hover:hover{background-color:#fff}.ms-bgColor-sharedPinkRed10,.ms-bgColor-sharedPinkRed10--hover:hover{background-color:#750b1c}.ms-bgColor-sharedRed20,.ms-bgColor-sharedRed20--hover:hover{background-color:#a4262c}.ms-bgColor-sharedRed10,.ms-bgColor-sharedRed10--hover:hover{background-color:#d13438}.ms-bgColor-sharedRedOrange20,.ms-bgColor-sharedRedOrange20--hover:hover{background-color:#603d30}.ms-bgColor-sharedRedOrange10,.ms-bgColor-sharedRedOrange10--hover:hover{background-color:#da3b01}.ms-bgColor-sharedOrange30,.ms-bgColor-sharedOrange30--hover:hover{background-color:#8e562e}.ms-bgColor-sharedOrange20,.ms-bgColor-sharedOrange20--hover:hover{background-color:#ca5010}.ms-bgColor-sharedOrange10,.ms-bgColor-sharedOrange10--hover:hover{background-color:#fa4}.ms-bgColor-sharedYellow10,.ms-bgColor-sharedYellow10--hover:hover{background-color:#fce100}.ms-bgColor-sharedOrangeYellow20,.ms-bgColor-sharedOrangeYellow20--hover:hover{background-color:#986f0b}.ms-bgColor-sharedOrangeYellow10,.ms-bgColor-sharedOrangeYellow10--hover:hover{background-color:#c19c00}.ms-bgColor-sharedYellowGreen10,.ms-bgColor-sharedYellowGreen10--hover:hover{background-color:#8cbd18}.ms-bgColor-sharedGreen20,.ms-bgColor-sharedGreen20--hover:hover{background-color:#0b6a0b}.ms-bgColor-sharedGreen10,.ms-bgColor-sharedGreen10--hover:hover{background-color:#498205}.ms-bgColor-sharedGreenCyan10,.ms-bgColor-sharedGreenCyan10--hover:hover{background-color:#00ad56}.ms-bgColor-sharedCyan40,.ms-bgColor-sharedCyan40--hover:hover{background-color:#005e50}.ms-bgColor-sharedCyan30,.ms-bgColor-sharedCyan30--hover:hover{background-color:#005b70}.ms-bgColor-sharedCyan20,.ms-bgColor-sharedCyan20--hover:hover{background-color:#038387}.ms-bgColor-sharedCyan10,.ms-bgColor-sharedCyan10--hover:hover{background-color:#00b7c3}.ms-bgColor-sharedCyanBlue20,.ms-bgColor-sharedCyanBlue20--hover:hover{background-color:#004e8c}.ms-bgColor-sharedCyanBlue10,.ms-bgColor-sharedCyanBlue10--hover:hover{background-color:#0078d4}.ms-bgColor-sharedBlue10,.ms-bgColor-sharedBlue10--hover:hover{background-color:#4f6bed}.ms-bgColor-sharedBlueMagenta40,.ms-bgColor-sharedBlueMagenta40--hover:hover{background-color:#373277}.ms-bgColor-sharedBlueMagenta30,.ms-bgColor-sharedBlueMagenta30--hover:hover{background-color:#5c2e91}.ms-bgColor-sharedBlueMagenta20,.ms-bgColor-sharedBlueMagenta20--hover:hover{background-color:#8764b8}.ms-bgColor-sharedBlueMagenta10,.ms-bgColor-sharedBlueMagenta10--hover:hover{background-color:#8378de}.ms-bgColor-sharedMagenta20,.ms-bgColor-sharedMagenta20--hover:hover{background-color:#881798}.ms-bgColor-sharedMagenta10,.ms-bgColor-sharedMagenta10--hover:hover{background-color:#c239b3}.ms-bgColor-sharedMagentaPink20,.ms-bgColor-sharedMagentaPink20--hover:hover{background-color:#9b0062}.ms-bgColor-sharedMagentaPink10,.ms-bgColor-sharedMagentaPink10--hover:hover{background-color:#e3008c}.ms-bgColor-sharedGray40,.ms-bgColor-sharedGray40--hover:hover{background-color:#393939}.ms-bgColor-sharedGray30,.ms-bgColor-sharedGray30--hover:hover{background-color:#7a7574}.ms-bgColor-sharedGray20,.ms-bgColor-sharedGray20--hover:hover{background-color:#69797e}.ms-bgColor-sharedGray10,.ms-bgColor-sharedGray10--hover:hover{background-color:#a0aeb2}.ms-borderColor-communicationShade30,.ms-borderColor-communicationShade30--hover:hover{border-color:#004578}.ms-borderColor-communicationShade20,.ms-borderColor-communicationShade20--hover:hover{border-color:#005a9e}.ms-borderColor-communicationShade10,.ms-borderColor-communicationShade10--hover:hover{border-color:#106ebe}.ms-borderColor-communicationPrimary,.ms-borderColor-communicationPrimary--hover:hover{border-color:#0078d4}.ms-borderColor-communicationTint10,.ms-borderColor-communicationTint10--hover:hover{border-color:#2b88d8}.ms-borderColor-communicationTint20,.ms-borderColor-communicationTint20--hover:hover{border-color:#c7e0f4}.ms-borderColor-communicationTint30,.ms-borderColor-communicationTint30--hover:hover{border-color:#deecf9}.ms-borderColor-communicationTint40,.ms-borderColor-communicationTint40--hover:hover{border-color:#eff6fc}.ms-borderColor-black,.ms-borderColor-black--hover:hover{border-color:#000}.ms-borderColor-gray220,.ms-borderColor-gray220--hover:hover{border-color:#11100f}.ms-borderColor-gray210,.ms-borderColor-gray210--hover:hover{border-color:#161514}.ms-borderColor-gray200,.ms-borderColor-gray200--hover:hover{border-color:#1b1a19}.ms-borderColor-gray190,.ms-borderColor-gray190--hover:hover{border-color:#201f1e}.ms-borderColor-gray180,.ms-borderColor-gray180--hover:hover{border-color:#252423}.ms-borderColor-gray170,.ms-borderColor-gray170--hover:hover{border-color:#292827}.ms-borderColor-gray160,.ms-borderColor-gray160--hover:hover{border-color:#323130}.ms-borderColor-gray150,.ms-borderColor-gray150--hover:hover{border-color:#3b3a39}.ms-borderColor-gray140,.ms-borderColor-gray140--hover:hover{border-color:#484644}.ms-borderColor-gray130,.ms-borderColor-gray130--hover:hover{border-color:#605e5c}.ms-borderColor-gray120,.ms-borderColor-gray120--hover:hover{border-color:#797775}.ms-borderColor-gray110,.ms-borderColor-gray110--hover:hover{border-color:#8a8886}.ms-borderColor-gray100,.ms-borderColor-gray100--hover:hover{border-color:#979593}.ms-borderColor-gray90,.ms-borderColor-gray90--hover:hover{border-color:#a19f9d}.ms-borderColor-gray80,.ms-borderColor-gray80--hover:hover{border-color:#b3b0ad}.ms-borderColor-gray70,.ms-borderColor-gray70--hover:hover{border-color:#bebbb8}.ms-borderColor-gray60,.ms-borderColor-gray60--hover:hover{border-color:#c8c6c4}.ms-borderColor-gray50,.ms-borderColor-gray50--hover:hover{border-color:#d2d0ce}.ms-borderColor-gray40,.ms-borderColor-gray40--hover:hover{border-color:#e1dfdd}.ms-borderColor-gray30,.ms-borderColor-gray30--hover:hover{border-color:#edebe9}.ms-borderColor-gray20,.ms-borderColor-gray20--hover:hover{border-color:#f3f2f1}.ms-borderColor-gray10,.ms-borderColor-gray10--hover:hover{border-color:#faf9f8}.ms-borderColor-white,.ms-borderColor-white--hover:hover{border-color:#fff}.ms-borderColor-sharedPinkRed10,.ms-borderColor-sharedPinkRed10--hover:hover{border-color:#750b1c}.ms-borderColor-sharedRed20,.ms-borderColor-sharedRed20--hover:hover{border-color:#a4262c}.ms-borderColor-sharedRed10,.ms-borderColor-sharedRed10--hover:hover{border-color:#d13438}.ms-borderColor-sharedRedOrange20,.ms-borderColor-sharedRedOrange20--hover:hover{border-color:#603d30}.ms-borderColor-sharedRedOrange10,.ms-borderColor-sharedRedOrange10--hover:hover{border-color:#da3b01}.ms-borderColor-sharedOrange30,.ms-borderColor-sharedOrange30--hover:hover{border-color:#8e562e}.ms-borderColor-sharedOrange20,.ms-borderColor-sharedOrange20--hover:hover{border-color:#ca5010}.ms-borderColor-sharedOrange10,.ms-borderColor-sharedOrange10--hover:hover{border-color:#fa4}.ms-borderColor-sharedYellow10,.ms-borderColor-sharedYellow10--hover:hover{border-color:#fce100}.ms-borderColor-sharedOrangeYellow20,.ms-borderColor-sharedOrangeYellow20--hover:hover{border-color:#986f0b}.ms-borderColor-sharedOrangeYellow10,.ms-borderColor-sharedOrangeYellow10--hover:hover{border-color:#c19c00}.ms-borderColor-sharedYellowGreen10,.ms-borderColor-sharedYellowGreen10--hover:hover{border-color:#8cbd18}.ms-borderColor-sharedGreen20,.ms-borderColor-sharedGreen20--hover:hover{border-color:#0b6a0b}.ms-borderColor-sharedGreen10,.ms-borderColor-sharedGreen10--hover:hover{border-color:#498205}.ms-borderColor-sharedGreenCyan10,.ms-borderColor-sharedGreenCyan10--hover:hover{border-color:#00ad56}.ms-borderColor-sharedCyan40,.ms-borderColor-sharedCyan40--hover:hover{border-color:#005e50}.ms-borderColor-sharedCyan30,.ms-borderColor-sharedCyan30--hover:hover{border-color:#005b70}.ms-borderColor-sharedCyan20,.ms-borderColor-sharedCyan20--hover:hover{border-color:#038387}.ms-borderColor-sharedCyan10,.ms-borderColor-sharedCyan10--hover:hover{border-color:#00b7c3}.ms-borderColor-sharedCyanBlue20,.ms-borderColor-sharedCyanBlue20--hover:hover{border-color:#004e8c}.ms-borderColor-sharedCyanBlue10,.ms-borderColor-sharedCyanBlue10--hover:hover{border-color:#0078d4}.ms-borderColor-sharedBlue10,.ms-borderColor-sharedBlue10--hover:hover{border-color:#4f6bed}.ms-borderColor-sharedBlueMagenta40,.ms-borderColor-sharedBlueMagenta40--hover:hover{border-color:#373277}.ms-borderColor-sharedBlueMagenta30,.ms-borderColor-sharedBlueMagenta30--hover:hover{border-color:#5c2e91}.ms-borderColor-sharedBlueMagenta20,.ms-borderColor-sharedBlueMagenta20--hover:hover{border-color:#8764b8}.ms-borderColor-sharedBlueMagenta10,.ms-borderColor-sharedBlueMagenta10--hover:hover{border-color:#8378de}.ms-borderColor-sharedMagenta20,.ms-borderColor-sharedMagenta20--hover:hover{border-color:#881798}.ms-borderColor-sharedMagenta10,.ms-borderColor-sharedMagenta10--hover:hover{border-color:#c239b3}.ms-borderColor-sharedMagentaPink20,.ms-borderColor-sharedMagentaPink20--hover:hover{border-color:#9b0062}.ms-borderColor-sharedMagentaPink10,.ms-borderColor-sharedMagentaPink10--hover:hover{border-color:#e3008c}.ms-borderColor-sharedGray40,.ms-borderColor-sharedGray40--hover:hover{border-color:#393939}.ms-borderColor-sharedGray30,.ms-borderColor-sharedGray30--hover:hover{border-color:#7a7574}.ms-borderColor-sharedGray20,.ms-borderColor-sharedGray20--hover:hover{border-color:#69797e}.ms-borderColor-sharedGray10,.ms-borderColor-sharedGray10--hover:hover{border-color:#a0aeb2}.ms-fontColor-communicationShade30,.ms-fontColor-communicationShade30--hover:hover{color:#004578}.ms-fontColor-communicationShade20,.ms-fontColor-communicationShade20--hover:hover{color:#005a9e}.ms-fontColor-communicationShade10,.ms-fontColor-communicationShade10--hover:hover{color:#106ebe}.ms-fontColor-communicationPrimary,.ms-fontColor-communicationPrimary--hover:hover{color:#0078d4}.ms-fontColor-communicationTint10,.ms-fontColor-communicationTint10--hover:hover{color:#2b88d8}.ms-fontColor-communicationTint20,.ms-fontColor-communicationTint20--hover:hover{color:#c7e0f4}.ms-fontColor-communicationTint30,.ms-fontColor-communicationTint30--hover:hover{color:#deecf9}.ms-fontColor-communicationTint40,.ms-fontColor-communicationTint40--hover:hover{color:#eff6fc}.ms-fontColor-black,.ms-fontColor-black--hover:hover{color:#000}.ms-fontColor-gray220,.ms-fontColor-gray220--hover:hover{color:#11100f}.ms-fontColor-gray210,.ms-fontColor-gray210--hover:hover{color:#161514}.ms-fontColor-gray200,.ms-fontColor-gray200--hover:hover{color:#1b1a19}.ms-fontColor-gray190,.ms-fontColor-gray190--hover:hover{color:#201f1e}.ms-fontColor-gray180,.ms-fontColor-gray180--hover:hover{color:#252423}.ms-fontColor-gray170,.ms-fontColor-gray170--hover:hover{color:#292827}.ms-fontColor-gray160,.ms-fontColor-gray160--hover:hover{color:#323130}.ms-fontColor-gray150,.ms-fontColor-gray150--hover:hover{color:#3b3a39}.ms-fontColor-gray140,.ms-fontColor-gray140--hover:hover{color:#484644}.ms-fontColor-gray130,.ms-fontColor-gray130--hover:hover{color:#605e5c}.ms-fontColor-gray120,.ms-fontColor-gray120--hover:hover{color:#797775}.ms-fontColor-gray110,.ms-fontColor-gray110--hover:hover{color:#8a8886}.ms-fontColor-gray100,.ms-fontColor-gray100--hover:hover{color:#979593}.ms-fontColor-gray90,.ms-fontColor-gray90--hover:hover{color:#a19f9d}.ms-fontColor-gray80,.ms-fontColor-gray80--hover:hover{color:#b3b0ad}.ms-fontColor-gray70,.ms-fontColor-gray70--hover:hover{color:#bebbb8}.ms-fontColor-gray60,.ms-fontColor-gray60--hover:hover{color:#c8c6c4}.ms-fontColor-gray50,.ms-fontColor-gray50--hover:hover{color:#d2d0ce}.ms-fontColor-gray40,.ms-fontColor-gray40--hover:hover{color:#e1dfdd}.ms-fontColor-gray30,.ms-fontColor-gray30--hover:hover{color:#edebe9}.ms-fontColor-gray20,.ms-fontColor-gray20--hover:hover{color:#f3f2f1}.ms-fontColor-gray10,.ms-fontColor-gray10--hover:hover{color:#faf9f8}.ms-fontColor-white,.ms-fontColor-white--hover:hover{color:#fff}.ms-fontColor-sharedPinkRed10,.ms-fontColor-sharedPinkRed10--hover:hover{color:#750b1c}.ms-fontColor-sharedRed20,.ms-fontColor-sharedRed20--hover:hover{color:#a4262c}.ms-fontColor-sharedRed10,.ms-fontColor-sharedRed10--hover:hover{color:#d13438}.ms-fontColor-sharedRedOrange20,.ms-fontColor-sharedRedOrange20--hover:hover{color:#603d30}.ms-fontColor-sharedRedOrange10,.ms-fontColor-sharedRedOrange10--hover:hover{color:#da3b01}.ms-fontColor-sharedOrange30,.ms-fontColor-sharedOrange30--hover:hover{color:#8e562e}.ms-fontColor-sharedOrange20,.ms-fontColor-sharedOrange20--hover:hover{color:#ca5010}.ms-fontColor-sharedOrange10,.ms-fontColor-sharedOrange10--hover:hover{color:#fa4}.ms-fontColor-sharedYellow10,.ms-fontColor-sharedYellow10--hover:hover{color:#fce100}.ms-fontColor-sharedOrangeYellow20,.ms-fontColor-sharedOrangeYellow20--hover:hover{color:#986f0b}.ms-fontColor-sharedOrangeYellow10,.ms-fontColor-sharedOrangeYellow10--hover:hover{color:#c19c00}.ms-fontColor-sharedYellowGreen10,.ms-fontColor-sharedYellowGreen10--hover:hover{color:#8cbd18}.ms-fontColor-sharedGreen20,.ms-fontColor-sharedGreen20--hover:hover{color:#0b6a0b}.ms-fontColor-sharedGreen10,.ms-fontColor-sharedGreen10--hover:hover{color:#498205}.ms-fontColor-sharedGreenCyan10,.ms-fontColor-sharedGreenCyan10--hover:hover{color:#00ad56}.ms-fontColor-sharedCyan40,.ms-fontColor-sharedCyan40--hover:hover{color:#005e50}.ms-fontColor-sharedCyan30,.ms-fontColor-sharedCyan30--hover:hover{color:#005b70}.ms-fontColor-sharedCyan20,.ms-fontColor-sharedCyan20--hover:hover{color:#038387}.ms-fontColor-sharedCyan10,.ms-fontColor-sharedCyan10--hover:hover{color:#00b7c3}.ms-fontColor-sharedCyanBlue20,.ms-fontColor-sharedCyanBlue20--hover:hover{color:#004e8c}.ms-fontColor-sharedCyanBlue10,.ms-fontColor-sharedCyanBlue10--hover:hover{color:#0078d4}.ms-fontColor-sharedBlue10,.ms-fontColor-sharedBlue10--hover:hover{color:#4f6bed}.ms-fontColor-sharedBlueMagenta40,.ms-fontColor-sharedBlueMagenta40--hover:hover{color:#373277}.ms-fontColor-sharedBlueMagenta30,.ms-fontColor-sharedBlueMagenta30--hover:hover{color:#5c2e91}.ms-fontColor-sharedBlueMagenta20,.ms-fontColor-sharedBlueMagenta20--hover:hover{color:#8764b8}.ms-fontColor-sharedBlueMagenta10,.ms-fontColor-sharedBlueMagenta10--hover:hover{color:#8378de}.ms-fontColor-sharedMagenta20,.ms-fontColor-sharedMagenta20--hover:hover{color:#881798}.ms-fontColor-sharedMagenta10,.ms-fontColor-sharedMagenta10--hover:hover{color:#c239b3}.ms-fontColor-sharedMagentaPink20,.ms-fontColor-sharedMagentaPink20--hover:hover{color:#9b0062}.ms-fontColor-sharedMagentaPink10,.ms-fontColor-sharedMagentaPink10--hover:hover{color:#e3008c}.ms-fontColor-sharedGray40,.ms-fontColor-sharedGray40--hover:hover{color:#393939}.ms-fontColor-sharedGray30,.ms-fontColor-sharedGray30--hover:hover{color:#7a7574}.ms-fontColor-sharedGray20,.ms-fontColor-sharedGray20--hover:hover{color:#69797e}.ms-fontColor-sharedGray10,.ms-fontColor-sharedGray10--hover:hover{color:#a0aeb2}.ms-depth-0{box-shadow:0 0 0 0 transparent}.ms-depth-4{box-shadow:0 1.6px 3.6px #0002,0 .3px .9px #0000001c}.ms-depth-8{box-shadow:0 3.2px 7.2px #0002,0 .6px 1.8px #0000001c}.ms-depth-16{box-shadow:0 6.4px 14.4px #0002,0 1.2px 3.6px #0000001c}.ms-depth-64{box-shadow:0 25.6px 57.6px #00000038,0 4.8px 14.4px #0000002e}.ms-fontSize-68{font-size:68px}.ms-fontSize-42{font-size:42px}.ms-fontSize-32{font-size:32px}.ms-fontSize-28{font-size:28px}.ms-fontSize-24{font-size:24px}.ms-fontSize-20{font-size:20px}.ms-fontSize-18{font-size:18px}.ms-fontSize-16{font-size:16px}.ms-fontSize-14{font-size:14px}.ms-fontSize-12{font-size:12px}.ms-fontSize-10{font-size:10px}.ms-fontWeight-regular{font-weight:400}.ms-fontWeight-semibold{font-weight:600}.ms-fontWeight-bold{font-weight:700}.ms-font-su{font-size:42px;font-weight:100}.ms-font-xxl{font-size:28px;font-weight:100}.ms-font-xl-plus{font-size:24px;font-weight:100}.ms-font-xl{font-size:21px;font-weight:100}.ms-font-l{font-size:17px;font-weight:300}.ms-font-m-plus{font-size:15px;font-weight:400}.ms-font-m{font-size:14px;font-weight:400}.ms-font-s-plus{font-size:13px;font-weight:400}.ms-font-s{font-size:12px;font-weight:400}.ms-font-xs{font-size:11px;font-weight:400}.ms-font-mi{font-size:10px;font-weight:600}.ms-fontWeight-light{font-weight:100}.ms-fontWeight-semilight{font-weight:300}.ms-fontSize-su{font-size:42px}.ms-fontSize-xxl{font-size:28px}.ms-fontSize-xlPlus{font-size:24px}.ms-fontSize-xl{font-size:21px}.ms-fontSize-l{font-size:17px}.ms-fontSize-mPlus{font-size:15px}.ms-fontSize-m{font-size:14px}.ms-fontSize-sPlus{font-size:13px}.ms-fontSize-s{font-size:12px}.ms-fontSize-xs{font-size:11px}.ms-fontSize-mi{font-size:10px}@font-face{font-family:Leelawadee UI Web;src:url(https://static2.sharepointonline.com/files/fabric/assets/fonts/leelawadeeui-thai/leelawadeeui-semilight.woff2) format("woff2"),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/leelawadeeui-thai/leelawadeeui-semilight.woff) format("woff");font-weight:300;font-style:normal}@font-face{font-family:Leelawadee UI Web;src:url(https://static2.sharepointonline.com/files/fabric/assets/fonts/leelawadeeui-thai/leelawadeeui-regular.woff2) format("woff2"),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/leelawadeeui-thai/leelawadeeui-regular.woff) format("woff");font-weight:400;font-style:normal}@font-face{font-family:Leelawadee UI Web;src:url(https://static2.sharepointonline.com/files/fabric/assets/fonts/leelawadeeui-thai/leelawadeeui-bold.woff2) format("woff2"),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/leelawadeeui-thai/leelawadeeui-bold.woff) format("woff");font-weight:700;font-style:normal}@font-face{font-family:"Segoe UI Web (Arabic)";src:url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-arabic/segoeui-light.woff2) format("woff2"),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-arabic/segoeui-light.woff) format("woff");font-weight:100;font-style:normal}@font-face{font-family:"Segoe UI Web (Arabic)";src:url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-arabic/segoeui-semilight.woff2) format("woff2"),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-arabic/segoeui-semilight.woff) format("woff");font-weight:300;font-style:normal}@font-face{font-family:"Segoe UI Web (Arabic)";src:url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-arabic/segoeui-regular.woff2) format("woff2"),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-arabic/segoeui-regular.woff) format("woff");font-weight:400;font-style:normal}@font-face{font-family:"Segoe UI Web (Arabic)";src:url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-arabic/segoeui-semibold.woff2) format("woff2"),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-arabic/segoeui-semibold.woff) format("woff");font-weight:600;font-style:normal}@font-face{font-family:"Segoe UI Web (Arabic)";src:url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-arabic/segoeui-bold.woff2) format("woff2"),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-arabic/segoeui-bold.woff) format("woff");font-weight:700;font-style:normal}@font-face{font-family:"Segoe UI Web (Cyrillic)";src:url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-cyrillic/segoeui-light.woff2) format("woff2"),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-cyrillic/segoeui-light.woff) format("woff");font-weight:100;font-style:normal}@font-face{font-family:"Segoe UI Web (Cyrillic)";src:url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-cyrillic/segoeui-semilight.woff2) format("woff2"),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-cyrillic/segoeui-semilight.woff) format("woff");font-weight:300;font-style:normal}@font-face{font-family:"Segoe UI Web (Cyrillic)";src:url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-cyrillic/segoeui-regular.woff2) format("woff2"),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-cyrillic/segoeui-regular.woff) format("woff");font-weight:400;font-style:normal}@font-face{font-family:"Segoe UI Web (Cyrillic)";src:url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-cyrillic/segoeui-semibold.woff2) format("woff2"),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-cyrillic/segoeui-semibold.woff) format("woff");font-weight:600;font-style:normal}@font-face{font-family:"Segoe UI Web (Cyrillic)";src:url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-cyrillic/segoeui-bold.woff2) format("woff2"),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-cyrillic/segoeui-bold.woff) format("woff");font-weight:700;font-style:normal}@font-face{font-family:"Segoe UI Web (East European)";src:url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-easteuropean/segoeui-light.woff2) format("woff2"),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-easteuropean/segoeui-light.woff) format("woff");font-weight:100;font-style:normal}@font-face{font-family:"Segoe UI Web (East European)";src:url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-easteuropean/segoeui-semilight.woff2) format("woff2"),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-easteuropean/segoeui-semilight.woff) format("woff");font-weight:300;font-style:normal}@font-face{font-family:"Segoe UI Web (East European)";src:url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-easteuropean/segoeui-regular.woff2) format("woff2"),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-easteuropean/segoeui-regular.woff) format("woff");font-weight:400;font-style:normal}@font-face{font-family:"Segoe UI Web (East European)";src:url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-easteuropean/segoeui-semibold.woff2) format("woff2"),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-easteuropean/segoeui-semibold.woff) format("woff");font-weight:600;font-style:normal}@font-face{font-family:"Segoe UI Web (East European)";src:url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-easteuropean/segoeui-bold.woff2) format("woff2"),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-easteuropean/segoeui-bold.woff) format("woff");font-weight:700;font-style:normal}@font-face{font-family:"Segoe UI Web (Greek)";src:url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-greek/segoeui-light.woff2) format("woff2"),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-greek/segoeui-light.woff) format("woff");font-weight:100;font-style:normal}@font-face{font-family:"Segoe UI Web (Greek)";src:url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-greek/segoeui-semilight.woff2) format("woff2"),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-greek/segoeui-semilight.woff) format("woff");font-weight:300;font-style:normal}@font-face{font-family:"Segoe UI Web (Greek)";src:url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-greek/segoeui-regular.woff2) format("woff2"),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-greek/segoeui-regular.woff) format("woff");font-weight:400;font-style:normal}@font-face{font-family:"Segoe UI Web (Greek)";src:url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-greek/segoeui-semibold.woff2) format("woff2"),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-greek/segoeui-semibold.woff) format("woff");font-weight:600;font-style:normal}@font-face{font-family:"Segoe UI Web (Greek)";src:url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-greek/segoeui-bold.woff2) format("woff2"),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-greek/segoeui-bold.woff) format("woff");font-weight:700;font-style:normal}@font-face{font-family:"Segoe UI Web (Hebrew)";src:url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-hebrew/segoeui-light.woff2) format("woff2"),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-hebrew/segoeui-light.woff) format("woff");font-weight:100;font-style:normal}@font-face{font-family:"Segoe UI Web (Hebrew)";src:url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-hebrew/segoeui-semilight.woff2) format("woff2"),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-hebrew/segoeui-semilight.woff) format("woff");font-weight:300;font-style:normal}@font-face{font-family:"Segoe UI Web (Hebrew)";src:url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-hebrew/segoeui-regular.woff2) format("woff2"),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-hebrew/segoeui-regular.woff) format("woff");font-weight:400;font-style:normal}@font-face{font-family:"Segoe UI Web (Hebrew)";src:url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-hebrew/segoeui-semibold.woff2) format("woff2"),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-hebrew/segoeui-semibold.woff) format("woff");font-weight:600;font-style:normal}@font-face{font-family:"Segoe UI Web (Hebrew)";src:url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-hebrew/segoeui-bold.woff2) format("woff2"),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-hebrew/segoeui-bold.woff) format("woff");font-weight:700;font-style:normal}@font-face{font-family:"Segoe UI Web (Vietnamese)";src:url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-vietnamese/segoeui-light.woff2) format("woff2"),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-vietnamese/segoeui-light.woff) format("woff");font-weight:100;font-style:normal}@font-face{font-family:"Segoe UI Web (Vietnamese)";src:url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-vietnamese/segoeui-semilight.woff2) format("woff2"),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-vietnamese/segoeui-semilight.woff) format("woff");font-weight:300;font-style:normal}@font-face{font-family:"Segoe UI Web (Vietnamese)";src:url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-vietnamese/segoeui-regular.woff2) format("woff2"),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-vietnamese/segoeui-regular.woff) format("woff");font-weight:400;font-style:normal}@font-face{font-family:"Segoe UI Web (Vietnamese)";src:url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-vietnamese/segoeui-semibold.woff2) format("woff2"),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-vietnamese/segoeui-semibold.woff) format("woff");font-weight:600;font-style:normal}@font-face{font-family:"Segoe UI Web (Vietnamese)";src:url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-vietnamese/segoeui-bold.woff2) format("woff2"),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-vietnamese/segoeui-bold.woff) format("woff");font-weight:700;font-style:normal}@font-face{font-family:"Segoe UI Web (West European)";src:url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-light.woff2) format("woff2"),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-light.woff) format("woff");font-weight:100;font-style:normal}@font-face{font-family:"Segoe UI Web (West European)";src:url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-semilight.woff2) format("woff2"),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-semilight.woff) format("woff");font-weight:300;font-style:normal}@font-face{font-family:"Segoe UI Web (West European)";src:url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-regular.woff2) format("woff2"),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-regular.woff) format("woff");font-weight:400;font-style:normal}@font-face{font-family:"Segoe UI Web (West European)";src:url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-semibold.woff2) format("woff2"),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-semibold.woff) format("woff");font-weight:600;font-style:normal}@font-face{font-family:"Segoe UI Web (West European)";src:url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-bold.woff2) format("woff2"),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-bold.woff) format("woff");font-weight:700;font-style:normal}@font-face{font-family:Selawik Web;src:url(https://static2.sharepointonline.com/files/fabric/assets/fonts/selawik/selawik-light.woff2) format("woff2"),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/selawik/selawik-light.woff) format("woff");font-weight:100;font-style:normal}@font-face{font-family:Selawik Web;src:url(https://static2.sharepointonline.com/files/fabric/assets/fonts/selawik/selawik-semilight.woff2) format("woff2"),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/selawik/selawik-semilight.woff) format("woff");font-weight:300;font-style:normal}@font-face{font-family:Selawik Web;src:url(https://static2.sharepointonline.com/files/fabric/assets/fonts/selawik/selawik-regular.woff2) format("woff2"),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/selawik/selawik-regular.woff) format("woff");font-weight:400;font-style:normal}@font-face{font-family:Selawik Web;src:url(https://static2.sharepointonline.com/files/fabric/assets/fonts/selawik/selawik-semibold.woff2) format("woff2"),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/selawik/selawik-semibold.woff) format("woff");font-weight:600;font-style:normal}@font-face{font-family:Selawik Web;src:url(https://static2.sharepointonline.com/files/fabric/assets/fonts/selawik/selawik-bold.woff2) format("woff2"),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/selawik/selawik-bold.woff) format("woff");font-weight:700;font-style:normal}@font-face{font-family:Leelawadee UI Web;src:url(https://static2.sharepointonline.com/files/fabric/assets/fonts/leelawadeeui-thai/leelawadeeui-semilight.woff2) format("woff2"),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/leelawadeeui-thai/leelawadeeui-semilight.woff) format("woff");font-weight:100;font-style:normal}@font-face{font-family:Leelawadee UI Web;src:url(https://static2.sharepointonline.com/files/fabric/assets/fonts/leelawadeeui-thai/leelawadeeui-bold.woff2) format("woff2"),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/leelawadeeui-thai/leelawadeeui-bold.woff) format("woff");font-weight:600;font-style:normal}.ms-Grid{box-sizing:border-box;zoom:1;padding:0 8px}.ms-Grid:after,.ms-Grid:before{display:table;content:"";line-height:0}.ms-Grid:after{clear:both}.ms-Grid-row{margin:0 -8px;box-sizing:border-box;zoom:1}.ms-Grid-row:after,.ms-Grid-row:before{display:table;content:"";line-height:0}.ms-Grid-row:after{clear:both}.ms-Grid-col{position:relative;min-height:1px;padding-left:8px;padding-right:8px;box-sizing:border-box}[dir=ltr] .ms-Grid-col{float:left}[dir=rtl] .ms-Grid-col{float:right}.ms-Grid-col .ms-Grid{padding:0}.ms-Icon{display:inline-block;font-family:FluentIcons,FabricMDL2Icons;font-style:normal;font-weight:400;speak:none}.ms-Icon--circle{margin:0 .5em 0 0;position:relative;display:inline-block;font-size:1rem;width:1em;height:1em;padding:0;text-align:left}[dir=rtl] .ms-Icon--circle{margin:0 0 0 .5em}.ms-Icon--circle:after,.ms-Icon--circle:before{line-height:1;font-size:inherit}.ms-Icon--circle:before{display:block;width:100%;height:100%;margin:0;padding:0;position:absolute}.ms-Icon--circle:after{content:"\e000";position:absolute;top:0;left:0;transform:scale(2);transform-origin:50% 50%;z-index:0}.ms-Icon--xs{font-size:10px}.ms-Icon--s{font-size:12px}.ms-Icon--m{font-size:16px}.ms-Icon--l{font-size:20px}.ms-Icon--12PointStar:before{content:"\f505"}.ms-Icon--6PointStar:before{content:"\f504"}.ms-Icon--AADLogo:before{content:"\ed68"}.ms-Icon--Accept:before{content:"\e8fb"}.ms-Icon--AccessibiltyChecker:before{content:"\f835"}.ms-Icon--AccessLogo:before{content:"\ed69"}.ms-Icon--AccessLogoFill:before{content:"\f1db"}.ms-Icon--AccountActivity:before{content:"\eff4"}.ms-Icon--AccountBrowser:before{content:"\f652"}.ms-Icon--AccountManagement:before{content:"\f55c"}.ms-Icon--Accounts:before{content:"\e910"}.ms-Icon--ActionCenter:before{content:"\e91c"}.ms-Icon--ActivateOrders:before{content:"\efe0"}.ms-Icon--ActivityFeed:before{content:"\f056"}.ms-Icon--Add:before{content:"\e710"}.ms-Icon--AddBookmark:before{content:"\f5b7"}.ms-Icon--AddEvent:before{content:"\eeb5"}.ms-Icon--AddFavorite:before{content:"\f0c8"}.ms-Icon--AddFavoriteFill:before{content:"\f0c9"}.ms-Icon--AddFriend:before{content:"\e8fa"}.ms-Icon--AddGroup:before{content:"\ee3d"}.ms-Icon--AddHome:before{content:"\f17b"}.ms-Icon--AddIn:before{content:"\f775"}.ms-Icon--AddLink:before{content:"\e35e"}.ms-Icon--AddNotes:before{content:"\eae3"}.ms-Icon--AddOnlineMeeting:before{content:"\ed8e"}.ms-Icon--AddPhone:before{content:"\ed96"}.ms-Icon--AddReaction:before{content:"\f85d"}.ms-Icon--AddTo:before{content:"\ecc8"}.ms-Icon--AddToShoppingList:before{content:"\ea9a"}.ms-Icon--AddWork:before{content:"\f17c"}.ms-Icon--Admin:before{content:"\e7ef"}.ms-Icon--AdminALogo32:before{content:"\f4ba"}.ms-Icon--AdminALogoFill32:before{content:"\f4bb"}.ms-Icon--AdminALogoInverse32:before{content:"\ed6a"}.ms-Icon--AdminCLogoInverse32:before{content:"\ed6b"}.ms-Icon--AdminDLogoInverse32:before{content:"\ed6c"}.ms-Icon--AdminELogoInverse32:before{content:"\ed6d"}.ms-Icon--AdminLLogoInverse32:before{content:"\ed6e"}.ms-Icon--AdminMLogoInverse32:before{content:"\ed6f"}.ms-Icon--AdminOLogoInverse32:before{content:"\ed70"}.ms-Icon--AdminPLogoInverse32:before{content:"\ed71"}.ms-Icon--AdminSLogoInverse32:before{content:"\ed72"}.ms-Icon--AdminYLogoInverse32:before{content:"\ed73"}.ms-Icon--Airplane:before{content:"\e709"}.ms-Icon--AirplaneSolid:before{content:"\eb4c"}.ms-Icon--AirTickets:before{content:"\ef7a"}.ms-Icon--AlarmClock:before{content:"\e919"}.ms-Icon--Album:before{content:"\e7ab"}.ms-Icon--AlbumRemove:before{content:"\ec62"}.ms-Icon--AlertSettings:before{content:"\f8b6"}.ms-Icon--AlertSolid:before{content:"\f331"}.ms-Icon--AlignCenter:before{content:"\e8e3"}.ms-Icon--AlignHorizontalCenter:before{content:"\f4f4"}.ms-Icon--AlignHorizontalLeft:before{content:"\f4f3"}.ms-Icon--AlignHorizontalRight:before{content:"\f4f5"}.ms-Icon--AlignJustify:before{content:"\f51e"}.ms-Icon--AlignLeft:before{content:"\e8e4"}.ms-Icon--AlignRight:before{content:"\e8e2"}.ms-Icon--AlignVerticalBottom:before{content:"\f4f8"}.ms-Icon--AlignVerticalCenter:before{content:"\f4f7"}.ms-Icon--AlignVerticalTop:before{content:"\f4f6"}[dir=ltr] .ms-Icon--AllApps:before{content:"\e71d"}[dir=rtl] .ms-Icon--AllApps:before{content:"\ea40"}[dir=ltr] .ms-Icon--AllAppsMirrored:before{content:"\ea40"}[dir=rtl] .ms-Icon--AllAppsMirrored:before{content:"\e71d"}.ms-Icon--AllCurrency:before{content:"\eae4"}.ms-Icon--AnalyticsLogo:before{content:"\f1de"}.ms-Icon--AnalyticsQuery:before{content:"\f1df"}.ms-Icon--AnalyticsReport:before{content:"\f1e1"}.ms-Icon--AnalyticsView:before{content:"\f5f1"}.ms-Icon--AnchorLock:before{content:"\f511"}.ms-Icon--Annotation:before{content:"\e924"}.ms-Icon--AppIconDefault:before{content:"\ecaa"}.ms-Icon--AppIconDefaultAdd:before{content:"\efda"}.ms-Icon--AppIconDefaultList:before{content:"\efde"}.ms-Icon--Archive:before{content:"\f03f"}.ms-Icon--AreaChart:before{content:"\e9d2"}.ms-Icon--ArrangeBringForward:before{content:"\f509"}.ms-Icon--ArrangeBringToFront:before{content:"\f506"}.ms-Icon--ArrangeByFrom:before{content:"\f678"}.ms-Icon--ArrangeSendBackward:before{content:"\f508"}.ms-Icon--ArrangeSendToBack:before{content:"\f507"}.ms-Icon--Arrivals:before{content:"\eb34"}[dir=ltr] .ms-Icon--ArrowDownRight8:before{content:"\eed5"}[dir=rtl] .ms-Icon--ArrowDownRight8:before{content:"\eef0"}[dir=ltr] .ms-Icon--ArrowDownRightMirrored8:before{content:"\eef0"}[dir=rtl] .ms-Icon--ArrowDownRightMirrored8:before{content:"\eed5"}.ms-Icon--ArrowTallDownLeft:before{content:"\f2bf"}.ms-Icon--ArrowTallDownRight:before{content:"\f2c0"}.ms-Icon--ArrowTallUpLeft:before{content:"\f2bd"}.ms-Icon--ArrowTallUpRight:before{content:"\f2be"}.ms-Icon--ArrowUpRight:before{content:"\f069"}[dir=ltr] .ms-Icon--ArrowUpRight8:before{content:"\eed4"}[dir=rtl] .ms-Icon--ArrowUpRight8:before{content:"\eeef"}[dir=ltr] .ms-Icon--ArrowUpRightMirrored8:before{content:"\eeef"}[dir=rtl] .ms-Icon--ArrowUpRightMirrored8:before{content:"\eed4"}.ms-Icon--Articles:before{content:"\eac1"}.ms-Icon--Ascending:before{content:"\edc0"}.ms-Icon--AspectRatio:before{content:"\e799"}.ms-Icon--AssessmentGroup:before{content:"\f31a"}.ms-Icon--AssessmentGroupTemplate:before{content:"\f2b1"}.ms-Icon--AssetLibrary:before{content:"\eeb6"}.ms-Icon--Assign:before{content:"\e9d3"}.ms-Icon--Asterisk:before{content:"\ea38"}.ms-Icon--AsteriskSolid:before{content:"\f34d"}.ms-Icon--ATPLogo:before{content:"\ef85"}.ms-Icon--Attach:before{content:"\e723"}.ms-Icon--AustralianRules:before{content:"\ee70"}.ms-Icon--AuthenticatorApp:before{content:"\f6b1"}.ms-Icon--AutoEnhanceOff:before{content:"\e78e"}.ms-Icon--AutoEnhanceOn:before{content:"\e78d"}.ms-Icon--AutoFillTemplate:before{content:"\f313"}.ms-Icon--AutoHeight:before{content:"\f512"}.ms-Icon--AutoRacing:before{content:"\eb24"}.ms-Icon--AwayStatus:before{content:"\ee6a"}.ms-Icon--AzureAPIManagement:before{content:"\f37f"}.ms-Icon--AzureKeyVault:before{content:"\f3b4"}.ms-Icon--AzureLogo:before{content:"\eb6a"}.ms-Icon--AzureServiceEndpoint:before{content:"\f380"}.ms-Icon--Back:before{content:"\e72b"}.ms-Icon--BackgroundColor:before{content:"\f42b"}.ms-Icon--Backlog:before{content:"\f2ac"}.ms-Icon--BacklogBoard:before{content:"\f444"}.ms-Icon--BacklogList:before{content:"\f6bf"}.ms-Icon--BackToWindow:before{content:"\e73f"}.ms-Icon--Badge:before{content:"\ec1b"}.ms-Icon--Balloons:before{content:"\ed7e"}.ms-Icon--Bank:before{content:"\e825"}.ms-Icon--BankSolid:before{content:"\f34f"}.ms-Icon--BarChart4:before{content:"\eae7"}.ms-Icon--BarChartHorizontal:before{content:"\e9eb"}.ms-Icon--BarChartVertical:before{content:"\e9ec"}.ms-Icon--BarChartVerticalEdit:before{content:"\f89d"}.ms-Icon--BarChartVerticalFill:before{content:"\f830"}.ms-Icon--BarChartVerticalFilter:before{content:"\f77e"}.ms-Icon--BarChartVerticalFilterSolid:before{content:"\f77f"}.ms-Icon--Baseball:before{content:"\eb20"}.ms-Icon--BeerMug:before{content:"\f49e"}.ms-Icon--BIDashboard:before{content:"\f543"}.ms-Icon--BidiLtr:before{content:"\e9aa"}.ms-Icon--BidiRtl:before{content:"\e9ab"}.ms-Icon--BingLogo:before{content:"\eb6b"}.ms-Icon--BirthdayCake:before{content:"\ef8d"}.ms-Icon--BlockContact:before{content:"\e8f8"}.ms-Icon--Blocked:before{content:"\e733"}.ms-Icon--Blocked12:before{content:"\f62e"}.ms-Icon--Blocked2:before{content:"\ece4"}.ms-Icon--Blocked2Solid:before{content:"\f737"}.ms-Icon--BlockedSite:before{content:"\e72f"}.ms-Icon--BlockedSiteSolid12:before{content:"\f70a"}.ms-Icon--BlockedSolid:before{content:"\f531"}.ms-Icon--Blog:before{content:"\f22b"}.ms-Icon--BlowingSnow:before{content:"\e9c9"}.ms-Icon--Blur:before{content:"\f28e"}.ms-Icon--Boards:before{content:"\ef68"}.ms-Icon--Bold:before{content:"\e8dd"}.ms-Icon--BookAnswers:before{content:"\f8a4"}.ms-Icon--BookingsLogo:before{content:"\edc7"}.ms-Icon--BookmarkReport:before{content:"\f76b"}[dir=ltr] .ms-Icon--Bookmarks:before{content:"\e8a4"}[dir=rtl] .ms-Icon--Bookmarks:before{content:"\ea41"}[dir=ltr] .ms-Icon--BookmarksMirrored:before{content:"\ea41"}[dir=rtl] .ms-Icon--BookmarksMirrored:before{content:"\e8a4"}.ms-Icon--BorderDash:before{content:"\f50a"}.ms-Icon--BorderDot:before{content:"\f50b"}.ms-Icon--BoxAdditionSolid:before{content:"\f2d4"}.ms-Icon--BoxCheckmarkSolid:before{content:"\f2d7"}.ms-Icon--BoxMultiplySolid:before{content:"\f2d5"}.ms-Icon--BoxPlaySolid:before{content:"\f2d6"}.ms-Icon--BoxSubtractSolid:before{content:"\f2d3"}.ms-Icon--BranchCommit:before{content:"\f293"}.ms-Icon--BranchCompare:before{content:"\f294"}.ms-Icon--BranchFork:before{content:"\f173"}.ms-Icon--BranchFork2:before{content:"\f291"}.ms-Icon--BranchLocked:before{content:"\f292"}.ms-Icon--BranchMerge:before{content:"\f295"}.ms-Icon--BranchPullRequest:before{content:"\f296"}.ms-Icon--BranchSearch:before{content:"\f297"}.ms-Icon--BranchShelveset:before{content:"\f298"}.ms-Icon--Breadcrumb:before{content:"\ef8c"}.ms-Icon--Breakfast:before{content:"\f49c"}.ms-Icon--Brightness:before{content:"\e706"}.ms-Icon--Broom:before{content:"\ea99"}.ms-Icon--BrowserScreenShot:before{content:"\ebed"}.ms-Icon--BrowserTab:before{content:"\f5d7"}.ms-Icon--BrowserTabScreenshot:before{content:"\f5d8"}.ms-Icon--Brunch:before{content:"\f49d"}.ms-Icon--Brush:before{content:"\ecff"}.ms-Icon--BucketColor:before{content:"\f1b6"}.ms-Icon--BucketColorFill:before{content:"\f1b7"}.ms-Icon--BufferTimeAfter:before{content:"\f0d0"}.ms-Icon--BufferTimeBefore:before{content:"\f0cf"}.ms-Icon--BufferTimeBoth:before{content:"\f0d1"}.ms-Icon--Bug:before{content:"\ebe8"}.ms-Icon--BugSolid:before{content:"\f335"}.ms-Icon--Build:before{content:"\f28f"}.ms-Icon--BuildDefinition:before{content:"\f6e9"}.ms-Icon--BuildIssue:before{content:"\f319"}.ms-Icon--BuildQueue:before{content:"\f24f"}.ms-Icon--BuildQueueNew:before{content:"\f250"}.ms-Icon--BulkUpload:before{content:"\f548"}[dir=ltr] .ms-Icon--BulletedList2:before{content:"\f2c7"}[dir=rtl] .ms-Icon--BulletedList2:before{content:"\f2c8"}[dir=ltr] .ms-Icon--BulletedList2Mirrored:before{content:"\f2c8"}[dir=rtl] .ms-Icon--BulletedList2Mirrored:before{content:"\f2c7"}[dir=ltr] .ms-Icon--BulletedListBullet:before{content:"\f793"}[dir=rtl] .ms-Icon--BulletedListBullet:before{content:"\f795"}[dir=ltr] .ms-Icon--BulletedListBulletMirrored:before{content:"\f795"}[dir=rtl] .ms-Icon--BulletedListBulletMirrored:before{content:"\f793"}[dir=ltr] .ms-Icon--BulletedList:before{content:"\e8fd"}[dir=rtl] .ms-Icon--BulletedList:before{content:"\ea42"}[dir=ltr] .ms-Icon--BulletedListMirrored:before{content:"\ea42"}[dir=rtl] .ms-Icon--BulletedListMirrored:before{content:"\e8fd"}[dir=ltr] .ms-Icon--BulletedListText:before{content:"\f792"}[dir=rtl] .ms-Icon--BulletedListText:before{content:"\f794"}[dir=ltr] .ms-Icon--BulletedListTextMirrored:before{content:"\f794"}[dir=rtl] .ms-Icon--BulletedListTextMirrored:before{content:"\f792"}.ms-Icon--BulletedTreeList:before{content:"\f84c"}.ms-Icon--Bullseye:before{content:"\f272"}.ms-Icon--BullseyeTarget:before{content:"\f5f0"}.ms-Icon--BullseyeTargetEdit:before{content:"\e319"}.ms-Icon--Bus:before{content:"\e806"}.ms-Icon--BusinessCenterLogo:before{content:"\f4b2"}.ms-Icon--BusinessHoursSign:before{content:"\f310"}.ms-Icon--BusSolid:before{content:"\eb47"}.ms-Icon--ButtonControl:before{content:"\f6c0"}.ms-Icon--Cafe:before{content:"\ec32"}.ms-Icon--Cake:before{content:"\eca4"}.ms-Icon--Calculator:before{content:"\e8ef"}.ms-Icon--CalculatorAddition:before{content:"\e948"}.ms-Icon--CalculatorEqualTo:before{content:"\e94e"}.ms-Icon--CalculatorMultiply:before{content:"\e947"}.ms-Icon--CalculatorNotEqualTo:before{content:"\f2d2"}.ms-Icon--CalculatorPercentage:before{content:"\e94c"}.ms-Icon--CalculatorSubtract:before{content:"\e949"}.ms-Icon--CalendarAgenda:before{content:"\ee9a"}.ms-Icon--CalendarDay:before{content:"\e8bf"}[dir=ltr] .ms-Icon--Calendar:before{content:"\e787"}[dir=rtl] .ms-Icon--Calendar:before{content:"\ed28"}[dir=ltr] .ms-Icon--CalendarMirrored:before{content:"\ed28"}[dir=rtl] .ms-Icon--CalendarMirrored:before{content:"\e787"}.ms-Icon--CalendarReply:before{content:"\e8f5"}[dir=ltr] .ms-Icon--CalendarSettings:before{content:"\f558"}[dir=rtl] .ms-Icon--CalendarSettings:before{content:"\f559"}[dir=ltr] .ms-Icon--CalendarSettingsMirrored:before{content:"\f559"}[dir=rtl] .ms-Icon--CalendarSettingsMirrored:before{content:"\f558"}.ms-Icon--CalendarWeek:before{content:"\e8c0"}.ms-Icon--CalendarWorkWeek:before{content:"\ef51"}.ms-Icon--CalendarYear:before{content:"\e371"}.ms-Icon--Calories:before{content:"\ecad"}.ms-Icon--CaloriesAdd:before{content:"\f172"}.ms-Icon--Camera:before{content:"\e722"}.ms-Icon--CampaignTemplate:before{content:"\f811"}.ms-Icon--Cancel:before{content:"\e711"}.ms-Icon--CannedChat:before{content:"\f0f2"}.ms-Icon--Car:before{content:"\e804"}.ms-Icon--CaretBottomLeftCenter8:before{content:"\f365"}.ms-Icon--CaretBottomLeftSolid8:before{content:"\f121"}.ms-Icon--CaretBottomRightCenter8:before{content:"\f364"}.ms-Icon--CaretBottomRightSolid8:before{content:"\f122"}.ms-Icon--CaretDown8:before{content:"\edd8"}.ms-Icon--CaretDownSolid8:before{content:"\eddc"}[dir=ltr] .ms-Icon--CaretHollow:before{content:"\e817"}[dir=rtl] .ms-Icon--CaretHollow:before{content:"\ea45"}[dir=ltr] .ms-Icon--CaretHollowMirrored:before{content:"\ea45"}[dir=rtl] .ms-Icon--CaretHollowMirrored:before{content:"\e817"}.ms-Icon--CaretLeft8:before{content:"\edd5"}.ms-Icon--CaretLeftSolid8:before{content:"\edd9"}.ms-Icon--CaretRight:before{content:"\f06b"}.ms-Icon--CaretRight8:before{content:"\edd6"}.ms-Icon--CaretRightSolid8:before{content:"\edda"}.ms-Icon--CaretSolid16:before{content:"\ee62"}.ms-Icon--CaretSolidDown:before{content:"\f08e"}.ms-Icon--CaretSolidLeft:before{content:"\f08d"}[dir=ltr] .ms-Icon--CaretSolid:before{content:"\e818"}[dir=rtl] .ms-Icon--CaretSolid:before{content:"\ea46"}[dir=ltr] .ms-Icon--CaretSolidMirrored:before{content:"\ea46"}[dir=rtl] .ms-Icon--CaretSolidMirrored:before{content:"\e818"}.ms-Icon--CaretSolidRight:before{content:"\f08f"}.ms-Icon--CaretSolidUp:before{content:"\f090"}.ms-Icon--CaretTopLeftCenter8:before{content:"\f367"}.ms-Icon--CaretTopLeftSolid8:before{content:"\ef54"}.ms-Icon--CaretTopRightCenter8:before{content:"\f366"}.ms-Icon--CaretTopRightSolid8:before{content:"\ef55"}.ms-Icon--CaretUp8:before{content:"\edd7"}.ms-Icon--CaretUpSolid8:before{content:"\eddb"}.ms-Icon--Cat:before{content:"\ed7f"}.ms-Icon--CellPhone:before{content:"\e8ea"}.ms-Icon--Certificate:before{content:"\eb95"}.ms-Icon--CertifiedDatabase:before{content:"\f5bb"}.ms-Icon--ChangeEntitlements:before{content:"\e310"}.ms-Icon--Chart:before{content:"\e999"}.ms-Icon--ChartSeries:before{content:"\f513"}.ms-Icon--ChartTemplate:before{content:"\f812"}.ms-Icon--ChartXAngle:before{content:"\f514"}.ms-Icon--ChartYAngle:before{content:"\f515"}.ms-Icon--Chat:before{content:"\e901"}.ms-Icon--ChatBot:before{content:"\f08b"}.ms-Icon--ChatInviteFriend:before{content:"\ecfe"}.ms-Icon--ChatSolid:before{content:"\f344"}.ms-Icon--Checkbox:before{content:"\e739"}.ms-Icon--CheckboxComposite:before{content:"\e73a"}.ms-Icon--CheckboxCompositeReversed:before{content:"\e73d"}.ms-Icon--CheckboxFill:before{content:"\e73b"}.ms-Icon--CheckboxIndeterminate:before{content:"\e73c"}.ms-Icon--CheckedOutByOther12:before{content:"\f630"}.ms-Icon--CheckedOutByYou12:before{content:"\f631"}.ms-Icon--CheckList:before{content:"\e9d5"}[dir=ltr] .ms-Icon--CheckListCheck:before{content:"\f7a9"}[dir=rtl] .ms-Icon--CheckListCheck:before{content:"\f7ab"}[dir=ltr] .ms-Icon--CheckListCheckMirrored:before{content:"\f7ab"}[dir=rtl] .ms-Icon--CheckListCheckMirrored:before{content:"\f7a9"}[dir=ltr] .ms-Icon--CheckListText:before{content:"\f7a8"}[dir=rtl] .ms-Icon--CheckListText:before{content:"\f7aa"}[dir=ltr] .ms-Icon--CheckListTextMirrored:before{content:"\f7aa"}[dir=rtl] .ms-Icon--CheckListTextMirrored:before{content:"\f7a8"}.ms-Icon--CheckMark:before{content:"\e73e"}.ms-Icon--ChevronDown:before{content:"\e70d"}.ms-Icon--ChevronDownEnd6:before{content:"\f36f"}.ms-Icon--ChevronDownMed:before{content:"\e972"}.ms-Icon--ChevronDownSmall:before{content:"\e96e"}.ms-Icon--ChevronFold10:before{content:"\f36a"}.ms-Icon--ChevronLeft:before{content:"\e76b"}.ms-Icon--ChevronLeftEnd6:before{content:"\f371"}.ms-Icon--ChevronLeftMed:before{content:"\e973"}.ms-Icon--ChevronLeftSmall:before{content:"\e96f"}.ms-Icon--ChevronRight:before{content:"\e76c"}.ms-Icon--ChevronRightEnd6:before{content:"\f372"}.ms-Icon--ChevronRightMed:before{content:"\e974"}.ms-Icon--ChevronRightSmall:before{content:"\e970"}.ms-Icon--ChevronUnfold10:before{content:"\f369"}.ms-Icon--ChevronUp:before{content:"\e70e"}.ms-Icon--ChevronUpEnd6:before{content:"\f370"}.ms-Icon--ChevronUpMed:before{content:"\e971"}.ms-Icon--ChevronUpSmall:before{content:"\e96d"}.ms-Icon--Childof:before{content:"\f82d"}.ms-Icon--Chopsticks:before{content:"\f4a2"}[dir=ltr] .ms-Icon--ChromeBack:before{content:"\e830"}[dir=rtl] .ms-Icon--ChromeBack:before{content:"\ea47"}[dir=ltr] .ms-Icon--ChromeBackMirrored:before{content:"\ea47"}[dir=rtl] .ms-Icon--ChromeBackMirrored:before{content:"\e830"}.ms-Icon--ChromeClose:before{content:"\e8bb"}.ms-Icon--ChromeFullScreen:before{content:"\e92d"}.ms-Icon--ChromeMinimize:before{content:"\e921"}.ms-Icon--ChromeRestore:before{content:"\e923"}.ms-Icon--CircleAddition:before{content:"\f2e3"}.ms-Icon--CircleAdditionSolid:before{content:"\f2e4"}.ms-Icon--CircleFill:before{content:"\ea3b"}.ms-Icon--CircleHalfFull:before{content:"\ed9e"}.ms-Icon--CirclePause:before{content:"\f2d9"}.ms-Icon--CirclePauseSolid:before{content:"\f2d8"}.ms-Icon--CirclePlus:before{content:"\eaee"}.ms-Icon--CircleRing:before{content:"\ea3a"}.ms-Icon--CircleShapeSolid:before{content:"\f63c"}.ms-Icon--CircleStop:before{content:"\f2dc"}.ms-Icon--CircleStopSolid:before{content:"\f2db"}.ms-Icon--CityNext:before{content:"\ec06"}.ms-Icon--CityNext2:before{content:"\ec07"}.ms-Icon--ClassNotebookLogo16:before{content:"\f488"}.ms-Icon--ClassNotebookLogo32:before{content:"\f486"}.ms-Icon--ClassNotebookLogoFill16:before{content:"\f489"}.ms-Icon--ClassNotebookLogoFill32:before{content:"\f487"}.ms-Icon--ClassNotebookLogoInverse:before{content:"\edc8"}.ms-Icon--ClassNotebookLogoInverse16:before{content:"\f48b"}.ms-Icon--ClassNotebookLogoInverse32:before{content:"\f48a"}.ms-Icon--ClassroomLogo:before{content:"\ef75"}.ms-Icon--Clear:before{content:"\e894"}.ms-Icon--ClearFilter:before{content:"\ef8f"}.ms-Icon--ClearFormatting:before{content:"\eddd"}.ms-Icon--ClearFormattingA:before{content:"\f79d"}.ms-Icon--ClearFormattingEraser:before{content:"\f79e"}.ms-Icon--ClearNight:before{content:"\e9c2"}[dir=ltr] .ms-Icon--ClearSelection:before{content:"\e8e6"}[dir=rtl] .ms-Icon--ClearSelection:before{content:"\ea48"}[dir=ltr] .ms-Icon--ClearSelectionMirrored:before{content:"\ea48"}[dir=rtl] .ms-Icon--ClearSelectionMirrored:before{content:"\e8e6"}[dir=ltr] .ms-Icon--ClipboardList:before{content:"\f0e3"}[dir=rtl] .ms-Icon--ClipboardList:before{content:"\f0e4"}[dir=ltr] .ms-Icon--ClipboardListMirrored:before{content:"\f0e4"}[dir=rtl] .ms-Icon--ClipboardListMirrored:before{content:"\f0e3"}.ms-Icon--ClipboardSolid:before{content:"\f5dc"}.ms-Icon--Clock:before{content:"\e917"}.ms-Icon--CloneToDesktop:before{content:"\f28c"}.ms-Icon--ClosedCaption:before{content:"\ef84"}[dir=ltr] .ms-Icon--ClosePane:before{content:"\e89f"}[dir=rtl] .ms-Icon--ClosePane:before{content:"\ea49"}[dir=ltr] .ms-Icon--ClosePaneMirrored:before{content:"\ea49"}[dir=rtl] .ms-Icon--ClosePaneMirrored:before{content:"\e89f"}.ms-Icon--Cloud:before{content:"\e753"}.ms-Icon--CloudAdd:before{content:"\eca9"}.ms-Icon--CloudDownload:before{content:"\ebd3"}.ms-Icon--CloudImportExport:before{content:"\ee55"}.ms-Icon--CloudUpload:before{content:"\ec8e"}.ms-Icon--CloudWeather:before{content:"\e9be"}.ms-Icon--Cloudy:before{content:"\e9bf"}.ms-Icon--Cocktails:before{content:"\ea9d"}.ms-Icon--Code:before{content:"\e943"}.ms-Icon--CodeEdit:before{content:"\f544"}.ms-Icon--Coffee:before{content:"\eaef"}.ms-Icon--CoffeeScript:before{content:"\f2fa"}.ms-Icon--CollapseContent:before{content:"\f165"}.ms-Icon--CollapseContentSingle:before{content:"\f166"}.ms-Icon--CollapseMenu:before{content:"\ef66"}.ms-Icon--CollegeFootball:before{content:"\eb26"}.ms-Icon--CollegeHoops:before{content:"\eb25"}.ms-Icon--Color:before{content:"\e790"}.ms-Icon--ColorSolid:before{content:"\f354"}.ms-Icon--ColumnLeftTwoThirds:before{content:"\f1d6"}.ms-Icon--ColumnLeftTwoThirdsEdit:before{content:"\f324"}.ms-Icon--ColumnOptions:before{content:"\f317"}.ms-Icon--ColumnRightTwoThirds:before{content:"\f1d7"}.ms-Icon--ColumnRightTwoThirdsEdit:before{content:"\f325"}.ms-Icon--ColumnVerticalSection:before{content:"\f81e"}.ms-Icon--ColumnVerticalSectionEdit:before{content:"\f806"}.ms-Icon--Combine:before{content:"\edbb"}.ms-Icon--Combobox:before{content:"\f516"}.ms-Icon--CommandPrompt:before{content:"\e756"}.ms-Icon--Comment:before{content:"\e90a"}.ms-Icon--CommentActive:before{content:"\f804"}.ms-Icon--CommentAdd:before{content:"\f2b3"}.ms-Icon--CommentNext:before{content:"\f2b4"}.ms-Icon--CommentPrevious:before{content:"\f2b5"}.ms-Icon--CommentSolid:before{content:"\e30e"}.ms-Icon--CommentUrgent:before{content:"\f307"}.ms-Icon--Commitments:before{content:"\ec4d"}.ms-Icon--Communications:before{content:"\e95a"}[dir=ltr] .ms-Icon--CompanyDirectory:before{content:"\ef0d"}[dir=rtl] .ms-Icon--CompanyDirectory:before{content:"\ef2b"}[dir=ltr] .ms-Icon--CompanyDirectoryMirrored:before{content:"\ef2b"}[dir=rtl] .ms-Icon--CompanyDirectoryMirrored:before{content:"\ef0d"}.ms-Icon--Compare:before{content:"\f057"}.ms-Icon--CompassNW:before{content:"\e942"}.ms-Icon--Completed:before{content:"\e930"}.ms-Icon--CompletedSolid:before{content:"\ec61"}.ms-Icon--ComplianceAudit:before{content:"\e369"}.ms-Icon--ConfigurationSolid:before{content:"\f334"}.ms-Icon--ConnectContacts:before{content:"\efd4"}.ms-Icon--ConnectVirtualMachine:before{content:"\ee9d"}.ms-Icon--ConstructionCone:before{content:"\e98f"}.ms-Icon--ConstructionConeSolid:before{content:"\f339"}.ms-Icon--Contact:before{content:"\e77b"}.ms-Icon--ContactCard:before{content:"\eebd"}[dir=ltr] .ms-Icon--ContactCardSettings:before{content:"\f556"}[dir=rtl] .ms-Icon--ContactCardSettings:before{content:"\f557"}[dir=ltr] .ms-Icon--ContactCardSettingsMirrored:before{content:"\f557"}[dir=rtl] .ms-Icon--ContactCardSettingsMirrored:before{content:"\f556"}.ms-Icon--ContactHeart:before{content:"\f862"}.ms-Icon--ContactInfo:before{content:"\e779"}.ms-Icon--ContactLink:before{content:"\f25f"}.ms-Icon--ContactList:before{content:"\f7e5"}.ms-Icon--ContextMenu:before{content:"\f37c"}.ms-Icon--Contrast:before{content:"\e7a1"}.ms-Icon--Copy:before{content:"\e8c8"}.ms-Icon--Cotton:before{content:"\eaf3"}.ms-Icon--Coupon:before{content:"\f7bc"}.ms-Icon--CPlusPlus:before{content:"\f2f4"}.ms-Icon--CPlusPlusLanguage:before{content:"\f2f3"}.ms-Icon--CreateMailRule:before{content:"\f67a"}.ms-Icon--Cricket:before{content:"\eb1e"}.ms-Icon--CRMCustomerInsightsApp:before{content:"\f3c8"}.ms-Icon--CRMProcesses:before{content:"\efb1"}.ms-Icon--CRMReport:before{content:"\effe"}.ms-Icon--CRMServices:before{content:"\efd2"}.ms-Icon--Crop:before{content:"\e7a8"}.ms-Icon--Crown:before{content:"\ed01"}.ms-Icon--CrownSolid:before{content:"\f336"}.ms-Icon--CSharp:before{content:"\f2f0"}.ms-Icon--CSharpLanguage:before{content:"\f2ef"}.ms-Icon--CSS:before{content:"\ebef"}.ms-Icon--CubeShape:before{content:"\f1aa"}.ms-Icon--CustomizeToolbar:before{content:"\f828"}[dir=ltr] .ms-Icon--CustomList:before{content:"\eebe"}[dir=rtl] .ms-Icon--CustomList:before{content:"\eebf"}[dir=ltr] .ms-Icon--CustomListMirrored:before{content:"\eebf"}[dir=rtl] .ms-Icon--CustomListMirrored:before{content:"\eebe"}.ms-Icon--Cut:before{content:"\e8c6"}.ms-Icon--Cycling:before{content:"\eac7"}.ms-Icon--D365TalentHRCore:before{content:"\f6bd"}.ms-Icon--D365TalentInsight:before{content:"\f6bc"}.ms-Icon--D365TalentLearn:before{content:"\f6bb"}.ms-Icon--DashboardAdd:before{content:"\f52d"}.ms-Icon--Database:before{content:"\efc7"}.ms-Icon--DatabaseSync:before{content:"\f842"}.ms-Icon--DataConnectionLibrary:before{content:"\eeb7"}.ms-Icon--Dataflows:before{content:"\f7dd"}.ms-Icon--DataflowsLink:before{content:"\e366"}.ms-Icon--DataManagementSettings:before{content:"\efc8"}.ms-Icon--DateTime2:before{content:"\ea17"}[dir=ltr] .ms-Icon--DateTime:before{content:"\ec92"}[dir=rtl] .ms-Icon--DateTime:before{content:"\ee93"}[dir=ltr] .ms-Icon--DateTimeMirrored:before{content:"\ee93"}[dir=rtl] .ms-Icon--DateTimeMirrored:before{content:"\ec92"}.ms-Icon--DeactivateOrders:before{content:"\efe1"}.ms-Icon--Decimals:before{content:"\f218"}.ms-Icon--DecisionSolid:before{content:"\f350"}.ms-Icon--DeclineCall:before{content:"\f405"}[dir=ltr] .ms-Icon--DecreaseIndentArrow:before{content:"\f7a3"}[dir=rtl] .ms-Icon--DecreaseIndentArrow:before{content:"\f7a7"}[dir=ltr] .ms-Icon--DecreaseIndentArrowMirrored:before{content:"\f7a7"}[dir=rtl] .ms-Icon--DecreaseIndentArrowMirrored:before{content:"\f7a3"}.ms-Icon--DecreaseIndentLegacy:before{content:"\e290"}[dir=ltr] .ms-Icon--DecreaseIndentText:before{content:"\f7a2"}[dir=rtl] .ms-Icon--DecreaseIndentText:before{content:"\f7a6"}[dir=ltr] .ms-Icon--DecreaseIndentTextMirrored:before{content:"\f7a6"}[dir=rtl] .ms-Icon--DecreaseIndentTextMirrored:before{content:"\f7a2"}.ms-Icon--DefaultRatio:before{content:"\f529"}.ms-Icon--DefectSolid:before{content:"\f449"}.ms-Icon--DefenderTVM:before{content:"\f6b3"}.ms-Icon--Delete:before{content:"\e74d"}.ms-Icon--DeleteColumns:before{content:"\f64e"}[dir=ltr] .ms-Icon--DeleteRows:before{content:"\f64f"}[dir=rtl] .ms-Icon--DeleteRows:before{content:"\f650"}[dir=ltr] .ms-Icon--DeleteRowsMirrored:before{content:"\f650"}[dir=rtl] .ms-Icon--DeleteRowsMirrored:before{content:"\f64f"}.ms-Icon--DeleteTable:before{content:"\f651"}.ms-Icon--DeliveryTruck:before{content:"\ebf4"}.ms-Icon--DelveAnalytics:before{content:"\eeee"}.ms-Icon--DelveAnalyticsLogo:before{content:"\edca"}.ms-Icon--DelveLogo:before{content:"\f280"}.ms-Icon--DelveLogoFill:before{content:"\f281"}.ms-Icon--DelveLogoInverse:before{content:"\ed76"}.ms-Icon--DependencyAdd:before{content:"\e344"}.ms-Icon--DependencyRemove:before{content:"\e345"}.ms-Icon--Deploy:before{content:"\f29d"}.ms-Icon--Descending:before{content:"\edc1"}.ms-Icon--Design:before{content:"\eb3c"}.ms-Icon--DesktopScreenshot:before{content:"\f5d9"}.ms-Icon--DeveloperTools:before{content:"\ec7a"}.ms-Icon--Devices2:before{content:"\e975"}.ms-Icon--Devices3:before{content:"\ea6c"}.ms-Icon--Devices4:before{content:"\eb66"}.ms-Icon--Diagnostic:before{content:"\e9d9"}.ms-Icon--DiagnosticDataBarTooltip:before{content:"\f7df"}.ms-Icon--Dialpad:before{content:"\e75f"}.ms-Icon--Diamond:before{content:"\ed02"}.ms-Icon--DiamondSolid:before{content:"\f34c"}.ms-Icon--Dictionary:before{content:"\e82d"}.ms-Icon--DictionaryRemove:before{content:"\f69a"}.ms-Icon--DietPlanNotebook:before{content:"\eac8"}.ms-Icon--DiffInline:before{content:"\f309"}.ms-Icon--DiffSideBySide:before{content:"\f30a"}.ms-Icon--DisableUpdates:before{content:"\e8d8"}.ms-Icon--DisconnectVirtualMachine:before{content:"\f873"}.ms-Icon--Dislike:before{content:"\e8e0"}.ms-Icon--DislikeSolid:before{content:"\f3c0"}.ms-Icon--DistributeDown:before{content:"\f76a"}[dir=ltr] .ms-Icon--DockLeft:before{content:"\e90c"}[dir=rtl] .ms-Icon--DockLeft:before{content:"\ea4c"}[dir=ltr] .ms-Icon--DockLeftMirrored:before{content:"\ea4c"}[dir=rtl] .ms-Icon--DockLeftMirrored:before{content:"\e90c"}.ms-Icon--DockRight:before{content:"\e90d"}.ms-Icon--DocLibrary:before{content:"\eeb8"}.ms-Icon--DocsLogoInverse:before{content:"\edcb"}.ms-Icon--Document:before{content:"\e8a5"}.ms-Icon--DocumentApproval:before{content:"\f28b"}.ms-Icon--Documentation:before{content:"\ec17"}.ms-Icon--DocumentManagement:before{content:"\effc"}.ms-Icon--DocumentReply:before{content:"\ef57"}.ms-Icon--DocumentSearch:before{content:"\ef6c"}.ms-Icon--DocumentSet:before{content:"\eed6"}.ms-Icon--DOM:before{content:"\ec8d"}.ms-Icon--DonutChart:before{content:"\f368"}.ms-Icon--Door:before{content:"\eb75"}.ms-Icon--DoubleBookmark:before{content:"\eb8f"}.ms-Icon--DoubleChevronDown:before{content:"\ee04"}.ms-Icon--DoubleChevronDown12:before{content:"\ee97"}.ms-Icon--DoubleChevronDown8:before{content:"\f36b"}.ms-Icon--DoubleChevronLeft:before{content:"\edbe"}.ms-Icon--DoubleChevronLeft12:before{content:"\ee98"}.ms-Icon--DoubleChevronLeft8:before{content:"\f36d"}[dir=ltr] .ms-Icon--DoubleChevronLeftMed:before{content:"\e991"}[dir=rtl] .ms-Icon--DoubleChevronLeftMed:before{content:"\ea4d"}[dir=ltr] .ms-Icon--DoubleChevronLeftMedMirrored:before{content:"\ea4d"}[dir=rtl] .ms-Icon--DoubleChevronLeftMedMirrored:before{content:"\e991"}.ms-Icon--DoubleChevronRight:before{content:"\edbf"}.ms-Icon--DoubleChevronRight12:before{content:"\ee99"}.ms-Icon--DoubleChevronRight8:before{content:"\f36e"}.ms-Icon--DoubleChevronUp:before{content:"\edbd"}.ms-Icon--DoubleChevronUp12:before{content:"\ee96"}.ms-Icon--DoubleChevronUp8:before{content:"\f36c"}.ms-Icon--DoubleColumn:before{content:"\f1d4"}.ms-Icon--DoubleColumnEdit:before{content:"\f322"}.ms-Icon--DoubleDownArrow:before{content:"\f769"}.ms-Icon--Down:before{content:"\e74b"}.ms-Icon--Download:before{content:"\e896"}.ms-Icon--DownloadDocument:before{content:"\f549"}.ms-Icon--DragObject:before{content:"\f553"}.ms-Icon--DrillDown:before{content:"\f532"}.ms-Icon--DrillDownSolid:before{content:"\f533"}.ms-Icon--DrillExpand:before{content:"\f534"}.ms-Icon--DrillShow:before{content:"\f535"}.ms-Icon--DrillThrough:before{content:"\f5b9"}.ms-Icon--DRM:before{content:"\eca8"}.ms-Icon--Drop:before{content:"\eb42"}.ms-Icon--Dropdown:before{content:"\edc5"}.ms-Icon--DropShapeSolid:before{content:"\f63f"}.ms-Icon--DuplicateRow:before{content:"\f82a"}.ms-Icon--Duststorm:before{content:"\e9cd"}.ms-Icon--Dynamics365Logo:before{content:"\edcc"}.ms-Icon--DynamicSMBLogo:before{content:"\edcd"}.ms-Icon--EaseOfAccess:before{content:"\e776"}.ms-Icon--EatDrink:before{content:"\e807"}.ms-Icon--EdgeLogo:before{content:"\ec60"}.ms-Icon--eDiscovery:before{content:"\e370"}.ms-Icon--EditContact:before{content:"\efd3"}.ms-Icon--EditCreate:before{content:"\f3c9"}.ms-Icon--EditMail:before{content:"\ef61"}[dir=ltr] .ms-Icon--Edit:before{content:"\e70f"}[dir=rtl] .ms-Icon--Edit:before{content:"\eb7e"}[dir=ltr] .ms-Icon--EditMirrored:before{content:"\eb7e"}[dir=rtl] .ms-Icon--EditMirrored:before{content:"\e70f"}.ms-Icon--EditNote:before{content:"\ed9d"}.ms-Icon--EditPhoto:before{content:"\ef77"}[dir=ltr] .ms-Icon--EditSolid12:before{content:"\f4b5"}[dir=rtl] .ms-Icon--EditSolid12:before{content:"\f4b6"}[dir=ltr] .ms-Icon--EditSolidMirrored12:before{content:"\f4b6"}[dir=rtl] .ms-Icon--EditSolidMirrored12:before{content:"\f4b5"}.ms-Icon--EditStyle:before{content:"\ef60"}.ms-Icon--Education:before{content:"\e7be"}.ms-Icon--Ellipse:before{content:"\f4fb"}.ms-Icon--Embed:before{content:"\ecce"}.ms-Icon--EMI:before{content:"\e731"}.ms-Icon--Emoji:before{content:"\e899"}.ms-Icon--Emoji2:before{content:"\e76e"}.ms-Icon--EmojiDisappointed:before{content:"\ea88"}.ms-Icon--EmojiNeutral:before{content:"\ea87"}.ms-Icon--EmojiTabSymbols:before{content:"\ed58"}.ms-Icon--EmptyRecycleBin:before{content:"\ef88"}.ms-Icon--Encryption:before{content:"\f69d"}.ms-Icon--EngineeringGroup:before{content:"\f362"}.ms-Icon--EntitlementPolicy:before{content:"\e346"}.ms-Icon--EntitlementRedemption:before{content:"\e347"}.ms-Icon--EntryDecline:before{content:"\f555"}.ms-Icon--EntryView:before{content:"\f554"}.ms-Icon--Equalizer:before{content:"\e9e9"}.ms-Icon--EraseTool:before{content:"\e75c"}.ms-Icon--Error:before{content:"\e783"}.ms-Icon--ErrorBadge:before{content:"\ea39"}.ms-Icon--Event:before{content:"\eca3"}.ms-Icon--Event12:before{content:"\f763"}.ms-Icon--EventAccepted:before{content:"\f422"}.ms-Icon--EventDate:before{content:"\f059"}.ms-Icon--EventDateMissed12:before{content:"\f764"}.ms-Icon--EventDeclined:before{content:"\f425"}.ms-Icon--EventInfo:before{content:"\ed8b"}[dir=ltr] .ms-Icon--EventTentative:before{content:"\f423"}[dir=rtl] .ms-Icon--EventTentative:before{content:"\f424"}[dir=ltr] .ms-Icon--EventTentativeMirrored:before{content:"\f424"}[dir=rtl] .ms-Icon--EventTentativeMirrored:before{content:"\f423"}.ms-Icon--EventToDoLogo:before{content:"\f869"}.ms-Icon--ExcelDocument:before{content:"\ef73"}.ms-Icon--ExcelLogo:before{content:"\f1e5"}.ms-Icon--ExcelLogo16:before{content:"\f397"}.ms-Icon--ExcelLogoFill:before{content:"\f1e6"}.ms-Icon--ExcelLogoFill16:before{content:"\f398"}.ms-Icon--ExcelLogoInverse:before{content:"\ec28"}.ms-Icon--ExcelLogoInverse16:before{content:"\f396"}.ms-Icon--ExchangeLogo:before{content:"\f284"}.ms-Icon--ExchangeLogoFill:before{content:"\f285"}.ms-Icon--ExchangeLogoInverse:before{content:"\ed78"}.ms-Icon--ExerciseTracker:before{content:"\eacc"}.ms-Icon--ExpandMenu:before{content:"\ef67"}.ms-Icon--ExploreContent:before{content:"\eccd"}.ms-Icon--ExploreContentSingle:before{content:"\f164"}.ms-Icon--ExploreData:before{content:"\f5b6"}[dir=ltr] .ms-Icon--Export:before{content:"\ede1"}[dir=rtl] .ms-Icon--Export:before{content:"\ede2"}[dir=ltr] .ms-Icon--ExportMirrored:before{content:"\ede2"}[dir=rtl] .ms-Icon--ExportMirrored:before{content:"\ede1"}.ms-Icon--ExternalBuild:before{content:"\f445"}.ms-Icon--ExternalTFVC:before{content:"\f446"}.ms-Icon--ExternalXAML:before{content:"\f447"}.ms-Icon--Eyedropper:before{content:"\ef3c"}.ms-Icon--EyeShadow:before{content:"\f7eb"}.ms-Icon--F12DevTools:before{content:"\ebee"}.ms-Icon--FabricAssetLibrary:before{content:"\f09c"}.ms-Icon--FabricDataConnectionLibrary:before{content:"\f09d"}.ms-Icon--FabricDocLibrary:before{content:"\f09e"}.ms-Icon--FabricFolder:before{content:"\f0a9"}.ms-Icon--FabricFolderConfirm:before{content:"\f7ff"}.ms-Icon--FabricFolderFill:before{content:"\f0aa"}.ms-Icon--FabricFolderSearch:before{content:"\f0a4"}[dir=ltr] .ms-Icon--FabricFormLibrary:before{content:"\f09f"}[dir=rtl] .ms-Icon--FabricFormLibrary:before{content:"\f0a0"}[dir=ltr] .ms-Icon--FabricFormLibraryMirrored:before{content:"\f0a0"}[dir=rtl] .ms-Icon--FabricFormLibraryMirrored:before{content:"\f09f"}.ms-Icon--FabricMovetoFolder:before{content:"\f0a5"}.ms-Icon--FabricNetworkFolder:before{content:"\f5e6"}.ms-Icon--FabricNewFolder:before{content:"\f0ab"}.ms-Icon--FabricOpenFolderHorizontal:before{content:"\f0a8"}.ms-Icon--FabricPictureLibrary:before{content:"\f0ac"}.ms-Icon--FabricPublicFolder:before{content:"\f0a3"}[dir=ltr] .ms-Icon--FabricReportLibrary:before{content:"\f0a1"}[dir=rtl] .ms-Icon--FabricReportLibrary:before{content:"\f0a2"}[dir=ltr] .ms-Icon--FabricReportLibraryMirrored:before{content:"\f0a2"}[dir=rtl] .ms-Icon--FabricReportLibraryMirrored:before{content:"\f0a1"}.ms-Icon--FabricSyncFolder:before{content:"\f0a7"}.ms-Icon--FabricTextHighlight:before{content:"\f79c"}.ms-Icon--FabricTextHighlightComposite:before{content:"\f7da"}.ms-Icon--FabricUnsyncFolder:before{content:"\f0a6"}.ms-Icon--FabricUserFolder:before{content:"\f5e5"}.ms-Icon--Family:before{content:"\ebda"}.ms-Icon--FangBody:before{content:"\eceb"}.ms-Icon--FastForward:before{content:"\eb9d"}.ms-Icon--FastMode:before{content:"\f19a"}.ms-Icon--Favicon:before{content:"\e737"}.ms-Icon--FavoriteList:before{content:"\e728"}.ms-Icon--FavoriteStar:before{content:"\e734"}.ms-Icon--FavoriteStarFill:before{content:"\e735"}.ms-Icon--Fax:before{content:"\ef5c"}.ms-Icon--Feedback:before{content:"\ed15"}[dir=ltr] .ms-Icon--FeedbackRequestSolid:before{content:"\f359"}[dir=rtl] .ms-Icon--FeedbackRequestSolid:before{content:"\f35a"}[dir=ltr] .ms-Icon--FeedbackRequestMirroredSolid:before{content:"\f35a"}[dir=rtl] .ms-Icon--FeedbackRequestMirroredSolid:before{content:"\f359"}.ms-Icon--FeedbackResponseSolid:before{content:"\f35b"}.ms-Icon--Ferry:before{content:"\e7e3"}.ms-Icon--FerrySolid:before{content:"\eb48"}.ms-Icon--FieldChanged:before{content:"\f2c3"}.ms-Icon--FieldEmpty:before{content:"\f2c1"}.ms-Icon--FieldFilled:before{content:"\f2c2"}.ms-Icon--FieldNotChanged:before{content:"\f2c4"}.ms-Icon--FieldReadOnly:before{content:"\f442"}.ms-Icon--FieldRequired:before{content:"\f443"}.ms-Icon--FileASPX:before{content:"\f2e9"}.ms-Icon--FileBug:before{content:"\f30d"}.ms-Icon--FileCode:before{content:"\f30e"}.ms-Icon--FileComment:before{content:"\f30f"}.ms-Icon--FileCSS:before{content:"\f2ea"}.ms-Icon--FileHTML:before{content:"\f2ed"}.ms-Icon--FileImage:before{content:"\f311"}.ms-Icon--FileJAVA:before{content:"\f2e8"}.ms-Icon--FileLess:before{content:"\f2ec"}.ms-Icon--FilePDB:before{content:"\f2e5"}.ms-Icon--FileRequest:before{content:"\f789"}.ms-Icon--FileSass:before{content:"\f2eb"}.ms-Icon--FileSQL:before{content:"\f2e7"}.ms-Icon--FileSymlink:before{content:"\f312"}.ms-Icon--FileTemplate:before{content:"\f2e6"}.ms-Icon--FileTypeSolution:before{content:"\f387"}.ms-Icon--FileYML:before{content:"\f5da"}.ms-Icon--Filter:before{content:"\e71c"}.ms-Icon--Filters:before{content:"\e795"}.ms-Icon--FilterSettings:before{content:"\f76c"}.ms-Icon--FilterSolid:before{content:"\f412"}.ms-Icon--FiltersSolid:before{content:"\f353"}.ms-Icon--Financial:before{content:"\e7bb"}[dir=ltr] .ms-Icon--FinancialSolid:before{content:"\f346"}[dir=rtl] .ms-Icon--FinancialSolid:before{content:"\f347"}[dir=ltr] .ms-Icon--FinancialMirroredSolid:before{content:"\f347"}[dir=rtl] .ms-Icon--FinancialMirroredSolid:before{content:"\f346"}.ms-Icon--Fingerprint:before{content:"\e928"}.ms-Icon--FitPage:before{content:"\e9a6"}.ms-Icon--FitWidth:before{content:"\e9a7"}.ms-Icon--FiveTileGrid:before{content:"\f274"}.ms-Icon--Flag:before{content:"\e7c1"}.ms-Icon--FlameSolid:before{content:"\f1f3"}.ms-Icon--Flashlight:before{content:"\e754"}.ms-Icon--FlickDown:before{content:"\e935"}.ms-Icon--FlickLeft:before{content:"\e937"}.ms-Icon--FlickRight:before{content:"\e938"}.ms-Icon--FlickUp:before{content:"\e936"}.ms-Icon--Flow:before{content:"\ef90"}.ms-Icon--FlowChart:before{content:"\e9d4"}.ms-Icon--Flower:before{content:"\f54e"}.ms-Icon--FocalPoint:before{content:"\f277"}.ms-Icon--Focus:before{content:"\ea6f"}.ms-Icon--Fog:before{content:"\e9cb"}.ms-Icon--Folder:before{content:"\e8b7"}.ms-Icon--FolderFill:before{content:"\e8d5"}.ms-Icon--FolderHorizontal:before{content:"\f12b"}[dir=ltr] .ms-Icon--FolderList:before{content:"\f2ce"}[dir=rtl] .ms-Icon--FolderList:before{content:"\f2cf"}[dir=ltr] .ms-Icon--FolderListMirrored:before{content:"\f2cf"}[dir=rtl] .ms-Icon--FolderListMirrored:before{content:"\f2ce"}.ms-Icon--FolderOpen:before{content:"\e838"}.ms-Icon--FolderQuery:before{content:"\f2cd"}.ms-Icon--FolderSearch:before{content:"\ef65"}.ms-Icon--FollowUser:before{content:"\ee05"}.ms-Icon--Font:before{content:"\e8d2"}.ms-Icon--FontColor:before{content:"\e8d3"}.ms-Icon--FontColorA:before{content:"\f4ec"}.ms-Icon--FontColorSwatch:before{content:"\f4ed"}.ms-Icon--FontDecrease:before{content:"\e8e7"}.ms-Icon--FontIncrease:before{content:"\e8e8"}.ms-Icon--FontSize:before{content:"\e8e9"}.ms-Icon--Footer:before{content:"\f82e"}[dir=ltr] .ms-Icon--FormLibrary:before{content:"\eeb9"}[dir=rtl] .ms-Icon--FormLibrary:before{content:"\eeba"}[dir=ltr] .ms-Icon--FormLibraryMirrored:before{content:"\eeba"}[dir=rtl] .ms-Icon--FormLibraryMirrored:before{content:"\eeb9"}.ms-Icon--Forum:before{content:"\e378"}.ms-Icon--Forward:before{content:"\e72a"}.ms-Icon--ForwardEvent:before{content:"\ed8c"}.ms-Icon--Freezing:before{content:"\e9ef"}.ms-Icon--Frigid:before{content:"\e9ca"}.ms-Icon--FrontCamera:before{content:"\e96b"}.ms-Icon--FSharp:before{content:"\f2f6"}.ms-Icon--FSharpLanguage:before{content:"\f2f5"}.ms-Icon--FullCircleMask:before{content:"\e91f"}.ms-Icon--FullHistory:before{content:"\f31c"}.ms-Icon--FullScreen:before{content:"\e740"}.ms-Icon--FullWidth:before{content:"\f2fe"}.ms-Icon--FullWidthEdit:before{content:"\f2ff"}.ms-Icon--FunctionalManagerDashboard:before{content:"\f542"}.ms-Icon--FunnelChart:before{content:"\e9f1"}.ms-Icon--GallatinLogo:before{content:"\f496"}.ms-Icon--Game:before{content:"\e7fc"}.ms-Icon--Generate:before{content:"\e9da"}.ms-Icon--GenericScan:before{content:"\ee6f"}.ms-Icon--GenericScanFilled:before{content:"\f7de"}.ms-Icon--GIF:before{content:"\f4a9"}.ms-Icon--Giftbox:before{content:"\ec1f"}.ms-Icon--GiftboxOpen:before{content:"\f133"}.ms-Icon--GiftBoxSolid:before{content:"\f341"}.ms-Icon--GiftCard:before{content:"\eb8e"}.ms-Icon--GitGraph:before{content:"\f2ca"}.ms-Icon--Glasses:before{content:"\ea16"}.ms-Icon--Glimmer:before{content:"\ecf4"}.ms-Icon--GlobalNavButton:before{content:"\e700"}.ms-Icon--GlobalNavButtonActive:before{content:"\f89f"}.ms-Icon--Globe:before{content:"\e774"}.ms-Icon--Globe2:before{content:"\f49a"}.ms-Icon--GlobeFavorite:before{content:"\ef53"}.ms-Icon--Golf:before{content:"\eb1f"}[dir=ltr] .ms-Icon--Go:before{content:"\e8ad"}[dir=rtl] .ms-Icon--Go:before{content:"\ea4f"}[dir=ltr] .ms-Icon--GoMirrored:before{content:"\ea4f"}[dir=rtl] .ms-Icon--GoMirrored:before{content:"\e8ad"}.ms-Icon--GoToDashboard:before{content:"\eeed"}.ms-Icon--GotoToday:before{content:"\e8d1"}.ms-Icon--GreetingCard:before{content:"\f54b"}.ms-Icon--GridViewLarge:before{content:"\f234"}.ms-Icon--GridViewMedium:before{content:"\f233"}.ms-Icon--GridViewSmall:before{content:"\f232"}.ms-Icon--GripperBarHorizontal:before{content:"\e76f"}.ms-Icon--GripperBarVertical:before{content:"\e784"}.ms-Icon--GripperDotsVertical:before{content:"\f772"}.ms-Icon--GripperTool:before{content:"\e75e"}.ms-Icon--Group:before{content:"\e902"}.ms-Icon--GroupedAscending:before{content:"\ee67"}.ms-Icon--GroupedDescending:before{content:"\ee66"}.ms-Icon--GroupedList:before{content:"\ef74"}.ms-Icon--GroupList:before{content:"\f168"}.ms-Icon--GroupObject:before{content:"\f4f1"}.ms-Icon--GUID:before{content:"\f52b"}.ms-Icon--Guitar:before{content:"\f49b"}.ms-Icon--HailDay:before{content:"\ea00"}.ms-Icon--HailNight:before{content:"\ea13"}.ms-Icon--HalfAlpha:before{content:"\e97e"}.ms-Icon--HalfCircle:before{content:"\f501"}.ms-Icon--HandsFree:before{content:"\ead0"}.ms-Icon--Handwriting:before{content:"\e929"}.ms-Icon--HardDrive:before{content:"\eda2"}.ms-Icon--HardDriveGroup:before{content:"\f18f"}.ms-Icon--HardDriveLock:before{content:"\f55a"}.ms-Icon--HardDriveUnlock:before{content:"\f55b"}.ms-Icon--Header:before{content:"\f82f"}.ms-Icon--Header1:before{content:"\ea19"}.ms-Icon--Header2:before{content:"\ef36"}.ms-Icon--Header3:before{content:"\ef37"}.ms-Icon--Header4:before{content:"\ef38"}.ms-Icon--Headset:before{content:"\e95b"}.ms-Icon--HeadsetSolid:before{content:"\f348"}.ms-Icon--Health:before{content:"\e95e"}.ms-Icon--HealthSolid:before{content:"\f33f"}.ms-Icon--Heart:before{content:"\eb51"}.ms-Icon--HeartBroken:before{content:"\ea92"}.ms-Icon--HeartFill:before{content:"\eb52"}[dir=ltr] .ms-Icon--Help:before{content:"\e897"}[dir=rtl] .ms-Icon--Help:before{content:"\ea51"}[dir=ltr] .ms-Icon--HelpMirrored:before{content:"\ea51"}[dir=rtl] .ms-Icon--HelpMirrored:before{content:"\e897"}.ms-Icon--Hexagon:before{content:"\f4fe"}.ms-Icon--Hide:before{content:"\ed1a"}.ms-Icon--Hide2:before{content:"\ef89"}.ms-Icon--Hide3:before{content:"\f6ac"}.ms-Icon--Highlight:before{content:"\e7e6"}.ms-Icon--HighlightMappedShapes:before{content:"\f2a1"}.ms-Icon--HintText:before{content:"\f50f"}.ms-Icon--HistoricalWeather:before{content:"\eb43"}.ms-Icon--History:before{content:"\e81c"}.ms-Icon--Home:before{content:"\e80f"}.ms-Icon--HomeGroup:before{content:"\ec26"}.ms-Icon--HomeSolid:before{content:"\ea8a"}.ms-Icon--HomeVerify:before{content:"\f00e"}.ms-Icon--HorizontalDistributeCenter:before{content:"\f4f9"}.ms-Icon--HorizontalTabKey:before{content:"\e7fd"}.ms-Icon--Hospital:before{content:"\e91d"}.ms-Icon--Hotel:before{content:"\e824"}.ms-Icon--HourGlass:before{content:"\ea03"}.ms-Icon--IconSetsFlag:before{content:"\f2a4"}.ms-Icon--IDBadge:before{content:"\f427"}.ms-Icon--IgnoreConversation:before{content:"\e372"}.ms-Icon--ImageCrosshair:before{content:"\f2c9"}.ms-Icon--ImageDiff:before{content:"\f30b"}.ms-Icon--ImagePixel:before{content:"\f30c"}.ms-Icon--ImageSearch:before{content:"\f4e8"}[dir=rtl] .ms-Icon--ImportAll:before{content:"\ea53"}[dir=ltr] .ms-Icon--ImportAllMirrored:before{content:"\ea53"}.ms-Icon--Important:before{content:"\e8c9"}[dir=ltr] .ms-Icon--Import:before{content:"\e8b5"}[dir=rtl] .ms-Icon--Import:before{content:"\ea52"}[dir=ltr] .ms-Icon--ImportMirrored:before{content:"\ea52"}[dir=rtl] .ms-Icon--ImportMirrored:before{content:"\e8b5"}.ms-Icon--Inbox:before{content:"\f41c"}.ms-Icon--InboxCheck:before{content:"\ef64"}.ms-Icon--IncidentTriangle:before{content:"\e814"}.ms-Icon--IncomingCall:before{content:"\e77e"}[dir=ltr] .ms-Icon--IncreaseIndentArrow:before{content:"\f7a1"}[dir=rtl] .ms-Icon--IncreaseIndentArrow:before{content:"\f7a5"}[dir=ltr] .ms-Icon--IncreaseIndentArrowMirrored:before{content:"\f7a5"}[dir=rtl] .ms-Icon--IncreaseIndentArrowMirrored:before{content:"\f7a1"}.ms-Icon--IncreaseIndentLegacy:before{content:"\e291"}[dir=ltr] .ms-Icon--IncreaseIndentText:before{content:"\f7a0"}[dir=rtl] .ms-Icon--IncreaseIndentText:before{content:"\f7a4"}[dir=ltr] .ms-Icon--IncreaseIndentTextMirrored:before{content:"\f7a4"}[dir=rtl] .ms-Icon--IncreaseIndentTextMirrored:before{content:"\f7a0"}.ms-Icon--Info:before{content:"\e946"}.ms-Icon--Info2:before{content:"\ea1f"}.ms-Icon--InformationBarriers:before{content:"\f803"}.ms-Icon--InfoSolid:before{content:"\f167"}.ms-Icon--InkingTool:before{content:"\e76d"}.ms-Icon--Insert:before{content:"\f278"}.ms-Icon--InsertColumnsLeft:before{content:"\f64a"}.ms-Icon--InsertColumnsRight:before{content:"\f64b"}.ms-Icon--InsertRowsAbove:before{content:"\f64c"}.ms-Icon--InsertRowsBelow:before{content:"\f64d"}.ms-Icon--InsertSignatureLine:before{content:"\f677"}.ms-Icon--InsertTextBox:before{content:"\ec7d"}.ms-Icon--Installation:before{content:"\e311"}.ms-Icon--InstallToDrive:before{content:"\f28d"}.ms-Icon--InternalInvestigation:before{content:"\f854"}.ms-Icon--InternetSharing:before{content:"\e704"}[dir=ltr] .ms-Icon--IRMForward:before{content:"\f41f"}[dir=rtl] .ms-Icon--IRMForward:before{content:"\f420"}[dir=ltr] .ms-Icon--IRMForwardMirrored:before{content:"\f420"}[dir=rtl] .ms-Icon--IRMForwardMirrored:before{content:"\f41f"}[dir=ltr] .ms-Icon--IRMReply:before{content:"\f41d"}[dir=rtl] .ms-Icon--IRMReply:before{content:"\f41e"}[dir=ltr] .ms-Icon--IRMReplyMirrored:before{content:"\f41e"}[dir=rtl] .ms-Icon--IRMReplyMirrored:before{content:"\f41d"}.ms-Icon--IssueSolid:before{content:"\f448"}[dir=ltr] .ms-Icon--IssueTracking:before{content:"\eec0"}[dir=rtl] .ms-Icon--IssueTracking:before{content:"\eec1"}[dir=ltr] .ms-Icon--IssueTrackingMirrored:before{content:"\eec1"}[dir=rtl] .ms-Icon--IssueTrackingMirrored:before{content:"\eec0"}.ms-Icon--Italic:before{content:"\e8db"}.ms-Icon--JavaScriptLanguage:before{content:"\f2ee"}.ms-Icon--JoinOnlineMeeting:before{content:"\ed8f"}.ms-Icon--JS:before{content:"\ebf0"}.ms-Icon--KaizalaLogo:before{content:"\f492"}.ms-Icon--KeyboardClassic:before{content:"\e765"}.ms-Icon--KnowledgeArticle:before{content:"\f000"}.ms-Icon--Label:before{content:"\e932"}.ms-Icon--LadybugSolid:before{content:"\f44a"}.ms-Icon--Lamp:before{content:"\eb19"}.ms-Icon--LandscapeOrientation:before{content:"\ef6b"}.ms-Icon--LaptopSecure:before{content:"\f552"}.ms-Icon--LaptopSelected:before{content:"\ec76"}.ms-Icon--LargeGrid:before{content:"\eecb"}.ms-Icon--Leave:before{content:"\f627"}.ms-Icon--Library:before{content:"\e8f1"}.ms-Icon--Lifesaver:before{content:"\ef62"}.ms-Icon--LifesaverLock:before{content:"\ef63"}.ms-Icon--Light:before{content:"\e793"}.ms-Icon--Lightbulb:before{content:"\ea80"}.ms-Icon--LightningBolt:before{content:"\e945"}.ms-Icon--LightWeight:before{content:"\f4ee"}.ms-Icon--Like:before{content:"\e8e1"}.ms-Icon--LikeSolid:before{content:"\f3bf"}.ms-Icon--Line:before{content:"\f4fc"}.ms-Icon--LineChart:before{content:"\e9e6"}.ms-Icon--LineSpacing:before{content:"\f517"}.ms-Icon--LineStyle:before{content:"\f50c"}.ms-Icon--LineThickness:before{content:"\f50d"}.ms-Icon--Link:before{content:"\e71b"}.ms-Icon--Link12:before{content:"\f6e3"}.ms-Icon--LinkedDatabase:before{content:"\f779"}.ms-Icon--LinkedInLogo:before{content:"\f20a"}[dir=ltr] .ms-Icon--List:before{content:"\ea37"}[dir=rtl] .ms-Icon--List:before{content:"\ea55"}[dir=ltr] .ms-Icon--ListMirrored:before{content:"\ea55"}[dir=rtl] .ms-Icon--ListMirrored:before{content:"\ea37"}.ms-Icon--LocaleLanguage:before{content:"\f2b7"}.ms-Icon--Location:before{content:"\e81d"}.ms-Icon--LocationCircle:before{content:"\e80e"}.ms-Icon--LocationDot:before{content:"\e827"}.ms-Icon--LocationFill:before{content:"\e920"}.ms-Icon--LocationOutline:before{content:"\f2d0"}.ms-Icon--Lock:before{content:"\e72e"}.ms-Icon--Lock12:before{content:"\f6e6"}.ms-Icon--LockSolid:before{content:"\e9a2"}.ms-Icon--LogRemove:before{content:"\f316"}.ms-Icon--LookupEntities:before{content:"\f5b5"}.ms-Icon--LowerBrightness:before{content:"\ec8a"}.ms-Icon--LyncLogo:before{content:"\ed79"}.ms-Icon--M365InvoicingLogo:before{content:"\f7c1"}.ms-Icon--Mail:before{content:"\e715"}.ms-Icon--MailAlert:before{content:"\ed80"}.ms-Icon--MailAttached:before{content:"\f774"}.ms-Icon--MailCheck:before{content:"\ed81"}.ms-Icon--MailFill:before{content:"\e8a8"}[dir=ltr] .ms-Icon--MailForward:before{content:"\e89c"}[dir=rtl] .ms-Icon--MailForward:before{content:"\ea56"}[dir=ltr] .ms-Icon--MailForwardMirrored:before{content:"\ea56"}[dir=rtl] .ms-Icon--MailForwardMirrored:before{content:"\e89c"}.ms-Icon--MailLowImportance:before{content:"\ed82"}.ms-Icon--MailOptions:before{content:"\f82c"}.ms-Icon--MailPause:before{content:"\ed83"}.ms-Icon--MailReminder:before{content:"\f418"}.ms-Icon--MailRepeat:before{content:"\ed84"}[dir=ltr] .ms-Icon--MailReplyAll:before{content:"\e8c2"}[dir=rtl] .ms-Icon--MailReplyAll:before{content:"\ea58"}[dir=ltr] .ms-Icon--MailReplyAllMirrored:before{content:"\ea58"}[dir=rtl] .ms-Icon--MailReplyAllMirrored:before{content:"\e8c2"}[dir=ltr] .ms-Icon--MailReply:before{content:"\e8ca"}[dir=rtl] .ms-Icon--MailReply:before{content:"\ea57"}[dir=ltr] .ms-Icon--MailReplyMirrored:before{content:"\ea57"}[dir=rtl] .ms-Icon--MailReplyMirrored:before{content:"\e8ca"}.ms-Icon--MailSchedule:before{content:"\f72e"}.ms-Icon--MailSolid:before{content:"\f343"}[dir=ltr] .ms-Icon--MailTentative:before{content:"\f416"}[dir=rtl] .ms-Icon--MailTentative:before{content:"\f417"}[dir=ltr] .ms-Icon--MailTentativeMirrored:before{content:"\f417"}[dir=rtl] .ms-Icon--MailTentativeMirrored:before{content:"\f416"}.ms-Icon--MailUndelivered:before{content:"\f415"}.ms-Icon--ManagerSelfService:before{content:"\ee23"}.ms-Icon--Manufacturing:before{content:"\e99c"}.ms-Icon--MapDirections:before{content:"\e816"}.ms-Icon--MapLayers:before{content:"\e81e"}.ms-Icon--MapPin:before{content:"\e707"}.ms-Icon--MapPinSolid:before{content:"\f52e"}.ms-Icon--MarkAsProtected:before{content:"\f6ae"}.ms-Icon--MarkDownLanguage:before{content:"\f2fb"}.ms-Icon--Market:before{content:"\eafc"}.ms-Icon--MarketDown:before{content:"\ef42"}.ms-Icon--MasterDatabase:before{content:"\f5ba"}.ms-Icon--MaximumValue:before{content:"\f5bc"}.ms-Icon--Medal:before{content:"\ee38"}.ms-Icon--MedalSolid:before{content:"\f6b9"}.ms-Icon--Media:before{content:"\ea69"}.ms-Icon--MediaAdd:before{content:"\f510"}.ms-Icon--Medical:before{content:"\ead4"}.ms-Icon--Megaphone:before{content:"\e789"}.ms-Icon--MegaphoneSolid:before{content:"\f332"}.ms-Icon--Memo:before{content:"\e77c"}.ms-Icon--Merge:before{content:"\e7d5"}.ms-Icon--MergeDuplicate:before{content:"\f29a"}.ms-Icon--Message:before{content:"\e8bd"}.ms-Icon--MessageFill:before{content:"\ec70"}.ms-Icon--MicOff:before{content:"\ec54"}.ms-Icon--MicOff2:before{content:"\f781"}.ms-Icon--Microphone:before{content:"\e720"}.ms-Icon--MicrosoftFlowLogo:before{content:"\f4b1"}.ms-Icon--MicrosoftStaffhubLogo:before{content:"\f130"}.ms-Icon--MicrosoftTranslatorLogo:before{content:"\f782"}.ms-Icon--MicrosoftTranslatorLogoBlue:before{content:"\f853"}.ms-Icon--MicrosoftTranslatorLogoGreen:before{content:"\f852"}[dir=ltr] .ms-Icon--MiniContract:before{content:"\e93b"}[dir=rtl] .ms-Icon--MiniContract:before{content:"\ea59"}[dir=ltr] .ms-Icon--MiniContractMirrored:before{content:"\ea59"}[dir=rtl] .ms-Icon--MiniContractMirrored:before{content:"\e93b"}[dir=ltr] .ms-Icon--MiniExpand:before{content:"\e93a"}[dir=rtl] .ms-Icon--MiniExpand:before{content:"\ea5a"}[dir=ltr] .ms-Icon--MiniExpandMirrored:before{content:"\ea5a"}[dir=rtl] .ms-Icon--MiniExpandMirrored:before{content:"\e93a"}.ms-Icon--MiniLink:before{content:"\e732"}.ms-Icon--MinimumValue:before{content:"\f5bd"}.ms-Icon--MobileReport:before{content:"\f18a"}.ms-Icon--MobileSelected:before{content:"\ec75"}.ms-Icon--ModelingView:before{content:"\f871"}.ms-Icon--Money:before{content:"\eafd"}.ms-Icon--More:before{content:"\e712"}.ms-Icon--MoreSports:before{content:"\eb22"}.ms-Icon--MoreVertical:before{content:"\f2bc"}.ms-Icon--MountainClimbing:before{content:"\f6db"}.ms-Icon--Move:before{content:"\e7c2"}.ms-Icon--Movers:before{content:"\ebcd"}.ms-Icon--MoveToFolder:before{content:"\e8de"}.ms-Icon--MSNLogo:before{content:"\eb6c"}.ms-Icon--MSNVideos:before{content:"\eb1c"}.ms-Icon--MSNVideosSolid:before{content:"\f2da"}[dir=ltr] .ms-Icon--MultiSelect:before{content:"\e762"}[dir=rtl] .ms-Icon--MultiSelect:before{content:"\ea98"}[dir=ltr] .ms-Icon--MultiSelectMirrored:before{content:"\ea98"}[dir=rtl] .ms-Icon--MultiSelectMirrored:before{content:"\e762"}.ms-Icon--MusicInCollection:before{content:"\e940"}.ms-Icon--MusicInCollectionFill:before{content:"\ea36"}.ms-Icon--MusicNote:before{content:"\ec4f"}.ms-Icon--MuteChat:before{content:"\f17a"}.ms-Icon--MyMoviesTV:before{content:"\ee6c"}.ms-Icon--Nav2DMapView:before{content:"\e800"}[dir=ltr] .ms-Icon--NavigateBack:before{content:"\f2dd"}[dir=rtl] .ms-Icon--NavigateBack:before{content:"\f2de"}[dir=ltr] .ms-Icon--NavigateBackMirrored:before{content:"\f2de"}[dir=rtl] .ms-Icon--NavigateBackMirrored:before{content:"\f2dd"}.ms-Icon--NavigateExternalInline:before{content:"\f35f"}[dir=ltr] .ms-Icon--NavigateForward:before{content:"\f2df"}[dir=rtl] .ms-Icon--NavigateForward:before{content:"\f2e0"}[dir=ltr] .ms-Icon--NavigateForwardMirrored:before{content:"\f2e0"}[dir=rtl] .ms-Icon--NavigateForwardMirrored:before{content:"\f2df"}.ms-Icon--NavigationFlipper:before{content:"\f51d"}.ms-Icon--NetworkTower:before{content:"\ec05"}.ms-Icon--NewAnalyticsQuery:before{content:"\f1e0"}.ms-Icon--NewFolder:before{content:"\e8f4"}.ms-Icon--NewMail:before{content:"\f7ea"}.ms-Icon--News:before{content:"\e900"}.ms-Icon--NewsSearch:before{content:"\f4e9"}.ms-Icon--NewTeamProject:before{content:"\f2b2"}.ms-Icon--Next:before{content:"\e893"}.ms-Icon--NormalWeight:before{content:"\f4ef"}.ms-Icon--NoteForward:before{content:"\ed99"}.ms-Icon--NotePinned:before{content:"\ed9a"}.ms-Icon--NoteReply:before{content:"\ed98"}.ms-Icon--NotExecuted:before{content:"\f440"}.ms-Icon--NotImpactedSolid:before{content:"\f441"}.ms-Icon--NugetLogo:before{content:"\f44c"}.ms-Icon--NumberedList:before{content:"\ea1c"}[dir=ltr] .ms-Icon--NumberedListNumber:before{content:"\f797"}[dir=rtl] .ms-Icon--NumberedListNumber:before{content:"\f799"}[dir=ltr] .ms-Icon--NumberedListNumberMirrored:before{content:"\f799"}[dir=rtl] .ms-Icon--NumberedListNumberMirrored:before{content:"\f797"}[dir=ltr] .ms-Icon--NumberedListText:before{content:"\f796"}[dir=rtl] .ms-Icon--NumberedListText:before{content:"\f798"}[dir=ltr] .ms-Icon--NumberedListTextMirrored:before{content:"\f798"}[dir=rtl] .ms-Icon--NumberedListTextMirrored:before{content:"\f796"}.ms-Icon--NumberField:before{content:"\edc4"}.ms-Icon--NumberSequence:before{content:"\f52a"}.ms-Icon--NumberSymbol:before{content:"\f7ac"}.ms-Icon--Octagon:before{content:"\f4fd"}.ms-Icon--OEM:before{content:"\e74c"}.ms-Icon--OfficeAddinsLogo:before{content:"\eec7"}.ms-Icon--OfficeAssistantLogo:before{content:"\edce"}.ms-Icon--OfficeChat:before{content:"\f70f"}.ms-Icon--OfficeChatSolid:before{content:"\f710"}.ms-Icon--OfficeFormsLogo:before{content:"\f434"}.ms-Icon--OfficeFormsLogo16:before{content:"\f436"}.ms-Icon--OfficeFormsLogo24:before{content:"\f43b"}.ms-Icon--OfficeFormsLogoFill:before{content:"\f435"}.ms-Icon--OfficeFormsLogoFill16:before{content:"\f437"}.ms-Icon--OfficeFormsLogoFill24:before{content:"\f43c"}.ms-Icon--OfficeFormsLogoInverse:before{content:"\ef86"}.ms-Icon--OfficeFormsLogoInverse16:before{content:"\f433"}.ms-Icon--OfficeFormsLogoInverse24:before{content:"\f43a"}.ms-Icon--OfficeLogo:before{content:"\eb6e"}.ms-Icon--OfficeStoreLogo:before{content:"\edcf"}.ms-Icon--OfficeVideoLogo:before{content:"\f282"}.ms-Icon--OfficeVideoLogoFill:before{content:"\f283"}.ms-Icon--OfficeVideoLogoInverse:before{content:"\ed7a"}.ms-Icon--OfflineOneDriveParachute:before{content:"\eec8"}.ms-Icon--OfflineOneDriveParachuteDisabled:before{content:"\eec9"}.ms-Icon--OfflineStorage:before{content:"\ec8c"}.ms-Icon--OfflineStorageSolid:before{content:"\f34e"}.ms-Icon--Onboarding:before{content:"\f3ba"}.ms-Icon--OneDriveAdd:before{content:"\ef32"}.ms-Icon--OneDriveFolder16:before{content:"\f53b"}.ms-Icon--OneDriveLogo:before{content:"\e941"}.ms-Icon--OneNoteEduLogoInverse:before{content:"\edd0"}.ms-Icon--OneNoteLogo:before{content:"\f1e7"}.ms-Icon--OneNoteLogo16:before{content:"\f39a"}.ms-Icon--OneNoteLogoFill:before{content:"\f1e8"}.ms-Icon--OneNoteLogoFill16:before{content:"\f39b"}.ms-Icon--OneNoteLogoInverse:before{content:"\ec0d"}.ms-Icon--OneNoteLogoInverse16:before{content:"\f399"}.ms-Icon--OpenEnrollment:before{content:"\ef1c"}.ms-Icon--OpenFile:before{content:"\e8e5"}.ms-Icon--OpenFolderHorizontal:before{content:"\ed25"}.ms-Icon--OpenInNewTab:before{content:"\f6ab"}.ms-Icon--OpenInNewWindow:before{content:"\e8a7"}[dir=ltr] .ms-Icon--OpenPane:before{content:"\e8a0"}[dir=rtl] .ms-Icon--OpenPane:before{content:"\ea5b"}[dir=ltr] .ms-Icon--OpenPaneMirrored:before{content:"\ea5b"}[dir=rtl] .ms-Icon--OpenPaneMirrored:before{content:"\e8a0"}.ms-Icon--OpenSource:before{content:"\ebc2"}[dir=ltr] .ms-Icon--OpenWith:before{content:"\e7ac"}[dir=rtl] .ms-Icon--OpenWith:before{content:"\ea5c"}[dir=ltr] .ms-Icon--OpenWithMirrored:before{content:"\ea5c"}[dir=rtl] .ms-Icon--OpenWithMirrored:before{content:"\e7ac"}.ms-Icon--Org:before{content:"\eca6"}.ms-Icon--Orientation:before{content:"\e8b4"}.ms-Icon--Orientation2:before{content:"\f7e1"}.ms-Icon--OutlookLogo:before{content:"\f1e9"}.ms-Icon--OutlookLogo16:before{content:"\f39d"}.ms-Icon--OutlookLogoFill:before{content:"\f1ea"}.ms-Icon--OutlookLogoFill16:before{content:"\f39e"}.ms-Icon--OutlookLogoInverse:before{content:"\eb6d"}.ms-Icon--OutlookLogoInverse16:before{content:"\f39c"}.ms-Icon--OutOfOffice:before{content:"\ed34"}.ms-Icon--Package:before{content:"\e7b8"}.ms-Icon--Packages:before{content:"\f318"}.ms-Icon--Padding:before{content:"\f518"}.ms-Icon--PaddingBottom:before{content:"\f51a"}.ms-Icon--PaddingLeft:before{content:"\f51b"}.ms-Icon--PaddingRight:before{content:"\f51c"}.ms-Icon--PaddingTop:before{content:"\f519"}.ms-Icon--Page:before{content:"\e7c3"}.ms-Icon--PageAdd:before{content:"\ea1a"}.ms-Icon--PageArrowRight:before{content:"\efb8"}.ms-Icon--PageCheckedin:before{content:"\f104"}.ms-Icon--PageCheckedOut:before{content:"\f02c"}.ms-Icon--PageData:before{content:"\e31c"}.ms-Icon--PageEdit:before{content:"\efb6"}.ms-Icon--PageHeader:before{content:"\ecee"}.ms-Icon--PageHeaderEdit:before{content:"\e31d"}.ms-Icon--PageLeft:before{content:"\e760"}.ms-Icon--PageLink:before{content:"\e302"}.ms-Icon--PageList:before{content:"\f106"}.ms-Icon--PageListFilter:before{content:"\f813"}[dir=ltr] .ms-Icon--PageListSolid:before{content:"\f33a"}[dir=rtl] .ms-Icon--PageListSolid:before{content:"\f33b"}[dir=ltr] .ms-Icon--PageListMirroredSolid:before{content:"\f33b"}[dir=rtl] .ms-Icon--PageListMirroredSolid:before{content:"\f33a"}.ms-Icon--PageLock:before{content:"\f43f"}.ms-Icon--PageRemove:before{content:"\efba"}.ms-Icon--PageRight:before{content:"\e761"}.ms-Icon--PageShared:before{content:"\f02d"}.ms-Icon--PageSolid:before{content:"\e729"}.ms-Icon--PanoIndicator:before{content:"\e7b0"}.ms-Icon--Parachute:before{content:"\f351"}.ms-Icon--ParachuteSolid:before{content:"\f352"}.ms-Icon--Parameter:before{content:"\f306"}[dir=ltr] .ms-Icon--ParkingLocation:before{content:"\e811"}[dir=rtl] .ms-Icon--ParkingLocation:before{content:"\ea5e"}[dir=ltr] .ms-Icon--ParkingLocationMirrored:before{content:"\ea5e"}[dir=rtl] .ms-Icon--ParkingLocationMirrored:before{content:"\e811"}[dir=ltr] .ms-Icon--ParkingSolid:before{content:"\f34a"}[dir=rtl] .ms-Icon--ParkingSolid:before{content:"\f34b"}[dir=ltr] .ms-Icon--ParkingMirroredSolid:before{content:"\f34b"}[dir=rtl] .ms-Icon--ParkingMirroredSolid:before{content:"\f34a"}.ms-Icon--PartlyCloudyDay:before{content:"\e9c0"}.ms-Icon--PartlyCloudyNight:before{content:"\e9c1"}.ms-Icon--PartyLeader:before{content:"\eca7"}.ms-Icon--PassiveAuthentication:before{content:"\f32a"}.ms-Icon--PasswordField:before{content:"\f6aa"}.ms-Icon--Paste:before{content:"\e77f"}.ms-Icon--PasteAsCode:before{content:"\f5d6"}.ms-Icon--PasteAsText:before{content:"\f5d5"}.ms-Icon--Pause:before{content:"\e769"}.ms-Icon--PaymentCard:before{content:"\e8c7"}.ms-Icon--PC1:before{content:"\e977"}.ms-Icon--PDF:before{content:"\ea90"}.ms-Icon--PencilReply:before{content:"\ef7b"}.ms-Icon--Pentagon:before{content:"\f4ff"}.ms-Icon--PenWorkspace:before{content:"\edc6"}.ms-Icon--People:before{content:"\e716"}.ms-Icon--PeopleAdd:before{content:"\ea15"}.ms-Icon--PeopleAlert:before{content:"\ed93"}.ms-Icon--PeopleBlock:before{content:"\ed91"}.ms-Icon--PeoplePause:before{content:"\ed94"}.ms-Icon--PeopleRepeat:before{content:"\ed92"}.ms-Icon--Permissions:before{content:"\e8d7"}.ms-Icon--PermissionsSolid:before{content:"\f349"}.ms-Icon--Personalize:before{content:"\e771"}.ms-Icon--Phishing:before{content:"\f679"}.ms-Icon--Phone:before{content:"\e717"}.ms-Icon--Photo:before{content:"\e91b"}.ms-Icon--Photo2:before{content:"\eb9f"}.ms-Icon--Photo2Add:before{content:"\ecab"}.ms-Icon--Photo2Fill:before{content:"\f79f"}.ms-Icon--Photo2Remove:before{content:"\ecac"}.ms-Icon--PhotoCollection:before{content:"\e7aa"}.ms-Icon--PhotoVideoMedia:before{content:"\f0b1"}.ms-Icon--Picture:before{content:"\e8b9"}.ms-Icon--PictureCenter:before{content:"\f522"}.ms-Icon--PictureFill:before{content:"\f523"}.ms-Icon--PictureLibrary:before{content:"\eec2"}.ms-Icon--PicturePosition:before{content:"\f524"}.ms-Icon--PictureStretch:before{content:"\f525"}.ms-Icon--PictureTile:before{content:"\f526"}.ms-Icon--PieDouble:before{content:"\eb04"}.ms-Icon--PieSingle:before{content:"\eb05"}.ms-Icon--PieSingleSolid:before{content:"\f530"}.ms-Icon--Pill:before{content:"\eacb"}.ms-Icon--Pin:before{content:"\e718"}.ms-Icon--Pinned:before{content:"\e840"}.ms-Icon--PinnedFill:before{content:"\e842"}.ms-Icon--PinnedSolid:before{content:"\f676"}.ms-Icon--PinSolid12:before{content:"\e352"}.ms-Icon--PinSolidOff12:before{content:"\e353"}.ms-Icon--PivotChart:before{content:"\f24c"}.ms-Icon--PlainText:before{content:"\f834"}.ms-Icon--PlannerLogo:before{content:"\edd1"}.ms-Icon--PlanView:before{content:"\f360"}.ms-Icon--Play:before{content:"\e768"}.ms-Icon--PlaybackRate1x:before{content:"\ec57"}.ms-Icon--PlayerSettings:before{content:"\ef58"}.ms-Icon--PlayResume:before{content:"\f2c6"}.ms-Icon--PlayReverse:before{content:"\f3e5"}.ms-Icon--PlayReverseResume:before{content:"\f3e4"}.ms-Icon--Plug:before{content:"\f300"}.ms-Icon--PlugConnected:before{content:"\f302"}.ms-Icon--PlugDisconnected:before{content:"\f303"}.ms-Icon--PlugSolid:before{content:"\f301"}.ms-Icon--POI:before{content:"\ecaf"}.ms-Icon--POISolid:before{content:"\f2d1"}.ms-Icon--PollResults:before{content:"\f8a0"}.ms-Icon--PostUpdate:before{content:"\e8f3"}.ms-Icon--PowerApps:before{content:"\edd2"}.ms-Icon--PowerApps2Logo:before{content:"\f092"}.ms-Icon--PowerAppsCDS:before{content:"\e377"}.ms-Icon--PowerAppsLogo:before{content:"\f091"}.ms-Icon--PowerBILogo:before{content:"\ea1e"}.ms-Icon--PowerBILogo16:before{content:"\f790"}.ms-Icon--PowerBILogoBackplate16:before{content:"\f791"}.ms-Icon--PowerButton:before{content:"\e7e8"}.ms-Icon--PowerPointDocument:before{content:"\ef72"}.ms-Icon--PowerPointLogo:before{content:"\f1eb"}.ms-Icon--PowerPointLogo16:before{content:"\f394"}.ms-Icon--PowerPointLogoFill:before{content:"\f1ec"}.ms-Icon--PowerPointLogoFill16:before{content:"\f395"}.ms-Icon--PowerPointLogoInverse:before{content:"\ec2a"}.ms-Icon--PowerPointLogoInverse16:before{content:"\f393"}.ms-Icon--PowerShell:before{content:"\f1fd"}.ms-Icon--PowerShell2:before{content:"\f730"}.ms-Icon--Precipitation:before{content:"\e9cf"}.ms-Icon--PresenceChickletVideo:before{content:"\e979"}.ms-Icon--Presentation:before{content:"\f6e4"}.ms-Icon--Presentation12:before{content:"\f6e5"}.ms-Icon--Preview:before{content:"\e8ff"}.ms-Icon--PreviewLink:before{content:"\e8a1"}.ms-Icon--Previous:before{content:"\e892"}.ms-Icon--PrimaryCalendar:before{content:"\f4ae"}.ms-Icon--Print:before{content:"\e749"}.ms-Icon--PrintfaxPrinterFile:before{content:"\e956"}.ms-Icon--Processing:before{content:"\e9f5"}.ms-Icon--ProcessMetaTask:before{content:"\f290"}.ms-Icon--Product:before{content:"\ecdc"}.ms-Icon--ProductCatalog:before{content:"\efe8"}.ms-Icon--ProductionFloorManagement:before{content:"\ee29"}.ms-Icon--ProductList:before{content:"\e31e"}.ms-Icon--ProductRelease:before{content:"\ee2e"}.ms-Icon--ProductVariant:before{content:"\ee30"}.ms-Icon--ProfileSearch:before{content:"\ef35"}.ms-Icon--ProFootball:before{content:"\eb27"}.ms-Icon--ProgressLoopInner:before{content:"\ecde"}.ms-Icon--ProgressLoopOuter:before{content:"\ecdf"}.ms-Icon--ProgressRingDots:before{content:"\f16a"}.ms-Icon--ProHockey:before{content:"\eb28"}.ms-Icon--ProjectCollection:before{content:"\f363"}.ms-Icon--ProjectDocument:before{content:"\f759"}.ms-Icon--ProjectLogo16:before{content:"\f480"}.ms-Icon--ProjectLogo32:before{content:"\f47e"}.ms-Icon--ProjectLogoFill16:before{content:"\f481"}.ms-Icon--ProjectLogoFill32:before{content:"\f47f"}.ms-Icon--ProjectLogoInverse:before{content:"\edd4"}.ms-Icon--PromotedDatabase:before{content:"\f77d"}.ms-Icon--ProtectedDocument:before{content:"\e8a6"}.ms-Icon--ProtectionCenterLogo32:before{content:"\f494"}.ms-Icon--ProtectRestrict:before{content:"\f22a"}.ms-Icon--PublicCalendar:before{content:"\ef6d"}[dir=ltr] .ms-Icon--PublicContactCard:before{content:"\ef6e"}[dir=rtl] .ms-Icon--PublicContactCard:before{content:"\f230"}[dir=ltr] .ms-Icon--PublicContactCardMirrored:before{content:"\f230"}[dir=rtl] .ms-Icon--PublicContactCardMirrored:before{content:"\ef6e"}.ms-Icon--PublicEmail:before{content:"\ef6f"}.ms-Icon--PublicFolder:before{content:"\ef70"}.ms-Icon--PublishContent:before{content:"\f0d4"}.ms-Icon--PublishCourse:before{content:"\f699"}.ms-Icon--PublisherLogo:before{content:"\f1ed"}.ms-Icon--PublisherLogo16:before{content:"\f3a0"}.ms-Icon--PublisherLogoFill:before{content:"\f1ee"}.ms-Icon--PublisherLogoFill16:before{content:"\f3a1"}.ms-Icon--PublisherLogoInverse16:before{content:"\f39f"}.ms-Icon--Puzzle:before{content:"\ea86"}.ms-Icon--PY:before{content:"\f2f9"}.ms-Icon--PythonLanguage:before{content:"\f2f8"}.ms-Icon--QandA:before{content:"\f8a2"}.ms-Icon--QandAMirror:before{content:"\f8a3"}.ms-Icon--QRCode:before{content:"\ed14"}.ms-Icon--QuadColumn:before{content:"\f66f"}.ms-Icon--Quantity:before{content:"\e9f8"}.ms-Icon--QuarterCircle:before{content:"\f502"}.ms-Icon--QueryList:before{content:"\f2b8"}[dir=ltr] .ms-Icon--Questionnaire:before{content:"\ee19"}[dir=rtl] .ms-Icon--Questionnaire:before{content:"\ee4b"}[dir=ltr] .ms-Icon--QuestionnaireMirrored:before{content:"\ee4b"}[dir=rtl] .ms-Icon--QuestionnaireMirrored:before{content:"\ee19"}.ms-Icon--QuickNote:before{content:"\e70b"}.ms-Icon--QuickNoteSolid:before{content:"\f338"}.ms-Icon--R:before{content:"\f4eb"}.ms-Icon--RadioBtnOff:before{content:"\ecca"}.ms-Icon--RadioBtnOn:before{content:"\eccb"}.ms-Icon--RadioBullet:before{content:"\e915"}.ms-Icon--Rain:before{content:"\e9c4"}.ms-Icon--RainShowersDay:before{content:"\e9c3"}.ms-Icon--RainShowersNight:before{content:"\ea0f"}.ms-Icon--RainSnow:before{content:"\e9c7"}.ms-Icon--RawSource:before{content:"\f299"}.ms-Icon--Read:before{content:"\e8c3"}.ms-Icon--ReadingMode:before{content:"\e736"}.ms-Icon--ReadingModeSolid:before{content:"\f33d"}.ms-Icon--ReadOutLoud:before{content:"\f112"}.ms-Icon--RealEstate:before{content:"\e758"}.ms-Icon--ReceiptCheck:before{content:"\ef5b"}.ms-Icon--ReceiptForward:before{content:"\ef59"}.ms-Icon--ReceiptReply:before{content:"\ef5a"}[dir=ltr] .ms-Icon--ReceiptTentative:before{content:"\f41a"}[dir=rtl] .ms-Icon--ReceiptTentative:before{content:"\f41b"}[dir=ltr] .ms-Icon--ReceiptTentativeMirrored:before{content:"\f41b"}[dir=rtl] .ms-Icon--ReceiptTentativeMirrored:before{content:"\f41a"}.ms-Icon--ReceiptUndelivered:before{content:"\f419"}.ms-Icon--Recent:before{content:"\e823"}.ms-Icon--Record2:before{content:"\ea3f"}.ms-Icon--RecruitmentManagement:before{content:"\ee12"}.ms-Icon--RectangleShape:before{content:"\f1a9"}.ms-Icon--RectangleShapeSolid:before{content:"\f640"}.ms-Icon--RectangularClipping:before{content:"\f407"}.ms-Icon--RecurringEvent:before{content:"\ef5d"}.ms-Icon--RecurringTask:before{content:"\edb2"}.ms-Icon--RecycleBin:before{content:"\ef87"}.ms-Icon--Redeploy:before{content:"\f29e"}.ms-Icon--RedEye:before{content:"\e7b3"}.ms-Icon--Redo:before{content:"\e7a6"}.ms-Icon--Refresh:before{content:"\e72c"}.ms-Icon--Relationship:before{content:"\f003"}.ms-Icon--ReleaseDefinition:before{content:"\f6ea"}.ms-Icon--ReleaseGate:before{content:"\f7be"}.ms-Icon--ReleaseGateCheck:before{content:"\f7bf"}.ms-Icon--ReleaseGateError:before{content:"\f7c0"}.ms-Icon--ReminderGroup:before{content:"\ebf8"}.ms-Icon--ReminderPerson:before{content:"\ebf7"}.ms-Icon--ReminderTime:before{content:"\ebf9"}.ms-Icon--Remote:before{content:"\e8af"}.ms-Icon--Remove:before{content:"\e738"}.ms-Icon--RemoveEvent:before{content:"\ed8a"}.ms-Icon--RemoveFilter:before{content:"\eb08"}.ms-Icon--RemoveFromShoppingList:before{content:"\f7d5"}.ms-Icon--RemoveFromTrash:before{content:"\f82b"}.ms-Icon--RemoveLink:before{content:"\ed90"}.ms-Icon--RemoveLinkChain:before{content:"\f79a"}.ms-Icon--RemoveLinkX:before{content:"\f79b"}.ms-Icon--RemoveOccurrence:before{content:"\ed9b"}.ms-Icon--Rename:before{content:"\e8ac"}.ms-Icon--RenewalCurrent:before{content:"\f545"}.ms-Icon--RenewalFuture:before{content:"\f546"}.ms-Icon--ReopenPages:before{content:"\ed50"}.ms-Icon--Repair:before{content:"\e90f"}.ms-Icon--RepeatAll:before{content:"\e8ee"}.ms-Icon--RepeatOne:before{content:"\e8ed"}.ms-Icon--ReplyAllAlt:before{content:"\ef5f"}[dir=ltr] .ms-Icon--ReplyAll:before{content:"\ee0a"}[dir=rtl] .ms-Icon--ReplyAll:before{content:"\ee36"}[dir=ltr] .ms-Icon--ReplyAllMirrored:before{content:"\ee36"}[dir=rtl] .ms-Icon--ReplyAllMirrored:before{content:"\ee0a"}.ms-Icon--ReplyAlt:before{content:"\ef5e"}[dir=ltr] .ms-Icon--Reply:before{content:"\e97a"}[dir=rtl] .ms-Icon--Reply:before{content:"\ee35"}[dir=ltr] .ms-Icon--ReplyMirrored:before{content:"\ee35"}[dir=rtl] .ms-Icon--ReplyMirrored:before{content:"\e97a"}.ms-Icon--Repo:before{content:"\f2cb"}.ms-Icon--ReportAdd:before{content:"\f52c"}.ms-Icon--ReportDocument:before{content:"\e9f9"}.ms-Icon--ReportHacked:before{content:"\e730"}[dir=ltr] .ms-Icon--ReportLibrary:before{content:"\eebb"}[dir=rtl] .ms-Icon--ReportLibrary:before{content:"\eebc"}[dir=ltr] .ms-Icon--ReportLibraryMirrored:before{content:"\eebc"}[dir=rtl] .ms-Icon--ReportLibraryMirrored:before{content:"\eebb"}.ms-Icon--ReportLock:before{content:"\f875"}.ms-Icon--ReportWarning:before{content:"\f569"}.ms-Icon--RepoSolid:before{content:"\f2cc"}.ms-Icon--Rerun:before{content:"\f8a1"}.ms-Icon--ReservationOrders:before{content:"\f845"}.ms-Icon--ResetDevice:before{content:"\ed10"}.ms-Icon--ResponsesMenu:before{content:"\f768"}.ms-Icon--ReturnKey:before{content:"\e751"}.ms-Icon--ReturnToSession:before{content:"\ed24"}[dir=ltr] .ms-Icon--ReviewRequestSolid:before{content:"\f356"}[dir=rtl] .ms-Icon--ReviewRequestSolid:before{content:"\f357"}[dir=ltr] .ms-Icon--ReviewRequestMirroredSolid:before{content:"\f357"}[dir=rtl] .ms-Icon--ReviewRequestMirroredSolid:before{content:"\f356"}.ms-Icon--ReviewResponseSolid:before{content:"\f358"}.ms-Icon--ReviewSolid:before{content:"\f355"}.ms-Icon--RevToggleKey:before{content:"\e845"}.ms-Icon--Rewind:before{content:"\eb9e"}.ms-Icon--Ribbon:before{content:"\e9d1"}.ms-Icon--RibbonSolid:before{content:"\f345"}.ms-Icon--RightDoubleQuote:before{content:"\e9b1"}.ms-Icon--RightTriangle:before{content:"\f500"}.ms-Icon--Ringer:before{content:"\ea8f"}.ms-Icon--RingerOff:before{content:"\f2c5"}.ms-Icon--RingerRemove:before{content:"\f279"}.ms-Icon--RingerSolid:before{content:"\ef3a"}.ms-Icon--Robot:before{content:"\e99a"}.ms-Icon--Rocket:before{content:"\f3b3"}.ms-Icon--Room:before{content:"\ed9f"}.ms-Icon--Rotate:before{content:"\e7ad"}.ms-Icon--Rotate90Clockwise:before{content:"\f80d"}.ms-Icon--Rotate90CounterClockwise:before{content:"\f80e"}.ms-Icon--RowsChild:before{content:"\f29c"}.ms-Icon--RowsGroup:before{content:"\f29b"}.ms-Icon--Rugby:before{content:"\eb2d"}.ms-Icon--Running:before{content:"\eada"}.ms-Icon--Sad:before{content:"\e757"}.ms-Icon--SadSolid:before{content:"\f33e"}.ms-Icon--Save:before{content:"\e74e"}.ms-Icon--SaveAll:before{content:"\f203"}.ms-Icon--SaveAndClose:before{content:"\f038"}.ms-Icon--SaveAs:before{content:"\e792"}.ms-Icon--SaveTemplate:before{content:"\f6ec"}.ms-Icon--SaveToMobile:before{content:"\f7e0"}.ms-Icon--Savings:before{content:"\eb0b"}.ms-Icon--ScaleUp:before{content:"\ed09"}.ms-Icon--ScaleVolume:before{content:"\f18c"}.ms-Icon--ScatterChart:before{content:"\efeb"}.ms-Icon--ScheduleEventAction:before{content:"\f1ef"}.ms-Icon--SchoolDataSyncLogo:before{content:"\e34c"}.ms-Icon--ScopeTemplate:before{content:"\f2b0"}.ms-Icon--ScreenCast:before{content:"\f7e2"}.ms-Icon--Script:before{content:"\f03a"}.ms-Icon--ScrollUpDown:before{content:"\ec8f"}.ms-Icon--Search:before{content:"\e721"}.ms-Icon--SearchAndApps:before{content:"\e773"}.ms-Icon--SearchBookmark:before{content:"\f5b8"}.ms-Icon--SearchCalendar:before{content:"\f4af"}.ms-Icon--SearchData:before{content:"\f3f1"}[dir=ltr] .ms-Icon--SearchIssue:before{content:"\f09a"}[dir=rtl] .ms-Icon--SearchIssue:before{content:"\f09b"}[dir=ltr] .ms-Icon--SearchIssueMirrored:before{content:"\f09b"}[dir=rtl] .ms-Icon--SearchIssueMirrored:before{content:"\f09a"}.ms-Icon--SearchNearby:before{content:"\e820"}.ms-Icon--SecondaryNav:before{content:"\f814"}.ms-Icon--Section:before{content:"\ec0c"}.ms-Icon--Sections:before{content:"\ef76"}.ms-Icon--SecurityGroup:before{content:"\ed85"}.ms-Icon--SeeDo:before{content:"\e808"}.ms-Icon--SelectAll:before{content:"\e8b3"}.ms-Icon--Sell:before{content:"\eb0c"}.ms-Icon--SemiboldWeight:before{content:"\f4f0"}[dir=ltr] .ms-Icon--Send:before{content:"\e724"}[dir=rtl] .ms-Icon--Send:before{content:"\ea63"}[dir=ltr] .ms-Icon--SendMirrored:before{content:"\ea63"}[dir=rtl] .ms-Icon--SendMirrored:before{content:"\e724"}.ms-Icon--Separator:before{content:"\f35e"}.ms-Icon--Server:before{content:"\f201"}.ms-Icon--ServerEnviroment:before{content:"\f29f"}.ms-Icon--ServerProcesses:before{content:"\f1fe"}.ms-Icon--SetAction:before{content:"\f071"}.ms-Icon--Settings:before{content:"\e713"}.ms-Icon--ShakeDevice:before{content:"\f80a"}.ms-Icon--Shapes:before{content:"\ec7c"}.ms-Icon--Share:before{content:"\e72d"}.ms-Icon--ShareiOS:before{content:"\ef79"}.ms-Icon--SharepointAppIcon16:before{content:"\e365"}.ms-Icon--SharepointLogo:before{content:"\f27e"}.ms-Icon--SharepointLogoFill:before{content:"\f27f"}.ms-Icon--SharepointLogoInverse:before{content:"\ed18"}.ms-Icon--Shield:before{content:"\ea18"}.ms-Icon--ShieldAlert:before{content:"\f7d7"}.ms-Icon--ShieldSolid:before{content:"\f340"}.ms-Icon--Shirt:before{content:"\ed00"}.ms-Icon--Shop:before{content:"\e719"}.ms-Icon--ShoppingCart:before{content:"\e7bf"}.ms-Icon--ShoppingCartSolid:before{content:"\f342"}.ms-Icon--ShopServer:before{content:"\f2b6"}.ms-Icon--ShowGrid:before{content:"\f7e3"}[dir=ltr] .ms-Icon--ShowResults:before{content:"\e8bc"}[dir=rtl] .ms-Icon--ShowResults:before{content:"\ea65"}[dir=ltr] .ms-Icon--ShowResultsMirrored:before{content:"\ea65"}[dir=rtl] .ms-Icon--ShowResultsMirrored:before{content:"\e8bc"}.ms-Icon--ShowTimeAs:before{content:"\f787"}[dir=ltr] .ms-Icon--SidePanel:before{content:"\ef52"}[dir=rtl] .ms-Icon--SidePanel:before{content:"\f221"}[dir=ltr] .ms-Icon--SidePanelMirrored:before{content:"\f221"}[dir=rtl] .ms-Icon--SidePanelMirrored:before{content:"\ef52"}.ms-Icon--Signin:before{content:"\f286"}.ms-Icon--SignOut:before{content:"\f3b1"}.ms-Icon--SingleBookmark:before{content:"\edff"}.ms-Icon--SingleBookmarkSolid:before{content:"\ee00"}.ms-Icon--SingleColumn:before{content:"\f1d3"}.ms-Icon--SingleColumnEdit:before{content:"\f321"}.ms-Icon--SIPMove:before{content:"\e759"}.ms-Icon--SiteScan:before{content:"\ebec"}.ms-Icon--SizeLegacy:before{content:"\e2b2"}.ms-Icon--SkiResorts:before{content:"\eb45"}.ms-Icon--SkypeArrow:before{content:"\f748"}.ms-Icon--SkypeCheck:before{content:"\ef80"}.ms-Icon--SkypeCircleArrow:before{content:"\f747"}.ms-Icon--SkypeCircleCheck:before{content:"\ef7d"}.ms-Icon--SkypeCircleClock:before{content:"\ef7e"}.ms-Icon--SkypeCircleMinus:before{content:"\ef7f"}.ms-Icon--SkypeCircleSlash:before{content:"\f825"}.ms-Icon--SkypeClock:before{content:"\ef81"}.ms-Icon--SkypeForBusinessLogo:before{content:"\f0fc"}.ms-Icon--SkypeForBusinessLogo16:before{content:"\f40f"}.ms-Icon--SkypeForBusinessLogoFill:before{content:"\f27d"}.ms-Icon--SkypeForBusinessLogoFill16:before{content:"\f410"}.ms-Icon--SkypeLogo:before{content:"\eb6f"}.ms-Icon--SkypeLogo16:before{content:"\f40e"}.ms-Icon--SkypeMessage:before{content:"\ef83"}.ms-Icon--SkypeMinus:before{content:"\ef82"}.ms-Icon--SkypeSlash:before{content:"\f826"}.ms-Icon--Slider:before{content:"\f527"}.ms-Icon--SliderHandleSize:before{content:"\f528"}.ms-Icon--SliderThumb:before{content:"\ec13"}.ms-Icon--Slideshow:before{content:"\e786"}.ms-Icon--SmartGlassRemote:before{content:"\f80b"}.ms-Icon--SnapToGrid:before{content:"\f7e4"}.ms-Icon--Snooze:before{content:"\f4bd"}.ms-Icon--Snow:before{content:"\e9c8"}.ms-Icon--Snowflake:before{content:"\eb46"}.ms-Icon--SnowShowerDay:before{content:"\e9fd"}.ms-Icon--SnowShowerNight:before{content:"\ea11"}.ms-Icon--Soccer:before{content:"\eb21"}.ms-Icon--SocialListeningLogo:before{content:"\ed7c"}.ms-Icon--Sort:before{content:"\e8cb"}.ms-Icon--SortDown:before{content:"\ee69"}.ms-Icon--SortLines:before{content:"\e9d0"}.ms-Icon--SortUp:before{content:"\ee68"}.ms-Icon--Source:before{content:"\eb1b"}.ms-Icon--Spacer:before{content:"\f40d"}.ms-Icon--Speakers:before{content:"\e7f5"}.ms-Icon--SpecialEvent:before{content:"\f536"}.ms-Icon--SpeedHigh:before{content:"\ec4a"}.ms-Icon--Split:before{content:"\edbc"}.ms-Icon--SplitObject:before{content:"\f547"}.ms-Icon--Sprint:before{content:"\f3b0"}.ms-Icon--Squalls:before{content:"\e9cc"}.ms-Icon--SquareShapeSolid:before{content:"\f63d"}.ms-Icon--Stack:before{content:"\f26f"}.ms-Icon--StackColumnChart:before{content:"\e9fc"}.ms-Icon--StackedBarChart:before{content:"\f24d"}.ms-Icon--StackedColumnChart2:before{content:"\f666"}.ms-Icon--StackedColumnChart2Fill:before{content:"\f831"}.ms-Icon--StackedLineChart:before{content:"\f24e"}.ms-Icon--StackIndicator:before{content:"\e7ff"}.ms-Icon--StaffNotebookLogo16:before{content:"\f48e"}.ms-Icon--StaffNotebookLogo32:before{content:"\f48c"}.ms-Icon--StaffNotebookLogoFill16:before{content:"\f48f"}.ms-Icon--StaffNotebookLogoFill32:before{content:"\f48d"}.ms-Icon--StaffNotebookLogoInverted16:before{content:"\f491"}.ms-Icon--StaffNotebookLogoInverted32:before{content:"\f490"}.ms-Icon--Starburst:before{content:"\ef78"}.ms-Icon--StarburstSolid:before{content:"\f33c"}.ms-Icon--StatusCircleBlock:before{content:"\f140"}.ms-Icon--StatusCircleBlock2:before{content:"\f141"}.ms-Icon--StatusCircleCheckmark:before{content:"\f13e"}.ms-Icon--StatusCircleErrorX:before{content:"\f13d"}.ms-Icon--StatusCircleExclamation:before{content:"\f13c"}.ms-Icon--StatusCircleInfo:before{content:"\f13f"}.ms-Icon--StatusCircleInner:before{content:"\f137"}.ms-Icon--StatusCircleOuter:before{content:"\f136"}.ms-Icon--StatusCircleQuestionMark:before{content:"\f142"}.ms-Icon--StatusCircleRing:before{content:"\f138"}.ms-Icon--StatusCircleSync:before{content:"\f143"}.ms-Icon--StatusErrorFull:before{content:"\eb90"}.ms-Icon--StatusTriangle:before{content:"\ea82"}.ms-Icon--StatusTriangleExclamation:before{content:"\f13b"}.ms-Icon--StatusTriangleInner:before{content:"\f13a"}.ms-Icon--StatusTriangleOuter:before{content:"\f139"}.ms-Icon--Step:before{content:"\f241"}.ms-Icon--StepInsert:before{content:"\f242"}.ms-Icon--StepShared:before{content:"\f243"}.ms-Icon--StepSharedAdd:before{content:"\f244"}.ms-Icon--StepSharedInsert:before{content:"\f245"}.ms-Icon--StickyNotesOutlineAppIcon:before{content:"\e36a"}.ms-Icon--StickyNotesSolidAppIcon:before{content:"\e36b"}.ms-Icon--StockDown:before{content:"\eb0f"}.ms-Icon--StockUp:before{content:"\eb11"}.ms-Icon--Stop:before{content:"\e71a"}.ms-Icon--StopSolid:before{content:"\ee95"}.ms-Icon--Stopwatch:before{content:"\e916"}.ms-Icon--StorageOptical:before{content:"\e958"}.ms-Icon--StoreLogo16:before{content:"\ea96"}.ms-Icon--StoreLogoMed20:before{content:"\ea04"}.ms-Icon--Storyboard:before{content:"\f308"}.ms-Icon--Streaming:before{content:"\e93e"}.ms-Icon--StreamingOff:before{content:"\f2bb"}.ms-Icon--StreamLogo:before{content:"\f329"}.ms-Icon--Street:before{content:"\e913"}.ms-Icon--StreetsideSplitMinimize:before{content:"\e802"}.ms-Icon--Strikethrough:before{content:"\ede0"}.ms-Icon--Subscribe:before{content:"\eda1"}.ms-Icon--Subscript:before{content:"\eddf"}.ms-Icon--SubstitutionsIn:before{content:"\eb31"}.ms-Icon--Suitcase:before{content:"\edd3"}.ms-Icon--SunAdd:before{content:"\ef69"}.ms-Icon--Sunny:before{content:"\e9bd"}.ms-Icon--SunQuestionMark:before{content:"\ef6a"}.ms-Icon--Superscript:before{content:"\edde"}.ms-Icon--SurveyQuestions:before{content:"\f01b"}.ms-Icon--SwayLogo16:before{content:"\f484"}.ms-Icon--SwayLogo32:before{content:"\f482"}.ms-Icon--SwayLogoFill16:before{content:"\f485"}.ms-Icon--SwayLogoFill32:before{content:"\f483"}.ms-Icon--SwayLogoInverse:before{content:"\ed29"}.ms-Icon--Switch:before{content:"\e8ab"}.ms-Icon--SwitcherStartEnd:before{content:"\e810"}.ms-Icon--Sync:before{content:"\e895"}.ms-Icon--SyncFolder:before{content:"\e8f7"}.ms-Icon--SyncOccurence:before{content:"\f4a3"}.ms-Icon--SyncStatus:before{content:"\f751"}.ms-Icon--SyncStatusSolid:before{content:"\f752"}.ms-Icon--SyncToPC:before{content:"\ee6e"}.ms-Icon--System:before{content:"\e770"}.ms-Icon--Tab:before{content:"\e7e9"}.ms-Icon--TabCenter:before{content:"\f100"}.ms-Icon--Table:before{content:"\ed86"}.ms-Icon--TableComputed:before{content:"\f8f5"}.ms-Icon--TableGroup:before{content:"\f6d9"}.ms-Icon--TableLink:before{content:"\f77a"}.ms-Icon--Tablet:before{content:"\e70a"}.ms-Icon--TabletMode:before{content:"\ebfc"}.ms-Icon--TabletSelected:before{content:"\ec74"}.ms-Icon--TabOneColumn:before{content:"\f849"}.ms-Icon--TabThreeColumn:before{content:"\f84b"}.ms-Icon--TabTwoColumn:before{content:"\f84a"}.ms-Icon--Tag:before{content:"\e8ec"}.ms-Icon--TagSolid:before{content:"\f70e"}.ms-Icon--TagUnknown:before{content:"\f6df"}.ms-Icon--TagUnknown12:before{content:"\f6e1"}.ms-Icon--TagUnknown12Mirror:before{content:"\f6e2"}.ms-Icon--TagUnknownMirror:before{content:"\f6e0"}.ms-Icon--Taskboard:before{content:"\f1c2"}[dir=ltr] .ms-Icon--TaskGroup:before{content:"\f2ae"}[dir=rtl] .ms-Icon--TaskGroup:before{content:"\f2af"}[dir=ltr] .ms-Icon--TaskGroupMirrored:before{content:"\f2af"}[dir=rtl] .ms-Icon--TaskGroupMirrored:before{content:"\f2ae"}.ms-Icon--TaskLogo:before{content:"\f493"}[dir=ltr] .ms-Icon--TaskManager:before{content:"\edb7"}[dir=rtl] .ms-Icon--TaskManager:before{content:"\edb8"}[dir=ltr] .ms-Icon--TaskManagerMirrored:before{content:"\edb8"}[dir=rtl] .ms-Icon--TaskManagerMirrored:before{content:"\edb7"}.ms-Icon--TaskSolid:before{content:"\f333"}.ms-Icon--Taxi:before{content:"\f4a1"}.ms-Icon--TeamFavorite:before{content:"\f2ad"}.ms-Icon--TeamsLogo:before{content:"\f27b"}.ms-Icon--TeamsLogo16:before{content:"\f40a"}.ms-Icon--TeamsLogoFill:before{content:"\f27c"}.ms-Icon--TeamsLogoFill16:before{content:"\f40b"}.ms-Icon--TeamsLogoInverse:before{content:"\f27a"}.ms-Icon--Teamwork:before{content:"\ea12"}.ms-Icon--Teeth:before{content:"\f4a0"}.ms-Icon--Telemarketer:before{content:"\e7b9"}.ms-Icon--TemporaryUser:before{content:"\ee58"}.ms-Icon--Tennis:before{content:"\eb33"}.ms-Icon--TestAutoSolid:before{content:"\f3a8"}.ms-Icon--TestBeaker:before{content:"\f3a5"}.ms-Icon--TestBeakerSolid:before{content:"\f3a6"}.ms-Icon--TestCase:before{content:"\f3af"}.ms-Icon--TestExploreSolid:before{content:"\f3a7"}.ms-Icon--TestImpactSolid:before{content:"\f3aa"}.ms-Icon--TestParameter:before{content:"\f3ad"}.ms-Icon--TestPlan:before{content:"\f3ab"}.ms-Icon--TestStep:before{content:"\f3ac"}.ms-Icon--TestSuite:before{content:"\f3ae"}.ms-Icon--TestUserSolid:before{content:"\f3a9"}.ms-Icon--TextBox:before{content:"\edc2"}.ms-Icon--TextCallout:before{content:"\f2a2"}.ms-Icon--TextDocument:before{content:"\f029"}.ms-Icon--TextDocumentShared:before{content:"\f02b"}.ms-Icon--TextField:before{content:"\edc3"}.ms-Icon--TextOverflow:before{content:"\f51f"}.ms-Icon--TFVCLogo:before{content:"\f44d"}.ms-Icon--ThisPC:before{content:"\ec4e"}.ms-Icon--ThreeQuarterCircle:before{content:"\f503"}[dir=ltr] .ms-Icon--ThumbnailView:before{content:"\e7b6"}[dir=rtl] .ms-Icon--ThumbnailView:before{content:"\ea67"}[dir=ltr] .ms-Icon--ThumbnailViewMirrored:before{content:"\ea67"}[dir=rtl] .ms-Icon--ThumbnailViewMirrored:before{content:"\e7b6"}.ms-Icon--Thunderstorms:before{content:"\e9c6"}.ms-Icon--Ticket:before{content:"\eb54"}.ms-Icon--Tiles:before{content:"\eca5"}.ms-Icon--Tiles2:before{content:"\ef7c"}.ms-Icon--TimeEntry:before{content:"\ef95"}.ms-Icon--Timeline:before{content:"\ed9c"}.ms-Icon--TimelineDelivery:before{content:"\f2ab"}.ms-Icon--TimelineMatrixView:before{content:"\f361"}.ms-Icon--TimelineProgress:before{content:"\f2aa"}.ms-Icon--TimePicker:before{content:"\e367"}.ms-Icon--Timer:before{content:"\e91e"}.ms-Icon--TimeSheet:before{content:"\ea05"}.ms-Icon--ToDoLogoBottom:before{content:"\f4b3"}.ms-Icon--ToDoLogoInverse:before{content:"\f4bc"}.ms-Icon--ToDoLogoOutline:before{content:"\f75b"}.ms-Icon--ToDoLogoTop:before{content:"\f4b4"}.ms-Icon--ToggleBorder:before{content:"\ec12"}.ms-Icon--ToggleFilled:before{content:"\ec11"}.ms-Icon--ToggleLeft:before{content:"\f19e"}.ms-Icon--ToggleRight:before{content:"\f19f"}.ms-Icon--ToggleThumb:before{content:"\ec14"}.ms-Icon--Toll:before{content:"\f160"}.ms-Icon--Toolbox:before{content:"\eced"}.ms-Icon--Touch:before{content:"\e815"}.ms-Icon--TouchPointer:before{content:"\e7c9"}[dir=ltr] .ms-Icon--Trackers:before{content:"\eadf"}[dir=rtl] .ms-Icon--Trackers:before{content:"\ee92"}[dir=ltr] .ms-Icon--TrackersMirrored:before{content:"\ee92"}[dir=rtl] .ms-Icon--TrackersMirrored:before{content:"\eadf"}.ms-Icon--Train:before{content:"\e7c0"}.ms-Icon--TrainSolid:before{content:"\eb4d"}.ms-Icon--TransferCall:before{content:"\ed95"}.ms-Icon--Transition:before{content:"\f3bc"}.ms-Icon--TransitionEffect:before{content:"\f5b4"}.ms-Icon--TransitionPop:before{content:"\f5b2"}.ms-Icon--TransitionPush:before{content:"\f5b3"}.ms-Icon--Translate:before{content:"\e7b2"}.ms-Icon--Trending12:before{content:"\f62d"}.ms-Icon--TriangleDown12:before{content:"\eed1"}.ms-Icon--TriangleLeft12:before{content:"\eed2"}.ms-Icon--TriangleRight12:before{content:"\eed3"}.ms-Icon--TriangleShape:before{content:"\f1a7"}.ms-Icon--TriangleShapeSolid:before{content:"\f63e"}.ms-Icon--TriangleSolid:before{content:"\ea08"}.ms-Icon--TriangleSolidDown12:before{content:"\eecd"}.ms-Icon--TriangleSolidLeft12:before{content:"\eece"}.ms-Icon--TriangleSolidRight12:before{content:"\eecf"}.ms-Icon--TriangleSolidUp12:before{content:"\eecc"}.ms-Icon--TriangleUp12:before{content:"\eed0"}.ms-Icon--TriggerApproval:before{content:"\f3b2"}.ms-Icon--TriggerAuto:before{content:"\f24a"}.ms-Icon--TriggerUser:before{content:"\f24b"}.ms-Icon--Trim:before{content:"\e78a"}.ms-Icon--TrimEnd:before{content:"\f8bc"}.ms-Icon--TrimStart:before{content:"\f8bb"}.ms-Icon--TripleColumn:before{content:"\f1d5"}.ms-Icon--TripleColumnEdit:before{content:"\f323"}.ms-Icon--TripleColumnWide:before{content:"\f66e"}.ms-Icon--Trophy:before{content:"\ed3f"}.ms-Icon--Trophy2:before{content:"\f1ae"}.ms-Icon--Trophy2Solid:before{content:"\f337"}.ms-Icon--TurnRight:before{content:"\e7db"}.ms-Icon--TVMonitor:before{content:"\e7f4"}.ms-Icon--TVMonitorSelected:before{content:"\ec77"}.ms-Icon--TypeScriptLanguage:before{content:"\f2f7"}.ms-Icon--Umbrella:before{content:"\ec04"}.ms-Icon--Underline:before{content:"\e8dc"}.ms-Icon--Undo:before{content:"\e7a7"}[dir=ltr] .ms-Icon--Uneditable2:before{content:"\f876"}[dir=rtl] .ms-Icon--Uneditable2:before{content:"\f877"}[dir=ltr] .ms-Icon--Uneditable2Mirrored:before{content:"\f877"}[dir=rtl] .ms-Icon--Uneditable2Mirrored:before{content:"\f876"}[dir=ltr] .ms-Icon--Uneditable:before{content:"\ed1d"}[dir=rtl] .ms-Icon--Uneditable:before{content:"\f4b9"}[dir=ltr] .ms-Icon--UneditableMirrored:before{content:"\f4b9"}[dir=rtl] .ms-Icon--UneditableMirrored:before{content:"\ed1d"}[dir=ltr] .ms-Icon--UneditableSolid12:before{content:"\f4b7"}[dir=rtl] .ms-Icon--UneditableSolid12:before{content:"\f4b8"}[dir=ltr] .ms-Icon--UneditableSolidMirrored12:before{content:"\f4b8"}[dir=rtl] .ms-Icon--UneditableSolidMirrored12:before{content:"\f4b7"}.ms-Icon--Unfavorite:before{content:"\e8d9"}.ms-Icon--UngroupObject:before{content:"\f4f2"}.ms-Icon--UnknownCall:before{content:"\ed97"}[dir=ltr] .ms-Icon--Unknown:before{content:"\e9ce"}[dir=rtl] .ms-Icon--Unknown:before{content:"\f22e"}[dir=ltr] .ms-Icon--UnknownMirrored:before{content:"\f22e"}[dir=rtl] .ms-Icon--UnknownMirrored:before{content:"\e9ce"}[dir=ltr] .ms-Icon--UnknownSolid:before{content:"\f2e1"}[dir=rtl] .ms-Icon--UnknownSolid:before{content:"\f2e2"}[dir=ltr] .ms-Icon--UnknownMirroredSolid:before{content:"\f2e2"}[dir=rtl] .ms-Icon--UnknownMirroredSolid:before{content:"\f2e1"}.ms-Icon--Unlock:before{content:"\e785"}.ms-Icon--UnlockSolid:before{content:"\f304"}.ms-Icon--Unpin:before{content:"\e77a"}.ms-Icon--UnpublishContent:before{content:"\e31f"}.ms-Icon--UnSetColor:before{content:"\f3f9"}.ms-Icon--UnstackSelected:before{content:"\e7fe"}.ms-Icon--Unsubscribe:before{content:"\eda0"}.ms-Icon--UnsyncFolder:before{content:"\e8f6"}.ms-Icon--UnsyncOccurence:before{content:"\f4a4"}.ms-Icon--Untag:before{content:"\f60b"}.ms-Icon--Up:before{content:"\e74a"}.ms-Icon--UpgradeAnalysis:before{content:"\ea0b"}.ms-Icon--Upload:before{content:"\e898"}.ms-Icon--USB:before{content:"\e88e"}.ms-Icon--UserEvent:before{content:"\f69c"}.ms-Icon--UserFollowed:before{content:"\f25c"}.ms-Icon--UserGauge:before{content:"\f6ed"}.ms-Icon--UserOptional:before{content:"\f767"}.ms-Icon--UserPause:before{content:"\f2ba"}.ms-Icon--UserRemove:before{content:"\f69b"}.ms-Icon--UserSync:before{content:"\f2b9"}.ms-Icon--UserWarning:before{content:"\e368"}.ms-Icon--Vacation:before{content:"\f49f"}.ms-Icon--Variable:before{content:"\f305"}.ms-Icon--Variable2:before{content:"\f86d"}.ms-Icon--VariableGroup:before{content:"\f31b"}.ms-Icon--VB:before{content:"\f2f2"}.ms-Icon--VennDiagram:before{content:"\f273"}.ms-Icon--VerifiedBrand:before{content:"\f7bd"}.ms-Icon--VerifiedBrandSolid:before{content:"\f6ad"}.ms-Icon--VersionControlPush:before{content:"\f664"}.ms-Icon--VerticalDistributeCenter:before{content:"\f4fa"}.ms-Icon--Video:before{content:"\e714"}.ms-Icon--Video360Generic:before{content:"\f609"}.ms-Icon--VideoLightOff:before{content:"\ea74"}.ms-Icon--VideoOff:before{content:"\f4b0"}.ms-Icon--VideoSearch:before{content:"\f4ea"}.ms-Icon--VideoSolid:before{content:"\ea0c"}.ms-Icon--View:before{content:"\e890"}.ms-Icon--ViewAll:before{content:"\e8a9"}.ms-Icon--ViewAll2:before{content:"\ef56"}.ms-Icon--ViewDashboard:before{content:"\f246"}.ms-Icon--ViewList:before{content:"\f247"}.ms-Icon--ViewListGroup:before{content:"\f248"}.ms-Icon--ViewListTree:before{content:"\f249"}.ms-Icon--ViewOriginal:before{content:"\e7b4"}.ms-Icon--VisioDiagram:before{content:"\f2a0"}.ms-Icon--VisioDiagramSync:before{content:"\f762"}.ms-Icon--VisioDocument:before{content:"\f2a9"}.ms-Icon--VisioLogo:before{content:"\f2a7"}.ms-Icon--VisioLogo16:before{content:"\f3a3"}.ms-Icon--VisioLogoFill:before{content:"\f2a8"}.ms-Icon--VisioLogoFill16:before{content:"\f3a4"}.ms-Icon--VisioLogoInverse:before{content:"\ed7d"}.ms-Icon--VisioLogoInverse16:before{content:"\f3a2"}.ms-Icon--VisualBasicLanguage:before{content:"\f2f1"}.ms-Icon--VisuallyImpaired:before{content:"\f866"}.ms-Icon--VisualsFolder:before{content:"\f520"}.ms-Icon--VisualsStore:before{content:"\f521"}.ms-Icon--VisualStudioIDELogo32:before{content:"\f5d0"}.ms-Icon--VisualStudioLogo:before{content:"\ec22"}.ms-Icon--VoicemailForward:before{content:"\ed87"}.ms-Icon--VoicemailIRM:before{content:"\f421"}.ms-Icon--VoicemailReply:before{content:"\ed88"}.ms-Icon--Volume0:before{content:"\e992"}.ms-Icon--Volume1:before{content:"\e993"}.ms-Icon--Volume2:before{content:"\e994"}.ms-Icon--Volume3:before{content:"\e995"}.ms-Icon--VolumeDisabled:before{content:"\ea85"}.ms-Icon--VSTSAltLogo1:before{content:"\f382"}.ms-Icon--VSTSAltLogo2:before{content:"\f383"}.ms-Icon--VSTSLogo:before{content:"\f381"}.ms-Icon--Waffle:before{content:"\ed89"}.ms-Icon--WaffleOffice365:before{content:"\f4e0"}[dir=ltr] .ms-Icon--WaitlistConfirm:before{content:"\f550"}[dir=rtl] .ms-Icon--WaitlistConfirm:before{content:"\f551"}[dir=ltr] .ms-Icon--WaitlistConfirmMirrored:before{content:"\f551"}[dir=rtl] .ms-Icon--WaitlistConfirmMirrored:before{content:"\f550"}.ms-Icon--Warning:before{content:"\e7ba"}.ms-Icon--Warning12:before{content:"\f62f"}.ms-Icon--WarningSolid:before{content:"\f736"}.ms-Icon--WavingHand:before{content:"\f807"}.ms-Icon--WebAppBuilderFragment:before{content:"\e314"}.ms-Icon--WebAppBuilderFragmentCreate:before{content:"\e31b"}.ms-Icon--WebAppBuilderModule:before{content:"\e313"}.ms-Icon--WebAppBuilderSlot:before{content:"\e315"}.ms-Icon--Webcam2:before{content:"\e960"}.ms-Icon--Webcam2Off:before{content:"\e36d"}.ms-Icon--WebComponents:before{content:"\ec8b"}.ms-Icon--WebPublish:before{content:"\f52f"}.ms-Icon--Website:before{content:"\eb41"}.ms-Icon--WebTemplate:before{content:"\f6b2"}.ms-Icon--Weights:before{content:"\eadb"}.ms-Icon--Wheelchair:before{content:"\f31f"}.ms-Icon--WhiteBoardApp16:before{content:"\f673"}.ms-Icon--WhiteBoardApp32:before{content:"\f674"}.ms-Icon--WifiEthernet:before{content:"\ee77"}.ms-Icon--WifiWarning4:before{content:"\eb63"}.ms-Icon--WindDirection:before{content:"\ebe6"}.ms-Icon--WindowEdit:before{content:"\f50e"}.ms-Icon--WindowsLogo:before{content:"\e782"}.ms-Icon--Wines:before{content:"\eabf"}.ms-Icon--WipePhone:before{content:"\ed8d"}.ms-Icon--WordDocument:before{content:"\ef71"}.ms-Icon--WordLogo:before{content:"\f1e3"}.ms-Icon--WordLogo16:before{content:"\f391"}.ms-Icon--WordLogoFill:before{content:"\f1e4"}.ms-Icon--WordLogoFill16:before{content:"\f392"}.ms-Icon--WordLogoInverse:before{content:"\ec29"}.ms-Icon--WordLogoInverse16:before{content:"\f390"}.ms-Icon--Work:before{content:"\e821"}.ms-Icon--WorkFlow:before{content:"\ea01"}.ms-Icon--WorkforceManagement:before{content:"\ee0f"}.ms-Icon--WorkItem:before{content:"\f314"}.ms-Icon--WorkItemAlert:before{content:"\f78f"}.ms-Icon--WorkItemBar:before{content:"\f35c"}.ms-Icon--WorkItemBarSolid:before{content:"\f35d"}.ms-Icon--WorkItemBug:before{content:"\f315"}.ms-Icon--World:before{content:"\e909"}.ms-Icon--WorldClock:before{content:"\e918"}.ms-Icon--YammerLogo:before{content:"\ed19"}.ms-Icon--ZipFolder:before{content:"\f012"}.ms-Icon--Zoom:before{content:"\e71e"}.ms-Icon--ZoomIn:before{content:"\e8a3"}.ms-Icon--ZoomOut:before{content:"\e71f"}.ms-Icon--ZoomToFit:before{content:"\f649"}.ms-Icon--HumanResources:before{content:"\f240"}.ms-Icon--StoreLogo:before{content:"\ea96"}.ms-Icon--OneDrive:before{content:"\e941"}.ms-Icon--ToggleOff:before{content:"\f19f"}.ms-Icon--StoreLogoMed:before{content:"\ea04"}.ms-Icon--GlobalNavButton:before{content:"\e700"}.ms-Icon--Wifi:before{content:"\e701"}.ms-Icon--Bluetooth:before{content:"\e702"}.ms-Icon--Connect:before{content:"\e703"}.ms-Icon--InternetSharing:before{content:"\e704"}.ms-Icon--VPN:before{content:"\e705"}.ms-Icon--Brightness:before{content:"\e706"}.ms-Icon--MapPin:before{content:"\e707"}.ms-Icon--QuietHours:before{content:"\e708"}.ms-Icon--Airplane:before{content:"\e709"}.ms-Icon--Tablet:before{content:"\e70a"}.ms-Icon--QuickNote:before{content:"\e70b"}.ms-Icon--RememberedDevice:before{content:"\e70c"}.ms-Icon--ChevronDown:before{content:"\e70d"}.ms-Icon--ChevronUp:before{content:"\e70e"}.ms-Icon--Edit:before{content:"\e70f"}.ms-Icon--Add:before{content:"\e710"}.ms-Icon--Cancel:before{content:"\e711"}.ms-Icon--More:before{content:"\e712"}.ms-Icon--Settings:before{content:"\e713"}.ms-Icon--Video:before{content:"\e714"}.ms-Icon--Mail:before{content:"\e715"}.ms-Icon--People:before{content:"\e716"}.ms-Icon--Phone:before{content:"\e717"}.ms-Icon--Pin:before{content:"\e718"}.ms-Icon--Shop:before{content:"\e719"}.ms-Icon--Stop:before{content:"\e71a"}.ms-Icon--Link:before{content:"\e71b"}.ms-Icon--Filter:before{content:"\e71c"}.ms-Icon--AllApps:before{content:"\e71d"}.ms-Icon--Zoom:before{content:"\e71e"}.ms-Icon--ZoomOut:before{content:"\e71f"}.ms-Icon--Microphone:before{content:"\e720"}.ms-Icon--Search:before{content:"\e721"}.ms-Icon--Camera:before{content:"\e722"}.ms-Icon--Attach:before{content:"\e723"}.ms-Icon--Send:before{content:"\e724"}.ms-Icon--SendFill:before{content:"\e725"}.ms-Icon--WalkSolid:before{content:"\e726"}.ms-Icon--InPrivate:before{content:"\e727"}.ms-Icon--FavoriteList:before{content:"\e728"}.ms-Icon--PageSolid:before{content:"\e729"}.ms-Icon--Forward:before{content:"\e72a"}.ms-Icon--Back:before{content:"\e72b"}.ms-Icon--Refresh:before{content:"\e72c"}.ms-Icon--Share:before{content:"\e72d"}.ms-Icon--Lock:before{content:"\e72e"}.ms-Icon--ReportHacked:before{content:"\e730"}.ms-Icon--EMI:before{content:"\e731"}.ms-Icon--FavoriteStar:before{content:"\e734"}.ms-Icon--FavoriteStarFill:before{content:"\e735"}.ms-Icon--ReadingMode:before{content:"\e736"}.ms-Icon--Favicon:before{content:"\e737"}.ms-Icon--Remove:before{content:"\e738"}.ms-Icon--Checkbox:before{content:"\e739"}.ms-Icon--CheckboxComposite:before{content:"\e73a"}.ms-Icon--CheckboxFill:before{content:"\e73b"}.ms-Icon--CheckboxIndeterminate:before{content:"\e73c"}.ms-Icon--CheckboxCompositeReversed:before{content:"\e73d"}.ms-Icon--CheckMark:before{content:"\e73e"}.ms-Icon--BackToWindow:before{content:"\e73f"}.ms-Icon--FullScreen:before{content:"\e740"}.ms-Icon--ResizeTouchLarger:before{content:"\e741"}.ms-Icon--ResizeTouchSmaller:before{content:"\e742"}.ms-Icon--ResizeMouseSmall:before{content:"\e743"}.ms-Icon--ResizeMouseMedium:before{content:"\e744"}.ms-Icon--ResizeMouseWide:before{content:"\e745"}.ms-Icon--ResizeMouseTall:before{content:"\e746"}.ms-Icon--ResizeMouseLarge:before{content:"\e747"}.ms-Icon--SwitchUser:before{content:"\e748"}.ms-Icon--Print:before{content:"\e749"}.ms-Icon--Up:before{content:"\e74a"}.ms-Icon--Down:before{content:"\e74b"}.ms-Icon--OEM:before{content:"\e74c"}.ms-Icon--Delete:before{content:"\e74d"}.ms-Icon--Save:before{content:"\e74e"}.ms-Icon--Mute:before{content:"\e74f"}.ms-Icon--BackSpaceQWERTY:before{content:"\e750"}.ms-Icon--ReturnKey:before{content:"\e751"}.ms-Icon--UpArrowShiftKey:before{content:"\e752"}.ms-Icon--Cloud:before{content:"\e753"}.ms-Icon--Flashlight:before{content:"\e754"}.ms-Icon--RotationLock:before{content:"\e755"}.ms-Icon--CommandPrompt:before{content:"\e756"}.ms-Icon--SIPMove:before{content:"\e759"}.ms-Icon--SIPUndock:before{content:"\e75a"}.ms-Icon--SIPRedock:before{content:"\e75b"}.ms-Icon--EraseTool:before{content:"\e75c"}.ms-Icon--UnderscoreSpace:before{content:"\e75d"}.ms-Icon--GripperTool:before{content:"\e75e"}.ms-Icon--Dialpad:before{content:"\e75f"}.ms-Icon--PageLeft:before{content:"\e760"}.ms-Icon--PageRight:before{content:"\e761"}.ms-Icon--MultiSelect:before{content:"\e762"}.ms-Icon--KeyboardLeftHanded:before{content:"\e763"}.ms-Icon--KeyboardRightHanded:before{content:"\e764"}.ms-Icon--KeyboardClassic:before{content:"\e765"}.ms-Icon--KeyboardSplit:before{content:"\e766"}.ms-Icon--Volume:before{content:"\e767"}.ms-Icon--Play:before{content:"\e768"}.ms-Icon--Pause:before{content:"\e769"}.ms-Icon--ChevronLeft:before{content:"\e76b"}.ms-Icon--ChevronRight:before{content:"\e76c"}.ms-Icon--InkingTool:before{content:"\e76d"}.ms-Icon--Emoji2:before{content:"\e76e"}.ms-Icon--GripperBarHorizontal:before{content:"\e76f"}.ms-Icon--System:before{content:"\e770"}.ms-Icon--Personalize:before{content:"\e771"}.ms-Icon--Devices:before{content:"\e772"}.ms-Icon--SearchAndApps:before{content:"\e773"}.ms-Icon--Globe:before{content:"\e774"}.ms-Icon--TimeLanguage:before{content:"\e775"}.ms-Icon--EaseOfAccess:before{content:"\e776"}.ms-Icon--UpdateRestore:before{content:"\e777"}.ms-Icon--HangUp:before{content:"\e778"}.ms-Icon--ContactInfo:before{content:"\e779"}.ms-Icon--Unpin:before{content:"\e77a"}.ms-Icon--Contact:before{content:"\e77b"}.ms-Icon--Memo:before{content:"\e77c"}.ms-Icon--IncomingCall:before{content:"\e77e"}.ms-Icon--Paste:before{content:"\e77f"}.ms-Icon--PhoneBook:before{content:"\e780"}.ms-Icon--LEDLight:before{content:"\e781"}.ms-Icon--Error:before{content:"\e783"}.ms-Icon--GripperBarVertical:before{content:"\e784"}.ms-Icon--Unlock:before{content:"\e785"}.ms-Icon--Slideshow:before{content:"\e786"}.ms-Icon--Calendar:before{content:"\e787"}.ms-Icon--GripperResize:before{content:"\e788"}.ms-Icon--Megaphone:before{content:"\e789"}.ms-Icon--Trim:before{content:"\e78a"}.ms-Icon--NewWindow:before{content:"\e78b"}.ms-Icon--SaveLocal:before{content:"\e78c"}.ms-Icon--Color:before{content:"\e790"}.ms-Icon--DataSense:before{content:"\e791"}.ms-Icon--SaveAs:before{content:"\e792"}.ms-Icon--Light:before{content:"\e793"}.ms-Icon--AspectRatio:before{content:"\e799"}.ms-Icon--DataSenseBar:before{content:"\e7a5"}.ms-Icon--Redo:before{content:"\e7a6"}.ms-Icon--Undo:before{content:"\e7a7"}.ms-Icon--Crop:before{content:"\e7a8"}.ms-Icon--OpenWith:before{content:"\e7ac"}.ms-Icon--Rotate:before{content:"\e7ad"}.ms-Icon--RedEye:before{content:"\e7b3"}.ms-Icon--SetlockScreen:before{content:"\e7b5"}.ms-Icon--MapPin2:before{content:"\e7b7"}.ms-Icon--Package:before{content:"\e7b8"}.ms-Icon--Warning:before{content:"\e7ba"}.ms-Icon--ReadingList:before{content:"\e7bc"}.ms-Icon--Education:before{content:"\e7be"}.ms-Icon--ShoppingCart:before{content:"\e7bf"}.ms-Icon--Train:before{content:"\e7c0"}.ms-Icon--Flag:before{content:"\e7c1"}.ms-Icon--Move:before{content:"\e7c2"}.ms-Icon--Page:before{content:"\e7c3"}.ms-Icon--TaskView:before{content:"\e7c4"}.ms-Icon--BrowsePhotos:before{content:"\e7c5"}.ms-Icon--HalfStarLeft:before{content:"\e7c6"}.ms-Icon--HalfStarRight:before{content:"\e7c7"}.ms-Icon--Record:before{content:"\e7c8"}.ms-Icon--TouchPointer:before{content:"\e7c9"}.ms-Icon--LangJPN:before{content:"\e7de"}.ms-Icon--Ferry:before{content:"\e7e3"}.ms-Icon--Highlight:before{content:"\e7e6"}.ms-Icon--ActionCenterNotification:before{content:"\e7e7"}.ms-Icon--PowerButton:before{content:"\e7e8"}.ms-Icon--ResizeTouchNarrower:before{content:"\e7ea"}.ms-Icon--ResizeTouchShorter:before{content:"\e7eb"}.ms-Icon--DrivingMode:before{content:"\e7ec"}.ms-Icon--RingerSilent:before{content:"\e7ed"}.ms-Icon--OtherUser:before{content:"\e7ee"}.ms-Icon--Admin:before{content:"\e7ef"}.ms-Icon--CC:before{content:"\e7f0"}.ms-Icon--SDCard:before{content:"\e7f1"}.ms-Icon--CallForwarding:before{content:"\e7f2"}.ms-Icon--SettingsDisplaySound:before{content:"\e7f3"}.ms-Icon--TVMonitor:before{content:"\e7f4"}.ms-Icon--Speakers:before{content:"\e7f5"}.ms-Icon--Headphone:before{content:"\e7f6"}.ms-Icon--DeviceLaptopPic:before{content:"\e7f7"}.ms-Icon--DeviceLaptopNoPic:before{content:"\e7f8"}.ms-Icon--DeviceMonitorRightPic:before{content:"\e7f9"}.ms-Icon--DeviceMonitorLeftPic:before{content:"\e7fa"}.ms-Icon--DeviceMonitorNoPic:before{content:"\e7fb"}.ms-Icon--Game:before{content:"\e7fc"}.ms-Icon--HorizontalTabKey:before{content:"\e7fd"}.ms-Icon--StreetsideSplitMinimize:before{content:"\e802"}.ms-Icon--StreetsideSplitExpand:before{content:"\e803"}.ms-Icon--Car:before{content:"\e804"}.ms-Icon--Walk:before{content:"\e805"}.ms-Icon--Bus:before{content:"\e806"}.ms-Icon--TiltUp:before{content:"\e809"}.ms-Icon--TiltDown:before{content:"\e80a"}.ms-Icon--CallControl:before{content:"\e80b"}.ms-Icon--RotateMapRight:before{content:"\e80c"}.ms-Icon--RotateMapLeft:before{content:"\e80d"}.ms-Icon--Home:before{content:"\e80f"}.ms-Icon--ParkingLocation:before{content:"\e811"}.ms-Icon--MapCompassTop:before{content:"\e812"}.ms-Icon--MapCompassBottom:before{content:"\e813"}.ms-Icon--IncidentTriangle:before{content:"\e814"}.ms-Icon--Touch:before{content:"\e815"}.ms-Icon--MapDirections:before{content:"\e816"}.ms-Icon--StartPoint:before{content:"\e819"}.ms-Icon--StopPoint:before{content:"\e81a"}.ms-Icon--EndPoint:before{content:"\e81b"}.ms-Icon--History:before{content:"\e81c"}.ms-Icon--Location:before{content:"\e81d"}.ms-Icon--MapLayers:before{content:"\e81e"}.ms-Icon--Accident:before{content:"\e81f"}.ms-Icon--Work:before{content:"\e821"}.ms-Icon--Construction:before{content:"\e822"}.ms-Icon--Recent:before{content:"\e823"}.ms-Icon--Bank:before{content:"\e825"}.ms-Icon--DownloadMap:before{content:"\e826"}.ms-Icon--InkingToolFill2:before{content:"\e829"}.ms-Icon--HighlightFill2:before{content:"\e82a"}.ms-Icon--EraseToolFill:before{content:"\e82b"}.ms-Icon--EraseToolFill2:before{content:"\e82c"}.ms-Icon--Dictionary:before{content:"\e82d"}.ms-Icon--DictionaryAdd:before{content:"\e82e"}.ms-Icon--ToolTip:before{content:"\e82f"}.ms-Icon--ChromeBack:before{content:"\e830"}.ms-Icon--ProvisioningPackage:before{content:"\e835"}.ms-Icon--AddRemoteDevice:before{content:"\e836"}.ms-Icon--FolderOpen:before{content:"\e838"}.ms-Icon--Ethernet:before{content:"\e839"}.ms-Icon--ShareBroadband:before{content:"\e83a"}.ms-Icon--DirectAccess:before{content:"\e83b"}.ms-Icon--DialUp:before{content:"\e83c"}.ms-Icon--DefenderApp:before{content:"\e83d"}.ms-Icon--BatteryCharging9:before{content:"\e83e"}.ms-Icon--Battery10:before{content:"\e83f"}.ms-Icon--Pinned:before{content:"\e840"}.ms-Icon--PinFill:before{content:"\e841"}.ms-Icon--PinnedFill:before{content:"\e842"}.ms-Icon--PeriodKey:before{content:"\e843"}.ms-Icon--PuncKey:before{content:"\e844"}.ms-Icon--RevToggleKey:before{content:"\e845"}.ms-Icon--RightArrowKeyTime1:before{content:"\e846"}.ms-Icon--RightArrowKeyTime2:before{content:"\e847"}.ms-Icon--LeftQuote:before{content:"\e848"}.ms-Icon--RightQuote:before{content:"\e849"}.ms-Icon--DownShiftKey:before{content:"\e84a"}.ms-Icon--UpShiftKey:before{content:"\e84b"}.ms-Icon--PuncKey0:before{content:"\e84c"}.ms-Icon--PuncKeyLeftBottom:before{content:"\e84d"}.ms-Icon--RightArrowKeyTime3:before{content:"\e84e"}.ms-Icon--RightArrowKeyTime4:before{content:"\e84f"}.ms-Icon--Battery0:before{content:"\e850"}.ms-Icon--Battery1:before{content:"\e851"}.ms-Icon--Battery2:before{content:"\e852"}.ms-Icon--Battery3:before{content:"\e853"}.ms-Icon--Battery4:before{content:"\e854"}.ms-Icon--Battery5:before{content:"\e855"}.ms-Icon--Battery6:before{content:"\e856"}.ms-Icon--Battery7:before{content:"\e857"}.ms-Icon--Battery8:before{content:"\e858"}.ms-Icon--Battery9:before{content:"\e859"}.ms-Icon--BatteryCharging0:before{content:"\e85a"}.ms-Icon--BatteryCharging1:before{content:"\e85b"}.ms-Icon--BatteryCharging2:before{content:"\e85c"}.ms-Icon--BatteryCharging3:before{content:"\e85d"}.ms-Icon--BatteryCharging4:before{content:"\e85e"}.ms-Icon--BatteryCharging5:before{content:"\e85f"}.ms-Icon--BatteryCharging6:before{content:"\e860"}.ms-Icon--BatteryCharging7:before{content:"\e861"}.ms-Icon--BatteryCharging8:before{content:"\e862"}.ms-Icon--BatterySaver0:before{content:"\e863"}.ms-Icon--BatterySaver1:before{content:"\e864"}.ms-Icon--BatterySaver2:before{content:"\e865"}.ms-Icon--BatterySaver3:before{content:"\e866"}.ms-Icon--BatterySaver4:before{content:"\e867"}.ms-Icon--BatterySaver5:before{content:"\e868"}.ms-Icon--BatterySaver6:before{content:"\e869"}.ms-Icon--BatterySaver7:before{content:"\e86a"}.ms-Icon--BatterySaver8:before{content:"\e86b"}.ms-Icon--SignalBars1:before{content:"\e86c"}.ms-Icon--SignalBars2:before{content:"\e86d"}.ms-Icon--SignalBars3:before{content:"\e86e"}.ms-Icon--SignalBars4:before{content:"\e86f"}.ms-Icon--SignalBars5:before{content:"\e870"}.ms-Icon--SignalNotConnected:before{content:"\e871"}.ms-Icon--Wifi1:before{content:"\e872"}.ms-Icon--Wifi2:before{content:"\e873"}.ms-Icon--Wifi3:before{content:"\e874"}.ms-Icon--MobSIMLock:before{content:"\e875"}.ms-Icon--MobSIMMissing:before{content:"\e876"}.ms-Icon--Vibrate:before{content:"\e877"}.ms-Icon--RoamingInternational:before{content:"\e878"}.ms-Icon--RoamingDomestic:before{content:"\e879"}.ms-Icon--CallForwardInternational:before{content:"\e87a"}.ms-Icon--CallForwardRoaming:before{content:"\e87b"}.ms-Icon--JpnRomanji:before{content:"\e87c"}.ms-Icon--JpnRomanjiLock:before{content:"\e87d"}.ms-Icon--JpnRomanjiShift:before{content:"\e87e"}.ms-Icon--JpnRomanjiShiftLock:before{content:"\e87f"}.ms-Icon--StatusDataTransfer:before{content:"\e880"}.ms-Icon--StatusDataTransferVPN:before{content:"\e881"}.ms-Icon--StatusDualSIM2:before{content:"\e882"}.ms-Icon--StatusDualSIM2VPN:before{content:"\e883"}.ms-Icon--StatusDualSIM1:before{content:"\e884"}.ms-Icon--StatusDualSIM1VPN:before{content:"\e885"}.ms-Icon--StatusSGLTE:before{content:"\e886"}.ms-Icon--StatusSGLTECell:before{content:"\e887"}.ms-Icon--StatusSGLTEDataVPN:before{content:"\e888"}.ms-Icon--StatusVPN:before{content:"\e889"}.ms-Icon--WifiHotspot:before{content:"\e88a"}.ms-Icon--LanguageKor:before{content:"\e88b"}.ms-Icon--LanguageCht:before{content:"\e88c"}.ms-Icon--LanguageChs:before{content:"\e88d"}.ms-Icon--USB:before{content:"\e88e"}.ms-Icon--InkingToolFill:before{content:"\e88f"}.ms-Icon--View:before{content:"\e890"}.ms-Icon--HighlightFill:before{content:"\e891"}.ms-Icon--Previous:before{content:"\e892"}.ms-Icon--Next:before{content:"\e893"}.ms-Icon--Clear:before{content:"\e894"}.ms-Icon--Sync:before{content:"\e895"}.ms-Icon--Download:before{content:"\e896"}.ms-Icon--Help:before{content:"\e897"}.ms-Icon--Upload:before{content:"\e898"}.ms-Icon--Emoji:before{content:"\e899"}.ms-Icon--TwoPage:before{content:"\e89a"}.ms-Icon--LeaveChat:before{content:"\e89b"}.ms-Icon--MailForward:before{content:"\e89c"}.ms-Icon--RotateCamera:before{content:"\e89e"}.ms-Icon--ClosePane:before{content:"\e89f"}.ms-Icon--OpenPane:before{content:"\e8a0"}.ms-Icon--PreviewLink:before{content:"\e8a1"}.ms-Icon--AttachCamera:before{content:"\e8a2"}.ms-Icon--ZoomIn:before{content:"\e8a3"}.ms-Icon--Bookmarks:before{content:"\e8a4"}.ms-Icon--Document:before{content:"\e8a5"}.ms-Icon--ProtectedDocument:before{content:"\e8a6"}.ms-Icon--OpenInNewWindow:before{content:"\e8a7"}.ms-Icon--MailFill:before{content:"\e8a8"}.ms-Icon--ViewAll:before{content:"\e8a9"}.ms-Icon--VideoChat:before{content:"\e8aa"}.ms-Icon--Switch:before{content:"\e8ab"}.ms-Icon--Rename:before{content:"\e8ac"}.ms-Icon--Go:before{content:"\e8ad"}.ms-Icon--SurfaceHub:before{content:"\e8ae"}.ms-Icon--Remote:before{content:"\e8af"}.ms-Icon--Click:before{content:"\e8b0"}.ms-Icon--Shuffle:before{content:"\e8b1"}.ms-Icon--Movies:before{content:"\e8b2"}.ms-Icon--SelectAll:before{content:"\e8b3"}.ms-Icon--Orientation:before{content:"\e8b4"}.ms-Icon--Import:before{content:"\e8b5"}.ms-Icon--ImportAll:before{content:"\e8b6"}.ms-Icon--Folder:before{content:"\e8b7"}.ms-Icon--Webcam:before{content:"\e8b8"}.ms-Icon--Picture:before{content:"\e8b9"}.ms-Icon--Caption:before{content:"\e8ba"}.ms-Icon--ChromeClose:before{content:"\e8bb"}.ms-Icon--ShowResults:before{content:"\e8bc"}.ms-Icon--Message:before{content:"\e8bd"}.ms-Icon--Leaf:before{content:"\e8be"}.ms-Icon--CalendarDay:before{content:"\e8bf"}.ms-Icon--CalendarWeek:before{content:"\e8c0"}.ms-Icon--Characters:before{content:"\e8c1"}.ms-Icon--MailReplyAll:before{content:"\e8c2"}.ms-Icon--Read:before{content:"\e8c3"}.ms-Icon--ShowBcc:before{content:"\e8c4"}.ms-Icon--HideBcc:before{content:"\e8c5"}.ms-Icon--Cut:before{content:"\e8c6"}.ms-Icon--PaymentCard:before{content:"\e8c7"}.ms-Icon--Copy:before{content:"\e8c8"}.ms-Icon--Important:before{content:"\e8c9"}.ms-Icon--MailReply:before{content:"\e8ca"}.ms-Icon--Sort:before{content:"\e8cb"}.ms-Icon--MobileTablet:before{content:"\e8cc"}.ms-Icon--DisconnectDrive:before{content:"\e8cd"}.ms-Icon--MapDrive:before{content:"\e8ce"}.ms-Icon--ContactPresence:before{content:"\e8cf"}.ms-Icon--Priority:before{content:"\e8d0"}.ms-Icon--GotoToday:before{content:"\e8d1"}.ms-Icon--Font:before{content:"\e8d2"}.ms-Icon--FontColor:before{content:"\e8d3"}.ms-Icon--Contact2:before{content:"\e8d4"}.ms-Icon--FolderFill:before{content:"\e8d5"}.ms-Icon--Audio:before{content:"\e8d6"}.ms-Icon--Permissions:before{content:"\e8d7"}.ms-Icon--DisableUpdates:before{content:"\e8d8"}.ms-Icon--Unfavorite:before{content:"\e8d9"}.ms-Icon--OpenLocal:before{content:"\e8da"}.ms-Icon--Italic:before{content:"\e8db"}.ms-Icon--Underline:before{content:"\e8dc"}.ms-Icon--Bold:before{content:"\e8dd"}.ms-Icon--MoveToFolder:before{content:"\e8de"}.ms-Icon--LikeDislike:before{content:"\e8df"}.ms-Icon--Dislike:before{content:"\e8e0"}.ms-Icon--Like:before{content:"\e8e1"}.ms-Icon--AlignRight:before{content:"\e8e2"}.ms-Icon--AlignCenter:before{content:"\e8e3"}.ms-Icon--AlignLeft:before{content:"\e8e4"}.ms-Icon--OpenFile:before{content:"\e8e5"}.ms-Icon--ClearSelection:before{content:"\e8e6"}.ms-Icon--FontDecrease:before{content:"\e8e7"}.ms-Icon--FontIncrease:before{content:"\e8e8"}.ms-Icon--FontSize:before{content:"\e8e9"}.ms-Icon--CellPhone:before{content:"\e8ea"}.ms-Icon--Reshare:before{content:"\e8eb"}.ms-Icon--Tag:before{content:"\e8ec"}.ms-Icon--RepeatOne:before{content:"\e8ed"}.ms-Icon--RepeatAll:before{content:"\e8ee"}.ms-Icon--Calculator:before{content:"\e8ef"}.ms-Icon--Directions:before{content:"\e8f0"}.ms-Icon--Library:before{content:"\e8f1"}.ms-Icon--ChatBubbles:before{content:"\e8f2"}.ms-Icon--PostUpdate:before{content:"\e8f3"}.ms-Icon--NewFolder:before{content:"\e8f4"}.ms-Icon--CalendarReply:before{content:"\e8f5"}.ms-Icon--UnsyncFolder:before{content:"\e8f6"}.ms-Icon--SyncFolder:before{content:"\e8f7"}.ms-Icon--BlockContact:before{content:"\e8f8"}.ms-Icon--SwitchApps:before{content:"\e8f9"}.ms-Icon--AddFriend:before{content:"\e8fa"}.ms-Icon--Accept:before{content:"\e8fb"}.ms-Icon--GoToStart:before{content:"\e8fc"}.ms-Icon--BulletedList:before{content:"\e8fd"}.ms-Icon--Scan:before{content:"\e8fe"}.ms-Icon--Preview:before{content:"\e8ff"}.ms-Icon--Group:before{content:"\e902"}.ms-Icon--ZeroBars:before{content:"\e904"}.ms-Icon--OneBar:before{content:"\e905"}.ms-Icon--TwoBars:before{content:"\e906"}.ms-Icon--ThreeBars:before{content:"\e907"}.ms-Icon--FourBars:before{content:"\e908"}.ms-Icon--World:before{content:"\e909"}.ms-Icon--Comment:before{content:"\e90a"}.ms-Icon--MusicInfo:before{content:"\e90b"}.ms-Icon--DockLeft:before{content:"\e90c"}.ms-Icon--DockRight:before{content:"\e90d"}.ms-Icon--DockBottom:before{content:"\e90e"}.ms-Icon--Repair:before{content:"\e90f"}.ms-Icon--Accounts:before{content:"\e910"}.ms-Icon--DullSound:before{content:"\e911"}.ms-Icon--Manage:before{content:"\e912"}.ms-Icon--Street:before{content:"\e913"}.ms-Icon--Printer3D:before{content:"\e914"}.ms-Icon--RadioBullet:before{content:"\e915"}.ms-Icon--Stopwatch:before{content:"\e916"}.ms-Icon--Photo:before{content:"\e91b"}.ms-Icon--ActionCenter:before{content:"\e91c"}.ms-Icon--FullCircleMask:before{content:"\e91f"}.ms-Icon--ChromeMinimize:before{content:"\e921"}.ms-Icon--ChromeMaximize:before{content:"\e922"}.ms-Icon--ChromeRestore:before{content:"\e923"}.ms-Icon--Annotation:before{content:"\e924"}.ms-Icon--BackSpaceQWERTYSm:before{content:"\e925"}.ms-Icon--BackSpaceQWERTYMd:before{content:"\e926"}.ms-Icon--Swipe:before{content:"\e927"}.ms-Icon--Fingerprint:before{content:"\e928"}.ms-Icon--Handwriting:before{content:"\e929"}.ms-Icon--ChromeBackToWindow:before{content:"\e92c"}.ms-Icon--ChromeFullScreen:before{content:"\e92d"}.ms-Icon--KeyboardStandard:before{content:"\e92e"}.ms-Icon--KeyboardDismiss:before{content:"\e92f"}.ms-Icon--Completed:before{content:"\e930"}.ms-Icon--ChromeAnnotate:before{content:"\e931"}.ms-Icon--Label:before{content:"\e932"}.ms-Icon--IBeam:before{content:"\e933"}.ms-Icon--IBeamOutline:before{content:"\e934"}.ms-Icon--FlickDown:before{content:"\e935"}.ms-Icon--FlickUp:before{content:"\e936"}.ms-Icon--FlickLeft:before{content:"\e937"}.ms-Icon--FlickRight:before{content:"\e938"}.ms-Icon--FeedbackApp:before{content:"\e939"}.ms-Icon--MusicAlbum:before{content:"\e93c"}.ms-Icon--Streaming:before{content:"\e93e"}.ms-Icon--Code:before{content:"\e943"}.ms-Icon--ReturnToWindow:before{content:"\e944"}.ms-Icon--LightningBolt:before{content:"\e945"}.ms-Icon--Info:before{content:"\e946"}.ms-Icon--CalculatorMultiply:before{content:"\e947"}.ms-Icon--CalculatorAddition:before{content:"\e948"}.ms-Icon--CalculatorSubtract:before{content:"\e949"}.ms-Icon--CalculatorDivide:before{content:"\e94a"}.ms-Icon--CalculatorSquareroot:before{content:"\e94b"}.ms-Icon--CalculatorPercentage:before{content:"\e94c"}.ms-Icon--CalculatorNegate:before{content:"\e94d"}.ms-Icon--CalculatorEqualTo:before{content:"\e94e"}.ms-Icon--CalculatorBackspace:before{content:"\e94f"}.ms-Icon--Component:before{content:"\e950"}.ms-Icon--DMC:before{content:"\e951"}.ms-Icon--Dock:before{content:"\e952"}.ms-Icon--MultimediaDMS:before{content:"\e953"}.ms-Icon--MultimediaDVR:before{content:"\e954"}.ms-Icon--MultimediaPMP:before{content:"\e955"}.ms-Icon--PrintfaxPrinterFile:before{content:"\e956"}.ms-Icon--Sensor:before{content:"\e957"}.ms-Icon--StorageOptical:before{content:"\e958"}.ms-Icon--Communications:before{content:"\e95a"}.ms-Icon--Headset:before{content:"\e95b"}.ms-Icon--Projector:before{content:"\e95d"}.ms-Icon--Health:before{content:"\e95e"}.ms-Icon--Wire:before{content:"\e95f"}.ms-Icon--Webcam2:before{content:"\e960"}.ms-Icon--Input:before{content:"\e961"}.ms-Icon--Mouse:before{content:"\e962"}.ms-Icon--Smartcard:before{content:"\e963"}.ms-Icon--SmartcardVirtual:before{content:"\e964"}.ms-Icon--MediaStorageTower:before{content:"\e965"}.ms-Icon--ReturnKeySm:before{content:"\e966"}.ms-Icon--GameConsole:before{content:"\e967"}.ms-Icon--Network:before{content:"\e968"}.ms-Icon--StorageNetworkWireless:before{content:"\e969"}.ms-Icon--StorageTape:before{content:"\e96a"}.ms-Icon--ChevronUpSmall:before{content:"\e96d"}.ms-Icon--ChevronDownSmall:before{content:"\e96e"}.ms-Icon--ChevronLeftSmall:before{content:"\e96f"}.ms-Icon--ChevronRightSmall:before{content:"\e970"}.ms-Icon--ChevronUpMed:before{content:"\e971"}.ms-Icon--ChevronDownMed:before{content:"\e972"}.ms-Icon--ChevronLeftMed:before{content:"\e973"}.ms-Icon--ChevronRightMed:before{content:"\e974"}.ms-Icon--Devices2:before{content:"\e975"}.ms-Icon--ExpandTile:before{content:"\e976"}.ms-Icon--PC1:before{content:"\e977"}.ms-Icon--PresenceChicklet:before{content:"\e978"}.ms-Icon--PresenceChickletVideo:before{content:"\e979"}.ms-Icon--Reply:before{content:"\e97a"}.ms-Icon--SetTile:before{content:"\e97b"}.ms-Icon--Type:before{content:"\e97c"}.ms-Icon--Korean:before{content:"\e97d"}.ms-Icon--HalfAlpha:before{content:"\e97e"}.ms-Icon--FullAlpha:before{content:"\e97f"}.ms-Icon--Key12On:before{content:"\e980"}.ms-Icon--ChineseChangjie:before{content:"\e981"}.ms-Icon--QWERTYOn:before{content:"\e982"}.ms-Icon--QWERTYOff:before{content:"\e983"}.ms-Icon--ChineseQuick:before{content:"\e984"}.ms-Icon--Japanese:before{content:"\e985"}.ms-Icon--FullHiragana:before{content:"\e986"}.ms-Icon--FullKatakana:before{content:"\e987"}.ms-Icon--HalfKatakana:before{content:"\e988"}.ms-Icon--ChineseBoPoMoFo:before{content:"\e989"}.ms-Icon--ChinesePinyin:before{content:"\e98a"}.ms-Icon--ConstructionCone:before{content:"\e98f"}.ms-Icon--XboxOneConsole:before{content:"\e990"}.ms-Icon--Volume0:before{content:"\e992"}.ms-Icon--Volume1:before{content:"\e993"}.ms-Icon--Volume2:before{content:"\e994"}.ms-Icon--Volume3:before{content:"\e995"}.ms-Icon--BatteryUnknown:before{content:"\e996"}.ms-Icon--WifiAttentionOverlay:before{content:"\e998"}.ms-Icon--Robot:before{content:"\e99a"}.ms-Icon--TapAndSend:before{content:"\e9a1"}.ms-Icon--FitPage:before{content:"\e9a6"}.ms-Icon--PasswordKeyShow:before{content:"\e9a8"}.ms-Icon--PasswordKeyHide:before{content:"\e9a9"}.ms-Icon--BidiLtr:before{content:"\e9aa"}.ms-Icon--BidiRtl:before{content:"\e9ab"}.ms-Icon--ForwardSm:before{content:"\e9ac"}.ms-Icon--CommaKey:before{content:"\e9ad"}.ms-Icon--DashKey:before{content:"\e9ae"}.ms-Icon--DullSoundKey:before{content:"\e9af"}.ms-Icon--HalfDullSound:before{content:"\e9b0"}.ms-Icon--RightDoubleQuote:before{content:"\e9b1"}.ms-Icon--LeftDoubleQuote:before{content:"\e9b2"}.ms-Icon--PuncKeyRightBottom:before{content:"\e9b3"}.ms-Icon--PuncKey1:before{content:"\e9b4"}.ms-Icon--PuncKey2:before{content:"\e9b5"}.ms-Icon--PuncKey3:before{content:"\e9b6"}.ms-Icon--PuncKey4:before{content:"\e9b7"}.ms-Icon--PuncKey5:before{content:"\e9b8"}.ms-Icon--PuncKey6:before{content:"\e9b9"}.ms-Icon--PuncKey9:before{content:"\e9ba"}.ms-Icon--PuncKey7:before{content:"\e9bb"}.ms-Icon--PuncKey8:before{content:"\e9bc"}.ms-Icon--Frigid:before{content:"\e9ca"}.ms-Icon--Unknown:before{content:"\e9ce"}.ms-Icon--AreaChart:before{content:"\e9d2"}.ms-Icon--CheckList:before{content:"\e9d5"}.ms-Icon--Diagnostic:before{content:"\e9d9"}.ms-Icon--Equalizer:before{content:"\e9e9"}.ms-Icon--Process:before{content:"\e9f3"}.ms-Icon--Processing:before{content:"\e9f5"}.ms-Icon--ReportDocument:before{content:"\e9f9"}.ms-Icon--VideoSolid:before{content:"\ea0c"}.ms-Icon--MixedMediaBadge:before{content:"\ea0d"}.ms-Icon--DisconnectDisplay:before{content:"\ea14"}.ms-Icon--Shield:before{content:"\ea18"}.ms-Icon--Info2:before{content:"\ea1f"}.ms-Icon--ActionCenterAsterisk:before{content:"\ea21"}.ms-Icon--Beta:before{content:"\ea24"}.ms-Icon--SaveCopy:before{content:"\ea35"}.ms-Icon--List:before{content:"\ea37"}.ms-Icon--Asterisk:before{content:"\ea38"}.ms-Icon--ErrorBadge:before{content:"\ea39"}.ms-Icon--CircleRing:before{content:"\ea3a"}.ms-Icon--CircleFill:before{content:"\ea3b"}.ms-Icon--MergeCall:before{content:"\ea3c"}.ms-Icon--PrivateCall:before{content:"\ea3d"}.ms-Icon--Record2:before{content:"\ea3f"}.ms-Icon--AllAppsMirrored:before{content:"\ea40"}.ms-Icon--BookmarksMirrored:before{content:"\ea41"}.ms-Icon--BulletedListMirrored:before{content:"\ea42"}.ms-Icon--CallForwardInternationalMirrored:before{content:"\ea43"}.ms-Icon--CallForwardRoamingMirrored:before{content:"\ea44"}.ms-Icon--ChromeBackMirrored:before{content:"\ea47"}.ms-Icon--ClearSelectionMirrored:before{content:"\ea48"}.ms-Icon--ClosePaneMirrored:before{content:"\ea49"}.ms-Icon--ContactInfoMirrored:before{content:"\ea4a"}.ms-Icon--DockRightMirrored:before{content:"\ea4b"}.ms-Icon--DockLeftMirrored:before{content:"\ea4c"}.ms-Icon--ExpandTileMirrored:before{content:"\ea4e"}.ms-Icon--GoMirrored:before{content:"\ea4f"}.ms-Icon--GripperResizeMirrored:before{content:"\ea50"}.ms-Icon--HelpMirrored:before{content:"\ea51"}.ms-Icon--ImportMirrored:before{content:"\ea52"}.ms-Icon--ImportAllMirrored:before{content:"\ea53"}.ms-Icon--LeaveChatMirrored:before{content:"\ea54"}.ms-Icon--ListMirrored:before{content:"\ea55"}.ms-Icon--MailForwardMirrored:before{content:"\ea56"}.ms-Icon--MailReplyMirrored:before{content:"\ea57"}.ms-Icon--MailReplyAllMirrored:before{content:"\ea58"}.ms-Icon--OpenPaneMirrored:before{content:"\ea5b"}.ms-Icon--OpenWithMirrored:before{content:"\ea5c"}.ms-Icon--ParkingLocationMirrored:before{content:"\ea5e"}.ms-Icon--ResizeMouseMediumMirrored:before{content:"\ea5f"}.ms-Icon--ResizeMouseSmallMirrored:before{content:"\ea60"}.ms-Icon--ResizeMouseTallMirrored:before{content:"\ea61"}.ms-Icon--ResizeTouchNarrowerMirrored:before{content:"\ea62"}.ms-Icon--SendMirrored:before{content:"\ea63"}.ms-Icon--SendFillMirrored:before{content:"\ea64"}.ms-Icon--ShowResultsMirrored:before{content:"\ea65"}.ms-Icon--Media:before{content:"\ea69"}.ms-Icon--SyncError:before{content:"\ea6a"}.ms-Icon--Devices3:before{content:"\ea6c"}.ms-Icon--SlowMotionOn:before{content:"\ea79"}.ms-Icon--Lightbulb:before{content:"\ea80"}.ms-Icon--StatusCircle:before{content:"\ea81"}.ms-Icon--StatusTriangle:before{content:"\ea82"}.ms-Icon--StatusError:before{content:"\ea83"}.ms-Icon--StatusWarning:before{content:"\ea84"}.ms-Icon--Puzzle:before{content:"\ea86"}.ms-Icon--CalendarSolid:before{content:"\ea89"}.ms-Icon--HomeSolid:before{content:"\ea8a"}.ms-Icon--ParkingLocationSolid:before{content:"\ea8b"}.ms-Icon--ContactSolid:before{content:"\ea8c"}.ms-Icon--ConstructionSolid:before{content:"\ea8d"}.ms-Icon--AccidentSolid:before{content:"\ea8e"}.ms-Icon--Ringer:before{content:"\ea8f"}.ms-Icon--PDF:before{content:"\ea90"}.ms-Icon--ThoughtBubble:before{content:"\ea91"}.ms-Icon--HeartBroken:before{content:"\ea92"}.ms-Icon--BatteryCharging10:before{content:"\ea93"}.ms-Icon--BatterySaver9:before{content:"\ea94"}.ms-Icon--BatterySaver10:before{content:"\ea95"}.ms-Icon--CallForwardingMirrored:before{content:"\ea97"}.ms-Icon--MultiSelectMirrored:before{content:"\ea98"}.ms-Icon--Broom:before{content:"\ea99"}.ms-Icon--ForwardCall:before{content:"\eac2"}.ms-Icon--Trackers:before{content:"\eadf"}.ms-Icon--Market:before{content:"\eafc"}.ms-Icon--PieSingle:before{content:"\eb05"}.ms-Icon--StockDown:before{content:"\eb0f"}.ms-Icon--StockUp:before{content:"\eb11"}.ms-Icon--Design:before{content:"\eb3c"}.ms-Icon--Website:before{content:"\eb41"}.ms-Icon--Drop:before{content:"\eb42"}.ms-Icon--Radar:before{content:"\eb44"}.ms-Icon--BusSolid:before{content:"\eb47"}.ms-Icon--FerrySolid:before{content:"\eb48"}.ms-Icon--StartPointSolid:before{content:"\eb49"}.ms-Icon--StopPointSolid:before{content:"\eb4a"}.ms-Icon--EndPointSolid:before{content:"\eb4b"}.ms-Icon--AirplaneSolid:before{content:"\eb4c"}.ms-Icon--TrainSolid:before{content:"\eb4d"}.ms-Icon--WorkSolid:before{content:"\eb4e"}.ms-Icon--ReminderFill:before{content:"\eb4f"}.ms-Icon--Reminder:before{content:"\eb50"}.ms-Icon--Heart:before{content:"\eb51"}.ms-Icon--HeartFill:before{content:"\eb52"}.ms-Icon--EthernetError:before{content:"\eb55"}.ms-Icon--EthernetWarning:before{content:"\eb56"}.ms-Icon--StatusConnecting1:before{content:"\eb57"}.ms-Icon--StatusConnecting2:before{content:"\eb58"}.ms-Icon--StatusUnsecure:before{content:"\eb59"}.ms-Icon--WifiError0:before{content:"\eb5a"}.ms-Icon--WifiError1:before{content:"\eb5b"}.ms-Icon--WifiError2:before{content:"\eb5c"}.ms-Icon--WifiError3:before{content:"\eb5d"}.ms-Icon--WifiError4:before{content:"\eb5e"}.ms-Icon--WifiWarning0:before{content:"\eb5f"}.ms-Icon--WifiWarning1:before{content:"\eb60"}.ms-Icon--WifiWarning2:before{content:"\eb61"}.ms-Icon--WifiWarning3:before{content:"\eb62"}.ms-Icon--WifiWarning4:before{content:"\eb63"}.ms-Icon--Devices4:before{content:"\eb66"}.ms-Icon--NUIIris:before{content:"\eb67"}.ms-Icon--NUIFace:before{content:"\eb68"}.ms-Icon--GatewayRouter:before{content:"\eb77"}.ms-Icon--EditMirrored:before{content:"\eb7e"}.ms-Icon--NUIFPStartSlideHand:before{content:"\eb82"}.ms-Icon--NUIFPStartSlideAction:before{content:"\eb83"}.ms-Icon--NUIFPContinueSlideHand:before{content:"\eb84"}.ms-Icon--NUIFPContinueSlideAction:before{content:"\eb85"}.ms-Icon--NUIFPRollRightHand:before{content:"\eb86"}.ms-Icon--NUIFPRollRightHandAction:before{content:"\eb87"}.ms-Icon--NUIFPRollLeftHand:before{content:"\eb88"}.ms-Icon--NUIFPRollLeftAction:before{content:"\eb89"}.ms-Icon--NUIFPPressHand:before{content:"\eb8a"}.ms-Icon--NUIFPPressAction:before{content:"\eb8b"}.ms-Icon--NUIFPPressRepeatHand:before{content:"\eb8c"}.ms-Icon--NUIFPPressRepeatAction:before{content:"\eb8d"}.ms-Icon--StatusErrorFull:before{content:"\eb90"}.ms-Icon--TaskViewExpanded:before{content:"\eb91"}.ms-Icon--Certificate:before{content:"\eb95"}.ms-Icon--BackSpaceQWERTYLg:before{content:"\eb96"}.ms-Icon--ReturnKeyLg:before{content:"\eb97"}.ms-Icon--FastForward:before{content:"\eb9d"}.ms-Icon--Rewind:before{content:"\eb9e"}.ms-Icon--Photo2:before{content:"\eb9f"}.ms-Icon--MobBattery0:before{content:"\eba0"}.ms-Icon--MobBattery1:before{content:"\eba1"}.ms-Icon--MobBattery2:before{content:"\eba2"}.ms-Icon--MobBattery3:before{content:"\eba3"}.ms-Icon--MobBattery4:before{content:"\eba4"}.ms-Icon--MobBattery5:before{content:"\eba5"}.ms-Icon--MobBattery6:before{content:"\eba6"}.ms-Icon--MobBattery7:before{content:"\eba7"}.ms-Icon--MobBattery8:before{content:"\eba8"}.ms-Icon--MobBattery9:before{content:"\eba9"}.ms-Icon--MobBattery10:before{content:"\ebaa"}.ms-Icon--MobBatteryCharging0:before{content:"\ebab"}.ms-Icon--MobBatteryCharging1:before{content:"\ebac"}.ms-Icon--MobBatteryCharging2:before{content:"\ebad"}.ms-Icon--MobBatteryCharging3:before{content:"\ebae"}.ms-Icon--MobBatteryCharging4:before{content:"\ebaf"}.ms-Icon--MobBatteryCharging5:before{content:"\ebb0"}.ms-Icon--MobBatteryCharging6:before{content:"\ebb1"}.ms-Icon--MobBatteryCharging7:before{content:"\ebb2"}.ms-Icon--MobBatteryCharging8:before{content:"\ebb3"}.ms-Icon--MobBatteryCharging9:before{content:"\ebb4"}.ms-Icon--MobBatteryCharging10:before{content:"\ebb5"}.ms-Icon--MobBatterySaver0:before{content:"\ebb6"}.ms-Icon--MobBatterySaver1:before{content:"\ebb7"}.ms-Icon--MobBatterySaver2:before{content:"\ebb8"}.ms-Icon--MobBatterySaver3:before{content:"\ebb9"}.ms-Icon--MobBatterySaver4:before{content:"\ebba"}.ms-Icon--MobBatterySaver5:before{content:"\ebbb"}.ms-Icon--MobBatterySaver6:before{content:"\ebbc"}.ms-Icon--MobBatterySaver7:before{content:"\ebbd"}.ms-Icon--MobBatterySaver8:before{content:"\ebbe"}.ms-Icon--MobBatterySaver9:before{content:"\ebbf"}.ms-Icon--MobBatterySaver10:before{content:"\ebc0"}.ms-Icon--DictionaryCloud:before{content:"\ebc3"}.ms-Icon--ResetDrive:before{content:"\ebc4"}.ms-Icon--VolumeBars:before{content:"\ebc5"}.ms-Icon--Project:before{content:"\ebc6"}.ms-Icon--AdjustHologram:before{content:"\ebd2"}.ms-Icon--CloudDownload:before{content:"\ebd3"}.ms-Icon--MobWifiCallBars:before{content:"\ebd4"}.ms-Icon--MobWifiCall0:before{content:"\ebd5"}.ms-Icon--MobWifiCall1:before{content:"\ebd6"}.ms-Icon--MobWifiCall2:before{content:"\ebd7"}.ms-Icon--MobWifiCall3:before{content:"\ebd8"}.ms-Icon--MobWifiCall4:before{content:"\ebd9"}.ms-Icon--Family:before{content:"\ebda"}.ms-Icon--LockFeedback:before{content:"\ebdb"}.ms-Icon--DeviceDiscovery:before{content:"\ebde"}.ms-Icon--WindDirection:before{content:"\ebe6"}.ms-Icon--RightArrowKeyTime0:before{content:"\ebe7"}.ms-Icon--Bug:before{content:"\ebe8"}.ms-Icon--TabletMode:before{content:"\ebfc"}.ms-Icon--StatusCircleLeft:before{content:"\ebfd"}.ms-Icon--StatusTriangleLeft:before{content:"\ebfe"}.ms-Icon--StatusErrorLeft:before{content:"\ebff"}.ms-Icon--StatusWarningLeft:before{content:"\ec00"}.ms-Icon--MobBatteryUnknown:before{content:"\ec02"}.ms-Icon--NetworkTower:before{content:"\ec05"}.ms-Icon--CityNext:before{content:"\ec06"}.ms-Icon--CityNext2:before{content:"\ec07"}.ms-Icon--Courthouse:before{content:"\ec08"}.ms-Icon--Groceries:before{content:"\ec09"}.ms-Icon--Sustainable:before{content:"\ec0a"}.ms-Icon--BuildingEnergy:before{content:"\ec0b"}.ms-Icon--ToggleFilled:before{content:"\ec11"}.ms-Icon--ToggleBorder:before{content:"\ec12"}.ms-Icon--SliderThumb:before{content:"\ec13"}.ms-Icon--ToggleThumb:before{content:"\ec14"}.ms-Icon--MiracastLogoSmall:before{content:"\ec15"}.ms-Icon--MiracastLogoLarge:before{content:"\ec16"}.ms-Icon--PLAP:before{content:"\ec19"}.ms-Icon--Badge:before{content:"\ec1b"}.ms-Icon--SignalRoaming:before{content:"\ec1e"}.ms-Icon--MobileLocked:before{content:"\ec20"}.ms-Icon--InsiderHubApp:before{content:"\ec24"}.ms-Icon--PersonalFolder:before{content:"\ec25"}.ms-Icon--HomeGroup:before{content:"\ec26"}.ms-Icon--MyNetwork:before{content:"\ec27"}.ms-Icon--KeyboardFull:before{content:"\ec31"}.ms-Icon--Cafe:before{content:"\ec32"}.ms-Icon--MobSignal1:before{content:"\ec37"}.ms-Icon--MobSignal2:before{content:"\ec38"}.ms-Icon--MobSignal3:before{content:"\ec39"}.ms-Icon--MobSignal4:before{content:"\ec3a"}.ms-Icon--MobSignal5:before{content:"\ec3b"}.ms-Icon--MobWifi1:before{content:"\ec3c"}.ms-Icon--MobWifi2:before{content:"\ec3d"}.ms-Icon--MobWifi3:before{content:"\ec3e"}.ms-Icon--MobWifi4:before{content:"\ec3f"}.ms-Icon--MobAirplane:before{content:"\ec40"}.ms-Icon--MobBluetooth:before{content:"\ec41"}.ms-Icon--MobActionCenter:before{content:"\ec42"}.ms-Icon--MobLocation:before{content:"\ec43"}.ms-Icon--MobWifiHotspot:before{content:"\ec44"}.ms-Icon--LanguageJpn:before{content:"\ec45"}.ms-Icon--MobQuietHours:before{content:"\ec46"}.ms-Icon--MobDrivingMode:before{content:"\ec47"}.ms-Icon--SpeedOff:before{content:"\ec48"}.ms-Icon--SpeedMedium:before{content:"\ec49"}.ms-Icon--SpeedHigh:before{content:"\ec4a"}.ms-Icon--ThisPC:before{content:"\ec4e"}.ms-Icon--MusicNote:before{content:"\ec4f"}.ms-Icon--FileExplorer:before{content:"\ec50"}.ms-Icon--FileExplorerApp:before{content:"\ec51"}.ms-Icon--LeftArrowKeyTime0:before{content:"\ec52"}.ms-Icon--MicOff:before{content:"\ec54"}.ms-Icon--MicSleep:before{content:"\ec55"}.ms-Icon--MicError:before{content:"\ec56"}.ms-Icon--PlaybackRate1x:before{content:"\ec57"}.ms-Icon--PlaybackRateOther:before{content:"\ec58"}.ms-Icon--CashDrawer:before{content:"\ec59"}.ms-Icon--BarcodeScanner:before{content:"\ec5a"}.ms-Icon--ReceiptPrinter:before{content:"\ec5b"}.ms-Icon--MagStripeReader:before{content:"\ec5c"}.ms-Icon--CompletedSolid:before{content:"\ec61"}.ms-Icon--CompanionApp:before{content:"\ec64"}.ms-Icon--Favicon2:before{content:"\ec6c"}.ms-Icon--SwipeRevealArt:before{content:"\ec6d"}.ms-Icon--MicOn:before{content:"\ec71"}.ms-Icon--MicClipping:before{content:"\ec72"}.ms-Icon--TabletSelected:before{content:"\ec74"}.ms-Icon--MobileSelected:before{content:"\ec75"}.ms-Icon--LaptopSelected:before{content:"\ec76"}.ms-Icon--TVMonitorSelected:before{content:"\ec77"}.ms-Icon--DeveloperTools:before{content:"\ec7a"}.ms-Icon--MobCallForwarding:before{content:"\ec7e"}.ms-Icon--MobCallForwardingMirrored:before{content:"\ec7f"}.ms-Icon--BodyCam:before{content:"\ec80"}.ms-Icon--PoliceCar:before{content:"\ec81"}.ms-Icon--Draw:before{content:"\ec87"}.ms-Icon--DrawSolid:before{content:"\ec88"}.ms-Icon--LowerBrightness:before{content:"\ec8a"}.ms-Icon--ScrollUpDown:before{content:"\ec8f"}.ms-Icon--DateTime:before{content:"\ec92"}.ms-Icon--HoloLens:before{content:"\ec94"}.ms-Icon--Tiles:before{content:"\eca5"}.ms-Icon--PartyLeader:before{content:"\eca7"}.ms-Icon--AppIconDefault:before{content:"\ecaa"}.ms-Icon--Calories:before{content:"\ecad"}.ms-Icon--POI:before{content:"\ecaf"}.ms-Icon--BandBattery0:before{content:"\ecb9"}.ms-Icon--BandBattery1:before{content:"\ecba"}.ms-Icon--BandBattery2:before{content:"\ecbb"}.ms-Icon--BandBattery3:before{content:"\ecbc"}.ms-Icon--BandBattery4:before{content:"\ecbd"}.ms-Icon--BandBattery5:before{content:"\ecbe"}.ms-Icon--BandBattery6:before{content:"\ecbf"}.ms-Icon--AddSurfaceHub:before{content:"\ecc4"}.ms-Icon--DevUpdate:before{content:"\ecc5"}.ms-Icon--Unit:before{content:"\ecc6"}.ms-Icon--AddTo:before{content:"\ecc8"}.ms-Icon--RemoveFrom:before{content:"\ecc9"}.ms-Icon--RadioBtnOff:before{content:"\ecca"}.ms-Icon--RadioBtnOn:before{content:"\eccb"}.ms-Icon--RadioBullet2:before{content:"\eccc"}.ms-Icon--ExploreContent:before{content:"\eccd"}.ms-Icon--Blocked2:before{content:"\ece4"}.ms-Icon--ScrollMode:before{content:"\ece7"}.ms-Icon--ZoomMode:before{content:"\ece8"}.ms-Icon--PanMode:before{content:"\ece9"}.ms-Icon--WiredUSB:before{content:"\ecf0"}.ms-Icon--WirelessUSB:before{content:"\ecf1"}.ms-Icon--USBSafeConnect:before{content:"\ecf3"}.ms-Icon--ActionCenterNotificationMirrored:before{content:"\ed0c"}.ms-Icon--ActionCenterMirrored:before{content:"\ed0d"}.ms-Icon--SubscriptionAdd:before{content:"\ed0e"}.ms-Icon--ResetDevice:before{content:"\ed10"}.ms-Icon--SubscriptionAddMirrored:before{content:"\ed11"}.ms-Icon--QRCode:before{content:"\ed14"}.ms-Icon--Feedback:before{content:"\ed15"}.ms-Icon--Hide:before{content:"\ed1a"}.ms-Icon--Subtitles:before{content:"\ed1e"}.ms-Icon--SubtitlesAudio:before{content:"\ed1f"}.ms-Icon--OpenFolderHorizontal:before{content:"\ed25"}.ms-Icon--CalendarMirrored:before{content:"\ed28"}.ms-Icon--MobeSIM:before{content:"\ed2a"}.ms-Icon--MobeSIMNoProfile:before{content:"\ed2b"}.ms-Icon--MobeSIMLocked:before{content:"\ed2c"}.ms-Icon--MobeSIMBusy:before{content:"\ed2d"}.ms-Icon--SignalError:before{content:"\ed2e"}.ms-Icon--StreamingEnterprise:before{content:"\ed2f"}.ms-Icon--Headphone0:before{content:"\ed30"}.ms-Icon--Headphone1:before{content:"\ed31"}.ms-Icon--Headphone2:before{content:"\ed32"}.ms-Icon--Headphone3:before{content:"\ed33"}.ms-Icon--Apps:before{content:"\ed35"}.ms-Icon--KeyboardBrightness:before{content:"\ed39"}.ms-Icon--KeyboardLowerBrightness:before{content:"\ed3a"}.ms-Icon--SkipBack10:before{content:"\ed3c"}.ms-Icon--SkipForward30:before{content:"\ed3d"}.ms-Icon--TreeFolderFolder:before{content:"\ed41"}.ms-Icon--TreeFolderFolderFill:before{content:"\ed42"}.ms-Icon--TreeFolderFolderOpen:before{content:"\ed43"}.ms-Icon--TreeFolderFolderOpenFill:before{content:"\ed44"}.ms-Icon--MultimediaDMP:before{content:"\ed47"}.ms-Icon--KeyboardOneHanded:before{content:"\ed4c"}.ms-Icon--Narrator:before{content:"\ed4d"}.ms-Icon--EmojiTabPeople:before{content:"\ed53"}.ms-Icon--EmojiTabSmilesAnimals:before{content:"\ed54"}.ms-Icon--EmojiTabCelebrationObjects:before{content:"\ed55"}.ms-Icon--EmojiTabFoodPlants:before{content:"\ed56"}.ms-Icon--EmojiTabTransitPlaces:before{content:"\ed57"}.ms-Icon--EmojiTabSymbols:before{content:"\ed58"}.ms-Icon--EmojiTabTextSmiles:before{content:"\ed59"}.ms-Icon--EmojiTabFavorites:before{content:"\ed5a"}.ms-Icon--EmojiSwatch:before{content:"\ed5b"}.ms-Icon--ConnectApp:before{content:"\ed5c"}.ms-Icon--CompanionDeviceFramework:before{content:"\ed5d"}.ms-Icon--Ruler:before{content:"\ed5e"}.ms-Icon--FingerInking:before{content:"\ed5f"}.ms-Icon--StrokeErase:before{content:"\ed60"}.ms-Icon--PointErase:before{content:"\ed61"}.ms-Icon--ClearAllInk:before{content:"\ed62"}.ms-Icon--Pencil:before{content:"\ed63"}.ms-Icon--Marker:before{content:"\ed64"}.ms-Icon--InkingCaret:before{content:"\ed65"}.ms-Icon--InkingColorOutline:before{content:"\ed66"}.ms-Icon--InkingColorFill:before{content:"\ed67"}.ms-Icon--HardDrive:before{content:"\eda2"}.ms-Icon--NetworkAdapter:before{content:"\eda3"}.ms-Icon--Touchscreen:before{content:"\eda4"}.ms-Icon--NetworkPrinter:before{content:"\eda5"}.ms-Icon--CloudPrinter:before{content:"\eda6"}.ms-Icon--KeyboardShortcut:before{content:"\eda7"}.ms-Icon--BrushSize:before{content:"\eda8"}.ms-Icon--NarratorForward:before{content:"\eda9"}.ms-Icon--NarratorForwardMirrored:before{content:"\edaa"}.ms-Icon--SyncBadge12:before{content:"\edab"}.ms-Icon--RingerBadge12:before{content:"\edac"}.ms-Icon--AsteriskBadge12:before{content:"\edad"}.ms-Icon--ErrorBadge12:before{content:"\edae"}.ms-Icon--CircleRingBadge12:before{content:"\edaf"}.ms-Icon--CircleFillBadge12:before{content:"\edb0"}.ms-Icon--ImportantBadge12:before{content:"\edb1"}.ms-Icon--MailBadge12:before{content:"\edb3"}.ms-Icon--PauseBadge12:before{content:"\edb4"}.ms-Icon--PlayBadge12:before{content:"\edb5"}.ms-Icon--PenWorkspace:before{content:"\edc6"}.ms-Icon--CaretLeft8:before{content:"\edd5"}.ms-Icon--CaretRight8:before{content:"\edd6"}.ms-Icon--CaretUp8:before{content:"\edd7"}.ms-Icon--CaretDown8:before{content:"\edd8"}.ms-Icon--CaretLeftSolid8:before{content:"\edd9"}.ms-Icon--CaretRightSolid8:before{content:"\edda"}.ms-Icon--CaretUpSolid8:before{content:"\eddb"}.ms-Icon--CaretDownSolid8:before{content:"\eddc"}.ms-Icon--Strikethrough:before{content:"\ede0"}.ms-Icon--Export:before{content:"\ede1"}.ms-Icon--ExportMirrored:before{content:"\ede2"}.ms-Icon--ButtonMenu:before{content:"\ede3"}.ms-Icon--CloudSearch:before{content:"\ede4"}.ms-Icon--PinyinIMELogo:before{content:"\ede5"}.ms-Icon--CalligraphyPen:before{content:"\edfb"}.ms-Icon--ReplyMirrored:before{content:"\ee35"}.ms-Icon--LockscreenDesktop:before{content:"\ee3f"}.ms-Icon--TaskViewSettings:before{content:"\ee40"}.ms-Icon--MiniExpand2Mirrored:before{content:"\ee47"}.ms-Icon--MiniContract2Mirrored:before{content:"\ee49"}.ms-Icon--Play36:before{content:"\ee4a"}.ms-Icon--PenPalette:before{content:"\ee56"}.ms-Icon--GuestUser:before{content:"\ee57"}.ms-Icon--SettingsBattery:before{content:"\ee63"}.ms-Icon--TaskbarPhone:before{content:"\ee64"}.ms-Icon--LockScreenGlance:before{content:"\ee65"}.ms-Icon--GenericScan:before{content:"\ee6f"}.ms-Icon--ImageExport:before{content:"\ee71"}.ms-Icon--WifiEthernet:before{content:"\ee77"}.ms-Icon--ActionCenterQuiet:before{content:"\ee79"}.ms-Icon--ActionCenterQuietNotification:before{content:"\ee7a"}.ms-Icon--TrackersMirrored:before{content:"\ee92"}.ms-Icon--DateTimeMirrored:before{content:"\ee93"}.ms-Icon--Wheel:before{content:"\ee94"}.ms-Icon--VirtualMachineGroup:before{content:"\eea3"}.ms-Icon--ButtonView2:before{content:"\eeca"}.ms-Icon--PenWorkspaceMirrored:before{content:"\ef15"}.ms-Icon--PenPaletteMirrored:before{content:"\ef16"}.ms-Icon--StrokeEraseMirrored:before{content:"\ef17"}.ms-Icon--PointEraseMirrored:before{content:"\ef18"}.ms-Icon--ClearAllInkMirrored:before{content:"\ef19"}.ms-Icon--BackgroundToggle:before{content:"\ef1f"}.ms-Icon--Marquee:before{content:"\ef20"}.ms-Icon--ChromeCloseContrast:before{content:"\ef2c"}.ms-Icon--ChromeMinimizeContrast:before{content:"\ef2d"}.ms-Icon--ChromeMaximizeContrast:before{content:"\ef2e"}.ms-Icon--ChromeRestoreContrast:before{content:"\ef2f"}.ms-Icon--TrafficLight:before{content:"\ef31"}.ms-Icon--Replay:before{content:"\ef3b"}.ms-Icon--Eyedropper:before{content:"\ef3c"}.ms-Icon--LineDisplay:before{content:"\ef3d"}.ms-Icon--PINPad:before{content:"\ef3e"}.ms-Icon--SignatureCapture:before{content:"\ef3f"}.ms-Icon--ChipCardCreditCardReader:before{content:"\ef40"}.ms-Icon--MarketDown:before{content:"\ef42"}.ms-Icon--PlayerSettings:before{content:"\ef58"}.ms-Icon--LandscapeOrientation:before{content:"\ef6b"}.ms-Icon--Flow:before{content:"\ef90"}.ms-Icon--Touchpad:before{content:"\efa5"}.ms-Icon--Speech:before{content:"\efa9"}.ms-Icon--KnowledgeArticle:before{content:"\f000"}.ms-Icon--Relationship:before{content:"\f003"}.ms-Icon--ZipFolder:before{content:"\f012"}.ms-Icon--DefaultAPN:before{content:"\f080"}.ms-Icon--UserAPN:before{content:"\f081"}.ms-Icon--DoublePinyin:before{content:"\f085"}.ms-Icon--BlueLight:before{content:"\f08c"}.ms-Icon--CaretSolidLeft:before{content:"\f08d"}.ms-Icon--CaretSolidDown:before{content:"\f08e"}.ms-Icon--CaretSolidRight:before{content:"\f08f"}.ms-Icon--CaretSolidUp:before{content:"\f090"}.ms-Icon--ButtonA:before{content:"\f093"}.ms-Icon--ButtonB:before{content:"\f094"}.ms-Icon--ButtonY:before{content:"\f095"}.ms-Icon--ButtonX:before{content:"\f096"}.ms-Icon--ArrowUp8:before{content:"\f0ad"}.ms-Icon--ArrowDown8:before{content:"\f0ae"}.ms-Icon--ArrowRight8:before{content:"\f0af"}.ms-Icon--ArrowLeft8:before{content:"\f0b0"}.ms-Icon--QuarentinedItems:before{content:"\f0b2"}.ms-Icon--QuarentinedItemsMirrored:before{content:"\f0b3"}.ms-Icon--Protractor:before{content:"\f0b4"}.ms-Icon--ChecklistMirrored:before{content:"\f0b5"}.ms-Icon--StatusCircle7:before{content:"\f0b6"}.ms-Icon--StatusCheckmark7:before{content:"\f0b7"}.ms-Icon--StatusErrorCircle7:before{content:"\f0b8"}.ms-Icon--Connected:before{content:"\f0b9"}.ms-Icon--PencilFill:before{content:"\f0c6"}.ms-Icon--CalligraphyFill:before{content:"\f0c7"}.ms-Icon--QuarterStarLeft:before{content:"\f0ca"}.ms-Icon--QuarterStarRight:before{content:"\f0cb"}.ms-Icon--ThreeQuarterStarLeft:before{content:"\f0cc"}.ms-Icon--ThreeQuarterStarRight:before{content:"\f0cd"}.ms-Icon--QuietHoursBadge12:before{content:"\f0ce"}.ms-Icon--BackMirrored:before{content:"\f0d2"}.ms-Icon--ForwardMirrored:before{content:"\f0d3"}.ms-Icon--ChromeBackContrast:before{content:"\f0d5"}.ms-Icon--ChromeBackContrastMirrored:before{content:"\f0d6"}.ms-Icon--ChromeBackToWindowContrast:before{content:"\f0d7"}.ms-Icon--ChromeFullScreenContrast:before{content:"\f0d8"}.ms-Icon--GridView:before{content:"\f0e2"}.ms-Icon--ClipboardList:before{content:"\f0e3"}.ms-Icon--ClipboardListMirrored:before{content:"\f0e4"}.ms-Icon--OutlineQuarterStarLeft:before{content:"\f0e5"}.ms-Icon--OutlineQuarterStarRight:before{content:"\f0e6"}.ms-Icon--OutlineHalfStarLeft:before{content:"\f0e7"}.ms-Icon--OutlineHalfStarRight:before{content:"\f0e8"}.ms-Icon--OutlineThreeQuarterStarLeft:before{content:"\f0e9"}.ms-Icon--OutlineThreeQuarterStarRight:before{content:"\f0ea"}.ms-Icon--SpatialVolume0:before{content:"\f0eb"}.ms-Icon--SpatialVolume1:before{content:"\f0ec"}.ms-Icon--SpatialVolume2:before{content:"\f0ed"}.ms-Icon--SpatialVolume3:before{content:"\f0ee"}.ms-Icon--ApplicationGuard:before{content:"\f0ef"}.ms-Icon--OutlineStarLeftHalf:before{content:"\f0f7"}.ms-Icon--OutlineStarRightHalf:before{content:"\f0f8"}.ms-Icon--ChromeAnnotateContrast:before{content:"\f0f9"}.ms-Icon--DefenderBadge12:before{content:"\f0fb"}.ms-Icon--DetachablePC:before{content:"\f103"}.ms-Icon--LeftStick:before{content:"\f108"}.ms-Icon--RightStick:before{content:"\f109"}.ms-Icon--TriggerLeft:before{content:"\f10a"}.ms-Icon--TriggerRight:before{content:"\f10b"}.ms-Icon--BumperLeft:before{content:"\f10c"}.ms-Icon--BumperRight:before{content:"\f10d"}.ms-Icon--Dpad:before{content:"\f10e"}.ms-Icon--EnglishPunctuation:before{content:"\f110"}.ms-Icon--ChinesePunctuation:before{content:"\f111"}.ms-Icon--HMD:before{content:"\f119"}.ms-Icon--CtrlSpatialRight:before{content:"\f11b"}.ms-Icon--PaginationDotOutline10:before{content:"\f126"}.ms-Icon--PaginationDotSolid10:before{content:"\f127"}.ms-Icon--StrokeErase2:before{content:"\f128"}.ms-Icon--SmallErase:before{content:"\f129"}.ms-Icon--LargeErase:before{content:"\f12a"}.ms-Icon--FolderHorizontal:before{content:"\f12b"}.ms-Icon--MicrophoneListening:before{content:"\f12e"}.ms-Icon--StatusExclamationCircle7:before{content:"\f12f"}.ms-Icon--Video360:before{content:"\f131"}.ms-Icon--GiftboxOpen:before{content:"\f133"}.ms-Icon--StatusCircleOuter:before{content:"\f136"}.ms-Icon--StatusCircleInner:before{content:"\f137"}.ms-Icon--StatusCircleRing:before{content:"\f138"}.ms-Icon--StatusTriangleOuter:before{content:"\f139"}.ms-Icon--StatusTriangleInner:before{content:"\f13a"}.ms-Icon--StatusTriangleExclamation:before{content:"\f13b"}.ms-Icon--StatusCircleExclamation:before{content:"\f13c"}.ms-Icon--StatusCircleErrorX:before{content:"\f13d"}.ms-Icon--StatusCircleCheckmark:before{content:"\f13e"}.ms-Icon--StatusCircleInfo:before{content:"\f13f"}.ms-Icon--StatusCircleBlock:before{content:"\f140"}.ms-Icon--StatusCircleBlock2:before{content:"\f141"}.ms-Icon--StatusCircleQuestionMark:before{content:"\f142"}.ms-Icon--StatusCircleSync:before{content:"\f143"}.ms-Icon--Dial1:before{content:"\f146"}.ms-Icon--Dial2:before{content:"\f147"}.ms-Icon--Dial3:before{content:"\f148"}.ms-Icon--Dial4:before{content:"\f149"}.ms-Icon--Dial5:before{content:"\f14a"}.ms-Icon--Dial6:before{content:"\f14b"}.ms-Icon--Dial7:before{content:"\f14c"}.ms-Icon--Dial8:before{content:"\f14d"}.ms-Icon--Dial9:before{content:"\f14e"}.ms-Icon--Dial10:before{content:"\f14f"}.ms-Icon--Dial11:before{content:"\f150"}.ms-Icon--Dial12:before{content:"\f151"}.ms-Icon--Dial13:before{content:"\f152"}.ms-Icon--Dial14:before{content:"\f153"}.ms-Icon--Dial15:before{content:"\f154"}.ms-Icon--Dial16:before{content:"\f155"}.ms-Icon--DialShape1:before{content:"\f156"}.ms-Icon--DialShape2:before{content:"\f157"}.ms-Icon--DialShape3:before{content:"\f158"}.ms-Icon--DialShape4:before{content:"\f159"}.ms-Icon--ClosedCaptionsInternational:before{content:"\f15f"}.ms-Icon--TollSolid:before{content:"\f161"}.ms-Icon--TrafficCongestionSolid:before{content:"\f163"}.ms-Icon--ExploreContentSingle:before{content:"\f164"}.ms-Icon--CollapseContent:before{content:"\f165"}.ms-Icon--CollapseContentSingle:before{content:"\f166"}.ms-Icon--InfoSolid:before{content:"\f167"}.ms-Icon--GroupList:before{content:"\f168"}.ms-Icon--CaretBottomRightSolidCenter8:before{content:"\f169"}.ms-Icon--ProgressRingDots:before{content:"\f16a"}.ms-Icon--Checkbox14:before{content:"\f16b"}.ms-Icon--CheckboxComposite14:before{content:"\f16c"}.ms-Icon--CheckboxIndeterminateCombo14:before{content:"\f16d"}.ms-Icon--CheckboxIndeterminateCombo:before{content:"\f16e"}.ms-Icon--StatusPause7:before{content:"\f175"}.ms-Icon--CharacterAppearance:before{content:"\f17f"}.ms-Icon--Lexicon:before{content:"\f180"}.ms-Icon--ScreenTime:before{content:"\f182"}.ms-Icon--HeadlessDevice:before{content:"\f191"}.ms-Icon--NetworkSharing:before{content:"\f193"}.ms-Icon--EyeGaze:before{content:"\f19d"}.ms-Icon--ToggleLeft:before{content:"\f19e"}.ms-Icon--ToggleRight:before{content:"\f19f"}.ms-Icon--WindowsInsider:before{content:"\f1ad"}.ms-Icon--ChromeSwitch:before{content:"\f1cb"}.ms-Icon--ChromeSwitchContast:before{content:"\f1cc"}.ms-Icon--StatusCheckmark:before{content:"\f1d8"}.ms-Icon--StatusCheckmarkLeft:before{content:"\f1d9"}.ms-Icon--KeyboardLeftAligned:before{content:"\f20c"}.ms-Icon--KeyboardRightAligned:before{content:"\f20d"}.ms-Icon--KeyboardSettings:before{content:"\f210"}.ms-Icon--NetworkPhysical:before{content:"\f211"}.ms-Icon--IOT:before{content:"\f22c"}.ms-Icon--UnknownMirrored:before{content:"\f22e"}.ms-Icon--ViewDashboard:before{content:"\f246"}.ms-Icon--ExploitProtectionSettings:before{content:"\f259"}.ms-Icon--KeyboardNarrow:before{content:"\f260"}.ms-Icon--Keyboard12Key:before{content:"\f261"}.ms-Icon--KeyboardDock:before{content:"\f26b"}.ms-Icon--KeyboardUndock:before{content:"\f26c"}.ms-Icon--KeyboardLeftDock:before{content:"\f26d"}.ms-Icon--KeyboardRightDock:before{content:"\f26e"}.ms-Icon--Ear:before{content:"\f270"}.ms-Icon--PointerHand:before{content:"\f271"}.ms-Icon--Bullseye:before{content:"\f272"}.ms-Icon--DocumentApproval:before{content:"\f28b"}.ms-Icon--LocaleLanguage:before{content:"\f2b7"}.ms-Icon--PassiveAuthentication:before{content:"\f32a"}.ms-Icon--ColorSolid:before{content:"\f354"}.ms-Icon--NetworkOffline:before{content:"\f384"}.ms-Icon--NetworkConnected:before{content:"\f385"}.ms-Icon--NetworkConnectedCheckmark:before{content:"\f386"}.ms-Icon--SignOut:before{content:"\f3b1"}.ms-Icon--StatusInfo:before{content:"\f3cc"}.ms-Icon--StatusInfoLeft:before{content:"\f3cd"}.ms-Icon--NearbySharing:before{content:"\f3e2"}.ms-Icon--CtrlSpatialLeft:before{content:"\f3e7"}.ms-Icon--InteractiveDashboard:before{content:"\f404"}.ms-Icon--DeclineCall:before{content:"\f405"}.ms-Icon--ClippingTool:before{content:"\f406"}.ms-Icon--RectangularClipping:before{content:"\f407"}.ms-Icon--FreeFormClipping:before{content:"\f408"}.ms-Icon--CopyTo:before{content:"\f413"}.ms-Icon--IDBadge:before{content:"\f427"}.ms-Icon--DynamicLock:before{content:"\f439"}.ms-Icon--PenTips:before{content:"\f45e"}.ms-Icon--PenTipsMirrored:before{content:"\f45f"}.ms-Icon--HWPJoin:before{content:"\f460"}.ms-Icon--HWPInsert:before{content:"\f461"}.ms-Icon--HWPStrikeThrough:before{content:"\f462"}.ms-Icon--HWPScratchOut:before{content:"\f463"}.ms-Icon--HWPSplit:before{content:"\f464"}.ms-Icon--HWPNewLine:before{content:"\f465"}.ms-Icon--HWPOverwrite:before{content:"\f466"}.ms-Icon--MobWifiWarning1:before{content:"\f473"}.ms-Icon--MobWifiWarning2:before{content:"\f474"}.ms-Icon--MobWifiWarning3:before{content:"\f475"}.ms-Icon--MobWifiWarning4:before{content:"\f476"}.ms-Icon--MicLocationCombo:before{content:"\f47f"}.ms-Icon--Globe2:before{content:"\f49a"}.ms-Icon--SpecialEffectSize:before{content:"\f4a5"}.ms-Icon--GIF:before{content:"\f4a9"}.ms-Icon--Sticker2:before{content:"\f4aa"}.ms-Icon--SurfaceHubSelected:before{content:"\f4be"}.ms-Icon--HoloLensSelected:before{content:"\f4bf"}.ms-Icon--Earbud:before{content:"\f4c0"}.ms-Icon--MixVolumes:before{content:"\f4c3"}.ms-Icon--Safe:before{content:"\f540"}.ms-Icon--LaptopSecure:before{content:"\f552"}.ms-Icon--PrintDefault:before{content:"\f56d"}.ms-Icon--PageMirrored:before{content:"\f56e"}.ms-Icon--LandscapeOrientationMirrored:before{content:"\f56f"}.ms-Icon--ColorOff:before{content:"\f570"}.ms-Icon--PrintAllPages:before{content:"\f571"}.ms-Icon--PrintCustomRange:before{content:"\f572"}.ms-Icon--PageMarginPortraitNarrow:before{content:"\f573"}.ms-Icon--PageMarginPortraitNormal:before{content:"\f574"}.ms-Icon--PageMarginPortraitModerate:before{content:"\f575"}.ms-Icon--PageMarginPortraitWide:before{content:"\f576"}.ms-Icon--PageMarginLandscapeNarrow:before{content:"\f577"}.ms-Icon--PageMarginLandscapeNormal:before{content:"\f578"}.ms-Icon--PageMarginLandscapeModerate:before{content:"\f579"}.ms-Icon--PageMarginLandscapeWide:before{content:"\f57a"}.ms-Icon--CollateLandscape:before{content:"\f57b"}.ms-Icon--CollatePortrait:before{content:"\f57c"}.ms-Icon--CollatePortraitSeparated:before{content:"\f57d"}.ms-Icon--DuplexLandscapeOneSided:before{content:"\f57e"}.ms-Icon--DuplexLandscapeOneSidedMirrored:before{content:"\f57f"}.ms-Icon--DuplexLandscapeTwoSidedLongEdge:before{content:"\f580"}.ms-Icon--DuplexLandscapeTwoSidedLongEdgeMirrored:before{content:"\f581"}.ms-Icon--DuplexLandscapeTwoSidedShortEdge:before{content:"\f582"}.ms-Icon--DuplexLandscapeTwoSidedShortEdgeMirrored:before{content:"\f583"}.ms-Icon--DuplexPortraitOneSided:before{content:"\f584"}.ms-Icon--DuplexPortraitOneSidedMirrored:before{content:"\f585"}.ms-Icon--DuplexPortraitTwoSidedLongEdge:before{content:"\f586"}.ms-Icon--DuplexPortraitTwoSidedLongEdgeMirrored:before{content:"\f587"}.ms-Icon--DuplexPortraitTwoSidedShortEdge:before{content:"\f588"}.ms-Icon--DuplexPortraitTwoSidedShortEdgeMirrored:before{content:"\f589"}.ms-Icon--PPSOneLandscape:before{content:"\f58a"}.ms-Icon--PPSTwoLandscape:before{content:"\f58b"}.ms-Icon--PPSTwoPortrait:before{content:"\f58c"}.ms-Icon--PPSFourLandscape:before{content:"\f58d"}.ms-Icon--PPSFourPortrait:before{content:"\f58e"}.ms-Icon--HolePunchOff:before{content:"\f58f"}.ms-Icon--HolePunchPortraitLeft:before{content:"\f590"}.ms-Icon--HolePunchPortraitRight:before{content:"\f591"}.ms-Icon--HolePunchPortraitTop:before{content:"\f592"}.ms-Icon--HolePunchPortraitBottom:before{content:"\f593"}.ms-Icon--HolePunchLandscapeLeft:before{content:"\f594"}.ms-Icon--HolePunchLandscapeRight:before{content:"\f595"}.ms-Icon--HolePunchLandscapeTop:before{content:"\f596"}.ms-Icon--HolePunchLandscapeBottom:before{content:"\f597"}.ms-Icon--StaplingOff:before{content:"\f598"}.ms-Icon--StaplingPortraitTopLeft:before{content:"\f599"}.ms-Icon--StaplingPortraitTopRight:before{content:"\f59a"}.ms-Icon--StaplingPortraitBottomRight:before{content:"\f59b"}.ms-Icon--StaplingPortraitTwoLeft:before{content:"\f59c"}.ms-Icon--StaplingPortraitTwoRight:before{content:"\f59d"}.ms-Icon--StaplingPortraitTwoTop:before{content:"\f59e"}.ms-Icon--StaplingPortraitTwoBottom:before{content:"\f59f"}.ms-Icon--StaplingPortraitBookBinding:before{content:"\f5a0"}.ms-Icon--StaplingLandscapeTopLeft:before{content:"\f5a1"}.ms-Icon--StaplingLandscapeTopRight:before{content:"\f5a2"}.ms-Icon--StaplingLandscapeBottomLeft:before{content:"\f5a3"}.ms-Icon--StaplingLandscapeBottomRight:before{content:"\f5a4"}.ms-Icon--StaplingLandscapeTwoLeft:before{content:"\f5a5"}.ms-Icon--StaplingLandscapeTwoRight:before{content:"\f5a6"}.ms-Icon--StaplingLandscapeTwoTop:before{content:"\f5a7"}.ms-Icon--StaplingLandscapeTwoBottom:before{content:"\f5a8"}.ms-Icon--StaplingLandscapeBookBinding:before{content:"\f5a9"}.ms-Icon--StatusDataTransferRoaming:before{content:"\f5aa"}.ms-Icon--MobSIMError:before{content:"\f5ab"}.ms-Icon--CollateLandscapeSeparated:before{content:"\f5ac"}.ms-Icon--PPSOnePortrait:before{content:"\f5ad"}.ms-Icon--StaplingPortraitBottomLeft:before{content:"\f5ae"}.ms-Icon--PlaySolid:before{content:"\f5b0"}.ms-Icon--RepeatOff:before{content:"\f5e7"}.ms-Icon--Set:before{content:"\f5ed"}.ms-Icon--SetSolid:before{content:"\f5ee"}.ms-Icon--FuzzyReading:before{content:"\f5ef"}.ms-Icon--VerticalBattery0:before{content:"\f5f2"}.ms-Icon--VerticalBattery1:before{content:"\f5f3"}.ms-Icon--VerticalBattery2:before{content:"\f5f4"}.ms-Icon--VerticalBattery3:before{content:"\f5f5"}.ms-Icon--VerticalBattery4:before{content:"\f5f6"}.ms-Icon--VerticalBattery5:before{content:"\f5f7"}.ms-Icon--VerticalBattery6:before{content:"\f5f8"}.ms-Icon--VerticalBattery7:before{content:"\f5f9"}.ms-Icon--VerticalBattery8:before{content:"\f5fa"}.ms-Icon--VerticalBattery9:before{content:"\f5fb"}.ms-Icon--VerticalBattery10:before{content:"\f5fc"}.ms-Icon--VerticalBatteryCharging0:before{content:"\f5fd"}.ms-Icon--VerticalBatteryCharging1:before{content:"\f5fe"}.ms-Icon--VerticalBatteryCharging2:before{content:"\f5ff"}ms-Icon--VerticalBatteryCharging3:before{content:"\f600"}.ms-Icon--VerticalBatteryCharging4:before{content:"\f601"}.ms-Icon--VerticalBatteryCharging5:before{content:"\f602"}.ms-Icon--VerticalBatteryCharging6:before{content:"\f603"}.ms-Icon--VerticalBatteryCharging7:before{content:"\f604"}.ms-Icon--VerticalBatteryCharging8:before{content:"\f605"}.ms-Icon--VerticalBatteryCharging9:before{content:"\f606"}.ms-Icon--VerticalBatteryCharging10:before{content:"\f607"}.ms-Icon--VerticalBatteryUnknown:before{content:"\f608"}.ms-Icon--SIMError:before{content:"\f618"}.ms-Icon--SIMMissing:before{content:"\f619"}.ms-Icon--SIMLock:before{content:"\f61a"}.ms-Icon--eSIM:before{content:"\f61b"}.ms-Icon--eSIMNoProfile:before{content:"\f61c"}.ms-Icon--eSIMLocked:before{content:"\f61d"}.ms-Icon--eSIMBusy:before{content:"\f61e"}.ms-Icon--NoiseCancelation:before{content:"\f61f"}.ms-Icon--NoiseCancelationOff:before{content:"\f620"}.ms-Icon--MusicSharing:before{content:"\f623"}.ms-Icon--MusicSharingOff:before{content:"\f624"}.ms-Icon--CircleShapeSolid:before{content:"\f63c"}.ms-Icon--WifiCallBars:before{content:"\f657"}.ms-Icon--WifiCall0:before{content:"\f658"}.ms-Icon--WifiCall1:before{content:"\f659"}.ms-Icon--WifiCall2:before{content:"\f65a"}.ms-Icon--WifiCall3:before{content:"\f65b"}.ms-Icon--WifiCall4:before{content:"\f65c"}.ms-Icon--CHTLanguageBar:before{content:"\f69e"}.ms-Icon--ComposeMode:before{content:"\f6a9"}.ms-Icon--ExpressiveInputEntry:before{content:"\f6b8"}.ms-Icon--EmojiTabMoreSymbols:before{content:"\f6ba"}.ms-Icon--WebSearch:before{content:"\f6fa"}.ms-Icon--Kiosk:before{content:"\f712"}.ms-Icon--RTTLogo:before{content:"\f714"}.ms-Icon--VoiceCall:before{content:"\f715"}.ms-Icon--GoToMessage:before{content:"\f716"}.ms-Icon--ReturnToCall:before{content:"\f71a"}.ms-Icon--StartPresenting:before{content:"\f71c"}.ms-Icon--StopPresenting:before{content:"\f71d"}.ms-Icon--ProductivityMode:before{content:"\f71e"}.ms-Icon--SetHistoryStatus:before{content:"\f738"}.ms-Icon--SetHistoryStatus2:before{content:"\f739"}.ms-Icon--Keyboardsettings20:before{content:"\f73d"}.ms-Icon--OneHandedRight20:before{content:"\f73e"}.ms-Icon--OneHandedLeft20:before{content:"\f73f"}.ms-Icon--Split20:before{content:"\f740"}.ms-Icon--Full20:before{content:"\f741"}.ms-Icon--Handwriting20:before{content:"\f742"}.ms-Icon--ChevronLeft20:before{content:"\f743"}.ms-Icon--ChevronLeft32:before{content:"\f744"}.ms-Icon--ChevronRight20:before{content:"\f745"}.ms-Icon--ChevronRight32:before{content:"\f746"}.ms-Icon--Event12:before{content:"\f763"}.ms-Icon--MicOff2:before{content:"\f781"}.ms-Icon--DeliveryOptimization:before{content:"\f785"}.ms-Icon--CancelMedium:before{content:"\f78a"}.ms-Icon--SearchMedium:before{content:"\f78b"}.ms-Icon--AcceptMedium:before{content:"\f78c"}.ms-Icon--RevealPasswordMedium:before{content:"\f78d"}.ms-Icon--DeleteWord:before{content:"\f7ad"}.ms-Icon--DeleteWordFill:before{content:"\f7ae"}.ms-Icon--DeleteLines:before{content:"\f7af"}.ms-Icon--DeleteLinesFill:before{content:"\f7b0"}.ms-Icon--InstertWords:before{content:"\f7b1"}.ms-Icon--InstertWordsFill:before{content:"\f7b2"}.ms-Icon--JoinWords:before{content:"\f7b3"}.ms-Icon--JoinWordsFill:before{content:"\f7b4"}.ms-Icon--OverwriteWords:before{content:"\f7b5"}.ms-Icon--OverwriteWordsFill:before{content:"\f7b6"}.ms-Icon--AddNewLine:before{content:"\f7b7"}.ms-Icon--AddNewLineFill:before{content:"\f7b8"}.ms-Icon--OverwriteWordsKorean:before{content:"\f7b9"}.ms-Icon--OverwriteWordsFillKorean:before{content:"\f7ba"}.ms-Icon--EducationIcon:before{content:"\f7bb"}.ms-Icon--WindowSnipping:before{content:"\f7ed"}.ms-Icon--VideoCapture:before{content:"\f7ee"}.ms-Icon--StatusSecured:before{content:"\f809"}.ms-Icon--NarratorApp:before{content:"\f83b"}.ms-Icon--PowerButtonUpdate:before{content:"\f83d"}.ms-Icon--RestartUpdate:before{content:"\f83e"}.ms-Icon--UpdateStatusDot:before{content:"\f83f"}.ms-Icon--Eject:before{content:"\f847"}.ms-Icon--Spelling:before{content:"\f87b"}.ms-Icon--SpellingKorean:before{content:"\f87c"}.ms-Icon--SpellingSerbian:before{content:"\f87d"}.ms-Icon--SpellingChinese:before{content:"\f87e"}.ms-Icon--FolderSelect:before{content:"\f89a"}.ms-Icon--SmartScreen:before{content:"\f8a5"}.ms-Icon--ExploitProtection:before{content:"\f8a6"}.ms-Icon--AddBold:before{content:"\f8aa"}.ms-Icon--SubtractBold:before{content:"\f8ab"}.ms-Icon--BackSolidBold:before{content:"\f8ac"}.ms-Icon--ForwardSolidBold:before{content:"\f8ad"}.ms-Icon--PauseBold:before{content:"\f8ae"}.ms-Icon--ClickSolid:before{content:"\f8af"}.ms-Icon--SettingsSolid:before{content:"\f8b0"}.ms-Icon--MicrophoneSolidBold:before{content:"\f8b1"}.ms-Icon--SpeechSolidBold:before{content:"\f8b2"}.ms-Icon--ClickedOutLoudSolidBold:before{content:"\f8b3"}@font-face{font-family:FabricMDL2Icons;src:url(/VFluent3/assets/fabricmdl2icons-3.54.c196bd11.woff) format("woff");font-weight:400;font-style:normal}@font-face{font-family:FluentIcons;src:url(/VFluent3/assets/Segoe-Fluent-Icons.1e8b3a65.woff) format("woff");font-weight:400;font-style:normal}@media (max-width: 479.99999px){.ms-hiddenLgDown,.ms-hiddenMdDown,.ms-hiddenSm,.ms-hiddenXlDown,.ms-hiddenXxlDown{display:none!important}}@media (min-width: 480px) and (max-width: 639.99999px){.ms-hiddenLgDown,.ms-hiddenMd,.ms-hiddenMdDown,.ms-hiddenMdUp,.ms-hiddenXlDown,.ms-hiddenXxlDown{display:none!important}}@media (min-width: 640px) and (max-width: 1023.99999px){.ms-hiddenLg,.ms-hiddenLgDown,.ms-hiddenLgUp,.ms-hiddenMdUp,.ms-hiddenXlDown,.ms-hiddenXxlDown{display:none!important}}@media (min-width: 1024px) and (max-width: 1365.99999px){.ms-hiddenLgUp,.ms-hiddenMdUp,.ms-hiddenXl,.ms-hiddenXlDown,.ms-hiddenXlUp,.ms-hiddenXxlDown{display:none!important}}@media (min-width: 1366px) and (max-width: 1919.99999px){.ms-hiddenLgUp,.ms-hiddenMdUp,.ms-hiddenXlUp,.ms-hiddenXxl,.ms-hiddenXxlDown,.ms-hiddenXxlUp{display:none!important}}@media (min-width: 1920px){.ms-hiddenLgUp,.ms-hiddenMdUp,.ms-hiddenXlUp,.ms-hiddenXxlUp,.ms-hiddenXxxl{display:none!important}}.ms-sm12{width:100%}.ms-sm11{width:91.66666666666666%}.ms-sm10{width:83.33333333333334%}.ms-sm9{width:75%}.ms-sm8{width:66.66666666666666%}.ms-sm7{width:58.333333333333336%}.ms-sm6{width:50%}.ms-sm5{width:41.66666666666667%}.ms-sm4{width:33.33333333333333%}.ms-sm3{width:25%}.ms-sm2{width:16.666666666666664%}.ms-sm1{width:8.333333333333332%}[dir=ltr] .ms-smPull12{right:100%}[dir=rtl] .ms-smPull12{left:100%}[dir=ltr] .ms-smPull11{right:91.66667%}[dir=rtl] .ms-smPull11{left:91.66667%}[dir=ltr] .ms-smPull10{right:83.33333%}[dir=rtl] .ms-smPull10{left:83.33333%}[dir=ltr] .ms-smPull9{right:75%}[dir=rtl] .ms-smPull9{left:75%}[dir=ltr] .ms-smPull8{right:66.66667%}[dir=rtl] .ms-smPull8{left:66.66667%}[dir=ltr] .ms-smPull7{right:58.33333%}[dir=rtl] .ms-smPull7{left:58.33333%}[dir=ltr] .ms-smPull6{right:50%}[dir=rtl] .ms-smPull6{left:50%}[dir=ltr] .ms-smPull5{right:41.66667%}[dir=rtl] .ms-smPull5{left:41.66667%}[dir=ltr] .ms-smPull4{right:33.33333%}[dir=rtl] .ms-smPull4{left:33.33333%}[dir=ltr] .ms-smPull3{right:25%}[dir=rtl] .ms-smPull3{left:25%}[dir=ltr] .ms-smPull2{right:16.66667%}[dir=rtl] .ms-smPull2{left:16.66667%}[dir=ltr] .ms-smPull1{right:8.33333%}[dir=rtl] .ms-smPull1{left:8.33333%}[dir=ltr] .ms-smPull0{right:auto}[dir=rtl] .ms-smPull0{left:auto}[dir=ltr] .ms-smPush12{left:100%}[dir=rtl] .ms-smPush12{right:100%}[dir=ltr] .ms-smPush11{left:91.66667%}[dir=rtl] .ms-smPush11{right:91.66667%}[dir=ltr] .ms-smPush10{left:83.33333%}[dir=rtl] .ms-smPush10{right:83.33333%}[dir=ltr] .ms-smPush9{left:75%}[dir=rtl] .ms-smPush9{right:75%}[dir=ltr] .ms-smPush8{left:66.66667%}[dir=rtl] .ms-smPush8{right:66.66667%}[dir=ltr] .ms-smPush7{left:58.33333%}[dir=rtl] .ms-smPush7{right:58.33333%}[dir=ltr] .ms-smPush6{left:50%}[dir=rtl] .ms-smPush6{right:50%}[dir=ltr] .ms-smPush5{left:41.66667%}[dir=rtl] .ms-smPush5{right:41.66667%}[dir=ltr] .ms-smPush4{left:33.33333%}[dir=rtl] .ms-smPush4{right:33.33333%}[dir=ltr] .ms-smPush3{left:25%}[dir=rtl] .ms-smPush3{right:25%}[dir=ltr] .ms-smPush2{left:16.66667%}[dir=rtl] .ms-smPush2{right:16.66667%}[dir=ltr] .ms-smPush1{left:8.33333%}[dir=rtl] .ms-smPush1{right:8.33333%}[dir=ltr] .ms-smPush0{left:auto}[dir=rtl] .ms-smPush0{right:auto}[dir=ltr] .ms-smOffset11{margin-left:91.66667%}[dir=rtl] .ms-smOffset11{margin-right:91.66667%}[dir=ltr] .ms-smOffset10{margin-left:83.33333%}[dir=rtl] .ms-smOffset10{margin-right:83.33333%}[dir=ltr] .ms-smOffset9{margin-left:75%}[dir=rtl] .ms-smOffset9{margin-right:75%}[dir=ltr] .ms-smOffset8{margin-left:66.66667%}[dir=rtl] .ms-smOffset8{margin-right:66.66667%}[dir=ltr] .ms-smOffset7{margin-left:58.33333%}[dir=rtl] .ms-smOffset7{margin-right:58.33333%}[dir=ltr] .ms-smOffset6{margin-left:50%}[dir=rtl] .ms-smOffset6{margin-right:50%}[dir=ltr] .ms-smOffset5{margin-left:41.66667%}[dir=rtl] .ms-smOffset5{margin-right:41.66667%}[dir=ltr] .ms-smOffset4{margin-left:33.33333%}[dir=rtl] .ms-smOffset4{margin-right:33.33333%}[dir=ltr] .ms-smOffset3{margin-left:25%}[dir=rtl] .ms-smOffset3{margin-right:25%}[dir=ltr] .ms-smOffset2{margin-left:16.66667%}[dir=rtl] .ms-smOffset2{margin-right:16.66667%}[dir=ltr] .ms-smOffset1{margin-left:8.33333%}[dir=rtl] .ms-smOffset1{margin-right:8.33333%}[dir=ltr] .ms-smOffset0{margin-left:0}[dir=rtl] .ms-smOffset0{margin-right:0}@media (min-width: 480px){.ms-md12{width:100%}}@media (min-width: 480px){.ms-md11{width:91.66666666666666%}}@media (min-width: 480px){.ms-md10{width:83.33333333333334%}}@media (min-width: 480px){.ms-md9{width:75%}}@media (min-width: 480px){.ms-md8{width:66.66666666666666%}}@media (min-width: 480px){.ms-md7{width:58.333333333333336%}}@media (min-width: 480px){.ms-md6{width:50%}}@media (min-width: 480px){.ms-md5{width:41.66666666666667%}}@media (min-width: 480px){.ms-md4{width:33.33333333333333%}}@media (min-width: 480px){.ms-md3{width:25%}}@media (min-width: 480px){.ms-md2{width:16.666666666666664%}}@media (min-width: 480px){.ms-md1{width:8.333333333333332%}}@media (min-width: 480px){[dir=ltr] .ms-mdPull12{right:100%}[dir=rtl] .ms-mdPull12{left:100%}}@media (min-width: 480px){[dir=ltr] .ms-mdPull11{right:91.66667%}[dir=rtl] .ms-mdPull11{left:91.66667%}}@media (min-width: 480px){[dir=ltr] .ms-mdPull10{right:83.33333%}[dir=rtl] .ms-mdPull10{left:83.33333%}}@media (min-width: 480px){[dir=ltr] .ms-mdPull9{right:75%}[dir=rtl] .ms-mdPull9{left:75%}}@media (min-width: 480px){[dir=ltr] .ms-mdPull8{right:66.66667%}[dir=rtl] .ms-mdPull8{left:66.66667%}}@media (min-width: 480px){[dir=ltr] .ms-mdPull7{right:58.33333%}[dir=rtl] .ms-mdPull7{left:58.33333%}}@media (min-width: 480px){[dir=ltr] .ms-mdPull6{right:50%}[dir=rtl] .ms-mdPull6{left:50%}}@media (min-width: 480px){[dir=ltr] .ms-mdPull5{right:41.66667%}[dir=rtl] .ms-mdPull5{left:41.66667%}}@media (min-width: 480px){[dir=ltr] .ms-mdPull4{right:33.33333%}[dir=rtl] .ms-mdPull4{left:33.33333%}}@media (min-width: 480px){[dir=ltr] .ms-mdPull3{right:25%}[dir=rtl] .ms-mdPull3{left:25%}}@media (min-width: 480px){[dir=ltr] .ms-mdPull2{right:16.66667%}[dir=rtl] .ms-mdPull2{left:16.66667%}}@media (min-width: 480px){[dir=ltr] .ms-mdPull1{right:8.33333%}[dir=rtl] .ms-mdPull1{left:8.33333%}}@media (min-width: 480px){[dir=ltr] .ms-mdPull0{right:auto}[dir=rtl] .ms-mdPull0{left:auto}}@media (min-width: 480px){[dir=ltr] .ms-mdPush12{left:100%}[dir=rtl] .ms-mdPush12{right:100%}}@media (min-width: 480px){[dir=ltr] .ms-mdPush11{left:91.66667%}[dir=rtl] .ms-mdPush11{right:91.66667%}}@media (min-width: 480px){[dir=ltr] .ms-mdPush10{left:83.33333%}[dir=rtl] .ms-mdPush10{right:83.33333%}}@media (min-width: 480px){[dir=ltr] .ms-mdPush9{left:75%}[dir=rtl] .ms-mdPush9{right:75%}}@media (min-width: 480px){[dir=ltr] .ms-mdPush8{left:66.66667%}[dir=rtl] .ms-mdPush8{right:66.66667%}}@media (min-width: 480px){[dir=ltr] .ms-mdPush7{left:58.33333%}[dir=rtl] .ms-mdPush7{right:58.33333%}}@media (min-width: 480px){[dir=ltr] .ms-mdPush6{left:50%}[dir=rtl] .ms-mdPush6{right:50%}}@media (min-width: 480px){[dir=ltr] .ms-mdPush5{left:41.66667%}[dir=rtl] .ms-mdPush5{right:41.66667%}}@media (min-width: 480px){[dir=ltr] .ms-mdPush4{left:33.33333%}[dir=rtl] .ms-mdPush4{right:33.33333%}}@media (min-width: 480px){[dir=ltr] .ms-mdPush3{left:25%}[dir=rtl] .ms-mdPush3{right:25%}}@media (min-width: 480px){[dir=ltr] .ms-mdPush2{left:16.66667%}[dir=rtl] .ms-mdPush2{right:16.66667%}}@media (min-width: 480px){[dir=ltr] .ms-mdPush1{left:8.33333%}[dir=rtl] .ms-mdPush1{right:8.33333%}}@media (min-width: 480px){[dir=ltr] .ms-mdPush0{left:auto}[dir=rtl] .ms-mdPush0{right:auto}}@media (min-width: 480px){[dir=ltr] .ms-mdOffset11{margin-left:91.66667%}[dir=rtl] .ms-mdOffset11{margin-right:91.66667%}}@media (min-width: 480px){[dir=ltr] .ms-mdOffset10{margin-left:83.33333%}[dir=rtl] .ms-mdOffset10{margin-right:83.33333%}}@media (min-width: 480px){[dir=ltr] .ms-mdOffset9{margin-left:75%}[dir=rtl] .ms-mdOffset9{margin-right:75%}}@media (min-width: 480px){[dir=ltr] .ms-mdOffset8{margin-left:66.66667%}[dir=rtl] .ms-mdOffset8{margin-right:66.66667%}}@media (min-width: 480px){[dir=ltr] .ms-mdOffset7{margin-left:58.33333%}[dir=rtl] .ms-mdOffset7{margin-right:58.33333%}}@media (min-width: 480px){[dir=ltr] .ms-mdOffset6{margin-left:50%}[dir=rtl] .ms-mdOffset6{margin-right:50%}}@media (min-width: 480px){[dir=ltr] .ms-mdOffset5{margin-left:41.66667%}[dir=rtl] .ms-mdOffset5{margin-right:41.66667%}}@media (min-width: 480px){[dir=ltr] .ms-mdOffset4{margin-left:33.33333%}[dir=rtl] .ms-mdOffset4{margin-right:33.33333%}}@media (min-width: 480px){[dir=ltr] .ms-mdOffset3{margin-left:25%}[dir=rtl] .ms-mdOffset3{margin-right:25%}}@media (min-width: 480px){[dir=ltr] .ms-mdOffset2{margin-left:16.66667%}[dir=rtl] .ms-mdOffset2{margin-right:16.66667%}}@media (min-width: 480px){[dir=ltr] .ms-mdOffset1{margin-left:8.33333%}[dir=rtl] .ms-mdOffset1{margin-right:8.33333%}}@media (min-width: 480px){[dir=ltr] .ms-mdOffset0{margin-left:0}[dir=rtl] .ms-mdOffset0{margin-right:0}}@media (min-width: 640px){.ms-lg12{width:100%}}@media (min-width: 640px){.ms-lg11{width:91.66666666666666%}}@media (min-width: 640px){.ms-lg10{width:83.33333333333334%}}@media (min-width: 640px){.ms-lg9{width:75%}}@media (min-width: 640px){.ms-lg8{width:66.66666666666666%}}@media (min-width: 640px){.ms-lg7{width:58.333333333333336%}}@media (min-width: 640px){.ms-lg6{width:50%}}@media (min-width: 640px){.ms-lg5{width:41.66666666666667%}}@media (min-width: 640px){.ms-lg4{width:33.33333333333333%}}@media (min-width: 640px){.ms-lg3{width:25%}}@media (min-width: 640px){.ms-lg2{width:16.666666666666664%}}@media (min-width: 640px){.ms-lg1{width:8.333333333333332%}}@media (min-width: 640px){[dir=ltr] .ms-lgPull12{right:100%}[dir=rtl] .ms-lgPull12{left:100%}}@media (min-width: 640px){[dir=ltr] .ms-lgPull11{right:91.66667%}[dir=rtl] .ms-lgPull11{left:91.66667%}}@media (min-width: 640px){[dir=ltr] .ms-lgPull10{right:83.33333%}[dir=rtl] .ms-lgPull10{left:83.33333%}}@media (min-width: 640px){[dir=ltr] .ms-lgPull9{right:75%}[dir=rtl] .ms-lgPull9{left:75%}}@media (min-width: 640px){[dir=ltr] .ms-lgPull8{right:66.66667%}[dir=rtl] .ms-lgPull8{left:66.66667%}}@media (min-width: 640px){[dir=ltr] .ms-lgPull7{right:58.33333%}[dir=rtl] .ms-lgPull7{left:58.33333%}}@media (min-width: 640px){[dir=ltr] .ms-lgPull6{right:50%}[dir=rtl] .ms-lgPull6{left:50%}}@media (min-width: 640px){[dir=ltr] .ms-lgPull5{right:41.66667%}[dir=rtl] .ms-lgPull5{left:41.66667%}}@media (min-width: 640px){[dir=ltr] .ms-lgPull4{right:33.33333%}[dir=rtl] .ms-lgPull4{left:33.33333%}}@media (min-width: 640px){[dir=ltr] .ms-lgPull3{right:25%}[dir=rtl] .ms-lgPull3{left:25%}}@media (min-width: 640px){[dir=ltr] .ms-lgPull2{right:16.66667%}[dir=rtl] .ms-lgPull2{left:16.66667%}}@media (min-width: 640px){[dir=ltr] .ms-lgPull1{right:8.33333%}[dir=rtl] .ms-lgPull1{left:8.33333%}}@media (min-width: 640px){[dir=ltr] .ms-lgPull0{right:auto}[dir=rtl] .ms-lgPull0{left:auto}}@media (min-width: 640px){[dir=ltr] .ms-lgPush12{left:100%}[dir=rtl] .ms-lgPush12{right:100%}}@media (min-width: 640px){[dir=ltr] .ms-lgPush11{left:91.66667%}[dir=rtl] .ms-lgPush11{right:91.66667%}}@media (min-width: 640px){[dir=ltr] .ms-lgPush10{left:83.33333%}[dir=rtl] .ms-lgPush10{right:83.33333%}}@media (min-width: 640px){[dir=ltr] .ms-lgPush9{left:75%}[dir=rtl] .ms-lgPush9{right:75%}}@media (min-width: 640px){[dir=ltr] .ms-lgPush8{left:66.66667%}[dir=rtl] .ms-lgPush8{right:66.66667%}}@media (min-width: 640px){[dir=ltr] .ms-lgPush7{left:58.33333%}[dir=rtl] .ms-lgPush7{right:58.33333%}}@media (min-width: 640px){[dir=ltr] .ms-lgPush6{left:50%}[dir=rtl] .ms-lgPush6{right:50%}}@media (min-width: 640px){[dir=ltr] .ms-lgPush5{left:41.66667%}[dir=rtl] .ms-lgPush5{right:41.66667%}}@media (min-width: 640px){[dir=ltr] .ms-lgPush4{left:33.33333%}[dir=rtl] .ms-lgPush4{right:33.33333%}}@media (min-width: 640px){[dir=ltr] .ms-lgPush3{left:25%}[dir=rtl] .ms-lgPush3{right:25%}}@media (min-width: 640px){[dir=ltr] .ms-lgPush2{left:16.66667%}[dir=rtl] .ms-lgPush2{right:16.66667%}}@media (min-width: 640px){[dir=ltr] .ms-lgPush1{left:8.33333%}[dir=rtl] .ms-lgPush1{right:8.33333%}}@media (min-width: 640px){[dir=ltr] .ms-lgPush0{left:auto}[dir=rtl] .ms-lgPush0{right:auto}}@media (min-width: 640px){[dir=ltr] .ms-lgOffset11{margin-left:91.66667%}[dir=rtl] .ms-lgOffset11{margin-right:91.66667%}}@media (min-width: 640px){[dir=ltr] .ms-lgOffset10{margin-left:83.33333%}[dir=rtl] .ms-lgOffset10{margin-right:83.33333%}}@media (min-width: 640px){[dir=ltr] .ms-lgOffset9{margin-left:75%}[dir=rtl] .ms-lgOffset9{margin-right:75%}}@media (min-width: 640px){[dir=ltr] .ms-lgOffset8{margin-left:66.66667%}[dir=rtl] .ms-lgOffset8{margin-right:66.66667%}}@media (min-width: 640px){[dir=ltr] .ms-lgOffset7{margin-left:58.33333%}[dir=rtl] .ms-lgOffset7{margin-right:58.33333%}}@media (min-width: 640px){[dir=ltr] .ms-lgOffset6{margin-left:50%}[dir=rtl] .ms-lgOffset6{margin-right:50%}}@media (min-width: 640px){[dir=ltr] .ms-lgOffset5{margin-left:41.66667%}[dir=rtl] .ms-lgOffset5{margin-right:41.66667%}}@media (min-width: 640px){[dir=ltr] .ms-lgOffset4{margin-left:33.33333%}[dir=rtl] .ms-lgOffset4{margin-right:33.33333%}}@media (min-width: 640px){[dir=ltr] .ms-lgOffset3{margin-left:25%}[dir=rtl] .ms-lgOffset3{margin-right:25%}}@media (min-width: 640px){[dir=ltr] .ms-lgOffset2{margin-left:16.66667%}[dir=rtl] .ms-lgOffset2{margin-right:16.66667%}}@media (min-width: 640px){[dir=ltr] .ms-lgOffset1{margin-left:8.33333%}[dir=rtl] .ms-lgOffset1{margin-right:8.33333%}}@media (min-width: 640px){[dir=ltr] .ms-lgOffset0{margin-left:0}[dir=rtl] .ms-lgOffset0{margin-right:0}}@media (min-width: 1024px){.ms-xl12{width:100%}}@media (min-width: 1024px){.ms-xl11{width:91.66666666666666%}}@media (min-width: 1024px){.ms-xl10{width:83.33333333333334%}}@media (min-width: 1024px){.ms-xl9{width:75%}}@media (min-width: 1024px){.ms-xl8{width:66.66666666666666%}}@media (min-width: 1024px){.ms-xl7{width:58.333333333333336%}}@media (min-width: 1024px){.ms-xl6{width:50%}}@media (min-width: 1024px){.ms-xl5{width:41.66666666666667%}}@media (min-width: 1024px){.ms-xl4{width:33.33333333333333%}}@media (min-width: 1024px){.ms-xl3{width:25%}}@media (min-width: 1024px){.ms-xl2{width:16.666666666666664%}}@media (min-width: 1024px){.ms-xl1{width:8.333333333333332%}}@media (min-width: 1024px){[dir=ltr] .ms-xlPull12{right:100%}[dir=rtl] .ms-xlPull12{left:100%}}@media (min-width: 1024px){[dir=ltr] .ms-xlPull11{right:91.66667%}[dir=rtl] .ms-xlPull11{left:91.66667%}}@media (min-width: 1024px){[dir=ltr] .ms-xlPull10{right:83.33333%}[dir=rtl] .ms-xlPull10{left:83.33333%}}@media (min-width: 1024px){[dir=ltr] .ms-xlPull9{right:75%}[dir=rtl] .ms-xlPull9{left:75%}}@media (min-width: 1024px){[dir=ltr] .ms-xlPull8{right:66.66667%}[dir=rtl] .ms-xlPull8{left:66.66667%}}@media (min-width: 1024px){[dir=ltr] .ms-xlPull7{right:58.33333%}[dir=rtl] .ms-xlPull7{left:58.33333%}}@media (min-width: 1024px){[dir=ltr] .ms-xlPull6{right:50%}[dir=rtl] .ms-xlPull6{left:50%}}@media (min-width: 1024px){[dir=ltr] .ms-xlPull5{right:41.66667%}[dir=rtl] .ms-xlPull5{left:41.66667%}}@media (min-width: 1024px){[dir=ltr] .ms-xlPull4{right:33.33333%}[dir=rtl] .ms-xlPull4{left:33.33333%}}@media (min-width: 1024px){[dir=ltr] .ms-xlPull3{right:25%}[dir=rtl] .ms-xlPull3{left:25%}}@media (min-width: 1024px){[dir=ltr] .ms-xlPull2{right:16.66667%}[dir=rtl] .ms-xlPull2{left:16.66667%}}@media (min-width: 1024px){[dir=ltr] .ms-xlPull1{right:8.33333%}[dir=rtl] .ms-xlPull1{left:8.33333%}}@media (min-width: 1024px){[dir=ltr] .ms-xlPull0{right:auto}[dir=rtl] .ms-xlPull0{left:auto}}@media (min-width: 1024px){[dir=ltr] .ms-xlPush12{left:100%}[dir=rtl] .ms-xlPush12{right:100%}}@media (min-width: 1024px){[dir=ltr] .ms-xlPush11{left:91.66667%}[dir=rtl] .ms-xlPush11{right:91.66667%}}@media (min-width: 1024px){[dir=ltr] .ms-xlPush10{left:83.33333%}[dir=rtl] .ms-xlPush10{right:83.33333%}}@media (min-width: 1024px){[dir=ltr] .ms-xlPush9{left:75%}[dir=rtl] .ms-xlPush9{right:75%}}@media (min-width: 1024px){[dir=ltr] .ms-xlPush8{left:66.66667%}[dir=rtl] .ms-xlPush8{right:66.66667%}}@media (min-width: 1024px){[dir=ltr] .ms-xlPush7{left:58.33333%}[dir=rtl] .ms-xlPush7{right:58.33333%}}@media (min-width: 1024px){[dir=ltr] .ms-xlPush6{left:50%}[dir=rtl] .ms-xlPush6{right:50%}}@media (min-width: 1024px){[dir=ltr] .ms-xlPush5{left:41.66667%}[dir=rtl] .ms-xlPush5{right:41.66667%}}@media (min-width: 1024px){[dir=ltr] .ms-xlPush4{left:33.33333%}[dir=rtl] .ms-xlPush4{right:33.33333%}}@media (min-width: 1024px){[dir=ltr] .ms-xlPush3{left:25%}[dir=rtl] .ms-xlPush3{right:25%}}@media (min-width: 1024px){[dir=ltr] .ms-xlPush2{left:16.66667%}[dir=rtl] .ms-xlPush2{right:16.66667%}}@media (min-width: 1024px){[dir=ltr] .ms-xlPush1{left:8.33333%}[dir=rtl] .ms-xlPush1{right:8.33333%}}@media (min-width: 1024px){[dir=ltr] .ms-xlPush0{left:auto}[dir=rtl] .ms-xlPush0{right:auto}}@media (min-width: 1024px){[dir=ltr] .ms-xlOffset11{margin-left:91.66667%}[dir=rtl] .ms-xlOffset11{margin-right:91.66667%}}@media (min-width: 1024px){[dir=ltr] .ms-xlOffset10{margin-left:83.33333%}[dir=rtl] .ms-xlOffset10{margin-right:83.33333%}}@media (min-width: 1024px){[dir=ltr] .ms-xlOffset9{margin-left:75%}[dir=rtl] .ms-xlOffset9{margin-right:75%}}@media (min-width: 1024px){[dir=ltr] .ms-xlOffset8{margin-left:66.66667%}[dir=rtl] .ms-xlOffset8{margin-right:66.66667%}}@media (min-width: 1024px){[dir=ltr] .ms-xlOffset7{margin-left:58.33333%}[dir=rtl] .ms-xlOffset7{margin-right:58.33333%}}@media (min-width: 1024px){[dir=ltr] .ms-xlOffset6{margin-left:50%}[dir=rtl] .ms-xlOffset6{margin-right:50%}}@media (min-width: 1024px){[dir=ltr] .ms-xlOffset5{margin-left:41.66667%}[dir=rtl] .ms-xlOffset5{margin-right:41.66667%}}@media (min-width: 1024px){[dir=ltr] .ms-xlOffset4{margin-left:33.33333%}[dir=rtl] .ms-xlOffset4{margin-right:33.33333%}}@media (min-width: 1024px){[dir=ltr] .ms-xlOffset3{margin-left:25%}[dir=rtl] .ms-xlOffset3{margin-right:25%}}@media (min-width: 1024px){[dir=ltr] .ms-xlOffset2{margin-left:16.66667%}[dir=rtl] .ms-xlOffset2{margin-right:16.66667%}}@media (min-width: 1024px){[dir=ltr] .ms-xlOffset1{margin-left:8.33333%}[dir=rtl] .ms-xlOffset1{margin-right:8.33333%}}@media (min-width: 1024px){[dir=ltr] .ms-xlOffset0{margin-left:0}[dir=rtl] .ms-xlOffset0{margin-right:0}}@media (min-width: 1366px){.ms-xxl12{width:100%}}@media (min-width: 1366px){.ms-xxl11{width:91.66666666666666%}}@media (min-width: 1366px){.ms-xxl10{width:83.33333333333334%}}@media (min-width: 1366px){.ms-xxl9{width:75%}}@media (min-width: 1366px){.ms-xxl8{width:66.66666666666666%}}@media (min-width: 1366px){.ms-xxl7{width:58.333333333333336%}}@media (min-width: 1366px){.ms-xxl6{width:50%}}@media (min-width: 1366px){.ms-xxl5{width:41.66666666666667%}}@media (min-width: 1366px){.ms-xxl4{width:33.33333333333333%}}@media (min-width: 1366px){.ms-xxl3{width:25%}}@media (min-width: 1366px){.ms-xxl2{width:16.666666666666664%}}@media (min-width: 1366px){.ms-xxl1{width:8.333333333333332%}}@media (min-width: 1366px){[dir=ltr] .ms-xxlPull12{right:100%}[dir=rtl] .ms-xxlPull12{left:100%}}@media (min-width: 1366px){[dir=ltr] .ms-xxlPull11{right:91.66667%}[dir=rtl] .ms-xxlPull11{left:91.66667%}}@media (min-width: 1366px){[dir=ltr] .ms-xxlPull10{right:83.33333%}[dir=rtl] .ms-xxlPull10{left:83.33333%}}@media (min-width: 1366px){[dir=ltr] .ms-xxlPull9{right:75%}[dir=rtl] .ms-xxlPull9{left:75%}}@media (min-width: 1366px){[dir=ltr] .ms-xxlPull8{right:66.66667%}[dir=rtl] .ms-xxlPull8{left:66.66667%}}@media (min-width: 1366px){[dir=ltr] .ms-xxlPull7{right:58.33333%}[dir=rtl] .ms-xxlPull7{left:58.33333%}}@media (min-width: 1366px){[dir=ltr] .ms-xxlPull6{right:50%}[dir=rtl] .ms-xxlPull6{left:50%}}@media (min-width: 1366px){[dir=ltr] .ms-xxlPull5{right:41.66667%}[dir=rtl] .ms-xxlPull5{left:41.66667%}}@media (min-width: 1366px){[dir=ltr] .ms-xxlPull4{right:33.33333%}[dir=rtl] .ms-xxlPull4{left:33.33333%}}@media (min-width: 1366px){[dir=ltr] .ms-xxlPull3{right:25%}[dir=rtl] .ms-xxlPull3{left:25%}}@media (min-width: 1366px){[dir=ltr] .ms-xxlPull2{right:16.66667%}[dir=rtl] .ms-xxlPull2{left:16.66667%}}@media (min-width: 1366px){[dir=ltr] .ms-xxlPull1{right:8.33333%}[dir=rtl] .ms-xxlPull1{left:8.33333%}}@media (min-width: 1366px){[dir=ltr] .ms-xxlPull0{right:auto}[dir=rtl] .ms-xxlPull0{left:auto}}@media (min-width: 1366px){[dir=ltr] .ms-xxlPush12{left:100%}[dir=rtl] .ms-xxlPush12{right:100%}}@media (min-width: 1366px){[dir=ltr] .ms-xxlPush11{left:91.66667%}[dir=rtl] .ms-xxlPush11{right:91.66667%}}@media (min-width: 1366px){[dir=ltr] .ms-xxlPush10{left:83.33333%}[dir=rtl] .ms-xxlPush10{right:83.33333%}}@media (min-width: 1366px){[dir=ltr] .ms-xxlPush9{left:75%}[dir=rtl] .ms-xxlPush9{right:75%}}@media (min-width: 1366px){[dir=ltr] .ms-xxlPush8{left:66.66667%}[dir=rtl] .ms-xxlPush8{right:66.66667%}}@media (min-width: 1366px){[dir=ltr] .ms-xxlPush7{left:58.33333%}[dir=rtl] .ms-xxlPush7{right:58.33333%}}@media (min-width: 1366px){[dir=ltr] .ms-xxlPush6{left:50%}[dir=rtl] .ms-xxlPush6{right:50%}}@media (min-width: 1366px){[dir=ltr] .ms-xxlPush5{left:41.66667%}[dir=rtl] .ms-xxlPush5{right:41.66667%}}@media (min-width: 1366px){[dir=ltr] .ms-xxlPush4{left:33.33333%}[dir=rtl] .ms-xxlPush4{right:33.33333%}}@media (min-width: 1366px){[dir=ltr] .ms-xxlPush3{left:25%}[dir=rtl] .ms-xxlPush3{right:25%}}@media (min-width: 1366px){[dir=ltr] .ms-xxlPush2{left:16.66667%}[dir=rtl] .ms-xxlPush2{right:16.66667%}}@media (min-width: 1366px){[dir=ltr] .ms-xxlPush1{left:8.33333%}[dir=rtl] .ms-xxlPush1{right:8.33333%}}@media (min-width: 1366px){[dir=ltr] .ms-xxlPush0{left:auto}[dir=rtl] .ms-xxlPush0{right:auto}}@media (min-width: 1366px){[dir=ltr] .ms-xxlOffset11{margin-left:91.66667%}[dir=rtl] .ms-xxlOffset11{margin-right:91.66667%}}@media (min-width: 1366px){[dir=ltr] .ms-xxlOffset10{margin-left:83.33333%}[dir=rtl] .ms-xxlOffset10{margin-right:83.33333%}}@media (min-width: 1366px){[dir=ltr] .ms-xxlOffset9{margin-left:75%}[dir=rtl] .ms-xxlOffset9{margin-right:75%}}@media (min-width: 1366px){[dir=ltr] .ms-xxlOffset8{margin-left:66.66667%}[dir=rtl] .ms-xxlOffset8{margin-right:66.66667%}}@media (min-width: 1366px){[dir=ltr] .ms-xxlOffset7{margin-left:58.33333%}[dir=rtl] .ms-xxlOffset7{margin-right:58.33333%}}@media (min-width: 1366px){[dir=ltr] .ms-xxlOffset6{margin-left:50%}[dir=rtl] .ms-xxlOffset6{margin-right:50%}}@media (min-width: 1366px){[dir=ltr] .ms-xxlOffset5{margin-left:41.66667%}[dir=rtl] .ms-xxlOffset5{margin-right:41.66667%}}@media (min-width: 1366px){[dir=ltr] .ms-xxlOffset4{margin-left:33.33333%}[dir=rtl] .ms-xxlOffset4{margin-right:33.33333%}}@media (min-width: 1366px){[dir=ltr] .ms-xxlOffset3{margin-left:25%}[dir=rtl] .ms-xxlOffset3{margin-right:25%}}@media (min-width: 1366px){[dir=ltr] .ms-xxlOffset2{margin-left:16.66667%}[dir=rtl] .ms-xxlOffset2{margin-right:16.66667%}}@media (min-width: 1366px){[dir=ltr] .ms-xxlOffset1{margin-left:8.33333%}[dir=rtl] .ms-xxlOffset1{margin-right:8.33333%}}@media (min-width: 1366px){[dir=ltr] .ms-xxlOffset0{margin-left:0}[dir=rtl] .ms-xxlOffset0{margin-right:0}}@media (min-width: 1920px){.ms-xxxl12{width:100%}}@media (min-width: 1920px){.ms-xxxl11{width:91.66666666666666%}}@media (min-width: 1920px){.ms-xxxl10{width:83.33333333333334%}}@media (min-width: 1920px){.ms-xxxl9{width:75%}}@media (min-width: 1920px){.ms-xxxl8{width:66.66666666666666%}}@media (min-width: 1920px){.ms-xxxl7{width:58.333333333333336%}}@media (min-width: 1920px){.ms-xxxl6{width:50%}}@media (min-width: 1920px){.ms-xxxl5{width:41.66666666666667%}}@media (min-width: 1920px){.ms-xxxl4{width:33.33333333333333%}}@media (min-width: 1920px){.ms-xxxl3{width:25%}}@media (min-width: 1920px){.ms-xxxl2{width:16.666666666666664%}}@media (min-width: 1920px){.ms-xxxl1{width:8.333333333333332%}}@media (min-width: 1920px){[dir=ltr] .ms-xxxlPull12{right:100%}[dir=rtl] .ms-xxxlPull12{left:100%}}@media (min-width: 1920px){[dir=ltr] .ms-xxxlPull11{right:91.66667%}[dir=rtl] .ms-xxxlPull11{left:91.66667%}}@media (min-width: 1920px){[dir=ltr] .ms-xxxlPull10{right:83.33333%}[dir=rtl] .ms-xxxlPull10{left:83.33333%}}@media (min-width: 1920px){[dir=ltr] .ms-xxxlPull9{right:75%}[dir=rtl] .ms-xxxlPull9{left:75%}}@media (min-width: 1920px){[dir=ltr] .ms-xxxlPull8{right:66.66667%}[dir=rtl] .ms-xxxlPull8{left:66.66667%}}@media (min-width: 1920px){[dir=ltr] .ms-xxxlPull7{right:58.33333%}[dir=rtl] .ms-xxxlPull7{left:58.33333%}}@media (min-width: 1920px){[dir=ltr] .ms-xxxlPull6{right:50%}[dir=rtl] .ms-xxxlPull6{left:50%}}@media (min-width: 1920px){[dir=ltr] .ms-xxxlPull5{right:41.66667%}[dir=rtl] .ms-xxxlPull5{left:41.66667%}}@media (min-width: 1920px){[dir=ltr] .ms-xxxlPull4{right:33.33333%}[dir=rtl] .ms-xxxlPull4{left:33.33333%}}@media (min-width: 1920px){[dir=ltr] .ms-xxxlPull3{right:25%}[dir=rtl] .ms-xxxlPull3{left:25%}}@media (min-width: 1920px){[dir=ltr] .ms-xxxlPull2{right:16.66667%}[dir=rtl] .ms-xxxlPull2{left:16.66667%}}@media (min-width: 1920px){[dir=ltr] .ms-xxxlPull1{right:8.33333%}[dir=rtl] .ms-xxxlPull1{left:8.33333%}}@media (min-width: 1920px){[dir=ltr] .ms-xxxlPull0{right:auto}[dir=rtl] .ms-xxxlPull0{left:auto}}@media (min-width: 1920px){[dir=ltr] .ms-xxxlPush12{left:100%}[dir=rtl] .ms-xxxlPush12{right:100%}}@media (min-width: 1920px){[dir=ltr] .ms-xxxlPush11{left:91.66667%}[dir=rtl] .ms-xxxlPush11{right:91.66667%}}@media (min-width: 1920px){[dir=ltr] .ms-xxxlPush10{left:83.33333%}[dir=rtl] .ms-xxxlPush10{right:83.33333%}}@media (min-width: 1920px){[dir=ltr] .ms-xxxlPush9{left:75%}[dir=rtl] .ms-xxxlPush9{right:75%}}@media (min-width: 1920px){[dir=ltr] .ms-xxxlPush8{left:66.66667%}[dir=rtl] .ms-xxxlPush8{right:66.66667%}}@media (min-width: 1920px){[dir=ltr] .ms-xxxlPush7{left:58.33333%}[dir=rtl] .ms-xxxlPush7{right:58.33333%}}@media (min-width: 1920px){[dir=ltr] .ms-xxxlPush6{left:50%}[dir=rtl] .ms-xxxlPush6{right:50%}}@media (min-width: 1920px){[dir=ltr] .ms-xxxlPush5{left:41.66667%}[dir=rtl] .ms-xxxlPush5{right:41.66667%}}@media (min-width: 1920px){[dir=ltr] .ms-xxxlPush4{left:33.33333%}[dir=rtl] .ms-xxxlPush4{right:33.33333%}}@media (min-width: 1920px){[dir=ltr] .ms-xxxlPush3{left:25%}[dir=rtl] .ms-xxxlPush3{right:25%}}@media (min-width: 1920px){[dir=ltr] .ms-xxxlPush2{left:16.66667%}[dir=rtl] .ms-xxxlPush2{right:16.66667%}}@media (min-width: 1920px){[dir=ltr] .ms-xxxlPush1{left:8.33333%}[dir=rtl] .ms-xxxlPush1{right:8.33333%}}@media (min-width: 1920px){[dir=ltr] .ms-xxxlPush0{left:auto}[dir=rtl] .ms-xxxlPush0{right:auto}}@media (min-width: 1920px){[dir=ltr] .ms-xxxlOffset11{margin-left:91.66667%}[dir=rtl] .ms-xxxlOffset11{margin-right:91.66667%}}@media (min-width: 1920px){[dir=ltr] .ms-xxxlOffset10{margin-left:83.33333%}[dir=rtl] .ms-xxxlOffset10{margin-right:83.33333%}}@media (min-width: 1920px){[dir=ltr] .ms-xxxlOffset9{margin-left:75%}[dir=rtl] .ms-xxxlOffset9{margin-right:75%}}@media (min-width: 1920px){[dir=ltr] .ms-xxxlOffset8{margin-left:66.66667%}[dir=rtl] .ms-xxxlOffset8{margin-right:66.66667%}}@media (min-width: 1920px){[dir=ltr] .ms-xxxlOffset7{margin-left:58.33333%}[dir=rtl] .ms-xxxlOffset7{margin-right:58.33333%}}@media (min-width: 1920px){[dir=ltr] .ms-xxxlOffset6{margin-left:50%}[dir=rtl] .ms-xxxlOffset6{margin-right:50%}}@media (min-width: 1920px){[dir=ltr] .ms-xxxlOffset5{margin-left:41.66667%}[dir=rtl] .ms-xxxlOffset5{margin-right:41.66667%}}@media (min-width: 1920px){[dir=ltr] .ms-xxxlOffset4{margin-left:33.33333%}[dir=rtl] .ms-xxxlOffset4{margin-right:33.33333%}}@media (min-width: 1920px){[dir=ltr] .ms-xxxlOffset3{margin-left:25%}[dir=rtl] .ms-xxxlOffset3{margin-right:25%}}@media (min-width: 1920px){[dir=ltr] .ms-xxxlOffset2{margin-left:16.66667%}[dir=rtl] .ms-xxxlOffset2{margin-right:16.66667%}}@media (min-width: 1920px){[dir=ltr] .ms-xxxlOffset1{margin-left:8.33333%}[dir=rtl] .ms-xxxlOffset1{margin-right:8.33333%}}@media (min-width: 1920px){[dir=ltr] .ms-xxxlOffset0{margin-left:0}[dir=rtl] .ms-xxxlOffset0{margin-right:0}}.ms-borderBox,.ms-borderBox:after,.ms-borderBox:before{box-sizing:border-box}.ms-borderBase{border:1px solid}.ms-clearfix{zoom:1}.ms-clearfix:after,.ms-clearfix:before{display:table;content:"";line-height:0}.ms-clearfix:after{clear:both}.ms-normalize{box-sizing:border-box;box-shadow:none;margin:0;padding:0}[dir=ltr] .ms-textAlignLeft{text-align:left}[dir=rtl] .ms-textAlignLeft,[dir=ltr] .ms-textAlignRight{text-align:right}[dir=rtl] .ms-textAlignRight{text-align:left}.ms-textAlignCenter{text-align:center}.ms-screenReaderOnly{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.ms-textTruncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal}.ms-noWrap{white-space:nowrap}.ms-Fabric{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;color:#323130;font-family:"Segoe UI Web (West European)",Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;font-size:14px}.ms-Fabric button,.ms-Fabric input,.ms-Fabric textarea{font-family:inherit}.ms-Fabric [lang^=ar],.ms-Fabric[lang^=ar],[lang^=ar] .ms-Fabric{font-family:"Segoe UI Web (Arabic)",Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}.ms-Fabric [lang^=bg],.ms-Fabric[lang^=bg],[lang^=bg] .ms-Fabric{font-family:"Segoe UI Web (Cyrillic)",Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}.ms-Fabric [lang^=cs],.ms-Fabric[lang^=cs],[lang^=cs] .ms-Fabric{font-family:"Segoe UI Web (East European)",Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}.ms-Fabric [lang^=el],.ms-Fabric[lang^=el],[lang^=el] .ms-Fabric{font-family:"Segoe UI Web (Greek)",Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}.ms-Fabric [lang^=et],.ms-Fabric[lang^=et],[lang^=et] .ms-Fabric{font-family:"Segoe UI Web (East European)",Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}.ms-Fabric [lang^=he],.ms-Fabric[lang^=he],[lang^=he] .ms-Fabric{font-family:"Segoe UI Web (Hebrew)",Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}.ms-Fabric [lang^=hi],.ms-Fabric[lang^=hi],[lang^=hi] .ms-Fabric{font-family:Nirmala UI,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}.ms-Fabric [lang^=hr],.ms-Fabric[lang^=hr],[lang^=hr] .ms-Fabric,.ms-Fabric [lang^=hu],.ms-Fabric[lang^=hu],[lang^=hu] .ms-Fabric{font-family:"Segoe UI Web (East European)",Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}.ms-Fabric [lang^=ja],.ms-Fabric[lang^=ja],[lang^=ja] .ms-Fabric{font-family:Yu Gothic UI,Meiryo UI,Meiryo,MS Pgothic,Osaka,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}.ms-Fabric [lang^=kk],.ms-Fabric[lang^=kk],[lang^=kk] .ms-Fabric{font-family:"Segoe UI Web (East European)",Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}.ms-Fabric [lang^=ko],.ms-Fabric[lang^=ko],[lang^=ko] .ms-Fabric{font-family:Malgun Gothic,Gulim,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}.ms-Fabric [lang^=lo],.ms-Fabric[lang^=lo],[lang^=lo] .ms-Fabric{font-family:Leelawadee UI Web,Lao UI,DokChampa,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}.ms-Fabric [lang^=lt],.ms-Fabric[lang^=lt],[lang^=lt] .ms-Fabric,.ms-Fabric [lang^=lv],.ms-Fabric[lang^=lv],[lang^=lv] .ms-Fabric,.ms-Fabric [lang^=pl],.ms-Fabric[lang^=pl],[lang^=pl] .ms-Fabric{font-family:"Segoe UI Web (East European)",Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}.ms-Fabric [lang^=ru],.ms-Fabric[lang^=ru],[lang^=ru] .ms-Fabric{font-family:"Segoe UI Web (Cyrillic)",Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}.ms-Fabric [lang^=sk],.ms-Fabric[lang^=sk],[lang^=sk] .ms-Fabric,.ms-Fabric [lang^=sr-latn],.ms-Fabric[lang^=sr-latn],[lang^=sr-latn] .ms-Fabric{font-family:"Segoe UI Web (East European)",Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}.ms-Fabric [lang^=th],.ms-Fabric[lang^=th],[lang^=th] .ms-Fabric{font-family:Leelawadee UI Web,Kmer UI,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}.ms-Fabric [lang^=tr],.ms-Fabric[lang^=tr],[lang^=tr] .ms-Fabric{font-family:"Segoe UI Web (East European)",Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}.ms-Fabric [lang^=uk],.ms-Fabric[lang^=uk],[lang^=uk] .ms-Fabric{font-family:"Segoe UI Web (Cyrillic)",Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}.ms-Fabric [lang^=vi],.ms-Fabric[lang^=vi],[lang^=vi] .ms-Fabric{font-family:"Segoe UI Web (Vietnamese)",Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}.ms-Fabric [lang^=zh-hans],.ms-Fabric[lang^=zh-hans],[lang^=zh-hans] .ms-Fabric{font-family:Microsoft Yahei UI,Verdana,Simsun,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}.ms-Fabric [lang^=zh-hant],.ms-Fabric[lang^=zh-hant],[lang^=zh-hant] .ms-Fabric{font-family:Microsoft Jhenghei UI,Pmingliu,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}.ms-Fabric--selawik{font-family:Selawik Web,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}.fv-button{position:relative;min-width:80px;height:28px;box-sizing:border-box;display:inline-flex;-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:pointer}.fv-button button.button-container{width:100%;height:100%;border:none;outline:none;box-sizing:border-box;transition:all .3s}.fv-button button.button-container.disabled{cursor:default}.fv-button button.button-container span.content-block{width:100%;height:100%;display:flex;justify-content:center;align-items:center}.fv-button button.button-container span.content-block i.ms-Icon{margin-right:5px}.fv-button.disabled{pointer-events:none}.fv-button.light .button-container{background:var(--fv-light-bgcolor);color:var(--fv-light-color)}.fv-button.light .button-container:hover{background:var(--fv-light-hover-bgcolor);opacity:.9}.fv-button.light .button-container.shadow{box-shadow:#41171722 0 3.2px 7.2px,#0000001c 0 .6px 1.8px}.fv-button.light .button-container.disabled{filter:grayscale(1)}.fv-button.light .button-container.disabled{background:var(--fv-light-disabled-bgcolor);color:var(--fv-light-disabled-color)}.fv-button.light .button-container.disabled:hover{background:var(--fv-light-disabled-bgcolor);opacity:1}.fv-button.dark .button-container{background:var(--fv-dark-bgcolor);color:var(--fv-dark-color)}.fv-button.dark .button-container:hover{background:var(--fv-dark-hover-bgcolor);opacity:.9}.fv-button.dark .button-container.shadow{box-shadow:#41171722 0 3.2px 7.2px,#0000001c 0 .6px 1.8px}.fv-button.dark .button-container.disabled{background:var(--fv-dark-disabled-bgcolor);color:var(--fv-dark-disabled-color)}.fv-button.dark .button-container.disabled:hover{background:var(--fv-dark-disabled-bgcolor);opacity:1}.fv-checkbox .label{position:relative;cursor:pointer;vertical-align:middle;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;user-select:none;display:inline-flex;align-items:center}.fv-checkbox .label .checkbox{top:0;left:0;position:absolute!important;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.fv-checkbox .label .icon{overflow:hidden;position:relative;width:20px;height:20px;padding:0;margin:0 5px;border-radius:3px;border-width:1px;border-style:solid;display:inline-flex;justify-content:center;align-items:center}.fv-checkbox .label .icon .icon-box{position:absolute;background-color:inherit;height:100%;width:100%;transform:translate(100%)}.fv-checkbox .label .icon .font-clip-in-enter-active{transition:transform .3s linear}.fv-checkbox .label .icon .font-clip-in-enter-from{transform:translate(0)}.fv-checkbox .label .icon .ms-Icon{height:18px;width:18px;display:flex;align-items:center;justify-content:center;margin:0;line-height:13px;font-weight:700;font-size:13px}.fv-checkbox.disabled{pointer-events:none}.fv-checkbox.light .label .icon{--fv-checkbox-bgcolor: initial;border-color:var(--fv-light-border-color);color:var(--fv-dark-color)}.fv-checkbox.light .label .icon:hover{background-color:var(--fv-checkbox-bgcolor, var(--fv-light-bgcolor))}.fv-checkbox.light.active .label .icon{border-color:rgb(var(--fv-primary-bgcolor));background-color:rgb(var(--fv-primary-bgcolor));color:var(--fv-dark-color)}.fv-checkbox.light.disabled .label{cursor:default}.fv-checkbox.light.disabled .label .icon{background-color:var(--fv-light-bgcolor);border-color:var(--fv-light-bgcolor)}.fv-checkbox.dark .label .icon{--fv-checkbox-bgcolor: initial;border-color:var(--fv-dark-border-color);color:var(--fv-light-color)}.fv-checkbox.dark .label .icon:hover{background-color:var(--fv-checkbox-bgcolor, var(--fv-dark-bgcolor))}.fv-checkbox.dark.active .label .icon{border-color:rgb(var(--fv-primary-bgcolor));background-color:rgb(var(--fv-primary-bgcolor));color:var(--fv-light-color)}.fv-checkbox.dark.disabled .label{cursor:default}.fv-checkbox.dark.disabled .label .icon{background-color:var(--fv-dark-bgcolor);border-color:var(--fv-dark-bgcolor)}.fv-color-picker{width:312px;--fv-color-picker--color-value-empty: rgb(255,255,255);--fv-color-picker--color-list: red, rgb(255, 153, 0), rgb(205, 255, 0), rgb(53, 255, 0), rgb(0, 255, 102), rgb(0, 255, 253), rgb(0, 102, 255), rgb(50, 0, 255), rgb(205, 0, 255), rgb(255, 0, 153), red;--fv-color-picker--color: initial;--fv-color-picker--color-alpha: initial;--fv-color-picker--color-value: initial;--fv-color-picker--pointer-top: 0px;--fv-color-picker--pointer-left: 0px;--fv-color-picker--color-value-left: 0px;--fv-color-picker--color-alpha-left: 0px}.fv-color-picker .color-picker{display:flex}.fv-color-picker .color-picker .color-area{cursor:pointer;position:relative;min-width:256px;max-width:256px;height:256px;width:256px;margin-right:15px;border-radius:4px}.fv-color-picker .color-picker .color-area .bg{height:100%;width:100%;top:0;left:0;position:absolute}.fv-color-picker .color-picker .color-area.ring{border-radius:50%}.fv-color-picker .color-picker .color-area.ring .bg{border-radius:50%;transform:rotate(90deg);background:conic-gradient(var(--fv-color-picker--color-list))}.fv-color-picker .color-picker .color-area.ring .white-mask{position:absolute;height:100%;width:100%;border-radius:50%;background:radial-gradient(var(--fv-color-picker--color-value-empty),transparent)}.fv-color-picker .color-picker .color-area.box .bg{border-radius:inherit;background:linear-gradient(to right,var(--fv-color-picker--color-list))}.fv-color-picker .color-picker .color-area.box .white-mask{top:0;left:0;position:absolute;height:100%;width:100%;border-radius:inherit;background:linear-gradient(transparent,var(--fv-color-picker--color-value-empty))}.fv-color-picker .color-picker .color-area .pointer{left:-8px;top:-8px;border-radius:50%;position:absolute;height:16px;width:16px;border-style:solid;border-width:2px;border-color:#000;pointer-events:none;transform:translate(var(--fv-color-picker--pointer-left),var(--fv-color-picker--pointer-top));transform-origin:0px 0px}.fv-color-picker .color-picker .color{position:relative;width:42px;height:256px;border-radius:4px;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAJUlEQVQYV2N89erVfwY0ICYmxoguxjgUFKI7GsTH5m4M3w1ChQC1/Ca8i2n1WgAAAABJRU5ErkJggg==)}.fv-color-picker .color-picker .color .color-bg{position:absolute;height:100%;width:100%;top:0;left:0;border-radius:4px;background:var(--fv-color-picker--color)}.fv-color-picker .control.vertical{margin-top:20px}.fv-color-picker .control.vertical .color-value{cursor:pointer;position:relative;border-radius:6px;margin:30px 0 20px;height:12px;width:100%}.fv-color-picker .control.vertical .color-value .color-value-mask{border-radius:inherit;position:absolute;top:0;left:0;height:100%;width:100%;background:linear-gradient(to right,#000,transparent)}.fv-color-picker .control.vertical .color-value .color-value-bg{border-radius:inherit;position:absolute;top:0;left:0;height:100%;width:100%;background-color:var(--fv-color-picker--color-value)}.fv-color-picker .control.vertical .color-value .color-value-btn{position:absolute;top:-2px;left:-8px;height:16px;width:16px;border-radius:50%;border-style:solid;border-width:3px;border-color:#fff;background:rgb(0,0,0);box-shadow:#000 0 0 2px;transform-origin:0px 0px;transform:translate(var(--fv-color-picker--color-value-left))}.fv-color-picker .control.vertical .color-alpha{cursor:pointer;position:relative;border-radius:6px;margin:25px 0 30px;height:12px;width:100%}.fv-color-picker .control.vertical .color-alpha .color-alpha-mask{border-radius:inherit;position:absolute;top:0;left:0;height:100%;width:100%;background:linear-gradient(to left,var(--fv-color-picker--color-alpha),transparent)}.fv-color-picker .control.vertical .color-alpha .color-alpha-bg{border-radius:inherit;position:absolute;top:0;left:0;height:100%;width:100%;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAJUlEQVQYV2N89erVfwY0ICYmxoguxjgUFKI7GsTH5m4M3w1ChQC1/Ca8i2n1WgAAAABJRU5ErkJggg==)}.fv-color-picker .control.vertical .color-alpha .color-alpha-btn{position:absolute;top:-2px;left:-8px;height:16px;width:16px;border-radius:50%;border-style:solid;border-width:3px;border-color:#fff;background:rgb(0,0,0);box-shadow:#000 0 0 2px;transform-origin:0px 0px;transform:translate(var(--fv-color-picker--color-alpha-left))}.fv-color-picker .control.vertical .fields{margin-top:10px}.fv-color-picker .control.vertical .fields .row{display:flex;margin:10px 0}.fv-color-picker .control.vertical .fields .row .cell{min-width:180px}.fv-color-picker .control.vertical .fields .row .cell .text{padding:0 10px}.fv-combo-box{--fv-combo-box-height: initial;--fv-combo-box-top: initial;--fv-combo-box-bottom: initial;--fv-combo-box-effect-position: center;position:relative;width:200px}.fv-combo-box .fv-combo-box--select-input{width:inherit}.fv-combo-box .fv-combo-box--options{position:absolute;display:flex;align-items:var(--fv-combo-box-effect-position);width:100%;top:var(--fv-combo-box-top);bottom:var(--fv-combo-box-bottom);left:0;z-index:1000;box-sizing:border-box}.fv-combo-box .fv-combo-box--options .fv-combo-box--bg{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-sizing:border-box;overflow:hidden;border-width:1px;border-style:solid;width:100%;border-radius:6px;display:flex;align-items:var(--fv-combo-box-effect-position)}.fv-combo-box .fv-combo-box--options .fv-combo-box--bg.fv-combo-box--bg-down{border-top-left-radius:0;border-top-right-radius:0}.fv-combo-box .fv-combo-box--options .fv-combo-box--bg.fv-combo-box--bg-up{border-bottom-left-radius:0;border-bottom-right-radius:0}.fv-combo-box .fv-combo-box--options .fv-combo-box--options-wrapper{padding:5px 0;width:100%}.fv-combo-box .fv-combo-box--options.fv-combo-box--fade-in-leave-to{height:var(--fv-combo-box-height)}.fv-combo-box .fv-combo-box--options.fv-combo-box--fade-in-leave-to .fv-combo-box--bg{border:none;opacity:.8}.fv-combo-box .fv-combo-box--options.fv-combo-box--fade-in-leave-to .fv-combo-box--bg.fv-combo-box--bg-down,.fv-combo-box .fv-combo-box--options.fv-combo-box--fade-in-leave-to .fv-combo-box--bg.fv-combo-box--bg-up{height:0px}.fv-combo-box .fv-combo-box--options.fv-combo-box--fade-in-enter-from{height:var(--fv-combo-box-height)}.fv-combo-box .fv-combo-box--options.fv-combo-box--fade-in-enter-from .fv-combo-box--bg{height:max(var(--fv-combo-box-height) - 39px,39px)}.fv-combo-box .fv-combo-box--options.fv-combo-box--fade-in-leave-active{height:var(--fv-combo-box-height)}.fv-combo-box .fv-combo-box--options.fv-combo-box--fade-in-leave-active.fv-combo-box--editable{transition:all .3s ease-in}.fv-combo-box .fv-combo-box--options.fv-combo-box--fade-in-leave-active .fv-combo-box--bg{transition:inherit}.fv-combo-box .fv-combo-box--options.fv-combo-box--fade-in-enter-active{height:var(--fv-combo-box-height);transition:all .3s cubic-bezier(.56,1.09,1,1.28)}.fv-combo-box .fv-combo-box--options.fv-combo-box--fade-in-enter-active .fv-combo-box--bg{transition:inherit}.fv-combo-box .fv-combo-box--options.fv-combo-box--fade-in-enter-to,.fv-combo-box .fv-combo-box--options.fv-combo-box--fade-in-leave-from,.fv-combo-box .fv-combo-box--options.fv-combo-box--fade-in-enter-to .fv-combo-box--bg,.fv-combo-box .fv-combo-box--options.fv-combo-box--fade-in-leave-from .fv-combo-box--bg{height:var(--fv-combo-box-height)}.fv-combo-box .fv-combo-box--options .fv-combo-box--option{padding:2.5px 5px;cursor:pointer}.fv-combo-box .fv-combo-box--options .fv-combo-box--option .fv-combo-box--option-text{-webkit-user-select:none;-moz-user-select:none;user-select:none;position:relative;padding:5px 15px;border-radius:4px;font-size:14px;height:34px;white-space:nowrap}.fv-combo-box .fv-combo-box--options .fv-combo-box--option .fv-combo-box--option-text.active:before{content:"";position:absolute;height:16px;width:3px;border-radius:1.5px;top:50%;transform:translateY(-50%);left:0px}.fv-combo-box.light .fv-combo-box--options .fv-combo-box--bg{box-shadow:#41171722 0 3.2px 7.2px,#0000001c 0 .6px 1.8px;border-color:var(--fv-light-border-color-2);background-color:#fafbfbcc}.fv-combo-box.light .fv-combo-box--options .fv-combo-box--bg.fv-combo-box--bg-down{border-top:solid 2px rgb(var(--fv-primary-color))}.fv-combo-box.light .fv-combo-box--options .fv-combo-box--option .fv-combo-box--option-text:hover,.fv-combo-box.light .fv-combo-box--options .fv-combo-box--option .fv-combo-box--option-text.active{background-color:#f0f0f0e6}.fv-combo-box.light .fv-combo-box--options .fv-combo-box--option .fv-combo-box--option-text.active:before{background:rgb(var(--fv-primary-color))}.fv-combo-box.dark .fv-combo-box--options .fv-combo-box--bg{box-shadow:#41171722 0 3.2px 7.2px,#0000001c 0 .6px 1.8px;border-color:transparent;background-color:#323738cc}.fv-combo-box.dark .fv-combo-box--options .fv-combo-box--bg.fv-combo-box--bg-down{border-top:solid 2px rgb(var(--fv-primary-color))}.fv-combo-box.dark .fv-combo-box--options .fv-combo-box--option .fv-combo-box--option-text:hover,.fv-combo-box.dark .fv-combo-box--options .fv-combo-box--option .fv-combo-box--option-text.active{background-color:#3b3b3be6}.fv-combo-box.dark .fv-combo-box--options .fv-combo-box--option .fv-combo-box--option-text.active:before{background:rgb(var(--fv-primary-color))}.fv-img{--fv-img-fit: initial;position:relative;overflow:hidden}.fv-img .loading-container{position:relative;height:100%;width:100%;display:flex;align-items:center;justify-content:center}.fv-img .loading-container .bg{height:100%;width:100%;position:absolute;top:0;left:0;z-index:-1;filter:blur(8px)}.fv-img .container{position:relative;width:100%;height:100%}.fv-img .container .image{width:100%;height:100%;-o-object-fit:var(--fv-img-fit);object-fit:var(--fv-img-fit)}.fv-img .container.fv-img-fade-in-enter-from{opacity:0;filter:blur(0px)}.fv-img .container.fv-img-fade-in-enter-active{filter:blur(8px);transition:all .3s linear}.fv-info-box{overflow:hidden;position:relative;width:300px;height:215px;border-radius:6px;padding-bottom:50px;box-shadow:8px 8px 25px #0003;border-width:1px;border-style:solid;border-color:transparent}.fv-info-box .title-bar{height:50px;display:flex;align-items:center;padding:20px;border-bottom-width:1px;border-bottom-style:solid;box-sizing:border-box}.fv-info-box .title-bar .icon{margin-right:5px}.fv-info-box .title-bar .text{font-weight:700}.fv-info-box .content{width:100%;height:calc(100% - 76px);display:flex;align-items:center;padding:20px}.fv-info-box .control-panel{position:absolute;bottom:0;width:100%;height:76px;display:flex;align-items:center;justify-content:center;border-top-width:1px;border-top-style:solid;box-sizing:border-box}.fv-info-box .control-panel .button{height:50%;width:calc(50% - 18px);margin:6px;transition:transform .3s cubic-bezier(0,0,.95,1.63)}.fv-info-box .control-panel .button:hover{opacity:.8}.fv-info-box .control-panel .button:active{transform:scale(.95)}.fv-info-box.fv-info-box-fade-in-enter-active{transition:all .3s cubic-bezier(.42,.47,.61,1.39)!important;transform:scale(.6);opacity:0}.fv-info-box.fv-info-box-fade-in-enter-to{transform:scale(1);opacity:1}.fv-info-box.fv-info-box-fade-in-leave-active{transition:all .3s cubic-bezier(.42,.47,.61,1.39)!important;transform:scale(1);opacity:1}.fv-info-box.fv-info-box-fade-in-leave-to{transform:scale(.6);opacity:0}.fv-info-box--container{position:fixed;top:0;left:0;width:100%;height:100%;z-index:9999;display:flex;align-items:center;justify-content:center;overflow-x:hidden;overflow-y:hidden}.fv-info-box--container.light{background-color:#fff9}.fv-info-box--container.dark{background-color:#0009}body.fv-info-box-mask{overflow:hidden!important;height:100% i!important}.fv-info-box.light{transition:all .3s linear;transition-delay:.3s;border-color:var(--fv-light-bgcolor-3)}.fv-info-box.light .title-bar{background:var(--fv-light-bgcolor-3);border-bottom-color:var(--fv-light-border-color-2)}.fv-info-box.light .control-panel{background:var(--fv-light-bgcolor-3);border-top-color:var(--fv-light-border-color-2)}.fv-info-box.light .content{background:var(--fv-dark-color)}.fv-info-box.light.info:hover{border-color:rgba(var(--fv-primary-color),1)}.fv-info-box.light.info .title-bar .icon{color:rgba(var(--fv-primary-color),1)}.fv-info-box.light.correct:hover{border-color:rgba(var(--fv-success-color),1)}.fv-info-box.light.correct .title-bar .icon{color:rgba(var(--fv-success-color),1)}.fv-info-box.light.error:hover{border-color:rgba(var(--fv-error-color),1)}.fv-info-box.light.error .title-bar .icon{color:rgba(var(--fv-error-color),1)}.fv-info-box.light.warning:hover{border-color:rgba(var(--fv-warning-color),1)}.fv-info-box.light.warning .title-bar .icon{color:rgba(var(--fv-warning-color),1)}.fv-info-box.light.blocked:hover{border-color:rgba(var(--fv-error-color),1)}.fv-info-box.light.blocked .title-bar .icon{color:rgba(var(--fv-error-color),1)}.fv-info-box.dark{transition:border-color .3s linear;transition-delay:.3s;border-color:var(--fv-dark-bgcolor-2)}.fv-info-box.dark .title-bar{background:var(--fv-dark-bgcolor-2);border-bottom-color:var(--fv-dark-bgcolor-2)}.fv-info-box.dark .control-panel{background:var(--fv-dark-bgcolor-2);border-top-color:var(--fv-dark-bgcolor-2)}.fv-info-box.dark .content{background:var(--fv-dark-bgcolor-3)}.fv-info-box.dark.info:hover{border-color:rgba(var(--fv-primary-color),1)}.fv-info-box.dark.info .title-bar .icon{color:rgba(var(--fv-primary-color),1)}.fv-info-box.dark.correct:hover{border-color:rgba(var(--fv-success-color),1)}.fv-info-box.dark.correct .title-bar .icon{color:rgba(var(--fv-success-color),1)}.fv-info-box.dark.error:hover{border-color:rgba(var(--fv-error-color),1)}.fv-info-box.dark.error .title-bar .icon{color:rgba(var(--fv-error-color),1)}.fv-info-box.dark.warning:hover{border-color:rgba(var(--fv-warning-color),1)}.fv-info-box.dark.warning .title-bar .icon{color:rgba(var(--fv-warning-color),1)}.fv-info-box.dark.blocked:hover{border-color:rgba(var(--fv-error-color),1)}.fv-info-box.dark.blocked .title-bar .icon{color:rgba(var(--fv-error-color),1)}.fv-message-bar{position:relative;padding:8px 15px;border-style:solid;border-width:1px;border-radius:3px;box-sizing:border-box;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px)}.fv-message-bar .header{display:flex;position:relative}.fv-message-bar .header .icon{margin-right:5px}.fv-message-bar .header .text.close{margin-right:26px}.fv-message-bar .header .close-icon{position:absolute;top:0px;right:5px;cursor:pointer}.fv-message-bar .header .close-icon:hover{transition:transform .2s cubic-bezier(0,0,.95,1.63);transform:scale(1.2)}.fv-message-bar .header .close-icon:active{transition:transform .2s cubic-bezier(0,0,.95,1.63);transform:scale(.8)}.fv-message-bar .control{margin-top:10px}.fv-message-bar .control .right-panel{display:flex;justify-content:flex-end}.fv-message-bar .control .right-panel .button{margin:0 5px;transition:transform .3s cubic-bezier(0,0,.95,1.63)}.fv-message-bar .control .right-panel .button:hover{transform:scale(1.05)}.fv-message-bar .control .right-panel .button:active{transform:scale(.9)}.fv-message-bar.fv-message-bar-fade-in-enter-active{transition:transform .3s cubic-bezier(0,.6,.48,1.15);transform:translateY(-100%);opacity:0}.fv-message-bar.fv-message-bar-fade-in-enter-to{transform:translateY(0);opacity:1}.fv-message-bar.fv-message-bar-fade-in-leave-active{transition:all .3s cubic-bezier(0,.6,.48,1.15);transform:translateY(0);opacity:1}.fv-message-bar.fv-message-bar-fade-in-leave-to{transform:translateY(-100%);opacity:0}.fv-message-bar--container{position:fixed;width:100%;top:0;left:0;z-index:9999}.fv-message-bar.light.info{background-color:rgba(var(--fv-info-bgcolor),.5);border-color:rgba(var(--fv-info-bgcolor),.8)}.fv-message-bar.light.info .header .icon{color:rgba(var(--fv-info-color),1)}.fv-message-bar.light.correct{background-color:rgba(var(--fv-success-bgcolor),.5);border-color:rgba(var(--fv-success-bgcolor),.8)}.fv-message-bar.light.correct .header .icon{color:rgba(var(--fv-success-color),1)}.fv-message-bar.light.error{background-color:rgba(var(--fv-error-bgcolor),.5);border-color:rgba(var(--fv-error-bgcolor),.8)}.fv-message-bar.light.error .header .icon{color:rgba(var(--fv-error-color),1)}.fv-message-bar.light.warning{background-color:rgba(var(--fv-warning-bgcolor),.5);border-color:rgba(var(--fv-warning-bgcolor),.8)}.fv-message-bar.light.warning .header .icon{color:rgba(var(--fv-warning-color),1)}.fv-message-bar.light.blocked{background-color:rgba(var(--fv-error-bgcolor),.5);border-color:rgba(var(--fv-error-bgcolor),.8)}.fv-message-bar.light.blocked .header .icon{color:rgba(var(--fv-error-color),1)}.fv-message-bar.dark.info{background-color:rgba(var(--fv-info-bgcolor),.2);border-color:rgba(var(--fv-info-bgcolor),.8)}.fv-message-bar.dark.info .header .icon{color:rgba(var(--fv-info-bgcolor),1)}.fv-message-bar.dark.correct{background-color:rgba(var(--fv-success-bgcolor),.2);border-color:rgba(var(--fv-success-bgcolor),.8)}.fv-message-bar.dark.correct .header .icon{color:rgba(var(--fv-success-color),1)}.fv-message-bar.dark.error{background-color:rgba(var(--fv-error-bgcolor),.2);border-color:rgba(var(--fv-error-bgcolor),.8)}.fv-message-bar.dark.error .header .icon{color:rgba(var(--fv-error-color),1)}.fv-message-bar.dark.warning{background-color:rgba(var(--fv-warning-bgcolor),.2);border-color:rgba(var(--fv-warning-bgcolor),.8)}.fv-message-bar.dark.warning .header .icon{color:rgba(var(--fv-warning-color),1)}.fv-message-bar.dark.blocked{background-color:rgba(var(--fv-error-bgcolor),.2);border-color:rgba(var(--fv-error-bgcolor),.8)}.fv-message-bar.dark.blocked .header .icon{color:rgba(var(--fv-error-color),1)}.fv-progress-bar{--fv-progress-value: -100%;display:inline-flex;align-items:center;justify-content:center;pointer-events:none}.fv-progress-bar .label{display:flex;padding:0;margin:0;align-items:center;justify-content:center;position:relative}.fv-progress-bar .label .progress{display:none;position:absolute}.fv-progress-bar .label .container{position:relative;width:120px;overflow:hidden;height:3px;display:inline-flex;align-items:center;justify-content:center;border-radius:3px}.fv-progress-bar .label .container .bar{width:100%;border-radius:3px;height:3px}.fv-progress-bar .label .determinate .bg{position:absolute;height:100%;width:100%;display:flex;align-items:center;justify-content:center}.fv-progress-bar .label .determinate .bg .bg-bar{height:1px;width:100%;border-radius:1px}.fv-progress-bar .label .determinate .bar{transition:transform .3s linear;transform:translate(var(--fv-progress-value))}.fv-progress-bar .label .indeterminate .bg{display:none}.fv-progress-bar .label .indeterminate.running .bar{-webkit-animation:fv-progress-bar-indeterminate infinite 2s linear;animation:fv-progress-bar-indeterminate infinite 2s linear;-webkit-animation-play-state:initial;animation-play-state:initial}.fv-progress-bar .label .indeterminate.pause .bar{-webkit-animation:fv-progress-bar-indeterminate-pause normal .3s linear;animation:fv-progress-bar-indeterminate-pause normal .3s linear;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-play-state:initial;animation-play-state:initial}.fv-progress-bar .label .indeterminate.error .bar{-webkit-animation:fv-progress-bar-indeterminate-error normal .3s linear;animation:fv-progress-bar-indeterminate-error normal .3s linear;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-play-state:initial;animation-play-state:initial}@-webkit-keyframes fv-progress-bar-indeterminate-pause{0%{transform:translate(-110%)}to{transform:translate(0)}}@keyframes fv-progress-bar-indeterminate-pause{0%{transform:translate(-110%)}to{transform:translate(0)}}@-webkit-keyframes fv-progress-bar-indeterminate-error{0%{transform:translate(-110%)}to{transform:translate(0)}}@keyframes fv-progress-bar-indeterminate-error{0%{transform:translate(-110%)}to{transform:translate(0)}}@-webkit-keyframes fv-progress-bar-indeterminate{0%{transform:translate(-100%) scaleX(.5);opacity:1}59%{transform:translate(100%) scaleX(.5);opacity:1}60%{transform:translate(100%) scaleX(.5);opacity:0}61%{transform:translate(-100%) scaleX(.8);opacity:0}62%{transform:translate(-100%) scaleX(.8);opacity:1}to{transform:translate(100%) scaleX(.8);opacity:1}}@keyframes fv-progress-bar-indeterminate{0%{transform:translate(-100%) scaleX(.5);opacity:1}59%{transform:translate(100%) scaleX(.5);opacity:1}60%{transform:translate(100%) scaleX(.5);opacity:0}61%{transform:translate(-100%) scaleX(.8);opacity:0}62%{transform:translate(-100%) scaleX(.8);opacity:1}to{transform:translate(100%) scaleX(.8);opacity:1}}.fv-progress-bar.light{--fv-progress-bar-normal-color: initial;--fv-progress-bar-warning-color: initial;--fv-progress-bar-error-color: initial;--fv-progress-bgcolor: initial}.fv-progress-bar.light .label .indeterminate.running .bar{background:var(--fv-progress-bar-normal-color, rgb(var(--fv-primary-bgcolor)))}.fv-progress-bar.light .label .indeterminate.pause .bar{background:var(--fv-progress-bar-warning-color, rgb(var(--fv-warning-bgcolor)))}.fv-progress-bar.light .label .indeterminate.error .bar{background:var(--fv-progress-bar-error-color, rgb(var(--fv-error-bgcolor)))}.fv-progress-bar.light .label .determinate.running .bar{background:var(--fv-progress-bar-normal-color, rgb(var(--fv-primary-bgcolor)))}.fv-progress-bar.light .label .determinate.pause .bar{background:var(--fv-progress-bar-warning-color, rgb(var(--fv-warning-bgcolor)))}.fv-progress-bar.light .label .determinate.error .bar{background:var(--fv-progress-bar-error-color, rgb(var(--fv-error-bgcolor)))}.fv-progress-bar.light .label .determinate .bg .bg-bar{background:var(--fv-progress-bgcolor, var(--fv-dark-bgcolor))}.fv-progress-bar.dark{--fv-progress-bar-normal-color: initial;--fv-progress-bar-warning-color: initial;--fv-progress-bar-error-color: initial;--fv-progress-bgcolor: initial}.fv-progress-bar.dark .label .indeterminate .bar{background:var(--fv-progress-bar-normal-color, rgb(var(--fv-primary-bgcolor)))}.fv-progress-bar.dark .label .indeterminate.pause .bar{background:var(--fv-progress-bar-warning-color, rgb(var(--fv-warning-bgcolor)))}.fv-progress-bar.dark .label .indeterminate.error .bar{background:var(--fv-progress-bar-error-color, rgb(var(--fv-error-bgcolor)))}.fv-progress-bar.dark .determinate.running .bar{background:var(--fv-progress-bar-normal-color, rgb(var(--fv-primary-bgcolor)))}.fv-progress-bar.dark .determinate.pause .bar{background:var(--fv-progress-bar-warning-color, rgb(var(--fv-warning-bgcolor)))}.fv-progress-bar.dark .determinate.error .bar{background:var(--fv-progress-bar-error-color, rgb(var(--fv-error-bgcolor)))}.fv-progress-bar.dark .determinate .bg .bg-bar{background:var(--fv-progress-bgcolor, var(--fv-dark-bgcolor))}.fv-progress-ring{display:inline-block;pointer-events:none;--fv-progress-ring-size: 60px;--fv-progress-ring-border-width: 5px;--fv-progress-ring-offset: -.01;--fv-progress-ring-length: 0;--fv-progress-ring-value: 0;--fv-progress-ring-perimeter: calc( 3.14 * (var(--fv-progress-ring-size) - 2 * var(--fv-progress-ring-border-width)) )}.fv-progress-ring .label .progress{display:none}.fv-progress-ring .label .svg{width:calc(var(--fv-progress-ring-size));height:calc(var(--fv-progress-ring-size));background:transparent}.fv-progress-ring .label .svg .bar{stroke-width:var(--fv-progress-ring-border-width);fill:none;stroke-dashoffset:calc(0px - var(--fv-progress-ring-offset) * var(--fv-progress-ring-perimeter));stroke-dasharray:calc(var(--fv-progress-ring-length) * var(--fv-progress-ring-perimeter)),calc(var(--fv-progress-ring-perimeter) * 2);transform-origin:center;transform:rotate(-90deg);stroke-linecap:round}.fv-progress-ring.determinate .label .svg .bar{transition:stroke-dasharray .3s linear;stroke-dasharray:calc(var(--fv-progress-ring-value) * var(--fv-progress-ring-perimeter)),calc(var(--fv-progress-ring-perimeter) * 2)}.fv-progress-ring.indeterminate.running .label .svg .bar{-webkit-animation-name:fv-progress-ring-indeterminate;animation-name:fv-progress-ring-indeterminate;-webkit-animation-duration:2s;animation-duration:2s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-play-state:initial;animation-play-state:initial}.fv-progress-ring.indeterminate.pause .svg .bar{-webkit-animation-name:fv-progress-ring-indeterminate-pause;animation-name:fv-progress-ring-indeterminate-pause;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-play-state:initial;animation-play-state:initial;stroke-dasharray:var(--fv-progress-ring-perimeter),calc(var(--fv-progress-ring-perimeter) * 2)}.fv-progress-ring.indeterminate.error .svg .bar{-webkit-animation-name:fv-progress-ring-indeterminate-error;animation-name:fv-progress-ring-indeterminate-error;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-play-state:initial;animation-play-state:initial;stroke-dasharray:var(--fv-progress-ring-perimeter),calc(var(--fv-progress-ring-perimeter) * 2)}@-webkit-keyframes fv-progress-ring-indeterminate-error{0%{stroke-dasharray:calc(0 * var(--fv-progress-ring-perimeter)),calc(var(--fv-progress-ring-perimeter) * 2)}to{stroke-dasharray:calc(1 * var(--fv-progress-ring-perimeter)),calc(var(--fv-progress-ring-perimeter) * 2)}}@keyframes fv-progress-ring-indeterminate-error{0%{stroke-dasharray:calc(0 * var(--fv-progress-ring-perimeter)),calc(var(--fv-progress-ring-perimeter) * 2)}to{stroke-dasharray:calc(1 * var(--fv-progress-ring-perimeter)),calc(var(--fv-progress-ring-perimeter) * 2)}}@-webkit-keyframes fv-progress-ring-indeterminate-pause{0%{stroke-dasharray:calc(0 * var(--fv-progress-ring-perimeter)),calc(var(--fv-progress-ring-perimeter) * 2)}to{stroke-dasharray:calc(1 * var(--fv-progress-ring-perimeter)),calc(var(--fv-progress-ring-perimeter) * 2)}}@keyframes fv-progress-ring-indeterminate-pause{0%{stroke-dasharray:calc(0 * var(--fv-progress-ring-perimeter)),calc(var(--fv-progress-ring-perimeter) * 2)}to{stroke-dasharray:calc(1 * var(--fv-progress-ring-perimeter)),calc(var(--fv-progress-ring-perimeter) * 2)}}@-webkit-keyframes fv-progress-ring-indeterminate{0%{transform:rotate(-90deg);stroke-dasharray:calc(0 * var(--fv-progress-ring-perimeter)),calc(var(--fv-progress-ring-perimeter) * 2)}50%{transform:rotate(270deg);stroke-dasharray:calc(.4 * var(--fv-progress-ring-perimeter)),calc(var(--fv-progress-ring-perimeter) * 2)}to{transform:rotate(1000deg);stroke-dasharray:calc(0 * var(--fv-progress-ring-perimeter)),calc(var(--fv-progress-ring-perimeter) * 2)}}@keyframes fv-progress-ring-indeterminate{0%{transform:rotate(-90deg);stroke-dasharray:calc(0 * var(--fv-progress-ring-perimeter)),calc(var(--fv-progress-ring-perimeter) * 2)}50%{transform:rotate(270deg);stroke-dasharray:calc(.4 * var(--fv-progress-ring-perimeter)),calc(var(--fv-progress-ring-perimeter) * 2)}to{transform:rotate(1000deg);stroke-dasharray:calc(0 * var(--fv-progress-ring-perimeter)),calc(var(--fv-progress-ring-perimeter) * 2)}}.fv-progress-ring.light{--fv-progress-ring-primary-color: initial;--fv-progress-ring-warning-color: initial;--fv-progress-ring-error-color: initial}.fv-progress-ring.light.running .label .svg .bar{stroke:var(--fv-progress-ring-primary-color, rgb(var(--fv-primary-bgcolor)))}.fv-progress-ring.light.pause .label .svg .bar{stroke:var(--fv-progress-ring-warning-color, rgb(var(--fv-warning-bgcolor)))}.fv-progress-ring.light.error .label .svg .bar{stroke:var(--fv-progress-ring-error-color, rgb(var(--fv-error-bgcolor)))}.fv-progress-ring.dark{--fv-progress-ring-primary-color: initial;--fv-progress-ring-warning-color: initial;--fv-progress-ring-error-color: initial}.fv-progress-ring.dark.running .label .svg .bar{stroke:var(--fv-progress-ring-primary-color, rgb(var(--fv-primary-bgcolor)))}.fv-progress-ring.dark.pause .label .svg .bar{stroke:var(--fv-progress-ring-warning-color, rgb(var(--fv-warning-bgcolor)))}.fv-progress-ring.dark.error .label .svg .bar{stroke:var(--fv-progress-ring-error-color, rgb(var(--fv-error-bgcolor)))}.fv-radio{display:inline-block}.fv-radio .label{position:relative;cursor:pointer;vertical-align:middle;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;user-select:none;display:inline-flex;align-items:center}.fv-radio .label .radio{top:0;left:0;position:absolute!important;-webkit-appearance:none;-moz-appearance:none;appearance:none}.fv-radio .label .icon{overflow:hidden;width:20px;height:20px;margin-left:10px;margin-right:10px;border-radius:50%;border-width:1px;border-style:solid;display:inline-flex;justify-content:center;align-items:center;position:relative}.fv-radio.active .label .icon .dot{height:10px;width:10px;border-radius:50%;transition:all .2s linear;transform:scale(1)}.fv-radio.active .label:hover .icon .dot{transform:scale(1.2)}.fv-radio.disabled{pointer-events:none}.fv-radio.disabled .label:hover .icon .dot{transform:scale(1)}.fv-radio.light .label .icon{--fv-radio-bgcolor: initial;border-color:var(--fv-light-border-color);color:var(--fv-dark-color)}.fv-radio.light .label .icon:hover{background-color:var(--fv-radio-bgcolor, var(--fv-light-bgcolor))}.fv-radio.light.active .label .icon{border-color:rgb(var(--fv-primary-bgcolor));background-color:rgb(var(--fv-primary-bgcolor));color:var(--fv-dark-color)}.fv-radio.light.active .label .icon .dot{background-color:var(--fv-dark-color)}.fv-radio.light.disabled .label{cursor:default}.fv-radio.light.disabled .label .icon{background-color:var(--fv-light-bgcolor);border-color:var(--fv-light-bgcolor)}.fv-radio.dark .label .icon{--fv-radio-bgcolor: initial;border-color:var(--fv-dark-border-color);color:var(--fv-light-color)}.fv-radio.dark .label .icon:hover{background-color:var(--fv-radio-bgcolor, var(--fv-dark-bgcolor))}.fv-radio.dark.active .label .icon{border-color:rgb(var(--fv-primary-bgcolor));background-color:rgb(var(--fv-primary-bgcolor));color:var(--fv-light-color)}.fv-radio.dark.active .label .icon .dot{background-color:var(--fv-light-color)}.fv-radio.dark.disabled .label{cursor:default}.fv-radio.dark.disabled .label .icon{background-color:var(--fv-dark-bgcolor);border-color:var(--fv-dark-bgcolor)}.fv-text-box{--fv-text-box-height: 18px;--fv-text-box-font-size: 16px;--fv-text-box-width: 80px;min-width:80px;display:inline-flex;justify-content:center;position:relative;border-style:solid;border-width:1px;padding:5px 10px;border-radius:6px;transition:height .3s cubic-bezier(.56,1.09,1,1.28),width .3s cubic-bezier(.56,1.09,1,1.28);height:calc(var(--fv-text-box-height) + 12px);overflow:hidden;box-sizing:border-box}.fv-text-box .fv-text-box--icon{display:none}.fv-text-box .fv-text-box--icon .ms-Icon{line-height:130%}.fv-text-box .fv-text-box--input{padding:0;border-radius:0;outline:none;min-width:100%;width:var(--fv-text-box-width);display:inline-block;font-size:var(--fv-text-box-font-size);height:var(--fv-text-box-height);line-height:130%;resize:none;overflow:hidden;transition:none;vertical-align:middle}.fv-text-box .fv-text-box--input::-ms-reveal,.fv-text-box .fv-text-box--input::-ms-clear{display:none}.fv-text-box .fv-text-box--pre-hidden{position:absolute;display:block;top:0;left:0;visibility:hidden;font-family:monospace;font-size:var(--fv-text-box-font-size);margin:0;padding:0;line-height:130%;box-sizing:border-box}.fv-text-box:focus-within .fv-text-box--icon{cursor:pointer;display:flex;align-items:center;justify-content:center;vertical-align:middle;transition:all .3s cubic-bezier(.56,1.09,1,1.28)}.fv-text-box:focus-within .fv-text-box--icon:hover{transform:scale(1.1)}.fv-text-box:focus-within .fv-text-box--icon:active{transform:scale(.8)}.fv-text-box:focus-within.fv-text-box--singleline .fv-text-box--input{min-width:calc(100% - 16px)}.fv-text-box.readonly,.fv-text-box.readonly .fv-text-box--input{cursor:default}.fv-text-box.readonly .fv-text-box--icon{display:none}.fv-text-box.readonly.fv-text-box--singleline .fv-text-box--input{min-width:100%}.fv-text-box.fv-text-box--singleline .fv-text-box--input.fv-text-box--text-with-icon{min-width:calc(100% - 16px)}.fv-text-box.fv-text-box--singleline .fv-text-box--input.fv-text-box--text-with-icon+.fv-text-box--icon{cursor:pointer;display:flex;align-items:center;justify-content:center;vertical-align:middle;transition:all .3s cubic-bezier(.56,1.09,1,1.28)}.fv-text-box.fv-text-box--singleline .fv-text-box--input.fv-text-box--text-with-icon+.fv-text-box--icon:hover{transform:scale(1.1)}.fv-text-box.fv-text-box--singleline .fv-text-box--input.fv-text-box--text-with-icon+.fv-text-box--icon:active{transform:scale(.8)}.fv-text-box.disabled{pointer-events:none}.fv-text-box.light{background:var(--fv-light-bgcolor-4);border-top-color:var(--fv-light-bgcolor);border-left-color:var(--fv-light-bgcolor);border-right-color:var(--fv-light-bgcolor);border-bottom-color:var(--fv-light-border-color)}.fv-text-box.light .fv-text-box--input{background:none}.fv-text-box.light:hover{border-bottom-color:var(--fv-text-box-hover-border-color, rgba(var(--fv-primary-color), .8));border-bottom-width:2px}.fv-text-box.light:focus-within{background:var(--fv-dark-color);border-bottom-color:var(--fv-text-box-hover-border-color, rgba(var(--fv-primary-color), .8));border-bottom-width:2px}.fv-text-box.light.disabled{border-bottom-color:var(--fv-light-bgcolor);border-bottom-width:1px;opacity:.8}.fv-text-box.light.fv-text-box--warning{border-color:var(--fv-text-box-warning-border-color, rgba(var(--fv-warning-color), .8))}.fv-text-box.light.fv-text-box--error{border-color:var(--fv-text-box-error-border-color, rgba(var(--fv-error-color), .8))}.fv-text-box{--fv-text-box-hover-border-color: initial;--fv-text-box-error-border-color: initial;--fv-text-box-warning-border-color: initial}.fv-text-box.dark{background-color:var(--fv-dark-bgcolor-3);border-top-color:var(--fv-dark-bgcolor-3);border-left-color:var(--fv-dark-bgcolor-3);border-right-color:var(--fv-dark-bgcolor-3);border-bottom-color:var(--fv-dark-border-color-2)}.fv-text-box.dark .fv-text-box--input{background:none}.fv-text-box.dark:hover{border-bottom-color:var(--fv-text-box-hover-border-color, rgba(var(--fv-primary-color), .8));border-bottom-width:2px}.fv-text-box.dark:focus-within{background-color:var(--fv-dark-bgcolor-2);border-bottom-color:var(--fv-text-box-hover-border-color, rgba(var(--fv-primary-color), .8));border-bottom-width:2px}.fv-text-box.dark.disabled{border-bottom-color:var(--fv-dark-bgcolor-3);border-bottom-width:1px;opacity:.8}.fv-text-box.dark.fv-text-box--warning{border-color:var(--fv-text-box-warning-border-color, rgba(var(--fv-warning-color), .8))}.fv-text-box.dark.fv-text-box--error{border-color:var(--fv-text-box-error-border-color, rgba(var(--fv-error-color), .8))}.fv-toggle-switch{--fv-toggle-switch-off: 0px;--fv-toggle-switch-on: 18px}.fv-toggle-switch .label{display:inline-flex;cursor:pointer;align-items:center;justify-content:center}.fv-toggle-switch .label .checkbox{-webkit-appearance:none;-moz-appearance:none;appearance:none}.fv-toggle-switch .label .bg{margin:0 5px;border-radius:10px;height:20px;width:40px;display:flex;align-items:center;box-sizing:border-box;padding:0 4px;border-style:solid;border-width:1px}.fv-toggle-switch .label .bg .circle{position:relative;transform:translate(var(--fv-toggle-switch-off));height:12px;width:12px;border-radius:6px;transition:transform .15s linear,width .1s linear}.fv-toggle-switch .label .text{-webkit-user-select:none;-moz-user-select:none;user-select:none}.fv-toggle-switch .label:hover .bg .circle{transform:translate(var(--fv-toggle-switch-off)) scale(1.2)}.fv-toggle-switch .label:active .bg .circle{transform:translate(var(--fv-toggle-switch-off)) scale(1.2);width:14px}.fv-toggle-switch.active .label .bg .circle{transform:translate(var(--fv-toggle-switch-on))}.fv-toggle-switch.active .label:hover .bg .circle{transform:translate(var(--fv-toggle-switch-on)) scale(1.2)}.fv-toggle-switch.active .label:active .bg .circle{transform:translate(calc(var(--fv-toggle-switch-on) - 2px)) scale(1.2);width:14px}.fv-toggle-switch.disabled{pointer-events:none}.fv-toggle-switch.light{--fv-toggle-switch-off-bgcolor: initial;--fv-toggle-switch-on-bgcolor: initial;--fv-toggle-switch-on-color: initial;--fv-toggle-switch-color: initial}.fv-toggle-switch.light .label{color:var(--fv-toggle-switch-color)}.fv-toggle-switch.light .label .bg{border-color:var(--fv-toggle-switch-off-bgcolor, var(--fv-dark-bgcolor))}.fv-toggle-switch.light .label .bg .circle{background:var(--fv-toggle-switch-off-bgcolor, var(--fv-dark-bgcolor))}.fv-toggle-switch.light.active .label .bg{border-color:var(--fv-toggle-switch-on-bgcolor, rgb(var(--fv-primary-bgcolor)));background-color:var(--fv-toggle-switch-on-bgcolor, rgb(var(--fv-primary-bgcolor)))}.fv-toggle-switch.light.active .label .bg .circle{background:var(--fv-toggle-switch-on-color, var(--fv-dark-color))}.fv-toggle-switch.light.disabled .label{color:var(--fv-dark-disabled-bgcolor)}.fv-toggle-switch.light.disabled .label .bg{border-color:var(--fv-dark-disabled-bgcolor)}.fv-toggle-switch.light.disabled .label .bg .circle{background:var(--fv-dark-disabled-bgcolor)}.fv-toggle-switch.light.disabled.active .label .bg{border-color:var(--fv-dark-disabled-bgcolor);background-color:var(--fv-dark-disabled-bgcolor)}.fv-toggle-switch.light.disabled.active .label .bg .circle{background:var(--fv-dark-color)}.fv-toggle-switch.dark{--fv-toggle-switch-off-bgcolor: initial;--fv-toggle-switch-on-bgcolor: initial;--fv-toggle-switch-on-color: initial;--fv-toggle-switch-color: initial}.fv-toggle-switch.dark .label{color:var(--fv-toggle-switch-color)}.fv-toggle-switch.dark .label .bg{border-color:var(--fv-toggle-switch-off-bgcolor, var(--fv-light-bgcolor2))}.fv-toggle-switch.dark .label .bg .circle{background:var(--fv-toggle-switch-off-bgcolor, var(--fv-light-bgcolor2))}.fv-toggle-switch.dark.active .label .bg{border-color:var(--fv-toggle-switch-on-bgcolor, rgb(var(--fv-primary-bgcolor)));background-color:var(--fv-toggle-switch-on-bgcolor, rgb(var(--fv-primary-bgcolor)))}.fv-toggle-switch.dark.active .label .bg .circle{background:var(--fv-toggle-switch-on-color, var(--fv-light-color))}.fv-toggle-switch.dark.disabled .label{color:var(--fv-light-disabled-bgcolor)}.fv-toggle-switch.dark.disabled .label .bg{border-color:var(--fv-light-disabled-bgcolor)}.fv-toggle-switch.dark.disabled .label .bg .circle{background:var(--fv-light-disabled-bgcolor)}.fv-toggle-switch.dark.disabled.active .label .bg{border-color:var(--fv-light-disabled-bgcolor);background-color:var(--fv-light-disabled-bgcolor)}.fv-toggle-switch.dark.disabled.active .label .bg .circle{background:var(--fv-light-disabled-color)}:root{--fv-light-bgcolor-4: rgba(251, 251, 251, 1);--fv-light-bgcolor-3: rgba(245, 245, 245, 1);--fv-light-bgcolor2: rgba(204, 204, 204, 1);--fv-light-bgcolor: rgba(237, 235, 233, 1);--fv-light-hover-bgcolor: rgba(237, 235, 233, .8);--fv-light-color: rgba(0, 0, 0, 1);--fv-light-disabled-bgcolor: rgba(239, 239, 239, .5);--fv-light-disabled-color: rgba(220, 220, 220, 1);--fv-light-border-color: rgb(63, 63, 63, 1);--fv-light-border-color-2: rgba(224, 224, 224, 1);--fv-dark-bgcolor: rgba(96, 94, 92, 1);--fv-dark-bgcolor-2: rgba(32, 32, 32, 1);--fv-dark-bgcolor-3: rgba(39, 40, 40, 1);--fv-dark-hover-bgcolor: rgba(96, 94, 92, .8);--fv-dark-color: rgba(255, 255, 255, 1);--fv-dark-disabled-bgcolor: rgba(62, 63, 66, .5);--fv-dark-disabled-color: rgba(143, 145, 147, 1);--fv-dark-border-color: rgba(85, 88, 91, 1);--fv-dark-border-color-2: rgba(154, 154, 154, 1);--fv-primary-bgcolor: 0, 90, 158;--fv-warning-bgcolor: 255, 200, 10;--fv-error-bgcolor: 250, 65, 0;--fv-info-bgcolor: 243, 242, 241;--fv-success-bgcolor: 95, 210, 85;--fv-primary-color: 0, 90, 158;--fv-warning-color: 239, 201, 65;--fv-error-color: 164, 38, 45;--fv-info-color: 50, 49, 48;--fv-success-color: 0, 204, 153}
diff --git a/assets/style.BabQegKX.css b/assets/style.BabQegKX.css
new file mode 100644
index 0000000..f21f267
--- /dev/null
+++ b/assets/style.BabQegKX.css
@@ -0,0 +1 @@
+@charset "UTF-8";@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:normal;font-named-instance:"Regular";src:url(/VFluent3/assets/inter-roman-cyrillic.CMhn1ESj.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:normal;font-named-instance:"Regular";src:url(/VFluent3/assets/inter-roman-cyrillic-ext.DxP3Awbn.woff2) format("woff2");unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:normal;font-named-instance:"Regular";src:url(/VFluent3/assets/inter-roman-greek.JvnBZ4YD.woff2) format("woff2");unicode-range:U+0370-03FF}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:normal;font-named-instance:"Regular";src:url(/VFluent3/assets/inter-roman-greek-ext.D0mI3NpI.woff2) format("woff2");unicode-range:U+1F00-1FFF}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:normal;font-named-instance:"Regular";src:url(/VFluent3/assets/inter-roman-latin.Bu8hRsVA.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:normal;font-named-instance:"Regular";src:url(/VFluent3/assets/inter-roman-latin-ext.ZlYT4o7i.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:normal;font-named-instance:"Regular";src:url(/VFluent3/assets/inter-roman-vietnamese.ClpjcLMQ.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:italic;font-named-instance:"Italic";src:url(/VFluent3/assets/inter-italic-cyrillic.D6csxwjC.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:italic;font-named-instance:"Italic";src:url(/VFluent3/assets/inter-italic-cyrillic-ext.5XJwZIOp.woff2) format("woff2");unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:italic;font-named-instance:"Italic";src:url(/VFluent3/assets/inter-italic-greek.9J96vYpw.woff2) format("woff2");unicode-range:U+0370-03FF}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:italic;font-named-instance:"Italic";src:url(/VFluent3/assets/inter-italic-greek-ext.CHOfFY1k.woff2) format("woff2");unicode-range:U+1F00-1FFF}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:italic;font-named-instance:"Italic";src:url(/VFluent3/assets/inter-italic-latin.DbsTr1gm.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:italic;font-named-instance:"Italic";src:url(/VFluent3/assets/inter-italic-latin-ext.BGcWXLrn.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:italic;font-named-instance:"Italic";src:url(/VFluent3/assets/inter-italic-vietnamese.DHNAd7Wr.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB}@font-face{font-family:Chinese Quotes;src:local("PingFang SC Regular"),local("PingFang SC"),local("SimHei"),local("Source Han Sans SC");unicode-range:U+2018,U+2019,U+201C,U+201D}:root{--vp-c-white: #ffffff;--vp-c-black: #000000;--vp-c-neutral: var(--vp-c-black);--vp-c-neutral-inverse: var(--vp-c-white)}.dark{--vp-c-neutral: var(--vp-c-white);--vp-c-neutral-inverse: var(--vp-c-black)}:root{--vp-c-gray-1: #dddde3;--vp-c-gray-2: #e4e4e9;--vp-c-gray-3: #ebebef;--vp-c-gray-soft: rgba(142, 150, 170, .14);--vp-c-indigo-1: #3451b2;--vp-c-indigo-2: #3a5ccc;--vp-c-indigo-3: #5672cd;--vp-c-indigo-soft: rgba(100, 108, 255, .14);--vp-c-purple-1: #6f42c1;--vp-c-purple-2: #7e4cc9;--vp-c-purple-3: #8e5cd9;--vp-c-purple-soft: rgba(159, 122, 234, .14);--vp-c-green-1: #18794e;--vp-c-green-2: #299764;--vp-c-green-3: #30a46c;--vp-c-green-soft: rgba(16, 185, 129, .14);--vp-c-yellow-1: #915930;--vp-c-yellow-2: #946300;--vp-c-yellow-3: #9f6a00;--vp-c-yellow-soft: rgba(234, 179, 8, .14);--vp-c-red-1: #b8272c;--vp-c-red-2: #d5393e;--vp-c-red-3: #e0575b;--vp-c-red-soft: rgba(244, 63, 94, .14);--vp-c-sponsor: #db2777}.dark{--vp-c-gray-1: #515c67;--vp-c-gray-2: #414853;--vp-c-gray-3: #32363f;--vp-c-gray-soft: rgba(101, 117, 133, .16);--vp-c-indigo-1: #a8b1ff;--vp-c-indigo-2: #5c73e7;--vp-c-indigo-3: #3e63dd;--vp-c-indigo-soft: rgba(100, 108, 255, .16);--vp-c-purple-1: #c8abfa;--vp-c-purple-2: #a879e6;--vp-c-purple-3: #8e5cd9;--vp-c-purple-soft: rgba(159, 122, 234, .16);--vp-c-green-1: #3dd68c;--vp-c-green-2: #30a46c;--vp-c-green-3: #298459;--vp-c-green-soft: rgba(16, 185, 129, .16);--vp-c-yellow-1: #f9b44e;--vp-c-yellow-2: #da8b17;--vp-c-yellow-3: #a46a0a;--vp-c-yellow-soft: rgba(234, 179, 8, .16);--vp-c-red-1: #f66f81;--vp-c-red-2: #f14158;--vp-c-red-3: #b62a3c;--vp-c-red-soft: rgba(244, 63, 94, .16)}:root{--vp-c-bg: #ffffff;--vp-c-bg-alt: #f6f6f7;--vp-c-bg-elv: #ffffff;--vp-c-bg-soft: #f6f6f7}.dark{--vp-c-bg: #1b1b1f;--vp-c-bg-alt: #161618;--vp-c-bg-elv: #202127;--vp-c-bg-soft: #202127}:root{--vp-c-border: #c2c2c4;--vp-c-divider: #e2e2e3;--vp-c-gutter: #e2e2e3}.dark{--vp-c-border: #3c3f44;--vp-c-divider: #2e2e32;--vp-c-gutter: #000000}:root{--vp-c-text-1: rgba(60, 60, 67);--vp-c-text-2: rgba(60, 60, 67, .78);--vp-c-text-3: rgba(60, 60, 67, .56)}.dark{--vp-c-text-1: rgba(255, 255, 245, .86);--vp-c-text-2: rgba(235, 235, 245, .6);--vp-c-text-3: rgba(235, 235, 245, .38)}:root{--vp-c-default-1: var(--vp-c-gray-1);--vp-c-default-2: var(--vp-c-gray-2);--vp-c-default-3: var(--vp-c-gray-3);--vp-c-default-soft: var(--vp-c-gray-soft);--vp-c-brand-1: var(--vp-c-indigo-1);--vp-c-brand-2: var(--vp-c-indigo-2);--vp-c-brand-3: var(--vp-c-indigo-3);--vp-c-brand-soft: var(--vp-c-indigo-soft);--vp-c-brand: var(--vp-c-brand-1);--vp-c-tip-1: var(--vp-c-brand-1);--vp-c-tip-2: var(--vp-c-brand-2);--vp-c-tip-3: var(--vp-c-brand-3);--vp-c-tip-soft: var(--vp-c-brand-soft);--vp-c-note-1: var(--vp-c-brand-1);--vp-c-note-2: var(--vp-c-brand-2);--vp-c-note-3: var(--vp-c-brand-3);--vp-c-note-soft: var(--vp-c-brand-soft);--vp-c-success-1: var(--vp-c-green-1);--vp-c-success-2: var(--vp-c-green-2);--vp-c-success-3: var(--vp-c-green-3);--vp-c-success-soft: var(--vp-c-green-soft);--vp-c-important-1: var(--vp-c-purple-1);--vp-c-important-2: var(--vp-c-purple-2);--vp-c-important-3: var(--vp-c-purple-3);--vp-c-important-soft: var(--vp-c-purple-soft);--vp-c-warning-1: var(--vp-c-yellow-1);--vp-c-warning-2: var(--vp-c-yellow-2);--vp-c-warning-3: var(--vp-c-yellow-3);--vp-c-warning-soft: var(--vp-c-yellow-soft);--vp-c-danger-1: var(--vp-c-red-1);--vp-c-danger-2: var(--vp-c-red-2);--vp-c-danger-3: var(--vp-c-red-3);--vp-c-danger-soft: var(--vp-c-red-soft);--vp-c-caution-1: var(--vp-c-red-1);--vp-c-caution-2: var(--vp-c-red-2);--vp-c-caution-3: var(--vp-c-red-3);--vp-c-caution-soft: var(--vp-c-red-soft)}:root{--vp-font-family-base: "Chinese Quotes", "Inter var", "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--vp-font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}:root{--vp-shadow-1: 0 1px 2px rgba(0, 0, 0, .04), 0 1px 2px rgba(0, 0, 0, .06);--vp-shadow-2: 0 3px 12px rgba(0, 0, 0, .07), 0 1px 4px rgba(0, 0, 0, .07);--vp-shadow-3: 0 12px 32px rgba(0, 0, 0, .1), 0 2px 6px rgba(0, 0, 0, .08);--vp-shadow-4: 0 14px 44px rgba(0, 0, 0, .12), 0 3px 9px rgba(0, 0, 0, .12);--vp-shadow-5: 0 18px 56px rgba(0, 0, 0, .16), 0 4px 12px rgba(0, 0, 0, .16)}:root{--vp-z-index-footer: 10;--vp-z-index-local-nav: 20;--vp-z-index-nav: 30;--vp-z-index-layout-top: 40;--vp-z-index-backdrop: 50;--vp-z-index-sidebar: 60}@media (min-width: 960px){:root{--vp-z-index-sidebar: 25}}:root{--vp-layout-max-width: 1440px}:root{--vp-header-anchor-symbol: "#"}:root{--vp-code-line-height: 1.7;--vp-code-font-size: .875em;--vp-code-color: var(--vp-c-brand-1);--vp-code-link-color: var(--vp-c-brand-1);--vp-code-link-hover-color: var(--vp-c-brand-2);--vp-code-bg: var(--vp-c-default-soft);--vp-code-block-color: var(--vp-c-text-2);--vp-code-block-bg: var(--vp-c-bg-alt);--vp-code-block-divider-color: var(--vp-c-gutter);--vp-code-lang-color: var(--vp-c-text-3);--vp-code-line-highlight-color: var(--vp-c-default-soft);--vp-code-line-number-color: var(--vp-c-text-3);--vp-code-line-diff-add-color: var(--vp-c-success-soft);--vp-code-line-diff-add-symbol-color: var(--vp-c-success-1);--vp-code-line-diff-remove-color: var(--vp-c-danger-soft);--vp-code-line-diff-remove-symbol-color: var(--vp-c-danger-1);--vp-code-line-warning-color: var(--vp-c-warning-soft);--vp-code-line-error-color: var(--vp-c-danger-soft);--vp-code-copy-code-border-color: var(--vp-c-divider);--vp-code-copy-code-bg: var(--vp-c-bg-soft);--vp-code-copy-code-hover-border-color: var(--vp-c-divider);--vp-code-copy-code-hover-bg: var(--vp-c-bg);--vp-code-copy-code-active-text: var(--vp-c-text-2);--vp-code-copy-copied-text-content: "Copied";--vp-code-tab-divider: var(--vp-code-block-divider-color);--vp-code-tab-text-color: var(--vp-c-text-2);--vp-code-tab-bg: var(--vp-code-block-bg);--vp-code-tab-hover-text-color: var(--vp-c-text-1);--vp-code-tab-active-text-color: var(--vp-c-text-1);--vp-code-tab-active-bar-color: var(--vp-c-brand-1)}:root{--vp-button-brand-border: transparent;--vp-button-brand-text: var(--vp-c-white);--vp-button-brand-bg: var(--vp-c-brand-3);--vp-button-brand-hover-border: transparent;--vp-button-brand-hover-text: var(--vp-c-white);--vp-button-brand-hover-bg: var(--vp-c-brand-2);--vp-button-brand-active-border: transparent;--vp-button-brand-active-text: var(--vp-c-white);--vp-button-brand-active-bg: var(--vp-c-brand-1);--vp-button-alt-border: transparent;--vp-button-alt-text: var(--vp-c-text-1);--vp-button-alt-bg: var(--vp-c-default-3);--vp-button-alt-hover-border: transparent;--vp-button-alt-hover-text: var(--vp-c-text-1);--vp-button-alt-hover-bg: var(--vp-c-default-2);--vp-button-alt-active-border: transparent;--vp-button-alt-active-text: var(--vp-c-text-1);--vp-button-alt-active-bg: var(--vp-c-default-1);--vp-button-sponsor-border: var(--vp-c-text-2);--vp-button-sponsor-text: var(--vp-c-text-2);--vp-button-sponsor-bg: transparent;--vp-button-sponsor-hover-border: var(--vp-c-sponsor);--vp-button-sponsor-hover-text: var(--vp-c-sponsor);--vp-button-sponsor-hover-bg: transparent;--vp-button-sponsor-active-border: var(--vp-c-sponsor);--vp-button-sponsor-active-text: var(--vp-c-sponsor);--vp-button-sponsor-active-bg: transparent}:root{--vp-custom-block-font-size: 14px;--vp-custom-block-code-font-size: 13px;--vp-custom-block-info-border: transparent;--vp-custom-block-info-text: var(--vp-c-text-1);--vp-custom-block-info-bg: var(--vp-c-default-soft);--vp-custom-block-info-code-bg: var(--vp-c-default-soft);--vp-custom-block-note-border: transparent;--vp-custom-block-note-text: var(--vp-c-text-1);--vp-custom-block-note-bg: var(--vp-c-default-soft);--vp-custom-block-note-code-bg: var(--vp-c-default-soft);--vp-custom-block-tip-border: transparent;--vp-custom-block-tip-text: var(--vp-c-text-1);--vp-custom-block-tip-bg: var(--vp-c-tip-soft);--vp-custom-block-tip-code-bg: var(--vp-c-tip-soft);--vp-custom-block-important-border: transparent;--vp-custom-block-important-text: var(--vp-c-text-1);--vp-custom-block-important-bg: var(--vp-c-important-soft);--vp-custom-block-important-code-bg: var(--vp-c-important-soft);--vp-custom-block-warning-border: transparent;--vp-custom-block-warning-text: var(--vp-c-text-1);--vp-custom-block-warning-bg: var(--vp-c-warning-soft);--vp-custom-block-warning-code-bg: var(--vp-c-warning-soft);--vp-custom-block-danger-border: transparent;--vp-custom-block-danger-text: var(--vp-c-text-1);--vp-custom-block-danger-bg: var(--vp-c-danger-soft);--vp-custom-block-danger-code-bg: var(--vp-c-danger-soft);--vp-custom-block-caution-border: transparent;--vp-custom-block-caution-text: var(--vp-c-text-1);--vp-custom-block-caution-bg: var(--vp-c-caution-soft);--vp-custom-block-caution-code-bg: var(--vp-c-caution-soft);--vp-custom-block-details-border: var(--vp-custom-block-info-border);--vp-custom-block-details-text: var(--vp-custom-block-info-text);--vp-custom-block-details-bg: var(--vp-custom-block-info-bg);--vp-custom-block-details-code-bg: var(--vp-custom-block-info-code-bg)}:root{--vp-input-border-color: var(--vp-c-border);--vp-input-bg-color: var(--vp-c-bg-alt);--vp-input-switch-bg-color: var(--vp-c-default-soft)}:root{--vp-nav-height: 64px;--vp-nav-bg-color: var(--vp-c-bg);--vp-nav-screen-bg-color: var(--vp-c-bg);--vp-nav-logo-height: 24px}.hide-nav{--vp-nav-height: 0px}.hide-nav .VPSidebar{--vp-nav-height: 22px}:root{--vp-local-nav-bg-color: var(--vp-c-bg)}:root{--vp-sidebar-width: 272px;--vp-sidebar-bg-color: var(--vp-c-bg-alt)}:root{--vp-backdrop-bg-color: rgba(0, 0, 0, .6)}:root{--vp-home-hero-name-color: var(--vp-c-brand-1);--vp-home-hero-name-background: transparent;--vp-home-hero-image-background-image: none;--vp-home-hero-image-filter: none}:root{--vp-badge-info-border: transparent;--vp-badge-info-text: var(--vp-c-text-2);--vp-badge-info-bg: var(--vp-c-default-soft);--vp-badge-tip-border: transparent;--vp-badge-tip-text: var(--vp-c-tip-1);--vp-badge-tip-bg: var(--vp-c-tip-soft);--vp-badge-warning-border: transparent;--vp-badge-warning-text: var(--vp-c-warning-1);--vp-badge-warning-bg: var(--vp-c-warning-soft);--vp-badge-danger-border: transparent;--vp-badge-danger-text: var(--vp-c-danger-1);--vp-badge-danger-bg: var(--vp-c-danger-soft)}:root{--vp-carbon-ads-text-color: var(--vp-c-text-1);--vp-carbon-ads-poweredby-color: var(--vp-c-text-2);--vp-carbon-ads-bg-color: var(--vp-c-bg-soft);--vp-carbon-ads-hover-text-color: var(--vp-c-brand-1);--vp-carbon-ads-hover-poweredby-color: var(--vp-c-text-1)}:root{--vp-local-search-bg: var(--vp-c-bg);--vp-local-search-result-bg: var(--vp-c-bg);--vp-local-search-result-border: var(--vp-c-divider);--vp-local-search-result-selected-bg: var(--vp-c-bg);--vp-local-search-result-selected-border: var(--vp-c-brand-1);--vp-local-search-highlight-bg: var(--vp-c-brand-1);--vp-local-search-highlight-text: var(--vp-c-neutral-inverse)}@media (prefers-reduced-motion: reduce){*,:before,:after{animation-delay:-1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important;background-attachment:initial!important;scroll-behavior:auto!important;transition-duration:0s!important;transition-delay:0s!important}}*,:before,:after{box-sizing:border-box}html{line-height:1.4;font-size:16px;-webkit-text-size-adjust:100%}html.dark{color-scheme:dark}body{margin:0;width:100%;min-width:320px;min-height:100vh;line-height:24px;font-family:var(--vp-font-family-base);font-size:16px;font-weight:400;color:var(--vp-c-text-1);background-color:var(--vp-c-bg);font-synthesis:style;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}main{display:block}h1,h2,h3,h4,h5,h6{margin:0;line-height:24px;font-size:16px;font-weight:400}p{margin:0}strong,b{font-weight:600}a,area,button,[role=button],input,label,select,summary,textarea{touch-action:manipulation}a{color:inherit;text-decoration:inherit}ol,ul{list-style:none;margin:0;padding:0}blockquote{margin:0}pre,code,kbd,samp{font-family:var(--vp-font-family-mono)}img,svg,video,canvas,audio,iframe,embed,object{display:block}figure{margin:0}img,video{max-width:100%;height:auto}button,input,optgroup,select,textarea{border:0;padding:0;line-height:inherit;color:inherit}button{padding:0;font-family:inherit;background-color:transparent;background-image:none}button:enabled,[role=button]:enabled{cursor:pointer}button:focus,button:focus-visible{outline:1px dotted;outline:4px auto -webkit-focus-ring-color}button:focus:not(:focus-visible){outline:none!important}input:focus,textarea:focus,select:focus{outline:none}table{border-collapse:collapse}input{background-color:transparent}input::-moz-placeholder,textarea::-moz-placeholder{color:var(--vp-c-text-3)}input::placeholder,textarea::placeholder{color:var(--vp-c-text-3)}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}textarea{resize:vertical}select{-webkit-appearance:none}fieldset{margin:0;padding:0}h1,h2,h3,h4,h5,h6,li,p{overflow-wrap:break-word}vite-error-overlay{z-index:9999}mjx-container{display:inline-block;margin:auto 2px -2px}mjx-container>svg{display:inline-block;margin:auto}[class^=vpi-],[class*=" vpi-"],.vp-icon{width:1em;height:1em}[class^=vpi-].bg,[class*=" vpi-"].bg,.vp-icon.bg{background-size:100% 100%;background-color:transparent}[class^=vpi-]:not(.bg),[class*=" vpi-"]:not(.bg),.vp-icon:not(.bg){-webkit-mask:var(--icon) no-repeat;mask:var(--icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit}.vpi-align-left{--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M21 6H3M15 12H3M17 18H3'/%3E%3C/svg%3E")}.vpi-arrow-right,.vpi-arrow-down,.vpi-arrow-left,.vpi-arrow-up{--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E")}.vpi-chevron-right,.vpi-chevron-down,.vpi-chevron-left,.vpi-chevron-up{--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E")}.vpi-chevron-down,.vpi-arrow-down{transform:rotate(90deg)}.vpi-chevron-left,.vpi-arrow-left{transform:rotate(180deg)}.vpi-chevron-up,.vpi-arrow-up{transform:rotate(-90deg)}.vpi-square-pen{--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M18.375 2.625a2.121 2.121 0 1 1 3 3L12 15l-4 1 1-4Z'/%3E%3C/svg%3E")}.vpi-plus{--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M12 5v14'/%3E%3C/svg%3E")}.vpi-sun{--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41'/%3E%3C/svg%3E")}.vpi-moon{--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z'/%3E%3C/svg%3E")}.vpi-more-horizontal{--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3Ccircle cx='19' cy='12' r='1'/%3E%3Ccircle cx='5' cy='12' r='1'/%3E%3C/svg%3E")}.vpi-languages{--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m5 8 6 6M4 14l6-6 2-3M2 5h12M7 2h1M22 22l-5-10-5 10M14 18h6'/%3E%3C/svg%3E")}.vpi-heart{--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z'/%3E%3C/svg%3E")}.vpi-search{--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E")}.vpi-layout-list{--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Crect width='7' height='7' x='3' y='3' rx='1'/%3E%3Crect width='7' height='7' x='3' y='14' rx='1'/%3E%3Cpath d='M14 4h7M14 9h7M14 15h7M14 20h7'/%3E%3C/svg%3E")}.vpi-delete{--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M20 5H9l-7 7 7 7h11a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2ZM18 9l-6 6M12 9l6 6'/%3E%3C/svg%3E")}.vpi-corner-down-left{--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m9 10-5 5 5 5'/%3E%3Cpath d='M20 4v7a4 4 0 0 1-4 4H4'/%3E%3C/svg%3E")}:root{--vp-icon-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='rgba(128,128,128,1)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3C/svg%3E");--vp-icon-copied: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='rgba(128,128,128,1)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Cpath d='m9 14 2 2 4-4'/%3E%3C/svg%3E")}.vpi-social-discord{--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418Z'/%3E%3C/svg%3E")}.vpi-social-facebook{--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z'/%3E%3C/svg%3E")}.vpi-social-github{--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")}.vpi-social-instagram{--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.03.084c-1.277.06-2.149.264-2.91.563a5.874 5.874 0 0 0-2.124 1.388 5.878 5.878 0 0 0-1.38 2.127C.321 4.926.12 5.8.064 7.076.008 8.354-.005 8.764.001 12.023c.007 3.259.021 3.667.083 4.947.061 1.277.264 2.149.563 2.911.308.789.72 1.457 1.388 2.123a5.872 5.872 0 0 0 2.129 1.38c.763.295 1.636.496 2.913.552 1.278.056 1.689.069 4.947.063 3.257-.007 3.668-.021 4.947-.082 1.28-.06 2.147-.265 2.91-.563a5.881 5.881 0 0 0 2.123-1.388 5.881 5.881 0 0 0 1.38-2.129c.295-.763.496-1.636.551-2.912.056-1.28.07-1.69.063-4.948-.006-3.258-.02-3.667-.081-4.947-.06-1.28-.264-2.148-.564-2.911a5.892 5.892 0 0 0-1.387-2.123 5.857 5.857 0 0 0-2.128-1.38C19.074.322 18.202.12 16.924.066 15.647.009 15.236-.006 11.977 0 8.718.008 8.31.021 7.03.084m.14 21.693c-1.17-.05-1.805-.245-2.228-.408a3.736 3.736 0 0 1-1.382-.895 3.695 3.695 0 0 1-.9-1.378c-.165-.423-.363-1.058-.417-2.228-.06-1.264-.072-1.644-.08-4.848-.006-3.204.006-3.583.061-4.848.05-1.169.246-1.805.408-2.228.216-.561.477-.96.895-1.382a3.705 3.705 0 0 1 1.379-.9c.423-.165 1.057-.361 2.227-.417 1.265-.06 1.644-.072 4.848-.08 3.203-.006 3.583.006 4.85.062 1.168.05 1.804.244 2.227.408.56.216.96.475 1.382.895.421.42.681.817.9 1.378.165.422.362 1.056.417 2.227.06 1.265.074 1.645.08 4.848.005 3.203-.006 3.583-.061 4.848-.051 1.17-.245 1.805-.408 2.23-.216.56-.477.96-.896 1.38a3.705 3.705 0 0 1-1.378.9c-.422.165-1.058.362-2.226.418-1.266.06-1.645.072-4.85.079-3.204.007-3.582-.006-4.848-.06m9.783-16.192a1.44 1.44 0 1 0 1.437-1.442 1.44 1.44 0 0 0-1.437 1.442M5.839 12.012a6.161 6.161 0 1 0 12.323-.024 6.162 6.162 0 0 0-12.323.024M8 12.008A4 4 0 1 1 12.008 16 4 4 0 0 1 8 12.008'/%3E%3C/svg%3E")}.vpi-social-linkedin{--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z'/%3E%3C/svg%3E")}.vpi-social-mastodon{--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38.265-.061.527-.132.786-.213.585-.184 1.27-.39 1.774-.753a.057.057 0 0 0 .023-.043v-1.809a.052.052 0 0 0-.02-.041.053.053 0 0 0-.046-.01 20.282 20.282 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.593 5.593 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422.038-.008.077-.015.11-.024 2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545zm-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.67 1.977v6.218H4.822V8.102c0-1.31.337-2.35 1.011-3.12.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164.675.77 1.012 1.81 1.012 3.12z'/%3E%3C/svg%3E")}.vpi-social-npm{--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z'/%3E%3C/svg%3E")}.vpi-social-slack{--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zm1.271 0a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zm0 1.271a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312zm10.122 2.521a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522V8.834zm-1.268 0a2.528 2.528 0 0 1-2.523 2.521 2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.165 0a2.528 2.528 0 0 1 2.523 2.522v6.312zm-2.523 10.122a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.52-2.522v-2.522h2.52zm0-1.268a2.527 2.527 0 0 1-2.52-2.523 2.526 2.526 0 0 1 2.52-2.52h6.313A2.527 2.527 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.523h-6.313z'/%3E%3C/svg%3E")}.vpi-social-twitter,.vpi-social-x{--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z'/%3E%3C/svg%3E")}.vpi-social-youtube{--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z'/%3E%3C/svg%3E")}.visually-hidden{position:absolute;width:1px;height:1px;white-space:nowrap;clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);overflow:hidden}.custom-block{border:1px solid transparent;border-radius:8px;padding:16px 16px 8px;line-height:24px;font-size:var(--vp-custom-block-font-size);color:var(--vp-c-text-2)}.custom-block.info{border-color:var(--vp-custom-block-info-border);color:var(--vp-custom-block-info-text);background-color:var(--vp-custom-block-info-bg)}.custom-block.info a,.custom-block.info code{color:var(--vp-c-brand-1)}.custom-block.info a:hover,.custom-block.info a:hover>code{color:var(--vp-c-brand-2)}.custom-block.info code{background-color:var(--vp-custom-block-info-code-bg)}.custom-block.note{border-color:var(--vp-custom-block-note-border);color:var(--vp-custom-block-note-text);background-color:var(--vp-custom-block-note-bg)}.custom-block.note a,.custom-block.note code{color:var(--vp-c-brand-1)}.custom-block.note a:hover,.custom-block.note a:hover>code{color:var(--vp-c-brand-2)}.custom-block.note code{background-color:var(--vp-custom-block-note-code-bg)}.custom-block.tip{border-color:var(--vp-custom-block-tip-border);color:var(--vp-custom-block-tip-text);background-color:var(--vp-custom-block-tip-bg)}.custom-block.tip a,.custom-block.tip code{color:var(--vp-c-tip-1)}.custom-block.tip a:hover,.custom-block.tip a:hover>code{color:var(--vp-c-tip-2)}.custom-block.tip code{background-color:var(--vp-custom-block-tip-code-bg)}.custom-block.important{border-color:var(--vp-custom-block-important-border);color:var(--vp-custom-block-important-text);background-color:var(--vp-custom-block-important-bg)}.custom-block.important a,.custom-block.important code{color:var(--vp-c-important-1)}.custom-block.important a:hover,.custom-block.important a:hover>code{color:var(--vp-c-important-2)}.custom-block.important code{background-color:var(--vp-custom-block-important-code-bg)}.custom-block.warning{border-color:var(--vp-custom-block-warning-border);color:var(--vp-custom-block-warning-text);background-color:var(--vp-custom-block-warning-bg)}.custom-block.warning a,.custom-block.warning code{color:var(--vp-c-warning-1)}.custom-block.warning a:hover,.custom-block.warning a:hover>code{color:var(--vp-c-warning-2)}.custom-block.warning code{background-color:var(--vp-custom-block-warning-code-bg)}.custom-block.danger{border-color:var(--vp-custom-block-danger-border);color:var(--vp-custom-block-danger-text);background-color:var(--vp-custom-block-danger-bg)}.custom-block.danger a,.custom-block.danger code{color:var(--vp-c-danger-1)}.custom-block.danger a:hover,.custom-block.danger a:hover>code{color:var(--vp-c-danger-2)}.custom-block.danger code{background-color:var(--vp-custom-block-danger-code-bg)}.custom-block.caution{border-color:var(--vp-custom-block-caution-border);color:var(--vp-custom-block-caution-text);background-color:var(--vp-custom-block-caution-bg)}.custom-block.caution a,.custom-block.caution code{color:var(--vp-c-caution-1)}.custom-block.caution a:hover,.custom-block.caution a:hover>code{color:var(--vp-c-caution-2)}.custom-block.caution code{background-color:var(--vp-custom-block-caution-code-bg)}.custom-block.details{border-color:var(--vp-custom-block-details-border);color:var(--vp-custom-block-details-text);background-color:var(--vp-custom-block-details-bg)}.custom-block.details a{color:var(--vp-c-brand-1)}.custom-block.details a:hover,.custom-block.details a:hover>code{color:var(--vp-c-brand-2)}.custom-block.details code{background-color:var(--vp-custom-block-details-code-bg)}.custom-block-title{font-weight:600}.custom-block p+p{margin:8px 0}.custom-block.details summary{margin:0 0 8px;font-weight:700;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.custom-block.details summary+p{margin:8px 0}.custom-block a{color:inherit;font-weight:600;text-decoration:underline;text-underline-offset:2px;transition:opacity .25s}.custom-block a:hover{opacity:.75}.custom-block code{font-size:var(--vp-custom-block-code-font-size)}.custom-block.custom-block th,.custom-block.custom-block blockquote>p{font-size:var(--vp-custom-block-font-size);color:inherit}.dark .vp-code span{color:var(--shiki-dark, inherit)}html:not(.dark) .vp-code span{color:var(--shiki-light, inherit)}.vp-code-group{margin-top:16px}.vp-code-group .tabs{position:relative;display:flex;margin-right:-24px;margin-left:-24px;padding:0 12px;background-color:var(--vp-code-tab-bg);overflow-x:auto;overflow-y:hidden;box-shadow:inset 0 -1px var(--vp-code-tab-divider)}@media (min-width: 640px){.vp-code-group .tabs{margin-right:0;margin-left:0;border-radius:8px 8px 0 0}}.vp-code-group .tabs input{position:fixed;opacity:0;pointer-events:none}.vp-code-group .tabs label{position:relative;display:inline-block;border-bottom:1px solid transparent;padding:0 12px;line-height:48px;font-size:14px;font-weight:500;color:var(--vp-code-tab-text-color);white-space:nowrap;cursor:pointer;transition:color .25s}.vp-code-group .tabs label:after{position:absolute;right:8px;bottom:-1px;left:8px;z-index:1;height:2px;border-radius:2px;content:"";background-color:transparent;transition:background-color .25s}.vp-code-group label:hover{color:var(--vp-code-tab-hover-text-color)}.vp-code-group input:checked+label{color:var(--vp-code-tab-active-text-color)}.vp-code-group input:checked+label:after{background-color:var(--vp-code-tab-active-bar-color)}.vp-code-group div[class*=language-],.vp-block{display:none;margin-top:0!important;border-top-left-radius:0!important;border-top-right-radius:0!important}.vp-code-group div[class*=language-].active,.vp-block.active{display:block}.vp-block{padding:20px 24px}.vp-doc h1,.vp-doc h2,.vp-doc h3,.vp-doc h4,.vp-doc h5,.vp-doc h6{position:relative;font-weight:600;outline:none}.vp-doc h1{letter-spacing:-.02em;line-height:40px;font-size:28px}.vp-doc h2{margin:48px 0 16px;border-top:1px solid var(--vp-c-divider);padding-top:24px;letter-spacing:-.02em;line-height:32px;font-size:24px}.vp-doc h3{margin:32px 0 0;letter-spacing:-.01em;line-height:28px;font-size:20px}.vp-doc .header-anchor{position:absolute;top:0;left:0;margin-left:-.87em;font-weight:500;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:0;text-decoration:none;transition:color .25s,opacity .25s}.vp-doc .header-anchor:before{content:var(--vp-header-anchor-symbol)}.vp-doc h1:hover .header-anchor,.vp-doc h1 .header-anchor:focus,.vp-doc h2:hover .header-anchor,.vp-doc h2 .header-anchor:focus,.vp-doc h3:hover .header-anchor,.vp-doc h3 .header-anchor:focus,.vp-doc h4:hover .header-anchor,.vp-doc h4 .header-anchor:focus,.vp-doc h5:hover .header-anchor,.vp-doc h5 .header-anchor:focus,.vp-doc h6:hover .header-anchor,.vp-doc h6 .header-anchor:focus{opacity:1}@media (min-width: 768px){.vp-doc h1{letter-spacing:-.02em;line-height:40px;font-size:32px}}.vp-doc h2 .header-anchor{top:24px}.vp-doc p,.vp-doc summary{margin:16px 0}.vp-doc p{line-height:28px}.vp-doc blockquote{margin:16px 0;border-left:2px solid var(--vp-c-divider);padding-left:16px;transition:border-color .5s}.vp-doc blockquote>p{margin:0;font-size:16px;color:var(--vp-c-text-2);transition:color .5s}.vp-doc a{font-weight:500;color:var(--vp-c-brand-1);text-decoration:underline;text-underline-offset:2px;transition:color .25s,opacity .25s}.vp-doc a:hover{color:var(--vp-c-brand-2)}.vp-doc strong{font-weight:600}.vp-doc ul,.vp-doc ol{padding-left:1.25rem;margin:16px 0}.vp-doc ul{list-style:disc}.vp-doc ol{list-style:decimal}.vp-doc li+li{margin-top:8px}.vp-doc li>ol,.vp-doc li>ul{margin:8px 0 0}.vp-doc table{display:block;border-collapse:collapse;margin:20px 0;overflow-x:auto}.vp-doc tr{background-color:var(--vp-c-bg);border-top:1px solid var(--vp-c-divider);transition:background-color .5s}.vp-doc tr:nth-child(2n){background-color:var(--vp-c-bg-soft)}.vp-doc th,.vp-doc td{border:1px solid var(--vp-c-divider);padding:8px 16px}.vp-doc th{text-align:left;font-size:14px;font-weight:600;color:var(--vp-c-text-2);background-color:var(--vp-c-bg-soft)}.vp-doc td{font-size:14px}.vp-doc hr{margin:16px 0;border:none;border-top:1px solid var(--vp-c-divider)}.vp-doc .custom-block{margin:16px 0}.vp-doc .custom-block p{margin:8px 0;line-height:24px}.vp-doc .custom-block p:first-child{margin:0}.vp-doc .custom-block div[class*=language-]{margin:8px 0;border-radius:8px}.vp-doc .custom-block div[class*=language-] code{font-weight:400;background-color:transparent}.vp-doc .custom-block .vp-code-group .tabs{margin:0;border-radius:8px 8px 0 0}.vp-doc :not(pre,h1,h2,h3,h4,h5,h6)>code{font-size:var(--vp-code-font-size);color:var(--vp-code-color)}.vp-doc :not(pre)>code{border-radius:4px;padding:3px 6px;background-color:var(--vp-code-bg);transition:color .25s,background-color .5s}.vp-doc a>code{color:var(--vp-code-link-color)}.vp-doc a:hover>code{color:var(--vp-code-link-hover-color)}.vp-doc h1>code,.vp-doc h2>code,.vp-doc h3>code{font-size:.9em}.vp-doc div[class*=language-],.vp-block{position:relative;margin:16px -24px;background-color:var(--vp-code-block-bg);overflow-x:auto;transition:background-color .5s}@media (min-width: 640px){.vp-doc div[class*=language-],.vp-block{border-radius:8px;margin:16px 0}}@media (max-width: 639px){.vp-doc li div[class*=language-]{border-radius:8px 0 0 8px}}.vp-doc div[class*=language-]+div[class*=language-],.vp-doc div[class$=-api]+div[class*=language-],.vp-doc div[class*=language-]+div[class$=-api]>div[class*=language-]{margin-top:-8px}.vp-doc [class*=language-] pre,.vp-doc [class*=language-] code{direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;hyphens:none}.vp-doc [class*=language-] pre{position:relative;z-index:1;margin:0;padding:20px 0;background:transparent;overflow-x:auto}.vp-doc [class*=language-] code{display:block;padding:0 24px;width:-moz-fit-content;width:fit-content;min-width:100%;line-height:var(--vp-code-line-height);font-size:var(--vp-code-font-size);color:var(--vp-code-block-color);transition:color .5s}.vp-doc [class*=language-] code .highlighted{background-color:var(--vp-code-line-highlight-color);transition:background-color .5s;margin:0 -24px;padding:0 24px;width:calc(100% + 48px);display:inline-block}.vp-doc [class*=language-] code .highlighted.error{background-color:var(--vp-code-line-error-color)}.vp-doc [class*=language-] code .highlighted.warning{background-color:var(--vp-code-line-warning-color)}.vp-doc [class*=language-] code .diff{transition:background-color .5s;margin:0 -24px;padding:0 24px;width:calc(100% + 48px);display:inline-block}.vp-doc [class*=language-] code .diff:before{position:absolute;left:10px}.vp-doc [class*=language-] .has-focused-lines .line:not(.has-focus){filter:blur(.095rem);opacity:.4;transition:filter .35s,opacity .35s}.vp-doc [class*=language-] .has-focused-lines .line:not(.has-focus){opacity:.7;transition:filter .35s,opacity .35s}.vp-doc [class*=language-]:hover .has-focused-lines .line:not(.has-focus){filter:blur(0);opacity:1}.vp-doc [class*=language-] code .diff.remove{background-color:var(--vp-code-line-diff-remove-color);opacity:.7}.vp-doc [class*=language-] code .diff.remove:before{content:"-";color:var(--vp-code-line-diff-remove-symbol-color)}.vp-doc [class*=language-] code .diff.add{background-color:var(--vp-code-line-diff-add-color)}.vp-doc [class*=language-] code .diff.add:before{content:"+";color:var(--vp-code-line-diff-add-symbol-color)}.vp-doc div[class*=language-].line-numbers-mode{padding-left:32px}.vp-doc .line-numbers-wrapper{position:absolute;top:0;bottom:0;left:0;z-index:3;border-right:1px solid var(--vp-code-block-divider-color);padding-top:20px;width:32px;text-align:center;font-family:var(--vp-font-family-mono);line-height:var(--vp-code-line-height);font-size:var(--vp-code-font-size);color:var(--vp-code-line-number-color);transition:border-color .5s,color .5s}.vp-doc [class*=language-]>button.copy{direction:ltr;position:absolute;top:12px;right:12px;z-index:3;border:1px solid var(--vp-code-copy-code-border-color);border-radius:4px;width:40px;height:40px;background-color:var(--vp-code-copy-code-bg);opacity:0;cursor:pointer;background-image:var(--vp-icon-copy);background-position:50%;background-size:20px;background-repeat:no-repeat;transition:border-color .25s,background-color .25s,opacity .25s}.vp-doc [class*=language-]:hover>button.copy,.vp-doc [class*=language-]>button.copy:focus{opacity:1}.vp-doc [class*=language-]>button.copy:hover,.vp-doc [class*=language-]>button.copy.copied{border-color:var(--vp-code-copy-code-hover-border-color);background-color:var(--vp-code-copy-code-hover-bg)}.vp-doc [class*=language-]>button.copy.copied,.vp-doc [class*=language-]>button.copy:hover.copied{border-radius:0 4px 4px 0;background-color:var(--vp-code-copy-code-hover-bg);background-image:var(--vp-icon-copied)}.vp-doc [class*=language-]>button.copy.copied:before,.vp-doc [class*=language-]>button.copy:hover.copied:before{position:relative;top:-1px;transform:translate(calc(-100% - 1px));display:flex;justify-content:center;align-items:center;border:1px solid var(--vp-code-copy-code-hover-border-color);border-right:0;border-radius:4px 0 0 4px;padding:0 10px;width:-moz-fit-content;width:fit-content;height:40px;text-align:center;font-size:12px;font-weight:500;color:var(--vp-code-copy-code-active-text);background-color:var(--vp-code-copy-code-hover-bg);white-space:nowrap;content:var(--vp-code-copy-copied-text-content)}.vp-doc [class*=language-]>span.lang{position:absolute;top:2px;right:8px;z-index:2;font-size:12px;font-weight:500;color:var(--vp-code-lang-color);transition:color .4s,opacity .4s}.vp-doc [class*=language-]:hover>button.copy+span.lang,.vp-doc [class*=language-]>button.copy:focus+span.lang{opacity:0}.vp-doc .VPTeamMembers{margin-top:24px}.vp-doc .VPTeamMembers.small.count-1 .container{margin:0!important;max-width:calc((100% - 24px)/2)!important}.vp-doc .VPTeamMembers.small.count-2 .container,.vp-doc .VPTeamMembers.small.count-3 .container{max-width:100%!important}.vp-doc .VPTeamMembers.medium.count-1 .container{margin:0!important;max-width:calc((100% - 24px)/2)!important}:is(.vp-external-link-icon,.vp-doc a[href*="://"],.vp-doc a[target=_blank]):not(.no-icon):after{display:inline-block;margin-top:-1px;margin-left:4px;width:11px;height:11px;background:currentColor;color:var(--vp-c-text-3);flex-shrink:0;--icon: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' %3E%3Cpath d='M0 0h24v24H0V0z' fill='none' /%3E%3Cpath d='M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z' /%3E%3C/svg%3E");-webkit-mask-image:var(--icon);mask-image:var(--icon)}.vp-external-link-icon:after{content:""}.external-link-icon-enabled :is(.vp-doc a[href*="://"],.vp-doc a[target=_blank]):after{content:"";color:currentColor}.vp-sponsor{border-radius:16px;overflow:hidden}.vp-sponsor.aside{border-radius:12px}.vp-sponsor-section+.vp-sponsor-section{margin-top:4px}.vp-sponsor-tier{margin:0 0 4px!important;text-align:center;letter-spacing:1px!important;line-height:24px;width:100%;font-weight:600;color:var(--vp-c-text-2);background-color:var(--vp-c-bg-soft)}.vp-sponsor.normal .vp-sponsor-tier{padding:13px 0 11px;font-size:14px}.vp-sponsor.aside .vp-sponsor-tier{padding:9px 0 7px;font-size:12px}.vp-sponsor-grid+.vp-sponsor-tier{margin-top:4px}.vp-sponsor-grid{display:flex;flex-wrap:wrap;gap:4px}.vp-sponsor-grid.xmini .vp-sponsor-grid-link{height:64px}.vp-sponsor-grid.xmini .vp-sponsor-grid-image{max-width:64px;max-height:22px}.vp-sponsor-grid.mini .vp-sponsor-grid-link{height:72px}.vp-sponsor-grid.mini .vp-sponsor-grid-image{max-width:96px;max-height:24px}.vp-sponsor-grid.small .vp-sponsor-grid-link{height:96px}.vp-sponsor-grid.small .vp-sponsor-grid-image{max-width:96px;max-height:24px}.vp-sponsor-grid.medium .vp-sponsor-grid-link{height:112px}.vp-sponsor-grid.medium .vp-sponsor-grid-image{max-width:120px;max-height:36px}.vp-sponsor-grid.big .vp-sponsor-grid-link{height:184px}.vp-sponsor-grid.big .vp-sponsor-grid-image{max-width:192px;max-height:56px}.vp-sponsor-grid[data-vp-grid="2"] .vp-sponsor-grid-item{width:calc((100% - 4px)/2)}.vp-sponsor-grid[data-vp-grid="3"] .vp-sponsor-grid-item{width:calc((100% - 4px * 2) / 3)}.vp-sponsor-grid[data-vp-grid="4"] .vp-sponsor-grid-item{width:calc((100% - 12px)/4)}.vp-sponsor-grid[data-vp-grid="5"] .vp-sponsor-grid-item{width:calc((100% - 16px)/5)}.vp-sponsor-grid[data-vp-grid="6"] .vp-sponsor-grid-item{width:calc((100% - 4px * 5) / 6)}.vp-sponsor-grid-item{flex-shrink:0;width:100%;background-color:var(--vp-c-bg-soft);transition:background-color .25s}.vp-sponsor-grid-item:hover{background-color:var(--vp-c-default-soft)}.vp-sponsor-grid-item:hover .vp-sponsor-grid-image{filter:grayscale(0) invert(0)}.vp-sponsor-grid-item.empty:hover{background-color:var(--vp-c-bg-soft)}.dark .vp-sponsor-grid-item:hover{background-color:var(--vp-c-white)}.dark .vp-sponsor-grid-item.empty:hover{background-color:var(--vp-c-bg-soft)}.vp-sponsor-grid-link{display:flex}.vp-sponsor-grid-box{display:flex;justify-content:center;align-items:center;width:100%}.vp-sponsor-grid-image{max-width:100%;filter:grayscale(1);transition:filter .25s}.dark .vp-sponsor-grid-image{filter:grayscale(1) invert(1)}.VPBadge{display:inline-block;margin-left:2px;border:1px solid transparent;border-radius:12px;padding:0 10px;line-height:22px;font-size:12px;font-weight:500;transform:translateY(-2px)}.VPBadge.small{padding:0 6px;line-height:18px;font-size:10px;transform:translateY(-8px)}.VPDocFooter .VPBadge{display:none}.vp-doc h1>.VPBadge{margin-top:4px;vertical-align:top}.vp-doc h2>.VPBadge{margin-top:3px;padding:0 8px;vertical-align:top}.vp-doc h3>.VPBadge{vertical-align:middle}.vp-doc h4>.VPBadge,.vp-doc h5>.VPBadge,.vp-doc h6>.VPBadge{vertical-align:middle;line-height:18px}.VPBadge.info{border-color:var(--vp-badge-info-border);color:var(--vp-badge-info-text);background-color:var(--vp-badge-info-bg)}.VPBadge.tip{border-color:var(--vp-badge-tip-border);color:var(--vp-badge-tip-text);background-color:var(--vp-badge-tip-bg)}.VPBadge.warning{border-color:var(--vp-badge-warning-border);color:var(--vp-badge-warning-text);background-color:var(--vp-badge-warning-bg)}.VPBadge.danger{border-color:var(--vp-badge-danger-border);color:var(--vp-badge-danger-text);background-color:var(--vp-badge-danger-bg)}.VPBackdrop[data-v-c79a1216]{position:fixed;top:0;right:0;bottom:0;left:0;z-index:var(--vp-z-index-backdrop);background:var(--vp-backdrop-bg-color);transition:opacity .5s}.VPBackdrop.fade-enter-from[data-v-c79a1216],.VPBackdrop.fade-leave-to[data-v-c79a1216]{opacity:0}.VPBackdrop.fade-leave-active[data-v-c79a1216]{transition-duration:.25s}@media (min-width: 1280px){.VPBackdrop[data-v-c79a1216]{display:none}}.NotFound[data-v-f87ff6e4]{padding:64px 24px 96px;text-align:center}@media (min-width: 768px){.NotFound[data-v-f87ff6e4]{padding:96px 32px 168px}}.code[data-v-f87ff6e4]{line-height:64px;font-size:64px;font-weight:600}.title[data-v-f87ff6e4]{padding-top:12px;letter-spacing:2px;line-height:20px;font-size:20px;font-weight:700}.divider[data-v-f87ff6e4]{margin:24px auto 18px;width:64px;height:1px;background-color:var(--vp-c-divider)}.quote[data-v-f87ff6e4]{margin:0 auto;max-width:256px;font-size:14px;font-weight:500;color:var(--vp-c-text-2)}.action[data-v-f87ff6e4]{padding-top:20px}.link[data-v-f87ff6e4]{display:inline-block;border:1px solid var(--vp-c-brand-1);border-radius:16px;padding:3px 16px;font-size:14px;font-weight:500;color:var(--vp-c-brand-1);transition:border-color .25s,color .25s}.link[data-v-f87ff6e4]:hover{border-color:var(--vp-c-brand-2);color:var(--vp-c-brand-2)}.root[data-v-b933a997]{position:relative;z-index:1}.nested[data-v-b933a997]{padding-right:16px;padding-left:16px}.outline-link[data-v-b933a997]{display:block;line-height:32px;font-size:14px;font-weight:400;color:var(--vp-c-text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .5s}.outline-link[data-v-b933a997]:hover,.outline-link.active[data-v-b933a997]{color:var(--vp-c-text-1);transition:color .25s}.outline-link.nested[data-v-b933a997]{padding-left:13px}.VPDocAsideOutline[data-v-935f8a84]{display:none}.VPDocAsideOutline.has-outline[data-v-935f8a84]{display:block}.content[data-v-935f8a84]{position:relative;border-left:1px solid var(--vp-c-divider);padding-left:16px;font-size:13px;font-weight:500}.outline-marker[data-v-935f8a84]{position:absolute;top:32px;left:-1px;z-index:0;opacity:0;width:2px;border-radius:2px;height:18px;background-color:var(--vp-c-brand-1);transition:top .25s cubic-bezier(0,1,.5,1),background-color .5s,opacity .25s}.outline-title[data-v-935f8a84]{line-height:32px;font-size:14px;font-weight:600}.VPDocAside[data-v-3f215769]{display:flex;flex-direction:column;flex-grow:1}.spacer[data-v-3f215769]{flex-grow:1}.VPDocAside[data-v-3f215769] .spacer+.VPDocAsideSponsors,.VPDocAside[data-v-3f215769] .spacer+.VPDocAsideCarbonAds{margin-top:24px}.VPDocAside[data-v-3f215769] .VPDocAsideSponsors+.VPDocAsideCarbonAds{margin-top:16px}.VPLastUpdated[data-v-7e05ebdb]{line-height:24px;font-size:14px;font-weight:500;color:var(--vp-c-text-2)}@media (min-width: 640px){.VPLastUpdated[data-v-7e05ebdb]{line-height:32px;font-size:14px;font-weight:500}}.VPDocFooter[data-v-09de1c0f]{margin-top:64px}.edit-info[data-v-09de1c0f]{padding-bottom:18px}@media (min-width: 640px){.edit-info[data-v-09de1c0f]{display:flex;justify-content:space-between;align-items:center;padding-bottom:14px}}.edit-link-button[data-v-09de1c0f]{display:flex;align-items:center;border:0;line-height:32px;font-size:14px;font-weight:500;color:var(--vp-c-brand-1);transition:color .25s}.edit-link-button[data-v-09de1c0f]:hover{color:var(--vp-c-brand-2)}.edit-link-icon[data-v-09de1c0f]{margin-right:8px}.prev-next[data-v-09de1c0f]{border-top:1px solid var(--vp-c-divider);padding-top:24px;display:grid;grid-row-gap:8px}@media (min-width: 640px){.prev-next[data-v-09de1c0f]{grid-template-columns:repeat(2,1fr);grid-column-gap:16px}}.pager-link[data-v-09de1c0f]{display:block;border:1px solid var(--vp-c-divider);border-radius:8px;padding:11px 16px 13px;width:100%;height:100%;transition:border-color .25s}.pager-link[data-v-09de1c0f]:hover{border-color:var(--vp-c-brand-1)}.pager-link.next[data-v-09de1c0f]{margin-left:auto;text-align:right}.desc[data-v-09de1c0f]{display:block;line-height:20px;font-size:12px;font-weight:500;color:var(--vp-c-text-2)}.title[data-v-09de1c0f]{display:block;line-height:20px;font-size:14px;font-weight:500;color:var(--vp-c-brand-1);transition:color .25s}.VPDoc[data-v-39a288b8]{padding:32px 24px 96px;width:100%}@media (min-width: 768px){.VPDoc[data-v-39a288b8]{padding:48px 32px 128px}}@media (min-width: 960px){.VPDoc[data-v-39a288b8]{padding:48px 32px 0}.VPDoc:not(.has-sidebar) .container[data-v-39a288b8]{display:flex;justify-content:center;max-width:992px}.VPDoc:not(.has-sidebar) .content[data-v-39a288b8]{max-width:752px}}@media (min-width: 1280px){.VPDoc .container[data-v-39a288b8]{display:flex;justify-content:center}.VPDoc .aside[data-v-39a288b8]{display:block}}@media (min-width: 1440px){.VPDoc:not(.has-sidebar) .content[data-v-39a288b8]{max-width:784px}.VPDoc:not(.has-sidebar) .container[data-v-39a288b8]{max-width:1104px}}.container[data-v-39a288b8]{margin:0 auto;width:100%}.aside[data-v-39a288b8]{position:relative;display:none;order:2;flex-grow:1;padding-left:32px;width:100%;max-width:256px}.left-aside[data-v-39a288b8]{order:1;padding-left:unset;padding-right:32px}.aside-container[data-v-39a288b8]{position:fixed;top:0;padding-top:calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + var(--vp-doc-top-height, 0px) + 48px);width:224px;height:100vh;overflow-x:hidden;overflow-y:auto;scrollbar-width:none}.aside-container[data-v-39a288b8]::-webkit-scrollbar{display:none}.aside-curtain[data-v-39a288b8]{position:fixed;bottom:0;z-index:10;width:224px;height:32px;background:linear-gradient(transparent,var(--vp-c-bg) 70%)}.aside-content[data-v-39a288b8]{display:flex;flex-direction:column;min-height:calc(100vh - (var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 48px));padding-bottom:32px}.content[data-v-39a288b8]{position:relative;margin:0 auto;width:100%}@media (min-width: 960px){.content[data-v-39a288b8]{padding:0 32px 128px}}@media (min-width: 1280px){.content[data-v-39a288b8]{order:1;margin:0;min-width:640px}}.content-container[data-v-39a288b8]{margin:0 auto}.VPDoc.has-aside .content-container[data-v-39a288b8]{max-width:688px}.VPButton[data-v-cad61b99]{display:inline-block;border:1px solid transparent;text-align:center;font-weight:600;white-space:nowrap;transition:color .25s,border-color .25s,background-color .25s}.VPButton[data-v-cad61b99]:active{transition:color .1s,border-color .1s,background-color .1s}.VPButton.medium[data-v-cad61b99]{border-radius:20px;padding:0 20px;line-height:38px;font-size:14px}.VPButton.big[data-v-cad61b99]{border-radius:24px;padding:0 24px;line-height:46px;font-size:16px}.VPButton.brand[data-v-cad61b99]{border-color:var(--vp-button-brand-border);color:var(--vp-button-brand-text);background-color:var(--vp-button-brand-bg)}.VPButton.brand[data-v-cad61b99]:hover{border-color:var(--vp-button-brand-hover-border);color:var(--vp-button-brand-hover-text);background-color:var(--vp-button-brand-hover-bg)}.VPButton.brand[data-v-cad61b99]:active{border-color:var(--vp-button-brand-active-border);color:var(--vp-button-brand-active-text);background-color:var(--vp-button-brand-active-bg)}.VPButton.alt[data-v-cad61b99]{border-color:var(--vp-button-alt-border);color:var(--vp-button-alt-text);background-color:var(--vp-button-alt-bg)}.VPButton.alt[data-v-cad61b99]:hover{border-color:var(--vp-button-alt-hover-border);color:var(--vp-button-alt-hover-text);background-color:var(--vp-button-alt-hover-bg)}.VPButton.alt[data-v-cad61b99]:active{border-color:var(--vp-button-alt-active-border);color:var(--vp-button-alt-active-text);background-color:var(--vp-button-alt-active-bg)}.VPButton.sponsor[data-v-cad61b99]{border-color:var(--vp-button-sponsor-border);color:var(--vp-button-sponsor-text);background-color:var(--vp-button-sponsor-bg)}.VPButton.sponsor[data-v-cad61b99]:hover{border-color:var(--vp-button-sponsor-hover-border);color:var(--vp-button-sponsor-hover-text);background-color:var(--vp-button-sponsor-hover-bg)}.VPButton.sponsor[data-v-cad61b99]:active{border-color:var(--vp-button-sponsor-active-border);color:var(--vp-button-sponsor-active-text);background-color:var(--vp-button-sponsor-active-bg)}html:not(.dark) .VPImage.dark[data-v-8b020169]{display:none}.dark .VPImage.light[data-v-8b020169]{display:none}.VPHero[data-v-303bb580]{margin-top:calc((var(--vp-nav-height) + var(--vp-layout-top-height, 0px)) * -1);padding:calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 48px) 24px 48px}@media (min-width: 640px){.VPHero[data-v-303bb580]{padding:calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 80px) 48px 64px}}@media (min-width: 960px){.VPHero[data-v-303bb580]{padding:calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 80px) 64px 64px}}.container[data-v-303bb580]{display:flex;flex-direction:column;margin:0 auto;max-width:1152px}@media (min-width: 960px){.container[data-v-303bb580]{flex-direction:row}}.main[data-v-303bb580]{position:relative;z-index:10;order:2;flex-grow:1;flex-shrink:0}.VPHero.has-image .container[data-v-303bb580]{text-align:center}@media (min-width: 960px){.VPHero.has-image .container[data-v-303bb580]{text-align:left}}@media (min-width: 960px){.main[data-v-303bb580]{order:1;width:calc((100% / 3) * 2)}.VPHero.has-image .main[data-v-303bb580]{max-width:592px}}.name[data-v-303bb580],.text[data-v-303bb580]{max-width:392px;letter-spacing:-.4px;line-height:40px;font-size:32px;font-weight:700;white-space:pre-wrap}.VPHero.has-image .name[data-v-303bb580],.VPHero.has-image .text[data-v-303bb580]{margin:0 auto}.name[data-v-303bb580]{color:var(--vp-home-hero-name-color)}.clip[data-v-303bb580]{background:var(--vp-home-hero-name-background);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:var(--vp-home-hero-name-color)}@media (min-width: 640px){.name[data-v-303bb580],.text[data-v-303bb580]{max-width:576px;line-height:56px;font-size:48px}}@media (min-width: 960px){.name[data-v-303bb580],.text[data-v-303bb580]{line-height:64px;font-size:56px}.VPHero.has-image .name[data-v-303bb580],.VPHero.has-image .text[data-v-303bb580]{margin:0}}.tagline[data-v-303bb580]{padding-top:8px;max-width:392px;line-height:28px;font-size:18px;font-weight:500;white-space:pre-wrap;color:var(--vp-c-text-2)}.VPHero.has-image .tagline[data-v-303bb580]{margin:0 auto}@media (min-width: 640px){.tagline[data-v-303bb580]{padding-top:12px;max-width:576px;line-height:32px;font-size:20px}}@media (min-width: 960px){.tagline[data-v-303bb580]{line-height:36px;font-size:24px}.VPHero.has-image .tagline[data-v-303bb580]{margin:0}}.actions[data-v-303bb580]{display:flex;flex-wrap:wrap;margin:-6px;padding-top:24px}.VPHero.has-image .actions[data-v-303bb580]{justify-content:center}@media (min-width: 640px){.actions[data-v-303bb580]{padding-top:32px}}@media (min-width: 960px){.VPHero.has-image .actions[data-v-303bb580]{justify-content:flex-start}}.action[data-v-303bb580]{flex-shrink:0;padding:6px}.image[data-v-303bb580]{order:1;margin:-76px -24px -48px}@media (min-width: 640px){.image[data-v-303bb580]{margin:-108px -24px -48px}}@media (min-width: 960px){.image[data-v-303bb580]{flex-grow:1;order:2;margin:0;min-height:100%}}.image-container[data-v-303bb580]{position:relative;margin:0 auto;width:320px;height:320px}@media (min-width: 640px){.image-container[data-v-303bb580]{width:392px;height:392px}}@media (min-width: 960px){.image-container[data-v-303bb580]{display:flex;justify-content:center;align-items:center;width:100%;height:100%;transform:translate(-32px,-32px)}}.image-bg[data-v-303bb580]{position:absolute;top:50%;left:50%;border-radius:50%;width:192px;height:192px;background-image:var(--vp-home-hero-image-background-image);filter:var(--vp-home-hero-image-filter);transform:translate(-50%,-50%)}@media (min-width: 640px){.image-bg[data-v-303bb580]{width:256px;height:256px}}@media (min-width: 960px){.image-bg[data-v-303bb580]{width:320px;height:320px}}[data-v-303bb580] .image-src{position:absolute;top:50%;left:50%;max-width:192px;max-height:192px;transform:translate(-50%,-50%)}@media (min-width: 640px){[data-v-303bb580] .image-src{max-width:256px;max-height:256px}}@media (min-width: 960px){[data-v-303bb580] .image-src{max-width:320px;max-height:320px}}.VPFeature[data-v-a3976bdc]{display:block;border:1px solid var(--vp-c-bg-soft);border-radius:12px;height:100%;background-color:var(--vp-c-bg-soft);transition:border-color .25s,background-color .25s}.VPFeature.link[data-v-a3976bdc]:hover{border-color:var(--vp-c-brand-1)}.box[data-v-a3976bdc]{display:flex;flex-direction:column;padding:24px;height:100%}.box[data-v-a3976bdc]>.VPImage{margin-bottom:20px}.icon[data-v-a3976bdc]{display:flex;justify-content:center;align-items:center;margin-bottom:20px;border-radius:6px;background-color:var(--vp-c-default-soft);width:48px;height:48px;font-size:24px;transition:background-color .25s}.title[data-v-a3976bdc]{line-height:24px;font-size:16px;font-weight:600}.details[data-v-a3976bdc]{flex-grow:1;padding-top:8px;line-height:24px;font-size:14px;font-weight:500;color:var(--vp-c-text-2)}.link-text[data-v-a3976bdc]{padding-top:8px}.link-text-value[data-v-a3976bdc]{display:flex;align-items:center;font-size:14px;font-weight:500;color:var(--vp-c-brand-1)}.link-text-icon[data-v-a3976bdc]{margin-left:6px}.VPFeatures[data-v-a6181336]{position:relative;padding:0 24px}@media (min-width: 640px){.VPFeatures[data-v-a6181336]{padding:0 48px}}@media (min-width: 960px){.VPFeatures[data-v-a6181336]{padding:0 64px}}.container[data-v-a6181336]{margin:0 auto;max-width:1152px}.items[data-v-a6181336]{display:flex;flex-wrap:wrap;margin:-8px}.item[data-v-a6181336]{padding:8px;width:100%}@media (min-width: 640px){.item.grid-2[data-v-a6181336],.item.grid-4[data-v-a6181336],.item.grid-6[data-v-a6181336]{width:50%}}@media (min-width: 768px){.item.grid-2[data-v-a6181336],.item.grid-4[data-v-a6181336]{width:50%}.item.grid-3[data-v-a6181336],.item.grid-6[data-v-a6181336]{width:calc(100% / 3)}}@media (min-width: 960px){.item.grid-4[data-v-a6181336]{width:25%}}.container[data-v-82d4af08]{margin:auto;width:100%;max-width:1280px;padding:0 24px}@media (min-width: 640px){.container[data-v-82d4af08]{padding:0 48px}}@media (min-width: 960px){.container[data-v-82d4af08]{width:100%;padding:0 64px}}.vp-doc[data-v-82d4af08] .VPHomeSponsors,.vp-doc[data-v-82d4af08] .VPTeamPage{margin-left:var(--vp-offset, calc(50% - 50vw) );margin-right:var(--vp-offset, calc(50% - 50vw) )}.vp-doc[data-v-82d4af08] .VPHomeSponsors h2{border-top:none;letter-spacing:normal}.vp-doc[data-v-82d4af08] .VPHomeSponsors a,.vp-doc[data-v-82d4af08] .VPTeamPage a{text-decoration:none}.VPHome[data-v-686f80a6]{margin-bottom:96px}@media (min-width: 768px){.VPHome[data-v-686f80a6]{margin-bottom:128px}}.VPContent[data-v-1428d186]{flex-grow:1;flex-shrink:0;margin:var(--vp-layout-top-height, 0px) auto 0;width:100%}.VPContent.is-home[data-v-1428d186]{width:100%;max-width:100%}.VPContent.has-sidebar[data-v-1428d186]{margin:0}@media (min-width: 960px){.VPContent[data-v-1428d186]{padding-top:var(--vp-nav-height)}.VPContent.has-sidebar[data-v-1428d186]{margin:var(--vp-layout-top-height, 0px) 0 0;padding-left:var(--vp-sidebar-width)}}@media (min-width: 1440px){.VPContent.has-sidebar[data-v-1428d186]{padding-right:calc((100vw - var(--vp-layout-max-width)) / 2);padding-left:calc((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width))}}.VPFooter[data-v-e315a0ad]{position:relative;z-index:var(--vp-z-index-footer);border-top:1px solid var(--vp-c-gutter);padding:32px 24px;background-color:var(--vp-c-bg)}.VPFooter.has-sidebar[data-v-e315a0ad]{display:none}.VPFooter[data-v-e315a0ad] a{text-decoration-line:underline;text-underline-offset:2px;transition:color .25s}.VPFooter[data-v-e315a0ad] a:hover{color:var(--vp-c-text-1)}@media (min-width: 768px){.VPFooter[data-v-e315a0ad]{padding:32px}}.container[data-v-e315a0ad]{margin:0 auto;max-width:var(--vp-layout-max-width);text-align:center}.message[data-v-e315a0ad],.copyright[data-v-e315a0ad]{line-height:24px;font-size:14px;font-weight:500;color:var(--vp-c-text-2)}.VPLocalNavOutlineDropdown[data-v-d2ecc192]{padding:12px 20px 11px}@media (min-width: 960px){.VPLocalNavOutlineDropdown[data-v-d2ecc192]{padding:12px 36px 11px}}.VPLocalNavOutlineDropdown button[data-v-d2ecc192]{display:block;font-size:12px;font-weight:500;line-height:24px;color:var(--vp-c-text-2);transition:color .5s;position:relative}.VPLocalNavOutlineDropdown button[data-v-d2ecc192]:hover{color:var(--vp-c-text-1);transition:color .25s}.VPLocalNavOutlineDropdown button.open[data-v-d2ecc192]{color:var(--vp-c-text-1)}.icon[data-v-d2ecc192]{display:inline-block;vertical-align:middle;margin-left:2px;font-size:14px;transform:rotate(0);transition:transform .25s}@media (min-width: 960px){.VPLocalNavOutlineDropdown button[data-v-d2ecc192]{font-size:14px}.icon[data-v-d2ecc192]{font-size:16px}}.open>.icon[data-v-d2ecc192]{transform:rotate(90deg)}.items[data-v-d2ecc192]{position:absolute;top:40px;right:16px;left:16px;display:grid;gap:1px;border:1px solid var(--vp-c-border);border-radius:8px;background-color:var(--vp-c-gutter);max-height:calc(var(--vp-vh, 100vh) - 86px);overflow:hidden auto;box-shadow:var(--vp-shadow-3)}@media (min-width: 960px){.items[data-v-d2ecc192]{right:auto;left:calc(var(--vp-sidebar-width) + 32px);width:320px}}.header[data-v-d2ecc192]{background-color:var(--vp-c-bg-soft)}.top-link[data-v-d2ecc192]{display:block;padding:0 16px;line-height:48px;font-size:14px;font-weight:500;color:var(--vp-c-brand-1)}.outline[data-v-d2ecc192]{padding:8px 0;background-color:var(--vp-c-bg-soft)}.flyout-enter-active[data-v-d2ecc192]{transition:all .2s ease-out}.flyout-leave-active[data-v-d2ecc192]{transition:all .15s ease-in}.flyout-enter-from[data-v-d2ecc192],.flyout-leave-to[data-v-d2ecc192]{opacity:0;transform:translateY(-16px)}.VPLocalNav[data-v-a6f0e41e]{position:sticky;top:0;left:0;z-index:var(--vp-z-index-local-nav);border-bottom:1px solid var(--vp-c-gutter);padding-top:var(--vp-layout-top-height, 0px);width:100%;background-color:var(--vp-local-nav-bg-color)}.VPLocalNav.fixed[data-v-a6f0e41e]{position:fixed}@media (min-width: 960px){.VPLocalNav[data-v-a6f0e41e]{top:var(--vp-nav-height)}.VPLocalNav.has-sidebar[data-v-a6f0e41e]{padding-left:var(--vp-sidebar-width)}.VPLocalNav.empty[data-v-a6f0e41e]{display:none}}@media (min-width: 1280px){.VPLocalNav[data-v-a6f0e41e]{display:none}}@media (min-width: 1440px){.VPLocalNav.has-sidebar[data-v-a6f0e41e]{padding-left:calc((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width))}}.container[data-v-a6f0e41e]{display:flex;justify-content:space-between;align-items:center}.menu[data-v-a6f0e41e]{display:flex;align-items:center;padding:12px 24px 11px;line-height:24px;font-size:12px;font-weight:500;color:var(--vp-c-text-2);transition:color .5s}.menu[data-v-a6f0e41e]:hover{color:var(--vp-c-text-1);transition:color .25s}@media (min-width: 768px){.menu[data-v-a6f0e41e]{padding:0 32px}}@media (min-width: 960px){.menu[data-v-a6f0e41e]{display:none}}.menu-icon[data-v-a6f0e41e]{margin-right:8px;font-size:14px}.VPOutlineDropdown[data-v-a6f0e41e]{padding:12px 24px 11px}@media (min-width: 768px){.VPOutlineDropdown[data-v-a6f0e41e]{padding:12px 32px 11px}}.VPSwitch[data-v-1d5665e3]{position:relative;border-radius:11px;display:block;width:40px;height:22px;flex-shrink:0;border:1px solid var(--vp-input-border-color);background-color:var(--vp-input-switch-bg-color);transition:border-color .25s!important}.VPSwitch[data-v-1d5665e3]:hover{border-color:var(--vp-c-brand-1)}.check[data-v-1d5665e3]{position:absolute;top:1px;left:1px;width:18px;height:18px;border-radius:50%;background-color:var(--vp-c-neutral-inverse);box-shadow:var(--vp-shadow-1);transition:transform .25s!important}.icon[data-v-1d5665e3]{position:relative;display:block;width:18px;height:18px;border-radius:50%;overflow:hidden}.icon[data-v-1d5665e3] [class^=vpi-]{position:absolute;top:3px;left:3px;width:12px;height:12px;color:var(--vp-c-text-2)}.dark .icon[data-v-1d5665e3] [class^=vpi-]{color:var(--vp-c-text-1);transition:opacity .25s!important}.sun[data-v-d1f28634]{opacity:1}.moon[data-v-d1f28634],.dark .sun[data-v-d1f28634]{opacity:0}.dark .moon[data-v-d1f28634]{opacity:1}.dark .VPSwitchAppearance[data-v-d1f28634] .check{transform:translate(18px)}.VPNavBarAppearance[data-v-e6aabb21]{display:none}@media (min-width: 1280px){.VPNavBarAppearance[data-v-e6aabb21]{display:flex;align-items:center}}.VPMenuGroup+.VPMenuLink[data-v-43f1e123]{margin:12px -12px 0;border-top:1px solid var(--vp-c-divider);padding:12px 12px 0}.link[data-v-43f1e123]{display:block;border-radius:6px;padding:0 12px;line-height:32px;font-size:14px;font-weight:500;color:var(--vp-c-text-1);white-space:nowrap;transition:background-color .25s,color .25s}.link[data-v-43f1e123]:hover{color:var(--vp-c-brand-1);background-color:var(--vp-c-default-soft)}.link.active[data-v-43f1e123]{color:var(--vp-c-brand-1)}.VPMenuGroup[data-v-69e747b5]{margin:12px -12px 0;border-top:1px solid var(--vp-c-divider);padding:12px 12px 0}.VPMenuGroup[data-v-69e747b5]:first-child{margin-top:0;border-top:0;padding-top:0}.VPMenuGroup+.VPMenuGroup[data-v-69e747b5]{margin-top:12px;border-top:1px solid var(--vp-c-divider)}.title[data-v-69e747b5]{padding:0 12px;line-height:32px;font-size:14px;font-weight:600;color:var(--vp-c-text-2);white-space:nowrap;transition:color .25s}.VPMenu[data-v-e7ea1737]{border-radius:12px;padding:12px;min-width:128px;border:1px solid var(--vp-c-divider);background-color:var(--vp-c-bg-elv);box-shadow:var(--vp-shadow-3);transition:background-color .5s;max-height:calc(100vh - var(--vp-nav-height));overflow-y:auto}.VPMenu[data-v-e7ea1737] .group{margin:0 -12px;padding:0 12px 12px}.VPMenu[data-v-e7ea1737] .group+.group{border-top:1px solid var(--vp-c-divider);padding:11px 12px 12px}.VPMenu[data-v-e7ea1737] .group:last-child{padding-bottom:0}.VPMenu[data-v-e7ea1737] .group+.item{border-top:1px solid var(--vp-c-divider);padding:11px 16px 0}.VPMenu[data-v-e7ea1737] .item{padding:0 16px;white-space:nowrap}.VPMenu[data-v-e7ea1737] .label{flex-grow:1;line-height:28px;font-size:12px;font-weight:500;color:var(--vp-c-text-2);transition:color .5s}.VPMenu[data-v-e7ea1737] .action{padding-left:24px}.VPFlyout[data-v-b6c34ac9]{position:relative}.VPFlyout[data-v-b6c34ac9]:hover{color:var(--vp-c-brand-1);transition:color .25s}.VPFlyout:hover .text[data-v-b6c34ac9]{color:var(--vp-c-text-2)}.VPFlyout:hover .icon[data-v-b6c34ac9]{fill:var(--vp-c-text-2)}.VPFlyout.active .text[data-v-b6c34ac9]{color:var(--vp-c-brand-1)}.VPFlyout.active:hover .text[data-v-b6c34ac9]{color:var(--vp-c-brand-2)}.VPFlyout:hover .menu[data-v-b6c34ac9],.button[aria-expanded=true]+.menu[data-v-b6c34ac9]{opacity:1;visibility:visible;transform:translateY(0)}.button[aria-expanded=false]+.menu[data-v-b6c34ac9]{opacity:0;visibility:hidden;transform:translateY(0)}.button[data-v-b6c34ac9]{display:flex;align-items:center;padding:0 12px;height:var(--vp-nav-height);color:var(--vp-c-text-1);transition:color .5s}.text[data-v-b6c34ac9]{display:flex;align-items:center;line-height:var(--vp-nav-height);font-size:14px;font-weight:500;color:var(--vp-c-text-1);transition:color .25s}.option-icon[data-v-b6c34ac9]{margin-right:0;font-size:16px}.text-icon[data-v-b6c34ac9]{margin-left:4px;font-size:14px}.icon[data-v-b6c34ac9]{font-size:20px;transition:fill .25s}.menu[data-v-b6c34ac9]{position:absolute;top:calc(var(--vp-nav-height) / 2 + 20px);right:0;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s,transform .25s}.VPSocialLink[data-v-eee4e7cb]{display:flex;justify-content:center;align-items:center;width:36px;height:36px;color:var(--vp-c-text-2);transition:color .5s}.VPSocialLink[data-v-eee4e7cb]:hover{color:var(--vp-c-text-1);transition:color .25s}.VPSocialLink[data-v-eee4e7cb]>svg,.VPSocialLink[data-v-eee4e7cb]>[class^=vpi-social-]{width:20px;height:20px;fill:currentColor}.VPSocialLinks[data-v-7bc22406]{display:flex;justify-content:center}.VPNavBarExtra[data-v-d0bd9dde]{display:none;margin-right:-12px}@media (min-width: 768px){.VPNavBarExtra[data-v-d0bd9dde]{display:block}}@media (min-width: 1280px){.VPNavBarExtra[data-v-d0bd9dde]{display:none}}.trans-title[data-v-d0bd9dde]{padding:0 24px 0 12px;line-height:32px;font-size:14px;font-weight:700;color:var(--vp-c-text-1)}.item.appearance[data-v-d0bd9dde],.item.social-links[data-v-d0bd9dde]{display:flex;align-items:center;padding:0 12px}.item.appearance[data-v-d0bd9dde]{min-width:176px}.appearance-action[data-v-d0bd9dde]{margin-right:-2px}.social-links-list[data-v-d0bd9dde]{margin:-4px -8px}.VPNavBarHamburger[data-v-e5dd9c1c]{display:flex;justify-content:center;align-items:center;width:48px;height:var(--vp-nav-height)}@media (min-width: 768px){.VPNavBarHamburger[data-v-e5dd9c1c]{display:none}}.container[data-v-e5dd9c1c]{position:relative;width:16px;height:14px;overflow:hidden}.VPNavBarHamburger:hover .top[data-v-e5dd9c1c]{top:0;left:0;transform:translate(4px)}.VPNavBarHamburger:hover .middle[data-v-e5dd9c1c]{top:6px;left:0;transform:translate(0)}.VPNavBarHamburger:hover .bottom[data-v-e5dd9c1c]{top:12px;left:0;transform:translate(8px)}.VPNavBarHamburger.active .top[data-v-e5dd9c1c]{top:6px;transform:translate(0) rotate(225deg)}.VPNavBarHamburger.active .middle[data-v-e5dd9c1c]{top:6px;transform:translate(16px)}.VPNavBarHamburger.active .bottom[data-v-e5dd9c1c]{top:6px;transform:translate(0) rotate(135deg)}.VPNavBarHamburger.active:hover .top[data-v-e5dd9c1c],.VPNavBarHamburger.active:hover .middle[data-v-e5dd9c1c],.VPNavBarHamburger.active:hover .bottom[data-v-e5dd9c1c]{background-color:var(--vp-c-text-2);transition:top .25s,background-color .25s,transform .25s}.top[data-v-e5dd9c1c],.middle[data-v-e5dd9c1c],.bottom[data-v-e5dd9c1c]{position:absolute;width:16px;height:2px;background-color:var(--vp-c-text-1);transition:top .25s,background-color .5s,transform .25s}.top[data-v-e5dd9c1c]{top:0;left:0;transform:translate(0)}.middle[data-v-e5dd9c1c]{top:6px;left:0;transform:translate(8px)}.bottom[data-v-e5dd9c1c]{top:12px;left:0;transform:translate(4px)}.VPNavBarMenuLink[data-v-42ef59de]{display:flex;align-items:center;padding:0 12px;line-height:var(--vp-nav-height);font-size:14px;font-weight:500;color:var(--vp-c-text-1);transition:color .25s}.VPNavBarMenuLink.active[data-v-42ef59de],.VPNavBarMenuLink[data-v-42ef59de]:hover{color:var(--vp-c-brand-1)}.VPNavBarMenu[data-v-7f418b0f]{display:none}@media (min-width: 768px){.VPNavBarMenu[data-v-7f418b0f]{display:flex}}/*! @docsearch/css 3.6.0 | MIT License | © Algolia, Inc. and contributors | https://docsearch.algolia.com */:root{--docsearch-primary-color:#5468ff;--docsearch-text-color:#1c1e21;--docsearch-spacing:12px;--docsearch-icon-stroke-width:1.4;--docsearch-highlight-color:var(--docsearch-primary-color);--docsearch-muted-color:#969faf;--docsearch-container-background:rgba(101,108,133,.8);--docsearch-logo-color:#5468ff;--docsearch-modal-width:560px;--docsearch-modal-height:600px;--docsearch-modal-background:#f5f6f7;--docsearch-modal-shadow:inset 1px 1px 0 0 hsla(0,0%,100%,.5),0 3px 8px 0 #555a64;--docsearch-searchbox-height:56px;--docsearch-searchbox-background:#ebedf0;--docsearch-searchbox-focus-background:#fff;--docsearch-searchbox-shadow:inset 0 0 0 2px var(--docsearch-primary-color);--docsearch-hit-height:56px;--docsearch-hit-color:#444950;--docsearch-hit-active-color:#fff;--docsearch-hit-background:#fff;--docsearch-hit-shadow:0 1px 3px 0 #d4d9e1;--docsearch-key-gradient:linear-gradient(-225deg,#d5dbe4,#f8f8f8);--docsearch-key-shadow:inset 0 -2px 0 0 #cdcde6,inset 0 0 1px 1px #fff,0 1px 2px 1px rgba(30,35,90,.4);--docsearch-key-pressed-shadow:inset 0 -2px 0 0 #cdcde6,inset 0 0 1px 1px #fff,0 1px 1px 0 rgba(30,35,90,.4);--docsearch-footer-height:44px;--docsearch-footer-background:#fff;--docsearch-footer-shadow:0 -1px 0 0 #e0e3e8,0 -3px 6px 0 rgba(69,98,155,.12)}html[data-theme=dark]{--docsearch-text-color:#f5f6f7;--docsearch-container-background:rgba(9,10,17,.8);--docsearch-modal-background:#15172a;--docsearch-modal-shadow:inset 1px 1px 0 0 #2c2e40,0 3px 8px 0 #000309;--docsearch-searchbox-background:#090a11;--docsearch-searchbox-focus-background:#000;--docsearch-hit-color:#bec3c9;--docsearch-hit-shadow:none;--docsearch-hit-background:#090a11;--docsearch-key-gradient:linear-gradient(-26.5deg,#565872,#31355b);--docsearch-key-shadow:inset 0 -2px 0 0 #282d55,inset 0 0 1px 1px #51577d,0 2px 2px 0 rgba(3,4,9,.3);--docsearch-key-pressed-shadow:inset 0 -2px 0 0 #282d55,inset 0 0 1px 1px #51577d,0 1px 1px 0 rgba(3,4,9,.30196078431372547);--docsearch-footer-background:#1e2136;--docsearch-footer-shadow:inset 0 1px 0 0 rgba(73,76,106,.5),0 -4px 8px 0 rgba(0,0,0,.2);--docsearch-logo-color:#fff;--docsearch-muted-color:#7f8497}.DocSearch-Button{align-items:center;background:var(--docsearch-searchbox-background);border:0;border-radius:40px;color:var(--docsearch-muted-color);cursor:pointer;display:flex;font-weight:500;height:36px;justify-content:space-between;margin:0 0 0 16px;padding:0 8px;-webkit-user-select:none;-moz-user-select:none;user-select:none}.DocSearch-Button:active,.DocSearch-Button:focus,.DocSearch-Button:hover{background:var(--docsearch-searchbox-focus-background);box-shadow:var(--docsearch-searchbox-shadow);color:var(--docsearch-text-color);outline:none}.DocSearch-Button-Container{align-items:center;display:flex}.DocSearch-Search-Icon{stroke-width:1.6}.DocSearch-Button .DocSearch-Search-Icon{color:var(--docsearch-text-color)}.DocSearch-Button-Placeholder{font-size:1rem;padding:0 12px 0 6px}.DocSearch-Button-Keys{display:flex;min-width:calc(40px + .8em)}.DocSearch-Button-Key{align-items:center;background:var(--docsearch-key-gradient);border-radius:3px;box-shadow:var(--docsearch-key-shadow);color:var(--docsearch-muted-color);display:flex;height:18px;justify-content:center;margin-right:.4em;position:relative;padding:0 0 2px;border:0;top:-1px;width:20px}.DocSearch-Button-Key--pressed{transform:translate3d(0,1px,0);box-shadow:var(--docsearch-key-pressed-shadow)}@media (max-width:768px){.DocSearch-Button-Keys,.DocSearch-Button-Placeholder{display:none}}.DocSearch--active{overflow:hidden!important}.DocSearch-Container,.DocSearch-Container *{box-sizing:border-box}.DocSearch-Container{background-color:var(--docsearch-container-background);height:100vh;left:0;position:fixed;top:0;width:100vw;z-index:200}.DocSearch-Container a{text-decoration:none}.DocSearch-Link{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:0;color:var(--docsearch-highlight-color);cursor:pointer;font:inherit;margin:0;padding:0}.DocSearch-Modal{background:var(--docsearch-modal-background);border-radius:6px;box-shadow:var(--docsearch-modal-shadow);flex-direction:column;margin:60px auto auto;max-width:var(--docsearch-modal-width);position:relative}.DocSearch-SearchBar{display:flex;padding:var(--docsearch-spacing) var(--docsearch-spacing) 0}.DocSearch-Form{align-items:center;background:var(--docsearch-searchbox-focus-background);border-radius:4px;box-shadow:var(--docsearch-searchbox-shadow);display:flex;height:var(--docsearch-searchbox-height);margin:0;padding:0 var(--docsearch-spacing);position:relative;width:100%}.DocSearch-Input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;color:var(--docsearch-text-color);flex:1;font:inherit;font-size:1.2em;height:100%;outline:none;padding:0 0 0 8px;width:80%}.DocSearch-Input::-moz-placeholder{color:var(--docsearch-muted-color);opacity:1}.DocSearch-Input::placeholder{color:var(--docsearch-muted-color);opacity:1}.DocSearch-Input::-webkit-search-cancel-button,.DocSearch-Input::-webkit-search-decoration,.DocSearch-Input::-webkit-search-results-button,.DocSearch-Input::-webkit-search-results-decoration{display:none}.DocSearch-LoadingIndicator,.DocSearch-MagnifierLabel,.DocSearch-Reset{margin:0;padding:0}.DocSearch-MagnifierLabel,.DocSearch-Reset{align-items:center;color:var(--docsearch-highlight-color);display:flex;justify-content:center}.DocSearch-Container--Stalled .DocSearch-MagnifierLabel,.DocSearch-LoadingIndicator{display:none}.DocSearch-Container--Stalled .DocSearch-LoadingIndicator{align-items:center;color:var(--docsearch-highlight-color);display:flex;justify-content:center}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Reset{animation:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:0;border-radius:50%;color:var(--docsearch-icon-color);cursor:pointer;right:0;stroke-width:var(--docsearch-icon-stroke-width)}}.DocSearch-Reset{animation:fade-in .1s ease-in forwards;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:0;border-radius:50%;color:var(--docsearch-icon-color);cursor:pointer;padding:2px;right:0;stroke-width:var(--docsearch-icon-stroke-width)}.DocSearch-Reset[hidden]{display:none}.DocSearch-Reset:hover{color:var(--docsearch-highlight-color)}.DocSearch-LoadingIndicator svg,.DocSearch-MagnifierLabel svg{height:24px;width:24px}.DocSearch-Cancel{display:none}.DocSearch-Dropdown{max-height:calc(var(--docsearch-modal-height) - var(--docsearch-searchbox-height) - var(--docsearch-spacing) - var(--docsearch-footer-height));min-height:var(--docsearch-spacing);overflow-y:auto;overflow-y:overlay;padding:0 var(--docsearch-spacing);scrollbar-color:var(--docsearch-muted-color) var(--docsearch-modal-background);scrollbar-width:thin}.DocSearch-Dropdown::-webkit-scrollbar{width:12px}.DocSearch-Dropdown::-webkit-scrollbar-track{background:transparent}.DocSearch-Dropdown::-webkit-scrollbar-thumb{background-color:var(--docsearch-muted-color);border:3px solid var(--docsearch-modal-background);border-radius:20px}.DocSearch-Dropdown ul{list-style:none;margin:0;padding:0}.DocSearch-Label{font-size:.75em;line-height:1.6em}.DocSearch-Help,.DocSearch-Label{color:var(--docsearch-muted-color)}.DocSearch-Help{font-size:.9em;margin:0;-webkit-user-select:none;-moz-user-select:none;user-select:none}.DocSearch-Title{font-size:1.2em}.DocSearch-Logo a{display:flex}.DocSearch-Logo svg{color:var(--docsearch-logo-color);margin-left:8px}.DocSearch-Hits:last-of-type{margin-bottom:24px}.DocSearch-Hits mark{background:none;color:var(--docsearch-highlight-color)}.DocSearch-HitsFooter{color:var(--docsearch-muted-color);display:flex;font-size:.85em;justify-content:center;margin-bottom:var(--docsearch-spacing);padding:var(--docsearch-spacing)}.DocSearch-HitsFooter a{border-bottom:1px solid;color:inherit}.DocSearch-Hit{border-radius:4px;display:flex;padding-bottom:4px;position:relative}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Hit--deleting{transition:none}}.DocSearch-Hit--deleting{opacity:0;transition:all .25s linear}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Hit--favoriting{transition:none}}.DocSearch-Hit--favoriting{transform:scale(0);transform-origin:top center;transition:all .25s linear;transition-delay:.25s}.DocSearch-Hit a{background:var(--docsearch-hit-background);border-radius:4px;box-shadow:var(--docsearch-hit-shadow);display:block;padding-left:var(--docsearch-spacing);width:100%}.DocSearch-Hit-source{background:var(--docsearch-modal-background);color:var(--docsearch-highlight-color);font-size:.85em;font-weight:600;line-height:32px;margin:0 -4px;padding:8px 4px 0;position:sticky;top:0;z-index:10}.DocSearch-Hit-Tree{color:var(--docsearch-muted-color);height:var(--docsearch-hit-height);opacity:.5;stroke-width:var(--docsearch-icon-stroke-width);width:24px}.DocSearch-Hit[aria-selected=true] a{background-color:var(--docsearch-highlight-color)}.DocSearch-Hit[aria-selected=true] mark{text-decoration:underline}.DocSearch-Hit-Container{align-items:center;color:var(--docsearch-hit-color);display:flex;flex-direction:row;height:var(--docsearch-hit-height);padding:0 var(--docsearch-spacing) 0 0}.DocSearch-Hit-icon{height:20px;width:20px}.DocSearch-Hit-action,.DocSearch-Hit-icon{color:var(--docsearch-muted-color);stroke-width:var(--docsearch-icon-stroke-width)}.DocSearch-Hit-action{align-items:center;display:flex;height:22px;width:22px}.DocSearch-Hit-action svg{display:block;height:18px;width:18px}.DocSearch-Hit-action+.DocSearch-Hit-action{margin-left:6px}.DocSearch-Hit-action-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:0;border-radius:50%;color:inherit;cursor:pointer;padding:2px}svg.DocSearch-Hit-Select-Icon{display:none}.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-Select-Icon{display:block}.DocSearch-Hit-action-button:focus,.DocSearch-Hit-action-button:hover{background:#0003;transition:background-color .1s ease-in}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Hit-action-button:focus,.DocSearch-Hit-action-button:hover{transition:none}}.DocSearch-Hit-action-button:focus path,.DocSearch-Hit-action-button:hover path{fill:#fff}.DocSearch-Hit-content-wrapper{display:flex;flex:1 1 auto;flex-direction:column;font-weight:500;justify-content:center;line-height:1.2em;margin:0 8px;overflow-x:hidden;position:relative;text-overflow:ellipsis;white-space:nowrap;width:80%}.DocSearch-Hit-title{font-size:.9em}.DocSearch-Hit-path{color:var(--docsearch-muted-color);font-size:.75em}.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-action,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-icon,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-path,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-text,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-title,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-Tree,.DocSearch-Hit[aria-selected=true] mark{color:var(--docsearch-hit-active-color)!important}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Hit-action-button:focus,.DocSearch-Hit-action-button:hover{background:#0003;transition:none}}.DocSearch-ErrorScreen,.DocSearch-NoResults,.DocSearch-StartScreen{font-size:.9em;margin:0 auto;padding:36px 0;text-align:center;width:80%}.DocSearch-Screen-Icon{color:var(--docsearch-muted-color);padding-bottom:12px}.DocSearch-NoResults-Prefill-List{display:inline-block;padding-bottom:24px;text-align:left}.DocSearch-NoResults-Prefill-List ul{display:inline-block;padding:8px 0 0}.DocSearch-NoResults-Prefill-List li{list-style-position:inside;list-style-type:"» "}.DocSearch-Prefill{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:0;border-radius:1em;color:var(--docsearch-highlight-color);cursor:pointer;display:inline-block;font-size:1em;font-weight:700;padding:0}.DocSearch-Prefill:focus,.DocSearch-Prefill:hover{outline:none;text-decoration:underline}.DocSearch-Footer{align-items:center;background:var(--docsearch-footer-background);border-radius:0 0 8px 8px;box-shadow:var(--docsearch-footer-shadow);display:flex;flex-direction:row-reverse;flex-shrink:0;height:var(--docsearch-footer-height);justify-content:space-between;padding:0 var(--docsearch-spacing);position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%;z-index:300}.DocSearch-Commands{color:var(--docsearch-muted-color);display:flex;list-style:none;margin:0;padding:0}.DocSearch-Commands li{align-items:center;display:flex}.DocSearch-Commands li:not(:last-of-type){margin-right:.8em}.DocSearch-Commands-Key{align-items:center;background:var(--docsearch-key-gradient);border-radius:2px;box-shadow:var(--docsearch-key-shadow);display:flex;height:18px;justify-content:center;margin-right:.4em;padding:0 0 1px;color:var(--docsearch-muted-color);border:0;width:20px}.DocSearch-VisuallyHiddenForAccessibility{clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}@media (max-width:768px){:root{--docsearch-spacing:10px;--docsearch-footer-height:40px}.DocSearch-Dropdown{height:100%}.DocSearch-Container{height:100vh;height:-webkit-fill-available;height:calc(var(--docsearch-vh, 1vh)*100);position:absolute}.DocSearch-Footer{border-radius:0;bottom:0;position:absolute}.DocSearch-Hit-content-wrapper{display:flex;position:relative;width:80%}.DocSearch-Modal{border-radius:0;box-shadow:none;height:100vh;height:-webkit-fill-available;height:calc(var(--docsearch-vh, 1vh)*100);margin:0;max-width:100%;width:100%}.DocSearch-Dropdown{max-height:calc(var(--docsearch-vh, 1vh)*100 - var(--docsearch-searchbox-height) - var(--docsearch-spacing) - var(--docsearch-footer-height))}.DocSearch-Cancel{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:0;color:var(--docsearch-highlight-color);cursor:pointer;display:inline-block;flex:none;font:inherit;font-size:1em;font-weight:500;margin-left:var(--docsearch-spacing);outline:none;overflow:hidden;padding:0;-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap}.DocSearch-Commands,.DocSearch-Hit-Tree{display:none}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}[class*=DocSearch]{--docsearch-primary-color: var(--vp-c-brand-1);--docsearch-highlight-color: var(--docsearch-primary-color);--docsearch-text-color: var(--vp-c-text-1);--docsearch-muted-color: var(--vp-c-text-2);--docsearch-searchbox-shadow: none;--docsearch-searchbox-background: transparent;--docsearch-searchbox-focus-background: transparent;--docsearch-key-gradient: transparent;--docsearch-key-shadow: none;--docsearch-modal-background: var(--vp-c-bg-soft);--docsearch-footer-background: var(--vp-c-bg)}.dark [class*=DocSearch]{--docsearch-modal-shadow: none;--docsearch-footer-shadow: none;--docsearch-logo-color: var(--vp-c-text-2);--docsearch-hit-background: var(--vp-c-default-soft);--docsearch-hit-color: var(--vp-c-text-2);--docsearch-hit-shadow: none}.DocSearch-Button{display:flex;justify-content:center;align-items:center;margin:0;padding:0;width:48px;height:55px;background:transparent;transition:border-color .25s}.DocSearch-Button:hover{background:transparent}.DocSearch-Button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}.DocSearch-Button:focus:not(:focus-visible){outline:none!important}@media (min-width: 768px){.DocSearch-Button{justify-content:flex-start;border:1px solid transparent;border-radius:8px;padding:0 10px 0 12px;width:100%;height:40px;background-color:var(--vp-c-bg-alt)}.DocSearch-Button:hover{border-color:var(--vp-c-brand-1);background:var(--vp-c-bg-alt)}}.DocSearch-Button .DocSearch-Button-Container{display:flex;align-items:center}.DocSearch-Button .DocSearch-Search-Icon{position:relative;width:16px;height:16px;color:var(--vp-c-text-1);fill:currentColor;transition:color .5s}.DocSearch-Button:hover .DocSearch-Search-Icon{color:var(--vp-c-text-1)}@media (min-width: 768px){.DocSearch-Button .DocSearch-Search-Icon{top:1px;margin-right:8px;width:14px;height:14px;color:var(--vp-c-text-2)}}.DocSearch-Button .DocSearch-Button-Placeholder{display:none;margin-top:2px;padding:0 16px 0 0;font-size:13px;font-weight:500;color:var(--vp-c-text-2);transition:color .5s}.DocSearch-Button:hover .DocSearch-Button-Placeholder{color:var(--vp-c-text-1)}@media (min-width: 768px){.DocSearch-Button .DocSearch-Button-Placeholder{display:inline-block}}.DocSearch-Button .DocSearch-Button-Keys{direction:ltr;display:none;min-width:auto}@media (min-width: 768px){.DocSearch-Button .DocSearch-Button-Keys{display:flex;align-items:center}}.DocSearch-Button .DocSearch-Button-Key{display:block;margin:2px 0 0;border:1px solid var(--vp-c-divider);border-right:none;border-radius:4px 0 0 4px;padding-left:6px;min-width:0;width:auto;height:22px;line-height:22px;font-family:var(--vp-font-family-base);font-size:12px;font-weight:500;transition:color .5s,border-color .5s}.DocSearch-Button .DocSearch-Button-Key+.DocSearch-Button-Key{border-right:1px solid var(--vp-c-divider);border-left:none;border-radius:0 4px 4px 0;padding-left:2px;padding-right:6px}.DocSearch-Button .DocSearch-Button-Key:first-child{font-size:0!important}.DocSearch-Button .DocSearch-Button-Key:first-child:after{content:"Ctrl";font-size:12px;letter-spacing:normal;color:var(--docsearch-muted-color)}.mac .DocSearch-Button .DocSearch-Button-Key:first-child:after{content:"⌘"}.DocSearch-Button .DocSearch-Button-Key:first-child>*{display:none}.DocSearch-Search-Icon{--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke-width='1.6' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' d='m14.386 14.386 4.088 4.088-4.088-4.088A7.533 7.533 0 1 1 3.733 3.733a7.533 7.533 0 0 1 10.653 10.653z'/%3E%3C/svg%3E")}.VPNavBarSearch{display:flex;align-items:center}@media (min-width: 768px){.VPNavBarSearch{flex-grow:1;padding-left:24px}}@media (min-width: 960px){.VPNavBarSearch{padding-left:32px}}.dark .DocSearch-Footer{border-top:1px solid var(--vp-c-divider)}.DocSearch-Form{border:1px solid var(--vp-c-brand-1);background-color:var(--vp-c-white)}.dark .DocSearch-Form{background-color:var(--vp-c-default-soft)}.DocSearch-Screen-Icon>svg{margin:auto}.VPNavBarSocialLinks[data-v-0394ad82]{display:none}@media (min-width: 1280px){.VPNavBarSocialLinks[data-v-0394ad82]{display:flex;align-items:center}}.title[data-v-ab179fa1]{display:flex;align-items:center;border-bottom:1px solid transparent;width:100%;height:var(--vp-nav-height);font-size:16px;font-weight:600;color:var(--vp-c-text-1);transition:opacity .25s}@media (min-width: 960px){.title[data-v-ab179fa1]{flex-shrink:0}.VPNavBarTitle.has-sidebar .title[data-v-ab179fa1]{border-bottom-color:var(--vp-c-divider)}}[data-v-ab179fa1] .logo{margin-right:8px;height:var(--vp-nav-logo-height)}.VPNavBarTranslations[data-v-88af2de4]{display:none}@media (min-width: 1280px){.VPNavBarTranslations[data-v-88af2de4]{display:flex;align-items:center}}.title[data-v-88af2de4]{padding:0 24px 0 12px;line-height:32px;font-size:14px;font-weight:700;color:var(--vp-c-text-1)}.VPNavBar[data-v-19c990f1]{position:relative;height:var(--vp-nav-height);pointer-events:none;white-space:nowrap;transition:background-color .5s}.VPNavBar.has-local-nav[data-v-19c990f1]{background-color:var(--vp-nav-bg-color)}@media (min-width: 960px){.VPNavBar.has-local-nav[data-v-19c990f1]{background-color:transparent}.VPNavBar[data-v-19c990f1]:not(.has-sidebar):not(.top){background-color:var(--vp-nav-bg-color)}}.wrapper[data-v-19c990f1]{padding:0 8px 0 24px}@media (min-width: 768px){.wrapper[data-v-19c990f1]{padding:0 32px}}@media (min-width: 960px){.VPNavBar.has-sidebar .wrapper[data-v-19c990f1]{padding:0}}.container[data-v-19c990f1]{display:flex;justify-content:space-between;margin:0 auto;max-width:calc(var(--vp-layout-max-width) - 64px);height:var(--vp-nav-height);pointer-events:none}.container>.title[data-v-19c990f1],.container>.content[data-v-19c990f1]{pointer-events:none}.container[data-v-19c990f1] *{pointer-events:auto}@media (min-width: 960px){.VPNavBar.has-sidebar .container[data-v-19c990f1]{max-width:100%}}.title[data-v-19c990f1]{flex-shrink:0;height:calc(var(--vp-nav-height) - 1px);transition:background-color .5s}@media (min-width: 960px){.VPNavBar.has-sidebar .title[data-v-19c990f1]{position:absolute;top:0;left:0;z-index:2;padding:0 32px;width:var(--vp-sidebar-width);height:var(--vp-nav-height);background-color:transparent}}@media (min-width: 1440px){.VPNavBar.has-sidebar .title[data-v-19c990f1]{padding-left:max(32px,calc((100% - (var(--vp-layout-max-width) - 64px)) / 2));width:calc((100% - (var(--vp-layout-max-width) - 64px)) / 2 + var(--vp-sidebar-width) - 32px)}}.content[data-v-19c990f1]{flex-grow:1}@media (min-width: 960px){.VPNavBar.has-sidebar .content[data-v-19c990f1]{position:relative;z-index:1;padding-right:32px;padding-left:var(--vp-sidebar-width)}}@media (min-width: 1440px){.VPNavBar.has-sidebar .content[data-v-19c990f1]{padding-right:calc((100vw - var(--vp-layout-max-width)) / 2 + 32px);padding-left:calc((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width))}}.content-body[data-v-19c990f1]{display:flex;justify-content:flex-end;align-items:center;height:var(--vp-nav-height);transition:background-color .5s}@media (min-width: 960px){.VPNavBar:not(.top) .content-body[data-v-19c990f1]{position:relative;background-color:var(--vp-nav-bg-color)}.VPNavBar:not(.has-sidebar):not(.top) .content-body[data-v-19c990f1]{background-color:transparent}}@media (max-width: 767px){.content-body[data-v-19c990f1]{-moz-column-gap:.5rem;column-gap:.5rem}}.menu+.translations[data-v-19c990f1]:before,.menu+.appearance[data-v-19c990f1]:before,.menu+.social-links[data-v-19c990f1]:before,.translations+.appearance[data-v-19c990f1]:before,.appearance+.social-links[data-v-19c990f1]:before{margin-right:8px;margin-left:8px;width:1px;height:24px;background-color:var(--vp-c-divider);content:""}.menu+.appearance[data-v-19c990f1]:before,.translations+.appearance[data-v-19c990f1]:before{margin-right:16px}.appearance+.social-links[data-v-19c990f1]:before{margin-left:16px}.social-links[data-v-19c990f1]{margin-right:-8px}.divider[data-v-19c990f1]{width:100%;height:1px}@media (min-width: 960px){.VPNavBar.has-sidebar .divider[data-v-19c990f1]{padding-left:var(--vp-sidebar-width)}}@media (min-width: 1440px){.VPNavBar.has-sidebar .divider[data-v-19c990f1]{padding-left:calc((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width))}}.divider-line[data-v-19c990f1]{width:100%;height:1px;transition:background-color .5s}.VPNavBar.has-local-nav .divider-line[data-v-19c990f1]{background-color:var(--vp-c-gutter)}@media (min-width: 960px){.VPNavBar:not(.top) .divider-line[data-v-19c990f1]{background-color:var(--vp-c-gutter)}.VPNavBar:not(.has-sidebar):not(.top) .divider[data-v-19c990f1]{background-color:var(--vp-c-gutter)}}.VPNavScreenAppearance[data-v-2d7af913]{display:flex;justify-content:space-between;align-items:center;border-radius:8px;padding:12px 14px 12px 16px;background-color:var(--vp-c-bg-soft)}.text[data-v-2d7af913]{line-height:24px;font-size:12px;font-weight:500;color:var(--vp-c-text-2)}.VPNavScreenMenuLink[data-v-05f27b2a]{display:block;border-bottom:1px solid var(--vp-c-divider);padding:12px 0 11px;line-height:24px;font-size:14px;font-weight:500;color:var(--vp-c-text-1);transition:border-color .25s,color .25s}.VPNavScreenMenuLink[data-v-05f27b2a]:hover{color:var(--vp-c-brand-1)}.VPNavScreenMenuGroupLink[data-v-19976ae1]{display:block;margin-left:12px;line-height:32px;font-size:14px;font-weight:400;color:var(--vp-c-text-1);transition:color .25s}.VPNavScreenMenuGroupLink[data-v-19976ae1]:hover{color:var(--vp-c-brand-1)}.VPNavScreenMenuGroupSection[data-v-8133b170]{display:block}.title[data-v-8133b170]{line-height:32px;font-size:13px;font-weight:700;color:var(--vp-c-text-2);transition:color .25s}.VPNavScreenMenuGroup[data-v-ff6087d4]{border-bottom:1px solid var(--vp-c-divider);height:48px;overflow:hidden;transition:border-color .5s}.VPNavScreenMenuGroup .items[data-v-ff6087d4]{visibility:hidden}.VPNavScreenMenuGroup.open .items[data-v-ff6087d4]{visibility:visible}.VPNavScreenMenuGroup.open[data-v-ff6087d4]{padding-bottom:10px;height:auto}.VPNavScreenMenuGroup.open .button[data-v-ff6087d4]{padding-bottom:6px;color:var(--vp-c-brand-1)}.VPNavScreenMenuGroup.open .button-icon[data-v-ff6087d4]{transform:rotate(45deg)}.button[data-v-ff6087d4]{display:flex;justify-content:space-between;align-items:center;padding:12px 4px 11px 0;width:100%;line-height:24px;font-size:14px;font-weight:500;color:var(--vp-c-text-1);transition:color .25s}.button[data-v-ff6087d4]:hover{color:var(--vp-c-brand-1)}.button-icon[data-v-ff6087d4]{transition:transform .25s}.group[data-v-ff6087d4]:first-child{padding-top:0}.group+.group[data-v-ff6087d4],.group+.item[data-v-ff6087d4]{padding-top:4px}.VPNavScreenTranslations[data-v-858fe1a4]{height:24px;overflow:hidden}.VPNavScreenTranslations.open[data-v-858fe1a4]{height:auto}.title[data-v-858fe1a4]{display:flex;align-items:center;font-size:14px;font-weight:500;color:var(--vp-c-text-1)}.icon[data-v-858fe1a4]{font-size:16px}.icon.lang[data-v-858fe1a4]{margin-right:8px}.icon.chevron[data-v-858fe1a4]{margin-left:4px}.list[data-v-858fe1a4]{padding:4px 0 0 24px}.link[data-v-858fe1a4]{line-height:32px;font-size:13px;color:var(--vp-c-text-1)}.VPNavScreen[data-v-cc5739dd]{position:fixed;top:calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 1px);right:0;bottom:0;left:0;padding:0 32px;width:100%;background-color:var(--vp-nav-screen-bg-color);overflow-y:auto;transition:background-color .5s;pointer-events:auto}.VPNavScreen.fade-enter-active[data-v-cc5739dd],.VPNavScreen.fade-leave-active[data-v-cc5739dd]{transition:opacity .25s}.VPNavScreen.fade-enter-active .container[data-v-cc5739dd],.VPNavScreen.fade-leave-active .container[data-v-cc5739dd]{transition:transform .25s ease}.VPNavScreen.fade-enter-from[data-v-cc5739dd],.VPNavScreen.fade-leave-to[data-v-cc5739dd]{opacity:0}.VPNavScreen.fade-enter-from .container[data-v-cc5739dd],.VPNavScreen.fade-leave-to .container[data-v-cc5739dd]{transform:translateY(-8px)}@media (min-width: 768px){.VPNavScreen[data-v-cc5739dd]{display:none}}.container[data-v-cc5739dd]{margin:0 auto;padding:24px 0 96px;max-width:288px}.menu+.translations[data-v-cc5739dd],.menu+.appearance[data-v-cc5739dd],.translations+.appearance[data-v-cc5739dd]{margin-top:24px}.menu+.social-links[data-v-cc5739dd]{margin-top:16px}.appearance+.social-links[data-v-cc5739dd]{margin-top:16px}.VPNav[data-v-ae24b3ad]{position:relative;top:var(--vp-layout-top-height, 0px);left:0;z-index:var(--vp-z-index-nav);width:100%;pointer-events:none;transition:background-color .5s}@media (min-width: 960px){.VPNav[data-v-ae24b3ad]{position:fixed}}.VPSidebarItem.level-0[data-v-93e7e794]{padding-bottom:24px}.VPSidebarItem.collapsed.level-0[data-v-93e7e794]{padding-bottom:10px}.item[data-v-93e7e794]{position:relative;display:flex;width:100%}.VPSidebarItem.collapsible>.item[data-v-93e7e794]{cursor:pointer}.indicator[data-v-93e7e794]{position:absolute;top:6px;bottom:6px;left:-17px;width:2px;border-radius:2px;transition:background-color .25s}.VPSidebarItem.level-2.is-active>.item>.indicator[data-v-93e7e794],.VPSidebarItem.level-3.is-active>.item>.indicator[data-v-93e7e794],.VPSidebarItem.level-4.is-active>.item>.indicator[data-v-93e7e794],.VPSidebarItem.level-5.is-active>.item>.indicator[data-v-93e7e794]{background-color:var(--vp-c-brand-1)}.link[data-v-93e7e794]{display:flex;align-items:center;flex-grow:1}.text[data-v-93e7e794]{flex-grow:1;padding:4px 0;line-height:24px;font-size:14px;transition:color .25s}.VPSidebarItem.level-0 .text[data-v-93e7e794]{font-weight:700;color:var(--vp-c-text-1)}.VPSidebarItem.level-1 .text[data-v-93e7e794],.VPSidebarItem.level-2 .text[data-v-93e7e794],.VPSidebarItem.level-3 .text[data-v-93e7e794],.VPSidebarItem.level-4 .text[data-v-93e7e794],.VPSidebarItem.level-5 .text[data-v-93e7e794]{font-weight:500;color:var(--vp-c-text-2)}.VPSidebarItem.level-0.is-link>.item>.link:hover .text[data-v-93e7e794],.VPSidebarItem.level-1.is-link>.item>.link:hover .text[data-v-93e7e794],.VPSidebarItem.level-2.is-link>.item>.link:hover .text[data-v-93e7e794],.VPSidebarItem.level-3.is-link>.item>.link:hover .text[data-v-93e7e794],.VPSidebarItem.level-4.is-link>.item>.link:hover .text[data-v-93e7e794],.VPSidebarItem.level-5.is-link>.item>.link:hover .text[data-v-93e7e794]{color:var(--vp-c-brand-1)}.VPSidebarItem.level-0.has-active>.item>.text[data-v-93e7e794],.VPSidebarItem.level-1.has-active>.item>.text[data-v-93e7e794],.VPSidebarItem.level-2.has-active>.item>.text[data-v-93e7e794],.VPSidebarItem.level-3.has-active>.item>.text[data-v-93e7e794],.VPSidebarItem.level-4.has-active>.item>.text[data-v-93e7e794],.VPSidebarItem.level-5.has-active>.item>.text[data-v-93e7e794],.VPSidebarItem.level-0.has-active>.item>.link>.text[data-v-93e7e794],.VPSidebarItem.level-1.has-active>.item>.link>.text[data-v-93e7e794],.VPSidebarItem.level-2.has-active>.item>.link>.text[data-v-93e7e794],.VPSidebarItem.level-3.has-active>.item>.link>.text[data-v-93e7e794],.VPSidebarItem.level-4.has-active>.item>.link>.text[data-v-93e7e794],.VPSidebarItem.level-5.has-active>.item>.link>.text[data-v-93e7e794]{color:var(--vp-c-text-1)}.VPSidebarItem.level-0.is-active>.item .link>.text[data-v-93e7e794],.VPSidebarItem.level-1.is-active>.item .link>.text[data-v-93e7e794],.VPSidebarItem.level-2.is-active>.item .link>.text[data-v-93e7e794],.VPSidebarItem.level-3.is-active>.item .link>.text[data-v-93e7e794],.VPSidebarItem.level-4.is-active>.item .link>.text[data-v-93e7e794],.VPSidebarItem.level-5.is-active>.item .link>.text[data-v-93e7e794]{color:var(--vp-c-brand-1)}.caret[data-v-93e7e794]{display:flex;justify-content:center;align-items:center;margin-right:-7px;width:32px;height:32px;color:var(--vp-c-text-3);cursor:pointer;transition:color .25s;flex-shrink:0}.item:hover .caret[data-v-93e7e794]{color:var(--vp-c-text-2)}.item:hover .caret[data-v-93e7e794]:hover{color:var(--vp-c-text-1)}.caret-icon[data-v-93e7e794]{font-size:18px;transform:rotate(90deg);transition:transform .25s}.VPSidebarItem.collapsed .caret-icon[data-v-93e7e794]{transform:rotate(0)}.VPSidebarItem.level-1 .items[data-v-93e7e794],.VPSidebarItem.level-2 .items[data-v-93e7e794],.VPSidebarItem.level-3 .items[data-v-93e7e794],.VPSidebarItem.level-4 .items[data-v-93e7e794],.VPSidebarItem.level-5 .items[data-v-93e7e794]{border-left:1px solid var(--vp-c-divider);padding-left:16px}.VPSidebarItem.collapsed .items[data-v-93e7e794]{display:none}.VPSidebar[data-v-575e6a36]{position:fixed;top:var(--vp-layout-top-height, 0px);bottom:0;left:0;z-index:var(--vp-z-index-sidebar);padding:32px 32px 96px;width:calc(100vw - 64px);max-width:320px;background-color:var(--vp-sidebar-bg-color);opacity:0;box-shadow:var(--vp-c-shadow-3);overflow-x:hidden;overflow-y:auto;transform:translate(-100%);transition:opacity .5s,transform .25s ease;overscroll-behavior:contain}.VPSidebar.open[data-v-575e6a36]{opacity:1;visibility:visible;transform:translate(0);transition:opacity .25s,transform .5s cubic-bezier(.19,1,.22,1)}.dark .VPSidebar[data-v-575e6a36]{box-shadow:var(--vp-shadow-1)}@media (min-width: 960px){.VPSidebar[data-v-575e6a36]{padding-top:var(--vp-nav-height);width:var(--vp-sidebar-width);max-width:100%;background-color:var(--vp-sidebar-bg-color);opacity:1;visibility:visible;box-shadow:none;transform:translate(0)}}@media (min-width: 1440px){.VPSidebar[data-v-575e6a36]{padding-left:max(32px,calc((100% - (var(--vp-layout-max-width) - 64px)) / 2));width:calc((100% - (var(--vp-layout-max-width) - 64px)) / 2 + var(--vp-sidebar-width) - 32px)}}@media (min-width: 960px){.curtain[data-v-575e6a36]{position:sticky;top:-64px;left:0;z-index:1;margin-top:calc(var(--vp-nav-height) * -1);margin-right:-32px;margin-left:-32px;height:var(--vp-nav-height);background-color:var(--vp-sidebar-bg-color)}}.nav[data-v-575e6a36]{outline:0}.group+.group[data-v-575e6a36]{border-top:1px solid var(--vp-c-divider);padding-top:10px}@media (min-width: 960px){.group[data-v-575e6a36]{padding-top:10px;width:calc(var(--vp-sidebar-width) - 64px)}}.VPSkipLink[data-v-0f60ec36]{top:8px;left:8px;padding:8px 16px;z-index:999;border-radius:8px;font-size:12px;font-weight:700;text-decoration:none;color:var(--vp-c-brand-1);box-shadow:var(--vp-shadow-3);background-color:var(--vp-c-bg)}.VPSkipLink[data-v-0f60ec36]:focus{height:auto;width:auto;clip:auto;-webkit-clip-path:none;clip-path:none}@media (min-width: 1280px){.VPSkipLink[data-v-0f60ec36]{top:14px;left:16px}}.Layout[data-v-5d98c3a5]{display:flex;flex-direction:column;min-height:100vh}.VPHomeSponsors[data-v-3d121b4a]{border-top:1px solid var(--vp-c-gutter);padding-top:88px!important}.VPHomeSponsors[data-v-3d121b4a]{margin:96px 0}@media (min-width: 768px){.VPHomeSponsors[data-v-3d121b4a]{margin:128px 0}}.VPHomeSponsors[data-v-3d121b4a]{padding:0 24px}@media (min-width: 768px){.VPHomeSponsors[data-v-3d121b4a]{padding:0 48px}}@media (min-width: 960px){.VPHomeSponsors[data-v-3d121b4a]{padding:0 64px}}.container[data-v-3d121b4a]{margin:0 auto;max-width:1152px}.love[data-v-3d121b4a]{margin:0 auto;width:-moz-fit-content;width:fit-content;font-size:28px;color:var(--vp-c-text-3)}.icon[data-v-3d121b4a]{display:inline-block}.message[data-v-3d121b4a]{margin:0 auto;padding-top:10px;max-width:320px;text-align:center;line-height:24px;font-size:16px;font-weight:500;color:var(--vp-c-text-2)}.sponsors[data-v-3d121b4a]{padding-top:32px}.action[data-v-3d121b4a]{padding-top:40px;text-align:center}.VPTeamPage[data-v-7c57f839]{margin:96px 0}@media (min-width: 768px){.VPTeamPage[data-v-7c57f839]{margin:128px 0}}.VPHome .VPTeamPageTitle[data-v-7c57f839-s]{border-top:1px solid var(--vp-c-gutter);padding-top:88px!important}.VPTeamPageSection+.VPTeamPageSection[data-v-7c57f839-s],.VPTeamMembers+.VPTeamPageSection[data-v-7c57f839-s]{margin-top:64px}.VPTeamMembers+.VPTeamMembers[data-v-7c57f839-s]{margin-top:24px}@media (min-width: 768px){.VPTeamPageTitle+.VPTeamPageSection[data-v-7c57f839-s]{margin-top:16px}.VPTeamPageSection+.VPTeamPageSection[data-v-7c57f839-s],.VPTeamMembers+.VPTeamPageSection[data-v-7c57f839-s]{margin-top:96px}}.VPTeamMembers[data-v-7c57f839-s]{padding:0 24px}@media (min-width: 768px){.VPTeamMembers[data-v-7c57f839-s]{padding:0 48px}}@media (min-width: 960px){.VPTeamMembers[data-v-7c57f839-s]{padding:0 64px}}.VPTeamPageTitle[data-v-bf2cbdac]{padding:48px 32px;text-align:center}@media (min-width: 768px){.VPTeamPageTitle[data-v-bf2cbdac]{padding:64px 48px 48px}}@media (min-width: 960px){.VPTeamPageTitle[data-v-bf2cbdac]{padding:80px 64px 48px}}.title[data-v-bf2cbdac]{letter-spacing:0;line-height:44px;font-size:36px;font-weight:500}@media (min-width: 768px){.title[data-v-bf2cbdac]{letter-spacing:-.5px;line-height:56px;font-size:48px}}.lead[data-v-bf2cbdac]{margin:0 auto;max-width:512px;padding-top:12px;line-height:24px;font-size:16px;font-weight:500;color:var(--vp-c-text-2)}@media (min-width: 768px){.lead[data-v-bf2cbdac]{max-width:592px;letter-spacing:.15px;line-height:28px;font-size:20px}}.VPTeamPageSection[data-v-b1a88750]{padding:0 32px}@media (min-width: 768px){.VPTeamPageSection[data-v-b1a88750]{padding:0 48px}}@media (min-width: 960px){.VPTeamPageSection[data-v-b1a88750]{padding:0 64px}}.title[data-v-b1a88750]{position:relative;margin:0 auto;max-width:1152px;text-align:center;color:var(--vp-c-text-2)}.title-line[data-v-b1a88750]{position:absolute;top:16px;left:0;width:100%;height:1px;background-color:var(--vp-c-divider)}.title-text[data-v-b1a88750]{position:relative;display:inline-block;padding:0 24px;letter-spacing:0;line-height:32px;font-size:20px;font-weight:500;background-color:var(--vp-c-bg)}.lead[data-v-b1a88750]{margin:0 auto;max-width:480px;padding-top:12px;text-align:center;line-height:24px;font-size:16px;font-weight:500;color:var(--vp-c-text-2)}.members[data-v-b1a88750]{padding-top:40px}.VPTeamMembersItem[data-v-f3fa364a]{display:flex;flex-direction:column;gap:2px;border-radius:12px;width:100%;height:100%;overflow:hidden}.VPTeamMembersItem.small .profile[data-v-f3fa364a]{padding:32px}.VPTeamMembersItem.small .data[data-v-f3fa364a]{padding-top:20px}.VPTeamMembersItem.small .avatar[data-v-f3fa364a]{width:64px;height:64px}.VPTeamMembersItem.small .name[data-v-f3fa364a]{line-height:24px;font-size:16px}.VPTeamMembersItem.small .affiliation[data-v-f3fa364a]{padding-top:4px;line-height:20px;font-size:14px}.VPTeamMembersItem.small .desc[data-v-f3fa364a]{padding-top:12px;line-height:20px;font-size:14px}.VPTeamMembersItem.small .links[data-v-f3fa364a]{margin:0 -16px -20px;padding:10px 0 0}.VPTeamMembersItem.medium .profile[data-v-f3fa364a]{padding:48px 32px}.VPTeamMembersItem.medium .data[data-v-f3fa364a]{padding-top:24px;text-align:center}.VPTeamMembersItem.medium .avatar[data-v-f3fa364a]{width:96px;height:96px}.VPTeamMembersItem.medium .name[data-v-f3fa364a]{letter-spacing:.15px;line-height:28px;font-size:20px}.VPTeamMembersItem.medium .affiliation[data-v-f3fa364a]{padding-top:4px;font-size:16px}.VPTeamMembersItem.medium .desc[data-v-f3fa364a]{padding-top:16px;max-width:288px;font-size:16px}.VPTeamMembersItem.medium .links[data-v-f3fa364a]{margin:0 -16px -12px;padding:16px 12px 0}.profile[data-v-f3fa364a]{flex-grow:1;background-color:var(--vp-c-bg-soft)}.data[data-v-f3fa364a]{text-align:center}.avatar[data-v-f3fa364a]{position:relative;flex-shrink:0;margin:0 auto;border-radius:50%;box-shadow:var(--vp-shadow-3)}.avatar-img[data-v-f3fa364a]{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;-o-object-fit:cover;object-fit:cover}.name[data-v-f3fa364a]{margin:0;font-weight:600}.affiliation[data-v-f3fa364a]{margin:0;font-weight:500;color:var(--vp-c-text-2)}.org.link[data-v-f3fa364a]{color:var(--vp-c-text-2);transition:color .25s}.org.link[data-v-f3fa364a]:hover{color:var(--vp-c-brand-1)}.desc[data-v-f3fa364a]{margin:0 auto}.desc[data-v-f3fa364a] a{font-weight:500;color:var(--vp-c-brand-1);text-decoration-style:dotted;transition:color .25s}.links[data-v-f3fa364a]{display:flex;justify-content:center;height:56px}.sp-link[data-v-f3fa364a]{display:flex;justify-content:center;align-items:center;text-align:center;padding:16px;font-size:14px;font-weight:500;color:var(--vp-c-sponsor);background-color:var(--vp-c-bg-soft);transition:color .25s,background-color .25s}.sp .sp-link.link[data-v-f3fa364a]:hover,.sp .sp-link.link[data-v-f3fa364a]:focus{outline:none;color:var(--vp-c-white);background-color:var(--vp-c-sponsor)}.sp-icon[data-v-f3fa364a]{margin-right:8px;font-size:16px}.VPTeamMembers.small .container[data-v-6cb0dbc4]{grid-template-columns:repeat(auto-fit,minmax(224px,1fr))}.VPTeamMembers.small.count-1 .container[data-v-6cb0dbc4]{max-width:276px}.VPTeamMembers.small.count-2 .container[data-v-6cb0dbc4]{max-width:576px}.VPTeamMembers.small.count-3 .container[data-v-6cb0dbc4]{max-width:876px}.VPTeamMembers.medium .container[data-v-6cb0dbc4]{grid-template-columns:repeat(auto-fit,minmax(256px,1fr))}@media (min-width: 375px){.VPTeamMembers.medium .container[data-v-6cb0dbc4]{grid-template-columns:repeat(auto-fit,minmax(288px,1fr))}}.VPTeamMembers.medium.count-1 .container[data-v-6cb0dbc4]{max-width:368px}.VPTeamMembers.medium.count-2 .container[data-v-6cb0dbc4]{max-width:760px}.container[data-v-6cb0dbc4]{display:grid;gap:24px;margin:0 auto;max-width:1152px}@keyframes ms-motion-fadeIn{0%{opacity:0}to{opacity:1}}@keyframes ms-motion-fadeOut{0%{opacity:1}to{opacity:0}}@keyframes ms-motion-scaleDownIn{0%{transform:scale3d(1.15,1.15,1)}to{transform:scaleZ(1)}}@keyframes ms-motion-scaleDownOut{0%{transform:scaleZ(1)}to{transform:scale3d(.9,.9,1)}}@keyframes ms-motion-slideLeftOut{0%{transform:translateZ(0)}to{transform:translate3d(-48px,0,0)}}@keyframes ms-motion-slideRightOut{0%{transform:translateZ(0)}to{transform:translate3d(48px,0,0)}}@keyframes ms-motion-slideLeftIn{0%{transform:translate3d(48px,0,0)}to{transform:translateZ(0)}}@keyframes ms-motion-slideRightIn{0%{transform:translate3d(-48px,0,0)}to{transform:translateZ(0)}}@keyframes ms-motion-slideUpOut{0%{transform:translateZ(0)}to{transform:translate3d(0,-48px,0)}}@keyframes ms-motion-slideDownOut{0%{transform:translateZ(0)}to{transform:translate3d(0,48px,0)}}@keyframes ms-motion-slideUpIn{0%{transform:translate3d(0,48px,0)}to{transform:translateZ(0)}}@keyframes ms-motion-slideDownIn{0%{transform:translate3d(0,-48px,0)}to{transform:translateZ(0)}}.ms-motion-fadeIn{animation:ms-motion-fadeIn .1s cubic-bezier(0,0,1,1) both}.ms-motion-fadeOut{animation:ms-motion-fadeOut .1s cubic-bezier(0,0,1,1) both}.ms-motion-scaleDownIn{animation:ms-motion-scaleDownIn .3s cubic-bezier(.1,.9,.2,1) both,ms-motion-fadeIn .1s cubic-bezier(0,0,1,1) both}.ms-motion-scaleDownOut{animation:ms-motion-scaleDownOut .3s cubic-bezier(.1,.9,.2,1) both,ms-motion-fadeOut .1s cubic-bezier(0,0,1,1) both}[dir=ltr] .ms-motion-slideLeftOut{animation:ms-motion-slideLeftOut .1s cubic-bezier(.9,.1,1,.2) both,ms-motion-fadeOut .1s cubic-bezier(0,0,1,1) both}[dir=rtl] .ms-motion-slideLeftOut,[dir=ltr] .ms-motion-slideRightOut{animation:ms-motion-slideRightOut .1s cubic-bezier(.9,.1,1,.2) both,ms-motion-fadeOut .1s cubic-bezier(0,0,1,1) both}[dir=rtl] .ms-motion-slideRightOut{animation:ms-motion-slideLeftOut .1s cubic-bezier(.9,.1,1,.2) both,ms-motion-fadeOut .1s cubic-bezier(0,0,1,1) both}[dir=ltr] .ms-motion-slideLeftIn{animation:ms-motion-slideLeftIn .1s cubic-bezier(.1,.9,.2,1) both,ms-motion-fadeIn .1s cubic-bezier(0,0,1,1) both}[dir=rtl] .ms-motion-slideLeftIn,[dir=ltr] .ms-motion-slideRightIn{animation:ms-motion-slideRightIn .1s cubic-bezier(.1,.9,.2,1) both,ms-motion-fadeIn .1s cubic-bezier(0,0,1,1) both}[dir=rtl] .ms-motion-slideRightIn{animation:ms-motion-slideLeftIn .1s cubic-bezier(.1,.9,.2,1) both,ms-motion-fadeIn .1s cubic-bezier(0,0,1,1) both}.ms-motion-slideUpOut{animation:ms-motion-slideUpOut .1s cubic-bezier(.9,.1,1,.2) both,ms-motion-fadeOut .1s cubic-bezier(0,0,1,1) both}.ms-motion-slideDownOut{animation:ms-motion-slideDownOut .1s cubic-bezier(.9,.1,1,.2) both,ms-motion-fadeOut .1s cubic-bezier(0,0,1,1) both}.ms-motion-slideUpIn{animation:ms-motion-slideUpIn .1s cubic-bezier(.1,.9,.2,1) both,ms-motion-fadeIn .1s cubic-bezier(0,0,1,1) both}.ms-motion-slideDownIn{animation:ms-motion-slideDownIn .1s cubic-bezier(.1,.9,.2,1) both,ms-motion-fadeIn .1s cubic-bezier(0,0,1,1) both}@keyframes ms-slideRightIn10{0%{transform:translate3d(-10px,0,0)}to{transform:translateZ(0)}}@keyframes ms-slideRightIn20{0%{transform:translate3d(-20px,0,0)}to{transform:translateZ(0)}}@keyframes ms-slideRightIn40{0%{transform:translate3d(-40px,0,0)}to{transform:translateZ(0)}}@keyframes ms-slideRightIn400{0%{transform:translate3d(-400px,0,0)}to{transform:translateZ(0)}}@keyframes ms-slideRightOut40{0%{transform:translateZ(0)}to{transform:translate3d(40px,0,0)}}@keyframes ms-slideRightOut400{0%{transform:translateZ(0)}to{transform:translate3d(400px,0,0)}}@keyframes ms-slideLeftIn10{0%{transform:translate3d(10px,0,0)}to{transform:translateZ(0)}}@keyframes ms-slideLeftIn20{0%{transform:translate3d(20px,0,0)}to{transform:translateZ(0)}}@keyframes ms-slideLeftIn40{0%{transform:translate3d(40px,0,0)}to{transform:translateZ(0)}}@keyframes ms-slideLeftIn400{0%{transform:translate3d(400px,0,0)}to{transform:translateZ(0)}}@keyframes ms-slideLeftOut40{0%{transform:translateZ(0)}to{transform:translate3d(-40px,0,0)}}@keyframes ms-slideLeftOut400{0%{transform:translateZ(0)}to{transform:translate3d(-400px,0,0)}}@keyframes ms-slideUpIn10{0%{transform:translate3d(0,10px,0)}to{transform:translateZ(0)}}@keyframes ms-slideUpIn20{0%{transform:translate3d(0,20px,0)}to{transform:translateZ(0)}}@keyframes ms-slideDownIn10{0%{transform:translate3d(0,-10px,0)}to{transform:translateZ(0)}}@keyframes ms-slideDownIn20{0%{transform:translate3d(0,-20px,0)}to{transform:translateZ(0)}}@keyframes ms-slideUpOut10{0%{transform:translateZ(0)}to{transform:translate3d(0,-10px,0)}}@keyframes ms-slideUpOut20{0%{transform:translateZ(0)}to{transform:translate3d(0,-20px,0)}}@keyframes ms-slideDownOut10{0%{transform:translateZ(0)}to{transform:translate3d(0,10px,0)}}@keyframes ms-slideDownOut20{0%{transform:translateZ(0)}to{transform:translate3d(0,20px,0)}}@keyframes ms-scaleUp100{0%{transform:scale3d(.98,.98,1)}to{transform:scaleZ(1)}}@keyframes ms-scaleUp103{0%{transform:scaleZ(1)}to{transform:scale3d(1.03,1.03,1)}}@keyframes ms-scaleDown98{0%{transform:scaleZ(1)}to{transform:scale3d(.98,.98,1)}}@keyframes ms-scaleDown100{0%{transform:scale3d(1.03,1.03,1)}to{transform:scaleZ(1)}}@keyframes ms-fadeIn{0%{opacity:0;animation-timing-function:cubic-bezier(.1,.25,.75,.9)}to{opacity:1}}@keyframes ms-fadeOut{0%{opacity:1;animation-timing-function:cubic-bezier(.1,.25,.75,.9)}to{opacity:0}}@keyframes ms-rotate90{0%{transform:rotate(0)}to{transform:rotate(90deg)}}@keyframes ms-rotateN90{0%{transform:rotate(90deg)}to{transform:rotate(0)}}[dir=ltr] .ms-slideRightIn10{animation-name:ms-fadeIn,ms-slideRightIn10;animation-duration:367ms;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}@media (prefers-reduced-motion: reduce){[dir=ltr] .ms-slideRightIn10{animation:none}}[dir=rtl] .ms-slideRightIn10{animation-name:ms-fadeIn,ms-slideLeftIn10;animation-duration:367ms;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}@media (prefers-reduced-motion: reduce){[dir=rtl] .ms-slideRightIn10{animation:none}}[dir=ltr] .ms-slideRightIn20{animation-name:ms-fadeIn,ms-slideRightIn20;animation-duration:367ms;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}@media (prefers-reduced-motion: reduce){[dir=ltr] .ms-slideRightIn20{animation:none}}[dir=rtl] .ms-slideRightIn20{animation-name:ms-fadeIn,ms-slideLeftIn20;animation-duration:367ms;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}@media (prefers-reduced-motion: reduce){[dir=rtl] .ms-slideRightIn20{animation:none}}[dir=ltr] .ms-slideRightIn40{animation-name:ms-fadeIn,ms-slideRightIn40;animation-duration:367ms;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}@media (prefers-reduced-motion: reduce){[dir=ltr] .ms-slideRightIn40{animation:none}}[dir=rtl] .ms-slideRightIn40{animation-name:ms-fadeIn,ms-slideLeftIn40;animation-duration:367ms;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}@media (prefers-reduced-motion: reduce){[dir=rtl] .ms-slideRightIn40{animation:none}}[dir=ltr] .ms-slideRightIn400{animation-name:ms-fadeIn,ms-slideRightIn400;animation-duration:367ms;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}@media (prefers-reduced-motion: reduce){[dir=ltr] .ms-slideRightIn400{animation:none}}[dir=rtl] .ms-slideRightIn400{animation-name:ms-fadeIn,ms-slideLeftIn400;animation-duration:367ms;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}@media (prefers-reduced-motion: reduce){[dir=rtl] .ms-slideRightIn400{animation:none}}[dir=ltr] .ms-slideRightOut40{animation-name:ms-fadeOut,ms-slideRightOut40;animation-duration:167ms;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@media (prefers-reduced-motion: reduce){[dir=ltr] .ms-slideRightOut40{animation:none}}[dir=rtl] .ms-slideRightOut40{animation-name:ms-fadeOut,ms-slideLeftOut40;animation-duration:167ms;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@media (prefers-reduced-motion: reduce){[dir=rtl] .ms-slideRightOut40{animation:none}}[dir=ltr] .ms-slideRightOut400{animation-name:ms-fadeOut,ms-slideRightOut400;animation-duration:167ms;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@media (prefers-reduced-motion: reduce){[dir=ltr] .ms-slideRightOut400{animation:none}}[dir=rtl] .ms-slideRightOut400{animation-name:ms-fadeOut,ms-slideLeftOut400;animation-duration:167ms;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@media (prefers-reduced-motion: reduce){[dir=rtl] .ms-slideRightOut400{animation:none}}[dir=ltr] .ms-slideLeftIn10{animation-name:ms-fadeIn,ms-slideLeftIn10;animation-duration:367ms;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}@media (prefers-reduced-motion: reduce){[dir=ltr] .ms-slideLeftIn10{animation:none}}[dir=rtl] .ms-slideLeftIn10{animation-name:ms-fadeIn,ms-slideRightIn10;animation-duration:367ms;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}@media (prefers-reduced-motion: reduce){[dir=rtl] .ms-slideLeftIn10{animation:none}}[dir=ltr] .ms-slideLeftIn20{animation-name:ms-fadeIn,ms-slideLeftIn20;animation-duration:367ms;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}@media (prefers-reduced-motion: reduce){[dir=ltr] .ms-slideLeftIn20{animation:none}}[dir=rtl] .ms-slideLeftIn20{animation-name:ms-fadeIn,ms-slideRightIn20;animation-duration:367ms;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}@media (prefers-reduced-motion: reduce){[dir=rtl] .ms-slideLeftIn20{animation:none}}[dir=ltr] .ms-slideLeftIn40{animation-name:ms-fadeIn,ms-slideLeftIn40;animation-duration:367ms;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}@media (prefers-reduced-motion: reduce){[dir=ltr] .ms-slideLeftIn40{animation:none}}[dir=rtl] .ms-slideLeftIn40{animation-name:ms-fadeIn,ms-slideRightIn40;animation-duration:367ms;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}@media (prefers-reduced-motion: reduce){[dir=rtl] .ms-slideLeftIn40{animation:none}}[dir=ltr] .ms-slideLeftIn400{animation-name:ms-fadeIn,ms-slideLeftIn400;animation-duration:367ms;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}@media (prefers-reduced-motion: reduce){[dir=ltr] .ms-slideLeftIn400{animation:none}}[dir=rtl] .ms-slideLeftIn400{animation-name:ms-fadeIn,ms-slideRightIn400;animation-duration:367ms;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}@media (prefers-reduced-motion: reduce){[dir=rtl] .ms-slideLeftIn400{animation:none}}[dir=ltr] .ms-slideLeftOut40{animation-name:ms-fadeOut,ms-slideLeftOut40;animation-duration:167ms;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@media (prefers-reduced-motion: reduce){[dir=ltr] .ms-slideLeftOut40{animation:none}}[dir=rtl] .ms-slideLeftOut40{animation-name:ms-fadeOut,ms-slideRightOut40;animation-duration:167ms;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@media (prefers-reduced-motion: reduce){[dir=rtl] .ms-slideLeftOut40{animation:none}}[dir=ltr] .ms-slideLeftOut400{animation-name:ms-fadeOut,ms-slideLeftOut400;animation-duration:167ms;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@media (prefers-reduced-motion: reduce){[dir=ltr] .ms-slideLeftOut400{animation:none}}[dir=rtl] .ms-slideLeftOut400{animation-name:ms-fadeOut,ms-slideRightOut400;animation-duration:167ms;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@media (prefers-reduced-motion: reduce){[dir=rtl] .ms-slideLeftOut400{animation:none}}.ms-slideUpIn10{animation-name:ms-fadeIn,ms-slideUpIn10;animation-duration:167ms;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@media (prefers-reduced-motion: reduce){.ms-slideUpIn10{animation:none}}.ms-slideUpIn20{animation-name:ms-fadeIn,ms-slideUpIn20;animation-duration:367ms;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}@media (prefers-reduced-motion: reduce){.ms-slideUpIn20{animation:none}}.ms-slideDownIn10{animation-name:ms-fadeIn,ms-slideDownIn10;animation-duration:167ms;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@media (prefers-reduced-motion: reduce){.ms-slideDownIn10{animation:none}}.ms-slideDownIn20{animation-name:ms-fadeIn,ms-slideDownIn20;animation-duration:367ms;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}@media (prefers-reduced-motion: reduce){.ms-slideDownIn20{animation:none}}.ms-slideUpOut10{animation-name:ms-fadeOut,ms-slideUpOut10;animation-duration:167ms;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@media (prefers-reduced-motion: reduce){.ms-slideUpOut10{animation:none}}.ms-slideUpOut20{animation-name:ms-fadeOut,ms-slideUpOut20;animation-duration:167ms;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@media (prefers-reduced-motion: reduce){.ms-slideUpOut20{animation:none}}.ms-slideDownOut10{animation-name:ms-fadeOut,ms-slideDownOut10;animation-duration:167ms;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@media (prefers-reduced-motion: reduce){.ms-slideDownOut10{animation:none}}.ms-slideDownOut20{animation-name:ms-fadeOut,ms-slideDownOut20;animation-duration:167ms;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@media (prefers-reduced-motion: reduce){.ms-slideDownOut20{animation:none}}.ms-scaleUpIn100{animation-name:ms-fadeIn,ms-scaleUp100;animation-duration:367ms;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}@media (prefers-reduced-motion: reduce){.ms-scaleUpIn100{animation:none}}.ms-scaleUpOut103{animation-name:ms-fadeOut,ms-scaleUp103;animation-duration:167ms;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@media (prefers-reduced-motion: reduce){.ms-scaleUpOut103{animation:none}}.ms-scaleDownOut98{animation-name:ms-fadeOut,ms-scaleDown98;animation-duration:167ms;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@media (prefers-reduced-motion: reduce){.ms-scaleDownOut98{animation:none}}.ms-scaleDownIn100{animation-name:ms-fadeIn,ms-scaleDown100;animation-duration:367ms;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}@media (prefers-reduced-motion: reduce){.ms-scaleDownIn100{animation:none}}.ms-fadeIn100{animation-name:ms-fadeIn;animation-duration:167ms;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}@media (prefers-reduced-motion: reduce){.ms-fadeIn100{animation:none}}.ms-fadeIn200{animation-name:ms-fadeIn;animation-duration:267ms;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}@media (prefers-reduced-motion: reduce){.ms-fadeIn200{animation:none}}.ms-fadeIn400{animation-name:ms-fadeIn;animation-duration:367ms;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}@media (prefers-reduced-motion: reduce){.ms-fadeIn400{animation:none}}.ms-fadeIn500{animation-name:ms-fadeIn;animation-duration:467ms;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}@media (prefers-reduced-motion: reduce){.ms-fadeIn500{animation:none}}.ms-fadeOut100{animation-name:ms-fadeOut;animation-duration:.1s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}@media (prefers-reduced-motion: reduce){.ms-fadeOut100{animation:none}}.ms-fadeOut200{animation-name:ms-fadeOut;animation-duration:167ms;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}@media (prefers-reduced-motion: reduce){.ms-fadeOut200{animation:none}}.ms-fadeOut400{animation-name:ms-fadeOut;animation-duration:367ms;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}@media (prefers-reduced-motion: reduce){.ms-fadeOut400{animation:none}}.ms-fadeOut500{animation-name:ms-fadeOut;animation-duration:467ms;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both}@media (prefers-reduced-motion: reduce){.ms-fadeOut500{animation:none}}.ms-expandCollapse100{transition:height .1s cubic-bezier(.1,.25,.75,.9)}@media (prefers-reduced-motion: reduce){.ms-expandCollapse100{transition:none}}.ms-expandCollapse200{transition:height 167ms cubic-bezier(.1,.25,.75,.9)}@media (prefers-reduced-motion: reduce){.ms-expandCollapse200{transition:none}}.ms-expandCollapse400{transition:height 367ms cubic-bezier(.1,.25,.75,.9)}@media (prefers-reduced-motion: reduce){.ms-expandCollapse400{transition:none}}.ms-delay100{animation-delay:167ms}.ms-delay200{animation-delay:267ms}[dir=ltr] .ms-rotate90deg{animation-name:ms-rotate90;animation-duration:.1s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@media (prefers-reduced-motion: reduce){[dir=ltr] .ms-rotate90deg{animation:none}}[dir=rtl] .ms-rotate90deg{animation-name:ms-rotateN90;animation-duration:.1s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@media (prefers-reduced-motion: reduce){[dir=rtl] .ms-rotate90deg{animation:none}}[dir=ltr] .ms-rotateN90deg{animation-name:ms-rotateN90;animation-duration:.1s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@media (prefers-reduced-motion: reduce){[dir=ltr] .ms-rotateN90deg{animation:none}}[dir=rtl] .ms-rotateN90deg{animation-name:ms-rotate90;animation-duration:.1s;animation-timing-function:cubic-bezier(.1,.25,.75,.9);animation-fill-mode:both}@media (prefers-reduced-motion: reduce){[dir=rtl] .ms-rotateN90deg{animation:none}}.ms-BrandIcon--access.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/access_16x1.png)}.ms-BrandIcon--access.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/access_48x1.png)}.ms-BrandIcon--access.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/access_96x1.png)}.ms-BrandIcon--excel.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/excel_16x1.png)}.ms-BrandIcon--excel.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/excel_48x1.png)}.ms-BrandIcon--excel.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/excel_96x1.png)}.ms-BrandIcon--infopath.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/infopath_16x1.png)}.ms-BrandIcon--infopath.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/infopath_48x1.png)}.ms-BrandIcon--infopath.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/infopath_96x1.png)}.ms-BrandIcon--office.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/office_16x1.png)}.ms-BrandIcon--office.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/office_48x1.png)}.ms-BrandIcon--office.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/office_96x1.png)}.ms-BrandIcon--onedrive.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/onedrive_16x1.png)}.ms-BrandIcon--onedrive.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/onedrive_48x1.png)}.ms-BrandIcon--onedrive.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/onedrive_96x1.png)}.ms-BrandIcon--onenote.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/onenote_16x1.png)}.ms-BrandIcon--onenote.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/onenote_48x1.png)}.ms-BrandIcon--onenote.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/onenote_96x1.png)}.ms-BrandIcon--outlook.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/outlook_16x1.png)}.ms-BrandIcon--outlook.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/outlook_48x1.png)}.ms-BrandIcon--outlook.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/outlook_96x1.png)}.ms-BrandIcon--powerpoint.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/powerpoint_16x1.png)}.ms-BrandIcon--powerpoint.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/powerpoint_48x1.png)}.ms-BrandIcon--powerpoint.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/powerpoint_96x1.png)}.ms-BrandIcon--project.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/project_16x1.png)}.ms-BrandIcon--project.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/project_48x1.png)}.ms-BrandIcon--project.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/project_96x1.png)}.ms-BrandIcon--sharepoint.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/sharepoint_16x1.png)}.ms-BrandIcon--sharepoint.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/sharepoint_48x1.png)}.ms-BrandIcon--sharepoint.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/sharepoint_96x1.png)}.ms-BrandIcon--teams.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/teams_16x1.png)}.ms-BrandIcon--teams.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/teams_48x1.png)}.ms-BrandIcon--teams.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/teams_96x1.png)}.ms-BrandIcon--visio.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/visio_16x1.png)}.ms-BrandIcon--visio.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/visio_48x1.png)}.ms-BrandIcon--visio.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/visio_96x1.png)}.ms-BrandIcon--word.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/word_16x1.png)}.ms-BrandIcon--word.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/word_48x1.png)}.ms-BrandIcon--word.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/word_96x1.png)}.ms-BrandIcon--accdb.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16/accdb.png)}.ms-BrandIcon--accdb.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48/accdb.png)}.ms-BrandIcon--accdb.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96/accdb.png)}.ms-BrandIcon--archive.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16/archive.png)}.ms-BrandIcon--archive.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48/archive.png)}.ms-BrandIcon--archive.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96/archive.png)}.ms-BrandIcon--audio.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16/audio.png)}.ms-BrandIcon--audio.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48/audio.png)}.ms-BrandIcon--audio.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96/audio.png)}.ms-BrandIcon--code.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16/code.png)}.ms-BrandIcon--code.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48/code.png)}.ms-BrandIcon--code.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96/code.png)}.ms-BrandIcon--csv.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16/csv.png)}.ms-BrandIcon--csv.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48/csv.png)}.ms-BrandIcon--csv.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96/csv.png)}.ms-BrandIcon--docset.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16/docset.png)}.ms-BrandIcon--docset.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48/docset.png)}.ms-BrandIcon--docset.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96/docset.png)}.ms-BrandIcon--docx.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16/docx.png)}.ms-BrandIcon--docx.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48/docx.png)}.ms-BrandIcon--docx.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96/docx.png)}.ms-BrandIcon--dotx.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16/dotx.png)}.ms-BrandIcon--dotx.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48/dotx.png)}.ms-BrandIcon--dotx.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96/dotx.png)}.ms-BrandIcon--email.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16/email.png)}.ms-BrandIcon--email.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48/email.png)}.ms-BrandIcon--email.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96/email.png)}.ms-BrandIcon--exe.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16/exe.png)}.ms-BrandIcon--exe.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48/exe.png)}.ms-BrandIcon--exe.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96/exe.png)}.ms-BrandIcon--folder.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16/folder.png)}.ms-BrandIcon--folder.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48/folder.png)}.ms-BrandIcon--folder.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96/folder.png)}.ms-BrandIcon--font.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16/font.png)}.ms-BrandIcon--font.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48/font.png)}.ms-BrandIcon--font.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96/font.png)}.ms-BrandIcon--genericfile.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16/genericfile.png)}.ms-BrandIcon--genericfile.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48/genericfile.png)}.ms-BrandIcon--genericfile.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96/genericfile.png)}.ms-BrandIcon--html.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16/html.png)}.ms-BrandIcon--html.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48/html.png)}.ms-BrandIcon--html.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96/html.png)}.ms-BrandIcon--link.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16/link.png)}.ms-BrandIcon--link.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48/link.png)}.ms-BrandIcon--link.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96/link.png)}.ms-BrandIcon--listitem.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16/listitem.png)}.ms-BrandIcon--listitem.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48/listitem.png)}.ms-BrandIcon--listitem.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96/listitem.png)}.ms-BrandIcon--model.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16/model.png)}.ms-BrandIcon--model.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48/model.png)}.ms-BrandIcon--model.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96/model.png)}.ms-BrandIcon--mpp.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16/mpp.png)}.ms-BrandIcon--mpp.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48/mpp.png)}.ms-BrandIcon--mpp.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96/mpp.png)}.ms-BrandIcon--mpt.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16/mpt.png)}.ms-BrandIcon--mpt.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48/mpt.png)}.ms-BrandIcon--mpt.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96/mpt.png)}.ms-BrandIcon--odp.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16/odp.png)}.ms-BrandIcon--odp.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48/odp.png)}.ms-BrandIcon--odp.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96/odp.png)}.ms-BrandIcon--ods.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16/ods.png)}.ms-BrandIcon--ods.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48/ods.png)}.ms-BrandIcon--ods.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96/ods.png)}.ms-BrandIcon--odt.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16/odt.png)}.ms-BrandIcon--odt.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48/odt.png)}.ms-BrandIcon--odt.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96/odt.png)}.ms-BrandIcon--one.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16/one.png)}.ms-BrandIcon--one.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48/one.png)}.ms-BrandIcon--one.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96/one.png)}.ms-BrandIcon--onetoc.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16/onetoc.png)}.ms-BrandIcon--onetoc.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48/onetoc.png)}.ms-BrandIcon--onetoc.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96/onetoc.png)}.ms-BrandIcon--pdf.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16/pdf.png)}.ms-BrandIcon--pdf.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48/pdf.png)}.ms-BrandIcon--pdf.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96/pdf.png)}.ms-BrandIcon--photo.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16/photo.png)}.ms-BrandIcon--photo.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48/photo.png)}.ms-BrandIcon--photo.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96/photo.png)}.ms-BrandIcon--potx.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16/potx.png)}.ms-BrandIcon--potx.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48/potx.png)}.ms-BrandIcon--potx.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96/potx.png)}.ms-BrandIcon--ppsx.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16/ppsx.png)}.ms-BrandIcon--ppsx.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48/ppsx.png)}.ms-BrandIcon--ppsx.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96/ppsx.png)}.ms-BrandIcon--pptx.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16/pptx.png)}.ms-BrandIcon--pptx.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48/pptx.png)}.ms-BrandIcon--pptx.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96/pptx.png)}.ms-BrandIcon--pub.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16/pub.png)}.ms-BrandIcon--pub.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48/pub.png)}.ms-BrandIcon--pub.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96/pub.png)}.ms-BrandIcon--rtf.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16/rtf.png)}.ms-BrandIcon--rtf.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48/rtf.png)}.ms-BrandIcon--rtf.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96/rtf.png)}.ms-BrandIcon--sharedfolder.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16/sharedfolder.png)}.ms-BrandIcon--sharedfolder.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48/sharedfolder.png)}.ms-BrandIcon--sharedfolder.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96/sharedfolder.png)}.ms-BrandIcon--spo.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16/spo.png)}.ms-BrandIcon--spo.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48/spo.png)}.ms-BrandIcon--spo.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96/spo.png)}.ms-BrandIcon--sysfile.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16/sysfile.png)}.ms-BrandIcon--sysfile.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48/sysfile.png)}.ms-BrandIcon--sysfile.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96/sysfile.png)}.ms-BrandIcon--txt.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16/txt.png)}.ms-BrandIcon--txt.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48/txt.png)}.ms-BrandIcon--txt.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96/txt.png)}.ms-BrandIcon--vector.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16/vector.png)}.ms-BrandIcon--vector.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48/vector.png)}.ms-BrandIcon--vector.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96/vector.png)}.ms-BrandIcon--video.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16/video.png)}.ms-BrandIcon--video.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48/video.png)}.ms-BrandIcon--video.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96/video.png)}.ms-BrandIcon--vsdx.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16/vsdx.png)}.ms-BrandIcon--vsdx.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48/vsdx.png)}.ms-BrandIcon--vsdx.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96/vsdx.png)}.ms-BrandIcon--vssx.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16/vssx.png)}.ms-BrandIcon--vssx.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48/vssx.png)}.ms-BrandIcon--vssx.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96/vssx.png)}.ms-BrandIcon--vstx.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16/vstx.png)}.ms-BrandIcon--vstx.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48/vstx.png)}.ms-BrandIcon--vstx.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96/vstx.png)}.ms-BrandIcon--xlsx.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16/xlsx.png)}.ms-BrandIcon--xlsx.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48/xlsx.png)}.ms-BrandIcon--xlsx.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96/xlsx.png)}.ms-BrandIcon--xltx.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16/xltx.png)}.ms-BrandIcon--xltx.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48/xltx.png)}.ms-BrandIcon--xltx.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96/xltx.png)}.ms-BrandIcon--xml.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16/xml.png)}.ms-BrandIcon--xml.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48/xml.png)}.ms-BrandIcon--xml.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96/xml.png)}.ms-BrandIcon--xsn.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16/xsn.png)}.ms-BrandIcon--xsn.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48/xsn.png)}.ms-BrandIcon--xsn.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96/xsn.png)}.ms-BrandIcon--zip.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16/zip.png)}.ms-BrandIcon--zip.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48/zip.png)}.ms-BrandIcon--zip.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96/zip.png)}.ms-BrandIcon--icon16{background-size:100% 100%;width:16px;height:16px}.ms-BrandIcon--icon48{background-size:100% 100%;width:48px;height:48px}.ms-BrandIcon--icon96{background-size:100% 100%;width:96px;height:96px}@media only screen and (-webkit-min-device-pixel-ratio: 1.5),only screen and (min-resolution: 144dpi){.ms-BrandIcon--access.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/access_16x1_5.png)}.ms-BrandIcon--access.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/access_48x1_5.png)}.ms-BrandIcon--access.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/access_96x1_5.png)}.ms-BrandIcon--excel.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/excel_16x1_5.png)}.ms-BrandIcon--excel.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/excel_48x1_5.png)}.ms-BrandIcon--excel.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/excel_96x1_5.png)}.ms-BrandIcon--infopath.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/infopath_16x1_5.png)}.ms-BrandIcon--infopath.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/infopath_48x1_5.png)}.ms-BrandIcon--infopath.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/infopath_96x1_5.png)}.ms-BrandIcon--office.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/office_16x1_5.png)}.ms-BrandIcon--office.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/office_48x1_5.png)}.ms-BrandIcon--office.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/office_96x1_5.png)}.ms-BrandIcon--onedrive.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/onedrive_16x1_5.png)}.ms-BrandIcon--onedrive.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/onedrive_48x1_5.png)}.ms-BrandIcon--onedrive.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/onedrive_96x1_5.png)}.ms-BrandIcon--onenote.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/onenote_16x1_5.png)}.ms-BrandIcon--onenote.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/onenote_48x1_5.png)}.ms-BrandIcon--onenote.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/onenote_96x1_5.png)}.ms-BrandIcon--outlook.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/outlook_16x1_5.png)}.ms-BrandIcon--outlook.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/outlook_48x1_5.png)}.ms-BrandIcon--outlook.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/outlook_96x1_5.png)}.ms-BrandIcon--powerpoint.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/powerpoint_16x1_5.png)}.ms-BrandIcon--powerpoint.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/powerpoint_48x1_5.png)}.ms-BrandIcon--powerpoint.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/powerpoint_96x1_5.png)}.ms-BrandIcon--project.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/project_16x1_5.png)}.ms-BrandIcon--project.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/project_48x1_5.png)}.ms-BrandIcon--project.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/project_96x1_5.png)}.ms-BrandIcon--sharepoint.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/sharepoint_16x1_5.png)}.ms-BrandIcon--sharepoint.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/sharepoint_48x1_5.png)}.ms-BrandIcon--sharepoint.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/sharepoint_96x1_5.png)}.ms-BrandIcon--teams.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/teams_16x1_5.png)}.ms-BrandIcon--teams.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/teams_48x1_5.png)}.ms-BrandIcon--teams.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/teams_96x1_5.png)}.ms-BrandIcon--visio.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/visio_16x1_5.png)}.ms-BrandIcon--visio.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/visio_48x1_5.png)}.ms-BrandIcon--visio.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/visio_96x1_5.png)}.ms-BrandIcon--word.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/word_16x1_5.png)}.ms-BrandIcon--word.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/word_48x1_5.png)}.ms-BrandIcon--word.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/word_96x1_5.png)}.ms-BrandIcon--accdb.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_1.5x/accdb.png)}.ms-BrandIcon--accdb.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_1.5x/accdb.png)}.ms-BrandIcon--accdb.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_1.5x/accdb.png)}.ms-BrandIcon--archive.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_1.5x/archive.png)}.ms-BrandIcon--archive.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_1.5x/archive.png)}.ms-BrandIcon--archive.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_1.5x/archive.png)}.ms-BrandIcon--audio.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_1.5x/audio.png)}.ms-BrandIcon--audio.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_1.5x/audio.png)}.ms-BrandIcon--audio.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_1.5x/audio.png)}.ms-BrandIcon--code.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_1.5x/code.png)}.ms-BrandIcon--code.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_1.5x/code.png)}.ms-BrandIcon--code.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_1.5x/code.png)}.ms-BrandIcon--csv.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_1.5x/csv.png)}.ms-BrandIcon--csv.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_1.5x/csv.png)}.ms-BrandIcon--csv.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_1.5x/csv.png)}.ms-BrandIcon--docset.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_1.5x/docset.png)}.ms-BrandIcon--docset.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_1.5x/docset.png)}.ms-BrandIcon--docset.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_1.5x/docset.png)}.ms-BrandIcon--docx.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_1.5x/docx.png)}.ms-BrandIcon--docx.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_1.5x/docx.png)}.ms-BrandIcon--docx.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_1.5x/docx.png)}.ms-BrandIcon--dotx.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_1.5x/dotx.png)}.ms-BrandIcon--dotx.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_1.5x/dotx.png)}.ms-BrandIcon--dotx.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_1.5x/dotx.png)}.ms-BrandIcon--email.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_1.5x/email.png)}.ms-BrandIcon--email.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_1.5x/email.png)}.ms-BrandIcon--email.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_1.5x/email.png)}.ms-BrandIcon--exe.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_1.5x/exe.png)}.ms-BrandIcon--exe.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_1.5x/exe.png)}.ms-BrandIcon--exe.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_1.5x/exe.png)}.ms-BrandIcon--folder.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_1.5x/folder.png)}.ms-BrandIcon--folder.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_1.5x/folder.png)}.ms-BrandIcon--folder.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_1.5x/folder.png)}.ms-BrandIcon--font.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_1.5x/font.png)}.ms-BrandIcon--font.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_1.5x/font.png)}.ms-BrandIcon--font.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_1.5x/font.png)}.ms-BrandIcon--genericfile.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_1.5x/genericfile.png)}.ms-BrandIcon--genericfile.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_1.5x/genericfile.png)}.ms-BrandIcon--genericfile.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_1.5x/genericfile.png)}.ms-BrandIcon--html.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_1.5x/html.png)}.ms-BrandIcon--html.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_1.5x/html.png)}.ms-BrandIcon--html.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_1.5x/html.png)}.ms-BrandIcon--link.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_1.5x/link.png)}.ms-BrandIcon--link.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_1.5x/link.png)}.ms-BrandIcon--link.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_1.5x/link.png)}.ms-BrandIcon--listitem.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_1.5x/listitem.png)}.ms-BrandIcon--listitem.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_1.5x/listitem.png)}.ms-BrandIcon--listitem.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_1.5x/listitem.png)}.ms-BrandIcon--model.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_1.5x/model.png)}.ms-BrandIcon--model.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_1.5x/model.png)}.ms-BrandIcon--model.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_1.5x/model.png)}.ms-BrandIcon--mpp.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_1.5x/mpp.png)}.ms-BrandIcon--mpp.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_1.5x/mpp.png)}.ms-BrandIcon--mpp.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_1.5x/mpp.png)}.ms-BrandIcon--mpt.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_1.5x/mpt.png)}.ms-BrandIcon--mpt.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_1.5x/mpt.png)}.ms-BrandIcon--mpt.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_1.5x/mpt.png)}.ms-BrandIcon--odp.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_1.5x/odp.png)}.ms-BrandIcon--odp.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_1.5x/odp.png)}.ms-BrandIcon--odp.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_1.5x/odp.png)}.ms-BrandIcon--ods.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_1.5x/ods.png)}.ms-BrandIcon--ods.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_1.5x/ods.png)}.ms-BrandIcon--ods.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_1.5x/ods.png)}.ms-BrandIcon--odt.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_1.5x/odt.png)}.ms-BrandIcon--odt.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_1.5x/odt.png)}.ms-BrandIcon--odt.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_1.5x/odt.png)}.ms-BrandIcon--one.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_1.5x/one.png)}.ms-BrandIcon--one.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_1.5x/one.png)}.ms-BrandIcon--one.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_1.5x/one.png)}.ms-BrandIcon--onetoc.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_1.5x/onetoc.png)}.ms-BrandIcon--onetoc.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_1.5x/onetoc.png)}.ms-BrandIcon--onetoc.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_1.5x/onetoc.png)}.ms-BrandIcon--pdf.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_1.5x/pdf.png)}.ms-BrandIcon--pdf.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_1.5x/pdf.png)}.ms-BrandIcon--pdf.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_1.5x/pdf.png)}.ms-BrandIcon--photo.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_1.5x/photo.png)}.ms-BrandIcon--photo.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_1.5x/photo.png)}.ms-BrandIcon--photo.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_1.5x/photo.png)}.ms-BrandIcon--potx.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_1.5x/potx.png)}.ms-BrandIcon--potx.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_1.5x/potx.png)}.ms-BrandIcon--potx.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_1.5x/potx.png)}.ms-BrandIcon--ppsx.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_1.5x/ppsx.png)}.ms-BrandIcon--ppsx.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_1.5x/ppsx.png)}.ms-BrandIcon--ppsx.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_1.5x/ppsx.png)}.ms-BrandIcon--pptx.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_1.5x/pptx.png)}.ms-BrandIcon--pptx.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_1.5x/pptx.png)}.ms-BrandIcon--pptx.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_1.5x/pptx.png)}.ms-BrandIcon--pub.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_1.5x/pub.png)}.ms-BrandIcon--pub.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_1.5x/pub.png)}.ms-BrandIcon--pub.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_1.5x/pub.png)}.ms-BrandIcon--rtf.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_1.5x/rtf.png)}.ms-BrandIcon--rtf.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_1.5x/rtf.png)}.ms-BrandIcon--rtf.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_1.5x/rtf.png)}.ms-BrandIcon--sharedfolder.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_1.5x/sharedfolder.png)}.ms-BrandIcon--sharedfolder.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_1.5x/sharedfolder.png)}.ms-BrandIcon--sharedfolder.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_1.5x/sharedfolder.png)}.ms-BrandIcon--spo.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_1.5x/spo.png)}.ms-BrandIcon--spo.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_1.5x/spo.png)}.ms-BrandIcon--spo.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_1.5x/spo.png)}.ms-BrandIcon--sysfile.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_1.5x/sysfile.png)}.ms-BrandIcon--sysfile.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_1.5x/sysfile.png)}.ms-BrandIcon--sysfile.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_1.5x/sysfile.png)}.ms-BrandIcon--txt.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_1.5x/txt.png)}.ms-BrandIcon--txt.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_1.5x/txt.png)}.ms-BrandIcon--txt.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_1.5x/txt.png)}.ms-BrandIcon--vector.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_1.5x/vector.png)}.ms-BrandIcon--vector.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_1.5x/vector.png)}.ms-BrandIcon--vector.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_1.5x/vector.png)}.ms-BrandIcon--video.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_1.5x/video.png)}.ms-BrandIcon--video.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_1.5x/video.png)}.ms-BrandIcon--video.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_1.5x/video.png)}.ms-BrandIcon--vsdx.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_1.5x/vsdx.png)}.ms-BrandIcon--vsdx.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_1.5x/vsdx.png)}.ms-BrandIcon--vsdx.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_1.5x/vsdx.png)}.ms-BrandIcon--vssx.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_1.5x/vssx.png)}.ms-BrandIcon--vssx.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_1.5x/vssx.png)}.ms-BrandIcon--vssx.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_1.5x/vssx.png)}.ms-BrandIcon--vstx.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_1.5x/vstx.png)}.ms-BrandIcon--vstx.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_1.5x/vstx.png)}.ms-BrandIcon--vstx.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_1.5x/vstx.png)}.ms-BrandIcon--xlsx.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_1.5x/xlsx.png)}.ms-BrandIcon--xlsx.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_1.5x/xlsx.png)}.ms-BrandIcon--xlsx.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_1.5x/xlsx.png)}.ms-BrandIcon--xltx.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_1.5x/xltx.png)}.ms-BrandIcon--xltx.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_1.5x/xltx.png)}.ms-BrandIcon--xltx.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_1.5x/xltx.png)}.ms-BrandIcon--xml.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_1.5x/xml.png)}.ms-BrandIcon--xml.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_1.5x/xml.png)}.ms-BrandIcon--xml.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_1.5x/xml.png)}.ms-BrandIcon--xsn.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_1.5x/xsn.png)}.ms-BrandIcon--xsn.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_1.5x/xsn.png)}.ms-BrandIcon--xsn.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_1.5x/xsn.png)}.ms-BrandIcon--zip.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_1.5x/zip.png)}.ms-BrandIcon--zip.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_1.5x/zip.png)}.ms-BrandIcon--zip.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_1.5x/zip.png)}}@media only screen and (-webkit-min-device-pixel-ratio: 2),only screen and (min-resolution: 192dpi){.ms-BrandIcon--access.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/access_16x2.png)}.ms-BrandIcon--access.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/access_48x2.png)}.ms-BrandIcon--access.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/access_96x2.png)}.ms-BrandIcon--excel.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/excel_16x2.png)}.ms-BrandIcon--excel.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/excel_48x2.png)}.ms-BrandIcon--excel.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/excel_96x2.png)}.ms-BrandIcon--infopath.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/infopath_16x2.png)}.ms-BrandIcon--infopath.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/infopath_48x2.png)}.ms-BrandIcon--infopath.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/infopath_96x2.png)}.ms-BrandIcon--office.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/office_16x2.png)}.ms-BrandIcon--office.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/office_48x2.png)}.ms-BrandIcon--office.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/office_96x2.png)}.ms-BrandIcon--onedrive.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/onedrive_16x2.png)}.ms-BrandIcon--onedrive.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/onedrive_48x2.png)}.ms-BrandIcon--onedrive.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/onedrive_96x2.png)}.ms-BrandIcon--onenote.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/onenote_16x2.png)}.ms-BrandIcon--onenote.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/onenote_48x2.png)}.ms-BrandIcon--onenote.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/onenote_96x2.png)}.ms-BrandIcon--outlook.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/outlook_16x2.png)}.ms-BrandIcon--outlook.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/outlook_48x2.png)}.ms-BrandIcon--outlook.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/outlook_96x2.png)}.ms-BrandIcon--powerpoint.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/powerpoint_16x2.png)}.ms-BrandIcon--powerpoint.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/powerpoint_48x2.png)}.ms-BrandIcon--powerpoint.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/powerpoint_96x2.png)}.ms-BrandIcon--project.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/project_16x2.png)}.ms-BrandIcon--project.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/project_48x2.png)}.ms-BrandIcon--project.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/project_96x2.png)}.ms-BrandIcon--sharepoint.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/sharepoint_16x2.png)}.ms-BrandIcon--sharepoint.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/sharepoint_48x2.png)}.ms-BrandIcon--sharepoint.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/sharepoint_96x2.png)}.ms-BrandIcon--teams.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/teams_16x2.png)}.ms-BrandIcon--teams.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/teams_48x2.png)}.ms-BrandIcon--teams.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/teams_96x2.png)}.ms-BrandIcon--visio.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/visio_16x2.png)}.ms-BrandIcon--visio.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/visio_48x2.png)}.ms-BrandIcon--visio.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/visio_96x2.png)}.ms-BrandIcon--word.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/word_16x2.png)}.ms-BrandIcon--word.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/word_48x2.png)}.ms-BrandIcon--word.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/word_96x2.png)}.ms-BrandIcon--accdb.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_2x/accdb.png)}.ms-BrandIcon--accdb.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_2x/accdb.png)}.ms-BrandIcon--accdb.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_2x/accdb.png)}.ms-BrandIcon--archive.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_2x/archive.png)}.ms-BrandIcon--archive.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_2x/archive.png)}.ms-BrandIcon--archive.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_2x/archive.png)}.ms-BrandIcon--audio.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_2x/audio.png)}.ms-BrandIcon--audio.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_2x/audio.png)}.ms-BrandIcon--audio.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_2x/audio.png)}.ms-BrandIcon--code.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_2x/code.png)}.ms-BrandIcon--code.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_2x/code.png)}.ms-BrandIcon--code.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_2x/code.png)}.ms-BrandIcon--csv.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_2x/csv.png)}.ms-BrandIcon--csv.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_2x/csv.png)}.ms-BrandIcon--csv.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_2x/csv.png)}.ms-BrandIcon--docset.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_2x/docset.png)}.ms-BrandIcon--docset.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_2x/docset.png)}.ms-BrandIcon--docset.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_2x/docset.png)}.ms-BrandIcon--docx.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_2x/docx.png)}.ms-BrandIcon--docx.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_2x/docx.png)}.ms-BrandIcon--docx.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_2x/docx.png)}.ms-BrandIcon--dotx.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_2x/dotx.png)}.ms-BrandIcon--dotx.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_2x/dotx.png)}.ms-BrandIcon--dotx.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_2x/dotx.png)}.ms-BrandIcon--email.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_2x/email.png)}.ms-BrandIcon--email.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_2x/email.png)}.ms-BrandIcon--email.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_2x/email.png)}.ms-BrandIcon--exe.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_2x/exe.png)}.ms-BrandIcon--exe.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_2x/exe.png)}.ms-BrandIcon--exe.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_2x/exe.png)}.ms-BrandIcon--folder.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_2x/folder.png)}.ms-BrandIcon--folder.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_2x/folder.png)}.ms-BrandIcon--folder.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_2x/folder.png)}.ms-BrandIcon--font.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_2x/font.png)}.ms-BrandIcon--font.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_2x/font.png)}.ms-BrandIcon--font.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_2x/font.png)}.ms-BrandIcon--genericfile.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_2x/genericfile.png)}.ms-BrandIcon--genericfile.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_2x/genericfile.png)}.ms-BrandIcon--genericfile.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_2x/genericfile.png)}.ms-BrandIcon--html.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_2x/html.png)}.ms-BrandIcon--html.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_2x/html.png)}.ms-BrandIcon--html.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_2x/html.png)}.ms-BrandIcon--link.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_2x/link.png)}.ms-BrandIcon--link.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_2x/link.png)}.ms-BrandIcon--link.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_2x/link.png)}.ms-BrandIcon--listitem.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_2x/listitem.png)}.ms-BrandIcon--listitem.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_2x/listitem.png)}.ms-BrandIcon--listitem.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_2x/listitem.png)}.ms-BrandIcon--model.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_2x/model.png)}.ms-BrandIcon--model.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_2x/model.png)}.ms-BrandIcon--model.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_2x/model.png)}.ms-BrandIcon--mpp.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_2x/mpp.png)}.ms-BrandIcon--mpp.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_2x/mpp.png)}.ms-BrandIcon--mpp.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_2x/mpp.png)}.ms-BrandIcon--mpt.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_2x/mpt.png)}.ms-BrandIcon--mpt.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_2x/mpt.png)}.ms-BrandIcon--mpt.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_2x/mpt.png)}.ms-BrandIcon--odp.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_2x/odp.png)}.ms-BrandIcon--odp.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_2x/odp.png)}.ms-BrandIcon--odp.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_2x/odp.png)}.ms-BrandIcon--ods.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_2x/ods.png)}.ms-BrandIcon--ods.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_2x/ods.png)}.ms-BrandIcon--ods.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_2x/ods.png)}.ms-BrandIcon--odt.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_2x/odt.png)}.ms-BrandIcon--odt.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_2x/odt.png)}.ms-BrandIcon--odt.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_2x/odt.png)}.ms-BrandIcon--one.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_2x/one.png)}.ms-BrandIcon--one.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_2x/one.png)}.ms-BrandIcon--one.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_2x/one.png)}.ms-BrandIcon--onetoc.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_2x/onetoc.png)}.ms-BrandIcon--onetoc.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_2x/onetoc.png)}.ms-BrandIcon--onetoc.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_2x/onetoc.png)}.ms-BrandIcon--pdf.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_2x/pdf.png)}.ms-BrandIcon--pdf.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_2x/pdf.png)}.ms-BrandIcon--pdf.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_2x/pdf.png)}.ms-BrandIcon--photo.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_2x/photo.png)}.ms-BrandIcon--photo.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_2x/photo.png)}.ms-BrandIcon--photo.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_2x/photo.png)}.ms-BrandIcon--potx.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_2x/potx.png)}.ms-BrandIcon--potx.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_2x/potx.png)}.ms-BrandIcon--potx.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_2x/potx.png)}.ms-BrandIcon--ppsx.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_2x/ppsx.png)}.ms-BrandIcon--ppsx.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_2x/ppsx.png)}.ms-BrandIcon--ppsx.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_2x/ppsx.png)}.ms-BrandIcon--pptx.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_2x/pptx.png)}.ms-BrandIcon--pptx.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_2x/pptx.png)}.ms-BrandIcon--pptx.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_2x/pptx.png)}.ms-BrandIcon--pub.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_2x/pub.png)}.ms-BrandIcon--pub.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_2x/pub.png)}.ms-BrandIcon--pub.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_2x/pub.png)}.ms-BrandIcon--rtf.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_2x/rtf.png)}.ms-BrandIcon--rtf.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_2x/rtf.png)}.ms-BrandIcon--rtf.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_2x/rtf.png)}.ms-BrandIcon--sharedfolder.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_2x/sharedfolder.png)}.ms-BrandIcon--sharedfolder.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_2x/sharedfolder.png)}.ms-BrandIcon--sharedfolder.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_2x/sharedfolder.png)}.ms-BrandIcon--spo.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_2x/spo.png)}.ms-BrandIcon--spo.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_2x/spo.png)}.ms-BrandIcon--spo.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_2x/spo.png)}.ms-BrandIcon--sysfile.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_2x/sysfile.png)}.ms-BrandIcon--sysfile.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_2x/sysfile.png)}.ms-BrandIcon--sysfile.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_2x/sysfile.png)}.ms-BrandIcon--txt.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_2x/txt.png)}.ms-BrandIcon--txt.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_2x/txt.png)}.ms-BrandIcon--txt.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_2x/txt.png)}.ms-BrandIcon--vector.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_2x/vector.png)}.ms-BrandIcon--vector.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_2x/vector.png)}.ms-BrandIcon--vector.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_2x/vector.png)}.ms-BrandIcon--video.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_2x/video.png)}.ms-BrandIcon--video.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_2x/video.png)}.ms-BrandIcon--video.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_2x/video.png)}.ms-BrandIcon--vsdx.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_2x/vsdx.png)}.ms-BrandIcon--vsdx.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_2x/vsdx.png)}.ms-BrandIcon--vsdx.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_2x/vsdx.png)}.ms-BrandIcon--vssx.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_2x/vssx.png)}.ms-BrandIcon--vssx.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_2x/vssx.png)}.ms-BrandIcon--vssx.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_2x/vssx.png)}.ms-BrandIcon--vstx.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_2x/vstx.png)}.ms-BrandIcon--vstx.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_2x/vstx.png)}.ms-BrandIcon--vstx.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_2x/vstx.png)}.ms-BrandIcon--xlsx.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_2x/xlsx.png)}.ms-BrandIcon--xlsx.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_2x/xlsx.png)}.ms-BrandIcon--xlsx.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_2x/xlsx.png)}.ms-BrandIcon--xltx.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_2x/xltx.png)}.ms-BrandIcon--xltx.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_2x/xltx.png)}.ms-BrandIcon--xltx.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_2x/xltx.png)}.ms-BrandIcon--xml.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_2x/xml.png)}.ms-BrandIcon--xml.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_2x/xml.png)}.ms-BrandIcon--xml.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_2x/xml.png)}.ms-BrandIcon--xsn.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_2x/xsn.png)}.ms-BrandIcon--xsn.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_2x/xsn.png)}.ms-BrandIcon--xsn.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_2x/xsn.png)}.ms-BrandIcon--zip.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_2x/zip.png)}.ms-BrandIcon--zip.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_2x/zip.png)}.ms-BrandIcon--zip.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_2x/zip.png)}}@media only screen and (-webkit-min-device-pixel-ratio: 3),only screen and (min-resolution: 288dpi){.ms-BrandIcon--access.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/access_16x3.png)}.ms-BrandIcon--access.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/access_48x3.png)}.ms-BrandIcon--access.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/access_96x3.png)}.ms-BrandIcon--excel.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/excel_16x3.png)}.ms-BrandIcon--excel.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/excel_48x3.png)}.ms-BrandIcon--excel.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/excel_96x3.png)}.ms-BrandIcon--infopath.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/infopath_16x3.png)}.ms-BrandIcon--infopath.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/infopath_48x3.png)}.ms-BrandIcon--infopath.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/infopath_96x3.png)}.ms-BrandIcon--office.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/office_16x3.png)}.ms-BrandIcon--office.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/office_48x3.png)}.ms-BrandIcon--office.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/office_96x3.png)}.ms-BrandIcon--onedrive.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/onedrive_16x3.png)}.ms-BrandIcon--onedrive.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/onedrive_48x3.png)}.ms-BrandIcon--onedrive.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/onedrive_96x3.png)}.ms-BrandIcon--onenote.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/onenote_16x3.png)}.ms-BrandIcon--onenote.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/onenote_48x3.png)}.ms-BrandIcon--onenote.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/onenote_96x3.png)}.ms-BrandIcon--outlook.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/outlook_16x3.png)}.ms-BrandIcon--outlook.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/outlook_48x3.png)}.ms-BrandIcon--outlook.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/outlook_96x3.png)}.ms-BrandIcon--powerpoint.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/powerpoint_16x3.png)}.ms-BrandIcon--powerpoint.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/powerpoint_48x3.png)}.ms-BrandIcon--powerpoint.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/powerpoint_96x3.png)}.ms-BrandIcon--project.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/project_16x3.png)}.ms-BrandIcon--project.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/project_48x3.png)}.ms-BrandIcon--project.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/project_96x3.png)}.ms-BrandIcon--sharepoint.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/sharepoint_16x3.png)}.ms-BrandIcon--sharepoint.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/sharepoint_48x3.png)}.ms-BrandIcon--sharepoint.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/sharepoint_96x3.png)}.ms-BrandIcon--teams.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/teams_16x3.png)}.ms-BrandIcon--teams.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/teams_48x3.png)}.ms-BrandIcon--teams.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/teams_96x3.png)}.ms-BrandIcon--visio.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/visio_16x3.png)}.ms-BrandIcon--visio.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/visio_48x3.png)}.ms-BrandIcon--visio.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/visio_96x3.png)}.ms-BrandIcon--word.ms-BrandIcon--icon16{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/word_16x3.png)}.ms-BrandIcon--word.ms-BrandIcon--icon48{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/word_48x3.png)}.ms-BrandIcon--word.ms-BrandIcon--icon96{background-image:url(https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/png/word_96x3.png)}.ms-BrandIcon--accdb.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_3x/accdb.png)}.ms-BrandIcon--accdb.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_3x/accdb.png)}.ms-BrandIcon--accdb.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_3x/accdb.png)}.ms-BrandIcon--archive.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_3x/archive.png)}.ms-BrandIcon--archive.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_3x/archive.png)}.ms-BrandIcon--archive.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_3x/archive.png)}.ms-BrandIcon--audio.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_3x/audio.png)}.ms-BrandIcon--audio.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_3x/audio.png)}.ms-BrandIcon--audio.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_3x/audio.png)}.ms-BrandIcon--code.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_3x/code.png)}.ms-BrandIcon--code.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_3x/code.png)}.ms-BrandIcon--code.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_3x/code.png)}.ms-BrandIcon--csv.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_3x/csv.png)}.ms-BrandIcon--csv.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_3x/csv.png)}.ms-BrandIcon--csv.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_3x/csv.png)}.ms-BrandIcon--docset.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_3x/docset.png)}.ms-BrandIcon--docset.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_3x/docset.png)}.ms-BrandIcon--docset.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_3x/docset.png)}.ms-BrandIcon--docx.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_3x/docx.png)}.ms-BrandIcon--docx.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_3x/docx.png)}.ms-BrandIcon--docx.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_3x/docx.png)}.ms-BrandIcon--dotx.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_3x/dotx.png)}.ms-BrandIcon--dotx.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_3x/dotx.png)}.ms-BrandIcon--dotx.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_3x/dotx.png)}.ms-BrandIcon--email.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_3x/email.png)}.ms-BrandIcon--email.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_3x/email.png)}.ms-BrandIcon--email.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_3x/email.png)}.ms-BrandIcon--exe.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_3x/exe.png)}.ms-BrandIcon--exe.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_3x/exe.png)}.ms-BrandIcon--exe.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_3x/exe.png)}.ms-BrandIcon--folder.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_3x/folder.png)}.ms-BrandIcon--folder.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_3x/folder.png)}.ms-BrandIcon--folder.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_3x/folder.png)}.ms-BrandIcon--font.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_3x/font.png)}.ms-BrandIcon--font.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_3x/font.png)}.ms-BrandIcon--font.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_3x/font.png)}.ms-BrandIcon--genericfile.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_3x/genericfile.png)}.ms-BrandIcon--genericfile.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_3x/genericfile.png)}.ms-BrandIcon--genericfile.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_3x/genericfile.png)}.ms-BrandIcon--html.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_3x/html.png)}.ms-BrandIcon--html.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_3x/html.png)}.ms-BrandIcon--html.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_3x/html.png)}.ms-BrandIcon--link.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_3x/link.png)}.ms-BrandIcon--link.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_3x/link.png)}.ms-BrandIcon--link.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_3x/link.png)}.ms-BrandIcon--listitem.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_3x/listitem.png)}.ms-BrandIcon--listitem.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_3x/listitem.png)}.ms-BrandIcon--listitem.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_3x/listitem.png)}.ms-BrandIcon--model.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_3x/model.png)}.ms-BrandIcon--model.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_3x/model.png)}.ms-BrandIcon--model.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_3x/model.png)}.ms-BrandIcon--mpp.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_3x/mpp.png)}.ms-BrandIcon--mpp.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_3x/mpp.png)}.ms-BrandIcon--mpp.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_3x/mpp.png)}.ms-BrandIcon--mpt.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_3x/mpt.png)}.ms-BrandIcon--mpt.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_3x/mpt.png)}.ms-BrandIcon--mpt.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_3x/mpt.png)}.ms-BrandIcon--odp.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_3x/odp.png)}.ms-BrandIcon--odp.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_3x/odp.png)}.ms-BrandIcon--odp.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_3x/odp.png)}.ms-BrandIcon--ods.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_3x/ods.png)}.ms-BrandIcon--ods.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_3x/ods.png)}.ms-BrandIcon--ods.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_3x/ods.png)}.ms-BrandIcon--odt.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_3x/odt.png)}.ms-BrandIcon--odt.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_3x/odt.png)}.ms-BrandIcon--odt.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_3x/odt.png)}.ms-BrandIcon--one.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_3x/one.png)}.ms-BrandIcon--one.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_3x/one.png)}.ms-BrandIcon--one.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_3x/one.png)}.ms-BrandIcon--onetoc.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_3x/onetoc.png)}.ms-BrandIcon--onetoc.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_3x/onetoc.png)}.ms-BrandIcon--onetoc.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_3x/onetoc.png)}.ms-BrandIcon--pdf.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_3x/pdf.png)}.ms-BrandIcon--pdf.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_3x/pdf.png)}.ms-BrandIcon--pdf.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_3x/pdf.png)}.ms-BrandIcon--photo.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_3x/photo.png)}.ms-BrandIcon--photo.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_3x/photo.png)}.ms-BrandIcon--photo.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_3x/photo.png)}.ms-BrandIcon--potx.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_3x/potx.png)}.ms-BrandIcon--potx.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_3x/potx.png)}.ms-BrandIcon--potx.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_3x/potx.png)}.ms-BrandIcon--ppsx.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_3x/ppsx.png)}.ms-BrandIcon--ppsx.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_3x/ppsx.png)}.ms-BrandIcon--ppsx.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_3x/ppsx.png)}.ms-BrandIcon--pptx.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_3x/pptx.png)}.ms-BrandIcon--pptx.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_3x/pptx.png)}.ms-BrandIcon--pptx.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_3x/pptx.png)}.ms-BrandIcon--pub.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_3x/pub.png)}.ms-BrandIcon--pub.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_3x/pub.png)}.ms-BrandIcon--pub.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_3x/pub.png)}.ms-BrandIcon--rtf.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_3x/rtf.png)}.ms-BrandIcon--rtf.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_3x/rtf.png)}.ms-BrandIcon--rtf.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_3x/rtf.png)}.ms-BrandIcon--sharedfolder.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_3x/sharedfolder.png)}.ms-BrandIcon--sharedfolder.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_3x/sharedfolder.png)}.ms-BrandIcon--sharedfolder.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_3x/sharedfolder.png)}.ms-BrandIcon--spo.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_3x/spo.png)}.ms-BrandIcon--spo.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_3x/spo.png)}.ms-BrandIcon--spo.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_3x/spo.png)}.ms-BrandIcon--sysfile.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_3x/sysfile.png)}.ms-BrandIcon--sysfile.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_3x/sysfile.png)}.ms-BrandIcon--sysfile.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_3x/sysfile.png)}.ms-BrandIcon--txt.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_3x/txt.png)}.ms-BrandIcon--txt.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_3x/txt.png)}.ms-BrandIcon--txt.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_3x/txt.png)}.ms-BrandIcon--vector.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_3x/vector.png)}.ms-BrandIcon--vector.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_3x/vector.png)}.ms-BrandIcon--vector.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_3x/vector.png)}.ms-BrandIcon--video.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_3x/video.png)}.ms-BrandIcon--video.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_3x/video.png)}.ms-BrandIcon--video.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_3x/video.png)}.ms-BrandIcon--vsdx.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_3x/vsdx.png)}.ms-BrandIcon--vsdx.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_3x/vsdx.png)}.ms-BrandIcon--vsdx.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_3x/vsdx.png)}.ms-BrandIcon--vssx.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_3x/vssx.png)}.ms-BrandIcon--vssx.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_3x/vssx.png)}.ms-BrandIcon--vssx.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_3x/vssx.png)}.ms-BrandIcon--vstx.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_3x/vstx.png)}.ms-BrandIcon--vstx.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_3x/vstx.png)}.ms-BrandIcon--vstx.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_3x/vstx.png)}.ms-BrandIcon--xlsx.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_3x/xlsx.png)}.ms-BrandIcon--xlsx.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_3x/xlsx.png)}.ms-BrandIcon--xlsx.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_3x/xlsx.png)}.ms-BrandIcon--xltx.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_3x/xltx.png)}.ms-BrandIcon--xltx.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_3x/xltx.png)}.ms-BrandIcon--xltx.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_3x/xltx.png)}.ms-BrandIcon--xml.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_3x/xml.png)}.ms-BrandIcon--xml.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_3x/xml.png)}.ms-BrandIcon--xml.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_3x/xml.png)}.ms-BrandIcon--xsn.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_3x/xsn.png)}.ms-BrandIcon--xsn.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_3x/xsn.png)}.ms-BrandIcon--xsn.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_3x/xsn.png)}.ms-BrandIcon--zip.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_3x/zip.png)}.ms-BrandIcon--zip.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_3x/zip.png)}.ms-BrandIcon--zip.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_3x/zip.png)}}.ms-BrandIcon--onepkg.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16/one.png)}.ms-BrandIcon--onepkg.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48/one.png)}.ms-BrandIcon--onepkg.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96/one.png)}.ms-BrandIcon--xls.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16/xlsx.png)}.ms-BrandIcon--xls.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48/xlsx.png)}.ms-BrandIcon--xls.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96/xlsx.png)}@media only screen and (-webkit-min-device-pixel-ratio: 1.5),only screen and (min-resolution: 144dpi){.ms-BrandIcon--onepkg.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_1.5x/one.png)}.ms-BrandIcon--onepkg.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_1.5x/one.png)}.ms-BrandIcon--onepkg.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_1.5x/one.png)}.ms-BrandIcon--xls.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_1.5x/xlsx.png)}.ms-BrandIcon--xls.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_1.5x/xlsx.png)}.ms-BrandIcon--xls.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_1.5x/xlsx.png)}}@media only screen and (-webkit-min-device-pixel-ratio: 2),only screen and (min-resolution: 192dpi){.ms-BrandIcon--onepkg.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_2x/one.png)}.ms-BrandIcon--onepkg.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_2x/one.png)}.ms-BrandIcon--onepkg.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_2x/one.png)}.ms-BrandIcon--xls.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_2x/xlsx.png)}.ms-BrandIcon--xls.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_2x/xlsx.png)}.ms-BrandIcon--xls.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_2x/xlsx.png)}}@media only screen and (-webkit-min-device-pixel-ratio: 3),only screen and (min-resolution: 288dpi){.ms-BrandIcon--onepkg.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_3x/one.png)}.ms-BrandIcon--onepkg.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_3x/one.png)}.ms-BrandIcon--onepkg.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_3x/one.png)}.ms-BrandIcon--xls.ms-BrandIcon--icon16{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/16_3x/xlsx.png)}.ms-BrandIcon--xls.ms-BrandIcon--icon48{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/48_3x/xlsx.png)}.ms-BrandIcon--xls.ms-BrandIcon--icon96{background-image:url(https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/96_3x/xlsx.png)}}.ms-bgColor-themeDark,.ms-bgColor-themeDark--hover:hover{background-color:#005a9e}.ms-bgColor-themeDarkAlt,.ms-bgColor-themeDarkAlt--hover:hover{background-color:#106ebe}.ms-bgColor-themeDarker,.ms-bgColor-themeDarker--hover:hover{background-color:#004578}.ms-bgColor-themePrimary,.ms-bgColor-themePrimary--hover:hover{background-color:#0078d4}.ms-bgColor-themeSecondary,.ms-bgColor-themeSecondary--hover:hover{background-color:#2b88d8}.ms-bgColor-themeTertiary,.ms-bgColor-themeTertiary--hover:hover{background-color:#71afe5}.ms-bgColor-themeLight,.ms-bgColor-themeLight--hover:hover{background-color:#c7e0f4}.ms-bgColor-themeLighter,.ms-bgColor-themeLighter--hover:hover{background-color:#deecf9}.ms-bgColor-themeLighterAlt,.ms-bgColor-themeLighterAlt--hover:hover{background-color:#eff6fc}.ms-borderColor-themeDark,.ms-borderColor-themeDark--hover:hover{border-color:#005a9e}.ms-borderColor-themeDarkAlt,.ms-borderColor-themeDarkAlt--hover:hover{border-color:#106ebe}.ms-borderColor-themeDarker,.ms-borderColor-themeDarker--hover:hover{border-color:#004578}.ms-borderColor-themePrimary,.ms-borderColor-themePrimary--hover:hover{border-color:#0078d4}.ms-borderColor-themeSecondary,.ms-borderColor-themeSecondary--hover:hover{border-color:#2b88d8}.ms-borderColor-themeTertiary,.ms-borderColor-themeTertiary--hover:hover{border-color:#71afe5}.ms-borderColor-themeLight,.ms-borderColor-themeLight--hover:hover{border-color:#c7e0f4}.ms-borderColor-themeLighter,.ms-borderColor-themeLighter--hover:hover{border-color:#deecf9}.ms-borderColor-themeLighterAlt,.ms-borderColor-themeLighterAlt--hover:hover{border-color:#eff6fc}.ms-fontColor-themeDarker,.ms-fontColor-themeDarker--hover:hover{color:#004578}.ms-fontColor-themeDark,.ms-fontColor-themeDark--hover:hover{color:#005a9e}.ms-fontColor-themeDarkAlt,.ms-fontColor-themeDarkAlt--hover:hover{color:#106ebe}.ms-fontColor-themePrimary,.ms-fontColor-themePrimary--hover:hover{color:#0078d4}.ms-fontColor-themeSecondary,.ms-fontColor-themeSecondary--hover:hover{color:#2b88d8}.ms-fontColor-themeTertiary,.ms-fontColor-themeTertiary--hover:hover{color:#71afe5}.ms-fontColor-themeLight,.ms-fontColor-themeLight--hover:hover{color:#c7e0f4}.ms-fontColor-themeLighter,.ms-fontColor-themeLighter--hover:hover{color:#deecf9}.ms-fontColor-themeLighterAlt,.ms-fontColor-themeLighterAlt--hover:hover{color:#eff6fc}.ms-bgColor-neutralDark,.ms-bgColor-neutralDark--hover:hover{background-color:#201f1e}.ms-bgColor-neutralPrimary,.ms-bgColor-neutralPrimary--hover:hover{background-color:#323130}.ms-bgColor-neutralPrimaryAlt,.ms-bgColor-neutralPrimaryAlt--hover:hover{background-color:#3b3a39}.ms-bgColor-neutralSecondary,.ms-bgColor-neutralSecondary--hover:hover{background-color:#605e5c}.ms-bgColor-neutralSecondaryAlt,.ms-bgColor-neutralSecondaryAlt--hover:hover{background-color:#797775}.ms-bgColor-neutralTertiary,.ms-bgColor-neutralTertiary--hover:hover{background-color:#a19f9d}.ms-bgColor-neutralTertiaryAlt,.ms-bgColor-neutralTertiaryAlt--hover:hover{background-color:#c8c6c4}.ms-bgColor-neutralQuaternary,.ms-bgColor-neutralQuaternary--hover:hover{background-color:#d2d0ce}.ms-bgColor-neutralQuaternaryAlt,.ms-bgColor-neutralQuaternaryAlt--hover:hover{background-color:#e1dfdd}.ms-bgColor-neutralLight,.ms-bgColor-neutralLight--hover:hover{background-color:#edebe9}.ms-bgColor-neutralLighter,.ms-bgColor-neutralLighter--hover:hover{background-color:#f3f2f1}.ms-bgColor-neutralLighterAlt,.ms-bgColor-neutralLighterAlt--hover:hover{background-color:#faf9f8}.ms-borderColor-neutralDark,.ms-borderColor-neutralDark--hover:hover{border-color:#201f1e}.ms-borderColor-neutralPrimary,.ms-borderColor-neutralPrimary--hover:hover{border-color:#323130}.ms-borderColor-neutralPrimaryAlt,.ms-borderColor-neutralPrimaryAlt--hover:hover{border-color:#3b3a39}.ms-borderColor-neutralSecondary,.ms-borderColor-neutralSecondary--hover:hover{border-color:#605e5c}.ms-borderColor-neutralSecondaryAlt,.ms-borderColor-neutralSecondaryAlt--hover:hover{border-color:#797775}.ms-borderColor-neutralTertiary,.ms-borderColor-neutralTertiary--hover:hover{border-color:#a19f9d}.ms-borderColor-neutralTertiaryAlt,.ms-borderColor-neutralTertiaryAlt--hover:hover{border-color:#c8c6c4}.ms-borderColor-neutralQuaternary,.ms-borderColor-neutralQuaternary--hover:hover{border-color:#d2d0ce}.ms-borderColor-neutralQuaternaryAlt,.ms-borderColor-neutralQuaternaryAlt--hover:hover{border-color:#e1dfdd}.ms-borderColor-neutralLight,.ms-borderColor-neutralLight--hover:hover{border-color:#edebe9}.ms-borderColor-neutralLighter,.ms-borderColor-neutralLighter--hover:hover{border-color:#f3f2f1}.ms-borderColor-neutralLighterAlt,.ms-borderColor-neutralLighterAlt--hover:hover{border-color:#faf9f8}.ms-fontColor-neutralDark,.ms-fontColor-neutralDark--hover:hover{color:#201f1e}.ms-fontColor-neutralPrimary,.ms-fontColor-neutralPrimary--hover:hover{color:#323130}.ms-fontColor-neutralPrimaryAlt,.ms-fontColor-neutralPrimaryAlt--hover:hover{color:#3b3a39}.ms-fontColor-neutralSecondary,.ms-fontColor-neutralSecondary--hover:hover{color:#605e5c}.ms-fontColor-neutralSecondaryAlt,.ms-fontColor-neutralSecondaryAlt--hover:hover{color:#797775}.ms-fontColor-neutralTertiary,.ms-fontColor-neutralTertiary--hover:hover{color:#a19f9d}.ms-fontColor-neutralTertiaryAlt,.ms-fontColor-neutralTertiaryAlt--hover:hover{color:#c8c6c4}.ms-fontColor-neutralQuaternary,.ms-fontColor-neutralQuaternary--hover:hover{color:#d2d0ce}.ms-fontColor-neutralQuaternaryAlt,.ms-fontColor-neutralQuaternaryAlt--hover:hover{color:#e1dfdd}.ms-fontColor-neutralLight,.ms-fontColor-neutralLight--hover:hover{color:#edebe9}.ms-fontColor-neutralLighter,.ms-fontColor-neutralLighter--hover:hover{color:#f3f2f1}.ms-fontColor-neutralLighterAlt,.ms-fontColor-neutralLighterAlt--hover:hover{color:#faf9f8}.ms-bgColor-yellow,.ms-bgColor-yellow--hover:hover{background-color:#ffb900}.ms-bgColor-yellowLight,.ms-bgColor-yellowLight--hover:hover{background-color:#fff100}.ms-bgColor-orange,.ms-bgColor-orange--hover:hover{background-color:#d83b01}.ms-bgColor-orangeLight,.ms-bgColor-orangeLight--hover:hover{background-color:#ea4300}.ms-bgColor-orangeLighter,.ms-bgColor-orangeLighter--hover:hover{background-color:#ff8c00}.ms-bgColor-redDark,.ms-bgColor-redDark--hover:hover{background-color:#a80000}.ms-bgColor-red,.ms-bgColor-red--hover:hover{background-color:#e81123}.ms-bgColor-magentaDark,.ms-bgColor-magentaDark--hover:hover{background-color:#5c005c}.ms-bgColor-magenta,.ms-bgColor-magenta--hover:hover{background-color:#b4009e}.ms-bgColor-magentaLight,.ms-bgColor-magentaLight--hover:hover{background-color:#e3008c}.ms-bgColor-purpleDark,.ms-bgColor-purpleDark--hover:hover{background-color:#32145a}.ms-bgColor-purple,.ms-bgColor-purple--hover:hover{background-color:#5c2d91}.ms-bgColor-purpleLight,.ms-bgColor-purpleLight--hover:hover{background-color:#b4a0ff}.ms-bgColor-blueDark,.ms-bgColor-blueDark--hover:hover{background-color:#002050}.ms-bgColor-blueMid,.ms-bgColor-blueMid--hover:hover{background-color:#00188f}.ms-bgColor-blue,.ms-bgColor-blue--hover:hover{background-color:#0078d4}.ms-bgColor-blueLight,.ms-bgColor-blueLight--hover:hover{background-color:#00bcf2}.ms-bgColor-tealDark,.ms-bgColor-tealDark--hover:hover{background-color:#004b50}.ms-bgColor-teal,.ms-bgColor-teal--hover:hover{background-color:#008272}.ms-bgColor-tealLight,.ms-bgColor-tealLight--hover:hover{background-color:#00b294}.ms-bgColor-greenDark,.ms-bgColor-greenDark--hover:hover{background-color:#004b1c}.ms-bgColor-green,.ms-bgColor-green--hover:hover{background-color:#107c10}.ms-bgColor-greenLight,.ms-bgColor-greenLight--hover:hover{background-color:#bad80a}.ms-borderColor-yellow,.ms-borderColor-yellow--hover:hover{border-color:#ffb900}.ms-borderColor-yellowLight,.ms-borderColor-yellowLight--hover:hover{border-color:#fff100}.ms-borderColor-orange,.ms-borderColor-orange--hover:hover{border-color:#d83b01}.ms-borderColor-orangeLight,.ms-borderColor-orangeLight--hover:hover{border-color:#ea4300}.ms-borderColor-orangeLighter,.ms-borderColor-orangeLighter--hover:hover{border-color:#ff8c00}.ms-borderColor-redDark,.ms-borderColor-redDark--hover:hover{border-color:#a80000}.ms-borderColor-red,.ms-borderColor-red--hover:hover{border-color:#e81123}.ms-borderColor-magentaDark,.ms-borderColor-magentaDark--hover:hover{border-color:#5c005c}.ms-borderColor-magenta,.ms-borderColor-magenta--hover:hover{border-color:#b4009e}.ms-borderColor-magentaLight,.ms-borderColor-magentaLight--hover:hover{border-color:#e3008c}.ms-borderColor-purpleDark,.ms-borderColor-purpleDark--hover:hover{border-color:#32145a}.ms-borderColor-purple,.ms-borderColor-purple--hover:hover{border-color:#5c2d91}.ms-borderColor-purpleLight,.ms-borderColor-purpleLight--hover:hover{border-color:#b4a0ff}.ms-borderColor-blueDark,.ms-borderColor-blueDark--hover:hover{border-color:#002050}.ms-borderColor-blueMid,.ms-borderColor-blueMid--hover:hover{border-color:#00188f}.ms-borderColor-blue,.ms-borderColor-blue--hover:hover{border-color:#0078d4}.ms-borderColor-blueLight,.ms-borderColor-blueLight--hover:hover{border-color:#00bcf2}.ms-borderColor-tealDark,.ms-borderColor-tealDark--hover:hover{border-color:#004b50}.ms-borderColor-teal,.ms-borderColor-teal--hover:hover{border-color:#008272}.ms-borderColor-tealLight,.ms-borderColor-tealLight--hover:hover{border-color:#00b294}.ms-borderColor-greenDark,.ms-borderColor-greenDark--hover:hover{border-color:#004b1c}.ms-borderColor-green,.ms-borderColor-green--hover:hover{border-color:#107c10}.ms-borderColor-greenLight,.ms-borderColor-greenLight--hover:hover{border-color:#bad80a}.ms-fontColor-yellow,.ms-fontColor-yellow--hover:hover{color:#ffb900}.ms-fontColor-yellowLight,.ms-fontColor-yellowLight--hover:hover{color:#fff100}.ms-fontColor-orange,.ms-fontColor-orange--hover:hover{color:#d83b01}.ms-fontColor-orangeLight,.ms-fontColor-orangeLight--hover:hover{color:#ea4300}.ms-fontColor-orangeLighter,.ms-fontColor-orangeLighter--hover:hover{color:#ff8c00}.ms-fontColor-redDark,.ms-fontColor-redDark--hover:hover{color:#a80000}.ms-fontColor-red,.ms-fontColor-red--hover:hover{color:#e81123}.ms-fontColor-magentaDark,.ms-fontColor-magentaDark--hover:hover{color:#5c005c}.ms-fontColor-magenta,.ms-fontColor-magenta--hover:hover{color:#b4009e}.ms-fontColor-magentaLight,.ms-fontColor-magentaLight--hover:hover{color:#e3008c}.ms-fontColor-purpleDark,.ms-fontColor-purpleDark--hover:hover{color:#32145a}.ms-fontColor-purple,.ms-fontColor-purple--hover:hover{color:#5c2d91}.ms-fontColor-purpleLight,.ms-fontColor-purpleLight--hover:hover{color:#b4a0ff}.ms-fontColor-blueDark,.ms-fontColor-blueDark--hover:hover{color:#002050}.ms-fontColor-blueMid,.ms-fontColor-blueMid--hover:hover{color:#00188f}.ms-fontColor-blue,.ms-fontColor-blue--hover:hover{color:#0078d4}.ms-fontColor-blueLight,.ms-fontColor-blueLight--hover:hover{color:#00bcf2}.ms-fontColor-tealDark,.ms-fontColor-tealDark--hover:hover{color:#004b50}.ms-fontColor-teal,.ms-fontColor-teal--hover:hover{color:#008272}.ms-fontColor-tealLight,.ms-fontColor-tealLight--hover:hover{color:#00b294}.ms-fontColor-greenDark,.ms-fontColor-greenDark--hover:hover{color:#004b1c}.ms-fontColor-green,.ms-fontColor-green--hover:hover{color:#107c10}.ms-fontColor-greenLight,.ms-fontColor-greenLight--hover:hover{color:#bad80a}.ms-bgColor-info,.ms-bgColor-info--hover:hover{background-color:#f3f2f1}.ms-bgColor-success,.ms-bgColor-success--hover:hover{background-color:#dff6dd}.ms-bgColor-severeWarning,.ms-bgColor-severeWarning--hover:hover{background-color:#fed9cc}.ms-bgColor-warning,.ms-bgColor-warning--hover:hover{background-color:#fff4ce}.ms-bgColor-error,.ms-bgColor-error--hover:hover{background-color:#fde7e9}.ms-fontColor-info,.ms-fontColor-info--hover:hover{color:#797775}.ms-fontColor-success,.ms-fontColor-success--hover:hover{color:#107c10}.ms-fontColor-alert,.ms-fontColor-alert--hover:hover{color:#d83b01}.ms-fontColor-warning,.ms-fontColor-warning--hover:hover{color:#797775}.ms-fontColor-severeWarning,.ms-fontColor-severeWarning--hover:hover{color:#d83b01}.ms-fontColor-error,.ms-fontColor-error--hover:hover{color:#a80000}.ms-bgColor-contrastBlackDisabled,.ms-bgColor-contrastBlackDisabled--hover:hover{background-color:#0f0}.ms-bgColor-contrastWhiteDisabled,.ms-bgColor-contrastWhiteDisabled--hover:hover{background-color:#600000}.ms-bgColor-contrastBlackSelected,.ms-bgColor-contrastBlackSelected--hover:hover{background-color:#1aebff}.ms-bgColor-contrastWhiteSelected,.ms-bgColor-contrastWhiteSelected--hover:hover{background-color:#37006e}.ms-fontColor-contrastBlackDisabled,.ms-fontColor-contrastBlackDisabled--hover:hover{color:#0f0}.ms-fontColor-contrastWhiteDisabled,.ms-fontColor-contrastWhiteDisabled--hover:hover{color:#600000}.ms-fontColor-contrastBlackSelected,.ms-fontColor-contrastBlackSelected--hover:hover{color:#1aebff}.ms-fontColor-contrastWhiteSelected,.ms-fontColor-contrastWhiteSelected--hover:hover{color:#37006e}.ms-borderColor-contrastBlackDisabled,.ms-borderColor-contrastBlackDisabled--hover:hover{border-color:#0f0}.ms-borderColor-contrastWhiteDisabled,.ms-borderColor-contrastWhiteDisabled--hover:hover{border-color:#600000}.ms-borderColor-contrastBlackSelected,.ms-borderColor-contrastBlackSelected--hover:hover{border-color:#1aebff}.ms-borderColor-contrastWhiteSelected,.ms-borderColor-contrastWhiteSelected--hover:hover{border-color:#37006e}.ms-bgColor-communicationShade30,.ms-bgColor-communicationShade30--hover:hover{background-color:#004578}.ms-bgColor-communicationShade20,.ms-bgColor-communicationShade20--hover:hover{background-color:#005a9e}.ms-bgColor-communicationShade10,.ms-bgColor-communicationShade10--hover:hover{background-color:#106ebe}.ms-bgColor-communicationPrimary,.ms-bgColor-communicationPrimary--hover:hover{background-color:#0078d4}.ms-bgColor-communicationTint10,.ms-bgColor-communicationTint10--hover:hover{background-color:#2b88d8}.ms-bgColor-communicationTint20,.ms-bgColor-communicationTint20--hover:hover{background-color:#c7e0f4}.ms-bgColor-communicationTint30,.ms-bgColor-communicationTint30--hover:hover{background-color:#deecf9}.ms-bgColor-communicationTint40,.ms-bgColor-communicationTint40--hover:hover{background-color:#eff6fc}.ms-bgColor-black,.ms-bgColor-black--hover:hover{background-color:#000}.ms-bgColor-gray220,.ms-bgColor-gray220--hover:hover{background-color:#11100f}.ms-bgColor-gray210,.ms-bgColor-gray210--hover:hover{background-color:#161514}.ms-bgColor-gray200,.ms-bgColor-gray200--hover:hover{background-color:#1b1a19}.ms-bgColor-gray190,.ms-bgColor-gray190--hover:hover{background-color:#201f1e}.ms-bgColor-gray180,.ms-bgColor-gray180--hover:hover{background-color:#252423}.ms-bgColor-gray170,.ms-bgColor-gray170--hover:hover{background-color:#292827}.ms-bgColor-gray160,.ms-bgColor-gray160--hover:hover{background-color:#323130}.ms-bgColor-gray150,.ms-bgColor-gray150--hover:hover{background-color:#3b3a39}.ms-bgColor-gray140,.ms-bgColor-gray140--hover:hover{background-color:#484644}.ms-bgColor-gray130,.ms-bgColor-gray130--hover:hover{background-color:#605e5c}.ms-bgColor-gray120,.ms-bgColor-gray120--hover:hover{background-color:#797775}.ms-bgColor-gray110,.ms-bgColor-gray110--hover:hover{background-color:#8a8886}.ms-bgColor-gray100,.ms-bgColor-gray100--hover:hover{background-color:#979593}.ms-bgColor-gray90,.ms-bgColor-gray90--hover:hover{background-color:#a19f9d}.ms-bgColor-gray80,.ms-bgColor-gray80--hover:hover{background-color:#b3b0ad}.ms-bgColor-gray70,.ms-bgColor-gray70--hover:hover{background-color:#bebbb8}.ms-bgColor-gray60,.ms-bgColor-gray60--hover:hover{background-color:#c8c6c4}.ms-bgColor-gray50,.ms-bgColor-gray50--hover:hover{background-color:#d2d0ce}.ms-bgColor-gray40,.ms-bgColor-gray40--hover:hover{background-color:#e1dfdd}.ms-bgColor-gray30,.ms-bgColor-gray30--hover:hover{background-color:#edebe9}.ms-bgColor-gray20,.ms-bgColor-gray20--hover:hover{background-color:#f3f2f1}.ms-bgColor-gray10,.ms-bgColor-gray10--hover:hover{background-color:#faf9f8}.ms-bgColor-white,.ms-bgColor-white--hover:hover{background-color:#fff}.ms-bgColor-sharedPinkRed10,.ms-bgColor-sharedPinkRed10--hover:hover{background-color:#750b1c}.ms-bgColor-sharedRed20,.ms-bgColor-sharedRed20--hover:hover{background-color:#a4262c}.ms-bgColor-sharedRed10,.ms-bgColor-sharedRed10--hover:hover{background-color:#d13438}.ms-bgColor-sharedRedOrange20,.ms-bgColor-sharedRedOrange20--hover:hover{background-color:#603d30}.ms-bgColor-sharedRedOrange10,.ms-bgColor-sharedRedOrange10--hover:hover{background-color:#da3b01}.ms-bgColor-sharedOrange30,.ms-bgColor-sharedOrange30--hover:hover{background-color:#8e562e}.ms-bgColor-sharedOrange20,.ms-bgColor-sharedOrange20--hover:hover{background-color:#ca5010}.ms-bgColor-sharedOrange10,.ms-bgColor-sharedOrange10--hover:hover{background-color:#fa4}.ms-bgColor-sharedYellow10,.ms-bgColor-sharedYellow10--hover:hover{background-color:#fce100}.ms-bgColor-sharedOrangeYellow20,.ms-bgColor-sharedOrangeYellow20--hover:hover{background-color:#986f0b}.ms-bgColor-sharedOrangeYellow10,.ms-bgColor-sharedOrangeYellow10--hover:hover{background-color:#c19c00}.ms-bgColor-sharedYellowGreen10,.ms-bgColor-sharedYellowGreen10--hover:hover{background-color:#8cbd18}.ms-bgColor-sharedGreen20,.ms-bgColor-sharedGreen20--hover:hover{background-color:#0b6a0b}.ms-bgColor-sharedGreen10,.ms-bgColor-sharedGreen10--hover:hover{background-color:#498205}.ms-bgColor-sharedGreenCyan10,.ms-bgColor-sharedGreenCyan10--hover:hover{background-color:#00ad56}.ms-bgColor-sharedCyan40,.ms-bgColor-sharedCyan40--hover:hover{background-color:#005e50}.ms-bgColor-sharedCyan30,.ms-bgColor-sharedCyan30--hover:hover{background-color:#005b70}.ms-bgColor-sharedCyan20,.ms-bgColor-sharedCyan20--hover:hover{background-color:#038387}.ms-bgColor-sharedCyan10,.ms-bgColor-sharedCyan10--hover:hover{background-color:#00b7c3}.ms-bgColor-sharedCyanBlue20,.ms-bgColor-sharedCyanBlue20--hover:hover{background-color:#004e8c}.ms-bgColor-sharedCyanBlue10,.ms-bgColor-sharedCyanBlue10--hover:hover{background-color:#0078d4}.ms-bgColor-sharedBlue10,.ms-bgColor-sharedBlue10--hover:hover{background-color:#4f6bed}.ms-bgColor-sharedBlueMagenta40,.ms-bgColor-sharedBlueMagenta40--hover:hover{background-color:#373277}.ms-bgColor-sharedBlueMagenta30,.ms-bgColor-sharedBlueMagenta30--hover:hover{background-color:#5c2e91}.ms-bgColor-sharedBlueMagenta20,.ms-bgColor-sharedBlueMagenta20--hover:hover{background-color:#8764b8}.ms-bgColor-sharedBlueMagenta10,.ms-bgColor-sharedBlueMagenta10--hover:hover{background-color:#8378de}.ms-bgColor-sharedMagenta20,.ms-bgColor-sharedMagenta20--hover:hover{background-color:#881798}.ms-bgColor-sharedMagenta10,.ms-bgColor-sharedMagenta10--hover:hover{background-color:#c239b3}.ms-bgColor-sharedMagentaPink20,.ms-bgColor-sharedMagentaPink20--hover:hover{background-color:#9b0062}.ms-bgColor-sharedMagentaPink10,.ms-bgColor-sharedMagentaPink10--hover:hover{background-color:#e3008c}.ms-bgColor-sharedGray40,.ms-bgColor-sharedGray40--hover:hover{background-color:#393939}.ms-bgColor-sharedGray30,.ms-bgColor-sharedGray30--hover:hover{background-color:#7a7574}.ms-bgColor-sharedGray20,.ms-bgColor-sharedGray20--hover:hover{background-color:#69797e}.ms-bgColor-sharedGray10,.ms-bgColor-sharedGray10--hover:hover{background-color:#a0aeb2}.ms-borderColor-communicationShade30,.ms-borderColor-communicationShade30--hover:hover{border-color:#004578}.ms-borderColor-communicationShade20,.ms-borderColor-communicationShade20--hover:hover{border-color:#005a9e}.ms-borderColor-communicationShade10,.ms-borderColor-communicationShade10--hover:hover{border-color:#106ebe}.ms-borderColor-communicationPrimary,.ms-borderColor-communicationPrimary--hover:hover{border-color:#0078d4}.ms-borderColor-communicationTint10,.ms-borderColor-communicationTint10--hover:hover{border-color:#2b88d8}.ms-borderColor-communicationTint20,.ms-borderColor-communicationTint20--hover:hover{border-color:#c7e0f4}.ms-borderColor-communicationTint30,.ms-borderColor-communicationTint30--hover:hover{border-color:#deecf9}.ms-borderColor-communicationTint40,.ms-borderColor-communicationTint40--hover:hover{border-color:#eff6fc}.ms-borderColor-black,.ms-borderColor-black--hover:hover{border-color:#000}.ms-borderColor-gray220,.ms-borderColor-gray220--hover:hover{border-color:#11100f}.ms-borderColor-gray210,.ms-borderColor-gray210--hover:hover{border-color:#161514}.ms-borderColor-gray200,.ms-borderColor-gray200--hover:hover{border-color:#1b1a19}.ms-borderColor-gray190,.ms-borderColor-gray190--hover:hover{border-color:#201f1e}.ms-borderColor-gray180,.ms-borderColor-gray180--hover:hover{border-color:#252423}.ms-borderColor-gray170,.ms-borderColor-gray170--hover:hover{border-color:#292827}.ms-borderColor-gray160,.ms-borderColor-gray160--hover:hover{border-color:#323130}.ms-borderColor-gray150,.ms-borderColor-gray150--hover:hover{border-color:#3b3a39}.ms-borderColor-gray140,.ms-borderColor-gray140--hover:hover{border-color:#484644}.ms-borderColor-gray130,.ms-borderColor-gray130--hover:hover{border-color:#605e5c}.ms-borderColor-gray120,.ms-borderColor-gray120--hover:hover{border-color:#797775}.ms-borderColor-gray110,.ms-borderColor-gray110--hover:hover{border-color:#8a8886}.ms-borderColor-gray100,.ms-borderColor-gray100--hover:hover{border-color:#979593}.ms-borderColor-gray90,.ms-borderColor-gray90--hover:hover{border-color:#a19f9d}.ms-borderColor-gray80,.ms-borderColor-gray80--hover:hover{border-color:#b3b0ad}.ms-borderColor-gray70,.ms-borderColor-gray70--hover:hover{border-color:#bebbb8}.ms-borderColor-gray60,.ms-borderColor-gray60--hover:hover{border-color:#c8c6c4}.ms-borderColor-gray50,.ms-borderColor-gray50--hover:hover{border-color:#d2d0ce}.ms-borderColor-gray40,.ms-borderColor-gray40--hover:hover{border-color:#e1dfdd}.ms-borderColor-gray30,.ms-borderColor-gray30--hover:hover{border-color:#edebe9}.ms-borderColor-gray20,.ms-borderColor-gray20--hover:hover{border-color:#f3f2f1}.ms-borderColor-gray10,.ms-borderColor-gray10--hover:hover{border-color:#faf9f8}.ms-borderColor-white,.ms-borderColor-white--hover:hover{border-color:#fff}.ms-borderColor-sharedPinkRed10,.ms-borderColor-sharedPinkRed10--hover:hover{border-color:#750b1c}.ms-borderColor-sharedRed20,.ms-borderColor-sharedRed20--hover:hover{border-color:#a4262c}.ms-borderColor-sharedRed10,.ms-borderColor-sharedRed10--hover:hover{border-color:#d13438}.ms-borderColor-sharedRedOrange20,.ms-borderColor-sharedRedOrange20--hover:hover{border-color:#603d30}.ms-borderColor-sharedRedOrange10,.ms-borderColor-sharedRedOrange10--hover:hover{border-color:#da3b01}.ms-borderColor-sharedOrange30,.ms-borderColor-sharedOrange30--hover:hover{border-color:#8e562e}.ms-borderColor-sharedOrange20,.ms-borderColor-sharedOrange20--hover:hover{border-color:#ca5010}.ms-borderColor-sharedOrange10,.ms-borderColor-sharedOrange10--hover:hover{border-color:#fa4}.ms-borderColor-sharedYellow10,.ms-borderColor-sharedYellow10--hover:hover{border-color:#fce100}.ms-borderColor-sharedOrangeYellow20,.ms-borderColor-sharedOrangeYellow20--hover:hover{border-color:#986f0b}.ms-borderColor-sharedOrangeYellow10,.ms-borderColor-sharedOrangeYellow10--hover:hover{border-color:#c19c00}.ms-borderColor-sharedYellowGreen10,.ms-borderColor-sharedYellowGreen10--hover:hover{border-color:#8cbd18}.ms-borderColor-sharedGreen20,.ms-borderColor-sharedGreen20--hover:hover{border-color:#0b6a0b}.ms-borderColor-sharedGreen10,.ms-borderColor-sharedGreen10--hover:hover{border-color:#498205}.ms-borderColor-sharedGreenCyan10,.ms-borderColor-sharedGreenCyan10--hover:hover{border-color:#00ad56}.ms-borderColor-sharedCyan40,.ms-borderColor-sharedCyan40--hover:hover{border-color:#005e50}.ms-borderColor-sharedCyan30,.ms-borderColor-sharedCyan30--hover:hover{border-color:#005b70}.ms-borderColor-sharedCyan20,.ms-borderColor-sharedCyan20--hover:hover{border-color:#038387}.ms-borderColor-sharedCyan10,.ms-borderColor-sharedCyan10--hover:hover{border-color:#00b7c3}.ms-borderColor-sharedCyanBlue20,.ms-borderColor-sharedCyanBlue20--hover:hover{border-color:#004e8c}.ms-borderColor-sharedCyanBlue10,.ms-borderColor-sharedCyanBlue10--hover:hover{border-color:#0078d4}.ms-borderColor-sharedBlue10,.ms-borderColor-sharedBlue10--hover:hover{border-color:#4f6bed}.ms-borderColor-sharedBlueMagenta40,.ms-borderColor-sharedBlueMagenta40--hover:hover{border-color:#373277}.ms-borderColor-sharedBlueMagenta30,.ms-borderColor-sharedBlueMagenta30--hover:hover{border-color:#5c2e91}.ms-borderColor-sharedBlueMagenta20,.ms-borderColor-sharedBlueMagenta20--hover:hover{border-color:#8764b8}.ms-borderColor-sharedBlueMagenta10,.ms-borderColor-sharedBlueMagenta10--hover:hover{border-color:#8378de}.ms-borderColor-sharedMagenta20,.ms-borderColor-sharedMagenta20--hover:hover{border-color:#881798}.ms-borderColor-sharedMagenta10,.ms-borderColor-sharedMagenta10--hover:hover{border-color:#c239b3}.ms-borderColor-sharedMagentaPink20,.ms-borderColor-sharedMagentaPink20--hover:hover{border-color:#9b0062}.ms-borderColor-sharedMagentaPink10,.ms-borderColor-sharedMagentaPink10--hover:hover{border-color:#e3008c}.ms-borderColor-sharedGray40,.ms-borderColor-sharedGray40--hover:hover{border-color:#393939}.ms-borderColor-sharedGray30,.ms-borderColor-sharedGray30--hover:hover{border-color:#7a7574}.ms-borderColor-sharedGray20,.ms-borderColor-sharedGray20--hover:hover{border-color:#69797e}.ms-borderColor-sharedGray10,.ms-borderColor-sharedGray10--hover:hover{border-color:#a0aeb2}.ms-fontColor-communicationShade30,.ms-fontColor-communicationShade30--hover:hover{color:#004578}.ms-fontColor-communicationShade20,.ms-fontColor-communicationShade20--hover:hover{color:#005a9e}.ms-fontColor-communicationShade10,.ms-fontColor-communicationShade10--hover:hover{color:#106ebe}.ms-fontColor-communicationPrimary,.ms-fontColor-communicationPrimary--hover:hover{color:#0078d4}.ms-fontColor-communicationTint10,.ms-fontColor-communicationTint10--hover:hover{color:#2b88d8}.ms-fontColor-communicationTint20,.ms-fontColor-communicationTint20--hover:hover{color:#c7e0f4}.ms-fontColor-communicationTint30,.ms-fontColor-communicationTint30--hover:hover{color:#deecf9}.ms-fontColor-communicationTint40,.ms-fontColor-communicationTint40--hover:hover{color:#eff6fc}.ms-fontColor-black,.ms-fontColor-black--hover:hover{color:#000}.ms-fontColor-gray220,.ms-fontColor-gray220--hover:hover{color:#11100f}.ms-fontColor-gray210,.ms-fontColor-gray210--hover:hover{color:#161514}.ms-fontColor-gray200,.ms-fontColor-gray200--hover:hover{color:#1b1a19}.ms-fontColor-gray190,.ms-fontColor-gray190--hover:hover{color:#201f1e}.ms-fontColor-gray180,.ms-fontColor-gray180--hover:hover{color:#252423}.ms-fontColor-gray170,.ms-fontColor-gray170--hover:hover{color:#292827}.ms-fontColor-gray160,.ms-fontColor-gray160--hover:hover{color:#323130}.ms-fontColor-gray150,.ms-fontColor-gray150--hover:hover{color:#3b3a39}.ms-fontColor-gray140,.ms-fontColor-gray140--hover:hover{color:#484644}.ms-fontColor-gray130,.ms-fontColor-gray130--hover:hover{color:#605e5c}.ms-fontColor-gray120,.ms-fontColor-gray120--hover:hover{color:#797775}.ms-fontColor-gray110,.ms-fontColor-gray110--hover:hover{color:#8a8886}.ms-fontColor-gray100,.ms-fontColor-gray100--hover:hover{color:#979593}.ms-fontColor-gray90,.ms-fontColor-gray90--hover:hover{color:#a19f9d}.ms-fontColor-gray80,.ms-fontColor-gray80--hover:hover{color:#b3b0ad}.ms-fontColor-gray70,.ms-fontColor-gray70--hover:hover{color:#bebbb8}.ms-fontColor-gray60,.ms-fontColor-gray60--hover:hover{color:#c8c6c4}.ms-fontColor-gray50,.ms-fontColor-gray50--hover:hover{color:#d2d0ce}.ms-fontColor-gray40,.ms-fontColor-gray40--hover:hover{color:#e1dfdd}.ms-fontColor-gray30,.ms-fontColor-gray30--hover:hover{color:#edebe9}.ms-fontColor-gray20,.ms-fontColor-gray20--hover:hover{color:#f3f2f1}.ms-fontColor-gray10,.ms-fontColor-gray10--hover:hover{color:#faf9f8}.ms-fontColor-white,.ms-fontColor-white--hover:hover{color:#fff}.ms-fontColor-sharedPinkRed10,.ms-fontColor-sharedPinkRed10--hover:hover{color:#750b1c}.ms-fontColor-sharedRed20,.ms-fontColor-sharedRed20--hover:hover{color:#a4262c}.ms-fontColor-sharedRed10,.ms-fontColor-sharedRed10--hover:hover{color:#d13438}.ms-fontColor-sharedRedOrange20,.ms-fontColor-sharedRedOrange20--hover:hover{color:#603d30}.ms-fontColor-sharedRedOrange10,.ms-fontColor-sharedRedOrange10--hover:hover{color:#da3b01}.ms-fontColor-sharedOrange30,.ms-fontColor-sharedOrange30--hover:hover{color:#8e562e}.ms-fontColor-sharedOrange20,.ms-fontColor-sharedOrange20--hover:hover{color:#ca5010}.ms-fontColor-sharedOrange10,.ms-fontColor-sharedOrange10--hover:hover{color:#fa4}.ms-fontColor-sharedYellow10,.ms-fontColor-sharedYellow10--hover:hover{color:#fce100}.ms-fontColor-sharedOrangeYellow20,.ms-fontColor-sharedOrangeYellow20--hover:hover{color:#986f0b}.ms-fontColor-sharedOrangeYellow10,.ms-fontColor-sharedOrangeYellow10--hover:hover{color:#c19c00}.ms-fontColor-sharedYellowGreen10,.ms-fontColor-sharedYellowGreen10--hover:hover{color:#8cbd18}.ms-fontColor-sharedGreen20,.ms-fontColor-sharedGreen20--hover:hover{color:#0b6a0b}.ms-fontColor-sharedGreen10,.ms-fontColor-sharedGreen10--hover:hover{color:#498205}.ms-fontColor-sharedGreenCyan10,.ms-fontColor-sharedGreenCyan10--hover:hover{color:#00ad56}.ms-fontColor-sharedCyan40,.ms-fontColor-sharedCyan40--hover:hover{color:#005e50}.ms-fontColor-sharedCyan30,.ms-fontColor-sharedCyan30--hover:hover{color:#005b70}.ms-fontColor-sharedCyan20,.ms-fontColor-sharedCyan20--hover:hover{color:#038387}.ms-fontColor-sharedCyan10,.ms-fontColor-sharedCyan10--hover:hover{color:#00b7c3}.ms-fontColor-sharedCyanBlue20,.ms-fontColor-sharedCyanBlue20--hover:hover{color:#004e8c}.ms-fontColor-sharedCyanBlue10,.ms-fontColor-sharedCyanBlue10--hover:hover{color:#0078d4}.ms-fontColor-sharedBlue10,.ms-fontColor-sharedBlue10--hover:hover{color:#4f6bed}.ms-fontColor-sharedBlueMagenta40,.ms-fontColor-sharedBlueMagenta40--hover:hover{color:#373277}.ms-fontColor-sharedBlueMagenta30,.ms-fontColor-sharedBlueMagenta30--hover:hover{color:#5c2e91}.ms-fontColor-sharedBlueMagenta20,.ms-fontColor-sharedBlueMagenta20--hover:hover{color:#8764b8}.ms-fontColor-sharedBlueMagenta10,.ms-fontColor-sharedBlueMagenta10--hover:hover{color:#8378de}.ms-fontColor-sharedMagenta20,.ms-fontColor-sharedMagenta20--hover:hover{color:#881798}.ms-fontColor-sharedMagenta10,.ms-fontColor-sharedMagenta10--hover:hover{color:#c239b3}.ms-fontColor-sharedMagentaPink20,.ms-fontColor-sharedMagentaPink20--hover:hover{color:#9b0062}.ms-fontColor-sharedMagentaPink10,.ms-fontColor-sharedMagentaPink10--hover:hover{color:#e3008c}.ms-fontColor-sharedGray40,.ms-fontColor-sharedGray40--hover:hover{color:#393939}.ms-fontColor-sharedGray30,.ms-fontColor-sharedGray30--hover:hover{color:#7a7574}.ms-fontColor-sharedGray20,.ms-fontColor-sharedGray20--hover:hover{color:#69797e}.ms-fontColor-sharedGray10,.ms-fontColor-sharedGray10--hover:hover{color:#a0aeb2}.ms-depth-0{box-shadow:0 0 0 0 transparent}.ms-depth-4{box-shadow:0 1.6px 3.6px #0002,0 .3px .9px #0000001c}.ms-depth-8{box-shadow:0 3.2px 7.2px #0002,0 .6px 1.8px #0000001c}.ms-depth-16{box-shadow:0 6.4px 14.4px #0002,0 1.2px 3.6px #0000001c}.ms-depth-64{box-shadow:0 25.6px 57.6px #00000038,0 4.8px 14.4px #0000002e}.ms-fontSize-68{font-size:68px}.ms-fontSize-42{font-size:42px}.ms-fontSize-32{font-size:32px}.ms-fontSize-28{font-size:28px}.ms-fontSize-24{font-size:24px}.ms-fontSize-20{font-size:20px}.ms-fontSize-18{font-size:18px}.ms-fontSize-16{font-size:16px}.ms-fontSize-14{font-size:14px}.ms-fontSize-12{font-size:12px}.ms-fontSize-10{font-size:10px}.ms-fontWeight-regular{font-weight:400}.ms-fontWeight-semibold{font-weight:600}.ms-fontWeight-bold{font-weight:700}.ms-font-su{font-size:42px;font-weight:100}.ms-font-xxl{font-size:28px;font-weight:100}.ms-font-xl-plus{font-size:24px;font-weight:100}.ms-font-xl{font-size:21px;font-weight:100}.ms-font-l{font-size:17px;font-weight:300}.ms-font-m-plus{font-size:15px;font-weight:400}.ms-font-m{font-size:14px;font-weight:400}.ms-font-s-plus{font-size:13px;font-weight:400}.ms-font-s{font-size:12px;font-weight:400}.ms-font-xs{font-size:11px;font-weight:400}.ms-font-mi{font-size:10px;font-weight:600}.ms-fontWeight-light{font-weight:100}.ms-fontWeight-semilight{font-weight:300}.ms-fontSize-su{font-size:42px}.ms-fontSize-xxl{font-size:28px}.ms-fontSize-xlPlus{font-size:24px}.ms-fontSize-xl{font-size:21px}.ms-fontSize-l{font-size:17px}.ms-fontSize-mPlus{font-size:15px}.ms-fontSize-m{font-size:14px}.ms-fontSize-sPlus{font-size:13px}.ms-fontSize-s{font-size:12px}.ms-fontSize-xs{font-size:11px}.ms-fontSize-mi{font-size:10px}@font-face{font-family:Leelawadee UI Web;src:url(https://static2.sharepointonline.com/files/fabric/assets/fonts/leelawadeeui-thai/leelawadeeui-light.woff2) format("woff2"),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/leelawadeeui-thai/leelawadeeui-light.woff) format("woff");font-weight:100;font-style:normal}@font-face{font-family:Leelawadee UI Web;src:url(https://static2.sharepointonline.com/files/fabric/assets/fonts/leelawadeeui-thai/leelawadeeui-semilight.woff2) format("woff2"),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/leelawadeeui-thai/leelawadeeui-semilight.woff) format("woff");font-weight:300;font-style:normal}@font-face{font-family:Leelawadee UI Web;src:url(https://static2.sharepointonline.com/files/fabric/assets/fonts/leelawadeeui-thai/leelawadeeui-regular.woff2) format("woff2"),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/leelawadeeui-thai/leelawadeeui-regular.woff) format("woff");font-weight:400;font-style:normal}@font-face{font-family:Leelawadee UI Web;src:url(https://static2.sharepointonline.com/files/fabric/assets/fonts/leelawadeeui-thai/leelawadeeui-semibold.woff2) format("woff2"),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/leelawadeeui-thai/leelawadeeui-semibold.woff) format("woff");font-weight:600;font-style:normal}@font-face{font-family:Leelawadee UI Web;src:url(https://static2.sharepointonline.com/files/fabric/assets/fonts/leelawadeeui-thai/leelawadeeui-bold.woff2) format("woff2"),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/leelawadeeui-thai/leelawadeeui-bold.woff) format("woff");font-weight:700;font-style:normal}@font-face{font-family:"Segoe UI Web (Arabic)";src:url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-arabic/segoeui-light.woff2) format("woff2"),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-arabic/segoeui-light.woff) format("woff");font-weight:100;font-style:normal}@font-face{font-family:"Segoe UI Web (Arabic)";src:url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-arabic/segoeui-semilight.woff2) format("woff2"),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-arabic/segoeui-semilight.woff) format("woff");font-weight:300;font-style:normal}@font-face{font-family:"Segoe UI Web (Arabic)";src:url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-arabic/segoeui-regular.woff2) format("woff2"),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-arabic/segoeui-regular.woff) format("woff");font-weight:400;font-style:normal}@font-face{font-family:"Segoe UI Web (Arabic)";src:url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-arabic/segoeui-semibold.woff2) format("woff2"),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-arabic/segoeui-semibold.woff) format("woff");font-weight:600;font-style:normal}@font-face{font-family:"Segoe UI Web (Arabic)";src:url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-arabic/segoeui-bold.woff2) format("woff2"),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-arabic/segoeui-bold.woff) format("woff");font-weight:700;font-style:normal}@font-face{font-family:"Segoe UI Web (Cyrillic)";src:url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-cyrillic/segoeui-light.woff2) format("woff2"),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-cyrillic/segoeui-light.woff) format("woff");font-weight:100;font-style:normal}@font-face{font-family:"Segoe UI Web (Cyrillic)";src:url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-cyrillic/segoeui-semilight.woff2) format("woff2"),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-cyrillic/segoeui-semilight.woff) format("woff");font-weight:300;font-style:normal}@font-face{font-family:"Segoe UI Web (Cyrillic)";src:url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-cyrillic/segoeui-regular.woff2) format("woff2"),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-cyrillic/segoeui-regular.woff) format("woff");font-weight:400;font-style:normal}@font-face{font-family:"Segoe UI Web (Cyrillic)";src:url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-cyrillic/segoeui-semibold.woff2) format("woff2"),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-cyrillic/segoeui-semibold.woff) format("woff");font-weight:600;font-style:normal}@font-face{font-family:"Segoe UI Web (Cyrillic)";src:url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-cyrillic/segoeui-bold.woff2) format("woff2"),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-cyrillic/segoeui-bold.woff) format("woff");font-weight:700;font-style:normal}@font-face{font-family:"Segoe UI Web (East European)";src:url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-easteuropean/segoeui-light.woff2) format("woff2"),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-easteuropean/segoeui-light.woff) format("woff");font-weight:100;font-style:normal}@font-face{font-family:"Segoe UI Web (East European)";src:url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-easteuropean/segoeui-semilight.woff2) format("woff2"),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-easteuropean/segoeui-semilight.woff) format("woff");font-weight:300;font-style:normal}@font-face{font-family:"Segoe UI Web (East European)";src:url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-easteuropean/segoeui-regular.woff2) format("woff2"),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-easteuropean/segoeui-regular.woff) format("woff");font-weight:400;font-style:normal}@font-face{font-family:"Segoe UI Web (East European)";src:url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-easteuropean/segoeui-semibold.woff2) format("woff2"),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-easteuropean/segoeui-semibold.woff) format("woff");font-weight:600;font-style:normal}@font-face{font-family:"Segoe UI Web (East European)";src:url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-easteuropean/segoeui-bold.woff2) format("woff2"),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-easteuropean/segoeui-bold.woff) format("woff");font-weight:700;font-style:normal}@font-face{font-family:"Segoe UI Web (Greek)";src:url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-greek/segoeui-light.woff2) format("woff2"),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-greek/segoeui-light.woff) format("woff");font-weight:100;font-style:normal}@font-face{font-family:"Segoe UI Web (Greek)";src:url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-greek/segoeui-semilight.woff2) format("woff2"),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-greek/segoeui-semilight.woff) format("woff");font-weight:300;font-style:normal}@font-face{font-family:"Segoe UI Web (Greek)";src:url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-greek/segoeui-regular.woff2) format("woff2"),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-greek/segoeui-regular.woff) format("woff");font-weight:400;font-style:normal}@font-face{font-family:"Segoe UI Web (Greek)";src:url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-greek/segoeui-semibold.woff2) format("woff2"),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-greek/segoeui-semibold.woff) format("woff");font-weight:600;font-style:normal}@font-face{font-family:"Segoe UI Web (Greek)";src:url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-greek/segoeui-bold.woff2) format("woff2"),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-greek/segoeui-bold.woff) format("woff");font-weight:700;font-style:normal}@font-face{font-family:"Segoe UI Web (Hebrew)";src:url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-hebrew/segoeui-light.woff2) format("woff2"),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-hebrew/segoeui-light.woff) format("woff");font-weight:100;font-style:normal}@font-face{font-family:"Segoe UI Web (Hebrew)";src:url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-hebrew/segoeui-semilight.woff2) format("woff2"),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-hebrew/segoeui-semilight.woff) format("woff");font-weight:300;font-style:normal}@font-face{font-family:"Segoe UI Web (Hebrew)";src:url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-hebrew/segoeui-regular.woff2) format("woff2"),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-hebrew/segoeui-regular.woff) format("woff");font-weight:400;font-style:normal}@font-face{font-family:"Segoe UI Web (Hebrew)";src:url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-hebrew/segoeui-semibold.woff2) format("woff2"),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-hebrew/segoeui-semibold.woff) format("woff");font-weight:600;font-style:normal}@font-face{font-family:"Segoe UI Web (Hebrew)";src:url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-hebrew/segoeui-bold.woff2) format("woff2"),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-hebrew/segoeui-bold.woff) format("woff");font-weight:700;font-style:normal}@font-face{font-family:"Segoe UI Web (Vietnamese)";src:url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-vietnamese/segoeui-light.woff2) format("woff2"),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-vietnamese/segoeui-light.woff) format("woff");font-weight:100;font-style:normal}@font-face{font-family:"Segoe UI Web (Vietnamese)";src:url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-vietnamese/segoeui-semilight.woff2) format("woff2"),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-vietnamese/segoeui-semilight.woff) format("woff");font-weight:300;font-style:normal}@font-face{font-family:"Segoe UI Web (Vietnamese)";src:url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-vietnamese/segoeui-regular.woff2) format("woff2"),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-vietnamese/segoeui-regular.woff) format("woff");font-weight:400;font-style:normal}@font-face{font-family:"Segoe UI Web (Vietnamese)";src:url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-vietnamese/segoeui-semibold.woff2) format("woff2"),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-vietnamese/segoeui-semibold.woff) format("woff");font-weight:600;font-style:normal}@font-face{font-family:"Segoe UI Web (Vietnamese)";src:url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-vietnamese/segoeui-bold.woff2) format("woff2"),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-vietnamese/segoeui-bold.woff) format("woff");font-weight:700;font-style:normal}@font-face{font-family:"Segoe UI Web (West European)";src:url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-light.woff2) format("woff2"),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-light.woff) format("woff");font-weight:100;font-style:normal}@font-face{font-family:"Segoe UI Web (West European)";src:url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-semilight.woff2) format("woff2"),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-semilight.woff) format("woff");font-weight:300;font-style:normal}@font-face{font-family:"Segoe UI Web (West European)";src:url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-regular.woff2) format("woff2"),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-regular.woff) format("woff");font-weight:400;font-style:normal}@font-face{font-family:"Segoe UI Web (West European)";src:url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-semibold.woff2) format("woff2"),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-semibold.woff) format("woff");font-weight:600;font-style:normal}@font-face{font-family:"Segoe UI Web (West European)";src:url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-bold.woff2) format("woff2"),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-bold.woff) format("woff");font-weight:700;font-style:normal}@font-face{font-family:Selawik Web;src:url(https://static2.sharepointonline.com/files/fabric/assets/fonts/selawik/selawik-light.woff2) format("woff2"),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/selawik/selawik-light.woff) format("woff");font-weight:100;font-style:normal}@font-face{font-family:Selawik Web;src:url(https://static2.sharepointonline.com/files/fabric/assets/fonts/selawik/selawik-semilight.woff2) format("woff2"),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/selawik/selawik-semilight.woff) format("woff");font-weight:300;font-style:normal}@font-face{font-family:Selawik Web;src:url(https://static2.sharepointonline.com/files/fabric/assets/fonts/selawik/selawik-regular.woff2) format("woff2"),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/selawik/selawik-regular.woff) format("woff");font-weight:400;font-style:normal}@font-face{font-family:Selawik Web;src:url(https://static2.sharepointonline.com/files/fabric/assets/fonts/selawik/selawik-semibold.woff2) format("woff2"),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/selawik/selawik-semibold.woff) format("woff");font-weight:600;font-style:normal}@font-face{font-family:Selawik Web;src:url(https://static2.sharepointonline.com/files/fabric/assets/fonts/selawik/selawik-bold.woff2) format("woff2"),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/selawik/selawik-bold.woff) format("woff");font-weight:700;font-style:normal}@font-face{font-family:Leelawadee UI Web;src:url(https://static2.sharepointonline.com/files/fabric/assets/fonts/leelawadeeui-thai/leelawadeeui-semilight.woff2) format("woff2"),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/leelawadeeui-thai/leelawadeeui-semilight.woff) format("woff");font-weight:100;font-style:normal}@font-face{font-family:Leelawadee UI Web;src:url(https://static2.sharepointonline.com/files/fabric/assets/fonts/leelawadeeui-thai/leelawadeeui-bold.woff2) format("woff2"),url(https://static2.sharepointonline.com/files/fabric/assets/fonts/leelawadeeui-thai/leelawadeeui-bold.woff) format("woff");font-weight:600;font-style:normal}.ms-Grid{box-sizing:border-box;zoom:1;padding:0 8px}.ms-Grid:after,.ms-Grid:before{display:table;content:"";line-height:0}.ms-Grid:after{clear:both}.ms-Grid-row{margin:0 -8px;box-sizing:border-box;zoom:1}.ms-Grid-row:after,.ms-Grid-row:before{display:table;content:"";line-height:0}.ms-Grid-row:after{clear:both}.ms-Grid-col{position:relative;min-height:1px;padding-left:8px;padding-right:8px;box-sizing:border-box}[dir=ltr] .ms-Grid-col{float:left}[dir=rtl] .ms-Grid-col{float:right}.ms-Grid-col .ms-Grid{padding:0}.ms-Icon{display:inline-block;font-family:FluentIcons,FabricMDL2Icons;font-style:normal;font-weight:400;speak:none}.ms-Icon--circle{margin:0 .5em 0 0;position:relative;display:inline-block;font-size:1rem;width:1em;height:1em;padding:0;text-align:left}[dir=rtl] .ms-Icon--circle{margin:0 0 0 .5em}.ms-Icon--circle:after,.ms-Icon--circle:before{line-height:1;font-size:inherit}.ms-Icon--circle:before{display:block;width:100%;height:100%;margin:0;padding:0;position:absolute}.ms-Icon--circle:after{content:"";position:absolute;top:0;left:0;transform:scale(2);transform-origin:50% 50%;z-index:0}.ms-Icon--xs{font-size:10px}.ms-Icon--s{font-size:12px}.ms-Icon--m{font-size:16px}.ms-Icon--l{font-size:20px}.ms-Icon--12PointStar:before{content:""}.ms-Icon--6PointStar:before{content:""}.ms-Icon--AADLogo:before{content:""}.ms-Icon--AccessibiltyChecker:before{content:""}.ms-Icon--AccessLogo:before{content:""}.ms-Icon--AccessLogoFill:before{content:""}.ms-Icon--AccountActivity:before{content:""}.ms-Icon--AccountBrowser:before{content:""}.ms-Icon--AccountManagement:before{content:""}.ms-Icon--ActivateOrders:before{content:""}.ms-Icon--ActivityFeed:before{content:""}.ms-Icon--AddBookmark:before{content:""}.ms-Icon--AddEvent:before{content:""}.ms-Icon--AddFavorite:before{content:""}.ms-Icon--AddFavoriteFill:before{content:""}.ms-Icon--AddGroup:before{content:""}.ms-Icon--AddHome:before{content:""}.ms-Icon--AddIn:before{content:""}.ms-Icon--AddLink:before{content:""}.ms-Icon--AddNotes:before{content:""}.ms-Icon--AddOnlineMeeting:before{content:""}.ms-Icon--AddPhone:before{content:""}.ms-Icon--AddReaction:before{content:""}.ms-Icon--AddToShoppingList:before{content:""}.ms-Icon--AddWork:before{content:""}.ms-Icon--AdminALogo32:before{content:""}.ms-Icon--AdminALogoFill32:before{content:""}.ms-Icon--AdminALogoInverse32:before{content:""}.ms-Icon--AdminCLogoInverse32:before{content:""}.ms-Icon--AdminDLogoInverse32:before{content:""}.ms-Icon--AdminELogoInverse32:before{content:""}.ms-Icon--AdminLLogoInverse32:before{content:""}.ms-Icon--AdminMLogoInverse32:before{content:""}.ms-Icon--AdminOLogoInverse32:before{content:""}.ms-Icon--AdminPLogoInverse32:before{content:""}.ms-Icon--AdminSLogoInverse32:before{content:""}.ms-Icon--AdminYLogoInverse32:before{content:""}.ms-Icon--AirTickets:before{content:""}.ms-Icon--AlarmClock:before{content:""}.ms-Icon--Album:before{content:""}.ms-Icon--AlbumRemove:before{content:""}.ms-Icon--AlertSettings:before{content:""}.ms-Icon--AlertSolid:before{content:""}.ms-Icon--AlignHorizontalCenter:before{content:""}.ms-Icon--AlignHorizontalLeft:before{content:""}.ms-Icon--AlignHorizontalRight:before{content:""}.ms-Icon--AlignJustify:before{content:""}.ms-Icon--AlignVerticalBottom:before{content:""}.ms-Icon--AlignVerticalCenter:before{content:""}.ms-Icon--AlignVerticalTop:before{content:""}[dir=ltr] .ms-Icon--AllApps:before{content:""}[dir=rtl] .ms-Icon--AllApps:before{content:""}[dir=ltr] .ms-Icon--AllAppsMirrored:before{content:""}[dir=rtl] .ms-Icon--AllAppsMirrored:before{content:""}.ms-Icon--AllCurrency:before{content:""}.ms-Icon--AnalyticsLogo:before{content:""}.ms-Icon--AnalyticsQuery:before{content:""}.ms-Icon--AnalyticsReport:before{content:""}.ms-Icon--AnalyticsView:before{content:""}.ms-Icon--AnchorLock:before{content:""}.ms-Icon--AppIconDefaultAdd:before{content:""}.ms-Icon--AppIconDefaultList:before{content:""}.ms-Icon--Archive:before{content:""}.ms-Icon--ArrangeBringForward:before{content:""}.ms-Icon--ArrangeBringToFront:before{content:""}.ms-Icon--ArrangeByFrom:before{content:""}.ms-Icon--ArrangeSendBackward:before{content:""}.ms-Icon--ArrangeSendToBack:before{content:""}.ms-Icon--Arrivals:before{content:""}[dir=ltr] .ms-Icon--ArrowDownRight8:before{content:""}[dir=rtl] .ms-Icon--ArrowDownRight8:before{content:""}[dir=ltr] .ms-Icon--ArrowDownRightMirrored8:before{content:""}[dir=rtl] .ms-Icon--ArrowDownRightMirrored8:before{content:""}.ms-Icon--ArrowTallDownLeft:before{content:""}.ms-Icon--ArrowTallDownRight:before{content:""}.ms-Icon--ArrowTallUpLeft:before{content:""}.ms-Icon--ArrowTallUpRight:before{content:""}.ms-Icon--ArrowUpRight:before{content:""}[dir=ltr] .ms-Icon--ArrowUpRight8:before{content:""}[dir=rtl] .ms-Icon--ArrowUpRight8:before{content:""}[dir=ltr] .ms-Icon--ArrowUpRightMirrored8:before{content:""}[dir=rtl] .ms-Icon--ArrowUpRightMirrored8:before{content:""}.ms-Icon--Articles:before{content:""}.ms-Icon--Ascending:before{content:""}.ms-Icon--AssessmentGroup:before{content:""}.ms-Icon--AssessmentGroupTemplate:before{content:""}.ms-Icon--AssetLibrary:before{content:""}.ms-Icon--Assign:before{content:""}.ms-Icon--AsteriskSolid:before{content:""}.ms-Icon--ATPLogo:before{content:""}.ms-Icon--AustralianRules:before{content:""}.ms-Icon--AuthenticatorApp:before{content:""}.ms-Icon--AutoEnhanceOff:before{content:""}.ms-Icon--AutoEnhanceOn:before{content:""}.ms-Icon--AutoFillTemplate:before{content:""}.ms-Icon--AutoHeight:before{content:""}.ms-Icon--AutoRacing:before{content:""}.ms-Icon--AwayStatus:before{content:""}.ms-Icon--AzureAPIManagement:before{content:""}.ms-Icon--AzureKeyVault:before{content:""}.ms-Icon--AzureLogo:before{content:""}.ms-Icon--AzureServiceEndpoint:before{content:""}.ms-Icon--BackgroundColor:before{content:""}.ms-Icon--Backlog:before{content:""}.ms-Icon--BacklogBoard:before{content:""}.ms-Icon--BacklogList:before{content:""}.ms-Icon--Balloons:before{content:""}.ms-Icon--BankSolid:before{content:""}.ms-Icon--BarChart4:before{content:""}.ms-Icon--BarChartHorizontal:before{content:""}.ms-Icon--BarChartVertical:before{content:""}.ms-Icon--BarChartVerticalEdit:before{content:""}.ms-Icon--BarChartVerticalFill:before{content:""}.ms-Icon--BarChartVerticalFilter:before{content:""}.ms-Icon--BarChartVerticalFilterSolid:before{content:""}.ms-Icon--Baseball:before{content:""}.ms-Icon--BeerMug:before{content:""}.ms-Icon--BIDashboard:before{content:""}.ms-Icon--BingLogo:before{content:""}.ms-Icon--BirthdayCake:before{content:""}.ms-Icon--Blocked:before{content:""}.ms-Icon--Blocked12:before{content:""}.ms-Icon--Blocked2Solid:before{content:""}.ms-Icon--BlockedSite:before{content:""}.ms-Icon--BlockedSiteSolid12:before{content:""}.ms-Icon--BlockedSolid:before{content:""}.ms-Icon--Blog:before{content:""}.ms-Icon--BlowingSnow:before{content:""}.ms-Icon--Blur:before{content:""}.ms-Icon--Boards:before{content:""}.ms-Icon--BookAnswers:before{content:""}.ms-Icon--BookingsLogo:before{content:""}.ms-Icon--BookmarkReport:before{content:""}[dir=ltr] .ms-Icon--Bookmarks:before{content:""}[dir=rtl] .ms-Icon--Bookmarks:before{content:""}[dir=ltr] .ms-Icon--BookmarksMirrored:before{content:""}[dir=rtl] .ms-Icon--BookmarksMirrored:before{content:""}.ms-Icon--BorderDash:before{content:""}.ms-Icon--BorderDot:before{content:""}.ms-Icon--BoxAdditionSolid:before{content:""}.ms-Icon--BoxCheckmarkSolid:before{content:""}.ms-Icon--BoxMultiplySolid:before{content:""}.ms-Icon--BoxPlaySolid:before{content:""}.ms-Icon--BoxSubtractSolid:before{content:""}.ms-Icon--BranchCommit:before{content:""}.ms-Icon--BranchCompare:before{content:""}.ms-Icon--BranchFork:before{content:""}.ms-Icon--BranchFork2:before{content:""}.ms-Icon--BranchLocked:before{content:""}.ms-Icon--BranchMerge:before{content:""}.ms-Icon--BranchPullRequest:before{content:""}.ms-Icon--BranchSearch:before{content:""}.ms-Icon--BranchShelveset:before{content:""}.ms-Icon--Breadcrumb:before{content:""}.ms-Icon--Breakfast:before{content:""}.ms-Icon--BrowserScreenShot:before{content:""}.ms-Icon--BrowserTab:before{content:""}.ms-Icon--BrowserTabScreenshot:before{content:""}.ms-Icon--Brunch:before{content:""}.ms-Icon--Brush:before{content:""}.ms-Icon--BucketColor:before{content:""}.ms-Icon--BucketColorFill:before{content:""}.ms-Icon--BufferTimeAfter:before{content:""}.ms-Icon--BufferTimeBefore:before{content:""}.ms-Icon--BufferTimeBoth:before{content:""}.ms-Icon--BugSolid:before{content:""}.ms-Icon--Build:before{content:""}.ms-Icon--BuildDefinition:before{content:""}.ms-Icon--BuildIssue:before{content:""}.ms-Icon--BuildQueue:before{content:""}.ms-Icon--BuildQueueNew:before{content:""}.ms-Icon--BulkUpload:before{content:""}[dir=ltr] .ms-Icon--BulletedList2:before{content:""}[dir=rtl] .ms-Icon--BulletedList2:before{content:""}[dir=ltr] .ms-Icon--BulletedList2Mirrored:before{content:""}[dir=rtl] .ms-Icon--BulletedList2Mirrored:before{content:""}[dir=ltr] .ms-Icon--BulletedListBullet:before{content:""}[dir=rtl] .ms-Icon--BulletedListBullet:before{content:""}[dir=ltr] .ms-Icon--BulletedListBulletMirrored:before{content:""}[dir=rtl] .ms-Icon--BulletedListBulletMirrored:before{content:""}[dir=ltr] .ms-Icon--BulletedList:before{content:""}[dir=rtl] .ms-Icon--BulletedList:before{content:""}[dir=ltr] .ms-Icon--BulletedListMirrored:before{content:""}[dir=rtl] .ms-Icon--BulletedListMirrored:before{content:""}[dir=ltr] .ms-Icon--BulletedListText:before{content:""}[dir=rtl] .ms-Icon--BulletedListText:before{content:""}[dir=ltr] .ms-Icon--BulletedListTextMirrored:before{content:""}[dir=rtl] .ms-Icon--BulletedListTextMirrored:before{content:""}.ms-Icon--BulletedTreeList:before{content:""}.ms-Icon--BullseyeTarget:before{content:""}.ms-Icon--BullseyeTargetEdit:before{content:""}.ms-Icon--BusinessCenterLogo:before{content:""}.ms-Icon--BusinessHoursSign:before{content:""}.ms-Icon--ButtonControl:before{content:""}.ms-Icon--Cake:before{content:""}.ms-Icon--CalculatorNotEqualTo:before{content:""}.ms-Icon--CalendarAgenda:before{content:""}[dir=ltr] .ms-Icon--Calendar:before{content:""}[dir=rtl] .ms-Icon--Calendar:before{content:""}[dir=ltr] .ms-Icon--CalendarMirrored:before{content:""}[dir=rtl] .ms-Icon--CalendarMirrored:before{content:""}[dir=ltr] .ms-Icon--CalendarSettings:before{content:""}[dir=rtl] .ms-Icon--CalendarSettings:before{content:""}[dir=ltr] .ms-Icon--CalendarSettingsMirrored:before{content:""}[dir=rtl] .ms-Icon--CalendarSettingsMirrored:before{content:""}.ms-Icon--CalendarWorkWeek:before{content:""}.ms-Icon--CalendarYear:before{content:""}.ms-Icon--CaloriesAdd:before{content:""}.ms-Icon--CampaignTemplate:before{content:""}.ms-Icon--CannedChat:before{content:""}.ms-Icon--CaretBottomLeftCenter8:before{content:""}.ms-Icon--CaretBottomLeftSolid8:before{content:""}.ms-Icon--CaretBottomRightCenter8:before{content:""}.ms-Icon--CaretBottomRightSolid8:before{content:""}[dir=ltr] .ms-Icon--CaretHollow:before{content:""}[dir=rtl] .ms-Icon--CaretHollow:before{content:""}[dir=ltr] .ms-Icon--CaretHollowMirrored:before{content:""}[dir=rtl] .ms-Icon--CaretHollowMirrored:before{content:""}.ms-Icon--CaretRight:before{content:""}.ms-Icon--CaretSolid16:before{content:""}[dir=ltr] .ms-Icon--CaretSolid:before{content:""}[dir=rtl] .ms-Icon--CaretSolid:before{content:""}[dir=ltr] .ms-Icon--CaretSolidMirrored:before{content:""}[dir=rtl] .ms-Icon--CaretSolidMirrored:before{content:""}.ms-Icon--CaretTopLeftCenter8:before{content:""}.ms-Icon--CaretTopLeftSolid8:before{content:""}.ms-Icon--CaretTopRightCenter8:before{content:""}.ms-Icon--CaretTopRightSolid8:before{content:""}.ms-Icon--Cat:before{content:""}.ms-Icon--CertifiedDatabase:before{content:""}.ms-Icon--ChangeEntitlements:before{content:""}.ms-Icon--Chart:before{content:""}.ms-Icon--ChartSeries:before{content:""}.ms-Icon--ChartTemplate:before{content:""}.ms-Icon--ChartXAngle:before{content:""}.ms-Icon--ChartYAngle:before{content:""}.ms-Icon--Chat:before{content:""}.ms-Icon--ChatBot:before{content:""}.ms-Icon--ChatInviteFriend:before{content:""}.ms-Icon--ChatSolid:before{content:""}.ms-Icon--CheckedOutByOther12:before{content:""}.ms-Icon--CheckedOutByYou12:before{content:""}[dir=ltr] .ms-Icon--CheckListCheck:before{content:""}[dir=rtl] .ms-Icon--CheckListCheck:before{content:""}[dir=ltr] .ms-Icon--CheckListCheckMirrored:before{content:""}[dir=rtl] .ms-Icon--CheckListCheckMirrored:before{content:""}[dir=ltr] .ms-Icon--CheckListText:before{content:""}[dir=rtl] .ms-Icon--CheckListText:before{content:""}[dir=ltr] .ms-Icon--CheckListTextMirrored:before{content:""}[dir=rtl] .ms-Icon--CheckListTextMirrored:before{content:""}.ms-Icon--ChevronDownEnd6:before{content:""}.ms-Icon--ChevronFold10:before{content:""}.ms-Icon--ChevronLeftEnd6:before{content:""}.ms-Icon--ChevronRightEnd6:before{content:""}.ms-Icon--ChevronUnfold10:before{content:""}.ms-Icon--ChevronUpEnd6:before{content:""}.ms-Icon--Childof:before{content:""}.ms-Icon--Chopsticks:before{content:""}[dir=ltr] .ms-Icon--ChromeBack:before{content:""}[dir=rtl] .ms-Icon--ChromeBack:before{content:""}[dir=ltr] .ms-Icon--ChromeBackMirrored:before{content:""}[dir=rtl] .ms-Icon--ChromeBackMirrored:before{content:""}.ms-Icon--CircleAddition:before{content:""}.ms-Icon--CircleAdditionSolid:before{content:""}.ms-Icon--CircleHalfFull:before{content:""}.ms-Icon--CirclePause:before{content:""}.ms-Icon--CirclePauseSolid:before{content:""}.ms-Icon--CirclePlus:before{content:""}.ms-Icon--CircleStop:before{content:""}.ms-Icon--CircleStopSolid:before{content:""}.ms-Icon--ClassNotebookLogo16:before{content:""}.ms-Icon--ClassNotebookLogo32:before{content:""}.ms-Icon--ClassNotebookLogoFill16:before{content:""}.ms-Icon--ClassNotebookLogoFill32:before{content:""}.ms-Icon--ClassNotebookLogoInverse:before{content:""}.ms-Icon--ClassNotebookLogoInverse16:before{content:""}.ms-Icon--ClassNotebookLogoInverse32:before{content:""}.ms-Icon--ClassroomLogo:before{content:""}.ms-Icon--ClearFilter:before{content:""}.ms-Icon--ClearFormatting:before{content:""}.ms-Icon--ClearFormattingA:before{content:""}.ms-Icon--ClearFormattingEraser:before{content:""}.ms-Icon--ClearNight:before{content:""}[dir=ltr] .ms-Icon--ClearSelection:before{content:""}[dir=rtl] .ms-Icon--ClearSelection:before{content:""}[dir=ltr] .ms-Icon--ClearSelectionMirrored:before{content:""}[dir=rtl] .ms-Icon--ClearSelectionMirrored:before{content:""}[dir=ltr] .ms-Icon--ClipboardList:before{content:""}[dir=rtl] .ms-Icon--ClipboardList:before{content:""}[dir=ltr] .ms-Icon--ClipboardListMirrored:before{content:""}[dir=rtl] .ms-Icon--ClipboardListMirrored:before{content:""}.ms-Icon--ClipboardSolid:before{content:""}.ms-Icon--Clock:before{content:""}.ms-Icon--CloneToDesktop:before{content:""}.ms-Icon--ClosedCaption:before{content:""}[dir=ltr] .ms-Icon--ClosePane:before{content:""}[dir=rtl] .ms-Icon--ClosePane:before{content:""}[dir=ltr] .ms-Icon--ClosePaneMirrored:before{content:""}[dir=rtl] .ms-Icon--ClosePaneMirrored:before{content:""}.ms-Icon--CloudAdd:before{content:""}.ms-Icon--CloudImportExport:before{content:""}.ms-Icon--CloudUpload:before{content:""}.ms-Icon--CloudWeather:before{content:""}.ms-Icon--Cloudy:before{content:""}.ms-Icon--Cocktails:before{content:""}.ms-Icon--CodeEdit:before{content:""}.ms-Icon--Coffee:before{content:""}.ms-Icon--CoffeeScript:before{content:""}.ms-Icon--CollapseMenu:before{content:""}.ms-Icon--CollegeFootball:before{content:""}.ms-Icon--CollegeHoops:before{content:""}.ms-Icon--ColumnLeftTwoThirds:before{content:""}.ms-Icon--ColumnLeftTwoThirdsEdit:before{content:""}.ms-Icon--ColumnOptions:before{content:""}.ms-Icon--ColumnRightTwoThirds:before{content:""}.ms-Icon--ColumnRightTwoThirdsEdit:before{content:""}.ms-Icon--ColumnVerticalSection:before{content:""}.ms-Icon--ColumnVerticalSectionEdit:before{content:""}.ms-Icon--Combine:before{content:""}.ms-Icon--Combobox:before{content:""}.ms-Icon--CommentActive:before{content:""}.ms-Icon--CommentAdd:before{content:""}.ms-Icon--CommentNext:before{content:""}.ms-Icon--CommentPrevious:before{content:""}.ms-Icon--CommentSolid:before{content:""}.ms-Icon--CommentUrgent:before{content:""}.ms-Icon--Commitments:before{content:""}[dir=ltr] .ms-Icon--CompanyDirectory:before{content:""}[dir=rtl] .ms-Icon--CompanyDirectory:before{content:""}[dir=ltr] .ms-Icon--CompanyDirectoryMirrored:before{content:""}[dir=rtl] .ms-Icon--CompanyDirectoryMirrored:before{content:""}.ms-Icon--Compare:before{content:""}.ms-Icon--CompassNW:before{content:""}.ms-Icon--ComplianceAudit:before{content:""}.ms-Icon--ConfigurationSolid:before{content:""}.ms-Icon--ConnectContacts:before{content:""}.ms-Icon--ConnectVirtualMachine:before{content:""}.ms-Icon--ConstructionConeSolid:before{content:""}.ms-Icon--ContactCard:before{content:""}[dir=ltr] .ms-Icon--ContactCardSettings:before{content:""}[dir=rtl] .ms-Icon--ContactCardSettings:before{content:""}[dir=ltr] .ms-Icon--ContactCardSettingsMirrored:before{content:""}[dir=rtl] .ms-Icon--ContactCardSettingsMirrored:before{content:""}.ms-Icon--ContactHeart:before{content:""}.ms-Icon--ContactLink:before{content:""}.ms-Icon--ContactList:before{content:""}.ms-Icon--ContextMenu:before{content:""}.ms-Icon--Contrast:before{content:""}.ms-Icon--Cotton:before{content:""}.ms-Icon--Coupon:before{content:""}.ms-Icon--CPlusPlus:before{content:""}.ms-Icon--CPlusPlusLanguage:before{content:""}.ms-Icon--CreateMailRule:before{content:""}.ms-Icon--Cricket:before{content:""}.ms-Icon--CRMCustomerInsightsApp:before{content:""}.ms-Icon--CRMProcesses:before{content:""}.ms-Icon--CRMReport:before{content:""}.ms-Icon--CRMServices:before{content:""}.ms-Icon--Crown:before{content:""}.ms-Icon--CrownSolid:before{content:""}.ms-Icon--CSharp:before{content:""}.ms-Icon--CSharpLanguage:before{content:""}.ms-Icon--CSS:before{content:""}.ms-Icon--CubeShape:before{content:""}.ms-Icon--CustomizeToolbar:before{content:""}[dir=ltr] .ms-Icon--CustomList:before{content:""}[dir=rtl] .ms-Icon--CustomList:before{content:""}[dir=ltr] .ms-Icon--CustomListMirrored:before{content:""}[dir=rtl] .ms-Icon--CustomListMirrored:before{content:""}.ms-Icon--Cycling:before{content:""}.ms-Icon--D365TalentHRCore:before{content:""}.ms-Icon--D365TalentInsight:before{content:""}.ms-Icon--D365TalentLearn:before{content:""}.ms-Icon--DashboardAdd:before{content:""}.ms-Icon--Database:before{content:""}.ms-Icon--DatabaseSync:before{content:""}.ms-Icon--DataConnectionLibrary:before{content:""}.ms-Icon--Dataflows:before{content:""}.ms-Icon--DataflowsLink:before{content:""}.ms-Icon--DataManagementSettings:before{content:""}.ms-Icon--DateTime2:before{content:""}[dir=ltr] .ms-Icon--DateTime:before{content:""}[dir=rtl] .ms-Icon--DateTime:before{content:""}[dir=ltr] .ms-Icon--DateTimeMirrored:before{content:""}[dir=rtl] .ms-Icon--DateTimeMirrored:before{content:""}.ms-Icon--DeactivateOrders:before{content:""}.ms-Icon--Decimals:before{content:""}.ms-Icon--DecisionSolid:before{content:""}[dir=ltr] .ms-Icon--DecreaseIndentArrow:before{content:""}[dir=rtl] .ms-Icon--DecreaseIndentArrow:before{content:""}[dir=ltr] .ms-Icon--DecreaseIndentArrowMirrored:before{content:""}[dir=rtl] .ms-Icon--DecreaseIndentArrowMirrored:before{content:""}.ms-Icon--DecreaseIndentLegacy:before{content:""}[dir=ltr] .ms-Icon--DecreaseIndentText:before{content:""}[dir=rtl] .ms-Icon--DecreaseIndentText:before{content:""}[dir=ltr] .ms-Icon--DecreaseIndentTextMirrored:before{content:""}[dir=rtl] .ms-Icon--DecreaseIndentTextMirrored:before{content:""}.ms-Icon--DefaultRatio:before{content:""}.ms-Icon--DefectSolid:before{content:""}.ms-Icon--DefenderTVM:before{content:""}.ms-Icon--DeleteColumns:before{content:""}[dir=ltr] .ms-Icon--DeleteRows:before{content:""}[dir=rtl] .ms-Icon--DeleteRows:before{content:""}[dir=ltr] .ms-Icon--DeleteRowsMirrored:before{content:""}[dir=rtl] .ms-Icon--DeleteRowsMirrored:before{content:""}.ms-Icon--DeleteTable:before{content:""}.ms-Icon--DeliveryTruck:before{content:""}.ms-Icon--DelveAnalytics:before{content:""}.ms-Icon--DelveAnalyticsLogo:before{content:""}.ms-Icon--DelveLogo:before{content:""}.ms-Icon--DelveLogoFill:before{content:""}.ms-Icon--DelveLogoInverse:before{content:""}.ms-Icon--DependencyAdd:before{content:""}.ms-Icon--DependencyRemove:before{content:""}.ms-Icon--Deploy:before{content:""}.ms-Icon--Descending:before{content:""}.ms-Icon--DesktopScreenshot:before{content:""}.ms-Icon--DiagnosticDataBarTooltip:before{content:""}.ms-Icon--Diamond:before{content:""}.ms-Icon--DiamondSolid:before{content:""}.ms-Icon--DictionaryRemove:before{content:""}.ms-Icon--DietPlanNotebook:before{content:""}.ms-Icon--DiffInline:before{content:""}.ms-Icon--DiffSideBySide:before{content:""}.ms-Icon--DisconnectVirtualMachine:before{content:""}.ms-Icon--DislikeSolid:before{content:""}.ms-Icon--DistributeDown:before{content:""}[dir=ltr] .ms-Icon--DockLeft:before{content:""}[dir=rtl] .ms-Icon--DockLeft:before{content:""}[dir=ltr] .ms-Icon--DockLeftMirrored:before{content:""}[dir=rtl] .ms-Icon--DockLeftMirrored:before{content:""}.ms-Icon--DocLibrary:before{content:""}.ms-Icon--DocsLogoInverse:before{content:""}.ms-Icon--Documentation:before{content:""}.ms-Icon--DocumentManagement:before{content:""}.ms-Icon--DocumentReply:before{content:""}.ms-Icon--DocumentSearch:before{content:""}.ms-Icon--DocumentSet:before{content:""}.ms-Icon--DOM:before{content:""}.ms-Icon--DonutChart:before{content:""}.ms-Icon--Door:before{content:""}.ms-Icon--DoubleBookmark:before{content:""}.ms-Icon--DoubleChevronDown:before{content:""}.ms-Icon--DoubleChevronDown12:before{content:""}.ms-Icon--DoubleChevronDown8:before{content:""}.ms-Icon--DoubleChevronLeft:before{content:""}.ms-Icon--DoubleChevronLeft12:before{content:""}.ms-Icon--DoubleChevronLeft8:before{content:""}[dir=ltr] .ms-Icon--DoubleChevronLeftMed:before{content:""}[dir=rtl] .ms-Icon--DoubleChevronLeftMed:before{content:""}[dir=ltr] .ms-Icon--DoubleChevronLeftMedMirrored:before{content:""}[dir=rtl] .ms-Icon--DoubleChevronLeftMedMirrored:before{content:""}.ms-Icon--DoubleChevronRight:before{content:""}.ms-Icon--DoubleChevronRight12:before{content:""}.ms-Icon--DoubleChevronRight8:before{content:""}.ms-Icon--DoubleChevronUp:before{content:""}.ms-Icon--DoubleChevronUp12:before{content:""}.ms-Icon--DoubleChevronUp8:before{content:""}.ms-Icon--DoubleColumn:before{content:""}.ms-Icon--DoubleColumnEdit:before{content:""}.ms-Icon--DoubleDownArrow:before{content:""}.ms-Icon--DownloadDocument:before{content:""}.ms-Icon--DragObject:before{content:""}.ms-Icon--DrillDown:before{content:""}.ms-Icon--DrillDownSolid:before{content:""}.ms-Icon--DrillExpand:before{content:""}.ms-Icon--DrillShow:before{content:""}.ms-Icon--DrillThrough:before{content:""}.ms-Icon--DRM:before{content:""}.ms-Icon--Dropdown:before{content:""}.ms-Icon--DropShapeSolid:before{content:""}.ms-Icon--DuplicateRow:before{content:""}.ms-Icon--Duststorm:before{content:""}.ms-Icon--Dynamics365Logo:before{content:""}.ms-Icon--DynamicSMBLogo:before{content:""}.ms-Icon--EatDrink:before{content:""}.ms-Icon--EdgeLogo:before{content:""}.ms-Icon--eDiscovery:before{content:""}.ms-Icon--EditContact:before{content:""}.ms-Icon--EditCreate:before{content:""}.ms-Icon--EditMail:before{content:""}[dir=ltr] .ms-Icon--Edit:before{content:""}[dir=rtl] .ms-Icon--Edit:before{content:""}[dir=ltr] .ms-Icon--EditMirrored:before{content:""}[dir=rtl] .ms-Icon--EditMirrored:before{content:""}.ms-Icon--EditNote:before{content:""}.ms-Icon--EditPhoto:before{content:""}[dir=ltr] .ms-Icon--EditSolid12:before{content:""}[dir=rtl] .ms-Icon--EditSolid12:before{content:""}[dir=ltr] .ms-Icon--EditSolidMirrored12:before{content:""}[dir=rtl] .ms-Icon--EditSolidMirrored12:before{content:""}.ms-Icon--EditStyle:before{content:""}.ms-Icon--Ellipse:before{content:""}.ms-Icon--Embed:before{content:""}.ms-Icon--EmojiDisappointed:before{content:""}.ms-Icon--EmojiNeutral:before{content:""}.ms-Icon--EmptyRecycleBin:before{content:""}.ms-Icon--Encryption:before{content:""}.ms-Icon--EngineeringGroup:before{content:""}.ms-Icon--EntitlementPolicy:before{content:""}.ms-Icon--EntitlementRedemption:before{content:""}.ms-Icon--EntryDecline:before{content:""}.ms-Icon--EntryView:before{content:""}.ms-Icon--Event:before{content:""}.ms-Icon--EventAccepted:before{content:""}.ms-Icon--EventDate:before{content:""}.ms-Icon--EventDateMissed12:before{content:""}.ms-Icon--EventDeclined:before{content:""}.ms-Icon--EventInfo:before{content:""}[dir=ltr] .ms-Icon--EventTentative:before{content:""}[dir=rtl] .ms-Icon--EventTentative:before{content:""}[dir=ltr] .ms-Icon--EventTentativeMirrored:before{content:""}[dir=rtl] .ms-Icon--EventTentativeMirrored:before{content:""}.ms-Icon--EventToDoLogo:before{content:""}.ms-Icon--ExcelDocument:before{content:""}.ms-Icon--ExcelLogo:before{content:""}.ms-Icon--ExcelLogo16:before{content:""}.ms-Icon--ExcelLogoFill:before{content:""}.ms-Icon--ExcelLogoFill16:before{content:""}.ms-Icon--ExcelLogoInverse:before{content:""}.ms-Icon--ExcelLogoInverse16:before{content:""}.ms-Icon--ExchangeLogo:before{content:""}.ms-Icon--ExchangeLogoFill:before{content:""}.ms-Icon--ExchangeLogoInverse:before{content:""}.ms-Icon--ExerciseTracker:before{content:""}.ms-Icon--ExpandMenu:before{content:""}.ms-Icon--ExploreData:before{content:""}[dir=ltr] .ms-Icon--Export:before{content:""}[dir=rtl] .ms-Icon--Export:before{content:""}[dir=ltr] .ms-Icon--ExportMirrored:before{content:""}[dir=rtl] .ms-Icon--ExportMirrored:before{content:""}.ms-Icon--ExternalBuild:before{content:""}.ms-Icon--ExternalTFVC:before{content:""}.ms-Icon--ExternalXAML:before{content:""}.ms-Icon--EyeShadow:before{content:""}.ms-Icon--F12DevTools:before{content:""}.ms-Icon--FabricAssetLibrary:before{content:""}.ms-Icon--FabricDataConnectionLibrary:before{content:""}.ms-Icon--FabricDocLibrary:before{content:""}.ms-Icon--FabricFolder:before{content:""}.ms-Icon--FabricFolderConfirm:before{content:""}.ms-Icon--FabricFolderFill:before{content:""}.ms-Icon--FabricFolderSearch:before{content:""}[dir=ltr] .ms-Icon--FabricFormLibrary:before{content:""}[dir=rtl] .ms-Icon--FabricFormLibrary:before{content:""}[dir=ltr] .ms-Icon--FabricFormLibraryMirrored:before{content:""}[dir=rtl] .ms-Icon--FabricFormLibraryMirrored:before{content:""}.ms-Icon--FabricMovetoFolder:before{content:""}.ms-Icon--FabricNetworkFolder:before{content:""}.ms-Icon--FabricNewFolder:before{content:""}.ms-Icon--FabricOpenFolderHorizontal:before{content:""}.ms-Icon--FabricPictureLibrary:before{content:""}.ms-Icon--FabricPublicFolder:before{content:""}[dir=ltr] .ms-Icon--FabricReportLibrary:before{content:""}[dir=rtl] .ms-Icon--FabricReportLibrary:before{content:""}[dir=ltr] .ms-Icon--FabricReportLibraryMirrored:before{content:""}[dir=rtl] .ms-Icon--FabricReportLibraryMirrored:before{content:""}.ms-Icon--FabricSyncFolder:before{content:""}.ms-Icon--FabricTextHighlight:before{content:""}.ms-Icon--FabricTextHighlightComposite:before{content:""}.ms-Icon--FabricUnsyncFolder:before{content:""}.ms-Icon--FabricUserFolder:before{content:""}.ms-Icon--FangBody:before{content:""}.ms-Icon--FastMode:before{content:""}.ms-Icon--Fax:before{content:""}[dir=ltr] .ms-Icon--FeedbackRequestSolid:before{content:""}[dir=rtl] .ms-Icon--FeedbackRequestSolid:before{content:""}[dir=ltr] .ms-Icon--FeedbackRequestMirroredSolid:before{content:""}[dir=rtl] .ms-Icon--FeedbackRequestMirroredSolid:before{content:""}.ms-Icon--FeedbackResponseSolid:before{content:""}.ms-Icon--FieldChanged:before{content:""}.ms-Icon--FieldEmpty:before{content:""}.ms-Icon--FieldFilled:before{content:""}.ms-Icon--FieldNotChanged:before{content:""}.ms-Icon--FieldReadOnly:before{content:""}.ms-Icon--FieldRequired:before{content:""}.ms-Icon--FileASPX:before{content:""}.ms-Icon--FileBug:before{content:""}.ms-Icon--FileCode:before{content:""}.ms-Icon--FileComment:before{content:""}.ms-Icon--FileCSS:before{content:""}.ms-Icon--FileHTML:before{content:""}.ms-Icon--FileImage:before{content:""}.ms-Icon--FileJAVA:before{content:""}.ms-Icon--FileLess:before{content:""}.ms-Icon--FilePDB:before{content:""}.ms-Icon--FileRequest:before{content:""}.ms-Icon--FileSass:before{content:""}.ms-Icon--FileSQL:before{content:""}.ms-Icon--FileSymlink:before{content:""}.ms-Icon--FileTemplate:before{content:""}.ms-Icon--FileTypeSolution:before{content:""}.ms-Icon--FileYML:before{content:""}.ms-Icon--Filters:before{content:""}.ms-Icon--FilterSettings:before{content:""}.ms-Icon--FilterSolid:before{content:""}.ms-Icon--FiltersSolid:before{content:""}.ms-Icon--Financial:before{content:""}[dir=ltr] .ms-Icon--FinancialSolid:before{content:""}[dir=rtl] .ms-Icon--FinancialSolid:before{content:""}[dir=ltr] .ms-Icon--FinancialMirroredSolid:before{content:""}[dir=rtl] .ms-Icon--FinancialMirroredSolid:before{content:""}.ms-Icon--FitWidth:before{content:""}.ms-Icon--FiveTileGrid:before{content:""}.ms-Icon--FlameSolid:before{content:""}.ms-Icon--FlowChart:before{content:""}.ms-Icon--Flower:before{content:""}.ms-Icon--FocalPoint:before{content:""}.ms-Icon--Focus:before{content:""}.ms-Icon--Fog:before{content:""}[dir=ltr] .ms-Icon--FolderList:before{content:""}[dir=rtl] .ms-Icon--FolderList:before{content:""}[dir=ltr] .ms-Icon--FolderListMirrored:before{content:""}[dir=rtl] .ms-Icon--FolderListMirrored:before{content:""}.ms-Icon--FolderQuery:before{content:""}.ms-Icon--FolderSearch:before{content:""}.ms-Icon--FollowUser:before{content:""}.ms-Icon--FontColorA:before{content:""}.ms-Icon--FontColorSwatch:before{content:""}.ms-Icon--Footer:before{content:""}[dir=ltr] .ms-Icon--FormLibrary:before{content:""}[dir=rtl] .ms-Icon--FormLibrary:before{content:""}[dir=ltr] .ms-Icon--FormLibraryMirrored:before{content:""}[dir=rtl] .ms-Icon--FormLibraryMirrored:before{content:""}.ms-Icon--Forum:before{content:""}.ms-Icon--ForwardEvent:before{content:""}.ms-Icon--Freezing:before{content:""}.ms-Icon--FrontCamera:before{content:""}.ms-Icon--FSharp:before{content:""}.ms-Icon--FSharpLanguage:before{content:""}.ms-Icon--FullHistory:before{content:""}.ms-Icon--FullWidth:before{content:""}.ms-Icon--FullWidthEdit:before{content:""}.ms-Icon--FunctionalManagerDashboard:before{content:""}.ms-Icon--FunnelChart:before{content:""}.ms-Icon--GallatinLogo:before{content:""}.ms-Icon--Generate:before{content:""}.ms-Icon--GenericScanFilled:before{content:""}.ms-Icon--Giftbox:before{content:""}.ms-Icon--GiftBoxSolid:before{content:""}.ms-Icon--GiftCard:before{content:""}.ms-Icon--GitGraph:before{content:""}.ms-Icon--Glasses:before{content:""}.ms-Icon--Glimmer:before{content:""}.ms-Icon--GlobalNavButtonActive:before{content:""}.ms-Icon--GlobeFavorite:before{content:""}.ms-Icon--Golf:before{content:""}[dir=ltr] .ms-Icon--Go:before{content:""}[dir=rtl] .ms-Icon--Go:before{content:""}[dir=ltr] .ms-Icon--GoMirrored:before{content:""}[dir=rtl] .ms-Icon--GoMirrored:before{content:""}.ms-Icon--GoToDashboard:before{content:""}.ms-Icon--GreetingCard:before{content:""}.ms-Icon--GridViewLarge:before{content:""}.ms-Icon--GridViewMedium:before{content:""}.ms-Icon--GridViewSmall:before{content:""}.ms-Icon--GripperDotsVertical:before{content:""}.ms-Icon--GroupedAscending:before{content:""}.ms-Icon--GroupedDescending:before{content:""}.ms-Icon--GroupedList:before{content:""}.ms-Icon--GroupObject:before{content:""}.ms-Icon--GUID:before{content:""}.ms-Icon--Guitar:before{content:""}.ms-Icon--HailDay:before{content:""}.ms-Icon--HailNight:before{content:""}.ms-Icon--HalfCircle:before{content:""}.ms-Icon--HandsFree:before{content:""}.ms-Icon--HardDriveGroup:before{content:""}.ms-Icon--HardDriveLock:before{content:""}.ms-Icon--HardDriveUnlock:before{content:""}.ms-Icon--Header:before{content:""}.ms-Icon--Header1:before{content:""}.ms-Icon--Header2:before{content:""}.ms-Icon--Header3:before{content:""}.ms-Icon--Header4:before{content:""}.ms-Icon--HeadsetSolid:before{content:""}.ms-Icon--HealthSolid:before{content:""}[dir=ltr] .ms-Icon--Help:before{content:""}[dir=rtl] .ms-Icon--Help:before{content:""}[dir=ltr] .ms-Icon--HelpMirrored:before{content:""}[dir=rtl] .ms-Icon--HelpMirrored:before{content:""}.ms-Icon--Hexagon:before{content:""}.ms-Icon--Hide2:before{content:""}.ms-Icon--Hide3:before{content:""}.ms-Icon--HighlightMappedShapes:before{content:""}.ms-Icon--HintText:before{content:""}.ms-Icon--HistoricalWeather:before{content:""}.ms-Icon--HomeVerify:before{content:""}.ms-Icon--HorizontalDistributeCenter:before{content:""}.ms-Icon--Hospital:before{content:""}.ms-Icon--Hotel:before{content:""}.ms-Icon--HourGlass:before{content:""}.ms-Icon--IconSetsFlag:before{content:""}.ms-Icon--IgnoreConversation:before{content:""}.ms-Icon--ImageCrosshair:before{content:""}.ms-Icon--ImageDiff:before{content:""}.ms-Icon--ImagePixel:before{content:""}.ms-Icon--ImageSearch:before{content:""}[dir=rtl] .ms-Icon--ImportAll:before{content:""}[dir=ltr] .ms-Icon--ImportAllMirrored:before{content:""}[dir=ltr] .ms-Icon--Import:before{content:""}[dir=rtl] .ms-Icon--Import:before{content:""}[dir=ltr] .ms-Icon--ImportMirrored:before{content:""}[dir=rtl] .ms-Icon--ImportMirrored:before{content:""}.ms-Icon--Inbox:before{content:""}.ms-Icon--InboxCheck:before{content:""}[dir=ltr] .ms-Icon--IncreaseIndentArrow:before{content:""}[dir=rtl] .ms-Icon--IncreaseIndentArrow:before{content:""}[dir=ltr] .ms-Icon--IncreaseIndentArrowMirrored:before{content:""}[dir=rtl] .ms-Icon--IncreaseIndentArrowMirrored:before{content:""}.ms-Icon--IncreaseIndentLegacy:before{content:""}[dir=ltr] .ms-Icon--IncreaseIndentText:before{content:""}[dir=rtl] .ms-Icon--IncreaseIndentText:before{content:""}[dir=ltr] .ms-Icon--IncreaseIndentTextMirrored:before{content:""}[dir=rtl] .ms-Icon--IncreaseIndentTextMirrored:before{content:""}.ms-Icon--InformationBarriers:before{content:""}.ms-Icon--Insert:before{content:""}.ms-Icon--InsertColumnsLeft:before{content:""}.ms-Icon--InsertColumnsRight:before{content:""}.ms-Icon--InsertRowsAbove:before{content:""}.ms-Icon--InsertRowsBelow:before{content:""}.ms-Icon--InsertSignatureLine:before{content:""}.ms-Icon--InsertTextBox:before{content:""}.ms-Icon--Installation:before{content:""}.ms-Icon--InstallToDrive:before{content:""}.ms-Icon--InternalInvestigation:before{content:""}[dir=ltr] .ms-Icon--IRMForward:before{content:""}[dir=rtl] .ms-Icon--IRMForward:before{content:""}[dir=ltr] .ms-Icon--IRMForwardMirrored:before{content:""}[dir=rtl] .ms-Icon--IRMForwardMirrored:before{content:""}[dir=ltr] .ms-Icon--IRMReply:before{content:""}[dir=rtl] .ms-Icon--IRMReply:before{content:""}[dir=ltr] .ms-Icon--IRMReplyMirrored:before{content:""}[dir=rtl] .ms-Icon--IRMReplyMirrored:before{content:""}.ms-Icon--IssueSolid:before{content:""}[dir=ltr] .ms-Icon--IssueTracking:before{content:""}[dir=rtl] .ms-Icon--IssueTracking:before{content:""}[dir=ltr] .ms-Icon--IssueTrackingMirrored:before{content:""}[dir=rtl] .ms-Icon--IssueTrackingMirrored:before{content:""}.ms-Icon--JavaScriptLanguage:before{content:""}.ms-Icon--JoinOnlineMeeting:before{content:""}.ms-Icon--JS:before{content:""}.ms-Icon--KaizalaLogo:before{content:""}.ms-Icon--LadybugSolid:before{content:""}.ms-Icon--Lamp:before{content:""}.ms-Icon--LargeGrid:before{content:""}.ms-Icon--Leave:before{content:""}.ms-Icon--Lifesaver:before{content:""}.ms-Icon--LifesaverLock:before{content:""}.ms-Icon--LightWeight:before{content:""}.ms-Icon--LikeSolid:before{content:""}.ms-Icon--Line:before{content:""}.ms-Icon--LineChart:before{content:""}.ms-Icon--LineSpacing:before{content:""}.ms-Icon--LineStyle:before{content:""}.ms-Icon--LineThickness:before{content:""}.ms-Icon--Link12:before{content:""}.ms-Icon--LinkedDatabase:before{content:""}.ms-Icon--LinkedInLogo:before{content:""}[dir=ltr] .ms-Icon--List:before{content:""}[dir=rtl] .ms-Icon--List:before{content:""}[dir=ltr] .ms-Icon--ListMirrored:before{content:""}[dir=rtl] .ms-Icon--ListMirrored:before{content:""}.ms-Icon--LocationCircle:before{content:""}.ms-Icon--LocationDot:before{content:""}.ms-Icon--LocationFill:before{content:""}.ms-Icon--LocationOutline:before{content:""}.ms-Icon--Lock12:before{content:""}.ms-Icon--LockSolid:before{content:""}.ms-Icon--LogRemove:before{content:""}.ms-Icon--LookupEntities:before{content:""}.ms-Icon--LyncLogo:before{content:""}.ms-Icon--M365InvoicingLogo:before{content:""}.ms-Icon--MailAlert:before{content:""}.ms-Icon--MailAttached:before{content:""}.ms-Icon--MailCheck:before{content:""}[dir=ltr] .ms-Icon--MailForward:before{content:""}[dir=rtl] .ms-Icon--MailForward:before{content:""}[dir=ltr] .ms-Icon--MailForwardMirrored:before{content:""}[dir=rtl] .ms-Icon--MailForwardMirrored:before{content:""}.ms-Icon--MailLowImportance:before{content:""}.ms-Icon--MailOptions:before{content:""}.ms-Icon--MailPause:before{content:""}.ms-Icon--MailReminder:before{content:""}.ms-Icon--MailRepeat:before{content:""}[dir=ltr] .ms-Icon--MailReplyAll:before{content:""}[dir=rtl] .ms-Icon--MailReplyAll:before{content:""}[dir=ltr] .ms-Icon--MailReplyAllMirrored:before{content:""}[dir=rtl] .ms-Icon--MailReplyAllMirrored:before{content:""}[dir=ltr] .ms-Icon--MailReply:before{content:""}[dir=rtl] .ms-Icon--MailReply:before{content:""}[dir=ltr] .ms-Icon--MailReplyMirrored:before{content:""}[dir=rtl] .ms-Icon--MailReplyMirrored:before{content:""}.ms-Icon--MailSchedule:before{content:""}.ms-Icon--MailSolid:before{content:""}[dir=ltr] .ms-Icon--MailTentative:before{content:""}[dir=rtl] .ms-Icon--MailTentative:before{content:""}[dir=ltr] .ms-Icon--MailTentativeMirrored:before{content:""}[dir=rtl] .ms-Icon--MailTentativeMirrored:before{content:""}.ms-Icon--MailUndelivered:before{content:""}.ms-Icon--ManagerSelfService:before{content:""}.ms-Icon--Manufacturing:before{content:""}.ms-Icon--MapPinSolid:before{content:""}.ms-Icon--MarkAsProtected:before{content:""}.ms-Icon--MarkDownLanguage:before{content:""}.ms-Icon--MasterDatabase:before{content:""}.ms-Icon--MaximumValue:before{content:""}.ms-Icon--Medal:before{content:""}.ms-Icon--MedalSolid:before{content:""}.ms-Icon--MediaAdd:before{content:""}.ms-Icon--Medical:before{content:""}.ms-Icon--MegaphoneSolid:before{content:""}.ms-Icon--Merge:before{content:""}.ms-Icon--MergeDuplicate:before{content:""}.ms-Icon--MessageFill:before{content:""}.ms-Icon--MicrosoftFlowLogo:before{content:""}.ms-Icon--MicrosoftStaffhubLogo:before{content:""}.ms-Icon--MicrosoftTranslatorLogo:before{content:""}.ms-Icon--MicrosoftTranslatorLogoBlue:before{content:""}.ms-Icon--MicrosoftTranslatorLogoGreen:before{content:""}[dir=ltr] .ms-Icon--MiniContract:before{content:""}[dir=rtl] .ms-Icon--MiniContract:before{content:""}[dir=ltr] .ms-Icon--MiniContractMirrored:before{content:""}[dir=rtl] .ms-Icon--MiniContractMirrored:before{content:""}[dir=ltr] .ms-Icon--MiniExpand:before{content:""}[dir=rtl] .ms-Icon--MiniExpand:before{content:""}[dir=ltr] .ms-Icon--MiniExpandMirrored:before{content:""}[dir=rtl] .ms-Icon--MiniExpandMirrored:before{content:""}.ms-Icon--MiniLink:before{content:""}.ms-Icon--MinimumValue:before{content:""}.ms-Icon--MobileReport:before{content:""}.ms-Icon--ModelingView:before{content:""}.ms-Icon--Money:before{content:""}.ms-Icon--MoreSports:before{content:""}.ms-Icon--MoreVertical:before{content:""}.ms-Icon--MountainClimbing:before{content:""}.ms-Icon--Movers:before{content:""}.ms-Icon--MSNLogo:before{content:""}.ms-Icon--MSNVideos:before{content:""}.ms-Icon--MSNVideosSolid:before{content:""}[dir=ltr] .ms-Icon--MultiSelect:before{content:""}[dir=rtl] .ms-Icon--MultiSelect:before{content:""}[dir=ltr] .ms-Icon--MultiSelectMirrored:before{content:""}[dir=rtl] .ms-Icon--MultiSelectMirrored:before{content:""}.ms-Icon--MusicInCollection:before{content:""}.ms-Icon--MusicInCollectionFill:before{content:""}.ms-Icon--MuteChat:before{content:""}.ms-Icon--MyMoviesTV:before{content:""}.ms-Icon--Nav2DMapView:before{content:""}[dir=ltr] .ms-Icon--NavigateBack:before{content:""}[dir=rtl] .ms-Icon--NavigateBack:before{content:""}[dir=ltr] .ms-Icon--NavigateBackMirrored:before{content:""}[dir=rtl] .ms-Icon--NavigateBackMirrored:before{content:""}.ms-Icon--NavigateExternalInline:before{content:""}[dir=ltr] .ms-Icon--NavigateForward:before{content:""}[dir=rtl] .ms-Icon--NavigateForward:before{content:""}[dir=ltr] .ms-Icon--NavigateForwardMirrored:before{content:""}[dir=rtl] .ms-Icon--NavigateForwardMirrored:before{content:""}.ms-Icon--NavigationFlipper:before{content:""}.ms-Icon--NewAnalyticsQuery:before{content:""}.ms-Icon--NewMail:before{content:""}.ms-Icon--News:before{content:""}.ms-Icon--NewsSearch:before{content:""}.ms-Icon--NewTeamProject:before{content:""}.ms-Icon--NormalWeight:before{content:""}.ms-Icon--NoteForward:before{content:""}.ms-Icon--NotePinned:before{content:""}.ms-Icon--NoteReply:before{content:""}.ms-Icon--NotExecuted:before{content:""}.ms-Icon--NotImpactedSolid:before{content:""}.ms-Icon--NugetLogo:before{content:""}.ms-Icon--NumberedList:before{content:""}[dir=ltr] .ms-Icon--NumberedListNumber:before{content:""}[dir=rtl] .ms-Icon--NumberedListNumber:before{content:""}[dir=ltr] .ms-Icon--NumberedListNumberMirrored:before{content:""}[dir=rtl] .ms-Icon--NumberedListNumberMirrored:before{content:""}[dir=ltr] .ms-Icon--NumberedListText:before{content:""}[dir=rtl] .ms-Icon--NumberedListText:before{content:""}[dir=ltr] .ms-Icon--NumberedListTextMirrored:before{content:""}[dir=rtl] .ms-Icon--NumberedListTextMirrored:before{content:""}.ms-Icon--NumberField:before{content:""}.ms-Icon--NumberSequence:before{content:""}.ms-Icon--NumberSymbol:before{content:""}.ms-Icon--Octagon:before{content:""}.ms-Icon--OfficeAddinsLogo:before{content:""}.ms-Icon--OfficeAssistantLogo:before{content:""}.ms-Icon--OfficeChat:before{content:""}.ms-Icon--OfficeChatSolid:before{content:""}.ms-Icon--OfficeFormsLogo:before{content:""}.ms-Icon--OfficeFormsLogo16:before{content:""}.ms-Icon--OfficeFormsLogo24:before{content:""}.ms-Icon--OfficeFormsLogoFill:before{content:""}.ms-Icon--OfficeFormsLogoFill16:before{content:""}.ms-Icon--OfficeFormsLogoFill24:before{content:""}.ms-Icon--OfficeFormsLogoInverse:before{content:""}.ms-Icon--OfficeFormsLogoInverse16:before{content:""}.ms-Icon--OfficeFormsLogoInverse24:before{content:""}.ms-Icon--OfficeLogo:before{content:""}.ms-Icon--OfficeStoreLogo:before{content:""}.ms-Icon--OfficeVideoLogo:before{content:""}.ms-Icon--OfficeVideoLogoFill:before{content:""}.ms-Icon--OfficeVideoLogoInverse:before{content:""}.ms-Icon--OfflineOneDriveParachute:before{content:""}.ms-Icon--OfflineOneDriveParachuteDisabled:before{content:""}.ms-Icon--OfflineStorage:before{content:""}.ms-Icon--OfflineStorageSolid:before{content:""}.ms-Icon--Onboarding:before{content:""}.ms-Icon--OneDriveAdd:before{content:""}.ms-Icon--OneDriveFolder16:before{content:""}.ms-Icon--OneDriveLogo:before{content:""}.ms-Icon--OneNoteEduLogoInverse:before{content:""}.ms-Icon--OneNoteLogo:before{content:""}.ms-Icon--OneNoteLogo16:before{content:""}.ms-Icon--OneNoteLogoFill:before{content:""}.ms-Icon--OneNoteLogoFill16:before{content:""}.ms-Icon--OneNoteLogoInverse:before{content:""}.ms-Icon--OneNoteLogoInverse16:before{content:""}.ms-Icon--OpenEnrollment:before{content:""}.ms-Icon--OpenInNewTab:before{content:""}[dir=ltr] .ms-Icon--OpenPane:before{content:""}[dir=rtl] .ms-Icon--OpenPane:before{content:""}[dir=ltr] .ms-Icon--OpenPaneMirrored:before{content:""}[dir=rtl] .ms-Icon--OpenPaneMirrored:before{content:""}.ms-Icon--OpenSource:before{content:""}[dir=ltr] .ms-Icon--OpenWith:before{content:""}[dir=rtl] .ms-Icon--OpenWith:before{content:""}[dir=ltr] .ms-Icon--OpenWithMirrored:before{content:""}[dir=rtl] .ms-Icon--OpenWithMirrored:before{content:""}.ms-Icon--Org:before{content:""}.ms-Icon--Orientation2:before{content:""}.ms-Icon--OutlookLogo:before{content:""}.ms-Icon--OutlookLogo16:before{content:""}.ms-Icon--OutlookLogoFill:before{content:""}.ms-Icon--OutlookLogoFill16:before{content:""}.ms-Icon--OutlookLogoInverse:before{content:""}.ms-Icon--OutlookLogoInverse16:before{content:""}.ms-Icon--OutOfOffice:before{content:""}.ms-Icon--Packages:before{content:""}.ms-Icon--Padding:before{content:""}.ms-Icon--PaddingBottom:before{content:""}.ms-Icon--PaddingLeft:before{content:""}.ms-Icon--PaddingRight:before{content:""}.ms-Icon--PaddingTop:before{content:""}.ms-Icon--PageAdd:before{content:""}.ms-Icon--PageArrowRight:before{content:""}.ms-Icon--PageCheckedin:before{content:""}.ms-Icon--PageCheckedOut:before{content:""}.ms-Icon--PageData:before{content:""}.ms-Icon--PageEdit:before{content:""}.ms-Icon--PageHeader:before{content:""}.ms-Icon--PageHeaderEdit:before{content:""}.ms-Icon--PageLink:before{content:""}.ms-Icon--PageList:before{content:""}.ms-Icon--PageListFilter:before{content:""}[dir=ltr] .ms-Icon--PageListSolid:before{content:""}[dir=rtl] .ms-Icon--PageListSolid:before{content:""}[dir=ltr] .ms-Icon--PageListMirroredSolid:before{content:""}[dir=rtl] .ms-Icon--PageListMirroredSolid:before{content:""}.ms-Icon--PageLock:before{content:""}.ms-Icon--PageRemove:before{content:""}.ms-Icon--PageShared:before{content:""}.ms-Icon--PanoIndicator:before{content:""}.ms-Icon--Parachute:before{content:""}.ms-Icon--ParachuteSolid:before{content:""}.ms-Icon--Parameter:before{content:""}[dir=ltr] .ms-Icon--ParkingLocation:before{content:""}[dir=rtl] .ms-Icon--ParkingLocation:before{content:""}[dir=ltr] .ms-Icon--ParkingLocationMirrored:before{content:""}[dir=rtl] .ms-Icon--ParkingLocationMirrored:before{content:""}[dir=ltr] .ms-Icon--ParkingSolid:before{content:""}[dir=rtl] .ms-Icon--ParkingSolid:before{content:""}[dir=ltr] .ms-Icon--ParkingMirroredSolid:before{content:""}[dir=rtl] .ms-Icon--ParkingMirroredSolid:before{content:""}.ms-Icon--PartlyCloudyDay:before{content:""}.ms-Icon--PartlyCloudyNight:before{content:""}.ms-Icon--PasswordField:before{content:""}.ms-Icon--PasteAsCode:before{content:""}.ms-Icon--PasteAsText:before{content:""}.ms-Icon--PencilReply:before{content:""}.ms-Icon--Pentagon:before{content:""}.ms-Icon--PeopleAdd:before{content:""}.ms-Icon--PeopleAlert:before{content:""}.ms-Icon--PeopleBlock:before{content:""}.ms-Icon--PeoplePause:before{content:""}.ms-Icon--PeopleRepeat:before{content:""}.ms-Icon--PermissionsSolid:before{content:""}.ms-Icon--Phishing:before{content:""}.ms-Icon--Photo2Add:before{content:""}.ms-Icon--Photo2Fill:before{content:""}.ms-Icon--Photo2Remove:before{content:""}.ms-Icon--PhotoCollection:before{content:""}.ms-Icon--PhotoVideoMedia:before{content:""}.ms-Icon--PictureCenter:before{content:""}.ms-Icon--PictureFill:before{content:""}.ms-Icon--PictureLibrary:before{content:""}.ms-Icon--PicturePosition:before{content:""}.ms-Icon--PictureStretch:before{content:""}.ms-Icon--PictureTile:before{content:""}.ms-Icon--PieDouble:before{content:""}.ms-Icon--PieSingleSolid:before{content:""}.ms-Icon--Pill:before{content:""}.ms-Icon--PinnedSolid:before{content:""}.ms-Icon--PinSolid12:before{content:""}.ms-Icon--PinSolidOff12:before{content:""}.ms-Icon--PivotChart:before{content:""}.ms-Icon--PlainText:before{content:""}.ms-Icon--PlannerLogo:before{content:""}.ms-Icon--PlanView:before{content:""}.ms-Icon--PlayResume:before{content:""}.ms-Icon--PlayReverse:before{content:""}.ms-Icon--PlayReverseResume:before{content:""}.ms-Icon--Plug:before{content:""}.ms-Icon--PlugConnected:before{content:""}.ms-Icon--PlugDisconnected:before{content:""}.ms-Icon--PlugSolid:before{content:""}.ms-Icon--POISolid:before{content:""}.ms-Icon--PollResults:before{content:""}.ms-Icon--PowerApps:before{content:""}.ms-Icon--PowerApps2Logo:before{content:""}.ms-Icon--PowerAppsCDS:before{content:""}.ms-Icon--PowerAppsLogo:before{content:""}.ms-Icon--PowerBILogo:before{content:""}.ms-Icon--PowerBILogo16:before{content:""}.ms-Icon--PowerBILogoBackplate16:before{content:""}.ms-Icon--PowerPointDocument:before{content:""}.ms-Icon--PowerPointLogo:before{content:""}.ms-Icon--PowerPointLogo16:before{content:""}.ms-Icon--PowerPointLogoFill:before{content:""}.ms-Icon--PowerPointLogoFill16:before{content:""}.ms-Icon--PowerPointLogoInverse:before{content:""}.ms-Icon--PowerPointLogoInverse16:before{content:""}.ms-Icon--PowerShell:before{content:""}.ms-Icon--PowerShell2:before{content:""}.ms-Icon--Precipitation:before{content:""}.ms-Icon--Presentation:before{content:""}.ms-Icon--Presentation12:before{content:""}.ms-Icon--PrimaryCalendar:before{content:""}.ms-Icon--ProcessMetaTask:before{content:""}.ms-Icon--Product:before{content:""}.ms-Icon--ProductCatalog:before{content:""}.ms-Icon--ProductionFloorManagement:before{content:""}.ms-Icon--ProductList:before{content:""}.ms-Icon--ProductRelease:before{content:""}.ms-Icon--ProductVariant:before{content:""}.ms-Icon--ProfileSearch:before{content:""}.ms-Icon--ProFootball:before{content:""}.ms-Icon--ProgressLoopInner:before{content:""}.ms-Icon--ProgressLoopOuter:before{content:""}.ms-Icon--ProHockey:before{content:""}.ms-Icon--ProjectCollection:before{content:""}.ms-Icon--ProjectDocument:before{content:""}.ms-Icon--ProjectLogo16:before{content:""}.ms-Icon--ProjectLogo32:before{content:""}.ms-Icon--ProjectLogoFill16:before{content:""}.ms-Icon--ProjectLogoFill32:before{content:""}.ms-Icon--ProjectLogoInverse:before{content:""}.ms-Icon--PromotedDatabase:before{content:""}.ms-Icon--ProtectionCenterLogo32:before{content:""}.ms-Icon--ProtectRestrict:before{content:""}.ms-Icon--PublicCalendar:before{content:""}[dir=ltr] .ms-Icon--PublicContactCard:before{content:""}[dir=rtl] .ms-Icon--PublicContactCard:before{content:""}[dir=ltr] .ms-Icon--PublicContactCardMirrored:before{content:""}[dir=rtl] .ms-Icon--PublicContactCardMirrored:before{content:""}.ms-Icon--PublicEmail:before{content:""}.ms-Icon--PublicFolder:before{content:""}.ms-Icon--PublishContent:before{content:""}.ms-Icon--PublishCourse:before{content:""}.ms-Icon--PublisherLogo:before{content:""}.ms-Icon--PublisherLogo16:before{content:""}.ms-Icon--PublisherLogoFill:before{content:""}.ms-Icon--PublisherLogoFill16:before{content:""}.ms-Icon--PublisherLogoInverse16:before{content:""}.ms-Icon--PY:before{content:""}.ms-Icon--PythonLanguage:before{content:""}.ms-Icon--QandA:before{content:""}.ms-Icon--QandAMirror:before{content:""}.ms-Icon--QuadColumn:before{content:""}.ms-Icon--Quantity:before{content:""}.ms-Icon--QuarterCircle:before{content:""}.ms-Icon--QueryList:before{content:""}[dir=ltr] .ms-Icon--Questionnaire:before{content:""}[dir=rtl] .ms-Icon--Questionnaire:before{content:""}[dir=ltr] .ms-Icon--QuestionnaireMirrored:before{content:""}[dir=rtl] .ms-Icon--QuestionnaireMirrored:before{content:""}.ms-Icon--QuickNoteSolid:before{content:""}.ms-Icon--R:before{content:""}.ms-Icon--Rain:before{content:""}.ms-Icon--RainShowersDay:before{content:""}.ms-Icon--RainShowersNight:before{content:""}.ms-Icon--RainSnow:before{content:""}.ms-Icon--RawSource:before{content:""}.ms-Icon--ReadingModeSolid:before{content:""}.ms-Icon--ReadOutLoud:before{content:""}.ms-Icon--RealEstate:before{content:""}.ms-Icon--ReceiptCheck:before{content:""}.ms-Icon--ReceiptForward:before{content:""}.ms-Icon--ReceiptReply:before{content:""}[dir=ltr] .ms-Icon--ReceiptTentative:before{content:""}[dir=rtl] .ms-Icon--ReceiptTentative:before{content:""}[dir=ltr] .ms-Icon--ReceiptTentativeMirrored:before{content:""}[dir=rtl] .ms-Icon--ReceiptTentativeMirrored:before{content:""}.ms-Icon--ReceiptUndelivered:before{content:""}.ms-Icon--RecruitmentManagement:before{content:""}.ms-Icon--RectangleShape:before{content:""}.ms-Icon--RectangleShapeSolid:before{content:""}.ms-Icon--RecurringEvent:before{content:""}.ms-Icon--RecurringTask:before{content:""}.ms-Icon--RecycleBin:before{content:""}.ms-Icon--Redeploy:before{content:""}.ms-Icon--ReleaseDefinition:before{content:""}.ms-Icon--ReleaseGate:before{content:""}.ms-Icon--ReleaseGateCheck:before{content:""}.ms-Icon--ReleaseGateError:before{content:""}.ms-Icon--ReminderGroup:before{content:""}.ms-Icon--ReminderPerson:before{content:""}.ms-Icon--ReminderTime:before{content:""}.ms-Icon--RemoveEvent:before{content:""}.ms-Icon--RemoveFilter:before{content:""}.ms-Icon--RemoveFromShoppingList:before{content:""}.ms-Icon--RemoveFromTrash:before{content:""}.ms-Icon--RemoveLink:before{content:""}.ms-Icon--RemoveLinkChain:before{content:""}.ms-Icon--RemoveLinkX:before{content:""}.ms-Icon--RemoveOccurrence:before{content:""}.ms-Icon--RenewalCurrent:before{content:""}.ms-Icon--RenewalFuture:before{content:""}.ms-Icon--ReopenPages:before{content:""}.ms-Icon--ReplyAllAlt:before{content:""}[dir=ltr] .ms-Icon--ReplyAll:before{content:""}[dir=rtl] .ms-Icon--ReplyAll:before{content:""}[dir=ltr] .ms-Icon--ReplyAllMirrored:before{content:""}[dir=rtl] .ms-Icon--ReplyAllMirrored:before{content:""}.ms-Icon--ReplyAlt:before{content:""}[dir=ltr] .ms-Icon--Reply:before{content:""}[dir=rtl] .ms-Icon--Reply:before{content:""}[dir=ltr] .ms-Icon--ReplyMirrored:before{content:""}[dir=rtl] .ms-Icon--ReplyMirrored:before{content:""}.ms-Icon--Repo:before{content:""}.ms-Icon--ReportAdd:before{content:""}[dir=ltr] .ms-Icon--ReportLibrary:before{content:""}[dir=rtl] .ms-Icon--ReportLibrary:before{content:""}[dir=ltr] .ms-Icon--ReportLibraryMirrored:before{content:""}[dir=rtl] .ms-Icon--ReportLibraryMirrored:before{content:""}.ms-Icon--ReportLock:before{content:""}.ms-Icon--ReportWarning:before{content:""}.ms-Icon--RepoSolid:before{content:""}.ms-Icon--Rerun:before{content:""}.ms-Icon--ReservationOrders:before{content:""}.ms-Icon--ResponsesMenu:before{content:""}.ms-Icon--ReturnToSession:before{content:""}[dir=ltr] .ms-Icon--ReviewRequestSolid:before{content:""}[dir=rtl] .ms-Icon--ReviewRequestSolid:before{content:""}[dir=ltr] .ms-Icon--ReviewRequestMirroredSolid:before{content:""}[dir=rtl] .ms-Icon--ReviewRequestMirroredSolid:before{content:""}.ms-Icon--ReviewResponseSolid:before{content:""}.ms-Icon--ReviewSolid:before{content:""}.ms-Icon--Ribbon:before{content:""}.ms-Icon--RibbonSolid:before{content:""}.ms-Icon--RightTriangle:before{content:""}.ms-Icon--RingerOff:before{content:""}.ms-Icon--RingerRemove:before{content:""}.ms-Icon--RingerSolid:before{content:""}.ms-Icon--Rocket:before{content:""}.ms-Icon--Room:before{content:""}.ms-Icon--Rotate90Clockwise:before{content:""}.ms-Icon--Rotate90CounterClockwise:before{content:""}.ms-Icon--RowsChild:before{content:""}.ms-Icon--RowsGroup:before{content:""}.ms-Icon--Rugby:before{content:""}.ms-Icon--Running:before{content:""}.ms-Icon--Sad:before{content:""}.ms-Icon--SadSolid:before{content:""}.ms-Icon--SaveAll:before{content:""}.ms-Icon--SaveAndClose:before{content:""}.ms-Icon--SaveTemplate:before{content:""}.ms-Icon--SaveToMobile:before{content:""}.ms-Icon--Savings:before{content:""}.ms-Icon--ScaleUp:before{content:""}.ms-Icon--ScaleVolume:before{content:""}.ms-Icon--ScatterChart:before{content:""}.ms-Icon--ScheduleEventAction:before{content:""}.ms-Icon--SchoolDataSyncLogo:before{content:""}.ms-Icon--ScopeTemplate:before{content:""}.ms-Icon--ScreenCast:before{content:""}.ms-Icon--Script:before{content:""}.ms-Icon--SearchBookmark:before{content:""}.ms-Icon--SearchCalendar:before{content:""}.ms-Icon--SearchData:before{content:""}[dir=ltr] .ms-Icon--SearchIssue:before{content:""}[dir=rtl] .ms-Icon--SearchIssue:before{content:""}[dir=ltr] .ms-Icon--SearchIssueMirrored:before{content:""}[dir=rtl] .ms-Icon--SearchIssueMirrored:before{content:""}.ms-Icon--SearchNearby:before{content:""}.ms-Icon--SecondaryNav:before{content:""}.ms-Icon--Section:before{content:""}.ms-Icon--Sections:before{content:""}.ms-Icon--SecurityGroup:before{content:""}.ms-Icon--SeeDo:before{content:""}.ms-Icon--Sell:before{content:""}.ms-Icon--SemiboldWeight:before{content:""}[dir=ltr] .ms-Icon--Send:before{content:""}[dir=rtl] .ms-Icon--Send:before{content:""}[dir=ltr] .ms-Icon--SendMirrored:before{content:""}[dir=rtl] .ms-Icon--SendMirrored:before{content:""}.ms-Icon--Separator:before{content:""}.ms-Icon--Server:before{content:""}.ms-Icon--ServerEnviroment:before{content:""}.ms-Icon--ServerProcesses:before{content:""}.ms-Icon--SetAction:before{content:""}.ms-Icon--ShakeDevice:before{content:""}.ms-Icon--Shapes:before{content:""}.ms-Icon--ShareiOS:before{content:""}.ms-Icon--SharepointAppIcon16:before{content:""}.ms-Icon--SharepointLogo:before{content:""}.ms-Icon--SharepointLogoFill:before{content:""}.ms-Icon--SharepointLogoInverse:before{content:""}.ms-Icon--ShieldAlert:before{content:""}.ms-Icon--ShieldSolid:before{content:""}.ms-Icon--Shirt:before{content:""}.ms-Icon--ShoppingCartSolid:before{content:""}.ms-Icon--ShopServer:before{content:""}.ms-Icon--ShowGrid:before{content:""}[dir=ltr] .ms-Icon--ShowResults:before{content:""}[dir=rtl] .ms-Icon--ShowResults:before{content:""}[dir=ltr] .ms-Icon--ShowResultsMirrored:before{content:""}[dir=rtl] .ms-Icon--ShowResultsMirrored:before{content:""}.ms-Icon--ShowTimeAs:before{content:""}[dir=ltr] .ms-Icon--SidePanel:before{content:""}[dir=rtl] .ms-Icon--SidePanel:before{content:""}[dir=ltr] .ms-Icon--SidePanelMirrored:before{content:""}[dir=rtl] .ms-Icon--SidePanelMirrored:before{content:""}.ms-Icon--Signin:before{content:""}.ms-Icon--SingleBookmark:before{content:""}.ms-Icon--SingleBookmarkSolid:before{content:""}.ms-Icon--SingleColumn:before{content:""}.ms-Icon--SingleColumnEdit:before{content:""}.ms-Icon--SiteScan:before{content:""}.ms-Icon--SizeLegacy:before{content:""}.ms-Icon--SkiResorts:before{content:""}.ms-Icon--SkypeArrow:before{content:""}.ms-Icon--SkypeCheck:before{content:""}.ms-Icon--SkypeCircleArrow:before{content:""}.ms-Icon--SkypeCircleCheck:before{content:""}.ms-Icon--SkypeCircleClock:before{content:""}.ms-Icon--SkypeCircleMinus:before{content:""}.ms-Icon--SkypeCircleSlash:before{content:""}.ms-Icon--SkypeClock:before{content:""}.ms-Icon--SkypeForBusinessLogo:before{content:""}.ms-Icon--SkypeForBusinessLogo16:before{content:""}.ms-Icon--SkypeForBusinessLogoFill:before{content:""}.ms-Icon--SkypeForBusinessLogoFill16:before{content:""}.ms-Icon--SkypeLogo:before{content:""}.ms-Icon--SkypeLogo16:before{content:""}.ms-Icon--SkypeMessage:before{content:""}.ms-Icon--SkypeMinus:before{content:""}.ms-Icon--SkypeSlash:before{content:""}.ms-Icon--Slider:before{content:""}.ms-Icon--SliderHandleSize:before{content:""}.ms-Icon--SmartGlassRemote:before{content:""}.ms-Icon--SnapToGrid:before{content:""}.ms-Icon--Snooze:before{content:""}.ms-Icon--Snow:before{content:""}.ms-Icon--Snowflake:before{content:""}.ms-Icon--SnowShowerDay:before{content:""}.ms-Icon--SnowShowerNight:before{content:""}.ms-Icon--Soccer:before{content:""}.ms-Icon--SocialListeningLogo:before{content:""}.ms-Icon--SortDown:before{content:""}.ms-Icon--SortLines:before{content:""}.ms-Icon--SortUp:before{content:""}.ms-Icon--Source:before{content:""}.ms-Icon--Spacer:before{content:""}.ms-Icon--SpecialEvent:before{content:""}.ms-Icon--Split:before{content:""}.ms-Icon--SplitObject:before{content:""}.ms-Icon--Sprint:before{content:""}.ms-Icon--Squalls:before{content:""}.ms-Icon--SquareShapeSolid:before{content:""}.ms-Icon--Stack:before{content:""}.ms-Icon--StackColumnChart:before{content:""}.ms-Icon--StackedBarChart:before{content:""}.ms-Icon--StackedColumnChart2:before{content:""}.ms-Icon--StackedColumnChart2Fill:before{content:""}.ms-Icon--StackedLineChart:before{content:""}.ms-Icon--StackIndicator:before{content:""}.ms-Icon--StaffNotebookLogo16:before{content:""}.ms-Icon--StaffNotebookLogo32:before{content:""}.ms-Icon--StaffNotebookLogoFill16:before{content:""}.ms-Icon--StaffNotebookLogoFill32:before{content:""}.ms-Icon--StaffNotebookLogoInverted16:before{content:""}.ms-Icon--StaffNotebookLogoInverted32:before{content:""}.ms-Icon--Starburst:before{content:""}.ms-Icon--StarburstSolid:before{content:""}.ms-Icon--Step:before{content:""}.ms-Icon--StepInsert:before{content:""}.ms-Icon--StepShared:before{content:""}.ms-Icon--StepSharedAdd:before{content:""}.ms-Icon--StepSharedInsert:before{content:""}.ms-Icon--StickyNotesOutlineAppIcon:before{content:""}.ms-Icon--StickyNotesSolidAppIcon:before{content:""}.ms-Icon--StopSolid:before{content:""}.ms-Icon--StoreLogo16:before{content:""}.ms-Icon--StoreLogoMed20:before{content:""}.ms-Icon--Storyboard:before{content:""}.ms-Icon--StreamingOff:before{content:""}.ms-Icon--StreamLogo:before{content:""}.ms-Icon--Subscribe:before{content:""}.ms-Icon--Subscript:before{content:""}.ms-Icon--SubstitutionsIn:before{content:""}.ms-Icon--Suitcase:before{content:""}.ms-Icon--SunAdd:before{content:""}.ms-Icon--Sunny:before{content:""}.ms-Icon--SunQuestionMark:before{content:""}.ms-Icon--Superscript:before{content:""}.ms-Icon--SurveyQuestions:before{content:""}.ms-Icon--SwayLogo16:before{content:""}.ms-Icon--SwayLogo32:before{content:""}.ms-Icon--SwayLogoFill16:before{content:""}.ms-Icon--SwayLogoFill32:before{content:""}.ms-Icon--SwayLogoInverse:before{content:""}.ms-Icon--SwitcherStartEnd:before{content:""}.ms-Icon--SyncOccurence:before{content:""}.ms-Icon--SyncStatus:before{content:""}.ms-Icon--SyncStatusSolid:before{content:""}.ms-Icon--SyncToPC:before{content:""}.ms-Icon--Tab:before{content:""}.ms-Icon--TabCenter:before{content:""}.ms-Icon--Table:before{content:""}.ms-Icon--TableComputed:before{content:""}.ms-Icon--TableGroup:before{content:""}.ms-Icon--TableLink:before{content:""}.ms-Icon--TabOneColumn:before{content:""}.ms-Icon--TabThreeColumn:before{content:""}.ms-Icon--TabTwoColumn:before{content:""}.ms-Icon--TagSolid:before{content:""}.ms-Icon--TagUnknown:before{content:""}.ms-Icon--TagUnknown12:before{content:""}.ms-Icon--TagUnknown12Mirror:before{content:""}.ms-Icon--TagUnknownMirror:before{content:""}.ms-Icon--Taskboard:before{content:""}[dir=ltr] .ms-Icon--TaskGroup:before{content:""}[dir=rtl] .ms-Icon--TaskGroup:before{content:""}[dir=ltr] .ms-Icon--TaskGroupMirrored:before{content:""}[dir=rtl] .ms-Icon--TaskGroupMirrored:before{content:""}.ms-Icon--TaskLogo:before{content:""}[dir=ltr] .ms-Icon--TaskManager:before{content:""}[dir=rtl] .ms-Icon--TaskManager:before{content:""}[dir=ltr] .ms-Icon--TaskManagerMirrored:before{content:""}[dir=rtl] .ms-Icon--TaskManagerMirrored:before{content:""}.ms-Icon--TaskSolid:before{content:""}.ms-Icon--Taxi:before{content:""}.ms-Icon--TeamFavorite:before{content:""}.ms-Icon--TeamsLogo:before{content:""}.ms-Icon--TeamsLogo16:before{content:""}.ms-Icon--TeamsLogoFill:before{content:""}.ms-Icon--TeamsLogoFill16:before{content:""}.ms-Icon--TeamsLogoInverse:before{content:""}.ms-Icon--Teamwork:before{content:""}.ms-Icon--Teeth:before{content:""}.ms-Icon--Telemarketer:before{content:""}.ms-Icon--TemporaryUser:before{content:""}.ms-Icon--Tennis:before{content:""}.ms-Icon--TestAutoSolid:before{content:""}.ms-Icon--TestBeaker:before{content:""}.ms-Icon--TestBeakerSolid:before{content:""}.ms-Icon--TestCase:before{content:""}.ms-Icon--TestExploreSolid:before{content:""}.ms-Icon--TestImpactSolid:before{content:""}.ms-Icon--TestParameter:before{content:""}.ms-Icon--TestPlan:before{content:""}.ms-Icon--TestStep:before{content:""}.ms-Icon--TestSuite:before{content:""}.ms-Icon--TestUserSolid:before{content:""}.ms-Icon--TextBox:before{content:""}.ms-Icon--TextCallout:before{content:""}.ms-Icon--TextDocument:before{content:""}.ms-Icon--TextDocumentShared:before{content:""}.ms-Icon--TextField:before{content:""}.ms-Icon--TextOverflow:before{content:""}.ms-Icon--TFVCLogo:before{content:""}.ms-Icon--ThreeQuarterCircle:before{content:""}[dir=ltr] .ms-Icon--ThumbnailView:before{content:""}[dir=rtl] .ms-Icon--ThumbnailView:before{content:""}[dir=ltr] .ms-Icon--ThumbnailViewMirrored:before{content:""}[dir=rtl] .ms-Icon--ThumbnailViewMirrored:before{content:""}.ms-Icon--Thunderstorms:before{content:""}.ms-Icon--Ticket:before{content:""}.ms-Icon--Tiles2:before{content:""}.ms-Icon--TimeEntry:before{content:""}.ms-Icon--Timeline:before{content:""}.ms-Icon--TimelineDelivery:before{content:""}.ms-Icon--TimelineMatrixView:before{content:""}.ms-Icon--TimelineProgress:before{content:""}.ms-Icon--TimePicker:before{content:""}.ms-Icon--Timer:before{content:""}.ms-Icon--TimeSheet:before{content:""}.ms-Icon--ToDoLogoBottom:before{content:""}.ms-Icon--ToDoLogoInverse:before{content:""}.ms-Icon--ToDoLogoOutline:before{content:""}.ms-Icon--ToDoLogoTop:before{content:""}.ms-Icon--Toll:before{content:""}.ms-Icon--Toolbox:before{content:""}[dir=ltr] .ms-Icon--Trackers:before{content:""}[dir=rtl] .ms-Icon--Trackers:before{content:""}[dir=ltr] .ms-Icon--TrackersMirrored:before{content:""}[dir=rtl] .ms-Icon--TrackersMirrored:before{content:""}.ms-Icon--TransferCall:before{content:""}.ms-Icon--Transition:before{content:""}.ms-Icon--TransitionEffect:before{content:""}.ms-Icon--TransitionPop:before{content:""}.ms-Icon--TransitionPush:before{content:""}.ms-Icon--Translate:before{content:""}.ms-Icon--Trending12:before{content:""}.ms-Icon--TriangleDown12:before{content:""}.ms-Icon--TriangleLeft12:before{content:""}.ms-Icon--TriangleRight12:before{content:""}.ms-Icon--TriangleShape:before{content:""}.ms-Icon--TriangleShapeSolid:before{content:""}.ms-Icon--TriangleSolid:before{content:""}.ms-Icon--TriangleSolidDown12:before{content:""}.ms-Icon--TriangleSolidLeft12:before{content:""}.ms-Icon--TriangleSolidRight12:before{content:""}.ms-Icon--TriangleSolidUp12:before{content:""}.ms-Icon--TriangleUp12:before{content:""}.ms-Icon--TriggerApproval:before{content:""}.ms-Icon--TriggerAuto:before{content:""}.ms-Icon--TriggerUser:before{content:""}.ms-Icon--TrimEnd:before{content:""}.ms-Icon--TrimStart:before{content:""}.ms-Icon--TripleColumn:before{content:""}.ms-Icon--TripleColumnEdit:before{content:""}.ms-Icon--TripleColumnWide:before{content:""}.ms-Icon--Trophy:before{content:""}.ms-Icon--Trophy2:before{content:""}.ms-Icon--Trophy2Solid:before{content:""}.ms-Icon--TurnRight:before{content:""}.ms-Icon--TypeScriptLanguage:before{content:""}.ms-Icon--Umbrella:before{content:""}[dir=ltr] .ms-Icon--Uneditable2:before{content:""}[dir=rtl] .ms-Icon--Uneditable2:before{content:""}[dir=ltr] .ms-Icon--Uneditable2Mirrored:before{content:""}[dir=rtl] .ms-Icon--Uneditable2Mirrored:before{content:""}[dir=ltr] .ms-Icon--Uneditable:before{content:""}[dir=rtl] .ms-Icon--Uneditable:before{content:""}[dir=ltr] .ms-Icon--UneditableMirrored:before{content:""}[dir=rtl] .ms-Icon--UneditableMirrored:before{content:""}[dir=ltr] .ms-Icon--UneditableSolid12:before{content:""}[dir=rtl] .ms-Icon--UneditableSolid12:before{content:""}[dir=ltr] .ms-Icon--UneditableSolidMirrored12:before{content:""}[dir=rtl] .ms-Icon--UneditableSolidMirrored12:before{content:""}.ms-Icon--UngroupObject:before{content:""}.ms-Icon--UnknownCall:before{content:""}[dir=ltr] .ms-Icon--Unknown:before{content:""}[dir=rtl] .ms-Icon--Unknown:before{content:""}[dir=ltr] .ms-Icon--UnknownMirrored:before{content:""}[dir=rtl] .ms-Icon--UnknownMirrored:before{content:""}[dir=ltr] .ms-Icon--UnknownSolid:before{content:""}[dir=rtl] .ms-Icon--UnknownSolid:before{content:""}[dir=ltr] .ms-Icon--UnknownMirroredSolid:before{content:""}[dir=rtl] .ms-Icon--UnknownMirroredSolid:before{content:""}.ms-Icon--UnlockSolid:before{content:""}.ms-Icon--UnpublishContent:before{content:""}.ms-Icon--UnSetColor:before{content:""}.ms-Icon--UnstackSelected:before{content:""}.ms-Icon--Unsubscribe:before{content:""}.ms-Icon--UnsyncOccurence:before{content:""}.ms-Icon--Untag:before{content:""}.ms-Icon--UpgradeAnalysis:before{content:""}.ms-Icon--UserEvent:before{content:""}.ms-Icon--UserFollowed:before{content:""}.ms-Icon--UserGauge:before{content:""}.ms-Icon--UserOptional:before{content:""}.ms-Icon--UserPause:before{content:""}.ms-Icon--UserRemove:before{content:""}.ms-Icon--UserSync:before{content:""}.ms-Icon--UserWarning:before{content:""}.ms-Icon--Vacation:before{content:""}.ms-Icon--Variable:before{content:""}.ms-Icon--Variable2:before{content:""}.ms-Icon--VariableGroup:before{content:""}.ms-Icon--VB:before{content:""}.ms-Icon--VennDiagram:before{content:""}.ms-Icon--VerifiedBrand:before{content:""}.ms-Icon--VerifiedBrandSolid:before{content:""}.ms-Icon--VersionControlPush:before{content:""}.ms-Icon--VerticalDistributeCenter:before{content:""}.ms-Icon--Video360Generic:before{content:""}.ms-Icon--VideoLightOff:before{content:""}.ms-Icon--VideoOff:before{content:""}.ms-Icon--VideoSearch:before{content:""}.ms-Icon--ViewAll2:before{content:""}.ms-Icon--ViewList:before{content:""}.ms-Icon--ViewListGroup:before{content:""}.ms-Icon--ViewListTree:before{content:""}.ms-Icon--ViewOriginal:before{content:""}.ms-Icon--VisioDiagram:before{content:""}.ms-Icon--VisioDiagramSync:before{content:""}.ms-Icon--VisioDocument:before{content:""}.ms-Icon--VisioLogo:before{content:""}.ms-Icon--VisioLogo16:before{content:""}.ms-Icon--VisioLogoFill:before{content:""}.ms-Icon--VisioLogoFill16:before{content:""}.ms-Icon--VisioLogoInverse:before{content:""}.ms-Icon--VisioLogoInverse16:before{content:""}.ms-Icon--VisualBasicLanguage:before{content:""}.ms-Icon--VisuallyImpaired:before{content:""}.ms-Icon--VisualsFolder:before{content:""}.ms-Icon--VisualsStore:before{content:""}.ms-Icon--VisualStudioIDELogo32:before{content:""}.ms-Icon--VisualStudioLogo:before{content:""}.ms-Icon--VoicemailForward:before{content:""}.ms-Icon--VoicemailIRM:before{content:""}.ms-Icon--VoicemailReply:before{content:""}.ms-Icon--VolumeDisabled:before{content:""}.ms-Icon--VSTSAltLogo1:before{content:""}.ms-Icon--VSTSAltLogo2:before{content:""}.ms-Icon--VSTSLogo:before{content:""}.ms-Icon--Waffle:before{content:""}.ms-Icon--WaffleOffice365:before{content:""}[dir=ltr] .ms-Icon--WaitlistConfirm:before{content:""}[dir=rtl] .ms-Icon--WaitlistConfirm:before{content:""}[dir=ltr] .ms-Icon--WaitlistConfirmMirrored:before{content:""}[dir=rtl] .ms-Icon--WaitlistConfirmMirrored:before{content:""}.ms-Icon--Warning12:before{content:""}.ms-Icon--WarningSolid:before{content:""}.ms-Icon--WavingHand:before{content:""}.ms-Icon--WebAppBuilderFragment:before{content:""}.ms-Icon--WebAppBuilderFragmentCreate:before{content:""}.ms-Icon--WebAppBuilderModule:before{content:""}.ms-Icon--WebAppBuilderSlot:before{content:""}.ms-Icon--Webcam2Off:before{content:""}.ms-Icon--WebComponents:before{content:""}.ms-Icon--WebPublish:before{content:""}.ms-Icon--WebTemplate:before{content:""}.ms-Icon--Weights:before{content:""}.ms-Icon--Wheelchair:before{content:""}.ms-Icon--WhiteBoardApp16:before{content:""}.ms-Icon--WhiteBoardApp32:before{content:""}.ms-Icon--WindowEdit:before{content:""}.ms-Icon--WindowsLogo:before{content:""}.ms-Icon--Wines:before{content:""}.ms-Icon--WipePhone:before{content:""}.ms-Icon--WordDocument:before{content:""}.ms-Icon--WordLogo:before{content:""}.ms-Icon--WordLogo16:before{content:""}.ms-Icon--WordLogoFill:before{content:""}.ms-Icon--WordLogoFill16:before{content:""}.ms-Icon--WordLogoInverse:before{content:""}.ms-Icon--WordLogoInverse16:before{content:""}.ms-Icon--WorkFlow:before{content:""}.ms-Icon--WorkforceManagement:before{content:""}.ms-Icon--WorkItem:before{content:""}.ms-Icon--WorkItemAlert:before{content:""}.ms-Icon--WorkItemBar:before{content:""}.ms-Icon--WorkItemBarSolid:before{content:""}.ms-Icon--WorkItemBug:before{content:""}.ms-Icon--WorldClock:before{content:""}.ms-Icon--YammerLogo:before{content:""}.ms-Icon--ZoomToFit:before{content:""}.ms-Icon--HumanResources:before{content:""}.ms-Icon--StoreLogo:before{content:""}.ms-Icon--OneDrive:before{content:""}.ms-Icon--ToggleOff:before{content:""}.ms-Icon--StoreLogoMed:before{content:""}.ms-Icon--GlobalNavButton:before{content:""}.ms-Icon--Wifi:before{content:""}.ms-Icon--Bluetooth:before{content:""}.ms-Icon--Connect:before{content:""}.ms-Icon--InternetSharing:before{content:""}.ms-Icon--VPN:before{content:""}.ms-Icon--Brightness:before{content:""}.ms-Icon--MapPin:before{content:""}.ms-Icon--QuietHours:before{content:""}.ms-Icon--Airplane:before{content:""}.ms-Icon--Tablet:before{content:""}.ms-Icon--QuickNote:before{content:""}.ms-Icon--RememberedDevice:before{content:""}.ms-Icon--ChevronDown:before{content:""}.ms-Icon--ChevronUp:before{content:""}.ms-Icon--Edit:before{content:""}.ms-Icon--Add:before{content:""}.ms-Icon--Cancel:before{content:""}.ms-Icon--More:before{content:""}.ms-Icon--Settings:before{content:""}.ms-Icon--Video:before{content:""}.ms-Icon--Mail:before{content:""}.ms-Icon--People:before{content:""}.ms-Icon--Phone:before{content:""}.ms-Icon--Pin:before{content:""}.ms-Icon--Shop:before{content:""}.ms-Icon--Stop:before{content:""}.ms-Icon--Link:before{content:""}.ms-Icon--Filter:before{content:""}.ms-Icon--AllApps:before{content:""}.ms-Icon--Zoom:before{content:""}.ms-Icon--ZoomOut:before{content:""}.ms-Icon--Microphone:before{content:""}.ms-Icon--Search:before{content:""}.ms-Icon--Camera:before{content:""}.ms-Icon--Attach:before{content:""}.ms-Icon--Send:before{content:""}.ms-Icon--SendFill:before{content:""}.ms-Icon--WalkSolid:before{content:""}.ms-Icon--InPrivate:before{content:""}.ms-Icon--FavoriteList:before{content:""}.ms-Icon--PageSolid:before{content:""}.ms-Icon--Forward:before{content:""}.ms-Icon--Back:before{content:""}.ms-Icon--Refresh:before{content:""}.ms-Icon--Share:before{content:""}.ms-Icon--Lock:before{content:""}.ms-Icon--ReportHacked:before{content:""}.ms-Icon--EMI:before{content:""}.ms-Icon--FavoriteStar:before{content:""}.ms-Icon--FavoriteStarFill:before{content:""}.ms-Icon--ReadingMode:before{content:""}.ms-Icon--Favicon:before{content:""}.ms-Icon--Remove:before{content:""}.ms-Icon--Checkbox:before{content:""}.ms-Icon--CheckboxComposite:before{content:""}.ms-Icon--CheckboxFill:before{content:""}.ms-Icon--CheckboxIndeterminate:before{content:""}.ms-Icon--CheckboxCompositeReversed:before{content:""}.ms-Icon--CheckMark:before{content:""}.ms-Icon--BackToWindow:before{content:""}.ms-Icon--FullScreen:before{content:""}.ms-Icon--ResizeTouchLarger:before{content:""}.ms-Icon--ResizeTouchSmaller:before{content:""}.ms-Icon--ResizeMouseSmall:before{content:""}.ms-Icon--ResizeMouseMedium:before{content:""}.ms-Icon--ResizeMouseWide:before{content:""}.ms-Icon--ResizeMouseTall:before{content:""}.ms-Icon--ResizeMouseLarge:before{content:""}.ms-Icon--SwitchUser:before{content:""}.ms-Icon--Print:before{content:""}.ms-Icon--Up:before{content:""}.ms-Icon--Down:before{content:""}.ms-Icon--OEM:before{content:""}.ms-Icon--Delete:before{content:""}.ms-Icon--Save:before{content:""}.ms-Icon--Mute:before{content:""}.ms-Icon--BackSpaceQWERTY:before{content:""}.ms-Icon--ReturnKey:before{content:""}.ms-Icon--UpArrowShiftKey:before{content:""}.ms-Icon--Cloud:before{content:""}.ms-Icon--Flashlight:before{content:""}.ms-Icon--RotationLock:before{content:""}.ms-Icon--CommandPrompt:before{content:""}.ms-Icon--SIPMove:before{content:""}.ms-Icon--SIPUndock:before{content:""}.ms-Icon--SIPRedock:before{content:""}.ms-Icon--EraseTool:before{content:""}.ms-Icon--UnderscoreSpace:before{content:""}.ms-Icon--GripperTool:before{content:""}.ms-Icon--Dialpad:before{content:""}.ms-Icon--PageLeft:before{content:""}.ms-Icon--PageRight:before{content:""}.ms-Icon--MultiSelect:before{content:""}.ms-Icon--KeyboardLeftHanded:before{content:""}.ms-Icon--KeyboardRightHanded:before{content:""}.ms-Icon--KeyboardClassic:before{content:""}.ms-Icon--KeyboardSplit:before{content:""}.ms-Icon--Volume:before{content:""}.ms-Icon--Play:before{content:""}.ms-Icon--Pause:before{content:""}.ms-Icon--ChevronLeft:before{content:""}.ms-Icon--ChevronRight:before{content:""}.ms-Icon--InkingTool:before{content:""}.ms-Icon--Emoji2:before{content:""}.ms-Icon--GripperBarHorizontal:before{content:""}.ms-Icon--System:before{content:""}.ms-Icon--Personalize:before{content:""}.ms-Icon--Devices:before{content:""}.ms-Icon--SearchAndApps:before{content:""}.ms-Icon--Globe:before{content:""}.ms-Icon--TimeLanguage:before{content:""}.ms-Icon--EaseOfAccess:before{content:""}.ms-Icon--UpdateRestore:before{content:""}.ms-Icon--HangUp:before{content:""}.ms-Icon--ContactInfo:before{content:""}.ms-Icon--Unpin:before{content:""}.ms-Icon--Contact:before{content:""}.ms-Icon--Memo:before{content:""}.ms-Icon--IncomingCall:before{content:""}.ms-Icon--Paste:before{content:""}.ms-Icon--PhoneBook:before{content:""}.ms-Icon--LEDLight:before{content:""}.ms-Icon--Error:before{content:""}.ms-Icon--GripperBarVertical:before{content:""}.ms-Icon--Unlock:before{content:""}.ms-Icon--Slideshow:before{content:""}.ms-Icon--Calendar:before{content:""}.ms-Icon--GripperResize:before{content:""}.ms-Icon--Megaphone:before{content:""}.ms-Icon--Trim:before{content:""}.ms-Icon--NewWindow:before{content:""}.ms-Icon--SaveLocal:before{content:""}.ms-Icon--Color:before{content:""}.ms-Icon--DataSense:before{content:""}.ms-Icon--SaveAs:before{content:""}.ms-Icon--Light:before{content:""}.ms-Icon--AspectRatio:before{content:""}.ms-Icon--DataSenseBar:before{content:""}.ms-Icon--Redo:before{content:""}.ms-Icon--Undo:before{content:""}.ms-Icon--Crop:before{content:""}.ms-Icon--OpenWith:before{content:""}.ms-Icon--Rotate:before{content:""}.ms-Icon--RedEye:before{content:""}.ms-Icon--SetlockScreen:before{content:""}.ms-Icon--MapPin2:before{content:""}.ms-Icon--Package:before{content:""}.ms-Icon--Warning:before{content:""}.ms-Icon--ReadingList:before{content:""}.ms-Icon--Education:before{content:""}.ms-Icon--ShoppingCart:before{content:""}.ms-Icon--Train:before{content:""}.ms-Icon--Flag:before{content:""}.ms-Icon--Move:before{content:""}.ms-Icon--Page:before{content:""}.ms-Icon--TaskView:before{content:""}.ms-Icon--BrowsePhotos:before{content:""}.ms-Icon--HalfStarLeft:before{content:""}.ms-Icon--HalfStarRight:before{content:""}.ms-Icon--Record:before{content:""}.ms-Icon--TouchPointer:before{content:""}.ms-Icon--LangJPN:before{content:""}.ms-Icon--Ferry:before{content:""}.ms-Icon--Highlight:before{content:""}.ms-Icon--ActionCenterNotification:before{content:""}.ms-Icon--PowerButton:before{content:""}.ms-Icon--ResizeTouchNarrower:before{content:""}.ms-Icon--ResizeTouchShorter:before{content:""}.ms-Icon--DrivingMode:before{content:""}.ms-Icon--RingerSilent:before{content:""}.ms-Icon--OtherUser:before{content:""}.ms-Icon--Admin:before{content:""}.ms-Icon--CC:before{content:""}.ms-Icon--SDCard:before{content:""}.ms-Icon--CallForwarding:before{content:""}.ms-Icon--SettingsDisplaySound:before{content:""}.ms-Icon--TVMonitor:before{content:""}.ms-Icon--Speakers:before{content:""}.ms-Icon--Headphone:before{content:""}.ms-Icon--DeviceLaptopPic:before{content:""}.ms-Icon--DeviceLaptopNoPic:before{content:""}.ms-Icon--DeviceMonitorRightPic:before{content:""}.ms-Icon--DeviceMonitorLeftPic:before{content:""}.ms-Icon--DeviceMonitorNoPic:before{content:""}.ms-Icon--Game:before{content:""}.ms-Icon--HorizontalTabKey:before{content:""}.ms-Icon--StreetsideSplitMinimize:before{content:""}.ms-Icon--StreetsideSplitExpand:before{content:""}.ms-Icon--Car:before{content:""}.ms-Icon--Walk:before{content:""}.ms-Icon--Bus:before{content:""}.ms-Icon--TiltUp:before{content:""}.ms-Icon--TiltDown:before{content:""}.ms-Icon--CallControl:before{content:""}.ms-Icon--RotateMapRight:before{content:""}.ms-Icon--RotateMapLeft:before{content:""}.ms-Icon--Home:before{content:""}.ms-Icon--ParkingLocation:before{content:""}.ms-Icon--MapCompassTop:before{content:""}.ms-Icon--MapCompassBottom:before{content:""}.ms-Icon--IncidentTriangle:before{content:""}.ms-Icon--Touch:before{content:""}.ms-Icon--MapDirections:before{content:""}.ms-Icon--StartPoint:before{content:""}.ms-Icon--StopPoint:before{content:""}.ms-Icon--EndPoint:before{content:""}.ms-Icon--History:before{content:""}.ms-Icon--Location:before{content:""}.ms-Icon--MapLayers:before{content:""}.ms-Icon--Accident:before{content:""}.ms-Icon--Work:before{content:""}.ms-Icon--Construction:before{content:""}.ms-Icon--Recent:before{content:""}.ms-Icon--Bank:before{content:""}.ms-Icon--DownloadMap:before{content:""}.ms-Icon--InkingToolFill2:before{content:""}.ms-Icon--HighlightFill2:before{content:""}.ms-Icon--EraseToolFill:before{content:""}.ms-Icon--EraseToolFill2:before{content:""}.ms-Icon--Dictionary:before{content:""}.ms-Icon--DictionaryAdd:before{content:""}.ms-Icon--ToolTip:before{content:""}.ms-Icon--ChromeBack:before{content:""}.ms-Icon--ProvisioningPackage:before{content:""}.ms-Icon--AddRemoteDevice:before{content:""}.ms-Icon--FolderOpen:before{content:""}.ms-Icon--Ethernet:before{content:""}.ms-Icon--ShareBroadband:before{content:""}.ms-Icon--DirectAccess:before{content:""}.ms-Icon--DialUp:before{content:""}.ms-Icon--DefenderApp:before{content:""}.ms-Icon--BatteryCharging9:before{content:""}.ms-Icon--Battery10:before{content:""}.ms-Icon--Pinned:before{content:""}.ms-Icon--PinFill:before{content:""}.ms-Icon--PinnedFill:before{content:""}.ms-Icon--PeriodKey:before{content:""}.ms-Icon--PuncKey:before{content:""}.ms-Icon--RevToggleKey:before{content:""}.ms-Icon--RightArrowKeyTime1:before{content:""}.ms-Icon--RightArrowKeyTime2:before{content:""}.ms-Icon--LeftQuote:before{content:""}.ms-Icon--RightQuote:before{content:""}.ms-Icon--DownShiftKey:before{content:""}.ms-Icon--UpShiftKey:before{content:""}.ms-Icon--PuncKey0:before{content:""}.ms-Icon--PuncKeyLeftBottom:before{content:""}.ms-Icon--RightArrowKeyTime3:before{content:""}.ms-Icon--RightArrowKeyTime4:before{content:""}.ms-Icon--Battery0:before{content:""}.ms-Icon--Battery1:before{content:""}.ms-Icon--Battery2:before{content:""}.ms-Icon--Battery3:before{content:""}.ms-Icon--Battery4:before{content:""}.ms-Icon--Battery5:before{content:""}.ms-Icon--Battery6:before{content:""}.ms-Icon--Battery7:before{content:""}.ms-Icon--Battery8:before{content:""}.ms-Icon--Battery9:before{content:""}.ms-Icon--BatteryCharging0:before{content:""}.ms-Icon--BatteryCharging1:before{content:""}.ms-Icon--BatteryCharging2:before{content:""}.ms-Icon--BatteryCharging3:before{content:""}.ms-Icon--BatteryCharging4:before{content:""}.ms-Icon--BatteryCharging5:before{content:""}.ms-Icon--BatteryCharging6:before{content:""}.ms-Icon--BatteryCharging7:before{content:""}.ms-Icon--BatteryCharging8:before{content:""}.ms-Icon--BatterySaver0:before{content:""}.ms-Icon--BatterySaver1:before{content:""}.ms-Icon--BatterySaver2:before{content:""}.ms-Icon--BatterySaver3:before{content:""}.ms-Icon--BatterySaver4:before{content:""}.ms-Icon--BatterySaver5:before{content:""}.ms-Icon--BatterySaver6:before{content:""}.ms-Icon--BatterySaver7:before{content:""}.ms-Icon--BatterySaver8:before{content:""}.ms-Icon--SignalBars1:before{content:""}.ms-Icon--SignalBars2:before{content:""}.ms-Icon--SignalBars3:before{content:""}.ms-Icon--SignalBars4:before{content:""}.ms-Icon--SignalBars5:before{content:""}.ms-Icon--SignalNotConnected:before{content:""}.ms-Icon--Wifi1:before{content:""}.ms-Icon--Wifi2:before{content:""}.ms-Icon--Wifi3:before{content:""}.ms-Icon--MobSIMLock:before{content:""}.ms-Icon--MobSIMMissing:before{content:""}.ms-Icon--Vibrate:before{content:""}.ms-Icon--RoamingInternational:before{content:""}.ms-Icon--RoamingDomestic:before{content:""}.ms-Icon--CallForwardInternational:before{content:""}.ms-Icon--CallForwardRoaming:before{content:""}.ms-Icon--JpnRomanji:before{content:""}.ms-Icon--JpnRomanjiLock:before{content:""}.ms-Icon--JpnRomanjiShift:before{content:""}.ms-Icon--JpnRomanjiShiftLock:before{content:""}.ms-Icon--StatusDataTransfer:before{content:""}.ms-Icon--StatusDataTransferVPN:before{content:""}.ms-Icon--StatusDualSIM2:before{content:""}.ms-Icon--StatusDualSIM2VPN:before{content:""}.ms-Icon--StatusDualSIM1:before{content:""}.ms-Icon--StatusDualSIM1VPN:before{content:""}.ms-Icon--StatusSGLTE:before{content:""}.ms-Icon--StatusSGLTECell:before{content:""}.ms-Icon--StatusSGLTEDataVPN:before{content:""}.ms-Icon--StatusVPN:before{content:""}.ms-Icon--WifiHotspot:before{content:""}.ms-Icon--LanguageKor:before{content:""}.ms-Icon--LanguageCht:before{content:""}.ms-Icon--LanguageChs:before{content:""}.ms-Icon--USB:before{content:""}.ms-Icon--InkingToolFill:before{content:""}.ms-Icon--View:before{content:""}.ms-Icon--HighlightFill:before{content:""}.ms-Icon--Previous:before{content:""}.ms-Icon--Next:before{content:""}.ms-Icon--Clear:before{content:""}.ms-Icon--Sync:before{content:""}.ms-Icon--Download:before{content:""}.ms-Icon--Help:before{content:""}.ms-Icon--Upload:before{content:""}.ms-Icon--Emoji:before{content:""}.ms-Icon--TwoPage:before{content:""}.ms-Icon--LeaveChat:before{content:""}.ms-Icon--MailForward:before{content:""}.ms-Icon--RotateCamera:before{content:""}.ms-Icon--ClosePane:before{content:""}.ms-Icon--OpenPane:before{content:""}.ms-Icon--PreviewLink:before{content:""}.ms-Icon--AttachCamera:before{content:""}.ms-Icon--ZoomIn:before{content:""}.ms-Icon--Bookmarks:before{content:""}.ms-Icon--Document:before{content:""}.ms-Icon--ProtectedDocument:before{content:""}.ms-Icon--OpenInNewWindow:before{content:""}.ms-Icon--MailFill:before{content:""}.ms-Icon--ViewAll:before{content:""}.ms-Icon--VideoChat:before{content:""}.ms-Icon--Switch:before{content:""}.ms-Icon--Rename:before{content:""}.ms-Icon--Go:before{content:""}.ms-Icon--SurfaceHub:before{content:""}.ms-Icon--Remote:before{content:""}.ms-Icon--Click:before{content:""}.ms-Icon--Shuffle:before{content:""}.ms-Icon--Movies:before{content:""}.ms-Icon--SelectAll:before{content:""}.ms-Icon--Orientation:before{content:""}.ms-Icon--Import:before{content:""}.ms-Icon--ImportAll:before{content:""}.ms-Icon--Folder:before{content:""}.ms-Icon--Webcam:before{content:""}.ms-Icon--Picture:before{content:""}.ms-Icon--Caption:before{content:""}.ms-Icon--ChromeClose:before{content:""}.ms-Icon--ShowResults:before{content:""}.ms-Icon--Message:before{content:""}.ms-Icon--Leaf:before{content:""}.ms-Icon--CalendarDay:before{content:""}.ms-Icon--CalendarWeek:before{content:""}.ms-Icon--Characters:before{content:""}.ms-Icon--MailReplyAll:before{content:""}.ms-Icon--Read:before{content:""}.ms-Icon--ShowBcc:before{content:""}.ms-Icon--HideBcc:before{content:""}.ms-Icon--Cut:before{content:""}.ms-Icon--PaymentCard:before{content:""}.ms-Icon--Copy:before{content:""}.ms-Icon--Important:before{content:""}.ms-Icon--MailReply:before{content:""}.ms-Icon--Sort:before{content:""}.ms-Icon--MobileTablet:before{content:""}.ms-Icon--DisconnectDrive:before{content:""}.ms-Icon--MapDrive:before{content:""}.ms-Icon--ContactPresence:before{content:""}.ms-Icon--Priority:before{content:""}.ms-Icon--GotoToday:before{content:""}.ms-Icon--Font:before{content:""}.ms-Icon--FontColor:before{content:""}.ms-Icon--Contact2:before{content:""}.ms-Icon--FolderFill:before{content:""}.ms-Icon--Audio:before{content:""}.ms-Icon--Permissions:before{content:""}.ms-Icon--DisableUpdates:before{content:""}.ms-Icon--Unfavorite:before{content:""}.ms-Icon--OpenLocal:before{content:""}.ms-Icon--Italic:before{content:""}.ms-Icon--Underline:before{content:""}.ms-Icon--Bold:before{content:""}.ms-Icon--MoveToFolder:before{content:""}.ms-Icon--LikeDislike:before{content:""}.ms-Icon--Dislike:before{content:""}.ms-Icon--Like:before{content:""}.ms-Icon--AlignRight:before{content:""}.ms-Icon--AlignCenter:before{content:""}.ms-Icon--AlignLeft:before{content:""}.ms-Icon--OpenFile:before{content:""}.ms-Icon--ClearSelection:before{content:""}.ms-Icon--FontDecrease:before{content:""}.ms-Icon--FontIncrease:before{content:""}.ms-Icon--FontSize:before{content:""}.ms-Icon--CellPhone:before{content:""}.ms-Icon--Reshare:before{content:""}.ms-Icon--Tag:before{content:""}.ms-Icon--RepeatOne:before{content:""}.ms-Icon--RepeatAll:before{content:""}.ms-Icon--Calculator:before{content:""}.ms-Icon--Directions:before{content:""}.ms-Icon--Library:before{content:""}.ms-Icon--ChatBubbles:before{content:""}.ms-Icon--PostUpdate:before{content:""}.ms-Icon--NewFolder:before{content:""}.ms-Icon--CalendarReply:before{content:""}.ms-Icon--UnsyncFolder:before{content:""}.ms-Icon--SyncFolder:before{content:""}.ms-Icon--BlockContact:before{content:""}.ms-Icon--SwitchApps:before{content:""}.ms-Icon--AddFriend:before{content:""}.ms-Icon--Accept:before{content:""}.ms-Icon--GoToStart:before{content:""}.ms-Icon--BulletedList:before{content:""}.ms-Icon--Scan:before{content:""}.ms-Icon--Preview:before{content:""}.ms-Icon--Group:before{content:""}.ms-Icon--ZeroBars:before{content:""}.ms-Icon--OneBar:before{content:""}.ms-Icon--TwoBars:before{content:""}.ms-Icon--ThreeBars:before{content:""}.ms-Icon--FourBars:before{content:""}.ms-Icon--World:before{content:""}.ms-Icon--Comment:before{content:""}.ms-Icon--MusicInfo:before{content:""}.ms-Icon--DockLeft:before{content:""}.ms-Icon--DockRight:before{content:""}.ms-Icon--DockBottom:before{content:""}.ms-Icon--Repair:before{content:""}.ms-Icon--Accounts:before{content:""}.ms-Icon--DullSound:before{content:""}.ms-Icon--Manage:before{content:""}.ms-Icon--Street:before{content:""}.ms-Icon--Printer3D:before{content:""}.ms-Icon--RadioBullet:before{content:""}.ms-Icon--Stopwatch:before{content:""}.ms-Icon--Photo:before{content:""}.ms-Icon--ActionCenter:before{content:""}.ms-Icon--FullCircleMask:before{content:""}.ms-Icon--ChromeMinimize:before{content:""}.ms-Icon--ChromeMaximize:before{content:""}.ms-Icon--ChromeRestore:before{content:""}.ms-Icon--Annotation:before{content:""}.ms-Icon--BackSpaceQWERTYSm:before{content:""}.ms-Icon--BackSpaceQWERTYMd:before{content:""}.ms-Icon--Swipe:before{content:""}.ms-Icon--Fingerprint:before{content:""}.ms-Icon--Handwriting:before{content:""}.ms-Icon--ChromeBackToWindow:before{content:""}.ms-Icon--ChromeFullScreen:before{content:""}.ms-Icon--KeyboardStandard:before{content:""}.ms-Icon--KeyboardDismiss:before{content:""}.ms-Icon--Completed:before{content:""}.ms-Icon--ChromeAnnotate:before{content:""}.ms-Icon--Label:before{content:""}.ms-Icon--IBeam:before{content:""}.ms-Icon--IBeamOutline:before{content:""}.ms-Icon--FlickDown:before{content:""}.ms-Icon--FlickUp:before{content:""}.ms-Icon--FlickLeft:before{content:""}.ms-Icon--FlickRight:before{content:""}.ms-Icon--FeedbackApp:before{content:""}.ms-Icon--MusicAlbum:before{content:""}.ms-Icon--Streaming:before{content:""}.ms-Icon--Code:before{content:""}.ms-Icon--ReturnToWindow:before{content:""}.ms-Icon--LightningBolt:before{content:""}.ms-Icon--Info:before{content:""}.ms-Icon--CalculatorMultiply:before{content:""}.ms-Icon--CalculatorAddition:before{content:""}.ms-Icon--CalculatorSubtract:before{content:""}.ms-Icon--CalculatorDivide:before{content:""}.ms-Icon--CalculatorSquareroot:before{content:""}.ms-Icon--CalculatorPercentage:before{content:""}.ms-Icon--CalculatorNegate:before{content:""}.ms-Icon--CalculatorEqualTo:before{content:""}.ms-Icon--CalculatorBackspace:before{content:""}.ms-Icon--Component:before{content:""}.ms-Icon--DMC:before{content:""}.ms-Icon--Dock:before{content:""}.ms-Icon--MultimediaDMS:before{content:""}.ms-Icon--MultimediaDVR:before{content:""}.ms-Icon--MultimediaPMP:before{content:""}.ms-Icon--PrintfaxPrinterFile:before{content:""}.ms-Icon--Sensor:before{content:""}.ms-Icon--StorageOptical:before{content:""}.ms-Icon--Communications:before{content:""}.ms-Icon--Headset:before{content:""}.ms-Icon--Projector:before{content:""}.ms-Icon--Health:before{content:""}.ms-Icon--Wire:before{content:""}.ms-Icon--Webcam2:before{content:""}.ms-Icon--Input:before{content:""}.ms-Icon--Mouse:before{content:""}.ms-Icon--Smartcard:before{content:""}.ms-Icon--SmartcardVirtual:before{content:""}.ms-Icon--MediaStorageTower:before{content:""}.ms-Icon--ReturnKeySm:before{content:""}.ms-Icon--GameConsole:before{content:""}.ms-Icon--Network:before{content:""}.ms-Icon--StorageNetworkWireless:before{content:""}.ms-Icon--StorageTape:before{content:""}.ms-Icon--ChevronUpSmall:before{content:""}.ms-Icon--ChevronDownSmall:before{content:""}.ms-Icon--ChevronLeftSmall:before{content:""}.ms-Icon--ChevronRightSmall:before{content:""}.ms-Icon--ChevronUpMed:before{content:""}.ms-Icon--ChevronDownMed:before{content:""}.ms-Icon--ChevronLeftMed:before{content:""}.ms-Icon--ChevronRightMed:before{content:""}.ms-Icon--Devices2:before{content:""}.ms-Icon--ExpandTile:before{content:""}.ms-Icon--PC1:before{content:""}.ms-Icon--PresenceChicklet:before{content:""}.ms-Icon--PresenceChickletVideo:before{content:""}.ms-Icon--Reply:before{content:""}.ms-Icon--SetTile:before{content:""}.ms-Icon--Type:before{content:""}.ms-Icon--Korean:before{content:""}.ms-Icon--HalfAlpha:before{content:""}.ms-Icon--FullAlpha:before{content:""}.ms-Icon--Key12On:before{content:""}.ms-Icon--ChineseChangjie:before{content:""}.ms-Icon--QWERTYOn:before{content:""}.ms-Icon--QWERTYOff:before{content:""}.ms-Icon--ChineseQuick:before{content:""}.ms-Icon--Japanese:before{content:""}.ms-Icon--FullHiragana:before{content:""}.ms-Icon--FullKatakana:before{content:""}.ms-Icon--HalfKatakana:before{content:""}.ms-Icon--ChineseBoPoMoFo:before{content:""}.ms-Icon--ChinesePinyin:before{content:""}.ms-Icon--ConstructionCone:before{content:""}.ms-Icon--XboxOneConsole:before{content:""}.ms-Icon--Volume0:before{content:""}.ms-Icon--Volume1:before{content:""}.ms-Icon--Volume2:before{content:""}.ms-Icon--Volume3:before{content:""}.ms-Icon--BatteryUnknown:before{content:""}.ms-Icon--WifiAttentionOverlay:before{content:""}.ms-Icon--Robot:before{content:""}.ms-Icon--TapAndSend:before{content:""}.ms-Icon--FitPage:before{content:""}.ms-Icon--PasswordKeyShow:before{content:""}.ms-Icon--PasswordKeyHide:before{content:""}.ms-Icon--BidiLtr:before{content:""}.ms-Icon--BidiRtl:before{content:""}.ms-Icon--ForwardSm:before{content:""}.ms-Icon--CommaKey:before{content:""}.ms-Icon--DashKey:before{content:""}.ms-Icon--DullSoundKey:before{content:""}.ms-Icon--HalfDullSound:before{content:""}.ms-Icon--RightDoubleQuote:before{content:""}.ms-Icon--LeftDoubleQuote:before{content:""}.ms-Icon--PuncKeyRightBottom:before{content:""}.ms-Icon--PuncKey1:before{content:""}.ms-Icon--PuncKey2:before{content:""}.ms-Icon--PuncKey3:before{content:""}.ms-Icon--PuncKey4:before{content:""}.ms-Icon--PuncKey5:before{content:""}.ms-Icon--PuncKey6:before{content:""}.ms-Icon--PuncKey9:before{content:""}.ms-Icon--PuncKey7:before{content:""}.ms-Icon--PuncKey8:before{content:""}.ms-Icon--Frigid:before{content:""}.ms-Icon--Unknown:before{content:""}.ms-Icon--AreaChart:before{content:""}.ms-Icon--CheckList:before{content:""}.ms-Icon--Diagnostic:before{content:""}.ms-Icon--Equalizer:before{content:""}.ms-Icon--Process:before{content:""}.ms-Icon--Processing:before{content:""}.ms-Icon--ReportDocument:before{content:""}.ms-Icon--VideoSolid:before{content:""}.ms-Icon--MixedMediaBadge:before{content:""}.ms-Icon--DisconnectDisplay:before{content:""}.ms-Icon--Shield:before{content:""}.ms-Icon--Info2:before{content:""}.ms-Icon--ActionCenterAsterisk:before{content:""}.ms-Icon--Beta:before{content:""}.ms-Icon--SaveCopy:before{content:""}.ms-Icon--List:before{content:""}.ms-Icon--Asterisk:before{content:""}.ms-Icon--ErrorBadge:before{content:""}.ms-Icon--CircleRing:before{content:""}.ms-Icon--CircleFill:before{content:""}.ms-Icon--MergeCall:before{content:""}.ms-Icon--PrivateCall:before{content:""}.ms-Icon--Record2:before{content:""}.ms-Icon--AllAppsMirrored:before{content:""}.ms-Icon--BookmarksMirrored:before{content:""}.ms-Icon--BulletedListMirrored:before{content:""}.ms-Icon--CallForwardInternationalMirrored:before{content:""}.ms-Icon--CallForwardRoamingMirrored:before{content:""}.ms-Icon--ChromeBackMirrored:before{content:""}.ms-Icon--ClearSelectionMirrored:before{content:""}.ms-Icon--ClosePaneMirrored:before{content:""}.ms-Icon--ContactInfoMirrored:before{content:""}.ms-Icon--DockRightMirrored:before{content:""}.ms-Icon--DockLeftMirrored:before{content:""}.ms-Icon--ExpandTileMirrored:before{content:""}.ms-Icon--GoMirrored:before{content:""}.ms-Icon--GripperResizeMirrored:before{content:""}.ms-Icon--HelpMirrored:before{content:""}.ms-Icon--ImportMirrored:before{content:""}.ms-Icon--ImportAllMirrored:before{content:""}.ms-Icon--LeaveChatMirrored:before{content:""}.ms-Icon--ListMirrored:before{content:""}.ms-Icon--MailForwardMirrored:before{content:""}.ms-Icon--MailReplyMirrored:before{content:""}.ms-Icon--MailReplyAllMirrored:before{content:""}.ms-Icon--OpenPaneMirrored:before{content:""}.ms-Icon--OpenWithMirrored:before{content:""}.ms-Icon--ParkingLocationMirrored:before{content:""}.ms-Icon--ResizeMouseMediumMirrored:before{content:""}.ms-Icon--ResizeMouseSmallMirrored:before{content:""}.ms-Icon--ResizeMouseTallMirrored:before{content:""}.ms-Icon--ResizeTouchNarrowerMirrored:before{content:""}.ms-Icon--SendMirrored:before{content:""}.ms-Icon--SendFillMirrored:before{content:""}.ms-Icon--ShowResultsMirrored:before{content:""}.ms-Icon--Media:before{content:""}.ms-Icon--SyncError:before{content:""}.ms-Icon--Devices3:before{content:""}.ms-Icon--SlowMotionOn:before{content:""}.ms-Icon--Lightbulb:before{content:""}.ms-Icon--StatusCircle:before{content:""}.ms-Icon--StatusTriangle:before{content:""}.ms-Icon--StatusError:before{content:""}.ms-Icon--StatusWarning:before{content:""}.ms-Icon--Puzzle:before{content:""}.ms-Icon--CalendarSolid:before{content:""}.ms-Icon--HomeSolid:before{content:""}.ms-Icon--ParkingLocationSolid:before{content:""}.ms-Icon--ContactSolid:before{content:""}.ms-Icon--ConstructionSolid:before{content:""}.ms-Icon--AccidentSolid:before{content:""}.ms-Icon--Ringer:before{content:""}.ms-Icon--PDF:before{content:""}.ms-Icon--ThoughtBubble:before{content:""}.ms-Icon--HeartBroken:before{content:""}.ms-Icon--BatteryCharging10:before{content:""}.ms-Icon--BatterySaver9:before{content:""}.ms-Icon--BatterySaver10:before{content:""}.ms-Icon--CallForwardingMirrored:before{content:""}.ms-Icon--MultiSelectMirrored:before{content:""}.ms-Icon--Broom:before{content:""}.ms-Icon--ForwardCall:before{content:""}.ms-Icon--Trackers:before{content:""}.ms-Icon--Market:before{content:""}.ms-Icon--PieSingle:before{content:""}.ms-Icon--StockDown:before{content:""}.ms-Icon--StockUp:before{content:""}.ms-Icon--Design:before{content:""}.ms-Icon--Website:before{content:""}.ms-Icon--Drop:before{content:""}.ms-Icon--Radar:before{content:""}.ms-Icon--BusSolid:before{content:""}.ms-Icon--FerrySolid:before{content:""}.ms-Icon--StartPointSolid:before{content:""}.ms-Icon--StopPointSolid:before{content:""}.ms-Icon--EndPointSolid:before{content:""}.ms-Icon--AirplaneSolid:before{content:""}.ms-Icon--TrainSolid:before{content:""}.ms-Icon--WorkSolid:before{content:""}.ms-Icon--ReminderFill:before{content:""}.ms-Icon--Reminder:before{content:""}.ms-Icon--Heart:before{content:""}.ms-Icon--HeartFill:before{content:""}.ms-Icon--EthernetError:before{content:""}.ms-Icon--EthernetWarning:before{content:""}.ms-Icon--StatusConnecting1:before{content:""}.ms-Icon--StatusConnecting2:before{content:""}.ms-Icon--StatusUnsecure:before{content:""}.ms-Icon--WifiError0:before{content:""}.ms-Icon--WifiError1:before{content:""}.ms-Icon--WifiError2:before{content:""}.ms-Icon--WifiError3:before{content:""}.ms-Icon--WifiError4:before{content:""}.ms-Icon--WifiWarning0:before{content:""}.ms-Icon--WifiWarning1:before{content:""}.ms-Icon--WifiWarning2:before{content:""}.ms-Icon--WifiWarning3:before{content:""}.ms-Icon--WifiWarning4:before{content:""}.ms-Icon--Devices4:before{content:""}.ms-Icon--NUIIris:before{content:""}.ms-Icon--NUIFace:before{content:""}.ms-Icon--GatewayRouter:before{content:""}.ms-Icon--EditMirrored:before{content:""}.ms-Icon--NUIFPStartSlideHand:before{content:""}.ms-Icon--NUIFPStartSlideAction:before{content:""}.ms-Icon--NUIFPContinueSlideHand:before{content:""}.ms-Icon--NUIFPContinueSlideAction:before{content:""}.ms-Icon--NUIFPRollRightHand:before{content:""}.ms-Icon--NUIFPRollRightHandAction:before{content:""}.ms-Icon--NUIFPRollLeftHand:before{content:""}.ms-Icon--NUIFPRollLeftAction:before{content:""}.ms-Icon--NUIFPPressHand:before{content:""}.ms-Icon--NUIFPPressAction:before{content:""}.ms-Icon--NUIFPPressRepeatHand:before{content:""}.ms-Icon--NUIFPPressRepeatAction:before{content:""}.ms-Icon--StatusErrorFull:before{content:""}.ms-Icon--TaskViewExpanded:before{content:""}.ms-Icon--Certificate:before{content:""}.ms-Icon--BackSpaceQWERTYLg:before{content:""}.ms-Icon--ReturnKeyLg:before{content:""}.ms-Icon--FastForward:before{content:""}.ms-Icon--Rewind:before{content:""}.ms-Icon--Photo2:before{content:""}.ms-Icon--MobBattery0:before{content:""}.ms-Icon--MobBattery1:before{content:""}.ms-Icon--MobBattery2:before{content:""}.ms-Icon--MobBattery3:before{content:""}.ms-Icon--MobBattery4:before{content:""}.ms-Icon--MobBattery5:before{content:""}.ms-Icon--MobBattery6:before{content:""}.ms-Icon--MobBattery7:before{content:""}.ms-Icon--MobBattery8:before{content:""}.ms-Icon--MobBattery9:before{content:""}.ms-Icon--MobBattery10:before{content:""}.ms-Icon--MobBatteryCharging0:before{content:""}.ms-Icon--MobBatteryCharging1:before{content:""}.ms-Icon--MobBatteryCharging2:before{content:""}.ms-Icon--MobBatteryCharging3:before{content:""}.ms-Icon--MobBatteryCharging4:before{content:""}.ms-Icon--MobBatteryCharging5:before{content:""}.ms-Icon--MobBatteryCharging6:before{content:""}.ms-Icon--MobBatteryCharging7:before{content:""}.ms-Icon--MobBatteryCharging8:before{content:""}.ms-Icon--MobBatteryCharging9:before{content:""}.ms-Icon--MobBatteryCharging10:before{content:""}.ms-Icon--MobBatterySaver0:before{content:""}.ms-Icon--MobBatterySaver1:before{content:""}.ms-Icon--MobBatterySaver2:before{content:""}.ms-Icon--MobBatterySaver3:before{content:""}.ms-Icon--MobBatterySaver4:before{content:""}.ms-Icon--MobBatterySaver5:before{content:""}.ms-Icon--MobBatterySaver6:before{content:""}.ms-Icon--MobBatterySaver7:before{content:""}.ms-Icon--MobBatterySaver8:before{content:""}.ms-Icon--MobBatterySaver9:before{content:""}.ms-Icon--MobBatterySaver10:before{content:""}.ms-Icon--DictionaryCloud:before{content:""}.ms-Icon--ResetDrive:before{content:""}.ms-Icon--VolumeBars:before{content:""}.ms-Icon--Project:before{content:""}.ms-Icon--AdjustHologram:before{content:""}.ms-Icon--CloudDownload:before{content:""}.ms-Icon--MobWifiCallBars:before{content:""}.ms-Icon--MobWifiCall0:before{content:""}.ms-Icon--MobWifiCall1:before{content:""}.ms-Icon--MobWifiCall2:before{content:""}.ms-Icon--MobWifiCall3:before{content:""}.ms-Icon--MobWifiCall4:before{content:""}.ms-Icon--Family:before{content:""}.ms-Icon--LockFeedback:before{content:""}.ms-Icon--DeviceDiscovery:before{content:""}.ms-Icon--WindDirection:before{content:""}.ms-Icon--RightArrowKeyTime0:before{content:""}.ms-Icon--Bug:before{content:""}.ms-Icon--TabletMode:before{content:""}.ms-Icon--StatusCircleLeft:before{content:""}.ms-Icon--StatusTriangleLeft:before{content:""}.ms-Icon--StatusErrorLeft:before{content:""}.ms-Icon--StatusWarningLeft:before{content:""}.ms-Icon--MobBatteryUnknown:before{content:""}.ms-Icon--NetworkTower:before{content:""}.ms-Icon--CityNext:before{content:""}.ms-Icon--CityNext2:before{content:""}.ms-Icon--Courthouse:before{content:""}.ms-Icon--Groceries:before{content:""}.ms-Icon--Sustainable:before{content:""}.ms-Icon--BuildingEnergy:before{content:""}.ms-Icon--ToggleFilled:before{content:""}.ms-Icon--ToggleBorder:before{content:""}.ms-Icon--SliderThumb:before{content:""}.ms-Icon--ToggleThumb:before{content:""}.ms-Icon--MiracastLogoSmall:before{content:""}.ms-Icon--MiracastLogoLarge:before{content:""}.ms-Icon--PLAP:before{content:""}.ms-Icon--Badge:before{content:""}.ms-Icon--SignalRoaming:before{content:""}.ms-Icon--MobileLocked:before{content:""}.ms-Icon--InsiderHubApp:before{content:""}.ms-Icon--PersonalFolder:before{content:""}.ms-Icon--HomeGroup:before{content:""}.ms-Icon--MyNetwork:before{content:""}.ms-Icon--KeyboardFull:before{content:""}.ms-Icon--Cafe:before{content:""}.ms-Icon--MobSignal1:before{content:""}.ms-Icon--MobSignal2:before{content:""}.ms-Icon--MobSignal3:before{content:""}.ms-Icon--MobSignal4:before{content:""}.ms-Icon--MobSignal5:before{content:""}.ms-Icon--MobWifi1:before{content:""}.ms-Icon--MobWifi2:before{content:""}.ms-Icon--MobWifi3:before{content:""}.ms-Icon--MobWifi4:before{content:""}.ms-Icon--MobAirplane:before{content:""}.ms-Icon--MobBluetooth:before{content:""}.ms-Icon--MobActionCenter:before{content:""}.ms-Icon--MobLocation:before{content:""}.ms-Icon--MobWifiHotspot:before{content:""}.ms-Icon--LanguageJpn:before{content:""}.ms-Icon--MobQuietHours:before{content:""}.ms-Icon--MobDrivingMode:before{content:""}.ms-Icon--SpeedOff:before{content:""}.ms-Icon--SpeedMedium:before{content:""}.ms-Icon--SpeedHigh:before{content:""}.ms-Icon--ThisPC:before{content:""}.ms-Icon--MusicNote:before{content:""}.ms-Icon--FileExplorer:before{content:""}.ms-Icon--FileExplorerApp:before{content:""}.ms-Icon--LeftArrowKeyTime0:before{content:""}.ms-Icon--MicOff:before{content:""}.ms-Icon--MicSleep:before{content:""}.ms-Icon--MicError:before{content:""}.ms-Icon--PlaybackRate1x:before{content:""}.ms-Icon--PlaybackRateOther:before{content:""}.ms-Icon--CashDrawer:before{content:""}.ms-Icon--BarcodeScanner:before{content:""}.ms-Icon--ReceiptPrinter:before{content:""}.ms-Icon--MagStripeReader:before{content:""}.ms-Icon--CompletedSolid:before{content:""}.ms-Icon--CompanionApp:before{content:""}.ms-Icon--Favicon2:before{content:""}.ms-Icon--SwipeRevealArt:before{content:""}.ms-Icon--MicOn:before{content:""}.ms-Icon--MicClipping:before{content:""}.ms-Icon--TabletSelected:before{content:""}.ms-Icon--MobileSelected:before{content:""}.ms-Icon--LaptopSelected:before{content:""}.ms-Icon--TVMonitorSelected:before{content:""}.ms-Icon--DeveloperTools:before{content:""}.ms-Icon--MobCallForwarding:before{content:""}.ms-Icon--MobCallForwardingMirrored:before{content:""}.ms-Icon--BodyCam:before{content:""}.ms-Icon--PoliceCar:before{content:""}.ms-Icon--Draw:before{content:""}.ms-Icon--DrawSolid:before{content:""}.ms-Icon--LowerBrightness:before{content:""}.ms-Icon--ScrollUpDown:before{content:""}.ms-Icon--DateTime:before{content:""}.ms-Icon--HoloLens:before{content:""}.ms-Icon--Tiles:before{content:""}.ms-Icon--PartyLeader:before{content:""}.ms-Icon--AppIconDefault:before{content:""}.ms-Icon--Calories:before{content:""}.ms-Icon--POI:before{content:""}.ms-Icon--BandBattery0:before{content:""}.ms-Icon--BandBattery1:before{content:""}.ms-Icon--BandBattery2:before{content:""}.ms-Icon--BandBattery3:before{content:""}.ms-Icon--BandBattery4:before{content:""}.ms-Icon--BandBattery5:before{content:""}.ms-Icon--BandBattery6:before{content:""}.ms-Icon--AddSurfaceHub:before{content:""}.ms-Icon--DevUpdate:before{content:""}.ms-Icon--Unit:before{content:""}.ms-Icon--AddTo:before{content:""}.ms-Icon--RemoveFrom:before{content:""}.ms-Icon--RadioBtnOff:before{content:""}.ms-Icon--RadioBtnOn:before{content:""}.ms-Icon--RadioBullet2:before{content:""}.ms-Icon--ExploreContent:before{content:""}.ms-Icon--Blocked2:before{content:""}.ms-Icon--ScrollMode:before{content:""}.ms-Icon--ZoomMode:before{content:""}.ms-Icon--PanMode:before{content:""}.ms-Icon--WiredUSB:before{content:""}.ms-Icon--WirelessUSB:before{content:""}.ms-Icon--USBSafeConnect:before{content:""}.ms-Icon--ActionCenterNotificationMirrored:before{content:""}.ms-Icon--ActionCenterMirrored:before{content:""}.ms-Icon--SubscriptionAdd:before{content:""}.ms-Icon--ResetDevice:before{content:""}.ms-Icon--SubscriptionAddMirrored:before{content:""}.ms-Icon--QRCode:before{content:""}.ms-Icon--Feedback:before{content:""}.ms-Icon--Hide:before{content:""}.ms-Icon--Subtitles:before{content:""}.ms-Icon--SubtitlesAudio:before{content:""}.ms-Icon--OpenFolderHorizontal:before{content:""}.ms-Icon--CalendarMirrored:before{content:""}.ms-Icon--MobeSIM:before{content:""}.ms-Icon--MobeSIMNoProfile:before{content:""}.ms-Icon--MobeSIMLocked:before{content:""}.ms-Icon--MobeSIMBusy:before{content:""}.ms-Icon--SignalError:before{content:""}.ms-Icon--StreamingEnterprise:before{content:""}.ms-Icon--Headphone0:before{content:""}.ms-Icon--Headphone1:before{content:""}.ms-Icon--Headphone2:before{content:""}.ms-Icon--Headphone3:before{content:""}.ms-Icon--Apps:before{content:""}.ms-Icon--KeyboardBrightness:before{content:""}.ms-Icon--KeyboardLowerBrightness:before{content:""}.ms-Icon--SkipBack10:before{content:""}.ms-Icon--SkipForward30:before{content:""}.ms-Icon--TreeFolderFolder:before{content:""}.ms-Icon--TreeFolderFolderFill:before{content:""}.ms-Icon--TreeFolderFolderOpen:before{content:""}.ms-Icon--TreeFolderFolderOpenFill:before{content:""}.ms-Icon--MultimediaDMP:before{content:""}.ms-Icon--KeyboardOneHanded:before{content:""}.ms-Icon--Narrator:before{content:""}.ms-Icon--EmojiTabPeople:before{content:""}.ms-Icon--EmojiTabSmilesAnimals:before{content:""}.ms-Icon--EmojiTabCelebrationObjects:before{content:""}.ms-Icon--EmojiTabFoodPlants:before{content:""}.ms-Icon--EmojiTabTransitPlaces:before{content:""}.ms-Icon--EmojiTabSymbols:before{content:""}.ms-Icon--EmojiTabTextSmiles:before{content:""}.ms-Icon--EmojiTabFavorites:before{content:""}.ms-Icon--EmojiSwatch:before{content:""}.ms-Icon--ConnectApp:before{content:""}.ms-Icon--CompanionDeviceFramework:before{content:""}.ms-Icon--Ruler:before{content:""}.ms-Icon--FingerInking:before{content:""}.ms-Icon--StrokeErase:before{content:""}.ms-Icon--PointErase:before{content:""}.ms-Icon--ClearAllInk:before{content:""}.ms-Icon--Pencil:before{content:""}.ms-Icon--Marker:before{content:""}.ms-Icon--InkingCaret:before{content:""}.ms-Icon--InkingColorOutline:before{content:""}.ms-Icon--InkingColorFill:before{content:""}.ms-Icon--HardDrive:before{content:""}.ms-Icon--NetworkAdapter:before{content:""}.ms-Icon--Touchscreen:before{content:""}.ms-Icon--NetworkPrinter:before{content:""}.ms-Icon--CloudPrinter:before{content:""}.ms-Icon--KeyboardShortcut:before{content:""}.ms-Icon--BrushSize:before{content:""}.ms-Icon--NarratorForward:before{content:""}.ms-Icon--NarratorForwardMirrored:before{content:""}.ms-Icon--SyncBadge12:before{content:""}.ms-Icon--RingerBadge12:before{content:""}.ms-Icon--AsteriskBadge12:before{content:""}.ms-Icon--ErrorBadge12:before{content:""}.ms-Icon--CircleRingBadge12:before{content:""}.ms-Icon--CircleFillBadge12:before{content:""}.ms-Icon--ImportantBadge12:before{content:""}.ms-Icon--MailBadge12:before{content:""}.ms-Icon--PauseBadge12:before{content:""}.ms-Icon--PlayBadge12:before{content:""}.ms-Icon--PenWorkspace:before{content:""}.ms-Icon--CaretLeft8:before{content:""}.ms-Icon--CaretRight8:before{content:""}.ms-Icon--CaretUp8:before{content:""}.ms-Icon--CaretDown8:before{content:""}.ms-Icon--CaretLeftSolid8:before{content:""}.ms-Icon--CaretRightSolid8:before{content:""}.ms-Icon--CaretUpSolid8:before{content:""}.ms-Icon--CaretDownSolid8:before{content:""}.ms-Icon--Strikethrough:before{content:""}.ms-Icon--Export:before{content:""}.ms-Icon--ExportMirrored:before{content:""}.ms-Icon--ButtonMenu:before{content:""}.ms-Icon--CloudSearch:before{content:""}.ms-Icon--PinyinIMELogo:before{content:""}.ms-Icon--CalligraphyPen:before{content:""}.ms-Icon--ReplyMirrored:before{content:""}.ms-Icon--LockscreenDesktop:before{content:""}.ms-Icon--TaskViewSettings:before{content:""}.ms-Icon--MiniExpand2Mirrored:before{content:""}.ms-Icon--MiniContract2Mirrored:before{content:""}.ms-Icon--Play36:before{content:""}.ms-Icon--PenPalette:before{content:""}.ms-Icon--GuestUser:before{content:""}.ms-Icon--SettingsBattery:before{content:""}.ms-Icon--TaskbarPhone:before{content:""}.ms-Icon--LockScreenGlance:before{content:""}.ms-Icon--GenericScan:before{content:""}.ms-Icon--ImageExport:before{content:""}.ms-Icon--WifiEthernet:before{content:""}.ms-Icon--ActionCenterQuiet:before{content:""}.ms-Icon--ActionCenterQuietNotification:before{content:""}.ms-Icon--TrackersMirrored:before{content:""}.ms-Icon--DateTimeMirrored:before{content:""}.ms-Icon--Wheel:before{content:""}.ms-Icon--VirtualMachineGroup:before{content:""}.ms-Icon--ButtonView2:before{content:""}.ms-Icon--PenWorkspaceMirrored:before{content:""}.ms-Icon--PenPaletteMirrored:before{content:""}.ms-Icon--StrokeEraseMirrored:before{content:""}.ms-Icon--PointEraseMirrored:before{content:""}.ms-Icon--ClearAllInkMirrored:before{content:""}.ms-Icon--BackgroundToggle:before{content:""}.ms-Icon--Marquee:before{content:""}.ms-Icon--ChromeCloseContrast:before{content:""}.ms-Icon--ChromeMinimizeContrast:before{content:""}.ms-Icon--ChromeMaximizeContrast:before{content:""}.ms-Icon--ChromeRestoreContrast:before{content:""}.ms-Icon--TrafficLight:before{content:""}.ms-Icon--Replay:before{content:""}.ms-Icon--Eyedropper:before{content:""}.ms-Icon--LineDisplay:before{content:""}.ms-Icon--PINPad:before{content:""}.ms-Icon--SignatureCapture:before{content:""}.ms-Icon--ChipCardCreditCardReader:before{content:""}.ms-Icon--MarketDown:before{content:""}.ms-Icon--PlayerSettings:before{content:""}.ms-Icon--LandscapeOrientation:before{content:""}.ms-Icon--Flow:before{content:""}.ms-Icon--Touchpad:before{content:""}.ms-Icon--Speech:before{content:""}.ms-Icon--KnowledgeArticle:before{content:""}.ms-Icon--Relationship:before{content:""}.ms-Icon--ZipFolder:before{content:""}.ms-Icon--DefaultAPN:before{content:""}.ms-Icon--UserAPN:before{content:""}.ms-Icon--DoublePinyin:before{content:""}.ms-Icon--BlueLight:before{content:""}.ms-Icon--CaretSolidLeft:before{content:""}.ms-Icon--CaretSolidDown:before{content:""}.ms-Icon--CaretSolidRight:before{content:""}.ms-Icon--CaretSolidUp:before{content:""}.ms-Icon--ButtonA:before{content:""}.ms-Icon--ButtonB:before{content:""}.ms-Icon--ButtonY:before{content:""}.ms-Icon--ButtonX:before{content:""}.ms-Icon--ArrowUp8:before{content:""}.ms-Icon--ArrowDown8:before{content:""}.ms-Icon--ArrowRight8:before{content:""}.ms-Icon--ArrowLeft8:before{content:""}.ms-Icon--QuarentinedItems:before{content:""}.ms-Icon--QuarentinedItemsMirrored:before{content:""}.ms-Icon--Protractor:before{content:""}.ms-Icon--ChecklistMirrored:before{content:""}.ms-Icon--StatusCircle7:before{content:""}.ms-Icon--StatusCheckmark7:before{content:""}.ms-Icon--StatusErrorCircle7:before{content:""}.ms-Icon--Connected:before{content:""}.ms-Icon--PencilFill:before{content:""}.ms-Icon--CalligraphyFill:before{content:""}.ms-Icon--QuarterStarLeft:before{content:""}.ms-Icon--QuarterStarRight:before{content:""}.ms-Icon--ThreeQuarterStarLeft:before{content:""}.ms-Icon--ThreeQuarterStarRight:before{content:""}.ms-Icon--QuietHoursBadge12:before{content:""}.ms-Icon--BackMirrored:before{content:""}.ms-Icon--ForwardMirrored:before{content:""}.ms-Icon--ChromeBackContrast:before{content:""}.ms-Icon--ChromeBackContrastMirrored:before{content:""}.ms-Icon--ChromeBackToWindowContrast:before{content:""}.ms-Icon--ChromeFullScreenContrast:before{content:""}.ms-Icon--GridView:before{content:""}.ms-Icon--ClipboardList:before{content:""}.ms-Icon--ClipboardListMirrored:before{content:""}.ms-Icon--OutlineQuarterStarLeft:before{content:""}.ms-Icon--OutlineQuarterStarRight:before{content:""}.ms-Icon--OutlineHalfStarLeft:before{content:""}.ms-Icon--OutlineHalfStarRight:before{content:""}.ms-Icon--OutlineThreeQuarterStarLeft:before{content:""}.ms-Icon--OutlineThreeQuarterStarRight:before{content:""}.ms-Icon--SpatialVolume0:before{content:""}.ms-Icon--SpatialVolume1:before{content:""}.ms-Icon--SpatialVolume2:before{content:""}.ms-Icon--SpatialVolume3:before{content:""}.ms-Icon--ApplicationGuard:before{content:""}.ms-Icon--OutlineStarLeftHalf:before{content:""}.ms-Icon--OutlineStarRightHalf:before{content:""}.ms-Icon--ChromeAnnotateContrast:before{content:""}.ms-Icon--DefenderBadge12:before{content:""}.ms-Icon--DetachablePC:before{content:""}.ms-Icon--LeftStick:before{content:""}.ms-Icon--RightStick:before{content:""}.ms-Icon--TriggerLeft:before{content:""}.ms-Icon--TriggerRight:before{content:""}.ms-Icon--BumperLeft:before{content:""}.ms-Icon--BumperRight:before{content:""}.ms-Icon--Dpad:before{content:""}.ms-Icon--EnglishPunctuation:before{content:""}.ms-Icon--ChinesePunctuation:before{content:""}.ms-Icon--HMD:before{content:""}.ms-Icon--CtrlSpatialRight:before{content:""}.ms-Icon--PaginationDotOutline10:before{content:""}.ms-Icon--PaginationDotSolid10:before{content:""}.ms-Icon--StrokeErase2:before{content:""}.ms-Icon--SmallErase:before{content:""}.ms-Icon--LargeErase:before{content:""}.ms-Icon--FolderHorizontal:before{content:""}.ms-Icon--MicrophoneListening:before{content:""}.ms-Icon--StatusExclamationCircle7:before{content:""}.ms-Icon--Video360:before{content:""}.ms-Icon--GiftboxOpen:before{content:""}.ms-Icon--StatusCircleOuter:before{content:""}.ms-Icon--StatusCircleInner:before{content:""}.ms-Icon--StatusCircleRing:before{content:""}.ms-Icon--StatusTriangleOuter:before{content:""}.ms-Icon--StatusTriangleInner:before{content:""}.ms-Icon--StatusTriangleExclamation:before{content:""}.ms-Icon--StatusCircleExclamation:before{content:""}.ms-Icon--StatusCircleErrorX:before{content:""}.ms-Icon--StatusCircleCheckmark:before{content:""}.ms-Icon--StatusCircleInfo:before{content:""}.ms-Icon--StatusCircleBlock:before{content:""}.ms-Icon--StatusCircleBlock2:before{content:""}.ms-Icon--StatusCircleQuestionMark:before{content:""}.ms-Icon--StatusCircleSync:before{content:""}.ms-Icon--Dial1:before{content:""}.ms-Icon--Dial2:before{content:""}.ms-Icon--Dial3:before{content:""}.ms-Icon--Dial4:before{content:""}.ms-Icon--Dial5:before{content:""}.ms-Icon--Dial6:before{content:""}.ms-Icon--Dial7:before{content:""}.ms-Icon--Dial8:before{content:""}.ms-Icon--Dial9:before{content:""}.ms-Icon--Dial10:before{content:""}.ms-Icon--Dial11:before{content:""}.ms-Icon--Dial12:before{content:""}.ms-Icon--Dial13:before{content:""}.ms-Icon--Dial14:before{content:""}.ms-Icon--Dial15:before{content:""}.ms-Icon--Dial16:before{content:""}.ms-Icon--DialShape1:before{content:""}.ms-Icon--DialShape2:before{content:""}.ms-Icon--DialShape3:before{content:""}.ms-Icon--DialShape4:before{content:""}.ms-Icon--ClosedCaptionsInternational:before{content:""}.ms-Icon--TollSolid:before{content:""}.ms-Icon--TrafficCongestionSolid:before{content:""}.ms-Icon--ExploreContentSingle:before{content:""}.ms-Icon--CollapseContent:before{content:""}.ms-Icon--CollapseContentSingle:before{content:""}.ms-Icon--InfoSolid:before{content:""}.ms-Icon--GroupList:before{content:""}.ms-Icon--CaretBottomRightSolidCenter8:before{content:""}.ms-Icon--ProgressRingDots:before{content:""}.ms-Icon--Checkbox14:before{content:""}.ms-Icon--CheckboxComposite14:before{content:""}.ms-Icon--CheckboxIndeterminateCombo14:before{content:""}.ms-Icon--CheckboxIndeterminateCombo:before{content:""}.ms-Icon--StatusPause7:before{content:""}.ms-Icon--CharacterAppearance:before{content:""}.ms-Icon--Lexicon:before{content:""}.ms-Icon--ScreenTime:before{content:""}.ms-Icon--HeadlessDevice:before{content:""}.ms-Icon--NetworkSharing:before{content:""}.ms-Icon--EyeGaze:before{content:""}.ms-Icon--ToggleLeft:before{content:""}.ms-Icon--ToggleRight:before{content:""}.ms-Icon--WindowsInsider:before{content:""}.ms-Icon--ChromeSwitch:before{content:""}.ms-Icon--ChromeSwitchContast:before{content:""}.ms-Icon--StatusCheckmark:before{content:""}.ms-Icon--StatusCheckmarkLeft:before{content:""}.ms-Icon--KeyboardLeftAligned:before{content:""}.ms-Icon--KeyboardRightAligned:before{content:""}.ms-Icon--KeyboardSettings:before{content:""}.ms-Icon--NetworkPhysical:before{content:""}.ms-Icon--IOT:before{content:""}.ms-Icon--UnknownMirrored:before{content:""}.ms-Icon--ViewDashboard:before{content:""}.ms-Icon--ExploitProtectionSettings:before{content:""}.ms-Icon--KeyboardNarrow:before{content:""}.ms-Icon--Keyboard12Key:before{content:""}.ms-Icon--KeyboardDock:before{content:""}.ms-Icon--KeyboardUndock:before{content:""}.ms-Icon--KeyboardLeftDock:before{content:""}.ms-Icon--KeyboardRightDock:before{content:""}.ms-Icon--Ear:before{content:""}.ms-Icon--PointerHand:before{content:""}.ms-Icon--Bullseye:before{content:""}.ms-Icon--DocumentApproval:before{content:""}.ms-Icon--LocaleLanguage:before{content:""}.ms-Icon--PassiveAuthentication:before{content:""}.ms-Icon--ColorSolid:before{content:""}.ms-Icon--NetworkOffline:before{content:""}.ms-Icon--NetworkConnected:before{content:""}.ms-Icon--NetworkConnectedCheckmark:before{content:""}.ms-Icon--SignOut:before{content:""}.ms-Icon--StatusInfo:before{content:""}.ms-Icon--StatusInfoLeft:before{content:""}.ms-Icon--NearbySharing:before{content:""}.ms-Icon--CtrlSpatialLeft:before{content:""}.ms-Icon--InteractiveDashboard:before{content:""}.ms-Icon--DeclineCall:before{content:""}.ms-Icon--ClippingTool:before{content:""}.ms-Icon--RectangularClipping:before{content:""}.ms-Icon--FreeFormClipping:before{content:""}.ms-Icon--CopyTo:before{content:""}.ms-Icon--IDBadge:before{content:""}.ms-Icon--DynamicLock:before{content:""}.ms-Icon--PenTips:before{content:""}.ms-Icon--PenTipsMirrored:before{content:""}.ms-Icon--HWPJoin:before{content:""}.ms-Icon--HWPInsert:before{content:""}.ms-Icon--HWPStrikeThrough:before{content:""}.ms-Icon--HWPScratchOut:before{content:""}.ms-Icon--HWPSplit:before{content:""}.ms-Icon--HWPNewLine:before{content:""}.ms-Icon--HWPOverwrite:before{content:""}.ms-Icon--MobWifiWarning1:before{content:""}.ms-Icon--MobWifiWarning2:before{content:""}.ms-Icon--MobWifiWarning3:before{content:""}.ms-Icon--MobWifiWarning4:before{content:""}.ms-Icon--MicLocationCombo:before{content:""}.ms-Icon--Globe2:before{content:""}.ms-Icon--SpecialEffectSize:before{content:""}.ms-Icon--GIF:before{content:""}.ms-Icon--Sticker2:before{content:""}.ms-Icon--SurfaceHubSelected:before{content:""}.ms-Icon--HoloLensSelected:before{content:""}.ms-Icon--Earbud:before{content:""}.ms-Icon--MixVolumes:before{content:""}.ms-Icon--Safe:before{content:""}.ms-Icon--LaptopSecure:before{content:""}.ms-Icon--PrintDefault:before{content:""}.ms-Icon--PageMirrored:before{content:""}.ms-Icon--LandscapeOrientationMirrored:before{content:""}.ms-Icon--ColorOff:before{content:""}.ms-Icon--PrintAllPages:before{content:""}.ms-Icon--PrintCustomRange:before{content:""}.ms-Icon--PageMarginPortraitNarrow:before{content:""}.ms-Icon--PageMarginPortraitNormal:before{content:""}.ms-Icon--PageMarginPortraitModerate:before{content:""}.ms-Icon--PageMarginPortraitWide:before{content:""}.ms-Icon--PageMarginLandscapeNarrow:before{content:""}.ms-Icon--PageMarginLandscapeNormal:before{content:""}.ms-Icon--PageMarginLandscapeModerate:before{content:""}.ms-Icon--PageMarginLandscapeWide:before{content:""}.ms-Icon--CollateLandscape:before{content:""}.ms-Icon--CollatePortrait:before{content:""}.ms-Icon--CollatePortraitSeparated:before{content:""}.ms-Icon--DuplexLandscapeOneSided:before{content:""}.ms-Icon--DuplexLandscapeOneSidedMirrored:before{content:""}.ms-Icon--DuplexLandscapeTwoSidedLongEdge:before{content:""}.ms-Icon--DuplexLandscapeTwoSidedLongEdgeMirrored:before{content:""}.ms-Icon--DuplexLandscapeTwoSidedShortEdge:before{content:""}.ms-Icon--DuplexLandscapeTwoSidedShortEdgeMirrored:before{content:""}.ms-Icon--DuplexPortraitOneSided:before{content:""}.ms-Icon--DuplexPortraitOneSidedMirrored:before{content:""}.ms-Icon--DuplexPortraitTwoSidedLongEdge:before{content:""}.ms-Icon--DuplexPortraitTwoSidedLongEdgeMirrored:before{content:""}.ms-Icon--DuplexPortraitTwoSidedShortEdge:before{content:""}.ms-Icon--DuplexPortraitTwoSidedShortEdgeMirrored:before{content:""}.ms-Icon--PPSOneLandscape:before{content:""}.ms-Icon--PPSTwoLandscape:before{content:""}.ms-Icon--PPSTwoPortrait:before{content:""}.ms-Icon--PPSFourLandscape:before{content:""}.ms-Icon--PPSFourPortrait:before{content:""}.ms-Icon--HolePunchOff:before{content:""}.ms-Icon--HolePunchPortraitLeft:before{content:""}.ms-Icon--HolePunchPortraitRight:before{content:""}.ms-Icon--HolePunchPortraitTop:before{content:""}.ms-Icon--HolePunchPortraitBottom:before{content:""}.ms-Icon--HolePunchLandscapeLeft:before{content:""}.ms-Icon--HolePunchLandscapeRight:before{content:""}.ms-Icon--HolePunchLandscapeTop:before{content:""}.ms-Icon--HolePunchLandscapeBottom:before{content:""}.ms-Icon--StaplingOff:before{content:""}.ms-Icon--StaplingPortraitTopLeft:before{content:""}.ms-Icon--StaplingPortraitTopRight:before{content:""}.ms-Icon--StaplingPortraitBottomRight:before{content:""}.ms-Icon--StaplingPortraitTwoLeft:before{content:""}.ms-Icon--StaplingPortraitTwoRight:before{content:""}.ms-Icon--StaplingPortraitTwoTop:before{content:""}.ms-Icon--StaplingPortraitTwoBottom:before{content:""}.ms-Icon--StaplingPortraitBookBinding:before{content:""}.ms-Icon--StaplingLandscapeTopLeft:before{content:""}.ms-Icon--StaplingLandscapeTopRight:before{content:""}.ms-Icon--StaplingLandscapeBottomLeft:before{content:""}.ms-Icon--StaplingLandscapeBottomRight:before{content:""}.ms-Icon--StaplingLandscapeTwoLeft:before{content:""}.ms-Icon--StaplingLandscapeTwoRight:before{content:""}.ms-Icon--StaplingLandscapeTwoTop:before{content:""}.ms-Icon--StaplingLandscapeTwoBottom:before{content:""}.ms-Icon--StaplingLandscapeBookBinding:before{content:""}.ms-Icon--StatusDataTransferRoaming:before{content:""}.ms-Icon--MobSIMError:before{content:""}.ms-Icon--CollateLandscapeSeparated:before{content:""}.ms-Icon--PPSOnePortrait:before{content:""}.ms-Icon--StaplingPortraitBottomLeft:before{content:""}.ms-Icon--PlaySolid:before{content:""}.ms-Icon--RepeatOff:before{content:""}.ms-Icon--Set:before{content:""}.ms-Icon--SetSolid:before{content:""}.ms-Icon--FuzzyReading:before{content:""}.ms-Icon--VerticalBattery0:before{content:""}.ms-Icon--VerticalBattery1:before{content:""}.ms-Icon--VerticalBattery2:before{content:""}.ms-Icon--VerticalBattery3:before{content:""}.ms-Icon--VerticalBattery4:before{content:""}.ms-Icon--VerticalBattery5:before{content:""}.ms-Icon--VerticalBattery6:before{content:""}.ms-Icon--VerticalBattery7:before{content:""}.ms-Icon--VerticalBattery8:before{content:""}.ms-Icon--VerticalBattery9:before{content:""}.ms-Icon--VerticalBattery10:before{content:""}.ms-Icon--VerticalBatteryCharging0:before{content:""}.ms-Icon--VerticalBatteryCharging1:before{content:""}.ms-Icon--VerticalBatteryCharging2:before{content:""}ms-Icon--VerticalBatteryCharging3:before{content:""}.ms-Icon--VerticalBatteryCharging4:before{content:""}.ms-Icon--VerticalBatteryCharging5:before{content:""}.ms-Icon--VerticalBatteryCharging6:before{content:""}.ms-Icon--VerticalBatteryCharging7:before{content:""}.ms-Icon--VerticalBatteryCharging8:before{content:""}.ms-Icon--VerticalBatteryCharging9:before{content:""}.ms-Icon--VerticalBatteryCharging10:before{content:""}.ms-Icon--VerticalBatteryUnknown:before{content:""}.ms-Icon--SIMError:before{content:""}.ms-Icon--SIMMissing:before{content:""}.ms-Icon--SIMLock:before{content:""}.ms-Icon--eSIM:before{content:""}.ms-Icon--eSIMNoProfile:before{content:""}.ms-Icon--eSIMLocked:before{content:""}.ms-Icon--eSIMBusy:before{content:""}.ms-Icon--NoiseCancelation:before{content:""}.ms-Icon--NoiseCancelationOff:before{content:""}.ms-Icon--MusicSharing:before{content:""}.ms-Icon--MusicSharingOff:before{content:""}.ms-Icon--CircleShapeSolid:before{content:""}.ms-Icon--WifiCallBars:before{content:""}.ms-Icon--WifiCall0:before{content:""}.ms-Icon--WifiCall1:before{content:""}.ms-Icon--WifiCall2:before{content:""}.ms-Icon--WifiCall3:before{content:""}.ms-Icon--WifiCall4:before{content:""}.ms-Icon--CHTLanguageBar:before{content:""}.ms-Icon--ComposeMode:before{content:""}.ms-Icon--ExpressiveInputEntry:before{content:""}.ms-Icon--EmojiTabMoreSymbols:before{content:""}.ms-Icon--WebSearch:before{content:""}.ms-Icon--Kiosk:before{content:""}.ms-Icon--RTTLogo:before{content:""}.ms-Icon--VoiceCall:before{content:""}.ms-Icon--GoToMessage:before{content:""}.ms-Icon--ReturnToCall:before{content:""}.ms-Icon--StartPresenting:before{content:""}.ms-Icon--StopPresenting:before{content:""}.ms-Icon--ProductivityMode:before{content:""}.ms-Icon--SetHistoryStatus:before{content:""}.ms-Icon--SetHistoryStatus2:before{content:""}.ms-Icon--Keyboardsettings20:before{content:""}.ms-Icon--OneHandedRight20:before{content:""}.ms-Icon--OneHandedLeft20:before{content:""}.ms-Icon--Split20:before{content:""}.ms-Icon--Full20:before{content:""}.ms-Icon--Handwriting20:before{content:""}.ms-Icon--ChevronLeft20:before{content:""}.ms-Icon--ChevronLeft32:before{content:""}.ms-Icon--ChevronRight20:before{content:""}.ms-Icon--ChevronRight32:before{content:""}.ms-Icon--Event12:before{content:""}.ms-Icon--MicOff2:before{content:""}.ms-Icon--DeliveryOptimization:before{content:""}.ms-Icon--CancelMedium:before{content:""}.ms-Icon--SearchMedium:before{content:""}.ms-Icon--AcceptMedium:before{content:""}.ms-Icon--RevealPasswordMedium:before{content:""}.ms-Icon--DeleteWord:before{content:""}.ms-Icon--DeleteWordFill:before{content:""}.ms-Icon--DeleteLines:before{content:""}.ms-Icon--DeleteLinesFill:before{content:""}.ms-Icon--InstertWords:before{content:""}.ms-Icon--InstertWordsFill:before{content:""}.ms-Icon--JoinWords:before{content:""}.ms-Icon--JoinWordsFill:before{content:""}.ms-Icon--OverwriteWords:before{content:""}.ms-Icon--OverwriteWordsFill:before{content:""}.ms-Icon--AddNewLine:before{content:""}.ms-Icon--AddNewLineFill:before{content:""}.ms-Icon--OverwriteWordsKorean:before{content:""}.ms-Icon--OverwriteWordsFillKorean:before{content:""}.ms-Icon--EducationIcon:before{content:""}.ms-Icon--WindowSnipping:before{content:""}.ms-Icon--VideoCapture:before{content:""}.ms-Icon--StatusSecured:before{content:""}.ms-Icon--NarratorApp:before{content:""}.ms-Icon--PowerButtonUpdate:before{content:""}.ms-Icon--RestartUpdate:before{content:""}.ms-Icon--UpdateStatusDot:before{content:""}.ms-Icon--Eject:before{content:""}.ms-Icon--Spelling:before{content:""}.ms-Icon--SpellingKorean:before{content:""}.ms-Icon--SpellingSerbian:before{content:""}.ms-Icon--SpellingChinese:before{content:""}.ms-Icon--FolderSelect:before{content:""}.ms-Icon--SmartScreen:before{content:""}.ms-Icon--ExploitProtection:before{content:""}.ms-Icon--AddBold:before{content:""}.ms-Icon--SubtractBold:before{content:""}.ms-Icon--BackSolidBold:before{content:""}.ms-Icon--ForwardSolidBold:before{content:""}.ms-Icon--PauseBold:before{content:""}.ms-Icon--ClickSolid:before{content:""}.ms-Icon--SettingsSolid:before{content:""}.ms-Icon--MicrophoneSolidBold:before{content:""}.ms-Icon--SpeechSolidBold:before{content:""}.ms-Icon--ClickedOutLoudSolidBold:before{content:""}@font-face{font-family:FabricMDL2Icons;src:url(/VFluent3/assets/fabricmdl2icons-3.54.D1Viihrr.woff) format("woff");font-weight:400;font-style:normal}@font-face{font-family:FluentIcons;src:url(/VFluent3/assets/Segoe-Fluent-Icons.Cum4Jb-a.woff) format("woff");font-weight:400;font-style:normal}@media (max-width: 479.99999px){.ms-hiddenLgDown,.ms-hiddenMdDown,.ms-hiddenSm,.ms-hiddenXlDown,.ms-hiddenXxlDown{display:none!important}}@media (min-width: 480px) and (max-width: 639.99999px){.ms-hiddenLgDown,.ms-hiddenMd,.ms-hiddenMdDown,.ms-hiddenMdUp,.ms-hiddenXlDown,.ms-hiddenXxlDown{display:none!important}}@media (min-width: 640px) and (max-width: 1023.99999px){.ms-hiddenLg,.ms-hiddenLgDown,.ms-hiddenLgUp,.ms-hiddenMdUp,.ms-hiddenXlDown,.ms-hiddenXxlDown{display:none!important}}@media (min-width: 1024px) and (max-width: 1365.99999px){.ms-hiddenLgUp,.ms-hiddenMdUp,.ms-hiddenXl,.ms-hiddenXlDown,.ms-hiddenXlUp,.ms-hiddenXxlDown{display:none!important}}@media (min-width: 1366px) and (max-width: 1919.99999px){.ms-hiddenLgUp,.ms-hiddenMdUp,.ms-hiddenXlUp,.ms-hiddenXxl,.ms-hiddenXxlDown,.ms-hiddenXxlUp{display:none!important}}@media (min-width: 1920px){.ms-hiddenLgUp,.ms-hiddenMdUp,.ms-hiddenXlUp,.ms-hiddenXxlUp,.ms-hiddenXxxl{display:none!important}}.ms-sm12{width:100%}.ms-sm11{width:91.66666666666666%}.ms-sm10{width:83.33333333333334%}.ms-sm9{width:75%}.ms-sm8{width:66.66666666666666%}.ms-sm7{width:58.333333333333336%}.ms-sm6{width:50%}.ms-sm5{width:41.66666666666667%}.ms-sm4{width:33.33333333333333%}.ms-sm3{width:25%}.ms-sm2{width:16.666666666666664%}.ms-sm1{width:8.333333333333332%}[dir=ltr] .ms-smPull12{right:100%}[dir=rtl] .ms-smPull12{left:100%}[dir=ltr] .ms-smPull11{right:91.66667%}[dir=rtl] .ms-smPull11{left:91.66667%}[dir=ltr] .ms-smPull10{right:83.33333%}[dir=rtl] .ms-smPull10{left:83.33333%}[dir=ltr] .ms-smPull9{right:75%}[dir=rtl] .ms-smPull9{left:75%}[dir=ltr] .ms-smPull8{right:66.66667%}[dir=rtl] .ms-smPull8{left:66.66667%}[dir=ltr] .ms-smPull7{right:58.33333%}[dir=rtl] .ms-smPull7{left:58.33333%}[dir=ltr] .ms-smPull6{right:50%}[dir=rtl] .ms-smPull6{left:50%}[dir=ltr] .ms-smPull5{right:41.66667%}[dir=rtl] .ms-smPull5{left:41.66667%}[dir=ltr] .ms-smPull4{right:33.33333%}[dir=rtl] .ms-smPull4{left:33.33333%}[dir=ltr] .ms-smPull3{right:25%}[dir=rtl] .ms-smPull3{left:25%}[dir=ltr] .ms-smPull2{right:16.66667%}[dir=rtl] .ms-smPull2{left:16.66667%}[dir=ltr] .ms-smPull1{right:8.33333%}[dir=rtl] .ms-smPull1{left:8.33333%}[dir=ltr] .ms-smPull0{right:auto}[dir=rtl] .ms-smPull0{left:auto}[dir=ltr] .ms-smPush12{left:100%}[dir=rtl] .ms-smPush12{right:100%}[dir=ltr] .ms-smPush11{left:91.66667%}[dir=rtl] .ms-smPush11{right:91.66667%}[dir=ltr] .ms-smPush10{left:83.33333%}[dir=rtl] .ms-smPush10{right:83.33333%}[dir=ltr] .ms-smPush9{left:75%}[dir=rtl] .ms-smPush9{right:75%}[dir=ltr] .ms-smPush8{left:66.66667%}[dir=rtl] .ms-smPush8{right:66.66667%}[dir=ltr] .ms-smPush7{left:58.33333%}[dir=rtl] .ms-smPush7{right:58.33333%}[dir=ltr] .ms-smPush6{left:50%}[dir=rtl] .ms-smPush6{right:50%}[dir=ltr] .ms-smPush5{left:41.66667%}[dir=rtl] .ms-smPush5{right:41.66667%}[dir=ltr] .ms-smPush4{left:33.33333%}[dir=rtl] .ms-smPush4{right:33.33333%}[dir=ltr] .ms-smPush3{left:25%}[dir=rtl] .ms-smPush3{right:25%}[dir=ltr] .ms-smPush2{left:16.66667%}[dir=rtl] .ms-smPush2{right:16.66667%}[dir=ltr] .ms-smPush1{left:8.33333%}[dir=rtl] .ms-smPush1{right:8.33333%}[dir=ltr] .ms-smPush0{left:auto}[dir=rtl] .ms-smPush0{right:auto}[dir=ltr] .ms-smOffset11{margin-left:91.66667%}[dir=rtl] .ms-smOffset11{margin-right:91.66667%}[dir=ltr] .ms-smOffset10{margin-left:83.33333%}[dir=rtl] .ms-smOffset10{margin-right:83.33333%}[dir=ltr] .ms-smOffset9{margin-left:75%}[dir=rtl] .ms-smOffset9{margin-right:75%}[dir=ltr] .ms-smOffset8{margin-left:66.66667%}[dir=rtl] .ms-smOffset8{margin-right:66.66667%}[dir=ltr] .ms-smOffset7{margin-left:58.33333%}[dir=rtl] .ms-smOffset7{margin-right:58.33333%}[dir=ltr] .ms-smOffset6{margin-left:50%}[dir=rtl] .ms-smOffset6{margin-right:50%}[dir=ltr] .ms-smOffset5{margin-left:41.66667%}[dir=rtl] .ms-smOffset5{margin-right:41.66667%}[dir=ltr] .ms-smOffset4{margin-left:33.33333%}[dir=rtl] .ms-smOffset4{margin-right:33.33333%}[dir=ltr] .ms-smOffset3{margin-left:25%}[dir=rtl] .ms-smOffset3{margin-right:25%}[dir=ltr] .ms-smOffset2{margin-left:16.66667%}[dir=rtl] .ms-smOffset2{margin-right:16.66667%}[dir=ltr] .ms-smOffset1{margin-left:8.33333%}[dir=rtl] .ms-smOffset1{margin-right:8.33333%}[dir=ltr] .ms-smOffset0{margin-left:0}[dir=rtl] .ms-smOffset0{margin-right:0}@media (min-width: 480px){.ms-md12{width:100%}}@media (min-width: 480px){.ms-md11{width:91.66666666666666%}}@media (min-width: 480px){.ms-md10{width:83.33333333333334%}}@media (min-width: 480px){.ms-md9{width:75%}}@media (min-width: 480px){.ms-md8{width:66.66666666666666%}}@media (min-width: 480px){.ms-md7{width:58.333333333333336%}}@media (min-width: 480px){.ms-md6{width:50%}}@media (min-width: 480px){.ms-md5{width:41.66666666666667%}}@media (min-width: 480px){.ms-md4{width:33.33333333333333%}}@media (min-width: 480px){.ms-md3{width:25%}}@media (min-width: 480px){.ms-md2{width:16.666666666666664%}}@media (min-width: 480px){.ms-md1{width:8.333333333333332%}}@media (min-width: 480px){[dir=ltr] .ms-mdPull12{right:100%}[dir=rtl] .ms-mdPull12{left:100%}}@media (min-width: 480px){[dir=ltr] .ms-mdPull11{right:91.66667%}[dir=rtl] .ms-mdPull11{left:91.66667%}}@media (min-width: 480px){[dir=ltr] .ms-mdPull10{right:83.33333%}[dir=rtl] .ms-mdPull10{left:83.33333%}}@media (min-width: 480px){[dir=ltr] .ms-mdPull9{right:75%}[dir=rtl] .ms-mdPull9{left:75%}}@media (min-width: 480px){[dir=ltr] .ms-mdPull8{right:66.66667%}[dir=rtl] .ms-mdPull8{left:66.66667%}}@media (min-width: 480px){[dir=ltr] .ms-mdPull7{right:58.33333%}[dir=rtl] .ms-mdPull7{left:58.33333%}}@media (min-width: 480px){[dir=ltr] .ms-mdPull6{right:50%}[dir=rtl] .ms-mdPull6{left:50%}}@media (min-width: 480px){[dir=ltr] .ms-mdPull5{right:41.66667%}[dir=rtl] .ms-mdPull5{left:41.66667%}}@media (min-width: 480px){[dir=ltr] .ms-mdPull4{right:33.33333%}[dir=rtl] .ms-mdPull4{left:33.33333%}}@media (min-width: 480px){[dir=ltr] .ms-mdPull3{right:25%}[dir=rtl] .ms-mdPull3{left:25%}}@media (min-width: 480px){[dir=ltr] .ms-mdPull2{right:16.66667%}[dir=rtl] .ms-mdPull2{left:16.66667%}}@media (min-width: 480px){[dir=ltr] .ms-mdPull1{right:8.33333%}[dir=rtl] .ms-mdPull1{left:8.33333%}}@media (min-width: 480px){[dir=ltr] .ms-mdPull0{right:auto}[dir=rtl] .ms-mdPull0{left:auto}}@media (min-width: 480px){[dir=ltr] .ms-mdPush12{left:100%}[dir=rtl] .ms-mdPush12{right:100%}}@media (min-width: 480px){[dir=ltr] .ms-mdPush11{left:91.66667%}[dir=rtl] .ms-mdPush11{right:91.66667%}}@media (min-width: 480px){[dir=ltr] .ms-mdPush10{left:83.33333%}[dir=rtl] .ms-mdPush10{right:83.33333%}}@media (min-width: 480px){[dir=ltr] .ms-mdPush9{left:75%}[dir=rtl] .ms-mdPush9{right:75%}}@media (min-width: 480px){[dir=ltr] .ms-mdPush8{left:66.66667%}[dir=rtl] .ms-mdPush8{right:66.66667%}}@media (min-width: 480px){[dir=ltr] .ms-mdPush7{left:58.33333%}[dir=rtl] .ms-mdPush7{right:58.33333%}}@media (min-width: 480px){[dir=ltr] .ms-mdPush6{left:50%}[dir=rtl] .ms-mdPush6{right:50%}}@media (min-width: 480px){[dir=ltr] .ms-mdPush5{left:41.66667%}[dir=rtl] .ms-mdPush5{right:41.66667%}}@media (min-width: 480px){[dir=ltr] .ms-mdPush4{left:33.33333%}[dir=rtl] .ms-mdPush4{right:33.33333%}}@media (min-width: 480px){[dir=ltr] .ms-mdPush3{left:25%}[dir=rtl] .ms-mdPush3{right:25%}}@media (min-width: 480px){[dir=ltr] .ms-mdPush2{left:16.66667%}[dir=rtl] .ms-mdPush2{right:16.66667%}}@media (min-width: 480px){[dir=ltr] .ms-mdPush1{left:8.33333%}[dir=rtl] .ms-mdPush1{right:8.33333%}}@media (min-width: 480px){[dir=ltr] .ms-mdPush0{left:auto}[dir=rtl] .ms-mdPush0{right:auto}}@media (min-width: 480px){[dir=ltr] .ms-mdOffset11{margin-left:91.66667%}[dir=rtl] .ms-mdOffset11{margin-right:91.66667%}}@media (min-width: 480px){[dir=ltr] .ms-mdOffset10{margin-left:83.33333%}[dir=rtl] .ms-mdOffset10{margin-right:83.33333%}}@media (min-width: 480px){[dir=ltr] .ms-mdOffset9{margin-left:75%}[dir=rtl] .ms-mdOffset9{margin-right:75%}}@media (min-width: 480px){[dir=ltr] .ms-mdOffset8{margin-left:66.66667%}[dir=rtl] .ms-mdOffset8{margin-right:66.66667%}}@media (min-width: 480px){[dir=ltr] .ms-mdOffset7{margin-left:58.33333%}[dir=rtl] .ms-mdOffset7{margin-right:58.33333%}}@media (min-width: 480px){[dir=ltr] .ms-mdOffset6{margin-left:50%}[dir=rtl] .ms-mdOffset6{margin-right:50%}}@media (min-width: 480px){[dir=ltr] .ms-mdOffset5{margin-left:41.66667%}[dir=rtl] .ms-mdOffset5{margin-right:41.66667%}}@media (min-width: 480px){[dir=ltr] .ms-mdOffset4{margin-left:33.33333%}[dir=rtl] .ms-mdOffset4{margin-right:33.33333%}}@media (min-width: 480px){[dir=ltr] .ms-mdOffset3{margin-left:25%}[dir=rtl] .ms-mdOffset3{margin-right:25%}}@media (min-width: 480px){[dir=ltr] .ms-mdOffset2{margin-left:16.66667%}[dir=rtl] .ms-mdOffset2{margin-right:16.66667%}}@media (min-width: 480px){[dir=ltr] .ms-mdOffset1{margin-left:8.33333%}[dir=rtl] .ms-mdOffset1{margin-right:8.33333%}}@media (min-width: 480px){[dir=ltr] .ms-mdOffset0{margin-left:0}[dir=rtl] .ms-mdOffset0{margin-right:0}}@media (min-width: 640px){.ms-lg12{width:100%}}@media (min-width: 640px){.ms-lg11{width:91.66666666666666%}}@media (min-width: 640px){.ms-lg10{width:83.33333333333334%}}@media (min-width: 640px){.ms-lg9{width:75%}}@media (min-width: 640px){.ms-lg8{width:66.66666666666666%}}@media (min-width: 640px){.ms-lg7{width:58.333333333333336%}}@media (min-width: 640px){.ms-lg6{width:50%}}@media (min-width: 640px){.ms-lg5{width:41.66666666666667%}}@media (min-width: 640px){.ms-lg4{width:33.33333333333333%}}@media (min-width: 640px){.ms-lg3{width:25%}}@media (min-width: 640px){.ms-lg2{width:16.666666666666664%}}@media (min-width: 640px){.ms-lg1{width:8.333333333333332%}}@media (min-width: 640px){[dir=ltr] .ms-lgPull12{right:100%}[dir=rtl] .ms-lgPull12{left:100%}}@media (min-width: 640px){[dir=ltr] .ms-lgPull11{right:91.66667%}[dir=rtl] .ms-lgPull11{left:91.66667%}}@media (min-width: 640px){[dir=ltr] .ms-lgPull10{right:83.33333%}[dir=rtl] .ms-lgPull10{left:83.33333%}}@media (min-width: 640px){[dir=ltr] .ms-lgPull9{right:75%}[dir=rtl] .ms-lgPull9{left:75%}}@media (min-width: 640px){[dir=ltr] .ms-lgPull8{right:66.66667%}[dir=rtl] .ms-lgPull8{left:66.66667%}}@media (min-width: 640px){[dir=ltr] .ms-lgPull7{right:58.33333%}[dir=rtl] .ms-lgPull7{left:58.33333%}}@media (min-width: 640px){[dir=ltr] .ms-lgPull6{right:50%}[dir=rtl] .ms-lgPull6{left:50%}}@media (min-width: 640px){[dir=ltr] .ms-lgPull5{right:41.66667%}[dir=rtl] .ms-lgPull5{left:41.66667%}}@media (min-width: 640px){[dir=ltr] .ms-lgPull4{right:33.33333%}[dir=rtl] .ms-lgPull4{left:33.33333%}}@media (min-width: 640px){[dir=ltr] .ms-lgPull3{right:25%}[dir=rtl] .ms-lgPull3{left:25%}}@media (min-width: 640px){[dir=ltr] .ms-lgPull2{right:16.66667%}[dir=rtl] .ms-lgPull2{left:16.66667%}}@media (min-width: 640px){[dir=ltr] .ms-lgPull1{right:8.33333%}[dir=rtl] .ms-lgPull1{left:8.33333%}}@media (min-width: 640px){[dir=ltr] .ms-lgPull0{right:auto}[dir=rtl] .ms-lgPull0{left:auto}}@media (min-width: 640px){[dir=ltr] .ms-lgPush12{left:100%}[dir=rtl] .ms-lgPush12{right:100%}}@media (min-width: 640px){[dir=ltr] .ms-lgPush11{left:91.66667%}[dir=rtl] .ms-lgPush11{right:91.66667%}}@media (min-width: 640px){[dir=ltr] .ms-lgPush10{left:83.33333%}[dir=rtl] .ms-lgPush10{right:83.33333%}}@media (min-width: 640px){[dir=ltr] .ms-lgPush9{left:75%}[dir=rtl] .ms-lgPush9{right:75%}}@media (min-width: 640px){[dir=ltr] .ms-lgPush8{left:66.66667%}[dir=rtl] .ms-lgPush8{right:66.66667%}}@media (min-width: 640px){[dir=ltr] .ms-lgPush7{left:58.33333%}[dir=rtl] .ms-lgPush7{right:58.33333%}}@media (min-width: 640px){[dir=ltr] .ms-lgPush6{left:50%}[dir=rtl] .ms-lgPush6{right:50%}}@media (min-width: 640px){[dir=ltr] .ms-lgPush5{left:41.66667%}[dir=rtl] .ms-lgPush5{right:41.66667%}}@media (min-width: 640px){[dir=ltr] .ms-lgPush4{left:33.33333%}[dir=rtl] .ms-lgPush4{right:33.33333%}}@media (min-width: 640px){[dir=ltr] .ms-lgPush3{left:25%}[dir=rtl] .ms-lgPush3{right:25%}}@media (min-width: 640px){[dir=ltr] .ms-lgPush2{left:16.66667%}[dir=rtl] .ms-lgPush2{right:16.66667%}}@media (min-width: 640px){[dir=ltr] .ms-lgPush1{left:8.33333%}[dir=rtl] .ms-lgPush1{right:8.33333%}}@media (min-width: 640px){[dir=ltr] .ms-lgPush0{left:auto}[dir=rtl] .ms-lgPush0{right:auto}}@media (min-width: 640px){[dir=ltr] .ms-lgOffset11{margin-left:91.66667%}[dir=rtl] .ms-lgOffset11{margin-right:91.66667%}}@media (min-width: 640px){[dir=ltr] .ms-lgOffset10{margin-left:83.33333%}[dir=rtl] .ms-lgOffset10{margin-right:83.33333%}}@media (min-width: 640px){[dir=ltr] .ms-lgOffset9{margin-left:75%}[dir=rtl] .ms-lgOffset9{margin-right:75%}}@media (min-width: 640px){[dir=ltr] .ms-lgOffset8{margin-left:66.66667%}[dir=rtl] .ms-lgOffset8{margin-right:66.66667%}}@media (min-width: 640px){[dir=ltr] .ms-lgOffset7{margin-left:58.33333%}[dir=rtl] .ms-lgOffset7{margin-right:58.33333%}}@media (min-width: 640px){[dir=ltr] .ms-lgOffset6{margin-left:50%}[dir=rtl] .ms-lgOffset6{margin-right:50%}}@media (min-width: 640px){[dir=ltr] .ms-lgOffset5{margin-left:41.66667%}[dir=rtl] .ms-lgOffset5{margin-right:41.66667%}}@media (min-width: 640px){[dir=ltr] .ms-lgOffset4{margin-left:33.33333%}[dir=rtl] .ms-lgOffset4{margin-right:33.33333%}}@media (min-width: 640px){[dir=ltr] .ms-lgOffset3{margin-left:25%}[dir=rtl] .ms-lgOffset3{margin-right:25%}}@media (min-width: 640px){[dir=ltr] .ms-lgOffset2{margin-left:16.66667%}[dir=rtl] .ms-lgOffset2{margin-right:16.66667%}}@media (min-width: 640px){[dir=ltr] .ms-lgOffset1{margin-left:8.33333%}[dir=rtl] .ms-lgOffset1{margin-right:8.33333%}}@media (min-width: 640px){[dir=ltr] .ms-lgOffset0{margin-left:0}[dir=rtl] .ms-lgOffset0{margin-right:0}}@media (min-width: 1024px){.ms-xl12{width:100%}}@media (min-width: 1024px){.ms-xl11{width:91.66666666666666%}}@media (min-width: 1024px){.ms-xl10{width:83.33333333333334%}}@media (min-width: 1024px){.ms-xl9{width:75%}}@media (min-width: 1024px){.ms-xl8{width:66.66666666666666%}}@media (min-width: 1024px){.ms-xl7{width:58.333333333333336%}}@media (min-width: 1024px){.ms-xl6{width:50%}}@media (min-width: 1024px){.ms-xl5{width:41.66666666666667%}}@media (min-width: 1024px){.ms-xl4{width:33.33333333333333%}}@media (min-width: 1024px){.ms-xl3{width:25%}}@media (min-width: 1024px){.ms-xl2{width:16.666666666666664%}}@media (min-width: 1024px){.ms-xl1{width:8.333333333333332%}}@media (min-width: 1024px){[dir=ltr] .ms-xlPull12{right:100%}[dir=rtl] .ms-xlPull12{left:100%}}@media (min-width: 1024px){[dir=ltr] .ms-xlPull11{right:91.66667%}[dir=rtl] .ms-xlPull11{left:91.66667%}}@media (min-width: 1024px){[dir=ltr] .ms-xlPull10{right:83.33333%}[dir=rtl] .ms-xlPull10{left:83.33333%}}@media (min-width: 1024px){[dir=ltr] .ms-xlPull9{right:75%}[dir=rtl] .ms-xlPull9{left:75%}}@media (min-width: 1024px){[dir=ltr] .ms-xlPull8{right:66.66667%}[dir=rtl] .ms-xlPull8{left:66.66667%}}@media (min-width: 1024px){[dir=ltr] .ms-xlPull7{right:58.33333%}[dir=rtl] .ms-xlPull7{left:58.33333%}}@media (min-width: 1024px){[dir=ltr] .ms-xlPull6{right:50%}[dir=rtl] .ms-xlPull6{left:50%}}@media (min-width: 1024px){[dir=ltr] .ms-xlPull5{right:41.66667%}[dir=rtl] .ms-xlPull5{left:41.66667%}}@media (min-width: 1024px){[dir=ltr] .ms-xlPull4{right:33.33333%}[dir=rtl] .ms-xlPull4{left:33.33333%}}@media (min-width: 1024px){[dir=ltr] .ms-xlPull3{right:25%}[dir=rtl] .ms-xlPull3{left:25%}}@media (min-width: 1024px){[dir=ltr] .ms-xlPull2{right:16.66667%}[dir=rtl] .ms-xlPull2{left:16.66667%}}@media (min-width: 1024px){[dir=ltr] .ms-xlPull1{right:8.33333%}[dir=rtl] .ms-xlPull1{left:8.33333%}}@media (min-width: 1024px){[dir=ltr] .ms-xlPull0{right:auto}[dir=rtl] .ms-xlPull0{left:auto}}@media (min-width: 1024px){[dir=ltr] .ms-xlPush12{left:100%}[dir=rtl] .ms-xlPush12{right:100%}}@media (min-width: 1024px){[dir=ltr] .ms-xlPush11{left:91.66667%}[dir=rtl] .ms-xlPush11{right:91.66667%}}@media (min-width: 1024px){[dir=ltr] .ms-xlPush10{left:83.33333%}[dir=rtl] .ms-xlPush10{right:83.33333%}}@media (min-width: 1024px){[dir=ltr] .ms-xlPush9{left:75%}[dir=rtl] .ms-xlPush9{right:75%}}@media (min-width: 1024px){[dir=ltr] .ms-xlPush8{left:66.66667%}[dir=rtl] .ms-xlPush8{right:66.66667%}}@media (min-width: 1024px){[dir=ltr] .ms-xlPush7{left:58.33333%}[dir=rtl] .ms-xlPush7{right:58.33333%}}@media (min-width: 1024px){[dir=ltr] .ms-xlPush6{left:50%}[dir=rtl] .ms-xlPush6{right:50%}}@media (min-width: 1024px){[dir=ltr] .ms-xlPush5{left:41.66667%}[dir=rtl] .ms-xlPush5{right:41.66667%}}@media (min-width: 1024px){[dir=ltr] .ms-xlPush4{left:33.33333%}[dir=rtl] .ms-xlPush4{right:33.33333%}}@media (min-width: 1024px){[dir=ltr] .ms-xlPush3{left:25%}[dir=rtl] .ms-xlPush3{right:25%}}@media (min-width: 1024px){[dir=ltr] .ms-xlPush2{left:16.66667%}[dir=rtl] .ms-xlPush2{right:16.66667%}}@media (min-width: 1024px){[dir=ltr] .ms-xlPush1{left:8.33333%}[dir=rtl] .ms-xlPush1{right:8.33333%}}@media (min-width: 1024px){[dir=ltr] .ms-xlPush0{left:auto}[dir=rtl] .ms-xlPush0{right:auto}}@media (min-width: 1024px){[dir=ltr] .ms-xlOffset11{margin-left:91.66667%}[dir=rtl] .ms-xlOffset11{margin-right:91.66667%}}@media (min-width: 1024px){[dir=ltr] .ms-xlOffset10{margin-left:83.33333%}[dir=rtl] .ms-xlOffset10{margin-right:83.33333%}}@media (min-width: 1024px){[dir=ltr] .ms-xlOffset9{margin-left:75%}[dir=rtl] .ms-xlOffset9{margin-right:75%}}@media (min-width: 1024px){[dir=ltr] .ms-xlOffset8{margin-left:66.66667%}[dir=rtl] .ms-xlOffset8{margin-right:66.66667%}}@media (min-width: 1024px){[dir=ltr] .ms-xlOffset7{margin-left:58.33333%}[dir=rtl] .ms-xlOffset7{margin-right:58.33333%}}@media (min-width: 1024px){[dir=ltr] .ms-xlOffset6{margin-left:50%}[dir=rtl] .ms-xlOffset6{margin-right:50%}}@media (min-width: 1024px){[dir=ltr] .ms-xlOffset5{margin-left:41.66667%}[dir=rtl] .ms-xlOffset5{margin-right:41.66667%}}@media (min-width: 1024px){[dir=ltr] .ms-xlOffset4{margin-left:33.33333%}[dir=rtl] .ms-xlOffset4{margin-right:33.33333%}}@media (min-width: 1024px){[dir=ltr] .ms-xlOffset3{margin-left:25%}[dir=rtl] .ms-xlOffset3{margin-right:25%}}@media (min-width: 1024px){[dir=ltr] .ms-xlOffset2{margin-left:16.66667%}[dir=rtl] .ms-xlOffset2{margin-right:16.66667%}}@media (min-width: 1024px){[dir=ltr] .ms-xlOffset1{margin-left:8.33333%}[dir=rtl] .ms-xlOffset1{margin-right:8.33333%}}@media (min-width: 1024px){[dir=ltr] .ms-xlOffset0{margin-left:0}[dir=rtl] .ms-xlOffset0{margin-right:0}}@media (min-width: 1366px){.ms-xxl12{width:100%}}@media (min-width: 1366px){.ms-xxl11{width:91.66666666666666%}}@media (min-width: 1366px){.ms-xxl10{width:83.33333333333334%}}@media (min-width: 1366px){.ms-xxl9{width:75%}}@media (min-width: 1366px){.ms-xxl8{width:66.66666666666666%}}@media (min-width: 1366px){.ms-xxl7{width:58.333333333333336%}}@media (min-width: 1366px){.ms-xxl6{width:50%}}@media (min-width: 1366px){.ms-xxl5{width:41.66666666666667%}}@media (min-width: 1366px){.ms-xxl4{width:33.33333333333333%}}@media (min-width: 1366px){.ms-xxl3{width:25%}}@media (min-width: 1366px){.ms-xxl2{width:16.666666666666664%}}@media (min-width: 1366px){.ms-xxl1{width:8.333333333333332%}}@media (min-width: 1366px){[dir=ltr] .ms-xxlPull12{right:100%}[dir=rtl] .ms-xxlPull12{left:100%}}@media (min-width: 1366px){[dir=ltr] .ms-xxlPull11{right:91.66667%}[dir=rtl] .ms-xxlPull11{left:91.66667%}}@media (min-width: 1366px){[dir=ltr] .ms-xxlPull10{right:83.33333%}[dir=rtl] .ms-xxlPull10{left:83.33333%}}@media (min-width: 1366px){[dir=ltr] .ms-xxlPull9{right:75%}[dir=rtl] .ms-xxlPull9{left:75%}}@media (min-width: 1366px){[dir=ltr] .ms-xxlPull8{right:66.66667%}[dir=rtl] .ms-xxlPull8{left:66.66667%}}@media (min-width: 1366px){[dir=ltr] .ms-xxlPull7{right:58.33333%}[dir=rtl] .ms-xxlPull7{left:58.33333%}}@media (min-width: 1366px){[dir=ltr] .ms-xxlPull6{right:50%}[dir=rtl] .ms-xxlPull6{left:50%}}@media (min-width: 1366px){[dir=ltr] .ms-xxlPull5{right:41.66667%}[dir=rtl] .ms-xxlPull5{left:41.66667%}}@media (min-width: 1366px){[dir=ltr] .ms-xxlPull4{right:33.33333%}[dir=rtl] .ms-xxlPull4{left:33.33333%}}@media (min-width: 1366px){[dir=ltr] .ms-xxlPull3{right:25%}[dir=rtl] .ms-xxlPull3{left:25%}}@media (min-width: 1366px){[dir=ltr] .ms-xxlPull2{right:16.66667%}[dir=rtl] .ms-xxlPull2{left:16.66667%}}@media (min-width: 1366px){[dir=ltr] .ms-xxlPull1{right:8.33333%}[dir=rtl] .ms-xxlPull1{left:8.33333%}}@media (min-width: 1366px){[dir=ltr] .ms-xxlPull0{right:auto}[dir=rtl] .ms-xxlPull0{left:auto}}@media (min-width: 1366px){[dir=ltr] .ms-xxlPush12{left:100%}[dir=rtl] .ms-xxlPush12{right:100%}}@media (min-width: 1366px){[dir=ltr] .ms-xxlPush11{left:91.66667%}[dir=rtl] .ms-xxlPush11{right:91.66667%}}@media (min-width: 1366px){[dir=ltr] .ms-xxlPush10{left:83.33333%}[dir=rtl] .ms-xxlPush10{right:83.33333%}}@media (min-width: 1366px){[dir=ltr] .ms-xxlPush9{left:75%}[dir=rtl] .ms-xxlPush9{right:75%}}@media (min-width: 1366px){[dir=ltr] .ms-xxlPush8{left:66.66667%}[dir=rtl] .ms-xxlPush8{right:66.66667%}}@media (min-width: 1366px){[dir=ltr] .ms-xxlPush7{left:58.33333%}[dir=rtl] .ms-xxlPush7{right:58.33333%}}@media (min-width: 1366px){[dir=ltr] .ms-xxlPush6{left:50%}[dir=rtl] .ms-xxlPush6{right:50%}}@media (min-width: 1366px){[dir=ltr] .ms-xxlPush5{left:41.66667%}[dir=rtl] .ms-xxlPush5{right:41.66667%}}@media (min-width: 1366px){[dir=ltr] .ms-xxlPush4{left:33.33333%}[dir=rtl] .ms-xxlPush4{right:33.33333%}}@media (min-width: 1366px){[dir=ltr] .ms-xxlPush3{left:25%}[dir=rtl] .ms-xxlPush3{right:25%}}@media (min-width: 1366px){[dir=ltr] .ms-xxlPush2{left:16.66667%}[dir=rtl] .ms-xxlPush2{right:16.66667%}}@media (min-width: 1366px){[dir=ltr] .ms-xxlPush1{left:8.33333%}[dir=rtl] .ms-xxlPush1{right:8.33333%}}@media (min-width: 1366px){[dir=ltr] .ms-xxlPush0{left:auto}[dir=rtl] .ms-xxlPush0{right:auto}}@media (min-width: 1366px){[dir=ltr] .ms-xxlOffset11{margin-left:91.66667%}[dir=rtl] .ms-xxlOffset11{margin-right:91.66667%}}@media (min-width: 1366px){[dir=ltr] .ms-xxlOffset10{margin-left:83.33333%}[dir=rtl] .ms-xxlOffset10{margin-right:83.33333%}}@media (min-width: 1366px){[dir=ltr] .ms-xxlOffset9{margin-left:75%}[dir=rtl] .ms-xxlOffset9{margin-right:75%}}@media (min-width: 1366px){[dir=ltr] .ms-xxlOffset8{margin-left:66.66667%}[dir=rtl] .ms-xxlOffset8{margin-right:66.66667%}}@media (min-width: 1366px){[dir=ltr] .ms-xxlOffset7{margin-left:58.33333%}[dir=rtl] .ms-xxlOffset7{margin-right:58.33333%}}@media (min-width: 1366px){[dir=ltr] .ms-xxlOffset6{margin-left:50%}[dir=rtl] .ms-xxlOffset6{margin-right:50%}}@media (min-width: 1366px){[dir=ltr] .ms-xxlOffset5{margin-left:41.66667%}[dir=rtl] .ms-xxlOffset5{margin-right:41.66667%}}@media (min-width: 1366px){[dir=ltr] .ms-xxlOffset4{margin-left:33.33333%}[dir=rtl] .ms-xxlOffset4{margin-right:33.33333%}}@media (min-width: 1366px){[dir=ltr] .ms-xxlOffset3{margin-left:25%}[dir=rtl] .ms-xxlOffset3{margin-right:25%}}@media (min-width: 1366px){[dir=ltr] .ms-xxlOffset2{margin-left:16.66667%}[dir=rtl] .ms-xxlOffset2{margin-right:16.66667%}}@media (min-width: 1366px){[dir=ltr] .ms-xxlOffset1{margin-left:8.33333%}[dir=rtl] .ms-xxlOffset1{margin-right:8.33333%}}@media (min-width: 1366px){[dir=ltr] .ms-xxlOffset0{margin-left:0}[dir=rtl] .ms-xxlOffset0{margin-right:0}}@media (min-width: 1920px){.ms-xxxl12{width:100%}}@media (min-width: 1920px){.ms-xxxl11{width:91.66666666666666%}}@media (min-width: 1920px){.ms-xxxl10{width:83.33333333333334%}}@media (min-width: 1920px){.ms-xxxl9{width:75%}}@media (min-width: 1920px){.ms-xxxl8{width:66.66666666666666%}}@media (min-width: 1920px){.ms-xxxl7{width:58.333333333333336%}}@media (min-width: 1920px){.ms-xxxl6{width:50%}}@media (min-width: 1920px){.ms-xxxl5{width:41.66666666666667%}}@media (min-width: 1920px){.ms-xxxl4{width:33.33333333333333%}}@media (min-width: 1920px){.ms-xxxl3{width:25%}}@media (min-width: 1920px){.ms-xxxl2{width:16.666666666666664%}}@media (min-width: 1920px){.ms-xxxl1{width:8.333333333333332%}}@media (min-width: 1920px){[dir=ltr] .ms-xxxlPull12{right:100%}[dir=rtl] .ms-xxxlPull12{left:100%}}@media (min-width: 1920px){[dir=ltr] .ms-xxxlPull11{right:91.66667%}[dir=rtl] .ms-xxxlPull11{left:91.66667%}}@media (min-width: 1920px){[dir=ltr] .ms-xxxlPull10{right:83.33333%}[dir=rtl] .ms-xxxlPull10{left:83.33333%}}@media (min-width: 1920px){[dir=ltr] .ms-xxxlPull9{right:75%}[dir=rtl] .ms-xxxlPull9{left:75%}}@media (min-width: 1920px){[dir=ltr] .ms-xxxlPull8{right:66.66667%}[dir=rtl] .ms-xxxlPull8{left:66.66667%}}@media (min-width: 1920px){[dir=ltr] .ms-xxxlPull7{right:58.33333%}[dir=rtl] .ms-xxxlPull7{left:58.33333%}}@media (min-width: 1920px){[dir=ltr] .ms-xxxlPull6{right:50%}[dir=rtl] .ms-xxxlPull6{left:50%}}@media (min-width: 1920px){[dir=ltr] .ms-xxxlPull5{right:41.66667%}[dir=rtl] .ms-xxxlPull5{left:41.66667%}}@media (min-width: 1920px){[dir=ltr] .ms-xxxlPull4{right:33.33333%}[dir=rtl] .ms-xxxlPull4{left:33.33333%}}@media (min-width: 1920px){[dir=ltr] .ms-xxxlPull3{right:25%}[dir=rtl] .ms-xxxlPull3{left:25%}}@media (min-width: 1920px){[dir=ltr] .ms-xxxlPull2{right:16.66667%}[dir=rtl] .ms-xxxlPull2{left:16.66667%}}@media (min-width: 1920px){[dir=ltr] .ms-xxxlPull1{right:8.33333%}[dir=rtl] .ms-xxxlPull1{left:8.33333%}}@media (min-width: 1920px){[dir=ltr] .ms-xxxlPull0{right:auto}[dir=rtl] .ms-xxxlPull0{left:auto}}@media (min-width: 1920px){[dir=ltr] .ms-xxxlPush12{left:100%}[dir=rtl] .ms-xxxlPush12{right:100%}}@media (min-width: 1920px){[dir=ltr] .ms-xxxlPush11{left:91.66667%}[dir=rtl] .ms-xxxlPush11{right:91.66667%}}@media (min-width: 1920px){[dir=ltr] .ms-xxxlPush10{left:83.33333%}[dir=rtl] .ms-xxxlPush10{right:83.33333%}}@media (min-width: 1920px){[dir=ltr] .ms-xxxlPush9{left:75%}[dir=rtl] .ms-xxxlPush9{right:75%}}@media (min-width: 1920px){[dir=ltr] .ms-xxxlPush8{left:66.66667%}[dir=rtl] .ms-xxxlPush8{right:66.66667%}}@media (min-width: 1920px){[dir=ltr] .ms-xxxlPush7{left:58.33333%}[dir=rtl] .ms-xxxlPush7{right:58.33333%}}@media (min-width: 1920px){[dir=ltr] .ms-xxxlPush6{left:50%}[dir=rtl] .ms-xxxlPush6{right:50%}}@media (min-width: 1920px){[dir=ltr] .ms-xxxlPush5{left:41.66667%}[dir=rtl] .ms-xxxlPush5{right:41.66667%}}@media (min-width: 1920px){[dir=ltr] .ms-xxxlPush4{left:33.33333%}[dir=rtl] .ms-xxxlPush4{right:33.33333%}}@media (min-width: 1920px){[dir=ltr] .ms-xxxlPush3{left:25%}[dir=rtl] .ms-xxxlPush3{right:25%}}@media (min-width: 1920px){[dir=ltr] .ms-xxxlPush2{left:16.66667%}[dir=rtl] .ms-xxxlPush2{right:16.66667%}}@media (min-width: 1920px){[dir=ltr] .ms-xxxlPush1{left:8.33333%}[dir=rtl] .ms-xxxlPush1{right:8.33333%}}@media (min-width: 1920px){[dir=ltr] .ms-xxxlPush0{left:auto}[dir=rtl] .ms-xxxlPush0{right:auto}}@media (min-width: 1920px){[dir=ltr] .ms-xxxlOffset11{margin-left:91.66667%}[dir=rtl] .ms-xxxlOffset11{margin-right:91.66667%}}@media (min-width: 1920px){[dir=ltr] .ms-xxxlOffset10{margin-left:83.33333%}[dir=rtl] .ms-xxxlOffset10{margin-right:83.33333%}}@media (min-width: 1920px){[dir=ltr] .ms-xxxlOffset9{margin-left:75%}[dir=rtl] .ms-xxxlOffset9{margin-right:75%}}@media (min-width: 1920px){[dir=ltr] .ms-xxxlOffset8{margin-left:66.66667%}[dir=rtl] .ms-xxxlOffset8{margin-right:66.66667%}}@media (min-width: 1920px){[dir=ltr] .ms-xxxlOffset7{margin-left:58.33333%}[dir=rtl] .ms-xxxlOffset7{margin-right:58.33333%}}@media (min-width: 1920px){[dir=ltr] .ms-xxxlOffset6{margin-left:50%}[dir=rtl] .ms-xxxlOffset6{margin-right:50%}}@media (min-width: 1920px){[dir=ltr] .ms-xxxlOffset5{margin-left:41.66667%}[dir=rtl] .ms-xxxlOffset5{margin-right:41.66667%}}@media (min-width: 1920px){[dir=ltr] .ms-xxxlOffset4{margin-left:33.33333%}[dir=rtl] .ms-xxxlOffset4{margin-right:33.33333%}}@media (min-width: 1920px){[dir=ltr] .ms-xxxlOffset3{margin-left:25%}[dir=rtl] .ms-xxxlOffset3{margin-right:25%}}@media (min-width: 1920px){[dir=ltr] .ms-xxxlOffset2{margin-left:16.66667%}[dir=rtl] .ms-xxxlOffset2{margin-right:16.66667%}}@media (min-width: 1920px){[dir=ltr] .ms-xxxlOffset1{margin-left:8.33333%}[dir=rtl] .ms-xxxlOffset1{margin-right:8.33333%}}@media (min-width: 1920px){[dir=ltr] .ms-xxxlOffset0{margin-left:0}[dir=rtl] .ms-xxxlOffset0{margin-right:0}}.ms-borderBox,.ms-borderBox:after,.ms-borderBox:before{box-sizing:border-box}.ms-borderBase{border:1px solid}.ms-clearfix{zoom:1}.ms-clearfix:after,.ms-clearfix:before{display:table;content:"";line-height:0}.ms-clearfix:after{clear:both}.ms-normalize{box-sizing:border-box;box-shadow:none;margin:0;padding:0}[dir=ltr] .ms-textAlignLeft{text-align:left}[dir=rtl] .ms-textAlignLeft,[dir=ltr] .ms-textAlignRight{text-align:right}[dir=rtl] .ms-textAlignRight{text-align:left}.ms-textAlignCenter{text-align:center}.ms-screenReaderOnly{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.ms-textTruncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal}.ms-noWrap{white-space:nowrap}.ms-Fabric{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;color:#323130;font-family:"Segoe UI Web (West European)",Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif;font-size:14px}.ms-Fabric button,.ms-Fabric input,.ms-Fabric textarea{font-family:inherit}.ms-Fabric [lang^=ar],.ms-Fabric[lang^=ar],[lang^=ar] .ms-Fabric{font-family:"Segoe UI Web (Arabic)",Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}.ms-Fabric [lang^=bg],.ms-Fabric[lang^=bg],[lang^=bg] .ms-Fabric{font-family:"Segoe UI Web (Cyrillic)",Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}.ms-Fabric [lang^=cs],.ms-Fabric[lang^=cs],[lang^=cs] .ms-Fabric{font-family:"Segoe UI Web (East European)",Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}.ms-Fabric [lang^=el],.ms-Fabric[lang^=el],[lang^=el] .ms-Fabric{font-family:"Segoe UI Web (Greek)",Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}.ms-Fabric [lang^=et],.ms-Fabric[lang^=et],[lang^=et] .ms-Fabric{font-family:"Segoe UI Web (East European)",Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}.ms-Fabric [lang^=he],.ms-Fabric[lang^=he],[lang^=he] .ms-Fabric{font-family:"Segoe UI Web (Hebrew)",Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}.ms-Fabric [lang^=hi],.ms-Fabric[lang^=hi],[lang^=hi] .ms-Fabric{font-family:Nirmala UI,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}.ms-Fabric [lang^=hr],.ms-Fabric[lang^=hr],[lang^=hr] .ms-Fabric,.ms-Fabric [lang^=hu],.ms-Fabric[lang^=hu],[lang^=hu] .ms-Fabric{font-family:"Segoe UI Web (East European)",Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}.ms-Fabric [lang^=ja],.ms-Fabric[lang^=ja],[lang^=ja] .ms-Fabric{font-family:Yu Gothic UI,Meiryo UI,Meiryo,MS Pgothic,Osaka,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}.ms-Fabric [lang^=kk],.ms-Fabric[lang^=kk],[lang^=kk] .ms-Fabric{font-family:"Segoe UI Web (East European)",Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}.ms-Fabric [lang^=ko],.ms-Fabric[lang^=ko],[lang^=ko] .ms-Fabric{font-family:Malgun Gothic,Gulim,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}.ms-Fabric [lang^=lo],.ms-Fabric[lang^=lo],[lang^=lo] .ms-Fabric{font-family:Leelawadee UI Web,Lao UI,DokChampa,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}.ms-Fabric [lang^=lt],.ms-Fabric[lang^=lt],[lang^=lt] .ms-Fabric,.ms-Fabric [lang^=lv],.ms-Fabric[lang^=lv],[lang^=lv] .ms-Fabric,.ms-Fabric [lang^=pl],.ms-Fabric[lang^=pl],[lang^=pl] .ms-Fabric{font-family:"Segoe UI Web (East European)",Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}.ms-Fabric [lang^=ru],.ms-Fabric[lang^=ru],[lang^=ru] .ms-Fabric{font-family:"Segoe UI Web (Cyrillic)",Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}.ms-Fabric [lang^=sk],.ms-Fabric[lang^=sk],[lang^=sk] .ms-Fabric,.ms-Fabric [lang^=sr-latn],.ms-Fabric[lang^=sr-latn],[lang^=sr-latn] .ms-Fabric{font-family:"Segoe UI Web (East European)",Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}.ms-Fabric [lang^=th],.ms-Fabric[lang^=th],[lang^=th] .ms-Fabric{font-family:Leelawadee UI Web,Kmer UI,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}.ms-Fabric [lang^=tr],.ms-Fabric[lang^=tr],[lang^=tr] .ms-Fabric{font-family:"Segoe UI Web (East European)",Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}.ms-Fabric [lang^=uk],.ms-Fabric[lang^=uk],[lang^=uk] .ms-Fabric{font-family:"Segoe UI Web (Cyrillic)",Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}.ms-Fabric [lang^=vi],.ms-Fabric[lang^=vi],[lang^=vi] .ms-Fabric{font-family:"Segoe UI Web (Vietnamese)",Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}.ms-Fabric [lang^=zh-hans],.ms-Fabric[lang^=zh-hans],[lang^=zh-hans] .ms-Fabric{font-family:Microsoft Yahei UI,Verdana,Simsun,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}.ms-Fabric [lang^=zh-hant],.ms-Fabric[lang^=zh-hant],[lang^=zh-hant] .ms-Fabric{font-family:Microsoft Jhenghei UI,Pmingliu,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}.ms-Fabric--selawik{font-family:Selawik Web,Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif}.move-bottom-to-top-enter-active{animation:moveFromBottom .6s ease both}.move-bottom-to-top-leave-active{animation:moveToTop .6s ease both}@keyframes moveFromBottom{0%{transform:translateY(100%)}}@keyframes moveToTop{to{transform:translateY(-100%)}}.move-top-to-bottom-enter-active{animation:moveFromTop .6s ease both}.move-top-to-bottom-leave-active{animation:moveToBottom .6s ease both}@keyframes moveFromTop{0%{transform:translateY(-100%)}}@keyframes moveToBottom{to{transform:translateY(100%)}}.move-left-to-right-enter-active{animation:moveFromLeft .6s ease both}.move-left-to-right-leave-active{animation:moveToRight .6s ease both}@keyframes moveFromLeft{0%{transform:translate(-100%)}}@keyframes moveToRight{to{transform:translate(100%)}}.move-right-to-left-enter-active{animation:moveFromRight .6s ease both}.move-right-to-left-leave-active{animation:moveToLeft .6s ease both}@keyframes moveFromRight{0%{transform:translate(100%)}}@keyframes moveToLeft{to{transform:translate(-100%)}}.move-fade-right-to-left-leave-active{animation:moveFadeFromLeft .7s ease both}@keyframes moveFadeFromLeft{to{opacity:.3;transform:translate(-100%)}}.move-fade-bottom-to-top-enter-active{animation:moveFadeFromBottom .7s ease both}.move-fade-bottom-to-top-leave-active{animation:moveFadeToTop .7s ease both}@keyframes moveFadeFromBottom{0%{opacity:.3;transform:translateY(100%)}}@keyframes moveFadeToTop{to{opacity:.3;transform:translateY(-100%)}}.move-fade-top-to-bottom-enter-active{animation:moveFadeFromTop .7s ease both}.move-fade-top-to-bottom-leave-active{animation:moveFadeToBottom .7s ease both}@keyframes moveFadeFromTop{0%{opacity:.3;transform:translateY(-100%)}}@keyframes moveFadeToBottom{to{opacity:.3;transform:translateY(100%)}}.move-fade-left-to-right-enter-active{animation:moveFadeFromLeft .7s ease both}.move-fade-left-to-right-leave-active{animation:moveFadeToRight .7s ease both}@keyframes moveFadeFromLeft{0%{opacity:.3;transform:translate(-100%)}}@keyframes moveFadeToRight{to{opacity:.3;transform:translate(100%)}}.move-fade-right-to-left-enter-active{animation:moveFadeFromRight .7s ease both}.move-fade-right-to-left-leave-active{animation:moveFadeToLeft .6s ease both}@keyframes moveFadeFromRight{0%{opacity:.3;transform:translate(100%)}}@keyframes moveFadeToLeft{to{opacity:.3;transform:translate(-100%)}}.move-different-right-to-left-leave-active{z-index:999;animation:moveDifferentFromLeft .7s ease-in-out both}@keyframes moveDifferentFromLeft{to{transform:translate(-100%)}}.move-different-bottom-to-top-enter-active{z-index:1;animation:moveDifferentFromBottom .6s ease both}.move-different-bottom-to-top-leave-active{z-index:999;animation:moveDifferentToTop .7s ease-in-out both}@keyframes moveDifferentFromBottom{0%{transform:translateY(100%)}}@keyframes moveDifferentToTop{to{transform:translateY(-100%)}}.move-different-top-to-bottom-enter-active{z-index:1;animation:moveDifferentFromTop .6s ease both}.move-different-top-to-bottom-leave-active{z-index:999;animation:moveDifferentToBottom .7s ease-in-out both}@keyframes moveDifferentFromTop{0%{transform:translateY(-100%)}}@keyframes moveDifferentToBottom{to{transform:translateY(100%)}}.move-different-left-to-right-enter-active{z-index:1;animation:moveDifferentFromLeft .6s ease both}.move-different-left-to-right-leave-active{z-index:999;animation:moveDifferentToRight .7s ease-in-out both}@keyframes moveDifferentFromLeft{0%{transform:translate(-100%)}}@keyframes moveDifferentToRight{to{transform:translate(100%)}}.move-different-right-to-left-enter-active{z-index:1;animation:moveDifferentFromRight .6s ease both}.move-different-right-to-left-leave-active{z-index:999;animation:moveDifferentToLeft .7s ease-in-out both}@keyframes moveDifferentFromRight{0%{transform:translate(100%)}}@keyframes moveDifferentToLeft{to{transform:translate(-100%)}}.scale-down-to-down-enter-active{animation:scaleUpDown .5s ease both;animation-delay:.3s}.scale-down-to-down-leave-active{animation:scaleDown .7s ease both}.scale-up-to-up-enter-active{animation:scaleUp .7s ease both;animation-delay:.3s}.scale-up-to-up-leave-active{animation:scaleDownUp .7s ease both}.scale-down-to-up-enter-active{animation:scaleUpCenter .4s ease-out both;animation-delay:.4s}.scale-down-to-up-leave-active{animation:scaleDownCenter .4s ease-in both}@keyframes scaleUpCenter{0%{opacity:0;transform:scale(.7)}}@keyframes scaleDownCenter{to{opacity:0;transform:scale(.7)}}.rotate-glue-bottom-to-top-enter-active{z-index:999;animation:moveFromBottom .6s ease both;animation-delay:.2s}.rotate-glue-bottom-to-top-leave-active{z-index:1;transform-origin:50% 0%;animation:rotateBottomSideFirst .8s both ease-in}@keyframes rotateBottomSideFirst{40%{transform:rotateX(-15deg);opacity:.8;animation-timing-function:ease-out}to{transform:scale(.8) translateZ(-200px);opacity:0}}.rotate-glue-top-to-bottom-enter-active{z-index:999;animation:moveFromTop .6s ease both;animation-delay:.2s}.rotate-glue-top-to-bottom-leave-active{z-index:1;transform-origin:50% 100%;animation:rotateTopSideFirst .8s both ease-in}@keyframes rotateTopSideFirst{40%{transform:rotateX(15deg);opacity:.8;animation-timing-function:ease-out}to{transform:scale(.8) translateZ(-200px);opacity:0}}.rotate-glue-left-to-right-enter-active{z-index:999;animation:moveFromLeft .6s ease both;animation-delay:.2s}.rotate-glue-left-to-right-leave-active{z-index:1;transform-origin:100% 50%;animation:rotateLeftSideFirst .8s both ease-in}@keyframes rotateLeftSideFirst{40%{transform:rotateY(-15deg);opacity:.8;animation-timing-function:ease-out}to{transform:scale(.8) translateZ(-200px);opacity:0}}.rotate-glue-right-to-left-enter-active{z-index:999;animation:moveFromRight .6s ease both;animation-delay:.2s}.rotate-glue-right-to-left-leave-active{z-index:1;transform-origin:0% 50%;animation:rotateRightSideFirst .8s both ease-in}@keyframes rotateRightSideFirst{40%{transform:rotateY(15deg);opacity:.8;animation-timing-function:ease-out}to{transform:scale(.8) translateZ(-200px);opacity:0}}.rotate-flip-top-enter-active{transform-origin:50% 50%;animation:flipInBottom .5s both ease-out;animation-delay:.5s}.rotate-flip-top-leave-active{transform-origin:50% 50%;animation:flipOutTop .5s both ease-in}@keyframes flipInBottom{0%{transform:translateZ(-1000px) rotateX(-90deg);opacity:.2}}@keyframes flipOutTop{to{transform:translateZ(-1000px) rotateX(90deg);opacity:.2}}.rotate-flip-bottom-enter-active{transform-origin:50% 50%;animation:flipInTop .5s both ease-out;animation-delay:.5s}.rotate-flip-bottom-leave-active{transform-origin:50% 50%;animation:flipOutBottom .5s both ease-in}@keyframes flipInTop{0%{transform:translateZ(-1000px) rotateX(90deg);opacity:.2}}@keyframes flipOutBottom{to{transform:translateZ(-1000px) rotateX(-90deg);opacity:.2}}.rotate-flip-left-enter-active{transform-origin:50% 50%;animation:flipInRight .5s both ease-out;animation-delay:.5s}.rotate-flip-left-leave-active{transform-origin:50% 50%;animation:flipOutLeft .5s both ease-in}@keyframes flipInRight{0%{transform:translateZ(-1000px) rotateY(90deg);opacity:.2}}@keyframes flipOutLeft{to{transform:translateZ(-1000px) rotateY(-90deg);opacity:.2}}.rotate-flip-right-enter-active{transform-origin:50% 50%;animation:flipInLeft .5s both ease-out;animation-delay:.5s}.rotate-flip-right-leave-active{transform-origin:50% 50%;animation:flipOutRight .5s both ease-in}@keyframes flipInLeft{0%{transform:translateZ(-1000px) rotateY(-90deg);opacity:.2}}@keyframes flipOutRight{to{transform:translateZ(-1000px) rotateY(90deg);opacity:.2}}.rotate-fall-enter-active{z-index:1;animation:scaleUp .7s ease both}.rotate-fall-leave-active{z-index:999;transform-origin:0% 0%;animation:rotateFall 1s both ease-in}@keyframes rotateFall{0%{transform:rotate(0)}20%{transform:rotate(10deg);animation-timing-function:ease-out}40%{transform:rotate(17deg)}60%{transform:rotate(16deg)}to{transform:translateY(100%) rotate(17deg)}}.rotate-sides-enter-active{animation:rotateSlideIn 1s both ease}.rotate-sides-leave-active{animation:rotateSlideOut 1s both ease}@keyframes rotateSlideIn{0%,25%{opacity:.5;transform:translateZ(-500px) translate(200%)}75%{opacity:.5;transform:translateZ(-500px)}to{opacity:1;transform:translateZ(0) translate(0)}}@keyframes rotateSlideOut{25%{opacity:.5;transform:translateZ(-500px)}75%{opacity:.5;transform:translateZ(-500px) translate(-200%)}to{opacity:.5;transform:translateZ(-500px) translate(-200%)}}.rotate-push-right-to-left-enter-active{transform-origin:100% 50%;animation:rotatePullRight .5s both ease}.rotate-push-right-to-left-leave-active{transform-origin:0% 50%;animation:rotatePushLeft .8s both ease}@keyframes rotatePullRight{0%{opacity:0;transform:rotateY(-90deg)}}@keyframes rotatePushLeft{to{opacity:0;transform:rotateY(90deg)}}.rotate-push-left-to-right-enter-active{transform-origin:0% 50%;animation:rotatePullLeft .5s both ease}.rotate-push-left-to-right-leave-active{transform-origin:100% 50%;animation:rotatePushRight .8s both ease}@keyframes rotatePullLeft{0%{opacity:0;transform:rotateY(90deg)}}@keyframes rotatePushRight{to{opacity:0;transform:rotateY(-90deg)}}.rotate-push-top-to-bottom-enter-active{transform-origin:50% 0%;animation:rotatePullTop .5s both ease}.rotate-push-top-to-bottom-leave-active{transform-origin:50% 100%;animation:rotatePushBottom .8s both ease}@keyframes rotatePullTop{0%{opacity:0;transform:rotateX(-90deg)}}@keyframes rotatePushBottom{to{opacity:0;transform:rotateX(90deg)}}.rotate-push-bottom-to-top-enter-active{transform-origin:50% 100%;animation:rotatePullBottom .5s both ease}.rotate-push-bottom-to-top-leave-active{transform-origin:50% 0%;animation:rotatePushTop .8s both ease}@keyframes rotatePullBottom{0%{opacity:0;transform:rotateX(90deg)}}@keyframes rotatePushTop{to{opacity:0;transform:rotateX(-90deg)}}.rotate-fold-bottom-to-top-enter-active{animation:moveFromBottomFade .7s ease both}.rotate-fold-bottom-to-top-leave-active{transform-origin:50% 100%;animation:rotateFoldTop .7s both ease}@keyframes moveFromBottomFade{0%{opacity:.3;transform:translateY(100%)}}@keyframes rotateFoldTop{to{opacity:0;transform:translateY(-100%) rotateX(90deg)}}.rotate-fold-top-to-bottom-enter-active{animation:moveFromTopFade .7s ease both}.rotate-fold-top-to-bottom-leave-active{transform-origin:50% 0%;animation:rotateFoldBottom .7s both ease}@keyframes moveFromTopFade{0%{opacity:.3;transform:translateY(-100%)}}@keyframes rotateFoldBottom{to{opacity:0;transform:translateY(100%) rotateX(-90deg)}}.rotate-fold-left-to-right-enter-active{animation:moveFromLeftFade .7s ease both}.rotate-fold-left-to-right-leave-active{transform-origin:0% 50%;animation:rotateFoldRight .7s both ease}@keyframes moveFromLeftFade{0%{opacity:.3;transform:translate(-100%)}}@keyframes rotateFoldRight{to{opacity:0;transform:translate(100%) rotateY(90deg)}}.rotate-fold-right-to-left-enter-active{animation:moveFromRightFade .7s ease both}.rotate-fold-right-to-left-leave-active{transform-origin:100% 50%;animation:rotateFoldLeft .7s both ease}@keyframes moveFromRightFade{0%{opacity:.3;transform:translate(100%)}}@keyframes rotateFoldLeft{to{opacity:0;transform:translate(-100%) rotateY(-90deg)}}.rotate-carousel-top-enter-active{transform-origin:50% 0%;animation:rotateCarouselTopIn .8s both ease}.rotate-carousel-top-leave-active{transform-origin:50% 100%;animation:rotateCarouselTopOut .8s both ease}@keyframes rotateCarouselTopIn{0%{opacity:.3;transform:translateY(200%) scale(.4) rotateX(-65deg)}}@keyframes rotateCarouselTopOut{to{opacity:.3;transform:translateY(-200%) scale(.4) rotateX(65deg)}}.rotate-carousel-bottom-enter-active{transform-origin:50% 100%;animation:rotateCarouselBottomIn .8s both ease}.rotate-carousel-bottom-leave-active{transform-origin:50% 0%;animation:rotateCarouselBottomOut .8s both ease}@keyframes rotateCarouselBottomIn{0%{opacity:.3;transform:translateY(-200%) scale(.4) rotateX(65deg)}}@keyframes rotateCarouselBottomOut{to{opacity:.3;transform:translateY(200%) scale(.4) rotateX(-65deg)}}.rotate-carousel-left-enter-active{transform-origin:0% 50%;animation:rotateCarouselLeftIn .8s both ease}.rotate-carousel-left-leave-active{transform-origin:100% 50%;animation:rotateCarouselLeftOut .8s both ease}@keyframes rotateCarouselLeftIn{0%{opacity:.3;transform:translate(200%) scale(.4) rotateY(65deg)}}@keyframes rotateCarouselLeftOut{to{opacity:.3;transform:translate(-150%) scale(.4) rotateY(-65deg)}}.rotate-carousel-right-enter-active{transform-origin:0% 50%;animation:rotateCarouselRightIn .8s both ease}.rotate-carousel-right-leave-active{transform-origin:100% 50%;animation:rotateCarouselRightOut .8s both ease}@keyframes rotateCarouselRightIn{0%{opacity:.3;transform:translate(-150%) scale(.4) rotateY(65deg)}}@keyframes rotateCarouselRightOut{to{opacity:.3;transform:translate(200%) scale(.4) rotateY(65deg)}}.fv-panel-show-enter-from,.fv-panel-show-leave-to{opacity:0}.fv-panel-show-enter-to{opacity:1}.fv-panel-show-enter-active,.fv-panel-show-leave-active{transition:all .1s;transition-delay:.3s}.fv-tree-item-show-enter-from,.fv-tree-item-show-leave-to{transform:scaleY(.8);opacity:.2}.fv-tree-item-show-enter-active,.fv-tree-item-show-leave-active{transform-origin:0% 0%;transition:all .2s ease-in-out}.fv-AnimatedIcon{position:relative;width:auto;height:auto;margin:0;padding:0;border:transparent solid thin;border-radius:6px;display:flex;justify-content:center;align-items:center}.fv-AnimatedIcon .fv-animated-icon-container{position:relative;width:auto;height:100%;display:flex;justify-content:center;align-items:center}.fv-AnimatedIcon .fv-animated-icon-container.hideContent{width:100%}.fv-AnimatedIcon .fv-animated-content-block{position:relative;width:100%;height:100%;flex:1;box-sizing:border-box;display:flex;justify-content:flex-start;align-items:center}.fv-AnimatedIcon.dark{color:#f5f5f5}.fv-Badge{position:relative;width:auto;height:auto;margin:0;padding:0;vertical-align:middle;display:inline-block}.fv-Badge .fv-badge-container{position:absolute;top:-5px;right:-10px;padding:.1px 6px;background:#f56c6c;border-radius:10px;display:flex;justify-content:center;align-items:center;transition:all .3s ease-out}.fv-Badge .fv-badge-container p.badge-content{height:20px;margin:0;padding:0;font-size:13.8px;color:#f5f5f5;display:flex;justify-content:center;align-items:center;-webkit-user-select:none;-moz-user-select:none;user-select:none}.fv-Badge .fv-badge-container.dot{width:10px;height:10px;margin:0;padding:0;border-radius:50%}.fv-Badge .fv-badge-container.dot p.badge-content{display:none}.fv-Breadcrumb{position:relative;min-width:150px;width:auto;height:30px;padding:2px 5px;border:transparent solid thin;display:flex;align-items:center}.fv-Breadcrumb:hover{border:rgb(200,200,200) solid thin}.fv-Breadcrumb.readOnly:hover{border:transparent solid thin}.fv-Breadcrumb.editor-mode{border:rgb(0,90,158) solid thin;outline:rgba(0,120,212,.6) solid 2px}.fv-Breadcrumb.disabled{filter:grayscale(1);opacity:.6}.fv-Breadcrumb.disabled:hover{border:transparent solid thin}.fv-Breadcrumb.disabled .fv-bc-route-list .fv-bc-route-item .fv-bc-separator-content{cursor:default}.fv-Breadcrumb.disabled .fv-bc-route-list .fv-bc-route-item .fv-bc-separator-content:hover{background:none}.fv-Breadcrumb .fv-bc-route-list{position:relative;width:100%;height:27px;display:flex;align-items:center;overflow-x:overlay;overflow-y:hidden}.fv-Breadcrumb .fv-bc-route-list .fv-bc-route-item{position:relative;width:auto;height:100%;display:flex;align-items:center}.fv-Breadcrumb .fv-bc-route-list .fv-bc-route-item .fv-bc-separator-content{width:auto;height:auto;padding:3px 8px;margin:0;border-radius:8px;color:#696969;box-sizing:border-box;display:flex;justify-content:center;align-items:center;cursor:pointer}.fv-Breadcrumb .fv-bc-route-list .fv-bc-route-item .fv-bc-separator-content:hover{background:#e9e9e9}.fv-Breadcrumb .fv-bc-route-list .fv-bc-route-item .fv-bc-separator-content:active{background:#e5e5e5}.fv-Breadcrumb .fv-bc-route-list .fv-bc-route-item .fv-bc-separator-icon{width:auto;height:auto;padding:0 8px;font-size:12px;color:#696969;box-sizing:border-box;cursor:default}.fv-Breadcrumb .fv-bc-route-list .fv-bc-route-text-box{width:100%;height:100%;flex:1;background:transparent;font-size:16px;border:none;outline:none}.fv-Breadcrumb.dark:hover{border:rgb(54,53,52) solid thin}.fv-Breadcrumb.dark .fv-bc-route-list .fv-bc-route-item .fv-bc-separator-content{color:#d3d3d3}.fv-Breadcrumb.dark .fv-bc-route-list .fv-bc-route-item .fv-bc-separator-content:hover{background:#363534}.fv-Breadcrumb.dark .fv-bc-route-list .fv-bc-route-item .fv-bc-separator-content:active{background:#323130}.fv-Breadcrumb.dark .fv-bc-route-list .fv-bc-route-item .fv-bc-separator-icon{color:#d3d3d3}.fv-Breadcrumb.dark .fv-bc-route-list .fv-bc-route-text-box{color:#f5f5f5}.fv-Button{position:relative;width:80px;height:30px;box-sizing:border-box;display:flex;-webkit-user-select:none;-moz-user-select:none;user-select:none}.fv-Button div.fv-button-main-container{position:relative;width:100%;height:100%;box-sizing:border-box;display:flex;overflow:hidden}.fv-Button div.fv-button-main-container:hover{background:#79777599;transition:all .6s}.fv-Button div.fv-button-main-container.shadow{box-shadow:#0002 0 1px 1px,#0000001c 0 .6px 1.8px}.fv-Button div.fv-button-main-container.disabled{background:transparent;filter:grayscale(1);box-shadow:none;opacity:.6}.fv-Button div.fv-button-main-container .fv-button-reveal-container{position:absolute;left:0;top:0;width:100%;height:100%}.fv-Button div.fv-button-main-container .fv-button-container{width:100%;height:100%;background:#edebe9;border:rgba(0,0,0,.1) solid thin;outline:none;box-sizing:border-box;transition:all .3s}.fv-Button div.fv-button-main-container .fv-button-container span.fv-btn-content-block{width:100%;height:100%;display:flex;justify-content:center;align-items:center}.fv-button.light .button-container{background:var(--fv-light-bgcolor);color:var(--fv-light-color)}.fv-button.light .button-container:hover{background:var(--fv-light-hover-bgcolor);opacity:.9}.fv-button.light .button-container.shadow{box-shadow:#41171722 0 3.2px 7.2px,#0000001c 0 .6px 1.8px}.fv-button.light .button-container.disabled{filter:grayscale(1)}.fv-button.light .button-container.disabled{background:var(--fv-light-disabled-bgcolor);color:var(--fv-light-disabled-color)}.fv-button.light .button-container.disabled:hover{background:var(--fv-light-disabled-bgcolor);opacity:1}.fv-Button.dark div.fv-button-main-container:hover{background:#f3f2f199}.fv-Button.dark div.fv-button-main-container .fv-button-container{background:#605e5c;border:rgba(36,36,36,.2) solid thin}.fv-Button.dark div.fv-button-main-container .fv-button-container span.fv-btn-content-block{color:#f5f5f5}.fv-CalendarDatePicker{position:relative;width:294px;z-index:1}.fv-CalendarDatePicker .calendar-picker-drop-down{position:relative;width:100%;height:36px;padding:2px;border-radius:3px;box-sizing:border-box;display:flex;align-items:center;transition:all .8s;overflow:hidden}.fv-CalendarDatePicker .calendar-picker-drop-down.error{background:#a4262c}.fv-CalendarDatePicker .calendar-picker-drop-down .fv-calendar-date-picker-reveal-container{position:absolute;top:0;left:0;width:100%;height:100%}.fv-CalendarDatePicker .calendar-picker-drop-down .calendar-picker-drop-down-container{position:relative;width:100%;height:100%;box-sizing:border-box;display:flex;align-items:center;box-shadow:#0002 0 3.2px 7.2px,#0000001c 0 .6px 1.8px}.fv-CalendarDatePicker .calendar-picker-drop-down .calendar-picker-drop-down-container .input{position:relative;width:100%;height:100%;padding:0 36px 0 8px;border:none;outline:none;font-size:13.5px;font-weight:400;color:#201f1e;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:default}.fv-CalendarDatePicker .calendar-picker-drop-down .calendar-picker-drop-down-container i.left-icon{position:absolute;width:36px;height:100%;left:0;font-size:13px;box-sizing:border-box;display:flex;justify-content:center;align-items:center;z-index:1}.fv-CalendarDatePicker .calendar-picker-drop-down .calendar-picker-drop-down-container i.right-icon{position:absolute;width:36px;height:100%;right:0;font-size:13px;box-sizing:border-box;display:flex;justify-content:center;align-items:center}.fv-CalendarDatePicker .calendar-container{position:absolute;left:0;border-radius:8px;box-shadow:0 6.4px 14.4px #0002,0 1.2px 3.6px #0000001c;overflow:hidden;backdrop-filter:blur(25px);-webkit-backdrop-filter:blur(25px)}.fv-CalendarDatePicker.disabled:hover .calendar-picker-drop-down{background:transparent}.fv-CalendarDatePicker.disabled .calendar-picker-drop-down .calendar-picker-drop-down-container{background:#f3f2f1;box-shadow:none}.fv-CalendarDatePicker.disabled .calendar-picker-drop-down .calendar-picker-drop-down-container .input{background:#f3f2f1;color:#a19f9d99;cursor:no-drop}.fv-CalendarDatePicker.disabled .calendar-picker-drop-down .calendar-picker-drop-down-container i{color:#32313099}.fv-CalendarDatePicker .fv-calendar-container-enter{margin-top:-3px;opacity:0;transition:all .3s}.fv-CalendarDatePicker .fv-calendar-container-enter-to{margin-top:0;opacity:1;transition:all .3s}.fv-CalendarDatePicker .fv-calendar-container-leave{opacity:1;transition:all .1s}.fv-CalendarDatePicker .fv-calendar-container-leave-to{opacity:0;transition:all .1s}.fv-CalendarDatePicker.dark:hover .calendar-picker-drop-down{background:#e2e2e233}.fv-CalendarDatePicker.dark .calendar-picker-drop-down .calendar-picker-drop-down-container{box-shadow:#a5a5a522 0 3.2px 7.2px,#e0e0e01c 0 .6px 1.8px}.fv-CalendarDatePicker.dark .calendar-picker-drop-down .calendar-picker-drop-down-container .input{background:#242322e6;color:#f5f5f5;-webkit-user-select:none;-moz-user-select:none;user-select:none}.fv-CalendarDatePicker.dark .calendar-picker-drop-down .calendar-picker-drop-down-container .input::-moz-placeholder{color:#b3b3b3}.fv-CalendarDatePicker.dark .calendar-picker-drop-down .calendar-picker-drop-down-container .input::placeholder{color:#b3b3b3}.fv-CalendarDatePicker.dark .calendar-picker-drop-down .calendar-picker-drop-down-container i{color:#f5f5f5}.fv-CalendarView{position:relative;width:294px;height:340px;background:#fff9;border:rgba(120,120,120,.1) solid 2px;font-family:微软雅黑;border-radius:3px;box-sizing:border-box;display:flex;flex-direction:column;overflow:hidden;-webkit-backdrop-filter:blur(25px)}.fv-CalendarView .fv-calendar-control-block{width:100%;height:45px;display:flex;justify-content:space-between;align-items:center;-webkit-backdrop-filter:blur(25px);z-index:1}.fv-CalendarView .fv-calendar-control-block .calendar-switcher{width:100%;height:calc(100% - 10px);max-height:39px;margin:5px;padding-left:8px;border-radius:3px;font-size:13.8px;font-weight:700;color:#323130;display:flex;justify-content:flex-start;align-items:center;transition:all .2s;-moz-user-select:none;user-select:none;-webkit-transition:all .2s;-webkit-user-select:none;cursor:default}.fv-CalendarView .fv-calendar-control-block .calendar-switcher:hover{background:#7878781a}.fv-CalendarView .fv-calendar-control-block .calendar-switcher:active{opacity:.6}.fv-CalendarView .fv-calendar-control-block .calendar-switcher.dark{color:#f5f5f5}.fv-CalendarView .fv-calendar-control-block .slider-bar{width:78px;height:100%;max-height:39px;display:flex;justify-content:space-around;align-items:center}.fv-CalendarView .fv-calendar-control-block .slider-bar .slider-btn{width:39px;height:100%;border-radius:3px;display:flex;justify-content:center;align-items:center;transition:all .3s;-webkit-transition:all .3s;-moz-user-select:none;user-select:none;-webkit-user-select:none;cursor:default}.fv-CalendarView .fv-calendar-control-block .slider-bar .slider-btn:hover{background:#7878781a}.fv-CalendarView .fv-calendar-control-block .slider-bar .slider-btn:active{background:#5f5f5f1a}.fv-CalendarView .fv-calendar-control-block .slider-bar .slider-btn .ms-Icon{font-size:12px;transform:scale(.8)}.fv-CalendarView .fv-calendar-control-block .slider-bar.dark{color:#f5f5f5}.fv-CalendarView .container-block{position:relative;width:100%;height:290px}.fv-CalendarView .container-block .day-block{position:relative;width:100%;height:100%;display:flex;flex-direction:column}.fv-CalendarView .container-block .day-block .weekdays-block{position:relative;width:100%;height:44px;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;user-select:none;display:flex}.fv-CalendarView .container-block .day-block .weekdays-block .weekday{position:relative;width:41px;height:100%;background:transparent;color:#242424;font-size:12px;font-weight:700;border:none;box-sizing:border-box;outline:none}.fv-CalendarView .container-block .picker-container{position:relative;width:100%;height:100%;flex:1;background:#fff;display:flex;flex-wrap:wrap;overflow:overlay;transition:all .3s ease-in-out;overflow:-moz-scrollbars-none;-ms-overflow-style:-ms-autohiding-scrollbar}.fv-CalendarView .container-block .picker-container button.picker-btn{position:relative;width:70.5px;height:70.5px;margin:1px;padding:0;background:#fff;font-size:15px;color:#24242499;border:rgba(120,120,120,0) solid 2px;border-radius:3px;display:flex;justify-content:center;align-items:center;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;user-select:none;outline:none;transition:all .6s;transition-delay:.1s}.fv-CalendarView .container-block .picker-container button.picker-btn.dark{background:#0000004d;color:#f5f5f5}.fv-CalendarView .container-block .picker-container button.picker-btn:hover{border:rgba(120,120,120,.6) solid 2px}.fv-CalendarView .container-block .picker-container button.picker-btn.range{background:#fff;color:#242424}.fv-CalendarView .container-block .picker-container button.picker-btn.current{background:#0078d7cc;color:#f5f5f5}.fv-CalendarView .container-block .picker-container button.picker-btn.current:hover{border:rgba(0,0,0,.35) solid 2px}.fv-CalendarView .container-block .picker-container button.picker-btn.current.choose{border:rgba(255,255,255,.6) solid 2px}.fv-CalendarView .container-block .picker-container button.picker-btn.choose{border:rgb(0,90,158) solid 2px}.fv-CalendarView .container-block .picker-container button.picker-btn.day{width:39.42px;height:39px}.fv-CalendarView .container-block .picker-container::-webkit-scrollbar{display:none}.fv-CalendarView .fv-calendar-scale-up-enter-active{transition:opacity .3s,transform .2s}.fv-CalendarView .fv-calendar-scale-up-enter-from{opacity:0;transform:scale(.6)}.fv-CalendarView .fv-calendar-scale-up-enter-to{transform:scale(1)}.fv-CalendarView .fv-calendar-scale-up-leave-active{transition:opacity .1s,transform .1s}.fv-CalendarView .fv-calendar-scale-up-leave-from{transform:scale(1)}.fv-CalendarView .fv-calendar-scale-up-leave-to{opacity:0;transform:scale(1.6)}.fv-CalendarView .fv-calendar-scale-down-enter-active{transition:opacity .2s,transform .2s}.fv-CalendarView .fv-calendar-scale-down-enter-from{opacity:0;transform:scale(1.6)}.fv-CalendarView .fv-calendar-scale-down-enter-to{transform:scale(1)}.fv-CalendarView .fv-calendar-scale-down-leave-active{transition:opacity .01s,transform .01s}.fv-CalendarView .fv-calendar-scale-down-leave-from{transform:scale(1)}.fv-CalendarView .fv-calendar-scale-down-leave-to{opacity:0;transform:scale(.9)}.fv-CalendarView.dark{background:#000000e6;border:rgba(255,255,255,.1) solid 2px;color:#f5f5f5e6}.fv-CalendarView.dark .fv-calendar-control-block .calendar-switcher{color:#f5f5f5e6}.fv-CalendarView.dark .fv-calendar-control-block .calendar-switcher:hover{background:#7878784d;color:#f5f5f5;opacity:1}.fv-CalendarView.dark .fv-calendar-control-block .slider-bar .slider-btn:hover{background:#7878784d}.fv-CalendarView.dark .fv-calendar-control-block .slider-bar .slider-btn:active{background:#78787833}.fv-CalendarView.dark .container-block .day-block .weekdays-block .weekday{color:#f5f5f5e6}.fv-CalendarView.dark .container-block .picker-container{background:#202020}.fv-CalendarView.dark .container-block .picker-container button.picker-btn{background:#202020;color:#f5f5f599}.fv-CalendarView.dark .container-block .picker-container button.picker-btn:hover{border:rgba(255,255,255,.6) solid 2px}.fv-CalendarView.dark .container-block .picker-container button.picker-btn.range{background:#202020;color:#f5f5f5}.fv-CalendarView.dark .container-block .picker-container button.picker-btn.current{background:#76b9edcc;color:#f5f5f5}.fv-CalendarView.dark .container-block .picker-container button.picker-btn.current:hover{border:rgba(0,0,0,.35) solid 2px}.fv-CalendarView.dark .container-block .picker-container button.picker-btn.current.choose{border:rgba(255,255,255,.6) solid 2px}.fv-CalendarView.dark .container-block .picker-container button.picker-btn.choose{border:rgb(118,185,237) solid 2px}.fv-Callout{position:fixed;z-index:3000;background-color:#f2f2f2;color:#323130;padding:12px;margin:0;border-radius:5px;font-size:13.8px;line-height:1.5;box-sizing:border-box;box-shadow:#0002 0 6.4px 14.4px,#0000001c 0 1.2px 3.6px}.fv-Callout .fv-callout-bg{z-index:-1;position:absolute;top:0;left:0;height:100%;width:100%;background:inherit;border-radius:5px}.fv-Callout .beak{position:absolute;width:10px;height:10px;z-index:-2;left:50%;background:inherit;box-shadow:inherit;transform:translate(-50%,-50%) rotate(45deg)}.fv-Callout .header{position:relative;padding:0;font-size:1.5em;font-weight:700}.fv-Callout .main{position:relative;padding:0;border-radius:3px}.fv-Callout .footer{position:relative;padding:0;font-size:.8em}.fv-Callout.bottomLeft{transform-origin:0% 0%}.fv-Callout.bottomCenter{transform:translate(-50%);transform-origin:50% 0%}.fv-Callout.bottomRight{transform-origin:100% 0%;transform:translate(-100%)}.fv-Callout.topLeft{transform:translateY(-100%);transform-origin:0% 100%}.fv-Callout.topRight{transform:translate(-100%,-100%);transform-origin:100% 100%}.fv-Callout.topCenter{transform:translate(-50%,-100%);transform-origin:50% 100%}.fv-Callout.leftTop{transform:translate(-100%);transform-origin:100% 0%}.fv-Callout.leftBottom{transform:translate(-100%,-100%);transform-origin:100% 100%}.fv-Callout.leftCenter{transform:translate(-100%,-50%);transform-origin:100% 50%}.fv-Callout.rightTop{transform-origin:0% 0%}.fv-Callout.rightBottom{transform:translateY(-100%);transform-origin:0% 100%}.fv-Callout.rightCenter{transform:translateY(-50%);transform-origin:0% 50%}.fv-callout-fade-enter-active{transition:opacity .3s ease-out,transform .3s ease-out}.fv-callout-fade-enter-from{transform:scale(0);opacity:0}.fv-callout-fade-enter-from.bottomCenter{transform:translate(-50%) scale(0)}.fv-callout-fade-enter-from.bottomRight{transform:translate(-100%) scale(0)}.fv-callout-fade-enter-from.topLeft{transform:translateY(-100%) scale(0)}.fv-callout-fade-enter-from.topRight{transform:translate(-100%,-100%) scale(0)}.fv-callout-fade-enter-from.topCenter{transform:translate(-50%,-100%) scale(0)}.fv-callout-fade-enter-from.leftTop{transform:translate(-100%) scale(0)}.fv-callout-fade-enter-from.leftBottom{transform:translate(-100%,-100%) scale(0)}.fv-callout-fade-enter-from.leftCenter{transform:translate(-100%,-50%) scale(0)}.fv-callout-fade-enter-from.rightBottom{transform:translateY(-100%) scale(0)}.fv-callout-fade-enter-from.rightCenter{transform:translateY(-50%) scale(0)}.fv-callout-fade-enter-to{transform:scale(1);opacity:1}.fv-callout-fade-enter-to.bottomCenter{transform:translate(-50%) scale(1)}.fv-callout-fade-enter-to.bottomRight{transform:translate(-100%) scale(1)}.fv-callout-fade-enter-to.topLeft{transform:translateY(-100%) scale(1)}.fv-callout-fade-enter-to.topRight{transform:translate(-100%,-100%) scale(1)}.fv-callout-fade-enter-to.topCenter{transform:translate(-50%,-100%) scale(1)}.fv-callout-fade-enter-to.leftTop{transform:translate(-100%) scale(1)}.fv-callout-fade-enter-to.leftBottom{transform:translate(-100%,-100%) scale(1)}.fv-callout-fade-enter-to.leftCenter{transform:translate(-100%,-50%) scale(1)}.fv-callout-fade-enter-to.rightBottom{transform:translateY(-100%) scale(1)}.fv-callout-fade-enter-to.rightCenter{transform:translateY(-50%) scale(1)}.fv-callout-fade-leave-active{transition:transform .3s ease-out}.fv-callout-fade-leave-from{transform:scale(1)}.fv-callout-fade-leave-from.bottomCenter{transform:translate(-50%) scale(1)}.fv-callout-fade-leave-from.bottomRight{transform:translate(-100%) scale(1)}.fv-callout-fade-leave-from.topLeft{transform:translateY(-100%) scale(1)}.fv-callout-fade-leave-from.topRight{transform:translate(-100%,-100%) scale(1)}.fv-callout-fade-leave-from.topCenter{transform:translate(-50%,-100%) scale(1)}.fv-callout-fade-leave-from.leftTop{transform:translate(-100%) scale(1)}.fv-callout-fade-leave-from.leftBottom{transform:translate(-100%,-100%) scale(1)}.fv-callout-fade-leave-from.leftCenter{transform:translate(-100%,-50%) scale(1)}.fv-callout-fade-leave-from.rightBottom{transform:translateY(-100%) scale(1)}.fv-callout-fade-leave-from.rightCenter{transform:translateY(-50%) scale(1)}.fv-callout-fade-leave-to{transform:scale(0)}.fv-callout-fade-leave-to.bottomCenter{transform:translate(-50%) scale(0)}.fv-callout-fade-leave-to.bottomRight{transform:translate(-100%) scale(0)}.fv-callout-fade-leave-to.topLeft{transform:translateY(-100%) scale(0)}.fv-callout-fade-leave-to.topRight{transform:translate(-100%,-100%) scale(0)}.fv-callout-fade-leave-to.topCenter{transform:translate(-50%,-100%) scale(0)}.fv-callout-fade-leave-to.leftTop{transform:translate(-100%) scale(0)}.fv-callout-fade-leave-to.leftBottom{transform:translate(-100%,-100%) scale(0)}.fv-callout-fade-leave-to.leftCenter{transform:translate(-100%,-50%) scale(0)}.fv-callout-fade-leave-to.rightBottom{transform:translateY(-100%) scale(0)}.fv-callout-fade-leave-to.rightCenter{transform:translateY(-50%) scale(0)}.fv-Callout.dark{background-color:#000;color:#f5f5f5}.fv-Callout.dark .fv-callout-bg{background-color:inherit}.fv-Callout.dark .beak{background-color:inherit;box-shadow:inherit}.fv-CheckBox{width:auto;display:flex;justify-content:flex-start;align-items:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:pointer}.fv-CheckBox.box-side-end{justify-content:flex-end;flex-direction:row-reverse}.fv-CheckBox.box-side-end .text-content-block{margin-right:5px}.fv-CheckBox .fv-checkbox-rec{position:relative;width:20px;height:20px;border-radius:3px;display:flex;justify-content:center;align-items:center;box-sizing:border-box;transition:all .05s;overflow:hidden}.fv-CheckBox .fv-checkbox-rec.disabled{opacity:.3;filter:grayscale(1);cursor:default}.fv-CheckBox .fv-checkbox-rec.check,.fv-CheckBox .fv-checkbox-rec.check:hover{background:#005a9e}.fv-CheckBox .fv-checkbox-rec.check .fv-checkbox-border,.fv-CheckBox .fv-checkbox-rec.check .fv-checkbox-border:hover{border-color:transparent}.fv-CheckBox .fv-checkbox-rec:hover{background:#c8c8c833}.fv-CheckBox .fv-checkbox-rec:hover .fv-checkbox-border{opacity:.6}.fv-CheckBox .fv-checkbox-rec:active{background:#c8c8c84d}.fv-CheckBox .fv-checkbox-rec:active .fv-checkbox-border{opacity:.3}.fv-CheckBox .fv-checkbox-rec .fv-checkbox-border{width:100%;height:100%;margin:0;padding:0;border:solid 1px;border-color:#333;border-radius:3px;box-sizing:border-box;overflow:hidden;opacity:.75;-webkit-font-smoothing:antialiased}.fv-CheckBox .fv-checkbox-rec .fv-checkbox-content-block{position:absolute;left:0;top:0;width:100%;height:100%;margin:0;padding:0;font-size:13px;font-weight:700;border-radius:3px;color:#fff;-webkit-user-select:none;-moz-user-select:none;user-select:none;overflow:hidden;cursor:pointer}.fv-CheckBox .fv-checkbox-rec .fv-checkbox-content-block .fv-checkbox-content{position:absolute;width:20px;height:20px;left:0;top:0;margin:0;padding:0;font-size:13px;font-weight:700;border-radius:3px;color:#fff;display:flex;justify-content:center;align-items:center;-webkit-user-select:none;-moz-user-select:none;user-select:none}.fv-CheckBox .fv-checkbox-rec .font-clip-in-enter-active{transition:all .5s}.fv-CheckBox .fv-checkbox-rec .font-clip-in-enter-from{width:0px}.fv-CheckBox .fv-checkbox-rec .font-clip-in-enter-to{width:100%}.fv-CheckBox .fv-checkbox-rec .font-clip-in-leave-active{transition:all 0s}.fv-CheckBox .fv-checkbox-rec .font-clip-in-leave-from{width:100%}.fv-CheckBox .fv-checkbox-rec .font-clip-in-leave-to{width:0px}.fv-CheckBox .ms-Icon--CheckMark:before{width:100%;height:100%;display:flex;justify-content:center;align-items:center}.fv-CheckBox .text-content-block{margin-left:5px;font-size:15px;-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:default}.fv-checkbox.light .label .icon{--fv-checkbox-bgcolor: initial;border-color:var(--fv-light-border-color);color:var(--fv-dark-color)}.fv-checkbox.light .label .icon:hover{background-color:var(--fv-checkbox-bgcolor, var(--fv-light-bgcolor))}.fv-checkbox.light.active .label .icon{border-color:rgb(var(--fv-primary-bgcolor));background-color:rgb(var(--fv-primary-bgcolor));color:var(--fv-dark-color)}.fv-checkbox.light.disabled .label{cursor:default}.fv-checkbox.light.disabled .label .icon{background-color:var(--fv-light-bgcolor);border-color:var(--fv-light-bgcolor)}.fv-CheckBox.dark .fv-checkbox-rec:hover{background:#c8c8c833}.fv-CheckBox.dark .fv-checkbox-rec:hover .fv-checkbox-border{opacity:.6}.fv-CheckBox.dark .fv-checkbox-rec:active{background:#c8c8c81a}.fv-CheckBox.dark .fv-checkbox-rec:active .fv-checkbox-border{opacity:.3}.fv-CheckBox.dark .fv-checkbox-rec.check .fv-checkbox-border{border-color:transparent}.fv-CheckBox.dark .fv-checkbox-rec.check .fv-checkbox-border:hover{opacity:1}.fv-CheckBox.dark .fv-checkbox-rec .fv-checkbox-border{border-color:#cccccc80}.fv-CheckBox.dark .fv-checkbox-rec .fv-checkbox-content-block,.fv-CheckBox.dark .fv-checkbox-rec .fv-checkbox-content-block .fv-checkbox-content{color:#242424}.fv-CheckBox.dark .text-content-block{color:#f5f5f5}.fv-Collapse{position:relative;background:#fbfbfd;border:1px solid #e3e5e8;border-radius:6px;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-sizing:border-box;display:flex;flex-direction:column;justify-content:flex-start;transition:all .3s;overflow:hidden;cursor:default}.fv-Collapse.visibleOverflow,.fv-Collapse.visibleOverflow .collapse-description-container,.fv-Collapse.visibleOverflow .collapse-description-container .collapse-description-box{overflow:visible}.fv-Collapse .collapse-description-container{position:relative;width:100%;flex-shrink:0;padding:5px 10px;box-sizing:border-box;display:flex;justify-content:space-between;align-items:center;overflow:hidden}.fv-Collapse .collapse-description-container .collapse-icon-box{position:relative;width:auto;height:100%;flex-shrink:0;font-size:1.2rem;display:flex;align-items:center;justify-content:center;overflow:hidden;-webkit-font-smoothing:antialiased}.fv-Collapse .collapse-description-container .collapse-icon-box .collapse-icon-box-default{position:relative;width:40px;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden}.fv-Collapse .collapse-description-container .collapse-icon-box .collapse-icon-item{width:25px;height:25px}.fv-Collapse .collapse-description-container .collapse-description-box{position:relative;width:50%;height:100%;flex:1;padding-left:10px;display:flex;overflow:hidden}.fv-Collapse .collapse-description-container .collapse-description-box .collapse-description{position:relative;width:100%;height:100%;flex:1;line-height:1.6rem;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;overflow:hidden}.fv-Collapse .collapse-description-container .collapse-description-box .collapse-description .collapse-text{position:relative;width:100%;line-height:inherit;overflow:hidden}.fv-Collapse .collapse-description-container .collapse-description-box .collapse-description .collapse-text .collapse-title,.fv-Collapse .collapse-description-container .collapse-description-box .collapse-description .collapse-text .collapse-info{line-height:inherit}.fv-Collapse .collapse-description-container .collapse-description-box .collapse-description .collapse-text .collapse-title{font-size:.9rem}.fv-Collapse .collapse-description-container .collapse-description-box .collapse-description .collapse-text .collapse-info{color:#6a6a6b;font-size:.7rem}.fv-Collapse .collapse-description-container .collapse-description-box .collapse-description-extension-block{position:relative;width:auto;height:100%;padding:5px;box-sizing:border-box;display:flex;justify-content:center;align-items:center;overflow:visible}.fv-Collapse .collapse-description-container .collapse-expand-icon-block{position:relative;width:32px;height:100%;flex-shrink:0;display:flex;justify-content:center;align-items:center;font-size:1rem}.fv-Collapse .collapse-description-container .collapse-expand-icon-block i{cursor:pointer}.fv-Collapse .collapse-detail{position:relative;flex:1;flex-shrink:0;padding:15px 10px;box-sizing:border-box;overflow:auto}.fv-Collapse:hover{background:#f5f6f8}.fv-Collapse .collapse-expanded-enter-active{transform-origin:50% 0%;animation:rotatePullTop .5s both ease}.fv-Collapse .collapse-expanded-leave-active{transform-origin:50% 0%;animation:rotatePushBottom .5s both ease}.fv-Collapse.dark{background:#2d2d2d;border-color:#373738;color:#f5f5f5}.fv-Collapse.dark .collapse-description-container .collapse-description-box .collapse-description .collapse-text .collapse-info{color:#9c9c9c}.fv-Collapse.dark:hover{background:#323232}.fv-color-picker{width:312px;--fv-color-picker--color-value-empty: rgb(255,255,255);--fv-color-picker--color-list: red, rgb(255, 153, 0), rgb(205, 255, 0), rgb(53, 255, 0), rgb(0, 255, 102), rgb(0, 255, 253), rgb(0, 102, 255), rgb(50, 0, 255), rgb(205, 0, 255), rgb(255, 0, 153), red;--fv-color-picker--color: initial;--fv-color-picker--color-alpha: initial;--fv-color-picker--color-value: initial;--fv-color-picker--pointer-top: 0px;--fv-color-picker--pointer-left: 0px;--fv-color-picker--color-value-left: 0px;--fv-color-picker--color-alpha-left: 0px}.fv-color-picker .color-picker{display:flex}.fv-color-picker .color-picker .color-area{cursor:pointer;position:relative;min-width:256px;max-width:256px;height:256px;width:256px;margin-right:15px;border-radius:4px}.fv-color-picker .color-picker .color-area .bg{height:100%;width:100%;top:0;left:0;position:absolute}.fv-color-picker .color-picker .color-area.ring{border-radius:50%}.fv-color-picker .color-picker .color-area.ring .bg{border-radius:50%;transform:rotate(90deg);background:conic-gradient(var(--fv-color-picker--color-list))}.fv-color-picker .color-picker .color-area.ring .white-mask{position:absolute;height:100%;width:100%;border-radius:50%;background:radial-gradient(var(--fv-color-picker--color-value-empty),transparent)}.fv-color-picker .color-picker .color-area.box .bg{border-radius:inherit;background:linear-gradient(to right,var(--fv-color-picker--color-list))}.fv-color-picker .color-picker .color-area.box .white-mask{top:0;left:0;position:absolute;height:100%;width:100%;border-radius:inherit;background:linear-gradient(transparent,var(--fv-color-picker--color-value-empty))}.fv-color-picker .color-picker .color-area .pointer{left:-8px;top:-8px;border-radius:50%;position:absolute;height:16px;width:16px;border-style:solid;border-width:2px;border-color:#000;pointer-events:none;transform:translate(var(--fv-color-picker--pointer-left),var(--fv-color-picker--pointer-top));transform-origin:0px 0px}.fv-color-picker .color-picker .color{position:relative;width:42px;height:256px;border-radius:4px;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAJUlEQVQYV2N89erVfwY0ICYmxoguxjgUFKI7GsTH5m4M3w1ChQC1/Ca8i2n1WgAAAABJRU5ErkJggg==)}.fv-color-picker .color-picker .color .color-bg{position:absolute;height:100%;width:100%;top:0;left:0;border-radius:4px;background:var(--fv-color-picker--color)}.fv-color-picker .control.vertical{margin-top:20px}.fv-color-picker .control.vertical .color-value{cursor:pointer;position:relative;border-radius:6px;margin:30px 0 20px;height:12px;width:100%}.fv-color-picker .control.vertical .color-value .color-value-mask{border-radius:inherit;position:absolute;top:0;left:0;height:100%;width:100%;background:linear-gradient(to right,#000,transparent)}.fv-color-picker .control.vertical .color-value .color-value-bg{border-radius:inherit;position:absolute;top:0;left:0;height:100%;width:100%;background-color:var(--fv-color-picker--color-value)}.fv-color-picker .control.vertical .color-value .color-value-btn{position:absolute;top:-2px;left:-8px;height:16px;width:16px;border-radius:50%;border-style:solid;border-width:3px;border-color:#fff;background:#000;box-shadow:#000 0 0 2px;transform-origin:0px 0px;transform:translate(var(--fv-color-picker--color-value-left))}.fv-color-picker .control.vertical .color-alpha{cursor:pointer;position:relative;border-radius:6px;margin:25px 0 30px;height:12px;width:100%}.fv-color-picker .control.vertical .color-alpha .color-alpha-mask{border-radius:inherit;position:absolute;top:0;left:0;height:100%;width:100%;background:linear-gradient(to left,var(--fv-color-picker--color-alpha),transparent)}.fv-color-picker .control.vertical .color-alpha .color-alpha-bg{border-radius:inherit;position:absolute;top:0;left:0;height:100%;width:100%;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAJUlEQVQYV2N89erVfwY0ICYmxoguxjgUFKI7GsTH5m4M3w1ChQC1/Ca8i2n1WgAAAABJRU5ErkJggg==)}.fv-color-picker .control.vertical .color-alpha .color-alpha-btn{position:absolute;top:-2px;left:-8px;height:16px;width:16px;border-radius:50%;border-style:solid;border-width:3px;border-color:#fff;background:#000;box-shadow:#000 0 0 2px;transform-origin:0px 0px;transform:translate(var(--fv-color-picker--color-alpha-left))}.fv-color-picker .control.vertical .fields{margin-top:10px}.fv-color-picker .control.vertical .fields .row{display:flex;margin:10px 0}.fv-color-picker .control.vertical .fields .row .cell{min-width:180px}.fv-color-picker .control.vertical .fields .row .cell .fv-color-picker-text{margin:5px 0;font-size:12px;font-weight:700}.fv-combo-box{--fv-combo-box-height: initial;--fv-combo-box-top: initial;--fv-combo-box-bottom: initial;--fv-combo-box-effect-position: center;position:relative;width:200px}.fv-combo-box .fv-combo-box--select-input{width:inherit}.fv-combo-box .fv-combo-box--options{position:absolute;display:flex;align-items:var(--fv-combo-box-effect-position);width:100%;top:var(--fv-combo-box-top);bottom:var(--fv-combo-box-bottom);left:0;z-index:1000;box-sizing:border-box}.fv-combo-box .fv-combo-box--options .fv-combo-box--bg{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-sizing:border-box;overflow:hidden;border-width:1px;border-style:solid;width:100%;border-radius:6px;display:flex;align-items:var(--fv-combo-box-effect-position)}.fv-combo-box .fv-combo-box--options .fv-combo-box--bg.fv-combo-box--bg-down{border-top-left-radius:0;border-top-right-radius:0}.fv-combo-box .fv-combo-box--options .fv-combo-box--bg.fv-combo-box--bg-up{border-bottom-left-radius:0;border-bottom-right-radius:0}.fv-combo-box .fv-combo-box--options .fv-combo-box--options-wrapper{padding:5px 0;width:100%}.fv-combo-box .fv-combo-box--options.fv-combo-box--fade-in-leave-to{height:var(--fv-combo-box-height)}.fv-combo-box .fv-combo-box--options.fv-combo-box--fade-in-leave-to .fv-combo-box--bg{border:none;opacity:.8}.fv-combo-box .fv-combo-box--options.fv-combo-box--fade-in-leave-to .fv-combo-box--bg.fv-combo-box--bg-down,.fv-combo-box .fv-combo-box--options.fv-combo-box--fade-in-leave-to .fv-combo-box--bg.fv-combo-box--bg-up{height:0px}.fv-combo-box .fv-combo-box--options.fv-combo-box--fade-in-enter-from{height:var(--fv-combo-box-height)}.fv-combo-box .fv-combo-box--options.fv-combo-box--fade-in-enter-from .fv-combo-box--bg{height:max(var(--fv-combo-box-height) - 39px,39px)}.fv-combo-box .fv-combo-box--options.fv-combo-box--fade-in-leave-active{height:var(--fv-combo-box-height)}.fv-combo-box .fv-combo-box--options.fv-combo-box--fade-in-leave-active.fv-combo-box--editable{transition:all .3s ease-in}.fv-combo-box .fv-combo-box--options.fv-combo-box--fade-in-leave-active .fv-combo-box--bg{transition:inherit}.fv-combo-box .fv-combo-box--options.fv-combo-box--fade-in-enter-active{height:var(--fv-combo-box-height);transition:all .3s cubic-bezier(.56,1.09,1,1.28)}.fv-combo-box .fv-combo-box--options.fv-combo-box--fade-in-enter-active .fv-combo-box--bg{transition:inherit}.fv-combo-box .fv-combo-box--options.fv-combo-box--fade-in-enter-to,.fv-combo-box .fv-combo-box--options.fv-combo-box--fade-in-leave-from,.fv-combo-box .fv-combo-box--options.fv-combo-box--fade-in-enter-to .fv-combo-box--bg,.fv-combo-box .fv-combo-box--options.fv-combo-box--fade-in-leave-from .fv-combo-box--bg{height:var(--fv-combo-box-height)}.fv-combo-box .fv-combo-box--options .fv-combo-box--option{padding:2.5px 5px;cursor:pointer}.fv-combo-box .fv-combo-box--options .fv-combo-box--option .fv-combo-box--option-text{-webkit-user-select:none;-moz-user-select:none;user-select:none;position:relative;padding:5px 15px;border-radius:4px;font-size:14px;height:34px;white-space:nowrap}.fv-combo-box .fv-combo-box--options .fv-combo-box--option .fv-combo-box--option-text.active:before{content:"";position:absolute;height:16px;width:3px;border-radius:1.5px;top:50%;transform:translateY(-50%);left:0}.fv-combo-box.light .fv-combo-box--options .fv-combo-box--bg{box-shadow:#41171722 0 3.2px 7.2px,#0000001c 0 .6px 1.8px;border-color:var(--fv-light-border-color-2);background-color:#fafbfbcc}.fv-combo-box.light .fv-combo-box--options .fv-combo-box--bg.fv-combo-box--bg-down{border-top:solid 2px rgb(var(--fv-primary-color))}.fv-combo-box.light .fv-combo-box--options .fv-combo-box--option .fv-combo-box--option-text:hover,.fv-combo-box.light .fv-combo-box--options .fv-combo-box--option .fv-combo-box--option-text.active{background-color:#f0f0f0e6}.fv-combo-box.light .fv-combo-box--options .fv-combo-box--option .fv-combo-box--option-text.active:before{background:rgb(var(--fv-primary-color))}.fv-combo-box.dark .fv-combo-box--options .fv-combo-box--bg{box-shadow:#41171722 0 3.2px 7.2px,#0000001c 0 .6px 1.8px;border-color:transparent;background-color:#323738cc}.fv-combo-box.dark .fv-combo-box--options .fv-combo-box--bg.fv-combo-box--bg-down{border-top:solid 2px rgb(var(--fv-primary-color))}.fv-combo-box.dark .fv-combo-box--options .fv-combo-box--option .fv-combo-box--option-text:hover,.fv-combo-box.dark .fv-combo-box--options .fv-combo-box--option .fv-combo-box--option-text.active{background-color:#3b3b3be6}.fv-combo-box.dark .fv-combo-box--options .fv-combo-box--option .fv-combo-box--option-text.active:before{background:rgb(var(--fv-primary-color))}.fv-Combobox{position:relative;width:300px;height:35px;font-family:微软雅黑,Segoe MDL2;font-size:15px;color:#242424cc;border-radius:3px;box-sizing:border-box;display:flex;justify-content:flex-start;align-items:center;cursor:pointer;transition:all .3s;overflow-y:visible;-moz-user-select:none;user-select:none;-webkit-user-select:none}.fv-Combobox .combobox-container{position:relative;width:100%;height:100%;background:#fff;box-sizing:border-box;display:flex;align-items:center;box-shadow:#0002 0 1px 1px,#0000001c 0 .6px 1.8px}.fv-Combobox .combobox-container .fv-combobox-reveal-container{position:absolute;top:0;left:0;width:100%;height:100%}.fv-Combobox .combobox-container .input{position:relative;width:100%;height:100%;background:transparent;padding:0 36px 0 8px;border:none;outline:none;font-size:13.5px;font-weight:400;color:#201f1e;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:default}.fv-Combobox .combobox-container i.left-icon{position:absolute;width:36px;height:100%;left:0;font-size:13px;box-sizing:border-box;display:flex;justify-content:center;align-items:center;z-index:1}.fv-Combobox .combobox-container i.right-icon{position:absolute;width:36px;height:100%;right:0;font-size:13px;box-sizing:border-box;display:flex;justify-content:center;align-items:center}.fv-Combobox p.drop-down{padding:5px;font-family:Segoe MDL2;font-size:12px;color:#24242480}.fv-Combobox:hover{border-color:#24242499}.fv-Combobox:active{background:#2424241a;border-color:#2424244d}.fv-Combobox .combobox-item-container{position:absolute;left:0;top:0;width:100%;min-height:100%;height:auto;max-height:300px;padding:8px;background:#efefeff2;border-radius:5px;box-sizing:border-box;display:flex;flex-direction:column;box-shadow:0 6.4px 14.4px #0002,0 1.2px 3.6px #0000001c;overflow:overlay;overflow-x:hidden;overflow-y:overlay;backdrop-filter:blur(25px);-webkit-backdrop-filter:blur(25px);-ms-overflow-style:-ms-autohiding-scrollbar;z-index:125}.fv-Combobox .combobox-item-container::-webkit-scrollbar{width:10px;height:8px}.fv-Combobox .combobox-item-container::-webkit-scrollbar:hover{width:16px}.fv-Combobox .combobox-item-container::-webkit-scrollbar-track{border-radius:10px}.fv-Combobox .combobox-item-container::-webkit-scrollbar-thumb{border-right:rgba(191,190,189,.2) solid 5px;background-color:#bfbebd00;-webkit-transition:background-color .3s;transition:background-color .3s;cursor:pointer}.fv-Combobox .combobox-item-container::-webkit-scrollbar-thumb:hover{border-radius:10px;border-color:transparent;background-color:#bfbebd99}.fv-Combobox .combobox-item-container::-webkit-scrollbar-thumb:active{background-color:#bfbebd80}.fv-Combobox .combobox-item-container::-webkit-scrollbar-thumb:horizontal{border-right:none;border-bottom:rgba(191,190,189,.2) solid 5px}.fv-Combobox .combobox-item-container .fv-combobox-item{position:relative;width:100%;min-height:40px;height:40px;flex-shrink:0;padding:0 15px;font-size:13.8px;font-weight:400;color:#201f1e;border-radius:3px;text-overflow:ellipsis;white-space:nowrap;box-sizing:border-box;justify-content:flex-start;display:flex;align-items:center;overflow:hidden;float:left;transition:all .2s;-webkit-transition:all .2s;cursor:pointer}.fv-Combobox .combobox-item-container .fv-combobox-item.normal{cursor:pointer}.fv-Combobox .combobox-item-container .fv-combobox-item.normal:hover{background-color:#7878781a}.fv-Combobox .combobox-item-container .fv-combobox-item.title{font-size:12px;font-weight:600;color:#00629e}.fv-Combobox .combobox-item-container .fv-combobox-item.disabled{cursor:default;color:#5f5f5f99}.fv-Combobox .combobox-item-container .fv-combobox-item.disabled:hover{background-color:transparent}.fv-Combobox .combobox-item-container .fv-combobox-item.choose{background:#7878781a}.fv-Combobox .combobox-item-container .fv-combobox-item.choose:hover{background:#7878780d}.fv-Combobox .combobox-item-container .fv-combobox-item.choose:active{background:#7878781a}.fv-Combobox .combobox-item-container .fv-combobox-item.choose .before-choosen{opacity:1}.fv-Combobox .combobox-item-container .fv-combobox-item.hr{min-height:1px;height:1px;border-bottom:rgba(36,36,36,.1) solid thin}.fv-Combobox .combobox-item-container .fv-combobox-item:active .before-choosen{top:30%;height:40%}.fv-Combobox .combobox-item-container .fv-combobox-item .before-choosen{position:absolute;top:20%;left:0;width:3px;height:60%;background:#00629e;border-radius:6px;transition:all .1s;opacity:0}.fv-Combobox.disabled{-webkit-user-select:none;-moz-user-select:none;user-select:none}.fv-Combobox.disabled:hover .combobox-container{background:transparent}.fv-Combobox.disabled .combobox-container{background:#f3f2f1;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-shadow:none}.fv-Combobox.disabled .combobox-container .input{background:#f3f2f1;color:#a19f9d99;-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:no-drop}.fv-Combobox.disabled .combobox-container i{color:#32313099}.fv-Combobox .fv-combobox-enter-active{transition:all .3s}.fv-Combobox .fv-combobox-enter-from{transform:scale(.98);opacity:0}.fv-Combobox .fv-combobox-enter-to{transform:scale(1);opacity:1}.fv-Combobox.dark .combobox-container{color:#f5f5f5;background:#242424}.fv-Combobox.dark .combobox-container .input{color:#f5f5f5}.fv-Combobox.dark:hover{border-color:#fafafa99}.fv-Combobox.dark:active{background:#fafafa1a;border-color:#fafafa4d}.fv-Combobox.dark .combobox-item-container{background:#242424e6}.fv-Combobox.dark .combobox-item-container .fv-combobox-item{color:#f5f5f5}.fv-Combobox.dark .combobox-item-container .fv-combobox-item.title{color:#76b9ed}.fv-Combobox.dark .combobox-item-container .fv-combobox-item .before-choosen{background:#76b9ed}.fv-Combobox.dark.disabled .combobox-container{background:#242424cc}.fv-Combobox.dark.disabled .combobox-container .input{background:#24242400}.fv-Combobox.dark.disabled .combobox-container:hover{background:#242424cc}.fv-Combobox.dark.disabled .combobox-container:hover .input{background:#24242400}.fv-CommandBar{position:relative;width:100%;height:40px;background:#efefef99;box-sizing:border-box;display:flex;justify-content:space-between;align-items:center;-webkit-user-select:none;-moz-user-select:none;user-select:none}.fv-CommandBar .left-command-bar-container{position:relative;width:100%;height:100%;flex:1;padding:2px;box-sizing:border-box;display:flex;overflow:overlay;overflow-y:hidden;overflow-x:overlay}.fv-CommandBar .left-command-bar-container .command-bar-item{position:relative;width:auto;height:100%;margin:0 1px;flex-shrink:0;padding:0 12px;border:transparent solid thin;border-radius:6px;box-sizing:border-box;display:flex;justify-content:center;align-items:center;overflow:visible}.fv-CommandBar .left-command-bar-container .command-bar-item .fv-command-bar-reveal-container{position:absolute;left:0;top:0;width:100%;height:100%}.fv-CommandBar .left-command-bar-container .command-bar-item i.icon{position:relative;width:20px;height:100%;color:#000;display:flex;justify-content:center;align-items:center}.fv-CommandBar .left-command-bar-container .command-bar-item p.name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;position:relative;width:100%;height:100%;flex:1;margin:0;padding:0 12px;font-weight:400;color:#000;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-sizing:border-box;display:flex;justify-content:flex-start;align-items:center}.fv-CommandBar .left-command-bar-container .command-bar-item .s1-container{font-size:12px;display:flex;justify-content:center;align-items:center}.fv-CommandBar .left-command-bar-container .command-bar-item.disabled{filter:grayscale(1)}.fv-CommandBar .left-command-bar-container .command-bar-item.disabled i.icon,.fv-CommandBar .left-command-bar-container .command-bar-item.disabled p.name{opacity:.6}.fv-CommandBar .left-command-bar-container .command-bar-item.disabled:hover{background:transparent}.fv-CommandBar .left-command-bar-container .command-bar-item:hover{background:#9e9e9e4d}.fv-CommandBar .left-command-bar-container .command-bar-item.hr{width:1px;padding:0 1px;border-right:rgba(36,36,36,.1) solid thin}.fv-CommandBar .left-command-bar-container .command-bar-item.hr:hover{background:transparent}.fv-CommandBar .right-command-bar-container{position:relative;width:auto;height:100%;box-sizing:border-box;display:flex}.fv-CommandBar .command-bar-list-view-container{position:absolute;left:0;top:100%;width:200px;height:auto;padding:3px 0;background:#efefefe6;border:rgba(0,0,0,.1) solid thin;border-radius:5px;transition:all .3s;box-sizing:border-box;box-shadow:0 6.4px 14.4px #0002,0 1.2px 3.6px #0000001c;backdrop-filter:blur(100px);-webkit-backdrop-filter:blur(100px);display:flex}.fv-CommandBar .command-bar-list-view-container.toward-up{top:auto;bottom:100%}.fv-CommandBar .command-bar-list-view-container i.icon{position:relative;width:20px;height:100%;color:#000;display:flex;justify-content:center;align-items:center}.fv-CommandBar .command-bar-list-view-container p.name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;position:relative;width:100%;height:100%;flex:1;margin:0;padding:0 12px;font-weight:400;color:#000;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-sizing:border-box;display:flex;justify-content:flex-start;align-items:center}.fv-CommandBar .zoom-in-top-enter-active,.fv-CommandBar .zoom-in-top-leave-active{opacity:1;transform:scaleY(1);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1);transform-origin:center top}.fv-CommandBar .zoom-in-top-enter-from,.fv-CommandBar .zoom-in-top-leave-active{opacity:0;transform:scaleY(0)}.fv-CommandBar .zoom-in-bottom-enter-active,.fv-CommandBar .zoom-in-bottom-leave-active{opacity:1;transform:scaleY(1);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1);transform-origin:center bottom}.fv-CommandBar .zoom-in-bottom-enter-from,.fv-CommandBar .zoom-in-bottom-leave-active{opacity:0;transform:scaleY(0)}.fv-CommandBar.dark{background:#0009}.fv-CommandBar.dark .left-command-bar-container .command-bar-item i.icon,.fv-CommandBar.dark .left-command-bar-container .command-bar-item p.name{color:#f5f5f5}.fv-CommandBar.dark .left-command-bar-container .command-bar-item:hover{background:#2524234d}.fv-CommandBar.dark .left-command-bar-container .command-bar-item.hr{border-right:rgba(200,200,200,.3) solid thin}.fv-CommandBar.dark .command-bar-list-view-container{background:#000c;border:rgba(120,120,120,.1) solid thin}.fv-CommandBar.dark .command-bar-list-view-container i.icon,.fv-CommandBar.dark .command-bar-list-view-container p.name{color:#f5f5f5}.fv-DatePicker{position:relative;display:inline-block;width:300px;height:30px;padding:0;margin:0;color:#000;line-height:0px;-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:pointer;min-width:250px}.fv-DatePicker button{background:none;border:none;color:inherit;cursor:pointer;box-sizing:border-box;padding:0 20px;height:inherit;margin:0;outline:none}.fv-DatePicker .fv-DatePicker__input{width:100%;height:100%;padding:0;margin:0;background-color:#fafafa;border-style:solid;border-width:thin;border-radius:6px;border-color:#c8c8c899;box-sizing:border-box;opacity:.6;display:inline-flex;box-shadow:0 .5px 1px #0000004d;cursor:default}.fv-DatePicker .fv-DatePicker__input:hover{opacity:1}.fv-DatePicker .fv-DatePicker__input:active{opacity:.8;box-shadow:none}.fv-DatePicker .fv-DatePicker__input .fv-DatePicker__input-month{flex:3;text-align:left;white-space:nowrap}.fv-DatePicker .fv-DatePicker__input .fv-DatePicker__input-day{flex:2;text-align:center;border-left-style:solid;border-left-width:1px;border-left-color:#ccc;padding:0 20px;white-space:nowrap}.fv-DatePicker .fv-DatePicker__input .fv-DatePicker__input-year{flex:2;text-align:center;border-left-style:solid;border-left-width:1px;border-left-color:#ccc;padding:0 px;white-space:nowrap}.fv-DatePicker .fv-DatePicker__input-options{position:absolute;top:0;left:0;width:100%;height:400px;background-color:#ffffffe6;color:#000;border-color:#c8c8c880;border-radius:6px;z-index:2000;transform:translateY(-50%) translateY(35px);overflow:hidden;box-sizing:border-box;box-shadow:0 0 5px #0000001a;display:flex;flex-direction:column;backdrop-filter:blur(25px);-webkit-backdrop-filter:blur(25px)}.fv-DatePicker .fv-DatePicker__input-options .fv-DatePicker__input-body{position:relative;height:calc(100% - 40px);width:inherit;display:inline-flex;border-left-color:inherit}.fv-DatePicker .fv-DatePicker__input-options .fv-DatePicker__input-body .fv-DatePicker__input-center-mask{position:absolute;height:40px;width:calc(100% - 6px);top:50%;left:3px;background-color:#005a9e;border-radius:6px;opacity:.8;transform:translateY(-50%)}.fv-DatePicker .fv-DatePicker__input-options .fv-DatePicker__input-body .fv-DatePicker__input-options-col:nth-child(2){flex:3;text-align:left}.fv-DatePicker .fv-DatePicker__input-options .fv-DatePicker__input-body .fv-DatePicker__input-options-col:nth-child(n+3){flex:2;text-align:center;border-left-color:inherit}.fv-DatePicker .fv-DatePicker__input-options .fv-DatePicker__input-body .fv-DatePicker__input-options-col:nth-child(n+3) .fv-DatePicker__input-options-col-items{border-color:inherit}.fv-DatePicker .fv-DatePicker__input-options .fv-DatePicker__input-body .fv-DatePicker__input-options-col:nth-child(n+3) .fv-DatePicker__input-options-col-item{border-left-style:solid;border-left-width:1px;border-color:inherit}.fv-DatePicker .fv-DatePicker__input-options .fv-DatePicker__input-body .fv-DatePicker__input-options-col:nth-child(n+3) .fv-DatePicker__input-options-col-up{border-left-style:solid;border-left-width:1px;border-color:inherit;cursor:pointer}.fv-DatePicker .fv-DatePicker__input-options .fv-DatePicker__input-body .fv-DatePicker__input-options-col:nth-child(n+3) .fv-DatePicker__input-options-col-down{border-left-style:solid;border-left-width:1px;border-color:inherit;cursor:pointer}.fv-DatePicker .fv-DatePicker__input-options .fv-DatePicker__input-body .fv-DatePicker__input-options-col{position:relative}.fv-DatePicker .fv-DatePicker__input-options .fv-DatePicker__input-body .fv-DatePicker__input-options-col .fv-DatePicker__input-options-col-up{display:none;position:absolute;height:20px;width:100%;text-align:center;line-height:20px;font-size:8px;cursor:pointer}.fv-DatePicker .fv-DatePicker__input-options .fv-DatePicker__input-body .fv-DatePicker__input-options-col .fv-DatePicker__input-options-col-down{display:none;position:absolute;top:100%;height:20px;width:100%;text-align:center;line-height:20px;font-size:8px;transform:translateY(-100%);cursor:pointer}.fv-DatePicker .fv-DatePicker__input-options .fv-DatePicker__input-body .fv-DatePicker__input-options-col:hover .fv-DatePicker__input-options-col-up{background-color:#fafafa;display:block}.fv-DatePicker .fv-DatePicker__input-options .fv-DatePicker__input-body .fv-DatePicker__input-options-col:hover .fv-DatePicker__input-options-col-up:hover{opacity:1}.fv-DatePicker .fv-DatePicker__input-options .fv-DatePicker__input-body .fv-DatePicker__input-options-col:hover .fv-DatePicker__input-options-col-down{background-color:#fafafa;display:block}.fv-DatePicker .fv-DatePicker__input-options .fv-DatePicker__input-body .fv-DatePicker__input-options-col:hover .fv-DatePicker__input-options-col-down:hover{opacity:1}.fv-DatePicker .fv-DatePicker__input-options .fv-DatePicker__input-body .fv-DatePicker__input-options-col .fv-DatePicker__input-options-col-items{height:100%;overflow-x:hidden;overflow-y:overlay;-ms-overflow-style:-ms-autohiding-scrollbar}.fv-DatePicker .fv-DatePicker__input-options .fv-DatePicker__input-body .fv-DatePicker__input-options-col .fv-DatePicker__input-options-col-items::-webkit-scrollbar{display:none}.fv-DatePicker .fv-DatePicker__input-options .fv-DatePicker__input-body .fv-DatePicker__input-options-col .fv-DatePicker__input-options-col-items .fv-DatePicker__input-options-col-item{height:40px;font-size:14px;box-sizing:border-box;padding:10px 20px;line-height:100%;white-space:nowrap;-moz-user-select:-moz-none;-o-user-select:none;-webkit-user-select:none;user-select:none}.fv-DatePicker .fv-DatePicker__input-options .fv-DatePicker__input-body .fv-DatePicker__input-options-col .fv-DatePicker__input-options-col-items .fv-DatePicker__input-options-col-item:hover{background-color:#c8c8c81a}.fv-DatePicker .fv-DatePicker__input-options .fv-DatePicker__input-options-bottom-bar{height:40px;width:inherit;padding:3px 0;box-sizing:border-box;display:flex;justify-content:space-around;align-items:center;border-top-style:solid;border-top-width:1px;border-color:inherit;z-index:1}.fv-DatePicker .fv-DatePicker__input-options .fv-DatePicker__input-options-bottom-bar .fv-DatePicker__input-options-accept,.fv-DatePicker .fv-DatePicker__input-options .fv-DatePicker__input-options-bottom-bar .fv-DatePicker__input-options-cancel{width:100%;height:100%;margin:0 1px;border-radius:6px;flex:1;font-size:16px;font-weight:700}.fv-DatePicker .fv-DatePicker__input-options .fv-DatePicker__input-options-bottom-bar .fv-DatePicker__input-options-accept:hover,.fv-DatePicker .fv-DatePicker__input-options .fv-DatePicker__input-options-bottom-bar .fv-DatePicker__input-options-cancel:hover{background-color:#c8c8c84d}.fv-DatePicker .fv-DatePicker__input-options .fv-DatePicker__input-options-bottom-bar .fv-DatePicker__input-options-accept:active,.fv-DatePicker .fv-DatePicker__input-options .fv-DatePicker__input-options-bottom-bar .fv-DatePicker__input-options-cancel:active{background-color:#c8c8c833}.fv-DatePicker.disabled{filter:grayscale(100%);opacity:.6}.fv-DatePicker.disabled .fv-DatePicker__input{opacity:.8;box-shadow:none;cursor:not-allowed}.fv-DatePicker .fv-DatePicker__options-enter-from{height:0}.fv-DatePicker .fv-DatePicker__options-enter-to{height:400px}.fv-DatePicker .fv-DatePicker__options-enter-active{transition:height .1s ease-out}.fv-DatePicker.dark{background-color:#000;color:#fff;border-color:#999}.fv-DatePicker.dark:hover{border-color:#ccc}.fv-DatePicker.dark .fv-DatePicker__input{background-color:#323232;color:#fff;border-color:#373737}.fv-DatePicker.dark .fv-DatePicker__input .fv-DatePicker__input-day,.fv-DatePicker.dark .fv-DatePicker__input .fv-DatePicker__input-year{border-left-color:#c8c8c81a}.fv-DatePicker.dark .fv-DatePicker__input-options{background-color:#2e2e2e;border-color:#c8c8c81a;color:#f5f5f5}.fv-DatePicker.dark .fv-DatePicker__input-options .fv-DatePicker__input-body{background-color:inherit}.fv-DatePicker.dark .fv-DatePicker__input-options .fv-DatePicker__input-body .fv-DatePicker__input-center-mask{background-color:#76b9ed}.fv-DatePicker.dark .fv-DatePicker__input-options .fv-DatePicker__input-body .fv-DatePicker__input-options-col .fv-DatePicker__input-options-col-items{border-color:inherit}.fv-DatePicker.dark .fv-DatePicker__input-options .fv-DatePicker__input-body .fv-DatePicker__input-options-col .fv-DatePicker__input-options-col-up,.fv-DatePicker.dark .fv-DatePicker__input-options .fv-DatePicker__input-body .fv-DatePicker__input-options-col .fv-DatePicker__input-options-col-down,.fv-DatePicker.dark .fv-DatePicker__input-options .fv-DatePicker__input-body .fv-DatePicker__input-options-col:hover .fv-DatePicker__input-options-col-up,.fv-DatePicker.dark .fv-DatePicker__input-options .fv-DatePicker__input-body .fv-DatePicker__input-options-col:hover .fv-DatePicker__input-options-col-up:hover,.fv-DatePicker.dark .fv-DatePicker__input-options .fv-DatePicker__input-body .fv-DatePicker__input-options-col:hover .fv-DatePicker__input-options-col-down,.fv-DatePicker.dark .fv-DatePicker__input-options .fv-DatePicker__input-body .fv-DatePicker__input-options-col:hover .fv-DatePicker__input-options-col-down:hover{background-color:#2e2e2e}.fv-DatePicker.dark .fv-DatePicker__input-options .fv-DatePicker__input-body .fv-DatePicker__input-options-col .fv-DatePicker__input-options-col-item:hover{background-color:#343434}.fv-DatePicker.dark .fv-DatePicker__input-options .fv-DatePicker__input-body .fv-DatePicker__input-options-col:nth-child(n+3) .fv-DatePicker__input-options-col-item{border-left-style:solid;border-left-width:1px;border-color:inherit}.fv-DatePicker.dark .fv-DatePicker__input-options .fv-DatePicker__input-body .fv-DatePicker__input-options-col:nth-child(n+3) .fv-DatePicker__input-options-col-up{border-left-style:solid;border-left-width:1px;border-color:inherit}.fv-DatePicker.dark .fv-DatePicker__input-options .fv-DatePicker__input-body .fv-DatePicker__input-options-col:nth-child(n+3) .fv-DatePicker__input-options-col-down{border-left-style:solid;border-left-width:1px;border-color:inherit}.fv-DatePicker.dark .fv-DatePicker__input-options .fv-DatePicker__input-options-bottom-bar .fv-DatePicker__input-options-accept,.fv-DatePicker.dark .fv-DatePicker__input-options .fv-DatePicker__input-options-bottom-bar .fv-DatePicker__input-options-cancel{width:100%;height:100%;margin:0 1px;border-radius:6px;flex:1;font-size:16px;font-weight:700}.fv-DatePicker.dark .fv-DatePicker__input-options .fv-DatePicker__input-options-bottom-bar .fv-DatePicker__input-options-accept:hover,.fv-DatePicker.dark .fv-DatePicker__input-options .fv-DatePicker__input-options-bottom-bar .fv-DatePicker__input-options-cancel:hover{background-color:#7878781a}.fv-DetailsList{position:relative;width:600px;height:600px;display:flex;flex-direction:column}.fv-DetailsList .fv-details-list-spliter{position:relative;min-width:6px;width:6px;height:42px;flex-shrink:0;display:flex;justify-content:center;align-items:center;transition:all .3s;cursor:ew-resize}.fv-DetailsList .fv-details-list-spliter:hover i{background:#c8c6c499}.fv-DetailsList .fv-details-list-spliter:active i{background:#c8c6c4;box-shadow:0 0 3px #0000001a}.fv-DetailsList .fv-details-list-spliter i{position:relative;width:80%;height:90%;border-radius:3px;transition:all .3s}.fv-DetailsList .fv-details-list-head{position:relative;width:100%;height:45px;padding:1px 0;border-bottom:1px solid rgb(237,235,233);box-sizing:border-box;display:flex;overflow:hidden}.fv-DetailsList .fv-details-list-head .fv-details-list-icon-block{position:relative;width:48px;height:100%;background:#fff9;box-sizing:border-box;display:flex;justify-content:center;align-items:center;float:left}.fv-DetailsList .fv-details-list-head .fv-details-list-icon-block .fv-details-list-selector{position:absolute;left:0;top:0;width:100%;height:100%;font-size:16px;display:flex;justify-content:center;align-items:center;-webkit-font-smoothing:subpixel-antialiased}.fv-DetailsList .fv-details-list-head .fv-details-list-icon-block .fv-details-list-selector:hover .fv-details-list-icon-ring{border-color:#000}.fv-DetailsList .fv-details-list-head .fv-details-list-icon-block .fv-details-list-selector:hover .fv-details-list-icon-ring .fv-details-list-icon-accept{color:#000}.fv-DetailsList .fv-details-list-head .fv-details-list-icon-block .fv-details-list-selector.choosen .fv-details-list-icon-ring{background:#005a9e;border-color:#0000}.fv-DetailsList .fv-details-list-head .fv-details-list-icon-block .fv-details-list-selector.choosen .fv-details-list-icon-ring .fv-details-list-icon-accept{color:#fff}.fv-DetailsList .fv-details-list-head .fv-details-list-icon-block .fv-details-list-selector .fv-details-list-icon-ring{position:relative;width:16px;height:16px;border-radius:50%;border:1px solid rgba(0,0,0,0);display:flex;justify-content:center;align-items:center}.fv-DetailsList .fv-details-list-head .fv-details-list-icon-block .fv-details-list-selector .fv-details-list-icon-ring .fv-details-list-icon-accept{position:relative;width:100%;height:100%;color:#0000;display:flex;justify-content:center;align-items:center}.fv-DetailsList .fv-details-list-head:hover .fv-details-list-icon-block .fv-details-list-selector .fv-details-list-icon-ring{border-color:#000}.fv-DetailsList .fv-details-list-head .col{position:relative;width:60px;height:100%;flex-shrink:0;padding-right:3px;background:#fff9;text-align:left;vertical-align:baseline;box-sizing:border-box;display:flex;justify-content:space-between;align-items:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;float:left}.fv-DetailsList .fv-details-list-head .col .col-content{position:relative;width:100%;height:100%;flex:1;padding:0 8px 0 12px;box-sizing:border-box;display:flex;justify-content:flex-start;align-items:center;overflow:hidden}.fv-DetailsList .fv-details-list-head .col .col-content:hover{background:#f3f2f1}.fv-DetailsList .fv-details-list-head .col .col-content:active{background:#edebe9}.fv-DetailsList .fv-details-list-head .col .col-content p.default-title{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;font-size:13.8px;font-weight:600}.fv-DetailsList .fv-details-list-head .col .col-content i.sort{padding:0 0 0 5px;font-size:12px;font-weight:400;color:#605e5c}.fv-DetailsList .fv-details-list-head .col .expand{position:relative;width:36px;height:100%;box-sizing:border-box;display:flex;justify-content:center;align-items:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;transition:all .3s;float:left}.fv-DetailsList .fv-details-list-head .col .expand:hover{background:#f3f2f1}.fv-DetailsList .fv-details-list-head .col .expand:active{background:#edebe9}.fv-DetailsList .fv-details-list-head .col .expand.choose i{transform:rotate(90deg);transition:all .3s}.fv-DetailsList .fv-details-list-head .col .expand i{transition:all .3s}.fv-DetailsList .fv-details-list-content{position:relative;width:100%;height:100%;flex:1;box-sizing:border-box;overflow:overlay;overflow-x:hidden;-ms-overflow-style:-ms-autohiding-scrollbar}.fv-DetailsList .fv-details-list-content .content-row{position:relative;width:calc(100% + 30px);height:43px;border-bottom:1px solid rgb(237,235,233);display:flex;box-sizing:border-box;overflow:visible}.fv-DetailsList .fv-details-list-content .content-row .fv-details-list-icon-block{position:relative;width:48px;height:100%;box-sizing:border-box;display:flex;justify-content:center;align-items:center;float:left}.fv-DetailsList .fv-details-list-content .content-row .fv-details-list-icon-block .fv-details-list-selector{position:absolute;left:0;top:0;width:100%;height:100%;font-size:16px;display:flex;justify-content:center;align-items:center;-webkit-font-smoothing:subpixel-antialiased}.fv-DetailsList .fv-details-list-content .content-row .fv-details-list-icon-block .fv-details-list-selector:hover .fv-details-list-icon-ring{border-color:#000}.fv-DetailsList .fv-details-list-content .content-row .fv-details-list-icon-block .fv-details-list-selector:hover .fv-details-list-icon-ring .fv-details-list-icon-accept{color:#000}.fv-DetailsList .fv-details-list-content .content-row .fv-details-list-icon-block .fv-details-list-selector.choosen .fv-details-list-icon-ring{background:#005a9e;border-color:#0000}.fv-DetailsList .fv-details-list-content .content-row .fv-details-list-icon-block .fv-details-list-selector.choosen .fv-details-list-icon-ring .fv-details-list-icon-accept{color:#fff}.fv-DetailsList .fv-details-list-content .content-row .fv-details-list-icon-block .fv-details-list-selector .fv-details-list-icon-ring{position:relative;width:16px;height:16px;border-radius:50%;border:1px solid rgba(0,0,0,0);display:flex;justify-content:center;align-items:center}.fv-DetailsList .fv-details-list-content .content-row .fv-details-list-icon-block .fv-details-list-selector .fv-details-list-icon-ring .fv-details-list-icon-accept{position:relative;width:100%;height:100%;color:#0000;display:flex;justify-content:center;align-items:center}.fv-DetailsList .fv-details-list-content .content-row:hover{background:#f3f2f1;border-bottom:1px solid rgba(237,235,233,0)}.fv-DetailsList .fv-details-list-content .content-row:hover .col *{font-weight:600}.fv-DetailsList .fv-details-list-content .content-row:hover .col *.sec{font-weight:400;opacity:1}.fv-DetailsList .fv-details-list-content .content-row:hover .fv-details-list-icon-block .fv-details-list-selector .fv-details-list-icon-ring{border-color:#000}.fv-DetailsList .fv-details-list-content .content-row.choose{background:#f3f2f1;border-bottom:1px solid white}.fv-DetailsList .fv-details-list-content .content-row.choose .col *{font-weight:600}.fv-DetailsList .fv-details-list-content .content-row.choose .col *.sec{font-weight:400;opacity:1}.fv-DetailsList .fv-details-list-content .content-row .col{position:relative;width:60px;height:100%;padding:0 32px 0 12px;text-align:left;vertical-align:baseline;box-sizing:border-box;display:flex;justify-content:flex-start;align-items:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;float:left}.fv-DetailsList .fv-details-list-content .content-row .col *{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;font-size:13.8px;font-weight:400;-webkit-user-select:text;-moz-user-select:text;user-select:text}.fv-DetailsList .fv-details-list-content .content-row .col *.sec{font-size:12px;opacity:.8}.fv-DetailsList .fv-details-list-content .content-row .expand{position:relative;width:36px;height:100%;box-sizing:border-box;display:flex;justify-content:center;align-items:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;transition:all .3s;float:left}.fv-DetailsList .fv-details-list-content .content-row .expand:hover{background:#eeedec}.fv-DetailsList .fv-details-list-content .content-row .expand:active{background:#edebe9}.fv-DetailsList .fv-details-list-content .content-row .expand.choose i{transform:rotate(90deg);transition:all .3s}.fv-DetailsList .fv-details-list-content .content-row .expand i{transition:all .3s}.fv-DetailsList .fv-details-list-content.compact .content-row{height:32px;border-bottom:transparent solid 1px}.fv-DetailsList .fv-details-list-content.auto-height .content-row{min-height:43px;height:auto}.fv-DetailsList .fv-details-list-content.auto-height .content-row .col *{text-overflow:inherit;white-space:pre-wrap;overflow:visible}.fv-DetailsList .fv-details-list-content.auto-height .content-row .fv-details-list-icon-block{height:32px}.fv-DetailsList .fv-rightMenu{position:fixed;top:100%;width:200px;height:auto;padding:8px 0;background:#efefef;border-radius:3px;box-sizing:border-box;box-shadow:0 0 #0000001a,0 3px 10px #0000004d;display:flex;flex-direction:column}.fv-DetailsList .fv-rightMenu div{padding:1px 0}.fv-DetailsList .fv-rightMenu div span{width:calc(100% - 10px);margin-left:5px;padding:6px 10px;background:#efefef;font-size:13px;border-radius:3px;box-sizing:border-box;display:flex;justify-content:space-between;align-items:center;-webkit-user-select:none;-moz-user-select:none;user-select:none}.fv-DetailsList .fv-rightMenu div span:hover{background:#c8c8c84d;cursor:pointer}.fv-DetailsList .fv-rightMenu div span:active{background:#c8c8c880}.fv-DetailsList .fv-rightMenu div span p{text-overflow:ellipsis;white-space:nowrap;width:100%;margin:0;padding:0 15px;font-size:12px;font-weight:400;overflow:hidden}.fv-DetailsList .fv-rightMenu div hr{margin:8px 15px;border:thin;border-bottom:rgba(0,0,0,.1) solid thin}.fv-DetailsList .zoom-in-top-enter-active,.fv-DetailsList .zoom-in-top-leave-active{opacity:1;transform:scaleY(1);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1);transform-origin:center top}.fv-DetailsList .zoom-in-top-enter-from,.fv-DetailsList .zoom-in-top-leave-active{opacity:0;transform:scaleY(0)}.fv-DetailsList .m-list-move{transition:all .2s;-webkit-transition:all .2s}.fv-DetailsList .details-list-enter-active{opacity:0;transition:all .2s;transition-delay:.1s}.fv-DetailsList .details-list-enter-to{opacity:1;transition:all .2s;transition-delay:.1s}.fv-DetailsList .details-list-leave-active{opacity:1;transform:translate(0);transition:all .2s}.fv-DetailsList .details-list-leave-to{opacity:0;transform:translate(-75px);transition:all .2s}.fv-DetailsList.dark .fv-details-list-spliter:hover i{background:#484644}.fv-DetailsList.dark .fv-details-list-spliter:active i{background:#c8c6c4;box-shadow:0 0 3px #ffffff4d}.fv-DetailsList.dark .fv-details-list-head{border-bottom:1px solid rgb(41,40,39)}.fv-DetailsList.dark .fv-details-list-head:hover .fv-details-list-icon-block .fv-details-list-selector .fv-details-list-icon-ring{border-color:#c8c8c8}.fv-DetailsList.dark .fv-details-list-head .fv-details-list-icon-block{background:#0009}.fv-DetailsList.dark .fv-details-list-head .fv-details-list-icon-block .fv-details-list-selector:hover .fv-details-list-icon-ring{border-color:#c8c8c8}.fv-DetailsList.dark .fv-details-list-head .fv-details-list-icon-block .fv-details-list-selector:hover .fv-details-list-icon-ring .fv-details-list-icon-accept{color:#c8c8c8}.fv-DetailsList.dark .fv-details-list-head .col{background:#0009}.fv-DetailsList.dark .fv-details-list-head .col .col-content:hover{background:#252423}.fv-DetailsList.dark .fv-details-list-head .col .col-content:active{background:#292827}.fv-DetailsList.dark .fv-details-list-head .col .col-content p.default-title{color:#f3f2f1}.fv-DetailsList.dark .fv-details-list-head .col .col-content i.sort{color:#ebebeb}.fv-DetailsList.dark .fv-details-list-head .col .expand{color:#f3f2f1}.fv-DetailsList.dark .fv-details-list-head .col .expand:hover{background:#252423}.fv-DetailsList.dark .fv-details-list-head .col .expand:active{background:#292827}.fv-DetailsList.dark .fv-details-list-content .content-row{border-bottom:1px solid rgb(50,49,48)}.fv-DetailsList.dark .fv-details-list-content .content-row:hover .fv-details-list-icon-block .fv-details-list-selector .fv-details-list-icon-ring,.fv-DetailsList.dark .fv-details-list-content .content-row .fv-details-list-icon-block .fv-details-list-selector:hover .fv-details-list-icon-ring{border-color:#c8c8c8}.fv-DetailsList.dark .fv-details-list-content .content-row .fv-details-list-icon-block .fv-details-list-selector:hover .fv-details-list-icon-ring .fv-details-list-icon-accept{color:#c8c8c8}.fv-DetailsList.dark .fv-details-list-content .content-row:hover,.fv-DetailsList.dark .fv-details-list-content .content-row.choose{background:#252423;border-bottom:1px solid rgb(50,49,48)}.fv-DetailsList.dark .fv-details-list-content .content-row .col *,.fv-DetailsList.dark .fv-details-list-content .content-row .expand{color:#f3f2f1}.fv-DetailsList.dark .fv-details-list-content .content-row .expand:hover{background:#252423}.fv-DetailsList.dark .fv-details-list-content .content-row .expand:active{background:#292827}.fv-DetailsList.dark .fv-details-list-content.compact .content-row{border-bottom:transparent solid 1px}.fv-DetailsList.dark .fv-rightMenu{background:#242424;box-shadow:0 0 #2424241a,0 3px 10px #2424244d}.fv-DetailsList.dark .fv-rightMenu div span{background:#242424}.fv-DetailsList.dark .fv-rightMenu div span:hover{background:#313131}.fv-DetailsList.dark .fv-rightMenu div span:active{background:#2d2d2d}.fv-DetailsList.dark .fv-rightMenu div span p{color:#f5f5f5}.fv-DetailsList.dark .fv-rightMenu div hr{border-bottom:rgb(50,49,48) solid thin}.fv-Drawer{position:fixed;box-shadow:0 0 5px #0003;-webkit-backdrop-filter:blur(50px);backdrop-filter:blur(50px);overflow:hidden;transition:transform .3s;transition-timing-function:ease-in-out}.fv-Drawer.dark{background-color:#323232fc}.fv-DropDown{position:relative;width:300px;font-family:微软雅黑,Segoe MDL2;overflow-y:visible}.fv-DropDown:hover .drop-down-box{background:#24242433}.fv-DropDown .drop-down-box{position:relative;width:100%;height:36px;border-radius:3px;box-sizing:border-box;display:flex;align-items:center;transition:all .8s;box-shadow:#0002 0 1px 2px,#0000001c 0 .6px 1.8px;overflow:hidden}.fv-DropDown .drop-down-box.error{background:#a4262c}.fv-DropDown .drop-down-box .drop-down-container{position:relative;width:100%;height:100%;background:#fff;box-sizing:border-box;display:flex;align-items:center}.fv-DropDown .drop-down-box .drop-down-container .fv-dropdown-reveal-container{position:absolute;top:0;left:0;width:100%;height:100%}.fv-DropDown .drop-down-box .drop-down-container .fv-drop-down-input{position:relative;width:100%;height:100%;padding:0 36px 0 8px;background:transparent;font-family:微软雅黑,Segoe MDL2;border:rgba(0,0,0,.1) solid thin;outline:none;font-size:13.5px;font-weight:400;color:#201f1e;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:default}.fv-DropDown .drop-down-box .drop-down-container i.left-icon{position:absolute;width:36px;height:100%;left:0;font-size:13px;box-sizing:border-box;display:flex;justify-content:center;align-items:center;z-index:1}.fv-DropDown .drop-down-box .drop-down-container i.right-icon{position:absolute;width:36px;height:100%;right:0;font-size:13px;box-sizing:border-box;display:flex;justify-content:center;align-items:center}.fv-DropDown .list-container{position:absolute;left:0;width:100%;height:auto;padding:0 8px;background:#f5f5f5f2;border-radius:3px;box-sizing:border-box;display:flex;flex-direction:column;backdrop-filter:blur(50px);-webkit-backdrop-filter:blur(50px);-ms-overflow-style:-ms-autohiding-scrollbar;box-shadow:0 6.4px 14.4px #0002,0 1.2px 3.6px #0000001c;overflow:hidden}.fv-DropDown .list-container .list-item{position:relative;width:100%;height:32px;margin:2px 0;padding:0 8px;border-radius:6px;box-sizing:border-box;display:flex;align-items:center}.fv-DropDown .list-container .list-item.normal,.fv-DropDown .list-container .list-item.normal p{cursor:pointer}.fv-DropDown .list-container .list-item.normal:hover{background-color:#dcdcdc99}.fv-DropDown .list-container .list-item.normal:active{background-color:#c8c8c899}.fv-DropDown .list-container .list-item.disabled{cursor:default}.fv-DropDown .list-container .list-item.disabled p{color:#5f5f5f99}.fv-DropDown .list-container .list-item.disabled:hover{background-color:transparent}.fv-DropDown .list-container .list-item.choose{background-color:#edebe999}.fv-DropDown .list-container .list-item.hr{height:1px;border-bottom:rgba(36,36,36,.1) solid thin}.fv-DropDown .list-container .list-item p{font-size:13.8px;font-weight:400;color:#201f1e;text-overflow:ellipsis;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;user-select:none;overflow:hidden}.fv-DropDown .list-container .list-item p.title{color:#00629e;font-weight:600}.fv-DropDown p.err-msg{position:absolute;left:0;top:100%;width:100%;margin-top:3px;font-size:12px;color:#a4262c}.fv-DropDown.disabled:hover .drop-down-box{background:transparent}.fv-DropDown.disabled .drop-down-box .drop-down-container{background:#f3f2f1;box-shadow:none}.fv-DropDown.disabled .drop-down-box .drop-down-container .fv-drop-down-input{background:#f3f2f1;color:#a19f9d99;cursor:no-drop}.fv-DropDown.disabled .drop-down-box .drop-down-container i{color:#32313099}.fv-DropDown .fv-drop-down-top-enter-active,.fv-DropDown .fv-drop-down-bottom-enter-active{transition:all .2s ease-out}.fv-DropDown .fv-drop-down-top-leave-active,.fv-DropDown .fv-drop-down-bottom-leave-active{transition:all .1s}.fv-DropDown .fv-drop-down-top-enter-from{margin-bottom:-20px;transform:scaleY(0);transform-origin:50% 100%;opacity:0}.fv-DropDown .fv-drop-down-top-enter-to{margin-top:0;transform:scaleY(1);transform-origin:50% 100%;opacity:1}.fv-DropDown .fv-drop-down-top-leave-from{opacity:1}.fv-DropDown .fv-drop-down-top-leave-to{opacity:0}.fv-DropDown .fv-drop-down-bottom-enter-from{margin-top:-20px;opacity:0;transform:scaleY(0);transform-origin:50% 0%}.fv-DropDown .fv-drop-down-bottom-enter-to{margin-top:0;opacity:1;transform:scaleY(1);transform-origin:50% 0%}.fv-DropDown .fv-drop-down-bottom-leave-from{opacity:1}.fv-DropDown .fv-drop-down-bottom-leave-to{opacity:0}.fv-DropDown.dark:hover .drop-down-box{background:#e2e2e233}.fv-DropDown.dark .drop-down-box{box-shadow:#fff3 0 -.5px 2px}.fv-DropDown.dark .drop-down-box .drop-down-container{background:#242322e6}.fv-DropDown.dark .drop-down-box .drop-down-container .fv-drop-down-input{color:#f5f5f5;border:rgba(200,200,200,.1) solid thin;-webkit-user-select:none;-moz-user-select:none;user-select:none}.fv-DropDown.dark .drop-down-box .drop-down-container .fv-drop-down-input::-moz-placeholder{color:#b3b3b3}.fv-DropDown.dark .drop-down-box .drop-down-container .fv-drop-down-input::placeholder{color:#b3b3b3}.fv-DropDown.dark .drop-down-box .drop-down-container i{color:#f5f5f5}.fv-DropDown.dark .list-container{background:#242424e6}.fv-DropDown.dark .list-container .list-item.normal:hover{background-color:#78787899}.fv-DropDown.dark .list-container .list-item.normal:active{background-color:#64646499}.fv-DropDown.dark .list-container .list-item.disabled{cursor:default}.fv-DropDown.dark .list-container .list-item.disabled p{color:#d4d4d499}.fv-DropDown.dark .list-container .list-item.hr{border-bottom:rgba(216,216,216,.1) solid thin}.fv-DropDown.dark .list-container .list-item p{color:#f5f5f5}.fv-DropDown.dark .list-container .list-item p.title{color:#76b9ed}.fv-DropDown.dark.disabled:hover .drop-down-box,.fv-DropDown.dark.disabled .drop-down-box .drop-down-container{background:#242424cc}.fv-DropDown.dark.disabled .drop-down-box .drop-down-container .fv-drop-down-input{background:#242424cc;border-color:transparent}.fv-Expander{position:relative;border:1px solid #e3e5e8;border-radius:6px;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-sizing:border-box;display:flex;flex-direction:column;justify-content:flex-start;transition:all .3s;overflow:hidden;cursor:default}.fv-Expander.visibleOverflow,.fv-Expander.visibleOverflow .expander-description-container,.fv-Expander.visibleOverflow .expander-description-container .expander-description-box{overflow:visible}.fv-Expander .expander-description-container{position:relative;width:100%;flex-shrink:0;padding:5px 10px;background:#fbfbfd;border-bottom:rgba(120,120,120,.1) solid thin;box-sizing:border-box;display:flex;justify-content:space-between;align-items:center;overflow:hidden}.fv-Expander .expander-description-container .expander-description-box{position:relative;width:50%;height:100%;flex:1;padding-left:10px;display:flex;overflow:hidden}.fv-Expander .expander-description-container .expander-description-box .expander-description{position:relative;width:100%;height:100%;flex:1;line-height:1.6rem;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;overflow:hidden}.fv-Expander .expander-description-container .expander-description-box .expander-description .expander-text{position:relative;width:100%;font-size:.9rem;line-height:inherit;overflow:hidden}.fv-Expander .expander-description-container .expander-description-box .expander-description-extension-block{position:relative;width:auto;height:100%;padding:5px;box-sizing:border-box;display:flex;justify-content:center;align-items:center;overflow:visible}.fv-Expander .expander-description-container .expander-expand-icon-block{position:relative;width:32px;height:32px;flex-shrink:0;border-radius:6px;display:flex;justify-content:center;align-items:center;font-size:1rem}.fv-Expander .expander-description-container .expander-expand-icon-block:hover{background:#c8c8c81a}.fv-Expander .expander-description-container .expander-expand-icon-block:active{background:#b4b4b41a}.fv-Expander .expander-description-container .expander-expand-icon-block i{cursor:pointer}.fv-Expander .expander-detail{position:relative;flex:1;flex-shrink:0;padding:15px 10px;background:#f5f6f8;box-sizing:border-box;overflow:auto}.fv-Expander .expander-expanded-enter-active{transform-origin:50% 0%;animation:rotatePullTop .5s both ease}.fv-Expander .expander-expanded-leave-active{transform-origin:50% 0%;animation:rotatePushBottom .5s both ease}@keyframes rotatePullTop{0%{opacity:0;transform:scaleY(0)}}@keyframes rotatePushBottom{to{opacity:0;transform:scaleY(0)}}.fv-Expander.dark{border-color:#373738;color:#f5f5f5}.fv-Expander.dark .expander-description-container{background:#2b2b2b}.fv-Expander.dark .expander-description-container .expander-description-box .expander-description .expander-text .expander-info{color:#9c9c9c}.fv-Expander.dark .expander-detail{background:#272727}.fv-FlipView{position:relative;width:500px;height:300px;display:flex;justify-content:center;align-items:center;overflow:hidden}.fv-FlipView .container-panel{position:relative;width:100%;height:100%;display:flex;justify-content:flex-start;align-items:center;overflow:hidden}.fv-FlipView .container-panel .container-item{position:absolute;left:0;top:0;min-width:100%;width:100%;min-height:100%;height:100%;display:flex;justify-content:center;align-items:center}.fv-FlipView .control-panel{position:absolute;width:100%;height:100%;-webkit-user-select:none;-moz-user-select:none;user-select:none}.fv-FlipView .control-panel .slidebtn{position:absolute;top:calc(50% - 20px);width:15px;height:40px;margin:0;background:#ffffff4d;border-radius:3px;color:#595959e6;font-size:12px;display:flex;justify-content:center;align-items:center;cursor:pointer;transition:all .5s;backdrop-filter:blur(25px);-webkit-backdrop-filter:blur(25px);-webkit-transition:all .5s,color .01s;-webkit-user-select:none;-moz-user-select:none;user-select:none;z-index:1}.fv-FlipView .control-panel .slidebtn:hover{color:#595959cc}.fv-FlipView .control-panel .slidebtn:active .icon{transform:scale(.65)}.fv-FlipView .control-panel .slidebtn.fst{left:0}.fv-FlipView .control-panel .slidebtn.sec{right:0}.fv-FlipView .control-panel .slidebtn .icon{transform-origin:50% 50%;transform:scale(.8)}.fv-FlipView .control-panel .slidebtn.vertical{left:calc(50% - 20px);width:40px;height:15px}.fv-FlipView .control-panel .slidebtn.vertical.fst{top:0}.fv-FlipView .control-panel .slidebtn.vertical.sec{top:calc(100% - 15px)}.fv-FlipView .control-panel .bottom-controller{position:absolute;left:0;bottom:0;width:100%;height:60px;padding:15px;font-size:12px;box-sizing:border-box;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;user-select:none;z-index:1}.fv-FlipView .control-panel .bottom-controller .flip-view-ring{width:6px;height:6px;margin:2px;border-radius:50%;display:flex;justify-content:center;align-items:center;box-sizing:border-box;cursor:pointer}.fv-FlipView .control-panel .bottom-controller .flip-view-ring:hover i{width:100%;height:100%;background:#4f4953}.fv-FlipView .control-panel .bottom-controller .flip-view-ring:active i{width:67%;height:67%}.fv-FlipView .control-panel .bottom-controller .flip-view-ring.choosen i{width:100%;height:100%}.fv-FlipView .control-panel .bottom-controller .flip-view-ring i{width:67%;height:67%;background:#4f4953cc;border-radius:50%}.fv-FlipView .control-panel .bottom-controller .sec{width:30px;height:30px;margin:0;font-size:12px;border-radius:3px;display:flex;justify-content:center;align-items:center;transition:all .3s;cursor:pointer}.fv-FlipView .control-panel .bottom-controller .sec:hover{background:#2424241a}.fv-FlipView .control-panel .bottom-controller.vertical{left:calc(100% - 60px);width:60px;height:100%;flex-direction:column}.fv-FlipView .fade-in-enter,.fv-FlipView .fade-in-leave-to{opacity:0;z-index:1}.fv-FlipView .fade-in-enter-to,.fv-FlipView .fade-in-leave{opacity:1;z-index:1}.fv-FlipView .fade-in-enter-active,.fv-FlipView .fade-in-leave-active{transition:all .3s;transition-delay:.3s}.fv-FlipView.dark .control-panel .slidebtn{background:#2424244d;color:#f5f5f599}.fv-FlipView.dark .control-panel .slidebtn:hover{color:#f5f5f5}.fv-FlipView.dark .control-panel .bottom-controller .flip-view-ring{width:6px;height:6px;margin:2px;border-radius:50%;display:flex;justify-content:center;align-items:center;box-sizing:border-box;cursor:pointer}.fv-FlipView.dark .control-panel .bottom-controller .flip-view-ring:hover i{width:100%;height:100%;background:#c8c8c8}.fv-FlipView.dark .control-panel .bottom-controller .flip-view-ring:active i{width:67%;height:67%}.fv-FlipView.dark .control-panel .bottom-controller .flip-view-ring.choosen i{width:100%;height:100%}.fv-FlipView.dark .control-panel .bottom-controller .flip-view-ring i{width:67%;height:67%;background:#c8c8c8cc;border-radius:50%}.fv-FlipView.dark .control-panel .bottom-controller .sec{color:#f5f5f5}.fv-FlipView.dark .control-panel .bottom-controller .sec:hover{background:#f2f2f21a}.fv-IconElement{position:relative;width:25px;height:25px;display:flex;justify-content:center;align-items:center}.fv-IconElement .icon-element-item{position:absolute;width:100%;height:100%;display:flex;justify-content:center;align-items:center}.fv-IconElement .icon-element-item .icon-element{background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}.fv-IconElement .icon-element-item.left{transform:scale(.7);transform-origin:left}.fv-IconElement .icon-element-item.right{transform:scale(.7);transform-origin:right}.fv-IconElement .icon-element-item.top{transform:scale(.7);transform-origin:top}.fv-IconElement .icon-element-item.bottom{transform:scale(.7);transform-origin:bottom}.fv-IconElement .icon-element-item.top-left{transform:scale(.5);transform-origin:top left}.fv-IconElement .icon-element-item.top-right{transform:scale(.5);transform-origin:top right}.fv-IconElement .icon-element-item.bottom-left{transform:scale(.5);transform-origin:bottom left}.fv-IconElement .icon-element-item.bottom-right{transform:scale(.5);transform-origin:bottom right}.fv-IconElement.icon-element-btn{border-radius:3px}.fv-IconElement.icon-element-btn:hover{background:#c8c8c84d}.fv-IconElement.icon-element-btn:active{background:#c8c8c899}.fv-IconElement.dark.icon-element-btn{border-radius:3px}.fv-IconElement.dark.icon-element-btn:hover{background:#c8c8c84d}.fv-IconElement.dark.icon-element-btn:active{background:#c8c8c81a}.fv-Image{position:relative;width:300px;height:auto;display:flex;justify-content:center;align-items:center;overflow:hidden;z-index:0}.fv-Image img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;z-index:-1}.fv-Image .fade-in-enter-from,.fv-Image .fade-in-leave-to{opacity:0;filter:blur(8px);transition:all .8s}.fv-Image .fade-in-enter-to,.fv-Image .fade-in-leave-from{opacity:1;filter:blur(0px);transition:all .8s}.fv-Img{position:relative;width:300px;height:auto;display:flex;justify-content:center;align-items:center;z-index:0;overflow:hidden}.fv-ImgBox{position:relative;width:300px;height:auto;display:flex;justify-content:center;align-items:center;overflow:hidden;z-index:0}.fv-ImgBox .fv-img-box-content{position:absolute;left:0;top:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;z-index:2}.fv-ImgBox img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;z-index:-1}.fv-ImgBox .fade-in-enter-from,.fv-ImgBox .fade-in-leave-to{opacity:0;filter:blur(8px);transition:all .8s}.fv-ImgBox .fade-in-enter-to,.fv-ImgBox .fade-in-leave-from{opacity:1;filter:blur(0px);transition:all .8s}.fv-InfiniteScrollView{position:relative;height:300px;overflow:auto}.fv-InfoBox{position:fixed;left:0;top:0;width:100%;height:100%;padding:25px;background:#fffc;box-sizing:border-box;display:flex;justify-content:center;align-items:center;z-index:900}.fv-InfoBox.absolute{position:absolute}.fv-InfoBox.relative{position:relative;z-index:0}.fv-InfoBox.acrylic{backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px)}.fv-InfoBox .sinfo-box-block{position:relative;min-width:300px;min-height:80px;width:auto;height:auto;max-width:calc(100% - 35px);max-height:95%;background:#ffffffe6;border:rgba(240,240,240,.5) solid 1px;border-radius:6px;box-sizing:border-box;box-shadow:8px 8px 25px #0003;transition:all .5s;transition-delay:.5s;display:flex;flex-direction:column;justify-content:space-between;align-items:center;overflow:hidden;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);animation:fv-ib-on .3s both;-webkit-animation:fv-ib-on .3s both;-webkit-transition:all .5s;-webkit-transition-delay:.5s}.fv-InfoBox .sinfo-box-block:hover{border:rgba(0,153,204,.8) solid 1px}.fv-InfoBox .sinfo-box-block.red:hover{border:rgb(200,50,59) solid 1px}.fv-InfoBox .sinfo-box-block.red .title-bar .icon-block{color:#c8323b}.fv-InfoBox .sinfo-box-block.green:hover{border:rgb(69,172,97) solid 1px}.fv-InfoBox .sinfo-box-block.green .title-bar .icon-block{color:#45ac61}.fv-InfoBox .sinfo-box-block.brown:hover{border:rgb(234,183,2) solid 1px}.fv-InfoBox .sinfo-box-block.brown .title-bar .icon-block{color:#eab702}.fv-InfoBox .sinfo-box-block .title-bar{width:100%;padding:15px;background:#f5f5f5;border-bottom:rgba(36,36,36,.1) solid thin;box-sizing:border-box;display:flex;justify-content:flex-start;align-items:center}.fv-InfoBox .sinfo-box-block .title-bar .title-content{margin-left:5px;font-family:微软雅黑;font-size:13px;font-weight:700;color:#323130;text-align:center}.fv-InfoBox .sinfo-box-block .icon-block{color:#00629ecc;font-weight:700}.fv-InfoBox .sinfo-box-block .info-box-content-block{width:100%;height:auto;padding:15px;font-size:15px;text-align:justify;box-sizing:border-box;overflow:auto}.fv-InfoBox .sinfo-box-block .info-box-content-block .header{font-weight:600}.fv-InfoBox .sinfo-box-block .info-box-content-block a{color:#0078d4;text-decoration:none;cursor:pointer}.fv-InfoBox .sinfo-box-block .info-box-content-block a:hover{text-decoration:underline}.fv-InfoBox .sinfo-box-block .info-box-control-block{width:100%;padding:20px 15px;background:#f5f5f5;border-top:rgba(36,36,36,.1) solid thin;box-sizing:border-box;display:flex;justify-content:space-between}@keyframes fv-ib-on{0%{transform:scale(.7)}70%{transform:scale(1.1)}to{transform:scale(1)}}.fv-InfoBox.dark{background:#0009;color:#f5f5f5}.fv-InfoBox.dark .sinfo-box-block{background:#2b2b2be6;border:rgba(0,0,0,.5) solid 1px}.fv-InfoBox.dark .sinfo-box-block .title-bar{background:#202020}.fv-InfoBox.dark .sinfo-box-block .title-bar .title-content{color:#efefef}.fv-InfoBox.dark .sinfo-box-block .info-box-control-block{background:#202020}.fv-ListView{position:relative;width:350px;height:300px;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:all .3s;overflow-y:hidden}.fv-ListView .list-view-container{position:relative;width:100%;height:10px;flex:1;padding:0 3px;box-sizing:border-box;overflow-x:hidden;overflow-y:overlay;-ms-overflow-style:-ms-autohiding-scrollbar}.fv-ListView .list-view-container .list-view-item{position:relative;width:100%;height:40px;margin:2px 0;flex-shrink:0;border:rgba(50,49,48,0) solid 2px;border-radius:3px;box-sizing:border-box;display:flex;justify-content:flex-start;align-items:center;float:left}.fv-ListView .list-view-container .list-view-item span,.fv-ListView .list-view-container .list-view-item p,.fv-ListView .list-view-container .list-view-item i{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;position:relative;height:100%;margin:0;font-size:13.8px;font-weight:400;color:#323130;box-sizing:border-box;display:flex;justify-content:flex-start;align-items:center;-webkit-user-select:none;-moz-user-select:none;user-select:none}.fv-ListView .list-view-container .list-view-item:hover{background:#c8c8c833}.fv-ListView .list-view-container .list-view-item.disabled{filter:grayscale(1);opacity:.8}.fv-ListView .list-view-container .list-view-item.disabled:hover{background:transparent}.fv-ListView .list-view-container .list-view-item.disabled *{color:#969696}.fv-ListView .list-view-container .list-view-item.header:hover{background:transparent}.fv-ListView .list-view-container .list-view-item.header *{color:#005a9e;font-weight:600}.fv-ListView .list-view-container .list-view-item.choose{background:#0078d44d}.fv-ListView .list-view-container .list-view-item.selected{border:rgba(50,49,48,.2) solid 2px}.fv-ListView .list-view-container .list-view-item.hr{height:1px;border-bottom:rgba(36,36,36,.1) solid thin}.fv-ListView .list-view-container .fv-listview-reveal-container{position:absolute;left:-2px;top:-2px;width:calc(100% + 4px);height:calc(100% + 4px)}.fv-ListView .list-view-container .item-content{position:relative;width:100%;height:100%;padding:0 6px;border-radius:6px;box-sizing:border-box;display:flex;justify-content:flex-start;align-items:center;overflow:hidden}.fv-ListView .list-view-header,.fv-ListView .list-view-footer{position:relative;width:100%;height:auto}.fv-ListView .fv-listview-slider{position:absolute;left:0;top:0;width:auto;height:100%;overflow:hidden;z-index:1}.fv-ListView .fv-listview-slider .s{position:relative;width:3.8px;height:40px;margin:0;padding:12px 0;box-sizing:border-box;float:left}.fv-ListView .fv-listview-slider .s p{position:relative;width:100%;height:100%;margin:0;background:#005a9e;border-radius:3px}.fv-ListView.dark .list-view-container .list-view-item span,.fv-ListView.dark .list-view-container .list-view-item p,.fv-ListView.dark .list-view-container .list-view-item i{color:#f5f5f5}.fv-ListView.dark .list-view-container .list-view-item:hover{background:#2524234d}.fv-ListView.dark .list-view-container .list-view-item.header *{color:#76b9ed}.fv-ListView.dark .list-view-container .list-view-item.choose{background:#0078d499}.fv-ListView.dark .list-view-container .list-view-item.hr{border-bottom:rgba(216,216,216,.3) solid thin}.fv-ListView.dark .list-view-container .list-view-item.selected{border:rgba(200,200,200,.2) solid 2px}.fv-ListView.dark .fv-listview-slider .s p{background:#76b9ed}.fv-MenuFlyout{position:relative;width:300px;height:35px;font-family:微软雅黑,Segoe MDL2;font-size:15px;color:#242424cc;border-radius:3px;box-sizing:border-box;display:flex;justify-content:flex-start;align-items:center;cursor:pointer;transition:all .3s;overflow-y:visible;-moz-user-select:none;user-select:none;-webkit-user-select:none}.fv-MenuFlyout .menu-flyout-container{position:relative;width:100%;height:100%;background:#fff;box-sizing:border-box;display:flex;align-items:center;box-shadow:#0002 0 1px 1px,#0000001c 0 .6px 1.8px}.fv-MenuFlyout .menu-flyout-container .fv-menu-flyout-reveal-container{position:absolute;top:0;left:0;width:100%;height:100%}.fv-MenuFlyout .menu-flyout-container .input{position:relative;width:100%;height:100%;background:transparent;padding:0 36px 0 8px;border:none;outline:none;font-size:13.5px;font-weight:400;color:#201f1e;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:default}.fv-MenuFlyout .menu-flyout-container i.left-icon{position:absolute;width:36px;height:100%;left:0;font-size:13px;box-sizing:border-box;display:flex;justify-content:center;align-items:center;z-index:1}.fv-MenuFlyout .menu-flyout-container i.right-icon{position:absolute;width:36px;height:100%;right:0;font-size:13px;box-sizing:border-box;display:flex;justify-content:center;align-items:center}.fv-MenuFlyout p.drop-down{padding:5px;font-family:Segoe MDL2;font-size:12px;color:#24242480}.fv-MenuFlyout:hover{border-color:#24242499}.fv-MenuFlyout:active{background:#2424241a;border-color:#2424244d}.fv-MenuFlyout .menu-flyout-list-container{position:absolute;left:0;top:0;width:100%;height:auto;max-height:350px;background:#efefeff2;border-radius:5px;box-sizing:border-box;display:flex;flex-direction:column;box-shadow:0 6.4px 14.4px #0002,0 1.2px 3.6px #0000001c;backdrop-filter:blur(25px);-webkit-backdrop-filter:blur(25px);-ms-overflow-style:-ms-autohiding-scrollbar;transition:height .3s;overflow:hidden;z-index:125}.fv-MenuFlyout .menu-flyout-list-container .menu-flyout-item-container{position:relative;width:100%;height:100%;flex:1;padding:8px;box-sizing:border-box;display:flex;flex-direction:column;transition:height .3s;overflow:auto;overflow-x:hidden;overflow-y:overlay}.fv-MenuFlyout .menu-flyout-list-container .menu-flyout-item-container ::-webkit-scrollbar{width:10px;height:8px}.fv-MenuFlyout .menu-flyout-list-container .menu-flyout-item-container ::-webkit-scrollbar:hover{width:16px}.fv-MenuFlyout .menu-flyout-list-container .menu-flyout-item-container ::-webkit-scrollbar-track{border-radius:10px}.fv-MenuFlyout .menu-flyout-list-container .menu-flyout-item-container ::-webkit-scrollbar-thumb{border-right:rgba(191,190,189,.2) solid 5px;background-color:#bfbebd00;-webkit-transition:background-color .3s;transition:background-color .3s;cursor:pointer}.fv-MenuFlyout .menu-flyout-list-container .menu-flyout-item-container ::-webkit-scrollbar-thumb:hover{border-radius:10px;border-color:transparent;background-color:#bfbebd99}.fv-MenuFlyout .menu-flyout-list-container .menu-flyout-item-container ::-webkit-scrollbar-thumb:active{background-color:#bfbebd80}.fv-MenuFlyout .menu-flyout-list-container .menu-flyout-item-container ::-webkit-scrollbar-thumb:horizontal{border-right:none;border-bottom:rgba(191,190,189,.2) solid 5px}.fv-MenuFlyout .menu-flyout-list-container .menu-flyout-item-container .fv-menu-flyout-item{position:relative;width:100%;min-height:40px;height:40px;padding:0 15px;font-size:13.8px;font-weight:400;color:#201f1e;border-radius:3px;text-overflow:ellipsis;white-space:nowrap;box-sizing:border-box;display:flex;justify-content:flex-start;align-items:center;overflow:visible;float:left;transition:all .2s;-webkit-transition:all .2s;cursor:pointer}.fv-MenuFlyout .menu-flyout-list-container .menu-flyout-item-container .fv-menu-flyout-item.normal{cursor:pointer}.fv-MenuFlyout .menu-flyout-list-container .menu-flyout-item-container .fv-menu-flyout-item.normal:hover{background-color:#7878781a}.fv-MenuFlyout .menu-flyout-list-container .menu-flyout-item-container .fv-menu-flyout-item.title{font-size:12px;font-weight:600;color:#00629e}.fv-MenuFlyout .menu-flyout-list-container .menu-flyout-item-container .fv-menu-flyout-item.disabled{cursor:default;color:#5f5f5f99}.fv-MenuFlyout .menu-flyout-list-container .menu-flyout-item-container .fv-menu-flyout-item.disabled:hover{background-color:transparent}.fv-MenuFlyout .menu-flyout-list-container .menu-flyout-item-container .fv-menu-flyout-item.choose{background:#7878781a}.fv-MenuFlyout .menu-flyout-list-container .menu-flyout-item-container .fv-menu-flyout-item.choose:hover{background:#7878780d}.fv-MenuFlyout .menu-flyout-list-container .menu-flyout-item-container .fv-menu-flyout-item.choose:active{background:#7878781a}.fv-MenuFlyout .menu-flyout-list-container .menu-flyout-item-container .fv-menu-flyout-item.choose .before-choosen{opacity:1}.fv-MenuFlyout .menu-flyout-list-container .menu-flyout-item-container .fv-menu-flyout-item.hr{min-height:1px;height:1px;border-bottom:rgba(36,36,36,.1) solid thin}.fv-MenuFlyout .menu-flyout-list-container .menu-flyout-item-container .fv-menu-flyout-item:active .before-choosen{top:30%;height:40%}.fv-MenuFlyout .menu-flyout-list-container .menu-flyout-item-container .fv-menu-flyout-item .before-choosen{position:absolute;top:20%;left:0;width:3px;height:60%;background:#00629e;border-radius:6px;transition:all .1s;opacity:0}.fv-MenuFlyout .menu-flyout-list-container .menu-flyout-item-container .fv-menu-flyout-item .after-expand{position:absolute;right:15px;height:100%;display:flex;justify-content:center;align-items:center}.fv-MenuFlyout.disabled{-webkit-user-select:none;-moz-user-select:none;user-select:none}.fv-MenuFlyout.disabled:hover .menu-flyout-container{background:transparent}.fv-MenuFlyout.disabled .menu-flyout-container{background:#f3f2f1;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-shadow:none}.fv-MenuFlyout.disabled .menu-flyout-container .input{background:#f3f2f1;color:#a19f9d99;-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:no-drop}.fv-MenuFlyout.disabled .menu-flyout-container i{color:#32313099}.fv-MenuFlyout .fv-menu-flyout-enter-active{transition:all .3s}.fv-MenuFlyout .fv-menu-flyout-enter-from{transform:scale(.98);opacity:0}.fv-MenuFlyout .fv-menu-flyout-enter-to{transform:scale(1);opacity:1}.fv-MenuFlyout .fv-menu-flyout-item-move{transition:all .3s}.fv-MenuFlyout .fv-menu-flyout-item-enter-active,.fv-MenuFlyout .fv-menu-flyout-item-leave-active{min-height:0px;transition:all .3s}.fv-MenuFlyout .fv-menu-flyout-item-enter-from,.fv-MenuFlyout .fv-menu-flyout-item-leave-to{min-height:0px;height:0px;opacity:0}.fv-MenuFlyout .fv-menu-flyout-item-enter-to,.fv-MenuFlyout .fv-menu-flyout-item-leave-from{opacity:1}.fv-MenuFlyout.dark .menu-flyout-container{color:#f5f5f5;background:#242424}.fv-MenuFlyout.dark .menu-flyout-container .input{color:#f5f5f5}.fv-MenuFlyout.dark:hover{border-color:#fafafa99}.fv-MenuFlyout.dark:active{background:#fafafa1a;border-color:#fafafa4d}.fv-MenuFlyout.dark .menu-flyout-list-container{background:#242424e6}.fv-MenuFlyout.dark .menu-flyout-list-container .menu-flyout-item-container .fv-menu-flyout-item{color:#f5f5f5}.fv-MenuFlyout.dark .menu-flyout-list-container .menu-flyout-item-container .fv-menu-flyout-item.title{color:#76b9ed}.fv-MenuFlyout.dark .menu-flyout-list-container .menu-flyout-item-container .fv-menu-flyout-item .before-choosen{background:#76b9ed}.fv-MenuFlyout.dark.disabled .menu-flyout-container{background:#242424cc}.fv-MenuFlyout.dark.disabled .menu-flyout-container .input{background:#24242400}.fv-MenuFlyout.dark.disabled .menu-flyout-container:hover{background:#242424cc}.fv-MenuFlyout.dark.disabled .menu-flyout-container:hover .input{background:#24242400}.fv-MessageBar{position:fixed;left:0;top:0;width:100%;height:auto;padding:12px;background:#f5f5f5cc;border:rgba(229,229,229,.6) solid thin;border-radius:3px;box-sizing:border-box;display:flex;flex-direction:column;backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);z-index:900}.fv-MessageBar.relative{position:relative;z-index:0}.fv-MessageBar.normal{background:#f5f5f5cc}.fv-MessageBar.warning{background:#ffc80a80}.fv-MessageBar.correct{background:#dff6dde6}.fv-MessageBar.error{background:#fde7e9e6}.fv-MessageBar .msg-bar-block{position:relative;height:auto;font-size:15px;color:#323130;display:flex;justify-content:flex-start;align-items:flex-start;z-index:999}.fv-MessageBar .msg-bar-block .icon-block{width:16px;height:16px;margin-top:5px;border-radius:50%;font-size:9px;background:#0078d4;color:#f5f5f5;display:flex;align-items:center}.fv-MessageBar .msg-bar-block .icon-block:before{width:16px;height:16px;display:flex;justify-content:center;align-items:center}.fv-MessageBar .msg-bar-block .icon-block.normal{background:#0078d4}.fv-MessageBar .msg-bar-block .icon-block.warning{background:#9d5d00;transform:rotate(180deg)}.fv-MessageBar .msg-bar-block .icon-block.correct{background:#0f7b0f}.fv-MessageBar .msg-bar-block .icon-block.error{background:#c42b1c}.fv-MessageBar .msg-bar-block .msg-content-block{padding-top:2px;flex:1;margin-left:5px;color:#323130;text-align:justify}.fv-MessageBar .msg-bar-block .msg-content-block .header{font-weight:600}.fv-MessageBar .msg-bar-block .msg-content-block a{color:#005a9e;text-decoration:none;cursor:pointer}.fv-MessageBar .msg-bar-block .msg-content-block a:hover{text-decoration:underline}.fv-MessageBar .msg-bar-block .close-block{width:30px;padding:3px;margin-left:3px;border-radius:3px;font-size:13.8px;text-align:center}.fv-MessageBar .msg-bar-block .close-block:hover{background:#2424241a}.fv-MessageBar .msg-bar-block .close-block:active{opacity:.8}.fv-MessageBar .control-block{padding:6px 0;box-sizing:border-box;display:flex;justify-content:flex-end}.fv-swift-warning{animation:fv______warning .5s both;-webkit-animation:fv______warning .5s both}@keyframes fv______warning{0%{margin-left:-50px}17%{margin-left:40px}34%{margin-left:-25px}51%{margin-left:15px}68%{margin-left:-5px}85%{margin-left:2px}to{margin-left:0}}.fv-MessageBar.dark{border:rgba(39,39,39,.6) solid thin}.fv-MessageBar.dark.normal{background:#272727cc}.fv-MessageBar.dark.warning{background:#43351980}.fv-MessageBar.dark.correct{background:#393d1be6}.fv-MessageBar.dark.error{background:#442726e6}.fv-MessageBar.dark .msg-bar-block .icon-block{color:#000}.fv-MessageBar.dark .msg-bar-block .icon-block.normal{background:#4cc3ff}.fv-MessageBar.dark .msg-bar-block .icon-block.warning{background:#fce100}.fv-MessageBar.dark .msg-bar-block .icon-block.correct{background:#6ccb5f}.fv-MessageBar.dark .msg-bar-block .icon-block.error{background:#ff99a4}.fv-MessageBar.dark .msg-bar-block .msg-content-block,.fv-MessageBar.dark .close-block{color:#f5f5f5}.fv-MessageBar.dark .close-block:hover{background:#c8c8c81a}.fv-MessageBar.dark .close-block:active{opacity:.8}.fv-NavigationPanel{position:relative;width:350px;height:100%;transition:width .3s;z-index:1}.fv-NavigationPanel .panel-container{position:relative;width:100%;height:100%;padding:12px 0;background:#efefefcc;box-sizing:border-box;display:flex;flex-direction:column;transition:width .3s;z-index:1;backdrop-filter:blur(25px);-webkit-backdrop-filter:blur(25px)}.fv-NavigationPanel .panel-container .fv-nav-default-item{position:relative;width:calc(100% - 10px);height:40px;margin-left:5px;padding:0;border-radius:6px;border:transparent solid thin;box-sizing:border-box;display:flex;justify-content:flex-start;align-items:center}.fv-NavigationPanel .panel-container .fv-nav-default-item.control{z-index:2}.fv-NavigationPanel .panel-container .fv-nav-default-item i.icon{position:relative;width:40px;height:100%;font-size:13.8px;color:#000;display:flex;justify-content:center;align-items:center}.fv-NavigationPanel .panel-container .fv-nav-default-item p.name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;position:relative;width:100%;height:100%;flex:1;margin:0;padding-left:12px;font-weight:400;color:#000;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-sizing:border-box;display:flex;justify-content:flex-start;align-items:center}.fv-NavigationPanel .panel-container .fv-nav-default-item p.name.title{font-size:13.8px;font-weight:600}.fv-NavigationPanel .panel-container .fv-nav-default-item:hover{background:#9e9e9e33}.fv-NavigationPanel .panel-container .fv-nav-default-item:active{opacity:.8}.fv-NavigationPanel .panel-container span.search{position:relative;width:100%;height:45px;padding:0 8px;box-sizing:border-box;display:flex;justify-content:center;align-items:center;z-index:2}.fv-NavigationPanel .panel-container span.search .nav-search{background:#fff9}.fv-NavigationPanel .panel-container div.template{position:relative;width:100%;height:100%;flex:1;overflow:overlay}.fv-NavigationPanel .panel-container-mobile{position:absolute;left:0;top:0;width:auto;height:40px;padding:0;background:transparent;border-top-right-radius:8px;border-bottom-right-radius:8px;display:flex;flex-direction:row;display:none;z-index:2;backdrop-filter:blur(25px);-webkit-backdrop-filter:blur(25px)}.fv-NavigationPanel .panel-container-mobile .fv-nav-default-item{position:relative;width:calc(100% - 10px);height:40px;margin-left:5px;padding:0;border-radius:6px;border:transparent solid thin;box-sizing:border-box;display:flex;justify-content:flex-start;align-items:center}.fv-NavigationPanel .panel-container-mobile .fv-nav-default-item.control{z-index:2}.fv-NavigationPanel .panel-container-mobile .fv-nav-default-item i.icon{position:relative;width:40px;height:100%;font-size:13.8px;color:#000;display:flex;justify-content:center;align-items:center}.fv-NavigationPanel .panel-container-mobile .fv-nav-default-item p.name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;position:relative;width:100%;height:100%;flex:1;margin:0;padding-left:12px;font-weight:400;color:#000;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-sizing:border-box;display:flex;justify-content:flex-start;align-items:center}.fv-NavigationPanel .panel-container-mobile .fv-nav-default-item p.name.title{font-size:13.8px;font-weight:600}.fv-NavigationPanel .panel-container-mobile .fv-nav-default-item:hover{background:#9e9e9e33}.fv-NavigationPanel .panel-container-mobile .fv-nav-default-item:active{opacity:.8}.fv-NavigationPanel.compact{width:40px}.fv-NavigationPanel.compact .panel-container-mobile .fv-nav-default-item i.icon,.fv-NavigationPanel.compact .panel-container .fv-nav-default-item i.icon{width:30px}.fv-NavigationPanel.compact .panel-container-mobile .fv-nav-default-item p.name,.fv-NavigationPanel.compact .panel-container .fv-nav-default-item p.name,.fv-NavigationPanel.compact .panel-container-mobile span.search,.fv-NavigationPanel.compact .panel-container span.search{display:none}.fv-NavigationPanel.flyout{width:40px;overflow:visible}.fv-NavigationPanel.flyout .panel-container{position:absolute;left:0;top:0;border-top-right-radius:10px;border-bottom-right-radius:10px;box-shadow:0 3.2px 7.2px #0002,0 .6px 1.8px #0000001c}.fv-NavigationPanel.flyout.compact .panel-container{border-top-right-radius:0;border-bottom-right-radius:0}.fv-NavigationPanel.mobile{position:absolute;left:0;top:0}.fv-NavigationPanel.mobile .panel-container{padding-top:40px;border-top-right-radius:10px;border-bottom-right-radius:10px}.fv-NavigationPanel.mobile .panel-container .fv-nav-default-item.control{display:none}.fv-NavigationPanel.mobile .panel-container-mobile{display:flex}.fv-NavigationPanel.mobile .panel-container-mobile .fv-nav-default-item{width:40px;margin-left:0;justify-content:center;align-items:center}.fv-NavigationPanel.mobile.compact{width:80px;height:40px}.fv-NavigationPanel.mobile.compact .panel-container-mobile{max-width:80px;background:#efefef99}.fv-NavigationPanel.mobile.compact .panel-container-mobile *{display:flex}.fv-NavigationPanel.mobile.compact .panel-container{width:80px;height:40px;max-height:40px;padding:0}.fv-NavigationPanel.mobile.compact .panel-container *{display:none}.fv-NavigationPanel .zoom-in-top-enter-active,.fv-NavigationPanel .zoom-in-top-leave-active{opacity:1;transform:scaleY(1);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1);transform-origin:center top}.fv-NavigationPanel .zoom-in-top-enter,.fv-NavigationPanel .zoom-in-top-leave-active{opacity:0;transform:scaleY(0)}.fv-NavigationPanel.dark .panel-container{background:#000c}.fv-NavigationPanel.dark .panel-container span.search .nav-search{background:#4c4c4c99}.fv-NavigationPanel.dark .panel-container .fv-nav-default-item i.icon,.fv-NavigationPanel.dark .panel-container .fv-nav-default-item p.name{color:#f5f5f5}.fv-NavigationPanel.dark .panel-container .fv-nav-default-item:hover{background:#2f2f2fcc}.fv-NavigationPanel.dark .panel-container-mobile{background:#000c}.fv-NavigationPanel.dark .panel-container-mobile .fv-nav-default-item i.icon,.fv-NavigationPanel.dark .panel-container-mobile .fv-nav-default-item p.name{color:#f5f5f5}.fv-NavigationPanel.dark .panel-container-mobile .fv-nav-default-item:hover{background:#2f2f2fcc}.fv-NavigationPanel.dark.mobile.compact .panel-container-mobile{background:#0009}.fv-NavigationView .slider{position:absolute;left:0;top:0;width:auto;height:100%;overflow:hidden;z-index:1}.fv-NavigationView .slider .s{position:relative;width:3.8px;height:40px;margin:0;padding:12px 0;box-sizing:border-box;float:left}.fv-NavigationView .slider .s p{position:relative;width:100%;height:100%;margin:0;background:#005a9e;border-radius:3px}.fv-NavigationView .navigation-list{position:relative;width:100%;height:100%}.fv-NavigationView .navigation-list * ::-webkit-scrollbar{width:10px;height:8px}.fv-NavigationView .navigation-list * ::-webkit-scrollbar:hover{width:16px}.fv-NavigationView .navigation-list * ::-webkit-scrollbar-track{border-radius:10px}.fv-NavigationView .navigation-list * ::-webkit-scrollbar-thumb{border-right:rgba(191,190,189,.2) solid 5px;background-color:#bfbebd00;-webkit-transition:background-color .3s;transition:background-color .3s;cursor:pointer}.fv-NavigationView .navigation-list * ::-webkit-scrollbar-thumb:hover{border-radius:10px;border-color:transparent;background-color:#bfbebd99}.fv-NavigationView .navigation-list * ::-webkit-scrollbar-thumb:active{background-color:#bfbebd80}.fv-NavigationView .navigation-list * ::-webkit-scrollbar-thumb:horizontal{border-right:none;border-bottom:rgba(191,190,189,.2) solid 5px}.fv-NavigationView .navigation-list .list-view-item{padding:0}.fv-NavigationView .navigation-list .list-view-item:hover{background:#9e9e9e4d}.fv-NavigationView .navigation-list i.icon{position:relative;width:40px;height:100%;color:#000;display:flex;justify-content:center;align-items:center}.fv-NavigationView .navigation-list p.name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;position:relative;width:100%;height:100%;flex:1;margin:0;padding:0 12px;font-weight:400;color:#000;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-sizing:border-box;display:flex;justify-content:flex-start;align-items:center}.fv-NavigationView .navigation-list p.name.title{font-size:13.8px;font-weight:600}.fv-NavigationView.compact .navigation-list .list-view-item.header,.fv-NavigationView.compact .navigation-list p.name{display:none}.fv-NavigationView.dark .navigation-list .item:hover{background:#2524234d}.fv-NavigationView.dark .navigation-list i.icon,.fv-NavigationView.dark .navigation-list p.name{color:#f5f5f5}.fv-Pagination,.fv-Pagination .fv-pagination-container{position:relative;display:flex;justify-content:center;align-items:center}.fv-Pagination .fv-pagination-container .page-btn{width:35px;height:35px;margin:0 1.5px}.fv-Pagination .fv-pagination-container .page-btn.small{width:30px;height:30px}.fv-Pagination .fv-pagination-container .page-btn.shadow{box-shadow:0 3.2px 7.2px #0002,0 .6px 1.8px #0000001c}.fv-Panel{position:fixed;left:0;top:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;z-index:20}.fv-Panel .fv-panel-back-board{position:absolute;left:0;top:0;width:100%;height:100%;background:#ffffff73}.fv-Panel .fv-panel-container{position:absolute;top:0;right:0;width:340px;height:100%;background:#fff;display:flex;flex-direction:column;box-shadow:0 25.6px 57.6px #00000038,0 4.8px 14.4px #0000002e}.fv-Panel .fv-panel-container.near-side{left:0;right:none}.fv-Panel .fv-panel-container.central-side{position:relative;height:calc(100% - 20px);border-radius:8px}.fv-Panel .fv-panel-container.acrylic-style{background:#fff9;backdrop-filter:blur(25px);-webkit-backdrop-filter:blur(25px)}.fv-Panel .fv-panel-container .fv-panel-control-block{position:relative;width:100%;height:75px;padding:0 20px;box-sizing:border-box;display:flex;justify-content:space-between;align-items:center}.fv-Panel .fv-panel-container .fv-panel-control-block .panel-title{font-size:20px;font-weight:600;color:#323130}.fv-Panel .fv-panel-container .fv-panel-control-block .control-btn{position:relative;width:35px;height:35px;border-radius:6px;display:flex;justify-content:center;align-items:center}.fv-Panel .fv-panel-container .fv-panel-control-block .control-btn:hover{background:#0000000d}.fv-Panel .fv-panel-container .fv-panel-main-container{position:relative;width:100%;flex:1;box-sizing:border-box;display:flex;overflow:hidden}.fv-Panel .fv-panel-container .fv-panel-footer{position:relative;width:100%;height:80px;padding:15px 20px;background:#f5f5f599;border-top:rgba(36,36,36,.1) solid thin;box-sizing:border-box;display:flex;align-items:center}.fv-Panel .fv-panel-scale-down-to-down-enter-active{animation:scaleUpDown .3s ease both;animation-delay:.1s}.fv-Panel .fv-panel-scale-down-to-down-leave-active{animation:scaleDown .3s ease both}@keyframes scaleUpDown{0%{opacity:0;transform:scale(1.2)}}@keyframes scaleDown{to{opacity:0;transform:scale(.8)}}.fv-Panel .fv-panel-scale-up-to-up-enter-active{animation:scaleUp .3s ease both;animation-delay:.1s}.fv-Panel .fv-panel-scale-up-to-up-leave-active{animation:scaleDownUp .3s ease both}@keyframes scaleUp{0%{opacity:0;transform:scale(.8)}}@keyframes scaleDownUp{to{opacity:0;transform:scale(1.2)}}.fv-Panel.dark .fv-panel-back-board{background:#00000073}.fv-Panel.dark .fv-panel-container{background:#000}.fv-Panel.dark .fv-panel-container *{color:#f5f5f5}.fv-Panel.dark .fv-panel-container.acrylic-style{background:#0009;backdrop-filter:blur(25px);-webkit-backdrop-filter:blur(25px)}.fv-Panel.dark .fv-panel-container .fv-panel-control-block .panel-title{color:#f3f2f1}.fv-Panel.dark .fv-panel-container .fv-panel-control-block .control-btn{color:#a7a7a7}.fv-Panel.dark .fv-panel-container .fv-panel-control-block .control-btn:hover{background:#7878784d;color:#f5f5f5}.fv-Panel.dark .fv-panel-container .fv-panel-footer{background:#38383899}.fv-Persona{position:relative;box-sizing:border-box;display:flex;align-items:center}.fv-Persona div.persona-avatar{position:relative;width:40px;height:40px;display:flex;-webkit-user-select:none;-moz-user-select:none;user-select:none}.fv-Persona div.persona-avatar .persona-bg{position:absolute;left:1px;top:1px;width:calc(100% - 2px);height:calc(100% - 2px);color:#f5f5f5;border-radius:50%;display:flex;justify-content:center;align-items:center}.fv-Persona div.persona-avatar .status-icon{position:absolute;right:0;bottom:0;width:33.3%;height:33.3%;background:#fff;border-radius:50%;box-sizing:border-box;display:flex;justify-content:center;align-items:center}.fv-Persona .persona-content-block{position:relative;padding:0 12px;box-sizing:border-box;display:flex;flex-direction:column}.fv-Persona .persona-content-block .persona-title{font-weight:400;color:#323130}.fv-Persona .persona-content-block .persona-title p{margin:0;padding:0}.fv-Persona .persona-content-block .persona-secondary{font-size:12px;font-weight:400;color:#605e5c}.fv-Persona .persona-content-block .persona-secondary p{margin:0;padding:0}.fv-Persona.dark div.persona-avatar .status-icon{background:#000}.fv-Persona.dark .persona-content-block .persona-title{color:#fff}.fv-Persona.dark .persona-content-block .persona-secondary{color:#f5f5f5}.fv-Pivot{position:relative;width:auto;height:45px;border-radius:3px;overflow:auto;overflow-y:hidden}.fv-Pivot.tab .pivot-container{z-index:1}.fv-Pivot.tab .pivot-container .pivot-item.choose p{color:#f5f5f5}.fv-Pivot.tab .slider{top:2.5px;bottom:none;height:calc(100% - 5px);z-index:0}.fv-Pivot.tab .slider .fv-pivot-s{height:100%;padding:0}.fv-Pivot.tab .slider .fv-pivot-s.is-boxshadow{box-shadow:0 3px 3px #0000004d}.fv-Pivot .pivot-container{position:relative;width:100%;height:100%;display:flex;overflow-x:overlay;z-index:0}.fv-Pivot .pivot-container .pivot-item{position:relative;height:100%;padding:0 3px;flex-shrink:0;box-sizing:border-box;display:flex;justify-content:center;align-items:center}.fv-Pivot .pivot-container .pivot-item p{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;font-size:18px;font-weight:600;color:#323130;opacity:.8;-webkit-user-select:none;-moz-user-select:none;user-select:none;transition:all .1s;cursor:default}.fv-Pivot .pivot-container .pivot-item:hover p,.fv-Pivot .pivot-container .pivot-item.choose p{opacity:1}.fv-Pivot .pivot-container .pivot-item.disabled{filter:grayscale(1);opacity:.6}.fv-Pivot .pivot-container .pivot-item.disabled:hover p{opacity:.8}.fv-Pivot .slider{position:absolute;left:0;bottom:0;width:100%;height:auto;overflow:hidden;z-index:1}.fv-Pivot .slider .fv-pivot-s{position:relative;width:60px;height:3px;margin:0;padding:0 12px;box-sizing:border-box;float:left}.fv-Pivot .slider .fv-pivot-s p{position:relative;width:100%;height:100%;margin:0;background:#005a9e;border-radius:3px}.fv-Pivot.dark .pivot-container{z-index:1}.fv-Pivot.dark .pivot-container .pivot-item p{color:#f5f5f5}.fv-Pivot.dark.tab .pivot-container .pivot-item.choose p{color:#000}.fv-Pivot.dark.tab .pivot-container .pivot-item p{color:#f5f5f5}.fv-Pivot.dark .slider .fv-pivot-s p{background:#76b9ed}.fv-ProgressBar{position:relative;width:300px;height:5px;box-sizing:border-box;display:flex;justify-content:center;align-items:center;overflow:visible;transition:all .2s;-webkit-transition:all .2s}.fv-ProgressBar.normal{background:#78787859;justify-content:flex-start}.fv-ProgressBar.normal i{height:100%;background:#005a9ecc;transition:all .8s;transition-timing-function:cubic-bezier(.785,.135,.15,.86);-webkit-transition:all .8s}.fv-ProgressBar.disabled{opacity:.3;filter:grayscale(1)}.fv-ProgressBar p.unit{position:absolute;left:calc(50% - 2.5px);top:calc(50% - 2.5px);width:5px;height:5px;margin:0;background:#6495ed;border-radius:50%;opacity:0;animation:progressbar 6s infinite}.fv-ProgressBar p.unit:nth-of-type(1){animation-delay:.16s}.fv-ProgressBar p.unit:nth-of-type(2){animation-delay:.32s}.fv-ProgressBar p.unit:nth-of-type(3){animation-delay:.48s}.fv-ProgressBar p.unit:nth-of-type(4){animation-delay:.64s}.fv-ProgressBar p.unit:nth-of-type(5){animation-delay:.8s}@keyframes progressbar{0%{opacity:0;margin-left:-100%}50%{opacity:1;margin-left:0%}to{opacity:0;margin-left:100%}}.fv-progress-bar.light{--fv-progress-bar-normal-color: initial;--fv-progress-bar-warning-color: initial;--fv-progress-bar-error-color: initial;--fv-progress-bgcolor: initial}.fv-progress-bar.light .label .indeterminate.running .bar{background:var(--fv-progress-bar-normal-color, rgb(var(--fv-primary-bgcolor)))}.fv-progress-bar.light .label .indeterminate.pause .bar{background:var(--fv-progress-bar-warning-color, rgb(var(--fv-warning-bgcolor)))}.fv-progress-bar.light .label .indeterminate.error .bar{background:var(--fv-progress-bar-error-color, rgb(var(--fv-error-bgcolor)))}.fv-progress-bar.light .label .determinate.running .bar{background:var(--fv-progress-bar-normal-color, rgb(var(--fv-primary-bgcolor)))}.fv-progress-bar.light .label .determinate.pause .bar{background:var(--fv-progress-bar-warning-color, rgb(var(--fv-warning-bgcolor)))}.fv-progress-bar.light .label .determinate.error .bar{background:var(--fv-progress-bar-error-color, rgb(var(--fv-error-bgcolor)))}.fv-progress-bar.light .label .determinate .bg .bg-bar{background:var(--fv-progress-bgcolor, var(--fv-dark-bgcolor))}.fv-ProgressRing .progress-rotate{transform:rotate(-90deg);transform-origin:50% 50%}.fv-ProgressRing .fv-progressRing-legacy{position:relative;width:150px;height:150px;display:flex;justify-content:center;align-items:center}.fv-ProgressRing .fv-progressRing-legacy p{position:absolute;width:10px;height:10px;margin-left:-50px;margin-top:-50px;background:#6495ed;border-radius:50%;opacity:0;transform-origin:50px 50px;animation:fv-progressring 4s infinite ease-in-out}.fv-ProgressRing .fv-progressRing-legacy p:nth-of-type(1){animation:fv-progressring 4s infinite ease-in-out;animation-delay:.12s}.fv-ProgressRing .fv-progressRing-legacy p:nth-of-type(2){animation:fv-progressring 4s infinite ease-in-out;animation-delay:.24s}.fv-ProgressRing .fv-progressRing-legacy p:nth-of-type(3){animation:fv-progressring 4s infinite ease-in-out;animation-delay:.36s}.fv-ProgressRing .fv-progressRing-legacy p:nth-of-type(4){animation:fv-progressring 4s infinite ease-in-out;animation-delay:.48s}.fv-ProgressRing .fv-progressRing-legacy p:nth-of-type(5){animation:fv-progressring 4s infinite ease-in-out;animation-delay:.6s}.fv-ProgressRing .fv-progressRing-legacy.l{width:105px;height:105px}.fv-ProgressRing .fv-progressRing-legacy.l p{width:8px;height:8px;margin-left:-35px;margin-top:-35px;transform-origin:35px 35px}.fv-ProgressRing .fv-progressRing-legacy.m{width:75px;height:75px}.fv-ProgressRing .fv-progressRing-legacy.m p{width:6px;height:6px;margin-left:-25px;margin-top:-25px;transform-origin:25px 25px}.fv-ProgressRing .fv-progressRing-legacy.s{width:45px;height:45px}.fv-ProgressRing .fv-progressRing-legacy.s p{width:5px;height:5px;margin-left:-15px;margin-top:-15px;transform-origin:15px 15px}.fv-ProgressRing .fv-progressRing-legacy.xs{width:24px;height:24px}.fv-ProgressRing .fv-progressRing-legacy.xs p{width:3px;height:3px;margin-left:-8px;margin-top:-8px;transform-origin:8px 8px}@keyframes fv-progressring{0%{opacity:1;transform:rotate(-30deg)}60%{opacity:1}80%{opacity:0;transform:rotate(520deg)}to{opacity:1;transform:rotate(690deg)}}.fv-progress-ring.light{--fv-progress-ring-primary-color: initial;--fv-progress-ring-warning-color: initial;--fv-progress-ring-error-color: initial}.fv-progress-ring.light.running .label .svg .bar{stroke:var(--fv-progress-ring-primary-color, rgb(var(--fv-primary-bgcolor)))}.fv-progress-ring.light.pause .label .svg .bar{stroke:var(--fv-progress-ring-warning-color, rgb(var(--fv-warning-bgcolor)))}.fv-progress-ring.light.error .label .svg .bar{stroke:var(--fv-progress-ring-error-color, rgb(var(--fv-error-bgcolor)))}.fv-Radio{position:relative;display:flex;min-width:20px;min-height:20px;height:auto;flex-shrink:0;box-sizing:border-box;align-content:space-between;align-items:center;cursor:pointer}.fv-Radio .fv-radio-button{position:relative;height:20px;width:20px;border-radius:50%;border:1px solid #afafaf;margin:0;padding:0;box-sizing:border-box;display:flex;justify-content:center;align-items:center;cursor:pointer;outline:none;transition:all .3s}.fv-Radio .fv-radio-button:hover{border-color:#828282}.fv-Radio .fv-radio-button:active{background-color:#9999994d;border-color:#828282}.fv-Radio .fv-radio-button:before{content:"";position:absolute;box-sizing:border-box;height:50%;width:50%;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%)}.fv-Radio .fv-radio-button.actived{background-color:#0078d4;border:none}.fv-Radio .fv-radio-button.actived.disabled{background-color:#afafaf;filter:grayscale(1);opacity:.6}.fv-Radio .fv-radio-button.actived:before{background-color:#fff}.fv-Radio .fv-radio-label{position:relative;height:20px;margin:0 8px;display:flex;flex-direction:column;justify-content:center;align-items:center}.fv-Radio .fv-radio-label span{display:inline-block;height:100%;font-size:16px;line-height:20px}.fv-Radio.with-icon{position:relative;box-sizing:border-box;padding:20px;width:80px;height:80px;background:#fff;border:1px solid transparent;border-radius:6px;justify-content:center;align-items:center;cursor:pointer;transition:all .3s}.fv-Radio.with-icon .fv-radio-button{position:absolute;display:none;margin:0;top:4px;right:4px}.fv-Radio.with-icon .fv-radio-button.actived{display:inline-block}.fv-Radio.with-icon:hover{border-color:transparent;box-shadow:0 1px 3px #0000001a}.fv-Radio.with-icon:hover .fv-radio-button{display:inline-block;border:1px solid rgba(58,57,56,.165)}.fv-Radio.with-icon:hover.disabled{border-color:transparent;filter:grayscale(1);opacity:.6}.fv-Radio.with-icon:hover.disabled .fv-radio-button{border:none}.fv-Radio.with-icon.actived{border-color:#0078d4d3}.fv-Radio.with-icon.actived .fv-radio-button{border:none}.fv-Radio.with-icon .fv-radio-label{display:flex;flex-direction:column;align-items:center;height:64px}.fv-Radio.with-icon .fv-radio-label .with-icon{display:block;font-size:20px}.fv-Radio.with-icon .fv-radio-label span{width:100%;height:auto;margin-top:5px;font-size:12px;font-weight:700;display:block;overflow:hidden}.fv-Radio.with-icon .fv-radio-label img{height:20px;width:20px}.fv-Radio.disabled{color:#b2b1af;filter:grayscale(1);opacity:.6;cursor:not-allowed}.fv-Radio.disabled .fv-radio-button:hover{border-color:transparent}.fv-Radio.dark{color:#faf9f8}.fv-Radio.dark .fv-radio-button{border-color:#6f6f6f}.fv-Radio.dark .fv-radio-button:before{display:none}.fv-Radio.dark .fv-radio-button:hover{border-color:#aaa}.fv-Radio.dark .fv-radio-button:active{background-color:#666;border:1px solid rgb(236,236,236)}.fv-Radio.dark .fv-radio-button.actived:before{display:block}.fv-Radio.dark.with-icon{background-color:#252423}.fv-Radio.dark.with-icon:hover,.fv-Radio.dark.with-icon:hover .fv-radio-button{border:1px solid #f3f2f1}.fv-Radio.dark.with-icon.actived{border:1px solid rgb(118,185,237)}.fv-Radio.dark.with-icon.actived .fv-radio-button{border:none}.fv-Radio.dark.disabled{color:#636160}.fv-RadioGroup{position:relative;height:auto;line-height:2;display:flex;flex-direction:column}.fv-RadioGroup.inline{flex-direction:row}.fv-RadioGroup label{height:auto;margin-right:15px;display:flex;align-items:center}.fv-RadioGroup .row-block{margin:3px 0;display:flex;flex-direction:row;align-items:center;justify-content:flex-start}.fv-RadioGroup .fv-light-radio,.fv-RadioGroup .fv-dark-radio{margin:3px}.fv-RadioGroup.dark{color:#fff;background-color:#000}.fv-RatingControl .fv-rating-container{position:relative;width:auto;display:flex;align-items:center}.fv-RatingControl .fv-rating-container .fv-rating-unit{position:relative;margin:0 5px;color:#2b2b2b;display:flex;justify-content:center;align-items:center}.fv-RatingControl .fv-rating-container .fv-rating-unit .fv-rating-mask{position:absolute;left:0;top:0;width:100%;height:100%;display:flex;justify-content:flex-start;align-items:center;overflow:hidden}.fv-RatingControl .fv-rating-container .fv-rating-unit .fv-rating-mask i{color:#00629e}.fv-RatingControl.dark .fv-rating-container .fv-rating-unit{color:#c8c8c8}.fv-RatingControl.dark .fv-rating-container .fv-rating-unit .fv-rating-mask i{color:#76b9ed}.fv-RevealContainer{position:relative;width:120px;height:50px;display:flex;justify-content:center;align-items:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;overflow:hidden}.fv-SearchBox{position:relative;width:300px;height:32px;background:#fffc;border-radius:3px;border:none;box-sizing:border-box;display:flex;-webkit-appearance:none;transition:all .3s;overflow:visible}.fv-SearchBox.warn .search-box-wrapper-container{border:rgb(173,38,45) solid thin}.fv-SearchBox.correct .search-box-wrapper-container{border:rgb(0,204,153) solid thin}.fv-SearchBox.shadow{box-shadow:#0002 0 1px 1px,#0000001c 0 .6px 1.8px}.fv-SearchBox.focus .search-box-wrapper-container{border:rgba(36,36,36,.1) solid thin}.fv-SearchBox.focus.underline .search-box-wrapper-container{border:rgb(0,90,158) solid thin;border-left-color:transparent;border-top-color:transparent;border-right-color:transparent}.fv-SearchBox.focus div.search-box-container{margin:0}.fv-SearchBox.underline .search-box-wrapper-container{border:rgb(36,36,36) solid thin;border-left-color:transparent;border-top-color:transparent;border-right-color:transparent}.fv-SearchBox.disabled{background:#f3f2f1;border-color:transparent;filter:grayscale(1)}.fv-SearchBox.disabled div.search-box-container .input,.fv-SearchBox.disabled .icon-block{opacity:.5}.fv-SearchBox .fv-search-box-reveal-container{position:absolute;left:0;top:0;width:100%;height:100%}.fv-SearchBox .search-box-wrapper-container{position:relative;width:100%;height:100%;border:rgba(36,36,36,.1) solid thin;box-sizing:border-box;display:flex;justify-content:space-between;align-items:center;-webkit-appearance:none;transition:all .3s;overflow:visible}.fv-SearchBox .search-box-wrapper-container .icon-block{position:relative;width:30px;height:20px;padding:0 3px;margin-right:3px;font-size:12px;border-radius:3px;box-sizing:border-box;display:flex;justify-content:center;align-items:center;cursor:default}.fv-SearchBox .search-box-wrapper-container .icon-block:hover{background:#c8c8c81a}.fv-SearchBox .search-box-wrapper-container .icon-block:active{opacity:.8}.fv-SearchBox .search-box-wrapper-container div.search-box-placeholder{position:relative;width:auto;max-width:50%;height:100%;padding:3px;box-sizing:border-box;display:flex;justify-content:flex-start;align-items:center;overflow:hidden}.fv-SearchBox .search-box-wrapper-container div.search-box-container{position:relative;width:100%;height:100%;padding:0 8px;flex:1;box-sizing:border-box;transition:all .3s;display:flex}.fv-SearchBox .search-box-wrapper-container div.search-box-container.internal{margin:0;padding:0}.fv-SearchBox .search-box-wrapper-container div.search-box-container .input{position:relative;width:100%;height:100%;background:transparent;border:none;outline:none}.fv-SearchBox .search-box-wrapper-container div.search-box-container .input::-moz-placeholder{-moz-user-select:none;-webkit-user-select:none;user-select:none}.fv-SearchBox .search-box-wrapper-container div.search-box-container .input::placeholder{-webkit-user-select:none;-moz-user-select:none;user-select:none}.fv-SearchBox .search-result-container{position:absolute;left:0;top:100%;width:100%;height:auto;max-height:350px;padding:3px 0;background:#efefefcc;border:rgba(0,0,0,.1) solid thin;border-radius:0 0 5px 5px;box-sizing:border-box;display:flex;justify-content:flex-start;align-items:flex-start;box-shadow:0 6.4px 14.4px #0002,0 1.2px 3.6px #0000001c;overflow-x:hidden;overflow-y:auto;backdrop-filter:blur(25px);-webkit-backdrop-filter:blur(25px);transition:all .3s;z-index:2}.fv-SearchBox .search-result-container ::-webkit-scrollbar{width:10px;height:8px}.fv-SearchBox .search-result-container ::-webkit-scrollbar:hover{width:16px}.fv-SearchBox .search-result-container ::-webkit-scrollbar-track{border-radius:10px}.fv-SearchBox .search-result-container ::-webkit-scrollbar-thumb{border-right:rgba(191,190,189,.2) solid 5px;background-color:#bfbebd00;-webkit-transition:background-color .3s;transition:background-color .3s;cursor:pointer}.fv-SearchBox .search-result-container ::-webkit-scrollbar-thumb:hover{border-radius:10px;border-color:transparent;background-color:#bfbebd99}.fv-SearchBox .search-result-container ::-webkit-scrollbar-thumb:active{background-color:#bfbebd80}.fv-SearchBox .search-result-container ::-webkit-scrollbar-thumb:horizontal{border-right:none;border-bottom:rgba(191,190,189,.2) solid 5px}.fv-SearchBox .search-result-container .list-item{position:relative;width:100%;height:45px;padding:0 12px;color:#000;box-sizing:border-box;display:flex;justify-content:flex-start;align-items:center}.fv-SearchBox .search-result-container .list-title{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;font-size:13.8px;font-weight:600;color:#323130cc;-webkit-user-select:none;-moz-user-select:none;user-select:none}.fv-SearchBox .zoom-in-top-enter-active,.fv-SearchBox .zoom-in-top-leave-active{opacity:1;transform:scaleY(1);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1);transform-origin:center top}.fv-SearchBox .zoom-in-top-enter,.fv-SearchBox .zoom-in-top-leave-active{opacity:0;transform:scaleY(0)}.fv-SearchBox.dark{background:#c8c8c81a}.fv-SearchBox.dark:hover .search-box-wrapper-container,.fv-SearchBox.dark.focus .search-box-wrapper-container{border:rgba(120,120,120,.1) solid thin}.fv-SearchBox.dark.underline .search-box-wrapper-container{border:rgba(120,120,120,.1) solid thin;border-left-color:transparent;border-top-color:transparent;border-right-color:transparent}.fv-SearchBox.dark.underline.focus .search-box-wrapper-container{border-color:#76b9ed;border-left-color:transparent;border-top-color:transparent;border-right-color:transparent}.fv-SearchBox.dark.disabled{background:#302f2e}.fv-SearchBox.dark.disabled:hover{border-color:transparent}.fv-SearchBox.dark .icon-block{color:#f3f2f1}.fv-SearchBox.dark .search-box-wrapper-container{border:rgba(120,120,120,.1) solid thin}.fv-SearchBox.dark .search-box-wrapper-container div.search-box-container .input{color:#f3f2f1}.fv-SearchBox.dark .search-box-wrapper-container div.search-box-container .input::-moz-placeholder{color:#c8c8c8}.fv-SearchBox.dark .search-box-wrapper-container div.search-box-container .input::placeholder{color:#c8c8c8}.fv-SearchBox.dark .search-result-container{background:#000c}.fv-SearchBox.dark .search-result-container .list-item{color:#f5f5f5}.fv-SearchBox.dark .search-result-container .list-title{color:#efefefcc}.fv-Shimmer{position:relative;width:auto;height:auto}.fv-Shimmer div.shimmer-container{position:relative;visibility:hidden;overflow:visible}.fv-Shimmer div.shimmer-container *{visibility:hidden}.fv-Shimmer div.shimmer-container div.sample{position:relative;width:300px;height:25px;background:#f5f5f5;border-radius:5px;visibility:visible}.fv-Shimmer.dark div.shimmer-container div.sample{background:#252423}.fv-Slider{position:relative;display:inline-flex;height:50px;width:300px;justify-content:space-between;align-items:center}.fv-Slider .fv-slider__bar.disabled{cursor:not-allowed}.fv-Slider .fv-slider__bar.disabled .fv-slider__button{color:#999}.fv-Slider:hover .fv-slider__bar.disabled{cursor:not-allowed}.fv-Slider:hover .fv-slider__bar.disabled .fv-slider__bar-bg{background-color:#d6d5d4}.fv-Slider:hover .fv-slider__bar.disabled .fv-slider__button{color:#999}.fv-Slider.vertical{min-height:100px;width:50px;flex-direction:column}.fv-Slider .fv-slider__scale-up,.fv-Slider .fv-slider__scale-down{position:absolute}.fv-Slider .fv-slider__bar{position:relative;height:4px;width:100%;border-radius:20px;cursor:pointer}.fv-Slider .fv-slider__bar .fv-slider__bar-bg{position:absolute;height:100%;width:100%;border-radius:inherit}.fv-Slider .fv-slider__bar .fv-slider__button{position:absolute;height:25px;width:25px;font-size:25px;cursor:pointer}.fv-Slider .fv-slider__bar .fv-slider__button.disabled{cursor:not-allowed}.fv-Slider .fv-slider__bar .fv-slider__progress{position:absolute;height:100%;border-radius:2.5px}.fv-Slider .fv-slider__bar .fv-slider__progress.anime,.fv-Slider .fv-slider__bar .fv-slider__button.anime{transition-duration:.3s;transition-timing-function:ease-in-out}.fv-Slider .fv-slider__bar.vertical{width:4px;min-height:80px}.fv-Slider .fv-slider__bar.vertical .fv-slider__bar-bg{height:100%;width:4px}.fv-Slider .fv-slider__bar.vertical .fv-slider__progress{width:4px}.fv-Slider .fv-slider__label{height:25px;width:25px;padding:0 5px}.fv-Slider.light .fv-slider__bar .fv-slider__bar-bg{background-color:#d6d5d4}.fv-Slider.light .fv-slider__bar .fv-slider__button{color:#0075d1}.fv-Slider.light .fv-slider__bar .fv-slider__scale-up,.fv-Slider.light .fv-slider__bar .fv-slider__scale-down{background-color:#999c}.fv-Slider.light .fv-slider__bar .fv-slider__progress{background-color:#0075d1}.fv-Slider.light:hover .fv-slider__bar .fv-slider__bar-bg{background-color:#deecf9}.fv-Slider.light:hover .fv-slider__bar .fv-slider__button,.fv-Slider.light.active .fv-slider__bar .fv-slider__button{color:#0075d1}.fv-Slider.dark,.fv-Slider.dark .fv-slider__bar.disable{color:#fff}.fv-Slider.dark .fv-slider__bar .fv-slider__bar-bg{background-color:#999}.fv-Slider.dark .fv-slider__bar .fv-slider__button{color:#76b9ed}.fv-Slider.dark .fv-slider__bar .fv-slider__scale-up,.fv-Slider.dark .fv-slider__bar .fv-slider__scale-down{background-color:#fff}.fv-Slider.dark .fv-slider__bar .fv-slider__progress{background-color:#76b9ed}.fv-Slider.dark:hover .fv-slider__bar .fv-slider__bar-bg{background-color:#d6d5d4}.fv-Slider.dark:hover .fv-slider__bar .fv-slider__button{color:#59c4ff}.fv-Slider.dark.active .fv-slider__bar{background-color:#999}.fv-Slider.dark.active .fv-slider__bar .fv-slider__button{color:#76b9ed}.fv-SwipeControl{position:relative;width:200px;height:50px;box-sizing:border-box;display:flex;align-items:center;overflow:hidden}.fv-SwipeControl .fv-swiper-container{position:relative;width:100%;height:100%;box-sizing:border-box;display:flex;align-items:center;overflow:hidden}.fv-SwipeControl .fv-swiper-container .fv-SwipeControl-left{position:relative;width:100px;height:100%;flex-shrink:0;box-sizing:border-box;flex-direction:row-reverse;display:flex;align-items:center}.fv-SwipeControl .fv-swiper-container .fv-SwipeControl-left .fv-SwipeControl-btn{justify-content:flex-end}.fv-SwipeControl .fv-swiper-container .fv-SwipeControl-main,.fv-SwipeControl .fv-swiper-container .fv-SwipeControl-right{position:relative;width:100%;height:100%;flex-shrink:0;box-sizing:border-box;display:flex;align-items:center}.fv-SwipeControl .fv-swiper-container .fv-SwipeControl-btn{position:relative;width:100%;height:100%;color:#f5f5f5;box-sizing:border-box;display:flex;justify-content:flex-start;align-items:center;transition:all .3s}.fv-SwipeControl .fv-swiper-container .fv-SwipeControl-btn .fv-SwipeControl-btn-content-block{position:relative;width:100%;height:100%;display:flex;justify-content:center;align-items:center;transition:width .1s}.fv-SwipeControl .fv-swiper-container .fv-SwipeControl-btn:hover.info{background:#0078d4cc}.fv-SwipeControl .fv-swiper-container .fv-SwipeControl-btn:hover.correct{background:#5fd255cc}.fv-SwipeControl .fv-swiper-container .fv-SwipeControl-btn:hover.delete{background:#eb5545cc}.fv-SwipeControl .fv-swiper-container .fv-SwipeControl-btn:hover.tool{background:#5d5cdecc}.fv-SwipeControl .fv-swiper-container .fv-SwipeControl-btn:hover.warning{background:#f8b04bcc}.fv-SwipeControl .fv-swiper-container .fv-SwipeControl-btn:active.info{background:#0078d4e6}.fv-SwipeControl .fv-swiper-container .fv-SwipeControl-btn:active.correct{background:#5fd255e6}.fv-SwipeControl .fv-swiper-container .fv-SwipeControl-btn:active.delete{background:#eb5545e6}.fv-SwipeControl .fv-swiper-container .fv-SwipeControl-btn:active.tool{background:#5d5cdee6}.fv-SwipeControl .fv-swiper-container .fv-SwipeControl-btn:active.warning{background:#f8b04be6}.fv-SwipeControl .fv-swiper-container .fv-SwipeControl-btn.info{background:#0078d4}.fv-SwipeControl .fv-swiper-container .fv-SwipeControl-btn.correct{background:#5fd255}.fv-SwipeControl .fv-swiper-container .fv-SwipeControl-btn.delete{background:#eb5545}.fv-SwipeControl .fv-swiper-container .fv-SwipeControl-btn.tool{background:#5d5cde}.fv-SwipeControl .fv-swiper-container .fv-SwipeControl-btn.warning{background:#f8b04b}@font-face{font-family:swiper-icons;src:url(data:application/font-woff;charset=utf-8;base64,\ d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA);font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;box-sizing:content-box}.swiper-android .swiper-slide,.swiper-wrapper{transform:translateZ(0)}.swiper-pointer-events{touch-action:pan-y}.swiper-pointer-events.swiper-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden .swiper-slide{transform:translateZ(0);backface-visibility:hidden}.swiper-3d,.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-cube-shadow,.swiper-3d .swiper-slide,.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top,.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-3d .swiper-slide-shadow{background:#00000026}.swiper-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left,#00000080,#0000)}.swiper-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right,#00000080,#0000)}.swiper-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top,#00000080,#0000)}.swiper-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,#00000080,#0000)}.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-horizontal.swiper-css-mode>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-vertical.swiper-css-mode>.swiper-wrapper{scroll-snap-type:y mandatory}.swiper-centered>.swiper-wrapper:before{content:"";flex-shrink:0;order:9999}.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}.swiper-centered.swiper-horizontal>.swiper-wrapper:before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}.swiper-centered.swiper-vertical>.swiper-wrapper:before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center}.fv-Tag{position:relative;display:flex}.fv-Tag .fv-tag-item{position:relative;width:auto;height:25px;flex-shrink:0;margin:0 3px;padding:3px 5px;font-size:15px;background:#196aa71a;border:rgba(25,106,167,.1) solid thin;color:#196aa7;border-radius:3px;transition:all .3s;display:flex;justify-content:center;align-items:center}.fv-Tag .fv-tag-item.success{background:#00cc991a;border-color:rgba(0,204,153,.1) solid thin;color:#0c9}.fv-Tag .fv-tag-item.warning{background:#ffc80a1a;border-color:rgba(255,200,10,.1) solid thin;color:#ffc80a}.fv-Tag .fv-tag-item.error{background:#ad262d1a;border-color:rgba(173,38,45,.1) solid thin;color:#ad262d}.fv-Tag .fv-tag-item.medium{height:20px;font-size:13.8px}.fv-Tag .fv-tag-item.small{height:15px;font-size:13px}.fv-Tag .fv-tag-item.xsmall{height:12px;font-size:12px}.fv-Tag .fv-tag-item.disabled{filter:grayscale(1);opacity:.6}.fv-Tag .fv-tag-item .fv-tag-icon{position:relative;width:20px;height:20px;padding:3px;margin-left:5px;font-size:12px;border-radius:50%;box-sizing:border-box;display:flex;justify-content:center;align-items:center}.fv-Tag .fv-tag-item .fv-tag-icon:hover{background:#2424241a}.fv-Tag .fv-tag-item .fv-tag-content{position:relative;width:auto;height:100%;box-sizing:border-box;display:flex;justify-content:center;align-items:center}.fv-Tag .fv-tag-item.controller:hover{opacity:.8}.fv-Tag .fv-tag-item.controller .fv-tag-icon{margin-left:0;margin-right:5px}.fv-Tag .fv-tag-item.controller .fv-tag-icon:hover{background:transparent}.fv-Tag .fv-tag-item.controller .fv-tag-content{-webkit-user-select:none;-moz-user-select:none;user-select:none}.fv-Tag.dark .fv-tag-item{background:#76b9ed;border-color:rgb(118,185,237) solid thin;color:#f5f5f5}.fv-Tag.dark .fv-tag-item.success{background:#0c9;border-color:rgb(0,204,153) solid thin;color:#f5f5f5}.fv-Tag.dark .fv-tag-item.warning{background:#ffc80a;border-color:rgb(255,200,10) solid thin;color:#f5f5f5}.fv-Tag.dark .fv-tag-item.error{background:#ad262d;border-color:rgb(173,38,45) solid thin;color:#f5f5f5}.fv-Tag.dark .fv-tag-item .fv-tag-icon{color:#f5f5f5}.fv-Tag.dark .fv-tag-item .fv-tag-icon:hover{background:#dcdcdc4d}.fv-TextBox{position:relative;width:300px;height:32px;background:#fff;border:none;border-radius:2px;box-sizing:border-box;display:flex;justify-content:space-between;align-items:center;-webkit-appearance:none;overflow:hidden}.fv-TextBox.warn .fv-text-box-wrapper-container{border:rgb(173,38,45) solid thin}.fv-TextBox.correct .fv-text-box-wrapper-container{border:rgb(0,204,153) solid thin}.fv-TextBox.shadow{box-shadow:#0002 0 1px 1px,#0000001c 0 .6px 1.8px}.fv-TextBox.focus div.text-box-container,.fv-TextBox.focus div.fix-block{margin:0}.fv-TextBox.underline .fv-text-box-wrapper-container{border:rgb(0,90,158) solid thin;border-left:none;border-top:none;border-right:none}.fv-TextBox.underline .fv-text-box-wrapper-container div.fix-block{background:transparent}.fv-TextBox.underline .fv-text-box-wrapper-container div.fix-block p{font-weight:600;color:#323130;cursor:default}.fv-TextBox.disabled{background:#f3f2f1;border-color:transparent}.fv-TextBox.disabled .fv-text-box-wrapper-container div.text-box-container .fv-text-box-input,.fv-TextBox.disabled .fv-text-box-wrapper-container div.fix-block p,.fv-TextBox.disabled .fv-text-box-wrapper-container .icon-block{opacity:.5}.fv-TextBox .fv-text-box-reveal-container{position:absolute;left:0;top:0;width:100%;height:100%}.fv-TextBox .fv-text-box-wrapper-container{position:relative;width:100%;height:100%;border:rgba(36,36,36,.1) solid thin;box-sizing:border-box;display:flex;justify-content:space-between;align-items:center;-webkit-appearance:none;overflow:hidden}.fv-TextBox .fv-text-box-wrapper-container div.fix-block{position:relative;height:100%;margin:1px;padding:0 10px;background:#f3f2f1;font-size:13.5px;display:flex;justify-content:center;align-items:center;-webkit-user-select:none;-moz-user-select:none;user-select:none}.fv-TextBox .fv-text-box-wrapper-container div.fix-block p{color:#605e5c}.fv-TextBox .fv-text-box-wrapper-container .icon-block{position:relative;width:30px;height:100%;padding:0 10px;font-size:12px;box-sizing:border-box;display:flex;justify-content:center;align-items:center;cursor:text}.fv-TextBox .fv-text-box-wrapper-container div.text-box-container{position:relative;width:100%;height:100%;margin:1px;padding:0 8px;flex:1;box-sizing:border-box;display:flex}.fv-TextBox .fv-text-box-wrapper-container div.text-box-container.internal{margin:0;padding:0}.fv-TextBox .fv-text-box-wrapper-container div.text-box-container .fv-text-box-input{position:relative;width:100%;height:100%;background:transparent;border:none;outline:none}.fv-TextBox .fv-text-box-wrapper-container div.text-box-container .fv-text-box-input::-moz-placeholder{-moz-user-select:none;-webkit-user-select:none;user-select:none}.fv-TextBox .fv-text-box-wrapper-container div.text-box-container .fv-text-box-input::placeholder{-webkit-user-select:none;-moz-user-select:none;user-select:none}.fv-text-box{--fv-text-box-hover-border-color: initial;--fv-text-box-error-border-color: initial;--fv-text-box-warning-border-color: initial}.fv-text-box.light{background:var(--fv-light-bgcolor-4);border-top-color:var(--fv-light-bgcolor);border-left-color:var(--fv-light-bgcolor);border-right-color:var(--fv-light-bgcolor);border-bottom-color:var(--fv-light-border-color)}.fv-text-box.light .fv-text-box--input{background:none}.fv-text-box.light:hover{border-bottom-color:var(--fv-text-box-hover-border-color, rgba(var(--fv-primary-color), .8));border-bottom-width:2px}.fv-text-box.light:focus-within{background:var(--fv-dark-color);border-bottom-color:var(--fv-text-box-hover-border-color, rgba(var(--fv-primary-color), .8));border-bottom-width:2px}.fv-text-box.light.disabled{border-bottom-color:var(--fv-light-bgcolor);border-bottom-width:1px;opacity:.8}.fv-text-box.light.fv-text-box--warning{border-color:var(--fv-text-box-warning-border-color, rgba(var(--fv-warning-color), .8))}.fv-text-box.light.fv-text-box--error{border-color:var(--fv-text-box-error-border-color, rgba(var(--fv-error-color), .8))}.fv-TextBox.dark{background:transparent}.fv-TextBox.dark.focus .fv-text-box-wrapper-container{border:rgb(36,36,36) solid thin}.fv-TextBox.dark.underline .fv-text-box-wrapper-container{border-left:none;border-top:none;border-right:none}.fv-TextBox.dark.underline .fv-text-box-wrapper-container div.fix-block{background:transparent}.fv-TextBox.dark.underline .fv-text-box-wrapper-container div.fix-block p{color:#f3f2f1}.fv-TextBox.dark.disabled{background:#302f2e;border-color:transparent}.fv-TextBox.dark.disabled .fv-text-box-wrapper-container:hover{border-color:transparent}.fv-TextBox.dark .fv-text-box-wrapper-container{border:rgba(200,200,200,.1) solid thin}.fv-TextBox.dark .fv-text-box-wrapper-container div.fix-block{background:transparent}.fv-TextBox.dark .fv-text-box-wrapper-container div.fix-block p,.fv-TextBox.dark .fv-text-box-wrapper-container .icon-block,.fv-TextBox.dark .fv-text-box-wrapper-container div.text-box-container .fv-text-box-input{color:#f3f2f1}.fv-TextBox.dark .fv-text-box-wrapper-container div.text-box-container .fv-text-box-input::-moz-placeholder{color:#dcdcdc}.fv-TextBox.dark .fv-text-box-wrapper-container div.text-box-container .fv-text-box-input::placeholder{color:#dcdcdc}.fv-TextField{position:relative;width:300px;height:auto;background:#fff;border:none;border-radius:2px;box-sizing:border-box;display:flex;justify-content:space-between;align-items:center;-webkit-appearance:none;overflow:hidden}.fv-TextField.warn .text-field-wrapper-container{border:rgb(173,38,45) solid thin}.fv-TextField.correct .text-field-wrapper-container{border:rgb(0,204,153) solid thin}.fv-TextField.shadow{box-shadow:#0002 0 1px 1px,#0000001c 0 .6px 1.8px}.fv-TextField.focus div.text-field-container{margin:0}.fv-TextField.underline .text-field-wrapper-container{border:rgb(0,90,158) solid thin;border-left:none;border-top:none;border-right:none}.fv-TextField.disabled{background:#f3f2f1}.fv-TextField.disabled .text-field-wrapper-container{border-color:transparent}.fv-TextField.disabled .fv-text-field-input{opacity:.5}.fv-TextField .fv-text-field-reveal-container{position:absolute;left:0;top:0;width:100%;height:100%}.fv-TextField .text-field-wrapper-container{position:relative;width:100%;height:100%;border:rgba(36,36,36,.1) solid thin;box-sizing:border-box;display:flex;justify-content:space-between;align-items:center;-webkit-appearance:none;overflow:hidden}.fv-TextField .fv-text-field-input{position:relative;width:100%;height:100%;padding:3px;background:transparent;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;border:none;outline:none;resize:none;box-sizing:border-box}.fv-TextField .fv-text-field-input::-moz-placeholder{-moz-user-select:none;-webkit-user-select:none;user-select:none}.fv-TextField .fv-text-field-input::placeholder{-webkit-user-select:none;-moz-user-select:none;user-select:none}.fv-TextField.dark{background:transparent}.fv-TextField.dark:hover .text-field-wrapper-container,.fv-TextField.dark.focus .text-field-wrapper-container{border:rgb(36,36,36) solid thin}.fv-TextField.dark.underline .text-field-wrapper-container{border-left:none;border-top:none;border-right:none}.fv-TextField.dark.disabled{background:#302f2e}.fv-TextField.dark.disabled .text-field-wrapper-container,.fv-TextField.dark.disabled:hover .text-field-wrapper-container{border-color:transparent}.fv-TextField.dark .text-field-wrapper-container{border:rgba(120,120,120,.1) solid thin}.fv-TextField.dark .fv-text-field-input{color:#f3f2f1}.fv-TextField.dark .fv-text-field-input::-moz-placeholder{color:#dcdcdc}.fv-TextField.dark .fv-text-field-input::placeholder{color:#dcdcdc}.fv-TimePicker{position:relative;display:inline-block;width:250px;height:30px;color:#000;padding:0;margin:0;min-width:200px;line-height:0px;-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:pointer}.fv-TimePicker button{background:none;border:none;color:inherit;cursor:inherit;box-sizing:border-box;padding:0 20px;height:inherit;margin:0;outline:none}.fv-TimePicker .fv-TimePicker__input{width:100%;height:100%;padding:0;margin:0;background-color:#fafafa;border-style:solid;border-width:thin;border-radius:6px;border-color:#c8c8c899;box-sizing:border-box;opacity:.6;display:inline-flex;box-shadow:0 .5px 1px #0000004d;cursor:default}.fv-TimePicker .fv-TimePicker__input:hover{opacity:1}.fv-TimePicker .fv-TimePicker__input:active{opacity:.8;box-shadow:none}.fv-TimePicker .fv-TimePicker__input .fv-TimePicker__input-item{flex:1;text-align:center;white-space:nowrap;cursor:inherit}.fv-TimePicker .fv-TimePicker__input .fv-TimePicker__input-item:nth-child(n+2){border-left-style:solid;border-left-width:1.5px}.fv-TimePicker .fv-TimePicker__options{background-color:#fff;position:absolute;top:0;left:0;width:100%;height:400px;background-color:#ffffffe6;color:#000;border-color:#c8c8c880;border-radius:6px;z-index:2000;transform:translateY(-50%) translateY(35px);overflow:hidden;box-sizing:border-box;box-shadow:0 0 5px #0000001a;display:flex;flex-direction:column;backdrop-filter:blur(25px);-webkit-backdrop-filter:blur(25px)}.fv-TimePicker .fv-TimePicker__options .fv-TimePicker__options-body{position:relative;height:calc(100% - 40px);width:inherit;display:inline-flex;border-left-color:inherit}.fv-TimePicker .fv-TimePicker__options .fv-TimePicker__options-body .fv-TimePicker__options-body-mask{position:absolute;height:40px;width:calc(100% - 6px);top:50%;left:3px;background-color:#005a9e;border-radius:6px;transform:translateY(-50%)}.fv-TimePicker .fv-TimePicker__options .fv-TimePicker__options-body .fv-TimePicker__options-body-col{flex:1;text-align:center;z-index:1;position:relative}.fv-TimePicker .fv-TimePicker__options .fv-TimePicker__options-body .fv-TimePicker__options-body-col:hover .fv-TimePicker__options-body-col-up,.fv-TimePicker .fv-TimePicker__options .fv-TimePicker__options-body .fv-TimePicker__options-body-col:hover .fv-TimePicker__options-body-col-down{background-color:#fafafa;display:block;opacity:.8}.fv-TimePicker .fv-TimePicker__options .fv-TimePicker__options-body .fv-TimePicker__options-body-col:hover .fv-TimePicker__options-body-col-up:hover,.fv-TimePicker .fv-TimePicker__options .fv-TimePicker__options-body .fv-TimePicker__options-body-col:hover .fv-TimePicker__options-body-col-down:hover{opacity:1}.fv-TimePicker .fv-TimePicker__options .fv-TimePicker__options-body .fv-TimePicker__options-body-col:hover .fv-TimePicker__options-body-item:hover{background-color:#c8c8c81a}.fv-TimePicker .fv-TimePicker__options .fv-TimePicker__options-body .fv-TimePicker__options-body-col .fv-TimePicker__options-body-items{height:100%;overflow-x:hidden;overflow-y:auto;-ms-overflow-style:-ms-autohiding-scrollbar}.fv-TimePicker .fv-TimePicker__options .fv-TimePicker__options-body .fv-TimePicker__options-body-col .fv-TimePicker__options-body-items::-webkit-scrollbar{display:none}.fv-TimePicker .fv-TimePicker__options .fv-TimePicker__options-body .fv-TimePicker__options-body-col .fv-TimePicker__options-body-items .fv-TimePicker__options-body-item{height:40px;font-size:14px;box-sizing:border-box;padding:10px 20px;line-height:100%;border-color:inherit;white-space:nowrap;-moz-user-select:-moz-none;-o-user-select:none;-webkit-user-select:none;user-select:none;z-index:100}.fv-TimePicker .fv-TimePicker__options .fv-TimePicker__options-body .fv-TimePicker__options-body-col:nth-child(n+3){border-color:inherit}.fv-TimePicker .fv-TimePicker__options .fv-TimePicker__options-body .fv-TimePicker__options-body-col:nth-child(n+3) .fv-TimePicker__options-body-items{border-color:inherit}.fv-TimePicker .fv-TimePicker__options .fv-TimePicker__options-body .fv-TimePicker__options-body-col:nth-child(n+3) .fv-TimePicker__options-body-items .fv-TimePicker__options-body-item{border-left-style:solid;border-left-width:1px}.fv-TimePicker .fv-TimePicker__options .fv-TimePicker__options-body .fv-TimePicker__options-body-col:nth-child(n+3) .fv-TimePicker__options-body-col-up,.fv-TimePicker .fv-TimePicker__options .fv-TimePicker__options-body .fv-TimePicker__options-body-col:nth-child(n+3) .fv-TimePicker__options-body-col-down{border-left-style:solid;border-left-width:1px;border-color:inherit;cursor:pointer}.fv-TimePicker .fv-TimePicker__options .fv-TimePicker__options-body .fv-TimePicker__options-body-col .fv-TimePicker__options-body-col-up,.fv-TimePicker .fv-TimePicker__options .fv-TimePicker__options-body .fv-TimePicker__options-body-col .fv-TimePicker__options-body-col-down{display:none;position:absolute;height:20px;width:100%;text-align:center;line-height:20px;font-size:8px;cursor:pointer}.fv-TimePicker .fv-TimePicker__options .fv-TimePicker__options-body .fv-TimePicker__options-body-col .fv-TimePicker__options-body-col-down{transform:translateY(-100%)}.fv-TimePicker .fv-TimePicker__options .fv-TimePicker__options-bar{height:40px;width:inherit;padding:3px 0;box-sizing:border-box;display:flex;justify-content:space-around;align-items:center;border-top-style:solid;border-top-width:1px;border-color:inherit;z-index:1}.fv-TimePicker .fv-TimePicker__options .fv-TimePicker__options-bar .fv-TimePicker__options-bar-accept,.fv-TimePicker .fv-TimePicker__options .fv-TimePicker__options-bar .fv-TimePicker__options-bar-cancel{width:100%;height:100%;margin:0 1px;border-radius:6px;flex:1;font-size:16px;font-weight:700}.fv-TimePicker .fv-TimePicker__options .fv-TimePicker__options-bar .fv-TimePicker__options-bar-accept:hover,.fv-TimePicker .fv-TimePicker__options .fv-TimePicker__options-bar .fv-TimePicker__options-bar-cancel:hover{background-color:#c8c8c84d}.fv-TimePicker .fv-TimePicker__options .fv-TimePicker__options-bar .fv-TimePicker__options-bar-accept:active,.fv-TimePicker .fv-TimePicker__options .fv-TimePicker__options-bar .fv-TimePicker__options-bar-cancel:active{background-color:#c8c8c833}.fv-TimePicker.disabled{filter:grayscale(100%);opacity:.6}.fv-TimePicker.disabled .fv-TimePicker__input{opacity:.8;box-shadow:none;cursor:not-allowed}.fv-TimePicker .fv-TimePicker__options-enter-from{height:0}.fv-TimePicker .fv-TimePicker__options-enter-to{height:400px}.fv-TimePicker .fv-TimePicker__options-enter-active{transition:height .1s ease-out}.fv-TimePicker.dark .fv-TimePicker__input{background-color:#323232;color:#fff;border-color:#373737}.fv-TimePicker.dark .fv-TimePicker__options{background-color:#2e2e2e;border-color:#c8c8c81a;color:#f5f5f5}.fv-TimePicker.dark .fv-TimePicker__options .fv-TimePicker__options-body{background-color:inherit}.fv-TimePicker.dark .fv-TimePicker__options .fv-TimePicker__options-body .fv-TimePicker__options-body-mask{background-color:#76b9ed}.fv-TimePicker.dark .fv-TimePicker__options .fv-TimePicker__options-body .fv-TimePicker__options-body-col:hover .fv-TimePicker__options-body-col-up,.fv-TimePicker.dark .fv-TimePicker__options .fv-TimePicker__options-body .fv-TimePicker__options-body-col:hover .fv-TimePicker__options-body-col-down{background-color:#2e2e2e}.fv-TimePicker.dark .fv-TimePicker__options .fv-TimePicker__options-body .fv-TimePicker__options-body-col:hover .fv-TimePicker__options-body-item:hover,.fv-TimePicker.dark .fv-TimePicker__options .fv-TimePicker__options-bar .fv-TimePicker__options-bar-accept:hover,.fv-TimePicker.dark .fv-TimePicker__options .fv-TimePicker__options-bar .fv-TimePicker__options-bar-cancel:hover{background-color:#7878781a}.fv-ToggleSwitch{position:relative;display:flex;align-items:center;-webkit-user-select:none;-moz-user-select:none;user-select:none}.fv-ToggleSwitch.disabled{opacity:.3;filter:grayscale(1)}.fv-ToggleSwitch.disabled .fv-toggle-border:hover .fv-toggle-ring{transform:scale(1)}.fv-ToggleSwitch.disabled .fv-toggle-border:active .fv-toggle-ring{width:12px}.fv-ToggleSwitch .fv-toggle-border{position:relative;width:40px;height:20px;padding:5px;border:rgb(87,87,87) solid 1.5px;border-radius:20px;box-sizing:border-box;display:flex;align-items:center;opacity:.9;transition:all .2s,background-color .5s;-webkit-transition:all .2s,background-color .5s}.fv-ToggleSwitch .fv-toggle-border:hover{background:#2424240d;opacity:1}.fv-ToggleSwitch .fv-toggle-border:hover .fv-toggle-ring{transform:scale(1.1)}.fv-ToggleSwitch .fv-toggle-border:active{background:#2424241a}.fv-ToggleSwitch .fv-toggle-border:active .fv-toggle-ring{width:15px}.fv-ToggleSwitch .fv-toggle-border .fv-toggle-ring{position:absolute;width:12px;height:12px;left:5px;margin:0;background:#575757;border-radius:12px;box-shadow:3px 3px 10px #0003;transition:all .2s}.fv-ToggleSwitch .fv-toggle-border.toggle-on{background:#196aa7cc;border-color:transparent}.fv-ToggleSwitch .fv-toggle-border.toggle-on .fv-toggle-ring{left:calc(100% - 17px);background:#fff;box-shadow:-3px 3px 10px #0003}.fv-ToggleSwitch .fv-toggle-border.toggle-on:active .fv-toggle-ring{width:15px;left:calc(100% - 20px);transform-origin:100% 50%}.fv-ToggleSwitch .fv-toggle-border .fv-toggle-inside-content{position:absolute;font-family:微软雅黑;font-size:12px;cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;transition:all .2s;-webkit-transition:all .2s}.fv-ToggleSwitch .fv-toggle-content{margin-left:12px;font-family:微软雅黑;font-size:13px;cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;transition:all .2s;-webkit-transition:all .2s}.fv-ToggleSwitch.dark{position:relative;display:flex;align-items:center}.fv-ToggleSwitch.dark .fv-toggle-border{border:rgba(207,207,207,.8) solid 1.5px}.fv-ToggleSwitch.dark .fv-toggle-border:hover{background:#cfcfcf0d;opacity:1}.fv-ToggleSwitch.dark .fv-toggle-border:active{background:#cfcfcf1a}.fv-ToggleSwitch.dark .fv-toggle-border .fv-toggle-ring{background:#cfcfcfcc}.fv-ToggleSwitch.dark .fv-toggle-border.toggle-on{background:#76b9edcc;border-color:transparent}.fv-ToggleSwitch.dark .fv-toggle-border.toggle-on .fv-toggle-ring{background:#000}.fv-ToggleSwitch.dark .fv-toggle-content{color:#f5f5f5}.fv-TreeView{position:relative;width:200px;height:auto;padding-left:2px;overflow-x:hidden}.fv-TreeView .fv-tree-view-item{position:relative;width:100%;height:auto;display:flex;flex-direction:column}.fv-TreeView .fv-tree-view-item .fv-tree-view-item-container{position:relative;width:calc(100% - 20px);height:30px;margin-bottom:3px;padding:0 10px;border-radius:6px;box-sizing:content-box;display:flex;align-items:center;transition:background .3s,border-width .3s}.fv-TreeView .fv-tree-view-item .fv-tree-view-item-container.disabled{opacity:.6;filter:grayscale(100%);cursor:not-allowed}.fv-TreeView .fv-tree-view-item .fv-tree-view-item-container.disabled:hover,.fv-TreeView .fv-tree-view-item .fv-tree-view-item-container.disabled:active{background:transparent}.fv-TreeView .fv-tree-view-item .fv-tree-view-item-container:hover{background:#c8c8c84d}.fv-TreeView .fv-tree-view-item .fv-tree-view-item-container:active{background:#c8c8c833}.fv-TreeView .fv-tree-view-item .fv-tree-view-item-container:active .fv-tree-view-item-container-main .fv-tree-view-item-content{opacity:.6}.fv-TreeView .fv-tree-view-item .fv-tree-view-item-container.selected{background:#c8c8c84d}.fv-TreeView .fv-tree-view-item .fv-tree-view-item-container .fv-tree-view-item-choosen-bar{position:absolute;top:calc(50% - 8px);left:-1.5px;width:3px;height:16px;border-radius:6px;background:#005a9e}.fv-TreeView .fv-tree-view-item .fv-tree-view-item-container .fv-tree-view-item-container-main{height:100%;flex:1;display:flex;align-items:center}.fv-TreeView .fv-tree-view-item .fv-tree-view-item-container .fv-tree-view-item-container-main .fv-tree-view-item-expander{position:relative;width:16px;height:100%;display:flex;align-items:center;justify-content:center;cursor:pointer}.fv-TreeView .fv-tree-view-item .fv-tree-view-item-container .fv-tree-view-item-container-main .fv-tree-view-item-expander .fv-tree-view-item-expander-icon{font-size:10px}.fv-TreeView .fv-tree-view-item .fv-tree-view-item-container .fv-tree-view-item-container-main .fv-tree-view-item-content{position:relative;width:10px;flex:1;height:100%;white-space:nowrap;text-overflow:ellipsis;display:flex;align-items:center;justify-content:center;overflow:hidden}.fv-TreeView .fv-tree-view-item .fv-tree-view-item-container .fv-tree-view-item-container-main .fv-tree-view-item-content .fv-tree-view-item-std-icon{width:16px;height:16px;margin:0 1px;-o-object-fit:cover;object-fit:cover;display:flex;align-items:center}.fv-TreeView .fv-tree-view-item .fv-tree-view-item-container .fv-tree-view-item-container-main .fv-tree-view-item-content .fv-tree-view-item-text{flex:1;margin:0;font-size:15px;text-overflow:ellipsis;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;user-select:none;overflow:hidden;cursor:default}.fv-TreeView .fv-tree-view-children-list-enter-from,.fv-TreeView .fv-tree-view-children-list-leave-to{max-height:0px;transform:scaleY(0)}.fv-TreeView .fv-tree-view-children-list-enter-to,.fv-TreeView .fv-tree-view-children-list-leave-from{max-height:1000px;transform:scaleY(1)}.fv-TreeView .fv-tree-view-children-list-enter-active,.fv-TreeView .fv-tree-view-children-list-leave-active{transition:max-height .3s,transform .3s;transform-origin:50% 0%}.fv-TreeView.dark .fv-tree-view-item .fv-tree-view-item-container:hover{background:#2d2d2d4d}.fv-TreeView.dark .fv-tree-view-item .fv-tree-view-item-container:active{background:#2d2d2d33}.fv-TreeView.dark .fv-tree-view-item .fv-tree-view-item-container.selected{background:#2d2d2d4d}.fv-TreeView.dark .fv-tree-view-item .fv-tree-view-item-container .fv-tree-view-item-container-main .fv-tree-view-item-content{color:#f5f5f5}.fv-VerifyBox{position:relative;width:300px;padding:15px;box-sizing:border-box;display:flex;justify-content:space-around;align-items:center}.fv-VerifyBox .fv-verify-container{position:relative;width:100%;height:100%;display:flex;justify-content:space-around;align-items:center}.fv-VerifyBox .fv-verify-container .fv-verify-unit{width:50px;height:60px}.fv-WebWindow{position:fixed;min-width:120px;width:560px;max-width:100%;min-height:200px;height:auto;max-height:100%;left:calc(50% - 280px);background:#fff;color:#5f5f5f;border:rgba(0,0,0,.1) solid thin;border-radius:8px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;box-shadow:0 6.4px 14.4px #0002,0 1.2px 3.6px #0000001c;transition:height .3s;overflow:auto;z-index:30}.fv-WebWindow.is-acrylic{-webkit-backdrop-filter:blur(50px);backdrop-filter:blur(50px)}.fv-WebWindow.enabled-resize{transition:height 0s}.fv-WebWindow.static-transition{transition:all .3s}.fv-WebWindow .title-bar{position:absolute;left:0;top:0;width:100%;min-height:30px;height:35px;font-size:13px;font-weight:700;box-sizing:border-box;display:flex;justify-content:space-between;align-items:center;transition:all .6s;cursor:move;z-index:2}.fv-WebWindow .title-bar:hover{background:#a0a0a01a}.fv-WebWindow .title-bar:active{background:#4b4b4b1a}.fv-WebWindow .title-bar .control-btn{position:relative;width:46px;height:100%;border:thin;background:transparent;font-size:13.8px;color:#383838;outline:none;display:flex;justify-content:center;align-items:center}.fv-WebWindow .title-bar .control-btn.shut-down:hover{background:#d62121f8;color:#f5f5f5}.fv-WebWindow .title-bar .control-btn.shut-down:active{background:#f75858fa}.fv-WebWindow .title-bar .control-btn:hover{background:#0000001a}.fv-WebWindow .title-bar .control-btn:active{background:#0003}.fv-WebWindow .fv-web-window-spliter{position:absolute;min-width:6px;width:6px;height:60px;flex-shrink:0;display:flex;justify-content:center;align-items:center;transition:all .3s;cursor:ew-resize}.fv-WebWindow .fv-web-window-spliter.horizontal{right:2px;top:calc(50% - 60px);height:120px}.fv-WebWindow .fv-web-window-spliter.vertical{width:120px;height:6px;right:calc(50% - 60px);bottom:5px;cursor:ns-resize}.fv-WebWindow .fv-web-window-spliter.both{width:0px;height:0px;right:3px;bottom:3px;border-left:15px solid transparent;border-top:15px solid transparent;border-right:15px solid transparent;cursor:nwse-resize}.fv-WebWindow .fv-web-window-spliter.both:hover{border-right-color:#c8c6c499}.fv-WebWindow .fv-web-window-spliter.both:active{border-right-color:#96969699}.fv-WebWindow .fv-web-window-spliter:hover i{background:#c8c6c499}.fv-WebWindow .fv-web-window-spliter:active i{background:#96969699;box-shadow:0 0 3px #0000001a}.fv-WebWindow .fv-web-window-spliter i{position:relative;width:80%;height:90%;border-radius:3px;transition:all .3s}.fv-WebWindow.dark{background:#383838;color:#f5f5f5}.fv-WebWindow.dark .title-bar .control-btn,.fv-WebWindow.dark .title-bar .control-btn.shut-down:hover{color:#f5f5f5}.fv-WebWindow.dark .title-bar .control-btn:hover{background:#ffffff1a}.fv-WebWindow.dark .title-bar .control-btn:active{background:#fff3}.fv-WebWindow.dark .fv-web-window-spliter:hover i{background:#484644}.fv-WebWindow.dark .fv-web-window-spliter:active i{background:#c8c6c4;box-shadow:0 0 3px #ffffff4d}:root{--fv-light-bgcolor-4: rgba(251, 251, 251, 1);--fv-light-bgcolor-3: rgba(245, 245, 245, 1);--fv-light-bgcolor2: rgba(204, 204, 204, 1);--fv-light-bgcolor: rgba(237, 235, 233, 1);--fv-light-hover-bgcolor: rgba(237, 235, 233, .8);--fv-light-color: rgba(0, 0, 0, 1);--fv-light-disabled-bgcolor: rgba(239, 239, 239, .5);--fv-light-disabled-color: rgba(220, 220, 220, 1);--fv-light-border-color: rgb(63, 63, 63, 1);--fv-light-border-color-2: rgba(224, 224, 224, 1);--fv-dark-bgcolor: rgba(96, 94, 92, 1);--fv-dark-bgcolor-2: rgba(32, 32, 32, 1);--fv-dark-bgcolor-3: rgba(39, 40, 40, 1);--fv-dark-hover-bgcolor: rgba(96, 94, 92, .8);--fv-dark-color: rgba(255, 255, 255, 1);--fv-dark-disabled-bgcolor: rgba(62, 63, 66, .5);--fv-dark-disabled-color: rgba(143, 145, 147, 1);--fv-dark-border-color: rgba(85, 88, 91, 1);--fv-dark-border-color-2: rgba(154, 154, 154, 1);--fv-primary-bgcolor: 0, 90, 158;--fv-warning-bgcolor: 255, 200, 10;--fv-error-bgcolor: 250, 65, 0;--fv-info-bgcolor: 243, 242, 241;--fv-success-bgcolor: 95, 210, 85;--fv-primary-color: 0, 90, 158;--fv-warning-color: 239, 201, 65;--fv-error-color: 164, 38, 45;--fv-info-color: 50, 49, 48;--fv-success-color: 0, 204, 153}*{-webkit-appearance:none;-webkit-tap-highlight-color:transparent}.fv-row-css:nth-child(odd){background:#efefef}.fv-row-css:nth-child(2n){background:#f5f5f5}
diff --git a/guide/components/animated-icon/index.html b/guide/components/animated-icon/index.html
new file mode 100644
index 0000000..464d0254
--- /dev/null
+++ b/guide/components/animated-icon/index.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>AnimatedIcon | vfluent3</title>
+    <meta name="description" content="A Vue3 component library for Fluent UI">
+    <meta name="generator" content="VitePress v1.0.0-rc.45">
+    <link rel="preload stylesheet" href="/VFluent3/assets/style.BabQegKX.css" as="style">
+    
+    <script type="module" src="/VFluent3/assets/app.CSutcJ2E.js"></script>
+    <link rel="preload" href="/VFluent3/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/framework.DvIFzl91.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/theme.CgqFBnN_.js">
+    <link rel="modulepreload" href="/VFluent3/assets/guide_components_animated-icon_index.md.yZDMzCFe.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-19c990f1><div class="wrapper" data-v-19c990f1><div class="container" data-v-19c990f1><div class="title" data-v-19c990f1><div class="VPNavBarTitle has-sidebar" data-v-19c990f1 data-v-ab179fa1><a class="title" href="/VFluent3/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>VFluent3</span><!--[--><!--]--></a></div></div><div class="content" data-v-19c990f1><div class="content-body" data-v-19c990f1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-19c990f1><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-19c990f1 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Guide</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-19c990f1 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-19c990f1 data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-19c990f1 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-19c990f1><div class="divider-line" data-v-19c990f1></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-d2ecc192><button data-v-d2ecc192>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-575e6a36><div class="curtain" data-v-575e6a36></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-575e6a36><span class="visually-hidden" id="sidebar-aria-label" data-v-575e6a36> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Basic input</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/button/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/check-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CheckBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/combobox/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Combobox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/details-list/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DetailsList</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drop-down/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DropDown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio-group/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RadioGroup</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/rating-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RatingControl</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/slider/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/toggle-switch/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ToggleSwitch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tag/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Tag</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Collections</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/flip-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>FlipView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/list-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ListView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tree-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TreeView</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Date & Time</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarDatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/time-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TimePicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Dialogs & flyouts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/callout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Callout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Layout</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/collapse/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Collapse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/expander/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Expander</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drawer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Panel</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Media</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/image/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Img</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ImgBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/persona/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Persona</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Menu & toolbars</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/command-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CommandBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/menu-flyout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MenuFlyout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/swipe-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SwipeControl</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Navigation</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/breadcrumb/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationPanel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pivot/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pivot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pagination/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pagination</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Scrolling</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/infinite-scroll-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfiniteScrollView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/scroll-story/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ScrollStory</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Status & info</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/badge/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-ring/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressRing</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible has-active" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Styles</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/animated-icon/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>AnimatedIcon</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/icon-element/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>IconElement</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/reveal-container/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RevealContainer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/shimmer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Shimmer</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Text</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/search-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SearchBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-field/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextField</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/verify-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>VerifyBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Windowing</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/web-window/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>WebWindow</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Global</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Advance</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-935f8a84><div class="content" data-v-935f8a84><div class="outline-marker" data-v-935f8a84></div><div class="outline-title" role="heading" aria-level="2" data-v-935f8a84>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-935f8a84><span class="visually-hidden" id="doc-outline-aria-label" data-v-935f8a84> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-935f8a84 data-v-b933a997><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _VFluent3_guide_components_animated-icon_" data-v-39a288b8><div><h3 id="animatedicon-demo" tabindex="-1">AnimatedIcon-DEMO <a class="header-anchor" href="#animatedicon-demo" aria-label="Permalink to &quot;AnimatedIcon-DEMO&quot;">​</a></h3><hr><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-AnimatedIcon</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> fontSize</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;36&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-AnimatedIcon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="present-animation" tabindex="-1">Present Animation <a class="header-anchor" href="#present-animation" aria-label="Permalink to &quot;Present Animation&quot;">​</a></h3><hr><ol><li>Scale Down</li></ol><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-AnimatedIcon</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> fontSize</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;20&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-AnimatedIcon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><ol start="2"><li>Scale X Down</li></ol><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-AnimatedIcon</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> modelValue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;scaleXDown&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> fontSize</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;20&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> icon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;GlobalNavButton&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-AnimatedIcon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><ol start="3"><li>Scale Y Down</li></ol><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-AnimatedIcon</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> modelValue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;scaleYDown&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> fontSize</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;20&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> icon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Pause&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-AnimatedIcon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><ol start="4"><li>Back Scale</li></ol><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-AnimatedIcon</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> modelValue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;backScale&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> fontSize</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;20&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> icon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Back&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-AnimatedIcon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><ol start="5"><li>Bounce Rotate</li></ol><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-AnimatedIcon</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> modelValue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;bounceRotate&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> fontSize</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;20&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> icon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Settings&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-AnimatedIcon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="animatedicon-with-content" tabindex="-1">AnimatedIcon-With Content <a class="header-anchor" href="#animatedicon-with-content" aria-label="Permalink to &quot;AnimatedIcon-With Content&quot;">​</a></h3><hr><div><!----></div><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-AnimatedIcon</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> modelValue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;bounceRotate&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> fontSize</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;20&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> icon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Settings&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;template v-slot:content&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;div style=&quot;margin-left: 5px;&quot;&gt;Settings&lt;/div&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-AnimatedIcon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h3 id="animatedicon-customize-animation" tabindex="-1">AnimatedIcon-Customize Animation <a class="header-anchor" href="#animatedicon-customize-animation" aria-label="Permalink to &quot;AnimatedIcon-Customize Animation&quot;">​</a></h3><hr><div><!----></div><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-AnimatedIcon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">customizeAnimation</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">animation</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> fontSize</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;20&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> icon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Settings&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-AnimatedIcon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">data</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> () {</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">    return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        animation: {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            enter: {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                transform: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;rotate(-180deg)&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                transition: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">`transform 0.1s`</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            leave: [</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                    transform: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;rotate(365deg)&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                    transition: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">`transform 0.3s`</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                    transform: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;rotate(360deg)&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                    transition: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">`transform 0.1s`</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                    transform: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;rotate(0deg)&#39;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            ]</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br></div></div><ul><li><p>Event types include <code>enter</code>, <code>move</code>, <code>down</code>, <code>up</code>, <code>leave</code> and corresponding to the <code>MouseEvent</code> and <code>TouchEvent</code> automatically.</p></li><li><p>Each event can be declared as an <code>object</code> contain styles or an <code>array</code> contain multiple styles object. The transitions of an <code>array</code> will execute in order.</p></li></ul><h3 id="animatedicon-customize-background" tabindex="-1">AnimatedIcon-Customize Background <a class="header-anchor" href="#animatedicon-customize-background" aria-label="Permalink to &quot;AnimatedIcon-Customize Background&quot;">​</a></h3><hr><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-AnimatedIcon</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> modelValue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;scaleYDown&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> fontSize</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;20&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> icon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Pause&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;whitesmoke&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-AnimatedIcon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="animatedicon-dark-theme" tabindex="-1">AnimatedIcon-Dark Theme <a class="header-anchor" href="#animatedicon-dark-theme" aria-label="Permalink to &quot;AnimatedIcon-Dark Theme&quot;">​</a></h3><hr><div style="padding:5px;background:black;"><!----></div><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-AnimatedIcon</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;dark&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> fontSize</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;20&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-AnimatedIcon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">value</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">scaleDown</td><td style="text-align:center;">动画预设名称</td></tr><tr><td style="text-align:center;">icon</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">Icon with Fabric-Icon</td></tr><tr><td style="text-align:center;">customizeAnimation</td><td style="text-align:center;">Object</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">自定义动画</td></tr><tr><td style="text-align:center;">background</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">背景色</td></tr><tr><td style="text-align:center;">fontSize</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">16</td><td style="text-align:center;">AnimatedIcon 字体大小</td></tr><tr><td style="text-align:center;">hideContent</td><td style="text-align:center;">[bool]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">隐藏文本内容</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">system</td><td style="text-align:center;">主题样式, 包含<code>light</code>, <code>dark</code>, <code>system</code>, <code>custom</code>几种样式</td></tr></tbody></table><h3 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to &quot;Events&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">事件名(Name)</th><th style="text-align:center;">参数类型(args)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">click</td><td style="text-align:center;">event</td><td style="text-align:center;">AnimatedIcon onclick</td></tr></tbody></table><h3 id="slot" tabindex="-1">Slot <a class="header-anchor" href="#slot" aria-label="Permalink to &quot;Slot&quot;">​</a></h3><hr><ol><li>Default</li></ol><p>默认模板是图标自定义模板</p><div class="language-javascript vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">fv-animated-icon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">fv-animated-icon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ol start="2"><li>Content</li></ol><p>客制化修改文字内容</p><div class="language-javascript vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">fv-animated-icon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Content&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">fv-animated-icon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-09de1c0f><!--[--><!--]--><!----><nav class="prev-next" data-v-09de1c0f><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link prev" href="/VFluent3/guide/components/progress-ring/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Previous page</span><span class="title" data-v-09de1c0f>ProgressRing</span><!--]--></a></div><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link next" href="/VFluent3/guide/components/icon-element/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Next page</span><span class="title" data-v-09de1c0f>IconElement</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>MIT Licensed</p><p class="copyright" data-v-e315a0ad>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_calendar-date-picker_properties.md\":\"DXRjmMG8\",\"guide_components_image_properties.md\":\"DGanRzCb\",\"guide_components_img-box_index.md\":\"DYtggkf_\",\"guide_components_img_emits.md\":\"BlE7jvZQ\",\"guide_components_img_index.md\":\"Bm9FiuU4\",\"guide_components_icon-element_properties.md\":\"8Oakruwc\",\"guide_components_img_properties.md\":\"B42YSocI\",\"guide_components_drawer_index.md\":\"D_vpnCpE\",\"guide_components_verify-box_emits.md\":\"DT17Iazx\",\"guide_components_calendar-date-picker_index.md\":\"BdHjrurh\",\"guide_components_rating-control_index.md\":\"Q9l5Lfrr\",\"guide_components_rating-control_properties.md\":\"DKprnl0i\",\"guide_components_calendar-view_index.md\":\"zdoRYVx1\",\"guide_components_animated-icon_index.md\":\"yZDMzCFe\",\"guide_components_calendar-date-picker_emits.md\":\"D5OkfR8j\",\"guide_components_badge_index.md\":\"Bb4crrJn\",\"guide_components_image_index.md\":\"B7X6cWAZ\",\"guide_components_slider_index.md\":\"C7zZ2d-W\",\"guide_components_radio-group_index.md\":\"CVfh3h5H\",\"guide_components_swipe-control_index.md\":\"DwrDVPc1\",\"guide_components_color-picker_emits.md\":\"BHDXVtBQ\",\"guide_components_radio_index.md\":\"90as5QGp\",\"guide_components_pagination_properties.md\":\"JUAPvcTL\",\"guide_components_persona_properties.md\":\"DUTPhPMp\",\"guide_components_combo-box_emits.md\":\"Dh5R-qEv\",\"guide_components_pivot_emits.md\":\"BTJPgNpy\",\"guide_components_pagination_index.md\":\"CnW2zAht\",\"guide_components_flip-view_properties.md\":\"BqZ4hhgU\",\"guide_components_icon-element_emits.md\":\"D5TXFdTZ\",\"guide_components_flip-view_index.md\":\"DefnDOv6\",\"guide_components_navigation-panel_index.md\":\"6mO__sSK\",\"guide_components_rating-control_emits.md\":\"blvomSeC\",\"guide_components_icon-element_index.md\":\"DQ8K7JNn\",\"guide_components_navigation-view_index.md\":\"4AQRiz1k\",\"guide_components_toggle-switch_emits.md\":\"CLGzrNut\",\"guide_components_toggle-switch_index.md\":\"61en_q9-\",\"guide_components_scroll-story_index.md\":\"Vpgb1HSV\",\"guide_components_reveal-container_index.md\":\"Cut2r4tV\",\"guide_components_search-box_emits.md\":\"-d9sWNNt\",\"guide_components_search-box_properties.md\":\"DEKFfPFw\",\"guide_components_shimmer_emits.md\":\"CTMInlI3\",\"guide_components_tag_index.md\":\"BhhxkcHn\",\"guide_components_search-box_index.md\":\"DgkrY0oY\",\"guide_components_shimmer_index.md\":\"iZlHuTxw\",\"guide_components_shimmer_properties.md\":\"CdkU1o6H\",\"guide_components_tree-view_index.md\":\"CUrwan4q\",\"guide_components_text-field_index.md\":\"CXSimJtj\",\"guide_components_text-box_index.md\":\"C5moAPfB\",\"guide_components_progress-ring_properties.md\":\"Dc08Uiff\",\"guide_components_toggle-switch_properties.md\":\"tFppK_IS\",\"guide_components_radio-group_emits.md\":\"cEDzKVnN\",\"guide_components_collapse_index.md\":\"N9Iu5-2v\",\"guide_components_image_emits.md\":\"lmlz2xJd\",\"guide_components_callout_index.md\":\"D9RU33w6\",\"guide_components_pivot_index.md\":\"B_vwQL-5\",\"guide_components_command-bar_index.md\":\"Cp4_rrGB\",\"guide_components_pagination_emits.md\":\"Dng86A22\",\"guide_components_button_index.md\":\"7sqT2MQP\",\"guide_components_info-box_properties.md\":\"BI7Nvk-E\",\"guide_components_drop-down_emits.md\":\"BE95TdKW\",\"guide_components_expander_index.md\":\"BKgcUJzQ\",\"guide_components_message-bar_index.md\":\"AEtAWlF8\",\"guide_components_menu-flyout_index.md\":\"Csa7irPj\",\"guide_components_panel_index.md\":\"CsTu0bXo\",\"guide_components_panel_properties.md\":\"BaxoCYKq\",\"guide_components_progress-bar_emits.md\":\"BcwXUpsF\",\"guide_components_progress-bar_properties.md\":\"TxiS9ZMA\",\"guide_components_progress-ring_emits.md\":\"D2Y6hIZ9\",\"guide_components_color-picker_index.md\":\"DCc4ixcU\",\"guide_components_progress-ring_index.md\":\"CPb-ZEPE\",\"guide_components_color-picker_properties.md\":\"wcXK29Vl\",\"guide_components_time-picker_index.md\":\"CQJdRRaG\",\"guide_components_drop-down_properties.md\":\"Bwlkpr1q\",\"guide_components_infinite-scroll-view_index.md\":\"yAuD807x\",\"guide_components_check-box_index.md\":\"FYgdu4oq\",\"guide_components_progress-bar_index.md\":\"D8vHQw5V\",\"guide_components_combo-box_index.md\":\"DTyu3eNd\",\"guide_components_info-box_emits.md\":\"DlEwpkkq\",\"guide_components_drop-down_index.md\":\"BZzJZQWq\",\"guide_components_list-view_index.md\":\"BoYvMzb0\",\"guide_components_verify-box_properties.md\":\"CW6W8fFf\",\"guide_components_verify-box_index.md\":\"DwSB40wR\",\"guide_index.md\":\"Bndlt3sL\",\"guide_components_web-window_index.md\":\"Bxc8vEeI\",\"index.md\":\"MTRqI42u\",\"guide_components_combo-box_properties.md\":\"AWfHzV6x\",\"guide_components_combobox_emits.md\":\"CGB6WLt8\",\"guide_components_combobox_properties.md\":\"Bja0hMou\",\"guide_components_details-list_index.md\":\"CcgOCIyt\",\"guide_components_info-box_index.md\":\"vXh-_DsL\",\"guide_components_combobox_index.md\":\"CsPkY6YB\",\"guide_components_date-picker_index.md\":\"12vmUIup\",\"guide_components_flip-view_emits.md\":\"DCheHjDj\",\"guide_components_panel_emits.md\":\"DG0REDq8\",\"guide_components_breadcrumb_index.md\":\"DyDm7PeP\",\"guide_components_radio-group_properties.md\":\"BnPxoKsQ\",\"guide_components_persona_emits.md\":\"CnsDPKRU\",\"guide_components_pivot_properties.md\":\"BmoLpPi1\",\"guide_components_persona_index.md\":\"DT00jby4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vfluent3\",\"description\":\"A Vue3 component library for Fluent UI\",\"base\":\"/VFluent3/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"VFluent3\",\"footer\":{\"message\":\"MIT Licensed\",\"copyright\":\"Copyright © Creator SN - 2022\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/\"}],\"sidebar\":[{\"text\":\"Basic input\",\"collapsed\":true,\"items\":[{\"text\":\"Button\",\"link\":\"/guide/components/button/\"},{\"text\":\"CheckBox\",\"link\":\"/guide/components/check-box/\"},{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"},{\"text\":\"Combobox\",\"link\":\"/guide/components/combobox/\"},{\"text\":\"DetailsList\",\"link\":\"/guide/components/details-list/\"},{\"text\":\"DropDown\",\"link\":\"/guide/components/drop-down/\"},{\"text\":\"Radio\",\"link\":\"/guide/components/radio/\"},{\"text\":\"RadioGroup\",\"link\":\"/guide/components/radio-group/\"},{\"text\":\"RatingControl\",\"link\":\"/guide/components/rating-control/\"},{\"text\":\"Slider\",\"link\":\"/guide/components/slider/\"},{\"text\":\"ToggleSwitch\",\"link\":\"/guide/components/toggle-switch/\"},{\"text\":\"Tag\",\"link\":\"/guide/components/tag/\"}]},{\"text\":\"Collections\",\"collapsed\":true,\"items\":[{\"text\":\"FlipView\",\"link\":\"/guide/components/flip-view/\"},{\"text\":\"ListView\",\"link\":\"/guide/components/list-view/\"},{\"text\":\"TreeView\",\"link\":\"/guide/components/tree-view/\"}]},{\"text\":\"Date & Time\",\"collapsed\":true,\"items\":[{\"text\":\"CalendarDatePicker\",\"link\":\"/guide/components/calendar-date-picker/\"},{\"text\":\"CalendarView\",\"link\":\"/guide/components/calendar-view/\"},{\"text\":\"DatePicker\",\"link\":\"/guide/components/date-picker/\"},{\"text\":\"TimePicker\",\"link\":\"/guide/components/time-picker/\"}]},{\"text\":\"Dialogs & flyouts\",\"collapsed\":true,\"items\":[{\"text\":\"Callout\",\"link\":\"/guide/components/callout/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Layout\",\"collapsed\":true,\"items\":[{\"text\":\"Collapse\",\"link\":\"/guide/components/collapse/\"},{\"text\":\"Expander\",\"link\":\"/guide/components/expander/\"},{\"text\":\"Drawer\",\"link\":\"/guide/components/drawer/\"},{\"text\":\"Panel\",\"link\":\"/guide/components/panel/\"}]},{\"text\":\"Media\",\"collapsed\":true,\"items\":[{\"text\":\"Image\",\"link\":\"/guide/components/image/\"},{\"text\":\"Img\",\"link\":\"/guide/components/img/\"},{\"text\":\"ImgBox\",\"link\":\"/guide/components/img-box/\"},{\"text\":\"Persona\",\"link\":\"/guide/components/persona/\"}]},{\"text\":\"Menu & toolbars\",\"collapsed\":true,\"items\":[{\"text\":\"CommandBar\",\"link\":\"/guide/components/command-bar/\"},{\"text\":\"MenuFlyout\",\"link\":\"/guide/components/menu-flyout/\"},{\"text\":\"SwipeControl\",\"link\":\"/guide/components/swipe-control/\"}]},{\"text\":\"Navigation\",\"collapsed\":true,\"items\":[{\"text\":\"Breadcrumb\",\"link\":\"/guide/components/breadcrumb/\"},{\"text\":\"NavigationPanel\",\"link\":\"/guide/components/navigation-panel/\"},{\"text\":\"NavigationView\",\"link\":\"/guide/components/navigation-view/\"},{\"text\":\"Pivot\",\"link\":\"/guide/components/pivot/\"},{\"text\":\"Pagination\",\"link\":\"/guide/components/pagination/\"}]},{\"text\":\"Scrolling\",\"collapsed\":true,\"items\":[{\"text\":\"InfiniteScrollView\",\"link\":\"/guide/components/infinite-scroll-view/\"},{\"text\":\"ScrollStory\",\"link\":\"/guide/components/scroll-story/\"}]},{\"text\":\"Status & info\",\"collapsed\":true,\"items\":[{\"text\":\"Badge\",\"link\":\"/guide/components/badge/\"},{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"ProgressBar\",\"link\":\"/guide/components/progress-bar/\"},{\"text\":\"ProgressRing\",\"link\":\"/guide/components/progress-ring/\"}]},{\"text\":\"Styles\",\"collapsed\":true,\"items\":[{\"text\":\"AnimatedIcon\",\"link\":\"/guide/components/animated-icon/\"},{\"text\":\"IconElement\",\"link\":\"/guide/components/icon-element/\"},{\"text\":\"RevealContainer\",\"link\":\"/guide/components/reveal-container/\"},{\"text\":\"Shimmer\",\"link\":\"/guide/components/shimmer/\"}]},{\"text\":\"Text\",\"collapsed\":true,\"items\":[{\"text\":\"SearchBox\",\"link\":\"/guide/components/search-box/\"},{\"text\":\"TextBox\",\"link\":\"/guide/components/text-box/\"},{\"text\":\"TextField\",\"link\":\"/guide/components/text-field/\"},{\"text\":\"VerifyBox\",\"link\":\"/guide/components/verify-box/\"}]},{\"text\":\"Windowing\",\"collapsed\":true,\"items\":[{\"text\":\"WebWindow\",\"link\":\"/guide/components/web-window/\"}]},{\"text\":\"Global\",\"collapsed\":true,\"items\":[{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Advance\",\"collapsed\":true,\"items\":[{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git a/guide/components/badge/index.html b/guide/components/badge/index.html
new file mode 100644
index 0000000..512978c
--- /dev/null
+++ b/guide/components/badge/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>Badge | vfluent3</title>
+    <meta name="description" content="A Vue3 component library for Fluent UI">
+    <meta name="generator" content="VitePress v1.0.0-rc.45">
+    <link rel="preload stylesheet" href="/VFluent3/assets/style.BabQegKX.css" as="style">
+    
+    <script type="module" src="/VFluent3/assets/app.CSutcJ2E.js"></script>
+    <link rel="preload" href="/VFluent3/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/framework.DvIFzl91.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/theme.CgqFBnN_.js">
+    <link rel="modulepreload" href="/VFluent3/assets/guide_components_badge_index.md.Bb4crrJn.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-19c990f1><div class="wrapper" data-v-19c990f1><div class="container" data-v-19c990f1><div class="title" data-v-19c990f1><div class="VPNavBarTitle has-sidebar" data-v-19c990f1 data-v-ab179fa1><a class="title" href="/VFluent3/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>VFluent3</span><!--[--><!--]--></a></div></div><div class="content" data-v-19c990f1><div class="content-body" data-v-19c990f1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-19c990f1><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-19c990f1 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Guide</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-19c990f1 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-19c990f1 data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-19c990f1 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-19c990f1><div class="divider-line" data-v-19c990f1></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-d2ecc192><button data-v-d2ecc192>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-575e6a36><div class="curtain" data-v-575e6a36></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-575e6a36><span class="visually-hidden" id="sidebar-aria-label" data-v-575e6a36> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Basic input</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/button/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/check-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CheckBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/combobox/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Combobox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/details-list/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DetailsList</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drop-down/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DropDown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio-group/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RadioGroup</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/rating-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RatingControl</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/slider/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/toggle-switch/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ToggleSwitch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tag/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Tag</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Collections</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/flip-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>FlipView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/list-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ListView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tree-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TreeView</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Date & Time</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarDatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/time-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TimePicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Dialogs & flyouts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/callout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Callout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Layout</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/collapse/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Collapse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/expander/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Expander</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drawer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Panel</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Media</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/image/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Img</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ImgBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/persona/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Persona</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Menu & toolbars</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/command-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CommandBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/menu-flyout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MenuFlyout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/swipe-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SwipeControl</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Navigation</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/breadcrumb/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationPanel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pivot/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pivot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pagination/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pagination</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Scrolling</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/infinite-scroll-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfiniteScrollView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/scroll-story/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ScrollStory</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible has-active" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Status & info</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/badge/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-ring/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressRing</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Styles</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/animated-icon/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>AnimatedIcon</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/icon-element/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>IconElement</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/reveal-container/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RevealContainer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/shimmer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Shimmer</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Text</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/search-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SearchBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-field/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextField</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/verify-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>VerifyBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Windowing</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/web-window/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>WebWindow</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Global</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Advance</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-935f8a84><div class="content" data-v-935f8a84><div class="outline-marker" data-v-935f8a84></div><div class="outline-title" role="heading" aria-level="2" data-v-935f8a84>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-935f8a84><span class="visually-hidden" id="doc-outline-aria-label" data-v-935f8a84> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-935f8a84 data-v-b933a997><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _VFluent3_guide_components_badge_" data-v-39a288b8><div><h3 id="badge-demo" tabindex="-1">Badge-DEMO <a class="header-anchor" href="#badge-demo" aria-label="Permalink to &quot;Badge-DEMO&quot;">​</a></h3><hr><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Badge</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">modelValue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">3</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;fv-button&gt;Badge&lt;/fv-button&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Badge</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="badge-different-type" tabindex="-1">Badge Different Type <a class="header-anchor" href="#badge-different-type" aria-label="Permalink to &quot;Badge Different Type&quot;">​</a></h3><hr><p>Success</p><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Badge</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">modelValue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">12</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;success&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;fv-button&gt;Badge&lt;/fv-button&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Badge</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>Warning</p><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Badge</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">modelValue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">2</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;warning&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;fv-button&gt;Badge&lt;/fv-button&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Badge</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>Primary</p><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Badge</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">modelValue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">9</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;primary&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;fv-button&gt;Badge&lt;/fv-button&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Badge</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="badge-customize-content" tabindex="-1">Badge Customize Content <a class="header-anchor" href="#badge-customize-content" aria-label="Permalink to &quot;Badge Customize Content&quot;">​</a></h3><hr><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Badge</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;You&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;fv-button&gt;Badge&lt;/fv-button&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Badge</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="badge-max-value" tabindex="-1">Badge Max Value <a class="header-anchor" href="#badge-max-value" aria-label="Permalink to &quot;Badge Max Value&quot;">​</a></h3><hr><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Badge</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;100&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> max</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;99&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;fv-button&gt;Badge&lt;/fv-button&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Badge</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="badge-dot" tabindex="-1">Badge Dot <a class="header-anchor" href="#badge-dot" aria-label="Permalink to &quot;Badge Dot&quot;">​</a></h3><hr><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Badge</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">isDot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;fv-button&gt;Badge&lt;/fv-button&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Badge</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">value</td><td style="text-align:center;">[string,number]</td><td style="text-align:center;">Yes</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">max</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">Infinity</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">isDot</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">hidden</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">type</td><td style="text-align:center;">[&#39;primary&#39;,&#39;success&#39;,&#39;warning&#39;,&#39;danger&#39;,&#39;info&#39;,string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">default</td><td style="text-align:center;"><code>Badge</code>类型, 可以输入颜色字符串</td></tr></tbody></table><h3 id="slot" tabindex="-1">Slot <a class="header-anchor" href="#slot" aria-label="Permalink to &quot;Slot&quot;">​</a></h3><hr><ol><li>Default</li></ol><div class="language-javascript vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">fv-badge</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">fv-badge</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-09de1c0f><!--[--><!--]--><!----><nav class="prev-next" data-v-09de1c0f><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link prev" href="/VFluent3/guide/components/scroll-story/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Previous page</span><span class="title" data-v-09de1c0f>ScrollStory</span><!--]--></a></div><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link next" href="/VFluent3/guide/components/message-bar/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Next page</span><span class="title" data-v-09de1c0f>MessageBar</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>MIT Licensed</p><p class="copyright" data-v-e315a0ad>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_calendar-date-picker_properties.md\":\"DXRjmMG8\",\"guide_components_image_properties.md\":\"DGanRzCb\",\"guide_components_img-box_index.md\":\"DYtggkf_\",\"guide_components_img_emits.md\":\"BlE7jvZQ\",\"guide_components_img_index.md\":\"Bm9FiuU4\",\"guide_components_icon-element_properties.md\":\"8Oakruwc\",\"guide_components_img_properties.md\":\"B42YSocI\",\"guide_components_drawer_index.md\":\"D_vpnCpE\",\"guide_components_verify-box_emits.md\":\"DT17Iazx\",\"guide_components_calendar-date-picker_index.md\":\"BdHjrurh\",\"guide_components_rating-control_index.md\":\"Q9l5Lfrr\",\"guide_components_rating-control_properties.md\":\"DKprnl0i\",\"guide_components_calendar-view_index.md\":\"zdoRYVx1\",\"guide_components_animated-icon_index.md\":\"yZDMzCFe\",\"guide_components_calendar-date-picker_emits.md\":\"D5OkfR8j\",\"guide_components_badge_index.md\":\"Bb4crrJn\",\"guide_components_image_index.md\":\"B7X6cWAZ\",\"guide_components_slider_index.md\":\"C7zZ2d-W\",\"guide_components_radio-group_index.md\":\"CVfh3h5H\",\"guide_components_swipe-control_index.md\":\"DwrDVPc1\",\"guide_components_color-picker_emits.md\":\"BHDXVtBQ\",\"guide_components_radio_index.md\":\"90as5QGp\",\"guide_components_pagination_properties.md\":\"JUAPvcTL\",\"guide_components_persona_properties.md\":\"DUTPhPMp\",\"guide_components_combo-box_emits.md\":\"Dh5R-qEv\",\"guide_components_pivot_emits.md\":\"BTJPgNpy\",\"guide_components_pagination_index.md\":\"CnW2zAht\",\"guide_components_flip-view_properties.md\":\"BqZ4hhgU\",\"guide_components_icon-element_emits.md\":\"D5TXFdTZ\",\"guide_components_flip-view_index.md\":\"DefnDOv6\",\"guide_components_navigation-panel_index.md\":\"6mO__sSK\",\"guide_components_rating-control_emits.md\":\"blvomSeC\",\"guide_components_icon-element_index.md\":\"DQ8K7JNn\",\"guide_components_navigation-view_index.md\":\"4AQRiz1k\",\"guide_components_toggle-switch_emits.md\":\"CLGzrNut\",\"guide_components_toggle-switch_index.md\":\"61en_q9-\",\"guide_components_scroll-story_index.md\":\"Vpgb1HSV\",\"guide_components_reveal-container_index.md\":\"Cut2r4tV\",\"guide_components_search-box_emits.md\":\"-d9sWNNt\",\"guide_components_search-box_properties.md\":\"DEKFfPFw\",\"guide_components_shimmer_emits.md\":\"CTMInlI3\",\"guide_components_tag_index.md\":\"BhhxkcHn\",\"guide_components_search-box_index.md\":\"DgkrY0oY\",\"guide_components_shimmer_index.md\":\"iZlHuTxw\",\"guide_components_shimmer_properties.md\":\"CdkU1o6H\",\"guide_components_tree-view_index.md\":\"CUrwan4q\",\"guide_components_text-field_index.md\":\"CXSimJtj\",\"guide_components_text-box_index.md\":\"C5moAPfB\",\"guide_components_progress-ring_properties.md\":\"Dc08Uiff\",\"guide_components_toggle-switch_properties.md\":\"tFppK_IS\",\"guide_components_radio-group_emits.md\":\"cEDzKVnN\",\"guide_components_collapse_index.md\":\"N9Iu5-2v\",\"guide_components_image_emits.md\":\"lmlz2xJd\",\"guide_components_callout_index.md\":\"D9RU33w6\",\"guide_components_pivot_index.md\":\"B_vwQL-5\",\"guide_components_command-bar_index.md\":\"Cp4_rrGB\",\"guide_components_pagination_emits.md\":\"Dng86A22\",\"guide_components_button_index.md\":\"7sqT2MQP\",\"guide_components_info-box_properties.md\":\"BI7Nvk-E\",\"guide_components_drop-down_emits.md\":\"BE95TdKW\",\"guide_components_expander_index.md\":\"BKgcUJzQ\",\"guide_components_message-bar_index.md\":\"AEtAWlF8\",\"guide_components_menu-flyout_index.md\":\"Csa7irPj\",\"guide_components_panel_index.md\":\"CsTu0bXo\",\"guide_components_panel_properties.md\":\"BaxoCYKq\",\"guide_components_progress-bar_emits.md\":\"BcwXUpsF\",\"guide_components_progress-bar_properties.md\":\"TxiS9ZMA\",\"guide_components_progress-ring_emits.md\":\"D2Y6hIZ9\",\"guide_components_color-picker_index.md\":\"DCc4ixcU\",\"guide_components_progress-ring_index.md\":\"CPb-ZEPE\",\"guide_components_color-picker_properties.md\":\"wcXK29Vl\",\"guide_components_time-picker_index.md\":\"CQJdRRaG\",\"guide_components_drop-down_properties.md\":\"Bwlkpr1q\",\"guide_components_infinite-scroll-view_index.md\":\"yAuD807x\",\"guide_components_check-box_index.md\":\"FYgdu4oq\",\"guide_components_progress-bar_index.md\":\"D8vHQw5V\",\"guide_components_combo-box_index.md\":\"DTyu3eNd\",\"guide_components_info-box_emits.md\":\"DlEwpkkq\",\"guide_components_drop-down_index.md\":\"BZzJZQWq\",\"guide_components_list-view_index.md\":\"BoYvMzb0\",\"guide_components_verify-box_properties.md\":\"CW6W8fFf\",\"guide_components_verify-box_index.md\":\"DwSB40wR\",\"guide_index.md\":\"Bndlt3sL\",\"guide_components_web-window_index.md\":\"Bxc8vEeI\",\"index.md\":\"MTRqI42u\",\"guide_components_combo-box_properties.md\":\"AWfHzV6x\",\"guide_components_combobox_emits.md\":\"CGB6WLt8\",\"guide_components_combobox_properties.md\":\"Bja0hMou\",\"guide_components_details-list_index.md\":\"CcgOCIyt\",\"guide_components_info-box_index.md\":\"vXh-_DsL\",\"guide_components_combobox_index.md\":\"CsPkY6YB\",\"guide_components_date-picker_index.md\":\"12vmUIup\",\"guide_components_flip-view_emits.md\":\"DCheHjDj\",\"guide_components_panel_emits.md\":\"DG0REDq8\",\"guide_components_breadcrumb_index.md\":\"DyDm7PeP\",\"guide_components_radio-group_properties.md\":\"BnPxoKsQ\",\"guide_components_persona_emits.md\":\"CnsDPKRU\",\"guide_components_pivot_properties.md\":\"BmoLpPi1\",\"guide_components_persona_index.md\":\"DT00jby4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vfluent3\",\"description\":\"A Vue3 component library for Fluent UI\",\"base\":\"/VFluent3/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"VFluent3\",\"footer\":{\"message\":\"MIT Licensed\",\"copyright\":\"Copyright © Creator SN - 2022\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/\"}],\"sidebar\":[{\"text\":\"Basic input\",\"collapsed\":true,\"items\":[{\"text\":\"Button\",\"link\":\"/guide/components/button/\"},{\"text\":\"CheckBox\",\"link\":\"/guide/components/check-box/\"},{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"},{\"text\":\"Combobox\",\"link\":\"/guide/components/combobox/\"},{\"text\":\"DetailsList\",\"link\":\"/guide/components/details-list/\"},{\"text\":\"DropDown\",\"link\":\"/guide/components/drop-down/\"},{\"text\":\"Radio\",\"link\":\"/guide/components/radio/\"},{\"text\":\"RadioGroup\",\"link\":\"/guide/components/radio-group/\"},{\"text\":\"RatingControl\",\"link\":\"/guide/components/rating-control/\"},{\"text\":\"Slider\",\"link\":\"/guide/components/slider/\"},{\"text\":\"ToggleSwitch\",\"link\":\"/guide/components/toggle-switch/\"},{\"text\":\"Tag\",\"link\":\"/guide/components/tag/\"}]},{\"text\":\"Collections\",\"collapsed\":true,\"items\":[{\"text\":\"FlipView\",\"link\":\"/guide/components/flip-view/\"},{\"text\":\"ListView\",\"link\":\"/guide/components/list-view/\"},{\"text\":\"TreeView\",\"link\":\"/guide/components/tree-view/\"}]},{\"text\":\"Date & Time\",\"collapsed\":true,\"items\":[{\"text\":\"CalendarDatePicker\",\"link\":\"/guide/components/calendar-date-picker/\"},{\"text\":\"CalendarView\",\"link\":\"/guide/components/calendar-view/\"},{\"text\":\"DatePicker\",\"link\":\"/guide/components/date-picker/\"},{\"text\":\"TimePicker\",\"link\":\"/guide/components/time-picker/\"}]},{\"text\":\"Dialogs & flyouts\",\"collapsed\":true,\"items\":[{\"text\":\"Callout\",\"link\":\"/guide/components/callout/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Layout\",\"collapsed\":true,\"items\":[{\"text\":\"Collapse\",\"link\":\"/guide/components/collapse/\"},{\"text\":\"Expander\",\"link\":\"/guide/components/expander/\"},{\"text\":\"Drawer\",\"link\":\"/guide/components/drawer/\"},{\"text\":\"Panel\",\"link\":\"/guide/components/panel/\"}]},{\"text\":\"Media\",\"collapsed\":true,\"items\":[{\"text\":\"Image\",\"link\":\"/guide/components/image/\"},{\"text\":\"Img\",\"link\":\"/guide/components/img/\"},{\"text\":\"ImgBox\",\"link\":\"/guide/components/img-box/\"},{\"text\":\"Persona\",\"link\":\"/guide/components/persona/\"}]},{\"text\":\"Menu & toolbars\",\"collapsed\":true,\"items\":[{\"text\":\"CommandBar\",\"link\":\"/guide/components/command-bar/\"},{\"text\":\"MenuFlyout\",\"link\":\"/guide/components/menu-flyout/\"},{\"text\":\"SwipeControl\",\"link\":\"/guide/components/swipe-control/\"}]},{\"text\":\"Navigation\",\"collapsed\":true,\"items\":[{\"text\":\"Breadcrumb\",\"link\":\"/guide/components/breadcrumb/\"},{\"text\":\"NavigationPanel\",\"link\":\"/guide/components/navigation-panel/\"},{\"text\":\"NavigationView\",\"link\":\"/guide/components/navigation-view/\"},{\"text\":\"Pivot\",\"link\":\"/guide/components/pivot/\"},{\"text\":\"Pagination\",\"link\":\"/guide/components/pagination/\"}]},{\"text\":\"Scrolling\",\"collapsed\":true,\"items\":[{\"text\":\"InfiniteScrollView\",\"link\":\"/guide/components/infinite-scroll-view/\"},{\"text\":\"ScrollStory\",\"link\":\"/guide/components/scroll-story/\"}]},{\"text\":\"Status & info\",\"collapsed\":true,\"items\":[{\"text\":\"Badge\",\"link\":\"/guide/components/badge/\"},{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"ProgressBar\",\"link\":\"/guide/components/progress-bar/\"},{\"text\":\"ProgressRing\",\"link\":\"/guide/components/progress-ring/\"}]},{\"text\":\"Styles\",\"collapsed\":true,\"items\":[{\"text\":\"AnimatedIcon\",\"link\":\"/guide/components/animated-icon/\"},{\"text\":\"IconElement\",\"link\":\"/guide/components/icon-element/\"},{\"text\":\"RevealContainer\",\"link\":\"/guide/components/reveal-container/\"},{\"text\":\"Shimmer\",\"link\":\"/guide/components/shimmer/\"}]},{\"text\":\"Text\",\"collapsed\":true,\"items\":[{\"text\":\"SearchBox\",\"link\":\"/guide/components/search-box/\"},{\"text\":\"TextBox\",\"link\":\"/guide/components/text-box/\"},{\"text\":\"TextField\",\"link\":\"/guide/components/text-field/\"},{\"text\":\"VerifyBox\",\"link\":\"/guide/components/verify-box/\"}]},{\"text\":\"Windowing\",\"collapsed\":true,\"items\":[{\"text\":\"WebWindow\",\"link\":\"/guide/components/web-window/\"}]},{\"text\":\"Global\",\"collapsed\":true,\"items\":[{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Advance\",\"collapsed\":true,\"items\":[{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git a/guide/components/breadcrumb/index.html b/guide/components/breadcrumb/index.html
new file mode 100644
index 0000000..18abd48
--- /dev/null
+++ b/guide/components/breadcrumb/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>Breadcrumb | vfluent3</title>
+    <meta name="description" content="A Vue3 component library for Fluent UI">
+    <meta name="generator" content="VitePress v1.0.0-rc.45">
+    <link rel="preload stylesheet" href="/VFluent3/assets/style.BabQegKX.css" as="style">
+    
+    <script type="module" src="/VFluent3/assets/app.CSutcJ2E.js"></script>
+    <link rel="preload" href="/VFluent3/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/framework.DvIFzl91.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/theme.CgqFBnN_.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/index.CvzShnhD.js">
+    <link rel="modulepreload" href="/VFluent3/assets/guide_components_breadcrumb_index.md.DyDm7PeP.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-19c990f1><div class="wrapper" data-v-19c990f1><div class="container" data-v-19c990f1><div class="title" data-v-19c990f1><div class="VPNavBarTitle has-sidebar" data-v-19c990f1 data-v-ab179fa1><a class="title" href="/VFluent3/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>VFluent3</span><!--[--><!--]--></a></div></div><div class="content" data-v-19c990f1><div class="content-body" data-v-19c990f1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-19c990f1><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-19c990f1 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Guide</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-19c990f1 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-19c990f1 data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-19c990f1 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-19c990f1><div class="divider-line" data-v-19c990f1></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-d2ecc192><button data-v-d2ecc192>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-575e6a36><div class="curtain" data-v-575e6a36></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-575e6a36><span class="visually-hidden" id="sidebar-aria-label" data-v-575e6a36> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Basic input</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/button/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/check-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CheckBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/combobox/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Combobox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/details-list/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DetailsList</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drop-down/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DropDown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio-group/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RadioGroup</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/rating-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RatingControl</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/slider/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/toggle-switch/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ToggleSwitch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tag/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Tag</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Collections</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/flip-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>FlipView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/list-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ListView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tree-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TreeView</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Date & Time</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarDatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/time-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TimePicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Dialogs & flyouts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/callout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Callout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Layout</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/collapse/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Collapse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/expander/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Expander</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drawer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Panel</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Media</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/image/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Img</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ImgBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/persona/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Persona</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Menu & toolbars</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/command-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CommandBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/menu-flyout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MenuFlyout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/swipe-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SwipeControl</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible has-active" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Navigation</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/breadcrumb/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationPanel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pivot/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pivot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pagination/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pagination</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Scrolling</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/infinite-scroll-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfiniteScrollView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/scroll-story/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ScrollStory</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Status & info</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/badge/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-ring/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressRing</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Styles</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/animated-icon/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>AnimatedIcon</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/icon-element/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>IconElement</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/reveal-container/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RevealContainer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/shimmer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Shimmer</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Text</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/search-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SearchBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-field/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextField</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/verify-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>VerifyBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Windowing</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/web-window/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>WebWindow</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Global</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Advance</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-935f8a84><div class="content" data-v-935f8a84><div class="outline-marker" data-v-935f8a84></div><div class="outline-title" role="heading" aria-level="2" data-v-935f8a84>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-935f8a84><span class="visually-hidden" id="doc-outline-aria-label" data-v-935f8a84> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-935f8a84 data-v-b933a997><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _VFluent3_guide_components_breadcrumb_" data-v-39a288b8><div><h3 id="breadcrumb-demo" tabindex="-1">Breadcrumb-DEMO <a class="header-anchor" href="#breadcrumb-demo" aria-label="Permalink to &quot;Breadcrumb-DEMO&quot;">​</a></h3><hr><p>Basic</p><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Breadcrumb</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> modelValue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;/creatorsn/vfluent/breadcrumb&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Breadcrumb</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="breadcrumb-editable" tabindex="-1">Breadcrumb-Editable <a class="header-anchor" href="#breadcrumb-editable" aria-label="Permalink to &quot;Breadcrumb-Editable&quot;">​</a></h3><hr><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Breadcrumb</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> modelValue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;/creatorsn/vfluent/breadcrumb&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">readOnly</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Breadcrumb</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="breadcrumb-custom-icon" tabindex="-1">Breadcrumb-Custom Icon <a class="header-anchor" href="#breadcrumb-custom-icon" aria-label="Permalink to &quot;Breadcrumb-Custom Icon&quot;">​</a></h3><hr><ol><li>Char</li></ol><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Breadcrumb</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> modelValue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;/creatorsn/vfluent/breadcrumb&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">readOnly</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> separator</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;&gt;&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Breadcrumb</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><ol start="2"><li>Icon</li></ol><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Breadcrumb</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> modelValue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;/creatorsn/vfluent/breadcrumb&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">readOnly</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> separator</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ChevronRightMed&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Breadcrumb</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="breadcrumb-hide-root" tabindex="-1">Breadcrumb-Hide Root <a class="header-anchor" href="#breadcrumb-hide-root" aria-label="Permalink to &quot;Breadcrumb-Hide Root&quot;">​</a></h3><hr><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Breadcrumb</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> modelValue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;/creatorsn/vfluent/breadcrumb&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">readOnly</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">showRoot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Breadcrumb</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="breadcrumb-dark-theme" tabindex="-1">Breadcrumb-Dark Theme <a class="header-anchor" href="#breadcrumb-dark-theme" aria-label="Permalink to &quot;Breadcrumb-Dark Theme&quot;">​</a></h3><hr><div style="padding:8px;background:black;"><!----></div><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">padding</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">8</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">black</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;fv-Breadcrumb modelValue=&quot;/creatorsn/vfluent/breadcrumb&quot; theme=&quot;dark&quot; :readOnly=&quot;false&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/fv-Breadcrumb&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h3 id="breadcrumb-dark-disabled" tabindex="-1">Breadcrumb-Dark Disabled <a class="header-anchor" href="#breadcrumb-dark-disabled" aria-label="Permalink to &quot;Breadcrumb-Dark Disabled&quot;">​</a></h3><hr><ol><li>Light</li></ol><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Breadcrumb</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> modelValue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;/creatorsn/vfluent/breadcrumb&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">readOnly</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> disabled</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Breadcrumb</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><ol start="2"><li>Dark</li></ol><div style="padding:8px;background:black;"><!----></div><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">padding</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">8</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">black</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;fv-Breadcrumb modelValue=&quot;/creatorsn/vfluent/breadcrumb&quot; theme=&quot;dark&quot; :readOnly=&quot;false&quot; disabled&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/fv-Breadcrumb&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">modelValue</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">字符串路径</td></tr><tr><td style="text-align:center;">separator</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">/</td><td style="text-align:center;">分隔符显示, 可以是字符或图标</td></tr><tr><td style="text-align:center;">separatorChar</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">/</td><td style="text-align:center;">以什么字符分割路径</td></tr><tr><td style="text-align:center;">showRoot</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">true</td><td style="text-align:center;">显示根图标</td></tr><tr><td style="text-align:center;">rootIcon</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">FolderHorizontal</td><td style="text-align:center;">根图标</td></tr><tr><td style="text-align:center;">readOnly</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">true</td><td style="text-align:center;">是否只读</td></tr><tr><td style="text-align:center;">borderColor</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">borderRadius</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">2</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">system</td><td style="text-align:center;">主题样式, 包含<code>light</code>, <code>dark</code>, <code>system</code>, <code>custom</code>几种样式</td></tr></tbody></table><h3 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to &quot;Events&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">事件名(Name)</th><th style="text-align:center;">参数类型(args)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">root-click</td><td style="text-align:center;">object</td><td style="text-align:center;">单击根图标触发</td></tr><tr><td style="text-align:center;">item-click</td><td style="text-align:center;">object</td><td style="text-align:center;">单击路由项触发</td></tr></tbody></table><h3 id="slot" tabindex="-1">Slot <a class="header-anchor" href="#slot" aria-label="Permalink to &quot;Slot&quot;">​</a></h3><hr><ol><li>root</li></ol><p>定义下拉内容</p><ul><li>rootIcon: 根图标</li><li>separatorIcon: 分割图标</li><li>separator: 分隔符</li></ul><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">root</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">i</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;fv-bc-separator-content ms-Icon&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">`ms-Icon--${</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">.</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">rootIcon</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">}`</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">i</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">i</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;fv-bc-separator-icon ms-Icon&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[x.separatorIcon </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> `ms-Icon--${</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">.</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">separator</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">}`</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> :</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;{{x.separatorIcon </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;&#39;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> :</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> x.separator}}&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">i</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><ol start="2"><li>route-item</li></ol><p>自定义<code>Collapse</code>显示图标</p><ul><li>item: 当前项</li><li>index: 当前索引</li></ul><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">route-item</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">i</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ms-Icon&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">`ms-Icon--${</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">.</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">icon</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">}`</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">i</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-09de1c0f><!--[--><!--]--><!----><nav class="prev-next" data-v-09de1c0f><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link prev" href="/VFluent3/guide/components/swipe-control/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Previous page</span><span class="title" data-v-09de1c0f>SwipeControl</span><!--]--></a></div><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link next" href="/VFluent3/guide/components/navigation-panel/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Next page</span><span class="title" data-v-09de1c0f>NavigationPanel</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>MIT Licensed</p><p class="copyright" data-v-e315a0ad>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_calendar-date-picker_properties.md\":\"DXRjmMG8\",\"guide_components_image_properties.md\":\"DGanRzCb\",\"guide_components_img-box_index.md\":\"DYtggkf_\",\"guide_components_img_emits.md\":\"BlE7jvZQ\",\"guide_components_img_index.md\":\"Bm9FiuU4\",\"guide_components_icon-element_properties.md\":\"8Oakruwc\",\"guide_components_img_properties.md\":\"B42YSocI\",\"guide_components_drawer_index.md\":\"D_vpnCpE\",\"guide_components_verify-box_emits.md\":\"DT17Iazx\",\"guide_components_calendar-date-picker_index.md\":\"BdHjrurh\",\"guide_components_rating-control_index.md\":\"Q9l5Lfrr\",\"guide_components_rating-control_properties.md\":\"DKprnl0i\",\"guide_components_calendar-view_index.md\":\"zdoRYVx1\",\"guide_components_animated-icon_index.md\":\"yZDMzCFe\",\"guide_components_calendar-date-picker_emits.md\":\"D5OkfR8j\",\"guide_components_badge_index.md\":\"Bb4crrJn\",\"guide_components_image_index.md\":\"B7X6cWAZ\",\"guide_components_slider_index.md\":\"C7zZ2d-W\",\"guide_components_radio-group_index.md\":\"CVfh3h5H\",\"guide_components_swipe-control_index.md\":\"DwrDVPc1\",\"guide_components_color-picker_emits.md\":\"BHDXVtBQ\",\"guide_components_radio_index.md\":\"90as5QGp\",\"guide_components_pagination_properties.md\":\"JUAPvcTL\",\"guide_components_persona_properties.md\":\"DUTPhPMp\",\"guide_components_combo-box_emits.md\":\"Dh5R-qEv\",\"guide_components_pivot_emits.md\":\"BTJPgNpy\",\"guide_components_pagination_index.md\":\"CnW2zAht\",\"guide_components_flip-view_properties.md\":\"BqZ4hhgU\",\"guide_components_icon-element_emits.md\":\"D5TXFdTZ\",\"guide_components_flip-view_index.md\":\"DefnDOv6\",\"guide_components_navigation-panel_index.md\":\"6mO__sSK\",\"guide_components_rating-control_emits.md\":\"blvomSeC\",\"guide_components_icon-element_index.md\":\"DQ8K7JNn\",\"guide_components_navigation-view_index.md\":\"4AQRiz1k\",\"guide_components_toggle-switch_emits.md\":\"CLGzrNut\",\"guide_components_toggle-switch_index.md\":\"61en_q9-\",\"guide_components_scroll-story_index.md\":\"Vpgb1HSV\",\"guide_components_reveal-container_index.md\":\"Cut2r4tV\",\"guide_components_search-box_emits.md\":\"-d9sWNNt\",\"guide_components_search-box_properties.md\":\"DEKFfPFw\",\"guide_components_shimmer_emits.md\":\"CTMInlI3\",\"guide_components_tag_index.md\":\"BhhxkcHn\",\"guide_components_search-box_index.md\":\"DgkrY0oY\",\"guide_components_shimmer_index.md\":\"iZlHuTxw\",\"guide_components_shimmer_properties.md\":\"CdkU1o6H\",\"guide_components_tree-view_index.md\":\"CUrwan4q\",\"guide_components_text-field_index.md\":\"CXSimJtj\",\"guide_components_text-box_index.md\":\"C5moAPfB\",\"guide_components_progress-ring_properties.md\":\"Dc08Uiff\",\"guide_components_toggle-switch_properties.md\":\"tFppK_IS\",\"guide_components_radio-group_emits.md\":\"cEDzKVnN\",\"guide_components_collapse_index.md\":\"N9Iu5-2v\",\"guide_components_image_emits.md\":\"lmlz2xJd\",\"guide_components_callout_index.md\":\"D9RU33w6\",\"guide_components_pivot_index.md\":\"B_vwQL-5\",\"guide_components_command-bar_index.md\":\"Cp4_rrGB\",\"guide_components_pagination_emits.md\":\"Dng86A22\",\"guide_components_button_index.md\":\"7sqT2MQP\",\"guide_components_info-box_properties.md\":\"BI7Nvk-E\",\"guide_components_drop-down_emits.md\":\"BE95TdKW\",\"guide_components_expander_index.md\":\"BKgcUJzQ\",\"guide_components_message-bar_index.md\":\"AEtAWlF8\",\"guide_components_menu-flyout_index.md\":\"Csa7irPj\",\"guide_components_panel_index.md\":\"CsTu0bXo\",\"guide_components_panel_properties.md\":\"BaxoCYKq\",\"guide_components_progress-bar_emits.md\":\"BcwXUpsF\",\"guide_components_progress-bar_properties.md\":\"TxiS9ZMA\",\"guide_components_progress-ring_emits.md\":\"D2Y6hIZ9\",\"guide_components_color-picker_index.md\":\"DCc4ixcU\",\"guide_components_progress-ring_index.md\":\"CPb-ZEPE\",\"guide_components_color-picker_properties.md\":\"wcXK29Vl\",\"guide_components_time-picker_index.md\":\"CQJdRRaG\",\"guide_components_drop-down_properties.md\":\"Bwlkpr1q\",\"guide_components_infinite-scroll-view_index.md\":\"yAuD807x\",\"guide_components_check-box_index.md\":\"FYgdu4oq\",\"guide_components_progress-bar_index.md\":\"D8vHQw5V\",\"guide_components_combo-box_index.md\":\"DTyu3eNd\",\"guide_components_info-box_emits.md\":\"DlEwpkkq\",\"guide_components_drop-down_index.md\":\"BZzJZQWq\",\"guide_components_list-view_index.md\":\"BoYvMzb0\",\"guide_components_verify-box_properties.md\":\"CW6W8fFf\",\"guide_components_verify-box_index.md\":\"DwSB40wR\",\"guide_index.md\":\"Bndlt3sL\",\"guide_components_web-window_index.md\":\"Bxc8vEeI\",\"index.md\":\"MTRqI42u\",\"guide_components_combo-box_properties.md\":\"AWfHzV6x\",\"guide_components_combobox_emits.md\":\"CGB6WLt8\",\"guide_components_combobox_properties.md\":\"Bja0hMou\",\"guide_components_details-list_index.md\":\"CcgOCIyt\",\"guide_components_info-box_index.md\":\"vXh-_DsL\",\"guide_components_combobox_index.md\":\"CsPkY6YB\",\"guide_components_date-picker_index.md\":\"12vmUIup\",\"guide_components_flip-view_emits.md\":\"DCheHjDj\",\"guide_components_panel_emits.md\":\"DG0REDq8\",\"guide_components_breadcrumb_index.md\":\"DyDm7PeP\",\"guide_components_radio-group_properties.md\":\"BnPxoKsQ\",\"guide_components_persona_emits.md\":\"CnsDPKRU\",\"guide_components_pivot_properties.md\":\"BmoLpPi1\",\"guide_components_persona_index.md\":\"DT00jby4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vfluent3\",\"description\":\"A Vue3 component library for Fluent UI\",\"base\":\"/VFluent3/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"VFluent3\",\"footer\":{\"message\":\"MIT Licensed\",\"copyright\":\"Copyright © Creator SN - 2022\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/\"}],\"sidebar\":[{\"text\":\"Basic input\",\"collapsed\":true,\"items\":[{\"text\":\"Button\",\"link\":\"/guide/components/button/\"},{\"text\":\"CheckBox\",\"link\":\"/guide/components/check-box/\"},{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"},{\"text\":\"Combobox\",\"link\":\"/guide/components/combobox/\"},{\"text\":\"DetailsList\",\"link\":\"/guide/components/details-list/\"},{\"text\":\"DropDown\",\"link\":\"/guide/components/drop-down/\"},{\"text\":\"Radio\",\"link\":\"/guide/components/radio/\"},{\"text\":\"RadioGroup\",\"link\":\"/guide/components/radio-group/\"},{\"text\":\"RatingControl\",\"link\":\"/guide/components/rating-control/\"},{\"text\":\"Slider\",\"link\":\"/guide/components/slider/\"},{\"text\":\"ToggleSwitch\",\"link\":\"/guide/components/toggle-switch/\"},{\"text\":\"Tag\",\"link\":\"/guide/components/tag/\"}]},{\"text\":\"Collections\",\"collapsed\":true,\"items\":[{\"text\":\"FlipView\",\"link\":\"/guide/components/flip-view/\"},{\"text\":\"ListView\",\"link\":\"/guide/components/list-view/\"},{\"text\":\"TreeView\",\"link\":\"/guide/components/tree-view/\"}]},{\"text\":\"Date & Time\",\"collapsed\":true,\"items\":[{\"text\":\"CalendarDatePicker\",\"link\":\"/guide/components/calendar-date-picker/\"},{\"text\":\"CalendarView\",\"link\":\"/guide/components/calendar-view/\"},{\"text\":\"DatePicker\",\"link\":\"/guide/components/date-picker/\"},{\"text\":\"TimePicker\",\"link\":\"/guide/components/time-picker/\"}]},{\"text\":\"Dialogs & flyouts\",\"collapsed\":true,\"items\":[{\"text\":\"Callout\",\"link\":\"/guide/components/callout/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Layout\",\"collapsed\":true,\"items\":[{\"text\":\"Collapse\",\"link\":\"/guide/components/collapse/\"},{\"text\":\"Expander\",\"link\":\"/guide/components/expander/\"},{\"text\":\"Drawer\",\"link\":\"/guide/components/drawer/\"},{\"text\":\"Panel\",\"link\":\"/guide/components/panel/\"}]},{\"text\":\"Media\",\"collapsed\":true,\"items\":[{\"text\":\"Image\",\"link\":\"/guide/components/image/\"},{\"text\":\"Img\",\"link\":\"/guide/components/img/\"},{\"text\":\"ImgBox\",\"link\":\"/guide/components/img-box/\"},{\"text\":\"Persona\",\"link\":\"/guide/components/persona/\"}]},{\"text\":\"Menu & toolbars\",\"collapsed\":true,\"items\":[{\"text\":\"CommandBar\",\"link\":\"/guide/components/command-bar/\"},{\"text\":\"MenuFlyout\",\"link\":\"/guide/components/menu-flyout/\"},{\"text\":\"SwipeControl\",\"link\":\"/guide/components/swipe-control/\"}]},{\"text\":\"Navigation\",\"collapsed\":true,\"items\":[{\"text\":\"Breadcrumb\",\"link\":\"/guide/components/breadcrumb/\"},{\"text\":\"NavigationPanel\",\"link\":\"/guide/components/navigation-panel/\"},{\"text\":\"NavigationView\",\"link\":\"/guide/components/navigation-view/\"},{\"text\":\"Pivot\",\"link\":\"/guide/components/pivot/\"},{\"text\":\"Pagination\",\"link\":\"/guide/components/pagination/\"}]},{\"text\":\"Scrolling\",\"collapsed\":true,\"items\":[{\"text\":\"InfiniteScrollView\",\"link\":\"/guide/components/infinite-scroll-view/\"},{\"text\":\"ScrollStory\",\"link\":\"/guide/components/scroll-story/\"}]},{\"text\":\"Status & info\",\"collapsed\":true,\"items\":[{\"text\":\"Badge\",\"link\":\"/guide/components/badge/\"},{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"ProgressBar\",\"link\":\"/guide/components/progress-bar/\"},{\"text\":\"ProgressRing\",\"link\":\"/guide/components/progress-ring/\"}]},{\"text\":\"Styles\",\"collapsed\":true,\"items\":[{\"text\":\"AnimatedIcon\",\"link\":\"/guide/components/animated-icon/\"},{\"text\":\"IconElement\",\"link\":\"/guide/components/icon-element/\"},{\"text\":\"RevealContainer\",\"link\":\"/guide/components/reveal-container/\"},{\"text\":\"Shimmer\",\"link\":\"/guide/components/shimmer/\"}]},{\"text\":\"Text\",\"collapsed\":true,\"items\":[{\"text\":\"SearchBox\",\"link\":\"/guide/components/search-box/\"},{\"text\":\"TextBox\",\"link\":\"/guide/components/text-box/\"},{\"text\":\"TextField\",\"link\":\"/guide/components/text-field/\"},{\"text\":\"VerifyBox\",\"link\":\"/guide/components/verify-box/\"}]},{\"text\":\"Windowing\",\"collapsed\":true,\"items\":[{\"text\":\"WebWindow\",\"link\":\"/guide/components/web-window/\"}]},{\"text\":\"Global\",\"collapsed\":true,\"items\":[{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Advance\",\"collapsed\":true,\"items\":[{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git a/guide/components/button/emits.html b/guide/components/button/emits.html
deleted file mode 100644
index 449216e..0000000
--- a/guide/components/button/emits.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<!DOCTYPE html>
-<html lang="en-US">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>Emits | vfluent3</title>
-    <meta name="description" content="A Vue3 component library for Fluent UI">
-    <link rel="stylesheet" href="/VFluent3/assets/style.0a1d87af.css">
-    <link rel="modulepreload" href="/VFluent3/assets/app.d60fa8c3.js">
-    <link rel="modulepreload" href="/VFluent3/assets/guide_components_button_emits.md.d682bf18.lean.js">
-    
-    <script>(()=>{const e=localStorage.getItem("vitepress-theme-appearance"),a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
-  </head>
-  <body>
-    <div id="app"><div class="Layout" data-v-058b7495><!--[--><!--]--><!--[--><span tabindex="-1" data-v-bea91388></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-bea91388> Skip to content </a><!--]--><!----><header class="VPNav" data-v-058b7495 data-v-2a0a2738><div class="VPNavBar has-sidebar" data-v-2a0a2738 data-v-45c9f423><div class="container" data-v-45c9f423><div class="VPNavBarTitle has-sidebar" data-v-45c9f423 data-v-011600ce><a class="title" href="/VFluent3/" data-v-011600ce><!----><!--[-->VFluent3<!--]--></a></div><div class="content" data-v-45c9f423><!----><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-45c9f423 data-v-4da4371d><span id="main-nav-aria-label" class="visually-hidden" data-v-4da4371d>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" data-v-4da4371d data-v-66f8d518 data-v-4d08dd3a><!--[-->Home<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" data-v-4da4371d data-v-66f8d518 data-v-4d08dd3a><!--[-->Guide<!--]--><!----></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-45c9f423 data-v-bf1c94ca><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" data-v-bf1c94ca data-v-d0ee0df2 data-v-55b931a0><span class="check" data-v-55b931a0><span class="icon" data-v-55b931a0><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-d0ee0df2><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-d0ee0df2><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-45c9f423 data-v-7cece6ac data-v-37af1650><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-37af1650><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-37af1650><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-37af1650><div class="VPMenu" data-v-37af1650 data-v-17dc081b><!----><!--[--><!--[--><!----><div class="group" data-v-7cece6ac><div class="item appearance" data-v-7cece6ac><p class="label" data-v-7cece6ac>Appearance</p><div class="appearance-action" data-v-7cece6ac><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" data-v-7cece6ac data-v-d0ee0df2 data-v-55b931a0><span class="check" data-v-55b931a0><span class="icon" data-v-55b931a0><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-d0ee0df2><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-d0ee0df2><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-45c9f423 data-v-5484e669><span class="container" data-v-5484e669><span class="top" data-v-5484e669></span><span class="middle" data-v-5484e669></span><span class="bottom" data-v-5484e669></span></span></button></div></div></div><!----></header><div class="VPLocalNav" data-v-058b7495 data-v-f623cd72><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-f623cd72><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-f623cd72><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-f623cd72>Menu</span></button><a class="top-link" href="#" data-v-f623cd72> Return to top </a></div><aside class="VPSidebar" data-v-058b7495 data-v-3b8ec0c7><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-3b8ec0c7><span class="visually-hidden" id="sidebar-aria-label" data-v-3b8ec0c7> Sidebar Navigation </span><!--[--><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Basic</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/button/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Button</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/check-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>CheckBox</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/radio/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Radio</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/progress-bar/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ProgressBar</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/progress-ring/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ProgressRing</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/toggle-switch/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ToggleSwitch</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/img/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Img</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/text-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>TextBox</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/combo-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ComboBox</span><!--]--><!----></a><!--]--></div></section></div><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Global</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/message-bar/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>MessageBar</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/info-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>InfoBox</span><!--]--><!----></a><!--]--></div></section></div><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Advance</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/color-picker/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ColorPicker</span><!--]--><!----></a><!--]--></div></section></div><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-058b7495 data-v-564173e9><div class="VPDoc has-sidebar" data-v-564173e9 data-v-32b7ddf4><div class="container" data-v-32b7ddf4><div class="aside" data-v-32b7ddf4><div class="aside-curtain" data-v-32b7ddf4></div><div class="aside-container" data-v-32b7ddf4><div class="aside-content" data-v-32b7ddf4><div class="VPDocAside" data-v-32b7ddf4 data-v-35c1bae1><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline has-outline" data-v-35c1bae1 data-v-123cce62><div class="content" data-v-123cce62><div class="outline-marker" data-v-123cce62></div><div class="outline-title" data-v-123cce62>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-123cce62><span class="visually-hidden" id="doc-outline-aria-label" data-v-123cce62> Table of Contents for current page </span><ul class="root" data-v-123cce62><!--[--><li style="" data-v-123cce62><a class="outline-link" href="#emits" data-v-123cce62>Emits</a><!----></li><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-35c1bae1></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-32b7ddf4><div class="content-container" data-v-32b7ddf4><!--[--><!--]--><main class="main" data-v-32b7ddf4><div style="position:relative;" class="vp-doc _VFluent3_guide_components_button_emits" data-v-32b7ddf4><div><h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">click</td><td style="text-align:center;">evt[Event]</td><td style="text-align:center;">onclick</td></tr></tbody></table></div></div></main><footer class="VPDocFooter" data-v-32b7ddf4 data-v-cfaa3a6c><div class="edit-info" data-v-cfaa3a6c><!----><!----></div><div class="prev-next" data-v-cfaa3a6c><div class="pager" data-v-cfaa3a6c><!----></div><div class="pager" data-v-cfaa3a6c><a class="pager-link next" href="/VFluent3/guide/components/button/" data-v-cfaa3a6c><span class="desc" data-v-cfaa3a6c>Next page</span><span class="title" data-v-cfaa3a6c>Button</span></a></div></div></footer><!--[--><!--]--></div></div></div></div></div><footer class="VPFooter has-sidebar" data-v-058b7495 data-v-a6c8dde4><div class="container" data-v-a6c8dde4><p class="message" data-v-a6c8dde4>MIT Licensed</p><p class="copyright" data-v-a6c8dde4>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
-    <script>__VP_HASH_MAP__ = JSON.parse("{\"guide_components_button_emits.md\":\"d682bf18\",\"guide_components_button_index.md\":\"23a8eb54\",\"guide_components_button_properties.md\":\"cd4004b6\",\"guide_components_check-box_emits.md\":\"31609794\",\"guide_components_check-box_index.md\":\"32046814\",\"guide_components_check-box_properties.md\":\"8f33ac0c\",\"guide_components_color-picker_emits.md\":\"00983cd0\",\"guide_components_color-picker_index.md\":\"b2d62612\",\"guide_components_color-picker_properties.md\":\"5466ba72\",\"guide_components_combo-box_emits.md\":\"d5ffda50\",\"guide_components_combo-box_index.md\":\"1c4364f5\",\"guide_components_combo-box_properties.md\":\"2e1d6060\",\"guide_components_img_emits.md\":\"6237adb4\",\"guide_components_img_index.md\":\"fa51a3a1\",\"guide_components_img_properties.md\":\"8d321b5e\",\"guide_components_info-box_emits.md\":\"c2e71eec\",\"guide_components_info-box_index.md\":\"06175fed\",\"guide_components_info-box_properties.md\":\"314dbb00\",\"guide_components_message-bar_emits.md\":\"e89a5a22\",\"guide_components_message-bar_index.md\":\"3f0b01d6\",\"guide_components_message-bar_properties.md\":\"ee3838d9\",\"guide_components_progress-bar_emits.md\":\"5b611e3b\",\"guide_components_progress-bar_index.md\":\"689c3241\",\"guide_components_progress-bar_properties.md\":\"39af7fb2\",\"guide_components_progress-ring_emits.md\":\"67e4644e\",\"guide_components_progress-ring_index.md\":\"9a33542b\",\"guide_components_progress-ring_properties.md\":\"c897c4bb\",\"guide_components_radio_emits.md\":\"28506857\",\"guide_components_radio_index.md\":\"e5a479ce\",\"guide_components_radio_properties.md\":\"f8e55d2f\",\"guide_components_text-box_emits.md\":\"0bf89ef8\",\"guide_components_text-box_index.md\":\"7ccfc637\",\"guide_components_text-box_properties.md\":\"aab3a89e\",\"guide_components_toggle-switch_emits.md\":\"5146435f\",\"guide_components_toggle-switch_index.md\":\"8be48081\",\"guide_components_toggle-switch_properties.md\":\"54984c3a\",\"guide_index.md\":\"e3dca1d7\",\"index.md\":\"1e9773d5\"}")</script>
-    <script type="module" async src="/VFluent3/assets/app.d60fa8c3.js"></script>
-    
-  </body>
-</html>
\ No newline at end of file
diff --git a/guide/components/button/index.html b/guide/components/button/index.html
index 18934ef..06780c7 100644
--- a/guide/components/button/index.html
+++ b/guide/components/button/index.html
@@ -1,54 +1,26 @@
 <!DOCTYPE html>
-<html lang="en-US">
+<html lang="en-US" dir="ltr">
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1">
     <title>Button | vfluent3</title>
     <meta name="description" content="A Vue3 component library for Fluent UI">
-    <link rel="stylesheet" href="/VFluent3/assets/style.0a1d87af.css">
-    <link rel="modulepreload" href="/VFluent3/assets/app.d60fa8c3.js">
-    <link rel="modulepreload" href="/VFluent3/assets/chunks/index.9dba9c16.js">
-    <link rel="modulepreload" href="/VFluent3/assets/guide_components_button_index.md.23a8eb54.lean.js">
+    <meta name="generator" content="VitePress v1.0.0-rc.45">
+    <link rel="preload stylesheet" href="/VFluent3/assets/style.BabQegKX.css" as="style">
     
-    <script>(()=>{const e=localStorage.getItem("vitepress-theme-appearance"),a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script type="module" src="/VFluent3/assets/app.CSutcJ2E.js"></script>
+    <link rel="preload" href="/VFluent3/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/framework.DvIFzl91.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/theme.CgqFBnN_.js">
+    <link rel="modulepreload" href="/VFluent3/assets/guide_components_button_index.md.7sqT2MQP.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
   </head>
   <body>
-    <div id="app"><div class="Layout" data-v-058b7495><!--[--><!--]--><!--[--><span tabindex="-1" data-v-bea91388></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-bea91388> Skip to content </a><!--]--><!----><header class="VPNav" data-v-058b7495 data-v-2a0a2738><div class="VPNavBar has-sidebar" data-v-2a0a2738 data-v-45c9f423><div class="container" data-v-45c9f423><div class="VPNavBarTitle has-sidebar" data-v-45c9f423 data-v-011600ce><a class="title" href="/VFluent3/" data-v-011600ce><!----><!--[-->VFluent3<!--]--></a></div><div class="content" data-v-45c9f423><!----><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-45c9f423 data-v-4da4371d><span id="main-nav-aria-label" class="visually-hidden" data-v-4da4371d>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" data-v-4da4371d data-v-66f8d518 data-v-4d08dd3a><!--[-->Home<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" data-v-4da4371d data-v-66f8d518 data-v-4d08dd3a><!--[-->Guide<!--]--><!----></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-45c9f423 data-v-bf1c94ca><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" data-v-bf1c94ca data-v-d0ee0df2 data-v-55b931a0><span class="check" data-v-55b931a0><span class="icon" data-v-55b931a0><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-d0ee0df2><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-d0ee0df2><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-45c9f423 data-v-7cece6ac data-v-37af1650><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-37af1650><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-37af1650><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-37af1650><div class="VPMenu" data-v-37af1650 data-v-17dc081b><!----><!--[--><!--[--><!----><div class="group" data-v-7cece6ac><div class="item appearance" data-v-7cece6ac><p class="label" data-v-7cece6ac>Appearance</p><div class="appearance-action" data-v-7cece6ac><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" data-v-7cece6ac data-v-d0ee0df2 data-v-55b931a0><span class="check" data-v-55b931a0><span class="icon" data-v-55b931a0><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-d0ee0df2><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-d0ee0df2><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-45c9f423 data-v-5484e669><span class="container" data-v-5484e669><span class="top" data-v-5484e669></span><span class="middle" data-v-5484e669></span><span class="bottom" data-v-5484e669></span></span></button></div></div></div><!----></header><div class="VPLocalNav" data-v-058b7495 data-v-f623cd72><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-f623cd72><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-f623cd72><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-f623cd72>Menu</span></button><a class="top-link" href="#" data-v-f623cd72> Return to top </a></div><aside class="VPSidebar" data-v-058b7495 data-v-3b8ec0c7><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-3b8ec0c7><span class="visually-hidden" id="sidebar-aria-label" data-v-3b8ec0c7> Sidebar Navigation </span><!--[--><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Basic</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link active" href="/VFluent3/guide/components/button/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Button</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/check-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>CheckBox</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/radio/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Radio</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/progress-bar/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ProgressBar</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/progress-ring/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ProgressRing</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/toggle-switch/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ToggleSwitch</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/img/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Img</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/text-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>TextBox</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/combo-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ComboBox</span><!--]--><!----></a><!--]--></div></section></div><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Global</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/message-bar/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>MessageBar</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/info-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>InfoBox</span><!--]--><!----></a><!--]--></div></section></div><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Advance</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/color-picker/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ColorPicker</span><!--]--><!----></a><!--]--></div></section></div><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-058b7495 data-v-564173e9><div class="VPDoc has-sidebar" data-v-564173e9 data-v-32b7ddf4><div class="container" data-v-32b7ddf4><div class="aside" data-v-32b7ddf4><div class="aside-curtain" data-v-32b7ddf4></div><div class="aside-container" data-v-32b7ddf4><div class="aside-content" data-v-32b7ddf4><div class="VPDocAside" data-v-32b7ddf4 data-v-35c1bae1><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline has-outline" data-v-35c1bae1 data-v-123cce62><div class="content" data-v-123cce62><div class="outline-marker" data-v-123cce62></div><div class="outline-title" data-v-123cce62>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-123cce62><span class="visually-hidden" id="doc-outline-aria-label" data-v-123cce62> Table of Contents for current page </span><ul class="root" data-v-123cce62><!--[--><li style="" data-v-123cce62><a class="outline-link" href="#quick-start" data-v-123cce62>Quick Start</a><!----></li><li style="" data-v-123cce62><a class="outline-link" href="#properties" data-v-123cce62>Properties</a><!----></li><li style="" data-v-123cce62><a class="outline-link" href="#emits" data-v-123cce62>Emits</a><!----></li><li style="" data-v-123cce62><a class="outline-link" href="#slot" data-v-123cce62>Slot</a><!----></li><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-35c1bae1></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-32b7ddf4><div class="content-container" data-v-32b7ddf4><!--[--><!--]--><main class="main" data-v-32b7ddf4><div style="position:relative;" class="vp-doc _VFluent3_guide_components_button_index" data-v-32b7ddf4><div><h1 id="button" tabindex="-1">Button <a class="header-anchor" href="#button" aria-hidden="true">#</a></h1><h2 id="quick-start" tabindex="-1">Quick Start <a class="header-anchor" href="#quick-start" aria-hidden="true">#</a></h2><h3 id="default" tabindex="-1">Default <a class="header-anchor" href="#default" aria-hidden="true">#</a></h3><hr><div class="fv-button light"><button type="button" class="button-container" style="border-width:2px;border-radius:3px;"><span class="content-block" style="font-weight:normal;"><!----><!--[-->Button<!--]--></span></button></div><div class="language-vue-html"><span class="copy"></span><div class="highlight-lines"><br><div class="highlighted"> </div><div class="highlighted"> </div><br><br><br><br></div><pre><code><span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-button</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    @</span><span style="color:#C792EA;">click</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">click</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">  &gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">    Button</span></span>
-<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-button</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h3 id="is-box-shadow" tabindex="-1">Is Box Shadow <a class="header-anchor" href="#is-box-shadow" aria-hidden="true">#</a></h3><br><div class="fv-button light"><button type="button" class="button-container shadow" style="border-width:2px;border-radius:3px;"><span class="content-block" style="font-weight:normal;"><!----><!--[-->Button<!--]--></span></button></div><div class="language-vue-html"><span class="copy"></span><div class="highlight-lines"><br><div class="highlighted"> </div><br><br><br><br><br><br></div><pre><code><span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-button</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">is-box-shadow</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    @</span><span style="color:#C792EA;">click</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">click</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">  &gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">    Button</span></span>
-<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-button</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h3 id="disabled" tabindex="-1">Disabled <a class="header-anchor" href="#disabled" aria-hidden="true">#</a></h3><br><div class="fv-button light"><button type="button" class="button-container disabled" style="border-width:2px;border-radius:3px;"><span class="content-block" style="font-weight:normal;"><!----><!--[-->Button<!--]--></span></button></div><div class="language-vue-html"><span class="copy"></span><div class="highlight-lines"><br><div class="highlighted"> </div><br><br><br><br><br><br></div><pre><code><span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-button</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">disabled</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    @</span><span style="color:#C792EA;">click</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">click</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">  &gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">    Button</span></span>
-<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-button</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h3 id="custom-style" tabindex="-1">Custom style <a class="header-anchor" href="#custom-style" aria-hidden="true">#</a></h3><hr><div class="fv-button light"><button type="button" class="button-container" style="color:whitesmoke;background:rgb(15, 60, 104);border-width:2px;border-radius:5px;"><span class="content-block" style="font-size:0.8rem;font-weight:normal;"><i class="ms-Icon ms-Icon--Add"></i><!--[-->Button<!--]--></span></button></div><div class="language-vue-html"><span class="copy"></span><div class="highlight-lines"><br><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><br><br><br><br><br></div><pre><code><span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-button</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">icon</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">Add</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">background</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">rgb(15, 60, 104)</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">foreground</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">whitesmoke</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">font-size</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">0.8rem</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">    :</span><span style="color:#C792EA;">border-radius</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#F78C6C;">5</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">    @</span><span style="color:#C792EA;">click</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">click</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">  &gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">  Button</span></span>
-<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-button</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">background</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">background color</td></tr><tr><td style="text-align:center;">border-radius</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">3</td><td style="text-align:center;">border radius</td></tr><tr><td style="text-align:center;">border-width</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">2</td><td style="text-align:center;">border Width</td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">disabled</td></tr><tr><td style="text-align:center;">font-size</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">font size</td></tr><tr><td style="text-align:center;">font-weight</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&quot;normal&quot;</td><td style="text-align:center;">font weight</td></tr><tr><td style="text-align:center;">foreground</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">foreground color</td></tr><tr><td style="text-align:center;">icon</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">icon with Fabric-Icon</td></tr><tr><td style="text-align:center;">is-box-shadow</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">default shadow style</td></tr><tr><td style="text-align:center;">lang</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">i18n</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">[&#39;light&#39;, &#39;dark&#39;, &#39;global&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&quot;global&quot;</td><td style="text-align:center;">theme</td></tr></tbody></table><h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">click</td><td style="text-align:center;">evt[Event]</td><td style="text-align:center;">onclick</td></tr></tbody></table><h2 id="slot" tabindex="-1">Slot <a class="header-anchor" href="#slot" aria-hidden="true">#</a></h2><hr><h3 id="default-1" tabindex="-1">Default <a class="header-anchor" href="#default-1" aria-hidden="true">#</a></h3><div class="language-vue-html"><span class="copy"></span><pre><code><span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-button</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">span</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">Button</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">span</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-button</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div></div></div></main><footer class="VPDocFooter" data-v-32b7ddf4 data-v-cfaa3a6c><div class="edit-info" data-v-cfaa3a6c><!----><!----></div><div class="prev-next" data-v-cfaa3a6c><div class="pager" data-v-cfaa3a6c><!----></div><div class="pager" data-v-cfaa3a6c><a class="pager-link next" href="/VFluent3/guide/components/check-box/" data-v-cfaa3a6c><span class="desc" data-v-cfaa3a6c>Next page</span><span class="title" data-v-cfaa3a6c>CheckBox</span></a></div></div></footer><!--[--><!--]--></div></div></div></div></div><footer class="VPFooter has-sidebar" data-v-058b7495 data-v-a6c8dde4><div class="container" data-v-a6c8dde4><p class="message" data-v-a6c8dde4>MIT Licensed</p><p class="copyright" data-v-a6c8dde4>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
-    <script>__VP_HASH_MAP__ = JSON.parse("{\"guide_components_button_emits.md\":\"d682bf18\",\"guide_components_button_index.md\":\"23a8eb54\",\"guide_components_button_properties.md\":\"cd4004b6\",\"guide_components_check-box_emits.md\":\"31609794\",\"guide_components_check-box_index.md\":\"32046814\",\"guide_components_check-box_properties.md\":\"8f33ac0c\",\"guide_components_color-picker_emits.md\":\"00983cd0\",\"guide_components_color-picker_index.md\":\"b2d62612\",\"guide_components_color-picker_properties.md\":\"5466ba72\",\"guide_components_combo-box_emits.md\":\"d5ffda50\",\"guide_components_combo-box_index.md\":\"1c4364f5\",\"guide_components_combo-box_properties.md\":\"2e1d6060\",\"guide_components_img_emits.md\":\"6237adb4\",\"guide_components_img_index.md\":\"fa51a3a1\",\"guide_components_img_properties.md\":\"8d321b5e\",\"guide_components_info-box_emits.md\":\"c2e71eec\",\"guide_components_info-box_index.md\":\"06175fed\",\"guide_components_info-box_properties.md\":\"314dbb00\",\"guide_components_message-bar_emits.md\":\"e89a5a22\",\"guide_components_message-bar_index.md\":\"3f0b01d6\",\"guide_components_message-bar_properties.md\":\"ee3838d9\",\"guide_components_progress-bar_emits.md\":\"5b611e3b\",\"guide_components_progress-bar_index.md\":\"689c3241\",\"guide_components_progress-bar_properties.md\":\"39af7fb2\",\"guide_components_progress-ring_emits.md\":\"67e4644e\",\"guide_components_progress-ring_index.md\":\"9a33542b\",\"guide_components_progress-ring_properties.md\":\"c897c4bb\",\"guide_components_radio_emits.md\":\"28506857\",\"guide_components_radio_index.md\":\"e5a479ce\",\"guide_components_radio_properties.md\":\"f8e55d2f\",\"guide_components_text-box_emits.md\":\"0bf89ef8\",\"guide_components_text-box_index.md\":\"7ccfc637\",\"guide_components_text-box_properties.md\":\"aab3a89e\",\"guide_components_toggle-switch_emits.md\":\"5146435f\",\"guide_components_toggle-switch_index.md\":\"8be48081\",\"guide_components_toggle-switch_properties.md\":\"54984c3a\",\"guide_index.md\":\"e3dca1d7\",\"index.md\":\"1e9773d5\"}")</script>
-    <script type="module" async src="/VFluent3/assets/app.d60fa8c3.js"></script>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-19c990f1><div class="wrapper" data-v-19c990f1><div class="container" data-v-19c990f1><div class="title" data-v-19c990f1><div class="VPNavBarTitle has-sidebar" data-v-19c990f1 data-v-ab179fa1><a class="title" href="/VFluent3/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>VFluent3</span><!--[--><!--]--></a></div></div><div class="content" data-v-19c990f1><div class="content-body" data-v-19c990f1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-19c990f1><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-19c990f1 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Guide</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-19c990f1 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-19c990f1 data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-19c990f1 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-19c990f1><div class="divider-line" data-v-19c990f1></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-d2ecc192><button data-v-d2ecc192>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-575e6a36><div class="curtain" data-v-575e6a36></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-575e6a36><span class="visually-hidden" id="sidebar-aria-label" data-v-575e6a36> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible has-active" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Basic input</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/button/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/check-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CheckBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/combobox/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Combobox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/details-list/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DetailsList</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drop-down/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DropDown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio-group/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RadioGroup</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/rating-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RatingControl</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/slider/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/toggle-switch/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ToggleSwitch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tag/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Tag</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Collections</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/flip-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>FlipView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/list-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ListView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tree-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TreeView</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Date & Time</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarDatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/time-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TimePicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Dialogs & flyouts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/callout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Callout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Layout</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/collapse/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Collapse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/expander/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Expander</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drawer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Panel</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Media</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/image/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Img</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ImgBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/persona/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Persona</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Menu & toolbars</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/command-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CommandBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/menu-flyout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MenuFlyout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/swipe-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SwipeControl</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Navigation</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/breadcrumb/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationPanel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pivot/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pivot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pagination/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pagination</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Scrolling</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/infinite-scroll-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfiniteScrollView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/scroll-story/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ScrollStory</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Status & info</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/badge/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-ring/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressRing</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Styles</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/animated-icon/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>AnimatedIcon</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/icon-element/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>IconElement</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/reveal-container/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RevealContainer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/shimmer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Shimmer</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Text</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/search-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SearchBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-field/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextField</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/verify-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>VerifyBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Windowing</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/web-window/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>WebWindow</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Global</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Advance</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-935f8a84><div class="content" data-v-935f8a84><div class="outline-marker" data-v-935f8a84></div><div class="outline-title" role="heading" aria-level="2" data-v-935f8a84>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-935f8a84><span class="visually-hidden" id="doc-outline-aria-label" data-v-935f8a84> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-935f8a84 data-v-b933a997><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _VFluent3_guide_components_button_" data-v-39a288b8><div><h3 id="button-demo" tabindex="-1">Button-DEMO <a class="header-anchor" href="#button-demo" aria-label="Permalink to &quot;Button-DEMO&quot;">​</a></h3><hr><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> borderRadius</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;3&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="button-with-icon" tabindex="-1">Button With Icon <a class="header-anchor" href="#button-with-icon" aria-label="Permalink to &quot;Button With Icon&quot;">​</a></h3><hr><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> icon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;CalculatorAddition&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;dark&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Add&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="button-customize" tabindex="-1">Button Customize <a class="header-anchor" href="#button-customize" aria-label="Permalink to &quot;Button Customize&quot;">​</a></h3><hr><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> icon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;CalculatorAddition&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">isBoxShadow</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Add&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> icon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;CalculatorAddition&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;dark&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;linear-gradient(to right, #000046, #1cb5e0)&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> borderRadius</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;3&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">isBoxShadow</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Add&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>Customize Reveal Border</p><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> icon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;CalculatorAddition&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;dark&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;#000046&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> revealBorderColor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;#1cb5e0&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> revealBackgroundColor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rgba(28, 181, 226, 0.3)&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> borderRadius</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;3&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> borderWidth</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;3&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">isBoxShadow</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Add&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="button-disabled" tabindex="-1">Button Disabled <a class="header-anchor" href="#button-disabled" aria-label="Permalink to &quot;Button Disabled&quot;">​</a></h3><hr><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> disabled</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> icon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;CalculatorAddition&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Add&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">icon</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">Icon with Fabric-Icon</td></tr><tr><td style="text-align:center;">foreground</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">Button 前景色</td></tr><tr><td style="text-align:center;">background</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">Button 背景色</td></tr><tr><td style="text-align:center;">borderRadius</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">3</td><td style="text-align:center;">Button 圆角大小</td></tr><tr><td style="text-align:center;">borderColor</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">Button 边框颜色</td></tr><tr><td style="text-align:center;">fontSize</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">Button 字体大小</td></tr><tr><td style="text-align:center;">fontWeight</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">normal</td><td style="text-align:center;">Button 字体粗细度</td></tr><tr><td style="text-align:center;">revealBorderColor</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">Button Reveal 边框颜色</td></tr><tr><td style="text-align:center;">revealBackgroundColor</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">Button Reveal 背景颜色</td></tr><tr><td style="text-align:center;">isBoxShadow</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">开启<code>Button</code>阴影</td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">Disabled button</td></tr><tr><td style="text-align:center;">borderWidth</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">1</td><td style="text-align:center;">Button 边框大小</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">system</td><td style="text-align:center;">主题样式, 包含<code>light</code>, <code>dark</code>, <code>system</code>, <code>custom</code>几种样式</td></tr></tbody></table><h3 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to &quot;Events&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">事件名(Name)</th><th style="text-align:center;">参数类型(args)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">click</td><td style="text-align:center;">event</td><td style="text-align:center;">Button onclick</td></tr></tbody></table><h3 id="slot" tabindex="-1">Slot <a class="header-anchor" href="#slot" aria-label="Permalink to &quot;Slot&quot;">​</a></h3><hr><ol><li>Default</li></ol><div class="language-javascript vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">fv-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">fv-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-09de1c0f><!--[--><!--]--><!----><nav class="prev-next" data-v-09de1c0f><div class="pager" data-v-09de1c0f><!----></div><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link next" href="/VFluent3/guide/components/check-box/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Next page</span><span class="title" data-v-09de1c0f>CheckBox</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>MIT Licensed</p><p class="copyright" data-v-e315a0ad>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_calendar-date-picker_properties.md\":\"DXRjmMG8\",\"guide_components_image_properties.md\":\"DGanRzCb\",\"guide_components_img-box_index.md\":\"DYtggkf_\",\"guide_components_img_emits.md\":\"BlE7jvZQ\",\"guide_components_img_index.md\":\"Bm9FiuU4\",\"guide_components_icon-element_properties.md\":\"8Oakruwc\",\"guide_components_img_properties.md\":\"B42YSocI\",\"guide_components_drawer_index.md\":\"D_vpnCpE\",\"guide_components_verify-box_emits.md\":\"DT17Iazx\",\"guide_components_calendar-date-picker_index.md\":\"BdHjrurh\",\"guide_components_rating-control_index.md\":\"Q9l5Lfrr\",\"guide_components_rating-control_properties.md\":\"DKprnl0i\",\"guide_components_calendar-view_index.md\":\"zdoRYVx1\",\"guide_components_animated-icon_index.md\":\"yZDMzCFe\",\"guide_components_calendar-date-picker_emits.md\":\"D5OkfR8j\",\"guide_components_badge_index.md\":\"Bb4crrJn\",\"guide_components_image_index.md\":\"B7X6cWAZ\",\"guide_components_slider_index.md\":\"C7zZ2d-W\",\"guide_components_radio-group_index.md\":\"CVfh3h5H\",\"guide_components_swipe-control_index.md\":\"DwrDVPc1\",\"guide_components_color-picker_emits.md\":\"BHDXVtBQ\",\"guide_components_radio_index.md\":\"90as5QGp\",\"guide_components_pagination_properties.md\":\"JUAPvcTL\",\"guide_components_persona_properties.md\":\"DUTPhPMp\",\"guide_components_combo-box_emits.md\":\"Dh5R-qEv\",\"guide_components_pivot_emits.md\":\"BTJPgNpy\",\"guide_components_pagination_index.md\":\"CnW2zAht\",\"guide_components_flip-view_properties.md\":\"BqZ4hhgU\",\"guide_components_icon-element_emits.md\":\"D5TXFdTZ\",\"guide_components_flip-view_index.md\":\"DefnDOv6\",\"guide_components_navigation-panel_index.md\":\"6mO__sSK\",\"guide_components_rating-control_emits.md\":\"blvomSeC\",\"guide_components_icon-element_index.md\":\"DQ8K7JNn\",\"guide_components_navigation-view_index.md\":\"4AQRiz1k\",\"guide_components_toggle-switch_emits.md\":\"CLGzrNut\",\"guide_components_toggle-switch_index.md\":\"61en_q9-\",\"guide_components_scroll-story_index.md\":\"Vpgb1HSV\",\"guide_components_reveal-container_index.md\":\"Cut2r4tV\",\"guide_components_search-box_emits.md\":\"-d9sWNNt\",\"guide_components_search-box_properties.md\":\"DEKFfPFw\",\"guide_components_shimmer_emits.md\":\"CTMInlI3\",\"guide_components_tag_index.md\":\"BhhxkcHn\",\"guide_components_search-box_index.md\":\"DgkrY0oY\",\"guide_components_shimmer_index.md\":\"iZlHuTxw\",\"guide_components_shimmer_properties.md\":\"CdkU1o6H\",\"guide_components_tree-view_index.md\":\"CUrwan4q\",\"guide_components_text-field_index.md\":\"CXSimJtj\",\"guide_components_text-box_index.md\":\"C5moAPfB\",\"guide_components_progress-ring_properties.md\":\"Dc08Uiff\",\"guide_components_toggle-switch_properties.md\":\"tFppK_IS\",\"guide_components_radio-group_emits.md\":\"cEDzKVnN\",\"guide_components_collapse_index.md\":\"N9Iu5-2v\",\"guide_components_image_emits.md\":\"lmlz2xJd\",\"guide_components_callout_index.md\":\"D9RU33w6\",\"guide_components_pivot_index.md\":\"B_vwQL-5\",\"guide_components_command-bar_index.md\":\"Cp4_rrGB\",\"guide_components_pagination_emits.md\":\"Dng86A22\",\"guide_components_button_index.md\":\"7sqT2MQP\",\"guide_components_info-box_properties.md\":\"BI7Nvk-E\",\"guide_components_drop-down_emits.md\":\"BE95TdKW\",\"guide_components_expander_index.md\":\"BKgcUJzQ\",\"guide_components_message-bar_index.md\":\"AEtAWlF8\",\"guide_components_menu-flyout_index.md\":\"Csa7irPj\",\"guide_components_panel_index.md\":\"CsTu0bXo\",\"guide_components_panel_properties.md\":\"BaxoCYKq\",\"guide_components_progress-bar_emits.md\":\"BcwXUpsF\",\"guide_components_progress-bar_properties.md\":\"TxiS9ZMA\",\"guide_components_progress-ring_emits.md\":\"D2Y6hIZ9\",\"guide_components_color-picker_index.md\":\"DCc4ixcU\",\"guide_components_progress-ring_index.md\":\"CPb-ZEPE\",\"guide_components_color-picker_properties.md\":\"wcXK29Vl\",\"guide_components_time-picker_index.md\":\"CQJdRRaG\",\"guide_components_drop-down_properties.md\":\"Bwlkpr1q\",\"guide_components_infinite-scroll-view_index.md\":\"yAuD807x\",\"guide_components_check-box_index.md\":\"FYgdu4oq\",\"guide_components_progress-bar_index.md\":\"D8vHQw5V\",\"guide_components_combo-box_index.md\":\"DTyu3eNd\",\"guide_components_info-box_emits.md\":\"DlEwpkkq\",\"guide_components_drop-down_index.md\":\"BZzJZQWq\",\"guide_components_list-view_index.md\":\"BoYvMzb0\",\"guide_components_verify-box_properties.md\":\"CW6W8fFf\",\"guide_components_verify-box_index.md\":\"DwSB40wR\",\"guide_index.md\":\"Bndlt3sL\",\"guide_components_web-window_index.md\":\"Bxc8vEeI\",\"index.md\":\"MTRqI42u\",\"guide_components_combo-box_properties.md\":\"AWfHzV6x\",\"guide_components_combobox_emits.md\":\"CGB6WLt8\",\"guide_components_combobox_properties.md\":\"Bja0hMou\",\"guide_components_details-list_index.md\":\"CcgOCIyt\",\"guide_components_info-box_index.md\":\"vXh-_DsL\",\"guide_components_combobox_index.md\":\"CsPkY6YB\",\"guide_components_date-picker_index.md\":\"12vmUIup\",\"guide_components_flip-view_emits.md\":\"DCheHjDj\",\"guide_components_panel_emits.md\":\"DG0REDq8\",\"guide_components_breadcrumb_index.md\":\"DyDm7PeP\",\"guide_components_radio-group_properties.md\":\"BnPxoKsQ\",\"guide_components_persona_emits.md\":\"CnsDPKRU\",\"guide_components_pivot_properties.md\":\"BmoLpPi1\",\"guide_components_persona_index.md\":\"DT00jby4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vfluent3\",\"description\":\"A Vue3 component library for Fluent UI\",\"base\":\"/VFluent3/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"VFluent3\",\"footer\":{\"message\":\"MIT Licensed\",\"copyright\":\"Copyright © Creator SN - 2022\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/\"}],\"sidebar\":[{\"text\":\"Basic input\",\"collapsed\":true,\"items\":[{\"text\":\"Button\",\"link\":\"/guide/components/button/\"},{\"text\":\"CheckBox\",\"link\":\"/guide/components/check-box/\"},{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"},{\"text\":\"Combobox\",\"link\":\"/guide/components/combobox/\"},{\"text\":\"DetailsList\",\"link\":\"/guide/components/details-list/\"},{\"text\":\"DropDown\",\"link\":\"/guide/components/drop-down/\"},{\"text\":\"Radio\",\"link\":\"/guide/components/radio/\"},{\"text\":\"RadioGroup\",\"link\":\"/guide/components/radio-group/\"},{\"text\":\"RatingControl\",\"link\":\"/guide/components/rating-control/\"},{\"text\":\"Slider\",\"link\":\"/guide/components/slider/\"},{\"text\":\"ToggleSwitch\",\"link\":\"/guide/components/toggle-switch/\"},{\"text\":\"Tag\",\"link\":\"/guide/components/tag/\"}]},{\"text\":\"Collections\",\"collapsed\":true,\"items\":[{\"text\":\"FlipView\",\"link\":\"/guide/components/flip-view/\"},{\"text\":\"ListView\",\"link\":\"/guide/components/list-view/\"},{\"text\":\"TreeView\",\"link\":\"/guide/components/tree-view/\"}]},{\"text\":\"Date & Time\",\"collapsed\":true,\"items\":[{\"text\":\"CalendarDatePicker\",\"link\":\"/guide/components/calendar-date-picker/\"},{\"text\":\"CalendarView\",\"link\":\"/guide/components/calendar-view/\"},{\"text\":\"DatePicker\",\"link\":\"/guide/components/date-picker/\"},{\"text\":\"TimePicker\",\"link\":\"/guide/components/time-picker/\"}]},{\"text\":\"Dialogs & flyouts\",\"collapsed\":true,\"items\":[{\"text\":\"Callout\",\"link\":\"/guide/components/callout/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Layout\",\"collapsed\":true,\"items\":[{\"text\":\"Collapse\",\"link\":\"/guide/components/collapse/\"},{\"text\":\"Expander\",\"link\":\"/guide/components/expander/\"},{\"text\":\"Drawer\",\"link\":\"/guide/components/drawer/\"},{\"text\":\"Panel\",\"link\":\"/guide/components/panel/\"}]},{\"text\":\"Media\",\"collapsed\":true,\"items\":[{\"text\":\"Image\",\"link\":\"/guide/components/image/\"},{\"text\":\"Img\",\"link\":\"/guide/components/img/\"},{\"text\":\"ImgBox\",\"link\":\"/guide/components/img-box/\"},{\"text\":\"Persona\",\"link\":\"/guide/components/persona/\"}]},{\"text\":\"Menu & toolbars\",\"collapsed\":true,\"items\":[{\"text\":\"CommandBar\",\"link\":\"/guide/components/command-bar/\"},{\"text\":\"MenuFlyout\",\"link\":\"/guide/components/menu-flyout/\"},{\"text\":\"SwipeControl\",\"link\":\"/guide/components/swipe-control/\"}]},{\"text\":\"Navigation\",\"collapsed\":true,\"items\":[{\"text\":\"Breadcrumb\",\"link\":\"/guide/components/breadcrumb/\"},{\"text\":\"NavigationPanel\",\"link\":\"/guide/components/navigation-panel/\"},{\"text\":\"NavigationView\",\"link\":\"/guide/components/navigation-view/\"},{\"text\":\"Pivot\",\"link\":\"/guide/components/pivot/\"},{\"text\":\"Pagination\",\"link\":\"/guide/components/pagination/\"}]},{\"text\":\"Scrolling\",\"collapsed\":true,\"items\":[{\"text\":\"InfiniteScrollView\",\"link\":\"/guide/components/infinite-scroll-view/\"},{\"text\":\"ScrollStory\",\"link\":\"/guide/components/scroll-story/\"}]},{\"text\":\"Status & info\",\"collapsed\":true,\"items\":[{\"text\":\"Badge\",\"link\":\"/guide/components/badge/\"},{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"ProgressBar\",\"link\":\"/guide/components/progress-bar/\"},{\"text\":\"ProgressRing\",\"link\":\"/guide/components/progress-ring/\"}]},{\"text\":\"Styles\",\"collapsed\":true,\"items\":[{\"text\":\"AnimatedIcon\",\"link\":\"/guide/components/animated-icon/\"},{\"text\":\"IconElement\",\"link\":\"/guide/components/icon-element/\"},{\"text\":\"RevealContainer\",\"link\":\"/guide/components/reveal-container/\"},{\"text\":\"Shimmer\",\"link\":\"/guide/components/shimmer/\"}]},{\"text\":\"Text\",\"collapsed\":true,\"items\":[{\"text\":\"SearchBox\",\"link\":\"/guide/components/search-box/\"},{\"text\":\"TextBox\",\"link\":\"/guide/components/text-box/\"},{\"text\":\"TextField\",\"link\":\"/guide/components/text-field/\"},{\"text\":\"VerifyBox\",\"link\":\"/guide/components/verify-box/\"}]},{\"text\":\"Windowing\",\"collapsed\":true,\"items\":[{\"text\":\"WebWindow\",\"link\":\"/guide/components/web-window/\"}]},{\"text\":\"Global\",\"collapsed\":true,\"items\":[{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Advance\",\"collapsed\":true,\"items\":[{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
     
   </body>
 </html>
\ No newline at end of file
diff --git a/guide/components/button/properties.html b/guide/components/button/properties.html
deleted file mode 100644
index 8e57460..0000000
--- a/guide/components/button/properties.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<!DOCTYPE html>
-<html lang="en-US">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>Properties | vfluent3</title>
-    <meta name="description" content="A Vue3 component library for Fluent UI">
-    <link rel="stylesheet" href="/VFluent3/assets/style.0a1d87af.css">
-    <link rel="modulepreload" href="/VFluent3/assets/app.d60fa8c3.js">
-    <link rel="modulepreload" href="/VFluent3/assets/guide_components_button_properties.md.cd4004b6.lean.js">
-    
-    <script>(()=>{const e=localStorage.getItem("vitepress-theme-appearance"),a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
-  </head>
-  <body>
-    <div id="app"><div class="Layout" data-v-058b7495><!--[--><!--]--><!--[--><span tabindex="-1" data-v-bea91388></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-bea91388> Skip to content </a><!--]--><!----><header class="VPNav" data-v-058b7495 data-v-2a0a2738><div class="VPNavBar has-sidebar" data-v-2a0a2738 data-v-45c9f423><div class="container" data-v-45c9f423><div class="VPNavBarTitle has-sidebar" data-v-45c9f423 data-v-011600ce><a class="title" href="/VFluent3/" data-v-011600ce><!----><!--[-->VFluent3<!--]--></a></div><div class="content" data-v-45c9f423><!----><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-45c9f423 data-v-4da4371d><span id="main-nav-aria-label" class="visually-hidden" data-v-4da4371d>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" data-v-4da4371d data-v-66f8d518 data-v-4d08dd3a><!--[-->Home<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" data-v-4da4371d data-v-66f8d518 data-v-4d08dd3a><!--[-->Guide<!--]--><!----></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-45c9f423 data-v-bf1c94ca><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" data-v-bf1c94ca data-v-d0ee0df2 data-v-55b931a0><span class="check" data-v-55b931a0><span class="icon" data-v-55b931a0><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-d0ee0df2><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-d0ee0df2><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-45c9f423 data-v-7cece6ac data-v-37af1650><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-37af1650><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-37af1650><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-37af1650><div class="VPMenu" data-v-37af1650 data-v-17dc081b><!----><!--[--><!--[--><!----><div class="group" data-v-7cece6ac><div class="item appearance" data-v-7cece6ac><p class="label" data-v-7cece6ac>Appearance</p><div class="appearance-action" data-v-7cece6ac><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" data-v-7cece6ac data-v-d0ee0df2 data-v-55b931a0><span class="check" data-v-55b931a0><span class="icon" data-v-55b931a0><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-d0ee0df2><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-d0ee0df2><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-45c9f423 data-v-5484e669><span class="container" data-v-5484e669><span class="top" data-v-5484e669></span><span class="middle" data-v-5484e669></span><span class="bottom" data-v-5484e669></span></span></button></div></div></div><!----></header><div class="VPLocalNav" data-v-058b7495 data-v-f623cd72><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-f623cd72><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-f623cd72><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-f623cd72>Menu</span></button><a class="top-link" href="#" data-v-f623cd72> Return to top </a></div><aside class="VPSidebar" data-v-058b7495 data-v-3b8ec0c7><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-3b8ec0c7><span class="visually-hidden" id="sidebar-aria-label" data-v-3b8ec0c7> Sidebar Navigation </span><!--[--><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Basic</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/button/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Button</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/check-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>CheckBox</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/radio/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Radio</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/progress-bar/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ProgressBar</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/progress-ring/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ProgressRing</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/toggle-switch/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ToggleSwitch</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/img/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Img</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/text-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>TextBox</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/combo-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ComboBox</span><!--]--><!----></a><!--]--></div></section></div><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Global</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/message-bar/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>MessageBar</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/info-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>InfoBox</span><!--]--><!----></a><!--]--></div></section></div><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Advance</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/color-picker/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ColorPicker</span><!--]--><!----></a><!--]--></div></section></div><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-058b7495 data-v-564173e9><div class="VPDoc has-sidebar" data-v-564173e9 data-v-32b7ddf4><div class="container" data-v-32b7ddf4><div class="aside" data-v-32b7ddf4><div class="aside-curtain" data-v-32b7ddf4></div><div class="aside-container" data-v-32b7ddf4><div class="aside-content" data-v-32b7ddf4><div class="VPDocAside" data-v-32b7ddf4 data-v-35c1bae1><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline has-outline" data-v-35c1bae1 data-v-123cce62><div class="content" data-v-123cce62><div class="outline-marker" data-v-123cce62></div><div class="outline-title" data-v-123cce62>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-123cce62><span class="visually-hidden" id="doc-outline-aria-label" data-v-123cce62> Table of Contents for current page </span><ul class="root" data-v-123cce62><!--[--><li style="" data-v-123cce62><a class="outline-link" href="#properties" data-v-123cce62>Properties</a><!----></li><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-35c1bae1></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-32b7ddf4><div class="content-container" data-v-32b7ddf4><!--[--><!--]--><main class="main" data-v-32b7ddf4><div style="position:relative;" class="vp-doc _VFluent3_guide_components_button_properties" data-v-32b7ddf4><div><h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">background</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">background color</td></tr><tr><td style="text-align:center;">border-radius</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">3</td><td style="text-align:center;">border radius</td></tr><tr><td style="text-align:center;">border-width</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">2</td><td style="text-align:center;">border Width</td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">disabled</td></tr><tr><td style="text-align:center;">font-size</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">font size</td></tr><tr><td style="text-align:center;">font-weight</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&quot;normal&quot;</td><td style="text-align:center;">font weight</td></tr><tr><td style="text-align:center;">foreground</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">foreground color</td></tr><tr><td style="text-align:center;">icon</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">icon with Fabric-Icon</td></tr><tr><td style="text-align:center;">is-box-shadow</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">default shadow style</td></tr><tr><td style="text-align:center;">lang</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">i18n</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">[&#39;light&#39;, &#39;dark&#39;, &#39;global&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&quot;global&quot;</td><td style="text-align:center;">theme</td></tr></tbody></table></div></div></main><footer class="VPDocFooter" data-v-32b7ddf4 data-v-cfaa3a6c><div class="edit-info" data-v-cfaa3a6c><!----><!----></div><div class="prev-next" data-v-cfaa3a6c><div class="pager" data-v-cfaa3a6c><!----></div><div class="pager" data-v-cfaa3a6c><a class="pager-link next" href="/VFluent3/guide/components/button/" data-v-cfaa3a6c><span class="desc" data-v-cfaa3a6c>Next page</span><span class="title" data-v-cfaa3a6c>Button</span></a></div></div></footer><!--[--><!--]--></div></div></div></div></div><footer class="VPFooter has-sidebar" data-v-058b7495 data-v-a6c8dde4><div class="container" data-v-a6c8dde4><p class="message" data-v-a6c8dde4>MIT Licensed</p><p class="copyright" data-v-a6c8dde4>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
-    <script>__VP_HASH_MAP__ = JSON.parse("{\"guide_components_button_emits.md\":\"d682bf18\",\"guide_components_button_index.md\":\"23a8eb54\",\"guide_components_button_properties.md\":\"cd4004b6\",\"guide_components_check-box_emits.md\":\"31609794\",\"guide_components_check-box_index.md\":\"32046814\",\"guide_components_check-box_properties.md\":\"8f33ac0c\",\"guide_components_color-picker_emits.md\":\"00983cd0\",\"guide_components_color-picker_index.md\":\"b2d62612\",\"guide_components_color-picker_properties.md\":\"5466ba72\",\"guide_components_combo-box_emits.md\":\"d5ffda50\",\"guide_components_combo-box_index.md\":\"1c4364f5\",\"guide_components_combo-box_properties.md\":\"2e1d6060\",\"guide_components_img_emits.md\":\"6237adb4\",\"guide_components_img_index.md\":\"fa51a3a1\",\"guide_components_img_properties.md\":\"8d321b5e\",\"guide_components_info-box_emits.md\":\"c2e71eec\",\"guide_components_info-box_index.md\":\"06175fed\",\"guide_components_info-box_properties.md\":\"314dbb00\",\"guide_components_message-bar_emits.md\":\"e89a5a22\",\"guide_components_message-bar_index.md\":\"3f0b01d6\",\"guide_components_message-bar_properties.md\":\"ee3838d9\",\"guide_components_progress-bar_emits.md\":\"5b611e3b\",\"guide_components_progress-bar_index.md\":\"689c3241\",\"guide_components_progress-bar_properties.md\":\"39af7fb2\",\"guide_components_progress-ring_emits.md\":\"67e4644e\",\"guide_components_progress-ring_index.md\":\"9a33542b\",\"guide_components_progress-ring_properties.md\":\"c897c4bb\",\"guide_components_radio_emits.md\":\"28506857\",\"guide_components_radio_index.md\":\"e5a479ce\",\"guide_components_radio_properties.md\":\"f8e55d2f\",\"guide_components_text-box_emits.md\":\"0bf89ef8\",\"guide_components_text-box_index.md\":\"7ccfc637\",\"guide_components_text-box_properties.md\":\"aab3a89e\",\"guide_components_toggle-switch_emits.md\":\"5146435f\",\"guide_components_toggle-switch_index.md\":\"8be48081\",\"guide_components_toggle-switch_properties.md\":\"54984c3a\",\"guide_index.md\":\"e3dca1d7\",\"index.md\":\"1e9773d5\"}")</script>
-    <script type="module" async src="/VFluent3/assets/app.d60fa8c3.js"></script>
-    
-  </body>
-</html>
\ No newline at end of file
diff --git a/guide/components/calendar-date-picker/emits.html b/guide/components/calendar-date-picker/emits.html
new file mode 100644
index 0000000..490423f
--- /dev/null
+++ b/guide/components/calendar-date-picker/emits.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>vfluent3</title>
+    <meta name="description" content="A Vue3 component library for Fluent UI">
+    <meta name="generator" content="VitePress v1.0.0-rc.45">
+    <link rel="preload stylesheet" href="/VFluent3/assets/style.BabQegKX.css" as="style">
+    
+    <script type="module" src="/VFluent3/assets/app.CSutcJ2E.js"></script>
+    <link rel="preload" href="/VFluent3/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/framework.DvIFzl91.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/theme.CgqFBnN_.js">
+    <link rel="modulepreload" href="/VFluent3/assets/guide_components_calendar-date-picker_emits.md.D5OkfR8j.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-19c990f1><div class="wrapper" data-v-19c990f1><div class="container" data-v-19c990f1><div class="title" data-v-19c990f1><div class="VPNavBarTitle has-sidebar" data-v-19c990f1 data-v-ab179fa1><a class="title" href="/VFluent3/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>VFluent3</span><!--[--><!--]--></a></div></div><div class="content" data-v-19c990f1><div class="content-body" data-v-19c990f1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-19c990f1><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-19c990f1 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Guide</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-19c990f1 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-19c990f1 data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-19c990f1 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-19c990f1><div class="divider-line" data-v-19c990f1></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-d2ecc192><button data-v-d2ecc192>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-575e6a36><div class="curtain" data-v-575e6a36></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-575e6a36><span class="visually-hidden" id="sidebar-aria-label" data-v-575e6a36> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Basic input</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/button/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/check-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CheckBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/combobox/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Combobox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/details-list/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DetailsList</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drop-down/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DropDown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio-group/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RadioGroup</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/rating-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RatingControl</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/slider/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/toggle-switch/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ToggleSwitch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tag/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Tag</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Collections</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/flip-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>FlipView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/list-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ListView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tree-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TreeView</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Date & Time</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarDatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/time-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TimePicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Dialogs & flyouts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/callout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Callout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Layout</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/collapse/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Collapse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/expander/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Expander</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drawer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Panel</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Media</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/image/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Img</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ImgBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/persona/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Persona</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Menu & toolbars</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/command-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CommandBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/menu-flyout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MenuFlyout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/swipe-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SwipeControl</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Navigation</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/breadcrumb/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationPanel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pivot/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pivot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pagination/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pagination</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Scrolling</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/infinite-scroll-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfiniteScrollView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/scroll-story/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ScrollStory</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Status & info</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/badge/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-ring/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressRing</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Styles</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/animated-icon/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>AnimatedIcon</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/icon-element/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>IconElement</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/reveal-container/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RevealContainer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/shimmer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Shimmer</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Text</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/search-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SearchBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-field/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextField</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/verify-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>VerifyBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Windowing</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/web-window/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>WebWindow</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Global</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Advance</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-935f8a84><div class="content" data-v-935f8a84><div class="outline-marker" data-v-935f8a84></div><div class="outline-title" role="heading" aria-level="2" data-v-935f8a84>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-935f8a84><span class="visually-hidden" id="doc-outline-aria-label" data-v-935f8a84> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-935f8a84 data-v-b933a997><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _VFluent3_guide_components_calendar-date-picker_emits" data-v-39a288b8><div><h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-label="Permalink to &quot;Emits&quot;">​</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead></table></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-09de1c0f><!--[--><!--]--><!----><nav class="prev-next" data-v-09de1c0f><div class="pager" data-v-09de1c0f><!----></div><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link next" href="/VFluent3/guide/components/button/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Next page</span><span class="title" data-v-09de1c0f>Button</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>MIT Licensed</p><p class="copyright" data-v-e315a0ad>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_calendar-date-picker_properties.md\":\"DXRjmMG8\",\"guide_components_image_properties.md\":\"DGanRzCb\",\"guide_components_img-box_index.md\":\"DYtggkf_\",\"guide_components_img_emits.md\":\"BlE7jvZQ\",\"guide_components_img_index.md\":\"Bm9FiuU4\",\"guide_components_icon-element_properties.md\":\"8Oakruwc\",\"guide_components_img_properties.md\":\"B42YSocI\",\"guide_components_drawer_index.md\":\"D_vpnCpE\",\"guide_components_verify-box_emits.md\":\"DT17Iazx\",\"guide_components_calendar-date-picker_index.md\":\"BdHjrurh\",\"guide_components_rating-control_index.md\":\"Q9l5Lfrr\",\"guide_components_rating-control_properties.md\":\"DKprnl0i\",\"guide_components_calendar-view_index.md\":\"zdoRYVx1\",\"guide_components_animated-icon_index.md\":\"yZDMzCFe\",\"guide_components_calendar-date-picker_emits.md\":\"D5OkfR8j\",\"guide_components_badge_index.md\":\"Bb4crrJn\",\"guide_components_image_index.md\":\"B7X6cWAZ\",\"guide_components_slider_index.md\":\"C7zZ2d-W\",\"guide_components_radio-group_index.md\":\"CVfh3h5H\",\"guide_components_swipe-control_index.md\":\"DwrDVPc1\",\"guide_components_color-picker_emits.md\":\"BHDXVtBQ\",\"guide_components_radio_index.md\":\"90as5QGp\",\"guide_components_pagination_properties.md\":\"JUAPvcTL\",\"guide_components_persona_properties.md\":\"DUTPhPMp\",\"guide_components_combo-box_emits.md\":\"Dh5R-qEv\",\"guide_components_pivot_emits.md\":\"BTJPgNpy\",\"guide_components_pagination_index.md\":\"CnW2zAht\",\"guide_components_flip-view_properties.md\":\"BqZ4hhgU\",\"guide_components_icon-element_emits.md\":\"D5TXFdTZ\",\"guide_components_flip-view_index.md\":\"DefnDOv6\",\"guide_components_navigation-panel_index.md\":\"6mO__sSK\",\"guide_components_rating-control_emits.md\":\"blvomSeC\",\"guide_components_icon-element_index.md\":\"DQ8K7JNn\",\"guide_components_navigation-view_index.md\":\"4AQRiz1k\",\"guide_components_toggle-switch_emits.md\":\"CLGzrNut\",\"guide_components_toggle-switch_index.md\":\"61en_q9-\",\"guide_components_scroll-story_index.md\":\"Vpgb1HSV\",\"guide_components_reveal-container_index.md\":\"Cut2r4tV\",\"guide_components_search-box_emits.md\":\"-d9sWNNt\",\"guide_components_search-box_properties.md\":\"DEKFfPFw\",\"guide_components_shimmer_emits.md\":\"CTMInlI3\",\"guide_components_tag_index.md\":\"BhhxkcHn\",\"guide_components_search-box_index.md\":\"DgkrY0oY\",\"guide_components_shimmer_index.md\":\"iZlHuTxw\",\"guide_components_shimmer_properties.md\":\"CdkU1o6H\",\"guide_components_tree-view_index.md\":\"CUrwan4q\",\"guide_components_text-field_index.md\":\"CXSimJtj\",\"guide_components_text-box_index.md\":\"C5moAPfB\",\"guide_components_progress-ring_properties.md\":\"Dc08Uiff\",\"guide_components_toggle-switch_properties.md\":\"tFppK_IS\",\"guide_components_radio-group_emits.md\":\"cEDzKVnN\",\"guide_components_collapse_index.md\":\"N9Iu5-2v\",\"guide_components_image_emits.md\":\"lmlz2xJd\",\"guide_components_callout_index.md\":\"D9RU33w6\",\"guide_components_pivot_index.md\":\"B_vwQL-5\",\"guide_components_command-bar_index.md\":\"Cp4_rrGB\",\"guide_components_pagination_emits.md\":\"Dng86A22\",\"guide_components_button_index.md\":\"7sqT2MQP\",\"guide_components_info-box_properties.md\":\"BI7Nvk-E\",\"guide_components_drop-down_emits.md\":\"BE95TdKW\",\"guide_components_expander_index.md\":\"BKgcUJzQ\",\"guide_components_message-bar_index.md\":\"AEtAWlF8\",\"guide_components_menu-flyout_index.md\":\"Csa7irPj\",\"guide_components_panel_index.md\":\"CsTu0bXo\",\"guide_components_panel_properties.md\":\"BaxoCYKq\",\"guide_components_progress-bar_emits.md\":\"BcwXUpsF\",\"guide_components_progress-bar_properties.md\":\"TxiS9ZMA\",\"guide_components_progress-ring_emits.md\":\"D2Y6hIZ9\",\"guide_components_color-picker_index.md\":\"DCc4ixcU\",\"guide_components_progress-ring_index.md\":\"CPb-ZEPE\",\"guide_components_color-picker_properties.md\":\"wcXK29Vl\",\"guide_components_time-picker_index.md\":\"CQJdRRaG\",\"guide_components_drop-down_properties.md\":\"Bwlkpr1q\",\"guide_components_infinite-scroll-view_index.md\":\"yAuD807x\",\"guide_components_check-box_index.md\":\"FYgdu4oq\",\"guide_components_progress-bar_index.md\":\"D8vHQw5V\",\"guide_components_combo-box_index.md\":\"DTyu3eNd\",\"guide_components_info-box_emits.md\":\"DlEwpkkq\",\"guide_components_drop-down_index.md\":\"BZzJZQWq\",\"guide_components_list-view_index.md\":\"BoYvMzb0\",\"guide_components_verify-box_properties.md\":\"CW6W8fFf\",\"guide_components_verify-box_index.md\":\"DwSB40wR\",\"guide_index.md\":\"Bndlt3sL\",\"guide_components_web-window_index.md\":\"Bxc8vEeI\",\"index.md\":\"MTRqI42u\",\"guide_components_combo-box_properties.md\":\"AWfHzV6x\",\"guide_components_combobox_emits.md\":\"CGB6WLt8\",\"guide_components_combobox_properties.md\":\"Bja0hMou\",\"guide_components_details-list_index.md\":\"CcgOCIyt\",\"guide_components_info-box_index.md\":\"vXh-_DsL\",\"guide_components_combobox_index.md\":\"CsPkY6YB\",\"guide_components_date-picker_index.md\":\"12vmUIup\",\"guide_components_flip-view_emits.md\":\"DCheHjDj\",\"guide_components_panel_emits.md\":\"DG0REDq8\",\"guide_components_breadcrumb_index.md\":\"DyDm7PeP\",\"guide_components_radio-group_properties.md\":\"BnPxoKsQ\",\"guide_components_persona_emits.md\":\"CnsDPKRU\",\"guide_components_pivot_properties.md\":\"BmoLpPi1\",\"guide_components_persona_index.md\":\"DT00jby4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vfluent3\",\"description\":\"A Vue3 component library for Fluent UI\",\"base\":\"/VFluent3/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"VFluent3\",\"footer\":{\"message\":\"MIT Licensed\",\"copyright\":\"Copyright © Creator SN - 2022\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/\"}],\"sidebar\":[{\"text\":\"Basic input\",\"collapsed\":true,\"items\":[{\"text\":\"Button\",\"link\":\"/guide/components/button/\"},{\"text\":\"CheckBox\",\"link\":\"/guide/components/check-box/\"},{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"},{\"text\":\"Combobox\",\"link\":\"/guide/components/combobox/\"},{\"text\":\"DetailsList\",\"link\":\"/guide/components/details-list/\"},{\"text\":\"DropDown\",\"link\":\"/guide/components/drop-down/\"},{\"text\":\"Radio\",\"link\":\"/guide/components/radio/\"},{\"text\":\"RadioGroup\",\"link\":\"/guide/components/radio-group/\"},{\"text\":\"RatingControl\",\"link\":\"/guide/components/rating-control/\"},{\"text\":\"Slider\",\"link\":\"/guide/components/slider/\"},{\"text\":\"ToggleSwitch\",\"link\":\"/guide/components/toggle-switch/\"},{\"text\":\"Tag\",\"link\":\"/guide/components/tag/\"}]},{\"text\":\"Collections\",\"collapsed\":true,\"items\":[{\"text\":\"FlipView\",\"link\":\"/guide/components/flip-view/\"},{\"text\":\"ListView\",\"link\":\"/guide/components/list-view/\"},{\"text\":\"TreeView\",\"link\":\"/guide/components/tree-view/\"}]},{\"text\":\"Date & Time\",\"collapsed\":true,\"items\":[{\"text\":\"CalendarDatePicker\",\"link\":\"/guide/components/calendar-date-picker/\"},{\"text\":\"CalendarView\",\"link\":\"/guide/components/calendar-view/\"},{\"text\":\"DatePicker\",\"link\":\"/guide/components/date-picker/\"},{\"text\":\"TimePicker\",\"link\":\"/guide/components/time-picker/\"}]},{\"text\":\"Dialogs & flyouts\",\"collapsed\":true,\"items\":[{\"text\":\"Callout\",\"link\":\"/guide/components/callout/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Layout\",\"collapsed\":true,\"items\":[{\"text\":\"Collapse\",\"link\":\"/guide/components/collapse/\"},{\"text\":\"Expander\",\"link\":\"/guide/components/expander/\"},{\"text\":\"Drawer\",\"link\":\"/guide/components/drawer/\"},{\"text\":\"Panel\",\"link\":\"/guide/components/panel/\"}]},{\"text\":\"Media\",\"collapsed\":true,\"items\":[{\"text\":\"Image\",\"link\":\"/guide/components/image/\"},{\"text\":\"Img\",\"link\":\"/guide/components/img/\"},{\"text\":\"ImgBox\",\"link\":\"/guide/components/img-box/\"},{\"text\":\"Persona\",\"link\":\"/guide/components/persona/\"}]},{\"text\":\"Menu & toolbars\",\"collapsed\":true,\"items\":[{\"text\":\"CommandBar\",\"link\":\"/guide/components/command-bar/\"},{\"text\":\"MenuFlyout\",\"link\":\"/guide/components/menu-flyout/\"},{\"text\":\"SwipeControl\",\"link\":\"/guide/components/swipe-control/\"}]},{\"text\":\"Navigation\",\"collapsed\":true,\"items\":[{\"text\":\"Breadcrumb\",\"link\":\"/guide/components/breadcrumb/\"},{\"text\":\"NavigationPanel\",\"link\":\"/guide/components/navigation-panel/\"},{\"text\":\"NavigationView\",\"link\":\"/guide/components/navigation-view/\"},{\"text\":\"Pivot\",\"link\":\"/guide/components/pivot/\"},{\"text\":\"Pagination\",\"link\":\"/guide/components/pagination/\"}]},{\"text\":\"Scrolling\",\"collapsed\":true,\"items\":[{\"text\":\"InfiniteScrollView\",\"link\":\"/guide/components/infinite-scroll-view/\"},{\"text\":\"ScrollStory\",\"link\":\"/guide/components/scroll-story/\"}]},{\"text\":\"Status & info\",\"collapsed\":true,\"items\":[{\"text\":\"Badge\",\"link\":\"/guide/components/badge/\"},{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"ProgressBar\",\"link\":\"/guide/components/progress-bar/\"},{\"text\":\"ProgressRing\",\"link\":\"/guide/components/progress-ring/\"}]},{\"text\":\"Styles\",\"collapsed\":true,\"items\":[{\"text\":\"AnimatedIcon\",\"link\":\"/guide/components/animated-icon/\"},{\"text\":\"IconElement\",\"link\":\"/guide/components/icon-element/\"},{\"text\":\"RevealContainer\",\"link\":\"/guide/components/reveal-container/\"},{\"text\":\"Shimmer\",\"link\":\"/guide/components/shimmer/\"}]},{\"text\":\"Text\",\"collapsed\":true,\"items\":[{\"text\":\"SearchBox\",\"link\":\"/guide/components/search-box/\"},{\"text\":\"TextBox\",\"link\":\"/guide/components/text-box/\"},{\"text\":\"TextField\",\"link\":\"/guide/components/text-field/\"},{\"text\":\"VerifyBox\",\"link\":\"/guide/components/verify-box/\"}]},{\"text\":\"Windowing\",\"collapsed\":true,\"items\":[{\"text\":\"WebWindow\",\"link\":\"/guide/components/web-window/\"}]},{\"text\":\"Global\",\"collapsed\":true,\"items\":[{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Advance\",\"collapsed\":true,\"items\":[{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git a/guide/components/calendar-date-picker/index.html b/guide/components/calendar-date-picker/index.html
new file mode 100644
index 0000000..7869cc1
--- /dev/null
+++ b/guide/components/calendar-date-picker/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>CalendarDatePicker | vfluent3</title>
+    <meta name="description" content="A Vue3 component library for Fluent UI">
+    <meta name="generator" content="VitePress v1.0.0-rc.45">
+    <link rel="preload stylesheet" href="/VFluent3/assets/style.BabQegKX.css" as="style">
+    
+    <script type="module" src="/VFluent3/assets/app.CSutcJ2E.js"></script>
+    <link rel="preload" href="/VFluent3/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/framework.DvIFzl91.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/theme.CgqFBnN_.js">
+    <link rel="modulepreload" href="/VFluent3/assets/guide_components_calendar-date-picker_index.md.BdHjrurh.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-19c990f1><div class="wrapper" data-v-19c990f1><div class="container" data-v-19c990f1><div class="title" data-v-19c990f1><div class="VPNavBarTitle has-sidebar" data-v-19c990f1 data-v-ab179fa1><a class="title" href="/VFluent3/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>VFluent3</span><!--[--><!--]--></a></div></div><div class="content" data-v-19c990f1><div class="content-body" data-v-19c990f1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-19c990f1><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-19c990f1 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Guide</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-19c990f1 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-19c990f1 data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-19c990f1 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-19c990f1><div class="divider-line" data-v-19c990f1></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-d2ecc192><button data-v-d2ecc192>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-575e6a36><div class="curtain" data-v-575e6a36></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-575e6a36><span class="visually-hidden" id="sidebar-aria-label" data-v-575e6a36> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Basic input</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/button/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/check-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CheckBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/combobox/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Combobox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/details-list/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DetailsList</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drop-down/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DropDown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio-group/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RadioGroup</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/rating-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RatingControl</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/slider/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/toggle-switch/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ToggleSwitch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tag/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Tag</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Collections</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/flip-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>FlipView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/list-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ListView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tree-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TreeView</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible has-active" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Date & Time</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarDatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/time-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TimePicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Dialogs & flyouts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/callout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Callout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Layout</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/collapse/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Collapse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/expander/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Expander</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drawer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Panel</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Media</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/image/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Img</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ImgBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/persona/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Persona</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Menu & toolbars</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/command-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CommandBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/menu-flyout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MenuFlyout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/swipe-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SwipeControl</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Navigation</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/breadcrumb/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationPanel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pivot/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pivot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pagination/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pagination</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Scrolling</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/infinite-scroll-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfiniteScrollView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/scroll-story/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ScrollStory</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Status & info</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/badge/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-ring/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressRing</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Styles</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/animated-icon/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>AnimatedIcon</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/icon-element/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>IconElement</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/reveal-container/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RevealContainer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/shimmer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Shimmer</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Text</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/search-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SearchBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-field/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextField</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/verify-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>VerifyBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Windowing</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/web-window/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>WebWindow</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Global</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Advance</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-935f8a84><div class="content" data-v-935f8a84><div class="outline-marker" data-v-935f8a84></div><div class="outline-title" role="heading" aria-level="2" data-v-935f8a84>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-935f8a84><span class="visually-hidden" id="doc-outline-aria-label" data-v-935f8a84> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-935f8a84 data-v-b933a997><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _VFluent3_guide_components_calendar-date-picker_" data-v-39a288b8><div><h3 id="calendardatepicker-demo" tabindex="-1">CalendarDatePicker-DEMO <a class="header-anchor" href="#calendardatepicker-demo" aria-label="Permalink to &quot;CalendarDatePicker-DEMO&quot;">​</a></h3><hr><div style="z-index:5;"><!----></div><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-CalendarDatePicker</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">value</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">z-index</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">5</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-CalendarDatePicker</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="calendardatepicker-multiple" tabindex="-1">CalendarDatePicker-Multiple <a class="header-anchor" href="#calendardatepicker-multiple" aria-label="Permalink to &quot;CalendarDatePicker-Multiple&quot;">​</a></h3><hr><div style="z-index:3;"><!----></div><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-CalendarDatePicker</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">value</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> multiple</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;range&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">z-index</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">3</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-CalendarDatePicker</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="calendardatepicker-disabled" tabindex="-1">CalendarDatePicker-Disabled <a class="header-anchor" href="#calendardatepicker-disabled" aria-label="Permalink to &quot;CalendarDatePicker-Disabled&quot;">​</a></h3><hr><div style="z-index:2;"><!----></div><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-CalendarDatePicker</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">value</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> multiple</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;range&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> disabled</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">z-index</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">2</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-CalendarDatePicker</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="calendardatepicker-dark-theme" tabindex="-1">CalendarDatePicker-Dark Theme <a class="header-anchor" href="#calendardatepicker-dark-theme" aria-label="Permalink to &quot;CalendarDatePicker-Dark Theme&quot;">​</a></h3><hr><div style="z-index:1;"><!----></div><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-CalendarDatePicker</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">value</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;dark&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">z-index</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">2</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-CalendarDatePicker</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">value/v-model</td><td style="text-align:center;">[date]</td><td style="text-align:center;">No</td><td style="text-align:center;">CurrentDate</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">start</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">1900</td><td style="text-align:center;">最小年份, 尽量不要设置过小防止性能消耗</td></tr><tr><td style="text-align:center;">end</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">3000</td><td style="text-align:center;">最大年份, 尽量不要设置过大防止性能消耗</td></tr><tr><td style="text-align:center;">borderWidth</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">2</td><td style="text-align:center;">CalendarDatePicker border width</td></tr><tr><td style="text-align:center;">borderRadius</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">3</td><td style="text-align:center;">CalendarDatePicker border radius</td></tr><tr><td style="text-align:center;">placeholder</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">Pick a day</td><td style="text-align:center;">CalendarDatePicker placeholder</td></tr><tr><td style="text-align:center;">inputForeground</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">输入框文字前景色</td></tr><tr><td style="text-align:center;">inputBackground</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">输入框背景色</td></tr><tr><td style="text-align:center;">dropDownIcon</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">CalendarDay</td><td style="text-align:center;">Icon with Fabric-Icon</td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">multiple</td><td style="text-align:center;">[&#39;single&#39;, &#39;multiple&#39;, &#39;range&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">single</td><td style="text-align:center;">多选模式, 有单选、多选和范围日期选择</td></tr><tr><td style="text-align:center;">lan</td><td style="text-align:center;">[&#39;en&#39;, &#39;zh&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">en</td><td style="text-align:center;">CalendarDatePicker language.</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">system</td><td style="text-align:center;">主题样式, 包含<code>light</code>, <code>dark</code>, <code>system</code>, <code>custom</code>几种样式</td></tr></tbody></table><h3 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to &quot;Events&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">事件名(Name)</th><th style="text-align:center;">参数类型(args)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">choosen-dates</td><td style="text-align:center;">array</td><td style="text-align:center;">返回[{year, month, no}]类型的数组</td></tr></tbody></table></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-09de1c0f><!--[--><!--]--><!----><nav class="prev-next" data-v-09de1c0f><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link prev" href="/VFluent3/guide/components/tree-view/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Previous page</span><span class="title" data-v-09de1c0f>TreeView</span><!--]--></a></div><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link next" href="/VFluent3/guide/components/calendar-view/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Next page</span><span class="title" data-v-09de1c0f>CalendarView</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>MIT Licensed</p><p class="copyright" data-v-e315a0ad>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_calendar-date-picker_properties.md\":\"DXRjmMG8\",\"guide_components_image_properties.md\":\"DGanRzCb\",\"guide_components_img-box_index.md\":\"DYtggkf_\",\"guide_components_img_emits.md\":\"BlE7jvZQ\",\"guide_components_img_index.md\":\"Bm9FiuU4\",\"guide_components_icon-element_properties.md\":\"8Oakruwc\",\"guide_components_img_properties.md\":\"B42YSocI\",\"guide_components_drawer_index.md\":\"D_vpnCpE\",\"guide_components_verify-box_emits.md\":\"DT17Iazx\",\"guide_components_calendar-date-picker_index.md\":\"BdHjrurh\",\"guide_components_rating-control_index.md\":\"Q9l5Lfrr\",\"guide_components_rating-control_properties.md\":\"DKprnl0i\",\"guide_components_calendar-view_index.md\":\"zdoRYVx1\",\"guide_components_animated-icon_index.md\":\"yZDMzCFe\",\"guide_components_calendar-date-picker_emits.md\":\"D5OkfR8j\",\"guide_components_badge_index.md\":\"Bb4crrJn\",\"guide_components_image_index.md\":\"B7X6cWAZ\",\"guide_components_slider_index.md\":\"C7zZ2d-W\",\"guide_components_radio-group_index.md\":\"CVfh3h5H\",\"guide_components_swipe-control_index.md\":\"DwrDVPc1\",\"guide_components_color-picker_emits.md\":\"BHDXVtBQ\",\"guide_components_radio_index.md\":\"90as5QGp\",\"guide_components_pagination_properties.md\":\"JUAPvcTL\",\"guide_components_persona_properties.md\":\"DUTPhPMp\",\"guide_components_combo-box_emits.md\":\"Dh5R-qEv\",\"guide_components_pivot_emits.md\":\"BTJPgNpy\",\"guide_components_pagination_index.md\":\"CnW2zAht\",\"guide_components_flip-view_properties.md\":\"BqZ4hhgU\",\"guide_components_icon-element_emits.md\":\"D5TXFdTZ\",\"guide_components_flip-view_index.md\":\"DefnDOv6\",\"guide_components_navigation-panel_index.md\":\"6mO__sSK\",\"guide_components_rating-control_emits.md\":\"blvomSeC\",\"guide_components_icon-element_index.md\":\"DQ8K7JNn\",\"guide_components_navigation-view_index.md\":\"4AQRiz1k\",\"guide_components_toggle-switch_emits.md\":\"CLGzrNut\",\"guide_components_toggle-switch_index.md\":\"61en_q9-\",\"guide_components_scroll-story_index.md\":\"Vpgb1HSV\",\"guide_components_reveal-container_index.md\":\"Cut2r4tV\",\"guide_components_search-box_emits.md\":\"-d9sWNNt\",\"guide_components_search-box_properties.md\":\"DEKFfPFw\",\"guide_components_shimmer_emits.md\":\"CTMInlI3\",\"guide_components_tag_index.md\":\"BhhxkcHn\",\"guide_components_search-box_index.md\":\"DgkrY0oY\",\"guide_components_shimmer_index.md\":\"iZlHuTxw\",\"guide_components_shimmer_properties.md\":\"CdkU1o6H\",\"guide_components_tree-view_index.md\":\"CUrwan4q\",\"guide_components_text-field_index.md\":\"CXSimJtj\",\"guide_components_text-box_index.md\":\"C5moAPfB\",\"guide_components_progress-ring_properties.md\":\"Dc08Uiff\",\"guide_components_toggle-switch_properties.md\":\"tFppK_IS\",\"guide_components_radio-group_emits.md\":\"cEDzKVnN\",\"guide_components_collapse_index.md\":\"N9Iu5-2v\",\"guide_components_image_emits.md\":\"lmlz2xJd\",\"guide_components_callout_index.md\":\"D9RU33w6\",\"guide_components_pivot_index.md\":\"B_vwQL-5\",\"guide_components_command-bar_index.md\":\"Cp4_rrGB\",\"guide_components_pagination_emits.md\":\"Dng86A22\",\"guide_components_button_index.md\":\"7sqT2MQP\",\"guide_components_info-box_properties.md\":\"BI7Nvk-E\",\"guide_components_drop-down_emits.md\":\"BE95TdKW\",\"guide_components_expander_index.md\":\"BKgcUJzQ\",\"guide_components_message-bar_index.md\":\"AEtAWlF8\",\"guide_components_menu-flyout_index.md\":\"Csa7irPj\",\"guide_components_panel_index.md\":\"CsTu0bXo\",\"guide_components_panel_properties.md\":\"BaxoCYKq\",\"guide_components_progress-bar_emits.md\":\"BcwXUpsF\",\"guide_components_progress-bar_properties.md\":\"TxiS9ZMA\",\"guide_components_progress-ring_emits.md\":\"D2Y6hIZ9\",\"guide_components_color-picker_index.md\":\"DCc4ixcU\",\"guide_components_progress-ring_index.md\":\"CPb-ZEPE\",\"guide_components_color-picker_properties.md\":\"wcXK29Vl\",\"guide_components_time-picker_index.md\":\"CQJdRRaG\",\"guide_components_drop-down_properties.md\":\"Bwlkpr1q\",\"guide_components_infinite-scroll-view_index.md\":\"yAuD807x\",\"guide_components_check-box_index.md\":\"FYgdu4oq\",\"guide_components_progress-bar_index.md\":\"D8vHQw5V\",\"guide_components_combo-box_index.md\":\"DTyu3eNd\",\"guide_components_info-box_emits.md\":\"DlEwpkkq\",\"guide_components_drop-down_index.md\":\"BZzJZQWq\",\"guide_components_list-view_index.md\":\"BoYvMzb0\",\"guide_components_verify-box_properties.md\":\"CW6W8fFf\",\"guide_components_verify-box_index.md\":\"DwSB40wR\",\"guide_index.md\":\"Bndlt3sL\",\"guide_components_web-window_index.md\":\"Bxc8vEeI\",\"index.md\":\"MTRqI42u\",\"guide_components_combo-box_properties.md\":\"AWfHzV6x\",\"guide_components_combobox_emits.md\":\"CGB6WLt8\",\"guide_components_combobox_properties.md\":\"Bja0hMou\",\"guide_components_details-list_index.md\":\"CcgOCIyt\",\"guide_components_info-box_index.md\":\"vXh-_DsL\",\"guide_components_combobox_index.md\":\"CsPkY6YB\",\"guide_components_date-picker_index.md\":\"12vmUIup\",\"guide_components_flip-view_emits.md\":\"DCheHjDj\",\"guide_components_panel_emits.md\":\"DG0REDq8\",\"guide_components_breadcrumb_index.md\":\"DyDm7PeP\",\"guide_components_radio-group_properties.md\":\"BnPxoKsQ\",\"guide_components_persona_emits.md\":\"CnsDPKRU\",\"guide_components_pivot_properties.md\":\"BmoLpPi1\",\"guide_components_persona_index.md\":\"DT00jby4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vfluent3\",\"description\":\"A Vue3 component library for Fluent UI\",\"base\":\"/VFluent3/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"VFluent3\",\"footer\":{\"message\":\"MIT Licensed\",\"copyright\":\"Copyright © Creator SN - 2022\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/\"}],\"sidebar\":[{\"text\":\"Basic input\",\"collapsed\":true,\"items\":[{\"text\":\"Button\",\"link\":\"/guide/components/button/\"},{\"text\":\"CheckBox\",\"link\":\"/guide/components/check-box/\"},{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"},{\"text\":\"Combobox\",\"link\":\"/guide/components/combobox/\"},{\"text\":\"DetailsList\",\"link\":\"/guide/components/details-list/\"},{\"text\":\"DropDown\",\"link\":\"/guide/components/drop-down/\"},{\"text\":\"Radio\",\"link\":\"/guide/components/radio/\"},{\"text\":\"RadioGroup\",\"link\":\"/guide/components/radio-group/\"},{\"text\":\"RatingControl\",\"link\":\"/guide/components/rating-control/\"},{\"text\":\"Slider\",\"link\":\"/guide/components/slider/\"},{\"text\":\"ToggleSwitch\",\"link\":\"/guide/components/toggle-switch/\"},{\"text\":\"Tag\",\"link\":\"/guide/components/tag/\"}]},{\"text\":\"Collections\",\"collapsed\":true,\"items\":[{\"text\":\"FlipView\",\"link\":\"/guide/components/flip-view/\"},{\"text\":\"ListView\",\"link\":\"/guide/components/list-view/\"},{\"text\":\"TreeView\",\"link\":\"/guide/components/tree-view/\"}]},{\"text\":\"Date & Time\",\"collapsed\":true,\"items\":[{\"text\":\"CalendarDatePicker\",\"link\":\"/guide/components/calendar-date-picker/\"},{\"text\":\"CalendarView\",\"link\":\"/guide/components/calendar-view/\"},{\"text\":\"DatePicker\",\"link\":\"/guide/components/date-picker/\"},{\"text\":\"TimePicker\",\"link\":\"/guide/components/time-picker/\"}]},{\"text\":\"Dialogs & flyouts\",\"collapsed\":true,\"items\":[{\"text\":\"Callout\",\"link\":\"/guide/components/callout/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Layout\",\"collapsed\":true,\"items\":[{\"text\":\"Collapse\",\"link\":\"/guide/components/collapse/\"},{\"text\":\"Expander\",\"link\":\"/guide/components/expander/\"},{\"text\":\"Drawer\",\"link\":\"/guide/components/drawer/\"},{\"text\":\"Panel\",\"link\":\"/guide/components/panel/\"}]},{\"text\":\"Media\",\"collapsed\":true,\"items\":[{\"text\":\"Image\",\"link\":\"/guide/components/image/\"},{\"text\":\"Img\",\"link\":\"/guide/components/img/\"},{\"text\":\"ImgBox\",\"link\":\"/guide/components/img-box/\"},{\"text\":\"Persona\",\"link\":\"/guide/components/persona/\"}]},{\"text\":\"Menu & toolbars\",\"collapsed\":true,\"items\":[{\"text\":\"CommandBar\",\"link\":\"/guide/components/command-bar/\"},{\"text\":\"MenuFlyout\",\"link\":\"/guide/components/menu-flyout/\"},{\"text\":\"SwipeControl\",\"link\":\"/guide/components/swipe-control/\"}]},{\"text\":\"Navigation\",\"collapsed\":true,\"items\":[{\"text\":\"Breadcrumb\",\"link\":\"/guide/components/breadcrumb/\"},{\"text\":\"NavigationPanel\",\"link\":\"/guide/components/navigation-panel/\"},{\"text\":\"NavigationView\",\"link\":\"/guide/components/navigation-view/\"},{\"text\":\"Pivot\",\"link\":\"/guide/components/pivot/\"},{\"text\":\"Pagination\",\"link\":\"/guide/components/pagination/\"}]},{\"text\":\"Scrolling\",\"collapsed\":true,\"items\":[{\"text\":\"InfiniteScrollView\",\"link\":\"/guide/components/infinite-scroll-view/\"},{\"text\":\"ScrollStory\",\"link\":\"/guide/components/scroll-story/\"}]},{\"text\":\"Status & info\",\"collapsed\":true,\"items\":[{\"text\":\"Badge\",\"link\":\"/guide/components/badge/\"},{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"ProgressBar\",\"link\":\"/guide/components/progress-bar/\"},{\"text\":\"ProgressRing\",\"link\":\"/guide/components/progress-ring/\"}]},{\"text\":\"Styles\",\"collapsed\":true,\"items\":[{\"text\":\"AnimatedIcon\",\"link\":\"/guide/components/animated-icon/\"},{\"text\":\"IconElement\",\"link\":\"/guide/components/icon-element/\"},{\"text\":\"RevealContainer\",\"link\":\"/guide/components/reveal-container/\"},{\"text\":\"Shimmer\",\"link\":\"/guide/components/shimmer/\"}]},{\"text\":\"Text\",\"collapsed\":true,\"items\":[{\"text\":\"SearchBox\",\"link\":\"/guide/components/search-box/\"},{\"text\":\"TextBox\",\"link\":\"/guide/components/text-box/\"},{\"text\":\"TextField\",\"link\":\"/guide/components/text-field/\"},{\"text\":\"VerifyBox\",\"link\":\"/guide/components/verify-box/\"}]},{\"text\":\"Windowing\",\"collapsed\":true,\"items\":[{\"text\":\"WebWindow\",\"link\":\"/guide/components/web-window/\"}]},{\"text\":\"Global\",\"collapsed\":true,\"items\":[{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Advance\",\"collapsed\":true,\"items\":[{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git a/guide/components/calendar-date-picker/properties.html b/guide/components/calendar-date-picker/properties.html
new file mode 100644
index 0000000..dd447be
--- /dev/null
+++ b/guide/components/calendar-date-picker/properties.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>vfluent3</title>
+    <meta name="description" content="A Vue3 component library for Fluent UI">
+    <meta name="generator" content="VitePress v1.0.0-rc.45">
+    <link rel="preload stylesheet" href="/VFluent3/assets/style.BabQegKX.css" as="style">
+    
+    <script type="module" src="/VFluent3/assets/app.CSutcJ2E.js"></script>
+    <link rel="preload" href="/VFluent3/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/framework.DvIFzl91.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/theme.CgqFBnN_.js">
+    <link rel="modulepreload" href="/VFluent3/assets/guide_components_calendar-date-picker_properties.md.DXRjmMG8.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-19c990f1><div class="wrapper" data-v-19c990f1><div class="container" data-v-19c990f1><div class="title" data-v-19c990f1><div class="VPNavBarTitle has-sidebar" data-v-19c990f1 data-v-ab179fa1><a class="title" href="/VFluent3/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>VFluent3</span><!--[--><!--]--></a></div></div><div class="content" data-v-19c990f1><div class="content-body" data-v-19c990f1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-19c990f1><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-19c990f1 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Guide</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-19c990f1 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-19c990f1 data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-19c990f1 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-19c990f1><div class="divider-line" data-v-19c990f1></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-d2ecc192><button data-v-d2ecc192>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-575e6a36><div class="curtain" data-v-575e6a36></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-575e6a36><span class="visually-hidden" id="sidebar-aria-label" data-v-575e6a36> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Basic input</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/button/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/check-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CheckBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/combobox/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Combobox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/details-list/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DetailsList</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drop-down/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DropDown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio-group/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RadioGroup</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/rating-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RatingControl</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/slider/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/toggle-switch/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ToggleSwitch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tag/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Tag</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Collections</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/flip-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>FlipView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/list-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ListView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tree-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TreeView</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Date & Time</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarDatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/time-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TimePicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Dialogs & flyouts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/callout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Callout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Layout</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/collapse/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Collapse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/expander/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Expander</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drawer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Panel</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Media</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/image/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Img</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ImgBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/persona/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Persona</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Menu & toolbars</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/command-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CommandBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/menu-flyout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MenuFlyout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/swipe-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SwipeControl</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Navigation</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/breadcrumb/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationPanel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pivot/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pivot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pagination/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pagination</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Scrolling</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/infinite-scroll-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfiniteScrollView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/scroll-story/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ScrollStory</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Status & info</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/badge/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-ring/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressRing</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Styles</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/animated-icon/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>AnimatedIcon</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/icon-element/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>IconElement</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/reveal-container/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RevealContainer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/shimmer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Shimmer</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Text</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/search-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SearchBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-field/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextField</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/verify-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>VerifyBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Windowing</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/web-window/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>WebWindow</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Global</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Advance</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-935f8a84><div class="content" data-v-935f8a84><div class="outline-marker" data-v-935f8a84></div><div class="outline-title" role="heading" aria-level="2" data-v-935f8a84>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-935f8a84><span class="visually-hidden" id="doc-outline-aria-label" data-v-935f8a84> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-935f8a84 data-v-b933a997><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _VFluent3_guide_components_calendar-date-picker_properties" data-v-39a288b8><div><h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-label="Permalink to &quot;Properties&quot;">​</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead></table></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-09de1c0f><!--[--><!--]--><!----><nav class="prev-next" data-v-09de1c0f><div class="pager" data-v-09de1c0f><!----></div><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link next" href="/VFluent3/guide/components/button/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Next page</span><span class="title" data-v-09de1c0f>Button</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>MIT Licensed</p><p class="copyright" data-v-e315a0ad>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_calendar-date-picker_properties.md\":\"DXRjmMG8\",\"guide_components_image_properties.md\":\"DGanRzCb\",\"guide_components_img-box_index.md\":\"DYtggkf_\",\"guide_components_img_emits.md\":\"BlE7jvZQ\",\"guide_components_img_index.md\":\"Bm9FiuU4\",\"guide_components_icon-element_properties.md\":\"8Oakruwc\",\"guide_components_img_properties.md\":\"B42YSocI\",\"guide_components_drawer_index.md\":\"D_vpnCpE\",\"guide_components_verify-box_emits.md\":\"DT17Iazx\",\"guide_components_calendar-date-picker_index.md\":\"BdHjrurh\",\"guide_components_rating-control_index.md\":\"Q9l5Lfrr\",\"guide_components_rating-control_properties.md\":\"DKprnl0i\",\"guide_components_calendar-view_index.md\":\"zdoRYVx1\",\"guide_components_animated-icon_index.md\":\"yZDMzCFe\",\"guide_components_calendar-date-picker_emits.md\":\"D5OkfR8j\",\"guide_components_badge_index.md\":\"Bb4crrJn\",\"guide_components_image_index.md\":\"B7X6cWAZ\",\"guide_components_slider_index.md\":\"C7zZ2d-W\",\"guide_components_radio-group_index.md\":\"CVfh3h5H\",\"guide_components_swipe-control_index.md\":\"DwrDVPc1\",\"guide_components_color-picker_emits.md\":\"BHDXVtBQ\",\"guide_components_radio_index.md\":\"90as5QGp\",\"guide_components_pagination_properties.md\":\"JUAPvcTL\",\"guide_components_persona_properties.md\":\"DUTPhPMp\",\"guide_components_combo-box_emits.md\":\"Dh5R-qEv\",\"guide_components_pivot_emits.md\":\"BTJPgNpy\",\"guide_components_pagination_index.md\":\"CnW2zAht\",\"guide_components_flip-view_properties.md\":\"BqZ4hhgU\",\"guide_components_icon-element_emits.md\":\"D5TXFdTZ\",\"guide_components_flip-view_index.md\":\"DefnDOv6\",\"guide_components_navigation-panel_index.md\":\"6mO__sSK\",\"guide_components_rating-control_emits.md\":\"blvomSeC\",\"guide_components_icon-element_index.md\":\"DQ8K7JNn\",\"guide_components_navigation-view_index.md\":\"4AQRiz1k\",\"guide_components_toggle-switch_emits.md\":\"CLGzrNut\",\"guide_components_toggle-switch_index.md\":\"61en_q9-\",\"guide_components_scroll-story_index.md\":\"Vpgb1HSV\",\"guide_components_reveal-container_index.md\":\"Cut2r4tV\",\"guide_components_search-box_emits.md\":\"-d9sWNNt\",\"guide_components_search-box_properties.md\":\"DEKFfPFw\",\"guide_components_shimmer_emits.md\":\"CTMInlI3\",\"guide_components_tag_index.md\":\"BhhxkcHn\",\"guide_components_search-box_index.md\":\"DgkrY0oY\",\"guide_components_shimmer_index.md\":\"iZlHuTxw\",\"guide_components_shimmer_properties.md\":\"CdkU1o6H\",\"guide_components_tree-view_index.md\":\"CUrwan4q\",\"guide_components_text-field_index.md\":\"CXSimJtj\",\"guide_components_text-box_index.md\":\"C5moAPfB\",\"guide_components_progress-ring_properties.md\":\"Dc08Uiff\",\"guide_components_toggle-switch_properties.md\":\"tFppK_IS\",\"guide_components_radio-group_emits.md\":\"cEDzKVnN\",\"guide_components_collapse_index.md\":\"N9Iu5-2v\",\"guide_components_image_emits.md\":\"lmlz2xJd\",\"guide_components_callout_index.md\":\"D9RU33w6\",\"guide_components_pivot_index.md\":\"B_vwQL-5\",\"guide_components_command-bar_index.md\":\"Cp4_rrGB\",\"guide_components_pagination_emits.md\":\"Dng86A22\",\"guide_components_button_index.md\":\"7sqT2MQP\",\"guide_components_info-box_properties.md\":\"BI7Nvk-E\",\"guide_components_drop-down_emits.md\":\"BE95TdKW\",\"guide_components_expander_index.md\":\"BKgcUJzQ\",\"guide_components_message-bar_index.md\":\"AEtAWlF8\",\"guide_components_menu-flyout_index.md\":\"Csa7irPj\",\"guide_components_panel_index.md\":\"CsTu0bXo\",\"guide_components_panel_properties.md\":\"BaxoCYKq\",\"guide_components_progress-bar_emits.md\":\"BcwXUpsF\",\"guide_components_progress-bar_properties.md\":\"TxiS9ZMA\",\"guide_components_progress-ring_emits.md\":\"D2Y6hIZ9\",\"guide_components_color-picker_index.md\":\"DCc4ixcU\",\"guide_components_progress-ring_index.md\":\"CPb-ZEPE\",\"guide_components_color-picker_properties.md\":\"wcXK29Vl\",\"guide_components_time-picker_index.md\":\"CQJdRRaG\",\"guide_components_drop-down_properties.md\":\"Bwlkpr1q\",\"guide_components_infinite-scroll-view_index.md\":\"yAuD807x\",\"guide_components_check-box_index.md\":\"FYgdu4oq\",\"guide_components_progress-bar_index.md\":\"D8vHQw5V\",\"guide_components_combo-box_index.md\":\"DTyu3eNd\",\"guide_components_info-box_emits.md\":\"DlEwpkkq\",\"guide_components_drop-down_index.md\":\"BZzJZQWq\",\"guide_components_list-view_index.md\":\"BoYvMzb0\",\"guide_components_verify-box_properties.md\":\"CW6W8fFf\",\"guide_components_verify-box_index.md\":\"DwSB40wR\",\"guide_index.md\":\"Bndlt3sL\",\"guide_components_web-window_index.md\":\"Bxc8vEeI\",\"index.md\":\"MTRqI42u\",\"guide_components_combo-box_properties.md\":\"AWfHzV6x\",\"guide_components_combobox_emits.md\":\"CGB6WLt8\",\"guide_components_combobox_properties.md\":\"Bja0hMou\",\"guide_components_details-list_index.md\":\"CcgOCIyt\",\"guide_components_info-box_index.md\":\"vXh-_DsL\",\"guide_components_combobox_index.md\":\"CsPkY6YB\",\"guide_components_date-picker_index.md\":\"12vmUIup\",\"guide_components_flip-view_emits.md\":\"DCheHjDj\",\"guide_components_panel_emits.md\":\"DG0REDq8\",\"guide_components_breadcrumb_index.md\":\"DyDm7PeP\",\"guide_components_radio-group_properties.md\":\"BnPxoKsQ\",\"guide_components_persona_emits.md\":\"CnsDPKRU\",\"guide_components_pivot_properties.md\":\"BmoLpPi1\",\"guide_components_persona_index.md\":\"DT00jby4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vfluent3\",\"description\":\"A Vue3 component library for Fluent UI\",\"base\":\"/VFluent3/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"VFluent3\",\"footer\":{\"message\":\"MIT Licensed\",\"copyright\":\"Copyright © Creator SN - 2022\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/\"}],\"sidebar\":[{\"text\":\"Basic input\",\"collapsed\":true,\"items\":[{\"text\":\"Button\",\"link\":\"/guide/components/button/\"},{\"text\":\"CheckBox\",\"link\":\"/guide/components/check-box/\"},{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"},{\"text\":\"Combobox\",\"link\":\"/guide/components/combobox/\"},{\"text\":\"DetailsList\",\"link\":\"/guide/components/details-list/\"},{\"text\":\"DropDown\",\"link\":\"/guide/components/drop-down/\"},{\"text\":\"Radio\",\"link\":\"/guide/components/radio/\"},{\"text\":\"RadioGroup\",\"link\":\"/guide/components/radio-group/\"},{\"text\":\"RatingControl\",\"link\":\"/guide/components/rating-control/\"},{\"text\":\"Slider\",\"link\":\"/guide/components/slider/\"},{\"text\":\"ToggleSwitch\",\"link\":\"/guide/components/toggle-switch/\"},{\"text\":\"Tag\",\"link\":\"/guide/components/tag/\"}]},{\"text\":\"Collections\",\"collapsed\":true,\"items\":[{\"text\":\"FlipView\",\"link\":\"/guide/components/flip-view/\"},{\"text\":\"ListView\",\"link\":\"/guide/components/list-view/\"},{\"text\":\"TreeView\",\"link\":\"/guide/components/tree-view/\"}]},{\"text\":\"Date & Time\",\"collapsed\":true,\"items\":[{\"text\":\"CalendarDatePicker\",\"link\":\"/guide/components/calendar-date-picker/\"},{\"text\":\"CalendarView\",\"link\":\"/guide/components/calendar-view/\"},{\"text\":\"DatePicker\",\"link\":\"/guide/components/date-picker/\"},{\"text\":\"TimePicker\",\"link\":\"/guide/components/time-picker/\"}]},{\"text\":\"Dialogs & flyouts\",\"collapsed\":true,\"items\":[{\"text\":\"Callout\",\"link\":\"/guide/components/callout/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Layout\",\"collapsed\":true,\"items\":[{\"text\":\"Collapse\",\"link\":\"/guide/components/collapse/\"},{\"text\":\"Expander\",\"link\":\"/guide/components/expander/\"},{\"text\":\"Drawer\",\"link\":\"/guide/components/drawer/\"},{\"text\":\"Panel\",\"link\":\"/guide/components/panel/\"}]},{\"text\":\"Media\",\"collapsed\":true,\"items\":[{\"text\":\"Image\",\"link\":\"/guide/components/image/\"},{\"text\":\"Img\",\"link\":\"/guide/components/img/\"},{\"text\":\"ImgBox\",\"link\":\"/guide/components/img-box/\"},{\"text\":\"Persona\",\"link\":\"/guide/components/persona/\"}]},{\"text\":\"Menu & toolbars\",\"collapsed\":true,\"items\":[{\"text\":\"CommandBar\",\"link\":\"/guide/components/command-bar/\"},{\"text\":\"MenuFlyout\",\"link\":\"/guide/components/menu-flyout/\"},{\"text\":\"SwipeControl\",\"link\":\"/guide/components/swipe-control/\"}]},{\"text\":\"Navigation\",\"collapsed\":true,\"items\":[{\"text\":\"Breadcrumb\",\"link\":\"/guide/components/breadcrumb/\"},{\"text\":\"NavigationPanel\",\"link\":\"/guide/components/navigation-panel/\"},{\"text\":\"NavigationView\",\"link\":\"/guide/components/navigation-view/\"},{\"text\":\"Pivot\",\"link\":\"/guide/components/pivot/\"},{\"text\":\"Pagination\",\"link\":\"/guide/components/pagination/\"}]},{\"text\":\"Scrolling\",\"collapsed\":true,\"items\":[{\"text\":\"InfiniteScrollView\",\"link\":\"/guide/components/infinite-scroll-view/\"},{\"text\":\"ScrollStory\",\"link\":\"/guide/components/scroll-story/\"}]},{\"text\":\"Status & info\",\"collapsed\":true,\"items\":[{\"text\":\"Badge\",\"link\":\"/guide/components/badge/\"},{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"ProgressBar\",\"link\":\"/guide/components/progress-bar/\"},{\"text\":\"ProgressRing\",\"link\":\"/guide/components/progress-ring/\"}]},{\"text\":\"Styles\",\"collapsed\":true,\"items\":[{\"text\":\"AnimatedIcon\",\"link\":\"/guide/components/animated-icon/\"},{\"text\":\"IconElement\",\"link\":\"/guide/components/icon-element/\"},{\"text\":\"RevealContainer\",\"link\":\"/guide/components/reveal-container/\"},{\"text\":\"Shimmer\",\"link\":\"/guide/components/shimmer/\"}]},{\"text\":\"Text\",\"collapsed\":true,\"items\":[{\"text\":\"SearchBox\",\"link\":\"/guide/components/search-box/\"},{\"text\":\"TextBox\",\"link\":\"/guide/components/text-box/\"},{\"text\":\"TextField\",\"link\":\"/guide/components/text-field/\"},{\"text\":\"VerifyBox\",\"link\":\"/guide/components/verify-box/\"}]},{\"text\":\"Windowing\",\"collapsed\":true,\"items\":[{\"text\":\"WebWindow\",\"link\":\"/guide/components/web-window/\"}]},{\"text\":\"Global\",\"collapsed\":true,\"items\":[{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Advance\",\"collapsed\":true,\"items\":[{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git a/guide/components/calendar-view/index.html b/guide/components/calendar-view/index.html
new file mode 100644
index 0000000..81eca0b
--- /dev/null
+++ b/guide/components/calendar-view/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>CalendarView | vfluent3</title>
+    <meta name="description" content="A Vue3 component library for Fluent UI">
+    <meta name="generator" content="VitePress v1.0.0-rc.45">
+    <link rel="preload stylesheet" href="/VFluent3/assets/style.BabQegKX.css" as="style">
+    
+    <script type="module" src="/VFluent3/assets/app.CSutcJ2E.js"></script>
+    <link rel="preload" href="/VFluent3/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/framework.DvIFzl91.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/theme.CgqFBnN_.js">
+    <link rel="modulepreload" href="/VFluent3/assets/guide_components_calendar-view_index.md.zdoRYVx1.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-19c990f1><div class="wrapper" data-v-19c990f1><div class="container" data-v-19c990f1><div class="title" data-v-19c990f1><div class="VPNavBarTitle has-sidebar" data-v-19c990f1 data-v-ab179fa1><a class="title" href="/VFluent3/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>VFluent3</span><!--[--><!--]--></a></div></div><div class="content" data-v-19c990f1><div class="content-body" data-v-19c990f1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-19c990f1><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-19c990f1 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Guide</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-19c990f1 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-19c990f1 data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-19c990f1 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-19c990f1><div class="divider-line" data-v-19c990f1></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-d2ecc192><button data-v-d2ecc192>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-575e6a36><div class="curtain" data-v-575e6a36></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-575e6a36><span class="visually-hidden" id="sidebar-aria-label" data-v-575e6a36> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Basic input</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/button/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/check-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CheckBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/combobox/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Combobox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/details-list/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DetailsList</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drop-down/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DropDown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio-group/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RadioGroup</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/rating-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RatingControl</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/slider/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/toggle-switch/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ToggleSwitch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tag/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Tag</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Collections</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/flip-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>FlipView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/list-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ListView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tree-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TreeView</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible has-active" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Date & Time</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarDatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/time-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TimePicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Dialogs & flyouts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/callout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Callout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Layout</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/collapse/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Collapse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/expander/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Expander</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drawer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Panel</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Media</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/image/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Img</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ImgBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/persona/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Persona</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Menu & toolbars</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/command-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CommandBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/menu-flyout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MenuFlyout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/swipe-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SwipeControl</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Navigation</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/breadcrumb/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationPanel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pivot/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pivot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pagination/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pagination</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Scrolling</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/infinite-scroll-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfiniteScrollView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/scroll-story/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ScrollStory</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Status & info</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/badge/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-ring/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressRing</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Styles</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/animated-icon/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>AnimatedIcon</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/icon-element/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>IconElement</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/reveal-container/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RevealContainer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/shimmer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Shimmer</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Text</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/search-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SearchBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-field/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextField</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/verify-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>VerifyBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Windowing</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/web-window/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>WebWindow</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Global</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Advance</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-935f8a84><div class="content" data-v-935f8a84><div class="outline-marker" data-v-935f8a84></div><div class="outline-title" role="heading" aria-level="2" data-v-935f8a84>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-935f8a84><span class="visually-hidden" id="doc-outline-aria-label" data-v-935f8a84> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-935f8a84 data-v-b933a997><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _VFluent3_guide_components_calendar-view_" data-v-39a288b8><div><h3 id="calendarview-demo" tabindex="-1">CalendarView-DEMO <a class="header-anchor" href="#calendarview-demo" aria-label="Permalink to &quot;CalendarView-DEMO&quot;">​</a></h3><hr><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-CalendarView</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-CalendarView</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="calendarview-multiple-choose" tabindex="-1">CalendarView Multiple Choose <a class="header-anchor" href="#calendarview-multiple-choose" aria-label="Permalink to &quot;CalendarView Multiple Choose&quot;">​</a></h3><hr><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-CalendarView</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> multiple</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;multiple&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> lan</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;zh&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-CalendarView</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="calendarview-init-day" tabindex="-1">CalendarView Init Day <a class="header-anchor" href="#calendarview-init-day" aria-label="Permalink to &quot;CalendarView Init Day&quot;">​</a></h3><hr><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-CalendarView</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">value</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> multiple</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;multiple&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> lan</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;zh&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-CalendarView</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="calendarview-range-choose" tabindex="-1">CalendarView Range Choose <a class="header-anchor" href="#calendarview-range-choose" aria-label="Permalink to &quot;CalendarView Range Choose&quot;">​</a></h3><hr><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-CalendarView</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> multiple</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;range&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-CalendarView</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="calendarview-dark-theme" tabindex="-1">CalendarView Dark Theme <a class="header-anchor" href="#calendarview-dark-theme" aria-label="Permalink to &quot;CalendarView Dark Theme&quot;">​</a></h3><hr><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-CalendarView</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;dark&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-CalendarView</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">value</td><td style="text-align:center;">[date]</td><td style="text-align:center;">No</td><td style="text-align:center;">CurrentDate</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">start</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">1900</td><td style="text-align:center;">Minium Year.</td></tr><tr><td style="text-align:center;">end</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">3000</td><td style="text-align:center;">Maxium Year.</td></tr><tr><td style="text-align:center;">multiple</td><td style="text-align:center;">[&#39;single&#39;,&#39;multiple&#39;,&#39;range&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">single</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">lan</td><td style="text-align:center;">[&#39;en&#39;,&#39;zh&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">en</td><td style="text-align:center;">CalendarView language.</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">system</td><td style="text-align:center;">主题样式, 包含<code>light</code>, <code>dark</code>, <code>system</code>, <code>custom</code>几种样式</td></tr></tbody></table><h3 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to &quot;Events&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">事件名(Name)</th><th style="text-align:center;">参数类型(args)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">choose-year</td><td style="text-align:center;">string</td><td style="text-align:center;">选择年份后返回年份</td></tr><tr><td style="text-align:center;">choose-month</td><td style="text-align:center;">string</td><td style="text-align:center;">选择月份后返回月份</td></tr><tr><td style="text-align:center;">choose-date</td><td style="text-align:center;">date</td><td style="text-align:center;">选择日期后返回日期</td></tr><tr><td style="text-align:center;">choosen-dates</td><td style="text-align:center;">array</td><td style="text-align:center;">选择多个日期后返回日期数组, 类型为[{year,month,no}]</td></tr></tbody></table></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-09de1c0f><!--[--><!--]--><!----><nav class="prev-next" data-v-09de1c0f><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link prev" href="/VFluent3/guide/components/calendar-date-picker/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Previous page</span><span class="title" data-v-09de1c0f>CalendarDatePicker</span><!--]--></a></div><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link next" href="/VFluent3/guide/components/date-picker/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Next page</span><span class="title" data-v-09de1c0f>DatePicker</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>MIT Licensed</p><p class="copyright" data-v-e315a0ad>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_calendar-date-picker_properties.md\":\"DXRjmMG8\",\"guide_components_image_properties.md\":\"DGanRzCb\",\"guide_components_img-box_index.md\":\"DYtggkf_\",\"guide_components_img_emits.md\":\"BlE7jvZQ\",\"guide_components_img_index.md\":\"Bm9FiuU4\",\"guide_components_icon-element_properties.md\":\"8Oakruwc\",\"guide_components_img_properties.md\":\"B42YSocI\",\"guide_components_drawer_index.md\":\"D_vpnCpE\",\"guide_components_verify-box_emits.md\":\"DT17Iazx\",\"guide_components_calendar-date-picker_index.md\":\"BdHjrurh\",\"guide_components_rating-control_index.md\":\"Q9l5Lfrr\",\"guide_components_rating-control_properties.md\":\"DKprnl0i\",\"guide_components_calendar-view_index.md\":\"zdoRYVx1\",\"guide_components_animated-icon_index.md\":\"yZDMzCFe\",\"guide_components_calendar-date-picker_emits.md\":\"D5OkfR8j\",\"guide_components_badge_index.md\":\"Bb4crrJn\",\"guide_components_image_index.md\":\"B7X6cWAZ\",\"guide_components_slider_index.md\":\"C7zZ2d-W\",\"guide_components_radio-group_index.md\":\"CVfh3h5H\",\"guide_components_swipe-control_index.md\":\"DwrDVPc1\",\"guide_components_color-picker_emits.md\":\"BHDXVtBQ\",\"guide_components_radio_index.md\":\"90as5QGp\",\"guide_components_pagination_properties.md\":\"JUAPvcTL\",\"guide_components_persona_properties.md\":\"DUTPhPMp\",\"guide_components_combo-box_emits.md\":\"Dh5R-qEv\",\"guide_components_pivot_emits.md\":\"BTJPgNpy\",\"guide_components_pagination_index.md\":\"CnW2zAht\",\"guide_components_flip-view_properties.md\":\"BqZ4hhgU\",\"guide_components_icon-element_emits.md\":\"D5TXFdTZ\",\"guide_components_flip-view_index.md\":\"DefnDOv6\",\"guide_components_navigation-panel_index.md\":\"6mO__sSK\",\"guide_components_rating-control_emits.md\":\"blvomSeC\",\"guide_components_icon-element_index.md\":\"DQ8K7JNn\",\"guide_components_navigation-view_index.md\":\"4AQRiz1k\",\"guide_components_toggle-switch_emits.md\":\"CLGzrNut\",\"guide_components_toggle-switch_index.md\":\"61en_q9-\",\"guide_components_scroll-story_index.md\":\"Vpgb1HSV\",\"guide_components_reveal-container_index.md\":\"Cut2r4tV\",\"guide_components_search-box_emits.md\":\"-d9sWNNt\",\"guide_components_search-box_properties.md\":\"DEKFfPFw\",\"guide_components_shimmer_emits.md\":\"CTMInlI3\",\"guide_components_tag_index.md\":\"BhhxkcHn\",\"guide_components_search-box_index.md\":\"DgkrY0oY\",\"guide_components_shimmer_index.md\":\"iZlHuTxw\",\"guide_components_shimmer_properties.md\":\"CdkU1o6H\",\"guide_components_tree-view_index.md\":\"CUrwan4q\",\"guide_components_text-field_index.md\":\"CXSimJtj\",\"guide_components_text-box_index.md\":\"C5moAPfB\",\"guide_components_progress-ring_properties.md\":\"Dc08Uiff\",\"guide_components_toggle-switch_properties.md\":\"tFppK_IS\",\"guide_components_radio-group_emits.md\":\"cEDzKVnN\",\"guide_components_collapse_index.md\":\"N9Iu5-2v\",\"guide_components_image_emits.md\":\"lmlz2xJd\",\"guide_components_callout_index.md\":\"D9RU33w6\",\"guide_components_pivot_index.md\":\"B_vwQL-5\",\"guide_components_command-bar_index.md\":\"Cp4_rrGB\",\"guide_components_pagination_emits.md\":\"Dng86A22\",\"guide_components_button_index.md\":\"7sqT2MQP\",\"guide_components_info-box_properties.md\":\"BI7Nvk-E\",\"guide_components_drop-down_emits.md\":\"BE95TdKW\",\"guide_components_expander_index.md\":\"BKgcUJzQ\",\"guide_components_message-bar_index.md\":\"AEtAWlF8\",\"guide_components_menu-flyout_index.md\":\"Csa7irPj\",\"guide_components_panel_index.md\":\"CsTu0bXo\",\"guide_components_panel_properties.md\":\"BaxoCYKq\",\"guide_components_progress-bar_emits.md\":\"BcwXUpsF\",\"guide_components_progress-bar_properties.md\":\"TxiS9ZMA\",\"guide_components_progress-ring_emits.md\":\"D2Y6hIZ9\",\"guide_components_color-picker_index.md\":\"DCc4ixcU\",\"guide_components_progress-ring_index.md\":\"CPb-ZEPE\",\"guide_components_color-picker_properties.md\":\"wcXK29Vl\",\"guide_components_time-picker_index.md\":\"CQJdRRaG\",\"guide_components_drop-down_properties.md\":\"Bwlkpr1q\",\"guide_components_infinite-scroll-view_index.md\":\"yAuD807x\",\"guide_components_check-box_index.md\":\"FYgdu4oq\",\"guide_components_progress-bar_index.md\":\"D8vHQw5V\",\"guide_components_combo-box_index.md\":\"DTyu3eNd\",\"guide_components_info-box_emits.md\":\"DlEwpkkq\",\"guide_components_drop-down_index.md\":\"BZzJZQWq\",\"guide_components_list-view_index.md\":\"BoYvMzb0\",\"guide_components_verify-box_properties.md\":\"CW6W8fFf\",\"guide_components_verify-box_index.md\":\"DwSB40wR\",\"guide_index.md\":\"Bndlt3sL\",\"guide_components_web-window_index.md\":\"Bxc8vEeI\",\"index.md\":\"MTRqI42u\",\"guide_components_combo-box_properties.md\":\"AWfHzV6x\",\"guide_components_combobox_emits.md\":\"CGB6WLt8\",\"guide_components_combobox_properties.md\":\"Bja0hMou\",\"guide_components_details-list_index.md\":\"CcgOCIyt\",\"guide_components_info-box_index.md\":\"vXh-_DsL\",\"guide_components_combobox_index.md\":\"CsPkY6YB\",\"guide_components_date-picker_index.md\":\"12vmUIup\",\"guide_components_flip-view_emits.md\":\"DCheHjDj\",\"guide_components_panel_emits.md\":\"DG0REDq8\",\"guide_components_breadcrumb_index.md\":\"DyDm7PeP\",\"guide_components_radio-group_properties.md\":\"BnPxoKsQ\",\"guide_components_persona_emits.md\":\"CnsDPKRU\",\"guide_components_pivot_properties.md\":\"BmoLpPi1\",\"guide_components_persona_index.md\":\"DT00jby4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vfluent3\",\"description\":\"A Vue3 component library for Fluent UI\",\"base\":\"/VFluent3/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"VFluent3\",\"footer\":{\"message\":\"MIT Licensed\",\"copyright\":\"Copyright © Creator SN - 2022\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/\"}],\"sidebar\":[{\"text\":\"Basic input\",\"collapsed\":true,\"items\":[{\"text\":\"Button\",\"link\":\"/guide/components/button/\"},{\"text\":\"CheckBox\",\"link\":\"/guide/components/check-box/\"},{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"},{\"text\":\"Combobox\",\"link\":\"/guide/components/combobox/\"},{\"text\":\"DetailsList\",\"link\":\"/guide/components/details-list/\"},{\"text\":\"DropDown\",\"link\":\"/guide/components/drop-down/\"},{\"text\":\"Radio\",\"link\":\"/guide/components/radio/\"},{\"text\":\"RadioGroup\",\"link\":\"/guide/components/radio-group/\"},{\"text\":\"RatingControl\",\"link\":\"/guide/components/rating-control/\"},{\"text\":\"Slider\",\"link\":\"/guide/components/slider/\"},{\"text\":\"ToggleSwitch\",\"link\":\"/guide/components/toggle-switch/\"},{\"text\":\"Tag\",\"link\":\"/guide/components/tag/\"}]},{\"text\":\"Collections\",\"collapsed\":true,\"items\":[{\"text\":\"FlipView\",\"link\":\"/guide/components/flip-view/\"},{\"text\":\"ListView\",\"link\":\"/guide/components/list-view/\"},{\"text\":\"TreeView\",\"link\":\"/guide/components/tree-view/\"}]},{\"text\":\"Date & Time\",\"collapsed\":true,\"items\":[{\"text\":\"CalendarDatePicker\",\"link\":\"/guide/components/calendar-date-picker/\"},{\"text\":\"CalendarView\",\"link\":\"/guide/components/calendar-view/\"},{\"text\":\"DatePicker\",\"link\":\"/guide/components/date-picker/\"},{\"text\":\"TimePicker\",\"link\":\"/guide/components/time-picker/\"}]},{\"text\":\"Dialogs & flyouts\",\"collapsed\":true,\"items\":[{\"text\":\"Callout\",\"link\":\"/guide/components/callout/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Layout\",\"collapsed\":true,\"items\":[{\"text\":\"Collapse\",\"link\":\"/guide/components/collapse/\"},{\"text\":\"Expander\",\"link\":\"/guide/components/expander/\"},{\"text\":\"Drawer\",\"link\":\"/guide/components/drawer/\"},{\"text\":\"Panel\",\"link\":\"/guide/components/panel/\"}]},{\"text\":\"Media\",\"collapsed\":true,\"items\":[{\"text\":\"Image\",\"link\":\"/guide/components/image/\"},{\"text\":\"Img\",\"link\":\"/guide/components/img/\"},{\"text\":\"ImgBox\",\"link\":\"/guide/components/img-box/\"},{\"text\":\"Persona\",\"link\":\"/guide/components/persona/\"}]},{\"text\":\"Menu & toolbars\",\"collapsed\":true,\"items\":[{\"text\":\"CommandBar\",\"link\":\"/guide/components/command-bar/\"},{\"text\":\"MenuFlyout\",\"link\":\"/guide/components/menu-flyout/\"},{\"text\":\"SwipeControl\",\"link\":\"/guide/components/swipe-control/\"}]},{\"text\":\"Navigation\",\"collapsed\":true,\"items\":[{\"text\":\"Breadcrumb\",\"link\":\"/guide/components/breadcrumb/\"},{\"text\":\"NavigationPanel\",\"link\":\"/guide/components/navigation-panel/\"},{\"text\":\"NavigationView\",\"link\":\"/guide/components/navigation-view/\"},{\"text\":\"Pivot\",\"link\":\"/guide/components/pivot/\"},{\"text\":\"Pagination\",\"link\":\"/guide/components/pagination/\"}]},{\"text\":\"Scrolling\",\"collapsed\":true,\"items\":[{\"text\":\"InfiniteScrollView\",\"link\":\"/guide/components/infinite-scroll-view/\"},{\"text\":\"ScrollStory\",\"link\":\"/guide/components/scroll-story/\"}]},{\"text\":\"Status & info\",\"collapsed\":true,\"items\":[{\"text\":\"Badge\",\"link\":\"/guide/components/badge/\"},{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"ProgressBar\",\"link\":\"/guide/components/progress-bar/\"},{\"text\":\"ProgressRing\",\"link\":\"/guide/components/progress-ring/\"}]},{\"text\":\"Styles\",\"collapsed\":true,\"items\":[{\"text\":\"AnimatedIcon\",\"link\":\"/guide/components/animated-icon/\"},{\"text\":\"IconElement\",\"link\":\"/guide/components/icon-element/\"},{\"text\":\"RevealContainer\",\"link\":\"/guide/components/reveal-container/\"},{\"text\":\"Shimmer\",\"link\":\"/guide/components/shimmer/\"}]},{\"text\":\"Text\",\"collapsed\":true,\"items\":[{\"text\":\"SearchBox\",\"link\":\"/guide/components/search-box/\"},{\"text\":\"TextBox\",\"link\":\"/guide/components/text-box/\"},{\"text\":\"TextField\",\"link\":\"/guide/components/text-field/\"},{\"text\":\"VerifyBox\",\"link\":\"/guide/components/verify-box/\"}]},{\"text\":\"Windowing\",\"collapsed\":true,\"items\":[{\"text\":\"WebWindow\",\"link\":\"/guide/components/web-window/\"}]},{\"text\":\"Global\",\"collapsed\":true,\"items\":[{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Advance\",\"collapsed\":true,\"items\":[{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git a/guide/components/callout/index.html b/guide/components/callout/index.html
new file mode 100644
index 0000000..4a78cc0
--- /dev/null
+++ b/guide/components/callout/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>Callout | vfluent3</title>
+    <meta name="description" content="A Vue3 component library for Fluent UI">
+    <meta name="generator" content="VitePress v1.0.0-rc.45">
+    <link rel="preload stylesheet" href="/VFluent3/assets/style.BabQegKX.css" as="style">
+    
+    <script type="module" src="/VFluent3/assets/app.CSutcJ2E.js"></script>
+    <link rel="preload" href="/VFluent3/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/framework.DvIFzl91.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/theme.CgqFBnN_.js">
+    <link rel="modulepreload" href="/VFluent3/assets/guide_components_callout_index.md.D9RU33w6.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-19c990f1><div class="wrapper" data-v-19c990f1><div class="container" data-v-19c990f1><div class="title" data-v-19c990f1><div class="VPNavBarTitle has-sidebar" data-v-19c990f1 data-v-ab179fa1><a class="title" href="/VFluent3/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>VFluent3</span><!--[--><!--]--></a></div></div><div class="content" data-v-19c990f1><div class="content-body" data-v-19c990f1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-19c990f1><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-19c990f1 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Guide</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-19c990f1 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-19c990f1 data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-19c990f1 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-19c990f1><div class="divider-line" data-v-19c990f1></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-d2ecc192><button data-v-d2ecc192>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-575e6a36><div class="curtain" data-v-575e6a36></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-575e6a36><span class="visually-hidden" id="sidebar-aria-label" data-v-575e6a36> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Basic input</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/button/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/check-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CheckBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/combobox/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Combobox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/details-list/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DetailsList</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drop-down/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DropDown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio-group/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RadioGroup</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/rating-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RatingControl</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/slider/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/toggle-switch/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ToggleSwitch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tag/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Tag</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Collections</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/flip-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>FlipView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/list-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ListView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tree-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TreeView</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Date & Time</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarDatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/time-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TimePicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible has-active" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Dialogs & flyouts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/callout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Callout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Layout</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/collapse/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Collapse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/expander/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Expander</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drawer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Panel</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Media</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/image/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Img</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ImgBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/persona/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Persona</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Menu & toolbars</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/command-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CommandBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/menu-flyout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MenuFlyout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/swipe-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SwipeControl</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Navigation</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/breadcrumb/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationPanel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pivot/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pivot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pagination/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pagination</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Scrolling</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/infinite-scroll-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfiniteScrollView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/scroll-story/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ScrollStory</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Status & info</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/badge/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-ring/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressRing</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Styles</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/animated-icon/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>AnimatedIcon</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/icon-element/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>IconElement</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/reveal-container/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RevealContainer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/shimmer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Shimmer</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Text</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/search-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SearchBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-field/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextField</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/verify-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>VerifyBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Windowing</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/web-window/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>WebWindow</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Global</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Advance</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-935f8a84><div class="content" data-v-935f8a84><div class="outline-marker" data-v-935f8a84></div><div class="outline-title" role="heading" aria-level="2" data-v-935f8a84>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-935f8a84><span class="visually-hidden" id="doc-outline-aria-label" data-v-935f8a84> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-935f8a84 data-v-b933a997><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _VFluent3_guide_components_callout_" data-v-39a288b8><div><h3 id="callout" tabindex="-1">Callout <a class="header-anchor" href="#callout" aria-label="Permalink to &quot;Callout&quot;">​</a></h3><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-callout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">visible</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">sync</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">show</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> effect</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;hover&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> position</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;bottomLeft&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;fv-button icon=&quot;ActionCenter&quot; borderRadius=&quot;3&quot; style=&quot;width: 120px; height: 45px;&quot;&gt;Callout&lt;/fv-button&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;template v-slot:main&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;fv-color-picker v-model=&quot;color&quot; style=&quot;width:500px&quot;&gt;&lt;/fv-color-picker&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-callout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h3 id="callout-custom" tabindex="-1">Callout Custom <a class="header-anchor" href="#callout-custom" aria-label="Permalink to &quot;Callout Custom&quot;">​</a></h3><p>beak:</p><div class="fv-Slider light"><div class="fv-slider__bar" style=""><!----><div class="fv-slider__bar-bg"></div><div style="width:0%;background-color:#242424FF;" class="fv-slider__progress"></div><div class="ms-Icon--RadioBullet fv-slider__button ms-Icon" style="left:0%;transform:translateX(-0px) translateY(--3px);color:#242424FF;"></div></div><div class="fv-slider__label"><!--[--><span>{
+  &quot;value&quot;: 9
+} px</span><!--]--></div></div><p>space:</p><div class="fv-Slider light"><div class="fv-slider__bar" style=""><!--[--><!--[--><div class="fv-slider__scale-up" style="top:7px;left:33%;height:5px;width:1px;"></div><div class="fv-slider__scale-up" style="top:7px;left:66%;height:5px;width:1px;"></div><!--]--><!--[--><div class="fv-slider__scale-down" style="top:-7px;left:33%;height:5px;width:1px;"></div><div class="fv-slider__scale-down" style="top:-7px;left:66%;height:5px;width:1px;"></div><!--]--><!--]--><div class="fv-slider__bar-bg"></div><div style="width:0%;background-color:#242424FF;" class="fv-slider__progress"></div><div class="ms-Icon--RadioBullet fv-slider__button ms-Icon" style="left:0%;transform:translateX(-0px) translateY(--3px);color:#242424FF;"></div></div><div class="fv-slider__label"><!--[--><span>{
+  &quot;value&quot;: 0
+} px</span><!--]--></div></div><p>position:</p><!----><p>topLeft</p><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-callout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">lockScroll</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">position</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">position.key</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">beak</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">beak</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">space</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">popperStyle</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{ </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">backgroundColor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: color }</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;dark&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;fv-button :background=&quot;color&quot; theme=&quot;dark&quot; icon=&quot;ActionCenter&quot; borderRadius=&quot;3&quot; style=&quot;width: 120px; height: 45px;&quot;&gt;Callout&lt;/fv-button&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;template v-slot:header&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    Fluent UI</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;template v-slot:main&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    Hello Vue! Nice to meet you!</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;template v-slot:footer&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    @Copyright Creator SN</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-callout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">visible.sync</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否显示</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">[&#39;system&#39;,&#39;light&#39;,&#39;dark&#39;,&#39;custom&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;system&#39;</td><td style="text-align:center;">主题色</td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否禁用</td></tr><tr><td style="text-align:center;">space</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">0</td><td style="text-align:center;">间距(px)</td></tr><tr><td style="text-align:center;">beak</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">10</td><td style="text-align:center;">角标大小(px)</td></tr><tr><td style="text-align:center;">position</td><td style="text-align:center;">[&#39;topLeft&#39;,&#39;topCenter&#39;,...]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;bottomCenter&#39;</td><td style="text-align:center;">位置</td></tr><tr><td style="text-align:center;">lockScroll</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否锁定滚动</td></tr><tr><td style="text-align:center;">focusTrap</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否聚焦</td></tr><tr><td style="text-align:center;">delayClose</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">0</td><td style="text-align:center;">显示时是否延时关闭(ms)</td></tr><tr><td style="text-align:center;">effect</td><td style="text-align:center;">[’click&#39;,&#39;hover&#39;,&#39;always&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;click&#39;</td><td style="text-align:center;">显示触发方式</td></tr><tr><td style="text-align:center;">popperStyle</td><td style="text-align:center;">Object</td><td style="text-align:center;">No</td><td style="text-align:center;">{}</td><td style="text-align:center;">悬浮窗的样式</td></tr><tr><td style="text-align:center;">popperClass</td><td style="text-align:center;">Array</td><td style="text-align:center;">No</td><td style="text-align:center;">[]</td><td style="text-align:center;">悬浮窗的 css</td></tr></tbody></table><h3 id="appendix" tabindex="-1">Appendix <a class="header-anchor" href="#appendix" aria-label="Permalink to &quot;Appendix&quot;">​</a></h3><hr><ol><li>position</li></ol><p><code>position</code>属性包括: <code>topLeft</code>, <code>topRight</code>, <code>topCenter</code>, <code>bottomLeft</code>, <code>bottomRight</code>, <code>bottomCenter</code>, <code>leftTop</code>, <code>leftCenter</code>, <code>leftBottom</code>, <code>rightTop</code>, <code>rightBottom</code>, <code>rightCenter</code></p></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-09de1c0f><!--[--><!--]--><!----><nav class="prev-next" data-v-09de1c0f><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link prev" href="/VFluent3/guide/components/time-picker/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Previous page</span><span class="title" data-v-09de1c0f>TimePicker</span><!--]--></a></div><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link next" href="/VFluent3/guide/components/info-box/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Next page</span><span class="title" data-v-09de1c0f>InfoBox</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>MIT Licensed</p><p class="copyright" data-v-e315a0ad>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_calendar-date-picker_properties.md\":\"DXRjmMG8\",\"guide_components_image_properties.md\":\"DGanRzCb\",\"guide_components_img-box_index.md\":\"DYtggkf_\",\"guide_components_img_emits.md\":\"BlE7jvZQ\",\"guide_components_img_index.md\":\"Bm9FiuU4\",\"guide_components_icon-element_properties.md\":\"8Oakruwc\",\"guide_components_img_properties.md\":\"B42YSocI\",\"guide_components_drawer_index.md\":\"D_vpnCpE\",\"guide_components_verify-box_emits.md\":\"DT17Iazx\",\"guide_components_calendar-date-picker_index.md\":\"BdHjrurh\",\"guide_components_rating-control_index.md\":\"Q9l5Lfrr\",\"guide_components_rating-control_properties.md\":\"DKprnl0i\",\"guide_components_calendar-view_index.md\":\"zdoRYVx1\",\"guide_components_animated-icon_index.md\":\"yZDMzCFe\",\"guide_components_calendar-date-picker_emits.md\":\"D5OkfR8j\",\"guide_components_badge_index.md\":\"Bb4crrJn\",\"guide_components_image_index.md\":\"B7X6cWAZ\",\"guide_components_slider_index.md\":\"C7zZ2d-W\",\"guide_components_radio-group_index.md\":\"CVfh3h5H\",\"guide_components_swipe-control_index.md\":\"DwrDVPc1\",\"guide_components_color-picker_emits.md\":\"BHDXVtBQ\",\"guide_components_radio_index.md\":\"90as5QGp\",\"guide_components_pagination_properties.md\":\"JUAPvcTL\",\"guide_components_persona_properties.md\":\"DUTPhPMp\",\"guide_components_combo-box_emits.md\":\"Dh5R-qEv\",\"guide_components_pivot_emits.md\":\"BTJPgNpy\",\"guide_components_pagination_index.md\":\"CnW2zAht\",\"guide_components_flip-view_properties.md\":\"BqZ4hhgU\",\"guide_components_icon-element_emits.md\":\"D5TXFdTZ\",\"guide_components_flip-view_index.md\":\"DefnDOv6\",\"guide_components_navigation-panel_index.md\":\"6mO__sSK\",\"guide_components_rating-control_emits.md\":\"blvomSeC\",\"guide_components_icon-element_index.md\":\"DQ8K7JNn\",\"guide_components_navigation-view_index.md\":\"4AQRiz1k\",\"guide_components_toggle-switch_emits.md\":\"CLGzrNut\",\"guide_components_toggle-switch_index.md\":\"61en_q9-\",\"guide_components_scroll-story_index.md\":\"Vpgb1HSV\",\"guide_components_reveal-container_index.md\":\"Cut2r4tV\",\"guide_components_search-box_emits.md\":\"-d9sWNNt\",\"guide_components_search-box_properties.md\":\"DEKFfPFw\",\"guide_components_shimmer_emits.md\":\"CTMInlI3\",\"guide_components_tag_index.md\":\"BhhxkcHn\",\"guide_components_search-box_index.md\":\"DgkrY0oY\",\"guide_components_shimmer_index.md\":\"iZlHuTxw\",\"guide_components_shimmer_properties.md\":\"CdkU1o6H\",\"guide_components_tree-view_index.md\":\"CUrwan4q\",\"guide_components_text-field_index.md\":\"CXSimJtj\",\"guide_components_text-box_index.md\":\"C5moAPfB\",\"guide_components_progress-ring_properties.md\":\"Dc08Uiff\",\"guide_components_toggle-switch_properties.md\":\"tFppK_IS\",\"guide_components_radio-group_emits.md\":\"cEDzKVnN\",\"guide_components_collapse_index.md\":\"N9Iu5-2v\",\"guide_components_image_emits.md\":\"lmlz2xJd\",\"guide_components_callout_index.md\":\"D9RU33w6\",\"guide_components_pivot_index.md\":\"B_vwQL-5\",\"guide_components_command-bar_index.md\":\"Cp4_rrGB\",\"guide_components_pagination_emits.md\":\"Dng86A22\",\"guide_components_button_index.md\":\"7sqT2MQP\",\"guide_components_info-box_properties.md\":\"BI7Nvk-E\",\"guide_components_drop-down_emits.md\":\"BE95TdKW\",\"guide_components_expander_index.md\":\"BKgcUJzQ\",\"guide_components_message-bar_index.md\":\"AEtAWlF8\",\"guide_components_menu-flyout_index.md\":\"Csa7irPj\",\"guide_components_panel_index.md\":\"CsTu0bXo\",\"guide_components_panel_properties.md\":\"BaxoCYKq\",\"guide_components_progress-bar_emits.md\":\"BcwXUpsF\",\"guide_components_progress-bar_properties.md\":\"TxiS9ZMA\",\"guide_components_progress-ring_emits.md\":\"D2Y6hIZ9\",\"guide_components_color-picker_index.md\":\"DCc4ixcU\",\"guide_components_progress-ring_index.md\":\"CPb-ZEPE\",\"guide_components_color-picker_properties.md\":\"wcXK29Vl\",\"guide_components_time-picker_index.md\":\"CQJdRRaG\",\"guide_components_drop-down_properties.md\":\"Bwlkpr1q\",\"guide_components_infinite-scroll-view_index.md\":\"yAuD807x\",\"guide_components_check-box_index.md\":\"FYgdu4oq\",\"guide_components_progress-bar_index.md\":\"D8vHQw5V\",\"guide_components_combo-box_index.md\":\"DTyu3eNd\",\"guide_components_info-box_emits.md\":\"DlEwpkkq\",\"guide_components_drop-down_index.md\":\"BZzJZQWq\",\"guide_components_list-view_index.md\":\"BoYvMzb0\",\"guide_components_verify-box_properties.md\":\"CW6W8fFf\",\"guide_components_verify-box_index.md\":\"DwSB40wR\",\"guide_index.md\":\"Bndlt3sL\",\"guide_components_web-window_index.md\":\"Bxc8vEeI\",\"index.md\":\"MTRqI42u\",\"guide_components_combo-box_properties.md\":\"AWfHzV6x\",\"guide_components_combobox_emits.md\":\"CGB6WLt8\",\"guide_components_combobox_properties.md\":\"Bja0hMou\",\"guide_components_details-list_index.md\":\"CcgOCIyt\",\"guide_components_info-box_index.md\":\"vXh-_DsL\",\"guide_components_combobox_index.md\":\"CsPkY6YB\",\"guide_components_date-picker_index.md\":\"12vmUIup\",\"guide_components_flip-view_emits.md\":\"DCheHjDj\",\"guide_components_panel_emits.md\":\"DG0REDq8\",\"guide_components_breadcrumb_index.md\":\"DyDm7PeP\",\"guide_components_radio-group_properties.md\":\"BnPxoKsQ\",\"guide_components_persona_emits.md\":\"CnsDPKRU\",\"guide_components_pivot_properties.md\":\"BmoLpPi1\",\"guide_components_persona_index.md\":\"DT00jby4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vfluent3\",\"description\":\"A Vue3 component library for Fluent UI\",\"base\":\"/VFluent3/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"VFluent3\",\"footer\":{\"message\":\"MIT Licensed\",\"copyright\":\"Copyright © Creator SN - 2022\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/\"}],\"sidebar\":[{\"text\":\"Basic input\",\"collapsed\":true,\"items\":[{\"text\":\"Button\",\"link\":\"/guide/components/button/\"},{\"text\":\"CheckBox\",\"link\":\"/guide/components/check-box/\"},{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"},{\"text\":\"Combobox\",\"link\":\"/guide/components/combobox/\"},{\"text\":\"DetailsList\",\"link\":\"/guide/components/details-list/\"},{\"text\":\"DropDown\",\"link\":\"/guide/components/drop-down/\"},{\"text\":\"Radio\",\"link\":\"/guide/components/radio/\"},{\"text\":\"RadioGroup\",\"link\":\"/guide/components/radio-group/\"},{\"text\":\"RatingControl\",\"link\":\"/guide/components/rating-control/\"},{\"text\":\"Slider\",\"link\":\"/guide/components/slider/\"},{\"text\":\"ToggleSwitch\",\"link\":\"/guide/components/toggle-switch/\"},{\"text\":\"Tag\",\"link\":\"/guide/components/tag/\"}]},{\"text\":\"Collections\",\"collapsed\":true,\"items\":[{\"text\":\"FlipView\",\"link\":\"/guide/components/flip-view/\"},{\"text\":\"ListView\",\"link\":\"/guide/components/list-view/\"},{\"text\":\"TreeView\",\"link\":\"/guide/components/tree-view/\"}]},{\"text\":\"Date & Time\",\"collapsed\":true,\"items\":[{\"text\":\"CalendarDatePicker\",\"link\":\"/guide/components/calendar-date-picker/\"},{\"text\":\"CalendarView\",\"link\":\"/guide/components/calendar-view/\"},{\"text\":\"DatePicker\",\"link\":\"/guide/components/date-picker/\"},{\"text\":\"TimePicker\",\"link\":\"/guide/components/time-picker/\"}]},{\"text\":\"Dialogs & flyouts\",\"collapsed\":true,\"items\":[{\"text\":\"Callout\",\"link\":\"/guide/components/callout/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Layout\",\"collapsed\":true,\"items\":[{\"text\":\"Collapse\",\"link\":\"/guide/components/collapse/\"},{\"text\":\"Expander\",\"link\":\"/guide/components/expander/\"},{\"text\":\"Drawer\",\"link\":\"/guide/components/drawer/\"},{\"text\":\"Panel\",\"link\":\"/guide/components/panel/\"}]},{\"text\":\"Media\",\"collapsed\":true,\"items\":[{\"text\":\"Image\",\"link\":\"/guide/components/image/\"},{\"text\":\"Img\",\"link\":\"/guide/components/img/\"},{\"text\":\"ImgBox\",\"link\":\"/guide/components/img-box/\"},{\"text\":\"Persona\",\"link\":\"/guide/components/persona/\"}]},{\"text\":\"Menu & toolbars\",\"collapsed\":true,\"items\":[{\"text\":\"CommandBar\",\"link\":\"/guide/components/command-bar/\"},{\"text\":\"MenuFlyout\",\"link\":\"/guide/components/menu-flyout/\"},{\"text\":\"SwipeControl\",\"link\":\"/guide/components/swipe-control/\"}]},{\"text\":\"Navigation\",\"collapsed\":true,\"items\":[{\"text\":\"Breadcrumb\",\"link\":\"/guide/components/breadcrumb/\"},{\"text\":\"NavigationPanel\",\"link\":\"/guide/components/navigation-panel/\"},{\"text\":\"NavigationView\",\"link\":\"/guide/components/navigation-view/\"},{\"text\":\"Pivot\",\"link\":\"/guide/components/pivot/\"},{\"text\":\"Pagination\",\"link\":\"/guide/components/pagination/\"}]},{\"text\":\"Scrolling\",\"collapsed\":true,\"items\":[{\"text\":\"InfiniteScrollView\",\"link\":\"/guide/components/infinite-scroll-view/\"},{\"text\":\"ScrollStory\",\"link\":\"/guide/components/scroll-story/\"}]},{\"text\":\"Status & info\",\"collapsed\":true,\"items\":[{\"text\":\"Badge\",\"link\":\"/guide/components/badge/\"},{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"ProgressBar\",\"link\":\"/guide/components/progress-bar/\"},{\"text\":\"ProgressRing\",\"link\":\"/guide/components/progress-ring/\"}]},{\"text\":\"Styles\",\"collapsed\":true,\"items\":[{\"text\":\"AnimatedIcon\",\"link\":\"/guide/components/animated-icon/\"},{\"text\":\"IconElement\",\"link\":\"/guide/components/icon-element/\"},{\"text\":\"RevealContainer\",\"link\":\"/guide/components/reveal-container/\"},{\"text\":\"Shimmer\",\"link\":\"/guide/components/shimmer/\"}]},{\"text\":\"Text\",\"collapsed\":true,\"items\":[{\"text\":\"SearchBox\",\"link\":\"/guide/components/search-box/\"},{\"text\":\"TextBox\",\"link\":\"/guide/components/text-box/\"},{\"text\":\"TextField\",\"link\":\"/guide/components/text-field/\"},{\"text\":\"VerifyBox\",\"link\":\"/guide/components/verify-box/\"}]},{\"text\":\"Windowing\",\"collapsed\":true,\"items\":[{\"text\":\"WebWindow\",\"link\":\"/guide/components/web-window/\"}]},{\"text\":\"Global\",\"collapsed\":true,\"items\":[{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Advance\",\"collapsed\":true,\"items\":[{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git a/guide/components/check-box/emits.html b/guide/components/check-box/emits.html
deleted file mode 100644
index 28c2bbb..0000000
--- a/guide/components/check-box/emits.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<!DOCTYPE html>
-<html lang="en-US">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>Emits | vfluent3</title>
-    <meta name="description" content="A Vue3 component library for Fluent UI">
-    <link rel="stylesheet" href="/VFluent3/assets/style.0a1d87af.css">
-    <link rel="modulepreload" href="/VFluent3/assets/app.d60fa8c3.js">
-    <link rel="modulepreload" href="/VFluent3/assets/guide_components_check-box_emits.md.31609794.lean.js">
-    
-    <script>(()=>{const e=localStorage.getItem("vitepress-theme-appearance"),a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
-  </head>
-  <body>
-    <div id="app"><div class="Layout" data-v-058b7495><!--[--><!--]--><!--[--><span tabindex="-1" data-v-bea91388></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-bea91388> Skip to content </a><!--]--><!----><header class="VPNav" data-v-058b7495 data-v-2a0a2738><div class="VPNavBar has-sidebar" data-v-2a0a2738 data-v-45c9f423><div class="container" data-v-45c9f423><div class="VPNavBarTitle has-sidebar" data-v-45c9f423 data-v-011600ce><a class="title" href="/VFluent3/" data-v-011600ce><!----><!--[-->VFluent3<!--]--></a></div><div class="content" data-v-45c9f423><!----><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-45c9f423 data-v-4da4371d><span id="main-nav-aria-label" class="visually-hidden" data-v-4da4371d>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" data-v-4da4371d data-v-66f8d518 data-v-4d08dd3a><!--[-->Home<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" data-v-4da4371d data-v-66f8d518 data-v-4d08dd3a><!--[-->Guide<!--]--><!----></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-45c9f423 data-v-bf1c94ca><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" data-v-bf1c94ca data-v-d0ee0df2 data-v-55b931a0><span class="check" data-v-55b931a0><span class="icon" data-v-55b931a0><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-d0ee0df2><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-d0ee0df2><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-45c9f423 data-v-7cece6ac data-v-37af1650><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-37af1650><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-37af1650><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-37af1650><div class="VPMenu" data-v-37af1650 data-v-17dc081b><!----><!--[--><!--[--><!----><div class="group" data-v-7cece6ac><div class="item appearance" data-v-7cece6ac><p class="label" data-v-7cece6ac>Appearance</p><div class="appearance-action" data-v-7cece6ac><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" data-v-7cece6ac data-v-d0ee0df2 data-v-55b931a0><span class="check" data-v-55b931a0><span class="icon" data-v-55b931a0><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-d0ee0df2><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-d0ee0df2><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-45c9f423 data-v-5484e669><span class="container" data-v-5484e669><span class="top" data-v-5484e669></span><span class="middle" data-v-5484e669></span><span class="bottom" data-v-5484e669></span></span></button></div></div></div><!----></header><div class="VPLocalNav" data-v-058b7495 data-v-f623cd72><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-f623cd72><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-f623cd72><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-f623cd72>Menu</span></button><a class="top-link" href="#" data-v-f623cd72> Return to top </a></div><aside class="VPSidebar" data-v-058b7495 data-v-3b8ec0c7><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-3b8ec0c7><span class="visually-hidden" id="sidebar-aria-label" data-v-3b8ec0c7> Sidebar Navigation </span><!--[--><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Basic</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/button/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Button</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/check-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>CheckBox</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/radio/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Radio</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/progress-bar/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ProgressBar</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/progress-ring/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ProgressRing</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/toggle-switch/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ToggleSwitch</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/img/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Img</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/text-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>TextBox</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/combo-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ComboBox</span><!--]--><!----></a><!--]--></div></section></div><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Global</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/message-bar/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>MessageBar</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/info-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>InfoBox</span><!--]--><!----></a><!--]--></div></section></div><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Advance</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/color-picker/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ColorPicker</span><!--]--><!----></a><!--]--></div></section></div><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-058b7495 data-v-564173e9><div class="VPDoc has-sidebar" data-v-564173e9 data-v-32b7ddf4><div class="container" data-v-32b7ddf4><div class="aside" data-v-32b7ddf4><div class="aside-curtain" data-v-32b7ddf4></div><div class="aside-container" data-v-32b7ddf4><div class="aside-content" data-v-32b7ddf4><div class="VPDocAside" data-v-32b7ddf4 data-v-35c1bae1><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline has-outline" data-v-35c1bae1 data-v-123cce62><div class="content" data-v-123cce62><div class="outline-marker" data-v-123cce62></div><div class="outline-title" data-v-123cce62>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-123cce62><span class="visually-hidden" id="doc-outline-aria-label" data-v-123cce62> Table of Contents for current page </span><ul class="root" data-v-123cce62><!--[--><li style="" data-v-123cce62><a class="outline-link" href="#emits" data-v-123cce62>Emits</a><!----></li><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-35c1bae1></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-32b7ddf4><div class="content-container" data-v-32b7ddf4><!--[--><!--]--><main class="main" data-v-32b7ddf4><div style="position:relative;" class="vp-doc _VFluent3_guide_components_check-box_emits" data-v-32b7ddf4><div><h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">blur</td><td style="text-align:center;">evt[FocusEvent]</td><td style="text-align:center;">blur</td></tr><tr><td style="text-align:center;">change</td><td style="text-align:center;">val[boolean, null]</td><td style="text-align:center;">change</td></tr><tr><td style="text-align:center;">click</td><td style="text-align:center;">val[boolean, null]</td><td style="text-align:center;">onclick</td></tr><tr><td style="text-align:center;">focus</td><td style="text-align:center;">evt[FocusEvent]</td><td style="text-align:center;">focus</td></tr><tr><td style="text-align:center;">update:model-value</td><td style="text-align:center;">val[boolean]</td><td style="text-align:center;">v-model</td></tr></tbody></table></div></div></main><footer class="VPDocFooter" data-v-32b7ddf4 data-v-cfaa3a6c><div class="edit-info" data-v-cfaa3a6c><!----><!----></div><div class="prev-next" data-v-cfaa3a6c><div class="pager" data-v-cfaa3a6c><!----></div><div class="pager" data-v-cfaa3a6c><a class="pager-link next" href="/VFluent3/guide/components/button/" data-v-cfaa3a6c><span class="desc" data-v-cfaa3a6c>Next page</span><span class="title" data-v-cfaa3a6c>Button</span></a></div></div></footer><!--[--><!--]--></div></div></div></div></div><footer class="VPFooter has-sidebar" data-v-058b7495 data-v-a6c8dde4><div class="container" data-v-a6c8dde4><p class="message" data-v-a6c8dde4>MIT Licensed</p><p class="copyright" data-v-a6c8dde4>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
-    <script>__VP_HASH_MAP__ = JSON.parse("{\"guide_components_button_emits.md\":\"d682bf18\",\"guide_components_button_index.md\":\"23a8eb54\",\"guide_components_button_properties.md\":\"cd4004b6\",\"guide_components_check-box_emits.md\":\"31609794\",\"guide_components_check-box_index.md\":\"32046814\",\"guide_components_check-box_properties.md\":\"8f33ac0c\",\"guide_components_color-picker_emits.md\":\"00983cd0\",\"guide_components_color-picker_index.md\":\"b2d62612\",\"guide_components_color-picker_properties.md\":\"5466ba72\",\"guide_components_combo-box_emits.md\":\"d5ffda50\",\"guide_components_combo-box_index.md\":\"1c4364f5\",\"guide_components_combo-box_properties.md\":\"2e1d6060\",\"guide_components_img_emits.md\":\"6237adb4\",\"guide_components_img_index.md\":\"fa51a3a1\",\"guide_components_img_properties.md\":\"8d321b5e\",\"guide_components_info-box_emits.md\":\"c2e71eec\",\"guide_components_info-box_index.md\":\"06175fed\",\"guide_components_info-box_properties.md\":\"314dbb00\",\"guide_components_message-bar_emits.md\":\"e89a5a22\",\"guide_components_message-bar_index.md\":\"3f0b01d6\",\"guide_components_message-bar_properties.md\":\"ee3838d9\",\"guide_components_progress-bar_emits.md\":\"5b611e3b\",\"guide_components_progress-bar_index.md\":\"689c3241\",\"guide_components_progress-bar_properties.md\":\"39af7fb2\",\"guide_components_progress-ring_emits.md\":\"67e4644e\",\"guide_components_progress-ring_index.md\":\"9a33542b\",\"guide_components_progress-ring_properties.md\":\"c897c4bb\",\"guide_components_radio_emits.md\":\"28506857\",\"guide_components_radio_index.md\":\"e5a479ce\",\"guide_components_radio_properties.md\":\"f8e55d2f\",\"guide_components_text-box_emits.md\":\"0bf89ef8\",\"guide_components_text-box_index.md\":\"7ccfc637\",\"guide_components_text-box_properties.md\":\"aab3a89e\",\"guide_components_toggle-switch_emits.md\":\"5146435f\",\"guide_components_toggle-switch_index.md\":\"8be48081\",\"guide_components_toggle-switch_properties.md\":\"54984c3a\",\"guide_index.md\":\"e3dca1d7\",\"index.md\":\"1e9773d5\"}")</script>
-    <script type="module" async src="/VFluent3/assets/app.d60fa8c3.js"></script>
-    
-  </body>
-</html>
\ No newline at end of file
diff --git a/guide/components/check-box/index.html b/guide/components/check-box/index.html
index 6e4a8ab..92afaad 100644
--- a/guide/components/check-box/index.html
+++ b/guide/components/check-box/index.html
@@ -1,61 +1,24 @@
 <!DOCTYPE html>
-<html lang="en-US">
+<html lang="en-US" dir="ltr">
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1">
     <title>CheckBox | vfluent3</title>
     <meta name="description" content="A Vue3 component library for Fluent UI">
-    <link rel="stylesheet" href="/VFluent3/assets/style.0a1d87af.css">
-    <link rel="modulepreload" href="/VFluent3/assets/chunks/index.9dba9c16.js">
-    <link rel="modulepreload" href="/VFluent3/assets/app.d60fa8c3.js">
-    <link rel="modulepreload" href="/VFluent3/assets/guide_components_check-box_index.md.32046814.lean.js">
+    <meta name="generator" content="VitePress v1.0.0-rc.45">
+    <link rel="preload stylesheet" href="/VFluent3/assets/style.BabQegKX.css" as="style">
     
-    <script>(()=>{const e=localStorage.getItem("vitepress-theme-appearance"),a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script type="module" src="/VFluent3/assets/app.CSutcJ2E.js"></script>
+    <link rel="preload" href="/VFluent3/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/framework.DvIFzl91.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/theme.CgqFBnN_.js">
+    <link rel="modulepreload" href="/VFluent3/assets/guide_components_check-box_index.md.FYgdu4oq.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
   </head>
   <body>
-    <div id="app"><div class="Layout" data-v-058b7495><!--[--><!--]--><!--[--><span tabindex="-1" data-v-bea91388></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-bea91388> Skip to content </a><!--]--><!----><header class="VPNav" data-v-058b7495 data-v-2a0a2738><div class="VPNavBar has-sidebar" data-v-2a0a2738 data-v-45c9f423><div class="container" data-v-45c9f423><div class="VPNavBarTitle has-sidebar" data-v-45c9f423 data-v-011600ce><a class="title" href="/VFluent3/" data-v-011600ce><!----><!--[-->VFluent3<!--]--></a></div><div class="content" data-v-45c9f423><!----><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-45c9f423 data-v-4da4371d><span id="main-nav-aria-label" class="visually-hidden" data-v-4da4371d>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" data-v-4da4371d data-v-66f8d518 data-v-4d08dd3a><!--[-->Home<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" data-v-4da4371d data-v-66f8d518 data-v-4d08dd3a><!--[-->Guide<!--]--><!----></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-45c9f423 data-v-bf1c94ca><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" data-v-bf1c94ca data-v-d0ee0df2 data-v-55b931a0><span class="check" data-v-55b931a0><span class="icon" data-v-55b931a0><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-d0ee0df2><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-d0ee0df2><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-45c9f423 data-v-7cece6ac data-v-37af1650><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-37af1650><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-37af1650><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-37af1650><div class="VPMenu" data-v-37af1650 data-v-17dc081b><!----><!--[--><!--[--><!----><div class="group" data-v-7cece6ac><div class="item appearance" data-v-7cece6ac><p class="label" data-v-7cece6ac>Appearance</p><div class="appearance-action" data-v-7cece6ac><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" data-v-7cece6ac data-v-d0ee0df2 data-v-55b931a0><span class="check" data-v-55b931a0><span class="icon" data-v-55b931a0><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-d0ee0df2><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-d0ee0df2><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-45c9f423 data-v-5484e669><span class="container" data-v-5484e669><span class="top" data-v-5484e669></span><span class="middle" data-v-5484e669></span><span class="bottom" data-v-5484e669></span></span></button></div></div></div><!----></header><div class="VPLocalNav" data-v-058b7495 data-v-f623cd72><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-f623cd72><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-f623cd72><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-f623cd72>Menu</span></button><a class="top-link" href="#" data-v-f623cd72> Return to top </a></div><aside class="VPSidebar" data-v-058b7495 data-v-3b8ec0c7><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-3b8ec0c7><span class="visually-hidden" id="sidebar-aria-label" data-v-3b8ec0c7> Sidebar Navigation </span><!--[--><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Basic</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/button/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Button</span><!--]--><!----></a><a class="VPLink link active" href="/VFluent3/guide/components/check-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>CheckBox</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/radio/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Radio</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/progress-bar/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ProgressBar</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/progress-ring/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ProgressRing</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/toggle-switch/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ToggleSwitch</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/img/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Img</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/text-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>TextBox</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/combo-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ComboBox</span><!--]--><!----></a><!--]--></div></section></div><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Global</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/message-bar/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>MessageBar</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/info-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>InfoBox</span><!--]--><!----></a><!--]--></div></section></div><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Advance</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/color-picker/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ColorPicker</span><!--]--><!----></a><!--]--></div></section></div><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-058b7495 data-v-564173e9><div class="VPDoc has-sidebar" data-v-564173e9 data-v-32b7ddf4><div class="container" data-v-32b7ddf4><div class="aside" data-v-32b7ddf4><div class="aside-curtain" data-v-32b7ddf4></div><div class="aside-container" data-v-32b7ddf4><div class="aside-content" data-v-32b7ddf4><div class="VPDocAside" data-v-32b7ddf4 data-v-35c1bae1><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline has-outline" data-v-35c1bae1 data-v-123cce62><div class="content" data-v-123cce62><div class="outline-marker" data-v-123cce62></div><div class="outline-title" data-v-123cce62>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-123cce62><span class="visually-hidden" id="doc-outline-aria-label" data-v-123cce62> Table of Contents for current page </span><ul class="root" data-v-123cce62><!--[--><li style="" data-v-123cce62><a class="outline-link" href="#quick-start" data-v-123cce62>Quick Start</a><!----></li><li style="" data-v-123cce62><a class="outline-link" href="#disabled" data-v-123cce62>Disabled</a><!----></li><li style="" data-v-123cce62><a class="outline-link" href="#box-side" data-v-123cce62>Box Side</a><!----></li><li style="" data-v-123cce62><a class="outline-link" href="#custom" data-v-123cce62>Custom</a><!----></li><li style="" data-v-123cce62><a class="outline-link" href="#properties" data-v-123cce62>Properties</a><!----></li><li style="" data-v-123cce62><a class="outline-link" href="#emits" data-v-123cce62>Emits</a><!----></li><li style="" data-v-123cce62><a class="outline-link" href="#slot" data-v-123cce62>Slot</a><!----></li><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-35c1bae1></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-32b7ddf4><div class="content-container" data-v-32b7ddf4><!--[--><!--]--><main class="main" data-v-32b7ddf4><div style="position:relative;" class="vp-doc _VFluent3_guide_components_check-box_index" data-v-32b7ddf4><div><h1 id="checkbox" tabindex="-1">CheckBox <a class="header-anchor" href="#checkbox" aria-hidden="true">#</a></h1><h2 id="quick-start" tabindex="-1">Quick Start <a class="header-anchor" href="#quick-start" aria-hidden="true">#</a></h2><h3 id="default" tabindex="-1">Default <a class="header-anchor" href="#default" aria-hidden="true">#</a></h3><div style="margin:5px;"><div class="fv-button light" style="width:120px;"><button type="button" class="button-container" style="border-width:2px;border-radius:3px;"><span class="content-block" style="font-weight:normal;"><!----><!--[-->Reset value<!--]--></span></button></div></div><hr><div class="fv-checkbox light active"><label class="label"><!----><input type="checkbox" class="checkbox"><div class="icon" style="border-width:1.5px;"><div class="icon-box" style=""></div><i class="ms-Icon ms-Icon--CheckboxIndeterminate"></i></div><span style=""><!--[--> CheckBox <!--]--></span></label></div><div class="language-vue-html"><span class="copy"></span><div class="highlight-lines"><br><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><br><br><br><br></div><pre><code><span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-check-box</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">v-model</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    @</span><span style="color:#C792EA;">click</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">click</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    @</span><span style="color:#C792EA;">change</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">change</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    @</span><span style="color:#C792EA;">blur</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">blur</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    @</span><span style="color:#C792EA;">focus</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">focus</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">  &gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">    CheckBox</span></span>
-<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-check-box</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h2 id="disabled" tabindex="-1">Disabled <a class="header-anchor" href="#disabled" aria-hidden="true">#</a></h2><div class="fv-checkbox light active disabled"><label class="label"><!----><input disabled type="checkbox" class="checkbox"><div class="icon" style="border-width:1.5px;"><div class="icon-box" style=""></div><i class="ms-Icon ms-Icon--CheckboxIndeterminate"></i></div><span style=""><!--[--> Disabled CheckBox <!--]--></span></label></div><div class="language-vue-html"><span class="copy"></span><div class="highlight-lines"><br><br><br><div class="highlighted"> </div><br><br><br><br></div><pre><code><span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-check-box</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">v-model</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">disabled</span></span>
-<span class="line"><span style="color:#89DDFF;">  &gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">    Disabled CheckBox</span></span>
-<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-check-box</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h2 id="box-side" tabindex="-1">Box Side <a class="header-anchor" href="#box-side" aria-hidden="true">#</a></h2><hr><div class="fv-checkbox light active"><label class="label"><span style=""><!--[--> Checkbox rendered with boxSide &quot;end&quot; <!--]--></span><input type="checkbox" class="checkbox"><div class="icon" style="border-width:1.5px;"><div class="icon-box" style=""></div><i class="ms-Icon ms-Icon--CheckboxIndeterminate"></i></div><!----></label></div><div class="language-vue-html"><span class="copy"></span><div class="highlight-lines"><br><br><div class="highlighted"> </div><br><br><br><br></div><pre><code><span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-check-box</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">box-side</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">end</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">  &gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">    Checkbox rendered with boxSide &quot;end&quot;</span></span>
-<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-check-box</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h2 id="custom" tabindex="-1">Custom <a class="header-anchor" href="#custom" aria-hidden="true">#</a></h2><hr><ol><li>Set border width. <div class="fv-checkbox light active"><label class="label"><!----><input type="checkbox" class="checkbox"><div class="icon" style="border-width:2px;"><div class="icon-box" style=""></div><i class="ms-Icon ms-Icon--CheckboxIndeterminate"></i></div><span style=""><!--[--> Checkbox rendered with borderWidth &quot;2&quot; <!--]--></span></label></div></li></ol><div class="language-vue-html"><span class="copy"></span><div class="highlight-lines"><br><br><div class="highlighted"> </div><br><br><br><br></div><pre><code><span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-check-box</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    :</span><span style="color:#C792EA;">border-width</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#F78C6C;">2</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">  &gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">    Checkbox rendered with borderWidth &quot;2&quot;</span></span>
-<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-check-box</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><ol start="2"><li>Set background and border color. <div class="fv-checkbox light active"><label class="label"><!----><input type="checkbox" class="checkbox"><div class="icon" style="background:rgba(0, 204, 153, 1);border-width:1.5px;border-color:rgba(0, 204, 153, 1);"><div class="icon-box" style=""></div><i class="ms-Icon ms-Icon--CheckboxIndeterminate"></i></div><span style="color:rgba(0, 204, 153, 1);"><!--[--> Checkbox <!--]--></span></label></div></li></ol><div class="language-vue-html"><span class="copy"></span><div class="highlight-lines"><br><br><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><br><br><br><br></div><pre><code><span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-check-box</span></span>
-<span class="line"><span style="color:#89DDFF;">    :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">border-color</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">rgba(0, 204, 153, 1)</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">foreground</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">rgba(0, 204, 153, 1)</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">background</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">rgba(0, 204, 153, 1)</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">  &gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">    Checkbox</span></span>
-<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-check-box</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">background</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">background</td></tr><tr><td style="text-align:center;">border-color</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">borderColor</td></tr><tr><td style="text-align:center;">border-width</td><td style="text-align:center;">[number, string]</td><td style="text-align:center;">No</td><td style="text-align:center;">1.5</td><td style="text-align:center;">border width</td></tr><tr><td style="text-align:center;">box-side</td><td style="text-align:center;">[&#39;start&#39;, &#39;end&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">start</td><td style="text-align:center;">position</td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">disabled</td></tr><tr><td style="text-align:center;">foreground</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">foreground</td></tr><tr><td style="text-align:center;">hover-color</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">false status hover color</td></tr><tr><td style="text-align:center;">lang</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">i18n</td></tr><tr><td style="text-align:center;">model-value</td><td style="text-align:center;">[boolean, null]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">value, null means indeterminate</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">[&#39;light&#39;, &#39;dark&#39;, &#39;global&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&quot;global&quot;</td><td style="text-align:center;">theme</td></tr></tbody></table><h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">blur</td><td style="text-align:center;">evt[FocusEvent]</td><td style="text-align:center;">blur</td></tr><tr><td style="text-align:center;">change</td><td style="text-align:center;">val[boolean, null]</td><td style="text-align:center;">change</td></tr><tr><td style="text-align:center;">click</td><td style="text-align:center;">val[boolean, null]</td><td style="text-align:center;">onclick</td></tr><tr><td style="text-align:center;">focus</td><td style="text-align:center;">evt[FocusEvent]</td><td style="text-align:center;">focus</td></tr><tr><td style="text-align:center;">update:model-value</td><td style="text-align:center;">val[boolean]</td><td style="text-align:center;">v-model</td></tr></tbody></table><h2 id="slot" tabindex="-1">Slot <a class="header-anchor" href="#slot" aria-hidden="true">#</a></h2><hr><h3 id="default-1" tabindex="-1">Default <a class="header-anchor" href="#default-1" aria-hidden="true">#</a></h3><div class="language-vue-html"><span class="copy"></span><pre><code><span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-check-box</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">{{</span><span style="color:#A6ACCD;">label here</span><span style="color:#89DDFF;">}}</span></span>
-<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-check-box</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div></div></div></main><footer class="VPDocFooter" data-v-32b7ddf4 data-v-cfaa3a6c><div class="edit-info" data-v-cfaa3a6c><!----><!----></div><div class="prev-next" data-v-cfaa3a6c><div class="pager" data-v-cfaa3a6c><a class="pager-link prev" href="/VFluent3/guide/components/button/" data-v-cfaa3a6c><span class="desc" data-v-cfaa3a6c>Previous page</span><span class="title" data-v-cfaa3a6c>Button</span></a></div><div class="has-prev pager" data-v-cfaa3a6c><a class="pager-link next" href="/VFluent3/guide/components/radio/" data-v-cfaa3a6c><span class="desc" data-v-cfaa3a6c>Next page</span><span class="title" data-v-cfaa3a6c>Radio</span></a></div></div></footer><!--[--><!--]--></div></div></div></div></div><footer class="VPFooter has-sidebar" data-v-058b7495 data-v-a6c8dde4><div class="container" data-v-a6c8dde4><p class="message" data-v-a6c8dde4>MIT Licensed</p><p class="copyright" data-v-a6c8dde4>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
-    <script>__VP_HASH_MAP__ = JSON.parse("{\"guide_components_button_emits.md\":\"d682bf18\",\"guide_components_button_index.md\":\"23a8eb54\",\"guide_components_button_properties.md\":\"cd4004b6\",\"guide_components_check-box_emits.md\":\"31609794\",\"guide_components_check-box_index.md\":\"32046814\",\"guide_components_check-box_properties.md\":\"8f33ac0c\",\"guide_components_color-picker_emits.md\":\"00983cd0\",\"guide_components_color-picker_index.md\":\"b2d62612\",\"guide_components_color-picker_properties.md\":\"5466ba72\",\"guide_components_combo-box_emits.md\":\"d5ffda50\",\"guide_components_combo-box_index.md\":\"1c4364f5\",\"guide_components_combo-box_properties.md\":\"2e1d6060\",\"guide_components_img_emits.md\":\"6237adb4\",\"guide_components_img_index.md\":\"fa51a3a1\",\"guide_components_img_properties.md\":\"8d321b5e\",\"guide_components_info-box_emits.md\":\"c2e71eec\",\"guide_components_info-box_index.md\":\"06175fed\",\"guide_components_info-box_properties.md\":\"314dbb00\",\"guide_components_message-bar_emits.md\":\"e89a5a22\",\"guide_components_message-bar_index.md\":\"3f0b01d6\",\"guide_components_message-bar_properties.md\":\"ee3838d9\",\"guide_components_progress-bar_emits.md\":\"5b611e3b\",\"guide_components_progress-bar_index.md\":\"689c3241\",\"guide_components_progress-bar_properties.md\":\"39af7fb2\",\"guide_components_progress-ring_emits.md\":\"67e4644e\",\"guide_components_progress-ring_index.md\":\"9a33542b\",\"guide_components_progress-ring_properties.md\":\"c897c4bb\",\"guide_components_radio_emits.md\":\"28506857\",\"guide_components_radio_index.md\":\"e5a479ce\",\"guide_components_radio_properties.md\":\"f8e55d2f\",\"guide_components_text-box_emits.md\":\"0bf89ef8\",\"guide_components_text-box_index.md\":\"7ccfc637\",\"guide_components_text-box_properties.md\":\"aab3a89e\",\"guide_components_toggle-switch_emits.md\":\"5146435f\",\"guide_components_toggle-switch_index.md\":\"8be48081\",\"guide_components_toggle-switch_properties.md\":\"54984c3a\",\"guide_index.md\":\"e3dca1d7\",\"index.md\":\"1e9773d5\"}")</script>
-    <script type="module" async src="/VFluent3/assets/app.d60fa8c3.js"></script>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-19c990f1><div class="wrapper" data-v-19c990f1><div class="container" data-v-19c990f1><div class="title" data-v-19c990f1><div class="VPNavBarTitle has-sidebar" data-v-19c990f1 data-v-ab179fa1><a class="title" href="/VFluent3/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>VFluent3</span><!--[--><!--]--></a></div></div><div class="content" data-v-19c990f1><div class="content-body" data-v-19c990f1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-19c990f1><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-19c990f1 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Guide</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-19c990f1 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-19c990f1 data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-19c990f1 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-19c990f1><div class="divider-line" data-v-19c990f1></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-d2ecc192><button data-v-d2ecc192>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-575e6a36><div class="curtain" data-v-575e6a36></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-575e6a36><span class="visually-hidden" id="sidebar-aria-label" data-v-575e6a36> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible has-active" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Basic input</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/button/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/check-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CheckBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/combobox/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Combobox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/details-list/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DetailsList</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drop-down/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DropDown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio-group/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RadioGroup</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/rating-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RatingControl</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/slider/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/toggle-switch/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ToggleSwitch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tag/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Tag</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Collections</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/flip-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>FlipView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/list-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ListView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tree-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TreeView</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Date & Time</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarDatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/time-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TimePicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Dialogs & flyouts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/callout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Callout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Layout</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/collapse/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Collapse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/expander/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Expander</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drawer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Panel</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Media</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/image/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Img</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ImgBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/persona/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Persona</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Menu & toolbars</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/command-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CommandBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/menu-flyout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MenuFlyout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/swipe-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SwipeControl</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Navigation</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/breadcrumb/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationPanel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pivot/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pivot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pagination/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pagination</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Scrolling</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/infinite-scroll-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfiniteScrollView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/scroll-story/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ScrollStory</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Status & info</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/badge/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-ring/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressRing</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Styles</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/animated-icon/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>AnimatedIcon</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/icon-element/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>IconElement</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/reveal-container/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RevealContainer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/shimmer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Shimmer</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Text</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/search-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SearchBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-field/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextField</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/verify-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>VerifyBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Windowing</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/web-window/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>WebWindow</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Global</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Advance</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-935f8a84><div class="content" data-v-935f8a84><div class="outline-marker" data-v-935f8a84></div><div class="outline-title" role="heading" aria-level="2" data-v-935f8a84>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-935f8a84><span class="visually-hidden" id="doc-outline-aria-label" data-v-935f8a84> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-935f8a84 data-v-b933a997><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _VFluent3_guide_components_check-box_" data-v-39a288b8><div><h3 id="checkbox-demo" tabindex="-1">CheckBox-DEMO <a class="header-anchor" href="#checkbox-demo" aria-label="Permalink to &quot;CheckBox-DEMO&quot;">​</a></h3><hr><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-checkBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Indeterminate checkbox&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-checkBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="checkbox-disabled" tabindex="-1">CheckBox-Disabled <a class="header-anchor" href="#checkbox-disabled" aria-label="Permalink to &quot;CheckBox-Disabled&quot;">​</a></h3><hr><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-checkBox</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> disabled</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Disabled checkbox&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-checkBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="checkbox-disabled-1" tabindex="-1">CheckBox-Disabled <a class="header-anchor" href="#checkbox-disabled-1" aria-label="Permalink to &quot;CheckBox-Disabled&quot;">​</a></h3><hr><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-checkBox</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> boxSide</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;end&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Checkbox rendered with boxSide &quot;end&quot;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-checkBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="checkbox-custom" tabindex="-1">CheckBox-Custom <a class="header-anchor" href="#checkbox-custom" aria-label="Permalink to &quot;CheckBox-Custom&quot;">​</a></h3><hr><ol><li>Set border width.</li></ol><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-checkBox</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">value</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> borderWidth</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;2&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Checkbox rendered with borderWidth &quot;2&quot;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-checkBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><ol start="2"><li>Set background and border color.</li></ol><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-checkBox</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">value</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> borderColor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rgba(0,204,153,1)&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> foreground</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rgba(0,204,153,1)&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rgba(0,204,153,1)&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Checkbox&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-checkBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">value</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">[empty]</td><td style="text-align:center;">Checkbox value</td></tr><tr><td style="text-align:center;">foreground</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">Checkbox foreground</td></tr><tr><td style="text-align:center;">borderColor</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">Checkbox borderColor</td></tr><tr><td style="text-align:center;">background</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">Checkbox background</td></tr><tr><td style="text-align:center;">boxSide</td><td style="text-align:center;">[&#39;start&#39;, &#39;end&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">start</td><td style="text-align:center;">CheckBox text font weight</td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">Disabled checkbox</td></tr><tr><td style="text-align:center;">borderWidth</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">1</td><td style="text-align:center;">Checkbox border width</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">system</td><td style="text-align:center;">主题样式, 包含<code>light</code>, <code>dark</code>, <code>system</code>, <code>custom</code>几种样式</td></tr></tbody></table><h3 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to &quot;Events&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">事件名(Name)</th><th style="text-align:center;">参数类型(args)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">click</td><td style="text-align:center;">value</td><td style="text-align:center;">Checkbox onclick</td></tr></tbody></table></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-09de1c0f><!--[--><!--]--><!----><nav class="prev-next" data-v-09de1c0f><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link prev" href="/VFluent3/guide/components/button/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Previous page</span><span class="title" data-v-09de1c0f>Button</span><!--]--></a></div><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link next" href="/VFluent3/guide/components/color-picker/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Next page</span><span class="title" data-v-09de1c0f>ColorPicker</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>MIT Licensed</p><p class="copyright" data-v-e315a0ad>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_calendar-date-picker_properties.md\":\"DXRjmMG8\",\"guide_components_image_properties.md\":\"DGanRzCb\",\"guide_components_img-box_index.md\":\"DYtggkf_\",\"guide_components_img_emits.md\":\"BlE7jvZQ\",\"guide_components_img_index.md\":\"Bm9FiuU4\",\"guide_components_icon-element_properties.md\":\"8Oakruwc\",\"guide_components_img_properties.md\":\"B42YSocI\",\"guide_components_drawer_index.md\":\"D_vpnCpE\",\"guide_components_verify-box_emits.md\":\"DT17Iazx\",\"guide_components_calendar-date-picker_index.md\":\"BdHjrurh\",\"guide_components_rating-control_index.md\":\"Q9l5Lfrr\",\"guide_components_rating-control_properties.md\":\"DKprnl0i\",\"guide_components_calendar-view_index.md\":\"zdoRYVx1\",\"guide_components_animated-icon_index.md\":\"yZDMzCFe\",\"guide_components_calendar-date-picker_emits.md\":\"D5OkfR8j\",\"guide_components_badge_index.md\":\"Bb4crrJn\",\"guide_components_image_index.md\":\"B7X6cWAZ\",\"guide_components_slider_index.md\":\"C7zZ2d-W\",\"guide_components_radio-group_index.md\":\"CVfh3h5H\",\"guide_components_swipe-control_index.md\":\"DwrDVPc1\",\"guide_components_color-picker_emits.md\":\"BHDXVtBQ\",\"guide_components_radio_index.md\":\"90as5QGp\",\"guide_components_pagination_properties.md\":\"JUAPvcTL\",\"guide_components_persona_properties.md\":\"DUTPhPMp\",\"guide_components_combo-box_emits.md\":\"Dh5R-qEv\",\"guide_components_pivot_emits.md\":\"BTJPgNpy\",\"guide_components_pagination_index.md\":\"CnW2zAht\",\"guide_components_flip-view_properties.md\":\"BqZ4hhgU\",\"guide_components_icon-element_emits.md\":\"D5TXFdTZ\",\"guide_components_flip-view_index.md\":\"DefnDOv6\",\"guide_components_navigation-panel_index.md\":\"6mO__sSK\",\"guide_components_rating-control_emits.md\":\"blvomSeC\",\"guide_components_icon-element_index.md\":\"DQ8K7JNn\",\"guide_components_navigation-view_index.md\":\"4AQRiz1k\",\"guide_components_toggle-switch_emits.md\":\"CLGzrNut\",\"guide_components_toggle-switch_index.md\":\"61en_q9-\",\"guide_components_scroll-story_index.md\":\"Vpgb1HSV\",\"guide_components_reveal-container_index.md\":\"Cut2r4tV\",\"guide_components_search-box_emits.md\":\"-d9sWNNt\",\"guide_components_search-box_properties.md\":\"DEKFfPFw\",\"guide_components_shimmer_emits.md\":\"CTMInlI3\",\"guide_components_tag_index.md\":\"BhhxkcHn\",\"guide_components_search-box_index.md\":\"DgkrY0oY\",\"guide_components_shimmer_index.md\":\"iZlHuTxw\",\"guide_components_shimmer_properties.md\":\"CdkU1o6H\",\"guide_components_tree-view_index.md\":\"CUrwan4q\",\"guide_components_text-field_index.md\":\"CXSimJtj\",\"guide_components_text-box_index.md\":\"C5moAPfB\",\"guide_components_progress-ring_properties.md\":\"Dc08Uiff\",\"guide_components_toggle-switch_properties.md\":\"tFppK_IS\",\"guide_components_radio-group_emits.md\":\"cEDzKVnN\",\"guide_components_collapse_index.md\":\"N9Iu5-2v\",\"guide_components_image_emits.md\":\"lmlz2xJd\",\"guide_components_callout_index.md\":\"D9RU33w6\",\"guide_components_pivot_index.md\":\"B_vwQL-5\",\"guide_components_command-bar_index.md\":\"Cp4_rrGB\",\"guide_components_pagination_emits.md\":\"Dng86A22\",\"guide_components_button_index.md\":\"7sqT2MQP\",\"guide_components_info-box_properties.md\":\"BI7Nvk-E\",\"guide_components_drop-down_emits.md\":\"BE95TdKW\",\"guide_components_expander_index.md\":\"BKgcUJzQ\",\"guide_components_message-bar_index.md\":\"AEtAWlF8\",\"guide_components_menu-flyout_index.md\":\"Csa7irPj\",\"guide_components_panel_index.md\":\"CsTu0bXo\",\"guide_components_panel_properties.md\":\"BaxoCYKq\",\"guide_components_progress-bar_emits.md\":\"BcwXUpsF\",\"guide_components_progress-bar_properties.md\":\"TxiS9ZMA\",\"guide_components_progress-ring_emits.md\":\"D2Y6hIZ9\",\"guide_components_color-picker_index.md\":\"DCc4ixcU\",\"guide_components_progress-ring_index.md\":\"CPb-ZEPE\",\"guide_components_color-picker_properties.md\":\"wcXK29Vl\",\"guide_components_time-picker_index.md\":\"CQJdRRaG\",\"guide_components_drop-down_properties.md\":\"Bwlkpr1q\",\"guide_components_infinite-scroll-view_index.md\":\"yAuD807x\",\"guide_components_check-box_index.md\":\"FYgdu4oq\",\"guide_components_progress-bar_index.md\":\"D8vHQw5V\",\"guide_components_combo-box_index.md\":\"DTyu3eNd\",\"guide_components_info-box_emits.md\":\"DlEwpkkq\",\"guide_components_drop-down_index.md\":\"BZzJZQWq\",\"guide_components_list-view_index.md\":\"BoYvMzb0\",\"guide_components_verify-box_properties.md\":\"CW6W8fFf\",\"guide_components_verify-box_index.md\":\"DwSB40wR\",\"guide_index.md\":\"Bndlt3sL\",\"guide_components_web-window_index.md\":\"Bxc8vEeI\",\"index.md\":\"MTRqI42u\",\"guide_components_combo-box_properties.md\":\"AWfHzV6x\",\"guide_components_combobox_emits.md\":\"CGB6WLt8\",\"guide_components_combobox_properties.md\":\"Bja0hMou\",\"guide_components_details-list_index.md\":\"CcgOCIyt\",\"guide_components_info-box_index.md\":\"vXh-_DsL\",\"guide_components_combobox_index.md\":\"CsPkY6YB\",\"guide_components_date-picker_index.md\":\"12vmUIup\",\"guide_components_flip-view_emits.md\":\"DCheHjDj\",\"guide_components_panel_emits.md\":\"DG0REDq8\",\"guide_components_breadcrumb_index.md\":\"DyDm7PeP\",\"guide_components_radio-group_properties.md\":\"BnPxoKsQ\",\"guide_components_persona_emits.md\":\"CnsDPKRU\",\"guide_components_pivot_properties.md\":\"BmoLpPi1\",\"guide_components_persona_index.md\":\"DT00jby4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vfluent3\",\"description\":\"A Vue3 component library for Fluent UI\",\"base\":\"/VFluent3/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"VFluent3\",\"footer\":{\"message\":\"MIT Licensed\",\"copyright\":\"Copyright © Creator SN - 2022\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/\"}],\"sidebar\":[{\"text\":\"Basic input\",\"collapsed\":true,\"items\":[{\"text\":\"Button\",\"link\":\"/guide/components/button/\"},{\"text\":\"CheckBox\",\"link\":\"/guide/components/check-box/\"},{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"},{\"text\":\"Combobox\",\"link\":\"/guide/components/combobox/\"},{\"text\":\"DetailsList\",\"link\":\"/guide/components/details-list/\"},{\"text\":\"DropDown\",\"link\":\"/guide/components/drop-down/\"},{\"text\":\"Radio\",\"link\":\"/guide/components/radio/\"},{\"text\":\"RadioGroup\",\"link\":\"/guide/components/radio-group/\"},{\"text\":\"RatingControl\",\"link\":\"/guide/components/rating-control/\"},{\"text\":\"Slider\",\"link\":\"/guide/components/slider/\"},{\"text\":\"ToggleSwitch\",\"link\":\"/guide/components/toggle-switch/\"},{\"text\":\"Tag\",\"link\":\"/guide/components/tag/\"}]},{\"text\":\"Collections\",\"collapsed\":true,\"items\":[{\"text\":\"FlipView\",\"link\":\"/guide/components/flip-view/\"},{\"text\":\"ListView\",\"link\":\"/guide/components/list-view/\"},{\"text\":\"TreeView\",\"link\":\"/guide/components/tree-view/\"}]},{\"text\":\"Date & Time\",\"collapsed\":true,\"items\":[{\"text\":\"CalendarDatePicker\",\"link\":\"/guide/components/calendar-date-picker/\"},{\"text\":\"CalendarView\",\"link\":\"/guide/components/calendar-view/\"},{\"text\":\"DatePicker\",\"link\":\"/guide/components/date-picker/\"},{\"text\":\"TimePicker\",\"link\":\"/guide/components/time-picker/\"}]},{\"text\":\"Dialogs & flyouts\",\"collapsed\":true,\"items\":[{\"text\":\"Callout\",\"link\":\"/guide/components/callout/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Layout\",\"collapsed\":true,\"items\":[{\"text\":\"Collapse\",\"link\":\"/guide/components/collapse/\"},{\"text\":\"Expander\",\"link\":\"/guide/components/expander/\"},{\"text\":\"Drawer\",\"link\":\"/guide/components/drawer/\"},{\"text\":\"Panel\",\"link\":\"/guide/components/panel/\"}]},{\"text\":\"Media\",\"collapsed\":true,\"items\":[{\"text\":\"Image\",\"link\":\"/guide/components/image/\"},{\"text\":\"Img\",\"link\":\"/guide/components/img/\"},{\"text\":\"ImgBox\",\"link\":\"/guide/components/img-box/\"},{\"text\":\"Persona\",\"link\":\"/guide/components/persona/\"}]},{\"text\":\"Menu & toolbars\",\"collapsed\":true,\"items\":[{\"text\":\"CommandBar\",\"link\":\"/guide/components/command-bar/\"},{\"text\":\"MenuFlyout\",\"link\":\"/guide/components/menu-flyout/\"},{\"text\":\"SwipeControl\",\"link\":\"/guide/components/swipe-control/\"}]},{\"text\":\"Navigation\",\"collapsed\":true,\"items\":[{\"text\":\"Breadcrumb\",\"link\":\"/guide/components/breadcrumb/\"},{\"text\":\"NavigationPanel\",\"link\":\"/guide/components/navigation-panel/\"},{\"text\":\"NavigationView\",\"link\":\"/guide/components/navigation-view/\"},{\"text\":\"Pivot\",\"link\":\"/guide/components/pivot/\"},{\"text\":\"Pagination\",\"link\":\"/guide/components/pagination/\"}]},{\"text\":\"Scrolling\",\"collapsed\":true,\"items\":[{\"text\":\"InfiniteScrollView\",\"link\":\"/guide/components/infinite-scroll-view/\"},{\"text\":\"ScrollStory\",\"link\":\"/guide/components/scroll-story/\"}]},{\"text\":\"Status & info\",\"collapsed\":true,\"items\":[{\"text\":\"Badge\",\"link\":\"/guide/components/badge/\"},{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"ProgressBar\",\"link\":\"/guide/components/progress-bar/\"},{\"text\":\"ProgressRing\",\"link\":\"/guide/components/progress-ring/\"}]},{\"text\":\"Styles\",\"collapsed\":true,\"items\":[{\"text\":\"AnimatedIcon\",\"link\":\"/guide/components/animated-icon/\"},{\"text\":\"IconElement\",\"link\":\"/guide/components/icon-element/\"},{\"text\":\"RevealContainer\",\"link\":\"/guide/components/reveal-container/\"},{\"text\":\"Shimmer\",\"link\":\"/guide/components/shimmer/\"}]},{\"text\":\"Text\",\"collapsed\":true,\"items\":[{\"text\":\"SearchBox\",\"link\":\"/guide/components/search-box/\"},{\"text\":\"TextBox\",\"link\":\"/guide/components/text-box/\"},{\"text\":\"TextField\",\"link\":\"/guide/components/text-field/\"},{\"text\":\"VerifyBox\",\"link\":\"/guide/components/verify-box/\"}]},{\"text\":\"Windowing\",\"collapsed\":true,\"items\":[{\"text\":\"WebWindow\",\"link\":\"/guide/components/web-window/\"}]},{\"text\":\"Global\",\"collapsed\":true,\"items\":[{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Advance\",\"collapsed\":true,\"items\":[{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
     
   </body>
 </html>
\ No newline at end of file
diff --git a/guide/components/check-box/properties.html b/guide/components/check-box/properties.html
deleted file mode 100644
index dbca84f..0000000
--- a/guide/components/check-box/properties.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<!DOCTYPE html>
-<html lang="en-US">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>Properties | vfluent3</title>
-    <meta name="description" content="A Vue3 component library for Fluent UI">
-    <link rel="stylesheet" href="/VFluent3/assets/style.0a1d87af.css">
-    <link rel="modulepreload" href="/VFluent3/assets/app.d60fa8c3.js">
-    <link rel="modulepreload" href="/VFluent3/assets/guide_components_check-box_properties.md.8f33ac0c.lean.js">
-    
-    <script>(()=>{const e=localStorage.getItem("vitepress-theme-appearance"),a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
-  </head>
-  <body>
-    <div id="app"><div class="Layout" data-v-058b7495><!--[--><!--]--><!--[--><span tabindex="-1" data-v-bea91388></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-bea91388> Skip to content </a><!--]--><!----><header class="VPNav" data-v-058b7495 data-v-2a0a2738><div class="VPNavBar has-sidebar" data-v-2a0a2738 data-v-45c9f423><div class="container" data-v-45c9f423><div class="VPNavBarTitle has-sidebar" data-v-45c9f423 data-v-011600ce><a class="title" href="/VFluent3/" data-v-011600ce><!----><!--[-->VFluent3<!--]--></a></div><div class="content" data-v-45c9f423><!----><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-45c9f423 data-v-4da4371d><span id="main-nav-aria-label" class="visually-hidden" data-v-4da4371d>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" data-v-4da4371d data-v-66f8d518 data-v-4d08dd3a><!--[-->Home<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" data-v-4da4371d data-v-66f8d518 data-v-4d08dd3a><!--[-->Guide<!--]--><!----></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-45c9f423 data-v-bf1c94ca><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" data-v-bf1c94ca data-v-d0ee0df2 data-v-55b931a0><span class="check" data-v-55b931a0><span class="icon" data-v-55b931a0><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-d0ee0df2><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-d0ee0df2><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-45c9f423 data-v-7cece6ac data-v-37af1650><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-37af1650><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-37af1650><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-37af1650><div class="VPMenu" data-v-37af1650 data-v-17dc081b><!----><!--[--><!--[--><!----><div class="group" data-v-7cece6ac><div class="item appearance" data-v-7cece6ac><p class="label" data-v-7cece6ac>Appearance</p><div class="appearance-action" data-v-7cece6ac><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" data-v-7cece6ac data-v-d0ee0df2 data-v-55b931a0><span class="check" data-v-55b931a0><span class="icon" data-v-55b931a0><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-d0ee0df2><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-d0ee0df2><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-45c9f423 data-v-5484e669><span class="container" data-v-5484e669><span class="top" data-v-5484e669></span><span class="middle" data-v-5484e669></span><span class="bottom" data-v-5484e669></span></span></button></div></div></div><!----></header><div class="VPLocalNav" data-v-058b7495 data-v-f623cd72><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-f623cd72><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-f623cd72><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-f623cd72>Menu</span></button><a class="top-link" href="#" data-v-f623cd72> Return to top </a></div><aside class="VPSidebar" data-v-058b7495 data-v-3b8ec0c7><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-3b8ec0c7><span class="visually-hidden" id="sidebar-aria-label" data-v-3b8ec0c7> Sidebar Navigation </span><!--[--><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Basic</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/button/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Button</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/check-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>CheckBox</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/radio/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Radio</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/progress-bar/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ProgressBar</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/progress-ring/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ProgressRing</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/toggle-switch/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ToggleSwitch</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/img/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Img</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/text-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>TextBox</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/combo-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ComboBox</span><!--]--><!----></a><!--]--></div></section></div><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Global</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/message-bar/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>MessageBar</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/info-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>InfoBox</span><!--]--><!----></a><!--]--></div></section></div><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Advance</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/color-picker/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ColorPicker</span><!--]--><!----></a><!--]--></div></section></div><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-058b7495 data-v-564173e9><div class="VPDoc has-sidebar" data-v-564173e9 data-v-32b7ddf4><div class="container" data-v-32b7ddf4><div class="aside" data-v-32b7ddf4><div class="aside-curtain" data-v-32b7ddf4></div><div class="aside-container" data-v-32b7ddf4><div class="aside-content" data-v-32b7ddf4><div class="VPDocAside" data-v-32b7ddf4 data-v-35c1bae1><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline has-outline" data-v-35c1bae1 data-v-123cce62><div class="content" data-v-123cce62><div class="outline-marker" data-v-123cce62></div><div class="outline-title" data-v-123cce62>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-123cce62><span class="visually-hidden" id="doc-outline-aria-label" data-v-123cce62> Table of Contents for current page </span><ul class="root" data-v-123cce62><!--[--><li style="" data-v-123cce62><a class="outline-link" href="#properties" data-v-123cce62>Properties</a><!----></li><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-35c1bae1></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-32b7ddf4><div class="content-container" data-v-32b7ddf4><!--[--><!--]--><main class="main" data-v-32b7ddf4><div style="position:relative;" class="vp-doc _VFluent3_guide_components_check-box_properties" data-v-32b7ddf4><div><h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">background</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">background</td></tr><tr><td style="text-align:center;">border-color</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">borderColor</td></tr><tr><td style="text-align:center;">border-width</td><td style="text-align:center;">[number, string]</td><td style="text-align:center;">No</td><td style="text-align:center;">1.5</td><td style="text-align:center;">border width</td></tr><tr><td style="text-align:center;">box-side</td><td style="text-align:center;">[&#39;start&#39;, &#39;end&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">start</td><td style="text-align:center;">position</td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">disabled</td></tr><tr><td style="text-align:center;">foreground</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">foreground</td></tr><tr><td style="text-align:center;">hover-color</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">false status hover color</td></tr><tr><td style="text-align:center;">lang</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">i18n</td></tr><tr><td style="text-align:center;">model-value</td><td style="text-align:center;">[boolean, null]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">value, null means indeterminate</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">[&#39;light&#39;, &#39;dark&#39;, &#39;global&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&quot;global&quot;</td><td style="text-align:center;">theme</td></tr></tbody></table></div></div></main><footer class="VPDocFooter" data-v-32b7ddf4 data-v-cfaa3a6c><div class="edit-info" data-v-cfaa3a6c><!----><!----></div><div class="prev-next" data-v-cfaa3a6c><div class="pager" data-v-cfaa3a6c><!----></div><div class="pager" data-v-cfaa3a6c><a class="pager-link next" href="/VFluent3/guide/components/button/" data-v-cfaa3a6c><span class="desc" data-v-cfaa3a6c>Next page</span><span class="title" data-v-cfaa3a6c>Button</span></a></div></div></footer><!--[--><!--]--></div></div></div></div></div><footer class="VPFooter has-sidebar" data-v-058b7495 data-v-a6c8dde4><div class="container" data-v-a6c8dde4><p class="message" data-v-a6c8dde4>MIT Licensed</p><p class="copyright" data-v-a6c8dde4>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
-    <script>__VP_HASH_MAP__ = JSON.parse("{\"guide_components_button_emits.md\":\"d682bf18\",\"guide_components_button_index.md\":\"23a8eb54\",\"guide_components_button_properties.md\":\"cd4004b6\",\"guide_components_check-box_emits.md\":\"31609794\",\"guide_components_check-box_index.md\":\"32046814\",\"guide_components_check-box_properties.md\":\"8f33ac0c\",\"guide_components_color-picker_emits.md\":\"00983cd0\",\"guide_components_color-picker_index.md\":\"b2d62612\",\"guide_components_color-picker_properties.md\":\"5466ba72\",\"guide_components_combo-box_emits.md\":\"d5ffda50\",\"guide_components_combo-box_index.md\":\"1c4364f5\",\"guide_components_combo-box_properties.md\":\"2e1d6060\",\"guide_components_img_emits.md\":\"6237adb4\",\"guide_components_img_index.md\":\"fa51a3a1\",\"guide_components_img_properties.md\":\"8d321b5e\",\"guide_components_info-box_emits.md\":\"c2e71eec\",\"guide_components_info-box_index.md\":\"06175fed\",\"guide_components_info-box_properties.md\":\"314dbb00\",\"guide_components_message-bar_emits.md\":\"e89a5a22\",\"guide_components_message-bar_index.md\":\"3f0b01d6\",\"guide_components_message-bar_properties.md\":\"ee3838d9\",\"guide_components_progress-bar_emits.md\":\"5b611e3b\",\"guide_components_progress-bar_index.md\":\"689c3241\",\"guide_components_progress-bar_properties.md\":\"39af7fb2\",\"guide_components_progress-ring_emits.md\":\"67e4644e\",\"guide_components_progress-ring_index.md\":\"9a33542b\",\"guide_components_progress-ring_properties.md\":\"c897c4bb\",\"guide_components_radio_emits.md\":\"28506857\",\"guide_components_radio_index.md\":\"e5a479ce\",\"guide_components_radio_properties.md\":\"f8e55d2f\",\"guide_components_text-box_emits.md\":\"0bf89ef8\",\"guide_components_text-box_index.md\":\"7ccfc637\",\"guide_components_text-box_properties.md\":\"aab3a89e\",\"guide_components_toggle-switch_emits.md\":\"5146435f\",\"guide_components_toggle-switch_index.md\":\"8be48081\",\"guide_components_toggle-switch_properties.md\":\"54984c3a\",\"guide_index.md\":\"e3dca1d7\",\"index.md\":\"1e9773d5\"}")</script>
-    <script type="module" async src="/VFluent3/assets/app.d60fa8c3.js"></script>
-    
-  </body>
-</html>
\ No newline at end of file
diff --git a/guide/components/collapse/index.html b/guide/components/collapse/index.html
new file mode 100644
index 0000000..7c2c51a
--- /dev/null
+++ b/guide/components/collapse/index.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>Collapse | vfluent3</title>
+    <meta name="description" content="A Vue3 component library for Fluent UI">
+    <meta name="generator" content="VitePress v1.0.0-rc.45">
+    <link rel="preload stylesheet" href="/VFluent3/assets/style.BabQegKX.css" as="style">
+    
+    <script type="module" src="/VFluent3/assets/app.CSutcJ2E.js"></script>
+    <link rel="preload" href="/VFluent3/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/framework.DvIFzl91.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/theme.CgqFBnN_.js">
+    <link rel="modulepreload" href="/VFluent3/assets/guide_components_collapse_index.md.N9Iu5-2v.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-19c990f1><div class="wrapper" data-v-19c990f1><div class="container" data-v-19c990f1><div class="title" data-v-19c990f1><div class="VPNavBarTitle has-sidebar" data-v-19c990f1 data-v-ab179fa1><a class="title" href="/VFluent3/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>VFluent3</span><!--[--><!--]--></a></div></div><div class="content" data-v-19c990f1><div class="content-body" data-v-19c990f1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-19c990f1><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-19c990f1 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Guide</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-19c990f1 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-19c990f1 data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-19c990f1 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-19c990f1><div class="divider-line" data-v-19c990f1></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-d2ecc192><button data-v-d2ecc192>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-575e6a36><div class="curtain" data-v-575e6a36></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-575e6a36><span class="visually-hidden" id="sidebar-aria-label" data-v-575e6a36> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Basic input</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/button/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/check-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CheckBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/combobox/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Combobox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/details-list/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DetailsList</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drop-down/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DropDown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio-group/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RadioGroup</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/rating-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RatingControl</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/slider/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/toggle-switch/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ToggleSwitch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tag/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Tag</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Collections</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/flip-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>FlipView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/list-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ListView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tree-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TreeView</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Date & Time</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarDatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/time-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TimePicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Dialogs & flyouts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/callout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Callout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible has-active" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Layout</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/collapse/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Collapse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/expander/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Expander</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drawer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Panel</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Media</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/image/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Img</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ImgBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/persona/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Persona</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Menu & toolbars</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/command-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CommandBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/menu-flyout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MenuFlyout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/swipe-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SwipeControl</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Navigation</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/breadcrumb/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationPanel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pivot/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pivot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pagination/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pagination</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Scrolling</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/infinite-scroll-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfiniteScrollView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/scroll-story/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ScrollStory</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Status & info</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/badge/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-ring/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressRing</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Styles</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/animated-icon/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>AnimatedIcon</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/icon-element/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>IconElement</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/reveal-container/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RevealContainer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/shimmer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Shimmer</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Text</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/search-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SearchBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-field/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextField</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/verify-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>VerifyBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Windowing</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/web-window/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>WebWindow</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Global</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Advance</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-935f8a84><div class="content" data-v-935f8a84><div class="outline-marker" data-v-935f8a84></div><div class="outline-title" role="heading" aria-level="2" data-v-935f8a84>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-935f8a84><span class="visually-hidden" id="doc-outline-aria-label" data-v-935f8a84> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-935f8a84 data-v-b933a997><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _VFluent3_guide_components_collapse_" data-v-39a288b8><div><h3 id="collapse-demo" tabindex="-1">Collapse-DEMO <a class="header-anchor" href="#collapse-demo" aria-label="Permalink to &quot;Collapse-DEMO&quot;">​</a></h3><hr><div><!----></div><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Collapse</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;div style=&quot;position: relative; height: 500px; background: black; transition: all 0.3s;&quot;&gt;&lt;/div&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Collapse</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>Disabled Collapse</p><div><!----></div><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Collapse</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">disabledCollapse</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;div style=&quot;position: relative; height: 500px; background: black; transition: all 0.3s;&quot;&gt;&lt;/div&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Collapse</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>Extension</p><div><!----></div><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Collapse</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">disabledCollapse</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;template v-slot:extension&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;fv-button&gt;Operation&lt;/fv-button&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Collapse</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h3 id="collapse-customize-background" tabindex="-1">Collapse-Customize Background <a class="header-anchor" href="#collapse-customize-background" aria-label="Permalink to &quot;Collapse-Customize Background&quot;">​</a></h3><hr><div><!----></div><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Collapse</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rgba(0, 98, 158, 1)&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;div style=&quot;position: relative; height: 500px; background: black; transition: all 0.3s;&quot;&gt;&lt;/div&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Collapse</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="collapse-dark-theme" tabindex="-1">Collapse-Dark Theme <a class="header-anchor" href="#collapse-dark-theme" aria-label="Permalink to &quot;Collapse-Dark Theme&quot;">​</a></h3><hr><div><!----></div><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Collapse</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;dark&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;div style=&quot;position: relative; height: 500px; background: whitesmoke; transition: all 0.3s;&quot;&gt;&lt;/div&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Collapse</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">value</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否展开 <code>Collapse</code></td></tr><tr><td style="text-align:center;">icon</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">CollapseMenu</td><td style="text-align:center;">Icon with Fabric-Icon</td></tr><tr><td style="text-align:center;">title</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">Title of Collapse.</td><td style="text-align:center;">标题</td></tr><tr><td style="text-align:center;">content</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">Content information of Collapse.</td><td style="text-align:center;">副标题信息</td></tr><tr><td style="text-align:center;">background</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">客制化 <code>Collapse</code> 背景</td></tr><tr><td style="text-align:center;">defaultHeight</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">70</td><td style="text-align:center;">默认高度</td></tr><tr><td style="text-align:center;">maxHeight</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">300</td><td style="text-align:center;">展开最大高度</td></tr><tr><td style="text-align:center;">disabledCollapse</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">禁用展开 <code>Collapse</code></td></tr><tr><td style="text-align:center;">visibleOverflow</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">true</td><td style="text-align:center;">在禁用展开 <code>Collapse</code> , 允许overflow内容显示</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">system</td><td style="text-align:center;">主题样式, 包含<code>light</code>, <code>dark</code>, <code>system</code>, <code>custom</code>几种样式</td></tr></tbody></table><h3 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to &quot;Events&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">事件名(Name)</th><th style="text-align:center;">参数类型(args)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">item-click</td><td style="text-align:center;">boolean</td><td style="text-align:center;">返回 <code>Collapse</code> 属性 <code>value</code> 的值</td></tr><tr><td style="text-align:center;">descrption-click</td><td style="text-align:center;">N/A</td><td style="text-align:center;">描述框点击</td></tr><tr><td style="text-align:center;">icon-click</td><td style="text-align:center;">N/A</td><td style="text-align:center;">右侧图标点击</td></tr><tr><td style="text-align:center;">left-icon-click</td><td style="text-align:center;">N/A</td><td style="text-align:center;">左侧图标点击</td></tr></tbody></table><h3 id="slot" tabindex="-1">Slot <a class="header-anchor" href="#slot" aria-label="Permalink to &quot;Slot&quot;">​</a></h3><hr><ol><li>Default</li></ol><p>定义下拉内容</p><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Collapse</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rgba(0, 98, 158, 1)&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;div style=&quot;position: relative; height: 500px; background: black; transition: all 0.3s;&quot;&gt;&lt;/div&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Collapse</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ol start="2"><li>icon</li></ol><p>自定义 <code>Collapse</code> 显示图标</p><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">icon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">i</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ms-Icon&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">`ms-Icon--${</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">.</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">icon</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">}`</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">i</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ol start="3"><li>container</li></ol><p>自定义内容, 如果只需要单独修改标题 <code>title</code> 或副标题 <code>content</code> , 可使用下面的 <code>template</code> 进行自定义</p><ul><li>title: 标题</li><li>contnet: 副标题</li></ul><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">container</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;collapse-title&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;{{ x.title }}&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;collapse-info&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;{{ x.content }}&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><ol start="4"><li>Extension</li></ol><p>扩展操作内容</p><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">extension</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Operation&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ol start="5"><li>title</li></ol><p>自定义标题</p><ul><li>title: 标题</li></ul><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;collapse-title&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;{{ x.title }}&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ol start="6"><li>content</li></ol><p>自定义副标题</p><ul><li>content: 副标题</li></ul><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;collapse-info&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;{{ x.content }}&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ol start="7"><li>expand-icon</li></ol><p>自定义展开状态图标</p><ul><li>value: 当前是否展开</li><li>disabledCollaspe: 是否禁用展开</li></ul><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">expand-icon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">i</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">        v-show</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x.value</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">        class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ms-Icon ms-Icon--ChevronUpMed&quot;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">i</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">i</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">        v-show</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">!</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x.value </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&amp;&amp;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> !</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x.disabledCollapse</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">        class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ms-Icon ms-Icon--ChevronDownMed&quot;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">i</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">i</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">        v-show</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">!</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x.value </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&amp;&amp;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> x.disabledCollapse</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">        class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ms-Icon ms-Icon--ChevronRightMed&quot;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">i</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-09de1c0f><!--[--><!--]--><!----><nav class="prev-next" data-v-09de1c0f><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link prev" href="/VFluent3/guide/components/info-box/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Previous page</span><span class="title" data-v-09de1c0f>InfoBox</span><!--]--></a></div><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link next" href="/VFluent3/guide/components/expander/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Next page</span><span class="title" data-v-09de1c0f>Expander</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>MIT Licensed</p><p class="copyright" data-v-e315a0ad>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_calendar-date-picker_properties.md\":\"DXRjmMG8\",\"guide_components_image_properties.md\":\"DGanRzCb\",\"guide_components_img-box_index.md\":\"DYtggkf_\",\"guide_components_img_emits.md\":\"BlE7jvZQ\",\"guide_components_img_index.md\":\"Bm9FiuU4\",\"guide_components_icon-element_properties.md\":\"8Oakruwc\",\"guide_components_img_properties.md\":\"B42YSocI\",\"guide_components_drawer_index.md\":\"D_vpnCpE\",\"guide_components_verify-box_emits.md\":\"DT17Iazx\",\"guide_components_calendar-date-picker_index.md\":\"BdHjrurh\",\"guide_components_rating-control_index.md\":\"Q9l5Lfrr\",\"guide_components_rating-control_properties.md\":\"DKprnl0i\",\"guide_components_calendar-view_index.md\":\"zdoRYVx1\",\"guide_components_animated-icon_index.md\":\"yZDMzCFe\",\"guide_components_calendar-date-picker_emits.md\":\"D5OkfR8j\",\"guide_components_badge_index.md\":\"Bb4crrJn\",\"guide_components_image_index.md\":\"B7X6cWAZ\",\"guide_components_slider_index.md\":\"C7zZ2d-W\",\"guide_components_radio-group_index.md\":\"CVfh3h5H\",\"guide_components_swipe-control_index.md\":\"DwrDVPc1\",\"guide_components_color-picker_emits.md\":\"BHDXVtBQ\",\"guide_components_radio_index.md\":\"90as5QGp\",\"guide_components_pagination_properties.md\":\"JUAPvcTL\",\"guide_components_persona_properties.md\":\"DUTPhPMp\",\"guide_components_combo-box_emits.md\":\"Dh5R-qEv\",\"guide_components_pivot_emits.md\":\"BTJPgNpy\",\"guide_components_pagination_index.md\":\"CnW2zAht\",\"guide_components_flip-view_properties.md\":\"BqZ4hhgU\",\"guide_components_icon-element_emits.md\":\"D5TXFdTZ\",\"guide_components_flip-view_index.md\":\"DefnDOv6\",\"guide_components_navigation-panel_index.md\":\"6mO__sSK\",\"guide_components_rating-control_emits.md\":\"blvomSeC\",\"guide_components_icon-element_index.md\":\"DQ8K7JNn\",\"guide_components_navigation-view_index.md\":\"4AQRiz1k\",\"guide_components_toggle-switch_emits.md\":\"CLGzrNut\",\"guide_components_toggle-switch_index.md\":\"61en_q9-\",\"guide_components_scroll-story_index.md\":\"Vpgb1HSV\",\"guide_components_reveal-container_index.md\":\"Cut2r4tV\",\"guide_components_search-box_emits.md\":\"-d9sWNNt\",\"guide_components_search-box_properties.md\":\"DEKFfPFw\",\"guide_components_shimmer_emits.md\":\"CTMInlI3\",\"guide_components_tag_index.md\":\"BhhxkcHn\",\"guide_components_search-box_index.md\":\"DgkrY0oY\",\"guide_components_shimmer_index.md\":\"iZlHuTxw\",\"guide_components_shimmer_properties.md\":\"CdkU1o6H\",\"guide_components_tree-view_index.md\":\"CUrwan4q\",\"guide_components_text-field_index.md\":\"CXSimJtj\",\"guide_components_text-box_index.md\":\"C5moAPfB\",\"guide_components_progress-ring_properties.md\":\"Dc08Uiff\",\"guide_components_toggle-switch_properties.md\":\"tFppK_IS\",\"guide_components_radio-group_emits.md\":\"cEDzKVnN\",\"guide_components_collapse_index.md\":\"N9Iu5-2v\",\"guide_components_image_emits.md\":\"lmlz2xJd\",\"guide_components_callout_index.md\":\"D9RU33w6\",\"guide_components_pivot_index.md\":\"B_vwQL-5\",\"guide_components_command-bar_index.md\":\"Cp4_rrGB\",\"guide_components_pagination_emits.md\":\"Dng86A22\",\"guide_components_button_index.md\":\"7sqT2MQP\",\"guide_components_info-box_properties.md\":\"BI7Nvk-E\",\"guide_components_drop-down_emits.md\":\"BE95TdKW\",\"guide_components_expander_index.md\":\"BKgcUJzQ\",\"guide_components_message-bar_index.md\":\"AEtAWlF8\",\"guide_components_menu-flyout_index.md\":\"Csa7irPj\",\"guide_components_panel_index.md\":\"CsTu0bXo\",\"guide_components_panel_properties.md\":\"BaxoCYKq\",\"guide_components_progress-bar_emits.md\":\"BcwXUpsF\",\"guide_components_progress-bar_properties.md\":\"TxiS9ZMA\",\"guide_components_progress-ring_emits.md\":\"D2Y6hIZ9\",\"guide_components_color-picker_index.md\":\"DCc4ixcU\",\"guide_components_progress-ring_index.md\":\"CPb-ZEPE\",\"guide_components_color-picker_properties.md\":\"wcXK29Vl\",\"guide_components_time-picker_index.md\":\"CQJdRRaG\",\"guide_components_drop-down_properties.md\":\"Bwlkpr1q\",\"guide_components_infinite-scroll-view_index.md\":\"yAuD807x\",\"guide_components_check-box_index.md\":\"FYgdu4oq\",\"guide_components_progress-bar_index.md\":\"D8vHQw5V\",\"guide_components_combo-box_index.md\":\"DTyu3eNd\",\"guide_components_info-box_emits.md\":\"DlEwpkkq\",\"guide_components_drop-down_index.md\":\"BZzJZQWq\",\"guide_components_list-view_index.md\":\"BoYvMzb0\",\"guide_components_verify-box_properties.md\":\"CW6W8fFf\",\"guide_components_verify-box_index.md\":\"DwSB40wR\",\"guide_index.md\":\"Bndlt3sL\",\"guide_components_web-window_index.md\":\"Bxc8vEeI\",\"index.md\":\"MTRqI42u\",\"guide_components_combo-box_properties.md\":\"AWfHzV6x\",\"guide_components_combobox_emits.md\":\"CGB6WLt8\",\"guide_components_combobox_properties.md\":\"Bja0hMou\",\"guide_components_details-list_index.md\":\"CcgOCIyt\",\"guide_components_info-box_index.md\":\"vXh-_DsL\",\"guide_components_combobox_index.md\":\"CsPkY6YB\",\"guide_components_date-picker_index.md\":\"12vmUIup\",\"guide_components_flip-view_emits.md\":\"DCheHjDj\",\"guide_components_panel_emits.md\":\"DG0REDq8\",\"guide_components_breadcrumb_index.md\":\"DyDm7PeP\",\"guide_components_radio-group_properties.md\":\"BnPxoKsQ\",\"guide_components_persona_emits.md\":\"CnsDPKRU\",\"guide_components_pivot_properties.md\":\"BmoLpPi1\",\"guide_components_persona_index.md\":\"DT00jby4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vfluent3\",\"description\":\"A Vue3 component library for Fluent UI\",\"base\":\"/VFluent3/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"VFluent3\",\"footer\":{\"message\":\"MIT Licensed\",\"copyright\":\"Copyright © Creator SN - 2022\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/\"}],\"sidebar\":[{\"text\":\"Basic input\",\"collapsed\":true,\"items\":[{\"text\":\"Button\",\"link\":\"/guide/components/button/\"},{\"text\":\"CheckBox\",\"link\":\"/guide/components/check-box/\"},{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"},{\"text\":\"Combobox\",\"link\":\"/guide/components/combobox/\"},{\"text\":\"DetailsList\",\"link\":\"/guide/components/details-list/\"},{\"text\":\"DropDown\",\"link\":\"/guide/components/drop-down/\"},{\"text\":\"Radio\",\"link\":\"/guide/components/radio/\"},{\"text\":\"RadioGroup\",\"link\":\"/guide/components/radio-group/\"},{\"text\":\"RatingControl\",\"link\":\"/guide/components/rating-control/\"},{\"text\":\"Slider\",\"link\":\"/guide/components/slider/\"},{\"text\":\"ToggleSwitch\",\"link\":\"/guide/components/toggle-switch/\"},{\"text\":\"Tag\",\"link\":\"/guide/components/tag/\"}]},{\"text\":\"Collections\",\"collapsed\":true,\"items\":[{\"text\":\"FlipView\",\"link\":\"/guide/components/flip-view/\"},{\"text\":\"ListView\",\"link\":\"/guide/components/list-view/\"},{\"text\":\"TreeView\",\"link\":\"/guide/components/tree-view/\"}]},{\"text\":\"Date & Time\",\"collapsed\":true,\"items\":[{\"text\":\"CalendarDatePicker\",\"link\":\"/guide/components/calendar-date-picker/\"},{\"text\":\"CalendarView\",\"link\":\"/guide/components/calendar-view/\"},{\"text\":\"DatePicker\",\"link\":\"/guide/components/date-picker/\"},{\"text\":\"TimePicker\",\"link\":\"/guide/components/time-picker/\"}]},{\"text\":\"Dialogs & flyouts\",\"collapsed\":true,\"items\":[{\"text\":\"Callout\",\"link\":\"/guide/components/callout/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Layout\",\"collapsed\":true,\"items\":[{\"text\":\"Collapse\",\"link\":\"/guide/components/collapse/\"},{\"text\":\"Expander\",\"link\":\"/guide/components/expander/\"},{\"text\":\"Drawer\",\"link\":\"/guide/components/drawer/\"},{\"text\":\"Panel\",\"link\":\"/guide/components/panel/\"}]},{\"text\":\"Media\",\"collapsed\":true,\"items\":[{\"text\":\"Image\",\"link\":\"/guide/components/image/\"},{\"text\":\"Img\",\"link\":\"/guide/components/img/\"},{\"text\":\"ImgBox\",\"link\":\"/guide/components/img-box/\"},{\"text\":\"Persona\",\"link\":\"/guide/components/persona/\"}]},{\"text\":\"Menu & toolbars\",\"collapsed\":true,\"items\":[{\"text\":\"CommandBar\",\"link\":\"/guide/components/command-bar/\"},{\"text\":\"MenuFlyout\",\"link\":\"/guide/components/menu-flyout/\"},{\"text\":\"SwipeControl\",\"link\":\"/guide/components/swipe-control/\"}]},{\"text\":\"Navigation\",\"collapsed\":true,\"items\":[{\"text\":\"Breadcrumb\",\"link\":\"/guide/components/breadcrumb/\"},{\"text\":\"NavigationPanel\",\"link\":\"/guide/components/navigation-panel/\"},{\"text\":\"NavigationView\",\"link\":\"/guide/components/navigation-view/\"},{\"text\":\"Pivot\",\"link\":\"/guide/components/pivot/\"},{\"text\":\"Pagination\",\"link\":\"/guide/components/pagination/\"}]},{\"text\":\"Scrolling\",\"collapsed\":true,\"items\":[{\"text\":\"InfiniteScrollView\",\"link\":\"/guide/components/infinite-scroll-view/\"},{\"text\":\"ScrollStory\",\"link\":\"/guide/components/scroll-story/\"}]},{\"text\":\"Status & info\",\"collapsed\":true,\"items\":[{\"text\":\"Badge\",\"link\":\"/guide/components/badge/\"},{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"ProgressBar\",\"link\":\"/guide/components/progress-bar/\"},{\"text\":\"ProgressRing\",\"link\":\"/guide/components/progress-ring/\"}]},{\"text\":\"Styles\",\"collapsed\":true,\"items\":[{\"text\":\"AnimatedIcon\",\"link\":\"/guide/components/animated-icon/\"},{\"text\":\"IconElement\",\"link\":\"/guide/components/icon-element/\"},{\"text\":\"RevealContainer\",\"link\":\"/guide/components/reveal-container/\"},{\"text\":\"Shimmer\",\"link\":\"/guide/components/shimmer/\"}]},{\"text\":\"Text\",\"collapsed\":true,\"items\":[{\"text\":\"SearchBox\",\"link\":\"/guide/components/search-box/\"},{\"text\":\"TextBox\",\"link\":\"/guide/components/text-box/\"},{\"text\":\"TextField\",\"link\":\"/guide/components/text-field/\"},{\"text\":\"VerifyBox\",\"link\":\"/guide/components/verify-box/\"}]},{\"text\":\"Windowing\",\"collapsed\":true,\"items\":[{\"text\":\"WebWindow\",\"link\":\"/guide/components/web-window/\"}]},{\"text\":\"Global\",\"collapsed\":true,\"items\":[{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Advance\",\"collapsed\":true,\"items\":[{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git a/guide/components/color-picker/emits.html b/guide/components/color-picker/emits.html
index d236b3a..d4e789d 100644
--- a/guide/components/color-picker/emits.html
+++ b/guide/components/color-picker/emits.html
@@ -1,20 +1,24 @@
 <!DOCTYPE html>
-<html lang="en-US">
+<html lang="en-US" dir="ltr">
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>Emits | vfluent3</title>
+    <title>vfluent3</title>
     <meta name="description" content="A Vue3 component library for Fluent UI">
-    <link rel="stylesheet" href="/VFluent3/assets/style.0a1d87af.css">
-    <link rel="modulepreload" href="/VFluent3/assets/app.d60fa8c3.js">
-    <link rel="modulepreload" href="/VFluent3/assets/guide_components_color-picker_emits.md.00983cd0.lean.js">
+    <meta name="generator" content="VitePress v1.0.0-rc.45">
+    <link rel="preload stylesheet" href="/VFluent3/assets/style.BabQegKX.css" as="style">
     
-    <script>(()=>{const e=localStorage.getItem("vitepress-theme-appearance"),a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script type="module" src="/VFluent3/assets/app.CSutcJ2E.js"></script>
+    <link rel="preload" href="/VFluent3/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/framework.DvIFzl91.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/theme.CgqFBnN_.js">
+    <link rel="modulepreload" href="/VFluent3/assets/guide_components_color-picker_emits.md.BHDXVtBQ.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
   </head>
   <body>
-    <div id="app"><div class="Layout" data-v-058b7495><!--[--><!--]--><!--[--><span tabindex="-1" data-v-bea91388></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-bea91388> Skip to content </a><!--]--><!----><header class="VPNav" data-v-058b7495 data-v-2a0a2738><div class="VPNavBar has-sidebar" data-v-2a0a2738 data-v-45c9f423><div class="container" data-v-45c9f423><div class="VPNavBarTitle has-sidebar" data-v-45c9f423 data-v-011600ce><a class="title" href="/VFluent3/" data-v-011600ce><!----><!--[-->VFluent3<!--]--></a></div><div class="content" data-v-45c9f423><!----><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-45c9f423 data-v-4da4371d><span id="main-nav-aria-label" class="visually-hidden" data-v-4da4371d>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" data-v-4da4371d data-v-66f8d518 data-v-4d08dd3a><!--[-->Home<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" data-v-4da4371d data-v-66f8d518 data-v-4d08dd3a><!--[-->Guide<!--]--><!----></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-45c9f423 data-v-bf1c94ca><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" data-v-bf1c94ca data-v-d0ee0df2 data-v-55b931a0><span class="check" data-v-55b931a0><span class="icon" data-v-55b931a0><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-d0ee0df2><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-d0ee0df2><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-45c9f423 data-v-7cece6ac data-v-37af1650><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-37af1650><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-37af1650><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-37af1650><div class="VPMenu" data-v-37af1650 data-v-17dc081b><!----><!--[--><!--[--><!----><div class="group" data-v-7cece6ac><div class="item appearance" data-v-7cece6ac><p class="label" data-v-7cece6ac>Appearance</p><div class="appearance-action" data-v-7cece6ac><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" data-v-7cece6ac data-v-d0ee0df2 data-v-55b931a0><span class="check" data-v-55b931a0><span class="icon" data-v-55b931a0><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-d0ee0df2><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-d0ee0df2><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-45c9f423 data-v-5484e669><span class="container" data-v-5484e669><span class="top" data-v-5484e669></span><span class="middle" data-v-5484e669></span><span class="bottom" data-v-5484e669></span></span></button></div></div></div><!----></header><div class="VPLocalNav" data-v-058b7495 data-v-f623cd72><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-f623cd72><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-f623cd72><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-f623cd72>Menu</span></button><a class="top-link" href="#" data-v-f623cd72> Return to top </a></div><aside class="VPSidebar" data-v-058b7495 data-v-3b8ec0c7><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-3b8ec0c7><span class="visually-hidden" id="sidebar-aria-label" data-v-3b8ec0c7> Sidebar Navigation </span><!--[--><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Basic</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/button/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Button</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/check-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>CheckBox</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/radio/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Radio</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/progress-bar/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ProgressBar</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/progress-ring/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ProgressRing</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/toggle-switch/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ToggleSwitch</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/img/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Img</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/text-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>TextBox</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/combo-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ComboBox</span><!--]--><!----></a><!--]--></div></section></div><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Global</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/message-bar/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>MessageBar</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/info-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>InfoBox</span><!--]--><!----></a><!--]--></div></section></div><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Advance</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/color-picker/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ColorPicker</span><!--]--><!----></a><!--]--></div></section></div><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-058b7495 data-v-564173e9><div class="VPDoc has-sidebar" data-v-564173e9 data-v-32b7ddf4><div class="container" data-v-32b7ddf4><div class="aside" data-v-32b7ddf4><div class="aside-curtain" data-v-32b7ddf4></div><div class="aside-container" data-v-32b7ddf4><div class="aside-content" data-v-32b7ddf4><div class="VPDocAside" data-v-32b7ddf4 data-v-35c1bae1><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline has-outline" data-v-35c1bae1 data-v-123cce62><div class="content" data-v-123cce62><div class="outline-marker" data-v-123cce62></div><div class="outline-title" data-v-123cce62>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-123cce62><span class="visually-hidden" id="doc-outline-aria-label" data-v-123cce62> Table of Contents for current page </span><ul class="root" data-v-123cce62><!--[--><li style="" data-v-123cce62><a class="outline-link" href="#emits" data-v-123cce62>Emits</a><!----></li><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-35c1bae1></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-32b7ddf4><div class="content-container" data-v-32b7ddf4><!--[--><!--]--><main class="main" data-v-32b7ddf4><div style="position:relative;" class="vp-doc _VFluent3_guide_components_color-picker_emits" data-v-32b7ddf4><div><h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">update:model-value</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">v-model</td></tr></tbody></table></div></div></main><footer class="VPDocFooter" data-v-32b7ddf4 data-v-cfaa3a6c><div class="edit-info" data-v-cfaa3a6c><!----><!----></div><div class="prev-next" data-v-cfaa3a6c><div class="pager" data-v-cfaa3a6c><!----></div><div class="pager" data-v-cfaa3a6c><a class="pager-link next" href="/VFluent3/guide/components/button/" data-v-cfaa3a6c><span class="desc" data-v-cfaa3a6c>Next page</span><span class="title" data-v-cfaa3a6c>Button</span></a></div></div></footer><!--[--><!--]--></div></div></div></div></div><footer class="VPFooter has-sidebar" data-v-058b7495 data-v-a6c8dde4><div class="container" data-v-a6c8dde4><p class="message" data-v-a6c8dde4>MIT Licensed</p><p class="copyright" data-v-a6c8dde4>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
-    <script>__VP_HASH_MAP__ = JSON.parse("{\"guide_components_button_emits.md\":\"d682bf18\",\"guide_components_button_index.md\":\"23a8eb54\",\"guide_components_button_properties.md\":\"cd4004b6\",\"guide_components_check-box_emits.md\":\"31609794\",\"guide_components_check-box_index.md\":\"32046814\",\"guide_components_check-box_properties.md\":\"8f33ac0c\",\"guide_components_color-picker_emits.md\":\"00983cd0\",\"guide_components_color-picker_index.md\":\"b2d62612\",\"guide_components_color-picker_properties.md\":\"5466ba72\",\"guide_components_combo-box_emits.md\":\"d5ffda50\",\"guide_components_combo-box_index.md\":\"1c4364f5\",\"guide_components_combo-box_properties.md\":\"2e1d6060\",\"guide_components_img_emits.md\":\"6237adb4\",\"guide_components_img_index.md\":\"fa51a3a1\",\"guide_components_img_properties.md\":\"8d321b5e\",\"guide_components_info-box_emits.md\":\"c2e71eec\",\"guide_components_info-box_index.md\":\"06175fed\",\"guide_components_info-box_properties.md\":\"314dbb00\",\"guide_components_message-bar_emits.md\":\"e89a5a22\",\"guide_components_message-bar_index.md\":\"3f0b01d6\",\"guide_components_message-bar_properties.md\":\"ee3838d9\",\"guide_components_progress-bar_emits.md\":\"5b611e3b\",\"guide_components_progress-bar_index.md\":\"689c3241\",\"guide_components_progress-bar_properties.md\":\"39af7fb2\",\"guide_components_progress-ring_emits.md\":\"67e4644e\",\"guide_components_progress-ring_index.md\":\"9a33542b\",\"guide_components_progress-ring_properties.md\":\"c897c4bb\",\"guide_components_radio_emits.md\":\"28506857\",\"guide_components_radio_index.md\":\"e5a479ce\",\"guide_components_radio_properties.md\":\"f8e55d2f\",\"guide_components_text-box_emits.md\":\"0bf89ef8\",\"guide_components_text-box_index.md\":\"7ccfc637\",\"guide_components_text-box_properties.md\":\"aab3a89e\",\"guide_components_toggle-switch_emits.md\":\"5146435f\",\"guide_components_toggle-switch_index.md\":\"8be48081\",\"guide_components_toggle-switch_properties.md\":\"54984c3a\",\"guide_index.md\":\"e3dca1d7\",\"index.md\":\"1e9773d5\"}")</script>
-    <script type="module" async src="/VFluent3/assets/app.d60fa8c3.js"></script>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-19c990f1><div class="wrapper" data-v-19c990f1><div class="container" data-v-19c990f1><div class="title" data-v-19c990f1><div class="VPNavBarTitle has-sidebar" data-v-19c990f1 data-v-ab179fa1><a class="title" href="/VFluent3/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>VFluent3</span><!--[--><!--]--></a></div></div><div class="content" data-v-19c990f1><div class="content-body" data-v-19c990f1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-19c990f1><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-19c990f1 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Guide</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-19c990f1 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-19c990f1 data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-19c990f1 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-19c990f1><div class="divider-line" data-v-19c990f1></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-d2ecc192><button data-v-d2ecc192>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-575e6a36><div class="curtain" data-v-575e6a36></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-575e6a36><span class="visually-hidden" id="sidebar-aria-label" data-v-575e6a36> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Basic input</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/button/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/check-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CheckBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/combobox/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Combobox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/details-list/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DetailsList</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drop-down/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DropDown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio-group/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RadioGroup</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/rating-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RatingControl</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/slider/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/toggle-switch/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ToggleSwitch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tag/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Tag</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Collections</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/flip-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>FlipView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/list-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ListView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tree-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TreeView</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Date & Time</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarDatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/time-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TimePicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Dialogs & flyouts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/callout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Callout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Layout</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/collapse/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Collapse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/expander/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Expander</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drawer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Panel</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Media</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/image/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Img</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ImgBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/persona/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Persona</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Menu & toolbars</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/command-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CommandBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/menu-flyout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MenuFlyout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/swipe-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SwipeControl</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Navigation</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/breadcrumb/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationPanel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pivot/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pivot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pagination/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pagination</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Scrolling</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/infinite-scroll-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfiniteScrollView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/scroll-story/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ScrollStory</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Status & info</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/badge/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-ring/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressRing</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Styles</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/animated-icon/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>AnimatedIcon</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/icon-element/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>IconElement</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/reveal-container/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RevealContainer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/shimmer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Shimmer</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Text</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/search-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SearchBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-field/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextField</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/verify-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>VerifyBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Windowing</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/web-window/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>WebWindow</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Global</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Advance</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-935f8a84><div class="content" data-v-935f8a84><div class="outline-marker" data-v-935f8a84></div><div class="outline-title" role="heading" aria-level="2" data-v-935f8a84>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-935f8a84><span class="visually-hidden" id="doc-outline-aria-label" data-v-935f8a84> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-935f8a84 data-v-b933a997><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _VFluent3_guide_components_color-picker_emits" data-v-39a288b8><div><h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-label="Permalink to &quot;Emits&quot;">​</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">update:model-value</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">v-model</td></tr></tbody></table></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-09de1c0f><!--[--><!--]--><!----><nav class="prev-next" data-v-09de1c0f><div class="pager" data-v-09de1c0f><!----></div><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link next" href="/VFluent3/guide/components/button/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Next page</span><span class="title" data-v-09de1c0f>Button</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>MIT Licensed</p><p class="copyright" data-v-e315a0ad>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_calendar-date-picker_properties.md\":\"DXRjmMG8\",\"guide_components_image_properties.md\":\"DGanRzCb\",\"guide_components_img-box_index.md\":\"DYtggkf_\",\"guide_components_img_emits.md\":\"BlE7jvZQ\",\"guide_components_img_index.md\":\"Bm9FiuU4\",\"guide_components_icon-element_properties.md\":\"8Oakruwc\",\"guide_components_img_properties.md\":\"B42YSocI\",\"guide_components_drawer_index.md\":\"D_vpnCpE\",\"guide_components_verify-box_emits.md\":\"DT17Iazx\",\"guide_components_calendar-date-picker_index.md\":\"BdHjrurh\",\"guide_components_rating-control_index.md\":\"Q9l5Lfrr\",\"guide_components_rating-control_properties.md\":\"DKprnl0i\",\"guide_components_calendar-view_index.md\":\"zdoRYVx1\",\"guide_components_animated-icon_index.md\":\"yZDMzCFe\",\"guide_components_calendar-date-picker_emits.md\":\"D5OkfR8j\",\"guide_components_badge_index.md\":\"Bb4crrJn\",\"guide_components_image_index.md\":\"B7X6cWAZ\",\"guide_components_slider_index.md\":\"C7zZ2d-W\",\"guide_components_radio-group_index.md\":\"CVfh3h5H\",\"guide_components_swipe-control_index.md\":\"DwrDVPc1\",\"guide_components_color-picker_emits.md\":\"BHDXVtBQ\",\"guide_components_radio_index.md\":\"90as5QGp\",\"guide_components_pagination_properties.md\":\"JUAPvcTL\",\"guide_components_persona_properties.md\":\"DUTPhPMp\",\"guide_components_combo-box_emits.md\":\"Dh5R-qEv\",\"guide_components_pivot_emits.md\":\"BTJPgNpy\",\"guide_components_pagination_index.md\":\"CnW2zAht\",\"guide_components_flip-view_properties.md\":\"BqZ4hhgU\",\"guide_components_icon-element_emits.md\":\"D5TXFdTZ\",\"guide_components_flip-view_index.md\":\"DefnDOv6\",\"guide_components_navigation-panel_index.md\":\"6mO__sSK\",\"guide_components_rating-control_emits.md\":\"blvomSeC\",\"guide_components_icon-element_index.md\":\"DQ8K7JNn\",\"guide_components_navigation-view_index.md\":\"4AQRiz1k\",\"guide_components_toggle-switch_emits.md\":\"CLGzrNut\",\"guide_components_toggle-switch_index.md\":\"61en_q9-\",\"guide_components_scroll-story_index.md\":\"Vpgb1HSV\",\"guide_components_reveal-container_index.md\":\"Cut2r4tV\",\"guide_components_search-box_emits.md\":\"-d9sWNNt\",\"guide_components_search-box_properties.md\":\"DEKFfPFw\",\"guide_components_shimmer_emits.md\":\"CTMInlI3\",\"guide_components_tag_index.md\":\"BhhxkcHn\",\"guide_components_search-box_index.md\":\"DgkrY0oY\",\"guide_components_shimmer_index.md\":\"iZlHuTxw\",\"guide_components_shimmer_properties.md\":\"CdkU1o6H\",\"guide_components_tree-view_index.md\":\"CUrwan4q\",\"guide_components_text-field_index.md\":\"CXSimJtj\",\"guide_components_text-box_index.md\":\"C5moAPfB\",\"guide_components_progress-ring_properties.md\":\"Dc08Uiff\",\"guide_components_toggle-switch_properties.md\":\"tFppK_IS\",\"guide_components_radio-group_emits.md\":\"cEDzKVnN\",\"guide_components_collapse_index.md\":\"N9Iu5-2v\",\"guide_components_image_emits.md\":\"lmlz2xJd\",\"guide_components_callout_index.md\":\"D9RU33w6\",\"guide_components_pivot_index.md\":\"B_vwQL-5\",\"guide_components_command-bar_index.md\":\"Cp4_rrGB\",\"guide_components_pagination_emits.md\":\"Dng86A22\",\"guide_components_button_index.md\":\"7sqT2MQP\",\"guide_components_info-box_properties.md\":\"BI7Nvk-E\",\"guide_components_drop-down_emits.md\":\"BE95TdKW\",\"guide_components_expander_index.md\":\"BKgcUJzQ\",\"guide_components_message-bar_index.md\":\"AEtAWlF8\",\"guide_components_menu-flyout_index.md\":\"Csa7irPj\",\"guide_components_panel_index.md\":\"CsTu0bXo\",\"guide_components_panel_properties.md\":\"BaxoCYKq\",\"guide_components_progress-bar_emits.md\":\"BcwXUpsF\",\"guide_components_progress-bar_properties.md\":\"TxiS9ZMA\",\"guide_components_progress-ring_emits.md\":\"D2Y6hIZ9\",\"guide_components_color-picker_index.md\":\"DCc4ixcU\",\"guide_components_progress-ring_index.md\":\"CPb-ZEPE\",\"guide_components_color-picker_properties.md\":\"wcXK29Vl\",\"guide_components_time-picker_index.md\":\"CQJdRRaG\",\"guide_components_drop-down_properties.md\":\"Bwlkpr1q\",\"guide_components_infinite-scroll-view_index.md\":\"yAuD807x\",\"guide_components_check-box_index.md\":\"FYgdu4oq\",\"guide_components_progress-bar_index.md\":\"D8vHQw5V\",\"guide_components_combo-box_index.md\":\"DTyu3eNd\",\"guide_components_info-box_emits.md\":\"DlEwpkkq\",\"guide_components_drop-down_index.md\":\"BZzJZQWq\",\"guide_components_list-view_index.md\":\"BoYvMzb0\",\"guide_components_verify-box_properties.md\":\"CW6W8fFf\",\"guide_components_verify-box_index.md\":\"DwSB40wR\",\"guide_index.md\":\"Bndlt3sL\",\"guide_components_web-window_index.md\":\"Bxc8vEeI\",\"index.md\":\"MTRqI42u\",\"guide_components_combo-box_properties.md\":\"AWfHzV6x\",\"guide_components_combobox_emits.md\":\"CGB6WLt8\",\"guide_components_combobox_properties.md\":\"Bja0hMou\",\"guide_components_details-list_index.md\":\"CcgOCIyt\",\"guide_components_info-box_index.md\":\"vXh-_DsL\",\"guide_components_combobox_index.md\":\"CsPkY6YB\",\"guide_components_date-picker_index.md\":\"12vmUIup\",\"guide_components_flip-view_emits.md\":\"DCheHjDj\",\"guide_components_panel_emits.md\":\"DG0REDq8\",\"guide_components_breadcrumb_index.md\":\"DyDm7PeP\",\"guide_components_radio-group_properties.md\":\"BnPxoKsQ\",\"guide_components_persona_emits.md\":\"CnsDPKRU\",\"guide_components_pivot_properties.md\":\"BmoLpPi1\",\"guide_components_persona_index.md\":\"DT00jby4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vfluent3\",\"description\":\"A Vue3 component library for Fluent UI\",\"base\":\"/VFluent3/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"VFluent3\",\"footer\":{\"message\":\"MIT Licensed\",\"copyright\":\"Copyright © Creator SN - 2022\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/\"}],\"sidebar\":[{\"text\":\"Basic input\",\"collapsed\":true,\"items\":[{\"text\":\"Button\",\"link\":\"/guide/components/button/\"},{\"text\":\"CheckBox\",\"link\":\"/guide/components/check-box/\"},{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"},{\"text\":\"Combobox\",\"link\":\"/guide/components/combobox/\"},{\"text\":\"DetailsList\",\"link\":\"/guide/components/details-list/\"},{\"text\":\"DropDown\",\"link\":\"/guide/components/drop-down/\"},{\"text\":\"Radio\",\"link\":\"/guide/components/radio/\"},{\"text\":\"RadioGroup\",\"link\":\"/guide/components/radio-group/\"},{\"text\":\"RatingControl\",\"link\":\"/guide/components/rating-control/\"},{\"text\":\"Slider\",\"link\":\"/guide/components/slider/\"},{\"text\":\"ToggleSwitch\",\"link\":\"/guide/components/toggle-switch/\"},{\"text\":\"Tag\",\"link\":\"/guide/components/tag/\"}]},{\"text\":\"Collections\",\"collapsed\":true,\"items\":[{\"text\":\"FlipView\",\"link\":\"/guide/components/flip-view/\"},{\"text\":\"ListView\",\"link\":\"/guide/components/list-view/\"},{\"text\":\"TreeView\",\"link\":\"/guide/components/tree-view/\"}]},{\"text\":\"Date & Time\",\"collapsed\":true,\"items\":[{\"text\":\"CalendarDatePicker\",\"link\":\"/guide/components/calendar-date-picker/\"},{\"text\":\"CalendarView\",\"link\":\"/guide/components/calendar-view/\"},{\"text\":\"DatePicker\",\"link\":\"/guide/components/date-picker/\"},{\"text\":\"TimePicker\",\"link\":\"/guide/components/time-picker/\"}]},{\"text\":\"Dialogs & flyouts\",\"collapsed\":true,\"items\":[{\"text\":\"Callout\",\"link\":\"/guide/components/callout/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Layout\",\"collapsed\":true,\"items\":[{\"text\":\"Collapse\",\"link\":\"/guide/components/collapse/\"},{\"text\":\"Expander\",\"link\":\"/guide/components/expander/\"},{\"text\":\"Drawer\",\"link\":\"/guide/components/drawer/\"},{\"text\":\"Panel\",\"link\":\"/guide/components/panel/\"}]},{\"text\":\"Media\",\"collapsed\":true,\"items\":[{\"text\":\"Image\",\"link\":\"/guide/components/image/\"},{\"text\":\"Img\",\"link\":\"/guide/components/img/\"},{\"text\":\"ImgBox\",\"link\":\"/guide/components/img-box/\"},{\"text\":\"Persona\",\"link\":\"/guide/components/persona/\"}]},{\"text\":\"Menu & toolbars\",\"collapsed\":true,\"items\":[{\"text\":\"CommandBar\",\"link\":\"/guide/components/command-bar/\"},{\"text\":\"MenuFlyout\",\"link\":\"/guide/components/menu-flyout/\"},{\"text\":\"SwipeControl\",\"link\":\"/guide/components/swipe-control/\"}]},{\"text\":\"Navigation\",\"collapsed\":true,\"items\":[{\"text\":\"Breadcrumb\",\"link\":\"/guide/components/breadcrumb/\"},{\"text\":\"NavigationPanel\",\"link\":\"/guide/components/navigation-panel/\"},{\"text\":\"NavigationView\",\"link\":\"/guide/components/navigation-view/\"},{\"text\":\"Pivot\",\"link\":\"/guide/components/pivot/\"},{\"text\":\"Pagination\",\"link\":\"/guide/components/pagination/\"}]},{\"text\":\"Scrolling\",\"collapsed\":true,\"items\":[{\"text\":\"InfiniteScrollView\",\"link\":\"/guide/components/infinite-scroll-view/\"},{\"text\":\"ScrollStory\",\"link\":\"/guide/components/scroll-story/\"}]},{\"text\":\"Status & info\",\"collapsed\":true,\"items\":[{\"text\":\"Badge\",\"link\":\"/guide/components/badge/\"},{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"ProgressBar\",\"link\":\"/guide/components/progress-bar/\"},{\"text\":\"ProgressRing\",\"link\":\"/guide/components/progress-ring/\"}]},{\"text\":\"Styles\",\"collapsed\":true,\"items\":[{\"text\":\"AnimatedIcon\",\"link\":\"/guide/components/animated-icon/\"},{\"text\":\"IconElement\",\"link\":\"/guide/components/icon-element/\"},{\"text\":\"RevealContainer\",\"link\":\"/guide/components/reveal-container/\"},{\"text\":\"Shimmer\",\"link\":\"/guide/components/shimmer/\"}]},{\"text\":\"Text\",\"collapsed\":true,\"items\":[{\"text\":\"SearchBox\",\"link\":\"/guide/components/search-box/\"},{\"text\":\"TextBox\",\"link\":\"/guide/components/text-box/\"},{\"text\":\"TextField\",\"link\":\"/guide/components/text-field/\"},{\"text\":\"VerifyBox\",\"link\":\"/guide/components/verify-box/\"}]},{\"text\":\"Windowing\",\"collapsed\":true,\"items\":[{\"text\":\"WebWindow\",\"link\":\"/guide/components/web-window/\"}]},{\"text\":\"Global\",\"collapsed\":true,\"items\":[{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Advance\",\"collapsed\":true,\"items\":[{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
     
   </body>
 </html>
\ No newline at end of file
diff --git a/guide/components/color-picker/index.html b/guide/components/color-picker/index.html
index 61af7d5..0faa276 100644
--- a/guide/components/color-picker/index.html
+++ b/guide/components/color-picker/index.html
@@ -1,25 +1,27 @@
 <!DOCTYPE html>
-<html lang="en-US">
+<html lang="en-US" dir="ltr">
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1">
     <title>ColorPicker | vfluent3</title>
     <meta name="description" content="A Vue3 component library for Fluent UI">
-    <link rel="stylesheet" href="/VFluent3/assets/style.0a1d87af.css">
-    <link rel="modulepreload" href="/VFluent3/assets/chunks/index.9dba9c16.js">
-    <link rel="modulepreload" href="/VFluent3/assets/app.d60fa8c3.js">
-    <link rel="modulepreload" href="/VFluent3/assets/guide_components_color-picker_index.md.b2d62612.lean.js">
+    <meta name="generator" content="VitePress v1.0.0-rc.45">
+    <link rel="preload stylesheet" href="/VFluent3/assets/style.BabQegKX.css" as="style">
     
-    <script>(()=>{const e=localStorage.getItem("vitepress-theme-appearance"),a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script type="module" src="/VFluent3/assets/app.CSutcJ2E.js"></script>
+    <link rel="preload" href="/VFluent3/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/framework.DvIFzl91.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/theme.CgqFBnN_.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/index.CvzShnhD.js">
+    <link rel="modulepreload" href="/VFluent3/assets/guide_components_color-picker_index.md.DCc4ixcU.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
   </head>
   <body>
-    <div id="app"><div class="Layout" data-v-058b7495><!--[--><!--]--><!--[--><span tabindex="-1" data-v-bea91388></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-bea91388> Skip to content </a><!--]--><!----><header class="VPNav" data-v-058b7495 data-v-2a0a2738><div class="VPNavBar has-sidebar" data-v-2a0a2738 data-v-45c9f423><div class="container" data-v-45c9f423><div class="VPNavBarTitle has-sidebar" data-v-45c9f423 data-v-011600ce><a class="title" href="/VFluent3/" data-v-011600ce><!----><!--[-->VFluent3<!--]--></a></div><div class="content" data-v-45c9f423><!----><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-45c9f423 data-v-4da4371d><span id="main-nav-aria-label" class="visually-hidden" data-v-4da4371d>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" data-v-4da4371d data-v-66f8d518 data-v-4d08dd3a><!--[-->Home<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" data-v-4da4371d data-v-66f8d518 data-v-4d08dd3a><!--[-->Guide<!--]--><!----></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-45c9f423 data-v-bf1c94ca><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" data-v-bf1c94ca data-v-d0ee0df2 data-v-55b931a0><span class="check" data-v-55b931a0><span class="icon" data-v-55b931a0><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-d0ee0df2><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-d0ee0df2><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-45c9f423 data-v-7cece6ac data-v-37af1650><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-37af1650><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-37af1650><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-37af1650><div class="VPMenu" data-v-37af1650 data-v-17dc081b><!----><!--[--><!--[--><!----><div class="group" data-v-7cece6ac><div class="item appearance" data-v-7cece6ac><p class="label" data-v-7cece6ac>Appearance</p><div class="appearance-action" data-v-7cece6ac><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" data-v-7cece6ac data-v-d0ee0df2 data-v-55b931a0><span class="check" data-v-55b931a0><span class="icon" data-v-55b931a0><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-d0ee0df2><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-d0ee0df2><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-45c9f423 data-v-5484e669><span class="container" data-v-5484e669><span class="top" data-v-5484e669></span><span class="middle" data-v-5484e669></span><span class="bottom" data-v-5484e669></span></span></button></div></div></div><!----></header><div class="VPLocalNav" data-v-058b7495 data-v-f623cd72><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-f623cd72><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-f623cd72><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-f623cd72>Menu</span></button><a class="top-link" href="#" data-v-f623cd72> Return to top </a></div><aside class="VPSidebar" data-v-058b7495 data-v-3b8ec0c7><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-3b8ec0c7><span class="visually-hidden" id="sidebar-aria-label" data-v-3b8ec0c7> Sidebar Navigation </span><!--[--><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Basic</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/button/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Button</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/check-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>CheckBox</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/radio/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Radio</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/progress-bar/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ProgressBar</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/progress-ring/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ProgressRing</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/toggle-switch/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ToggleSwitch</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/img/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Img</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/text-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>TextBox</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/combo-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ComboBox</span><!--]--><!----></a><!--]--></div></section></div><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Global</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/message-bar/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>MessageBar</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/info-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>InfoBox</span><!--]--><!----></a><!--]--></div></section></div><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Advance</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link active" href="/VFluent3/guide/components/color-picker/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ColorPicker</span><!--]--><!----></a><!--]--></div></section></div><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-058b7495 data-v-564173e9><div class="VPDoc has-sidebar" data-v-564173e9 data-v-32b7ddf4><div class="container" data-v-32b7ddf4><div class="aside" data-v-32b7ddf4><div class="aside-curtain" data-v-32b7ddf4></div><div class="aside-container" data-v-32b7ddf4><div class="aside-content" data-v-32b7ddf4><div class="VPDocAside" data-v-32b7ddf4 data-v-35c1bae1><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline has-outline" data-v-35c1bae1 data-v-123cce62><div class="content" data-v-123cce62><div class="outline-marker" data-v-123cce62></div><div class="outline-title" data-v-123cce62>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-123cce62><span class="visually-hidden" id="doc-outline-aria-label" data-v-123cce62> Table of Contents for current page </span><ul class="root" data-v-123cce62><!--[--><li style="" data-v-123cce62><a class="outline-link" href="#quick-start" data-v-123cce62>Quick Start</a><!----></li><li style="" data-v-123cce62><a class="outline-link" href="#properties" data-v-123cce62>Properties</a><!----></li><li style="" data-v-123cce62><a class="outline-link" href="#emits" data-v-123cce62>Emits</a><!----></li><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-35c1bae1></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-32b7ddf4><div class="content-container" data-v-32b7ddf4><!--[--><!--]--><main class="main" data-v-32b7ddf4><div style="position:relative;" class="vp-doc _VFluent3_guide_components_color-picker_index" data-v-32b7ddf4><div><h1 id="colorpicker" tabindex="-1">ColorPicker <a class="header-anchor" href="#colorpicker" aria-hidden="true">#</a></h1><h2 id="quick-start" tabindex="-1">Quick Start <a class="header-anchor" href="#quick-start" aria-hidden="true">#</a></h2><h3 id="default" tabindex="-1">Default <a class="header-anchor" href="#default" aria-hidden="true">#</a></h3><hr><div> color: #FFFFFFFF <br> box type: <div class="fv-radio light active"><label class="label"><!----><input checked type="radio" class="radio" value="ring" checked><div class="icon" style="border-width:1.5px;"><div style="" class="dot"></div></div><span class="text" style=""><!--[-->Ring<!--]--></span></label></div><div class="fv-radio light"><label class="label"><!----><input type="radio" class="radio" value="box"><div class="icon" style="border-width:1.5px;"><div style="display:none;" class="dot"></div></div><span class="text" style=""><!--[-->Box<!--]--></span></label></div></div><hr><div class="fv-color-picker" style="--fv-color-picker--color-list:rgb(255, 0, 0),rgb(255, 153, 0),rgb(205, 255, 0),rgb(53, 255, 0),rgb(0, 255, 102),rgb(0, 255, 253),rgb(0, 102, 255),rgb(50, 0, 255),rgb(205, 0, 255),rgb(255, 0, 153),rgb(255, 0, 0);--fv-color-picker--color:rgba(0, 0, 0, 1);--fv-color-picker--color-alpha:rgb(0, 0, 0);--fv-color-picker--color-value:rgb(255, 255, 255);--fv-color-picker--pointer-left:0px;--fv-color-picker--pointer-top:0px;--fv-color-picker--color-value-left:0px;--fv-color-picker--color-alpha-left:0px;--fv-color-picker--color-value-empty:rgb(0, 0, 0);"><div class="color-picker"><div draggable="false" class="ring color-area"><div class="bg"></div><div class="white-mask"></div><button class="pointer"></button></div><div class="color"><div class="color-bg"></div></div></div><div class="control vertical"><div class="color-value" draggable="false"><div class="color-value-bg"></div><div class="color-value-mask"></div><div class="color-value-btn"></div></div><div class="color-alpha" draggable="false"><div class="color-alpha-bg"></div><div class="color-alpha-mask"></div><div class="color-alpha-btn"></div></div><div class="fields"><div class="row"><div class="cell"><div class="fv-combo-box light" style="--fv-combo-box-height:undefinedpx;--fv-combo-box-effect-position:center;width:118px;" min-width="118px"><div tabindex="-1" class="fv-text-box light readonly fv-text-box--singleline fv-text-box--success fv-combo-box--select-input" style="--fv-text-box-height:18px;--fv-text-box-font-size:14px;--fv-text-box-width:80px;"><!--[--><input title="input" class="fv-text-box--text-with-icon fv-text-box--input fv-text-box--text" type="text" readonly value="RGB"><div class="fv-text-box--icon"><i class="ms-Icon ms-Icon--ChevronDown"></i></div><!--]--><!----><pre class="fv-text-box--pre-hidden">RGB0</pre></div><div class="fv-combo-box--options" style="display:none;"><div class="fv-combo-box--bg"><div class="fv-combo-box--options-wrapper"><!--[--><div class="fv-combo-box--option"><div class="fv-combo-box--option-text"><!--[-->HSV<!--]--></div></div><div class="fv-combo-box--option"><div class="active fv-combo-box--option-text"><!--[-->RGB<!--]--></div></div><!--]--></div></div></div></div></div><div class="cell"><div tabindex="-1" class="fv-text-box light fv-text-box--singleline fv-text-box--success" style="--fv-text-box-height:18px;--fv-text-box-font-size:14px;--fv-text-box-width:80px;width:130px;" min-width="130px"><!--[--><input title="input" class="fv-text-box--input fv-text-box--text" placeholder="#FFFFFF" type="text" value="#FFFFFFFF"><div class="fv-text-box--icon"><i class="ms-Icon ms-Icon--Cancel"></i></div><!--]--><!----><pre class="fv-text-box--pre-hidden">#FFFFFFFF0</pre></div></div></div><div class="row"><div class="cell"><div tabindex="-1" class="fv-text-box light fv-text-box--singleline fv-text-box--success" style="--fv-text-box-height:18px;--fv-text-box-font-size:14px;--fv-text-box-width:80px;width:118px;" min-width="118px"><!--[--><input title="input" class="fv-text-box--input fv-text-box--text" placeholder="0" type="text" value="0"><div class="fv-text-box--icon"><i class="ms-Icon ms-Icon--Cancel"></i></div><!--]--><!----><pre class="fv-text-box--pre-hidden">00</pre></div><div tabindex="-1" class="fv-text-box light fv-text-box--singleline fv-text-box--success" style="--fv-text-box-height:18px;--fv-text-box-font-size:14px;--fv-text-box-width:80px;display:none;width:118px;" min-width="118px"><!--[--><input title="input" class="fv-text-box--input fv-text-box--text" placeholder="0" type="text" value="0"><div class="fv-text-box--icon"><i class="ms-Icon ms-Icon--Cancel"></i></div><!--]--><!----><pre class="fv-text-box--pre-hidden">00</pre></div><span class="text">Red</span></div></div><div class="row"><div class="cell"><div tabindex="-1" class="fv-text-box light fv-text-box--singleline fv-text-box--success" style="--fv-text-box-height:18px;--fv-text-box-font-size:14px;--fv-text-box-width:80px;width:118px;" min-width="118px"><!--[--><input title="input" class="fv-text-box--input fv-text-box--text" placeholder="0" type="text" value="0"><div class="fv-text-box--icon"><i class="ms-Icon ms-Icon--Cancel"></i></div><!--]--><!----><pre class="fv-text-box--pre-hidden">00</pre></div><div tabindex="-1" class="fv-text-box light fv-text-box--singleline fv-text-box--success" style="--fv-text-box-height:18px;--fv-text-box-font-size:14px;--fv-text-box-width:80px;display:none;width:118px;" min-width="118px"><!--[--><input title="input" class="fv-text-box--input fv-text-box--text" placeholder="0" type="text" value="0"><div class="fv-text-box--icon"><i class="ms-Icon ms-Icon--Cancel"></i></div><!--]--><!----><pre class="fv-text-box--pre-hidden">00</pre></div><span class="text">Green</span></div></div><div class="row"><div class="cell"><div tabindex="-1" class="fv-text-box light fv-text-box--singleline fv-text-box--success" style="--fv-text-box-height:18px;--fv-text-box-font-size:14px;--fv-text-box-width:80px;width:118px;" min-width="118px"><!--[--><input title="input" class="fv-text-box--input fv-text-box--text" placeholder="0" type="text" value="0"><div class="fv-text-box--icon"><i class="ms-Icon ms-Icon--Cancel"></i></div><!--]--><!----><pre class="fv-text-box--pre-hidden">00</pre></div><div tabindex="-1" class="fv-text-box light fv-text-box--singleline fv-text-box--success" style="--fv-text-box-height:18px;--fv-text-box-font-size:14px;--fv-text-box-width:80px;display:none;width:118px;" min-width="118px"><!--[--><input title="input" class="fv-text-box--input fv-text-box--text" placeholder="0" type="text" value="0"><div class="fv-text-box--icon"><i class="ms-Icon ms-Icon--Cancel"></i></div><!--]--><!----><pre class="fv-text-box--pre-hidden">00</pre></div><span class="text">Blue</span></div></div><div class="row"><div class="cell"><div tabindex="-1" class="fv-text-box light fv-text-box--singleline fv-text-box--success" style="--fv-text-box-height:18px;--fv-text-box-font-size:14px;--fv-text-box-width:80px;width:118px;" min-width="118px"><!--[--><input title="input" class="fv-text-box--input fv-text-box--text" placeholder="0" type="text" value="100%"><div class="fv-text-box--icon"><i class="ms-Icon ms-Icon--Cancel"></i></div><!--]--><!----><pre class="fv-text-box--pre-hidden">100%0</pre></div><span class="text">Opacity</span></div></div></div></div></div><div class="language-vue-html"><span class="copy"></span><pre><code><span class="line"></span>
-<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-color-picker</span><span style="color:#89DDFF;"> :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-color-picker</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">disabled</td></tr><tr><td style="text-align:center;">lang</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">i18n</td></tr><tr><td style="text-align:center;">model-value</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">v-model</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">theme</td></tr><tr><td style="text-align:center;">type</td><td style="text-align:center;">[&#39;box&#39;, &#39;ring&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;box&#39;</td><td style="text-align:center;">color-picker type</td></tr></tbody></table><h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">update:model-value</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">v-model</td></tr></tbody></table></div></div></main><footer class="VPDocFooter" data-v-32b7ddf4 data-v-cfaa3a6c><div class="edit-info" data-v-cfaa3a6c><!----><!----></div><div class="prev-next" data-v-cfaa3a6c><div class="pager" data-v-cfaa3a6c><a class="pager-link prev" href="/VFluent3/guide/components/info-box/" data-v-cfaa3a6c><span class="desc" data-v-cfaa3a6c>Previous page</span><span class="title" data-v-cfaa3a6c>InfoBox</span></a></div><div class="has-prev pager" data-v-cfaa3a6c><!----></div></div></footer><!--[--><!--]--></div></div></div></div></div><footer class="VPFooter has-sidebar" data-v-058b7495 data-v-a6c8dde4><div class="container" data-v-a6c8dde4><p class="message" data-v-a6c8dde4>MIT Licensed</p><p class="copyright" data-v-a6c8dde4>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
-    <script>__VP_HASH_MAP__ = JSON.parse("{\"guide_components_button_emits.md\":\"d682bf18\",\"guide_components_button_index.md\":\"23a8eb54\",\"guide_components_button_properties.md\":\"cd4004b6\",\"guide_components_check-box_emits.md\":\"31609794\",\"guide_components_check-box_index.md\":\"32046814\",\"guide_components_check-box_properties.md\":\"8f33ac0c\",\"guide_components_color-picker_emits.md\":\"00983cd0\",\"guide_components_color-picker_index.md\":\"b2d62612\",\"guide_components_color-picker_properties.md\":\"5466ba72\",\"guide_components_combo-box_emits.md\":\"d5ffda50\",\"guide_components_combo-box_index.md\":\"1c4364f5\",\"guide_components_combo-box_properties.md\":\"2e1d6060\",\"guide_components_img_emits.md\":\"6237adb4\",\"guide_components_img_index.md\":\"fa51a3a1\",\"guide_components_img_properties.md\":\"8d321b5e\",\"guide_components_info-box_emits.md\":\"c2e71eec\",\"guide_components_info-box_index.md\":\"06175fed\",\"guide_components_info-box_properties.md\":\"314dbb00\",\"guide_components_message-bar_emits.md\":\"e89a5a22\",\"guide_components_message-bar_index.md\":\"3f0b01d6\",\"guide_components_message-bar_properties.md\":\"ee3838d9\",\"guide_components_progress-bar_emits.md\":\"5b611e3b\",\"guide_components_progress-bar_index.md\":\"689c3241\",\"guide_components_progress-bar_properties.md\":\"39af7fb2\",\"guide_components_progress-ring_emits.md\":\"67e4644e\",\"guide_components_progress-ring_index.md\":\"9a33542b\",\"guide_components_progress-ring_properties.md\":\"c897c4bb\",\"guide_components_radio_emits.md\":\"28506857\",\"guide_components_radio_index.md\":\"e5a479ce\",\"guide_components_radio_properties.md\":\"f8e55d2f\",\"guide_components_text-box_emits.md\":\"0bf89ef8\",\"guide_components_text-box_index.md\":\"7ccfc637\",\"guide_components_text-box_properties.md\":\"aab3a89e\",\"guide_components_toggle-switch_emits.md\":\"5146435f\",\"guide_components_toggle-switch_index.md\":\"8be48081\",\"guide_components_toggle-switch_properties.md\":\"54984c3a\",\"guide_index.md\":\"e3dca1d7\",\"index.md\":\"1e9773d5\"}")</script>
-    <script type="module" async src="/VFluent3/assets/app.d60fa8c3.js"></script>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-19c990f1><div class="wrapper" data-v-19c990f1><div class="container" data-v-19c990f1><div class="title" data-v-19c990f1><div class="VPNavBarTitle has-sidebar" data-v-19c990f1 data-v-ab179fa1><a class="title" href="/VFluent3/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>VFluent3</span><!--[--><!--]--></a></div></div><div class="content" data-v-19c990f1><div class="content-body" data-v-19c990f1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-19c990f1><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-19c990f1 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Guide</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-19c990f1 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-19c990f1 data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-19c990f1 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-19c990f1><div class="divider-line" data-v-19c990f1></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-d2ecc192><button data-v-d2ecc192>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-575e6a36><div class="curtain" data-v-575e6a36></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-575e6a36><span class="visually-hidden" id="sidebar-aria-label" data-v-575e6a36> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible has-active" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Basic input</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/button/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/check-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CheckBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/combobox/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Combobox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/details-list/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DetailsList</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drop-down/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DropDown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio-group/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RadioGroup</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/rating-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RatingControl</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/slider/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/toggle-switch/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ToggleSwitch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tag/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Tag</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Collections</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/flip-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>FlipView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/list-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ListView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tree-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TreeView</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Date & Time</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarDatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/time-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TimePicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Dialogs & flyouts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/callout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Callout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Layout</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/collapse/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Collapse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/expander/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Expander</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drawer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Panel</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Media</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/image/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Img</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ImgBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/persona/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Persona</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Menu & toolbars</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/command-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CommandBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/menu-flyout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MenuFlyout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/swipe-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SwipeControl</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Navigation</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/breadcrumb/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationPanel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pivot/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pivot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pagination/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pagination</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Scrolling</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/infinite-scroll-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfiniteScrollView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/scroll-story/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ScrollStory</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Status & info</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/badge/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-ring/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressRing</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Styles</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/animated-icon/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>AnimatedIcon</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/icon-element/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>IconElement</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/reveal-container/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RevealContainer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/shimmer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Shimmer</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Text</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/search-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SearchBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-field/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextField</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/verify-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>VerifyBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Windowing</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/web-window/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>WebWindow</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Global</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible has-active" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Advance</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-935f8a84><div class="content" data-v-935f8a84><div class="outline-marker" data-v-935f8a84></div><div class="outline-title" role="heading" aria-level="2" data-v-935f8a84>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-935f8a84><span class="visually-hidden" id="doc-outline-aria-label" data-v-935f8a84> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-935f8a84 data-v-b933a997><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _VFluent3_guide_components_color-picker_" data-v-39a288b8><div><h1 id="colorpicker" tabindex="-1">ColorPicker <a class="header-anchor" href="#colorpicker" aria-label="Permalink to &quot;ColorPicker&quot;">​</a></h1><h2 id="quick-start" tabindex="-1">Quick Start <a class="header-anchor" href="#quick-start" aria-label="Permalink to &quot;Quick Start&quot;">​</a></h2><h3 id="default" tabindex="-1">Default <a class="header-anchor" href="#default" aria-label="Permalink to &quot;Default&quot;">​</a></h3><hr><div> color: #FFFFFFFF <br> box type: <div class="fv-Radio light actived" style="border-color:rgba(0, 90, 158, 0.8);border-radius:6px;border-width:2px;"><input type="radio" style="background:rgba(0, 90, 158, 0.8);" class="actived fv-radio-button"><label class="fv-radio-label" style="color:;"><!----><span><!--[-->Ring<!--]--></span></label></div><div class="fv-Radio light" style="border-color:;border-radius:6px;border-width:2px;"><input type="radio" style="background:;" class="fv-radio-button"><label class="fv-radio-label" style="color:;"><!----><span><!--[-->Box<!--]--></span></label></div></div><hr><div class="fv-color-picker" style="--fv-color-picker--color-list:rgb(255, 0, 0),rgb(255, 153, 0),rgb(205, 255, 0),rgb(53, 255, 0),rgb(0, 255, 102),rgb(0, 255, 253),rgb(0, 102, 255),rgb(50, 0, 255),rgb(205, 0, 255),rgb(255, 0, 153),rgb(255, 0, 0);--fv-color-picker--color:rgba(0, 0, 0, 1);--fv-color-picker--color-alpha:rgb(0, 0, 0);--fv-color-picker--color-value:rgb(255, 255, 255);--fv-color-picker--pointer-left:0px;--fv-color-picker--pointer-top:0px;--fv-color-picker--color-value-left:0px;--fv-color-picker--color-alpha-left:0px;--fv-color-picker--color-value-empty:rgb(0, 0, 0);"><div class="color-picker"><div draggable="false" class="ring color-area"><div class="bg"></div><div class="white-mask"></div><button class="pointer"></button></div><div class="color"><div class="color-bg"></div></div></div><div class="control vertical"><div class="color-value" draggable="false"><div class="color-value-bg"></div><div class="color-value-mask"></div><div class="color-value-btn"></div></div><div class="color-alpha" draggable="false"><div class="color-alpha-bg"></div><div class="color-alpha-mask"></div><div class="color-alpha-btn"></div></div><div class="fields"><div class="row"><div class="cell"><div class="fv-Combobox light" style="background:;padding:1;border-radius:3px;z-index:;overflow:visible;width:118px;" min-width="118px"><div class="combobox-container" style="background:;border-radius:3px;"><div class="fv-RevealContainer light fv-combobox-reveal-container" style="border-radius:3px;"><svg style="display:none;" width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> &gt; <defs><radialGradient cx="50%" cy="50%" r="120" gradientUnits="userSpaceOnUse" spreadMethod="pad" id="backgroundG_71dfd40b05c1f73a0e859e293eea637d" gradientTransform="matrix(1 0 0 1 0.000 0.000)"><stop offset="0" stop-color="rgba(121, 119, 117, 0.3)"></stop><stop offset="1" stop-color="rgba(255, 255, 255, 0)"></stop><!--[--><!--]--></radialGradient><radialGradient cx="50%" cy="50%" r="80" gradientUnits="userSpaceOnUse" spreadMethod="pad" id="borderG_71dfd40b05c1f73a0e859e293eea637d" gradientTransform="matrix(1 0 0 1 0.000 0.000)"><stop offset="0" stop-color="rgba(121, 119, 117, 0.6)"></stop><stop offset="1" stop-color="rgba(255, 255, 255, 0)"></stop><!--[--><!--]--></radialGradient><radialGradient cx="50%" cy="50%" r="0" gradientUnits="userSpaceOnUse" spreadMethod="pad" id="clickG_71dfd40b05c1f73a0e859e293eea637d" gradientTransform="matrix(1 0 0 1 0.000 0.000)"><stop offset="0" stop-color="rgba(255, 255, 255, 0)"></stop><stop offset="0.33" stop-color="rgba(121, 119, 117, 0.3)"></stop><stop offset="0.66" stop-color="rgba(255, 255, 255, 0)"></stop><stop offset="1" stop-color="rgba(255, 255, 255, 0)"></stop></radialGradient></defs><rect x="0.5" y="0.5" rx="3" ry="3" style="box-sizing:border-box;width:-1px;height:-1px;stroke:url(#borderG_71dfd40b05c1f73a0e859e293eea637d);fill:transparent;stroke-width:1;"></rect><rect style="display:none;stroke:transparent;box-sizing:border-box;width:-1px;height:-1px;fill:transparent;stroke-width:1;" x="0.5" y="0.5" rx="3" ry="3"></rect></svg></div><input class="input" placeholder="Color Mode" readonly value="RGB" style="color:;border-radius:3px;"><i class="ms-Icon--ChevronDown ms-Icon right-icon" style="color:;"></i></div><div style="display:none;background:;overflow:auto;" class="combobox-item-container"><!--[--><div class="normal fv-combobox-item" style="height:40px;background:;color:;" title="HSV"><!--[--><i class="before-choosen" style="background:;"></i> HSV<!--]--></div><div class="normal choose fv-combobox-item" style="height:40px;background:;color:;" title="RGB"><!--[--><i class="before-choosen" style="background:;"></i> RGB<!--]--></div><!--]--></div></div></div><div class="cell"><div class="fv-TextBox light underline" style="background:;border-radius:3px;width:130px;" min-width="130px"><div class="fv-RevealContainer light fv-text-box-reveal-container" style="border-radius:3px;"><svg style="display:none;" width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> &gt; <defs><radialGradient cx="50%" cy="50%" r="120" gradientUnits="userSpaceOnUse" spreadMethod="pad" id="backgroundG_ee6bfe5571148437ff11bca8d34f8358" gradientTransform="matrix(1 0 0 1 0.000 0.000)"><stop offset="0" stop-color="rgba(121, 119, 117, 0.3)"></stop><stop offset="1" stop-color="rgba(255, 255, 255, 0)"></stop><!--[--><!--]--></radialGradient><radialGradient cx="50%" cy="50%" r="60" gradientUnits="userSpaceOnUse" spreadMethod="pad" id="borderG_ee6bfe5571148437ff11bca8d34f8358" gradientTransform="matrix(1 0 0 1 0.000 0.000)"><stop offset="0" stop-color="rgba(121, 119, 117, 0.6)"></stop><stop offset="1" stop-color="rgba(255, 255, 255, 0)"></stop><!--[--><!--]--></radialGradient><radialGradient cx="50%" cy="50%" r="0" gradientUnits="userSpaceOnUse" spreadMethod="pad" id="clickG_ee6bfe5571148437ff11bca8d34f8358" gradientTransform="matrix(1 0 0 1 0.000 0.000)"><stop offset="0" stop-color="rgba(255, 255, 255, 0)"></stop><stop offset="0.33" stop-color="rgba(121, 119, 117, 0.3)"></stop><stop offset="0.66" stop-color="rgba(255, 255, 255, 0)"></stop><stop offset="1" stop-color="rgba(255, 255, 255, 0)"></stop></radialGradient></defs><rect x="1" y="1" rx="3" ry="3" style="box-sizing:border-box;width:-2px;height:-2px;stroke:url(#borderG_ee6bfe5571148437ff11bca8d34f8358);fill:transparent;stroke-width:2;"></rect><rect style="display:none;stroke:transparent;box-sizing:border-box;width:-2px;height:-2px;fill:transparent;stroke-width:2;" x="1" y="1" rx="3" ry="3"></rect></svg></div><div class="fv-text-box-wrapper-container" style="border-width:2px;border-color:rgba(120, 120, 120, 0.1);border-radius:3px;"><div style="display:none;" class="fix-block"><p></p></div><i style="display:none;" class="ms-Icon-- ms-Icon icon-block"></i><div class="text-box-container"><input value="#FFFFFFFF" inputmode="text" type="text" placeholder="#FFFFFF" class="fv-text-box-input" maxlength="9" style="font-size:13.3px;font-weight:normal;color:;text-align:left;"><!----></div><i style="display:none;" class="ms-Icon-- ms-Icon icon-block"></i><div style="display:none;" class="fix-block"><p></p></div></div></div></div></div><div class="row"><div class="cell"><span class="fv-color-picker-text">Red</span><div class="fv-TextBox light underline" style="background:;border-radius:3px;width:118px;" min-width="118px"><div class="fv-RevealContainer light fv-text-box-reveal-container" style="border-radius:3px;"><svg style="display:none;" width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> &gt; <defs><radialGradient cx="50%" cy="50%" r="120" gradientUnits="userSpaceOnUse" spreadMethod="pad" id="backgroundG_c7323c4eb9a4374e4058794b28310eef" gradientTransform="matrix(1 0 0 1 0.000 0.000)"><stop offset="0" stop-color="rgba(121, 119, 117, 0.3)"></stop><stop offset="1" stop-color="rgba(255, 255, 255, 0)"></stop><!--[--><!--]--></radialGradient><radialGradient cx="50%" cy="50%" r="60" gradientUnits="userSpaceOnUse" spreadMethod="pad" id="borderG_c7323c4eb9a4374e4058794b28310eef" gradientTransform="matrix(1 0 0 1 0.000 0.000)"><stop offset="0" stop-color="rgba(121, 119, 117, 0.6)"></stop><stop offset="1" stop-color="rgba(255, 255, 255, 0)"></stop><!--[--><!--]--></radialGradient><radialGradient cx="50%" cy="50%" r="0" gradientUnits="userSpaceOnUse" spreadMethod="pad" id="clickG_c7323c4eb9a4374e4058794b28310eef" gradientTransform="matrix(1 0 0 1 0.000 0.000)"><stop offset="0" stop-color="rgba(255, 255, 255, 0)"></stop><stop offset="0.33" stop-color="rgba(121, 119, 117, 0.3)"></stop><stop offset="0.66" stop-color="rgba(255, 255, 255, 0)"></stop><stop offset="1" stop-color="rgba(255, 255, 255, 0)"></stop></radialGradient></defs><rect x="1" y="1" rx="3" ry="3" style="box-sizing:border-box;width:-2px;height:-2px;stroke:url(#borderG_c7323c4eb9a4374e4058794b28310eef);fill:transparent;stroke-width:2;"></rect><rect style="display:none;stroke:transparent;box-sizing:border-box;width:-2px;height:-2px;fill:transparent;stroke-width:2;" x="1" y="1" rx="3" ry="3"></rect></svg></div><div class="fv-text-box-wrapper-container" style="border-width:2px;border-color:rgba(120, 120, 120, 0.1);border-radius:3px;"><div style="display:none;" class="fix-block"><p></p></div><i style="display:none;" class="ms-Icon-- ms-Icon icon-block"></i><div class="text-box-container"><input value="0" inputmode="text" type="text" placeholder="0" class="fv-text-box-input" maxlength="3" style="font-size:13.3px;font-weight:normal;color:;text-align:left;"><!----></div><i style="display:none;" class="ms-Icon-- ms-Icon icon-block"></i><div style="display:none;" class="fix-block"><p></p></div></div></div><div class="fv-TextBox light underline" style="background:;border-radius:3px;display:none;width:118px;" min-width="118px"><div class="fv-RevealContainer light fv-text-box-reveal-container" style="border-radius:3px;"><svg style="display:none;" width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> &gt; <defs><radialGradient cx="50%" cy="50%" r="120" gradientUnits="userSpaceOnUse" spreadMethod="pad" id="backgroundG_6c0ac2a33ebac8040dc1a3f843273ba9" gradientTransform="matrix(1 0 0 1 0.000 0.000)"><stop offset="0" stop-color="rgba(121, 119, 117, 0.3)"></stop><stop offset="1" stop-color="rgba(255, 255, 255, 0)"></stop><!--[--><!--]--></radialGradient><radialGradient cx="50%" cy="50%" r="60" gradientUnits="userSpaceOnUse" spreadMethod="pad" id="borderG_6c0ac2a33ebac8040dc1a3f843273ba9" gradientTransform="matrix(1 0 0 1 0.000 0.000)"><stop offset="0" stop-color="rgba(121, 119, 117, 0.6)"></stop><stop offset="1" stop-color="rgba(255, 255, 255, 0)"></stop><!--[--><!--]--></radialGradient><radialGradient cx="50%" cy="50%" r="0" gradientUnits="userSpaceOnUse" spreadMethod="pad" id="clickG_6c0ac2a33ebac8040dc1a3f843273ba9" gradientTransform="matrix(1 0 0 1 0.000 0.000)"><stop offset="0" stop-color="rgba(255, 255, 255, 0)"></stop><stop offset="0.33" stop-color="rgba(121, 119, 117, 0.3)"></stop><stop offset="0.66" stop-color="rgba(255, 255, 255, 0)"></stop><stop offset="1" stop-color="rgba(255, 255, 255, 0)"></stop></radialGradient></defs><rect x="1" y="1" rx="3" ry="3" style="box-sizing:border-box;width:-2px;height:-2px;stroke:url(#borderG_6c0ac2a33ebac8040dc1a3f843273ba9);fill:transparent;stroke-width:2;"></rect><rect style="display:none;stroke:transparent;box-sizing:border-box;width:-2px;height:-2px;fill:transparent;stroke-width:2;" x="1" y="1" rx="3" ry="3"></rect></svg></div><div class="fv-text-box-wrapper-container" style="border-width:2px;border-color:rgba(120, 120, 120, 0.1);border-radius:3px;"><div style="display:none;" class="fix-block"><p></p></div><i style="display:none;" class="ms-Icon-- ms-Icon icon-block"></i><div class="text-box-container"><input value="0" inputmode="text" type="text" placeholder="0" class="fv-text-box-input" maxlength="3" style="font-size:13.3px;font-weight:normal;color:;text-align:left;"><!----></div><i style="display:none;" class="ms-Icon-- ms-Icon icon-block"></i><div style="display:none;" class="fix-block"><p></p></div></div></div></div></div><div class="row"><div class="cell"><span class="fv-color-picker-text">Green</span><div class="fv-TextBox light underline" style="background:;border-radius:3px;width:118px;" min-width="118px"><div class="fv-RevealContainer light fv-text-box-reveal-container" style="border-radius:3px;"><svg style="display:none;" width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> &gt; <defs><radialGradient cx="50%" cy="50%" r="120" gradientUnits="userSpaceOnUse" spreadMethod="pad" id="backgroundG_1d486c8a384978fb8b676c094c91bad9" gradientTransform="matrix(1 0 0 1 0.000 0.000)"><stop offset="0" stop-color="rgba(121, 119, 117, 0.3)"></stop><stop offset="1" stop-color="rgba(255, 255, 255, 0)"></stop><!--[--><!--]--></radialGradient><radialGradient cx="50%" cy="50%" r="60" gradientUnits="userSpaceOnUse" spreadMethod="pad" id="borderG_1d486c8a384978fb8b676c094c91bad9" gradientTransform="matrix(1 0 0 1 0.000 0.000)"><stop offset="0" stop-color="rgba(121, 119, 117, 0.6)"></stop><stop offset="1" stop-color="rgba(255, 255, 255, 0)"></stop><!--[--><!--]--></radialGradient><radialGradient cx="50%" cy="50%" r="0" gradientUnits="userSpaceOnUse" spreadMethod="pad" id="clickG_1d486c8a384978fb8b676c094c91bad9" gradientTransform="matrix(1 0 0 1 0.000 0.000)"><stop offset="0" stop-color="rgba(255, 255, 255, 0)"></stop><stop offset="0.33" stop-color="rgba(121, 119, 117, 0.3)"></stop><stop offset="0.66" stop-color="rgba(255, 255, 255, 0)"></stop><stop offset="1" stop-color="rgba(255, 255, 255, 0)"></stop></radialGradient></defs><rect x="1" y="1" rx="3" ry="3" style="box-sizing:border-box;width:-2px;height:-2px;stroke:url(#borderG_1d486c8a384978fb8b676c094c91bad9);fill:transparent;stroke-width:2;"></rect><rect style="display:none;stroke:transparent;box-sizing:border-box;width:-2px;height:-2px;fill:transparent;stroke-width:2;" x="1" y="1" rx="3" ry="3"></rect></svg></div><div class="fv-text-box-wrapper-container" style="border-width:2px;border-color:rgba(120, 120, 120, 0.1);border-radius:3px;"><div style="display:none;" class="fix-block"><p></p></div><i style="display:none;" class="ms-Icon-- ms-Icon icon-block"></i><div class="text-box-container"><input value="0" inputmode="text" type="text" placeholder="0" class="fv-text-box-input" maxlength="3" style="font-size:13.3px;font-weight:normal;color:;text-align:left;"><!----></div><i style="display:none;" class="ms-Icon-- ms-Icon icon-block"></i><div style="display:none;" class="fix-block"><p></p></div></div></div><div class="fv-TextBox light underline" style="background:;border-radius:3px;display:none;width:118px;" min-width="118px"><div class="fv-RevealContainer light fv-text-box-reveal-container" style="border-radius:3px;"><svg style="display:none;" width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> &gt; <defs><radialGradient cx="50%" cy="50%" r="120" gradientUnits="userSpaceOnUse" spreadMethod="pad" id="backgroundG_c9c646f82181b7f55d074fc855fcec6c" gradientTransform="matrix(1 0 0 1 0.000 0.000)"><stop offset="0" stop-color="rgba(121, 119, 117, 0.3)"></stop><stop offset="1" stop-color="rgba(255, 255, 255, 0)"></stop><!--[--><!--]--></radialGradient><radialGradient cx="50%" cy="50%" r="60" gradientUnits="userSpaceOnUse" spreadMethod="pad" id="borderG_c9c646f82181b7f55d074fc855fcec6c" gradientTransform="matrix(1 0 0 1 0.000 0.000)"><stop offset="0" stop-color="rgba(121, 119, 117, 0.6)"></stop><stop offset="1" stop-color="rgba(255, 255, 255, 0)"></stop><!--[--><!--]--></radialGradient><radialGradient cx="50%" cy="50%" r="0" gradientUnits="userSpaceOnUse" spreadMethod="pad" id="clickG_c9c646f82181b7f55d074fc855fcec6c" gradientTransform="matrix(1 0 0 1 0.000 0.000)"><stop offset="0" stop-color="rgba(255, 255, 255, 0)"></stop><stop offset="0.33" stop-color="rgba(121, 119, 117, 0.3)"></stop><stop offset="0.66" stop-color="rgba(255, 255, 255, 0)"></stop><stop offset="1" stop-color="rgba(255, 255, 255, 0)"></stop></radialGradient></defs><rect x="1" y="1" rx="3" ry="3" style="box-sizing:border-box;width:-2px;height:-2px;stroke:url(#borderG_c9c646f82181b7f55d074fc855fcec6c);fill:transparent;stroke-width:2;"></rect><rect style="display:none;stroke:transparent;box-sizing:border-box;width:-2px;height:-2px;fill:transparent;stroke-width:2;" x="1" y="1" rx="3" ry="3"></rect></svg></div><div class="fv-text-box-wrapper-container" style="border-width:2px;border-color:rgba(120, 120, 120, 0.1);border-radius:3px;"><div style="display:none;" class="fix-block"><p></p></div><i style="display:none;" class="ms-Icon-- ms-Icon icon-block"></i><div class="text-box-container"><input value="0" inputmode="text" type="text" placeholder="0" class="fv-text-box-input" maxlength="3" style="font-size:13.3px;font-weight:normal;color:;text-align:left;"><!----></div><i style="display:none;" class="ms-Icon-- ms-Icon icon-block"></i><div style="display:none;" class="fix-block"><p></p></div></div></div></div></div><div class="row"><div class="cell"><span class="fv-color-picker-text">Blue</span><div class="fv-TextBox light underline" style="background:;border-radius:3px;width:118px;" min-width="118px"><div class="fv-RevealContainer light fv-text-box-reveal-container" style="border-radius:3px;"><svg style="display:none;" width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> &gt; <defs><radialGradient cx="50%" cy="50%" r="120" gradientUnits="userSpaceOnUse" spreadMethod="pad" id="backgroundG_3a7b652eec4a46ab36202f5c42748ad0" gradientTransform="matrix(1 0 0 1 0.000 0.000)"><stop offset="0" stop-color="rgba(121, 119, 117, 0.3)"></stop><stop offset="1" stop-color="rgba(255, 255, 255, 0)"></stop><!--[--><!--]--></radialGradient><radialGradient cx="50%" cy="50%" r="60" gradientUnits="userSpaceOnUse" spreadMethod="pad" id="borderG_3a7b652eec4a46ab36202f5c42748ad0" gradientTransform="matrix(1 0 0 1 0.000 0.000)"><stop offset="0" stop-color="rgba(121, 119, 117, 0.6)"></stop><stop offset="1" stop-color="rgba(255, 255, 255, 0)"></stop><!--[--><!--]--></radialGradient><radialGradient cx="50%" cy="50%" r="0" gradientUnits="userSpaceOnUse" spreadMethod="pad" id="clickG_3a7b652eec4a46ab36202f5c42748ad0" gradientTransform="matrix(1 0 0 1 0.000 0.000)"><stop offset="0" stop-color="rgba(255, 255, 255, 0)"></stop><stop offset="0.33" stop-color="rgba(121, 119, 117, 0.3)"></stop><stop offset="0.66" stop-color="rgba(255, 255, 255, 0)"></stop><stop offset="1" stop-color="rgba(255, 255, 255, 0)"></stop></radialGradient></defs><rect x="1" y="1" rx="3" ry="3" style="box-sizing:border-box;width:-2px;height:-2px;stroke:url(#borderG_3a7b652eec4a46ab36202f5c42748ad0);fill:transparent;stroke-width:2;"></rect><rect style="display:none;stroke:transparent;box-sizing:border-box;width:-2px;height:-2px;fill:transparent;stroke-width:2;" x="1" y="1" rx="3" ry="3"></rect></svg></div><div class="fv-text-box-wrapper-container" style="border-width:2px;border-color:rgba(120, 120, 120, 0.1);border-radius:3px;"><div style="display:none;" class="fix-block"><p></p></div><i style="display:none;" class="ms-Icon-- ms-Icon icon-block"></i><div class="text-box-container"><input value="0" inputmode="text" type="text" placeholder="0" class="fv-text-box-input" maxlength="3" style="font-size:13.3px;font-weight:normal;color:;text-align:left;"><!----></div><i style="display:none;" class="ms-Icon-- ms-Icon icon-block"></i><div style="display:none;" class="fix-block"><p></p></div></div></div><div class="fv-TextBox light underline" style="background:;border-radius:3px;display:none;width:118px;" min-width="118px"><div class="fv-RevealContainer light fv-text-box-reveal-container" style="border-radius:3px;"><svg style="display:none;" width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> &gt; <defs><radialGradient cx="50%" cy="50%" r="120" gradientUnits="userSpaceOnUse" spreadMethod="pad" id="backgroundG_1544c177842a28f5d29888687070eba5" gradientTransform="matrix(1 0 0 1 0.000 0.000)"><stop offset="0" stop-color="rgba(121, 119, 117, 0.3)"></stop><stop offset="1" stop-color="rgba(255, 255, 255, 0)"></stop><!--[--><!--]--></radialGradient><radialGradient cx="50%" cy="50%" r="60" gradientUnits="userSpaceOnUse" spreadMethod="pad" id="borderG_1544c177842a28f5d29888687070eba5" gradientTransform="matrix(1 0 0 1 0.000 0.000)"><stop offset="0" stop-color="rgba(121, 119, 117, 0.6)"></stop><stop offset="1" stop-color="rgba(255, 255, 255, 0)"></stop><!--[--><!--]--></radialGradient><radialGradient cx="50%" cy="50%" r="0" gradientUnits="userSpaceOnUse" spreadMethod="pad" id="clickG_1544c177842a28f5d29888687070eba5" gradientTransform="matrix(1 0 0 1 0.000 0.000)"><stop offset="0" stop-color="rgba(255, 255, 255, 0)"></stop><stop offset="0.33" stop-color="rgba(121, 119, 117, 0.3)"></stop><stop offset="0.66" stop-color="rgba(255, 255, 255, 0)"></stop><stop offset="1" stop-color="rgba(255, 255, 255, 0)"></stop></radialGradient></defs><rect x="1" y="1" rx="3" ry="3" style="box-sizing:border-box;width:-2px;height:-2px;stroke:url(#borderG_1544c177842a28f5d29888687070eba5);fill:transparent;stroke-width:2;"></rect><rect style="display:none;stroke:transparent;box-sizing:border-box;width:-2px;height:-2px;fill:transparent;stroke-width:2;" x="1" y="1" rx="3" ry="3"></rect></svg></div><div class="fv-text-box-wrapper-container" style="border-width:2px;border-color:rgba(120, 120, 120, 0.1);border-radius:3px;"><div style="display:none;" class="fix-block"><p></p></div><i style="display:none;" class="ms-Icon-- ms-Icon icon-block"></i><div class="text-box-container"><input value="0" inputmode="text" type="text" placeholder="0" class="fv-text-box-input" maxlength="3" style="font-size:13.3px;font-weight:normal;color:;text-align:left;"><!----></div><i style="display:none;" class="ms-Icon-- ms-Icon icon-block"></i><div style="display:none;" class="fix-block"><p></p></div></div></div></div></div><div class="row"><div class="cell"><span class="fv-color-picker-text">Opacity</span><div class="fv-TextBox light underline" style="background:;border-radius:3px;width:118px;" min-width="118px"><div class="fv-RevealContainer light fv-text-box-reveal-container" style="border-radius:3px;"><svg style="display:none;" width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> &gt; <defs><radialGradient cx="50%" cy="50%" r="120" gradientUnits="userSpaceOnUse" spreadMethod="pad" id="backgroundG_fbbee19d925685f10fd67152edd056f4" gradientTransform="matrix(1 0 0 1 0.000 0.000)"><stop offset="0" stop-color="rgba(121, 119, 117, 0.3)"></stop><stop offset="1" stop-color="rgba(255, 255, 255, 0)"></stop><!--[--><!--]--></radialGradient><radialGradient cx="50%" cy="50%" r="60" gradientUnits="userSpaceOnUse" spreadMethod="pad" id="borderG_fbbee19d925685f10fd67152edd056f4" gradientTransform="matrix(1 0 0 1 0.000 0.000)"><stop offset="0" stop-color="rgba(121, 119, 117, 0.6)"></stop><stop offset="1" stop-color="rgba(255, 255, 255, 0)"></stop><!--[--><!--]--></radialGradient><radialGradient cx="50%" cy="50%" r="0" gradientUnits="userSpaceOnUse" spreadMethod="pad" id="clickG_fbbee19d925685f10fd67152edd056f4" gradientTransform="matrix(1 0 0 1 0.000 0.000)"><stop offset="0" stop-color="rgba(255, 255, 255, 0)"></stop><stop offset="0.33" stop-color="rgba(121, 119, 117, 0.3)"></stop><stop offset="0.66" stop-color="rgba(255, 255, 255, 0)"></stop><stop offset="1" stop-color="rgba(255, 255, 255, 0)"></stop></radialGradient></defs><rect x="1" y="1" rx="3" ry="3" style="box-sizing:border-box;width:-2px;height:-2px;stroke:url(#borderG_fbbee19d925685f10fd67152edd056f4);fill:transparent;stroke-width:2;"></rect><rect style="display:none;stroke:transparent;box-sizing:border-box;width:-2px;height:-2px;fill:transparent;stroke-width:2;" x="1" y="1" rx="3" ry="3"></rect></svg></div><div class="fv-text-box-wrapper-container" style="border-width:2px;border-color:rgba(120, 120, 120, 0.1);border-radius:3px;"><div style="display:none;" class="fix-block"><p></p></div><i style="display:none;" class="ms-Icon-- ms-Icon icon-block"></i><div class="text-box-container"><input value="100%" inputmode="text" type="text" placeholder="0" class="fv-text-box-input" maxlength="3" style="font-size:13.3px;font-weight:normal;color:;text-align:left;"><!----></div><i style="display:none;" class="ms-Icon-- ms-Icon icon-block"></i><div style="display:none;" class="fix-block"><p></p></div></div></div></div></div></div></div></div><div class="language-template vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">template</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-color-picker</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">theme</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-color-picker</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-label="Permalink to &quot;Properties&quot;">​</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">disabled</td></tr><tr><td style="text-align:center;">lang</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">i18n</td></tr><tr><td style="text-align:center;">model-value</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">v-model</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">theme</td></tr><tr><td style="text-align:center;">type</td><td style="text-align:center;">[&#39;box&#39;, &#39;ring&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;box&#39;</td><td style="text-align:center;">color-picker type</td></tr></tbody></table><h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-label="Permalink to &quot;Emits&quot;">​</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">update:model-value</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">v-model</td></tr></tbody></table></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-09de1c0f><!--[--><!--]--><!----><nav class="prev-next" data-v-09de1c0f><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link prev" href="/VFluent3/guide/components/check-box/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Previous page</span><span class="title" data-v-09de1c0f>CheckBox</span><!--]--></a></div><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link next" href="/VFluent3/guide/components/combobox/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Next page</span><span class="title" data-v-09de1c0f>Combobox</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>MIT Licensed</p><p class="copyright" data-v-e315a0ad>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_calendar-date-picker_properties.md\":\"DXRjmMG8\",\"guide_components_image_properties.md\":\"DGanRzCb\",\"guide_components_img-box_index.md\":\"DYtggkf_\",\"guide_components_img_emits.md\":\"BlE7jvZQ\",\"guide_components_img_index.md\":\"Bm9FiuU4\",\"guide_components_icon-element_properties.md\":\"8Oakruwc\",\"guide_components_img_properties.md\":\"B42YSocI\",\"guide_components_drawer_index.md\":\"D_vpnCpE\",\"guide_components_verify-box_emits.md\":\"DT17Iazx\",\"guide_components_calendar-date-picker_index.md\":\"BdHjrurh\",\"guide_components_rating-control_index.md\":\"Q9l5Lfrr\",\"guide_components_rating-control_properties.md\":\"DKprnl0i\",\"guide_components_calendar-view_index.md\":\"zdoRYVx1\",\"guide_components_animated-icon_index.md\":\"yZDMzCFe\",\"guide_components_calendar-date-picker_emits.md\":\"D5OkfR8j\",\"guide_components_badge_index.md\":\"Bb4crrJn\",\"guide_components_image_index.md\":\"B7X6cWAZ\",\"guide_components_slider_index.md\":\"C7zZ2d-W\",\"guide_components_radio-group_index.md\":\"CVfh3h5H\",\"guide_components_swipe-control_index.md\":\"DwrDVPc1\",\"guide_components_color-picker_emits.md\":\"BHDXVtBQ\",\"guide_components_radio_index.md\":\"90as5QGp\",\"guide_components_pagination_properties.md\":\"JUAPvcTL\",\"guide_components_persona_properties.md\":\"DUTPhPMp\",\"guide_components_combo-box_emits.md\":\"Dh5R-qEv\",\"guide_components_pivot_emits.md\":\"BTJPgNpy\",\"guide_components_pagination_index.md\":\"CnW2zAht\",\"guide_components_flip-view_properties.md\":\"BqZ4hhgU\",\"guide_components_icon-element_emits.md\":\"D5TXFdTZ\",\"guide_components_flip-view_index.md\":\"DefnDOv6\",\"guide_components_navigation-panel_index.md\":\"6mO__sSK\",\"guide_components_rating-control_emits.md\":\"blvomSeC\",\"guide_components_icon-element_index.md\":\"DQ8K7JNn\",\"guide_components_navigation-view_index.md\":\"4AQRiz1k\",\"guide_components_toggle-switch_emits.md\":\"CLGzrNut\",\"guide_components_toggle-switch_index.md\":\"61en_q9-\",\"guide_components_scroll-story_index.md\":\"Vpgb1HSV\",\"guide_components_reveal-container_index.md\":\"Cut2r4tV\",\"guide_components_search-box_emits.md\":\"-d9sWNNt\",\"guide_components_search-box_properties.md\":\"DEKFfPFw\",\"guide_components_shimmer_emits.md\":\"CTMInlI3\",\"guide_components_tag_index.md\":\"BhhxkcHn\",\"guide_components_search-box_index.md\":\"DgkrY0oY\",\"guide_components_shimmer_index.md\":\"iZlHuTxw\",\"guide_components_shimmer_properties.md\":\"CdkU1o6H\",\"guide_components_tree-view_index.md\":\"CUrwan4q\",\"guide_components_text-field_index.md\":\"CXSimJtj\",\"guide_components_text-box_index.md\":\"C5moAPfB\",\"guide_components_progress-ring_properties.md\":\"Dc08Uiff\",\"guide_components_toggle-switch_properties.md\":\"tFppK_IS\",\"guide_components_radio-group_emits.md\":\"cEDzKVnN\",\"guide_components_collapse_index.md\":\"N9Iu5-2v\",\"guide_components_image_emits.md\":\"lmlz2xJd\",\"guide_components_callout_index.md\":\"D9RU33w6\",\"guide_components_pivot_index.md\":\"B_vwQL-5\",\"guide_components_command-bar_index.md\":\"Cp4_rrGB\",\"guide_components_pagination_emits.md\":\"Dng86A22\",\"guide_components_button_index.md\":\"7sqT2MQP\",\"guide_components_info-box_properties.md\":\"BI7Nvk-E\",\"guide_components_drop-down_emits.md\":\"BE95TdKW\",\"guide_components_expander_index.md\":\"BKgcUJzQ\",\"guide_components_message-bar_index.md\":\"AEtAWlF8\",\"guide_components_menu-flyout_index.md\":\"Csa7irPj\",\"guide_components_panel_index.md\":\"CsTu0bXo\",\"guide_components_panel_properties.md\":\"BaxoCYKq\",\"guide_components_progress-bar_emits.md\":\"BcwXUpsF\",\"guide_components_progress-bar_properties.md\":\"TxiS9ZMA\",\"guide_components_progress-ring_emits.md\":\"D2Y6hIZ9\",\"guide_components_color-picker_index.md\":\"DCc4ixcU\",\"guide_components_progress-ring_index.md\":\"CPb-ZEPE\",\"guide_components_color-picker_properties.md\":\"wcXK29Vl\",\"guide_components_time-picker_index.md\":\"CQJdRRaG\",\"guide_components_drop-down_properties.md\":\"Bwlkpr1q\",\"guide_components_infinite-scroll-view_index.md\":\"yAuD807x\",\"guide_components_check-box_index.md\":\"FYgdu4oq\",\"guide_components_progress-bar_index.md\":\"D8vHQw5V\",\"guide_components_combo-box_index.md\":\"DTyu3eNd\",\"guide_components_info-box_emits.md\":\"DlEwpkkq\",\"guide_components_drop-down_index.md\":\"BZzJZQWq\",\"guide_components_list-view_index.md\":\"BoYvMzb0\",\"guide_components_verify-box_properties.md\":\"CW6W8fFf\",\"guide_components_verify-box_index.md\":\"DwSB40wR\",\"guide_index.md\":\"Bndlt3sL\",\"guide_components_web-window_index.md\":\"Bxc8vEeI\",\"index.md\":\"MTRqI42u\",\"guide_components_combo-box_properties.md\":\"AWfHzV6x\",\"guide_components_combobox_emits.md\":\"CGB6WLt8\",\"guide_components_combobox_properties.md\":\"Bja0hMou\",\"guide_components_details-list_index.md\":\"CcgOCIyt\",\"guide_components_info-box_index.md\":\"vXh-_DsL\",\"guide_components_combobox_index.md\":\"CsPkY6YB\",\"guide_components_date-picker_index.md\":\"12vmUIup\",\"guide_components_flip-view_emits.md\":\"DCheHjDj\",\"guide_components_panel_emits.md\":\"DG0REDq8\",\"guide_components_breadcrumb_index.md\":\"DyDm7PeP\",\"guide_components_radio-group_properties.md\":\"BnPxoKsQ\",\"guide_components_persona_emits.md\":\"CnsDPKRU\",\"guide_components_pivot_properties.md\":\"BmoLpPi1\",\"guide_components_persona_index.md\":\"DT00jby4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vfluent3\",\"description\":\"A Vue3 component library for Fluent UI\",\"base\":\"/VFluent3/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"VFluent3\",\"footer\":{\"message\":\"MIT Licensed\",\"copyright\":\"Copyright © Creator SN - 2022\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/\"}],\"sidebar\":[{\"text\":\"Basic input\",\"collapsed\":true,\"items\":[{\"text\":\"Button\",\"link\":\"/guide/components/button/\"},{\"text\":\"CheckBox\",\"link\":\"/guide/components/check-box/\"},{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"},{\"text\":\"Combobox\",\"link\":\"/guide/components/combobox/\"},{\"text\":\"DetailsList\",\"link\":\"/guide/components/details-list/\"},{\"text\":\"DropDown\",\"link\":\"/guide/components/drop-down/\"},{\"text\":\"Radio\",\"link\":\"/guide/components/radio/\"},{\"text\":\"RadioGroup\",\"link\":\"/guide/components/radio-group/\"},{\"text\":\"RatingControl\",\"link\":\"/guide/components/rating-control/\"},{\"text\":\"Slider\",\"link\":\"/guide/components/slider/\"},{\"text\":\"ToggleSwitch\",\"link\":\"/guide/components/toggle-switch/\"},{\"text\":\"Tag\",\"link\":\"/guide/components/tag/\"}]},{\"text\":\"Collections\",\"collapsed\":true,\"items\":[{\"text\":\"FlipView\",\"link\":\"/guide/components/flip-view/\"},{\"text\":\"ListView\",\"link\":\"/guide/components/list-view/\"},{\"text\":\"TreeView\",\"link\":\"/guide/components/tree-view/\"}]},{\"text\":\"Date & Time\",\"collapsed\":true,\"items\":[{\"text\":\"CalendarDatePicker\",\"link\":\"/guide/components/calendar-date-picker/\"},{\"text\":\"CalendarView\",\"link\":\"/guide/components/calendar-view/\"},{\"text\":\"DatePicker\",\"link\":\"/guide/components/date-picker/\"},{\"text\":\"TimePicker\",\"link\":\"/guide/components/time-picker/\"}]},{\"text\":\"Dialogs & flyouts\",\"collapsed\":true,\"items\":[{\"text\":\"Callout\",\"link\":\"/guide/components/callout/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Layout\",\"collapsed\":true,\"items\":[{\"text\":\"Collapse\",\"link\":\"/guide/components/collapse/\"},{\"text\":\"Expander\",\"link\":\"/guide/components/expander/\"},{\"text\":\"Drawer\",\"link\":\"/guide/components/drawer/\"},{\"text\":\"Panel\",\"link\":\"/guide/components/panel/\"}]},{\"text\":\"Media\",\"collapsed\":true,\"items\":[{\"text\":\"Image\",\"link\":\"/guide/components/image/\"},{\"text\":\"Img\",\"link\":\"/guide/components/img/\"},{\"text\":\"ImgBox\",\"link\":\"/guide/components/img-box/\"},{\"text\":\"Persona\",\"link\":\"/guide/components/persona/\"}]},{\"text\":\"Menu & toolbars\",\"collapsed\":true,\"items\":[{\"text\":\"CommandBar\",\"link\":\"/guide/components/command-bar/\"},{\"text\":\"MenuFlyout\",\"link\":\"/guide/components/menu-flyout/\"},{\"text\":\"SwipeControl\",\"link\":\"/guide/components/swipe-control/\"}]},{\"text\":\"Navigation\",\"collapsed\":true,\"items\":[{\"text\":\"Breadcrumb\",\"link\":\"/guide/components/breadcrumb/\"},{\"text\":\"NavigationPanel\",\"link\":\"/guide/components/navigation-panel/\"},{\"text\":\"NavigationView\",\"link\":\"/guide/components/navigation-view/\"},{\"text\":\"Pivot\",\"link\":\"/guide/components/pivot/\"},{\"text\":\"Pagination\",\"link\":\"/guide/components/pagination/\"}]},{\"text\":\"Scrolling\",\"collapsed\":true,\"items\":[{\"text\":\"InfiniteScrollView\",\"link\":\"/guide/components/infinite-scroll-view/\"},{\"text\":\"ScrollStory\",\"link\":\"/guide/components/scroll-story/\"}]},{\"text\":\"Status & info\",\"collapsed\":true,\"items\":[{\"text\":\"Badge\",\"link\":\"/guide/components/badge/\"},{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"ProgressBar\",\"link\":\"/guide/components/progress-bar/\"},{\"text\":\"ProgressRing\",\"link\":\"/guide/components/progress-ring/\"}]},{\"text\":\"Styles\",\"collapsed\":true,\"items\":[{\"text\":\"AnimatedIcon\",\"link\":\"/guide/components/animated-icon/\"},{\"text\":\"IconElement\",\"link\":\"/guide/components/icon-element/\"},{\"text\":\"RevealContainer\",\"link\":\"/guide/components/reveal-container/\"},{\"text\":\"Shimmer\",\"link\":\"/guide/components/shimmer/\"}]},{\"text\":\"Text\",\"collapsed\":true,\"items\":[{\"text\":\"SearchBox\",\"link\":\"/guide/components/search-box/\"},{\"text\":\"TextBox\",\"link\":\"/guide/components/text-box/\"},{\"text\":\"TextField\",\"link\":\"/guide/components/text-field/\"},{\"text\":\"VerifyBox\",\"link\":\"/guide/components/verify-box/\"}]},{\"text\":\"Windowing\",\"collapsed\":true,\"items\":[{\"text\":\"WebWindow\",\"link\":\"/guide/components/web-window/\"}]},{\"text\":\"Global\",\"collapsed\":true,\"items\":[{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Advance\",\"collapsed\":true,\"items\":[{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
     
   </body>
 </html>
\ No newline at end of file
diff --git a/guide/components/color-picker/properties.html b/guide/components/color-picker/properties.html
index 2632b40..73c0f0a 100644
--- a/guide/components/color-picker/properties.html
+++ b/guide/components/color-picker/properties.html
@@ -1,20 +1,24 @@
 <!DOCTYPE html>
-<html lang="en-US">
+<html lang="en-US" dir="ltr">
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>Properties | vfluent3</title>
+    <title>vfluent3</title>
     <meta name="description" content="A Vue3 component library for Fluent UI">
-    <link rel="stylesheet" href="/VFluent3/assets/style.0a1d87af.css">
-    <link rel="modulepreload" href="/VFluent3/assets/app.d60fa8c3.js">
-    <link rel="modulepreload" href="/VFluent3/assets/guide_components_color-picker_properties.md.5466ba72.lean.js">
+    <meta name="generator" content="VitePress v1.0.0-rc.45">
+    <link rel="preload stylesheet" href="/VFluent3/assets/style.BabQegKX.css" as="style">
     
-    <script>(()=>{const e=localStorage.getItem("vitepress-theme-appearance"),a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script type="module" src="/VFluent3/assets/app.CSutcJ2E.js"></script>
+    <link rel="preload" href="/VFluent3/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/framework.DvIFzl91.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/theme.CgqFBnN_.js">
+    <link rel="modulepreload" href="/VFluent3/assets/guide_components_color-picker_properties.md.wcXK29Vl.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
   </head>
   <body>
-    <div id="app"><div class="Layout" data-v-058b7495><!--[--><!--]--><!--[--><span tabindex="-1" data-v-bea91388></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-bea91388> Skip to content </a><!--]--><!----><header class="VPNav" data-v-058b7495 data-v-2a0a2738><div class="VPNavBar has-sidebar" data-v-2a0a2738 data-v-45c9f423><div class="container" data-v-45c9f423><div class="VPNavBarTitle has-sidebar" data-v-45c9f423 data-v-011600ce><a class="title" href="/VFluent3/" data-v-011600ce><!----><!--[-->VFluent3<!--]--></a></div><div class="content" data-v-45c9f423><!----><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-45c9f423 data-v-4da4371d><span id="main-nav-aria-label" class="visually-hidden" data-v-4da4371d>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" data-v-4da4371d data-v-66f8d518 data-v-4d08dd3a><!--[-->Home<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" data-v-4da4371d data-v-66f8d518 data-v-4d08dd3a><!--[-->Guide<!--]--><!----></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-45c9f423 data-v-bf1c94ca><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" data-v-bf1c94ca data-v-d0ee0df2 data-v-55b931a0><span class="check" data-v-55b931a0><span class="icon" data-v-55b931a0><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-d0ee0df2><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-d0ee0df2><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-45c9f423 data-v-7cece6ac data-v-37af1650><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-37af1650><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-37af1650><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-37af1650><div class="VPMenu" data-v-37af1650 data-v-17dc081b><!----><!--[--><!--[--><!----><div class="group" data-v-7cece6ac><div class="item appearance" data-v-7cece6ac><p class="label" data-v-7cece6ac>Appearance</p><div class="appearance-action" data-v-7cece6ac><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" data-v-7cece6ac data-v-d0ee0df2 data-v-55b931a0><span class="check" data-v-55b931a0><span class="icon" data-v-55b931a0><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-d0ee0df2><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-d0ee0df2><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-45c9f423 data-v-5484e669><span class="container" data-v-5484e669><span class="top" data-v-5484e669></span><span class="middle" data-v-5484e669></span><span class="bottom" data-v-5484e669></span></span></button></div></div></div><!----></header><div class="VPLocalNav" data-v-058b7495 data-v-f623cd72><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-f623cd72><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-f623cd72><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-f623cd72>Menu</span></button><a class="top-link" href="#" data-v-f623cd72> Return to top </a></div><aside class="VPSidebar" data-v-058b7495 data-v-3b8ec0c7><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-3b8ec0c7><span class="visually-hidden" id="sidebar-aria-label" data-v-3b8ec0c7> Sidebar Navigation </span><!--[--><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Basic</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/button/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Button</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/check-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>CheckBox</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/radio/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Radio</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/progress-bar/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ProgressBar</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/progress-ring/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ProgressRing</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/toggle-switch/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ToggleSwitch</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/img/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Img</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/text-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>TextBox</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/combo-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ComboBox</span><!--]--><!----></a><!--]--></div></section></div><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Global</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/message-bar/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>MessageBar</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/info-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>InfoBox</span><!--]--><!----></a><!--]--></div></section></div><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Advance</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/color-picker/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ColorPicker</span><!--]--><!----></a><!--]--></div></section></div><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-058b7495 data-v-564173e9><div class="VPDoc has-sidebar" data-v-564173e9 data-v-32b7ddf4><div class="container" data-v-32b7ddf4><div class="aside" data-v-32b7ddf4><div class="aside-curtain" data-v-32b7ddf4></div><div class="aside-container" data-v-32b7ddf4><div class="aside-content" data-v-32b7ddf4><div class="VPDocAside" data-v-32b7ddf4 data-v-35c1bae1><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline has-outline" data-v-35c1bae1 data-v-123cce62><div class="content" data-v-123cce62><div class="outline-marker" data-v-123cce62></div><div class="outline-title" data-v-123cce62>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-123cce62><span class="visually-hidden" id="doc-outline-aria-label" data-v-123cce62> Table of Contents for current page </span><ul class="root" data-v-123cce62><!--[--><li style="" data-v-123cce62><a class="outline-link" href="#properties" data-v-123cce62>Properties</a><!----></li><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-35c1bae1></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-32b7ddf4><div class="content-container" data-v-32b7ddf4><!--[--><!--]--><main class="main" data-v-32b7ddf4><div style="position:relative;" class="vp-doc _VFluent3_guide_components_color-picker_properties" data-v-32b7ddf4><div><h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">disabled</td></tr><tr><td style="text-align:center;">lang</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">i18n</td></tr><tr><td style="text-align:center;">model-value</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">v-model</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">theme</td></tr><tr><td style="text-align:center;">type</td><td style="text-align:center;">[&#39;box&#39;, &#39;ring&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;box&#39;</td><td style="text-align:center;">color-picker type</td></tr></tbody></table></div></div></main><footer class="VPDocFooter" data-v-32b7ddf4 data-v-cfaa3a6c><div class="edit-info" data-v-cfaa3a6c><!----><!----></div><div class="prev-next" data-v-cfaa3a6c><div class="pager" data-v-cfaa3a6c><!----></div><div class="pager" data-v-cfaa3a6c><a class="pager-link next" href="/VFluent3/guide/components/button/" data-v-cfaa3a6c><span class="desc" data-v-cfaa3a6c>Next page</span><span class="title" data-v-cfaa3a6c>Button</span></a></div></div></footer><!--[--><!--]--></div></div></div></div></div><footer class="VPFooter has-sidebar" data-v-058b7495 data-v-a6c8dde4><div class="container" data-v-a6c8dde4><p class="message" data-v-a6c8dde4>MIT Licensed</p><p class="copyright" data-v-a6c8dde4>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
-    <script>__VP_HASH_MAP__ = JSON.parse("{\"guide_components_button_emits.md\":\"d682bf18\",\"guide_components_button_index.md\":\"23a8eb54\",\"guide_components_button_properties.md\":\"cd4004b6\",\"guide_components_check-box_emits.md\":\"31609794\",\"guide_components_check-box_index.md\":\"32046814\",\"guide_components_check-box_properties.md\":\"8f33ac0c\",\"guide_components_color-picker_emits.md\":\"00983cd0\",\"guide_components_color-picker_index.md\":\"b2d62612\",\"guide_components_color-picker_properties.md\":\"5466ba72\",\"guide_components_combo-box_emits.md\":\"d5ffda50\",\"guide_components_combo-box_index.md\":\"1c4364f5\",\"guide_components_combo-box_properties.md\":\"2e1d6060\",\"guide_components_img_emits.md\":\"6237adb4\",\"guide_components_img_index.md\":\"fa51a3a1\",\"guide_components_img_properties.md\":\"8d321b5e\",\"guide_components_info-box_emits.md\":\"c2e71eec\",\"guide_components_info-box_index.md\":\"06175fed\",\"guide_components_info-box_properties.md\":\"314dbb00\",\"guide_components_message-bar_emits.md\":\"e89a5a22\",\"guide_components_message-bar_index.md\":\"3f0b01d6\",\"guide_components_message-bar_properties.md\":\"ee3838d9\",\"guide_components_progress-bar_emits.md\":\"5b611e3b\",\"guide_components_progress-bar_index.md\":\"689c3241\",\"guide_components_progress-bar_properties.md\":\"39af7fb2\",\"guide_components_progress-ring_emits.md\":\"67e4644e\",\"guide_components_progress-ring_index.md\":\"9a33542b\",\"guide_components_progress-ring_properties.md\":\"c897c4bb\",\"guide_components_radio_emits.md\":\"28506857\",\"guide_components_radio_index.md\":\"e5a479ce\",\"guide_components_radio_properties.md\":\"f8e55d2f\",\"guide_components_text-box_emits.md\":\"0bf89ef8\",\"guide_components_text-box_index.md\":\"7ccfc637\",\"guide_components_text-box_properties.md\":\"aab3a89e\",\"guide_components_toggle-switch_emits.md\":\"5146435f\",\"guide_components_toggle-switch_index.md\":\"8be48081\",\"guide_components_toggle-switch_properties.md\":\"54984c3a\",\"guide_index.md\":\"e3dca1d7\",\"index.md\":\"1e9773d5\"}")</script>
-    <script type="module" async src="/VFluent3/assets/app.d60fa8c3.js"></script>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-19c990f1><div class="wrapper" data-v-19c990f1><div class="container" data-v-19c990f1><div class="title" data-v-19c990f1><div class="VPNavBarTitle has-sidebar" data-v-19c990f1 data-v-ab179fa1><a class="title" href="/VFluent3/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>VFluent3</span><!--[--><!--]--></a></div></div><div class="content" data-v-19c990f1><div class="content-body" data-v-19c990f1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-19c990f1><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-19c990f1 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Guide</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-19c990f1 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-19c990f1 data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-19c990f1 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-19c990f1><div class="divider-line" data-v-19c990f1></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-d2ecc192><button data-v-d2ecc192>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-575e6a36><div class="curtain" data-v-575e6a36></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-575e6a36><span class="visually-hidden" id="sidebar-aria-label" data-v-575e6a36> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Basic input</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/button/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/check-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CheckBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/combobox/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Combobox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/details-list/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DetailsList</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drop-down/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DropDown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio-group/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RadioGroup</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/rating-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RatingControl</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/slider/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/toggle-switch/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ToggleSwitch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tag/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Tag</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Collections</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/flip-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>FlipView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/list-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ListView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tree-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TreeView</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Date & Time</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarDatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/time-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TimePicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Dialogs & flyouts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/callout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Callout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Layout</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/collapse/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Collapse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/expander/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Expander</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drawer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Panel</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Media</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/image/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Img</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ImgBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/persona/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Persona</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Menu & toolbars</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/command-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CommandBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/menu-flyout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MenuFlyout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/swipe-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SwipeControl</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Navigation</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/breadcrumb/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationPanel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pivot/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pivot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pagination/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pagination</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Scrolling</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/infinite-scroll-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfiniteScrollView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/scroll-story/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ScrollStory</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Status & info</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/badge/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-ring/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressRing</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Styles</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/animated-icon/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>AnimatedIcon</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/icon-element/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>IconElement</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/reveal-container/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RevealContainer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/shimmer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Shimmer</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Text</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/search-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SearchBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-field/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextField</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/verify-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>VerifyBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Windowing</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/web-window/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>WebWindow</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Global</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Advance</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-935f8a84><div class="content" data-v-935f8a84><div class="outline-marker" data-v-935f8a84></div><div class="outline-title" role="heading" aria-level="2" data-v-935f8a84>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-935f8a84><span class="visually-hidden" id="doc-outline-aria-label" data-v-935f8a84> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-935f8a84 data-v-b933a997><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _VFluent3_guide_components_color-picker_properties" data-v-39a288b8><div><h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-label="Permalink to &quot;Properties&quot;">​</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">disabled</td></tr><tr><td style="text-align:center;">lang</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">i18n</td></tr><tr><td style="text-align:center;">model-value</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">v-model</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">theme</td></tr><tr><td style="text-align:center;">type</td><td style="text-align:center;">[&#39;box&#39;, &#39;ring&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;box&#39;</td><td style="text-align:center;">color-picker type</td></tr></tbody></table></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-09de1c0f><!--[--><!--]--><!----><nav class="prev-next" data-v-09de1c0f><div class="pager" data-v-09de1c0f><!----></div><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link next" href="/VFluent3/guide/components/button/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Next page</span><span class="title" data-v-09de1c0f>Button</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>MIT Licensed</p><p class="copyright" data-v-e315a0ad>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_calendar-date-picker_properties.md\":\"DXRjmMG8\",\"guide_components_image_properties.md\":\"DGanRzCb\",\"guide_components_img-box_index.md\":\"DYtggkf_\",\"guide_components_img_emits.md\":\"BlE7jvZQ\",\"guide_components_img_index.md\":\"Bm9FiuU4\",\"guide_components_icon-element_properties.md\":\"8Oakruwc\",\"guide_components_img_properties.md\":\"B42YSocI\",\"guide_components_drawer_index.md\":\"D_vpnCpE\",\"guide_components_verify-box_emits.md\":\"DT17Iazx\",\"guide_components_calendar-date-picker_index.md\":\"BdHjrurh\",\"guide_components_rating-control_index.md\":\"Q9l5Lfrr\",\"guide_components_rating-control_properties.md\":\"DKprnl0i\",\"guide_components_calendar-view_index.md\":\"zdoRYVx1\",\"guide_components_animated-icon_index.md\":\"yZDMzCFe\",\"guide_components_calendar-date-picker_emits.md\":\"D5OkfR8j\",\"guide_components_badge_index.md\":\"Bb4crrJn\",\"guide_components_image_index.md\":\"B7X6cWAZ\",\"guide_components_slider_index.md\":\"C7zZ2d-W\",\"guide_components_radio-group_index.md\":\"CVfh3h5H\",\"guide_components_swipe-control_index.md\":\"DwrDVPc1\",\"guide_components_color-picker_emits.md\":\"BHDXVtBQ\",\"guide_components_radio_index.md\":\"90as5QGp\",\"guide_components_pagination_properties.md\":\"JUAPvcTL\",\"guide_components_persona_properties.md\":\"DUTPhPMp\",\"guide_components_combo-box_emits.md\":\"Dh5R-qEv\",\"guide_components_pivot_emits.md\":\"BTJPgNpy\",\"guide_components_pagination_index.md\":\"CnW2zAht\",\"guide_components_flip-view_properties.md\":\"BqZ4hhgU\",\"guide_components_icon-element_emits.md\":\"D5TXFdTZ\",\"guide_components_flip-view_index.md\":\"DefnDOv6\",\"guide_components_navigation-panel_index.md\":\"6mO__sSK\",\"guide_components_rating-control_emits.md\":\"blvomSeC\",\"guide_components_icon-element_index.md\":\"DQ8K7JNn\",\"guide_components_navigation-view_index.md\":\"4AQRiz1k\",\"guide_components_toggle-switch_emits.md\":\"CLGzrNut\",\"guide_components_toggle-switch_index.md\":\"61en_q9-\",\"guide_components_scroll-story_index.md\":\"Vpgb1HSV\",\"guide_components_reveal-container_index.md\":\"Cut2r4tV\",\"guide_components_search-box_emits.md\":\"-d9sWNNt\",\"guide_components_search-box_properties.md\":\"DEKFfPFw\",\"guide_components_shimmer_emits.md\":\"CTMInlI3\",\"guide_components_tag_index.md\":\"BhhxkcHn\",\"guide_components_search-box_index.md\":\"DgkrY0oY\",\"guide_components_shimmer_index.md\":\"iZlHuTxw\",\"guide_components_shimmer_properties.md\":\"CdkU1o6H\",\"guide_components_tree-view_index.md\":\"CUrwan4q\",\"guide_components_text-field_index.md\":\"CXSimJtj\",\"guide_components_text-box_index.md\":\"C5moAPfB\",\"guide_components_progress-ring_properties.md\":\"Dc08Uiff\",\"guide_components_toggle-switch_properties.md\":\"tFppK_IS\",\"guide_components_radio-group_emits.md\":\"cEDzKVnN\",\"guide_components_collapse_index.md\":\"N9Iu5-2v\",\"guide_components_image_emits.md\":\"lmlz2xJd\",\"guide_components_callout_index.md\":\"D9RU33w6\",\"guide_components_pivot_index.md\":\"B_vwQL-5\",\"guide_components_command-bar_index.md\":\"Cp4_rrGB\",\"guide_components_pagination_emits.md\":\"Dng86A22\",\"guide_components_button_index.md\":\"7sqT2MQP\",\"guide_components_info-box_properties.md\":\"BI7Nvk-E\",\"guide_components_drop-down_emits.md\":\"BE95TdKW\",\"guide_components_expander_index.md\":\"BKgcUJzQ\",\"guide_components_message-bar_index.md\":\"AEtAWlF8\",\"guide_components_menu-flyout_index.md\":\"Csa7irPj\",\"guide_components_panel_index.md\":\"CsTu0bXo\",\"guide_components_panel_properties.md\":\"BaxoCYKq\",\"guide_components_progress-bar_emits.md\":\"BcwXUpsF\",\"guide_components_progress-bar_properties.md\":\"TxiS9ZMA\",\"guide_components_progress-ring_emits.md\":\"D2Y6hIZ9\",\"guide_components_color-picker_index.md\":\"DCc4ixcU\",\"guide_components_progress-ring_index.md\":\"CPb-ZEPE\",\"guide_components_color-picker_properties.md\":\"wcXK29Vl\",\"guide_components_time-picker_index.md\":\"CQJdRRaG\",\"guide_components_drop-down_properties.md\":\"Bwlkpr1q\",\"guide_components_infinite-scroll-view_index.md\":\"yAuD807x\",\"guide_components_check-box_index.md\":\"FYgdu4oq\",\"guide_components_progress-bar_index.md\":\"D8vHQw5V\",\"guide_components_combo-box_index.md\":\"DTyu3eNd\",\"guide_components_info-box_emits.md\":\"DlEwpkkq\",\"guide_components_drop-down_index.md\":\"BZzJZQWq\",\"guide_components_list-view_index.md\":\"BoYvMzb0\",\"guide_components_verify-box_properties.md\":\"CW6W8fFf\",\"guide_components_verify-box_index.md\":\"DwSB40wR\",\"guide_index.md\":\"Bndlt3sL\",\"guide_components_web-window_index.md\":\"Bxc8vEeI\",\"index.md\":\"MTRqI42u\",\"guide_components_combo-box_properties.md\":\"AWfHzV6x\",\"guide_components_combobox_emits.md\":\"CGB6WLt8\",\"guide_components_combobox_properties.md\":\"Bja0hMou\",\"guide_components_details-list_index.md\":\"CcgOCIyt\",\"guide_components_info-box_index.md\":\"vXh-_DsL\",\"guide_components_combobox_index.md\":\"CsPkY6YB\",\"guide_components_date-picker_index.md\":\"12vmUIup\",\"guide_components_flip-view_emits.md\":\"DCheHjDj\",\"guide_components_panel_emits.md\":\"DG0REDq8\",\"guide_components_breadcrumb_index.md\":\"DyDm7PeP\",\"guide_components_radio-group_properties.md\":\"BnPxoKsQ\",\"guide_components_persona_emits.md\":\"CnsDPKRU\",\"guide_components_pivot_properties.md\":\"BmoLpPi1\",\"guide_components_persona_index.md\":\"DT00jby4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vfluent3\",\"description\":\"A Vue3 component library for Fluent UI\",\"base\":\"/VFluent3/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"VFluent3\",\"footer\":{\"message\":\"MIT Licensed\",\"copyright\":\"Copyright © Creator SN - 2022\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/\"}],\"sidebar\":[{\"text\":\"Basic input\",\"collapsed\":true,\"items\":[{\"text\":\"Button\",\"link\":\"/guide/components/button/\"},{\"text\":\"CheckBox\",\"link\":\"/guide/components/check-box/\"},{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"},{\"text\":\"Combobox\",\"link\":\"/guide/components/combobox/\"},{\"text\":\"DetailsList\",\"link\":\"/guide/components/details-list/\"},{\"text\":\"DropDown\",\"link\":\"/guide/components/drop-down/\"},{\"text\":\"Radio\",\"link\":\"/guide/components/radio/\"},{\"text\":\"RadioGroup\",\"link\":\"/guide/components/radio-group/\"},{\"text\":\"RatingControl\",\"link\":\"/guide/components/rating-control/\"},{\"text\":\"Slider\",\"link\":\"/guide/components/slider/\"},{\"text\":\"ToggleSwitch\",\"link\":\"/guide/components/toggle-switch/\"},{\"text\":\"Tag\",\"link\":\"/guide/components/tag/\"}]},{\"text\":\"Collections\",\"collapsed\":true,\"items\":[{\"text\":\"FlipView\",\"link\":\"/guide/components/flip-view/\"},{\"text\":\"ListView\",\"link\":\"/guide/components/list-view/\"},{\"text\":\"TreeView\",\"link\":\"/guide/components/tree-view/\"}]},{\"text\":\"Date & Time\",\"collapsed\":true,\"items\":[{\"text\":\"CalendarDatePicker\",\"link\":\"/guide/components/calendar-date-picker/\"},{\"text\":\"CalendarView\",\"link\":\"/guide/components/calendar-view/\"},{\"text\":\"DatePicker\",\"link\":\"/guide/components/date-picker/\"},{\"text\":\"TimePicker\",\"link\":\"/guide/components/time-picker/\"}]},{\"text\":\"Dialogs & flyouts\",\"collapsed\":true,\"items\":[{\"text\":\"Callout\",\"link\":\"/guide/components/callout/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Layout\",\"collapsed\":true,\"items\":[{\"text\":\"Collapse\",\"link\":\"/guide/components/collapse/\"},{\"text\":\"Expander\",\"link\":\"/guide/components/expander/\"},{\"text\":\"Drawer\",\"link\":\"/guide/components/drawer/\"},{\"text\":\"Panel\",\"link\":\"/guide/components/panel/\"}]},{\"text\":\"Media\",\"collapsed\":true,\"items\":[{\"text\":\"Image\",\"link\":\"/guide/components/image/\"},{\"text\":\"Img\",\"link\":\"/guide/components/img/\"},{\"text\":\"ImgBox\",\"link\":\"/guide/components/img-box/\"},{\"text\":\"Persona\",\"link\":\"/guide/components/persona/\"}]},{\"text\":\"Menu & toolbars\",\"collapsed\":true,\"items\":[{\"text\":\"CommandBar\",\"link\":\"/guide/components/command-bar/\"},{\"text\":\"MenuFlyout\",\"link\":\"/guide/components/menu-flyout/\"},{\"text\":\"SwipeControl\",\"link\":\"/guide/components/swipe-control/\"}]},{\"text\":\"Navigation\",\"collapsed\":true,\"items\":[{\"text\":\"Breadcrumb\",\"link\":\"/guide/components/breadcrumb/\"},{\"text\":\"NavigationPanel\",\"link\":\"/guide/components/navigation-panel/\"},{\"text\":\"NavigationView\",\"link\":\"/guide/components/navigation-view/\"},{\"text\":\"Pivot\",\"link\":\"/guide/components/pivot/\"},{\"text\":\"Pagination\",\"link\":\"/guide/components/pagination/\"}]},{\"text\":\"Scrolling\",\"collapsed\":true,\"items\":[{\"text\":\"InfiniteScrollView\",\"link\":\"/guide/components/infinite-scroll-view/\"},{\"text\":\"ScrollStory\",\"link\":\"/guide/components/scroll-story/\"}]},{\"text\":\"Status & info\",\"collapsed\":true,\"items\":[{\"text\":\"Badge\",\"link\":\"/guide/components/badge/\"},{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"ProgressBar\",\"link\":\"/guide/components/progress-bar/\"},{\"text\":\"ProgressRing\",\"link\":\"/guide/components/progress-ring/\"}]},{\"text\":\"Styles\",\"collapsed\":true,\"items\":[{\"text\":\"AnimatedIcon\",\"link\":\"/guide/components/animated-icon/\"},{\"text\":\"IconElement\",\"link\":\"/guide/components/icon-element/\"},{\"text\":\"RevealContainer\",\"link\":\"/guide/components/reveal-container/\"},{\"text\":\"Shimmer\",\"link\":\"/guide/components/shimmer/\"}]},{\"text\":\"Text\",\"collapsed\":true,\"items\":[{\"text\":\"SearchBox\",\"link\":\"/guide/components/search-box/\"},{\"text\":\"TextBox\",\"link\":\"/guide/components/text-box/\"},{\"text\":\"TextField\",\"link\":\"/guide/components/text-field/\"},{\"text\":\"VerifyBox\",\"link\":\"/guide/components/verify-box/\"}]},{\"text\":\"Windowing\",\"collapsed\":true,\"items\":[{\"text\":\"WebWindow\",\"link\":\"/guide/components/web-window/\"}]},{\"text\":\"Global\",\"collapsed\":true,\"items\":[{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Advance\",\"collapsed\":true,\"items\":[{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
     
   </body>
 </html>
\ No newline at end of file
diff --git a/guide/components/combo-box/emits.html b/guide/components/combo-box/emits.html
index f3c7222..159a1b7 100644
--- a/guide/components/combo-box/emits.html
+++ b/guide/components/combo-box/emits.html
@@ -1,20 +1,24 @@
 <!DOCTYPE html>
-<html lang="en-US">
+<html lang="en-US" dir="ltr">
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>Emits | vfluent3</title>
+    <title>vfluent3</title>
     <meta name="description" content="A Vue3 component library for Fluent UI">
-    <link rel="stylesheet" href="/VFluent3/assets/style.0a1d87af.css">
-    <link rel="modulepreload" href="/VFluent3/assets/app.d60fa8c3.js">
-    <link rel="modulepreload" href="/VFluent3/assets/guide_components_combo-box_emits.md.d5ffda50.lean.js">
+    <meta name="generator" content="VitePress v1.0.0-rc.45">
+    <link rel="preload stylesheet" href="/VFluent3/assets/style.BabQegKX.css" as="style">
     
-    <script>(()=>{const e=localStorage.getItem("vitepress-theme-appearance"),a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script type="module" src="/VFluent3/assets/app.CSutcJ2E.js"></script>
+    <link rel="preload" href="/VFluent3/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/framework.DvIFzl91.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/theme.CgqFBnN_.js">
+    <link rel="modulepreload" href="/VFluent3/assets/guide_components_combo-box_emits.md.Dh5R-qEv.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
   </head>
   <body>
-    <div id="app"><div class="Layout" data-v-058b7495><!--[--><!--]--><!--[--><span tabindex="-1" data-v-bea91388></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-bea91388> Skip to content </a><!--]--><!----><header class="VPNav" data-v-058b7495 data-v-2a0a2738><div class="VPNavBar has-sidebar" data-v-2a0a2738 data-v-45c9f423><div class="container" data-v-45c9f423><div class="VPNavBarTitle has-sidebar" data-v-45c9f423 data-v-011600ce><a class="title" href="/VFluent3/" data-v-011600ce><!----><!--[-->VFluent3<!--]--></a></div><div class="content" data-v-45c9f423><!----><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-45c9f423 data-v-4da4371d><span id="main-nav-aria-label" class="visually-hidden" data-v-4da4371d>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" data-v-4da4371d data-v-66f8d518 data-v-4d08dd3a><!--[-->Home<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" data-v-4da4371d data-v-66f8d518 data-v-4d08dd3a><!--[-->Guide<!--]--><!----></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-45c9f423 data-v-bf1c94ca><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" data-v-bf1c94ca data-v-d0ee0df2 data-v-55b931a0><span class="check" data-v-55b931a0><span class="icon" data-v-55b931a0><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-d0ee0df2><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-d0ee0df2><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-45c9f423 data-v-7cece6ac data-v-37af1650><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-37af1650><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-37af1650><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-37af1650><div class="VPMenu" data-v-37af1650 data-v-17dc081b><!----><!--[--><!--[--><!----><div class="group" data-v-7cece6ac><div class="item appearance" data-v-7cece6ac><p class="label" data-v-7cece6ac>Appearance</p><div class="appearance-action" data-v-7cece6ac><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" data-v-7cece6ac data-v-d0ee0df2 data-v-55b931a0><span class="check" data-v-55b931a0><span class="icon" data-v-55b931a0><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-d0ee0df2><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-d0ee0df2><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-45c9f423 data-v-5484e669><span class="container" data-v-5484e669><span class="top" data-v-5484e669></span><span class="middle" data-v-5484e669></span><span class="bottom" data-v-5484e669></span></span></button></div></div></div><!----></header><div class="VPLocalNav" data-v-058b7495 data-v-f623cd72><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-f623cd72><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-f623cd72><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-f623cd72>Menu</span></button><a class="top-link" href="#" data-v-f623cd72> Return to top </a></div><aside class="VPSidebar" data-v-058b7495 data-v-3b8ec0c7><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-3b8ec0c7><span class="visually-hidden" id="sidebar-aria-label" data-v-3b8ec0c7> Sidebar Navigation </span><!--[--><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Basic</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/button/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Button</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/check-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>CheckBox</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/radio/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Radio</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/progress-bar/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ProgressBar</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/progress-ring/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ProgressRing</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/toggle-switch/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ToggleSwitch</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/img/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Img</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/text-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>TextBox</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/combo-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ComboBox</span><!--]--><!----></a><!--]--></div></section></div><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Global</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/message-bar/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>MessageBar</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/info-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>InfoBox</span><!--]--><!----></a><!--]--></div></section></div><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Advance</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/color-picker/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ColorPicker</span><!--]--><!----></a><!--]--></div></section></div><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-058b7495 data-v-564173e9><div class="VPDoc has-sidebar" data-v-564173e9 data-v-32b7ddf4><div class="container" data-v-32b7ddf4><div class="aside" data-v-32b7ddf4><div class="aside-curtain" data-v-32b7ddf4></div><div class="aside-container" data-v-32b7ddf4><div class="aside-content" data-v-32b7ddf4><div class="VPDocAside" data-v-32b7ddf4 data-v-35c1bae1><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline has-outline" data-v-35c1bae1 data-v-123cce62><div class="content" data-v-123cce62><div class="outline-marker" data-v-123cce62></div><div class="outline-title" data-v-123cce62>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-123cce62><span class="visually-hidden" id="doc-outline-aria-label" data-v-123cce62> Table of Contents for current page </span><ul class="root" data-v-123cce62><!--[--><li style="" data-v-123cce62><a class="outline-link" href="#emits" data-v-123cce62>Emits</a><!----></li><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-35c1bae1></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-32b7ddf4><div class="content-container" data-v-32b7ddf4><!--[--><!--]--><main class="main" data-v-32b7ddf4><div style="position:relative;" class="vp-doc _VFluent3_guide_components_combo-box_emits" data-v-32b7ddf4><div><h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">blur</td><td style="text-align:center;">evt[FocusEvent]</td><td style="text-align:center;">onblur</td></tr><tr><td style="text-align:center;">change</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">onchange</td></tr><tr><td style="text-align:center;">error-input</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">onerrorinput</td></tr><tr><td style="text-align:center;">focus</td><td style="text-align:center;">evt[FocusEvent]</td><td style="text-align:center;">onfocus</td></tr><tr><td style="text-align:center;">input</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">oninput</td></tr><tr><td style="text-align:center;">keydown</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">onkeydown</td></tr><tr><td style="text-align:center;">keypress</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">onkeypress</td></tr><tr><td style="text-align:center;">keyup</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">onkeyup</td></tr><tr><td style="text-align:center;">update:model-value</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">v-model</td></tr><tr><td style="text-align:center;">warning-input</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">onwarninginput</td></tr></tbody></table></div></div></main><footer class="VPDocFooter" data-v-32b7ddf4 data-v-cfaa3a6c><div class="edit-info" data-v-cfaa3a6c><!----><!----></div><div class="prev-next" data-v-cfaa3a6c><div class="pager" data-v-cfaa3a6c><!----></div><div class="pager" data-v-cfaa3a6c><a class="pager-link next" href="/VFluent3/guide/components/button/" data-v-cfaa3a6c><span class="desc" data-v-cfaa3a6c>Next page</span><span class="title" data-v-cfaa3a6c>Button</span></a></div></div></footer><!--[--><!--]--></div></div></div></div></div><footer class="VPFooter has-sidebar" data-v-058b7495 data-v-a6c8dde4><div class="container" data-v-a6c8dde4><p class="message" data-v-a6c8dde4>MIT Licensed</p><p class="copyright" data-v-a6c8dde4>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
-    <script>__VP_HASH_MAP__ = JSON.parse("{\"guide_components_button_emits.md\":\"d682bf18\",\"guide_components_button_index.md\":\"23a8eb54\",\"guide_components_button_properties.md\":\"cd4004b6\",\"guide_components_check-box_emits.md\":\"31609794\",\"guide_components_check-box_index.md\":\"32046814\",\"guide_components_check-box_properties.md\":\"8f33ac0c\",\"guide_components_color-picker_emits.md\":\"00983cd0\",\"guide_components_color-picker_index.md\":\"b2d62612\",\"guide_components_color-picker_properties.md\":\"5466ba72\",\"guide_components_combo-box_emits.md\":\"d5ffda50\",\"guide_components_combo-box_index.md\":\"1c4364f5\",\"guide_components_combo-box_properties.md\":\"2e1d6060\",\"guide_components_img_emits.md\":\"6237adb4\",\"guide_components_img_index.md\":\"fa51a3a1\",\"guide_components_img_properties.md\":\"8d321b5e\",\"guide_components_info-box_emits.md\":\"c2e71eec\",\"guide_components_info-box_index.md\":\"06175fed\",\"guide_components_info-box_properties.md\":\"314dbb00\",\"guide_components_message-bar_emits.md\":\"e89a5a22\",\"guide_components_message-bar_index.md\":\"3f0b01d6\",\"guide_components_message-bar_properties.md\":\"ee3838d9\",\"guide_components_progress-bar_emits.md\":\"5b611e3b\",\"guide_components_progress-bar_index.md\":\"689c3241\",\"guide_components_progress-bar_properties.md\":\"39af7fb2\",\"guide_components_progress-ring_emits.md\":\"67e4644e\",\"guide_components_progress-ring_index.md\":\"9a33542b\",\"guide_components_progress-ring_properties.md\":\"c897c4bb\",\"guide_components_radio_emits.md\":\"28506857\",\"guide_components_radio_index.md\":\"e5a479ce\",\"guide_components_radio_properties.md\":\"f8e55d2f\",\"guide_components_text-box_emits.md\":\"0bf89ef8\",\"guide_components_text-box_index.md\":\"7ccfc637\",\"guide_components_text-box_properties.md\":\"aab3a89e\",\"guide_components_toggle-switch_emits.md\":\"5146435f\",\"guide_components_toggle-switch_index.md\":\"8be48081\",\"guide_components_toggle-switch_properties.md\":\"54984c3a\",\"guide_index.md\":\"e3dca1d7\",\"index.md\":\"1e9773d5\"}")</script>
-    <script type="module" async src="/VFluent3/assets/app.d60fa8c3.js"></script>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-19c990f1><div class="wrapper" data-v-19c990f1><div class="container" data-v-19c990f1><div class="title" data-v-19c990f1><div class="VPNavBarTitle has-sidebar" data-v-19c990f1 data-v-ab179fa1><a class="title" href="/VFluent3/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>VFluent3</span><!--[--><!--]--></a></div></div><div class="content" data-v-19c990f1><div class="content-body" data-v-19c990f1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-19c990f1><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-19c990f1 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Guide</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-19c990f1 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-19c990f1 data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-19c990f1 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-19c990f1><div class="divider-line" data-v-19c990f1></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-d2ecc192><button data-v-d2ecc192>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-575e6a36><div class="curtain" data-v-575e6a36></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-575e6a36><span class="visually-hidden" id="sidebar-aria-label" data-v-575e6a36> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Basic input</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/button/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/check-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CheckBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/combobox/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Combobox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/details-list/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DetailsList</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drop-down/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DropDown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio-group/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RadioGroup</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/rating-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RatingControl</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/slider/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/toggle-switch/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ToggleSwitch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tag/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Tag</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Collections</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/flip-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>FlipView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/list-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ListView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tree-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TreeView</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Date & Time</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarDatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/time-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TimePicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Dialogs & flyouts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/callout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Callout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Layout</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/collapse/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Collapse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/expander/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Expander</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drawer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Panel</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Media</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/image/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Img</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ImgBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/persona/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Persona</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Menu & toolbars</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/command-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CommandBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/menu-flyout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MenuFlyout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/swipe-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SwipeControl</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Navigation</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/breadcrumb/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationPanel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pivot/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pivot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pagination/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pagination</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Scrolling</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/infinite-scroll-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfiniteScrollView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/scroll-story/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ScrollStory</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Status & info</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/badge/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-ring/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressRing</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Styles</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/animated-icon/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>AnimatedIcon</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/icon-element/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>IconElement</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/reveal-container/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RevealContainer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/shimmer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Shimmer</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Text</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/search-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SearchBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-field/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextField</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/verify-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>VerifyBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Windowing</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/web-window/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>WebWindow</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Global</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Advance</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-935f8a84><div class="content" data-v-935f8a84><div class="outline-marker" data-v-935f8a84></div><div class="outline-title" role="heading" aria-level="2" data-v-935f8a84>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-935f8a84><span class="visually-hidden" id="doc-outline-aria-label" data-v-935f8a84> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-935f8a84 data-v-b933a997><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _VFluent3_guide_components_combo-box_emits" data-v-39a288b8><div><h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-label="Permalink to &quot;Emits&quot;">​</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">blur</td><td style="text-align:center;">evt[FocusEvent]</td><td style="text-align:center;">onblur</td></tr><tr><td style="text-align:center;">change</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">onchange</td></tr><tr><td style="text-align:center;">error-input</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">onerrorinput</td></tr><tr><td style="text-align:center;">focus</td><td style="text-align:center;">evt[FocusEvent]</td><td style="text-align:center;">onfocus</td></tr><tr><td style="text-align:center;">input</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">oninput</td></tr><tr><td style="text-align:center;">keydown</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">onkeydown</td></tr><tr><td style="text-align:center;">keypress</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">onkeypress</td></tr><tr><td style="text-align:center;">keyup</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">onkeyup</td></tr><tr><td style="text-align:center;">update:model-value</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">v-model</td></tr><tr><td style="text-align:center;">warning-input</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">onwarninginput</td></tr></tbody></table></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-09de1c0f><!--[--><!--]--><!----><nav class="prev-next" data-v-09de1c0f><div class="pager" data-v-09de1c0f><!----></div><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link next" href="/VFluent3/guide/components/button/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Next page</span><span class="title" data-v-09de1c0f>Button</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>MIT Licensed</p><p class="copyright" data-v-e315a0ad>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_calendar-date-picker_properties.md\":\"DXRjmMG8\",\"guide_components_image_properties.md\":\"DGanRzCb\",\"guide_components_img-box_index.md\":\"DYtggkf_\",\"guide_components_img_emits.md\":\"BlE7jvZQ\",\"guide_components_img_index.md\":\"Bm9FiuU4\",\"guide_components_icon-element_properties.md\":\"8Oakruwc\",\"guide_components_img_properties.md\":\"B42YSocI\",\"guide_components_drawer_index.md\":\"D_vpnCpE\",\"guide_components_verify-box_emits.md\":\"DT17Iazx\",\"guide_components_calendar-date-picker_index.md\":\"BdHjrurh\",\"guide_components_rating-control_index.md\":\"Q9l5Lfrr\",\"guide_components_rating-control_properties.md\":\"DKprnl0i\",\"guide_components_calendar-view_index.md\":\"zdoRYVx1\",\"guide_components_animated-icon_index.md\":\"yZDMzCFe\",\"guide_components_calendar-date-picker_emits.md\":\"D5OkfR8j\",\"guide_components_badge_index.md\":\"Bb4crrJn\",\"guide_components_image_index.md\":\"B7X6cWAZ\",\"guide_components_slider_index.md\":\"C7zZ2d-W\",\"guide_components_radio-group_index.md\":\"CVfh3h5H\",\"guide_components_swipe-control_index.md\":\"DwrDVPc1\",\"guide_components_color-picker_emits.md\":\"BHDXVtBQ\",\"guide_components_radio_index.md\":\"90as5QGp\",\"guide_components_pagination_properties.md\":\"JUAPvcTL\",\"guide_components_persona_properties.md\":\"DUTPhPMp\",\"guide_components_combo-box_emits.md\":\"Dh5R-qEv\",\"guide_components_pivot_emits.md\":\"BTJPgNpy\",\"guide_components_pagination_index.md\":\"CnW2zAht\",\"guide_components_flip-view_properties.md\":\"BqZ4hhgU\",\"guide_components_icon-element_emits.md\":\"D5TXFdTZ\",\"guide_components_flip-view_index.md\":\"DefnDOv6\",\"guide_components_navigation-panel_index.md\":\"6mO__sSK\",\"guide_components_rating-control_emits.md\":\"blvomSeC\",\"guide_components_icon-element_index.md\":\"DQ8K7JNn\",\"guide_components_navigation-view_index.md\":\"4AQRiz1k\",\"guide_components_toggle-switch_emits.md\":\"CLGzrNut\",\"guide_components_toggle-switch_index.md\":\"61en_q9-\",\"guide_components_scroll-story_index.md\":\"Vpgb1HSV\",\"guide_components_reveal-container_index.md\":\"Cut2r4tV\",\"guide_components_search-box_emits.md\":\"-d9sWNNt\",\"guide_components_search-box_properties.md\":\"DEKFfPFw\",\"guide_components_shimmer_emits.md\":\"CTMInlI3\",\"guide_components_tag_index.md\":\"BhhxkcHn\",\"guide_components_search-box_index.md\":\"DgkrY0oY\",\"guide_components_shimmer_index.md\":\"iZlHuTxw\",\"guide_components_shimmer_properties.md\":\"CdkU1o6H\",\"guide_components_tree-view_index.md\":\"CUrwan4q\",\"guide_components_text-field_index.md\":\"CXSimJtj\",\"guide_components_text-box_index.md\":\"C5moAPfB\",\"guide_components_progress-ring_properties.md\":\"Dc08Uiff\",\"guide_components_toggle-switch_properties.md\":\"tFppK_IS\",\"guide_components_radio-group_emits.md\":\"cEDzKVnN\",\"guide_components_collapse_index.md\":\"N9Iu5-2v\",\"guide_components_image_emits.md\":\"lmlz2xJd\",\"guide_components_callout_index.md\":\"D9RU33w6\",\"guide_components_pivot_index.md\":\"B_vwQL-5\",\"guide_components_command-bar_index.md\":\"Cp4_rrGB\",\"guide_components_pagination_emits.md\":\"Dng86A22\",\"guide_components_button_index.md\":\"7sqT2MQP\",\"guide_components_info-box_properties.md\":\"BI7Nvk-E\",\"guide_components_drop-down_emits.md\":\"BE95TdKW\",\"guide_components_expander_index.md\":\"BKgcUJzQ\",\"guide_components_message-bar_index.md\":\"AEtAWlF8\",\"guide_components_menu-flyout_index.md\":\"Csa7irPj\",\"guide_components_panel_index.md\":\"CsTu0bXo\",\"guide_components_panel_properties.md\":\"BaxoCYKq\",\"guide_components_progress-bar_emits.md\":\"BcwXUpsF\",\"guide_components_progress-bar_properties.md\":\"TxiS9ZMA\",\"guide_components_progress-ring_emits.md\":\"D2Y6hIZ9\",\"guide_components_color-picker_index.md\":\"DCc4ixcU\",\"guide_components_progress-ring_index.md\":\"CPb-ZEPE\",\"guide_components_color-picker_properties.md\":\"wcXK29Vl\",\"guide_components_time-picker_index.md\":\"CQJdRRaG\",\"guide_components_drop-down_properties.md\":\"Bwlkpr1q\",\"guide_components_infinite-scroll-view_index.md\":\"yAuD807x\",\"guide_components_check-box_index.md\":\"FYgdu4oq\",\"guide_components_progress-bar_index.md\":\"D8vHQw5V\",\"guide_components_combo-box_index.md\":\"DTyu3eNd\",\"guide_components_info-box_emits.md\":\"DlEwpkkq\",\"guide_components_drop-down_index.md\":\"BZzJZQWq\",\"guide_components_list-view_index.md\":\"BoYvMzb0\",\"guide_components_verify-box_properties.md\":\"CW6W8fFf\",\"guide_components_verify-box_index.md\":\"DwSB40wR\",\"guide_index.md\":\"Bndlt3sL\",\"guide_components_web-window_index.md\":\"Bxc8vEeI\",\"index.md\":\"MTRqI42u\",\"guide_components_combo-box_properties.md\":\"AWfHzV6x\",\"guide_components_combobox_emits.md\":\"CGB6WLt8\",\"guide_components_combobox_properties.md\":\"Bja0hMou\",\"guide_components_details-list_index.md\":\"CcgOCIyt\",\"guide_components_info-box_index.md\":\"vXh-_DsL\",\"guide_components_combobox_index.md\":\"CsPkY6YB\",\"guide_components_date-picker_index.md\":\"12vmUIup\",\"guide_components_flip-view_emits.md\":\"DCheHjDj\",\"guide_components_panel_emits.md\":\"DG0REDq8\",\"guide_components_breadcrumb_index.md\":\"DyDm7PeP\",\"guide_components_radio-group_properties.md\":\"BnPxoKsQ\",\"guide_components_persona_emits.md\":\"CnsDPKRU\",\"guide_components_pivot_properties.md\":\"BmoLpPi1\",\"guide_components_persona_index.md\":\"DT00jby4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vfluent3\",\"description\":\"A Vue3 component library for Fluent UI\",\"base\":\"/VFluent3/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"VFluent3\",\"footer\":{\"message\":\"MIT Licensed\",\"copyright\":\"Copyright © Creator SN - 2022\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/\"}],\"sidebar\":[{\"text\":\"Basic input\",\"collapsed\":true,\"items\":[{\"text\":\"Button\",\"link\":\"/guide/components/button/\"},{\"text\":\"CheckBox\",\"link\":\"/guide/components/check-box/\"},{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"},{\"text\":\"Combobox\",\"link\":\"/guide/components/combobox/\"},{\"text\":\"DetailsList\",\"link\":\"/guide/components/details-list/\"},{\"text\":\"DropDown\",\"link\":\"/guide/components/drop-down/\"},{\"text\":\"Radio\",\"link\":\"/guide/components/radio/\"},{\"text\":\"RadioGroup\",\"link\":\"/guide/components/radio-group/\"},{\"text\":\"RatingControl\",\"link\":\"/guide/components/rating-control/\"},{\"text\":\"Slider\",\"link\":\"/guide/components/slider/\"},{\"text\":\"ToggleSwitch\",\"link\":\"/guide/components/toggle-switch/\"},{\"text\":\"Tag\",\"link\":\"/guide/components/tag/\"}]},{\"text\":\"Collections\",\"collapsed\":true,\"items\":[{\"text\":\"FlipView\",\"link\":\"/guide/components/flip-view/\"},{\"text\":\"ListView\",\"link\":\"/guide/components/list-view/\"},{\"text\":\"TreeView\",\"link\":\"/guide/components/tree-view/\"}]},{\"text\":\"Date & Time\",\"collapsed\":true,\"items\":[{\"text\":\"CalendarDatePicker\",\"link\":\"/guide/components/calendar-date-picker/\"},{\"text\":\"CalendarView\",\"link\":\"/guide/components/calendar-view/\"},{\"text\":\"DatePicker\",\"link\":\"/guide/components/date-picker/\"},{\"text\":\"TimePicker\",\"link\":\"/guide/components/time-picker/\"}]},{\"text\":\"Dialogs & flyouts\",\"collapsed\":true,\"items\":[{\"text\":\"Callout\",\"link\":\"/guide/components/callout/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Layout\",\"collapsed\":true,\"items\":[{\"text\":\"Collapse\",\"link\":\"/guide/components/collapse/\"},{\"text\":\"Expander\",\"link\":\"/guide/components/expander/\"},{\"text\":\"Drawer\",\"link\":\"/guide/components/drawer/\"},{\"text\":\"Panel\",\"link\":\"/guide/components/panel/\"}]},{\"text\":\"Media\",\"collapsed\":true,\"items\":[{\"text\":\"Image\",\"link\":\"/guide/components/image/\"},{\"text\":\"Img\",\"link\":\"/guide/components/img/\"},{\"text\":\"ImgBox\",\"link\":\"/guide/components/img-box/\"},{\"text\":\"Persona\",\"link\":\"/guide/components/persona/\"}]},{\"text\":\"Menu & toolbars\",\"collapsed\":true,\"items\":[{\"text\":\"CommandBar\",\"link\":\"/guide/components/command-bar/\"},{\"text\":\"MenuFlyout\",\"link\":\"/guide/components/menu-flyout/\"},{\"text\":\"SwipeControl\",\"link\":\"/guide/components/swipe-control/\"}]},{\"text\":\"Navigation\",\"collapsed\":true,\"items\":[{\"text\":\"Breadcrumb\",\"link\":\"/guide/components/breadcrumb/\"},{\"text\":\"NavigationPanel\",\"link\":\"/guide/components/navigation-panel/\"},{\"text\":\"NavigationView\",\"link\":\"/guide/components/navigation-view/\"},{\"text\":\"Pivot\",\"link\":\"/guide/components/pivot/\"},{\"text\":\"Pagination\",\"link\":\"/guide/components/pagination/\"}]},{\"text\":\"Scrolling\",\"collapsed\":true,\"items\":[{\"text\":\"InfiniteScrollView\",\"link\":\"/guide/components/infinite-scroll-view/\"},{\"text\":\"ScrollStory\",\"link\":\"/guide/components/scroll-story/\"}]},{\"text\":\"Status & info\",\"collapsed\":true,\"items\":[{\"text\":\"Badge\",\"link\":\"/guide/components/badge/\"},{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"ProgressBar\",\"link\":\"/guide/components/progress-bar/\"},{\"text\":\"ProgressRing\",\"link\":\"/guide/components/progress-ring/\"}]},{\"text\":\"Styles\",\"collapsed\":true,\"items\":[{\"text\":\"AnimatedIcon\",\"link\":\"/guide/components/animated-icon/\"},{\"text\":\"IconElement\",\"link\":\"/guide/components/icon-element/\"},{\"text\":\"RevealContainer\",\"link\":\"/guide/components/reveal-container/\"},{\"text\":\"Shimmer\",\"link\":\"/guide/components/shimmer/\"}]},{\"text\":\"Text\",\"collapsed\":true,\"items\":[{\"text\":\"SearchBox\",\"link\":\"/guide/components/search-box/\"},{\"text\":\"TextBox\",\"link\":\"/guide/components/text-box/\"},{\"text\":\"TextField\",\"link\":\"/guide/components/text-field/\"},{\"text\":\"VerifyBox\",\"link\":\"/guide/components/verify-box/\"}]},{\"text\":\"Windowing\",\"collapsed\":true,\"items\":[{\"text\":\"WebWindow\",\"link\":\"/guide/components/web-window/\"}]},{\"text\":\"Global\",\"collapsed\":true,\"items\":[{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Advance\",\"collapsed\":true,\"items\":[{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
     
   </body>
 </html>
\ No newline at end of file
diff --git a/guide/components/combo-box/index.html b/guide/components/combo-box/index.html
index 113ada3..cc9266d 100644
--- a/guide/components/combo-box/index.html
+++ b/guide/components/combo-box/index.html
@@ -1,44 +1,45 @@
 <!DOCTYPE html>
-<html lang="en-US">
+<html lang="en-US" dir="ltr">
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1">
     <title>ComboBox | vfluent3</title>
     <meta name="description" content="A Vue3 component library for Fluent UI">
-    <link rel="stylesheet" href="/VFluent3/assets/style.0a1d87af.css">
-    <link rel="modulepreload" href="/VFluent3/assets/chunks/index.9dba9c16.js">
-    <link rel="modulepreload" href="/VFluent3/assets/app.d60fa8c3.js">
-    <link rel="modulepreload" href="/VFluent3/assets/guide_components_combo-box_index.md.1c4364f5.lean.js">
+    <meta name="generator" content="VitePress v1.0.0-rc.45">
+    <link rel="preload stylesheet" href="/VFluent3/assets/style.BabQegKX.css" as="style">
     
-    <script>(()=>{const e=localStorage.getItem("vitepress-theme-appearance"),a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script type="module" src="/VFluent3/assets/app.CSutcJ2E.js"></script>
+    <link rel="preload" href="/VFluent3/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/framework.DvIFzl91.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/theme.CgqFBnN_.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/index.CvzShnhD.js">
+    <link rel="modulepreload" href="/VFluent3/assets/guide_components_combo-box_index.md.DTyu3eNd.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
   </head>
   <body>
-    <div id="app"><div class="Layout" data-v-058b7495><!--[--><!--]--><!--[--><span tabindex="-1" data-v-bea91388></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-bea91388> Skip to content </a><!--]--><!----><header class="VPNav" data-v-058b7495 data-v-2a0a2738><div class="VPNavBar has-sidebar" data-v-2a0a2738 data-v-45c9f423><div class="container" data-v-45c9f423><div class="VPNavBarTitle has-sidebar" data-v-45c9f423 data-v-011600ce><a class="title" href="/VFluent3/" data-v-011600ce><!----><!--[-->VFluent3<!--]--></a></div><div class="content" data-v-45c9f423><!----><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-45c9f423 data-v-4da4371d><span id="main-nav-aria-label" class="visually-hidden" data-v-4da4371d>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" data-v-4da4371d data-v-66f8d518 data-v-4d08dd3a><!--[-->Home<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" data-v-4da4371d data-v-66f8d518 data-v-4d08dd3a><!--[-->Guide<!--]--><!----></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-45c9f423 data-v-bf1c94ca><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" data-v-bf1c94ca data-v-d0ee0df2 data-v-55b931a0><span class="check" data-v-55b931a0><span class="icon" data-v-55b931a0><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-d0ee0df2><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-d0ee0df2><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-45c9f423 data-v-7cece6ac data-v-37af1650><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-37af1650><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-37af1650><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-37af1650><div class="VPMenu" data-v-37af1650 data-v-17dc081b><!----><!--[--><!--[--><!----><div class="group" data-v-7cece6ac><div class="item appearance" data-v-7cece6ac><p class="label" data-v-7cece6ac>Appearance</p><div class="appearance-action" data-v-7cece6ac><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" data-v-7cece6ac data-v-d0ee0df2 data-v-55b931a0><span class="check" data-v-55b931a0><span class="icon" data-v-55b931a0><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-d0ee0df2><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-d0ee0df2><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-45c9f423 data-v-5484e669><span class="container" data-v-5484e669><span class="top" data-v-5484e669></span><span class="middle" data-v-5484e669></span><span class="bottom" data-v-5484e669></span></span></button></div></div></div><!----></header><div class="VPLocalNav" data-v-058b7495 data-v-f623cd72><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-f623cd72><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-f623cd72><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-f623cd72>Menu</span></button><a class="top-link" href="#" data-v-f623cd72> Return to top </a></div><aside class="VPSidebar" data-v-058b7495 data-v-3b8ec0c7><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-3b8ec0c7><span class="visually-hidden" id="sidebar-aria-label" data-v-3b8ec0c7> Sidebar Navigation </span><!--[--><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Basic</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/button/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Button</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/check-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>CheckBox</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/radio/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Radio</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/progress-bar/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ProgressBar</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/progress-ring/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ProgressRing</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/toggle-switch/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ToggleSwitch</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/img/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Img</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/text-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>TextBox</span><!--]--><!----></a><a class="VPLink link active" href="/VFluent3/guide/components/combo-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ComboBox</span><!--]--><!----></a><!--]--></div></section></div><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Global</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/message-bar/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>MessageBar</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/info-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>InfoBox</span><!--]--><!----></a><!--]--></div></section></div><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Advance</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/color-picker/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ColorPicker</span><!--]--><!----></a><!--]--></div></section></div><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-058b7495 data-v-564173e9><div class="VPDoc has-sidebar" data-v-564173e9 data-v-32b7ddf4><div class="container" data-v-32b7ddf4><div class="aside" data-v-32b7ddf4><div class="aside-curtain" data-v-32b7ddf4></div><div class="aside-container" data-v-32b7ddf4><div class="aside-content" data-v-32b7ddf4><div class="VPDocAside" data-v-32b7ddf4 data-v-35c1bae1><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline has-outline" data-v-35c1bae1 data-v-123cce62><div class="content" data-v-123cce62><div class="outline-marker" data-v-123cce62></div><div class="outline-title" data-v-123cce62>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-123cce62><span class="visually-hidden" id="doc-outline-aria-label" data-v-123cce62> Table of Contents for current page </span><ul class="root" data-v-123cce62><!--[--><li style="" data-v-123cce62><a class="outline-link" href="#quick-start" data-v-123cce62>Quick Start</a><!----></li><li style="" data-v-123cce62><a class="outline-link" href="#properties" data-v-123cce62>Properties</a><!----></li><li style="" data-v-123cce62><a class="outline-link" href="#emits" data-v-123cce62>Emits</a><!----></li><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-35c1bae1></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-32b7ddf4><div class="content-container" data-v-32b7ddf4><!--[--><!--]--><main class="main" data-v-32b7ddf4><div style="position:relative;" class="vp-doc _VFluent3_guide_components_combo-box_index" data-v-32b7ddf4><div><h1 id="combobox" tabindex="-1">ComboBox <a class="header-anchor" href="#combobox" aria-hidden="true">#</a></h1><h2 id="quick-start" tabindex="-1">Quick Start <a class="header-anchor" href="#quick-start" aria-hidden="true">#</a></h2><h3 id="default" tabindex="-1">Default <a class="header-anchor" href="#default" aria-hidden="true">#</a></h3><hr><div class="fv-combo-box light" style="--fv-combo-box-height:undefinedpx;--fv-combo-box-effect-position:center;"><div tabindex="-1" class="fv-text-box light readonly fv-text-box--singleline fv-text-box--success fv-combo-box--select-input" style="--fv-text-box-height:18px;--fv-text-box-font-size:14px;--fv-text-box-width:80px;"><!--[--><input title="input" class="fv-text-box--text-with-icon fv-text-box--input fv-text-box--text" placeholder="Input your company" type="text" readonly value="" autofocus><div class="fv-text-box--icon"><i class="ms-Icon ms-Icon--ChevronDown"></i></div><!--]--><!----><pre class="fv-text-box--pre-hidden">0</pre></div><div class="fv-combo-box--options" style="display:none;"><div class="fv-combo-box--bg"><div class="fv-combo-box--options-wrapper"><!--[--><div class="fv-combo-box--option"><div class="fv-combo-box--option-text"><!--[-->Microsoft<!--]--></div></div><div class="fv-combo-box--option"><div class="fv-combo-box--option-text"><!--[-->Apple<!--]--></div></div><div class="fv-combo-box--option"><div class="fv-combo-box--option-text"><!--[-->Google<!--]--></div></div><div class="fv-combo-box--option"><div class="fv-combo-box--option-text"><!--[-->Facebook<!--]--></div></div><div class="fv-combo-box--option"><div class="fv-combo-box--option-text"><!--[-->Github<!--]--></div></div><!--]--></div></div></div></div><div class="language-vue-html"><span class="copy"></span><div class="highlight-lines"><br><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><br><br><br></div><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-combo-box</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">v-model</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">options</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">options</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">placeholder</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">Input your company</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">autofocus</span></span>
-<span class="line"><span style="color:#89DDFF;">    &gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-combo-box</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h3 id="editable" tabindex="-1">Editable <a class="header-anchor" href="#editable" aria-hidden="true">#</a></h3><hr><div class="fv-combo-box light" style="--fv-combo-box-height:undefinedpx;--fv-combo-box-effect-position:center;width:100%;"><div tabindex="-1" class="fv-text-box light fv-text-box--singleline fv-text-box--success fv-combo-box--select-input" style="--fv-text-box-height:18px;--fv-text-box-font-size:14px;--fv-text-box-width:80px;"><!--[--><input title="input" class="fv-text-box--text-with-icon fv-text-box--input fv-text-box--text" placeholder="Input your company" type="text" value=""><div class="fv-text-box--icon"><i class="ms-Icon ms-Icon--ChevronDown"></i></div><!--]--><!----><pre class="fv-text-box--pre-hidden">0</pre></div><div class="fv-combo-box--editable fv-combo-box--options" style="display:none;"><div class="fv-combo-box--bg"><div class="fv-combo-box--options-wrapper"><!--[--><div class="fv-combo-box--option"><div class="fv-combo-box--option-text"><!--[-->Microsoft<!--]--></div></div><div class="fv-combo-box--option"><div class="fv-combo-box--option-text"><!--[-->Apple<!--]--></div></div><div class="fv-combo-box--option"><div class="fv-combo-box--option-text"><!--[-->Google<!--]--></div></div><div class="fv-combo-box--option"><div class="fv-combo-box--option-text"><!--[-->Facebook<!--]--></div></div><div class="fv-combo-box--option"><div class="fv-combo-box--option-text"><!--[-->Github<!--]--></div></div><!--]--></div></div></div></div><div class="language-vue-html"><span class="copy"></span><div class="highlight-lines"><br><div class="highlighted"> </div><br><div class="highlighted"> </div><br><br><br><br><br></div><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-combo-box</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">style</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">width:100%;</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">options</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">options</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">editable</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">placeholder</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">Input your company</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">    &gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-combo-box</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h3 id="disabled" tabindex="-1">Disabled <a class="header-anchor" href="#disabled" aria-hidden="true">#</a></h3><hr><div class="fv-combo-box disabled light" style="--fv-combo-box-height:undefinedpx;--fv-combo-box-effect-position:center;"><div tabindex="-1" class="fv-text-box light disabled readonly fv-text-box--singleline fv-text-box--success fv-combo-box--select-input" style="--fv-text-box-height:18px;--fv-text-box-font-size:14px;--fv-text-box-width:80px;"><!--[--><input title="input" class="fv-text-box--text-with-icon fv-text-box--input fv-text-box--text" placeholder="Input your company" disabled type="text" readonly value=""><div class="fv-text-box--icon"><i class="ms-Icon ms-Icon--ChevronDown"></i></div><!--]--><!----><pre class="fv-text-box--pre-hidden">0</pre></div><div class="fv-combo-box--options" style="display:none;"><div class="fv-combo-box--bg"><div class="fv-combo-box--options-wrapper"><!--[--><div class="fv-combo-box--option"><div class="fv-combo-box--option-text"><!--[-->Microsoft<!--]--></div></div><div class="fv-combo-box--option"><div class="fv-combo-box--option-text"><!--[-->Apple<!--]--></div></div><div class="fv-combo-box--option"><div class="fv-combo-box--option-text"><!--[-->Google<!--]--></div></div><div class="fv-combo-box--option"><div class="fv-combo-box--option-text"><!--[-->Facebook<!--]--></div></div><div class="fv-combo-box--option"><div class="fv-combo-box--option-text"><!--[-->Github<!--]--></div></div><!--]--></div></div></div></div><div class="language-vue-html"><span class="copy"></span><div class="highlight-lines"><br><div class="highlighted"> </div><br><br><br><br><br><br></div><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-combo-box</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">disabled</span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">options</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">options</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">placeholder</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">Input your company</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">    &gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-combo-box</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">autofocus</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">editable</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">editable</td></tr><tr><td style="text-align:center;">error-border-color</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">font-size</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">14</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">hover-border-color</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">input-rules</td><td style="text-align:center;">[object,string,function]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">lang</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">i18n</td></tr><tr><td style="text-align:center;">maxlength</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">minlength</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">model-value</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">v-model</td></tr><tr><td style="text-align:center;">options</td><td style="text-align:center;">[array]</td><td style="text-align:center;">No</td><td style="text-align:center;">() =&gt; []</td><td style="text-align:center;">select options</td></tr><tr><td style="text-align:center;">pattern</td><td style="text-align:center;">[object,string,function]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">placeholder</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">required</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">[&#39;light&#39;,&#39;dark&#39;,&#39;global&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">theme</td></tr><tr><td style="text-align:center;">title</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;input&#39;</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">warning-border-color</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr></tbody></table><h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">blur</td><td style="text-align:center;">evt[FocusEvent]</td><td style="text-align:center;">onblur</td></tr><tr><td style="text-align:center;">change</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">onchange</td></tr><tr><td style="text-align:center;">error-input</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">onerrorinput</td></tr><tr><td style="text-align:center;">focus</td><td style="text-align:center;">evt[FocusEvent]</td><td style="text-align:center;">onfocus</td></tr><tr><td style="text-align:center;">input</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">oninput</td></tr><tr><td style="text-align:center;">keydown</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">onkeydown</td></tr><tr><td style="text-align:center;">keypress</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">onkeypress</td></tr><tr><td style="text-align:center;">keyup</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">onkeyup</td></tr><tr><td style="text-align:center;">update:model-value</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">v-model</td></tr><tr><td style="text-align:center;">warning-input</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">onwarninginput</td></tr></tbody></table></div></div></main><footer class="VPDocFooter" data-v-32b7ddf4 data-v-cfaa3a6c><div class="edit-info" data-v-cfaa3a6c><!----><!----></div><div class="prev-next" data-v-cfaa3a6c><div class="pager" data-v-cfaa3a6c><a class="pager-link prev" href="/VFluent3/guide/components/text-box/" data-v-cfaa3a6c><span class="desc" data-v-cfaa3a6c>Previous page</span><span class="title" data-v-cfaa3a6c>TextBox</span></a></div><div class="has-prev pager" data-v-cfaa3a6c><a class="pager-link next" href="/VFluent3/guide/components/message-bar/" data-v-cfaa3a6c><span class="desc" data-v-cfaa3a6c>Next page</span><span class="title" data-v-cfaa3a6c>MessageBar</span></a></div></div></footer><!--[--><!--]--></div></div></div></div></div><footer class="VPFooter has-sidebar" data-v-058b7495 data-v-a6c8dde4><div class="container" data-v-a6c8dde4><p class="message" data-v-a6c8dde4>MIT Licensed</p><p class="copyright" data-v-a6c8dde4>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
-    <script>__VP_HASH_MAP__ = JSON.parse("{\"guide_components_button_emits.md\":\"d682bf18\",\"guide_components_button_index.md\":\"23a8eb54\",\"guide_components_button_properties.md\":\"cd4004b6\",\"guide_components_check-box_emits.md\":\"31609794\",\"guide_components_check-box_index.md\":\"32046814\",\"guide_components_check-box_properties.md\":\"8f33ac0c\",\"guide_components_color-picker_emits.md\":\"00983cd0\",\"guide_components_color-picker_index.md\":\"b2d62612\",\"guide_components_color-picker_properties.md\":\"5466ba72\",\"guide_components_combo-box_emits.md\":\"d5ffda50\",\"guide_components_combo-box_index.md\":\"1c4364f5\",\"guide_components_combo-box_properties.md\":\"2e1d6060\",\"guide_components_img_emits.md\":\"6237adb4\",\"guide_components_img_index.md\":\"fa51a3a1\",\"guide_components_img_properties.md\":\"8d321b5e\",\"guide_components_info-box_emits.md\":\"c2e71eec\",\"guide_components_info-box_index.md\":\"06175fed\",\"guide_components_info-box_properties.md\":\"314dbb00\",\"guide_components_message-bar_emits.md\":\"e89a5a22\",\"guide_components_message-bar_index.md\":\"3f0b01d6\",\"guide_components_message-bar_properties.md\":\"ee3838d9\",\"guide_components_progress-bar_emits.md\":\"5b611e3b\",\"guide_components_progress-bar_index.md\":\"689c3241\",\"guide_components_progress-bar_properties.md\":\"39af7fb2\",\"guide_components_progress-ring_emits.md\":\"67e4644e\",\"guide_components_progress-ring_index.md\":\"9a33542b\",\"guide_components_progress-ring_properties.md\":\"c897c4bb\",\"guide_components_radio_emits.md\":\"28506857\",\"guide_components_radio_index.md\":\"e5a479ce\",\"guide_components_radio_properties.md\":\"f8e55d2f\",\"guide_components_text-box_emits.md\":\"0bf89ef8\",\"guide_components_text-box_index.md\":\"7ccfc637\",\"guide_components_text-box_properties.md\":\"aab3a89e\",\"guide_components_toggle-switch_emits.md\":\"5146435f\",\"guide_components_toggle-switch_index.md\":\"8be48081\",\"guide_components_toggle-switch_properties.md\":\"54984c3a\",\"guide_index.md\":\"e3dca1d7\",\"index.md\":\"1e9773d5\"}")</script>
-    <script type="module" async src="/VFluent3/assets/app.d60fa8c3.js"></script>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-19c990f1><div class="wrapper" data-v-19c990f1><div class="container" data-v-19c990f1><div class="title" data-v-19c990f1><div class="VPNavBarTitle has-sidebar" data-v-19c990f1 data-v-ab179fa1><a class="title" href="/VFluent3/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>VFluent3</span><!--[--><!--]--></a></div></div><div class="content" data-v-19c990f1><div class="content-body" data-v-19c990f1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-19c990f1><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-19c990f1 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Guide</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-19c990f1 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-19c990f1 data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-19c990f1 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-19c990f1><div class="divider-line" data-v-19c990f1></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-d2ecc192><button data-v-d2ecc192>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-575e6a36><div class="curtain" data-v-575e6a36></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-575e6a36><span class="visually-hidden" id="sidebar-aria-label" data-v-575e6a36> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Basic input</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/button/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/check-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CheckBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/combobox/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Combobox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/details-list/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DetailsList</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drop-down/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DropDown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio-group/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RadioGroup</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/rating-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RatingControl</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/slider/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/toggle-switch/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ToggleSwitch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tag/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Tag</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Collections</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/flip-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>FlipView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/list-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ListView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tree-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TreeView</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Date & Time</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarDatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/time-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TimePicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Dialogs & flyouts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/callout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Callout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Layout</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/collapse/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Collapse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/expander/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Expander</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drawer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Panel</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Media</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/image/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Img</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ImgBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/persona/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Persona</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Menu & toolbars</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/command-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CommandBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/menu-flyout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MenuFlyout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/swipe-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SwipeControl</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Navigation</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/breadcrumb/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationPanel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pivot/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pivot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pagination/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pagination</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Scrolling</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/infinite-scroll-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfiniteScrollView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/scroll-story/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ScrollStory</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Status & info</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/badge/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-ring/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressRing</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Styles</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/animated-icon/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>AnimatedIcon</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/icon-element/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>IconElement</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/reveal-container/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RevealContainer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/shimmer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Shimmer</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Text</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/search-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SearchBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-field/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextField</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/verify-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>VerifyBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Windowing</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/web-window/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>WebWindow</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Global</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Advance</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-935f8a84><div class="content" data-v-935f8a84><div class="outline-marker" data-v-935f8a84></div><div class="outline-title" role="heading" aria-level="2" data-v-935f8a84>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-935f8a84><span class="visually-hidden" id="doc-outline-aria-label" data-v-935f8a84> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-935f8a84 data-v-b933a997><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _VFluent3_guide_components_combo-box_" data-v-39a288b8><div><h1 id="combobox" tabindex="-1">ComboBox <a class="header-anchor" href="#combobox" aria-label="Permalink to &quot;ComboBox&quot;">​</a></h1><h2 id="quick-start" tabindex="-1">Quick Start <a class="header-anchor" href="#quick-start" aria-label="Permalink to &quot;Quick Start&quot;">​</a></h2><h3 id="default" tabindex="-1">Default <a class="header-anchor" href="#default" aria-label="Permalink to &quot;Default&quot;">​</a></h3><hr><div class="fv-combo-box light" style="--fv-combo-box-height:undefinedpx;--fv-combo-box-effect-position:center;"><div class="fv-TextBox light fv-combo-box--select-input" style="background:;border-radius:3px;" righticon="ChevronDown" autofocus title="input"><div class="fv-RevealContainer light fv-text-box-reveal-container" style="border-radius:3px;"><svg style="display:none;" width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> &gt; <defs><radialGradient cx="50%" cy="50%" r="120" gradientUnits="userSpaceOnUse" spreadMethod="pad" id="backgroundG_0b212eb483b4ea917931af9d3ffa6d75" gradientTransform="matrix(1 0 0 1 0.000 0.000)"><stop offset="0" stop-color="rgba(121, 119, 117, 0.3)"></stop><stop offset="1" stop-color="rgba(255, 255, 255, 0)"></stop><!--[--><!--]--></radialGradient><radialGradient cx="50%" cy="50%" r="60" gradientUnits="userSpaceOnUse" spreadMethod="pad" id="borderG_0b212eb483b4ea917931af9d3ffa6d75" gradientTransform="matrix(1 0 0 1 0.000 0.000)"><stop offset="0" stop-color="rgba(121, 119, 117, 0.6)"></stop><stop offset="1" stop-color="rgba(255, 255, 255, 0)"></stop><!--[--><!--]--></radialGradient><radialGradient cx="50%" cy="50%" r="0" gradientUnits="userSpaceOnUse" spreadMethod="pad" id="clickG_0b212eb483b4ea917931af9d3ffa6d75" gradientTransform="matrix(1 0 0 1 0.000 0.000)"><stop offset="0" stop-color="rgba(255, 255, 255, 0)"></stop><stop offset="0.33" stop-color="rgba(121, 119, 117, 0.3)"></stop><stop offset="0.66" stop-color="rgba(255, 255, 255, 0)"></stop><stop offset="1" stop-color="rgba(255, 255, 255, 0)"></stop></radialGradient></defs><rect x="0.5" y="0.5" rx="3" ry="3" style="box-sizing:border-box;width:-1px;height:-1px;stroke:url(#borderG_0b212eb483b4ea917931af9d3ffa6d75);fill:transparent;stroke-width:1;"></rect><rect style="display:none;stroke:transparent;box-sizing:border-box;width:-1px;height:-1px;fill:transparent;stroke-width:1;" x="0.5" y="0.5" rx="3" ry="3"></rect></svg></div><div class="fv-text-box-wrapper-container" style="border-width:1px;border-color:;border-radius:3px;"><div style="display:none;" class="fix-block"><p></p></div><i style="display:none;" class="ms-Icon-- ms-Icon icon-block"></i><div class="text-box-container"><input value="" inputmode="text" type="text" placeholder="Input your company" class="fv-text-box-input" readonly maxlength="" style="font-size:13.3px;font-weight:normal;color:;text-align:left;"><!----></div><i style="display:none;" class="ms-Icon-- ms-Icon icon-block"></i><div style="display:none;" class="fix-block"><p></p></div></div></div><div class="fv-combo-box--options" style="display:none;"><div class="fv-combo-box--bg"><div class="fv-combo-box--options-wrapper"><!--[--><div class="fv-combo-box--option"><div class="fv-combo-box--option-text"><!--[-->Microsoft<!--]--></div></div><div class="fv-combo-box--option"><div class="fv-combo-box--option-text"><!--[-->Apple<!--]--></div></div><div class="fv-combo-box--option"><div class="fv-combo-box--option-text"><!--[-->Google<!--]--></div></div><div class="fv-combo-box--option"><div class="fv-combo-box--option-text"><!--[-->Facebook<!--]--></div></div><div class="fv-combo-box--option"><div class="fv-combo-box--option-text"><!--[-->Github<!--]--></div></div><!--]--></div></div></div></div><div class="language-template vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">template</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-combo-box</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
+<span class="line highlighted"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">        v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">value</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span></span>
+<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">options</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">options</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
+<span class="line highlighted"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">theme</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
+<span class="line highlighted"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">        placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Input your company&quot;</span></span>
+<span class="line highlighted"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">        autofocus</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-combo-box</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h3 id="editable" tabindex="-1">Editable <a class="header-anchor" href="#editable" aria-label="Permalink to &quot;Editable&quot;">​</a></h3><hr><div class="fv-combo-box light" style="--fv-combo-box-height:undefinedpx;--fv-combo-box-effect-position:center;width:100%;"><div class="fv-TextBox light fv-combo-box--select-input" style="background:;border-radius:3px;" righticon="ChevronDown" title="input"><div class="fv-RevealContainer light fv-text-box-reveal-container" style="border-radius:3px;"><svg style="display:none;" width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> &gt; <defs><radialGradient cx="50%" cy="50%" r="120" gradientUnits="userSpaceOnUse" spreadMethod="pad" id="backgroundG_5c9aefe17c42ca63b780ba801b293c04" gradientTransform="matrix(1 0 0 1 0.000 0.000)"><stop offset="0" stop-color="rgba(121, 119, 117, 0.3)"></stop><stop offset="1" stop-color="rgba(255, 255, 255, 0)"></stop><!--[--><!--]--></radialGradient><radialGradient cx="50%" cy="50%" r="60" gradientUnits="userSpaceOnUse" spreadMethod="pad" id="borderG_5c9aefe17c42ca63b780ba801b293c04" gradientTransform="matrix(1 0 0 1 0.000 0.000)"><stop offset="0" stop-color="rgba(121, 119, 117, 0.6)"></stop><stop offset="1" stop-color="rgba(255, 255, 255, 0)"></stop><!--[--><!--]--></radialGradient><radialGradient cx="50%" cy="50%" r="0" gradientUnits="userSpaceOnUse" spreadMethod="pad" id="clickG_5c9aefe17c42ca63b780ba801b293c04" gradientTransform="matrix(1 0 0 1 0.000 0.000)"><stop offset="0" stop-color="rgba(255, 255, 255, 0)"></stop><stop offset="0.33" stop-color="rgba(121, 119, 117, 0.3)"></stop><stop offset="0.66" stop-color="rgba(255, 255, 255, 0)"></stop><stop offset="1" stop-color="rgba(255, 255, 255, 0)"></stop></radialGradient></defs><rect x="0.5" y="0.5" rx="3" ry="3" style="box-sizing:border-box;width:-1px;height:-1px;stroke:url(#borderG_5c9aefe17c42ca63b780ba801b293c04);fill:transparent;stroke-width:1;"></rect><rect style="display:none;stroke:transparent;box-sizing:border-box;width:-1px;height:-1px;fill:transparent;stroke-width:1;" x="0.5" y="0.5" rx="3" ry="3"></rect></svg></div><div class="fv-text-box-wrapper-container" style="border-width:1px;border-color:;border-radius:3px;"><div style="display:none;" class="fix-block"><p></p></div><i style="display:none;" class="ms-Icon-- ms-Icon icon-block"></i><div class="text-box-container"><input value="" inputmode="text" type="text" placeholder="Input your company" class="fv-text-box-input" maxlength="" style="font-size:13.3px;font-weight:normal;color:;text-align:left;"><!----></div><i style="display:none;" class="ms-Icon-- ms-Icon icon-block"></i><div style="display:none;" class="fix-block"><p></p></div></div></div><div class="fv-combo-box--editable fv-combo-box--options" style="display:none;"><div class="fv-combo-box--bg"><div class="fv-combo-box--options-wrapper"><!--[--><div class="fv-combo-box--option"><div class="fv-combo-box--option-text"><!--[-->Microsoft<!--]--></div></div><div class="fv-combo-box--option"><div class="fv-combo-box--option-text"><!--[-->Apple<!--]--></div></div><div class="fv-combo-box--option"><div class="fv-combo-box--option-text"><!--[-->Google<!--]--></div></div><div class="fv-combo-box--option"><div class="fv-combo-box--option-text"><!--[-->Facebook<!--]--></div></div><div class="fv-combo-box--option"><div class="fv-combo-box--option-text"><!--[-->Github<!--]--></div></div><!--]--></div></div></div></div><div class="language-template vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">template</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-combo-box</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
+<span class="line highlighted"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">        style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;width:100%;&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">options</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">options</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
+<span class="line highlighted"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">        editable</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">theme</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">        placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Input your company&quot;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-combo-box</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h3 id="disabled" tabindex="-1">Disabled <a class="header-anchor" href="#disabled" aria-label="Permalink to &quot;Disabled&quot;">​</a></h3><hr><div class="fv-combo-box disabled light" style="--fv-combo-box-height:undefinedpx;--fv-combo-box-effect-position:center;"><div class="fv-TextBox light disabled fv-combo-box--select-input" style="background:;border-radius:3px;" righticon="ChevronDown" title="input"><div class="fv-RevealContainer light fv-text-box-reveal-container" style="border-radius:3px;"><svg style="display:none;" width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> &gt; <defs><radialGradient cx="50%" cy="50%" r="120" gradientUnits="userSpaceOnUse" spreadMethod="pad" id="backgroundG_ad4a4fee6bb818d769484638a3b70f17" gradientTransform="matrix(1 0 0 1 0.000 0.000)"><stop offset="0" stop-color="rgba(121, 119, 117, 0.3)"></stop><stop offset="1" stop-color="rgba(255, 255, 255, 0)"></stop><!--[--><!--]--></radialGradient><radialGradient cx="50%" cy="50%" r="60" gradientUnits="userSpaceOnUse" spreadMethod="pad" id="borderG_ad4a4fee6bb818d769484638a3b70f17" gradientTransform="matrix(1 0 0 1 0.000 0.000)"><stop offset="0" stop-color="rgba(121, 119, 117, 0.6)"></stop><stop offset="1" stop-color="rgba(255, 255, 255, 0)"></stop><!--[--><!--]--></radialGradient><radialGradient cx="50%" cy="50%" r="0" gradientUnits="userSpaceOnUse" spreadMethod="pad" id="clickG_ad4a4fee6bb818d769484638a3b70f17" gradientTransform="matrix(1 0 0 1 0.000 0.000)"><stop offset="0" stop-color="rgba(255, 255, 255, 0)"></stop><stop offset="0.33" stop-color="rgba(121, 119, 117, 0.3)"></stop><stop offset="0.66" stop-color="rgba(255, 255, 255, 0)"></stop><stop offset="1" stop-color="rgba(255, 255, 255, 0)"></stop></radialGradient></defs><rect x="0.5" y="0.5" rx="3" ry="3" style="box-sizing:border-box;width:-1px;height:-1px;stroke:url(#borderG_ad4a4fee6bb818d769484638a3b70f17);fill:transparent;stroke-width:1;"></rect><rect style="display:none;stroke:transparent;box-sizing:border-box;width:-1px;height:-1px;fill:transparent;stroke-width:1;" x="0.5" y="0.5" rx="3" ry="3"></rect></svg></div><div class="fv-text-box-wrapper-container" style="border-width:1px;border-color:;border-radius:3px;"><div style="display:none;" class="fix-block"><p></p></div><i style="display:none;" class="ms-Icon-- ms-Icon icon-block"></i><div class="text-box-container"><input value="" inputmode="text" type="text" placeholder="Input your company" class="fv-text-box-input" readonly disabled maxlength="" style="font-size:13.3px;font-weight:normal;color:;text-align:left;"><!----></div><i style="display:none;" class="ms-Icon-- ms-Icon icon-block"></i><div style="display:none;" class="fix-block"><p></p></div></div></div><div class="fv-combo-box--options" style="display:none;"><div class="fv-combo-box--bg"><div class="fv-combo-box--options-wrapper"><!--[--><div class="fv-combo-box--option"><div class="fv-combo-box--option-text"><!--[-->Microsoft<!--]--></div></div><div class="fv-combo-box--option"><div class="fv-combo-box--option-text"><!--[-->Apple<!--]--></div></div><div class="fv-combo-box--option"><div class="fv-combo-box--option-text"><!--[-->Google<!--]--></div></div><div class="fv-combo-box--option"><div class="fv-combo-box--option-text"><!--[-->Facebook<!--]--></div></div><div class="fv-combo-box--option"><div class="fv-combo-box--option-text"><!--[-->Github<!--]--></div></div><!--]--></div></div></div></div><div class="language-template vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">template</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-combo-box</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
+<span class="line highlighted"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">        disabled</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">options</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">options</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">theme</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">        placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Input your company&quot;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-combo-box</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-label="Permalink to &quot;Properties&quot;">​</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">autofocus</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">editable</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">editable</td></tr><tr><td style="text-align:center;">error-border-color</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">font-size</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">14</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">hover-border-color</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">input-rules</td><td style="text-align:center;">[object,string,function]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">lang</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">i18n</td></tr><tr><td style="text-align:center;">maxlength</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">minlength</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">model-value</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">v-model</td></tr><tr><td style="text-align:center;">options</td><td style="text-align:center;">[array]</td><td style="text-align:center;">No</td><td style="text-align:center;">() =&gt; []</td><td style="text-align:center;">select options</td></tr><tr><td style="text-align:center;">pattern</td><td style="text-align:center;">[object,string,function]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">placeholder</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">required</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">[&#39;light&#39;,&#39;dark&#39;,&#39;global&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">theme</td></tr><tr><td style="text-align:center;">title</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;input&#39;</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">warning-border-color</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr></tbody></table><h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-label="Permalink to &quot;Emits&quot;">​</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">blur</td><td style="text-align:center;">evt[FocusEvent]</td><td style="text-align:center;">onblur</td></tr><tr><td style="text-align:center;">change</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">onchange</td></tr><tr><td style="text-align:center;">error-input</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">onerrorinput</td></tr><tr><td style="text-align:center;">focus</td><td style="text-align:center;">evt[FocusEvent]</td><td style="text-align:center;">onfocus</td></tr><tr><td style="text-align:center;">input</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">oninput</td></tr><tr><td style="text-align:center;">keydown</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">onkeydown</td></tr><tr><td style="text-align:center;">keypress</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">onkeypress</td></tr><tr><td style="text-align:center;">keyup</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">onkeyup</td></tr><tr><td style="text-align:center;">update:model-value</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">v-model</td></tr><tr><td style="text-align:center;">warning-input</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">onwarninginput</td></tr></tbody></table></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-09de1c0f><!--[--><!--]--><!----><nav class="prev-next" data-v-09de1c0f><div class="pager" data-v-09de1c0f><!----></div><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link next" href="/VFluent3/guide/components/button/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Next page</span><span class="title" data-v-09de1c0f>Button</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>MIT Licensed</p><p class="copyright" data-v-e315a0ad>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_calendar-date-picker_properties.md\":\"DXRjmMG8\",\"guide_components_image_properties.md\":\"DGanRzCb\",\"guide_components_img-box_index.md\":\"DYtggkf_\",\"guide_components_img_emits.md\":\"BlE7jvZQ\",\"guide_components_img_index.md\":\"Bm9FiuU4\",\"guide_components_icon-element_properties.md\":\"8Oakruwc\",\"guide_components_img_properties.md\":\"B42YSocI\",\"guide_components_drawer_index.md\":\"D_vpnCpE\",\"guide_components_verify-box_emits.md\":\"DT17Iazx\",\"guide_components_calendar-date-picker_index.md\":\"BdHjrurh\",\"guide_components_rating-control_index.md\":\"Q9l5Lfrr\",\"guide_components_rating-control_properties.md\":\"DKprnl0i\",\"guide_components_calendar-view_index.md\":\"zdoRYVx1\",\"guide_components_animated-icon_index.md\":\"yZDMzCFe\",\"guide_components_calendar-date-picker_emits.md\":\"D5OkfR8j\",\"guide_components_badge_index.md\":\"Bb4crrJn\",\"guide_components_image_index.md\":\"B7X6cWAZ\",\"guide_components_slider_index.md\":\"C7zZ2d-W\",\"guide_components_radio-group_index.md\":\"CVfh3h5H\",\"guide_components_swipe-control_index.md\":\"DwrDVPc1\",\"guide_components_color-picker_emits.md\":\"BHDXVtBQ\",\"guide_components_radio_index.md\":\"90as5QGp\",\"guide_components_pagination_properties.md\":\"JUAPvcTL\",\"guide_components_persona_properties.md\":\"DUTPhPMp\",\"guide_components_combo-box_emits.md\":\"Dh5R-qEv\",\"guide_components_pivot_emits.md\":\"BTJPgNpy\",\"guide_components_pagination_index.md\":\"CnW2zAht\",\"guide_components_flip-view_properties.md\":\"BqZ4hhgU\",\"guide_components_icon-element_emits.md\":\"D5TXFdTZ\",\"guide_components_flip-view_index.md\":\"DefnDOv6\",\"guide_components_navigation-panel_index.md\":\"6mO__sSK\",\"guide_components_rating-control_emits.md\":\"blvomSeC\",\"guide_components_icon-element_index.md\":\"DQ8K7JNn\",\"guide_components_navigation-view_index.md\":\"4AQRiz1k\",\"guide_components_toggle-switch_emits.md\":\"CLGzrNut\",\"guide_components_toggle-switch_index.md\":\"61en_q9-\",\"guide_components_scroll-story_index.md\":\"Vpgb1HSV\",\"guide_components_reveal-container_index.md\":\"Cut2r4tV\",\"guide_components_search-box_emits.md\":\"-d9sWNNt\",\"guide_components_search-box_properties.md\":\"DEKFfPFw\",\"guide_components_shimmer_emits.md\":\"CTMInlI3\",\"guide_components_tag_index.md\":\"BhhxkcHn\",\"guide_components_search-box_index.md\":\"DgkrY0oY\",\"guide_components_shimmer_index.md\":\"iZlHuTxw\",\"guide_components_shimmer_properties.md\":\"CdkU1o6H\",\"guide_components_tree-view_index.md\":\"CUrwan4q\",\"guide_components_text-field_index.md\":\"CXSimJtj\",\"guide_components_text-box_index.md\":\"C5moAPfB\",\"guide_components_progress-ring_properties.md\":\"Dc08Uiff\",\"guide_components_toggle-switch_properties.md\":\"tFppK_IS\",\"guide_components_radio-group_emits.md\":\"cEDzKVnN\",\"guide_components_collapse_index.md\":\"N9Iu5-2v\",\"guide_components_image_emits.md\":\"lmlz2xJd\",\"guide_components_callout_index.md\":\"D9RU33w6\",\"guide_components_pivot_index.md\":\"B_vwQL-5\",\"guide_components_command-bar_index.md\":\"Cp4_rrGB\",\"guide_components_pagination_emits.md\":\"Dng86A22\",\"guide_components_button_index.md\":\"7sqT2MQP\",\"guide_components_info-box_properties.md\":\"BI7Nvk-E\",\"guide_components_drop-down_emits.md\":\"BE95TdKW\",\"guide_components_expander_index.md\":\"BKgcUJzQ\",\"guide_components_message-bar_index.md\":\"AEtAWlF8\",\"guide_components_menu-flyout_index.md\":\"Csa7irPj\",\"guide_components_panel_index.md\":\"CsTu0bXo\",\"guide_components_panel_properties.md\":\"BaxoCYKq\",\"guide_components_progress-bar_emits.md\":\"BcwXUpsF\",\"guide_components_progress-bar_properties.md\":\"TxiS9ZMA\",\"guide_components_progress-ring_emits.md\":\"D2Y6hIZ9\",\"guide_components_color-picker_index.md\":\"DCc4ixcU\",\"guide_components_progress-ring_index.md\":\"CPb-ZEPE\",\"guide_components_color-picker_properties.md\":\"wcXK29Vl\",\"guide_components_time-picker_index.md\":\"CQJdRRaG\",\"guide_components_drop-down_properties.md\":\"Bwlkpr1q\",\"guide_components_infinite-scroll-view_index.md\":\"yAuD807x\",\"guide_components_check-box_index.md\":\"FYgdu4oq\",\"guide_components_progress-bar_index.md\":\"D8vHQw5V\",\"guide_components_combo-box_index.md\":\"DTyu3eNd\",\"guide_components_info-box_emits.md\":\"DlEwpkkq\",\"guide_components_drop-down_index.md\":\"BZzJZQWq\",\"guide_components_list-view_index.md\":\"BoYvMzb0\",\"guide_components_verify-box_properties.md\":\"CW6W8fFf\",\"guide_components_verify-box_index.md\":\"DwSB40wR\",\"guide_index.md\":\"Bndlt3sL\",\"guide_components_web-window_index.md\":\"Bxc8vEeI\",\"index.md\":\"MTRqI42u\",\"guide_components_combo-box_properties.md\":\"AWfHzV6x\",\"guide_components_combobox_emits.md\":\"CGB6WLt8\",\"guide_components_combobox_properties.md\":\"Bja0hMou\",\"guide_components_details-list_index.md\":\"CcgOCIyt\",\"guide_components_info-box_index.md\":\"vXh-_DsL\",\"guide_components_combobox_index.md\":\"CsPkY6YB\",\"guide_components_date-picker_index.md\":\"12vmUIup\",\"guide_components_flip-view_emits.md\":\"DCheHjDj\",\"guide_components_panel_emits.md\":\"DG0REDq8\",\"guide_components_breadcrumb_index.md\":\"DyDm7PeP\",\"guide_components_radio-group_properties.md\":\"BnPxoKsQ\",\"guide_components_persona_emits.md\":\"CnsDPKRU\",\"guide_components_pivot_properties.md\":\"BmoLpPi1\",\"guide_components_persona_index.md\":\"DT00jby4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vfluent3\",\"description\":\"A Vue3 component library for Fluent UI\",\"base\":\"/VFluent3/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"VFluent3\",\"footer\":{\"message\":\"MIT Licensed\",\"copyright\":\"Copyright © Creator SN - 2022\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/\"}],\"sidebar\":[{\"text\":\"Basic input\",\"collapsed\":true,\"items\":[{\"text\":\"Button\",\"link\":\"/guide/components/button/\"},{\"text\":\"CheckBox\",\"link\":\"/guide/components/check-box/\"},{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"},{\"text\":\"Combobox\",\"link\":\"/guide/components/combobox/\"},{\"text\":\"DetailsList\",\"link\":\"/guide/components/details-list/\"},{\"text\":\"DropDown\",\"link\":\"/guide/components/drop-down/\"},{\"text\":\"Radio\",\"link\":\"/guide/components/radio/\"},{\"text\":\"RadioGroup\",\"link\":\"/guide/components/radio-group/\"},{\"text\":\"RatingControl\",\"link\":\"/guide/components/rating-control/\"},{\"text\":\"Slider\",\"link\":\"/guide/components/slider/\"},{\"text\":\"ToggleSwitch\",\"link\":\"/guide/components/toggle-switch/\"},{\"text\":\"Tag\",\"link\":\"/guide/components/tag/\"}]},{\"text\":\"Collections\",\"collapsed\":true,\"items\":[{\"text\":\"FlipView\",\"link\":\"/guide/components/flip-view/\"},{\"text\":\"ListView\",\"link\":\"/guide/components/list-view/\"},{\"text\":\"TreeView\",\"link\":\"/guide/components/tree-view/\"}]},{\"text\":\"Date & Time\",\"collapsed\":true,\"items\":[{\"text\":\"CalendarDatePicker\",\"link\":\"/guide/components/calendar-date-picker/\"},{\"text\":\"CalendarView\",\"link\":\"/guide/components/calendar-view/\"},{\"text\":\"DatePicker\",\"link\":\"/guide/components/date-picker/\"},{\"text\":\"TimePicker\",\"link\":\"/guide/components/time-picker/\"}]},{\"text\":\"Dialogs & flyouts\",\"collapsed\":true,\"items\":[{\"text\":\"Callout\",\"link\":\"/guide/components/callout/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Layout\",\"collapsed\":true,\"items\":[{\"text\":\"Collapse\",\"link\":\"/guide/components/collapse/\"},{\"text\":\"Expander\",\"link\":\"/guide/components/expander/\"},{\"text\":\"Drawer\",\"link\":\"/guide/components/drawer/\"},{\"text\":\"Panel\",\"link\":\"/guide/components/panel/\"}]},{\"text\":\"Media\",\"collapsed\":true,\"items\":[{\"text\":\"Image\",\"link\":\"/guide/components/image/\"},{\"text\":\"Img\",\"link\":\"/guide/components/img/\"},{\"text\":\"ImgBox\",\"link\":\"/guide/components/img-box/\"},{\"text\":\"Persona\",\"link\":\"/guide/components/persona/\"}]},{\"text\":\"Menu & toolbars\",\"collapsed\":true,\"items\":[{\"text\":\"CommandBar\",\"link\":\"/guide/components/command-bar/\"},{\"text\":\"MenuFlyout\",\"link\":\"/guide/components/menu-flyout/\"},{\"text\":\"SwipeControl\",\"link\":\"/guide/components/swipe-control/\"}]},{\"text\":\"Navigation\",\"collapsed\":true,\"items\":[{\"text\":\"Breadcrumb\",\"link\":\"/guide/components/breadcrumb/\"},{\"text\":\"NavigationPanel\",\"link\":\"/guide/components/navigation-panel/\"},{\"text\":\"NavigationView\",\"link\":\"/guide/components/navigation-view/\"},{\"text\":\"Pivot\",\"link\":\"/guide/components/pivot/\"},{\"text\":\"Pagination\",\"link\":\"/guide/components/pagination/\"}]},{\"text\":\"Scrolling\",\"collapsed\":true,\"items\":[{\"text\":\"InfiniteScrollView\",\"link\":\"/guide/components/infinite-scroll-view/\"},{\"text\":\"ScrollStory\",\"link\":\"/guide/components/scroll-story/\"}]},{\"text\":\"Status & info\",\"collapsed\":true,\"items\":[{\"text\":\"Badge\",\"link\":\"/guide/components/badge/\"},{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"ProgressBar\",\"link\":\"/guide/components/progress-bar/\"},{\"text\":\"ProgressRing\",\"link\":\"/guide/components/progress-ring/\"}]},{\"text\":\"Styles\",\"collapsed\":true,\"items\":[{\"text\":\"AnimatedIcon\",\"link\":\"/guide/components/animated-icon/\"},{\"text\":\"IconElement\",\"link\":\"/guide/components/icon-element/\"},{\"text\":\"RevealContainer\",\"link\":\"/guide/components/reveal-container/\"},{\"text\":\"Shimmer\",\"link\":\"/guide/components/shimmer/\"}]},{\"text\":\"Text\",\"collapsed\":true,\"items\":[{\"text\":\"SearchBox\",\"link\":\"/guide/components/search-box/\"},{\"text\":\"TextBox\",\"link\":\"/guide/components/text-box/\"},{\"text\":\"TextField\",\"link\":\"/guide/components/text-field/\"},{\"text\":\"VerifyBox\",\"link\":\"/guide/components/verify-box/\"}]},{\"text\":\"Windowing\",\"collapsed\":true,\"items\":[{\"text\":\"WebWindow\",\"link\":\"/guide/components/web-window/\"}]},{\"text\":\"Global\",\"collapsed\":true,\"items\":[{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Advance\",\"collapsed\":true,\"items\":[{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
     
   </body>
 </html>
\ No newline at end of file
diff --git a/guide/components/combo-box/properties.html b/guide/components/combo-box/properties.html
index bff29c1..6db07f7 100644
--- a/guide/components/combo-box/properties.html
+++ b/guide/components/combo-box/properties.html
@@ -1,20 +1,24 @@
 <!DOCTYPE html>
-<html lang="en-US">
+<html lang="en-US" dir="ltr">
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>Properties | vfluent3</title>
+    <title>vfluent3</title>
     <meta name="description" content="A Vue3 component library for Fluent UI">
-    <link rel="stylesheet" href="/VFluent3/assets/style.0a1d87af.css">
-    <link rel="modulepreload" href="/VFluent3/assets/app.d60fa8c3.js">
-    <link rel="modulepreload" href="/VFluent3/assets/guide_components_combo-box_properties.md.2e1d6060.lean.js">
+    <meta name="generator" content="VitePress v1.0.0-rc.45">
+    <link rel="preload stylesheet" href="/VFluent3/assets/style.BabQegKX.css" as="style">
     
-    <script>(()=>{const e=localStorage.getItem("vitepress-theme-appearance"),a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script type="module" src="/VFluent3/assets/app.CSutcJ2E.js"></script>
+    <link rel="preload" href="/VFluent3/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/framework.DvIFzl91.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/theme.CgqFBnN_.js">
+    <link rel="modulepreload" href="/VFluent3/assets/guide_components_combo-box_properties.md.AWfHzV6x.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
   </head>
   <body>
-    <div id="app"><div class="Layout" data-v-058b7495><!--[--><!--]--><!--[--><span tabindex="-1" data-v-bea91388></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-bea91388> Skip to content </a><!--]--><!----><header class="VPNav" data-v-058b7495 data-v-2a0a2738><div class="VPNavBar has-sidebar" data-v-2a0a2738 data-v-45c9f423><div class="container" data-v-45c9f423><div class="VPNavBarTitle has-sidebar" data-v-45c9f423 data-v-011600ce><a class="title" href="/VFluent3/" data-v-011600ce><!----><!--[-->VFluent3<!--]--></a></div><div class="content" data-v-45c9f423><!----><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-45c9f423 data-v-4da4371d><span id="main-nav-aria-label" class="visually-hidden" data-v-4da4371d>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" data-v-4da4371d data-v-66f8d518 data-v-4d08dd3a><!--[-->Home<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" data-v-4da4371d data-v-66f8d518 data-v-4d08dd3a><!--[-->Guide<!--]--><!----></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-45c9f423 data-v-bf1c94ca><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" data-v-bf1c94ca data-v-d0ee0df2 data-v-55b931a0><span class="check" data-v-55b931a0><span class="icon" data-v-55b931a0><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-d0ee0df2><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-d0ee0df2><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-45c9f423 data-v-7cece6ac data-v-37af1650><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-37af1650><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-37af1650><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-37af1650><div class="VPMenu" data-v-37af1650 data-v-17dc081b><!----><!--[--><!--[--><!----><div class="group" data-v-7cece6ac><div class="item appearance" data-v-7cece6ac><p class="label" data-v-7cece6ac>Appearance</p><div class="appearance-action" data-v-7cece6ac><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" data-v-7cece6ac data-v-d0ee0df2 data-v-55b931a0><span class="check" data-v-55b931a0><span class="icon" data-v-55b931a0><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-d0ee0df2><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-d0ee0df2><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-45c9f423 data-v-5484e669><span class="container" data-v-5484e669><span class="top" data-v-5484e669></span><span class="middle" data-v-5484e669></span><span class="bottom" data-v-5484e669></span></span></button></div></div></div><!----></header><div class="VPLocalNav" data-v-058b7495 data-v-f623cd72><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-f623cd72><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-f623cd72><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-f623cd72>Menu</span></button><a class="top-link" href="#" data-v-f623cd72> Return to top </a></div><aside class="VPSidebar" data-v-058b7495 data-v-3b8ec0c7><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-3b8ec0c7><span class="visually-hidden" id="sidebar-aria-label" data-v-3b8ec0c7> Sidebar Navigation </span><!--[--><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Basic</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/button/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Button</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/check-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>CheckBox</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/radio/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Radio</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/progress-bar/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ProgressBar</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/progress-ring/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ProgressRing</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/toggle-switch/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ToggleSwitch</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/img/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Img</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/text-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>TextBox</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/combo-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ComboBox</span><!--]--><!----></a><!--]--></div></section></div><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Global</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/message-bar/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>MessageBar</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/info-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>InfoBox</span><!--]--><!----></a><!--]--></div></section></div><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Advance</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/color-picker/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ColorPicker</span><!--]--><!----></a><!--]--></div></section></div><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-058b7495 data-v-564173e9><div class="VPDoc has-sidebar" data-v-564173e9 data-v-32b7ddf4><div class="container" data-v-32b7ddf4><div class="aside" data-v-32b7ddf4><div class="aside-curtain" data-v-32b7ddf4></div><div class="aside-container" data-v-32b7ddf4><div class="aside-content" data-v-32b7ddf4><div class="VPDocAside" data-v-32b7ddf4 data-v-35c1bae1><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline has-outline" data-v-35c1bae1 data-v-123cce62><div class="content" data-v-123cce62><div class="outline-marker" data-v-123cce62></div><div class="outline-title" data-v-123cce62>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-123cce62><span class="visually-hidden" id="doc-outline-aria-label" data-v-123cce62> Table of Contents for current page </span><ul class="root" data-v-123cce62><!--[--><li style="" data-v-123cce62><a class="outline-link" href="#properties" data-v-123cce62>Properties</a><!----></li><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-35c1bae1></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-32b7ddf4><div class="content-container" data-v-32b7ddf4><!--[--><!--]--><main class="main" data-v-32b7ddf4><div style="position:relative;" class="vp-doc _VFluent3_guide_components_combo-box_properties" data-v-32b7ddf4><div><h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">autofocus</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">editable</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">editable</td></tr><tr><td style="text-align:center;">error-border-color</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">font-size</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">14</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">hover-border-color</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">input-rules</td><td style="text-align:center;">[object,string,function]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">lang</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">i18n</td></tr><tr><td style="text-align:center;">maxlength</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">minlength</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">model-value</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">v-model</td></tr><tr><td style="text-align:center;">options</td><td style="text-align:center;">[array]</td><td style="text-align:center;">No</td><td style="text-align:center;">() =&gt; []</td><td style="text-align:center;">select options</td></tr><tr><td style="text-align:center;">pattern</td><td style="text-align:center;">[object,string,function]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">placeholder</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">required</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">[&#39;light&#39;,&#39;dark&#39;,&#39;global&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">theme</td></tr><tr><td style="text-align:center;">title</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;input&#39;</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">warning-border-color</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr></tbody></table></div></div></main><footer class="VPDocFooter" data-v-32b7ddf4 data-v-cfaa3a6c><div class="edit-info" data-v-cfaa3a6c><!----><!----></div><div class="prev-next" data-v-cfaa3a6c><div class="pager" data-v-cfaa3a6c><!----></div><div class="pager" data-v-cfaa3a6c><a class="pager-link next" href="/VFluent3/guide/components/button/" data-v-cfaa3a6c><span class="desc" data-v-cfaa3a6c>Next page</span><span class="title" data-v-cfaa3a6c>Button</span></a></div></div></footer><!--[--><!--]--></div></div></div></div></div><footer class="VPFooter has-sidebar" data-v-058b7495 data-v-a6c8dde4><div class="container" data-v-a6c8dde4><p class="message" data-v-a6c8dde4>MIT Licensed</p><p class="copyright" data-v-a6c8dde4>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
-    <script>__VP_HASH_MAP__ = JSON.parse("{\"guide_components_button_emits.md\":\"d682bf18\",\"guide_components_button_index.md\":\"23a8eb54\",\"guide_components_button_properties.md\":\"cd4004b6\",\"guide_components_check-box_emits.md\":\"31609794\",\"guide_components_check-box_index.md\":\"32046814\",\"guide_components_check-box_properties.md\":\"8f33ac0c\",\"guide_components_color-picker_emits.md\":\"00983cd0\",\"guide_components_color-picker_index.md\":\"b2d62612\",\"guide_components_color-picker_properties.md\":\"5466ba72\",\"guide_components_combo-box_emits.md\":\"d5ffda50\",\"guide_components_combo-box_index.md\":\"1c4364f5\",\"guide_components_combo-box_properties.md\":\"2e1d6060\",\"guide_components_img_emits.md\":\"6237adb4\",\"guide_components_img_index.md\":\"fa51a3a1\",\"guide_components_img_properties.md\":\"8d321b5e\",\"guide_components_info-box_emits.md\":\"c2e71eec\",\"guide_components_info-box_index.md\":\"06175fed\",\"guide_components_info-box_properties.md\":\"314dbb00\",\"guide_components_message-bar_emits.md\":\"e89a5a22\",\"guide_components_message-bar_index.md\":\"3f0b01d6\",\"guide_components_message-bar_properties.md\":\"ee3838d9\",\"guide_components_progress-bar_emits.md\":\"5b611e3b\",\"guide_components_progress-bar_index.md\":\"689c3241\",\"guide_components_progress-bar_properties.md\":\"39af7fb2\",\"guide_components_progress-ring_emits.md\":\"67e4644e\",\"guide_components_progress-ring_index.md\":\"9a33542b\",\"guide_components_progress-ring_properties.md\":\"c897c4bb\",\"guide_components_radio_emits.md\":\"28506857\",\"guide_components_radio_index.md\":\"e5a479ce\",\"guide_components_radio_properties.md\":\"f8e55d2f\",\"guide_components_text-box_emits.md\":\"0bf89ef8\",\"guide_components_text-box_index.md\":\"7ccfc637\",\"guide_components_text-box_properties.md\":\"aab3a89e\",\"guide_components_toggle-switch_emits.md\":\"5146435f\",\"guide_components_toggle-switch_index.md\":\"8be48081\",\"guide_components_toggle-switch_properties.md\":\"54984c3a\",\"guide_index.md\":\"e3dca1d7\",\"index.md\":\"1e9773d5\"}")</script>
-    <script type="module" async src="/VFluent3/assets/app.d60fa8c3.js"></script>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-19c990f1><div class="wrapper" data-v-19c990f1><div class="container" data-v-19c990f1><div class="title" data-v-19c990f1><div class="VPNavBarTitle has-sidebar" data-v-19c990f1 data-v-ab179fa1><a class="title" href="/VFluent3/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>VFluent3</span><!--[--><!--]--></a></div></div><div class="content" data-v-19c990f1><div class="content-body" data-v-19c990f1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-19c990f1><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-19c990f1 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Guide</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-19c990f1 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-19c990f1 data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-19c990f1 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-19c990f1><div class="divider-line" data-v-19c990f1></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-d2ecc192><button data-v-d2ecc192>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-575e6a36><div class="curtain" data-v-575e6a36></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-575e6a36><span class="visually-hidden" id="sidebar-aria-label" data-v-575e6a36> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Basic input</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/button/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/check-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CheckBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/combobox/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Combobox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/details-list/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DetailsList</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drop-down/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DropDown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio-group/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RadioGroup</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/rating-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RatingControl</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/slider/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/toggle-switch/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ToggleSwitch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tag/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Tag</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Collections</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/flip-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>FlipView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/list-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ListView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tree-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TreeView</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Date & Time</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarDatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/time-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TimePicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Dialogs & flyouts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/callout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Callout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Layout</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/collapse/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Collapse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/expander/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Expander</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drawer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Panel</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Media</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/image/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Img</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ImgBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/persona/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Persona</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Menu & toolbars</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/command-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CommandBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/menu-flyout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MenuFlyout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/swipe-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SwipeControl</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Navigation</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/breadcrumb/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationPanel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pivot/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pivot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pagination/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pagination</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Scrolling</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/infinite-scroll-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfiniteScrollView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/scroll-story/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ScrollStory</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Status & info</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/badge/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-ring/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressRing</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Styles</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/animated-icon/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>AnimatedIcon</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/icon-element/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>IconElement</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/reveal-container/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RevealContainer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/shimmer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Shimmer</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Text</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/search-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SearchBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-field/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextField</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/verify-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>VerifyBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Windowing</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/web-window/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>WebWindow</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Global</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Advance</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-935f8a84><div class="content" data-v-935f8a84><div class="outline-marker" data-v-935f8a84></div><div class="outline-title" role="heading" aria-level="2" data-v-935f8a84>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-935f8a84><span class="visually-hidden" id="doc-outline-aria-label" data-v-935f8a84> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-935f8a84 data-v-b933a997><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _VFluent3_guide_components_combo-box_properties" data-v-39a288b8><div><h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-label="Permalink to &quot;Properties&quot;">​</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">autofocus</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">editable</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">editable</td></tr><tr><td style="text-align:center;">error-border-color</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">font-size</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">14</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">hover-border-color</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">input-rules</td><td style="text-align:center;">[object,string,function]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">lang</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">i18n</td></tr><tr><td style="text-align:center;">maxlength</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">minlength</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">model-value</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">v-model</td></tr><tr><td style="text-align:center;">options</td><td style="text-align:center;">[array]</td><td style="text-align:center;">No</td><td style="text-align:center;">() =&gt; []</td><td style="text-align:center;">select options</td></tr><tr><td style="text-align:center;">pattern</td><td style="text-align:center;">[object,string,function]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">placeholder</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">required</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">[&#39;light&#39;,&#39;dark&#39;,&#39;global&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">theme</td></tr><tr><td style="text-align:center;">title</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;input&#39;</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr><tr><td style="text-align:center;">warning-border-color</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as <a href="./../text-box/#properties">fv-text-box</a></td></tr></tbody></table></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-09de1c0f><!--[--><!--]--><!----><nav class="prev-next" data-v-09de1c0f><div class="pager" data-v-09de1c0f><!----></div><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link next" href="/VFluent3/guide/components/button/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Next page</span><span class="title" data-v-09de1c0f>Button</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>MIT Licensed</p><p class="copyright" data-v-e315a0ad>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_calendar-date-picker_properties.md\":\"DXRjmMG8\",\"guide_components_image_properties.md\":\"DGanRzCb\",\"guide_components_img-box_index.md\":\"DYtggkf_\",\"guide_components_img_emits.md\":\"BlE7jvZQ\",\"guide_components_img_index.md\":\"Bm9FiuU4\",\"guide_components_icon-element_properties.md\":\"8Oakruwc\",\"guide_components_img_properties.md\":\"B42YSocI\",\"guide_components_drawer_index.md\":\"D_vpnCpE\",\"guide_components_verify-box_emits.md\":\"DT17Iazx\",\"guide_components_calendar-date-picker_index.md\":\"BdHjrurh\",\"guide_components_rating-control_index.md\":\"Q9l5Lfrr\",\"guide_components_rating-control_properties.md\":\"DKprnl0i\",\"guide_components_calendar-view_index.md\":\"zdoRYVx1\",\"guide_components_animated-icon_index.md\":\"yZDMzCFe\",\"guide_components_calendar-date-picker_emits.md\":\"D5OkfR8j\",\"guide_components_badge_index.md\":\"Bb4crrJn\",\"guide_components_image_index.md\":\"B7X6cWAZ\",\"guide_components_slider_index.md\":\"C7zZ2d-W\",\"guide_components_radio-group_index.md\":\"CVfh3h5H\",\"guide_components_swipe-control_index.md\":\"DwrDVPc1\",\"guide_components_color-picker_emits.md\":\"BHDXVtBQ\",\"guide_components_radio_index.md\":\"90as5QGp\",\"guide_components_pagination_properties.md\":\"JUAPvcTL\",\"guide_components_persona_properties.md\":\"DUTPhPMp\",\"guide_components_combo-box_emits.md\":\"Dh5R-qEv\",\"guide_components_pivot_emits.md\":\"BTJPgNpy\",\"guide_components_pagination_index.md\":\"CnW2zAht\",\"guide_components_flip-view_properties.md\":\"BqZ4hhgU\",\"guide_components_icon-element_emits.md\":\"D5TXFdTZ\",\"guide_components_flip-view_index.md\":\"DefnDOv6\",\"guide_components_navigation-panel_index.md\":\"6mO__sSK\",\"guide_components_rating-control_emits.md\":\"blvomSeC\",\"guide_components_icon-element_index.md\":\"DQ8K7JNn\",\"guide_components_navigation-view_index.md\":\"4AQRiz1k\",\"guide_components_toggle-switch_emits.md\":\"CLGzrNut\",\"guide_components_toggle-switch_index.md\":\"61en_q9-\",\"guide_components_scroll-story_index.md\":\"Vpgb1HSV\",\"guide_components_reveal-container_index.md\":\"Cut2r4tV\",\"guide_components_search-box_emits.md\":\"-d9sWNNt\",\"guide_components_search-box_properties.md\":\"DEKFfPFw\",\"guide_components_shimmer_emits.md\":\"CTMInlI3\",\"guide_components_tag_index.md\":\"BhhxkcHn\",\"guide_components_search-box_index.md\":\"DgkrY0oY\",\"guide_components_shimmer_index.md\":\"iZlHuTxw\",\"guide_components_shimmer_properties.md\":\"CdkU1o6H\",\"guide_components_tree-view_index.md\":\"CUrwan4q\",\"guide_components_text-field_index.md\":\"CXSimJtj\",\"guide_components_text-box_index.md\":\"C5moAPfB\",\"guide_components_progress-ring_properties.md\":\"Dc08Uiff\",\"guide_components_toggle-switch_properties.md\":\"tFppK_IS\",\"guide_components_radio-group_emits.md\":\"cEDzKVnN\",\"guide_components_collapse_index.md\":\"N9Iu5-2v\",\"guide_components_image_emits.md\":\"lmlz2xJd\",\"guide_components_callout_index.md\":\"D9RU33w6\",\"guide_components_pivot_index.md\":\"B_vwQL-5\",\"guide_components_command-bar_index.md\":\"Cp4_rrGB\",\"guide_components_pagination_emits.md\":\"Dng86A22\",\"guide_components_button_index.md\":\"7sqT2MQP\",\"guide_components_info-box_properties.md\":\"BI7Nvk-E\",\"guide_components_drop-down_emits.md\":\"BE95TdKW\",\"guide_components_expander_index.md\":\"BKgcUJzQ\",\"guide_components_message-bar_index.md\":\"AEtAWlF8\",\"guide_components_menu-flyout_index.md\":\"Csa7irPj\",\"guide_components_panel_index.md\":\"CsTu0bXo\",\"guide_components_panel_properties.md\":\"BaxoCYKq\",\"guide_components_progress-bar_emits.md\":\"BcwXUpsF\",\"guide_components_progress-bar_properties.md\":\"TxiS9ZMA\",\"guide_components_progress-ring_emits.md\":\"D2Y6hIZ9\",\"guide_components_color-picker_index.md\":\"DCc4ixcU\",\"guide_components_progress-ring_index.md\":\"CPb-ZEPE\",\"guide_components_color-picker_properties.md\":\"wcXK29Vl\",\"guide_components_time-picker_index.md\":\"CQJdRRaG\",\"guide_components_drop-down_properties.md\":\"Bwlkpr1q\",\"guide_components_infinite-scroll-view_index.md\":\"yAuD807x\",\"guide_components_check-box_index.md\":\"FYgdu4oq\",\"guide_components_progress-bar_index.md\":\"D8vHQw5V\",\"guide_components_combo-box_index.md\":\"DTyu3eNd\",\"guide_components_info-box_emits.md\":\"DlEwpkkq\",\"guide_components_drop-down_index.md\":\"BZzJZQWq\",\"guide_components_list-view_index.md\":\"BoYvMzb0\",\"guide_components_verify-box_properties.md\":\"CW6W8fFf\",\"guide_components_verify-box_index.md\":\"DwSB40wR\",\"guide_index.md\":\"Bndlt3sL\",\"guide_components_web-window_index.md\":\"Bxc8vEeI\",\"index.md\":\"MTRqI42u\",\"guide_components_combo-box_properties.md\":\"AWfHzV6x\",\"guide_components_combobox_emits.md\":\"CGB6WLt8\",\"guide_components_combobox_properties.md\":\"Bja0hMou\",\"guide_components_details-list_index.md\":\"CcgOCIyt\",\"guide_components_info-box_index.md\":\"vXh-_DsL\",\"guide_components_combobox_index.md\":\"CsPkY6YB\",\"guide_components_date-picker_index.md\":\"12vmUIup\",\"guide_components_flip-view_emits.md\":\"DCheHjDj\",\"guide_components_panel_emits.md\":\"DG0REDq8\",\"guide_components_breadcrumb_index.md\":\"DyDm7PeP\",\"guide_components_radio-group_properties.md\":\"BnPxoKsQ\",\"guide_components_persona_emits.md\":\"CnsDPKRU\",\"guide_components_pivot_properties.md\":\"BmoLpPi1\",\"guide_components_persona_index.md\":\"DT00jby4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vfluent3\",\"description\":\"A Vue3 component library for Fluent UI\",\"base\":\"/VFluent3/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"VFluent3\",\"footer\":{\"message\":\"MIT Licensed\",\"copyright\":\"Copyright © Creator SN - 2022\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/\"}],\"sidebar\":[{\"text\":\"Basic input\",\"collapsed\":true,\"items\":[{\"text\":\"Button\",\"link\":\"/guide/components/button/\"},{\"text\":\"CheckBox\",\"link\":\"/guide/components/check-box/\"},{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"},{\"text\":\"Combobox\",\"link\":\"/guide/components/combobox/\"},{\"text\":\"DetailsList\",\"link\":\"/guide/components/details-list/\"},{\"text\":\"DropDown\",\"link\":\"/guide/components/drop-down/\"},{\"text\":\"Radio\",\"link\":\"/guide/components/radio/\"},{\"text\":\"RadioGroup\",\"link\":\"/guide/components/radio-group/\"},{\"text\":\"RatingControl\",\"link\":\"/guide/components/rating-control/\"},{\"text\":\"Slider\",\"link\":\"/guide/components/slider/\"},{\"text\":\"ToggleSwitch\",\"link\":\"/guide/components/toggle-switch/\"},{\"text\":\"Tag\",\"link\":\"/guide/components/tag/\"}]},{\"text\":\"Collections\",\"collapsed\":true,\"items\":[{\"text\":\"FlipView\",\"link\":\"/guide/components/flip-view/\"},{\"text\":\"ListView\",\"link\":\"/guide/components/list-view/\"},{\"text\":\"TreeView\",\"link\":\"/guide/components/tree-view/\"}]},{\"text\":\"Date & Time\",\"collapsed\":true,\"items\":[{\"text\":\"CalendarDatePicker\",\"link\":\"/guide/components/calendar-date-picker/\"},{\"text\":\"CalendarView\",\"link\":\"/guide/components/calendar-view/\"},{\"text\":\"DatePicker\",\"link\":\"/guide/components/date-picker/\"},{\"text\":\"TimePicker\",\"link\":\"/guide/components/time-picker/\"}]},{\"text\":\"Dialogs & flyouts\",\"collapsed\":true,\"items\":[{\"text\":\"Callout\",\"link\":\"/guide/components/callout/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Layout\",\"collapsed\":true,\"items\":[{\"text\":\"Collapse\",\"link\":\"/guide/components/collapse/\"},{\"text\":\"Expander\",\"link\":\"/guide/components/expander/\"},{\"text\":\"Drawer\",\"link\":\"/guide/components/drawer/\"},{\"text\":\"Panel\",\"link\":\"/guide/components/panel/\"}]},{\"text\":\"Media\",\"collapsed\":true,\"items\":[{\"text\":\"Image\",\"link\":\"/guide/components/image/\"},{\"text\":\"Img\",\"link\":\"/guide/components/img/\"},{\"text\":\"ImgBox\",\"link\":\"/guide/components/img-box/\"},{\"text\":\"Persona\",\"link\":\"/guide/components/persona/\"}]},{\"text\":\"Menu & toolbars\",\"collapsed\":true,\"items\":[{\"text\":\"CommandBar\",\"link\":\"/guide/components/command-bar/\"},{\"text\":\"MenuFlyout\",\"link\":\"/guide/components/menu-flyout/\"},{\"text\":\"SwipeControl\",\"link\":\"/guide/components/swipe-control/\"}]},{\"text\":\"Navigation\",\"collapsed\":true,\"items\":[{\"text\":\"Breadcrumb\",\"link\":\"/guide/components/breadcrumb/\"},{\"text\":\"NavigationPanel\",\"link\":\"/guide/components/navigation-panel/\"},{\"text\":\"NavigationView\",\"link\":\"/guide/components/navigation-view/\"},{\"text\":\"Pivot\",\"link\":\"/guide/components/pivot/\"},{\"text\":\"Pagination\",\"link\":\"/guide/components/pagination/\"}]},{\"text\":\"Scrolling\",\"collapsed\":true,\"items\":[{\"text\":\"InfiniteScrollView\",\"link\":\"/guide/components/infinite-scroll-view/\"},{\"text\":\"ScrollStory\",\"link\":\"/guide/components/scroll-story/\"}]},{\"text\":\"Status & info\",\"collapsed\":true,\"items\":[{\"text\":\"Badge\",\"link\":\"/guide/components/badge/\"},{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"ProgressBar\",\"link\":\"/guide/components/progress-bar/\"},{\"text\":\"ProgressRing\",\"link\":\"/guide/components/progress-ring/\"}]},{\"text\":\"Styles\",\"collapsed\":true,\"items\":[{\"text\":\"AnimatedIcon\",\"link\":\"/guide/components/animated-icon/\"},{\"text\":\"IconElement\",\"link\":\"/guide/components/icon-element/\"},{\"text\":\"RevealContainer\",\"link\":\"/guide/components/reveal-container/\"},{\"text\":\"Shimmer\",\"link\":\"/guide/components/shimmer/\"}]},{\"text\":\"Text\",\"collapsed\":true,\"items\":[{\"text\":\"SearchBox\",\"link\":\"/guide/components/search-box/\"},{\"text\":\"TextBox\",\"link\":\"/guide/components/text-box/\"},{\"text\":\"TextField\",\"link\":\"/guide/components/text-field/\"},{\"text\":\"VerifyBox\",\"link\":\"/guide/components/verify-box/\"}]},{\"text\":\"Windowing\",\"collapsed\":true,\"items\":[{\"text\":\"WebWindow\",\"link\":\"/guide/components/web-window/\"}]},{\"text\":\"Global\",\"collapsed\":true,\"items\":[{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Advance\",\"collapsed\":true,\"items\":[{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
     
   </body>
 </html>
\ No newline at end of file
diff --git a/guide/components/combobox/emits.html b/guide/components/combobox/emits.html
new file mode 100644
index 0000000..ec2bd81
--- /dev/null
+++ b/guide/components/combobox/emits.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>vfluent3</title>
+    <meta name="description" content="A Vue3 component library for Fluent UI">
+    <meta name="generator" content="VitePress v1.0.0-rc.45">
+    <link rel="preload stylesheet" href="/VFluent3/assets/style.BabQegKX.css" as="style">
+    
+    <script type="module" src="/VFluent3/assets/app.CSutcJ2E.js"></script>
+    <link rel="preload" href="/VFluent3/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/framework.DvIFzl91.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/theme.CgqFBnN_.js">
+    <link rel="modulepreload" href="/VFluent3/assets/guide_components_combobox_emits.md.CGB6WLt8.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-19c990f1><div class="wrapper" data-v-19c990f1><div class="container" data-v-19c990f1><div class="title" data-v-19c990f1><div class="VPNavBarTitle has-sidebar" data-v-19c990f1 data-v-ab179fa1><a class="title" href="/VFluent3/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>VFluent3</span><!--[--><!--]--></a></div></div><div class="content" data-v-19c990f1><div class="content-body" data-v-19c990f1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-19c990f1><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-19c990f1 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Guide</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-19c990f1 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-19c990f1 data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-19c990f1 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-19c990f1><div class="divider-line" data-v-19c990f1></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-d2ecc192><button data-v-d2ecc192>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-575e6a36><div class="curtain" data-v-575e6a36></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-575e6a36><span class="visually-hidden" id="sidebar-aria-label" data-v-575e6a36> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Basic input</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/button/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/check-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CheckBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/combobox/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Combobox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/details-list/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DetailsList</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drop-down/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DropDown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio-group/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RadioGroup</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/rating-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RatingControl</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/slider/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/toggle-switch/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ToggleSwitch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tag/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Tag</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Collections</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/flip-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>FlipView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/list-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ListView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tree-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TreeView</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Date & Time</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarDatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/time-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TimePicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Dialogs & flyouts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/callout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Callout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Layout</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/collapse/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Collapse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/expander/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Expander</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drawer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Panel</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Media</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/image/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Img</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ImgBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/persona/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Persona</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Menu & toolbars</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/command-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CommandBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/menu-flyout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MenuFlyout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/swipe-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SwipeControl</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Navigation</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/breadcrumb/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationPanel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pivot/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pivot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pagination/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pagination</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Scrolling</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/infinite-scroll-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfiniteScrollView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/scroll-story/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ScrollStory</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Status & info</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/badge/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-ring/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressRing</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Styles</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/animated-icon/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>AnimatedIcon</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/icon-element/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>IconElement</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/reveal-container/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RevealContainer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/shimmer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Shimmer</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Text</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/search-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SearchBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-field/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextField</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/verify-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>VerifyBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Windowing</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/web-window/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>WebWindow</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Global</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Advance</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-935f8a84><div class="content" data-v-935f8a84><div class="outline-marker" data-v-935f8a84></div><div class="outline-title" role="heading" aria-level="2" data-v-935f8a84>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-935f8a84><span class="visually-hidden" id="doc-outline-aria-label" data-v-935f8a84> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-935f8a84 data-v-b933a997><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _VFluent3_guide_components_combobox_emits" data-v-39a288b8><div><h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-label="Permalink to &quot;Emits&quot;">​</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead></table></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-09de1c0f><!--[--><!--]--><!----><nav class="prev-next" data-v-09de1c0f><div class="pager" data-v-09de1c0f><!----></div><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link next" href="/VFluent3/guide/components/button/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Next page</span><span class="title" data-v-09de1c0f>Button</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>MIT Licensed</p><p class="copyright" data-v-e315a0ad>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_calendar-date-picker_properties.md\":\"DXRjmMG8\",\"guide_components_image_properties.md\":\"DGanRzCb\",\"guide_components_img-box_index.md\":\"DYtggkf_\",\"guide_components_img_emits.md\":\"BlE7jvZQ\",\"guide_components_img_index.md\":\"Bm9FiuU4\",\"guide_components_icon-element_properties.md\":\"8Oakruwc\",\"guide_components_img_properties.md\":\"B42YSocI\",\"guide_components_drawer_index.md\":\"D_vpnCpE\",\"guide_components_verify-box_emits.md\":\"DT17Iazx\",\"guide_components_calendar-date-picker_index.md\":\"BdHjrurh\",\"guide_components_rating-control_index.md\":\"Q9l5Lfrr\",\"guide_components_rating-control_properties.md\":\"DKprnl0i\",\"guide_components_calendar-view_index.md\":\"zdoRYVx1\",\"guide_components_animated-icon_index.md\":\"yZDMzCFe\",\"guide_components_calendar-date-picker_emits.md\":\"D5OkfR8j\",\"guide_components_badge_index.md\":\"Bb4crrJn\",\"guide_components_image_index.md\":\"B7X6cWAZ\",\"guide_components_slider_index.md\":\"C7zZ2d-W\",\"guide_components_radio-group_index.md\":\"CVfh3h5H\",\"guide_components_swipe-control_index.md\":\"DwrDVPc1\",\"guide_components_color-picker_emits.md\":\"BHDXVtBQ\",\"guide_components_radio_index.md\":\"90as5QGp\",\"guide_components_pagination_properties.md\":\"JUAPvcTL\",\"guide_components_persona_properties.md\":\"DUTPhPMp\",\"guide_components_combo-box_emits.md\":\"Dh5R-qEv\",\"guide_components_pivot_emits.md\":\"BTJPgNpy\",\"guide_components_pagination_index.md\":\"CnW2zAht\",\"guide_components_flip-view_properties.md\":\"BqZ4hhgU\",\"guide_components_icon-element_emits.md\":\"D5TXFdTZ\",\"guide_components_flip-view_index.md\":\"DefnDOv6\",\"guide_components_navigation-panel_index.md\":\"6mO__sSK\",\"guide_components_rating-control_emits.md\":\"blvomSeC\",\"guide_components_icon-element_index.md\":\"DQ8K7JNn\",\"guide_components_navigation-view_index.md\":\"4AQRiz1k\",\"guide_components_toggle-switch_emits.md\":\"CLGzrNut\",\"guide_components_toggle-switch_index.md\":\"61en_q9-\",\"guide_components_scroll-story_index.md\":\"Vpgb1HSV\",\"guide_components_reveal-container_index.md\":\"Cut2r4tV\",\"guide_components_search-box_emits.md\":\"-d9sWNNt\",\"guide_components_search-box_properties.md\":\"DEKFfPFw\",\"guide_components_shimmer_emits.md\":\"CTMInlI3\",\"guide_components_tag_index.md\":\"BhhxkcHn\",\"guide_components_search-box_index.md\":\"DgkrY0oY\",\"guide_components_shimmer_index.md\":\"iZlHuTxw\",\"guide_components_shimmer_properties.md\":\"CdkU1o6H\",\"guide_components_tree-view_index.md\":\"CUrwan4q\",\"guide_components_text-field_index.md\":\"CXSimJtj\",\"guide_components_text-box_index.md\":\"C5moAPfB\",\"guide_components_progress-ring_properties.md\":\"Dc08Uiff\",\"guide_components_toggle-switch_properties.md\":\"tFppK_IS\",\"guide_components_radio-group_emits.md\":\"cEDzKVnN\",\"guide_components_collapse_index.md\":\"N9Iu5-2v\",\"guide_components_image_emits.md\":\"lmlz2xJd\",\"guide_components_callout_index.md\":\"D9RU33w6\",\"guide_components_pivot_index.md\":\"B_vwQL-5\",\"guide_components_command-bar_index.md\":\"Cp4_rrGB\",\"guide_components_pagination_emits.md\":\"Dng86A22\",\"guide_components_button_index.md\":\"7sqT2MQP\",\"guide_components_info-box_properties.md\":\"BI7Nvk-E\",\"guide_components_drop-down_emits.md\":\"BE95TdKW\",\"guide_components_expander_index.md\":\"BKgcUJzQ\",\"guide_components_message-bar_index.md\":\"AEtAWlF8\",\"guide_components_menu-flyout_index.md\":\"Csa7irPj\",\"guide_components_panel_index.md\":\"CsTu0bXo\",\"guide_components_panel_properties.md\":\"BaxoCYKq\",\"guide_components_progress-bar_emits.md\":\"BcwXUpsF\",\"guide_components_progress-bar_properties.md\":\"TxiS9ZMA\",\"guide_components_progress-ring_emits.md\":\"D2Y6hIZ9\",\"guide_components_color-picker_index.md\":\"DCc4ixcU\",\"guide_components_progress-ring_index.md\":\"CPb-ZEPE\",\"guide_components_color-picker_properties.md\":\"wcXK29Vl\",\"guide_components_time-picker_index.md\":\"CQJdRRaG\",\"guide_components_drop-down_properties.md\":\"Bwlkpr1q\",\"guide_components_infinite-scroll-view_index.md\":\"yAuD807x\",\"guide_components_check-box_index.md\":\"FYgdu4oq\",\"guide_components_progress-bar_index.md\":\"D8vHQw5V\",\"guide_components_combo-box_index.md\":\"DTyu3eNd\",\"guide_components_info-box_emits.md\":\"DlEwpkkq\",\"guide_components_drop-down_index.md\":\"BZzJZQWq\",\"guide_components_list-view_index.md\":\"BoYvMzb0\",\"guide_components_verify-box_properties.md\":\"CW6W8fFf\",\"guide_components_verify-box_index.md\":\"DwSB40wR\",\"guide_index.md\":\"Bndlt3sL\",\"guide_components_web-window_index.md\":\"Bxc8vEeI\",\"index.md\":\"MTRqI42u\",\"guide_components_combo-box_properties.md\":\"AWfHzV6x\",\"guide_components_combobox_emits.md\":\"CGB6WLt8\",\"guide_components_combobox_properties.md\":\"Bja0hMou\",\"guide_components_details-list_index.md\":\"CcgOCIyt\",\"guide_components_info-box_index.md\":\"vXh-_DsL\",\"guide_components_combobox_index.md\":\"CsPkY6YB\",\"guide_components_date-picker_index.md\":\"12vmUIup\",\"guide_components_flip-view_emits.md\":\"DCheHjDj\",\"guide_components_panel_emits.md\":\"DG0REDq8\",\"guide_components_breadcrumb_index.md\":\"DyDm7PeP\",\"guide_components_radio-group_properties.md\":\"BnPxoKsQ\",\"guide_components_persona_emits.md\":\"CnsDPKRU\",\"guide_components_pivot_properties.md\":\"BmoLpPi1\",\"guide_components_persona_index.md\":\"DT00jby4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vfluent3\",\"description\":\"A Vue3 component library for Fluent UI\",\"base\":\"/VFluent3/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"VFluent3\",\"footer\":{\"message\":\"MIT Licensed\",\"copyright\":\"Copyright © Creator SN - 2022\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/\"}],\"sidebar\":[{\"text\":\"Basic input\",\"collapsed\":true,\"items\":[{\"text\":\"Button\",\"link\":\"/guide/components/button/\"},{\"text\":\"CheckBox\",\"link\":\"/guide/components/check-box/\"},{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"},{\"text\":\"Combobox\",\"link\":\"/guide/components/combobox/\"},{\"text\":\"DetailsList\",\"link\":\"/guide/components/details-list/\"},{\"text\":\"DropDown\",\"link\":\"/guide/components/drop-down/\"},{\"text\":\"Radio\",\"link\":\"/guide/components/radio/\"},{\"text\":\"RadioGroup\",\"link\":\"/guide/components/radio-group/\"},{\"text\":\"RatingControl\",\"link\":\"/guide/components/rating-control/\"},{\"text\":\"Slider\",\"link\":\"/guide/components/slider/\"},{\"text\":\"ToggleSwitch\",\"link\":\"/guide/components/toggle-switch/\"},{\"text\":\"Tag\",\"link\":\"/guide/components/tag/\"}]},{\"text\":\"Collections\",\"collapsed\":true,\"items\":[{\"text\":\"FlipView\",\"link\":\"/guide/components/flip-view/\"},{\"text\":\"ListView\",\"link\":\"/guide/components/list-view/\"},{\"text\":\"TreeView\",\"link\":\"/guide/components/tree-view/\"}]},{\"text\":\"Date & Time\",\"collapsed\":true,\"items\":[{\"text\":\"CalendarDatePicker\",\"link\":\"/guide/components/calendar-date-picker/\"},{\"text\":\"CalendarView\",\"link\":\"/guide/components/calendar-view/\"},{\"text\":\"DatePicker\",\"link\":\"/guide/components/date-picker/\"},{\"text\":\"TimePicker\",\"link\":\"/guide/components/time-picker/\"}]},{\"text\":\"Dialogs & flyouts\",\"collapsed\":true,\"items\":[{\"text\":\"Callout\",\"link\":\"/guide/components/callout/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Layout\",\"collapsed\":true,\"items\":[{\"text\":\"Collapse\",\"link\":\"/guide/components/collapse/\"},{\"text\":\"Expander\",\"link\":\"/guide/components/expander/\"},{\"text\":\"Drawer\",\"link\":\"/guide/components/drawer/\"},{\"text\":\"Panel\",\"link\":\"/guide/components/panel/\"}]},{\"text\":\"Media\",\"collapsed\":true,\"items\":[{\"text\":\"Image\",\"link\":\"/guide/components/image/\"},{\"text\":\"Img\",\"link\":\"/guide/components/img/\"},{\"text\":\"ImgBox\",\"link\":\"/guide/components/img-box/\"},{\"text\":\"Persona\",\"link\":\"/guide/components/persona/\"}]},{\"text\":\"Menu & toolbars\",\"collapsed\":true,\"items\":[{\"text\":\"CommandBar\",\"link\":\"/guide/components/command-bar/\"},{\"text\":\"MenuFlyout\",\"link\":\"/guide/components/menu-flyout/\"},{\"text\":\"SwipeControl\",\"link\":\"/guide/components/swipe-control/\"}]},{\"text\":\"Navigation\",\"collapsed\":true,\"items\":[{\"text\":\"Breadcrumb\",\"link\":\"/guide/components/breadcrumb/\"},{\"text\":\"NavigationPanel\",\"link\":\"/guide/components/navigation-panel/\"},{\"text\":\"NavigationView\",\"link\":\"/guide/components/navigation-view/\"},{\"text\":\"Pivot\",\"link\":\"/guide/components/pivot/\"},{\"text\":\"Pagination\",\"link\":\"/guide/components/pagination/\"}]},{\"text\":\"Scrolling\",\"collapsed\":true,\"items\":[{\"text\":\"InfiniteScrollView\",\"link\":\"/guide/components/infinite-scroll-view/\"},{\"text\":\"ScrollStory\",\"link\":\"/guide/components/scroll-story/\"}]},{\"text\":\"Status & info\",\"collapsed\":true,\"items\":[{\"text\":\"Badge\",\"link\":\"/guide/components/badge/\"},{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"ProgressBar\",\"link\":\"/guide/components/progress-bar/\"},{\"text\":\"ProgressRing\",\"link\":\"/guide/components/progress-ring/\"}]},{\"text\":\"Styles\",\"collapsed\":true,\"items\":[{\"text\":\"AnimatedIcon\",\"link\":\"/guide/components/animated-icon/\"},{\"text\":\"IconElement\",\"link\":\"/guide/components/icon-element/\"},{\"text\":\"RevealContainer\",\"link\":\"/guide/components/reveal-container/\"},{\"text\":\"Shimmer\",\"link\":\"/guide/components/shimmer/\"}]},{\"text\":\"Text\",\"collapsed\":true,\"items\":[{\"text\":\"SearchBox\",\"link\":\"/guide/components/search-box/\"},{\"text\":\"TextBox\",\"link\":\"/guide/components/text-box/\"},{\"text\":\"TextField\",\"link\":\"/guide/components/text-field/\"},{\"text\":\"VerifyBox\",\"link\":\"/guide/components/verify-box/\"}]},{\"text\":\"Windowing\",\"collapsed\":true,\"items\":[{\"text\":\"WebWindow\",\"link\":\"/guide/components/web-window/\"}]},{\"text\":\"Global\",\"collapsed\":true,\"items\":[{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Advance\",\"collapsed\":true,\"items\":[{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git a/guide/components/combobox/index.html b/guide/components/combobox/index.html
new file mode 100644
index 0000000..85a841b
--- /dev/null
+++ b/guide/components/combobox/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>Combobox | vfluent3</title>
+    <meta name="description" content="A Vue3 component library for Fluent UI">
+    <meta name="generator" content="VitePress v1.0.0-rc.45">
+    <link rel="preload stylesheet" href="/VFluent3/assets/style.BabQegKX.css" as="style">
+    
+    <script type="module" src="/VFluent3/assets/app.CSutcJ2E.js"></script>
+    <link rel="preload" href="/VFluent3/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/framework.DvIFzl91.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/theme.CgqFBnN_.js">
+    <link rel="modulepreload" href="/VFluent3/assets/guide_components_combobox_index.md.CsPkY6YB.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-19c990f1><div class="wrapper" data-v-19c990f1><div class="container" data-v-19c990f1><div class="title" data-v-19c990f1><div class="VPNavBarTitle has-sidebar" data-v-19c990f1 data-v-ab179fa1><a class="title" href="/VFluent3/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>VFluent3</span><!--[--><!--]--></a></div></div><div class="content" data-v-19c990f1><div class="content-body" data-v-19c990f1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-19c990f1><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-19c990f1 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Guide</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-19c990f1 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-19c990f1 data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-19c990f1 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-19c990f1><div class="divider-line" data-v-19c990f1></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-d2ecc192><button data-v-d2ecc192>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-575e6a36><div class="curtain" data-v-575e6a36></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-575e6a36><span class="visually-hidden" id="sidebar-aria-label" data-v-575e6a36> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible has-active" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Basic input</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/button/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/check-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CheckBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/combobox/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Combobox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/details-list/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DetailsList</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drop-down/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DropDown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio-group/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RadioGroup</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/rating-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RatingControl</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/slider/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/toggle-switch/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ToggleSwitch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tag/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Tag</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Collections</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/flip-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>FlipView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/list-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ListView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tree-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TreeView</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Date & Time</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarDatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/time-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TimePicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Dialogs & flyouts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/callout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Callout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Layout</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/collapse/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Collapse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/expander/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Expander</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drawer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Panel</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Media</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/image/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Img</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ImgBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/persona/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Persona</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Menu & toolbars</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/command-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CommandBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/menu-flyout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MenuFlyout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/swipe-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SwipeControl</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Navigation</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/breadcrumb/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationPanel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pivot/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pivot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pagination/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pagination</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Scrolling</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/infinite-scroll-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfiniteScrollView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/scroll-story/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ScrollStory</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Status & info</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/badge/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-ring/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressRing</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Styles</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/animated-icon/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>AnimatedIcon</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/icon-element/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>IconElement</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/reveal-container/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RevealContainer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/shimmer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Shimmer</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Text</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/search-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SearchBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-field/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextField</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/verify-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>VerifyBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Windowing</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/web-window/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>WebWindow</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Global</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Advance</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-935f8a84><div class="content" data-v-935f8a84><div class="outline-marker" data-v-935f8a84></div><div class="outline-title" role="heading" aria-level="2" data-v-935f8a84>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-935f8a84><span class="visually-hidden" id="doc-outline-aria-label" data-v-935f8a84> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-935f8a84 data-v-b933a997><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _VFluent3_guide_components_combobox_" data-v-39a288b8><div><h3 id="combobox-demo" tabindex="-1">Combobox-DEMO <a class="header-anchor" href="#combobox-demo" aria-label="Permalink to &quot;Combobox-DEMO&quot;">​</a></h3><hr><!----><h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">value/v-model</td><td style="text-align:center;">Object</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">Combobox当前项绑定</td></tr><tr><td style="text-align:center;">options</td><td style="text-align:center;">Array</td><td style="text-align:center;">Yes</td><td style="text-align:center;">N/A</td><td style="text-align:center;">Combobox数据</td></tr><tr><td style="text-align:center;">borderWidth</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">1</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">placeholder</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">Combobox</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">borderRadius</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">3</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">background</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">choosenBackground</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">choosenSliderBackground</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">inputForeground</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">inputBackground</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">titleForeground</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">ChevronDown</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">itemHeight</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">40</td><td style="text-align:center;">Combobox Item 高度</td></tr><tr><td style="text-align:center;">dropDownIcon</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">dropDownIconForeground</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">revealBorderColor</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">revealBackgroundColor</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">system</td><td style="text-align:center;">主题样式, 包含<code>light</code>, <code>dark</code>, <code>system</code>, <code>custom</code>几种样式</td></tr></tbody></table><h3 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to &quot;Events&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">事件名(Name)</th><th style="text-align:center;">参数类型(args)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">choose-item</td><td style="text-align:center;">value/object</td><td style="text-align:center;">Combobox choose item</td></tr></tbody></table><h3 id="slot" tabindex="-1">Slot <a class="header-anchor" href="#slot" aria-label="Permalink to &quot;Slot&quot;">​</a></h3><hr><ol><li>Default</li></ol><p>用户可自定义 Combobx Item 内容</p><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">item</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">item</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    {{valueTrigger(item.type) !== &#39;divider&#39; ? valueTrigger(item.text) : &#39;&#39;}}</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>用户自定义样式时, 包含以下可选属性</p><ul><li>item: 当前组数据</li></ul><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">i</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;{{x.item.text}}&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">i</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="data" tabindex="-1">Data <a class="header-anchor" href="#data" aria-label="Permalink to &quot;Data&quot;">​</a></h3><hr><ol><li>options</li></ol><div class="language-javascript vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">options </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [{key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, disabled: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}]</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">//e.g.//</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">options</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: [</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;fruitsHeader&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Fruits&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;header&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;apple&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Apple&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;banana&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Banana&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;orange&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Orange&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, disabled: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;grape&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Grape&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;divider_1&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;-&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;divider&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;vegetablesHeader&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Vegetables&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;header&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;broccoli&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Broccoli&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;carrot&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Carrot&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;lettuce&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Lettuce&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><p><strong>特别地</strong> 0.1.62版本后支持采用函数式字段, 其中支持的字段包括<code>text</code>, <code>disabled</code>, <code>type</code></p></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-09de1c0f><!--[--><!--]--><!----><nav class="prev-next" data-v-09de1c0f><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link prev" href="/VFluent3/guide/components/color-picker/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Previous page</span><span class="title" data-v-09de1c0f>ColorPicker</span><!--]--></a></div><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link next" href="/VFluent3/guide/components/details-list/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Next page</span><span class="title" data-v-09de1c0f>DetailsList</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>MIT Licensed</p><p class="copyright" data-v-e315a0ad>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_calendar-date-picker_properties.md\":\"DXRjmMG8\",\"guide_components_image_properties.md\":\"DGanRzCb\",\"guide_components_img-box_index.md\":\"DYtggkf_\",\"guide_components_img_emits.md\":\"BlE7jvZQ\",\"guide_components_img_index.md\":\"Bm9FiuU4\",\"guide_components_icon-element_properties.md\":\"8Oakruwc\",\"guide_components_img_properties.md\":\"B42YSocI\",\"guide_components_drawer_index.md\":\"D_vpnCpE\",\"guide_components_verify-box_emits.md\":\"DT17Iazx\",\"guide_components_calendar-date-picker_index.md\":\"BdHjrurh\",\"guide_components_rating-control_index.md\":\"Q9l5Lfrr\",\"guide_components_rating-control_properties.md\":\"DKprnl0i\",\"guide_components_calendar-view_index.md\":\"zdoRYVx1\",\"guide_components_animated-icon_index.md\":\"yZDMzCFe\",\"guide_components_calendar-date-picker_emits.md\":\"D5OkfR8j\",\"guide_components_badge_index.md\":\"Bb4crrJn\",\"guide_components_image_index.md\":\"B7X6cWAZ\",\"guide_components_slider_index.md\":\"C7zZ2d-W\",\"guide_components_radio-group_index.md\":\"CVfh3h5H\",\"guide_components_swipe-control_index.md\":\"DwrDVPc1\",\"guide_components_color-picker_emits.md\":\"BHDXVtBQ\",\"guide_components_radio_index.md\":\"90as5QGp\",\"guide_components_pagination_properties.md\":\"JUAPvcTL\",\"guide_components_persona_properties.md\":\"DUTPhPMp\",\"guide_components_combo-box_emits.md\":\"Dh5R-qEv\",\"guide_components_pivot_emits.md\":\"BTJPgNpy\",\"guide_components_pagination_index.md\":\"CnW2zAht\",\"guide_components_flip-view_properties.md\":\"BqZ4hhgU\",\"guide_components_icon-element_emits.md\":\"D5TXFdTZ\",\"guide_components_flip-view_index.md\":\"DefnDOv6\",\"guide_components_navigation-panel_index.md\":\"6mO__sSK\",\"guide_components_rating-control_emits.md\":\"blvomSeC\",\"guide_components_icon-element_index.md\":\"DQ8K7JNn\",\"guide_components_navigation-view_index.md\":\"4AQRiz1k\",\"guide_components_toggle-switch_emits.md\":\"CLGzrNut\",\"guide_components_toggle-switch_index.md\":\"61en_q9-\",\"guide_components_scroll-story_index.md\":\"Vpgb1HSV\",\"guide_components_reveal-container_index.md\":\"Cut2r4tV\",\"guide_components_search-box_emits.md\":\"-d9sWNNt\",\"guide_components_search-box_properties.md\":\"DEKFfPFw\",\"guide_components_shimmer_emits.md\":\"CTMInlI3\",\"guide_components_tag_index.md\":\"BhhxkcHn\",\"guide_components_search-box_index.md\":\"DgkrY0oY\",\"guide_components_shimmer_index.md\":\"iZlHuTxw\",\"guide_components_shimmer_properties.md\":\"CdkU1o6H\",\"guide_components_tree-view_index.md\":\"CUrwan4q\",\"guide_components_text-field_index.md\":\"CXSimJtj\",\"guide_components_text-box_index.md\":\"C5moAPfB\",\"guide_components_progress-ring_properties.md\":\"Dc08Uiff\",\"guide_components_toggle-switch_properties.md\":\"tFppK_IS\",\"guide_components_radio-group_emits.md\":\"cEDzKVnN\",\"guide_components_collapse_index.md\":\"N9Iu5-2v\",\"guide_components_image_emits.md\":\"lmlz2xJd\",\"guide_components_callout_index.md\":\"D9RU33w6\",\"guide_components_pivot_index.md\":\"B_vwQL-5\",\"guide_components_command-bar_index.md\":\"Cp4_rrGB\",\"guide_components_pagination_emits.md\":\"Dng86A22\",\"guide_components_button_index.md\":\"7sqT2MQP\",\"guide_components_info-box_properties.md\":\"BI7Nvk-E\",\"guide_components_drop-down_emits.md\":\"BE95TdKW\",\"guide_components_expander_index.md\":\"BKgcUJzQ\",\"guide_components_message-bar_index.md\":\"AEtAWlF8\",\"guide_components_menu-flyout_index.md\":\"Csa7irPj\",\"guide_components_panel_index.md\":\"CsTu0bXo\",\"guide_components_panel_properties.md\":\"BaxoCYKq\",\"guide_components_progress-bar_emits.md\":\"BcwXUpsF\",\"guide_components_progress-bar_properties.md\":\"TxiS9ZMA\",\"guide_components_progress-ring_emits.md\":\"D2Y6hIZ9\",\"guide_components_color-picker_index.md\":\"DCc4ixcU\",\"guide_components_progress-ring_index.md\":\"CPb-ZEPE\",\"guide_components_color-picker_properties.md\":\"wcXK29Vl\",\"guide_components_time-picker_index.md\":\"CQJdRRaG\",\"guide_components_drop-down_properties.md\":\"Bwlkpr1q\",\"guide_components_infinite-scroll-view_index.md\":\"yAuD807x\",\"guide_components_check-box_index.md\":\"FYgdu4oq\",\"guide_components_progress-bar_index.md\":\"D8vHQw5V\",\"guide_components_combo-box_index.md\":\"DTyu3eNd\",\"guide_components_info-box_emits.md\":\"DlEwpkkq\",\"guide_components_drop-down_index.md\":\"BZzJZQWq\",\"guide_components_list-view_index.md\":\"BoYvMzb0\",\"guide_components_verify-box_properties.md\":\"CW6W8fFf\",\"guide_components_verify-box_index.md\":\"DwSB40wR\",\"guide_index.md\":\"Bndlt3sL\",\"guide_components_web-window_index.md\":\"Bxc8vEeI\",\"index.md\":\"MTRqI42u\",\"guide_components_combo-box_properties.md\":\"AWfHzV6x\",\"guide_components_combobox_emits.md\":\"CGB6WLt8\",\"guide_components_combobox_properties.md\":\"Bja0hMou\",\"guide_components_details-list_index.md\":\"CcgOCIyt\",\"guide_components_info-box_index.md\":\"vXh-_DsL\",\"guide_components_combobox_index.md\":\"CsPkY6YB\",\"guide_components_date-picker_index.md\":\"12vmUIup\",\"guide_components_flip-view_emits.md\":\"DCheHjDj\",\"guide_components_panel_emits.md\":\"DG0REDq8\",\"guide_components_breadcrumb_index.md\":\"DyDm7PeP\",\"guide_components_radio-group_properties.md\":\"BnPxoKsQ\",\"guide_components_persona_emits.md\":\"CnsDPKRU\",\"guide_components_pivot_properties.md\":\"BmoLpPi1\",\"guide_components_persona_index.md\":\"DT00jby4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vfluent3\",\"description\":\"A Vue3 component library for Fluent UI\",\"base\":\"/VFluent3/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"VFluent3\",\"footer\":{\"message\":\"MIT Licensed\",\"copyright\":\"Copyright © Creator SN - 2022\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/\"}],\"sidebar\":[{\"text\":\"Basic input\",\"collapsed\":true,\"items\":[{\"text\":\"Button\",\"link\":\"/guide/components/button/\"},{\"text\":\"CheckBox\",\"link\":\"/guide/components/check-box/\"},{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"},{\"text\":\"Combobox\",\"link\":\"/guide/components/combobox/\"},{\"text\":\"DetailsList\",\"link\":\"/guide/components/details-list/\"},{\"text\":\"DropDown\",\"link\":\"/guide/components/drop-down/\"},{\"text\":\"Radio\",\"link\":\"/guide/components/radio/\"},{\"text\":\"RadioGroup\",\"link\":\"/guide/components/radio-group/\"},{\"text\":\"RatingControl\",\"link\":\"/guide/components/rating-control/\"},{\"text\":\"Slider\",\"link\":\"/guide/components/slider/\"},{\"text\":\"ToggleSwitch\",\"link\":\"/guide/components/toggle-switch/\"},{\"text\":\"Tag\",\"link\":\"/guide/components/tag/\"}]},{\"text\":\"Collections\",\"collapsed\":true,\"items\":[{\"text\":\"FlipView\",\"link\":\"/guide/components/flip-view/\"},{\"text\":\"ListView\",\"link\":\"/guide/components/list-view/\"},{\"text\":\"TreeView\",\"link\":\"/guide/components/tree-view/\"}]},{\"text\":\"Date & Time\",\"collapsed\":true,\"items\":[{\"text\":\"CalendarDatePicker\",\"link\":\"/guide/components/calendar-date-picker/\"},{\"text\":\"CalendarView\",\"link\":\"/guide/components/calendar-view/\"},{\"text\":\"DatePicker\",\"link\":\"/guide/components/date-picker/\"},{\"text\":\"TimePicker\",\"link\":\"/guide/components/time-picker/\"}]},{\"text\":\"Dialogs & flyouts\",\"collapsed\":true,\"items\":[{\"text\":\"Callout\",\"link\":\"/guide/components/callout/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Layout\",\"collapsed\":true,\"items\":[{\"text\":\"Collapse\",\"link\":\"/guide/components/collapse/\"},{\"text\":\"Expander\",\"link\":\"/guide/components/expander/\"},{\"text\":\"Drawer\",\"link\":\"/guide/components/drawer/\"},{\"text\":\"Panel\",\"link\":\"/guide/components/panel/\"}]},{\"text\":\"Media\",\"collapsed\":true,\"items\":[{\"text\":\"Image\",\"link\":\"/guide/components/image/\"},{\"text\":\"Img\",\"link\":\"/guide/components/img/\"},{\"text\":\"ImgBox\",\"link\":\"/guide/components/img-box/\"},{\"text\":\"Persona\",\"link\":\"/guide/components/persona/\"}]},{\"text\":\"Menu & toolbars\",\"collapsed\":true,\"items\":[{\"text\":\"CommandBar\",\"link\":\"/guide/components/command-bar/\"},{\"text\":\"MenuFlyout\",\"link\":\"/guide/components/menu-flyout/\"},{\"text\":\"SwipeControl\",\"link\":\"/guide/components/swipe-control/\"}]},{\"text\":\"Navigation\",\"collapsed\":true,\"items\":[{\"text\":\"Breadcrumb\",\"link\":\"/guide/components/breadcrumb/\"},{\"text\":\"NavigationPanel\",\"link\":\"/guide/components/navigation-panel/\"},{\"text\":\"NavigationView\",\"link\":\"/guide/components/navigation-view/\"},{\"text\":\"Pivot\",\"link\":\"/guide/components/pivot/\"},{\"text\":\"Pagination\",\"link\":\"/guide/components/pagination/\"}]},{\"text\":\"Scrolling\",\"collapsed\":true,\"items\":[{\"text\":\"InfiniteScrollView\",\"link\":\"/guide/components/infinite-scroll-view/\"},{\"text\":\"ScrollStory\",\"link\":\"/guide/components/scroll-story/\"}]},{\"text\":\"Status & info\",\"collapsed\":true,\"items\":[{\"text\":\"Badge\",\"link\":\"/guide/components/badge/\"},{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"ProgressBar\",\"link\":\"/guide/components/progress-bar/\"},{\"text\":\"ProgressRing\",\"link\":\"/guide/components/progress-ring/\"}]},{\"text\":\"Styles\",\"collapsed\":true,\"items\":[{\"text\":\"AnimatedIcon\",\"link\":\"/guide/components/animated-icon/\"},{\"text\":\"IconElement\",\"link\":\"/guide/components/icon-element/\"},{\"text\":\"RevealContainer\",\"link\":\"/guide/components/reveal-container/\"},{\"text\":\"Shimmer\",\"link\":\"/guide/components/shimmer/\"}]},{\"text\":\"Text\",\"collapsed\":true,\"items\":[{\"text\":\"SearchBox\",\"link\":\"/guide/components/search-box/\"},{\"text\":\"TextBox\",\"link\":\"/guide/components/text-box/\"},{\"text\":\"TextField\",\"link\":\"/guide/components/text-field/\"},{\"text\":\"VerifyBox\",\"link\":\"/guide/components/verify-box/\"}]},{\"text\":\"Windowing\",\"collapsed\":true,\"items\":[{\"text\":\"WebWindow\",\"link\":\"/guide/components/web-window/\"}]},{\"text\":\"Global\",\"collapsed\":true,\"items\":[{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Advance\",\"collapsed\":true,\"items\":[{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git a/guide/components/combobox/properties.html b/guide/components/combobox/properties.html
new file mode 100644
index 0000000..2a70607
--- /dev/null
+++ b/guide/components/combobox/properties.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>vfluent3</title>
+    <meta name="description" content="A Vue3 component library for Fluent UI">
+    <meta name="generator" content="VitePress v1.0.0-rc.45">
+    <link rel="preload stylesheet" href="/VFluent3/assets/style.BabQegKX.css" as="style">
+    
+    <script type="module" src="/VFluent3/assets/app.CSutcJ2E.js"></script>
+    <link rel="preload" href="/VFluent3/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/framework.DvIFzl91.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/theme.CgqFBnN_.js">
+    <link rel="modulepreload" href="/VFluent3/assets/guide_components_combobox_properties.md.Bja0hMou.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-19c990f1><div class="wrapper" data-v-19c990f1><div class="container" data-v-19c990f1><div class="title" data-v-19c990f1><div class="VPNavBarTitle has-sidebar" data-v-19c990f1 data-v-ab179fa1><a class="title" href="/VFluent3/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>VFluent3</span><!--[--><!--]--></a></div></div><div class="content" data-v-19c990f1><div class="content-body" data-v-19c990f1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-19c990f1><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-19c990f1 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Guide</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-19c990f1 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-19c990f1 data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-19c990f1 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-19c990f1><div class="divider-line" data-v-19c990f1></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-d2ecc192><button data-v-d2ecc192>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-575e6a36><div class="curtain" data-v-575e6a36></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-575e6a36><span class="visually-hidden" id="sidebar-aria-label" data-v-575e6a36> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Basic input</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/button/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/check-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CheckBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/combobox/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Combobox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/details-list/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DetailsList</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drop-down/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DropDown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio-group/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RadioGroup</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/rating-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RatingControl</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/slider/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/toggle-switch/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ToggleSwitch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tag/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Tag</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Collections</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/flip-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>FlipView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/list-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ListView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tree-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TreeView</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Date & Time</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarDatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/time-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TimePicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Dialogs & flyouts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/callout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Callout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Layout</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/collapse/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Collapse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/expander/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Expander</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drawer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Panel</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Media</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/image/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Img</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ImgBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/persona/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Persona</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Menu & toolbars</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/command-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CommandBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/menu-flyout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MenuFlyout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/swipe-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SwipeControl</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Navigation</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/breadcrumb/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationPanel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pivot/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pivot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pagination/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pagination</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Scrolling</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/infinite-scroll-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfiniteScrollView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/scroll-story/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ScrollStory</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Status & info</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/badge/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-ring/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressRing</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Styles</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/animated-icon/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>AnimatedIcon</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/icon-element/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>IconElement</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/reveal-container/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RevealContainer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/shimmer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Shimmer</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Text</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/search-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SearchBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-field/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextField</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/verify-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>VerifyBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Windowing</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/web-window/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>WebWindow</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Global</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Advance</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-935f8a84><div class="content" data-v-935f8a84><div class="outline-marker" data-v-935f8a84></div><div class="outline-title" role="heading" aria-level="2" data-v-935f8a84>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-935f8a84><span class="visually-hidden" id="doc-outline-aria-label" data-v-935f8a84> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-935f8a84 data-v-b933a997><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _VFluent3_guide_components_combobox_properties" data-v-39a288b8><div><h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-label="Permalink to &quot;Properties&quot;">​</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead></table></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-09de1c0f><!--[--><!--]--><!----><nav class="prev-next" data-v-09de1c0f><div class="pager" data-v-09de1c0f><!----></div><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link next" href="/VFluent3/guide/components/button/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Next page</span><span class="title" data-v-09de1c0f>Button</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>MIT Licensed</p><p class="copyright" data-v-e315a0ad>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_calendar-date-picker_properties.md\":\"DXRjmMG8\",\"guide_components_image_properties.md\":\"DGanRzCb\",\"guide_components_img-box_index.md\":\"DYtggkf_\",\"guide_components_img_emits.md\":\"BlE7jvZQ\",\"guide_components_img_index.md\":\"Bm9FiuU4\",\"guide_components_icon-element_properties.md\":\"8Oakruwc\",\"guide_components_img_properties.md\":\"B42YSocI\",\"guide_components_drawer_index.md\":\"D_vpnCpE\",\"guide_components_verify-box_emits.md\":\"DT17Iazx\",\"guide_components_calendar-date-picker_index.md\":\"BdHjrurh\",\"guide_components_rating-control_index.md\":\"Q9l5Lfrr\",\"guide_components_rating-control_properties.md\":\"DKprnl0i\",\"guide_components_calendar-view_index.md\":\"zdoRYVx1\",\"guide_components_animated-icon_index.md\":\"yZDMzCFe\",\"guide_components_calendar-date-picker_emits.md\":\"D5OkfR8j\",\"guide_components_badge_index.md\":\"Bb4crrJn\",\"guide_components_image_index.md\":\"B7X6cWAZ\",\"guide_components_slider_index.md\":\"C7zZ2d-W\",\"guide_components_radio-group_index.md\":\"CVfh3h5H\",\"guide_components_swipe-control_index.md\":\"DwrDVPc1\",\"guide_components_color-picker_emits.md\":\"BHDXVtBQ\",\"guide_components_radio_index.md\":\"90as5QGp\",\"guide_components_pagination_properties.md\":\"JUAPvcTL\",\"guide_components_persona_properties.md\":\"DUTPhPMp\",\"guide_components_combo-box_emits.md\":\"Dh5R-qEv\",\"guide_components_pivot_emits.md\":\"BTJPgNpy\",\"guide_components_pagination_index.md\":\"CnW2zAht\",\"guide_components_flip-view_properties.md\":\"BqZ4hhgU\",\"guide_components_icon-element_emits.md\":\"D5TXFdTZ\",\"guide_components_flip-view_index.md\":\"DefnDOv6\",\"guide_components_navigation-panel_index.md\":\"6mO__sSK\",\"guide_components_rating-control_emits.md\":\"blvomSeC\",\"guide_components_icon-element_index.md\":\"DQ8K7JNn\",\"guide_components_navigation-view_index.md\":\"4AQRiz1k\",\"guide_components_toggle-switch_emits.md\":\"CLGzrNut\",\"guide_components_toggle-switch_index.md\":\"61en_q9-\",\"guide_components_scroll-story_index.md\":\"Vpgb1HSV\",\"guide_components_reveal-container_index.md\":\"Cut2r4tV\",\"guide_components_search-box_emits.md\":\"-d9sWNNt\",\"guide_components_search-box_properties.md\":\"DEKFfPFw\",\"guide_components_shimmer_emits.md\":\"CTMInlI3\",\"guide_components_tag_index.md\":\"BhhxkcHn\",\"guide_components_search-box_index.md\":\"DgkrY0oY\",\"guide_components_shimmer_index.md\":\"iZlHuTxw\",\"guide_components_shimmer_properties.md\":\"CdkU1o6H\",\"guide_components_tree-view_index.md\":\"CUrwan4q\",\"guide_components_text-field_index.md\":\"CXSimJtj\",\"guide_components_text-box_index.md\":\"C5moAPfB\",\"guide_components_progress-ring_properties.md\":\"Dc08Uiff\",\"guide_components_toggle-switch_properties.md\":\"tFppK_IS\",\"guide_components_radio-group_emits.md\":\"cEDzKVnN\",\"guide_components_collapse_index.md\":\"N9Iu5-2v\",\"guide_components_image_emits.md\":\"lmlz2xJd\",\"guide_components_callout_index.md\":\"D9RU33w6\",\"guide_components_pivot_index.md\":\"B_vwQL-5\",\"guide_components_command-bar_index.md\":\"Cp4_rrGB\",\"guide_components_pagination_emits.md\":\"Dng86A22\",\"guide_components_button_index.md\":\"7sqT2MQP\",\"guide_components_info-box_properties.md\":\"BI7Nvk-E\",\"guide_components_drop-down_emits.md\":\"BE95TdKW\",\"guide_components_expander_index.md\":\"BKgcUJzQ\",\"guide_components_message-bar_index.md\":\"AEtAWlF8\",\"guide_components_menu-flyout_index.md\":\"Csa7irPj\",\"guide_components_panel_index.md\":\"CsTu0bXo\",\"guide_components_panel_properties.md\":\"BaxoCYKq\",\"guide_components_progress-bar_emits.md\":\"BcwXUpsF\",\"guide_components_progress-bar_properties.md\":\"TxiS9ZMA\",\"guide_components_progress-ring_emits.md\":\"D2Y6hIZ9\",\"guide_components_color-picker_index.md\":\"DCc4ixcU\",\"guide_components_progress-ring_index.md\":\"CPb-ZEPE\",\"guide_components_color-picker_properties.md\":\"wcXK29Vl\",\"guide_components_time-picker_index.md\":\"CQJdRRaG\",\"guide_components_drop-down_properties.md\":\"Bwlkpr1q\",\"guide_components_infinite-scroll-view_index.md\":\"yAuD807x\",\"guide_components_check-box_index.md\":\"FYgdu4oq\",\"guide_components_progress-bar_index.md\":\"D8vHQw5V\",\"guide_components_combo-box_index.md\":\"DTyu3eNd\",\"guide_components_info-box_emits.md\":\"DlEwpkkq\",\"guide_components_drop-down_index.md\":\"BZzJZQWq\",\"guide_components_list-view_index.md\":\"BoYvMzb0\",\"guide_components_verify-box_properties.md\":\"CW6W8fFf\",\"guide_components_verify-box_index.md\":\"DwSB40wR\",\"guide_index.md\":\"Bndlt3sL\",\"guide_components_web-window_index.md\":\"Bxc8vEeI\",\"index.md\":\"MTRqI42u\",\"guide_components_combo-box_properties.md\":\"AWfHzV6x\",\"guide_components_combobox_emits.md\":\"CGB6WLt8\",\"guide_components_combobox_properties.md\":\"Bja0hMou\",\"guide_components_details-list_index.md\":\"CcgOCIyt\",\"guide_components_info-box_index.md\":\"vXh-_DsL\",\"guide_components_combobox_index.md\":\"CsPkY6YB\",\"guide_components_date-picker_index.md\":\"12vmUIup\",\"guide_components_flip-view_emits.md\":\"DCheHjDj\",\"guide_components_panel_emits.md\":\"DG0REDq8\",\"guide_components_breadcrumb_index.md\":\"DyDm7PeP\",\"guide_components_radio-group_properties.md\":\"BnPxoKsQ\",\"guide_components_persona_emits.md\":\"CnsDPKRU\",\"guide_components_pivot_properties.md\":\"BmoLpPi1\",\"guide_components_persona_index.md\":\"DT00jby4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vfluent3\",\"description\":\"A Vue3 component library for Fluent UI\",\"base\":\"/VFluent3/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"VFluent3\",\"footer\":{\"message\":\"MIT Licensed\",\"copyright\":\"Copyright © Creator SN - 2022\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/\"}],\"sidebar\":[{\"text\":\"Basic input\",\"collapsed\":true,\"items\":[{\"text\":\"Button\",\"link\":\"/guide/components/button/\"},{\"text\":\"CheckBox\",\"link\":\"/guide/components/check-box/\"},{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"},{\"text\":\"Combobox\",\"link\":\"/guide/components/combobox/\"},{\"text\":\"DetailsList\",\"link\":\"/guide/components/details-list/\"},{\"text\":\"DropDown\",\"link\":\"/guide/components/drop-down/\"},{\"text\":\"Radio\",\"link\":\"/guide/components/radio/\"},{\"text\":\"RadioGroup\",\"link\":\"/guide/components/radio-group/\"},{\"text\":\"RatingControl\",\"link\":\"/guide/components/rating-control/\"},{\"text\":\"Slider\",\"link\":\"/guide/components/slider/\"},{\"text\":\"ToggleSwitch\",\"link\":\"/guide/components/toggle-switch/\"},{\"text\":\"Tag\",\"link\":\"/guide/components/tag/\"}]},{\"text\":\"Collections\",\"collapsed\":true,\"items\":[{\"text\":\"FlipView\",\"link\":\"/guide/components/flip-view/\"},{\"text\":\"ListView\",\"link\":\"/guide/components/list-view/\"},{\"text\":\"TreeView\",\"link\":\"/guide/components/tree-view/\"}]},{\"text\":\"Date & Time\",\"collapsed\":true,\"items\":[{\"text\":\"CalendarDatePicker\",\"link\":\"/guide/components/calendar-date-picker/\"},{\"text\":\"CalendarView\",\"link\":\"/guide/components/calendar-view/\"},{\"text\":\"DatePicker\",\"link\":\"/guide/components/date-picker/\"},{\"text\":\"TimePicker\",\"link\":\"/guide/components/time-picker/\"}]},{\"text\":\"Dialogs & flyouts\",\"collapsed\":true,\"items\":[{\"text\":\"Callout\",\"link\":\"/guide/components/callout/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Layout\",\"collapsed\":true,\"items\":[{\"text\":\"Collapse\",\"link\":\"/guide/components/collapse/\"},{\"text\":\"Expander\",\"link\":\"/guide/components/expander/\"},{\"text\":\"Drawer\",\"link\":\"/guide/components/drawer/\"},{\"text\":\"Panel\",\"link\":\"/guide/components/panel/\"}]},{\"text\":\"Media\",\"collapsed\":true,\"items\":[{\"text\":\"Image\",\"link\":\"/guide/components/image/\"},{\"text\":\"Img\",\"link\":\"/guide/components/img/\"},{\"text\":\"ImgBox\",\"link\":\"/guide/components/img-box/\"},{\"text\":\"Persona\",\"link\":\"/guide/components/persona/\"}]},{\"text\":\"Menu & toolbars\",\"collapsed\":true,\"items\":[{\"text\":\"CommandBar\",\"link\":\"/guide/components/command-bar/\"},{\"text\":\"MenuFlyout\",\"link\":\"/guide/components/menu-flyout/\"},{\"text\":\"SwipeControl\",\"link\":\"/guide/components/swipe-control/\"}]},{\"text\":\"Navigation\",\"collapsed\":true,\"items\":[{\"text\":\"Breadcrumb\",\"link\":\"/guide/components/breadcrumb/\"},{\"text\":\"NavigationPanel\",\"link\":\"/guide/components/navigation-panel/\"},{\"text\":\"NavigationView\",\"link\":\"/guide/components/navigation-view/\"},{\"text\":\"Pivot\",\"link\":\"/guide/components/pivot/\"},{\"text\":\"Pagination\",\"link\":\"/guide/components/pagination/\"}]},{\"text\":\"Scrolling\",\"collapsed\":true,\"items\":[{\"text\":\"InfiniteScrollView\",\"link\":\"/guide/components/infinite-scroll-view/\"},{\"text\":\"ScrollStory\",\"link\":\"/guide/components/scroll-story/\"}]},{\"text\":\"Status & info\",\"collapsed\":true,\"items\":[{\"text\":\"Badge\",\"link\":\"/guide/components/badge/\"},{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"ProgressBar\",\"link\":\"/guide/components/progress-bar/\"},{\"text\":\"ProgressRing\",\"link\":\"/guide/components/progress-ring/\"}]},{\"text\":\"Styles\",\"collapsed\":true,\"items\":[{\"text\":\"AnimatedIcon\",\"link\":\"/guide/components/animated-icon/\"},{\"text\":\"IconElement\",\"link\":\"/guide/components/icon-element/\"},{\"text\":\"RevealContainer\",\"link\":\"/guide/components/reveal-container/\"},{\"text\":\"Shimmer\",\"link\":\"/guide/components/shimmer/\"}]},{\"text\":\"Text\",\"collapsed\":true,\"items\":[{\"text\":\"SearchBox\",\"link\":\"/guide/components/search-box/\"},{\"text\":\"TextBox\",\"link\":\"/guide/components/text-box/\"},{\"text\":\"TextField\",\"link\":\"/guide/components/text-field/\"},{\"text\":\"VerifyBox\",\"link\":\"/guide/components/verify-box/\"}]},{\"text\":\"Windowing\",\"collapsed\":true,\"items\":[{\"text\":\"WebWindow\",\"link\":\"/guide/components/web-window/\"}]},{\"text\":\"Global\",\"collapsed\":true,\"items\":[{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Advance\",\"collapsed\":true,\"items\":[{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git a/guide/components/command-bar/index.html b/guide/components/command-bar/index.html
new file mode 100644
index 0000000..a176d5c
--- /dev/null
+++ b/guide/components/command-bar/index.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>CommandBar | vfluent3</title>
+    <meta name="description" content="A Vue3 component library for Fluent UI">
+    <meta name="generator" content="VitePress v1.0.0-rc.45">
+    <link rel="preload stylesheet" href="/VFluent3/assets/style.BabQegKX.css" as="style">
+    
+    <script type="module" src="/VFluent3/assets/app.CSutcJ2E.js"></script>
+    <link rel="preload" href="/VFluent3/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/framework.DvIFzl91.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/theme.CgqFBnN_.js">
+    <link rel="modulepreload" href="/VFluent3/assets/guide_components_command-bar_index.md.Cp4_rrGB.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-19c990f1><div class="wrapper" data-v-19c990f1><div class="container" data-v-19c990f1><div class="title" data-v-19c990f1><div class="VPNavBarTitle has-sidebar" data-v-19c990f1 data-v-ab179fa1><a class="title" href="/VFluent3/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>VFluent3</span><!--[--><!--]--></a></div></div><div class="content" data-v-19c990f1><div class="content-body" data-v-19c990f1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-19c990f1><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-19c990f1 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Guide</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-19c990f1 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-19c990f1 data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-19c990f1 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-19c990f1><div class="divider-line" data-v-19c990f1></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-d2ecc192><button data-v-d2ecc192>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-575e6a36><div class="curtain" data-v-575e6a36></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-575e6a36><span class="visually-hidden" id="sidebar-aria-label" data-v-575e6a36> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Basic input</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/button/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/check-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CheckBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/combobox/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Combobox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/details-list/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DetailsList</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drop-down/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DropDown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio-group/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RadioGroup</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/rating-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RatingControl</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/slider/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/toggle-switch/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ToggleSwitch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tag/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Tag</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Collections</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/flip-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>FlipView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/list-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ListView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tree-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TreeView</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Date & Time</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarDatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/time-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TimePicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Dialogs & flyouts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/callout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Callout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Layout</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/collapse/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Collapse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/expander/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Expander</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drawer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Panel</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Media</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/image/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Img</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ImgBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/persona/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Persona</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible has-active" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Menu & toolbars</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/command-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CommandBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/menu-flyout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MenuFlyout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/swipe-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SwipeControl</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Navigation</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/breadcrumb/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationPanel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pivot/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pivot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pagination/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pagination</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Scrolling</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/infinite-scroll-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfiniteScrollView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/scroll-story/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ScrollStory</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Status & info</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/badge/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-ring/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressRing</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Styles</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/animated-icon/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>AnimatedIcon</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/icon-element/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>IconElement</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/reveal-container/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RevealContainer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/shimmer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Shimmer</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Text</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/search-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SearchBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-field/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextField</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/verify-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>VerifyBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Windowing</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/web-window/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>WebWindow</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Global</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Advance</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-935f8a84><div class="content" data-v-935f8a84><div class="outline-marker" data-v-935f8a84></div><div class="outline-title" role="heading" aria-level="2" data-v-935f8a84>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-935f8a84><span class="visually-hidden" id="doc-outline-aria-label" data-v-935f8a84> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-935f8a84 data-v-b933a997><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _VFluent3_guide_components_command-bar_" data-v-39a288b8><div><h3 id="commandbar-demo" tabindex="-1">CommandBar-DEMO <a class="header-anchor" href="#commandbar-demo" aria-label="Permalink to &quot;CommandBar-DEMO&quot;">​</a></h3><hr><div style="width:100%;"><!----></div><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;fv-CommandBar v-model=&quot;value&quot; :options=&quot;options&quot;&gt;&lt;/fv-CommandBar&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>Compact Mode</p><div style="width:100%;"><!----></div><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;fv-CommandBar v-model=&quot;value&quot; :options=&quot;options&quot; :compact=&quot;true&quot;&gt;&lt;/fv-CommandBar&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="commandbar-toward-up" tabindex="-1">CommandBar-Toward Up <a class="header-anchor" href="#commandbar-toward-up" aria-label="Permalink to &quot;CommandBar-Toward Up&quot;">​</a></h3><hr><div style="width:100%;"><!----></div><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;fv-CommandBar :options=&quot;options&quot; toward=&quot;up&quot;&gt;&lt;/fv-CommandBar&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="commandbar-right-space" tabindex="-1">CommandBar-Right Space <a class="header-anchor" href="#commandbar-right-space" aria-label="Permalink to &quot;CommandBar-Right Space&quot;">​</a></h3><hr><div style="width:100%;"><!----></div><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;fv-CommandBar v-model=&quot;value&quot; :options=&quot;options&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;template v-slot:right-space&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            &lt;span style=&quot;width: 40px; height: 40px; display: flex; justify-content: center; align-items: center;&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                &lt;i class=&quot;ms-Icon ms-Icon--Error icon&quot;&gt;&lt;/i&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            &lt;/span&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/fv-CommandBar&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><h3 id="commandbar-dark-theme" tabindex="-1">CommandBar-Dark Theme <a class="header-anchor" href="#commandbar-dark-theme" aria-label="Permalink to &quot;CommandBar-Dark Theme&quot;">​</a></h3><hr><div style="width:100%;"><!----></div><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;fv-CommandBar :options=&quot;options&quot; theme=&quot;dark&quot;&gt;&lt;/fv-CommandBar&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="commandbar-custom-background" tabindex="-1">CommandBar-Custom Background <a class="header-anchor" href="#commandbar-custom-background" aria-label="Permalink to &quot;CommandBar-Custom Background&quot;">​</a></h3><hr><div style="width:100%;"><!----></div><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;fv-CommandBar :options=&quot;options&quot; theme=&quot;dark&quot; background=&quot;rgba(0, 98, 158, 1)&quot;&gt;&lt;/fv-CommandBar&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">value</td><td style="text-align:center;">Object</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">绑定当前选中的对象</td></tr><tr><td style="text-align:center;">options</td><td style="text-align:center;">Array</td><td style="text-align:center;">Yes</td><td style="text-align:center;">N/A</td><td style="text-align:center;">CommandBar 数据源</td></tr><tr><td style="text-align:center;">toward</td><td style="text-align:center;">[&#39;down&#39;,&#39;up&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">down</td><td style="text-align:center;">下拉菜单的朝向</td></tr><tr><td style="text-align:center;">background</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">CommandBar 背景</td></tr><tr><td style="text-align:center;">compact</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">紧凑样式</td></tr><tr><td style="text-align:center;">revealBorderColor</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">revealBackgroundColor</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">system</td><td style="text-align:center;">主题样式, 包含<code>light</code>, <code>dark</code>, <code>system</code>, <code>custom</code>几种样式</td></tr></tbody></table><h3 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to &quot;Events&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">事件名(Name)</th><th style="text-align:center;">参数类型(args)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">item-click</td><td style="text-align:center;">object</td><td style="text-align:center;">选中项目时返回当前数据项</td></tr></tbody></table><h3 id="slot" tabindex="-1">Slot <a class="header-anchor" href="#slot" aria-label="Permalink to &quot;Slot&quot;">​</a></h3><hr><ol><li>Right Space</li></ol><p>用户可自定义 CommandBar 右侧内容</p><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">right-space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">i</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">i</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="data" tabindex="-1">Data <a class="header-anchor" href="#data" aria-label="Permalink to &quot;Data&quot;">​</a></h3><hr><ol><li>options</li></ol><p><code>options</code>中包含像<code>ListView</code>中的<code>items</code>一样的数据引用方式, 此外用户还可以指定:</p><ul><li>图标<code>icon</code></li><li>图标颜色<code>iconColor</code></li><li>触发函数<code>func</code></li><li>是否包含二级菜单<code>secondary</code>, <code>secondary</code>中的数据格式同<code>options</code>中一致</li></ul><div class="language-javascript vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">options </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  { name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, iconColor: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, func: {}, show: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, secondary: [], disabled: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">];</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">//e.g.//</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">options</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: [</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Add&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Add&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    iconColor: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rgba(0, 90, 158, 1)&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    func: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.customFunc,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    secondary: [</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Email Message&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        func: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.customFunc,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Mail&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        iconColor: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rgba(0, 98, 158, 1)&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        disabled: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      { type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;divider&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Calendar event&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        func: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.customFunc,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;WebAppBuilderModule&quot;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    ]</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  { name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Edit&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, func: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.customFunc, icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;SingleColumnEdit&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, disabled: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  { type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;divider&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  { name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Share&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, func: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.customFunc, icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Share&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;more&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    secondary: [</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      { name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Move to&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, func: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.customFunc, icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;MoveToFolder&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      { name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Copy to&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, func: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.customFunc, icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Copy&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      { name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Rename&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, func: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.customFunc, icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Rename&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    ]</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">];</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br></div></div><p><strong>特别地</strong> 0.0.61版本后支持采用函数式字段, 其中支持的字段包括<code>name</code>, <code>disabled</code>, <code>icon</code>, <code>iconColor</code>, <code>type</code></p></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-09de1c0f><!--[--><!--]--><!----><nav class="prev-next" data-v-09de1c0f><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link prev" href="/VFluent3/guide/components/persona/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Previous page</span><span class="title" data-v-09de1c0f>Persona</span><!--]--></a></div><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link next" href="/VFluent3/guide/components/menu-flyout/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Next page</span><span class="title" data-v-09de1c0f>MenuFlyout</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>MIT Licensed</p><p class="copyright" data-v-e315a0ad>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_calendar-date-picker_properties.md\":\"DXRjmMG8\",\"guide_components_image_properties.md\":\"DGanRzCb\",\"guide_components_img-box_index.md\":\"DYtggkf_\",\"guide_components_img_emits.md\":\"BlE7jvZQ\",\"guide_components_img_index.md\":\"Bm9FiuU4\",\"guide_components_icon-element_properties.md\":\"8Oakruwc\",\"guide_components_img_properties.md\":\"B42YSocI\",\"guide_components_drawer_index.md\":\"D_vpnCpE\",\"guide_components_verify-box_emits.md\":\"DT17Iazx\",\"guide_components_calendar-date-picker_index.md\":\"BdHjrurh\",\"guide_components_rating-control_index.md\":\"Q9l5Lfrr\",\"guide_components_rating-control_properties.md\":\"DKprnl0i\",\"guide_components_calendar-view_index.md\":\"zdoRYVx1\",\"guide_components_animated-icon_index.md\":\"yZDMzCFe\",\"guide_components_calendar-date-picker_emits.md\":\"D5OkfR8j\",\"guide_components_badge_index.md\":\"Bb4crrJn\",\"guide_components_image_index.md\":\"B7X6cWAZ\",\"guide_components_slider_index.md\":\"C7zZ2d-W\",\"guide_components_radio-group_index.md\":\"CVfh3h5H\",\"guide_components_swipe-control_index.md\":\"DwrDVPc1\",\"guide_components_color-picker_emits.md\":\"BHDXVtBQ\",\"guide_components_radio_index.md\":\"90as5QGp\",\"guide_components_pagination_properties.md\":\"JUAPvcTL\",\"guide_components_persona_properties.md\":\"DUTPhPMp\",\"guide_components_combo-box_emits.md\":\"Dh5R-qEv\",\"guide_components_pivot_emits.md\":\"BTJPgNpy\",\"guide_components_pagination_index.md\":\"CnW2zAht\",\"guide_components_flip-view_properties.md\":\"BqZ4hhgU\",\"guide_components_icon-element_emits.md\":\"D5TXFdTZ\",\"guide_components_flip-view_index.md\":\"DefnDOv6\",\"guide_components_navigation-panel_index.md\":\"6mO__sSK\",\"guide_components_rating-control_emits.md\":\"blvomSeC\",\"guide_components_icon-element_index.md\":\"DQ8K7JNn\",\"guide_components_navigation-view_index.md\":\"4AQRiz1k\",\"guide_components_toggle-switch_emits.md\":\"CLGzrNut\",\"guide_components_toggle-switch_index.md\":\"61en_q9-\",\"guide_components_scroll-story_index.md\":\"Vpgb1HSV\",\"guide_components_reveal-container_index.md\":\"Cut2r4tV\",\"guide_components_search-box_emits.md\":\"-d9sWNNt\",\"guide_components_search-box_properties.md\":\"DEKFfPFw\",\"guide_components_shimmer_emits.md\":\"CTMInlI3\",\"guide_components_tag_index.md\":\"BhhxkcHn\",\"guide_components_search-box_index.md\":\"DgkrY0oY\",\"guide_components_shimmer_index.md\":\"iZlHuTxw\",\"guide_components_shimmer_properties.md\":\"CdkU1o6H\",\"guide_components_tree-view_index.md\":\"CUrwan4q\",\"guide_components_text-field_index.md\":\"CXSimJtj\",\"guide_components_text-box_index.md\":\"C5moAPfB\",\"guide_components_progress-ring_properties.md\":\"Dc08Uiff\",\"guide_components_toggle-switch_properties.md\":\"tFppK_IS\",\"guide_components_radio-group_emits.md\":\"cEDzKVnN\",\"guide_components_collapse_index.md\":\"N9Iu5-2v\",\"guide_components_image_emits.md\":\"lmlz2xJd\",\"guide_components_callout_index.md\":\"D9RU33w6\",\"guide_components_pivot_index.md\":\"B_vwQL-5\",\"guide_components_command-bar_index.md\":\"Cp4_rrGB\",\"guide_components_pagination_emits.md\":\"Dng86A22\",\"guide_components_button_index.md\":\"7sqT2MQP\",\"guide_components_info-box_properties.md\":\"BI7Nvk-E\",\"guide_components_drop-down_emits.md\":\"BE95TdKW\",\"guide_components_expander_index.md\":\"BKgcUJzQ\",\"guide_components_message-bar_index.md\":\"AEtAWlF8\",\"guide_components_menu-flyout_index.md\":\"Csa7irPj\",\"guide_components_panel_index.md\":\"CsTu0bXo\",\"guide_components_panel_properties.md\":\"BaxoCYKq\",\"guide_components_progress-bar_emits.md\":\"BcwXUpsF\",\"guide_components_progress-bar_properties.md\":\"TxiS9ZMA\",\"guide_components_progress-ring_emits.md\":\"D2Y6hIZ9\",\"guide_components_color-picker_index.md\":\"DCc4ixcU\",\"guide_components_progress-ring_index.md\":\"CPb-ZEPE\",\"guide_components_color-picker_properties.md\":\"wcXK29Vl\",\"guide_components_time-picker_index.md\":\"CQJdRRaG\",\"guide_components_drop-down_properties.md\":\"Bwlkpr1q\",\"guide_components_infinite-scroll-view_index.md\":\"yAuD807x\",\"guide_components_check-box_index.md\":\"FYgdu4oq\",\"guide_components_progress-bar_index.md\":\"D8vHQw5V\",\"guide_components_combo-box_index.md\":\"DTyu3eNd\",\"guide_components_info-box_emits.md\":\"DlEwpkkq\",\"guide_components_drop-down_index.md\":\"BZzJZQWq\",\"guide_components_list-view_index.md\":\"BoYvMzb0\",\"guide_components_verify-box_properties.md\":\"CW6W8fFf\",\"guide_components_verify-box_index.md\":\"DwSB40wR\",\"guide_index.md\":\"Bndlt3sL\",\"guide_components_web-window_index.md\":\"Bxc8vEeI\",\"index.md\":\"MTRqI42u\",\"guide_components_combo-box_properties.md\":\"AWfHzV6x\",\"guide_components_combobox_emits.md\":\"CGB6WLt8\",\"guide_components_combobox_properties.md\":\"Bja0hMou\",\"guide_components_details-list_index.md\":\"CcgOCIyt\",\"guide_components_info-box_index.md\":\"vXh-_DsL\",\"guide_components_combobox_index.md\":\"CsPkY6YB\",\"guide_components_date-picker_index.md\":\"12vmUIup\",\"guide_components_flip-view_emits.md\":\"DCheHjDj\",\"guide_components_panel_emits.md\":\"DG0REDq8\",\"guide_components_breadcrumb_index.md\":\"DyDm7PeP\",\"guide_components_radio-group_properties.md\":\"BnPxoKsQ\",\"guide_components_persona_emits.md\":\"CnsDPKRU\",\"guide_components_pivot_properties.md\":\"BmoLpPi1\",\"guide_components_persona_index.md\":\"DT00jby4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vfluent3\",\"description\":\"A Vue3 component library for Fluent UI\",\"base\":\"/VFluent3/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"VFluent3\",\"footer\":{\"message\":\"MIT Licensed\",\"copyright\":\"Copyright © Creator SN - 2022\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/\"}],\"sidebar\":[{\"text\":\"Basic input\",\"collapsed\":true,\"items\":[{\"text\":\"Button\",\"link\":\"/guide/components/button/\"},{\"text\":\"CheckBox\",\"link\":\"/guide/components/check-box/\"},{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"},{\"text\":\"Combobox\",\"link\":\"/guide/components/combobox/\"},{\"text\":\"DetailsList\",\"link\":\"/guide/components/details-list/\"},{\"text\":\"DropDown\",\"link\":\"/guide/components/drop-down/\"},{\"text\":\"Radio\",\"link\":\"/guide/components/radio/\"},{\"text\":\"RadioGroup\",\"link\":\"/guide/components/radio-group/\"},{\"text\":\"RatingControl\",\"link\":\"/guide/components/rating-control/\"},{\"text\":\"Slider\",\"link\":\"/guide/components/slider/\"},{\"text\":\"ToggleSwitch\",\"link\":\"/guide/components/toggle-switch/\"},{\"text\":\"Tag\",\"link\":\"/guide/components/tag/\"}]},{\"text\":\"Collections\",\"collapsed\":true,\"items\":[{\"text\":\"FlipView\",\"link\":\"/guide/components/flip-view/\"},{\"text\":\"ListView\",\"link\":\"/guide/components/list-view/\"},{\"text\":\"TreeView\",\"link\":\"/guide/components/tree-view/\"}]},{\"text\":\"Date & Time\",\"collapsed\":true,\"items\":[{\"text\":\"CalendarDatePicker\",\"link\":\"/guide/components/calendar-date-picker/\"},{\"text\":\"CalendarView\",\"link\":\"/guide/components/calendar-view/\"},{\"text\":\"DatePicker\",\"link\":\"/guide/components/date-picker/\"},{\"text\":\"TimePicker\",\"link\":\"/guide/components/time-picker/\"}]},{\"text\":\"Dialogs & flyouts\",\"collapsed\":true,\"items\":[{\"text\":\"Callout\",\"link\":\"/guide/components/callout/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Layout\",\"collapsed\":true,\"items\":[{\"text\":\"Collapse\",\"link\":\"/guide/components/collapse/\"},{\"text\":\"Expander\",\"link\":\"/guide/components/expander/\"},{\"text\":\"Drawer\",\"link\":\"/guide/components/drawer/\"},{\"text\":\"Panel\",\"link\":\"/guide/components/panel/\"}]},{\"text\":\"Media\",\"collapsed\":true,\"items\":[{\"text\":\"Image\",\"link\":\"/guide/components/image/\"},{\"text\":\"Img\",\"link\":\"/guide/components/img/\"},{\"text\":\"ImgBox\",\"link\":\"/guide/components/img-box/\"},{\"text\":\"Persona\",\"link\":\"/guide/components/persona/\"}]},{\"text\":\"Menu & toolbars\",\"collapsed\":true,\"items\":[{\"text\":\"CommandBar\",\"link\":\"/guide/components/command-bar/\"},{\"text\":\"MenuFlyout\",\"link\":\"/guide/components/menu-flyout/\"},{\"text\":\"SwipeControl\",\"link\":\"/guide/components/swipe-control/\"}]},{\"text\":\"Navigation\",\"collapsed\":true,\"items\":[{\"text\":\"Breadcrumb\",\"link\":\"/guide/components/breadcrumb/\"},{\"text\":\"NavigationPanel\",\"link\":\"/guide/components/navigation-panel/\"},{\"text\":\"NavigationView\",\"link\":\"/guide/components/navigation-view/\"},{\"text\":\"Pivot\",\"link\":\"/guide/components/pivot/\"},{\"text\":\"Pagination\",\"link\":\"/guide/components/pagination/\"}]},{\"text\":\"Scrolling\",\"collapsed\":true,\"items\":[{\"text\":\"InfiniteScrollView\",\"link\":\"/guide/components/infinite-scroll-view/\"},{\"text\":\"ScrollStory\",\"link\":\"/guide/components/scroll-story/\"}]},{\"text\":\"Status & info\",\"collapsed\":true,\"items\":[{\"text\":\"Badge\",\"link\":\"/guide/components/badge/\"},{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"ProgressBar\",\"link\":\"/guide/components/progress-bar/\"},{\"text\":\"ProgressRing\",\"link\":\"/guide/components/progress-ring/\"}]},{\"text\":\"Styles\",\"collapsed\":true,\"items\":[{\"text\":\"AnimatedIcon\",\"link\":\"/guide/components/animated-icon/\"},{\"text\":\"IconElement\",\"link\":\"/guide/components/icon-element/\"},{\"text\":\"RevealContainer\",\"link\":\"/guide/components/reveal-container/\"},{\"text\":\"Shimmer\",\"link\":\"/guide/components/shimmer/\"}]},{\"text\":\"Text\",\"collapsed\":true,\"items\":[{\"text\":\"SearchBox\",\"link\":\"/guide/components/search-box/\"},{\"text\":\"TextBox\",\"link\":\"/guide/components/text-box/\"},{\"text\":\"TextField\",\"link\":\"/guide/components/text-field/\"},{\"text\":\"VerifyBox\",\"link\":\"/guide/components/verify-box/\"}]},{\"text\":\"Windowing\",\"collapsed\":true,\"items\":[{\"text\":\"WebWindow\",\"link\":\"/guide/components/web-window/\"}]},{\"text\":\"Global\",\"collapsed\":true,\"items\":[{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Advance\",\"collapsed\":true,\"items\":[{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git a/guide/components/date-picker/index.html b/guide/components/date-picker/index.html
new file mode 100644
index 0000000..fd3e68e
--- /dev/null
+++ b/guide/components/date-picker/index.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>DatePicker | vfluent3</title>
+    <meta name="description" content="A Vue3 component library for Fluent UI">
+    <meta name="generator" content="VitePress v1.0.0-rc.45">
+    <link rel="preload stylesheet" href="/VFluent3/assets/style.BabQegKX.css" as="style">
+    
+    <script type="module" src="/VFluent3/assets/app.CSutcJ2E.js"></script>
+    <link rel="preload" href="/VFluent3/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/framework.DvIFzl91.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/theme.CgqFBnN_.js">
+    <link rel="modulepreload" href="/VFluent3/assets/guide_components_date-picker_index.md.12vmUIup.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-19c990f1><div class="wrapper" data-v-19c990f1><div class="container" data-v-19c990f1><div class="title" data-v-19c990f1><div class="VPNavBarTitle has-sidebar" data-v-19c990f1 data-v-ab179fa1><a class="title" href="/VFluent3/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>VFluent3</span><!--[--><!--]--></a></div></div><div class="content" data-v-19c990f1><div class="content-body" data-v-19c990f1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-19c990f1><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-19c990f1 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Guide</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-19c990f1 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-19c990f1 data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-19c990f1 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-19c990f1><div class="divider-line" data-v-19c990f1></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-d2ecc192><button data-v-d2ecc192>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-575e6a36><div class="curtain" data-v-575e6a36></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-575e6a36><span class="visually-hidden" id="sidebar-aria-label" data-v-575e6a36> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Basic input</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/button/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/check-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CheckBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/combobox/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Combobox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/details-list/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DetailsList</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drop-down/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DropDown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio-group/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RadioGroup</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/rating-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RatingControl</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/slider/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/toggle-switch/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ToggleSwitch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tag/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Tag</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Collections</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/flip-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>FlipView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/list-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ListView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tree-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TreeView</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible has-active" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Date & Time</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarDatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/time-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TimePicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Dialogs & flyouts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/callout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Callout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Layout</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/collapse/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Collapse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/expander/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Expander</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drawer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Panel</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Media</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/image/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Img</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ImgBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/persona/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Persona</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Menu & toolbars</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/command-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CommandBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/menu-flyout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MenuFlyout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/swipe-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SwipeControl</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Navigation</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/breadcrumb/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationPanel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pivot/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pivot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pagination/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pagination</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Scrolling</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/infinite-scroll-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfiniteScrollView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/scroll-story/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ScrollStory</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Status & info</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/badge/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-ring/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressRing</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Styles</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/animated-icon/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>AnimatedIcon</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/icon-element/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>IconElement</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/reveal-container/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RevealContainer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/shimmer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Shimmer</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Text</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/search-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SearchBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-field/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextField</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/verify-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>VerifyBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Windowing</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/web-window/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>WebWindow</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Global</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Advance</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-935f8a84><div class="content" data-v-935f8a84><div class="outline-marker" data-v-935f8a84></div><div class="outline-title" role="heading" aria-level="2" data-v-935f8a84>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-935f8a84><span class="visually-hidden" id="doc-outline-aria-label" data-v-935f8a84> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-935f8a84 data-v-b933a997><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _VFluent3_guide_components_date-picker_" data-v-39a288b8><div><h3 id="datepicker-default" tabindex="-1">DatePicker-Default <a class="header-anchor" href="#datepicker-default" aria-label="Permalink to &quot;DatePicker-Default&quot;">​</a></h3><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-DatePicker</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">date</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-DatePicker</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="datepicker-simple" tabindex="-1">DatePicker-Simple <a class="header-anchor" href="#datepicker-simple" aria-label="Permalink to &quot;DatePicker-Simple&quot;">​</a></h3><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-DatePicker</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">date</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">hideYear</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-DatePicker</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="datepicker-full" tabindex="-1">DatePicker-Full <a class="header-anchor" href="#datepicker-full" aria-label="Permalink to &quot;DatePicker-Full&quot;">​</a></h3><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-DatePicker</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">date</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">showWeek</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-DatePicker</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="datepicker-disabled" tabindex="-1">DatePicker-Disabled <a class="header-anchor" href="#datepicker-disabled" aria-label="Permalink to &quot;DatePicker-Disabled&quot;">​</a></h3><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-DatePicker</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">date</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">showWeek</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-DatePicker</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="datepicker-custom" tabindex="-1">DatePicker-Custom <a class="header-anchor" href="#datepicker-custom" aria-label="Permalink to &quot;DatePicker-Custom&quot;">​</a></h3><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-DatePicker</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">date</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">showWeek</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;custom_style&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  hoverColor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rgba(0, 204, 153,0.7)&quot;</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  innerBorderColor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rgb(0, 204, 153)&quot;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">optionsStyle</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">backgroundColor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;rgba(0, 204, 153,0.6)&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;white&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">borderColor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;rgba(0, 204, 153,0.6)&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">selectStyle</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">backgroundColor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;rgb(0, 204, 153)&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-DatePicker</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  .custom_style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    background-color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">rgb</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">204</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">153</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    border</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> solid</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> rgb</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">204</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">153</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">white</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  .custom_style:hover</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    border</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> solid</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> rgb</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">204</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">153</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    background-color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">rgb</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">204</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">153</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0.8</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br></div></div><h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">v-model</td><td style="text-align:center;">[Date]</td><td style="text-align:center;">No</td><td style="text-align:center;">Date(1970,0,1)</td><td style="text-align:center;">绑定的时间</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">[&#39;system&#39;,&#39;dark&#39;,&#39;light&#39;,&#39;custom&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;system&#39;</td><td style="text-align:center;">主题色</td></tr><tr><td style="text-align:center;">months</td><td style="text-align:center;">Array</td><td style="text-align:center;">No</td><td style="text-align:center;">[&quot;January&quot;,&quot;February&quot;,...]</td><td style="text-align:center;">月份显示数组</td></tr><tr><td style="text-align:center;">weeks</td><td style="text-align:center;">Array</td><td style="text-align:center;">No</td><td style="text-align:center;">[&quot;Sun.&quot;,&quot;Mon.&quot;...]</td><td style="text-align:center;">星期显示输出</td></tr><tr><td style="text-align:center;">hideYear</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否隐藏年份</td></tr><tr><td style="text-align:center;">hideMonth</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否隐藏月份</td></tr><tr><td style="text-align:center;">hideDay</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否隐藏天数</td></tr><tr><td style="text-align:center;">showWeek</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否显示星期</td></tr><tr><td style="text-align:center;">inputBackground</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">输入框背景色</td></tr><tr><td style="text-align:center;">selectedBackground</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">当前选中框背景色</td></tr><tr><td style="text-align:center;">optionBackground</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">选择器背景色</td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否禁用选项框</td></tr><tr><td style="text-align:center;">hoverColor</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">选项的Hover值</td></tr></tbody></table><h3 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to &quot;Events&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">事件名(Name)</th><th style="text-align:center;">参数类型(args)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">focus</td><td style="text-align:center;"></td><td style="text-align:center;">触发焦点时触发</td></tr><tr><td style="text-align:center;">change</td><td style="text-align:center;"></td><td style="text-align:center;">当选中的时间发生变化时</td></tr></tbody></table></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-09de1c0f><!--[--><!--]--><!----><nav class="prev-next" data-v-09de1c0f><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link prev" href="/VFluent3/guide/components/calendar-view/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Previous page</span><span class="title" data-v-09de1c0f>CalendarView</span><!--]--></a></div><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link next" href="/VFluent3/guide/components/time-picker/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Next page</span><span class="title" data-v-09de1c0f>TimePicker</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>MIT Licensed</p><p class="copyright" data-v-e315a0ad>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_calendar-date-picker_properties.md\":\"DXRjmMG8\",\"guide_components_image_properties.md\":\"DGanRzCb\",\"guide_components_img-box_index.md\":\"DYtggkf_\",\"guide_components_img_emits.md\":\"BlE7jvZQ\",\"guide_components_img_index.md\":\"Bm9FiuU4\",\"guide_components_icon-element_properties.md\":\"8Oakruwc\",\"guide_components_img_properties.md\":\"B42YSocI\",\"guide_components_drawer_index.md\":\"D_vpnCpE\",\"guide_components_verify-box_emits.md\":\"DT17Iazx\",\"guide_components_calendar-date-picker_index.md\":\"BdHjrurh\",\"guide_components_rating-control_index.md\":\"Q9l5Lfrr\",\"guide_components_rating-control_properties.md\":\"DKprnl0i\",\"guide_components_calendar-view_index.md\":\"zdoRYVx1\",\"guide_components_animated-icon_index.md\":\"yZDMzCFe\",\"guide_components_calendar-date-picker_emits.md\":\"D5OkfR8j\",\"guide_components_badge_index.md\":\"Bb4crrJn\",\"guide_components_image_index.md\":\"B7X6cWAZ\",\"guide_components_slider_index.md\":\"C7zZ2d-W\",\"guide_components_radio-group_index.md\":\"CVfh3h5H\",\"guide_components_swipe-control_index.md\":\"DwrDVPc1\",\"guide_components_color-picker_emits.md\":\"BHDXVtBQ\",\"guide_components_radio_index.md\":\"90as5QGp\",\"guide_components_pagination_properties.md\":\"JUAPvcTL\",\"guide_components_persona_properties.md\":\"DUTPhPMp\",\"guide_components_combo-box_emits.md\":\"Dh5R-qEv\",\"guide_components_pivot_emits.md\":\"BTJPgNpy\",\"guide_components_pagination_index.md\":\"CnW2zAht\",\"guide_components_flip-view_properties.md\":\"BqZ4hhgU\",\"guide_components_icon-element_emits.md\":\"D5TXFdTZ\",\"guide_components_flip-view_index.md\":\"DefnDOv6\",\"guide_components_navigation-panel_index.md\":\"6mO__sSK\",\"guide_components_rating-control_emits.md\":\"blvomSeC\",\"guide_components_icon-element_index.md\":\"DQ8K7JNn\",\"guide_components_navigation-view_index.md\":\"4AQRiz1k\",\"guide_components_toggle-switch_emits.md\":\"CLGzrNut\",\"guide_components_toggle-switch_index.md\":\"61en_q9-\",\"guide_components_scroll-story_index.md\":\"Vpgb1HSV\",\"guide_components_reveal-container_index.md\":\"Cut2r4tV\",\"guide_components_search-box_emits.md\":\"-d9sWNNt\",\"guide_components_search-box_properties.md\":\"DEKFfPFw\",\"guide_components_shimmer_emits.md\":\"CTMInlI3\",\"guide_components_tag_index.md\":\"BhhxkcHn\",\"guide_components_search-box_index.md\":\"DgkrY0oY\",\"guide_components_shimmer_index.md\":\"iZlHuTxw\",\"guide_components_shimmer_properties.md\":\"CdkU1o6H\",\"guide_components_tree-view_index.md\":\"CUrwan4q\",\"guide_components_text-field_index.md\":\"CXSimJtj\",\"guide_components_text-box_index.md\":\"C5moAPfB\",\"guide_components_progress-ring_properties.md\":\"Dc08Uiff\",\"guide_components_toggle-switch_properties.md\":\"tFppK_IS\",\"guide_components_radio-group_emits.md\":\"cEDzKVnN\",\"guide_components_collapse_index.md\":\"N9Iu5-2v\",\"guide_components_image_emits.md\":\"lmlz2xJd\",\"guide_components_callout_index.md\":\"D9RU33w6\",\"guide_components_pivot_index.md\":\"B_vwQL-5\",\"guide_components_command-bar_index.md\":\"Cp4_rrGB\",\"guide_components_pagination_emits.md\":\"Dng86A22\",\"guide_components_button_index.md\":\"7sqT2MQP\",\"guide_components_info-box_properties.md\":\"BI7Nvk-E\",\"guide_components_drop-down_emits.md\":\"BE95TdKW\",\"guide_components_expander_index.md\":\"BKgcUJzQ\",\"guide_components_message-bar_index.md\":\"AEtAWlF8\",\"guide_components_menu-flyout_index.md\":\"Csa7irPj\",\"guide_components_panel_index.md\":\"CsTu0bXo\",\"guide_components_panel_properties.md\":\"BaxoCYKq\",\"guide_components_progress-bar_emits.md\":\"BcwXUpsF\",\"guide_components_progress-bar_properties.md\":\"TxiS9ZMA\",\"guide_components_progress-ring_emits.md\":\"D2Y6hIZ9\",\"guide_components_color-picker_index.md\":\"DCc4ixcU\",\"guide_components_progress-ring_index.md\":\"CPb-ZEPE\",\"guide_components_color-picker_properties.md\":\"wcXK29Vl\",\"guide_components_time-picker_index.md\":\"CQJdRRaG\",\"guide_components_drop-down_properties.md\":\"Bwlkpr1q\",\"guide_components_infinite-scroll-view_index.md\":\"yAuD807x\",\"guide_components_check-box_index.md\":\"FYgdu4oq\",\"guide_components_progress-bar_index.md\":\"D8vHQw5V\",\"guide_components_combo-box_index.md\":\"DTyu3eNd\",\"guide_components_info-box_emits.md\":\"DlEwpkkq\",\"guide_components_drop-down_index.md\":\"BZzJZQWq\",\"guide_components_list-view_index.md\":\"BoYvMzb0\",\"guide_components_verify-box_properties.md\":\"CW6W8fFf\",\"guide_components_verify-box_index.md\":\"DwSB40wR\",\"guide_index.md\":\"Bndlt3sL\",\"guide_components_web-window_index.md\":\"Bxc8vEeI\",\"index.md\":\"MTRqI42u\",\"guide_components_combo-box_properties.md\":\"AWfHzV6x\",\"guide_components_combobox_emits.md\":\"CGB6WLt8\",\"guide_components_combobox_properties.md\":\"Bja0hMou\",\"guide_components_details-list_index.md\":\"CcgOCIyt\",\"guide_components_info-box_index.md\":\"vXh-_DsL\",\"guide_components_combobox_index.md\":\"CsPkY6YB\",\"guide_components_date-picker_index.md\":\"12vmUIup\",\"guide_components_flip-view_emits.md\":\"DCheHjDj\",\"guide_components_panel_emits.md\":\"DG0REDq8\",\"guide_components_breadcrumb_index.md\":\"DyDm7PeP\",\"guide_components_radio-group_properties.md\":\"BnPxoKsQ\",\"guide_components_persona_emits.md\":\"CnsDPKRU\",\"guide_components_pivot_properties.md\":\"BmoLpPi1\",\"guide_components_persona_index.md\":\"DT00jby4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vfluent3\",\"description\":\"A Vue3 component library for Fluent UI\",\"base\":\"/VFluent3/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"VFluent3\",\"footer\":{\"message\":\"MIT Licensed\",\"copyright\":\"Copyright © Creator SN - 2022\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/\"}],\"sidebar\":[{\"text\":\"Basic input\",\"collapsed\":true,\"items\":[{\"text\":\"Button\",\"link\":\"/guide/components/button/\"},{\"text\":\"CheckBox\",\"link\":\"/guide/components/check-box/\"},{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"},{\"text\":\"Combobox\",\"link\":\"/guide/components/combobox/\"},{\"text\":\"DetailsList\",\"link\":\"/guide/components/details-list/\"},{\"text\":\"DropDown\",\"link\":\"/guide/components/drop-down/\"},{\"text\":\"Radio\",\"link\":\"/guide/components/radio/\"},{\"text\":\"RadioGroup\",\"link\":\"/guide/components/radio-group/\"},{\"text\":\"RatingControl\",\"link\":\"/guide/components/rating-control/\"},{\"text\":\"Slider\",\"link\":\"/guide/components/slider/\"},{\"text\":\"ToggleSwitch\",\"link\":\"/guide/components/toggle-switch/\"},{\"text\":\"Tag\",\"link\":\"/guide/components/tag/\"}]},{\"text\":\"Collections\",\"collapsed\":true,\"items\":[{\"text\":\"FlipView\",\"link\":\"/guide/components/flip-view/\"},{\"text\":\"ListView\",\"link\":\"/guide/components/list-view/\"},{\"text\":\"TreeView\",\"link\":\"/guide/components/tree-view/\"}]},{\"text\":\"Date & Time\",\"collapsed\":true,\"items\":[{\"text\":\"CalendarDatePicker\",\"link\":\"/guide/components/calendar-date-picker/\"},{\"text\":\"CalendarView\",\"link\":\"/guide/components/calendar-view/\"},{\"text\":\"DatePicker\",\"link\":\"/guide/components/date-picker/\"},{\"text\":\"TimePicker\",\"link\":\"/guide/components/time-picker/\"}]},{\"text\":\"Dialogs & flyouts\",\"collapsed\":true,\"items\":[{\"text\":\"Callout\",\"link\":\"/guide/components/callout/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Layout\",\"collapsed\":true,\"items\":[{\"text\":\"Collapse\",\"link\":\"/guide/components/collapse/\"},{\"text\":\"Expander\",\"link\":\"/guide/components/expander/\"},{\"text\":\"Drawer\",\"link\":\"/guide/components/drawer/\"},{\"text\":\"Panel\",\"link\":\"/guide/components/panel/\"}]},{\"text\":\"Media\",\"collapsed\":true,\"items\":[{\"text\":\"Image\",\"link\":\"/guide/components/image/\"},{\"text\":\"Img\",\"link\":\"/guide/components/img/\"},{\"text\":\"ImgBox\",\"link\":\"/guide/components/img-box/\"},{\"text\":\"Persona\",\"link\":\"/guide/components/persona/\"}]},{\"text\":\"Menu & toolbars\",\"collapsed\":true,\"items\":[{\"text\":\"CommandBar\",\"link\":\"/guide/components/command-bar/\"},{\"text\":\"MenuFlyout\",\"link\":\"/guide/components/menu-flyout/\"},{\"text\":\"SwipeControl\",\"link\":\"/guide/components/swipe-control/\"}]},{\"text\":\"Navigation\",\"collapsed\":true,\"items\":[{\"text\":\"Breadcrumb\",\"link\":\"/guide/components/breadcrumb/\"},{\"text\":\"NavigationPanel\",\"link\":\"/guide/components/navigation-panel/\"},{\"text\":\"NavigationView\",\"link\":\"/guide/components/navigation-view/\"},{\"text\":\"Pivot\",\"link\":\"/guide/components/pivot/\"},{\"text\":\"Pagination\",\"link\":\"/guide/components/pagination/\"}]},{\"text\":\"Scrolling\",\"collapsed\":true,\"items\":[{\"text\":\"InfiniteScrollView\",\"link\":\"/guide/components/infinite-scroll-view/\"},{\"text\":\"ScrollStory\",\"link\":\"/guide/components/scroll-story/\"}]},{\"text\":\"Status & info\",\"collapsed\":true,\"items\":[{\"text\":\"Badge\",\"link\":\"/guide/components/badge/\"},{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"ProgressBar\",\"link\":\"/guide/components/progress-bar/\"},{\"text\":\"ProgressRing\",\"link\":\"/guide/components/progress-ring/\"}]},{\"text\":\"Styles\",\"collapsed\":true,\"items\":[{\"text\":\"AnimatedIcon\",\"link\":\"/guide/components/animated-icon/\"},{\"text\":\"IconElement\",\"link\":\"/guide/components/icon-element/\"},{\"text\":\"RevealContainer\",\"link\":\"/guide/components/reveal-container/\"},{\"text\":\"Shimmer\",\"link\":\"/guide/components/shimmer/\"}]},{\"text\":\"Text\",\"collapsed\":true,\"items\":[{\"text\":\"SearchBox\",\"link\":\"/guide/components/search-box/\"},{\"text\":\"TextBox\",\"link\":\"/guide/components/text-box/\"},{\"text\":\"TextField\",\"link\":\"/guide/components/text-field/\"},{\"text\":\"VerifyBox\",\"link\":\"/guide/components/verify-box/\"}]},{\"text\":\"Windowing\",\"collapsed\":true,\"items\":[{\"text\":\"WebWindow\",\"link\":\"/guide/components/web-window/\"}]},{\"text\":\"Global\",\"collapsed\":true,\"items\":[{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Advance\",\"collapsed\":true,\"items\":[{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git a/guide/components/details-list/index.html b/guide/components/details-list/index.html
new file mode 100644
index 0000000..a69e861
--- /dev/null
+++ b/guide/components/details-list/index.html
@@ -0,0 +1,303 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>DetailsList | vfluent3</title>
+    <meta name="description" content="A Vue3 component library for Fluent UI">
+    <meta name="generator" content="VitePress v1.0.0-rc.45">
+    <link rel="preload stylesheet" href="/VFluent3/assets/style.BabQegKX.css" as="style">
+    
+    <script type="module" src="/VFluent3/assets/app.CSutcJ2E.js"></script>
+    <link rel="preload" href="/VFluent3/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/framework.DvIFzl91.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/theme.CgqFBnN_.js">
+    <link rel="modulepreload" href="/VFluent3/assets/guide_components_details-list_index.md.CcgOCIyt.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-19c990f1><div class="wrapper" data-v-19c990f1><div class="container" data-v-19c990f1><div class="title" data-v-19c990f1><div class="VPNavBarTitle has-sidebar" data-v-19c990f1 data-v-ab179fa1><a class="title" href="/VFluent3/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>VFluent3</span><!--[--><!--]--></a></div></div><div class="content" data-v-19c990f1><div class="content-body" data-v-19c990f1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-19c990f1><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-19c990f1 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Guide</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-19c990f1 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-19c990f1 data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-19c990f1 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-19c990f1><div class="divider-line" data-v-19c990f1></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-d2ecc192><button data-v-d2ecc192>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-575e6a36><div class="curtain" data-v-575e6a36></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-575e6a36><span class="visually-hidden" id="sidebar-aria-label" data-v-575e6a36> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible has-active" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Basic input</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/button/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/check-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CheckBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/combobox/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Combobox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/details-list/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DetailsList</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drop-down/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DropDown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio-group/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RadioGroup</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/rating-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RatingControl</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/slider/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/toggle-switch/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ToggleSwitch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tag/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Tag</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Collections</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/flip-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>FlipView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/list-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ListView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tree-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TreeView</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Date & Time</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarDatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/time-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TimePicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Dialogs & flyouts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/callout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Callout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Layout</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/collapse/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Collapse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/expander/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Expander</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drawer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Panel</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Media</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/image/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Img</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ImgBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/persona/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Persona</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Menu & toolbars</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/command-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CommandBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/menu-flyout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MenuFlyout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/swipe-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SwipeControl</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Navigation</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/breadcrumb/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationPanel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pivot/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pivot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pagination/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pagination</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Scrolling</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/infinite-scroll-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfiniteScrollView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/scroll-story/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ScrollStory</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Status & info</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/badge/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-ring/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressRing</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Styles</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/animated-icon/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>AnimatedIcon</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/icon-element/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>IconElement</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/reveal-container/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RevealContainer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/shimmer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Shimmer</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Text</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/search-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SearchBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-field/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextField</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/verify-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>VerifyBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Windowing</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/web-window/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>WebWindow</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Global</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Advance</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-935f8a84><div class="content" data-v-935f8a84><div class="outline-marker" data-v-935f8a84></div><div class="outline-title" role="heading" aria-level="2" data-v-935f8a84>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-935f8a84><span class="visually-hidden" id="doc-outline-aria-label" data-v-935f8a84> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-935f8a84 data-v-b933a997><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _VFluent3_guide_components_details-list_" data-v-39a288b8><div><h3 id="detailslist-demo" tabindex="-1">DetailsList-DEMO <a class="header-anchor" href="#detailslist-demo" aria-label="Permalink to &quot;DetailsList-DEMO&quot;">​</a></h3><hr><!----><div style="width:100%;height:100px;"></div><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-DetailsList</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">value</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">head</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">head</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;template v-slot:column_0=&quot;x&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;p&gt;{{x.item.name}}&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;template v-slot:column_1=&quot;x&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;p class=&quot;sec&quot;&gt;{{x.item.publisher}}&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;template v-slot:column_2=&quot;x&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;p class=&quot;sec&quot;&gt;{{x.item.publish_time}}&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/template&gt;&lt;template v-slot:column_3=&quot;x&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;p class=&quot;sec&quot;&gt;{{x.item.prop}}&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;template v-slot:column_4=&quot;x&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;p class=&quot;sec&quot;&gt;{{x.item.userInfo.name}}&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-DetailsList</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><h3 id="detailslist-allow-drag" tabindex="-1">DetailsList-Allow Drag <a class="header-anchor" href="#detailslist-allow-drag" aria-label="Permalink to &quot;DetailsList-Allow Drag&quot;">​</a></h3><hr><!----><div style="width:100%;height:100px;"></div><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-DetailsList</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">value</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">head</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">head</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">multiSelection</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">compact</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">compact</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">allowDrag</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      &lt;template v-slot:column_0=&quot;x&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">          &lt;p&gt;{{x.item.name}}&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      &lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      &lt;template v-slot:column_1=&quot;x&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">          &lt;p class=&quot;sec&quot;&gt;{{x.item.publisher}}&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      &lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      &lt;template v-slot:column_2=&quot;x&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">          &lt;p class=&quot;sec&quot;&gt;{{x.item.publish_time}}&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      &lt;/template&gt;&lt;template v-slot:column_3=&quot;x&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">          &lt;p class=&quot;sec&quot;&gt;{{x.item.prop}}&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      &lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      &lt;template v-slot:column_4=&quot;x&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">          &lt;p class=&quot;sec&quot;&gt;{{x.item.userInfo.name}}&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      &lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-DetailsList</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br></div></div><h3 id="detailslist-grouped" tabindex="-1">DetailsList-Grouped <a class="header-anchor" href="#detailslist-grouped" aria-label="Permalink to &quot;DetailsList-Grouped&quot;">​</a></h3><hr><!----><div style="width:100%;height:100px;"></div><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-DetailsList</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">value</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">head</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">head</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">multiSelection</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">multiSelection</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">compact</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">compact</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">group</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">group</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">showGroup</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;template v-slot:column_0=&quot;x&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;p&gt;{{x.item.name}}&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;template v-slot:column_1=&quot;x&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;p class=&quot;sec&quot;&gt;{{x.item.publisher}}&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;template v-slot:column_2=&quot;x&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;p class=&quot;sec&quot;&gt;{{x.item.publish_time}}&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/template&gt;&lt;template v-slot:column_3=&quot;x&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;p class=&quot;sec&quot;&gt;{{x.item.prop}}&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;template v-slot:column_4=&quot;x&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;p class=&quot;sec&quot;&gt;{{x.item.userInfo.name}}&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-DetailsList</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br></div></div><h3 id="detailslist-dark-theme" tabindex="-1">DetailsList-Dark Theme <a class="header-anchor" href="#detailslist-dark-theme" aria-label="Permalink to &quot;DetailsList-Dark Theme&quot;">​</a></h3><hr><!----><div style="width:100%;height:100px;"></div><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-DetailsList</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">value</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">head</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">head</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">multiSelection</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">multiSelection</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">compact</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">compact</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;template v-slot:column_0=&quot;x&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;p&gt;{{x.item.name}}&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;template v-slot:column_1=&quot;x&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;p&gt;{{x.item.publisher}}&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;template v-slot:column_2=&quot;x&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;p&gt;{{x.item.publish_time}}&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/template&gt;&lt;template v-slot:column_3=&quot;x&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;p&gt;{{x.item.prop}}&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;template v-slot:column_4=&quot;x&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;p&gt;{{x.item.userInfo.name}}&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-DetailsList</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br></div></div><h3 id="detailslist-customize-row-css" tabindex="-1">DetailsList Customize Row CSS <a class="header-anchor" href="#detailslist-customize-row-css" aria-label="Permalink to &quot;DetailsList Customize Row CSS&quot;">​</a></h3><hr><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-DetailsList</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">value</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">head</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">head</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">filter</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">filter</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">multiSelection</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">multiSelection</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">compact</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">compact</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> rowCss</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;fv-row-css&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;template v-slot:column_0=&quot;x&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;p&gt;{{x.item.name}}&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;template v-slot:column_1=&quot;x&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;p class=&quot;sec&quot;&gt;{{x.item.publisher}}&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;template v-slot:column_2=&quot;x&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;p class=&quot;sec&quot;&gt;{{x.item.publish_time}}&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/template&gt;&lt;template v-slot:column_3=&quot;x&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;p class=&quot;sec&quot;&gt;{{x.item.prop}}&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;template v-slot:column_4=&quot;x&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;p class=&quot;sec&quot;&gt;{{x.item.userInfo.name}}&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-DetailsList</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><div class="language-scss vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">scss</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.fv-row-css</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
+<span class="line"><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">    &amp;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">:nth-child</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">odd</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">        background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">rgba</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">239</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">239</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">239</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    }</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">    &amp;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">:nth-child</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">even</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">        background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">rgba</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">245</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">245</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">245</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">value</td><td style="text-align:center;">Array</td><td style="text-align:center;">Yes</td><td style="text-align:center;">N/A</td><td style="text-align:center;">列表数据, 数据格式详见数据格式表</td></tr><tr><td style="text-align:center;">head</td><td style="text-align:center;">Array</td><td style="text-align:center;">Yes</td><td style="text-align:center;">N/A</td><td style="text-align:center;">表头数据, 数据格式详见数据格式表</td></tr><tr><td style="text-align:center;">group</td><td style="text-align:center;">Array</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">分组数据, 数据格式详见数据格式表</td></tr><tr><td style="text-align:center;">filter</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">搜索筛选, 数据格式详见数据格式表, 控制表显示哪些搜索字段</td></tr><tr><td style="text-align:center;">showGroup</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否开启按组分割显示, 开启后排序功能将失效, 默认不开启, 若 group 为空, 则开启后表格内容为空</td></tr><tr><td style="text-align:center;">autoHeight</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否开启自动高度</td></tr><tr><td style="text-align:center;">foreground</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">表格前景色</td></tr><tr><td style="text-align:center;">headBackground</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">表头背景, 不会修改点燃颜色, 若要修改点燃颜色请自定义 fv-custom-head 类样式</td></tr><tr><td style="text-align:center;">compact</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否开启收缩模式</td></tr><tr><td style="text-align:center;">multiSelection</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否开启多选模式</td></tr><tr><td style="text-align:center;">allowDrag</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否开启拖动排序</td></tr><tr><td style="text-align:center;">rowCSS</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">客制化每一行的样式</td></tr><tr><td style="text-align:center;">rightMenuWidth</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">200</td><td style="text-align:center;">右键菜单宽度设置</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">system</td><td style="text-align:center;">主题样式, 包含<code>light</code>, <code>dark</code>, <code>system</code>, <code>custom</code>几种样式</td></tr></tbody></table><h3 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to &quot;Events&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">事件名(Name)</th><th style="text-align:center;">参数类型(args)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">change-value</td><td style="text-align:center;">修改后的 value</td><td style="text-align:center;">在列表内部的 value 发生改变后会触发事件并返回修改后的 value</td></tr><tr><td style="text-align:center;">choose-items</td><td style="text-align:center;">currentChoose</td><td style="text-align:center;">在选择某行数据后返回被选中的数据</td></tr><tr><td style="text-align:center;">lazyload</td><td style="text-align:center;">修改后的 value</td><td style="text-align:center;">滚动到底部加载数据, 返回列表内部的 value</td></tr><tr><td style="text-align:center;">rightclick</td><td style="text-align:center;">当前选中的 row-item</td><td style="text-align:center;">右键菜单返回当前选择的项目</td></tr><tr><td style="text-align:center;">drop-items</td><td style="text-align:center;">返回对象包含<code>transfer</code>和<code>value</code></td><td style="text-align:center;">项目拖拽释放后触发事件, <code>transfer</code>包含拖拽项目, <code>value</code>包含列表内部的value</td></tr></tbody></table><h3 id="slot" tabindex="-1">Slot <a class="header-anchor" href="#slot" aria-label="Permalink to &quot;Slot&quot;">​</a></h3><hr><ol><li>Head</li></ol><p>默认情况下用户可直接在<code>head</code>中定义<code>content</code>来应用默认样式, 不需要修改此模板, 可缺省 用户自定义样式时, 包含以下可选属性</p><ul><li>item: 当前项</li><li>index: 当前项索引</li></ul><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">head</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;default-title&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;{{ x.item.content }}&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ol start="2"><li>Column</li></ol><p>用户根据<code>head</code>中的数量通过<code>column_[数字]</code>的方式来定义每一列的模板 默认情况下利用<code>&lt;p&gt;</code>标签来表示正文, 通过<code>class=&quot;sec&quot;</code>来表示附属文本 用户自定义样式时, 包含以下可选属性</p><ul><li>item: 当前项</li><li>row_index: 当前项行号</li><li>col_index: 当前项列号</li></ul><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">column_0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;{{ x.item.name }}&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">column_1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;sec&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;{{ x.item.publisher }}&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">column_2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;sec&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;{{ x.item.publish_time }}&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt; &lt;/template</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">column_3</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;sec&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;{{ x.item.prop }}&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">column_4</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;sec&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;{{ x.item.userInfo.name }}&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><ol start="3"><li>Row Expand</li></ol><p>用户可以根据需要在每一行添加额外的内容, 如下拉菜单, 注意自定义的内容定位需要设置为&#39;absolute&#39;.</p><ul><li>item: 当前项</li><li>row_index: 当前项行号</li></ul><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">row_expand</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">position</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">absolute</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ol start="4"><li>Group</li></ol><p>源代码, 默认不需要修改, 用户只需要定义<code>gi</code>数组中每一项的<code>name</code>来应用默认样式, 不需要定义此模板, 可缺省</p><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">slot</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;group&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">item</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">gi</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">index</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">i</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">isMulti</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">multiSelection</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">isChoose</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">isGroupChooseAll</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(gi)</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;span v-show=&quot;multiSelection&quot; class=&quot;icon-block icon&quot; key=&quot;multi-col&quot; @click=&quot;chooseGroup(gi)&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;span class=&quot;icon&quot; :class=&quot;{choose: isGroupChooseAll(gi)}&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            &lt;i class=&quot;ms-Icon ms-Icon--FullCircleMask ll&quot;&gt;&lt;/i&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            &lt;i class=&quot;ms-Icon ms-Icon--CircleRing ll&quot;&gt;&lt;/i&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            &lt;i class=&quot;ms-Icon ms-Icon--Completed ll&quot;&gt;&lt;/i&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;/span&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/span&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;span class=&quot;expand&quot; :class=&quot;{choose: gi.expand}&quot; @click=&quot;expandGroup(gi)&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;i class=&quot;ms-Icon ms-Icon--ChevronRight&quot;&gt;&lt;/i&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/span&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;span class=&quot;col&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;p&gt;{{gi.name}}&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/span&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><p>用户自定义样式时, 包含以下可选属性</p><ul><li>item: 当前组数据</li><li>index: 当前组索引</li><li>isMulti: 当前是否开启多选</li><li>isChoose: 当前组是否全选</li></ul><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">group</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;{{ x.item.name }}&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ol start="5"><li>Goup Content</li></ol><p>若用户想保留默认<code>Group</code>下拉样式并且只修改内容部分, 可使用<code>group_content</code>来重定义样式, 默认值为:</p><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">slot</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;group_content&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">item</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">gi</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">index</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">i</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;span class=&quot;col&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;p&gt;{{gi.name}}&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/span&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>用户自定义样式时, 包含以下可选属性</p><ul><li>item: 当前组数据</li><li>index: 当前组索引</li><li>isMulti: 当前是否开启多选</li><li>isChoose: 当前组是否全选</li></ul><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">group_content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;{{ x.item.name }}&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ol start="6"><li>Context Menu</li></ol><p>默认显示列表选中数量</p><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">menu</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">i</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;[图标]&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">i</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;[内容]&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    ...</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">hr</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">i</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;[图标]&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">i</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;[内容]&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><h3 id="data" tabindex="-1">Data <a class="header-anchor" href="#data" aria-label="Permalink to &quot;Data&quot;">​</a></h3><hr><ol><li>value</li></ol><div class="language-javascript vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">value </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [{any: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">...</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}]</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">//e.g.//</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: [{id: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, publisher: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, userInfo: {}, publish_time: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, update_time: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, prop: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}]</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><ol start="2"><li>head</li></ol><div class="language-javascript vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">head </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    content: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">//默认表头的列名</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    minWidth: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">//最小的列宽, 默认为60</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    width: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">//初始的列宽, 默认为80</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    sortName: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">//按字段名来排序, 名字为value中的属性, DetailsList将根据当前的属性类型智能排序</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    customSort: {}, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">//自定义排序方法, 在此定义函数满足预设两个参数(itemA, itemB)分别代表value中的两项并根据用户需要自定义函数方法, 此字段定义后, sortName仍需填写, 但值可任意</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    visible: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> //是否显示该列, 支持函数式声明</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">];</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">**</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">特别地</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">**</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 0.2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.17版本后支持采用函数式字段, </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">其中支持的字段包括</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">`visible`</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">//e.g.//</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">head</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: [</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    content: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Name&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    minWidth: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">60</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    width: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">80</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    sortName: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;name&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    visible: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    content: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Publisher&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    minWidth: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">60</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    width: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">80</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    sortName: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;publisher&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    visible: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    content: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Publish Time&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    minWidth: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">60</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    width: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">190</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    sortName: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;publish_time&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    visible: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    content: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Prop&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    minWidth: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">60</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    width: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">92</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    sortName: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;prop&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    visible: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    content: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;User Name&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    minWidth: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">60</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    width: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">80</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    visible: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">];</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br></div></div><ol start="3"><li>group</li></ol><div class="language-javascript vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">group </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">//分组的键值, 键来自value的属性</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    value: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">//分组的键值对应的具体值, DetailsList会根据当前的key匹配value来进行分组</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;&quot;</span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> //分组的其他数据, 默认模板将以name属性来渲染名称</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">];</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">//e.g.//</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">group</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: [</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;prop&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    value: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Windows&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;A&quot;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;prop&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    value: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Edge&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;B&quot;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;prop&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    value: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Office&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;C&quot;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;prop&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    value: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Visual Studio&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;D&quot;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">];</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br></div></div><h3 id="custom-class" tabindex="-1">Custom Class <a class="header-anchor" href="#custom-class" aria-label="Permalink to &quot;Custom Class&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">类名(Name)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">fv-custom-head</td><td style="text-align:center;">客制化表头, 主要递推关系: fv-custom-head -&gt; icon-block, col -&gt; col-content, expand -&gt; default-title</td></tr><tr><td style="text-align:center;">fv-custom-row</td><td style="text-align:center;">客制化行, 主要递推关系: fv-custom-row -&gt; icon-block, col</td></tr><tr><td style="text-align:center;">fv-custom-group-row</td><td style="text-align:center;">客制化组, 主要递推关系: fv-custom-group-row -&gt; icon-blocks, expand, col</td></tr></tbody></table><div class="language-scss vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">scss</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.fv-custom-head</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  .icon-block</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    .icon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  .col</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    .col-content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">      .default-title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    }</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    .expand</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.fv-custom-row</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  .icon-block</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    .icon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  .col</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.fv-custom-group-row</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">  &amp;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.choose</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  .icon-block</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    .icon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  .col</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  .expand</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br></div></div></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-09de1c0f><!--[--><!--]--><!----><nav class="prev-next" data-v-09de1c0f><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link prev" href="/VFluent3/guide/components/combobox/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Previous page</span><span class="title" data-v-09de1c0f>Combobox</span><!--]--></a></div><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link next" href="/VFluent3/guide/components/drop-down/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Next page</span><span class="title" data-v-09de1c0f>DropDown</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>MIT Licensed</p><p class="copyright" data-v-e315a0ad>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_calendar-date-picker_properties.md\":\"DXRjmMG8\",\"guide_components_image_properties.md\":\"DGanRzCb\",\"guide_components_img-box_index.md\":\"DYtggkf_\",\"guide_components_img_emits.md\":\"BlE7jvZQ\",\"guide_components_img_index.md\":\"Bm9FiuU4\",\"guide_components_icon-element_properties.md\":\"8Oakruwc\",\"guide_components_img_properties.md\":\"B42YSocI\",\"guide_components_drawer_index.md\":\"D_vpnCpE\",\"guide_components_verify-box_emits.md\":\"DT17Iazx\",\"guide_components_calendar-date-picker_index.md\":\"BdHjrurh\",\"guide_components_rating-control_index.md\":\"Q9l5Lfrr\",\"guide_components_rating-control_properties.md\":\"DKprnl0i\",\"guide_components_calendar-view_index.md\":\"zdoRYVx1\",\"guide_components_animated-icon_index.md\":\"yZDMzCFe\",\"guide_components_calendar-date-picker_emits.md\":\"D5OkfR8j\",\"guide_components_badge_index.md\":\"Bb4crrJn\",\"guide_components_image_index.md\":\"B7X6cWAZ\",\"guide_components_slider_index.md\":\"C7zZ2d-W\",\"guide_components_radio-group_index.md\":\"CVfh3h5H\",\"guide_components_swipe-control_index.md\":\"DwrDVPc1\",\"guide_components_color-picker_emits.md\":\"BHDXVtBQ\",\"guide_components_radio_index.md\":\"90as5QGp\",\"guide_components_pagination_properties.md\":\"JUAPvcTL\",\"guide_components_persona_properties.md\":\"DUTPhPMp\",\"guide_components_combo-box_emits.md\":\"Dh5R-qEv\",\"guide_components_pivot_emits.md\":\"BTJPgNpy\",\"guide_components_pagination_index.md\":\"CnW2zAht\",\"guide_components_flip-view_properties.md\":\"BqZ4hhgU\",\"guide_components_icon-element_emits.md\":\"D5TXFdTZ\",\"guide_components_flip-view_index.md\":\"DefnDOv6\",\"guide_components_navigation-panel_index.md\":\"6mO__sSK\",\"guide_components_rating-control_emits.md\":\"blvomSeC\",\"guide_components_icon-element_index.md\":\"DQ8K7JNn\",\"guide_components_navigation-view_index.md\":\"4AQRiz1k\",\"guide_components_toggle-switch_emits.md\":\"CLGzrNut\",\"guide_components_toggle-switch_index.md\":\"61en_q9-\",\"guide_components_scroll-story_index.md\":\"Vpgb1HSV\",\"guide_components_reveal-container_index.md\":\"Cut2r4tV\",\"guide_components_search-box_emits.md\":\"-d9sWNNt\",\"guide_components_search-box_properties.md\":\"DEKFfPFw\",\"guide_components_shimmer_emits.md\":\"CTMInlI3\",\"guide_components_tag_index.md\":\"BhhxkcHn\",\"guide_components_search-box_index.md\":\"DgkrY0oY\",\"guide_components_shimmer_index.md\":\"iZlHuTxw\",\"guide_components_shimmer_properties.md\":\"CdkU1o6H\",\"guide_components_tree-view_index.md\":\"CUrwan4q\",\"guide_components_text-field_index.md\":\"CXSimJtj\",\"guide_components_text-box_index.md\":\"C5moAPfB\",\"guide_components_progress-ring_properties.md\":\"Dc08Uiff\",\"guide_components_toggle-switch_properties.md\":\"tFppK_IS\",\"guide_components_radio-group_emits.md\":\"cEDzKVnN\",\"guide_components_collapse_index.md\":\"N9Iu5-2v\",\"guide_components_image_emits.md\":\"lmlz2xJd\",\"guide_components_callout_index.md\":\"D9RU33w6\",\"guide_components_pivot_index.md\":\"B_vwQL-5\",\"guide_components_command-bar_index.md\":\"Cp4_rrGB\",\"guide_components_pagination_emits.md\":\"Dng86A22\",\"guide_components_button_index.md\":\"7sqT2MQP\",\"guide_components_info-box_properties.md\":\"BI7Nvk-E\",\"guide_components_drop-down_emits.md\":\"BE95TdKW\",\"guide_components_expander_index.md\":\"BKgcUJzQ\",\"guide_components_message-bar_index.md\":\"AEtAWlF8\",\"guide_components_menu-flyout_index.md\":\"Csa7irPj\",\"guide_components_panel_index.md\":\"CsTu0bXo\",\"guide_components_panel_properties.md\":\"BaxoCYKq\",\"guide_components_progress-bar_emits.md\":\"BcwXUpsF\",\"guide_components_progress-bar_properties.md\":\"TxiS9ZMA\",\"guide_components_progress-ring_emits.md\":\"D2Y6hIZ9\",\"guide_components_color-picker_index.md\":\"DCc4ixcU\",\"guide_components_progress-ring_index.md\":\"CPb-ZEPE\",\"guide_components_color-picker_properties.md\":\"wcXK29Vl\",\"guide_components_time-picker_index.md\":\"CQJdRRaG\",\"guide_components_drop-down_properties.md\":\"Bwlkpr1q\",\"guide_components_infinite-scroll-view_index.md\":\"yAuD807x\",\"guide_components_check-box_index.md\":\"FYgdu4oq\",\"guide_components_progress-bar_index.md\":\"D8vHQw5V\",\"guide_components_combo-box_index.md\":\"DTyu3eNd\",\"guide_components_info-box_emits.md\":\"DlEwpkkq\",\"guide_components_drop-down_index.md\":\"BZzJZQWq\",\"guide_components_list-view_index.md\":\"BoYvMzb0\",\"guide_components_verify-box_properties.md\":\"CW6W8fFf\",\"guide_components_verify-box_index.md\":\"DwSB40wR\",\"guide_index.md\":\"Bndlt3sL\",\"guide_components_web-window_index.md\":\"Bxc8vEeI\",\"index.md\":\"MTRqI42u\",\"guide_components_combo-box_properties.md\":\"AWfHzV6x\",\"guide_components_combobox_emits.md\":\"CGB6WLt8\",\"guide_components_combobox_properties.md\":\"Bja0hMou\",\"guide_components_details-list_index.md\":\"CcgOCIyt\",\"guide_components_info-box_index.md\":\"vXh-_DsL\",\"guide_components_combobox_index.md\":\"CsPkY6YB\",\"guide_components_date-picker_index.md\":\"12vmUIup\",\"guide_components_flip-view_emits.md\":\"DCheHjDj\",\"guide_components_panel_emits.md\":\"DG0REDq8\",\"guide_components_breadcrumb_index.md\":\"DyDm7PeP\",\"guide_components_radio-group_properties.md\":\"BnPxoKsQ\",\"guide_components_persona_emits.md\":\"CnsDPKRU\",\"guide_components_pivot_properties.md\":\"BmoLpPi1\",\"guide_components_persona_index.md\":\"DT00jby4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vfluent3\",\"description\":\"A Vue3 component library for Fluent UI\",\"base\":\"/VFluent3/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"VFluent3\",\"footer\":{\"message\":\"MIT Licensed\",\"copyright\":\"Copyright © Creator SN - 2022\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/\"}],\"sidebar\":[{\"text\":\"Basic input\",\"collapsed\":true,\"items\":[{\"text\":\"Button\",\"link\":\"/guide/components/button/\"},{\"text\":\"CheckBox\",\"link\":\"/guide/components/check-box/\"},{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"},{\"text\":\"Combobox\",\"link\":\"/guide/components/combobox/\"},{\"text\":\"DetailsList\",\"link\":\"/guide/components/details-list/\"},{\"text\":\"DropDown\",\"link\":\"/guide/components/drop-down/\"},{\"text\":\"Radio\",\"link\":\"/guide/components/radio/\"},{\"text\":\"RadioGroup\",\"link\":\"/guide/components/radio-group/\"},{\"text\":\"RatingControl\",\"link\":\"/guide/components/rating-control/\"},{\"text\":\"Slider\",\"link\":\"/guide/components/slider/\"},{\"text\":\"ToggleSwitch\",\"link\":\"/guide/components/toggle-switch/\"},{\"text\":\"Tag\",\"link\":\"/guide/components/tag/\"}]},{\"text\":\"Collections\",\"collapsed\":true,\"items\":[{\"text\":\"FlipView\",\"link\":\"/guide/components/flip-view/\"},{\"text\":\"ListView\",\"link\":\"/guide/components/list-view/\"},{\"text\":\"TreeView\",\"link\":\"/guide/components/tree-view/\"}]},{\"text\":\"Date & Time\",\"collapsed\":true,\"items\":[{\"text\":\"CalendarDatePicker\",\"link\":\"/guide/components/calendar-date-picker/\"},{\"text\":\"CalendarView\",\"link\":\"/guide/components/calendar-view/\"},{\"text\":\"DatePicker\",\"link\":\"/guide/components/date-picker/\"},{\"text\":\"TimePicker\",\"link\":\"/guide/components/time-picker/\"}]},{\"text\":\"Dialogs & flyouts\",\"collapsed\":true,\"items\":[{\"text\":\"Callout\",\"link\":\"/guide/components/callout/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Layout\",\"collapsed\":true,\"items\":[{\"text\":\"Collapse\",\"link\":\"/guide/components/collapse/\"},{\"text\":\"Expander\",\"link\":\"/guide/components/expander/\"},{\"text\":\"Drawer\",\"link\":\"/guide/components/drawer/\"},{\"text\":\"Panel\",\"link\":\"/guide/components/panel/\"}]},{\"text\":\"Media\",\"collapsed\":true,\"items\":[{\"text\":\"Image\",\"link\":\"/guide/components/image/\"},{\"text\":\"Img\",\"link\":\"/guide/components/img/\"},{\"text\":\"ImgBox\",\"link\":\"/guide/components/img-box/\"},{\"text\":\"Persona\",\"link\":\"/guide/components/persona/\"}]},{\"text\":\"Menu & toolbars\",\"collapsed\":true,\"items\":[{\"text\":\"CommandBar\",\"link\":\"/guide/components/command-bar/\"},{\"text\":\"MenuFlyout\",\"link\":\"/guide/components/menu-flyout/\"},{\"text\":\"SwipeControl\",\"link\":\"/guide/components/swipe-control/\"}]},{\"text\":\"Navigation\",\"collapsed\":true,\"items\":[{\"text\":\"Breadcrumb\",\"link\":\"/guide/components/breadcrumb/\"},{\"text\":\"NavigationPanel\",\"link\":\"/guide/components/navigation-panel/\"},{\"text\":\"NavigationView\",\"link\":\"/guide/components/navigation-view/\"},{\"text\":\"Pivot\",\"link\":\"/guide/components/pivot/\"},{\"text\":\"Pagination\",\"link\":\"/guide/components/pagination/\"}]},{\"text\":\"Scrolling\",\"collapsed\":true,\"items\":[{\"text\":\"InfiniteScrollView\",\"link\":\"/guide/components/infinite-scroll-view/\"},{\"text\":\"ScrollStory\",\"link\":\"/guide/components/scroll-story/\"}]},{\"text\":\"Status & info\",\"collapsed\":true,\"items\":[{\"text\":\"Badge\",\"link\":\"/guide/components/badge/\"},{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"ProgressBar\",\"link\":\"/guide/components/progress-bar/\"},{\"text\":\"ProgressRing\",\"link\":\"/guide/components/progress-ring/\"}]},{\"text\":\"Styles\",\"collapsed\":true,\"items\":[{\"text\":\"AnimatedIcon\",\"link\":\"/guide/components/animated-icon/\"},{\"text\":\"IconElement\",\"link\":\"/guide/components/icon-element/\"},{\"text\":\"RevealContainer\",\"link\":\"/guide/components/reveal-container/\"},{\"text\":\"Shimmer\",\"link\":\"/guide/components/shimmer/\"}]},{\"text\":\"Text\",\"collapsed\":true,\"items\":[{\"text\":\"SearchBox\",\"link\":\"/guide/components/search-box/\"},{\"text\":\"TextBox\",\"link\":\"/guide/components/text-box/\"},{\"text\":\"TextField\",\"link\":\"/guide/components/text-field/\"},{\"text\":\"VerifyBox\",\"link\":\"/guide/components/verify-box/\"}]},{\"text\":\"Windowing\",\"collapsed\":true,\"items\":[{\"text\":\"WebWindow\",\"link\":\"/guide/components/web-window/\"}]},{\"text\":\"Global\",\"collapsed\":true,\"items\":[{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Advance\",\"collapsed\":true,\"items\":[{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git a/guide/components/drawer/index.html b/guide/components/drawer/index.html
new file mode 100644
index 0000000..873fe04
--- /dev/null
+++ b/guide/components/drawer/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>Drawer | vfluent3</title>
+    <meta name="description" content="A Vue3 component library for Fluent UI">
+    <meta name="generator" content="VitePress v1.0.0-rc.45">
+    <link rel="preload stylesheet" href="/VFluent3/assets/style.BabQegKX.css" as="style">
+    
+    <script type="module" src="/VFluent3/assets/app.CSutcJ2E.js"></script>
+    <link rel="preload" href="/VFluent3/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/framework.DvIFzl91.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/theme.CgqFBnN_.js">
+    <link rel="modulepreload" href="/VFluent3/assets/guide_components_drawer_index.md.D_vpnCpE.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-19c990f1><div class="wrapper" data-v-19c990f1><div class="container" data-v-19c990f1><div class="title" data-v-19c990f1><div class="VPNavBarTitle has-sidebar" data-v-19c990f1 data-v-ab179fa1><a class="title" href="/VFluent3/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>VFluent3</span><!--[--><!--]--></a></div></div><div class="content" data-v-19c990f1><div class="content-body" data-v-19c990f1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-19c990f1><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-19c990f1 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Guide</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-19c990f1 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-19c990f1 data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-19c990f1 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-19c990f1><div class="divider-line" data-v-19c990f1></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-d2ecc192><button data-v-d2ecc192>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-575e6a36><div class="curtain" data-v-575e6a36></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-575e6a36><span class="visually-hidden" id="sidebar-aria-label" data-v-575e6a36> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Basic input</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/button/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/check-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CheckBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/combobox/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Combobox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/details-list/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DetailsList</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drop-down/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DropDown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio-group/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RadioGroup</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/rating-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RatingControl</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/slider/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/toggle-switch/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ToggleSwitch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tag/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Tag</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Collections</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/flip-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>FlipView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/list-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ListView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tree-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TreeView</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Date & Time</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarDatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/time-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TimePicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Dialogs & flyouts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/callout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Callout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible has-active" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Layout</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/collapse/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Collapse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/expander/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Expander</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drawer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Panel</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Media</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/image/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Img</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ImgBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/persona/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Persona</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Menu & toolbars</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/command-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CommandBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/menu-flyout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MenuFlyout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/swipe-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SwipeControl</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Navigation</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/breadcrumb/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationPanel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pivot/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pivot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pagination/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pagination</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Scrolling</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/infinite-scroll-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfiniteScrollView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/scroll-story/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ScrollStory</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Status & info</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/badge/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-ring/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressRing</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Styles</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/animated-icon/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>AnimatedIcon</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/icon-element/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>IconElement</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/reveal-container/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RevealContainer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/shimmer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Shimmer</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Text</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/search-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SearchBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-field/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextField</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/verify-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>VerifyBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Windowing</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/web-window/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>WebWindow</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Global</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Advance</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-935f8a84><div class="content" data-v-935f8a84><div class="outline-marker" data-v-935f8a84></div><div class="outline-title" role="heading" aria-level="2" data-v-935f8a84>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-935f8a84><span class="visually-hidden" id="doc-outline-aria-label" data-v-935f8a84> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-935f8a84 data-v-b933a997><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _VFluent3_guide_components_drawer_" data-v-39a288b8><div><h3 id="drawer" tabindex="-1">Drawer <a class="header-anchor" href="#drawer" aria-label="Permalink to &quot;Drawer&quot;">​</a></h3><hr><!----><h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">theme</td><td style="text-align:center;">[&#39;system&#39;, &#39;dark&#39;, &#39;light&#39;, &#39;custom&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;system&#39;</td><td style="text-align:center;">主题色</td></tr><tr><td style="text-align:center;">value</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否可视</td></tr><tr><td style="text-align:center;">length</td><td style="text-align:center;">[number, string]</td><td style="text-align:center;">No</td><td style="text-align:center;">300</td><td style="text-align:center;">抽屉长度</td></tr><tr><td style="text-align:center;">focusTrap</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否聚焦</td></tr><tr><td style="text-align:center;">zIndex</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">10</td><td style="text-align:center;">层叠数</td></tr><tr><td style="text-align:center;">position</td><td style="text-align:center;">[&#39;bottom&#39;, &#39;left&#39;, &#39;top&#39;, &#39;right&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;bottom&#39;</td><td style="text-align:center;">位置</td></tr><tr><td style="text-align:center;">appendBody</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否添加到body（IOS兼容）</td></tr></tbody></table><h3 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to &quot;Events&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">事件名(Name)</th><th style="text-align:center;">参数类型(args)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;"></td><td style="text-align:center;"></td><td style="text-align:center;"></td></tr></tbody></table><h3 id="slot" tabindex="-1">Slot <a class="header-anchor" href="#slot" aria-label="Permalink to &quot;Slot&quot;">​</a></h3><hr><ol><li>Default</li></ol><p>自定义容器内内容</p><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-09de1c0f><!--[--><!--]--><!----><nav class="prev-next" data-v-09de1c0f><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link prev" href="/VFluent3/guide/components/expander/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Previous page</span><span class="title" data-v-09de1c0f>Expander</span><!--]--></a></div><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link next" href="/VFluent3/guide/components/panel/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Next page</span><span class="title" data-v-09de1c0f>Panel</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>MIT Licensed</p><p class="copyright" data-v-e315a0ad>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_calendar-date-picker_properties.md\":\"DXRjmMG8\",\"guide_components_image_properties.md\":\"DGanRzCb\",\"guide_components_img-box_index.md\":\"DYtggkf_\",\"guide_components_img_emits.md\":\"BlE7jvZQ\",\"guide_components_img_index.md\":\"Bm9FiuU4\",\"guide_components_icon-element_properties.md\":\"8Oakruwc\",\"guide_components_img_properties.md\":\"B42YSocI\",\"guide_components_drawer_index.md\":\"D_vpnCpE\",\"guide_components_verify-box_emits.md\":\"DT17Iazx\",\"guide_components_calendar-date-picker_index.md\":\"BdHjrurh\",\"guide_components_rating-control_index.md\":\"Q9l5Lfrr\",\"guide_components_rating-control_properties.md\":\"DKprnl0i\",\"guide_components_calendar-view_index.md\":\"zdoRYVx1\",\"guide_components_animated-icon_index.md\":\"yZDMzCFe\",\"guide_components_calendar-date-picker_emits.md\":\"D5OkfR8j\",\"guide_components_badge_index.md\":\"Bb4crrJn\",\"guide_components_image_index.md\":\"B7X6cWAZ\",\"guide_components_slider_index.md\":\"C7zZ2d-W\",\"guide_components_radio-group_index.md\":\"CVfh3h5H\",\"guide_components_swipe-control_index.md\":\"DwrDVPc1\",\"guide_components_color-picker_emits.md\":\"BHDXVtBQ\",\"guide_components_radio_index.md\":\"90as5QGp\",\"guide_components_pagination_properties.md\":\"JUAPvcTL\",\"guide_components_persona_properties.md\":\"DUTPhPMp\",\"guide_components_combo-box_emits.md\":\"Dh5R-qEv\",\"guide_components_pivot_emits.md\":\"BTJPgNpy\",\"guide_components_pagination_index.md\":\"CnW2zAht\",\"guide_components_flip-view_properties.md\":\"BqZ4hhgU\",\"guide_components_icon-element_emits.md\":\"D5TXFdTZ\",\"guide_components_flip-view_index.md\":\"DefnDOv6\",\"guide_components_navigation-panel_index.md\":\"6mO__sSK\",\"guide_components_rating-control_emits.md\":\"blvomSeC\",\"guide_components_icon-element_index.md\":\"DQ8K7JNn\",\"guide_components_navigation-view_index.md\":\"4AQRiz1k\",\"guide_components_toggle-switch_emits.md\":\"CLGzrNut\",\"guide_components_toggle-switch_index.md\":\"61en_q9-\",\"guide_components_scroll-story_index.md\":\"Vpgb1HSV\",\"guide_components_reveal-container_index.md\":\"Cut2r4tV\",\"guide_components_search-box_emits.md\":\"-d9sWNNt\",\"guide_components_search-box_properties.md\":\"DEKFfPFw\",\"guide_components_shimmer_emits.md\":\"CTMInlI3\",\"guide_components_tag_index.md\":\"BhhxkcHn\",\"guide_components_search-box_index.md\":\"DgkrY0oY\",\"guide_components_shimmer_index.md\":\"iZlHuTxw\",\"guide_components_shimmer_properties.md\":\"CdkU1o6H\",\"guide_components_tree-view_index.md\":\"CUrwan4q\",\"guide_components_text-field_index.md\":\"CXSimJtj\",\"guide_components_text-box_index.md\":\"C5moAPfB\",\"guide_components_progress-ring_properties.md\":\"Dc08Uiff\",\"guide_components_toggle-switch_properties.md\":\"tFppK_IS\",\"guide_components_radio-group_emits.md\":\"cEDzKVnN\",\"guide_components_collapse_index.md\":\"N9Iu5-2v\",\"guide_components_image_emits.md\":\"lmlz2xJd\",\"guide_components_callout_index.md\":\"D9RU33w6\",\"guide_components_pivot_index.md\":\"B_vwQL-5\",\"guide_components_command-bar_index.md\":\"Cp4_rrGB\",\"guide_components_pagination_emits.md\":\"Dng86A22\",\"guide_components_button_index.md\":\"7sqT2MQP\",\"guide_components_info-box_properties.md\":\"BI7Nvk-E\",\"guide_components_drop-down_emits.md\":\"BE95TdKW\",\"guide_components_expander_index.md\":\"BKgcUJzQ\",\"guide_components_message-bar_index.md\":\"AEtAWlF8\",\"guide_components_menu-flyout_index.md\":\"Csa7irPj\",\"guide_components_panel_index.md\":\"CsTu0bXo\",\"guide_components_panel_properties.md\":\"BaxoCYKq\",\"guide_components_progress-bar_emits.md\":\"BcwXUpsF\",\"guide_components_progress-bar_properties.md\":\"TxiS9ZMA\",\"guide_components_progress-ring_emits.md\":\"D2Y6hIZ9\",\"guide_components_color-picker_index.md\":\"DCc4ixcU\",\"guide_components_progress-ring_index.md\":\"CPb-ZEPE\",\"guide_components_color-picker_properties.md\":\"wcXK29Vl\",\"guide_components_time-picker_index.md\":\"CQJdRRaG\",\"guide_components_drop-down_properties.md\":\"Bwlkpr1q\",\"guide_components_infinite-scroll-view_index.md\":\"yAuD807x\",\"guide_components_check-box_index.md\":\"FYgdu4oq\",\"guide_components_progress-bar_index.md\":\"D8vHQw5V\",\"guide_components_combo-box_index.md\":\"DTyu3eNd\",\"guide_components_info-box_emits.md\":\"DlEwpkkq\",\"guide_components_drop-down_index.md\":\"BZzJZQWq\",\"guide_components_list-view_index.md\":\"BoYvMzb0\",\"guide_components_verify-box_properties.md\":\"CW6W8fFf\",\"guide_components_verify-box_index.md\":\"DwSB40wR\",\"guide_index.md\":\"Bndlt3sL\",\"guide_components_web-window_index.md\":\"Bxc8vEeI\",\"index.md\":\"MTRqI42u\",\"guide_components_combo-box_properties.md\":\"AWfHzV6x\",\"guide_components_combobox_emits.md\":\"CGB6WLt8\",\"guide_components_combobox_properties.md\":\"Bja0hMou\",\"guide_components_details-list_index.md\":\"CcgOCIyt\",\"guide_components_info-box_index.md\":\"vXh-_DsL\",\"guide_components_combobox_index.md\":\"CsPkY6YB\",\"guide_components_date-picker_index.md\":\"12vmUIup\",\"guide_components_flip-view_emits.md\":\"DCheHjDj\",\"guide_components_panel_emits.md\":\"DG0REDq8\",\"guide_components_breadcrumb_index.md\":\"DyDm7PeP\",\"guide_components_radio-group_properties.md\":\"BnPxoKsQ\",\"guide_components_persona_emits.md\":\"CnsDPKRU\",\"guide_components_pivot_properties.md\":\"BmoLpPi1\",\"guide_components_persona_index.md\":\"DT00jby4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vfluent3\",\"description\":\"A Vue3 component library for Fluent UI\",\"base\":\"/VFluent3/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"VFluent3\",\"footer\":{\"message\":\"MIT Licensed\",\"copyright\":\"Copyright © Creator SN - 2022\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/\"}],\"sidebar\":[{\"text\":\"Basic input\",\"collapsed\":true,\"items\":[{\"text\":\"Button\",\"link\":\"/guide/components/button/\"},{\"text\":\"CheckBox\",\"link\":\"/guide/components/check-box/\"},{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"},{\"text\":\"Combobox\",\"link\":\"/guide/components/combobox/\"},{\"text\":\"DetailsList\",\"link\":\"/guide/components/details-list/\"},{\"text\":\"DropDown\",\"link\":\"/guide/components/drop-down/\"},{\"text\":\"Radio\",\"link\":\"/guide/components/radio/\"},{\"text\":\"RadioGroup\",\"link\":\"/guide/components/radio-group/\"},{\"text\":\"RatingControl\",\"link\":\"/guide/components/rating-control/\"},{\"text\":\"Slider\",\"link\":\"/guide/components/slider/\"},{\"text\":\"ToggleSwitch\",\"link\":\"/guide/components/toggle-switch/\"},{\"text\":\"Tag\",\"link\":\"/guide/components/tag/\"}]},{\"text\":\"Collections\",\"collapsed\":true,\"items\":[{\"text\":\"FlipView\",\"link\":\"/guide/components/flip-view/\"},{\"text\":\"ListView\",\"link\":\"/guide/components/list-view/\"},{\"text\":\"TreeView\",\"link\":\"/guide/components/tree-view/\"}]},{\"text\":\"Date & Time\",\"collapsed\":true,\"items\":[{\"text\":\"CalendarDatePicker\",\"link\":\"/guide/components/calendar-date-picker/\"},{\"text\":\"CalendarView\",\"link\":\"/guide/components/calendar-view/\"},{\"text\":\"DatePicker\",\"link\":\"/guide/components/date-picker/\"},{\"text\":\"TimePicker\",\"link\":\"/guide/components/time-picker/\"}]},{\"text\":\"Dialogs & flyouts\",\"collapsed\":true,\"items\":[{\"text\":\"Callout\",\"link\":\"/guide/components/callout/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Layout\",\"collapsed\":true,\"items\":[{\"text\":\"Collapse\",\"link\":\"/guide/components/collapse/\"},{\"text\":\"Expander\",\"link\":\"/guide/components/expander/\"},{\"text\":\"Drawer\",\"link\":\"/guide/components/drawer/\"},{\"text\":\"Panel\",\"link\":\"/guide/components/panel/\"}]},{\"text\":\"Media\",\"collapsed\":true,\"items\":[{\"text\":\"Image\",\"link\":\"/guide/components/image/\"},{\"text\":\"Img\",\"link\":\"/guide/components/img/\"},{\"text\":\"ImgBox\",\"link\":\"/guide/components/img-box/\"},{\"text\":\"Persona\",\"link\":\"/guide/components/persona/\"}]},{\"text\":\"Menu & toolbars\",\"collapsed\":true,\"items\":[{\"text\":\"CommandBar\",\"link\":\"/guide/components/command-bar/\"},{\"text\":\"MenuFlyout\",\"link\":\"/guide/components/menu-flyout/\"},{\"text\":\"SwipeControl\",\"link\":\"/guide/components/swipe-control/\"}]},{\"text\":\"Navigation\",\"collapsed\":true,\"items\":[{\"text\":\"Breadcrumb\",\"link\":\"/guide/components/breadcrumb/\"},{\"text\":\"NavigationPanel\",\"link\":\"/guide/components/navigation-panel/\"},{\"text\":\"NavigationView\",\"link\":\"/guide/components/navigation-view/\"},{\"text\":\"Pivot\",\"link\":\"/guide/components/pivot/\"},{\"text\":\"Pagination\",\"link\":\"/guide/components/pagination/\"}]},{\"text\":\"Scrolling\",\"collapsed\":true,\"items\":[{\"text\":\"InfiniteScrollView\",\"link\":\"/guide/components/infinite-scroll-view/\"},{\"text\":\"ScrollStory\",\"link\":\"/guide/components/scroll-story/\"}]},{\"text\":\"Status & info\",\"collapsed\":true,\"items\":[{\"text\":\"Badge\",\"link\":\"/guide/components/badge/\"},{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"ProgressBar\",\"link\":\"/guide/components/progress-bar/\"},{\"text\":\"ProgressRing\",\"link\":\"/guide/components/progress-ring/\"}]},{\"text\":\"Styles\",\"collapsed\":true,\"items\":[{\"text\":\"AnimatedIcon\",\"link\":\"/guide/components/animated-icon/\"},{\"text\":\"IconElement\",\"link\":\"/guide/components/icon-element/\"},{\"text\":\"RevealContainer\",\"link\":\"/guide/components/reveal-container/\"},{\"text\":\"Shimmer\",\"link\":\"/guide/components/shimmer/\"}]},{\"text\":\"Text\",\"collapsed\":true,\"items\":[{\"text\":\"SearchBox\",\"link\":\"/guide/components/search-box/\"},{\"text\":\"TextBox\",\"link\":\"/guide/components/text-box/\"},{\"text\":\"TextField\",\"link\":\"/guide/components/text-field/\"},{\"text\":\"VerifyBox\",\"link\":\"/guide/components/verify-box/\"}]},{\"text\":\"Windowing\",\"collapsed\":true,\"items\":[{\"text\":\"WebWindow\",\"link\":\"/guide/components/web-window/\"}]},{\"text\":\"Global\",\"collapsed\":true,\"items\":[{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Advance\",\"collapsed\":true,\"items\":[{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git a/guide/components/drop-down/emits.html b/guide/components/drop-down/emits.html
new file mode 100644
index 0000000..1c1f06b
--- /dev/null
+++ b/guide/components/drop-down/emits.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>vfluent3</title>
+    <meta name="description" content="A Vue3 component library for Fluent UI">
+    <meta name="generator" content="VitePress v1.0.0-rc.45">
+    <link rel="preload stylesheet" href="/VFluent3/assets/style.BabQegKX.css" as="style">
+    
+    <script type="module" src="/VFluent3/assets/app.CSutcJ2E.js"></script>
+    <link rel="preload" href="/VFluent3/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/framework.DvIFzl91.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/theme.CgqFBnN_.js">
+    <link rel="modulepreload" href="/VFluent3/assets/guide_components_drop-down_emits.md.BE95TdKW.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-19c990f1><div class="wrapper" data-v-19c990f1><div class="container" data-v-19c990f1><div class="title" data-v-19c990f1><div class="VPNavBarTitle has-sidebar" data-v-19c990f1 data-v-ab179fa1><a class="title" href="/VFluent3/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>VFluent3</span><!--[--><!--]--></a></div></div><div class="content" data-v-19c990f1><div class="content-body" data-v-19c990f1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-19c990f1><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-19c990f1 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Guide</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-19c990f1 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-19c990f1 data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-19c990f1 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-19c990f1><div class="divider-line" data-v-19c990f1></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-d2ecc192><button data-v-d2ecc192>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-575e6a36><div class="curtain" data-v-575e6a36></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-575e6a36><span class="visually-hidden" id="sidebar-aria-label" data-v-575e6a36> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Basic input</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/button/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/check-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CheckBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/combobox/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Combobox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/details-list/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DetailsList</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drop-down/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DropDown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio-group/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RadioGroup</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/rating-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RatingControl</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/slider/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/toggle-switch/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ToggleSwitch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tag/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Tag</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Collections</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/flip-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>FlipView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/list-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ListView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tree-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TreeView</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Date & Time</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarDatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/time-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TimePicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Dialogs & flyouts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/callout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Callout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Layout</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/collapse/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Collapse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/expander/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Expander</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drawer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Panel</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Media</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/image/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Img</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ImgBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/persona/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Persona</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Menu & toolbars</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/command-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CommandBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/menu-flyout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MenuFlyout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/swipe-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SwipeControl</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Navigation</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/breadcrumb/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationPanel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pivot/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pivot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pagination/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pagination</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Scrolling</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/infinite-scroll-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfiniteScrollView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/scroll-story/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ScrollStory</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Status & info</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/badge/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-ring/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressRing</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Styles</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/animated-icon/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>AnimatedIcon</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/icon-element/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>IconElement</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/reveal-container/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RevealContainer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/shimmer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Shimmer</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Text</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/search-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SearchBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-field/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextField</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/verify-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>VerifyBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Windowing</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/web-window/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>WebWindow</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Global</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Advance</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-935f8a84><div class="content" data-v-935f8a84><div class="outline-marker" data-v-935f8a84></div><div class="outline-title" role="heading" aria-level="2" data-v-935f8a84>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-935f8a84><span class="visually-hidden" id="doc-outline-aria-label" data-v-935f8a84> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-935f8a84 data-v-b933a997><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _VFluent3_guide_components_drop-down_emits" data-v-39a288b8><div><h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-label="Permalink to &quot;Emits&quot;">​</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead></table></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-09de1c0f><!--[--><!--]--><!----><nav class="prev-next" data-v-09de1c0f><div class="pager" data-v-09de1c0f><!----></div><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link next" href="/VFluent3/guide/components/button/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Next page</span><span class="title" data-v-09de1c0f>Button</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>MIT Licensed</p><p class="copyright" data-v-e315a0ad>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_calendar-date-picker_properties.md\":\"DXRjmMG8\",\"guide_components_image_properties.md\":\"DGanRzCb\",\"guide_components_img-box_index.md\":\"DYtggkf_\",\"guide_components_img_emits.md\":\"BlE7jvZQ\",\"guide_components_img_index.md\":\"Bm9FiuU4\",\"guide_components_icon-element_properties.md\":\"8Oakruwc\",\"guide_components_img_properties.md\":\"B42YSocI\",\"guide_components_drawer_index.md\":\"D_vpnCpE\",\"guide_components_verify-box_emits.md\":\"DT17Iazx\",\"guide_components_calendar-date-picker_index.md\":\"BdHjrurh\",\"guide_components_rating-control_index.md\":\"Q9l5Lfrr\",\"guide_components_rating-control_properties.md\":\"DKprnl0i\",\"guide_components_calendar-view_index.md\":\"zdoRYVx1\",\"guide_components_animated-icon_index.md\":\"yZDMzCFe\",\"guide_components_calendar-date-picker_emits.md\":\"D5OkfR8j\",\"guide_components_badge_index.md\":\"Bb4crrJn\",\"guide_components_image_index.md\":\"B7X6cWAZ\",\"guide_components_slider_index.md\":\"C7zZ2d-W\",\"guide_components_radio-group_index.md\":\"CVfh3h5H\",\"guide_components_swipe-control_index.md\":\"DwrDVPc1\",\"guide_components_color-picker_emits.md\":\"BHDXVtBQ\",\"guide_components_radio_index.md\":\"90as5QGp\",\"guide_components_pagination_properties.md\":\"JUAPvcTL\",\"guide_components_persona_properties.md\":\"DUTPhPMp\",\"guide_components_combo-box_emits.md\":\"Dh5R-qEv\",\"guide_components_pivot_emits.md\":\"BTJPgNpy\",\"guide_components_pagination_index.md\":\"CnW2zAht\",\"guide_components_flip-view_properties.md\":\"BqZ4hhgU\",\"guide_components_icon-element_emits.md\":\"D5TXFdTZ\",\"guide_components_flip-view_index.md\":\"DefnDOv6\",\"guide_components_navigation-panel_index.md\":\"6mO__sSK\",\"guide_components_rating-control_emits.md\":\"blvomSeC\",\"guide_components_icon-element_index.md\":\"DQ8K7JNn\",\"guide_components_navigation-view_index.md\":\"4AQRiz1k\",\"guide_components_toggle-switch_emits.md\":\"CLGzrNut\",\"guide_components_toggle-switch_index.md\":\"61en_q9-\",\"guide_components_scroll-story_index.md\":\"Vpgb1HSV\",\"guide_components_reveal-container_index.md\":\"Cut2r4tV\",\"guide_components_search-box_emits.md\":\"-d9sWNNt\",\"guide_components_search-box_properties.md\":\"DEKFfPFw\",\"guide_components_shimmer_emits.md\":\"CTMInlI3\",\"guide_components_tag_index.md\":\"BhhxkcHn\",\"guide_components_search-box_index.md\":\"DgkrY0oY\",\"guide_components_shimmer_index.md\":\"iZlHuTxw\",\"guide_components_shimmer_properties.md\":\"CdkU1o6H\",\"guide_components_tree-view_index.md\":\"CUrwan4q\",\"guide_components_text-field_index.md\":\"CXSimJtj\",\"guide_components_text-box_index.md\":\"C5moAPfB\",\"guide_components_progress-ring_properties.md\":\"Dc08Uiff\",\"guide_components_toggle-switch_properties.md\":\"tFppK_IS\",\"guide_components_radio-group_emits.md\":\"cEDzKVnN\",\"guide_components_collapse_index.md\":\"N9Iu5-2v\",\"guide_components_image_emits.md\":\"lmlz2xJd\",\"guide_components_callout_index.md\":\"D9RU33w6\",\"guide_components_pivot_index.md\":\"B_vwQL-5\",\"guide_components_command-bar_index.md\":\"Cp4_rrGB\",\"guide_components_pagination_emits.md\":\"Dng86A22\",\"guide_components_button_index.md\":\"7sqT2MQP\",\"guide_components_info-box_properties.md\":\"BI7Nvk-E\",\"guide_components_drop-down_emits.md\":\"BE95TdKW\",\"guide_components_expander_index.md\":\"BKgcUJzQ\",\"guide_components_message-bar_index.md\":\"AEtAWlF8\",\"guide_components_menu-flyout_index.md\":\"Csa7irPj\",\"guide_components_panel_index.md\":\"CsTu0bXo\",\"guide_components_panel_properties.md\":\"BaxoCYKq\",\"guide_components_progress-bar_emits.md\":\"BcwXUpsF\",\"guide_components_progress-bar_properties.md\":\"TxiS9ZMA\",\"guide_components_progress-ring_emits.md\":\"D2Y6hIZ9\",\"guide_components_color-picker_index.md\":\"DCc4ixcU\",\"guide_components_progress-ring_index.md\":\"CPb-ZEPE\",\"guide_components_color-picker_properties.md\":\"wcXK29Vl\",\"guide_components_time-picker_index.md\":\"CQJdRRaG\",\"guide_components_drop-down_properties.md\":\"Bwlkpr1q\",\"guide_components_infinite-scroll-view_index.md\":\"yAuD807x\",\"guide_components_check-box_index.md\":\"FYgdu4oq\",\"guide_components_progress-bar_index.md\":\"D8vHQw5V\",\"guide_components_combo-box_index.md\":\"DTyu3eNd\",\"guide_components_info-box_emits.md\":\"DlEwpkkq\",\"guide_components_drop-down_index.md\":\"BZzJZQWq\",\"guide_components_list-view_index.md\":\"BoYvMzb0\",\"guide_components_verify-box_properties.md\":\"CW6W8fFf\",\"guide_components_verify-box_index.md\":\"DwSB40wR\",\"guide_index.md\":\"Bndlt3sL\",\"guide_components_web-window_index.md\":\"Bxc8vEeI\",\"index.md\":\"MTRqI42u\",\"guide_components_combo-box_properties.md\":\"AWfHzV6x\",\"guide_components_combobox_emits.md\":\"CGB6WLt8\",\"guide_components_combobox_properties.md\":\"Bja0hMou\",\"guide_components_details-list_index.md\":\"CcgOCIyt\",\"guide_components_info-box_index.md\":\"vXh-_DsL\",\"guide_components_combobox_index.md\":\"CsPkY6YB\",\"guide_components_date-picker_index.md\":\"12vmUIup\",\"guide_components_flip-view_emits.md\":\"DCheHjDj\",\"guide_components_panel_emits.md\":\"DG0REDq8\",\"guide_components_breadcrumb_index.md\":\"DyDm7PeP\",\"guide_components_radio-group_properties.md\":\"BnPxoKsQ\",\"guide_components_persona_emits.md\":\"CnsDPKRU\",\"guide_components_pivot_properties.md\":\"BmoLpPi1\",\"guide_components_persona_index.md\":\"DT00jby4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vfluent3\",\"description\":\"A Vue3 component library for Fluent UI\",\"base\":\"/VFluent3/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"VFluent3\",\"footer\":{\"message\":\"MIT Licensed\",\"copyright\":\"Copyright © Creator SN - 2022\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/\"}],\"sidebar\":[{\"text\":\"Basic input\",\"collapsed\":true,\"items\":[{\"text\":\"Button\",\"link\":\"/guide/components/button/\"},{\"text\":\"CheckBox\",\"link\":\"/guide/components/check-box/\"},{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"},{\"text\":\"Combobox\",\"link\":\"/guide/components/combobox/\"},{\"text\":\"DetailsList\",\"link\":\"/guide/components/details-list/\"},{\"text\":\"DropDown\",\"link\":\"/guide/components/drop-down/\"},{\"text\":\"Radio\",\"link\":\"/guide/components/radio/\"},{\"text\":\"RadioGroup\",\"link\":\"/guide/components/radio-group/\"},{\"text\":\"RatingControl\",\"link\":\"/guide/components/rating-control/\"},{\"text\":\"Slider\",\"link\":\"/guide/components/slider/\"},{\"text\":\"ToggleSwitch\",\"link\":\"/guide/components/toggle-switch/\"},{\"text\":\"Tag\",\"link\":\"/guide/components/tag/\"}]},{\"text\":\"Collections\",\"collapsed\":true,\"items\":[{\"text\":\"FlipView\",\"link\":\"/guide/components/flip-view/\"},{\"text\":\"ListView\",\"link\":\"/guide/components/list-view/\"},{\"text\":\"TreeView\",\"link\":\"/guide/components/tree-view/\"}]},{\"text\":\"Date & Time\",\"collapsed\":true,\"items\":[{\"text\":\"CalendarDatePicker\",\"link\":\"/guide/components/calendar-date-picker/\"},{\"text\":\"CalendarView\",\"link\":\"/guide/components/calendar-view/\"},{\"text\":\"DatePicker\",\"link\":\"/guide/components/date-picker/\"},{\"text\":\"TimePicker\",\"link\":\"/guide/components/time-picker/\"}]},{\"text\":\"Dialogs & flyouts\",\"collapsed\":true,\"items\":[{\"text\":\"Callout\",\"link\":\"/guide/components/callout/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Layout\",\"collapsed\":true,\"items\":[{\"text\":\"Collapse\",\"link\":\"/guide/components/collapse/\"},{\"text\":\"Expander\",\"link\":\"/guide/components/expander/\"},{\"text\":\"Drawer\",\"link\":\"/guide/components/drawer/\"},{\"text\":\"Panel\",\"link\":\"/guide/components/panel/\"}]},{\"text\":\"Media\",\"collapsed\":true,\"items\":[{\"text\":\"Image\",\"link\":\"/guide/components/image/\"},{\"text\":\"Img\",\"link\":\"/guide/components/img/\"},{\"text\":\"ImgBox\",\"link\":\"/guide/components/img-box/\"},{\"text\":\"Persona\",\"link\":\"/guide/components/persona/\"}]},{\"text\":\"Menu & toolbars\",\"collapsed\":true,\"items\":[{\"text\":\"CommandBar\",\"link\":\"/guide/components/command-bar/\"},{\"text\":\"MenuFlyout\",\"link\":\"/guide/components/menu-flyout/\"},{\"text\":\"SwipeControl\",\"link\":\"/guide/components/swipe-control/\"}]},{\"text\":\"Navigation\",\"collapsed\":true,\"items\":[{\"text\":\"Breadcrumb\",\"link\":\"/guide/components/breadcrumb/\"},{\"text\":\"NavigationPanel\",\"link\":\"/guide/components/navigation-panel/\"},{\"text\":\"NavigationView\",\"link\":\"/guide/components/navigation-view/\"},{\"text\":\"Pivot\",\"link\":\"/guide/components/pivot/\"},{\"text\":\"Pagination\",\"link\":\"/guide/components/pagination/\"}]},{\"text\":\"Scrolling\",\"collapsed\":true,\"items\":[{\"text\":\"InfiniteScrollView\",\"link\":\"/guide/components/infinite-scroll-view/\"},{\"text\":\"ScrollStory\",\"link\":\"/guide/components/scroll-story/\"}]},{\"text\":\"Status & info\",\"collapsed\":true,\"items\":[{\"text\":\"Badge\",\"link\":\"/guide/components/badge/\"},{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"ProgressBar\",\"link\":\"/guide/components/progress-bar/\"},{\"text\":\"ProgressRing\",\"link\":\"/guide/components/progress-ring/\"}]},{\"text\":\"Styles\",\"collapsed\":true,\"items\":[{\"text\":\"AnimatedIcon\",\"link\":\"/guide/components/animated-icon/\"},{\"text\":\"IconElement\",\"link\":\"/guide/components/icon-element/\"},{\"text\":\"RevealContainer\",\"link\":\"/guide/components/reveal-container/\"},{\"text\":\"Shimmer\",\"link\":\"/guide/components/shimmer/\"}]},{\"text\":\"Text\",\"collapsed\":true,\"items\":[{\"text\":\"SearchBox\",\"link\":\"/guide/components/search-box/\"},{\"text\":\"TextBox\",\"link\":\"/guide/components/text-box/\"},{\"text\":\"TextField\",\"link\":\"/guide/components/text-field/\"},{\"text\":\"VerifyBox\",\"link\":\"/guide/components/verify-box/\"}]},{\"text\":\"Windowing\",\"collapsed\":true,\"items\":[{\"text\":\"WebWindow\",\"link\":\"/guide/components/web-window/\"}]},{\"text\":\"Global\",\"collapsed\":true,\"items\":[{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Advance\",\"collapsed\":true,\"items\":[{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git a/guide/components/drop-down/index.html b/guide/components/drop-down/index.html
new file mode 100644
index 0000000..efe7c0a
--- /dev/null
+++ b/guide/components/drop-down/index.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>DropDown | vfluent3</title>
+    <meta name="description" content="A Vue3 component library for Fluent UI">
+    <meta name="generator" content="VitePress v1.0.0-rc.45">
+    <link rel="preload stylesheet" href="/VFluent3/assets/style.BabQegKX.css" as="style">
+    
+    <script type="module" src="/VFluent3/assets/app.CSutcJ2E.js"></script>
+    <link rel="preload" href="/VFluent3/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/framework.DvIFzl91.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/theme.CgqFBnN_.js">
+    <link rel="modulepreload" href="/VFluent3/assets/guide_components_drop-down_index.md.BZzJZQWq.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-19c990f1><div class="wrapper" data-v-19c990f1><div class="container" data-v-19c990f1><div class="title" data-v-19c990f1><div class="VPNavBarTitle has-sidebar" data-v-19c990f1 data-v-ab179fa1><a class="title" href="/VFluent3/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>VFluent3</span><!--[--><!--]--></a></div></div><div class="content" data-v-19c990f1><div class="content-body" data-v-19c990f1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-19c990f1><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-19c990f1 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Guide</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-19c990f1 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-19c990f1 data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-19c990f1 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-19c990f1><div class="divider-line" data-v-19c990f1></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-d2ecc192><button data-v-d2ecc192>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-575e6a36><div class="curtain" data-v-575e6a36></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-575e6a36><span class="visually-hidden" id="sidebar-aria-label" data-v-575e6a36> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible has-active" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Basic input</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/button/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/check-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CheckBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/combobox/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Combobox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/details-list/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DetailsList</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drop-down/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DropDown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio-group/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RadioGroup</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/rating-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RatingControl</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/slider/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/toggle-switch/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ToggleSwitch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tag/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Tag</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Collections</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/flip-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>FlipView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/list-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ListView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tree-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TreeView</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Date & Time</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarDatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/time-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TimePicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Dialogs & flyouts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/callout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Callout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Layout</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/collapse/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Collapse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/expander/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Expander</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drawer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Panel</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Media</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/image/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Img</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ImgBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/persona/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Persona</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Menu & toolbars</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/command-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CommandBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/menu-flyout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MenuFlyout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/swipe-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SwipeControl</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Navigation</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/breadcrumb/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationPanel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pivot/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pivot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pagination/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pagination</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Scrolling</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/infinite-scroll-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfiniteScrollView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/scroll-story/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ScrollStory</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Status & info</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/badge/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-ring/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressRing</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Styles</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/animated-icon/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>AnimatedIcon</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/icon-element/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>IconElement</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/reveal-container/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RevealContainer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/shimmer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Shimmer</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Text</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/search-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SearchBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-field/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextField</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/verify-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>VerifyBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Windowing</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/web-window/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>WebWindow</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Global</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Advance</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-935f8a84><div class="content" data-v-935f8a84><div class="outline-marker" data-v-935f8a84></div><div class="outline-title" role="heading" aria-level="2" data-v-935f8a84>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-935f8a84><span class="visually-hidden" id="doc-outline-aria-label" data-v-935f8a84> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-935f8a84 data-v-b933a997><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _VFluent3_guide_components_drop-down_" data-v-39a288b8><div><h3 id="dropdown-demo" tabindex="-1">DropDown-DEMO <a class="header-anchor" href="#dropdown-demo" aria-label="Permalink to &quot;DropDown-DEMO&quot;">​</a></h3><hr><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-DropDown</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">value</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">options</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">options</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Select an option&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-DropDown</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="dropdown-disabled" tabindex="-1">DropDown-Disabled <a class="header-anchor" href="#dropdown-disabled" aria-label="Permalink to &quot;DropDown-Disabled&quot;">​</a></h3><hr><ol><li>Set Disabled</li></ol><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-DropDown</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">value</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">options</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">options</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Select an option&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> disabled</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-DropDown</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><ol start="2"><li>DropDown without options</li></ol><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-DropDown</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Select an option&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-DropDown</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="dropdown-multiple-select" tabindex="-1">DropDown-Multiple Select <a class="header-anchor" href="#dropdown-multiple-select" aria-label="Permalink to &quot;DropDown-Multiple Select&quot;">​</a></h3><hr><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-DropDown</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">options</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">options</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Select options&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">multiple</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-DropDown</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="dropdown-customize" tabindex="-1">DropDown-Customize <a class="header-anchor" href="#dropdown-customize" aria-label="Permalink to &quot;DropDown-Customize&quot;">​</a></h3><hr><ol><li>Custom List Item</li></ol><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-DropDown</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">options</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">options</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Select an option&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;template v-slot:options=&quot;item&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;p&gt;{{item.index}}&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-DropDown</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><ol start="2"><li>Custom Style</li></ol><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-DropDown</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">options</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">options</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Select options&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">multiple</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> borderWidth</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;1&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> borderRadius</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;5&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> inputBackground</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rgba(0,204,153,0.9)&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> checkBoxBackground</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rgba(0, 204, 153, 0.9)&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> inputForeground</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;whitesmoke&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> dropDownIcon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;AddTo&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> dropDownIconForeground</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;whitesmoke&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> dropDownListForeground</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rgba(0,204,153,1)&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> dropDownListBackground</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rgba(239,239,239,0.6)&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-DropDown</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><ol start="3"><li>Custom Drop Down Input</li></ol><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-DropDown</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">options</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">options</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Select options&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">multiple</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;template v-slot:input=&quot;x&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;i class=&quot;ms-Icon ms-Icon--Dynamics365Logo left-icon&quot;&gt;&lt;/i&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;input class=&quot;input&quot; :placeholder=&quot;x.placeholder&quot; :value=&quot;x.value&quot; style=&quot;padding-left: 36px; border: none;&quot;/&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;i class=&quot;ms-Icon ms-Icon--DelveAnalyticsLogo right-icon&quot;&gt;&lt;/i&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-DropDown</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><ol start="3"><li>Custom Drop Down Carrier</li></ol><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-DropDown</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">options</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">options</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Select options&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">multiple</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">z-index</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">12</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;template v-slot:drop-carrier=&quot;x&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;fv-button :theme=&quot;x.theme&quot; :isBoxShadow=&quot;true&quot; style=&quot;width: 150px;&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            &lt;p&gt;DropDown&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            &lt;i class=&quot;ms-Icon ms-Icon--ChevronDown&quot; style=&quot;margin-left: 8px;&quot;&gt;&lt;/i&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;/fv-button&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-DropDown</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h3 id="dropdown-show-error" tabindex="-1">DropDown-Show Error <a class="header-anchor" href="#dropdown-show-error" aria-label="Permalink to &quot;DropDown-Show Error&quot;">​</a></h3><hr><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-DropDown</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">options</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">options</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Select an option&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">showError</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-DropDown</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="dropdown-dark-theme" tabindex="-1">DropDown-Dark Theme <a class="header-anchor" href="#dropdown-dark-theme" aria-label="Permalink to &quot;DropDown-Dark Theme&quot;">​</a></h3><hr><ol><li>Single Selection</li></ol><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-DropDown</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">options</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">options</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Select an option&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;dark&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-DropDown</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><ol start="2"><li>Multiple Selections</li></ol><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-DropDown</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">options</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">options</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Select an option&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;dark&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">multiple</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-DropDown</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">value</td><td style="text-align:center;">Array</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">Choosen Value</td></tr><tr><td style="text-align:center;">options</td><td style="text-align:center;">Array</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">Dropdown options array</td></tr><tr><td style="text-align:center;">multiple</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">Is enable multiple select</td></tr><tr><td style="text-align:center;">borderWidth</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">2</td><td style="text-align:center;">Dropdown border width</td></tr><tr><td style="text-align:center;">borderRadius</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">6</td><td style="text-align:center;">Dropdown border radius</td></tr><tr><td style="text-align:center;">placeholder</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">Dropdown</td><td style="text-align:center;">Dropdown placeholder</td></tr><tr><td style="text-align:center;">maxHeight</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">Dropdown list max height</td></tr><tr><td style="text-align:center;">checkBoxBackground</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">CheckBox Background when Multiple</td></tr><tr><td style="text-align:center;">inputForeground</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">inputBorderColor</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">dropDownListForeground</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">rgba(0,120,215,0.9)</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">inputBackground</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">dropDownListBackground</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">dropDownIcon</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">ChevronDown</td><td style="text-align:center;">Icon with Fabric-Icon</td></tr><tr><td style="text-align:center;">dropDownIconForeground</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">revealBorderColor</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">revealBackgroundColor</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">showError</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">errorMessage</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">This dropdown has an error</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">setFocus</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">Whether Dropdown list show</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">system</td><td style="text-align:center;">主题样式, 包含<code>light</code>, <code>dark</code>, <code>system</code>, <code>custom</code>几种样式</td></tr></tbody></table><h3 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to &quot;Events&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">事件名(Name)</th><th style="text-align:center;">参数类型(args)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">change</td><td style="text-align:center;">value</td><td style="text-align:center;">Dropdown choose item</td></tr><tr><td style="text-align:center;">visible-change</td><td style="text-align:center;">visible</td><td style="text-align:center;">Dropdown list show or hidden</td></tr></tbody></table><h3 id="slot" tabindex="-1">Slot <a class="header-anchor" href="#slot" aria-label="Permalink to &quot;Slot&quot;">​</a></h3><hr><ol><li>Input</li></ol><ul><li>placeholder: 当前选中内容</li><li>value: 当前Placeholder</li></ul><div class="language-javascript vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">input</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;x&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">i</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ms-Icon ms-Icon--Dynamics365Logo left-icon&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">i</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">input</span><span style="--shiki-light:#B31D28;--shiki-dark:#FDAEB7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> :placeholder=&quot;x.placeholder&quot;</span><span style="--shiki-light:#B31D28;--shiki-dark:#FDAEB7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> :value=&quot;x.value&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;padding-left: 36px;&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">/&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">i</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ms-Icon ms-Icon--DelveAnalyticsLogo right-icon&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">i</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><ol start="2"><li>Options</li></ol><ul><li>option: 当前项内容</li><li>index: 当前项索引</li><li>valueTrigger: 支持函数式驱动的值函数</li></ul><div class="language-javascript vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">options</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;x&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;{{x.item.index}}&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ol start="3"><li>Drop Carrier</li></ol><ul><li>value: 当前选中内容</li><li>placeholoder: 当前Placeholder</li><li>theme: 当前主题</li></ul><div class="language-javascript vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">drop-carrier</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;x&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;DropDown&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="data" tabindex="-1">Data <a class="header-anchor" href="#data" aria-label="Permalink to &quot;Data&quot;">​</a></h3><hr><ol><li>options</li></ol><div class="language-javascript vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">options </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [{key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, disabled: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, choosen: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}]</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">//e.g.//</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">options</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: [</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;fruitsHeader&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Fruits&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;header&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;apple&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Apple&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;banana&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Banana&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;orange&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Orange&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, disabled: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;grape&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Grape&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;divider_1&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;-&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;divider&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;vegetablesHeader&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Vegetables&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;header&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;broccoli&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Broccoli&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;carrot&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Carrot&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;lettuce&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Lettuce&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><p><strong>特别地</strong> 0.1.62版本后支持采用函数式字段, 其中支持的字段包括<code>text</code>, <code>disabled</code>, <code>type</code></p></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-09de1c0f><!--[--><!--]--><!----><nav class="prev-next" data-v-09de1c0f><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link prev" href="/VFluent3/guide/components/details-list/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Previous page</span><span class="title" data-v-09de1c0f>DetailsList</span><!--]--></a></div><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link next" href="/VFluent3/guide/components/radio/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Next page</span><span class="title" data-v-09de1c0f>Radio</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>MIT Licensed</p><p class="copyright" data-v-e315a0ad>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_calendar-date-picker_properties.md\":\"DXRjmMG8\",\"guide_components_image_properties.md\":\"DGanRzCb\",\"guide_components_img-box_index.md\":\"DYtggkf_\",\"guide_components_img_emits.md\":\"BlE7jvZQ\",\"guide_components_img_index.md\":\"Bm9FiuU4\",\"guide_components_icon-element_properties.md\":\"8Oakruwc\",\"guide_components_img_properties.md\":\"B42YSocI\",\"guide_components_drawer_index.md\":\"D_vpnCpE\",\"guide_components_verify-box_emits.md\":\"DT17Iazx\",\"guide_components_calendar-date-picker_index.md\":\"BdHjrurh\",\"guide_components_rating-control_index.md\":\"Q9l5Lfrr\",\"guide_components_rating-control_properties.md\":\"DKprnl0i\",\"guide_components_calendar-view_index.md\":\"zdoRYVx1\",\"guide_components_animated-icon_index.md\":\"yZDMzCFe\",\"guide_components_calendar-date-picker_emits.md\":\"D5OkfR8j\",\"guide_components_badge_index.md\":\"Bb4crrJn\",\"guide_components_image_index.md\":\"B7X6cWAZ\",\"guide_components_slider_index.md\":\"C7zZ2d-W\",\"guide_components_radio-group_index.md\":\"CVfh3h5H\",\"guide_components_swipe-control_index.md\":\"DwrDVPc1\",\"guide_components_color-picker_emits.md\":\"BHDXVtBQ\",\"guide_components_radio_index.md\":\"90as5QGp\",\"guide_components_pagination_properties.md\":\"JUAPvcTL\",\"guide_components_persona_properties.md\":\"DUTPhPMp\",\"guide_components_combo-box_emits.md\":\"Dh5R-qEv\",\"guide_components_pivot_emits.md\":\"BTJPgNpy\",\"guide_components_pagination_index.md\":\"CnW2zAht\",\"guide_components_flip-view_properties.md\":\"BqZ4hhgU\",\"guide_components_icon-element_emits.md\":\"D5TXFdTZ\",\"guide_components_flip-view_index.md\":\"DefnDOv6\",\"guide_components_navigation-panel_index.md\":\"6mO__sSK\",\"guide_components_rating-control_emits.md\":\"blvomSeC\",\"guide_components_icon-element_index.md\":\"DQ8K7JNn\",\"guide_components_navigation-view_index.md\":\"4AQRiz1k\",\"guide_components_toggle-switch_emits.md\":\"CLGzrNut\",\"guide_components_toggle-switch_index.md\":\"61en_q9-\",\"guide_components_scroll-story_index.md\":\"Vpgb1HSV\",\"guide_components_reveal-container_index.md\":\"Cut2r4tV\",\"guide_components_search-box_emits.md\":\"-d9sWNNt\",\"guide_components_search-box_properties.md\":\"DEKFfPFw\",\"guide_components_shimmer_emits.md\":\"CTMInlI3\",\"guide_components_tag_index.md\":\"BhhxkcHn\",\"guide_components_search-box_index.md\":\"DgkrY0oY\",\"guide_components_shimmer_index.md\":\"iZlHuTxw\",\"guide_components_shimmer_properties.md\":\"CdkU1o6H\",\"guide_components_tree-view_index.md\":\"CUrwan4q\",\"guide_components_text-field_index.md\":\"CXSimJtj\",\"guide_components_text-box_index.md\":\"C5moAPfB\",\"guide_components_progress-ring_properties.md\":\"Dc08Uiff\",\"guide_components_toggle-switch_properties.md\":\"tFppK_IS\",\"guide_components_radio-group_emits.md\":\"cEDzKVnN\",\"guide_components_collapse_index.md\":\"N9Iu5-2v\",\"guide_components_image_emits.md\":\"lmlz2xJd\",\"guide_components_callout_index.md\":\"D9RU33w6\",\"guide_components_pivot_index.md\":\"B_vwQL-5\",\"guide_components_command-bar_index.md\":\"Cp4_rrGB\",\"guide_components_pagination_emits.md\":\"Dng86A22\",\"guide_components_button_index.md\":\"7sqT2MQP\",\"guide_components_info-box_properties.md\":\"BI7Nvk-E\",\"guide_components_drop-down_emits.md\":\"BE95TdKW\",\"guide_components_expander_index.md\":\"BKgcUJzQ\",\"guide_components_message-bar_index.md\":\"AEtAWlF8\",\"guide_components_menu-flyout_index.md\":\"Csa7irPj\",\"guide_components_panel_index.md\":\"CsTu0bXo\",\"guide_components_panel_properties.md\":\"BaxoCYKq\",\"guide_components_progress-bar_emits.md\":\"BcwXUpsF\",\"guide_components_progress-bar_properties.md\":\"TxiS9ZMA\",\"guide_components_progress-ring_emits.md\":\"D2Y6hIZ9\",\"guide_components_color-picker_index.md\":\"DCc4ixcU\",\"guide_components_progress-ring_index.md\":\"CPb-ZEPE\",\"guide_components_color-picker_properties.md\":\"wcXK29Vl\",\"guide_components_time-picker_index.md\":\"CQJdRRaG\",\"guide_components_drop-down_properties.md\":\"Bwlkpr1q\",\"guide_components_infinite-scroll-view_index.md\":\"yAuD807x\",\"guide_components_check-box_index.md\":\"FYgdu4oq\",\"guide_components_progress-bar_index.md\":\"D8vHQw5V\",\"guide_components_combo-box_index.md\":\"DTyu3eNd\",\"guide_components_info-box_emits.md\":\"DlEwpkkq\",\"guide_components_drop-down_index.md\":\"BZzJZQWq\",\"guide_components_list-view_index.md\":\"BoYvMzb0\",\"guide_components_verify-box_properties.md\":\"CW6W8fFf\",\"guide_components_verify-box_index.md\":\"DwSB40wR\",\"guide_index.md\":\"Bndlt3sL\",\"guide_components_web-window_index.md\":\"Bxc8vEeI\",\"index.md\":\"MTRqI42u\",\"guide_components_combo-box_properties.md\":\"AWfHzV6x\",\"guide_components_combobox_emits.md\":\"CGB6WLt8\",\"guide_components_combobox_properties.md\":\"Bja0hMou\",\"guide_components_details-list_index.md\":\"CcgOCIyt\",\"guide_components_info-box_index.md\":\"vXh-_DsL\",\"guide_components_combobox_index.md\":\"CsPkY6YB\",\"guide_components_date-picker_index.md\":\"12vmUIup\",\"guide_components_flip-view_emits.md\":\"DCheHjDj\",\"guide_components_panel_emits.md\":\"DG0REDq8\",\"guide_components_breadcrumb_index.md\":\"DyDm7PeP\",\"guide_components_radio-group_properties.md\":\"BnPxoKsQ\",\"guide_components_persona_emits.md\":\"CnsDPKRU\",\"guide_components_pivot_properties.md\":\"BmoLpPi1\",\"guide_components_persona_index.md\":\"DT00jby4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vfluent3\",\"description\":\"A Vue3 component library for Fluent UI\",\"base\":\"/VFluent3/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"VFluent3\",\"footer\":{\"message\":\"MIT Licensed\",\"copyright\":\"Copyright © Creator SN - 2022\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/\"}],\"sidebar\":[{\"text\":\"Basic input\",\"collapsed\":true,\"items\":[{\"text\":\"Button\",\"link\":\"/guide/components/button/\"},{\"text\":\"CheckBox\",\"link\":\"/guide/components/check-box/\"},{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"},{\"text\":\"Combobox\",\"link\":\"/guide/components/combobox/\"},{\"text\":\"DetailsList\",\"link\":\"/guide/components/details-list/\"},{\"text\":\"DropDown\",\"link\":\"/guide/components/drop-down/\"},{\"text\":\"Radio\",\"link\":\"/guide/components/radio/\"},{\"text\":\"RadioGroup\",\"link\":\"/guide/components/radio-group/\"},{\"text\":\"RatingControl\",\"link\":\"/guide/components/rating-control/\"},{\"text\":\"Slider\",\"link\":\"/guide/components/slider/\"},{\"text\":\"ToggleSwitch\",\"link\":\"/guide/components/toggle-switch/\"},{\"text\":\"Tag\",\"link\":\"/guide/components/tag/\"}]},{\"text\":\"Collections\",\"collapsed\":true,\"items\":[{\"text\":\"FlipView\",\"link\":\"/guide/components/flip-view/\"},{\"text\":\"ListView\",\"link\":\"/guide/components/list-view/\"},{\"text\":\"TreeView\",\"link\":\"/guide/components/tree-view/\"}]},{\"text\":\"Date & Time\",\"collapsed\":true,\"items\":[{\"text\":\"CalendarDatePicker\",\"link\":\"/guide/components/calendar-date-picker/\"},{\"text\":\"CalendarView\",\"link\":\"/guide/components/calendar-view/\"},{\"text\":\"DatePicker\",\"link\":\"/guide/components/date-picker/\"},{\"text\":\"TimePicker\",\"link\":\"/guide/components/time-picker/\"}]},{\"text\":\"Dialogs & flyouts\",\"collapsed\":true,\"items\":[{\"text\":\"Callout\",\"link\":\"/guide/components/callout/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Layout\",\"collapsed\":true,\"items\":[{\"text\":\"Collapse\",\"link\":\"/guide/components/collapse/\"},{\"text\":\"Expander\",\"link\":\"/guide/components/expander/\"},{\"text\":\"Drawer\",\"link\":\"/guide/components/drawer/\"},{\"text\":\"Panel\",\"link\":\"/guide/components/panel/\"}]},{\"text\":\"Media\",\"collapsed\":true,\"items\":[{\"text\":\"Image\",\"link\":\"/guide/components/image/\"},{\"text\":\"Img\",\"link\":\"/guide/components/img/\"},{\"text\":\"ImgBox\",\"link\":\"/guide/components/img-box/\"},{\"text\":\"Persona\",\"link\":\"/guide/components/persona/\"}]},{\"text\":\"Menu & toolbars\",\"collapsed\":true,\"items\":[{\"text\":\"CommandBar\",\"link\":\"/guide/components/command-bar/\"},{\"text\":\"MenuFlyout\",\"link\":\"/guide/components/menu-flyout/\"},{\"text\":\"SwipeControl\",\"link\":\"/guide/components/swipe-control/\"}]},{\"text\":\"Navigation\",\"collapsed\":true,\"items\":[{\"text\":\"Breadcrumb\",\"link\":\"/guide/components/breadcrumb/\"},{\"text\":\"NavigationPanel\",\"link\":\"/guide/components/navigation-panel/\"},{\"text\":\"NavigationView\",\"link\":\"/guide/components/navigation-view/\"},{\"text\":\"Pivot\",\"link\":\"/guide/components/pivot/\"},{\"text\":\"Pagination\",\"link\":\"/guide/components/pagination/\"}]},{\"text\":\"Scrolling\",\"collapsed\":true,\"items\":[{\"text\":\"InfiniteScrollView\",\"link\":\"/guide/components/infinite-scroll-view/\"},{\"text\":\"ScrollStory\",\"link\":\"/guide/components/scroll-story/\"}]},{\"text\":\"Status & info\",\"collapsed\":true,\"items\":[{\"text\":\"Badge\",\"link\":\"/guide/components/badge/\"},{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"ProgressBar\",\"link\":\"/guide/components/progress-bar/\"},{\"text\":\"ProgressRing\",\"link\":\"/guide/components/progress-ring/\"}]},{\"text\":\"Styles\",\"collapsed\":true,\"items\":[{\"text\":\"AnimatedIcon\",\"link\":\"/guide/components/animated-icon/\"},{\"text\":\"IconElement\",\"link\":\"/guide/components/icon-element/\"},{\"text\":\"RevealContainer\",\"link\":\"/guide/components/reveal-container/\"},{\"text\":\"Shimmer\",\"link\":\"/guide/components/shimmer/\"}]},{\"text\":\"Text\",\"collapsed\":true,\"items\":[{\"text\":\"SearchBox\",\"link\":\"/guide/components/search-box/\"},{\"text\":\"TextBox\",\"link\":\"/guide/components/text-box/\"},{\"text\":\"TextField\",\"link\":\"/guide/components/text-field/\"},{\"text\":\"VerifyBox\",\"link\":\"/guide/components/verify-box/\"}]},{\"text\":\"Windowing\",\"collapsed\":true,\"items\":[{\"text\":\"WebWindow\",\"link\":\"/guide/components/web-window/\"}]},{\"text\":\"Global\",\"collapsed\":true,\"items\":[{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Advance\",\"collapsed\":true,\"items\":[{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git a/guide/components/drop-down/properties.html b/guide/components/drop-down/properties.html
new file mode 100644
index 0000000..4369eac
--- /dev/null
+++ b/guide/components/drop-down/properties.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>vfluent3</title>
+    <meta name="description" content="A Vue3 component library for Fluent UI">
+    <meta name="generator" content="VitePress v1.0.0-rc.45">
+    <link rel="preload stylesheet" href="/VFluent3/assets/style.BabQegKX.css" as="style">
+    
+    <script type="module" src="/VFluent3/assets/app.CSutcJ2E.js"></script>
+    <link rel="preload" href="/VFluent3/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/framework.DvIFzl91.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/theme.CgqFBnN_.js">
+    <link rel="modulepreload" href="/VFluent3/assets/guide_components_drop-down_properties.md.Bwlkpr1q.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-19c990f1><div class="wrapper" data-v-19c990f1><div class="container" data-v-19c990f1><div class="title" data-v-19c990f1><div class="VPNavBarTitle has-sidebar" data-v-19c990f1 data-v-ab179fa1><a class="title" href="/VFluent3/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>VFluent3</span><!--[--><!--]--></a></div></div><div class="content" data-v-19c990f1><div class="content-body" data-v-19c990f1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-19c990f1><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-19c990f1 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Guide</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-19c990f1 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-19c990f1 data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-19c990f1 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-19c990f1><div class="divider-line" data-v-19c990f1></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-d2ecc192><button data-v-d2ecc192>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-575e6a36><div class="curtain" data-v-575e6a36></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-575e6a36><span class="visually-hidden" id="sidebar-aria-label" data-v-575e6a36> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Basic input</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/button/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/check-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CheckBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/combobox/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Combobox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/details-list/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DetailsList</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drop-down/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DropDown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio-group/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RadioGroup</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/rating-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RatingControl</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/slider/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/toggle-switch/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ToggleSwitch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tag/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Tag</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Collections</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/flip-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>FlipView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/list-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ListView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tree-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TreeView</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Date & Time</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarDatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/time-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TimePicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Dialogs & flyouts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/callout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Callout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Layout</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/collapse/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Collapse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/expander/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Expander</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drawer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Panel</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Media</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/image/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Img</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ImgBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/persona/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Persona</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Menu & toolbars</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/command-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CommandBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/menu-flyout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MenuFlyout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/swipe-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SwipeControl</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Navigation</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/breadcrumb/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationPanel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pivot/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pivot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pagination/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pagination</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Scrolling</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/infinite-scroll-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfiniteScrollView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/scroll-story/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ScrollStory</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Status & info</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/badge/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-ring/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressRing</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Styles</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/animated-icon/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>AnimatedIcon</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/icon-element/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>IconElement</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/reveal-container/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RevealContainer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/shimmer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Shimmer</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Text</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/search-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SearchBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-field/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextField</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/verify-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>VerifyBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Windowing</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/web-window/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>WebWindow</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Global</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Advance</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-935f8a84><div class="content" data-v-935f8a84><div class="outline-marker" data-v-935f8a84></div><div class="outline-title" role="heading" aria-level="2" data-v-935f8a84>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-935f8a84><span class="visually-hidden" id="doc-outline-aria-label" data-v-935f8a84> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-935f8a84 data-v-b933a997><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _VFluent3_guide_components_drop-down_properties" data-v-39a288b8><div><h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-label="Permalink to &quot;Properties&quot;">​</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead></table></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-09de1c0f><!--[--><!--]--><!----><nav class="prev-next" data-v-09de1c0f><div class="pager" data-v-09de1c0f><!----></div><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link next" href="/VFluent3/guide/components/button/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Next page</span><span class="title" data-v-09de1c0f>Button</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>MIT Licensed</p><p class="copyright" data-v-e315a0ad>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_calendar-date-picker_properties.md\":\"DXRjmMG8\",\"guide_components_image_properties.md\":\"DGanRzCb\",\"guide_components_img-box_index.md\":\"DYtggkf_\",\"guide_components_img_emits.md\":\"BlE7jvZQ\",\"guide_components_img_index.md\":\"Bm9FiuU4\",\"guide_components_icon-element_properties.md\":\"8Oakruwc\",\"guide_components_img_properties.md\":\"B42YSocI\",\"guide_components_drawer_index.md\":\"D_vpnCpE\",\"guide_components_verify-box_emits.md\":\"DT17Iazx\",\"guide_components_calendar-date-picker_index.md\":\"BdHjrurh\",\"guide_components_rating-control_index.md\":\"Q9l5Lfrr\",\"guide_components_rating-control_properties.md\":\"DKprnl0i\",\"guide_components_calendar-view_index.md\":\"zdoRYVx1\",\"guide_components_animated-icon_index.md\":\"yZDMzCFe\",\"guide_components_calendar-date-picker_emits.md\":\"D5OkfR8j\",\"guide_components_badge_index.md\":\"Bb4crrJn\",\"guide_components_image_index.md\":\"B7X6cWAZ\",\"guide_components_slider_index.md\":\"C7zZ2d-W\",\"guide_components_radio-group_index.md\":\"CVfh3h5H\",\"guide_components_swipe-control_index.md\":\"DwrDVPc1\",\"guide_components_color-picker_emits.md\":\"BHDXVtBQ\",\"guide_components_radio_index.md\":\"90as5QGp\",\"guide_components_pagination_properties.md\":\"JUAPvcTL\",\"guide_components_persona_properties.md\":\"DUTPhPMp\",\"guide_components_combo-box_emits.md\":\"Dh5R-qEv\",\"guide_components_pivot_emits.md\":\"BTJPgNpy\",\"guide_components_pagination_index.md\":\"CnW2zAht\",\"guide_components_flip-view_properties.md\":\"BqZ4hhgU\",\"guide_components_icon-element_emits.md\":\"D5TXFdTZ\",\"guide_components_flip-view_index.md\":\"DefnDOv6\",\"guide_components_navigation-panel_index.md\":\"6mO__sSK\",\"guide_components_rating-control_emits.md\":\"blvomSeC\",\"guide_components_icon-element_index.md\":\"DQ8K7JNn\",\"guide_components_navigation-view_index.md\":\"4AQRiz1k\",\"guide_components_toggle-switch_emits.md\":\"CLGzrNut\",\"guide_components_toggle-switch_index.md\":\"61en_q9-\",\"guide_components_scroll-story_index.md\":\"Vpgb1HSV\",\"guide_components_reveal-container_index.md\":\"Cut2r4tV\",\"guide_components_search-box_emits.md\":\"-d9sWNNt\",\"guide_components_search-box_properties.md\":\"DEKFfPFw\",\"guide_components_shimmer_emits.md\":\"CTMInlI3\",\"guide_components_tag_index.md\":\"BhhxkcHn\",\"guide_components_search-box_index.md\":\"DgkrY0oY\",\"guide_components_shimmer_index.md\":\"iZlHuTxw\",\"guide_components_shimmer_properties.md\":\"CdkU1o6H\",\"guide_components_tree-view_index.md\":\"CUrwan4q\",\"guide_components_text-field_index.md\":\"CXSimJtj\",\"guide_components_text-box_index.md\":\"C5moAPfB\",\"guide_components_progress-ring_properties.md\":\"Dc08Uiff\",\"guide_components_toggle-switch_properties.md\":\"tFppK_IS\",\"guide_components_radio-group_emits.md\":\"cEDzKVnN\",\"guide_components_collapse_index.md\":\"N9Iu5-2v\",\"guide_components_image_emits.md\":\"lmlz2xJd\",\"guide_components_callout_index.md\":\"D9RU33w6\",\"guide_components_pivot_index.md\":\"B_vwQL-5\",\"guide_components_command-bar_index.md\":\"Cp4_rrGB\",\"guide_components_pagination_emits.md\":\"Dng86A22\",\"guide_components_button_index.md\":\"7sqT2MQP\",\"guide_components_info-box_properties.md\":\"BI7Nvk-E\",\"guide_components_drop-down_emits.md\":\"BE95TdKW\",\"guide_components_expander_index.md\":\"BKgcUJzQ\",\"guide_components_message-bar_index.md\":\"AEtAWlF8\",\"guide_components_menu-flyout_index.md\":\"Csa7irPj\",\"guide_components_panel_index.md\":\"CsTu0bXo\",\"guide_components_panel_properties.md\":\"BaxoCYKq\",\"guide_components_progress-bar_emits.md\":\"BcwXUpsF\",\"guide_components_progress-bar_properties.md\":\"TxiS9ZMA\",\"guide_components_progress-ring_emits.md\":\"D2Y6hIZ9\",\"guide_components_color-picker_index.md\":\"DCc4ixcU\",\"guide_components_progress-ring_index.md\":\"CPb-ZEPE\",\"guide_components_color-picker_properties.md\":\"wcXK29Vl\",\"guide_components_time-picker_index.md\":\"CQJdRRaG\",\"guide_components_drop-down_properties.md\":\"Bwlkpr1q\",\"guide_components_infinite-scroll-view_index.md\":\"yAuD807x\",\"guide_components_check-box_index.md\":\"FYgdu4oq\",\"guide_components_progress-bar_index.md\":\"D8vHQw5V\",\"guide_components_combo-box_index.md\":\"DTyu3eNd\",\"guide_components_info-box_emits.md\":\"DlEwpkkq\",\"guide_components_drop-down_index.md\":\"BZzJZQWq\",\"guide_components_list-view_index.md\":\"BoYvMzb0\",\"guide_components_verify-box_properties.md\":\"CW6W8fFf\",\"guide_components_verify-box_index.md\":\"DwSB40wR\",\"guide_index.md\":\"Bndlt3sL\",\"guide_components_web-window_index.md\":\"Bxc8vEeI\",\"index.md\":\"MTRqI42u\",\"guide_components_combo-box_properties.md\":\"AWfHzV6x\",\"guide_components_combobox_emits.md\":\"CGB6WLt8\",\"guide_components_combobox_properties.md\":\"Bja0hMou\",\"guide_components_details-list_index.md\":\"CcgOCIyt\",\"guide_components_info-box_index.md\":\"vXh-_DsL\",\"guide_components_combobox_index.md\":\"CsPkY6YB\",\"guide_components_date-picker_index.md\":\"12vmUIup\",\"guide_components_flip-view_emits.md\":\"DCheHjDj\",\"guide_components_panel_emits.md\":\"DG0REDq8\",\"guide_components_breadcrumb_index.md\":\"DyDm7PeP\",\"guide_components_radio-group_properties.md\":\"BnPxoKsQ\",\"guide_components_persona_emits.md\":\"CnsDPKRU\",\"guide_components_pivot_properties.md\":\"BmoLpPi1\",\"guide_components_persona_index.md\":\"DT00jby4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vfluent3\",\"description\":\"A Vue3 component library for Fluent UI\",\"base\":\"/VFluent3/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"VFluent3\",\"footer\":{\"message\":\"MIT Licensed\",\"copyright\":\"Copyright © Creator SN - 2022\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/\"}],\"sidebar\":[{\"text\":\"Basic input\",\"collapsed\":true,\"items\":[{\"text\":\"Button\",\"link\":\"/guide/components/button/\"},{\"text\":\"CheckBox\",\"link\":\"/guide/components/check-box/\"},{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"},{\"text\":\"Combobox\",\"link\":\"/guide/components/combobox/\"},{\"text\":\"DetailsList\",\"link\":\"/guide/components/details-list/\"},{\"text\":\"DropDown\",\"link\":\"/guide/components/drop-down/\"},{\"text\":\"Radio\",\"link\":\"/guide/components/radio/\"},{\"text\":\"RadioGroup\",\"link\":\"/guide/components/radio-group/\"},{\"text\":\"RatingControl\",\"link\":\"/guide/components/rating-control/\"},{\"text\":\"Slider\",\"link\":\"/guide/components/slider/\"},{\"text\":\"ToggleSwitch\",\"link\":\"/guide/components/toggle-switch/\"},{\"text\":\"Tag\",\"link\":\"/guide/components/tag/\"}]},{\"text\":\"Collections\",\"collapsed\":true,\"items\":[{\"text\":\"FlipView\",\"link\":\"/guide/components/flip-view/\"},{\"text\":\"ListView\",\"link\":\"/guide/components/list-view/\"},{\"text\":\"TreeView\",\"link\":\"/guide/components/tree-view/\"}]},{\"text\":\"Date & Time\",\"collapsed\":true,\"items\":[{\"text\":\"CalendarDatePicker\",\"link\":\"/guide/components/calendar-date-picker/\"},{\"text\":\"CalendarView\",\"link\":\"/guide/components/calendar-view/\"},{\"text\":\"DatePicker\",\"link\":\"/guide/components/date-picker/\"},{\"text\":\"TimePicker\",\"link\":\"/guide/components/time-picker/\"}]},{\"text\":\"Dialogs & flyouts\",\"collapsed\":true,\"items\":[{\"text\":\"Callout\",\"link\":\"/guide/components/callout/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Layout\",\"collapsed\":true,\"items\":[{\"text\":\"Collapse\",\"link\":\"/guide/components/collapse/\"},{\"text\":\"Expander\",\"link\":\"/guide/components/expander/\"},{\"text\":\"Drawer\",\"link\":\"/guide/components/drawer/\"},{\"text\":\"Panel\",\"link\":\"/guide/components/panel/\"}]},{\"text\":\"Media\",\"collapsed\":true,\"items\":[{\"text\":\"Image\",\"link\":\"/guide/components/image/\"},{\"text\":\"Img\",\"link\":\"/guide/components/img/\"},{\"text\":\"ImgBox\",\"link\":\"/guide/components/img-box/\"},{\"text\":\"Persona\",\"link\":\"/guide/components/persona/\"}]},{\"text\":\"Menu & toolbars\",\"collapsed\":true,\"items\":[{\"text\":\"CommandBar\",\"link\":\"/guide/components/command-bar/\"},{\"text\":\"MenuFlyout\",\"link\":\"/guide/components/menu-flyout/\"},{\"text\":\"SwipeControl\",\"link\":\"/guide/components/swipe-control/\"}]},{\"text\":\"Navigation\",\"collapsed\":true,\"items\":[{\"text\":\"Breadcrumb\",\"link\":\"/guide/components/breadcrumb/\"},{\"text\":\"NavigationPanel\",\"link\":\"/guide/components/navigation-panel/\"},{\"text\":\"NavigationView\",\"link\":\"/guide/components/navigation-view/\"},{\"text\":\"Pivot\",\"link\":\"/guide/components/pivot/\"},{\"text\":\"Pagination\",\"link\":\"/guide/components/pagination/\"}]},{\"text\":\"Scrolling\",\"collapsed\":true,\"items\":[{\"text\":\"InfiniteScrollView\",\"link\":\"/guide/components/infinite-scroll-view/\"},{\"text\":\"ScrollStory\",\"link\":\"/guide/components/scroll-story/\"}]},{\"text\":\"Status & info\",\"collapsed\":true,\"items\":[{\"text\":\"Badge\",\"link\":\"/guide/components/badge/\"},{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"ProgressBar\",\"link\":\"/guide/components/progress-bar/\"},{\"text\":\"ProgressRing\",\"link\":\"/guide/components/progress-ring/\"}]},{\"text\":\"Styles\",\"collapsed\":true,\"items\":[{\"text\":\"AnimatedIcon\",\"link\":\"/guide/components/animated-icon/\"},{\"text\":\"IconElement\",\"link\":\"/guide/components/icon-element/\"},{\"text\":\"RevealContainer\",\"link\":\"/guide/components/reveal-container/\"},{\"text\":\"Shimmer\",\"link\":\"/guide/components/shimmer/\"}]},{\"text\":\"Text\",\"collapsed\":true,\"items\":[{\"text\":\"SearchBox\",\"link\":\"/guide/components/search-box/\"},{\"text\":\"TextBox\",\"link\":\"/guide/components/text-box/\"},{\"text\":\"TextField\",\"link\":\"/guide/components/text-field/\"},{\"text\":\"VerifyBox\",\"link\":\"/guide/components/verify-box/\"}]},{\"text\":\"Windowing\",\"collapsed\":true,\"items\":[{\"text\":\"WebWindow\",\"link\":\"/guide/components/web-window/\"}]},{\"text\":\"Global\",\"collapsed\":true,\"items\":[{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Advance\",\"collapsed\":true,\"items\":[{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git a/guide/components/expander/index.html b/guide/components/expander/index.html
new file mode 100644
index 0000000..40c2d48
--- /dev/null
+++ b/guide/components/expander/index.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>Expander | vfluent3</title>
+    <meta name="description" content="A Vue3 component library for Fluent UI">
+    <meta name="generator" content="VitePress v1.0.0-rc.45">
+    <link rel="preload stylesheet" href="/VFluent3/assets/style.BabQegKX.css" as="style">
+    
+    <script type="module" src="/VFluent3/assets/app.CSutcJ2E.js"></script>
+    <link rel="preload" href="/VFluent3/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/framework.DvIFzl91.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/theme.CgqFBnN_.js">
+    <link rel="modulepreload" href="/VFluent3/assets/guide_components_expander_index.md.BKgcUJzQ.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-19c990f1><div class="wrapper" data-v-19c990f1><div class="container" data-v-19c990f1><div class="title" data-v-19c990f1><div class="VPNavBarTitle has-sidebar" data-v-19c990f1 data-v-ab179fa1><a class="title" href="/VFluent3/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>VFluent3</span><!--[--><!--]--></a></div></div><div class="content" data-v-19c990f1><div class="content-body" data-v-19c990f1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-19c990f1><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-19c990f1 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Guide</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-19c990f1 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-19c990f1 data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-19c990f1 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-19c990f1><div class="divider-line" data-v-19c990f1></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-d2ecc192><button data-v-d2ecc192>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-575e6a36><div class="curtain" data-v-575e6a36></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-575e6a36><span class="visually-hidden" id="sidebar-aria-label" data-v-575e6a36> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Basic input</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/button/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/check-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CheckBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/combobox/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Combobox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/details-list/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DetailsList</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drop-down/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DropDown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio-group/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RadioGroup</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/rating-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RatingControl</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/slider/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/toggle-switch/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ToggleSwitch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tag/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Tag</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Collections</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/flip-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>FlipView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/list-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ListView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tree-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TreeView</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Date & Time</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarDatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/time-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TimePicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Dialogs & flyouts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/callout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Callout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible has-active" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Layout</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/collapse/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Collapse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/expander/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Expander</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drawer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Panel</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Media</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/image/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Img</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ImgBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/persona/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Persona</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Menu & toolbars</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/command-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CommandBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/menu-flyout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MenuFlyout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/swipe-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SwipeControl</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Navigation</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/breadcrumb/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationPanel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pivot/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pivot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pagination/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pagination</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Scrolling</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/infinite-scroll-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfiniteScrollView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/scroll-story/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ScrollStory</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Status & info</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/badge/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-ring/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressRing</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Styles</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/animated-icon/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>AnimatedIcon</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/icon-element/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>IconElement</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/reveal-container/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RevealContainer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/shimmer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Shimmer</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Text</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/search-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SearchBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-field/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextField</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/verify-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>VerifyBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Windowing</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/web-window/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>WebWindow</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Global</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Advance</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-935f8a84><div class="content" data-v-935f8a84><div class="outline-marker" data-v-935f8a84></div><div class="outline-title" role="heading" aria-level="2" data-v-935f8a84>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-935f8a84><span class="visually-hidden" id="doc-outline-aria-label" data-v-935f8a84> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-935f8a84 data-v-b933a997><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _VFluent3_guide_components_expander_" data-v-39a288b8><div><h3 id="expander-demo" tabindex="-1">Expander-DEMO <a class="header-anchor" href="#expander-demo" aria-label="Permalink to &quot;Expander-DEMO&quot;">​</a></h3><hr><div><!----></div><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Expander</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;div style=&quot;position: relative; height: 500px; background: black; transition: all 0.3s;&quot;&gt;&lt;/div&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Expander</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>Disabled Expander</p><div><!----></div><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Expander</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">disabledExpander</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;div style=&quot;position: relative; height: 500px; background: black; transition: all 0.3s;&quot;&gt;&lt;/div&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Expander</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>Extension</p><div><!----></div><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Expander</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">disabledExpander</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;template v-slot:extension&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;fv-button&gt;Operation&lt;/fv-button&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Expander</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h3 id="expander-customize-background" tabindex="-1">Expander-Customize Background <a class="header-anchor" href="#expander-customize-background" aria-label="Permalink to &quot;Expander-Customize Background&quot;">​</a></h3><hr><div><!----></div><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Expander</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rgba(0, 98, 158, 1)&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;div style=&quot;position: relative; height: 500px; background: black; transition: all 0.3s;&quot;&gt;&lt;/div&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Expander</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="expander-dark-theme" tabindex="-1">Expander-Dark Theme <a class="header-anchor" href="#expander-dark-theme" aria-label="Permalink to &quot;Expander-Dark Theme&quot;">​</a></h3><hr><div><!----></div><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Expander</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;dark&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;div style=&quot;position: relative; height: 500px; background: whitesmoke; transition: all 0.3s;&quot;&gt;&lt;/div&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Expander</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">value</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否展开 <code>Expander</code></td></tr><tr><td style="text-align:center;">icon</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">ExpanderMenu</td><td style="text-align:center;">Icon with Fabric-Icon</td></tr><tr><td style="text-align:center;">title</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">Title of Expander.</td><td style="text-align:center;">标题</td></tr><tr><td style="text-align:center;">content</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">Content information of Expander.</td><td style="text-align:center;">副标题信息</td></tr><tr><td style="text-align:center;">titleBackground</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">客制化 <code>Expander</code> 背景</td></tr><tr><td style="text-align:center;">expandBackground</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">客制化 <code>Expander</code> 背景</td></tr><tr><td style="text-align:center;">defaultHeight</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">70</td><td style="text-align:center;">默认高度</td></tr><tr><td style="text-align:center;">maxHeight</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">300</td><td style="text-align:center;">展开最大高度</td></tr><tr><td style="text-align:center;">disabledExpander</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">禁用展开 <code>Expander</code></td></tr><tr><td style="text-align:center;">visibleOverflow</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">true</td><td style="text-align:center;">在禁用展开 <code>Expander</code> , 允许overflow内容显示</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">system</td><td style="text-align:center;">主题样式, 包含<code>light</code>, <code>dark</code>, <code>system</code>, <code>custom</code>几种样式</td></tr></tbody></table><h3 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to &quot;Events&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">事件名(Name)</th><th style="text-align:center;">参数类型(args)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">item-click</td><td style="text-align:center;">boolean</td><td style="text-align:center;">返回 <code>Expander</code> 属性 <code>value</code> 的值</td></tr><tr><td style="text-align:center;">descrption-click</td><td style="text-align:center;">N/A</td><td style="text-align:center;">描述框点击</td></tr><tr><td style="text-align:center;">icon-click</td><td style="text-align:center;">N/A</td><td style="text-align:center;">右侧图标点击</td></tr></tbody></table><h3 id="slot" tabindex="-1">Slot <a class="header-anchor" href="#slot" aria-label="Permalink to &quot;Slot&quot;">​</a></h3><hr><ol><li>Default</li></ol><p>定义下拉内容</p><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Expander</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rgba(0, 98, 158, 1)&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;div style=&quot;position: relative; height: 500px; background: black; transition: all 0.3s;&quot;&gt;&lt;/div&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Expander</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ol start="2"><li>content</li></ol><p>自定义内容</p><ul><li>title: 标题</li><li>contnet: 副标题</li></ul><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;expander-title&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;{{ x.title }}&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;expander-info&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;{{ x.content }}&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><ol start="3"><li>Extension</li></ol><p>扩展操作内容</p><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">extension</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Operation&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ol start="4"><li>expand-icon</li></ol><p>自定义展开状态图标</p><ul><li>value: 当前是否展开</li><li>disabledCollaspe: 是否禁用展开</li></ul><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">expand-icon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">i</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">        v-show</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x.value</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">        class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ms-Icon ms-Icon--ChevronUpMed&quot;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">i</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">i</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">        v-show</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">!</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x.value </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&amp;&amp;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> !</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x.disabledExpander</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">        class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ms-Icon ms-Icon--ChevronDownMed&quot;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">i</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">i</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">        v-show</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">!</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x.value </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&amp;&amp;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> x.disabledExpander</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">        class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ms-Icon ms-Icon--ChevronRightMed&quot;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">i</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-09de1c0f><!--[--><!--]--><!----><nav class="prev-next" data-v-09de1c0f><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link prev" href="/VFluent3/guide/components/collapse/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Previous page</span><span class="title" data-v-09de1c0f>Collapse</span><!--]--></a></div><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link next" href="/VFluent3/guide/components/drawer/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Next page</span><span class="title" data-v-09de1c0f>Drawer</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>MIT Licensed</p><p class="copyright" data-v-e315a0ad>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_calendar-date-picker_properties.md\":\"DXRjmMG8\",\"guide_components_image_properties.md\":\"DGanRzCb\",\"guide_components_img-box_index.md\":\"DYtggkf_\",\"guide_components_img_emits.md\":\"BlE7jvZQ\",\"guide_components_img_index.md\":\"Bm9FiuU4\",\"guide_components_icon-element_properties.md\":\"8Oakruwc\",\"guide_components_img_properties.md\":\"B42YSocI\",\"guide_components_drawer_index.md\":\"D_vpnCpE\",\"guide_components_verify-box_emits.md\":\"DT17Iazx\",\"guide_components_calendar-date-picker_index.md\":\"BdHjrurh\",\"guide_components_rating-control_index.md\":\"Q9l5Lfrr\",\"guide_components_rating-control_properties.md\":\"DKprnl0i\",\"guide_components_calendar-view_index.md\":\"zdoRYVx1\",\"guide_components_animated-icon_index.md\":\"yZDMzCFe\",\"guide_components_calendar-date-picker_emits.md\":\"D5OkfR8j\",\"guide_components_badge_index.md\":\"Bb4crrJn\",\"guide_components_image_index.md\":\"B7X6cWAZ\",\"guide_components_slider_index.md\":\"C7zZ2d-W\",\"guide_components_radio-group_index.md\":\"CVfh3h5H\",\"guide_components_swipe-control_index.md\":\"DwrDVPc1\",\"guide_components_color-picker_emits.md\":\"BHDXVtBQ\",\"guide_components_radio_index.md\":\"90as5QGp\",\"guide_components_pagination_properties.md\":\"JUAPvcTL\",\"guide_components_persona_properties.md\":\"DUTPhPMp\",\"guide_components_combo-box_emits.md\":\"Dh5R-qEv\",\"guide_components_pivot_emits.md\":\"BTJPgNpy\",\"guide_components_pagination_index.md\":\"CnW2zAht\",\"guide_components_flip-view_properties.md\":\"BqZ4hhgU\",\"guide_components_icon-element_emits.md\":\"D5TXFdTZ\",\"guide_components_flip-view_index.md\":\"DefnDOv6\",\"guide_components_navigation-panel_index.md\":\"6mO__sSK\",\"guide_components_rating-control_emits.md\":\"blvomSeC\",\"guide_components_icon-element_index.md\":\"DQ8K7JNn\",\"guide_components_navigation-view_index.md\":\"4AQRiz1k\",\"guide_components_toggle-switch_emits.md\":\"CLGzrNut\",\"guide_components_toggle-switch_index.md\":\"61en_q9-\",\"guide_components_scroll-story_index.md\":\"Vpgb1HSV\",\"guide_components_reveal-container_index.md\":\"Cut2r4tV\",\"guide_components_search-box_emits.md\":\"-d9sWNNt\",\"guide_components_search-box_properties.md\":\"DEKFfPFw\",\"guide_components_shimmer_emits.md\":\"CTMInlI3\",\"guide_components_tag_index.md\":\"BhhxkcHn\",\"guide_components_search-box_index.md\":\"DgkrY0oY\",\"guide_components_shimmer_index.md\":\"iZlHuTxw\",\"guide_components_shimmer_properties.md\":\"CdkU1o6H\",\"guide_components_tree-view_index.md\":\"CUrwan4q\",\"guide_components_text-field_index.md\":\"CXSimJtj\",\"guide_components_text-box_index.md\":\"C5moAPfB\",\"guide_components_progress-ring_properties.md\":\"Dc08Uiff\",\"guide_components_toggle-switch_properties.md\":\"tFppK_IS\",\"guide_components_radio-group_emits.md\":\"cEDzKVnN\",\"guide_components_collapse_index.md\":\"N9Iu5-2v\",\"guide_components_image_emits.md\":\"lmlz2xJd\",\"guide_components_callout_index.md\":\"D9RU33w6\",\"guide_components_pivot_index.md\":\"B_vwQL-5\",\"guide_components_command-bar_index.md\":\"Cp4_rrGB\",\"guide_components_pagination_emits.md\":\"Dng86A22\",\"guide_components_button_index.md\":\"7sqT2MQP\",\"guide_components_info-box_properties.md\":\"BI7Nvk-E\",\"guide_components_drop-down_emits.md\":\"BE95TdKW\",\"guide_components_expander_index.md\":\"BKgcUJzQ\",\"guide_components_message-bar_index.md\":\"AEtAWlF8\",\"guide_components_menu-flyout_index.md\":\"Csa7irPj\",\"guide_components_panel_index.md\":\"CsTu0bXo\",\"guide_components_panel_properties.md\":\"BaxoCYKq\",\"guide_components_progress-bar_emits.md\":\"BcwXUpsF\",\"guide_components_progress-bar_properties.md\":\"TxiS9ZMA\",\"guide_components_progress-ring_emits.md\":\"D2Y6hIZ9\",\"guide_components_color-picker_index.md\":\"DCc4ixcU\",\"guide_components_progress-ring_index.md\":\"CPb-ZEPE\",\"guide_components_color-picker_properties.md\":\"wcXK29Vl\",\"guide_components_time-picker_index.md\":\"CQJdRRaG\",\"guide_components_drop-down_properties.md\":\"Bwlkpr1q\",\"guide_components_infinite-scroll-view_index.md\":\"yAuD807x\",\"guide_components_check-box_index.md\":\"FYgdu4oq\",\"guide_components_progress-bar_index.md\":\"D8vHQw5V\",\"guide_components_combo-box_index.md\":\"DTyu3eNd\",\"guide_components_info-box_emits.md\":\"DlEwpkkq\",\"guide_components_drop-down_index.md\":\"BZzJZQWq\",\"guide_components_list-view_index.md\":\"BoYvMzb0\",\"guide_components_verify-box_properties.md\":\"CW6W8fFf\",\"guide_components_verify-box_index.md\":\"DwSB40wR\",\"guide_index.md\":\"Bndlt3sL\",\"guide_components_web-window_index.md\":\"Bxc8vEeI\",\"index.md\":\"MTRqI42u\",\"guide_components_combo-box_properties.md\":\"AWfHzV6x\",\"guide_components_combobox_emits.md\":\"CGB6WLt8\",\"guide_components_combobox_properties.md\":\"Bja0hMou\",\"guide_components_details-list_index.md\":\"CcgOCIyt\",\"guide_components_info-box_index.md\":\"vXh-_DsL\",\"guide_components_combobox_index.md\":\"CsPkY6YB\",\"guide_components_date-picker_index.md\":\"12vmUIup\",\"guide_components_flip-view_emits.md\":\"DCheHjDj\",\"guide_components_panel_emits.md\":\"DG0REDq8\",\"guide_components_breadcrumb_index.md\":\"DyDm7PeP\",\"guide_components_radio-group_properties.md\":\"BnPxoKsQ\",\"guide_components_persona_emits.md\":\"CnsDPKRU\",\"guide_components_pivot_properties.md\":\"BmoLpPi1\",\"guide_components_persona_index.md\":\"DT00jby4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vfluent3\",\"description\":\"A Vue3 component library for Fluent UI\",\"base\":\"/VFluent3/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"VFluent3\",\"footer\":{\"message\":\"MIT Licensed\",\"copyright\":\"Copyright © Creator SN - 2022\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/\"}],\"sidebar\":[{\"text\":\"Basic input\",\"collapsed\":true,\"items\":[{\"text\":\"Button\",\"link\":\"/guide/components/button/\"},{\"text\":\"CheckBox\",\"link\":\"/guide/components/check-box/\"},{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"},{\"text\":\"Combobox\",\"link\":\"/guide/components/combobox/\"},{\"text\":\"DetailsList\",\"link\":\"/guide/components/details-list/\"},{\"text\":\"DropDown\",\"link\":\"/guide/components/drop-down/\"},{\"text\":\"Radio\",\"link\":\"/guide/components/radio/\"},{\"text\":\"RadioGroup\",\"link\":\"/guide/components/radio-group/\"},{\"text\":\"RatingControl\",\"link\":\"/guide/components/rating-control/\"},{\"text\":\"Slider\",\"link\":\"/guide/components/slider/\"},{\"text\":\"ToggleSwitch\",\"link\":\"/guide/components/toggle-switch/\"},{\"text\":\"Tag\",\"link\":\"/guide/components/tag/\"}]},{\"text\":\"Collections\",\"collapsed\":true,\"items\":[{\"text\":\"FlipView\",\"link\":\"/guide/components/flip-view/\"},{\"text\":\"ListView\",\"link\":\"/guide/components/list-view/\"},{\"text\":\"TreeView\",\"link\":\"/guide/components/tree-view/\"}]},{\"text\":\"Date & Time\",\"collapsed\":true,\"items\":[{\"text\":\"CalendarDatePicker\",\"link\":\"/guide/components/calendar-date-picker/\"},{\"text\":\"CalendarView\",\"link\":\"/guide/components/calendar-view/\"},{\"text\":\"DatePicker\",\"link\":\"/guide/components/date-picker/\"},{\"text\":\"TimePicker\",\"link\":\"/guide/components/time-picker/\"}]},{\"text\":\"Dialogs & flyouts\",\"collapsed\":true,\"items\":[{\"text\":\"Callout\",\"link\":\"/guide/components/callout/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Layout\",\"collapsed\":true,\"items\":[{\"text\":\"Collapse\",\"link\":\"/guide/components/collapse/\"},{\"text\":\"Expander\",\"link\":\"/guide/components/expander/\"},{\"text\":\"Drawer\",\"link\":\"/guide/components/drawer/\"},{\"text\":\"Panel\",\"link\":\"/guide/components/panel/\"}]},{\"text\":\"Media\",\"collapsed\":true,\"items\":[{\"text\":\"Image\",\"link\":\"/guide/components/image/\"},{\"text\":\"Img\",\"link\":\"/guide/components/img/\"},{\"text\":\"ImgBox\",\"link\":\"/guide/components/img-box/\"},{\"text\":\"Persona\",\"link\":\"/guide/components/persona/\"}]},{\"text\":\"Menu & toolbars\",\"collapsed\":true,\"items\":[{\"text\":\"CommandBar\",\"link\":\"/guide/components/command-bar/\"},{\"text\":\"MenuFlyout\",\"link\":\"/guide/components/menu-flyout/\"},{\"text\":\"SwipeControl\",\"link\":\"/guide/components/swipe-control/\"}]},{\"text\":\"Navigation\",\"collapsed\":true,\"items\":[{\"text\":\"Breadcrumb\",\"link\":\"/guide/components/breadcrumb/\"},{\"text\":\"NavigationPanel\",\"link\":\"/guide/components/navigation-panel/\"},{\"text\":\"NavigationView\",\"link\":\"/guide/components/navigation-view/\"},{\"text\":\"Pivot\",\"link\":\"/guide/components/pivot/\"},{\"text\":\"Pagination\",\"link\":\"/guide/components/pagination/\"}]},{\"text\":\"Scrolling\",\"collapsed\":true,\"items\":[{\"text\":\"InfiniteScrollView\",\"link\":\"/guide/components/infinite-scroll-view/\"},{\"text\":\"ScrollStory\",\"link\":\"/guide/components/scroll-story/\"}]},{\"text\":\"Status & info\",\"collapsed\":true,\"items\":[{\"text\":\"Badge\",\"link\":\"/guide/components/badge/\"},{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"ProgressBar\",\"link\":\"/guide/components/progress-bar/\"},{\"text\":\"ProgressRing\",\"link\":\"/guide/components/progress-ring/\"}]},{\"text\":\"Styles\",\"collapsed\":true,\"items\":[{\"text\":\"AnimatedIcon\",\"link\":\"/guide/components/animated-icon/\"},{\"text\":\"IconElement\",\"link\":\"/guide/components/icon-element/\"},{\"text\":\"RevealContainer\",\"link\":\"/guide/components/reveal-container/\"},{\"text\":\"Shimmer\",\"link\":\"/guide/components/shimmer/\"}]},{\"text\":\"Text\",\"collapsed\":true,\"items\":[{\"text\":\"SearchBox\",\"link\":\"/guide/components/search-box/\"},{\"text\":\"TextBox\",\"link\":\"/guide/components/text-box/\"},{\"text\":\"TextField\",\"link\":\"/guide/components/text-field/\"},{\"text\":\"VerifyBox\",\"link\":\"/guide/components/verify-box/\"}]},{\"text\":\"Windowing\",\"collapsed\":true,\"items\":[{\"text\":\"WebWindow\",\"link\":\"/guide/components/web-window/\"}]},{\"text\":\"Global\",\"collapsed\":true,\"items\":[{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Advance\",\"collapsed\":true,\"items\":[{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git a/guide/components/flip-view/emits.html b/guide/components/flip-view/emits.html
new file mode 100644
index 0000000..fc974b0
--- /dev/null
+++ b/guide/components/flip-view/emits.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>vfluent3</title>
+    <meta name="description" content="A Vue3 component library for Fluent UI">
+    <meta name="generator" content="VitePress v1.0.0-rc.45">
+    <link rel="preload stylesheet" href="/VFluent3/assets/style.BabQegKX.css" as="style">
+    
+    <script type="module" src="/VFluent3/assets/app.CSutcJ2E.js"></script>
+    <link rel="preload" href="/VFluent3/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/framework.DvIFzl91.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/theme.CgqFBnN_.js">
+    <link rel="modulepreload" href="/VFluent3/assets/guide_components_flip-view_emits.md.DCheHjDj.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-19c990f1><div class="wrapper" data-v-19c990f1><div class="container" data-v-19c990f1><div class="title" data-v-19c990f1><div class="VPNavBarTitle has-sidebar" data-v-19c990f1 data-v-ab179fa1><a class="title" href="/VFluent3/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>VFluent3</span><!--[--><!--]--></a></div></div><div class="content" data-v-19c990f1><div class="content-body" data-v-19c990f1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-19c990f1><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-19c990f1 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Guide</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-19c990f1 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-19c990f1 data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-19c990f1 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-19c990f1><div class="divider-line" data-v-19c990f1></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-d2ecc192><button data-v-d2ecc192>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-575e6a36><div class="curtain" data-v-575e6a36></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-575e6a36><span class="visually-hidden" id="sidebar-aria-label" data-v-575e6a36> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Basic input</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/button/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/check-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CheckBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/combobox/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Combobox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/details-list/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DetailsList</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drop-down/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DropDown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio-group/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RadioGroup</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/rating-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RatingControl</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/slider/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/toggle-switch/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ToggleSwitch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tag/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Tag</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Collections</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/flip-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>FlipView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/list-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ListView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tree-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TreeView</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Date & Time</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarDatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/time-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TimePicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Dialogs & flyouts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/callout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Callout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Layout</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/collapse/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Collapse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/expander/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Expander</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drawer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Panel</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Media</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/image/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Img</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ImgBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/persona/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Persona</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Menu & toolbars</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/command-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CommandBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/menu-flyout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MenuFlyout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/swipe-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SwipeControl</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Navigation</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/breadcrumb/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationPanel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pivot/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pivot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pagination/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pagination</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Scrolling</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/infinite-scroll-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfiniteScrollView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/scroll-story/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ScrollStory</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Status & info</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/badge/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-ring/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressRing</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Styles</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/animated-icon/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>AnimatedIcon</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/icon-element/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>IconElement</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/reveal-container/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RevealContainer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/shimmer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Shimmer</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Text</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/search-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SearchBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-field/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextField</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/verify-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>VerifyBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Windowing</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/web-window/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>WebWindow</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Global</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Advance</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-935f8a84><div class="content" data-v-935f8a84><div class="outline-marker" data-v-935f8a84></div><div class="outline-title" role="heading" aria-level="2" data-v-935f8a84>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-935f8a84><span class="visually-hidden" id="doc-outline-aria-label" data-v-935f8a84> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-935f8a84 data-v-b933a997><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _VFluent3_guide_components_flip-view_emits" data-v-39a288b8><div><h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-label="Permalink to &quot;Emits&quot;">​</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead></table></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-09de1c0f><!--[--><!--]--><!----><nav class="prev-next" data-v-09de1c0f><div class="pager" data-v-09de1c0f><!----></div><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link next" href="/VFluent3/guide/components/button/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Next page</span><span class="title" data-v-09de1c0f>Button</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>MIT Licensed</p><p class="copyright" data-v-e315a0ad>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_calendar-date-picker_properties.md\":\"DXRjmMG8\",\"guide_components_image_properties.md\":\"DGanRzCb\",\"guide_components_img-box_index.md\":\"DYtggkf_\",\"guide_components_img_emits.md\":\"BlE7jvZQ\",\"guide_components_img_index.md\":\"Bm9FiuU4\",\"guide_components_icon-element_properties.md\":\"8Oakruwc\",\"guide_components_img_properties.md\":\"B42YSocI\",\"guide_components_drawer_index.md\":\"D_vpnCpE\",\"guide_components_verify-box_emits.md\":\"DT17Iazx\",\"guide_components_calendar-date-picker_index.md\":\"BdHjrurh\",\"guide_components_rating-control_index.md\":\"Q9l5Lfrr\",\"guide_components_rating-control_properties.md\":\"DKprnl0i\",\"guide_components_calendar-view_index.md\":\"zdoRYVx1\",\"guide_components_animated-icon_index.md\":\"yZDMzCFe\",\"guide_components_calendar-date-picker_emits.md\":\"D5OkfR8j\",\"guide_components_badge_index.md\":\"Bb4crrJn\",\"guide_components_image_index.md\":\"B7X6cWAZ\",\"guide_components_slider_index.md\":\"C7zZ2d-W\",\"guide_components_radio-group_index.md\":\"CVfh3h5H\",\"guide_components_swipe-control_index.md\":\"DwrDVPc1\",\"guide_components_color-picker_emits.md\":\"BHDXVtBQ\",\"guide_components_radio_index.md\":\"90as5QGp\",\"guide_components_pagination_properties.md\":\"JUAPvcTL\",\"guide_components_persona_properties.md\":\"DUTPhPMp\",\"guide_components_combo-box_emits.md\":\"Dh5R-qEv\",\"guide_components_pivot_emits.md\":\"BTJPgNpy\",\"guide_components_pagination_index.md\":\"CnW2zAht\",\"guide_components_flip-view_properties.md\":\"BqZ4hhgU\",\"guide_components_icon-element_emits.md\":\"D5TXFdTZ\",\"guide_components_flip-view_index.md\":\"DefnDOv6\",\"guide_components_navigation-panel_index.md\":\"6mO__sSK\",\"guide_components_rating-control_emits.md\":\"blvomSeC\",\"guide_components_icon-element_index.md\":\"DQ8K7JNn\",\"guide_components_navigation-view_index.md\":\"4AQRiz1k\",\"guide_components_toggle-switch_emits.md\":\"CLGzrNut\",\"guide_components_toggle-switch_index.md\":\"61en_q9-\",\"guide_components_scroll-story_index.md\":\"Vpgb1HSV\",\"guide_components_reveal-container_index.md\":\"Cut2r4tV\",\"guide_components_search-box_emits.md\":\"-d9sWNNt\",\"guide_components_search-box_properties.md\":\"DEKFfPFw\",\"guide_components_shimmer_emits.md\":\"CTMInlI3\",\"guide_components_tag_index.md\":\"BhhxkcHn\",\"guide_components_search-box_index.md\":\"DgkrY0oY\",\"guide_components_shimmer_index.md\":\"iZlHuTxw\",\"guide_components_shimmer_properties.md\":\"CdkU1o6H\",\"guide_components_tree-view_index.md\":\"CUrwan4q\",\"guide_components_text-field_index.md\":\"CXSimJtj\",\"guide_components_text-box_index.md\":\"C5moAPfB\",\"guide_components_progress-ring_properties.md\":\"Dc08Uiff\",\"guide_components_toggle-switch_properties.md\":\"tFppK_IS\",\"guide_components_radio-group_emits.md\":\"cEDzKVnN\",\"guide_components_collapse_index.md\":\"N9Iu5-2v\",\"guide_components_image_emits.md\":\"lmlz2xJd\",\"guide_components_callout_index.md\":\"D9RU33w6\",\"guide_components_pivot_index.md\":\"B_vwQL-5\",\"guide_components_command-bar_index.md\":\"Cp4_rrGB\",\"guide_components_pagination_emits.md\":\"Dng86A22\",\"guide_components_button_index.md\":\"7sqT2MQP\",\"guide_components_info-box_properties.md\":\"BI7Nvk-E\",\"guide_components_drop-down_emits.md\":\"BE95TdKW\",\"guide_components_expander_index.md\":\"BKgcUJzQ\",\"guide_components_message-bar_index.md\":\"AEtAWlF8\",\"guide_components_menu-flyout_index.md\":\"Csa7irPj\",\"guide_components_panel_index.md\":\"CsTu0bXo\",\"guide_components_panel_properties.md\":\"BaxoCYKq\",\"guide_components_progress-bar_emits.md\":\"BcwXUpsF\",\"guide_components_progress-bar_properties.md\":\"TxiS9ZMA\",\"guide_components_progress-ring_emits.md\":\"D2Y6hIZ9\",\"guide_components_color-picker_index.md\":\"DCc4ixcU\",\"guide_components_progress-ring_index.md\":\"CPb-ZEPE\",\"guide_components_color-picker_properties.md\":\"wcXK29Vl\",\"guide_components_time-picker_index.md\":\"CQJdRRaG\",\"guide_components_drop-down_properties.md\":\"Bwlkpr1q\",\"guide_components_infinite-scroll-view_index.md\":\"yAuD807x\",\"guide_components_check-box_index.md\":\"FYgdu4oq\",\"guide_components_progress-bar_index.md\":\"D8vHQw5V\",\"guide_components_combo-box_index.md\":\"DTyu3eNd\",\"guide_components_info-box_emits.md\":\"DlEwpkkq\",\"guide_components_drop-down_index.md\":\"BZzJZQWq\",\"guide_components_list-view_index.md\":\"BoYvMzb0\",\"guide_components_verify-box_properties.md\":\"CW6W8fFf\",\"guide_components_verify-box_index.md\":\"DwSB40wR\",\"guide_index.md\":\"Bndlt3sL\",\"guide_components_web-window_index.md\":\"Bxc8vEeI\",\"index.md\":\"MTRqI42u\",\"guide_components_combo-box_properties.md\":\"AWfHzV6x\",\"guide_components_combobox_emits.md\":\"CGB6WLt8\",\"guide_components_combobox_properties.md\":\"Bja0hMou\",\"guide_components_details-list_index.md\":\"CcgOCIyt\",\"guide_components_info-box_index.md\":\"vXh-_DsL\",\"guide_components_combobox_index.md\":\"CsPkY6YB\",\"guide_components_date-picker_index.md\":\"12vmUIup\",\"guide_components_flip-view_emits.md\":\"DCheHjDj\",\"guide_components_panel_emits.md\":\"DG0REDq8\",\"guide_components_breadcrumb_index.md\":\"DyDm7PeP\",\"guide_components_radio-group_properties.md\":\"BnPxoKsQ\",\"guide_components_persona_emits.md\":\"CnsDPKRU\",\"guide_components_pivot_properties.md\":\"BmoLpPi1\",\"guide_components_persona_index.md\":\"DT00jby4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vfluent3\",\"description\":\"A Vue3 component library for Fluent UI\",\"base\":\"/VFluent3/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"VFluent3\",\"footer\":{\"message\":\"MIT Licensed\",\"copyright\":\"Copyright © Creator SN - 2022\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/\"}],\"sidebar\":[{\"text\":\"Basic input\",\"collapsed\":true,\"items\":[{\"text\":\"Button\",\"link\":\"/guide/components/button/\"},{\"text\":\"CheckBox\",\"link\":\"/guide/components/check-box/\"},{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"},{\"text\":\"Combobox\",\"link\":\"/guide/components/combobox/\"},{\"text\":\"DetailsList\",\"link\":\"/guide/components/details-list/\"},{\"text\":\"DropDown\",\"link\":\"/guide/components/drop-down/\"},{\"text\":\"Radio\",\"link\":\"/guide/components/radio/\"},{\"text\":\"RadioGroup\",\"link\":\"/guide/components/radio-group/\"},{\"text\":\"RatingControl\",\"link\":\"/guide/components/rating-control/\"},{\"text\":\"Slider\",\"link\":\"/guide/components/slider/\"},{\"text\":\"ToggleSwitch\",\"link\":\"/guide/components/toggle-switch/\"},{\"text\":\"Tag\",\"link\":\"/guide/components/tag/\"}]},{\"text\":\"Collections\",\"collapsed\":true,\"items\":[{\"text\":\"FlipView\",\"link\":\"/guide/components/flip-view/\"},{\"text\":\"ListView\",\"link\":\"/guide/components/list-view/\"},{\"text\":\"TreeView\",\"link\":\"/guide/components/tree-view/\"}]},{\"text\":\"Date & Time\",\"collapsed\":true,\"items\":[{\"text\":\"CalendarDatePicker\",\"link\":\"/guide/components/calendar-date-picker/\"},{\"text\":\"CalendarView\",\"link\":\"/guide/components/calendar-view/\"},{\"text\":\"DatePicker\",\"link\":\"/guide/components/date-picker/\"},{\"text\":\"TimePicker\",\"link\":\"/guide/components/time-picker/\"}]},{\"text\":\"Dialogs & flyouts\",\"collapsed\":true,\"items\":[{\"text\":\"Callout\",\"link\":\"/guide/components/callout/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Layout\",\"collapsed\":true,\"items\":[{\"text\":\"Collapse\",\"link\":\"/guide/components/collapse/\"},{\"text\":\"Expander\",\"link\":\"/guide/components/expander/\"},{\"text\":\"Drawer\",\"link\":\"/guide/components/drawer/\"},{\"text\":\"Panel\",\"link\":\"/guide/components/panel/\"}]},{\"text\":\"Media\",\"collapsed\":true,\"items\":[{\"text\":\"Image\",\"link\":\"/guide/components/image/\"},{\"text\":\"Img\",\"link\":\"/guide/components/img/\"},{\"text\":\"ImgBox\",\"link\":\"/guide/components/img-box/\"},{\"text\":\"Persona\",\"link\":\"/guide/components/persona/\"}]},{\"text\":\"Menu & toolbars\",\"collapsed\":true,\"items\":[{\"text\":\"CommandBar\",\"link\":\"/guide/components/command-bar/\"},{\"text\":\"MenuFlyout\",\"link\":\"/guide/components/menu-flyout/\"},{\"text\":\"SwipeControl\",\"link\":\"/guide/components/swipe-control/\"}]},{\"text\":\"Navigation\",\"collapsed\":true,\"items\":[{\"text\":\"Breadcrumb\",\"link\":\"/guide/components/breadcrumb/\"},{\"text\":\"NavigationPanel\",\"link\":\"/guide/components/navigation-panel/\"},{\"text\":\"NavigationView\",\"link\":\"/guide/components/navigation-view/\"},{\"text\":\"Pivot\",\"link\":\"/guide/components/pivot/\"},{\"text\":\"Pagination\",\"link\":\"/guide/components/pagination/\"}]},{\"text\":\"Scrolling\",\"collapsed\":true,\"items\":[{\"text\":\"InfiniteScrollView\",\"link\":\"/guide/components/infinite-scroll-view/\"},{\"text\":\"ScrollStory\",\"link\":\"/guide/components/scroll-story/\"}]},{\"text\":\"Status & info\",\"collapsed\":true,\"items\":[{\"text\":\"Badge\",\"link\":\"/guide/components/badge/\"},{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"ProgressBar\",\"link\":\"/guide/components/progress-bar/\"},{\"text\":\"ProgressRing\",\"link\":\"/guide/components/progress-ring/\"}]},{\"text\":\"Styles\",\"collapsed\":true,\"items\":[{\"text\":\"AnimatedIcon\",\"link\":\"/guide/components/animated-icon/\"},{\"text\":\"IconElement\",\"link\":\"/guide/components/icon-element/\"},{\"text\":\"RevealContainer\",\"link\":\"/guide/components/reveal-container/\"},{\"text\":\"Shimmer\",\"link\":\"/guide/components/shimmer/\"}]},{\"text\":\"Text\",\"collapsed\":true,\"items\":[{\"text\":\"SearchBox\",\"link\":\"/guide/components/search-box/\"},{\"text\":\"TextBox\",\"link\":\"/guide/components/text-box/\"},{\"text\":\"TextField\",\"link\":\"/guide/components/text-field/\"},{\"text\":\"VerifyBox\",\"link\":\"/guide/components/verify-box/\"}]},{\"text\":\"Windowing\",\"collapsed\":true,\"items\":[{\"text\":\"WebWindow\",\"link\":\"/guide/components/web-window/\"}]},{\"text\":\"Global\",\"collapsed\":true,\"items\":[{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Advance\",\"collapsed\":true,\"items\":[{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git a/guide/components/flip-view/index.html b/guide/components/flip-view/index.html
new file mode 100644
index 0000000..0f9d90f
--- /dev/null
+++ b/guide/components/flip-view/index.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>FlipView | vfluent3</title>
+    <meta name="description" content="A Vue3 component library for Fluent UI">
+    <meta name="generator" content="VitePress v1.0.0-rc.45">
+    <link rel="preload stylesheet" href="/VFluent3/assets/style.BabQegKX.css" as="style">
+    
+    <script type="module" src="/VFluent3/assets/app.CSutcJ2E.js"></script>
+    <link rel="preload" href="/VFluent3/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/framework.DvIFzl91.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/theme.CgqFBnN_.js">
+    <link rel="modulepreload" href="/VFluent3/assets/guide_components_flip-view_index.md.DefnDOv6.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-19c990f1><div class="wrapper" data-v-19c990f1><div class="container" data-v-19c990f1><div class="title" data-v-19c990f1><div class="VPNavBarTitle has-sidebar" data-v-19c990f1 data-v-ab179fa1><a class="title" href="/VFluent3/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>VFluent3</span><!--[--><!--]--></a></div></div><div class="content" data-v-19c990f1><div class="content-body" data-v-19c990f1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-19c990f1><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-19c990f1 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Guide</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-19c990f1 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-19c990f1 data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-19c990f1 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-19c990f1><div class="divider-line" data-v-19c990f1></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-d2ecc192><button data-v-d2ecc192>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-575e6a36><div class="curtain" data-v-575e6a36></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-575e6a36><span class="visually-hidden" id="sidebar-aria-label" data-v-575e6a36> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Basic input</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/button/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/check-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CheckBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/combobox/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Combobox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/details-list/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DetailsList</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drop-down/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DropDown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio-group/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RadioGroup</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/rating-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RatingControl</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/slider/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/toggle-switch/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ToggleSwitch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tag/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Tag</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible has-active" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Collections</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/flip-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>FlipView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/list-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ListView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tree-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TreeView</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Date & Time</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarDatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/time-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TimePicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Dialogs & flyouts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/callout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Callout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Layout</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/collapse/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Collapse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/expander/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Expander</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drawer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Panel</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Media</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/image/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Img</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ImgBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/persona/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Persona</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Menu & toolbars</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/command-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CommandBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/menu-flyout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MenuFlyout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/swipe-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SwipeControl</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Navigation</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/breadcrumb/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationPanel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pivot/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pivot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pagination/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pagination</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Scrolling</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/infinite-scroll-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfiniteScrollView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/scroll-story/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ScrollStory</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Status & info</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/badge/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-ring/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressRing</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Styles</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/animated-icon/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>AnimatedIcon</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/icon-element/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>IconElement</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/reveal-container/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RevealContainer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/shimmer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Shimmer</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Text</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/search-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SearchBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-field/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextField</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/verify-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>VerifyBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Windowing</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/web-window/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>WebWindow</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Global</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Advance</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-935f8a84><div class="content" data-v-935f8a84><div class="outline-marker" data-v-935f8a84></div><div class="outline-title" role="heading" aria-level="2" data-v-935f8a84>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-935f8a84><span class="visually-hidden" id="doc-outline-aria-label" data-v-935f8a84> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-935f8a84 data-v-b933a997><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _VFluent3_guide_components_flip-view_" data-v-39a288b8><div><h3 id="flipview-demo" tabindex="-1">FlipView-DEMO <a class="header-anchor" href="#flipview-demo" aria-label="Permalink to &quot;FlipView-DEMO&quot;">​</a></h3><hr><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-FlipView</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">value</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-FlipView</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="flipview-custom-template" tabindex="-1">FlipView Custom Template <a class="header-anchor" href="#flipview-custom-template" aria-label="Permalink to &quot;FlipView Custom Template&quot;">​</a></h3><hr><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-FlipView</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">images</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;template v-slot:item=&quot;x&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;img alt=&quot;&quot; :src=&quot;x.data&quot; style=&quot;width: 100%; height: 100%; object-fit: cover;&quot;/&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-FlipView</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h3 id="flipview-vertical-direction" tabindex="-1">FlipView Vertical Direction <a class="header-anchor" href="#flipview-vertical-direction" aria-label="Permalink to &quot;FlipView Vertical Direction&quot;">​</a></h3><hr><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-FlipView</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">images</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> direction</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;vertical&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;template v-slot:item=&quot;x&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;img alt=&quot;&quot; :src=&quot;x.data&quot; style=&quot;width: 100%; height: 100%; object-fit: cover;&quot;/&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-FlipView</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h3 id="flipview-mask" tabindex="-1">FlipView Mask <a class="header-anchor" href="#flipview-mask" aria-label="Permalink to &quot;FlipView Mask&quot;">​</a></h3><hr><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-FlipView</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">images</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> mask</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rgba(36,36,36,0.6)&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;template v-slot:item=&quot;x&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;img alt=&quot;&quot; :src=&quot;x.data&quot; style=&quot;width: 100%; height: 100%; object-fit: cover;&quot;/&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-FlipView</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h3 id="flipview-different-animation" tabindex="-1">FlipView Different Animation <a class="header-anchor" href="#flipview-different-animation" aria-label="Permalink to &quot;FlipView Different Animation&quot;">​</a></h3><hr><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-FlipView</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">images</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> animation</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;fold&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;template v-slot:item=&quot;x&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;img alt=&quot;&quot; :src=&quot;x.data&quot; style=&quot;width: 100%; height: 100%; object-fit: cover;&quot;/&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-FlipView</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h3 id="flipview-dark-theme" tabindex="-1">FlipView Dark Theme <a class="header-anchor" href="#flipview-dark-theme" aria-label="Permalink to &quot;FlipView Dark Theme&quot;">​</a></h3><hr><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-FlipView</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">images</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;dark&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;template v-slot:item=&quot;x&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;div style=&quot;position: relative; width: 100%; height: 100%; background: rgba(36,36,36,1); display: flex; justify-content: center; align-items: center;&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            &lt;p style=&quot;font-size: 36px; color: whitesmoke;&quot;&gt;Dark Theme&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;/div&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-FlipView</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h3 id="flipview-show-control-panel" tabindex="-1">FlipView Show Control Panel <a class="header-anchor" href="#flipview-show-control-panel" aria-label="Permalink to &quot;FlipView Show Control Panel&quot;">​</a></h3><hr><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-FlipView</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">images</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;dark&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> showControlPanel</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;hover&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;template v-slot:item=&quot;x&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;div style=&quot;position: relative; width: 100%; height: 100%; background: rgba(36,36,36,1); display: flex; justify-content: center; align-items: center;&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            &lt;p style=&quot;font-size: 36px; color: whitesmoke;&quot;&gt;Dark Theme&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;/div&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-FlipView</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">value</td><td style="text-align:center;">Array</td><td style="text-align:center;">Yes</td><td style="text-align:center;">[]</td><td style="text-align:center;">Flipview template data</td></tr><tr><td style="text-align:center;">direction</td><td style="text-align:center;">[&#39;horizontal&#39;,&#39;vertical&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">horizontal</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">animation</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">move</td><td style="text-align:center;">move, moveFade, moveDifferent, glue, push, fold</td></tr><tr><td style="text-align:center;">duration</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">800</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">autoPlay</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">true</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">autoPlayDuration</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">5000</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">showControlPanel</td><td style="text-align:center;">[&#39;&#39;,&#39;hidden&#39;,&#39;hover&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">mask</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">The mask color of control panel</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">system</td><td style="text-align:center;">主题样式, 包含<code>light</code>, <code>dark</code>, <code>system</code>, <code>custom</code>几种样式</td></tr></tbody></table><h3 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to &quot;Events&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">事件名(Name)</th><th style="text-align:center;">参数类型(args)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">change</td><td style="text-align:center;">object</td><td style="text-align:center;">当切换页面时返回当前索引<code>index</code>和当前轮播周期<code>duration</code></td></tr></tbody></table><h3 id="slot" tabindex="-1">Slot <a class="header-anchor" href="#slot" aria-label="Permalink to &quot;Slot&quot;">​</a></h3><hr><ol><li>Input</li></ol><div class="language-javascript vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">item</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;x&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">img</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> alt</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;&quot;</span><span style="--shiki-light:#B31D28;--shiki-dark:#FDAEB7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> :src=&quot;x.data&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;width: 100%; height: 100%; object-fit: cover;&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">/&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-09de1c0f><!--[--><!--]--><!----><nav class="prev-next" data-v-09de1c0f><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link prev" href="/VFluent3/guide/components/tag/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Previous page</span><span class="title" data-v-09de1c0f>Tag</span><!--]--></a></div><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link next" href="/VFluent3/guide/components/list-view/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Next page</span><span class="title" data-v-09de1c0f>ListView</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>MIT Licensed</p><p class="copyright" data-v-e315a0ad>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_calendar-date-picker_properties.md\":\"DXRjmMG8\",\"guide_components_image_properties.md\":\"DGanRzCb\",\"guide_components_img-box_index.md\":\"DYtggkf_\",\"guide_components_img_emits.md\":\"BlE7jvZQ\",\"guide_components_img_index.md\":\"Bm9FiuU4\",\"guide_components_icon-element_properties.md\":\"8Oakruwc\",\"guide_components_img_properties.md\":\"B42YSocI\",\"guide_components_drawer_index.md\":\"D_vpnCpE\",\"guide_components_verify-box_emits.md\":\"DT17Iazx\",\"guide_components_calendar-date-picker_index.md\":\"BdHjrurh\",\"guide_components_rating-control_index.md\":\"Q9l5Lfrr\",\"guide_components_rating-control_properties.md\":\"DKprnl0i\",\"guide_components_calendar-view_index.md\":\"zdoRYVx1\",\"guide_components_animated-icon_index.md\":\"yZDMzCFe\",\"guide_components_calendar-date-picker_emits.md\":\"D5OkfR8j\",\"guide_components_badge_index.md\":\"Bb4crrJn\",\"guide_components_image_index.md\":\"B7X6cWAZ\",\"guide_components_slider_index.md\":\"C7zZ2d-W\",\"guide_components_radio-group_index.md\":\"CVfh3h5H\",\"guide_components_swipe-control_index.md\":\"DwrDVPc1\",\"guide_components_color-picker_emits.md\":\"BHDXVtBQ\",\"guide_components_radio_index.md\":\"90as5QGp\",\"guide_components_pagination_properties.md\":\"JUAPvcTL\",\"guide_components_persona_properties.md\":\"DUTPhPMp\",\"guide_components_combo-box_emits.md\":\"Dh5R-qEv\",\"guide_components_pivot_emits.md\":\"BTJPgNpy\",\"guide_components_pagination_index.md\":\"CnW2zAht\",\"guide_components_flip-view_properties.md\":\"BqZ4hhgU\",\"guide_components_icon-element_emits.md\":\"D5TXFdTZ\",\"guide_components_flip-view_index.md\":\"DefnDOv6\",\"guide_components_navigation-panel_index.md\":\"6mO__sSK\",\"guide_components_rating-control_emits.md\":\"blvomSeC\",\"guide_components_icon-element_index.md\":\"DQ8K7JNn\",\"guide_components_navigation-view_index.md\":\"4AQRiz1k\",\"guide_components_toggle-switch_emits.md\":\"CLGzrNut\",\"guide_components_toggle-switch_index.md\":\"61en_q9-\",\"guide_components_scroll-story_index.md\":\"Vpgb1HSV\",\"guide_components_reveal-container_index.md\":\"Cut2r4tV\",\"guide_components_search-box_emits.md\":\"-d9sWNNt\",\"guide_components_search-box_properties.md\":\"DEKFfPFw\",\"guide_components_shimmer_emits.md\":\"CTMInlI3\",\"guide_components_tag_index.md\":\"BhhxkcHn\",\"guide_components_search-box_index.md\":\"DgkrY0oY\",\"guide_components_shimmer_index.md\":\"iZlHuTxw\",\"guide_components_shimmer_properties.md\":\"CdkU1o6H\",\"guide_components_tree-view_index.md\":\"CUrwan4q\",\"guide_components_text-field_index.md\":\"CXSimJtj\",\"guide_components_text-box_index.md\":\"C5moAPfB\",\"guide_components_progress-ring_properties.md\":\"Dc08Uiff\",\"guide_components_toggle-switch_properties.md\":\"tFppK_IS\",\"guide_components_radio-group_emits.md\":\"cEDzKVnN\",\"guide_components_collapse_index.md\":\"N9Iu5-2v\",\"guide_components_image_emits.md\":\"lmlz2xJd\",\"guide_components_callout_index.md\":\"D9RU33w6\",\"guide_components_pivot_index.md\":\"B_vwQL-5\",\"guide_components_command-bar_index.md\":\"Cp4_rrGB\",\"guide_components_pagination_emits.md\":\"Dng86A22\",\"guide_components_button_index.md\":\"7sqT2MQP\",\"guide_components_info-box_properties.md\":\"BI7Nvk-E\",\"guide_components_drop-down_emits.md\":\"BE95TdKW\",\"guide_components_expander_index.md\":\"BKgcUJzQ\",\"guide_components_message-bar_index.md\":\"AEtAWlF8\",\"guide_components_menu-flyout_index.md\":\"Csa7irPj\",\"guide_components_panel_index.md\":\"CsTu0bXo\",\"guide_components_panel_properties.md\":\"BaxoCYKq\",\"guide_components_progress-bar_emits.md\":\"BcwXUpsF\",\"guide_components_progress-bar_properties.md\":\"TxiS9ZMA\",\"guide_components_progress-ring_emits.md\":\"D2Y6hIZ9\",\"guide_components_color-picker_index.md\":\"DCc4ixcU\",\"guide_components_progress-ring_index.md\":\"CPb-ZEPE\",\"guide_components_color-picker_properties.md\":\"wcXK29Vl\",\"guide_components_time-picker_index.md\":\"CQJdRRaG\",\"guide_components_drop-down_properties.md\":\"Bwlkpr1q\",\"guide_components_infinite-scroll-view_index.md\":\"yAuD807x\",\"guide_components_check-box_index.md\":\"FYgdu4oq\",\"guide_components_progress-bar_index.md\":\"D8vHQw5V\",\"guide_components_combo-box_index.md\":\"DTyu3eNd\",\"guide_components_info-box_emits.md\":\"DlEwpkkq\",\"guide_components_drop-down_index.md\":\"BZzJZQWq\",\"guide_components_list-view_index.md\":\"BoYvMzb0\",\"guide_components_verify-box_properties.md\":\"CW6W8fFf\",\"guide_components_verify-box_index.md\":\"DwSB40wR\",\"guide_index.md\":\"Bndlt3sL\",\"guide_components_web-window_index.md\":\"Bxc8vEeI\",\"index.md\":\"MTRqI42u\",\"guide_components_combo-box_properties.md\":\"AWfHzV6x\",\"guide_components_combobox_emits.md\":\"CGB6WLt8\",\"guide_components_combobox_properties.md\":\"Bja0hMou\",\"guide_components_details-list_index.md\":\"CcgOCIyt\",\"guide_components_info-box_index.md\":\"vXh-_DsL\",\"guide_components_combobox_index.md\":\"CsPkY6YB\",\"guide_components_date-picker_index.md\":\"12vmUIup\",\"guide_components_flip-view_emits.md\":\"DCheHjDj\",\"guide_components_panel_emits.md\":\"DG0REDq8\",\"guide_components_breadcrumb_index.md\":\"DyDm7PeP\",\"guide_components_radio-group_properties.md\":\"BnPxoKsQ\",\"guide_components_persona_emits.md\":\"CnsDPKRU\",\"guide_components_pivot_properties.md\":\"BmoLpPi1\",\"guide_components_persona_index.md\":\"DT00jby4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vfluent3\",\"description\":\"A Vue3 component library for Fluent UI\",\"base\":\"/VFluent3/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"VFluent3\",\"footer\":{\"message\":\"MIT Licensed\",\"copyright\":\"Copyright © Creator SN - 2022\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/\"}],\"sidebar\":[{\"text\":\"Basic input\",\"collapsed\":true,\"items\":[{\"text\":\"Button\",\"link\":\"/guide/components/button/\"},{\"text\":\"CheckBox\",\"link\":\"/guide/components/check-box/\"},{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"},{\"text\":\"Combobox\",\"link\":\"/guide/components/combobox/\"},{\"text\":\"DetailsList\",\"link\":\"/guide/components/details-list/\"},{\"text\":\"DropDown\",\"link\":\"/guide/components/drop-down/\"},{\"text\":\"Radio\",\"link\":\"/guide/components/radio/\"},{\"text\":\"RadioGroup\",\"link\":\"/guide/components/radio-group/\"},{\"text\":\"RatingControl\",\"link\":\"/guide/components/rating-control/\"},{\"text\":\"Slider\",\"link\":\"/guide/components/slider/\"},{\"text\":\"ToggleSwitch\",\"link\":\"/guide/components/toggle-switch/\"},{\"text\":\"Tag\",\"link\":\"/guide/components/tag/\"}]},{\"text\":\"Collections\",\"collapsed\":true,\"items\":[{\"text\":\"FlipView\",\"link\":\"/guide/components/flip-view/\"},{\"text\":\"ListView\",\"link\":\"/guide/components/list-view/\"},{\"text\":\"TreeView\",\"link\":\"/guide/components/tree-view/\"}]},{\"text\":\"Date & Time\",\"collapsed\":true,\"items\":[{\"text\":\"CalendarDatePicker\",\"link\":\"/guide/components/calendar-date-picker/\"},{\"text\":\"CalendarView\",\"link\":\"/guide/components/calendar-view/\"},{\"text\":\"DatePicker\",\"link\":\"/guide/components/date-picker/\"},{\"text\":\"TimePicker\",\"link\":\"/guide/components/time-picker/\"}]},{\"text\":\"Dialogs & flyouts\",\"collapsed\":true,\"items\":[{\"text\":\"Callout\",\"link\":\"/guide/components/callout/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Layout\",\"collapsed\":true,\"items\":[{\"text\":\"Collapse\",\"link\":\"/guide/components/collapse/\"},{\"text\":\"Expander\",\"link\":\"/guide/components/expander/\"},{\"text\":\"Drawer\",\"link\":\"/guide/components/drawer/\"},{\"text\":\"Panel\",\"link\":\"/guide/components/panel/\"}]},{\"text\":\"Media\",\"collapsed\":true,\"items\":[{\"text\":\"Image\",\"link\":\"/guide/components/image/\"},{\"text\":\"Img\",\"link\":\"/guide/components/img/\"},{\"text\":\"ImgBox\",\"link\":\"/guide/components/img-box/\"},{\"text\":\"Persona\",\"link\":\"/guide/components/persona/\"}]},{\"text\":\"Menu & toolbars\",\"collapsed\":true,\"items\":[{\"text\":\"CommandBar\",\"link\":\"/guide/components/command-bar/\"},{\"text\":\"MenuFlyout\",\"link\":\"/guide/components/menu-flyout/\"},{\"text\":\"SwipeControl\",\"link\":\"/guide/components/swipe-control/\"}]},{\"text\":\"Navigation\",\"collapsed\":true,\"items\":[{\"text\":\"Breadcrumb\",\"link\":\"/guide/components/breadcrumb/\"},{\"text\":\"NavigationPanel\",\"link\":\"/guide/components/navigation-panel/\"},{\"text\":\"NavigationView\",\"link\":\"/guide/components/navigation-view/\"},{\"text\":\"Pivot\",\"link\":\"/guide/components/pivot/\"},{\"text\":\"Pagination\",\"link\":\"/guide/components/pagination/\"}]},{\"text\":\"Scrolling\",\"collapsed\":true,\"items\":[{\"text\":\"InfiniteScrollView\",\"link\":\"/guide/components/infinite-scroll-view/\"},{\"text\":\"ScrollStory\",\"link\":\"/guide/components/scroll-story/\"}]},{\"text\":\"Status & info\",\"collapsed\":true,\"items\":[{\"text\":\"Badge\",\"link\":\"/guide/components/badge/\"},{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"ProgressBar\",\"link\":\"/guide/components/progress-bar/\"},{\"text\":\"ProgressRing\",\"link\":\"/guide/components/progress-ring/\"}]},{\"text\":\"Styles\",\"collapsed\":true,\"items\":[{\"text\":\"AnimatedIcon\",\"link\":\"/guide/components/animated-icon/\"},{\"text\":\"IconElement\",\"link\":\"/guide/components/icon-element/\"},{\"text\":\"RevealContainer\",\"link\":\"/guide/components/reveal-container/\"},{\"text\":\"Shimmer\",\"link\":\"/guide/components/shimmer/\"}]},{\"text\":\"Text\",\"collapsed\":true,\"items\":[{\"text\":\"SearchBox\",\"link\":\"/guide/components/search-box/\"},{\"text\":\"TextBox\",\"link\":\"/guide/components/text-box/\"},{\"text\":\"TextField\",\"link\":\"/guide/components/text-field/\"},{\"text\":\"VerifyBox\",\"link\":\"/guide/components/verify-box/\"}]},{\"text\":\"Windowing\",\"collapsed\":true,\"items\":[{\"text\":\"WebWindow\",\"link\":\"/guide/components/web-window/\"}]},{\"text\":\"Global\",\"collapsed\":true,\"items\":[{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Advance\",\"collapsed\":true,\"items\":[{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git a/guide/components/flip-view/properties.html b/guide/components/flip-view/properties.html
new file mode 100644
index 0000000..18d1746
--- /dev/null
+++ b/guide/components/flip-view/properties.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>vfluent3</title>
+    <meta name="description" content="A Vue3 component library for Fluent UI">
+    <meta name="generator" content="VitePress v1.0.0-rc.45">
+    <link rel="preload stylesheet" href="/VFluent3/assets/style.BabQegKX.css" as="style">
+    
+    <script type="module" src="/VFluent3/assets/app.CSutcJ2E.js"></script>
+    <link rel="preload" href="/VFluent3/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/framework.DvIFzl91.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/theme.CgqFBnN_.js">
+    <link rel="modulepreload" href="/VFluent3/assets/guide_components_flip-view_properties.md.BqZ4hhgU.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-19c990f1><div class="wrapper" data-v-19c990f1><div class="container" data-v-19c990f1><div class="title" data-v-19c990f1><div class="VPNavBarTitle has-sidebar" data-v-19c990f1 data-v-ab179fa1><a class="title" href="/VFluent3/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>VFluent3</span><!--[--><!--]--></a></div></div><div class="content" data-v-19c990f1><div class="content-body" data-v-19c990f1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-19c990f1><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-19c990f1 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Guide</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-19c990f1 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-19c990f1 data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-19c990f1 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-19c990f1><div class="divider-line" data-v-19c990f1></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-d2ecc192><button data-v-d2ecc192>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-575e6a36><div class="curtain" data-v-575e6a36></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-575e6a36><span class="visually-hidden" id="sidebar-aria-label" data-v-575e6a36> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Basic input</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/button/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/check-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CheckBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/combobox/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Combobox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/details-list/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DetailsList</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drop-down/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DropDown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio-group/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RadioGroup</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/rating-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RatingControl</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/slider/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/toggle-switch/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ToggleSwitch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tag/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Tag</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Collections</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/flip-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>FlipView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/list-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ListView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tree-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TreeView</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Date & Time</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarDatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/time-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TimePicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Dialogs & flyouts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/callout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Callout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Layout</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/collapse/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Collapse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/expander/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Expander</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drawer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Panel</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Media</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/image/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Img</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ImgBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/persona/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Persona</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Menu & toolbars</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/command-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CommandBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/menu-flyout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MenuFlyout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/swipe-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SwipeControl</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Navigation</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/breadcrumb/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationPanel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pivot/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pivot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pagination/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pagination</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Scrolling</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/infinite-scroll-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfiniteScrollView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/scroll-story/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ScrollStory</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Status & info</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/badge/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-ring/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressRing</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Styles</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/animated-icon/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>AnimatedIcon</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/icon-element/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>IconElement</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/reveal-container/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RevealContainer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/shimmer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Shimmer</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Text</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/search-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SearchBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-field/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextField</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/verify-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>VerifyBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Windowing</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/web-window/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>WebWindow</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Global</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Advance</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-935f8a84><div class="content" data-v-935f8a84><div class="outline-marker" data-v-935f8a84></div><div class="outline-title" role="heading" aria-level="2" data-v-935f8a84>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-935f8a84><span class="visually-hidden" id="doc-outline-aria-label" data-v-935f8a84> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-935f8a84 data-v-b933a997><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _VFluent3_guide_components_flip-view_properties" data-v-39a288b8><div><h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-label="Permalink to &quot;Properties&quot;">​</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead></table></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-09de1c0f><!--[--><!--]--><!----><nav class="prev-next" data-v-09de1c0f><div class="pager" data-v-09de1c0f><!----></div><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link next" href="/VFluent3/guide/components/button/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Next page</span><span class="title" data-v-09de1c0f>Button</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>MIT Licensed</p><p class="copyright" data-v-e315a0ad>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_calendar-date-picker_properties.md\":\"DXRjmMG8\",\"guide_components_image_properties.md\":\"DGanRzCb\",\"guide_components_img-box_index.md\":\"DYtggkf_\",\"guide_components_img_emits.md\":\"BlE7jvZQ\",\"guide_components_img_index.md\":\"Bm9FiuU4\",\"guide_components_icon-element_properties.md\":\"8Oakruwc\",\"guide_components_img_properties.md\":\"B42YSocI\",\"guide_components_drawer_index.md\":\"D_vpnCpE\",\"guide_components_verify-box_emits.md\":\"DT17Iazx\",\"guide_components_calendar-date-picker_index.md\":\"BdHjrurh\",\"guide_components_rating-control_index.md\":\"Q9l5Lfrr\",\"guide_components_rating-control_properties.md\":\"DKprnl0i\",\"guide_components_calendar-view_index.md\":\"zdoRYVx1\",\"guide_components_animated-icon_index.md\":\"yZDMzCFe\",\"guide_components_calendar-date-picker_emits.md\":\"D5OkfR8j\",\"guide_components_badge_index.md\":\"Bb4crrJn\",\"guide_components_image_index.md\":\"B7X6cWAZ\",\"guide_components_slider_index.md\":\"C7zZ2d-W\",\"guide_components_radio-group_index.md\":\"CVfh3h5H\",\"guide_components_swipe-control_index.md\":\"DwrDVPc1\",\"guide_components_color-picker_emits.md\":\"BHDXVtBQ\",\"guide_components_radio_index.md\":\"90as5QGp\",\"guide_components_pagination_properties.md\":\"JUAPvcTL\",\"guide_components_persona_properties.md\":\"DUTPhPMp\",\"guide_components_combo-box_emits.md\":\"Dh5R-qEv\",\"guide_components_pivot_emits.md\":\"BTJPgNpy\",\"guide_components_pagination_index.md\":\"CnW2zAht\",\"guide_components_flip-view_properties.md\":\"BqZ4hhgU\",\"guide_components_icon-element_emits.md\":\"D5TXFdTZ\",\"guide_components_flip-view_index.md\":\"DefnDOv6\",\"guide_components_navigation-panel_index.md\":\"6mO__sSK\",\"guide_components_rating-control_emits.md\":\"blvomSeC\",\"guide_components_icon-element_index.md\":\"DQ8K7JNn\",\"guide_components_navigation-view_index.md\":\"4AQRiz1k\",\"guide_components_toggle-switch_emits.md\":\"CLGzrNut\",\"guide_components_toggle-switch_index.md\":\"61en_q9-\",\"guide_components_scroll-story_index.md\":\"Vpgb1HSV\",\"guide_components_reveal-container_index.md\":\"Cut2r4tV\",\"guide_components_search-box_emits.md\":\"-d9sWNNt\",\"guide_components_search-box_properties.md\":\"DEKFfPFw\",\"guide_components_shimmer_emits.md\":\"CTMInlI3\",\"guide_components_tag_index.md\":\"BhhxkcHn\",\"guide_components_search-box_index.md\":\"DgkrY0oY\",\"guide_components_shimmer_index.md\":\"iZlHuTxw\",\"guide_components_shimmer_properties.md\":\"CdkU1o6H\",\"guide_components_tree-view_index.md\":\"CUrwan4q\",\"guide_components_text-field_index.md\":\"CXSimJtj\",\"guide_components_text-box_index.md\":\"C5moAPfB\",\"guide_components_progress-ring_properties.md\":\"Dc08Uiff\",\"guide_components_toggle-switch_properties.md\":\"tFppK_IS\",\"guide_components_radio-group_emits.md\":\"cEDzKVnN\",\"guide_components_collapse_index.md\":\"N9Iu5-2v\",\"guide_components_image_emits.md\":\"lmlz2xJd\",\"guide_components_callout_index.md\":\"D9RU33w6\",\"guide_components_pivot_index.md\":\"B_vwQL-5\",\"guide_components_command-bar_index.md\":\"Cp4_rrGB\",\"guide_components_pagination_emits.md\":\"Dng86A22\",\"guide_components_button_index.md\":\"7sqT2MQP\",\"guide_components_info-box_properties.md\":\"BI7Nvk-E\",\"guide_components_drop-down_emits.md\":\"BE95TdKW\",\"guide_components_expander_index.md\":\"BKgcUJzQ\",\"guide_components_message-bar_index.md\":\"AEtAWlF8\",\"guide_components_menu-flyout_index.md\":\"Csa7irPj\",\"guide_components_panel_index.md\":\"CsTu0bXo\",\"guide_components_panel_properties.md\":\"BaxoCYKq\",\"guide_components_progress-bar_emits.md\":\"BcwXUpsF\",\"guide_components_progress-bar_properties.md\":\"TxiS9ZMA\",\"guide_components_progress-ring_emits.md\":\"D2Y6hIZ9\",\"guide_components_color-picker_index.md\":\"DCc4ixcU\",\"guide_components_progress-ring_index.md\":\"CPb-ZEPE\",\"guide_components_color-picker_properties.md\":\"wcXK29Vl\",\"guide_components_time-picker_index.md\":\"CQJdRRaG\",\"guide_components_drop-down_properties.md\":\"Bwlkpr1q\",\"guide_components_infinite-scroll-view_index.md\":\"yAuD807x\",\"guide_components_check-box_index.md\":\"FYgdu4oq\",\"guide_components_progress-bar_index.md\":\"D8vHQw5V\",\"guide_components_combo-box_index.md\":\"DTyu3eNd\",\"guide_components_info-box_emits.md\":\"DlEwpkkq\",\"guide_components_drop-down_index.md\":\"BZzJZQWq\",\"guide_components_list-view_index.md\":\"BoYvMzb0\",\"guide_components_verify-box_properties.md\":\"CW6W8fFf\",\"guide_components_verify-box_index.md\":\"DwSB40wR\",\"guide_index.md\":\"Bndlt3sL\",\"guide_components_web-window_index.md\":\"Bxc8vEeI\",\"index.md\":\"MTRqI42u\",\"guide_components_combo-box_properties.md\":\"AWfHzV6x\",\"guide_components_combobox_emits.md\":\"CGB6WLt8\",\"guide_components_combobox_properties.md\":\"Bja0hMou\",\"guide_components_details-list_index.md\":\"CcgOCIyt\",\"guide_components_info-box_index.md\":\"vXh-_DsL\",\"guide_components_combobox_index.md\":\"CsPkY6YB\",\"guide_components_date-picker_index.md\":\"12vmUIup\",\"guide_components_flip-view_emits.md\":\"DCheHjDj\",\"guide_components_panel_emits.md\":\"DG0REDq8\",\"guide_components_breadcrumb_index.md\":\"DyDm7PeP\",\"guide_components_radio-group_properties.md\":\"BnPxoKsQ\",\"guide_components_persona_emits.md\":\"CnsDPKRU\",\"guide_components_pivot_properties.md\":\"BmoLpPi1\",\"guide_components_persona_index.md\":\"DT00jby4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vfluent3\",\"description\":\"A Vue3 component library for Fluent UI\",\"base\":\"/VFluent3/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"VFluent3\",\"footer\":{\"message\":\"MIT Licensed\",\"copyright\":\"Copyright © Creator SN - 2022\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/\"}],\"sidebar\":[{\"text\":\"Basic input\",\"collapsed\":true,\"items\":[{\"text\":\"Button\",\"link\":\"/guide/components/button/\"},{\"text\":\"CheckBox\",\"link\":\"/guide/components/check-box/\"},{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"},{\"text\":\"Combobox\",\"link\":\"/guide/components/combobox/\"},{\"text\":\"DetailsList\",\"link\":\"/guide/components/details-list/\"},{\"text\":\"DropDown\",\"link\":\"/guide/components/drop-down/\"},{\"text\":\"Radio\",\"link\":\"/guide/components/radio/\"},{\"text\":\"RadioGroup\",\"link\":\"/guide/components/radio-group/\"},{\"text\":\"RatingControl\",\"link\":\"/guide/components/rating-control/\"},{\"text\":\"Slider\",\"link\":\"/guide/components/slider/\"},{\"text\":\"ToggleSwitch\",\"link\":\"/guide/components/toggle-switch/\"},{\"text\":\"Tag\",\"link\":\"/guide/components/tag/\"}]},{\"text\":\"Collections\",\"collapsed\":true,\"items\":[{\"text\":\"FlipView\",\"link\":\"/guide/components/flip-view/\"},{\"text\":\"ListView\",\"link\":\"/guide/components/list-view/\"},{\"text\":\"TreeView\",\"link\":\"/guide/components/tree-view/\"}]},{\"text\":\"Date & Time\",\"collapsed\":true,\"items\":[{\"text\":\"CalendarDatePicker\",\"link\":\"/guide/components/calendar-date-picker/\"},{\"text\":\"CalendarView\",\"link\":\"/guide/components/calendar-view/\"},{\"text\":\"DatePicker\",\"link\":\"/guide/components/date-picker/\"},{\"text\":\"TimePicker\",\"link\":\"/guide/components/time-picker/\"}]},{\"text\":\"Dialogs & flyouts\",\"collapsed\":true,\"items\":[{\"text\":\"Callout\",\"link\":\"/guide/components/callout/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Layout\",\"collapsed\":true,\"items\":[{\"text\":\"Collapse\",\"link\":\"/guide/components/collapse/\"},{\"text\":\"Expander\",\"link\":\"/guide/components/expander/\"},{\"text\":\"Drawer\",\"link\":\"/guide/components/drawer/\"},{\"text\":\"Panel\",\"link\":\"/guide/components/panel/\"}]},{\"text\":\"Media\",\"collapsed\":true,\"items\":[{\"text\":\"Image\",\"link\":\"/guide/components/image/\"},{\"text\":\"Img\",\"link\":\"/guide/components/img/\"},{\"text\":\"ImgBox\",\"link\":\"/guide/components/img-box/\"},{\"text\":\"Persona\",\"link\":\"/guide/components/persona/\"}]},{\"text\":\"Menu & toolbars\",\"collapsed\":true,\"items\":[{\"text\":\"CommandBar\",\"link\":\"/guide/components/command-bar/\"},{\"text\":\"MenuFlyout\",\"link\":\"/guide/components/menu-flyout/\"},{\"text\":\"SwipeControl\",\"link\":\"/guide/components/swipe-control/\"}]},{\"text\":\"Navigation\",\"collapsed\":true,\"items\":[{\"text\":\"Breadcrumb\",\"link\":\"/guide/components/breadcrumb/\"},{\"text\":\"NavigationPanel\",\"link\":\"/guide/components/navigation-panel/\"},{\"text\":\"NavigationView\",\"link\":\"/guide/components/navigation-view/\"},{\"text\":\"Pivot\",\"link\":\"/guide/components/pivot/\"},{\"text\":\"Pagination\",\"link\":\"/guide/components/pagination/\"}]},{\"text\":\"Scrolling\",\"collapsed\":true,\"items\":[{\"text\":\"InfiniteScrollView\",\"link\":\"/guide/components/infinite-scroll-view/\"},{\"text\":\"ScrollStory\",\"link\":\"/guide/components/scroll-story/\"}]},{\"text\":\"Status & info\",\"collapsed\":true,\"items\":[{\"text\":\"Badge\",\"link\":\"/guide/components/badge/\"},{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"ProgressBar\",\"link\":\"/guide/components/progress-bar/\"},{\"text\":\"ProgressRing\",\"link\":\"/guide/components/progress-ring/\"}]},{\"text\":\"Styles\",\"collapsed\":true,\"items\":[{\"text\":\"AnimatedIcon\",\"link\":\"/guide/components/animated-icon/\"},{\"text\":\"IconElement\",\"link\":\"/guide/components/icon-element/\"},{\"text\":\"RevealContainer\",\"link\":\"/guide/components/reveal-container/\"},{\"text\":\"Shimmer\",\"link\":\"/guide/components/shimmer/\"}]},{\"text\":\"Text\",\"collapsed\":true,\"items\":[{\"text\":\"SearchBox\",\"link\":\"/guide/components/search-box/\"},{\"text\":\"TextBox\",\"link\":\"/guide/components/text-box/\"},{\"text\":\"TextField\",\"link\":\"/guide/components/text-field/\"},{\"text\":\"VerifyBox\",\"link\":\"/guide/components/verify-box/\"}]},{\"text\":\"Windowing\",\"collapsed\":true,\"items\":[{\"text\":\"WebWindow\",\"link\":\"/guide/components/web-window/\"}]},{\"text\":\"Global\",\"collapsed\":true,\"items\":[{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Advance\",\"collapsed\":true,\"items\":[{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git a/guide/components/icon-element/emits.html b/guide/components/icon-element/emits.html
new file mode 100644
index 0000000..92c9ac4
--- /dev/null
+++ b/guide/components/icon-element/emits.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>vfluent3</title>
+    <meta name="description" content="A Vue3 component library for Fluent UI">
+    <meta name="generator" content="VitePress v1.0.0-rc.45">
+    <link rel="preload stylesheet" href="/VFluent3/assets/style.BabQegKX.css" as="style">
+    
+    <script type="module" src="/VFluent3/assets/app.CSutcJ2E.js"></script>
+    <link rel="preload" href="/VFluent3/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/framework.DvIFzl91.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/theme.CgqFBnN_.js">
+    <link rel="modulepreload" href="/VFluent3/assets/guide_components_icon-element_emits.md.D5TXFdTZ.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-19c990f1><div class="wrapper" data-v-19c990f1><div class="container" data-v-19c990f1><div class="title" data-v-19c990f1><div class="VPNavBarTitle has-sidebar" data-v-19c990f1 data-v-ab179fa1><a class="title" href="/VFluent3/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>VFluent3</span><!--[--><!--]--></a></div></div><div class="content" data-v-19c990f1><div class="content-body" data-v-19c990f1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-19c990f1><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-19c990f1 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Guide</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-19c990f1 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-19c990f1 data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-19c990f1 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-19c990f1><div class="divider-line" data-v-19c990f1></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-d2ecc192><button data-v-d2ecc192>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-575e6a36><div class="curtain" data-v-575e6a36></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-575e6a36><span class="visually-hidden" id="sidebar-aria-label" data-v-575e6a36> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Basic input</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/button/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/check-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CheckBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/combobox/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Combobox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/details-list/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DetailsList</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drop-down/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DropDown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio-group/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RadioGroup</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/rating-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RatingControl</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/slider/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/toggle-switch/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ToggleSwitch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tag/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Tag</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Collections</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/flip-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>FlipView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/list-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ListView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tree-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TreeView</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Date & Time</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarDatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/time-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TimePicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Dialogs & flyouts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/callout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Callout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Layout</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/collapse/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Collapse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/expander/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Expander</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drawer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Panel</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Media</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/image/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Img</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ImgBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/persona/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Persona</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Menu & toolbars</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/command-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CommandBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/menu-flyout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MenuFlyout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/swipe-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SwipeControl</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Navigation</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/breadcrumb/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationPanel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pivot/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pivot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pagination/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pagination</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Scrolling</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/infinite-scroll-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfiniteScrollView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/scroll-story/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ScrollStory</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Status & info</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/badge/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-ring/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressRing</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Styles</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/animated-icon/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>AnimatedIcon</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/icon-element/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>IconElement</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/reveal-container/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RevealContainer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/shimmer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Shimmer</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Text</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/search-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SearchBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-field/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextField</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/verify-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>VerifyBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Windowing</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/web-window/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>WebWindow</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Global</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Advance</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-935f8a84><div class="content" data-v-935f8a84><div class="outline-marker" data-v-935f8a84></div><div class="outline-title" role="heading" aria-level="2" data-v-935f8a84>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-935f8a84><span class="visually-hidden" id="doc-outline-aria-label" data-v-935f8a84> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-935f8a84 data-v-b933a997><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _VFluent3_guide_components_icon-element_emits" data-v-39a288b8><div><h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-label="Permalink to &quot;Emits&quot;">​</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead></table></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-09de1c0f><!--[--><!--]--><!----><nav class="prev-next" data-v-09de1c0f><div class="pager" data-v-09de1c0f><!----></div><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link next" href="/VFluent3/guide/components/button/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Next page</span><span class="title" data-v-09de1c0f>Button</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>MIT Licensed</p><p class="copyright" data-v-e315a0ad>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_calendar-date-picker_properties.md\":\"DXRjmMG8\",\"guide_components_image_properties.md\":\"DGanRzCb\",\"guide_components_img-box_index.md\":\"DYtggkf_\",\"guide_components_img_emits.md\":\"BlE7jvZQ\",\"guide_components_img_index.md\":\"Bm9FiuU4\",\"guide_components_icon-element_properties.md\":\"8Oakruwc\",\"guide_components_img_properties.md\":\"B42YSocI\",\"guide_components_drawer_index.md\":\"D_vpnCpE\",\"guide_components_verify-box_emits.md\":\"DT17Iazx\",\"guide_components_calendar-date-picker_index.md\":\"BdHjrurh\",\"guide_components_rating-control_index.md\":\"Q9l5Lfrr\",\"guide_components_rating-control_properties.md\":\"DKprnl0i\",\"guide_components_calendar-view_index.md\":\"zdoRYVx1\",\"guide_components_animated-icon_index.md\":\"yZDMzCFe\",\"guide_components_calendar-date-picker_emits.md\":\"D5OkfR8j\",\"guide_components_badge_index.md\":\"Bb4crrJn\",\"guide_components_image_index.md\":\"B7X6cWAZ\",\"guide_components_slider_index.md\":\"C7zZ2d-W\",\"guide_components_radio-group_index.md\":\"CVfh3h5H\",\"guide_components_swipe-control_index.md\":\"DwrDVPc1\",\"guide_components_color-picker_emits.md\":\"BHDXVtBQ\",\"guide_components_radio_index.md\":\"90as5QGp\",\"guide_components_pagination_properties.md\":\"JUAPvcTL\",\"guide_components_persona_properties.md\":\"DUTPhPMp\",\"guide_components_combo-box_emits.md\":\"Dh5R-qEv\",\"guide_components_pivot_emits.md\":\"BTJPgNpy\",\"guide_components_pagination_index.md\":\"CnW2zAht\",\"guide_components_flip-view_properties.md\":\"BqZ4hhgU\",\"guide_components_icon-element_emits.md\":\"D5TXFdTZ\",\"guide_components_flip-view_index.md\":\"DefnDOv6\",\"guide_components_navigation-panel_index.md\":\"6mO__sSK\",\"guide_components_rating-control_emits.md\":\"blvomSeC\",\"guide_components_icon-element_index.md\":\"DQ8K7JNn\",\"guide_components_navigation-view_index.md\":\"4AQRiz1k\",\"guide_components_toggle-switch_emits.md\":\"CLGzrNut\",\"guide_components_toggle-switch_index.md\":\"61en_q9-\",\"guide_components_scroll-story_index.md\":\"Vpgb1HSV\",\"guide_components_reveal-container_index.md\":\"Cut2r4tV\",\"guide_components_search-box_emits.md\":\"-d9sWNNt\",\"guide_components_search-box_properties.md\":\"DEKFfPFw\",\"guide_components_shimmer_emits.md\":\"CTMInlI3\",\"guide_components_tag_index.md\":\"BhhxkcHn\",\"guide_components_search-box_index.md\":\"DgkrY0oY\",\"guide_components_shimmer_index.md\":\"iZlHuTxw\",\"guide_components_shimmer_properties.md\":\"CdkU1o6H\",\"guide_components_tree-view_index.md\":\"CUrwan4q\",\"guide_components_text-field_index.md\":\"CXSimJtj\",\"guide_components_text-box_index.md\":\"C5moAPfB\",\"guide_components_progress-ring_properties.md\":\"Dc08Uiff\",\"guide_components_toggle-switch_properties.md\":\"tFppK_IS\",\"guide_components_radio-group_emits.md\":\"cEDzKVnN\",\"guide_components_collapse_index.md\":\"N9Iu5-2v\",\"guide_components_image_emits.md\":\"lmlz2xJd\",\"guide_components_callout_index.md\":\"D9RU33w6\",\"guide_components_pivot_index.md\":\"B_vwQL-5\",\"guide_components_command-bar_index.md\":\"Cp4_rrGB\",\"guide_components_pagination_emits.md\":\"Dng86A22\",\"guide_components_button_index.md\":\"7sqT2MQP\",\"guide_components_info-box_properties.md\":\"BI7Nvk-E\",\"guide_components_drop-down_emits.md\":\"BE95TdKW\",\"guide_components_expander_index.md\":\"BKgcUJzQ\",\"guide_components_message-bar_index.md\":\"AEtAWlF8\",\"guide_components_menu-flyout_index.md\":\"Csa7irPj\",\"guide_components_panel_index.md\":\"CsTu0bXo\",\"guide_components_panel_properties.md\":\"BaxoCYKq\",\"guide_components_progress-bar_emits.md\":\"BcwXUpsF\",\"guide_components_progress-bar_properties.md\":\"TxiS9ZMA\",\"guide_components_progress-ring_emits.md\":\"D2Y6hIZ9\",\"guide_components_color-picker_index.md\":\"DCc4ixcU\",\"guide_components_progress-ring_index.md\":\"CPb-ZEPE\",\"guide_components_color-picker_properties.md\":\"wcXK29Vl\",\"guide_components_time-picker_index.md\":\"CQJdRRaG\",\"guide_components_drop-down_properties.md\":\"Bwlkpr1q\",\"guide_components_infinite-scroll-view_index.md\":\"yAuD807x\",\"guide_components_check-box_index.md\":\"FYgdu4oq\",\"guide_components_progress-bar_index.md\":\"D8vHQw5V\",\"guide_components_combo-box_index.md\":\"DTyu3eNd\",\"guide_components_info-box_emits.md\":\"DlEwpkkq\",\"guide_components_drop-down_index.md\":\"BZzJZQWq\",\"guide_components_list-view_index.md\":\"BoYvMzb0\",\"guide_components_verify-box_properties.md\":\"CW6W8fFf\",\"guide_components_verify-box_index.md\":\"DwSB40wR\",\"guide_index.md\":\"Bndlt3sL\",\"guide_components_web-window_index.md\":\"Bxc8vEeI\",\"index.md\":\"MTRqI42u\",\"guide_components_combo-box_properties.md\":\"AWfHzV6x\",\"guide_components_combobox_emits.md\":\"CGB6WLt8\",\"guide_components_combobox_properties.md\":\"Bja0hMou\",\"guide_components_details-list_index.md\":\"CcgOCIyt\",\"guide_components_info-box_index.md\":\"vXh-_DsL\",\"guide_components_combobox_index.md\":\"CsPkY6YB\",\"guide_components_date-picker_index.md\":\"12vmUIup\",\"guide_components_flip-view_emits.md\":\"DCheHjDj\",\"guide_components_panel_emits.md\":\"DG0REDq8\",\"guide_components_breadcrumb_index.md\":\"DyDm7PeP\",\"guide_components_radio-group_properties.md\":\"BnPxoKsQ\",\"guide_components_persona_emits.md\":\"CnsDPKRU\",\"guide_components_pivot_properties.md\":\"BmoLpPi1\",\"guide_components_persona_index.md\":\"DT00jby4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vfluent3\",\"description\":\"A Vue3 component library for Fluent UI\",\"base\":\"/VFluent3/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"VFluent3\",\"footer\":{\"message\":\"MIT Licensed\",\"copyright\":\"Copyright © Creator SN - 2022\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/\"}],\"sidebar\":[{\"text\":\"Basic input\",\"collapsed\":true,\"items\":[{\"text\":\"Button\",\"link\":\"/guide/components/button/\"},{\"text\":\"CheckBox\",\"link\":\"/guide/components/check-box/\"},{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"},{\"text\":\"Combobox\",\"link\":\"/guide/components/combobox/\"},{\"text\":\"DetailsList\",\"link\":\"/guide/components/details-list/\"},{\"text\":\"DropDown\",\"link\":\"/guide/components/drop-down/\"},{\"text\":\"Radio\",\"link\":\"/guide/components/radio/\"},{\"text\":\"RadioGroup\",\"link\":\"/guide/components/radio-group/\"},{\"text\":\"RatingControl\",\"link\":\"/guide/components/rating-control/\"},{\"text\":\"Slider\",\"link\":\"/guide/components/slider/\"},{\"text\":\"ToggleSwitch\",\"link\":\"/guide/components/toggle-switch/\"},{\"text\":\"Tag\",\"link\":\"/guide/components/tag/\"}]},{\"text\":\"Collections\",\"collapsed\":true,\"items\":[{\"text\":\"FlipView\",\"link\":\"/guide/components/flip-view/\"},{\"text\":\"ListView\",\"link\":\"/guide/components/list-view/\"},{\"text\":\"TreeView\",\"link\":\"/guide/components/tree-view/\"}]},{\"text\":\"Date & Time\",\"collapsed\":true,\"items\":[{\"text\":\"CalendarDatePicker\",\"link\":\"/guide/components/calendar-date-picker/\"},{\"text\":\"CalendarView\",\"link\":\"/guide/components/calendar-view/\"},{\"text\":\"DatePicker\",\"link\":\"/guide/components/date-picker/\"},{\"text\":\"TimePicker\",\"link\":\"/guide/components/time-picker/\"}]},{\"text\":\"Dialogs & flyouts\",\"collapsed\":true,\"items\":[{\"text\":\"Callout\",\"link\":\"/guide/components/callout/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Layout\",\"collapsed\":true,\"items\":[{\"text\":\"Collapse\",\"link\":\"/guide/components/collapse/\"},{\"text\":\"Expander\",\"link\":\"/guide/components/expander/\"},{\"text\":\"Drawer\",\"link\":\"/guide/components/drawer/\"},{\"text\":\"Panel\",\"link\":\"/guide/components/panel/\"}]},{\"text\":\"Media\",\"collapsed\":true,\"items\":[{\"text\":\"Image\",\"link\":\"/guide/components/image/\"},{\"text\":\"Img\",\"link\":\"/guide/components/img/\"},{\"text\":\"ImgBox\",\"link\":\"/guide/components/img-box/\"},{\"text\":\"Persona\",\"link\":\"/guide/components/persona/\"}]},{\"text\":\"Menu & toolbars\",\"collapsed\":true,\"items\":[{\"text\":\"CommandBar\",\"link\":\"/guide/components/command-bar/\"},{\"text\":\"MenuFlyout\",\"link\":\"/guide/components/menu-flyout/\"},{\"text\":\"SwipeControl\",\"link\":\"/guide/components/swipe-control/\"}]},{\"text\":\"Navigation\",\"collapsed\":true,\"items\":[{\"text\":\"Breadcrumb\",\"link\":\"/guide/components/breadcrumb/\"},{\"text\":\"NavigationPanel\",\"link\":\"/guide/components/navigation-panel/\"},{\"text\":\"NavigationView\",\"link\":\"/guide/components/navigation-view/\"},{\"text\":\"Pivot\",\"link\":\"/guide/components/pivot/\"},{\"text\":\"Pagination\",\"link\":\"/guide/components/pagination/\"}]},{\"text\":\"Scrolling\",\"collapsed\":true,\"items\":[{\"text\":\"InfiniteScrollView\",\"link\":\"/guide/components/infinite-scroll-view/\"},{\"text\":\"ScrollStory\",\"link\":\"/guide/components/scroll-story/\"}]},{\"text\":\"Status & info\",\"collapsed\":true,\"items\":[{\"text\":\"Badge\",\"link\":\"/guide/components/badge/\"},{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"ProgressBar\",\"link\":\"/guide/components/progress-bar/\"},{\"text\":\"ProgressRing\",\"link\":\"/guide/components/progress-ring/\"}]},{\"text\":\"Styles\",\"collapsed\":true,\"items\":[{\"text\":\"AnimatedIcon\",\"link\":\"/guide/components/animated-icon/\"},{\"text\":\"IconElement\",\"link\":\"/guide/components/icon-element/\"},{\"text\":\"RevealContainer\",\"link\":\"/guide/components/reveal-container/\"},{\"text\":\"Shimmer\",\"link\":\"/guide/components/shimmer/\"}]},{\"text\":\"Text\",\"collapsed\":true,\"items\":[{\"text\":\"SearchBox\",\"link\":\"/guide/components/search-box/\"},{\"text\":\"TextBox\",\"link\":\"/guide/components/text-box/\"},{\"text\":\"TextField\",\"link\":\"/guide/components/text-field/\"},{\"text\":\"VerifyBox\",\"link\":\"/guide/components/verify-box/\"}]},{\"text\":\"Windowing\",\"collapsed\":true,\"items\":[{\"text\":\"WebWindow\",\"link\":\"/guide/components/web-window/\"}]},{\"text\":\"Global\",\"collapsed\":true,\"items\":[{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Advance\",\"collapsed\":true,\"items\":[{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git a/guide/components/icon-element/index.html b/guide/components/icon-element/index.html
new file mode 100644
index 0000000..7451872
--- /dev/null
+++ b/guide/components/icon-element/index.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>IconElement | vfluent3</title>
+    <meta name="description" content="A Vue3 component library for Fluent UI">
+    <meta name="generator" content="VitePress v1.0.0-rc.45">
+    <link rel="preload stylesheet" href="/VFluent3/assets/style.BabQegKX.css" as="style">
+    
+    <script type="module" src="/VFluent3/assets/app.CSutcJ2E.js"></script>
+    <link rel="preload" href="/VFluent3/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/framework.DvIFzl91.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/theme.CgqFBnN_.js">
+    <link rel="modulepreload" href="/VFluent3/assets/guide_components_icon-element_index.md.DQ8K7JNn.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-19c990f1><div class="wrapper" data-v-19c990f1><div class="container" data-v-19c990f1><div class="title" data-v-19c990f1><div class="VPNavBarTitle has-sidebar" data-v-19c990f1 data-v-ab179fa1><a class="title" href="/VFluent3/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>VFluent3</span><!--[--><!--]--></a></div></div><div class="content" data-v-19c990f1><div class="content-body" data-v-19c990f1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-19c990f1><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-19c990f1 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Guide</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-19c990f1 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-19c990f1 data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-19c990f1 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-19c990f1><div class="divider-line" data-v-19c990f1></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-d2ecc192><button data-v-d2ecc192>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-575e6a36><div class="curtain" data-v-575e6a36></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-575e6a36><span class="visually-hidden" id="sidebar-aria-label" data-v-575e6a36> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Basic input</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/button/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/check-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CheckBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/combobox/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Combobox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/details-list/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DetailsList</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drop-down/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DropDown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio-group/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RadioGroup</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/rating-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RatingControl</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/slider/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/toggle-switch/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ToggleSwitch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tag/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Tag</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Collections</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/flip-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>FlipView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/list-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ListView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tree-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TreeView</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Date & Time</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarDatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/time-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TimePicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Dialogs & flyouts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/callout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Callout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Layout</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/collapse/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Collapse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/expander/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Expander</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drawer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Panel</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Media</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/image/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Img</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ImgBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/persona/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Persona</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Menu & toolbars</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/command-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CommandBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/menu-flyout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MenuFlyout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/swipe-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SwipeControl</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Navigation</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/breadcrumb/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationPanel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pivot/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pivot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pagination/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pagination</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Scrolling</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/infinite-scroll-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfiniteScrollView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/scroll-story/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ScrollStory</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Status & info</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/badge/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-ring/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressRing</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible has-active" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Styles</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/animated-icon/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>AnimatedIcon</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/icon-element/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>IconElement</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/reveal-container/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RevealContainer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/shimmer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Shimmer</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Text</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/search-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SearchBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-field/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextField</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/verify-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>VerifyBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Windowing</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/web-window/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>WebWindow</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Global</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Advance</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-935f8a84><div class="content" data-v-935f8a84><div class="outline-marker" data-v-935f8a84></div><div class="outline-title" role="heading" aria-level="2" data-v-935f8a84>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-935f8a84><span class="visually-hidden" id="doc-outline-aria-label" data-v-935f8a84> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-935f8a84 data-v-b933a997><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _VFluent3_guide_components_icon-element_" data-v-39a288b8><div><h3 id="iconelement-demo" tabindex="-1">IconElement-DEMO <a class="header-anchor" href="#iconelement-demo" aria-label="Permalink to &quot;IconElement-DEMO&quot;">​</a></h3><hr><!----><h3 id="iconelement-positions" tabindex="-1">IconElement-Positions <a class="header-anchor" href="#iconelement-positions" aria-label="Permalink to &quot;IconElement-Positions&quot;">​</a></h3><hr><p>Left, Right</p><div class="fv-IconElement light" style="width:34px;height:34px;border-radius:6px;"><!--[--><div class="left icon-element-item"><i class="ms-Icon--Dial1 icon-element ms-Icon" style="font-size:32px;color:#000;background-image:#000;background-clip:text;-webkit-background-image:#000;-webkit-background-clip:text;-webkit-text-fill-color:#000;"></i></div><div class="right icon-element-item"><i class="ms-Icon--Dial2 icon-element ms-Icon" style="font-size:32px;color:#000;background-image:#000;background-clip:text;-webkit-background-image:#000;-webkit-background-clip:text;-webkit-text-fill-color:#000;"></i></div><!--]--></div><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-IconElement</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">positionH</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-IconElement</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>Top, Bottom</p><div class="fv-IconElement light" style="width:34px;height:34px;border-radius:6px;"><!--[--><div class="top icon-element-item"><i class="ms-Icon--Dial3 icon-element ms-Icon" style="font-size:32px;color:#000;background-image:#000;background-clip:text;-webkit-background-image:#000;-webkit-background-clip:text;-webkit-text-fill-color:#000;"></i></div><div class="bottom icon-element-item"><i class="ms-Icon--Dial4 icon-element ms-Icon" style="font-size:32px;color:#000;background-image:#000;background-clip:text;-webkit-background-image:#000;-webkit-background-clip:text;-webkit-text-fill-color:#000;"></i></div><!--]--></div><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-IconElement</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">positionV</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-IconElement</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>Top-left, Top-right, Bottom-left, Bottom-right</p><div class="fv-IconElement light" style="width:34px;height:34px;border-radius:6px;"><!--[--><div class="top-left icon-element-item"><i class="ms-Icon--Dial5 icon-element ms-Icon" style="font-size:32px;color:#000;background-image:#000;background-clip:text;-webkit-background-image:#000;-webkit-background-clip:text;-webkit-text-fill-color:#000;"></i></div><div class="top-right icon-element-item"><i class="ms-Icon--Dial6 icon-element ms-Icon" style="font-size:32px;color:#000;background-image:#000;background-clip:text;-webkit-background-image:#000;-webkit-background-clip:text;-webkit-text-fill-color:#000;"></i></div><div class="bottom-left icon-element-item"><i class="ms-Icon--Dial7 icon-element ms-Icon" style="font-size:32px;color:#000;background-image:#000;background-clip:text;-webkit-background-image:#000;-webkit-background-clip:text;-webkit-text-fill-color:#000;"></i></div><div class="bottom-right icon-element-item"><i class="ms-Icon--Dial8 icon-element ms-Icon" style="font-size:32px;color:#000;background-image:#000;background-clip:text;-webkit-background-image:#000;-webkit-background-clip:text;-webkit-text-fill-color:#000;"></i></div><!--]--></div><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-IconElement</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">positionsFour</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-IconElement</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-javascript vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">positionH</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: [</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Dial1&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        position: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;left&#39;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Dial2&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        position: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;right&#39;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">],</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">positionV</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: [</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Dial3&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        position: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;top&#39;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Dial4&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        position: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;bottom&#39;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">],</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">positionsFour</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: [</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Dial5&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        position: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;top-left&#39;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Dial6&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        position: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;top-right&#39;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Dial7&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        position: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;bottom-left&#39;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Dial8&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        position: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;bottom-right&#39;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br></div></div><h3 id="iconelement-icon-button" tabindex="-1">IconElement-Icon Button <a class="header-anchor" href="#iconelement-icon-button" aria-label="Permalink to &quot;IconElement-Icon Button&quot;">​</a></h3><hr><div class="fv-IconElement light icon-element-btn" style="width:35px;height:35px;border-radius:6px;"><!--[--><div class="icon-element-item"><i class="ms-Icon--HeartFill icon-element ms-Icon" style="font-size:32px;color:rgba(203, 22, 55, 1);background-image:rgba(203, 22, 55, 1);background-clip:text;-webkit-background-image:rgba(203, 22, 55, 1);-webkit-background-clip:text;-webkit-text-fill-color:rgba(203, 22, 55, 1);"></i></div><div class="icon-element-item"><i class="ms-Icon--Heart icon-element ms-Icon" style="font-size:32px;color:#000;background-image:#000;background-clip:text;-webkit-background-image:#000;-webkit-background-clip:text;-webkit-text-fill-color:#000;"></i></div><!--]--></div><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-IconElement</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">heart</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">iconButton</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> paddingWidth</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;3&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-IconElement</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">value</td><td style="text-align:center;">Array</td><td style="text-align:center;">String</td><td style="text-align:center;">AppIconDefault</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">fontSize</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">16px</td><td style="text-align:center;">IconElement字体大小</td></tr><tr><td style="text-align:center;">paddingWidth</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">0px</td><td style="text-align:center;">IconElement内边距</td></tr><tr><td style="text-align:center;">iconButton</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否以图标按钮样式呈现</td></tr><tr><td style="text-align:center;">borderRadius</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">0px</td><td style="text-align:center;">图标按钮圆角</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">system</td><td style="text-align:center;">主题样式, 包含<code>light</code>, <code>dark</code>, <code>system</code>, <code>custom</code>几种样式</td></tr></tbody></table><h3 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to &quot;Events&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">事件名(Name)</th><th style="text-align:center;">参数类型(args)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">click</td><td style="text-align:center;">event</td><td style="text-align:center;">Button onclick</td></tr></tbody></table></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-09de1c0f><!--[--><!--]--><!----><nav class="prev-next" data-v-09de1c0f><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link prev" href="/VFluent3/guide/components/animated-icon/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Previous page</span><span class="title" data-v-09de1c0f>AnimatedIcon</span><!--]--></a></div><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link next" href="/VFluent3/guide/components/reveal-container/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Next page</span><span class="title" data-v-09de1c0f>RevealContainer</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>MIT Licensed</p><p class="copyright" data-v-e315a0ad>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_calendar-date-picker_properties.md\":\"DXRjmMG8\",\"guide_components_image_properties.md\":\"DGanRzCb\",\"guide_components_img-box_index.md\":\"DYtggkf_\",\"guide_components_img_emits.md\":\"BlE7jvZQ\",\"guide_components_img_index.md\":\"Bm9FiuU4\",\"guide_components_icon-element_properties.md\":\"8Oakruwc\",\"guide_components_img_properties.md\":\"B42YSocI\",\"guide_components_drawer_index.md\":\"D_vpnCpE\",\"guide_components_verify-box_emits.md\":\"DT17Iazx\",\"guide_components_calendar-date-picker_index.md\":\"BdHjrurh\",\"guide_components_rating-control_index.md\":\"Q9l5Lfrr\",\"guide_components_rating-control_properties.md\":\"DKprnl0i\",\"guide_components_calendar-view_index.md\":\"zdoRYVx1\",\"guide_components_animated-icon_index.md\":\"yZDMzCFe\",\"guide_components_calendar-date-picker_emits.md\":\"D5OkfR8j\",\"guide_components_badge_index.md\":\"Bb4crrJn\",\"guide_components_image_index.md\":\"B7X6cWAZ\",\"guide_components_slider_index.md\":\"C7zZ2d-W\",\"guide_components_radio-group_index.md\":\"CVfh3h5H\",\"guide_components_swipe-control_index.md\":\"DwrDVPc1\",\"guide_components_color-picker_emits.md\":\"BHDXVtBQ\",\"guide_components_radio_index.md\":\"90as5QGp\",\"guide_components_pagination_properties.md\":\"JUAPvcTL\",\"guide_components_persona_properties.md\":\"DUTPhPMp\",\"guide_components_combo-box_emits.md\":\"Dh5R-qEv\",\"guide_components_pivot_emits.md\":\"BTJPgNpy\",\"guide_components_pagination_index.md\":\"CnW2zAht\",\"guide_components_flip-view_properties.md\":\"BqZ4hhgU\",\"guide_components_icon-element_emits.md\":\"D5TXFdTZ\",\"guide_components_flip-view_index.md\":\"DefnDOv6\",\"guide_components_navigation-panel_index.md\":\"6mO__sSK\",\"guide_components_rating-control_emits.md\":\"blvomSeC\",\"guide_components_icon-element_index.md\":\"DQ8K7JNn\",\"guide_components_navigation-view_index.md\":\"4AQRiz1k\",\"guide_components_toggle-switch_emits.md\":\"CLGzrNut\",\"guide_components_toggle-switch_index.md\":\"61en_q9-\",\"guide_components_scroll-story_index.md\":\"Vpgb1HSV\",\"guide_components_reveal-container_index.md\":\"Cut2r4tV\",\"guide_components_search-box_emits.md\":\"-d9sWNNt\",\"guide_components_search-box_properties.md\":\"DEKFfPFw\",\"guide_components_shimmer_emits.md\":\"CTMInlI3\",\"guide_components_tag_index.md\":\"BhhxkcHn\",\"guide_components_search-box_index.md\":\"DgkrY0oY\",\"guide_components_shimmer_index.md\":\"iZlHuTxw\",\"guide_components_shimmer_properties.md\":\"CdkU1o6H\",\"guide_components_tree-view_index.md\":\"CUrwan4q\",\"guide_components_text-field_index.md\":\"CXSimJtj\",\"guide_components_text-box_index.md\":\"C5moAPfB\",\"guide_components_progress-ring_properties.md\":\"Dc08Uiff\",\"guide_components_toggle-switch_properties.md\":\"tFppK_IS\",\"guide_components_radio-group_emits.md\":\"cEDzKVnN\",\"guide_components_collapse_index.md\":\"N9Iu5-2v\",\"guide_components_image_emits.md\":\"lmlz2xJd\",\"guide_components_callout_index.md\":\"D9RU33w6\",\"guide_components_pivot_index.md\":\"B_vwQL-5\",\"guide_components_command-bar_index.md\":\"Cp4_rrGB\",\"guide_components_pagination_emits.md\":\"Dng86A22\",\"guide_components_button_index.md\":\"7sqT2MQP\",\"guide_components_info-box_properties.md\":\"BI7Nvk-E\",\"guide_components_drop-down_emits.md\":\"BE95TdKW\",\"guide_components_expander_index.md\":\"BKgcUJzQ\",\"guide_components_message-bar_index.md\":\"AEtAWlF8\",\"guide_components_menu-flyout_index.md\":\"Csa7irPj\",\"guide_components_panel_index.md\":\"CsTu0bXo\",\"guide_components_panel_properties.md\":\"BaxoCYKq\",\"guide_components_progress-bar_emits.md\":\"BcwXUpsF\",\"guide_components_progress-bar_properties.md\":\"TxiS9ZMA\",\"guide_components_progress-ring_emits.md\":\"D2Y6hIZ9\",\"guide_components_color-picker_index.md\":\"DCc4ixcU\",\"guide_components_progress-ring_index.md\":\"CPb-ZEPE\",\"guide_components_color-picker_properties.md\":\"wcXK29Vl\",\"guide_components_time-picker_index.md\":\"CQJdRRaG\",\"guide_components_drop-down_properties.md\":\"Bwlkpr1q\",\"guide_components_infinite-scroll-view_index.md\":\"yAuD807x\",\"guide_components_check-box_index.md\":\"FYgdu4oq\",\"guide_components_progress-bar_index.md\":\"D8vHQw5V\",\"guide_components_combo-box_index.md\":\"DTyu3eNd\",\"guide_components_info-box_emits.md\":\"DlEwpkkq\",\"guide_components_drop-down_index.md\":\"BZzJZQWq\",\"guide_components_list-view_index.md\":\"BoYvMzb0\",\"guide_components_verify-box_properties.md\":\"CW6W8fFf\",\"guide_components_verify-box_index.md\":\"DwSB40wR\",\"guide_index.md\":\"Bndlt3sL\",\"guide_components_web-window_index.md\":\"Bxc8vEeI\",\"index.md\":\"MTRqI42u\",\"guide_components_combo-box_properties.md\":\"AWfHzV6x\",\"guide_components_combobox_emits.md\":\"CGB6WLt8\",\"guide_components_combobox_properties.md\":\"Bja0hMou\",\"guide_components_details-list_index.md\":\"CcgOCIyt\",\"guide_components_info-box_index.md\":\"vXh-_DsL\",\"guide_components_combobox_index.md\":\"CsPkY6YB\",\"guide_components_date-picker_index.md\":\"12vmUIup\",\"guide_components_flip-view_emits.md\":\"DCheHjDj\",\"guide_components_panel_emits.md\":\"DG0REDq8\",\"guide_components_breadcrumb_index.md\":\"DyDm7PeP\",\"guide_components_radio-group_properties.md\":\"BnPxoKsQ\",\"guide_components_persona_emits.md\":\"CnsDPKRU\",\"guide_components_pivot_properties.md\":\"BmoLpPi1\",\"guide_components_persona_index.md\":\"DT00jby4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vfluent3\",\"description\":\"A Vue3 component library for Fluent UI\",\"base\":\"/VFluent3/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"VFluent3\",\"footer\":{\"message\":\"MIT Licensed\",\"copyright\":\"Copyright © Creator SN - 2022\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/\"}],\"sidebar\":[{\"text\":\"Basic input\",\"collapsed\":true,\"items\":[{\"text\":\"Button\",\"link\":\"/guide/components/button/\"},{\"text\":\"CheckBox\",\"link\":\"/guide/components/check-box/\"},{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"},{\"text\":\"Combobox\",\"link\":\"/guide/components/combobox/\"},{\"text\":\"DetailsList\",\"link\":\"/guide/components/details-list/\"},{\"text\":\"DropDown\",\"link\":\"/guide/components/drop-down/\"},{\"text\":\"Radio\",\"link\":\"/guide/components/radio/\"},{\"text\":\"RadioGroup\",\"link\":\"/guide/components/radio-group/\"},{\"text\":\"RatingControl\",\"link\":\"/guide/components/rating-control/\"},{\"text\":\"Slider\",\"link\":\"/guide/components/slider/\"},{\"text\":\"ToggleSwitch\",\"link\":\"/guide/components/toggle-switch/\"},{\"text\":\"Tag\",\"link\":\"/guide/components/tag/\"}]},{\"text\":\"Collections\",\"collapsed\":true,\"items\":[{\"text\":\"FlipView\",\"link\":\"/guide/components/flip-view/\"},{\"text\":\"ListView\",\"link\":\"/guide/components/list-view/\"},{\"text\":\"TreeView\",\"link\":\"/guide/components/tree-view/\"}]},{\"text\":\"Date & Time\",\"collapsed\":true,\"items\":[{\"text\":\"CalendarDatePicker\",\"link\":\"/guide/components/calendar-date-picker/\"},{\"text\":\"CalendarView\",\"link\":\"/guide/components/calendar-view/\"},{\"text\":\"DatePicker\",\"link\":\"/guide/components/date-picker/\"},{\"text\":\"TimePicker\",\"link\":\"/guide/components/time-picker/\"}]},{\"text\":\"Dialogs & flyouts\",\"collapsed\":true,\"items\":[{\"text\":\"Callout\",\"link\":\"/guide/components/callout/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Layout\",\"collapsed\":true,\"items\":[{\"text\":\"Collapse\",\"link\":\"/guide/components/collapse/\"},{\"text\":\"Expander\",\"link\":\"/guide/components/expander/\"},{\"text\":\"Drawer\",\"link\":\"/guide/components/drawer/\"},{\"text\":\"Panel\",\"link\":\"/guide/components/panel/\"}]},{\"text\":\"Media\",\"collapsed\":true,\"items\":[{\"text\":\"Image\",\"link\":\"/guide/components/image/\"},{\"text\":\"Img\",\"link\":\"/guide/components/img/\"},{\"text\":\"ImgBox\",\"link\":\"/guide/components/img-box/\"},{\"text\":\"Persona\",\"link\":\"/guide/components/persona/\"}]},{\"text\":\"Menu & toolbars\",\"collapsed\":true,\"items\":[{\"text\":\"CommandBar\",\"link\":\"/guide/components/command-bar/\"},{\"text\":\"MenuFlyout\",\"link\":\"/guide/components/menu-flyout/\"},{\"text\":\"SwipeControl\",\"link\":\"/guide/components/swipe-control/\"}]},{\"text\":\"Navigation\",\"collapsed\":true,\"items\":[{\"text\":\"Breadcrumb\",\"link\":\"/guide/components/breadcrumb/\"},{\"text\":\"NavigationPanel\",\"link\":\"/guide/components/navigation-panel/\"},{\"text\":\"NavigationView\",\"link\":\"/guide/components/navigation-view/\"},{\"text\":\"Pivot\",\"link\":\"/guide/components/pivot/\"},{\"text\":\"Pagination\",\"link\":\"/guide/components/pagination/\"}]},{\"text\":\"Scrolling\",\"collapsed\":true,\"items\":[{\"text\":\"InfiniteScrollView\",\"link\":\"/guide/components/infinite-scroll-view/\"},{\"text\":\"ScrollStory\",\"link\":\"/guide/components/scroll-story/\"}]},{\"text\":\"Status & info\",\"collapsed\":true,\"items\":[{\"text\":\"Badge\",\"link\":\"/guide/components/badge/\"},{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"ProgressBar\",\"link\":\"/guide/components/progress-bar/\"},{\"text\":\"ProgressRing\",\"link\":\"/guide/components/progress-ring/\"}]},{\"text\":\"Styles\",\"collapsed\":true,\"items\":[{\"text\":\"AnimatedIcon\",\"link\":\"/guide/components/animated-icon/\"},{\"text\":\"IconElement\",\"link\":\"/guide/components/icon-element/\"},{\"text\":\"RevealContainer\",\"link\":\"/guide/components/reveal-container/\"},{\"text\":\"Shimmer\",\"link\":\"/guide/components/shimmer/\"}]},{\"text\":\"Text\",\"collapsed\":true,\"items\":[{\"text\":\"SearchBox\",\"link\":\"/guide/components/search-box/\"},{\"text\":\"TextBox\",\"link\":\"/guide/components/text-box/\"},{\"text\":\"TextField\",\"link\":\"/guide/components/text-field/\"},{\"text\":\"VerifyBox\",\"link\":\"/guide/components/verify-box/\"}]},{\"text\":\"Windowing\",\"collapsed\":true,\"items\":[{\"text\":\"WebWindow\",\"link\":\"/guide/components/web-window/\"}]},{\"text\":\"Global\",\"collapsed\":true,\"items\":[{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Advance\",\"collapsed\":true,\"items\":[{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git a/guide/components/icon-element/properties.html b/guide/components/icon-element/properties.html
new file mode 100644
index 0000000..d8e2c4d
--- /dev/null
+++ b/guide/components/icon-element/properties.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>vfluent3</title>
+    <meta name="description" content="A Vue3 component library for Fluent UI">
+    <meta name="generator" content="VitePress v1.0.0-rc.45">
+    <link rel="preload stylesheet" href="/VFluent3/assets/style.BabQegKX.css" as="style">
+    
+    <script type="module" src="/VFluent3/assets/app.CSutcJ2E.js"></script>
+    <link rel="preload" href="/VFluent3/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/framework.DvIFzl91.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/theme.CgqFBnN_.js">
+    <link rel="modulepreload" href="/VFluent3/assets/guide_components_icon-element_properties.md.8Oakruwc.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-19c990f1><div class="wrapper" data-v-19c990f1><div class="container" data-v-19c990f1><div class="title" data-v-19c990f1><div class="VPNavBarTitle has-sidebar" data-v-19c990f1 data-v-ab179fa1><a class="title" href="/VFluent3/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>VFluent3</span><!--[--><!--]--></a></div></div><div class="content" data-v-19c990f1><div class="content-body" data-v-19c990f1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-19c990f1><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-19c990f1 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Guide</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-19c990f1 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-19c990f1 data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-19c990f1 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-19c990f1><div class="divider-line" data-v-19c990f1></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-d2ecc192><button data-v-d2ecc192>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-575e6a36><div class="curtain" data-v-575e6a36></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-575e6a36><span class="visually-hidden" id="sidebar-aria-label" data-v-575e6a36> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Basic input</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/button/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/check-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CheckBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/combobox/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Combobox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/details-list/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DetailsList</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drop-down/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DropDown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio-group/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RadioGroup</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/rating-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RatingControl</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/slider/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/toggle-switch/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ToggleSwitch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tag/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Tag</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Collections</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/flip-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>FlipView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/list-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ListView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tree-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TreeView</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Date & Time</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarDatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/time-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TimePicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Dialogs & flyouts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/callout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Callout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Layout</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/collapse/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Collapse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/expander/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Expander</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drawer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Panel</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Media</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/image/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Img</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ImgBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/persona/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Persona</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Menu & toolbars</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/command-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CommandBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/menu-flyout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MenuFlyout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/swipe-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SwipeControl</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Navigation</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/breadcrumb/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationPanel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pivot/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pivot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pagination/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pagination</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Scrolling</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/infinite-scroll-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfiniteScrollView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/scroll-story/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ScrollStory</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Status & info</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/badge/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-ring/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressRing</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Styles</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/animated-icon/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>AnimatedIcon</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/icon-element/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>IconElement</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/reveal-container/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RevealContainer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/shimmer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Shimmer</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Text</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/search-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SearchBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-field/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextField</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/verify-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>VerifyBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Windowing</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/web-window/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>WebWindow</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Global</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Advance</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-935f8a84><div class="content" data-v-935f8a84><div class="outline-marker" data-v-935f8a84></div><div class="outline-title" role="heading" aria-level="2" data-v-935f8a84>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-935f8a84><span class="visually-hidden" id="doc-outline-aria-label" data-v-935f8a84> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-935f8a84 data-v-b933a997><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _VFluent3_guide_components_icon-element_properties" data-v-39a288b8><div><h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-label="Permalink to &quot;Properties&quot;">​</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead></table></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-09de1c0f><!--[--><!--]--><!----><nav class="prev-next" data-v-09de1c0f><div class="pager" data-v-09de1c0f><!----></div><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link next" href="/VFluent3/guide/components/button/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Next page</span><span class="title" data-v-09de1c0f>Button</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>MIT Licensed</p><p class="copyright" data-v-e315a0ad>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_calendar-date-picker_properties.md\":\"DXRjmMG8\",\"guide_components_image_properties.md\":\"DGanRzCb\",\"guide_components_img-box_index.md\":\"DYtggkf_\",\"guide_components_img_emits.md\":\"BlE7jvZQ\",\"guide_components_img_index.md\":\"Bm9FiuU4\",\"guide_components_icon-element_properties.md\":\"8Oakruwc\",\"guide_components_img_properties.md\":\"B42YSocI\",\"guide_components_drawer_index.md\":\"D_vpnCpE\",\"guide_components_verify-box_emits.md\":\"DT17Iazx\",\"guide_components_calendar-date-picker_index.md\":\"BdHjrurh\",\"guide_components_rating-control_index.md\":\"Q9l5Lfrr\",\"guide_components_rating-control_properties.md\":\"DKprnl0i\",\"guide_components_calendar-view_index.md\":\"zdoRYVx1\",\"guide_components_animated-icon_index.md\":\"yZDMzCFe\",\"guide_components_calendar-date-picker_emits.md\":\"D5OkfR8j\",\"guide_components_badge_index.md\":\"Bb4crrJn\",\"guide_components_image_index.md\":\"B7X6cWAZ\",\"guide_components_slider_index.md\":\"C7zZ2d-W\",\"guide_components_radio-group_index.md\":\"CVfh3h5H\",\"guide_components_swipe-control_index.md\":\"DwrDVPc1\",\"guide_components_color-picker_emits.md\":\"BHDXVtBQ\",\"guide_components_radio_index.md\":\"90as5QGp\",\"guide_components_pagination_properties.md\":\"JUAPvcTL\",\"guide_components_persona_properties.md\":\"DUTPhPMp\",\"guide_components_combo-box_emits.md\":\"Dh5R-qEv\",\"guide_components_pivot_emits.md\":\"BTJPgNpy\",\"guide_components_pagination_index.md\":\"CnW2zAht\",\"guide_components_flip-view_properties.md\":\"BqZ4hhgU\",\"guide_components_icon-element_emits.md\":\"D5TXFdTZ\",\"guide_components_flip-view_index.md\":\"DefnDOv6\",\"guide_components_navigation-panel_index.md\":\"6mO__sSK\",\"guide_components_rating-control_emits.md\":\"blvomSeC\",\"guide_components_icon-element_index.md\":\"DQ8K7JNn\",\"guide_components_navigation-view_index.md\":\"4AQRiz1k\",\"guide_components_toggle-switch_emits.md\":\"CLGzrNut\",\"guide_components_toggle-switch_index.md\":\"61en_q9-\",\"guide_components_scroll-story_index.md\":\"Vpgb1HSV\",\"guide_components_reveal-container_index.md\":\"Cut2r4tV\",\"guide_components_search-box_emits.md\":\"-d9sWNNt\",\"guide_components_search-box_properties.md\":\"DEKFfPFw\",\"guide_components_shimmer_emits.md\":\"CTMInlI3\",\"guide_components_tag_index.md\":\"BhhxkcHn\",\"guide_components_search-box_index.md\":\"DgkrY0oY\",\"guide_components_shimmer_index.md\":\"iZlHuTxw\",\"guide_components_shimmer_properties.md\":\"CdkU1o6H\",\"guide_components_tree-view_index.md\":\"CUrwan4q\",\"guide_components_text-field_index.md\":\"CXSimJtj\",\"guide_components_text-box_index.md\":\"C5moAPfB\",\"guide_components_progress-ring_properties.md\":\"Dc08Uiff\",\"guide_components_toggle-switch_properties.md\":\"tFppK_IS\",\"guide_components_radio-group_emits.md\":\"cEDzKVnN\",\"guide_components_collapse_index.md\":\"N9Iu5-2v\",\"guide_components_image_emits.md\":\"lmlz2xJd\",\"guide_components_callout_index.md\":\"D9RU33w6\",\"guide_components_pivot_index.md\":\"B_vwQL-5\",\"guide_components_command-bar_index.md\":\"Cp4_rrGB\",\"guide_components_pagination_emits.md\":\"Dng86A22\",\"guide_components_button_index.md\":\"7sqT2MQP\",\"guide_components_info-box_properties.md\":\"BI7Nvk-E\",\"guide_components_drop-down_emits.md\":\"BE95TdKW\",\"guide_components_expander_index.md\":\"BKgcUJzQ\",\"guide_components_message-bar_index.md\":\"AEtAWlF8\",\"guide_components_menu-flyout_index.md\":\"Csa7irPj\",\"guide_components_panel_index.md\":\"CsTu0bXo\",\"guide_components_panel_properties.md\":\"BaxoCYKq\",\"guide_components_progress-bar_emits.md\":\"BcwXUpsF\",\"guide_components_progress-bar_properties.md\":\"TxiS9ZMA\",\"guide_components_progress-ring_emits.md\":\"D2Y6hIZ9\",\"guide_components_color-picker_index.md\":\"DCc4ixcU\",\"guide_components_progress-ring_index.md\":\"CPb-ZEPE\",\"guide_components_color-picker_properties.md\":\"wcXK29Vl\",\"guide_components_time-picker_index.md\":\"CQJdRRaG\",\"guide_components_drop-down_properties.md\":\"Bwlkpr1q\",\"guide_components_infinite-scroll-view_index.md\":\"yAuD807x\",\"guide_components_check-box_index.md\":\"FYgdu4oq\",\"guide_components_progress-bar_index.md\":\"D8vHQw5V\",\"guide_components_combo-box_index.md\":\"DTyu3eNd\",\"guide_components_info-box_emits.md\":\"DlEwpkkq\",\"guide_components_drop-down_index.md\":\"BZzJZQWq\",\"guide_components_list-view_index.md\":\"BoYvMzb0\",\"guide_components_verify-box_properties.md\":\"CW6W8fFf\",\"guide_components_verify-box_index.md\":\"DwSB40wR\",\"guide_index.md\":\"Bndlt3sL\",\"guide_components_web-window_index.md\":\"Bxc8vEeI\",\"index.md\":\"MTRqI42u\",\"guide_components_combo-box_properties.md\":\"AWfHzV6x\",\"guide_components_combobox_emits.md\":\"CGB6WLt8\",\"guide_components_combobox_properties.md\":\"Bja0hMou\",\"guide_components_details-list_index.md\":\"CcgOCIyt\",\"guide_components_info-box_index.md\":\"vXh-_DsL\",\"guide_components_combobox_index.md\":\"CsPkY6YB\",\"guide_components_date-picker_index.md\":\"12vmUIup\",\"guide_components_flip-view_emits.md\":\"DCheHjDj\",\"guide_components_panel_emits.md\":\"DG0REDq8\",\"guide_components_breadcrumb_index.md\":\"DyDm7PeP\",\"guide_components_radio-group_properties.md\":\"BnPxoKsQ\",\"guide_components_persona_emits.md\":\"CnsDPKRU\",\"guide_components_pivot_properties.md\":\"BmoLpPi1\",\"guide_components_persona_index.md\":\"DT00jby4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vfluent3\",\"description\":\"A Vue3 component library for Fluent UI\",\"base\":\"/VFluent3/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"VFluent3\",\"footer\":{\"message\":\"MIT Licensed\",\"copyright\":\"Copyright © Creator SN - 2022\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/\"}],\"sidebar\":[{\"text\":\"Basic input\",\"collapsed\":true,\"items\":[{\"text\":\"Button\",\"link\":\"/guide/components/button/\"},{\"text\":\"CheckBox\",\"link\":\"/guide/components/check-box/\"},{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"},{\"text\":\"Combobox\",\"link\":\"/guide/components/combobox/\"},{\"text\":\"DetailsList\",\"link\":\"/guide/components/details-list/\"},{\"text\":\"DropDown\",\"link\":\"/guide/components/drop-down/\"},{\"text\":\"Radio\",\"link\":\"/guide/components/radio/\"},{\"text\":\"RadioGroup\",\"link\":\"/guide/components/radio-group/\"},{\"text\":\"RatingControl\",\"link\":\"/guide/components/rating-control/\"},{\"text\":\"Slider\",\"link\":\"/guide/components/slider/\"},{\"text\":\"ToggleSwitch\",\"link\":\"/guide/components/toggle-switch/\"},{\"text\":\"Tag\",\"link\":\"/guide/components/tag/\"}]},{\"text\":\"Collections\",\"collapsed\":true,\"items\":[{\"text\":\"FlipView\",\"link\":\"/guide/components/flip-view/\"},{\"text\":\"ListView\",\"link\":\"/guide/components/list-view/\"},{\"text\":\"TreeView\",\"link\":\"/guide/components/tree-view/\"}]},{\"text\":\"Date & Time\",\"collapsed\":true,\"items\":[{\"text\":\"CalendarDatePicker\",\"link\":\"/guide/components/calendar-date-picker/\"},{\"text\":\"CalendarView\",\"link\":\"/guide/components/calendar-view/\"},{\"text\":\"DatePicker\",\"link\":\"/guide/components/date-picker/\"},{\"text\":\"TimePicker\",\"link\":\"/guide/components/time-picker/\"}]},{\"text\":\"Dialogs & flyouts\",\"collapsed\":true,\"items\":[{\"text\":\"Callout\",\"link\":\"/guide/components/callout/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Layout\",\"collapsed\":true,\"items\":[{\"text\":\"Collapse\",\"link\":\"/guide/components/collapse/\"},{\"text\":\"Expander\",\"link\":\"/guide/components/expander/\"},{\"text\":\"Drawer\",\"link\":\"/guide/components/drawer/\"},{\"text\":\"Panel\",\"link\":\"/guide/components/panel/\"}]},{\"text\":\"Media\",\"collapsed\":true,\"items\":[{\"text\":\"Image\",\"link\":\"/guide/components/image/\"},{\"text\":\"Img\",\"link\":\"/guide/components/img/\"},{\"text\":\"ImgBox\",\"link\":\"/guide/components/img-box/\"},{\"text\":\"Persona\",\"link\":\"/guide/components/persona/\"}]},{\"text\":\"Menu & toolbars\",\"collapsed\":true,\"items\":[{\"text\":\"CommandBar\",\"link\":\"/guide/components/command-bar/\"},{\"text\":\"MenuFlyout\",\"link\":\"/guide/components/menu-flyout/\"},{\"text\":\"SwipeControl\",\"link\":\"/guide/components/swipe-control/\"}]},{\"text\":\"Navigation\",\"collapsed\":true,\"items\":[{\"text\":\"Breadcrumb\",\"link\":\"/guide/components/breadcrumb/\"},{\"text\":\"NavigationPanel\",\"link\":\"/guide/components/navigation-panel/\"},{\"text\":\"NavigationView\",\"link\":\"/guide/components/navigation-view/\"},{\"text\":\"Pivot\",\"link\":\"/guide/components/pivot/\"},{\"text\":\"Pagination\",\"link\":\"/guide/components/pagination/\"}]},{\"text\":\"Scrolling\",\"collapsed\":true,\"items\":[{\"text\":\"InfiniteScrollView\",\"link\":\"/guide/components/infinite-scroll-view/\"},{\"text\":\"ScrollStory\",\"link\":\"/guide/components/scroll-story/\"}]},{\"text\":\"Status & info\",\"collapsed\":true,\"items\":[{\"text\":\"Badge\",\"link\":\"/guide/components/badge/\"},{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"ProgressBar\",\"link\":\"/guide/components/progress-bar/\"},{\"text\":\"ProgressRing\",\"link\":\"/guide/components/progress-ring/\"}]},{\"text\":\"Styles\",\"collapsed\":true,\"items\":[{\"text\":\"AnimatedIcon\",\"link\":\"/guide/components/animated-icon/\"},{\"text\":\"IconElement\",\"link\":\"/guide/components/icon-element/\"},{\"text\":\"RevealContainer\",\"link\":\"/guide/components/reveal-container/\"},{\"text\":\"Shimmer\",\"link\":\"/guide/components/shimmer/\"}]},{\"text\":\"Text\",\"collapsed\":true,\"items\":[{\"text\":\"SearchBox\",\"link\":\"/guide/components/search-box/\"},{\"text\":\"TextBox\",\"link\":\"/guide/components/text-box/\"},{\"text\":\"TextField\",\"link\":\"/guide/components/text-field/\"},{\"text\":\"VerifyBox\",\"link\":\"/guide/components/verify-box/\"}]},{\"text\":\"Windowing\",\"collapsed\":true,\"items\":[{\"text\":\"WebWindow\",\"link\":\"/guide/components/web-window/\"}]},{\"text\":\"Global\",\"collapsed\":true,\"items\":[{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Advance\",\"collapsed\":true,\"items\":[{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git a/guide/components/image/emits.html b/guide/components/image/emits.html
new file mode 100644
index 0000000..5a18225
--- /dev/null
+++ b/guide/components/image/emits.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>vfluent3</title>
+    <meta name="description" content="A Vue3 component library for Fluent UI">
+    <meta name="generator" content="VitePress v1.0.0-rc.45">
+    <link rel="preload stylesheet" href="/VFluent3/assets/style.BabQegKX.css" as="style">
+    
+    <script type="module" src="/VFluent3/assets/app.CSutcJ2E.js"></script>
+    <link rel="preload" href="/VFluent3/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/framework.DvIFzl91.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/theme.CgqFBnN_.js">
+    <link rel="modulepreload" href="/VFluent3/assets/guide_components_image_emits.md.lmlz2xJd.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-19c990f1><div class="wrapper" data-v-19c990f1><div class="container" data-v-19c990f1><div class="title" data-v-19c990f1><div class="VPNavBarTitle has-sidebar" data-v-19c990f1 data-v-ab179fa1><a class="title" href="/VFluent3/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>VFluent3</span><!--[--><!--]--></a></div></div><div class="content" data-v-19c990f1><div class="content-body" data-v-19c990f1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-19c990f1><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-19c990f1 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Guide</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-19c990f1 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-19c990f1 data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-19c990f1 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-19c990f1><div class="divider-line" data-v-19c990f1></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-d2ecc192><button data-v-d2ecc192>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-575e6a36><div class="curtain" data-v-575e6a36></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-575e6a36><span class="visually-hidden" id="sidebar-aria-label" data-v-575e6a36> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Basic input</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/button/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/check-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CheckBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/combobox/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Combobox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/details-list/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DetailsList</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drop-down/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DropDown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio-group/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RadioGroup</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/rating-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RatingControl</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/slider/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/toggle-switch/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ToggleSwitch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tag/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Tag</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Collections</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/flip-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>FlipView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/list-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ListView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tree-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TreeView</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Date & Time</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarDatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/time-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TimePicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Dialogs & flyouts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/callout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Callout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Layout</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/collapse/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Collapse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/expander/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Expander</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drawer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Panel</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Media</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/image/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Img</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ImgBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/persona/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Persona</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Menu & toolbars</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/command-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CommandBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/menu-flyout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MenuFlyout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/swipe-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SwipeControl</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Navigation</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/breadcrumb/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationPanel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pivot/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pivot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pagination/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pagination</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Scrolling</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/infinite-scroll-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfiniteScrollView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/scroll-story/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ScrollStory</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Status & info</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/badge/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-ring/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressRing</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Styles</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/animated-icon/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>AnimatedIcon</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/icon-element/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>IconElement</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/reveal-container/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RevealContainer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/shimmer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Shimmer</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Text</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/search-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SearchBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-field/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextField</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/verify-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>VerifyBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Windowing</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/web-window/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>WebWindow</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Global</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Advance</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-935f8a84><div class="content" data-v-935f8a84><div class="outline-marker" data-v-935f8a84></div><div class="outline-title" role="heading" aria-level="2" data-v-935f8a84>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-935f8a84><span class="visually-hidden" id="doc-outline-aria-label" data-v-935f8a84> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-935f8a84 data-v-b933a997><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _VFluent3_guide_components_image_emits" data-v-39a288b8><div><h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-label="Permalink to &quot;Emits&quot;">​</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead></table></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-09de1c0f><!--[--><!--]--><!----><nav class="prev-next" data-v-09de1c0f><div class="pager" data-v-09de1c0f><!----></div><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link next" href="/VFluent3/guide/components/button/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Next page</span><span class="title" data-v-09de1c0f>Button</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>MIT Licensed</p><p class="copyright" data-v-e315a0ad>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_calendar-date-picker_properties.md\":\"DXRjmMG8\",\"guide_components_image_properties.md\":\"DGanRzCb\",\"guide_components_img-box_index.md\":\"DYtggkf_\",\"guide_components_img_emits.md\":\"BlE7jvZQ\",\"guide_components_img_index.md\":\"Bm9FiuU4\",\"guide_components_icon-element_properties.md\":\"8Oakruwc\",\"guide_components_img_properties.md\":\"B42YSocI\",\"guide_components_drawer_index.md\":\"D_vpnCpE\",\"guide_components_verify-box_emits.md\":\"DT17Iazx\",\"guide_components_calendar-date-picker_index.md\":\"BdHjrurh\",\"guide_components_rating-control_index.md\":\"Q9l5Lfrr\",\"guide_components_rating-control_properties.md\":\"DKprnl0i\",\"guide_components_calendar-view_index.md\":\"zdoRYVx1\",\"guide_components_animated-icon_index.md\":\"yZDMzCFe\",\"guide_components_calendar-date-picker_emits.md\":\"D5OkfR8j\",\"guide_components_badge_index.md\":\"Bb4crrJn\",\"guide_components_image_index.md\":\"B7X6cWAZ\",\"guide_components_slider_index.md\":\"C7zZ2d-W\",\"guide_components_radio-group_index.md\":\"CVfh3h5H\",\"guide_components_swipe-control_index.md\":\"DwrDVPc1\",\"guide_components_color-picker_emits.md\":\"BHDXVtBQ\",\"guide_components_radio_index.md\":\"90as5QGp\",\"guide_components_pagination_properties.md\":\"JUAPvcTL\",\"guide_components_persona_properties.md\":\"DUTPhPMp\",\"guide_components_combo-box_emits.md\":\"Dh5R-qEv\",\"guide_components_pivot_emits.md\":\"BTJPgNpy\",\"guide_components_pagination_index.md\":\"CnW2zAht\",\"guide_components_flip-view_properties.md\":\"BqZ4hhgU\",\"guide_components_icon-element_emits.md\":\"D5TXFdTZ\",\"guide_components_flip-view_index.md\":\"DefnDOv6\",\"guide_components_navigation-panel_index.md\":\"6mO__sSK\",\"guide_components_rating-control_emits.md\":\"blvomSeC\",\"guide_components_icon-element_index.md\":\"DQ8K7JNn\",\"guide_components_navigation-view_index.md\":\"4AQRiz1k\",\"guide_components_toggle-switch_emits.md\":\"CLGzrNut\",\"guide_components_toggle-switch_index.md\":\"61en_q9-\",\"guide_components_scroll-story_index.md\":\"Vpgb1HSV\",\"guide_components_reveal-container_index.md\":\"Cut2r4tV\",\"guide_components_search-box_emits.md\":\"-d9sWNNt\",\"guide_components_search-box_properties.md\":\"DEKFfPFw\",\"guide_components_shimmer_emits.md\":\"CTMInlI3\",\"guide_components_tag_index.md\":\"BhhxkcHn\",\"guide_components_search-box_index.md\":\"DgkrY0oY\",\"guide_components_shimmer_index.md\":\"iZlHuTxw\",\"guide_components_shimmer_properties.md\":\"CdkU1o6H\",\"guide_components_tree-view_index.md\":\"CUrwan4q\",\"guide_components_text-field_index.md\":\"CXSimJtj\",\"guide_components_text-box_index.md\":\"C5moAPfB\",\"guide_components_progress-ring_properties.md\":\"Dc08Uiff\",\"guide_components_toggle-switch_properties.md\":\"tFppK_IS\",\"guide_components_radio-group_emits.md\":\"cEDzKVnN\",\"guide_components_collapse_index.md\":\"N9Iu5-2v\",\"guide_components_image_emits.md\":\"lmlz2xJd\",\"guide_components_callout_index.md\":\"D9RU33w6\",\"guide_components_pivot_index.md\":\"B_vwQL-5\",\"guide_components_command-bar_index.md\":\"Cp4_rrGB\",\"guide_components_pagination_emits.md\":\"Dng86A22\",\"guide_components_button_index.md\":\"7sqT2MQP\",\"guide_components_info-box_properties.md\":\"BI7Nvk-E\",\"guide_components_drop-down_emits.md\":\"BE95TdKW\",\"guide_components_expander_index.md\":\"BKgcUJzQ\",\"guide_components_message-bar_index.md\":\"AEtAWlF8\",\"guide_components_menu-flyout_index.md\":\"Csa7irPj\",\"guide_components_panel_index.md\":\"CsTu0bXo\",\"guide_components_panel_properties.md\":\"BaxoCYKq\",\"guide_components_progress-bar_emits.md\":\"BcwXUpsF\",\"guide_components_progress-bar_properties.md\":\"TxiS9ZMA\",\"guide_components_progress-ring_emits.md\":\"D2Y6hIZ9\",\"guide_components_color-picker_index.md\":\"DCc4ixcU\",\"guide_components_progress-ring_index.md\":\"CPb-ZEPE\",\"guide_components_color-picker_properties.md\":\"wcXK29Vl\",\"guide_components_time-picker_index.md\":\"CQJdRRaG\",\"guide_components_drop-down_properties.md\":\"Bwlkpr1q\",\"guide_components_infinite-scroll-view_index.md\":\"yAuD807x\",\"guide_components_check-box_index.md\":\"FYgdu4oq\",\"guide_components_progress-bar_index.md\":\"D8vHQw5V\",\"guide_components_combo-box_index.md\":\"DTyu3eNd\",\"guide_components_info-box_emits.md\":\"DlEwpkkq\",\"guide_components_drop-down_index.md\":\"BZzJZQWq\",\"guide_components_list-view_index.md\":\"BoYvMzb0\",\"guide_components_verify-box_properties.md\":\"CW6W8fFf\",\"guide_components_verify-box_index.md\":\"DwSB40wR\",\"guide_index.md\":\"Bndlt3sL\",\"guide_components_web-window_index.md\":\"Bxc8vEeI\",\"index.md\":\"MTRqI42u\",\"guide_components_combo-box_properties.md\":\"AWfHzV6x\",\"guide_components_combobox_emits.md\":\"CGB6WLt8\",\"guide_components_combobox_properties.md\":\"Bja0hMou\",\"guide_components_details-list_index.md\":\"CcgOCIyt\",\"guide_components_info-box_index.md\":\"vXh-_DsL\",\"guide_components_combobox_index.md\":\"CsPkY6YB\",\"guide_components_date-picker_index.md\":\"12vmUIup\",\"guide_components_flip-view_emits.md\":\"DCheHjDj\",\"guide_components_panel_emits.md\":\"DG0REDq8\",\"guide_components_breadcrumb_index.md\":\"DyDm7PeP\",\"guide_components_radio-group_properties.md\":\"BnPxoKsQ\",\"guide_components_persona_emits.md\":\"CnsDPKRU\",\"guide_components_pivot_properties.md\":\"BmoLpPi1\",\"guide_components_persona_index.md\":\"DT00jby4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vfluent3\",\"description\":\"A Vue3 component library for Fluent UI\",\"base\":\"/VFluent3/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"VFluent3\",\"footer\":{\"message\":\"MIT Licensed\",\"copyright\":\"Copyright © Creator SN - 2022\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/\"}],\"sidebar\":[{\"text\":\"Basic input\",\"collapsed\":true,\"items\":[{\"text\":\"Button\",\"link\":\"/guide/components/button/\"},{\"text\":\"CheckBox\",\"link\":\"/guide/components/check-box/\"},{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"},{\"text\":\"Combobox\",\"link\":\"/guide/components/combobox/\"},{\"text\":\"DetailsList\",\"link\":\"/guide/components/details-list/\"},{\"text\":\"DropDown\",\"link\":\"/guide/components/drop-down/\"},{\"text\":\"Radio\",\"link\":\"/guide/components/radio/\"},{\"text\":\"RadioGroup\",\"link\":\"/guide/components/radio-group/\"},{\"text\":\"RatingControl\",\"link\":\"/guide/components/rating-control/\"},{\"text\":\"Slider\",\"link\":\"/guide/components/slider/\"},{\"text\":\"ToggleSwitch\",\"link\":\"/guide/components/toggle-switch/\"},{\"text\":\"Tag\",\"link\":\"/guide/components/tag/\"}]},{\"text\":\"Collections\",\"collapsed\":true,\"items\":[{\"text\":\"FlipView\",\"link\":\"/guide/components/flip-view/\"},{\"text\":\"ListView\",\"link\":\"/guide/components/list-view/\"},{\"text\":\"TreeView\",\"link\":\"/guide/components/tree-view/\"}]},{\"text\":\"Date & Time\",\"collapsed\":true,\"items\":[{\"text\":\"CalendarDatePicker\",\"link\":\"/guide/components/calendar-date-picker/\"},{\"text\":\"CalendarView\",\"link\":\"/guide/components/calendar-view/\"},{\"text\":\"DatePicker\",\"link\":\"/guide/components/date-picker/\"},{\"text\":\"TimePicker\",\"link\":\"/guide/components/time-picker/\"}]},{\"text\":\"Dialogs & flyouts\",\"collapsed\":true,\"items\":[{\"text\":\"Callout\",\"link\":\"/guide/components/callout/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Layout\",\"collapsed\":true,\"items\":[{\"text\":\"Collapse\",\"link\":\"/guide/components/collapse/\"},{\"text\":\"Expander\",\"link\":\"/guide/components/expander/\"},{\"text\":\"Drawer\",\"link\":\"/guide/components/drawer/\"},{\"text\":\"Panel\",\"link\":\"/guide/components/panel/\"}]},{\"text\":\"Media\",\"collapsed\":true,\"items\":[{\"text\":\"Image\",\"link\":\"/guide/components/image/\"},{\"text\":\"Img\",\"link\":\"/guide/components/img/\"},{\"text\":\"ImgBox\",\"link\":\"/guide/components/img-box/\"},{\"text\":\"Persona\",\"link\":\"/guide/components/persona/\"}]},{\"text\":\"Menu & toolbars\",\"collapsed\":true,\"items\":[{\"text\":\"CommandBar\",\"link\":\"/guide/components/command-bar/\"},{\"text\":\"MenuFlyout\",\"link\":\"/guide/components/menu-flyout/\"},{\"text\":\"SwipeControl\",\"link\":\"/guide/components/swipe-control/\"}]},{\"text\":\"Navigation\",\"collapsed\":true,\"items\":[{\"text\":\"Breadcrumb\",\"link\":\"/guide/components/breadcrumb/\"},{\"text\":\"NavigationPanel\",\"link\":\"/guide/components/navigation-panel/\"},{\"text\":\"NavigationView\",\"link\":\"/guide/components/navigation-view/\"},{\"text\":\"Pivot\",\"link\":\"/guide/components/pivot/\"},{\"text\":\"Pagination\",\"link\":\"/guide/components/pagination/\"}]},{\"text\":\"Scrolling\",\"collapsed\":true,\"items\":[{\"text\":\"InfiniteScrollView\",\"link\":\"/guide/components/infinite-scroll-view/\"},{\"text\":\"ScrollStory\",\"link\":\"/guide/components/scroll-story/\"}]},{\"text\":\"Status & info\",\"collapsed\":true,\"items\":[{\"text\":\"Badge\",\"link\":\"/guide/components/badge/\"},{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"ProgressBar\",\"link\":\"/guide/components/progress-bar/\"},{\"text\":\"ProgressRing\",\"link\":\"/guide/components/progress-ring/\"}]},{\"text\":\"Styles\",\"collapsed\":true,\"items\":[{\"text\":\"AnimatedIcon\",\"link\":\"/guide/components/animated-icon/\"},{\"text\":\"IconElement\",\"link\":\"/guide/components/icon-element/\"},{\"text\":\"RevealContainer\",\"link\":\"/guide/components/reveal-container/\"},{\"text\":\"Shimmer\",\"link\":\"/guide/components/shimmer/\"}]},{\"text\":\"Text\",\"collapsed\":true,\"items\":[{\"text\":\"SearchBox\",\"link\":\"/guide/components/search-box/\"},{\"text\":\"TextBox\",\"link\":\"/guide/components/text-box/\"},{\"text\":\"TextField\",\"link\":\"/guide/components/text-field/\"},{\"text\":\"VerifyBox\",\"link\":\"/guide/components/verify-box/\"}]},{\"text\":\"Windowing\",\"collapsed\":true,\"items\":[{\"text\":\"WebWindow\",\"link\":\"/guide/components/web-window/\"}]},{\"text\":\"Global\",\"collapsed\":true,\"items\":[{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Advance\",\"collapsed\":true,\"items\":[{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git a/guide/components/image/index.html b/guide/components/image/index.html
new file mode 100644
index 0000000..d0d0463
--- /dev/null
+++ b/guide/components/image/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>Image | vfluent3</title>
+    <meta name="description" content="A Vue3 component library for Fluent UI">
+    <meta name="generator" content="VitePress v1.0.0-rc.45">
+    <link rel="preload stylesheet" href="/VFluent3/assets/style.BabQegKX.css" as="style">
+    
+    <script type="module" src="/VFluent3/assets/app.CSutcJ2E.js"></script>
+    <link rel="preload" href="/VFluent3/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/framework.DvIFzl91.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/theme.CgqFBnN_.js">
+    <link rel="modulepreload" href="/VFluent3/assets/guide_components_image_index.md.B7X6cWAZ.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-19c990f1><div class="wrapper" data-v-19c990f1><div class="container" data-v-19c990f1><div class="title" data-v-19c990f1><div class="VPNavBarTitle has-sidebar" data-v-19c990f1 data-v-ab179fa1><a class="title" href="/VFluent3/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>VFluent3</span><!--[--><!--]--></a></div></div><div class="content" data-v-19c990f1><div class="content-body" data-v-19c990f1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-19c990f1><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-19c990f1 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Guide</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-19c990f1 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-19c990f1 data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-19c990f1 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-19c990f1><div class="divider-line" data-v-19c990f1></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-d2ecc192><button data-v-d2ecc192>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-575e6a36><div class="curtain" data-v-575e6a36></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-575e6a36><span class="visually-hidden" id="sidebar-aria-label" data-v-575e6a36> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Basic input</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/button/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/check-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CheckBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/combobox/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Combobox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/details-list/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DetailsList</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drop-down/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DropDown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio-group/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RadioGroup</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/rating-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RatingControl</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/slider/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/toggle-switch/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ToggleSwitch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tag/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Tag</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Collections</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/flip-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>FlipView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/list-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ListView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tree-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TreeView</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Date & Time</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarDatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/time-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TimePicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Dialogs & flyouts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/callout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Callout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Layout</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/collapse/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Collapse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/expander/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Expander</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drawer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Panel</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible has-active" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Media</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/image/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Img</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ImgBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/persona/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Persona</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Menu & toolbars</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/command-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CommandBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/menu-flyout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MenuFlyout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/swipe-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SwipeControl</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Navigation</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/breadcrumb/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationPanel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pivot/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pivot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pagination/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pagination</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Scrolling</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/infinite-scroll-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfiniteScrollView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/scroll-story/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ScrollStory</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Status & info</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/badge/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-ring/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressRing</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Styles</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/animated-icon/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>AnimatedIcon</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/icon-element/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>IconElement</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/reveal-container/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RevealContainer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/shimmer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Shimmer</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Text</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/search-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SearchBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-field/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextField</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/verify-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>VerifyBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Windowing</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/web-window/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>WebWindow</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Global</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Advance</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-935f8a84><div class="content" data-v-935f8a84><div class="outline-marker" data-v-935f8a84></div><div class="outline-title" role="heading" aria-level="2" data-v-935f8a84>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-935f8a84><span class="visually-hidden" id="doc-outline-aria-label" data-v-935f8a84> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-935f8a84 data-v-b933a997><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _VFluent3_guide_components_image_" data-v-39a288b8><div><h3 id="image-demo" tabindex="-1">Image-DEMO <a class="header-anchor" href="#image-demo" aria-label="Permalink to &quot;Image-DEMO&quot;">​</a></h3><hr><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Image</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> src</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;https://github.com/aleversn/VFluent/blob/master/examples/assert/sample/1.jpg?raw=true&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">500</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">300</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Image</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div style="width:100%;height:500px;"><!----></div><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Image</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> src</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;https://github.com/aleversn/VFluent/blob/master/examples/assert/sample/2.jpg?raw=true&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">500</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">300</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Image</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="image-lazy-load" tabindex="-1">Image-Lazy Load <a class="header-anchor" href="#image-lazy-load" aria-label="Permalink to &quot;Image-Lazy Load&quot;">​</a></h3><hr><div style="width:100%;height:300px;"><!----></div><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Image</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> src</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;https://github.com/aleversn/VFluent/blob/master/examples/assert/sample/3.jpg?raw=true&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">onlazy</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">500</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">300</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Image</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">src</td><td style="text-align:center;">String</td><td style="text-align:center;">Yes</td><td style="text-align:center;">N/A</td><td style="text-align:center;">图像 src, 支持跨域加载, 但不支持缓存</td></tr><tr><td style="text-align:center;">onlazy</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否开启懒加载</td></tr></tbody></table></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-09de1c0f><!--[--><!--]--><!----><nav class="prev-next" data-v-09de1c0f><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link prev" href="/VFluent3/guide/components/panel/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Previous page</span><span class="title" data-v-09de1c0f>Panel</span><!--]--></a></div><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link next" href="/VFluent3/guide/components/img/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Next page</span><span class="title" data-v-09de1c0f>Img</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>MIT Licensed</p><p class="copyright" data-v-e315a0ad>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_calendar-date-picker_properties.md\":\"DXRjmMG8\",\"guide_components_image_properties.md\":\"DGanRzCb\",\"guide_components_img-box_index.md\":\"DYtggkf_\",\"guide_components_img_emits.md\":\"BlE7jvZQ\",\"guide_components_img_index.md\":\"Bm9FiuU4\",\"guide_components_icon-element_properties.md\":\"8Oakruwc\",\"guide_components_img_properties.md\":\"B42YSocI\",\"guide_components_drawer_index.md\":\"D_vpnCpE\",\"guide_components_verify-box_emits.md\":\"DT17Iazx\",\"guide_components_calendar-date-picker_index.md\":\"BdHjrurh\",\"guide_components_rating-control_index.md\":\"Q9l5Lfrr\",\"guide_components_rating-control_properties.md\":\"DKprnl0i\",\"guide_components_calendar-view_index.md\":\"zdoRYVx1\",\"guide_components_animated-icon_index.md\":\"yZDMzCFe\",\"guide_components_calendar-date-picker_emits.md\":\"D5OkfR8j\",\"guide_components_badge_index.md\":\"Bb4crrJn\",\"guide_components_image_index.md\":\"B7X6cWAZ\",\"guide_components_slider_index.md\":\"C7zZ2d-W\",\"guide_components_radio-group_index.md\":\"CVfh3h5H\",\"guide_components_swipe-control_index.md\":\"DwrDVPc1\",\"guide_components_color-picker_emits.md\":\"BHDXVtBQ\",\"guide_components_radio_index.md\":\"90as5QGp\",\"guide_components_pagination_properties.md\":\"JUAPvcTL\",\"guide_components_persona_properties.md\":\"DUTPhPMp\",\"guide_components_combo-box_emits.md\":\"Dh5R-qEv\",\"guide_components_pivot_emits.md\":\"BTJPgNpy\",\"guide_components_pagination_index.md\":\"CnW2zAht\",\"guide_components_flip-view_properties.md\":\"BqZ4hhgU\",\"guide_components_icon-element_emits.md\":\"D5TXFdTZ\",\"guide_components_flip-view_index.md\":\"DefnDOv6\",\"guide_components_navigation-panel_index.md\":\"6mO__sSK\",\"guide_components_rating-control_emits.md\":\"blvomSeC\",\"guide_components_icon-element_index.md\":\"DQ8K7JNn\",\"guide_components_navigation-view_index.md\":\"4AQRiz1k\",\"guide_components_toggle-switch_emits.md\":\"CLGzrNut\",\"guide_components_toggle-switch_index.md\":\"61en_q9-\",\"guide_components_scroll-story_index.md\":\"Vpgb1HSV\",\"guide_components_reveal-container_index.md\":\"Cut2r4tV\",\"guide_components_search-box_emits.md\":\"-d9sWNNt\",\"guide_components_search-box_properties.md\":\"DEKFfPFw\",\"guide_components_shimmer_emits.md\":\"CTMInlI3\",\"guide_components_tag_index.md\":\"BhhxkcHn\",\"guide_components_search-box_index.md\":\"DgkrY0oY\",\"guide_components_shimmer_index.md\":\"iZlHuTxw\",\"guide_components_shimmer_properties.md\":\"CdkU1o6H\",\"guide_components_tree-view_index.md\":\"CUrwan4q\",\"guide_components_text-field_index.md\":\"CXSimJtj\",\"guide_components_text-box_index.md\":\"C5moAPfB\",\"guide_components_progress-ring_properties.md\":\"Dc08Uiff\",\"guide_components_toggle-switch_properties.md\":\"tFppK_IS\",\"guide_components_radio-group_emits.md\":\"cEDzKVnN\",\"guide_components_collapse_index.md\":\"N9Iu5-2v\",\"guide_components_image_emits.md\":\"lmlz2xJd\",\"guide_components_callout_index.md\":\"D9RU33w6\",\"guide_components_pivot_index.md\":\"B_vwQL-5\",\"guide_components_command-bar_index.md\":\"Cp4_rrGB\",\"guide_components_pagination_emits.md\":\"Dng86A22\",\"guide_components_button_index.md\":\"7sqT2MQP\",\"guide_components_info-box_properties.md\":\"BI7Nvk-E\",\"guide_components_drop-down_emits.md\":\"BE95TdKW\",\"guide_components_expander_index.md\":\"BKgcUJzQ\",\"guide_components_message-bar_index.md\":\"AEtAWlF8\",\"guide_components_menu-flyout_index.md\":\"Csa7irPj\",\"guide_components_panel_index.md\":\"CsTu0bXo\",\"guide_components_panel_properties.md\":\"BaxoCYKq\",\"guide_components_progress-bar_emits.md\":\"BcwXUpsF\",\"guide_components_progress-bar_properties.md\":\"TxiS9ZMA\",\"guide_components_progress-ring_emits.md\":\"D2Y6hIZ9\",\"guide_components_color-picker_index.md\":\"DCc4ixcU\",\"guide_components_progress-ring_index.md\":\"CPb-ZEPE\",\"guide_components_color-picker_properties.md\":\"wcXK29Vl\",\"guide_components_time-picker_index.md\":\"CQJdRRaG\",\"guide_components_drop-down_properties.md\":\"Bwlkpr1q\",\"guide_components_infinite-scroll-view_index.md\":\"yAuD807x\",\"guide_components_check-box_index.md\":\"FYgdu4oq\",\"guide_components_progress-bar_index.md\":\"D8vHQw5V\",\"guide_components_combo-box_index.md\":\"DTyu3eNd\",\"guide_components_info-box_emits.md\":\"DlEwpkkq\",\"guide_components_drop-down_index.md\":\"BZzJZQWq\",\"guide_components_list-view_index.md\":\"BoYvMzb0\",\"guide_components_verify-box_properties.md\":\"CW6W8fFf\",\"guide_components_verify-box_index.md\":\"DwSB40wR\",\"guide_index.md\":\"Bndlt3sL\",\"guide_components_web-window_index.md\":\"Bxc8vEeI\",\"index.md\":\"MTRqI42u\",\"guide_components_combo-box_properties.md\":\"AWfHzV6x\",\"guide_components_combobox_emits.md\":\"CGB6WLt8\",\"guide_components_combobox_properties.md\":\"Bja0hMou\",\"guide_components_details-list_index.md\":\"CcgOCIyt\",\"guide_components_info-box_index.md\":\"vXh-_DsL\",\"guide_components_combobox_index.md\":\"CsPkY6YB\",\"guide_components_date-picker_index.md\":\"12vmUIup\",\"guide_components_flip-view_emits.md\":\"DCheHjDj\",\"guide_components_panel_emits.md\":\"DG0REDq8\",\"guide_components_breadcrumb_index.md\":\"DyDm7PeP\",\"guide_components_radio-group_properties.md\":\"BnPxoKsQ\",\"guide_components_persona_emits.md\":\"CnsDPKRU\",\"guide_components_pivot_properties.md\":\"BmoLpPi1\",\"guide_components_persona_index.md\":\"DT00jby4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vfluent3\",\"description\":\"A Vue3 component library for Fluent UI\",\"base\":\"/VFluent3/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"VFluent3\",\"footer\":{\"message\":\"MIT Licensed\",\"copyright\":\"Copyright © Creator SN - 2022\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/\"}],\"sidebar\":[{\"text\":\"Basic input\",\"collapsed\":true,\"items\":[{\"text\":\"Button\",\"link\":\"/guide/components/button/\"},{\"text\":\"CheckBox\",\"link\":\"/guide/components/check-box/\"},{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"},{\"text\":\"Combobox\",\"link\":\"/guide/components/combobox/\"},{\"text\":\"DetailsList\",\"link\":\"/guide/components/details-list/\"},{\"text\":\"DropDown\",\"link\":\"/guide/components/drop-down/\"},{\"text\":\"Radio\",\"link\":\"/guide/components/radio/\"},{\"text\":\"RadioGroup\",\"link\":\"/guide/components/radio-group/\"},{\"text\":\"RatingControl\",\"link\":\"/guide/components/rating-control/\"},{\"text\":\"Slider\",\"link\":\"/guide/components/slider/\"},{\"text\":\"ToggleSwitch\",\"link\":\"/guide/components/toggle-switch/\"},{\"text\":\"Tag\",\"link\":\"/guide/components/tag/\"}]},{\"text\":\"Collections\",\"collapsed\":true,\"items\":[{\"text\":\"FlipView\",\"link\":\"/guide/components/flip-view/\"},{\"text\":\"ListView\",\"link\":\"/guide/components/list-view/\"},{\"text\":\"TreeView\",\"link\":\"/guide/components/tree-view/\"}]},{\"text\":\"Date & Time\",\"collapsed\":true,\"items\":[{\"text\":\"CalendarDatePicker\",\"link\":\"/guide/components/calendar-date-picker/\"},{\"text\":\"CalendarView\",\"link\":\"/guide/components/calendar-view/\"},{\"text\":\"DatePicker\",\"link\":\"/guide/components/date-picker/\"},{\"text\":\"TimePicker\",\"link\":\"/guide/components/time-picker/\"}]},{\"text\":\"Dialogs & flyouts\",\"collapsed\":true,\"items\":[{\"text\":\"Callout\",\"link\":\"/guide/components/callout/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Layout\",\"collapsed\":true,\"items\":[{\"text\":\"Collapse\",\"link\":\"/guide/components/collapse/\"},{\"text\":\"Expander\",\"link\":\"/guide/components/expander/\"},{\"text\":\"Drawer\",\"link\":\"/guide/components/drawer/\"},{\"text\":\"Panel\",\"link\":\"/guide/components/panel/\"}]},{\"text\":\"Media\",\"collapsed\":true,\"items\":[{\"text\":\"Image\",\"link\":\"/guide/components/image/\"},{\"text\":\"Img\",\"link\":\"/guide/components/img/\"},{\"text\":\"ImgBox\",\"link\":\"/guide/components/img-box/\"},{\"text\":\"Persona\",\"link\":\"/guide/components/persona/\"}]},{\"text\":\"Menu & toolbars\",\"collapsed\":true,\"items\":[{\"text\":\"CommandBar\",\"link\":\"/guide/components/command-bar/\"},{\"text\":\"MenuFlyout\",\"link\":\"/guide/components/menu-flyout/\"},{\"text\":\"SwipeControl\",\"link\":\"/guide/components/swipe-control/\"}]},{\"text\":\"Navigation\",\"collapsed\":true,\"items\":[{\"text\":\"Breadcrumb\",\"link\":\"/guide/components/breadcrumb/\"},{\"text\":\"NavigationPanel\",\"link\":\"/guide/components/navigation-panel/\"},{\"text\":\"NavigationView\",\"link\":\"/guide/components/navigation-view/\"},{\"text\":\"Pivot\",\"link\":\"/guide/components/pivot/\"},{\"text\":\"Pagination\",\"link\":\"/guide/components/pagination/\"}]},{\"text\":\"Scrolling\",\"collapsed\":true,\"items\":[{\"text\":\"InfiniteScrollView\",\"link\":\"/guide/components/infinite-scroll-view/\"},{\"text\":\"ScrollStory\",\"link\":\"/guide/components/scroll-story/\"}]},{\"text\":\"Status & info\",\"collapsed\":true,\"items\":[{\"text\":\"Badge\",\"link\":\"/guide/components/badge/\"},{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"ProgressBar\",\"link\":\"/guide/components/progress-bar/\"},{\"text\":\"ProgressRing\",\"link\":\"/guide/components/progress-ring/\"}]},{\"text\":\"Styles\",\"collapsed\":true,\"items\":[{\"text\":\"AnimatedIcon\",\"link\":\"/guide/components/animated-icon/\"},{\"text\":\"IconElement\",\"link\":\"/guide/components/icon-element/\"},{\"text\":\"RevealContainer\",\"link\":\"/guide/components/reveal-container/\"},{\"text\":\"Shimmer\",\"link\":\"/guide/components/shimmer/\"}]},{\"text\":\"Text\",\"collapsed\":true,\"items\":[{\"text\":\"SearchBox\",\"link\":\"/guide/components/search-box/\"},{\"text\":\"TextBox\",\"link\":\"/guide/components/text-box/\"},{\"text\":\"TextField\",\"link\":\"/guide/components/text-field/\"},{\"text\":\"VerifyBox\",\"link\":\"/guide/components/verify-box/\"}]},{\"text\":\"Windowing\",\"collapsed\":true,\"items\":[{\"text\":\"WebWindow\",\"link\":\"/guide/components/web-window/\"}]},{\"text\":\"Global\",\"collapsed\":true,\"items\":[{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Advance\",\"collapsed\":true,\"items\":[{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git a/guide/components/image/properties.html b/guide/components/image/properties.html
new file mode 100644
index 0000000..7239c90
--- /dev/null
+++ b/guide/components/image/properties.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>vfluent3</title>
+    <meta name="description" content="A Vue3 component library for Fluent UI">
+    <meta name="generator" content="VitePress v1.0.0-rc.45">
+    <link rel="preload stylesheet" href="/VFluent3/assets/style.BabQegKX.css" as="style">
+    
+    <script type="module" src="/VFluent3/assets/app.CSutcJ2E.js"></script>
+    <link rel="preload" href="/VFluent3/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/framework.DvIFzl91.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/theme.CgqFBnN_.js">
+    <link rel="modulepreload" href="/VFluent3/assets/guide_components_image_properties.md.DGanRzCb.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-19c990f1><div class="wrapper" data-v-19c990f1><div class="container" data-v-19c990f1><div class="title" data-v-19c990f1><div class="VPNavBarTitle has-sidebar" data-v-19c990f1 data-v-ab179fa1><a class="title" href="/VFluent3/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>VFluent3</span><!--[--><!--]--></a></div></div><div class="content" data-v-19c990f1><div class="content-body" data-v-19c990f1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-19c990f1><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-19c990f1 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Guide</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-19c990f1 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-19c990f1 data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-19c990f1 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-19c990f1><div class="divider-line" data-v-19c990f1></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-d2ecc192><button data-v-d2ecc192>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-575e6a36><div class="curtain" data-v-575e6a36></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-575e6a36><span class="visually-hidden" id="sidebar-aria-label" data-v-575e6a36> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Basic input</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/button/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/check-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CheckBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/combobox/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Combobox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/details-list/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DetailsList</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drop-down/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DropDown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio-group/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RadioGroup</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/rating-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RatingControl</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/slider/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/toggle-switch/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ToggleSwitch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tag/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Tag</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Collections</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/flip-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>FlipView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/list-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ListView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tree-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TreeView</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Date & Time</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarDatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/time-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TimePicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Dialogs & flyouts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/callout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Callout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Layout</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/collapse/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Collapse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/expander/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Expander</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drawer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Panel</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Media</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/image/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Img</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ImgBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/persona/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Persona</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Menu & toolbars</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/command-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CommandBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/menu-flyout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MenuFlyout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/swipe-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SwipeControl</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Navigation</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/breadcrumb/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationPanel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pivot/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pivot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pagination/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pagination</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Scrolling</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/infinite-scroll-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfiniteScrollView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/scroll-story/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ScrollStory</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Status & info</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/badge/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-ring/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressRing</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Styles</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/animated-icon/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>AnimatedIcon</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/icon-element/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>IconElement</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/reveal-container/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RevealContainer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/shimmer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Shimmer</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Text</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/search-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SearchBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-field/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextField</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/verify-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>VerifyBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Windowing</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/web-window/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>WebWindow</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Global</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Advance</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-935f8a84><div class="content" data-v-935f8a84><div class="outline-marker" data-v-935f8a84></div><div class="outline-title" role="heading" aria-level="2" data-v-935f8a84>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-935f8a84><span class="visually-hidden" id="doc-outline-aria-label" data-v-935f8a84> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-935f8a84 data-v-b933a997><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _VFluent3_guide_components_image_properties" data-v-39a288b8><div><h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-label="Permalink to &quot;Properties&quot;">​</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead></table></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-09de1c0f><!--[--><!--]--><!----><nav class="prev-next" data-v-09de1c0f><div class="pager" data-v-09de1c0f><!----></div><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link next" href="/VFluent3/guide/components/button/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Next page</span><span class="title" data-v-09de1c0f>Button</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>MIT Licensed</p><p class="copyright" data-v-e315a0ad>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_calendar-date-picker_properties.md\":\"DXRjmMG8\",\"guide_components_image_properties.md\":\"DGanRzCb\",\"guide_components_img-box_index.md\":\"DYtggkf_\",\"guide_components_img_emits.md\":\"BlE7jvZQ\",\"guide_components_img_index.md\":\"Bm9FiuU4\",\"guide_components_icon-element_properties.md\":\"8Oakruwc\",\"guide_components_img_properties.md\":\"B42YSocI\",\"guide_components_drawer_index.md\":\"D_vpnCpE\",\"guide_components_verify-box_emits.md\":\"DT17Iazx\",\"guide_components_calendar-date-picker_index.md\":\"BdHjrurh\",\"guide_components_rating-control_index.md\":\"Q9l5Lfrr\",\"guide_components_rating-control_properties.md\":\"DKprnl0i\",\"guide_components_calendar-view_index.md\":\"zdoRYVx1\",\"guide_components_animated-icon_index.md\":\"yZDMzCFe\",\"guide_components_calendar-date-picker_emits.md\":\"D5OkfR8j\",\"guide_components_badge_index.md\":\"Bb4crrJn\",\"guide_components_image_index.md\":\"B7X6cWAZ\",\"guide_components_slider_index.md\":\"C7zZ2d-W\",\"guide_components_radio-group_index.md\":\"CVfh3h5H\",\"guide_components_swipe-control_index.md\":\"DwrDVPc1\",\"guide_components_color-picker_emits.md\":\"BHDXVtBQ\",\"guide_components_radio_index.md\":\"90as5QGp\",\"guide_components_pagination_properties.md\":\"JUAPvcTL\",\"guide_components_persona_properties.md\":\"DUTPhPMp\",\"guide_components_combo-box_emits.md\":\"Dh5R-qEv\",\"guide_components_pivot_emits.md\":\"BTJPgNpy\",\"guide_components_pagination_index.md\":\"CnW2zAht\",\"guide_components_flip-view_properties.md\":\"BqZ4hhgU\",\"guide_components_icon-element_emits.md\":\"D5TXFdTZ\",\"guide_components_flip-view_index.md\":\"DefnDOv6\",\"guide_components_navigation-panel_index.md\":\"6mO__sSK\",\"guide_components_rating-control_emits.md\":\"blvomSeC\",\"guide_components_icon-element_index.md\":\"DQ8K7JNn\",\"guide_components_navigation-view_index.md\":\"4AQRiz1k\",\"guide_components_toggle-switch_emits.md\":\"CLGzrNut\",\"guide_components_toggle-switch_index.md\":\"61en_q9-\",\"guide_components_scroll-story_index.md\":\"Vpgb1HSV\",\"guide_components_reveal-container_index.md\":\"Cut2r4tV\",\"guide_components_search-box_emits.md\":\"-d9sWNNt\",\"guide_components_search-box_properties.md\":\"DEKFfPFw\",\"guide_components_shimmer_emits.md\":\"CTMInlI3\",\"guide_components_tag_index.md\":\"BhhxkcHn\",\"guide_components_search-box_index.md\":\"DgkrY0oY\",\"guide_components_shimmer_index.md\":\"iZlHuTxw\",\"guide_components_shimmer_properties.md\":\"CdkU1o6H\",\"guide_components_tree-view_index.md\":\"CUrwan4q\",\"guide_components_text-field_index.md\":\"CXSimJtj\",\"guide_components_text-box_index.md\":\"C5moAPfB\",\"guide_components_progress-ring_properties.md\":\"Dc08Uiff\",\"guide_components_toggle-switch_properties.md\":\"tFppK_IS\",\"guide_components_radio-group_emits.md\":\"cEDzKVnN\",\"guide_components_collapse_index.md\":\"N9Iu5-2v\",\"guide_components_image_emits.md\":\"lmlz2xJd\",\"guide_components_callout_index.md\":\"D9RU33w6\",\"guide_components_pivot_index.md\":\"B_vwQL-5\",\"guide_components_command-bar_index.md\":\"Cp4_rrGB\",\"guide_components_pagination_emits.md\":\"Dng86A22\",\"guide_components_button_index.md\":\"7sqT2MQP\",\"guide_components_info-box_properties.md\":\"BI7Nvk-E\",\"guide_components_drop-down_emits.md\":\"BE95TdKW\",\"guide_components_expander_index.md\":\"BKgcUJzQ\",\"guide_components_message-bar_index.md\":\"AEtAWlF8\",\"guide_components_menu-flyout_index.md\":\"Csa7irPj\",\"guide_components_panel_index.md\":\"CsTu0bXo\",\"guide_components_panel_properties.md\":\"BaxoCYKq\",\"guide_components_progress-bar_emits.md\":\"BcwXUpsF\",\"guide_components_progress-bar_properties.md\":\"TxiS9ZMA\",\"guide_components_progress-ring_emits.md\":\"D2Y6hIZ9\",\"guide_components_color-picker_index.md\":\"DCc4ixcU\",\"guide_components_progress-ring_index.md\":\"CPb-ZEPE\",\"guide_components_color-picker_properties.md\":\"wcXK29Vl\",\"guide_components_time-picker_index.md\":\"CQJdRRaG\",\"guide_components_drop-down_properties.md\":\"Bwlkpr1q\",\"guide_components_infinite-scroll-view_index.md\":\"yAuD807x\",\"guide_components_check-box_index.md\":\"FYgdu4oq\",\"guide_components_progress-bar_index.md\":\"D8vHQw5V\",\"guide_components_combo-box_index.md\":\"DTyu3eNd\",\"guide_components_info-box_emits.md\":\"DlEwpkkq\",\"guide_components_drop-down_index.md\":\"BZzJZQWq\",\"guide_components_list-view_index.md\":\"BoYvMzb0\",\"guide_components_verify-box_properties.md\":\"CW6W8fFf\",\"guide_components_verify-box_index.md\":\"DwSB40wR\",\"guide_index.md\":\"Bndlt3sL\",\"guide_components_web-window_index.md\":\"Bxc8vEeI\",\"index.md\":\"MTRqI42u\",\"guide_components_combo-box_properties.md\":\"AWfHzV6x\",\"guide_components_combobox_emits.md\":\"CGB6WLt8\",\"guide_components_combobox_properties.md\":\"Bja0hMou\",\"guide_components_details-list_index.md\":\"CcgOCIyt\",\"guide_components_info-box_index.md\":\"vXh-_DsL\",\"guide_components_combobox_index.md\":\"CsPkY6YB\",\"guide_components_date-picker_index.md\":\"12vmUIup\",\"guide_components_flip-view_emits.md\":\"DCheHjDj\",\"guide_components_panel_emits.md\":\"DG0REDq8\",\"guide_components_breadcrumb_index.md\":\"DyDm7PeP\",\"guide_components_radio-group_properties.md\":\"BnPxoKsQ\",\"guide_components_persona_emits.md\":\"CnsDPKRU\",\"guide_components_pivot_properties.md\":\"BmoLpPi1\",\"guide_components_persona_index.md\":\"DT00jby4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vfluent3\",\"description\":\"A Vue3 component library for Fluent UI\",\"base\":\"/VFluent3/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"VFluent3\",\"footer\":{\"message\":\"MIT Licensed\",\"copyright\":\"Copyright © Creator SN - 2022\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/\"}],\"sidebar\":[{\"text\":\"Basic input\",\"collapsed\":true,\"items\":[{\"text\":\"Button\",\"link\":\"/guide/components/button/\"},{\"text\":\"CheckBox\",\"link\":\"/guide/components/check-box/\"},{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"},{\"text\":\"Combobox\",\"link\":\"/guide/components/combobox/\"},{\"text\":\"DetailsList\",\"link\":\"/guide/components/details-list/\"},{\"text\":\"DropDown\",\"link\":\"/guide/components/drop-down/\"},{\"text\":\"Radio\",\"link\":\"/guide/components/radio/\"},{\"text\":\"RadioGroup\",\"link\":\"/guide/components/radio-group/\"},{\"text\":\"RatingControl\",\"link\":\"/guide/components/rating-control/\"},{\"text\":\"Slider\",\"link\":\"/guide/components/slider/\"},{\"text\":\"ToggleSwitch\",\"link\":\"/guide/components/toggle-switch/\"},{\"text\":\"Tag\",\"link\":\"/guide/components/tag/\"}]},{\"text\":\"Collections\",\"collapsed\":true,\"items\":[{\"text\":\"FlipView\",\"link\":\"/guide/components/flip-view/\"},{\"text\":\"ListView\",\"link\":\"/guide/components/list-view/\"},{\"text\":\"TreeView\",\"link\":\"/guide/components/tree-view/\"}]},{\"text\":\"Date & Time\",\"collapsed\":true,\"items\":[{\"text\":\"CalendarDatePicker\",\"link\":\"/guide/components/calendar-date-picker/\"},{\"text\":\"CalendarView\",\"link\":\"/guide/components/calendar-view/\"},{\"text\":\"DatePicker\",\"link\":\"/guide/components/date-picker/\"},{\"text\":\"TimePicker\",\"link\":\"/guide/components/time-picker/\"}]},{\"text\":\"Dialogs & flyouts\",\"collapsed\":true,\"items\":[{\"text\":\"Callout\",\"link\":\"/guide/components/callout/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Layout\",\"collapsed\":true,\"items\":[{\"text\":\"Collapse\",\"link\":\"/guide/components/collapse/\"},{\"text\":\"Expander\",\"link\":\"/guide/components/expander/\"},{\"text\":\"Drawer\",\"link\":\"/guide/components/drawer/\"},{\"text\":\"Panel\",\"link\":\"/guide/components/panel/\"}]},{\"text\":\"Media\",\"collapsed\":true,\"items\":[{\"text\":\"Image\",\"link\":\"/guide/components/image/\"},{\"text\":\"Img\",\"link\":\"/guide/components/img/\"},{\"text\":\"ImgBox\",\"link\":\"/guide/components/img-box/\"},{\"text\":\"Persona\",\"link\":\"/guide/components/persona/\"}]},{\"text\":\"Menu & toolbars\",\"collapsed\":true,\"items\":[{\"text\":\"CommandBar\",\"link\":\"/guide/components/command-bar/\"},{\"text\":\"MenuFlyout\",\"link\":\"/guide/components/menu-flyout/\"},{\"text\":\"SwipeControl\",\"link\":\"/guide/components/swipe-control/\"}]},{\"text\":\"Navigation\",\"collapsed\":true,\"items\":[{\"text\":\"Breadcrumb\",\"link\":\"/guide/components/breadcrumb/\"},{\"text\":\"NavigationPanel\",\"link\":\"/guide/components/navigation-panel/\"},{\"text\":\"NavigationView\",\"link\":\"/guide/components/navigation-view/\"},{\"text\":\"Pivot\",\"link\":\"/guide/components/pivot/\"},{\"text\":\"Pagination\",\"link\":\"/guide/components/pagination/\"}]},{\"text\":\"Scrolling\",\"collapsed\":true,\"items\":[{\"text\":\"InfiniteScrollView\",\"link\":\"/guide/components/infinite-scroll-view/\"},{\"text\":\"ScrollStory\",\"link\":\"/guide/components/scroll-story/\"}]},{\"text\":\"Status & info\",\"collapsed\":true,\"items\":[{\"text\":\"Badge\",\"link\":\"/guide/components/badge/\"},{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"ProgressBar\",\"link\":\"/guide/components/progress-bar/\"},{\"text\":\"ProgressRing\",\"link\":\"/guide/components/progress-ring/\"}]},{\"text\":\"Styles\",\"collapsed\":true,\"items\":[{\"text\":\"AnimatedIcon\",\"link\":\"/guide/components/animated-icon/\"},{\"text\":\"IconElement\",\"link\":\"/guide/components/icon-element/\"},{\"text\":\"RevealContainer\",\"link\":\"/guide/components/reveal-container/\"},{\"text\":\"Shimmer\",\"link\":\"/guide/components/shimmer/\"}]},{\"text\":\"Text\",\"collapsed\":true,\"items\":[{\"text\":\"SearchBox\",\"link\":\"/guide/components/search-box/\"},{\"text\":\"TextBox\",\"link\":\"/guide/components/text-box/\"},{\"text\":\"TextField\",\"link\":\"/guide/components/text-field/\"},{\"text\":\"VerifyBox\",\"link\":\"/guide/components/verify-box/\"}]},{\"text\":\"Windowing\",\"collapsed\":true,\"items\":[{\"text\":\"WebWindow\",\"link\":\"/guide/components/web-window/\"}]},{\"text\":\"Global\",\"collapsed\":true,\"items\":[{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Advance\",\"collapsed\":true,\"items\":[{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git a/guide/components/img-box/index.html b/guide/components/img-box/index.html
new file mode 100644
index 0000000..a4338a5
--- /dev/null
+++ b/guide/components/img-box/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>ImgBox | vfluent3</title>
+    <meta name="description" content="A Vue3 component library for Fluent UI">
+    <meta name="generator" content="VitePress v1.0.0-rc.45">
+    <link rel="preload stylesheet" href="/VFluent3/assets/style.BabQegKX.css" as="style">
+    
+    <script type="module" src="/VFluent3/assets/app.CSutcJ2E.js"></script>
+    <link rel="preload" href="/VFluent3/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/framework.DvIFzl91.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/theme.CgqFBnN_.js">
+    <link rel="modulepreload" href="/VFluent3/assets/guide_components_img-box_index.md.DYtggkf_.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-19c990f1><div class="wrapper" data-v-19c990f1><div class="container" data-v-19c990f1><div class="title" data-v-19c990f1><div class="VPNavBarTitle has-sidebar" data-v-19c990f1 data-v-ab179fa1><a class="title" href="/VFluent3/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>VFluent3</span><!--[--><!--]--></a></div></div><div class="content" data-v-19c990f1><div class="content-body" data-v-19c990f1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-19c990f1><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-19c990f1 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Guide</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-19c990f1 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-19c990f1 data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-19c990f1 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-19c990f1><div class="divider-line" data-v-19c990f1></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-d2ecc192><button data-v-d2ecc192>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-575e6a36><div class="curtain" data-v-575e6a36></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-575e6a36><span class="visually-hidden" id="sidebar-aria-label" data-v-575e6a36> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Basic input</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/button/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/check-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CheckBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/combobox/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Combobox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/details-list/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DetailsList</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drop-down/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DropDown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio-group/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RadioGroup</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/rating-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RatingControl</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/slider/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/toggle-switch/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ToggleSwitch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tag/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Tag</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Collections</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/flip-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>FlipView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/list-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ListView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tree-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TreeView</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Date & Time</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarDatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/time-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TimePicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Dialogs & flyouts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/callout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Callout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Layout</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/collapse/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Collapse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/expander/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Expander</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drawer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Panel</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible has-active" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Media</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/image/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Img</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ImgBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/persona/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Persona</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Menu & toolbars</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/command-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CommandBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/menu-flyout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MenuFlyout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/swipe-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SwipeControl</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Navigation</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/breadcrumb/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationPanel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pivot/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pivot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pagination/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pagination</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Scrolling</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/infinite-scroll-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfiniteScrollView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/scroll-story/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ScrollStory</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Status & info</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/badge/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-ring/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressRing</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Styles</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/animated-icon/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>AnimatedIcon</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/icon-element/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>IconElement</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/reveal-container/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RevealContainer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/shimmer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Shimmer</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Text</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/search-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SearchBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-field/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextField</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/verify-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>VerifyBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Windowing</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/web-window/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>WebWindow</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Global</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Advance</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-935f8a84><div class="content" data-v-935f8a84><div class="outline-marker" data-v-935f8a84></div><div class="outline-title" role="heading" aria-level="2" data-v-935f8a84>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-935f8a84><span class="visually-hidden" id="doc-outline-aria-label" data-v-935f8a84> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-935f8a84 data-v-b933a997><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _VFluent3_guide_components_img-box_" data-v-39a288b8><div><h3 id="imgbox-demo" tabindex="-1">ImgBox-DEMO <a class="header-anchor" href="#imgbox-demo" aria-label="Permalink to &quot;ImgBox-DEMO&quot;">​</a></h3><hr><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-ImgBox</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> url</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;https://rescreator.blob.core.windows.net/slider/1444a25f-3e33-44a2-878f-a628342ad88f.jpg&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">350</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">350</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-ImgBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="imgbox-background-image" tabindex="-1">ImgBox-Background Image <a class="header-anchor" href="#imgbox-background-image" aria-label="Permalink to &quot;ImgBox-Background Image&quot;">​</a></h3><hr><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-ImgBox</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> url</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;https://rescreator.blob.core.windows.net/slider/1444a25f-3e33-44a2-878f-a628342ad88f.jpg&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">onbackground</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">350</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">350</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">background-size</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">cover</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-ImgBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="imgbox-lazy-load" tabindex="-1">ImgBox-Lazy Load <a class="header-anchor" href="#imgbox-lazy-load" aria-label="Permalink to &quot;ImgBox-Lazy Load&quot;">​</a></h3><hr><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-ImgBox</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> url</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;https://rescreator.blob.core.windows.net/slider/f2fcea9e-e31b-4a1e-87be-9241531c7dc6.jpg&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">onlazy</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">350</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">350</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">background-size</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">cover</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-ImgBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">url</td><td style="text-align:center;">String</td><td style="text-align:center;">Yes</td><td style="text-align:center;">N/A</td><td style="text-align:center;">Image url, be careful don&#39;t use cross-domain url</td></tr><tr><td style="text-align:center;">onlazy</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">Lazy load image</td></tr><tr><td style="text-align:center;">loadingColor</td><td style="text-align:center;">[string(color)] No</td><td style="text-align:center;">rgba(0, 90, 158, 1)</td><td style="text-align:center;">The foreground of the progress-ring or progress-bar.</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">onbackground</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">Show as background</td></tr></tbody></table><h3 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to &quot;Events&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">事件名(Name)</th><th style="text-align:center;">参数类型(args)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">error</td><td style="text-align:center;">object</td><td style="text-align:center;">Image load failed will call back error function with error message.</td></tr></tbody></table></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-09de1c0f><!--[--><!--]--><!----><nav class="prev-next" data-v-09de1c0f><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link prev" href="/VFluent3/guide/components/img/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Previous page</span><span class="title" data-v-09de1c0f>Img</span><!--]--></a></div><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link next" href="/VFluent3/guide/components/persona/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Next page</span><span class="title" data-v-09de1c0f>Persona</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>MIT Licensed</p><p class="copyright" data-v-e315a0ad>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_calendar-date-picker_properties.md\":\"DXRjmMG8\",\"guide_components_image_properties.md\":\"DGanRzCb\",\"guide_components_img-box_index.md\":\"DYtggkf_\",\"guide_components_img_emits.md\":\"BlE7jvZQ\",\"guide_components_img_index.md\":\"Bm9FiuU4\",\"guide_components_icon-element_properties.md\":\"8Oakruwc\",\"guide_components_img_properties.md\":\"B42YSocI\",\"guide_components_drawer_index.md\":\"D_vpnCpE\",\"guide_components_verify-box_emits.md\":\"DT17Iazx\",\"guide_components_calendar-date-picker_index.md\":\"BdHjrurh\",\"guide_components_rating-control_index.md\":\"Q9l5Lfrr\",\"guide_components_rating-control_properties.md\":\"DKprnl0i\",\"guide_components_calendar-view_index.md\":\"zdoRYVx1\",\"guide_components_animated-icon_index.md\":\"yZDMzCFe\",\"guide_components_calendar-date-picker_emits.md\":\"D5OkfR8j\",\"guide_components_badge_index.md\":\"Bb4crrJn\",\"guide_components_image_index.md\":\"B7X6cWAZ\",\"guide_components_slider_index.md\":\"C7zZ2d-W\",\"guide_components_radio-group_index.md\":\"CVfh3h5H\",\"guide_components_swipe-control_index.md\":\"DwrDVPc1\",\"guide_components_color-picker_emits.md\":\"BHDXVtBQ\",\"guide_components_radio_index.md\":\"90as5QGp\",\"guide_components_pagination_properties.md\":\"JUAPvcTL\",\"guide_components_persona_properties.md\":\"DUTPhPMp\",\"guide_components_combo-box_emits.md\":\"Dh5R-qEv\",\"guide_components_pivot_emits.md\":\"BTJPgNpy\",\"guide_components_pagination_index.md\":\"CnW2zAht\",\"guide_components_flip-view_properties.md\":\"BqZ4hhgU\",\"guide_components_icon-element_emits.md\":\"D5TXFdTZ\",\"guide_components_flip-view_index.md\":\"DefnDOv6\",\"guide_components_navigation-panel_index.md\":\"6mO__sSK\",\"guide_components_rating-control_emits.md\":\"blvomSeC\",\"guide_components_icon-element_index.md\":\"DQ8K7JNn\",\"guide_components_navigation-view_index.md\":\"4AQRiz1k\",\"guide_components_toggle-switch_emits.md\":\"CLGzrNut\",\"guide_components_toggle-switch_index.md\":\"61en_q9-\",\"guide_components_scroll-story_index.md\":\"Vpgb1HSV\",\"guide_components_reveal-container_index.md\":\"Cut2r4tV\",\"guide_components_search-box_emits.md\":\"-d9sWNNt\",\"guide_components_search-box_properties.md\":\"DEKFfPFw\",\"guide_components_shimmer_emits.md\":\"CTMInlI3\",\"guide_components_tag_index.md\":\"BhhxkcHn\",\"guide_components_search-box_index.md\":\"DgkrY0oY\",\"guide_components_shimmer_index.md\":\"iZlHuTxw\",\"guide_components_shimmer_properties.md\":\"CdkU1o6H\",\"guide_components_tree-view_index.md\":\"CUrwan4q\",\"guide_components_text-field_index.md\":\"CXSimJtj\",\"guide_components_text-box_index.md\":\"C5moAPfB\",\"guide_components_progress-ring_properties.md\":\"Dc08Uiff\",\"guide_components_toggle-switch_properties.md\":\"tFppK_IS\",\"guide_components_radio-group_emits.md\":\"cEDzKVnN\",\"guide_components_collapse_index.md\":\"N9Iu5-2v\",\"guide_components_image_emits.md\":\"lmlz2xJd\",\"guide_components_callout_index.md\":\"D9RU33w6\",\"guide_components_pivot_index.md\":\"B_vwQL-5\",\"guide_components_command-bar_index.md\":\"Cp4_rrGB\",\"guide_components_pagination_emits.md\":\"Dng86A22\",\"guide_components_button_index.md\":\"7sqT2MQP\",\"guide_components_info-box_properties.md\":\"BI7Nvk-E\",\"guide_components_drop-down_emits.md\":\"BE95TdKW\",\"guide_components_expander_index.md\":\"BKgcUJzQ\",\"guide_components_message-bar_index.md\":\"AEtAWlF8\",\"guide_components_menu-flyout_index.md\":\"Csa7irPj\",\"guide_components_panel_index.md\":\"CsTu0bXo\",\"guide_components_panel_properties.md\":\"BaxoCYKq\",\"guide_components_progress-bar_emits.md\":\"BcwXUpsF\",\"guide_components_progress-bar_properties.md\":\"TxiS9ZMA\",\"guide_components_progress-ring_emits.md\":\"D2Y6hIZ9\",\"guide_components_color-picker_index.md\":\"DCc4ixcU\",\"guide_components_progress-ring_index.md\":\"CPb-ZEPE\",\"guide_components_color-picker_properties.md\":\"wcXK29Vl\",\"guide_components_time-picker_index.md\":\"CQJdRRaG\",\"guide_components_drop-down_properties.md\":\"Bwlkpr1q\",\"guide_components_infinite-scroll-view_index.md\":\"yAuD807x\",\"guide_components_check-box_index.md\":\"FYgdu4oq\",\"guide_components_progress-bar_index.md\":\"D8vHQw5V\",\"guide_components_combo-box_index.md\":\"DTyu3eNd\",\"guide_components_info-box_emits.md\":\"DlEwpkkq\",\"guide_components_drop-down_index.md\":\"BZzJZQWq\",\"guide_components_list-view_index.md\":\"BoYvMzb0\",\"guide_components_verify-box_properties.md\":\"CW6W8fFf\",\"guide_components_verify-box_index.md\":\"DwSB40wR\",\"guide_index.md\":\"Bndlt3sL\",\"guide_components_web-window_index.md\":\"Bxc8vEeI\",\"index.md\":\"MTRqI42u\",\"guide_components_combo-box_properties.md\":\"AWfHzV6x\",\"guide_components_combobox_emits.md\":\"CGB6WLt8\",\"guide_components_combobox_properties.md\":\"Bja0hMou\",\"guide_components_details-list_index.md\":\"CcgOCIyt\",\"guide_components_info-box_index.md\":\"vXh-_DsL\",\"guide_components_combobox_index.md\":\"CsPkY6YB\",\"guide_components_date-picker_index.md\":\"12vmUIup\",\"guide_components_flip-view_emits.md\":\"DCheHjDj\",\"guide_components_panel_emits.md\":\"DG0REDq8\",\"guide_components_breadcrumb_index.md\":\"DyDm7PeP\",\"guide_components_radio-group_properties.md\":\"BnPxoKsQ\",\"guide_components_persona_emits.md\":\"CnsDPKRU\",\"guide_components_pivot_properties.md\":\"BmoLpPi1\",\"guide_components_persona_index.md\":\"DT00jby4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vfluent3\",\"description\":\"A Vue3 component library for Fluent UI\",\"base\":\"/VFluent3/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"VFluent3\",\"footer\":{\"message\":\"MIT Licensed\",\"copyright\":\"Copyright © Creator SN - 2022\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/\"}],\"sidebar\":[{\"text\":\"Basic input\",\"collapsed\":true,\"items\":[{\"text\":\"Button\",\"link\":\"/guide/components/button/\"},{\"text\":\"CheckBox\",\"link\":\"/guide/components/check-box/\"},{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"},{\"text\":\"Combobox\",\"link\":\"/guide/components/combobox/\"},{\"text\":\"DetailsList\",\"link\":\"/guide/components/details-list/\"},{\"text\":\"DropDown\",\"link\":\"/guide/components/drop-down/\"},{\"text\":\"Radio\",\"link\":\"/guide/components/radio/\"},{\"text\":\"RadioGroup\",\"link\":\"/guide/components/radio-group/\"},{\"text\":\"RatingControl\",\"link\":\"/guide/components/rating-control/\"},{\"text\":\"Slider\",\"link\":\"/guide/components/slider/\"},{\"text\":\"ToggleSwitch\",\"link\":\"/guide/components/toggle-switch/\"},{\"text\":\"Tag\",\"link\":\"/guide/components/tag/\"}]},{\"text\":\"Collections\",\"collapsed\":true,\"items\":[{\"text\":\"FlipView\",\"link\":\"/guide/components/flip-view/\"},{\"text\":\"ListView\",\"link\":\"/guide/components/list-view/\"},{\"text\":\"TreeView\",\"link\":\"/guide/components/tree-view/\"}]},{\"text\":\"Date & Time\",\"collapsed\":true,\"items\":[{\"text\":\"CalendarDatePicker\",\"link\":\"/guide/components/calendar-date-picker/\"},{\"text\":\"CalendarView\",\"link\":\"/guide/components/calendar-view/\"},{\"text\":\"DatePicker\",\"link\":\"/guide/components/date-picker/\"},{\"text\":\"TimePicker\",\"link\":\"/guide/components/time-picker/\"}]},{\"text\":\"Dialogs & flyouts\",\"collapsed\":true,\"items\":[{\"text\":\"Callout\",\"link\":\"/guide/components/callout/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Layout\",\"collapsed\":true,\"items\":[{\"text\":\"Collapse\",\"link\":\"/guide/components/collapse/\"},{\"text\":\"Expander\",\"link\":\"/guide/components/expander/\"},{\"text\":\"Drawer\",\"link\":\"/guide/components/drawer/\"},{\"text\":\"Panel\",\"link\":\"/guide/components/panel/\"}]},{\"text\":\"Media\",\"collapsed\":true,\"items\":[{\"text\":\"Image\",\"link\":\"/guide/components/image/\"},{\"text\":\"Img\",\"link\":\"/guide/components/img/\"},{\"text\":\"ImgBox\",\"link\":\"/guide/components/img-box/\"},{\"text\":\"Persona\",\"link\":\"/guide/components/persona/\"}]},{\"text\":\"Menu & toolbars\",\"collapsed\":true,\"items\":[{\"text\":\"CommandBar\",\"link\":\"/guide/components/command-bar/\"},{\"text\":\"MenuFlyout\",\"link\":\"/guide/components/menu-flyout/\"},{\"text\":\"SwipeControl\",\"link\":\"/guide/components/swipe-control/\"}]},{\"text\":\"Navigation\",\"collapsed\":true,\"items\":[{\"text\":\"Breadcrumb\",\"link\":\"/guide/components/breadcrumb/\"},{\"text\":\"NavigationPanel\",\"link\":\"/guide/components/navigation-panel/\"},{\"text\":\"NavigationView\",\"link\":\"/guide/components/navigation-view/\"},{\"text\":\"Pivot\",\"link\":\"/guide/components/pivot/\"},{\"text\":\"Pagination\",\"link\":\"/guide/components/pagination/\"}]},{\"text\":\"Scrolling\",\"collapsed\":true,\"items\":[{\"text\":\"InfiniteScrollView\",\"link\":\"/guide/components/infinite-scroll-view/\"},{\"text\":\"ScrollStory\",\"link\":\"/guide/components/scroll-story/\"}]},{\"text\":\"Status & info\",\"collapsed\":true,\"items\":[{\"text\":\"Badge\",\"link\":\"/guide/components/badge/\"},{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"ProgressBar\",\"link\":\"/guide/components/progress-bar/\"},{\"text\":\"ProgressRing\",\"link\":\"/guide/components/progress-ring/\"}]},{\"text\":\"Styles\",\"collapsed\":true,\"items\":[{\"text\":\"AnimatedIcon\",\"link\":\"/guide/components/animated-icon/\"},{\"text\":\"IconElement\",\"link\":\"/guide/components/icon-element/\"},{\"text\":\"RevealContainer\",\"link\":\"/guide/components/reveal-container/\"},{\"text\":\"Shimmer\",\"link\":\"/guide/components/shimmer/\"}]},{\"text\":\"Text\",\"collapsed\":true,\"items\":[{\"text\":\"SearchBox\",\"link\":\"/guide/components/search-box/\"},{\"text\":\"TextBox\",\"link\":\"/guide/components/text-box/\"},{\"text\":\"TextField\",\"link\":\"/guide/components/text-field/\"},{\"text\":\"VerifyBox\",\"link\":\"/guide/components/verify-box/\"}]},{\"text\":\"Windowing\",\"collapsed\":true,\"items\":[{\"text\":\"WebWindow\",\"link\":\"/guide/components/web-window/\"}]},{\"text\":\"Global\",\"collapsed\":true,\"items\":[{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Advance\",\"collapsed\":true,\"items\":[{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git a/guide/components/img/emits.html b/guide/components/img/emits.html
index 3e30676..8407c5e 100644
--- a/guide/components/img/emits.html
+++ b/guide/components/img/emits.html
@@ -1,20 +1,24 @@
 <!DOCTYPE html>
-<html lang="en-US">
+<html lang="en-US" dir="ltr">
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>Emits | vfluent3</title>
+    <title>vfluent3</title>
     <meta name="description" content="A Vue3 component library for Fluent UI">
-    <link rel="stylesheet" href="/VFluent3/assets/style.0a1d87af.css">
-    <link rel="modulepreload" href="/VFluent3/assets/app.d60fa8c3.js">
-    <link rel="modulepreload" href="/VFluent3/assets/guide_components_img_emits.md.6237adb4.lean.js">
+    <meta name="generator" content="VitePress v1.0.0-rc.45">
+    <link rel="preload stylesheet" href="/VFluent3/assets/style.BabQegKX.css" as="style">
     
-    <script>(()=>{const e=localStorage.getItem("vitepress-theme-appearance"),a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script type="module" src="/VFluent3/assets/app.CSutcJ2E.js"></script>
+    <link rel="preload" href="/VFluent3/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/framework.DvIFzl91.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/theme.CgqFBnN_.js">
+    <link rel="modulepreload" href="/VFluent3/assets/guide_components_img_emits.md.BlE7jvZQ.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
   </head>
   <body>
-    <div id="app"><div class="Layout" data-v-058b7495><!--[--><!--]--><!--[--><span tabindex="-1" data-v-bea91388></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-bea91388> Skip to content </a><!--]--><!----><header class="VPNav" data-v-058b7495 data-v-2a0a2738><div class="VPNavBar has-sidebar" data-v-2a0a2738 data-v-45c9f423><div class="container" data-v-45c9f423><div class="VPNavBarTitle has-sidebar" data-v-45c9f423 data-v-011600ce><a class="title" href="/VFluent3/" data-v-011600ce><!----><!--[-->VFluent3<!--]--></a></div><div class="content" data-v-45c9f423><!----><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-45c9f423 data-v-4da4371d><span id="main-nav-aria-label" class="visually-hidden" data-v-4da4371d>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" data-v-4da4371d data-v-66f8d518 data-v-4d08dd3a><!--[-->Home<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" data-v-4da4371d data-v-66f8d518 data-v-4d08dd3a><!--[-->Guide<!--]--><!----></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-45c9f423 data-v-bf1c94ca><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" data-v-bf1c94ca data-v-d0ee0df2 data-v-55b931a0><span class="check" data-v-55b931a0><span class="icon" data-v-55b931a0><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-d0ee0df2><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-d0ee0df2><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-45c9f423 data-v-7cece6ac data-v-37af1650><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-37af1650><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-37af1650><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-37af1650><div class="VPMenu" data-v-37af1650 data-v-17dc081b><!----><!--[--><!--[--><!----><div class="group" data-v-7cece6ac><div class="item appearance" data-v-7cece6ac><p class="label" data-v-7cece6ac>Appearance</p><div class="appearance-action" data-v-7cece6ac><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" data-v-7cece6ac data-v-d0ee0df2 data-v-55b931a0><span class="check" data-v-55b931a0><span class="icon" data-v-55b931a0><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-d0ee0df2><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-d0ee0df2><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-45c9f423 data-v-5484e669><span class="container" data-v-5484e669><span class="top" data-v-5484e669></span><span class="middle" data-v-5484e669></span><span class="bottom" data-v-5484e669></span></span></button></div></div></div><!----></header><div class="VPLocalNav" data-v-058b7495 data-v-f623cd72><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-f623cd72><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-f623cd72><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-f623cd72>Menu</span></button><a class="top-link" href="#" data-v-f623cd72> Return to top </a></div><aside class="VPSidebar" data-v-058b7495 data-v-3b8ec0c7><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-3b8ec0c7><span class="visually-hidden" id="sidebar-aria-label" data-v-3b8ec0c7> Sidebar Navigation </span><!--[--><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Basic</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/button/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Button</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/check-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>CheckBox</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/radio/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Radio</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/progress-bar/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ProgressBar</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/progress-ring/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ProgressRing</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/toggle-switch/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ToggleSwitch</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/img/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Img</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/text-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>TextBox</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/combo-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ComboBox</span><!--]--><!----></a><!--]--></div></section></div><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Global</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/message-bar/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>MessageBar</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/info-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>InfoBox</span><!--]--><!----></a><!--]--></div></section></div><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Advance</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/color-picker/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ColorPicker</span><!--]--><!----></a><!--]--></div></section></div><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-058b7495 data-v-564173e9><div class="VPDoc has-sidebar" data-v-564173e9 data-v-32b7ddf4><div class="container" data-v-32b7ddf4><div class="aside" data-v-32b7ddf4><div class="aside-curtain" data-v-32b7ddf4></div><div class="aside-container" data-v-32b7ddf4><div class="aside-content" data-v-32b7ddf4><div class="VPDocAside" data-v-32b7ddf4 data-v-35c1bae1><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline has-outline" data-v-35c1bae1 data-v-123cce62><div class="content" data-v-123cce62><div class="outline-marker" data-v-123cce62></div><div class="outline-title" data-v-123cce62>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-123cce62><span class="visually-hidden" id="doc-outline-aria-label" data-v-123cce62> Table of Contents for current page </span><ul class="root" data-v-123cce62><!--[--><li style="" data-v-123cce62><a class="outline-link" href="#emits" data-v-123cce62>Emits</a><!----></li><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-35c1bae1></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-32b7ddf4><div class="content-container" data-v-32b7ddf4><!--[--><!--]--><main class="main" data-v-32b7ddf4><div style="position:relative;" class="vp-doc _VFluent3_guide_components_img_emits" data-v-32b7ddf4><div><h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">error</td><td style="text-align:center;">evt[Event]</td><td style="text-align:center;">onerror</td></tr><tr><td style="text-align:center;">loaded</td><td style="text-align:center;">evt[Event]</td><td style="text-align:center;">onload</td></tr></tbody></table></div></div></main><footer class="VPDocFooter" data-v-32b7ddf4 data-v-cfaa3a6c><div class="edit-info" data-v-cfaa3a6c><!----><!----></div><div class="prev-next" data-v-cfaa3a6c><div class="pager" data-v-cfaa3a6c><!----></div><div class="pager" data-v-cfaa3a6c><a class="pager-link next" href="/VFluent3/guide/components/button/" data-v-cfaa3a6c><span class="desc" data-v-cfaa3a6c>Next page</span><span class="title" data-v-cfaa3a6c>Button</span></a></div></div></footer><!--[--><!--]--></div></div></div></div></div><footer class="VPFooter has-sidebar" data-v-058b7495 data-v-a6c8dde4><div class="container" data-v-a6c8dde4><p class="message" data-v-a6c8dde4>MIT Licensed</p><p class="copyright" data-v-a6c8dde4>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
-    <script>__VP_HASH_MAP__ = JSON.parse("{\"guide_components_button_emits.md\":\"d682bf18\",\"guide_components_button_index.md\":\"23a8eb54\",\"guide_components_button_properties.md\":\"cd4004b6\",\"guide_components_check-box_emits.md\":\"31609794\",\"guide_components_check-box_index.md\":\"32046814\",\"guide_components_check-box_properties.md\":\"8f33ac0c\",\"guide_components_color-picker_emits.md\":\"00983cd0\",\"guide_components_color-picker_index.md\":\"b2d62612\",\"guide_components_color-picker_properties.md\":\"5466ba72\",\"guide_components_combo-box_emits.md\":\"d5ffda50\",\"guide_components_combo-box_index.md\":\"1c4364f5\",\"guide_components_combo-box_properties.md\":\"2e1d6060\",\"guide_components_img_emits.md\":\"6237adb4\",\"guide_components_img_index.md\":\"fa51a3a1\",\"guide_components_img_properties.md\":\"8d321b5e\",\"guide_components_info-box_emits.md\":\"c2e71eec\",\"guide_components_info-box_index.md\":\"06175fed\",\"guide_components_info-box_properties.md\":\"314dbb00\",\"guide_components_message-bar_emits.md\":\"e89a5a22\",\"guide_components_message-bar_index.md\":\"3f0b01d6\",\"guide_components_message-bar_properties.md\":\"ee3838d9\",\"guide_components_progress-bar_emits.md\":\"5b611e3b\",\"guide_components_progress-bar_index.md\":\"689c3241\",\"guide_components_progress-bar_properties.md\":\"39af7fb2\",\"guide_components_progress-ring_emits.md\":\"67e4644e\",\"guide_components_progress-ring_index.md\":\"9a33542b\",\"guide_components_progress-ring_properties.md\":\"c897c4bb\",\"guide_components_radio_emits.md\":\"28506857\",\"guide_components_radio_index.md\":\"e5a479ce\",\"guide_components_radio_properties.md\":\"f8e55d2f\",\"guide_components_text-box_emits.md\":\"0bf89ef8\",\"guide_components_text-box_index.md\":\"7ccfc637\",\"guide_components_text-box_properties.md\":\"aab3a89e\",\"guide_components_toggle-switch_emits.md\":\"5146435f\",\"guide_components_toggle-switch_index.md\":\"8be48081\",\"guide_components_toggle-switch_properties.md\":\"54984c3a\",\"guide_index.md\":\"e3dca1d7\",\"index.md\":\"1e9773d5\"}")</script>
-    <script type="module" async src="/VFluent3/assets/app.d60fa8c3.js"></script>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-19c990f1><div class="wrapper" data-v-19c990f1><div class="container" data-v-19c990f1><div class="title" data-v-19c990f1><div class="VPNavBarTitle has-sidebar" data-v-19c990f1 data-v-ab179fa1><a class="title" href="/VFluent3/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>VFluent3</span><!--[--><!--]--></a></div></div><div class="content" data-v-19c990f1><div class="content-body" data-v-19c990f1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-19c990f1><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-19c990f1 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Guide</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-19c990f1 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-19c990f1 data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-19c990f1 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-19c990f1><div class="divider-line" data-v-19c990f1></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-d2ecc192><button data-v-d2ecc192>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-575e6a36><div class="curtain" data-v-575e6a36></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-575e6a36><span class="visually-hidden" id="sidebar-aria-label" data-v-575e6a36> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Basic input</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/button/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/check-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CheckBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/combobox/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Combobox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/details-list/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DetailsList</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drop-down/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DropDown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio-group/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RadioGroup</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/rating-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RatingControl</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/slider/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/toggle-switch/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ToggleSwitch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tag/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Tag</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Collections</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/flip-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>FlipView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/list-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ListView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tree-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TreeView</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Date & Time</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarDatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/time-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TimePicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Dialogs & flyouts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/callout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Callout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Layout</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/collapse/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Collapse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/expander/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Expander</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drawer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Panel</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Media</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/image/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Img</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ImgBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/persona/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Persona</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Menu & toolbars</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/command-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CommandBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/menu-flyout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MenuFlyout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/swipe-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SwipeControl</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Navigation</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/breadcrumb/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationPanel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pivot/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pivot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pagination/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pagination</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Scrolling</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/infinite-scroll-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfiniteScrollView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/scroll-story/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ScrollStory</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Status & info</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/badge/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-ring/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressRing</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Styles</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/animated-icon/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>AnimatedIcon</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/icon-element/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>IconElement</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/reveal-container/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RevealContainer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/shimmer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Shimmer</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Text</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/search-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SearchBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-field/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextField</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/verify-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>VerifyBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Windowing</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/web-window/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>WebWindow</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Global</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Advance</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-935f8a84><div class="content" data-v-935f8a84><div class="outline-marker" data-v-935f8a84></div><div class="outline-title" role="heading" aria-level="2" data-v-935f8a84>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-935f8a84><span class="visually-hidden" id="doc-outline-aria-label" data-v-935f8a84> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-935f8a84 data-v-b933a997><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _VFluent3_guide_components_img_emits" data-v-39a288b8><div><h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-label="Permalink to &quot;Emits&quot;">​</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead></table></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-09de1c0f><!--[--><!--]--><!----><nav class="prev-next" data-v-09de1c0f><div class="pager" data-v-09de1c0f><!----></div><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link next" href="/VFluent3/guide/components/button/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Next page</span><span class="title" data-v-09de1c0f>Button</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>MIT Licensed</p><p class="copyright" data-v-e315a0ad>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_calendar-date-picker_properties.md\":\"DXRjmMG8\",\"guide_components_image_properties.md\":\"DGanRzCb\",\"guide_components_img-box_index.md\":\"DYtggkf_\",\"guide_components_img_emits.md\":\"BlE7jvZQ\",\"guide_components_img_index.md\":\"Bm9FiuU4\",\"guide_components_icon-element_properties.md\":\"8Oakruwc\",\"guide_components_img_properties.md\":\"B42YSocI\",\"guide_components_drawer_index.md\":\"D_vpnCpE\",\"guide_components_verify-box_emits.md\":\"DT17Iazx\",\"guide_components_calendar-date-picker_index.md\":\"BdHjrurh\",\"guide_components_rating-control_index.md\":\"Q9l5Lfrr\",\"guide_components_rating-control_properties.md\":\"DKprnl0i\",\"guide_components_calendar-view_index.md\":\"zdoRYVx1\",\"guide_components_animated-icon_index.md\":\"yZDMzCFe\",\"guide_components_calendar-date-picker_emits.md\":\"D5OkfR8j\",\"guide_components_badge_index.md\":\"Bb4crrJn\",\"guide_components_image_index.md\":\"B7X6cWAZ\",\"guide_components_slider_index.md\":\"C7zZ2d-W\",\"guide_components_radio-group_index.md\":\"CVfh3h5H\",\"guide_components_swipe-control_index.md\":\"DwrDVPc1\",\"guide_components_color-picker_emits.md\":\"BHDXVtBQ\",\"guide_components_radio_index.md\":\"90as5QGp\",\"guide_components_pagination_properties.md\":\"JUAPvcTL\",\"guide_components_persona_properties.md\":\"DUTPhPMp\",\"guide_components_combo-box_emits.md\":\"Dh5R-qEv\",\"guide_components_pivot_emits.md\":\"BTJPgNpy\",\"guide_components_pagination_index.md\":\"CnW2zAht\",\"guide_components_flip-view_properties.md\":\"BqZ4hhgU\",\"guide_components_icon-element_emits.md\":\"D5TXFdTZ\",\"guide_components_flip-view_index.md\":\"DefnDOv6\",\"guide_components_navigation-panel_index.md\":\"6mO__sSK\",\"guide_components_rating-control_emits.md\":\"blvomSeC\",\"guide_components_icon-element_index.md\":\"DQ8K7JNn\",\"guide_components_navigation-view_index.md\":\"4AQRiz1k\",\"guide_components_toggle-switch_emits.md\":\"CLGzrNut\",\"guide_components_toggle-switch_index.md\":\"61en_q9-\",\"guide_components_scroll-story_index.md\":\"Vpgb1HSV\",\"guide_components_reveal-container_index.md\":\"Cut2r4tV\",\"guide_components_search-box_emits.md\":\"-d9sWNNt\",\"guide_components_search-box_properties.md\":\"DEKFfPFw\",\"guide_components_shimmer_emits.md\":\"CTMInlI3\",\"guide_components_tag_index.md\":\"BhhxkcHn\",\"guide_components_search-box_index.md\":\"DgkrY0oY\",\"guide_components_shimmer_index.md\":\"iZlHuTxw\",\"guide_components_shimmer_properties.md\":\"CdkU1o6H\",\"guide_components_tree-view_index.md\":\"CUrwan4q\",\"guide_components_text-field_index.md\":\"CXSimJtj\",\"guide_components_text-box_index.md\":\"C5moAPfB\",\"guide_components_progress-ring_properties.md\":\"Dc08Uiff\",\"guide_components_toggle-switch_properties.md\":\"tFppK_IS\",\"guide_components_radio-group_emits.md\":\"cEDzKVnN\",\"guide_components_collapse_index.md\":\"N9Iu5-2v\",\"guide_components_image_emits.md\":\"lmlz2xJd\",\"guide_components_callout_index.md\":\"D9RU33w6\",\"guide_components_pivot_index.md\":\"B_vwQL-5\",\"guide_components_command-bar_index.md\":\"Cp4_rrGB\",\"guide_components_pagination_emits.md\":\"Dng86A22\",\"guide_components_button_index.md\":\"7sqT2MQP\",\"guide_components_info-box_properties.md\":\"BI7Nvk-E\",\"guide_components_drop-down_emits.md\":\"BE95TdKW\",\"guide_components_expander_index.md\":\"BKgcUJzQ\",\"guide_components_message-bar_index.md\":\"AEtAWlF8\",\"guide_components_menu-flyout_index.md\":\"Csa7irPj\",\"guide_components_panel_index.md\":\"CsTu0bXo\",\"guide_components_panel_properties.md\":\"BaxoCYKq\",\"guide_components_progress-bar_emits.md\":\"BcwXUpsF\",\"guide_components_progress-bar_properties.md\":\"TxiS9ZMA\",\"guide_components_progress-ring_emits.md\":\"D2Y6hIZ9\",\"guide_components_color-picker_index.md\":\"DCc4ixcU\",\"guide_components_progress-ring_index.md\":\"CPb-ZEPE\",\"guide_components_color-picker_properties.md\":\"wcXK29Vl\",\"guide_components_time-picker_index.md\":\"CQJdRRaG\",\"guide_components_drop-down_properties.md\":\"Bwlkpr1q\",\"guide_components_infinite-scroll-view_index.md\":\"yAuD807x\",\"guide_components_check-box_index.md\":\"FYgdu4oq\",\"guide_components_progress-bar_index.md\":\"D8vHQw5V\",\"guide_components_combo-box_index.md\":\"DTyu3eNd\",\"guide_components_info-box_emits.md\":\"DlEwpkkq\",\"guide_components_drop-down_index.md\":\"BZzJZQWq\",\"guide_components_list-view_index.md\":\"BoYvMzb0\",\"guide_components_verify-box_properties.md\":\"CW6W8fFf\",\"guide_components_verify-box_index.md\":\"DwSB40wR\",\"guide_index.md\":\"Bndlt3sL\",\"guide_components_web-window_index.md\":\"Bxc8vEeI\",\"index.md\":\"MTRqI42u\",\"guide_components_combo-box_properties.md\":\"AWfHzV6x\",\"guide_components_combobox_emits.md\":\"CGB6WLt8\",\"guide_components_combobox_properties.md\":\"Bja0hMou\",\"guide_components_details-list_index.md\":\"CcgOCIyt\",\"guide_components_info-box_index.md\":\"vXh-_DsL\",\"guide_components_combobox_index.md\":\"CsPkY6YB\",\"guide_components_date-picker_index.md\":\"12vmUIup\",\"guide_components_flip-view_emits.md\":\"DCheHjDj\",\"guide_components_panel_emits.md\":\"DG0REDq8\",\"guide_components_breadcrumb_index.md\":\"DyDm7PeP\",\"guide_components_radio-group_properties.md\":\"BnPxoKsQ\",\"guide_components_persona_emits.md\":\"CnsDPKRU\",\"guide_components_pivot_properties.md\":\"BmoLpPi1\",\"guide_components_persona_index.md\":\"DT00jby4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vfluent3\",\"description\":\"A Vue3 component library for Fluent UI\",\"base\":\"/VFluent3/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"VFluent3\",\"footer\":{\"message\":\"MIT Licensed\",\"copyright\":\"Copyright © Creator SN - 2022\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/\"}],\"sidebar\":[{\"text\":\"Basic input\",\"collapsed\":true,\"items\":[{\"text\":\"Button\",\"link\":\"/guide/components/button/\"},{\"text\":\"CheckBox\",\"link\":\"/guide/components/check-box/\"},{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"},{\"text\":\"Combobox\",\"link\":\"/guide/components/combobox/\"},{\"text\":\"DetailsList\",\"link\":\"/guide/components/details-list/\"},{\"text\":\"DropDown\",\"link\":\"/guide/components/drop-down/\"},{\"text\":\"Radio\",\"link\":\"/guide/components/radio/\"},{\"text\":\"RadioGroup\",\"link\":\"/guide/components/radio-group/\"},{\"text\":\"RatingControl\",\"link\":\"/guide/components/rating-control/\"},{\"text\":\"Slider\",\"link\":\"/guide/components/slider/\"},{\"text\":\"ToggleSwitch\",\"link\":\"/guide/components/toggle-switch/\"},{\"text\":\"Tag\",\"link\":\"/guide/components/tag/\"}]},{\"text\":\"Collections\",\"collapsed\":true,\"items\":[{\"text\":\"FlipView\",\"link\":\"/guide/components/flip-view/\"},{\"text\":\"ListView\",\"link\":\"/guide/components/list-view/\"},{\"text\":\"TreeView\",\"link\":\"/guide/components/tree-view/\"}]},{\"text\":\"Date & Time\",\"collapsed\":true,\"items\":[{\"text\":\"CalendarDatePicker\",\"link\":\"/guide/components/calendar-date-picker/\"},{\"text\":\"CalendarView\",\"link\":\"/guide/components/calendar-view/\"},{\"text\":\"DatePicker\",\"link\":\"/guide/components/date-picker/\"},{\"text\":\"TimePicker\",\"link\":\"/guide/components/time-picker/\"}]},{\"text\":\"Dialogs & flyouts\",\"collapsed\":true,\"items\":[{\"text\":\"Callout\",\"link\":\"/guide/components/callout/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Layout\",\"collapsed\":true,\"items\":[{\"text\":\"Collapse\",\"link\":\"/guide/components/collapse/\"},{\"text\":\"Expander\",\"link\":\"/guide/components/expander/\"},{\"text\":\"Drawer\",\"link\":\"/guide/components/drawer/\"},{\"text\":\"Panel\",\"link\":\"/guide/components/panel/\"}]},{\"text\":\"Media\",\"collapsed\":true,\"items\":[{\"text\":\"Image\",\"link\":\"/guide/components/image/\"},{\"text\":\"Img\",\"link\":\"/guide/components/img/\"},{\"text\":\"ImgBox\",\"link\":\"/guide/components/img-box/\"},{\"text\":\"Persona\",\"link\":\"/guide/components/persona/\"}]},{\"text\":\"Menu & toolbars\",\"collapsed\":true,\"items\":[{\"text\":\"CommandBar\",\"link\":\"/guide/components/command-bar/\"},{\"text\":\"MenuFlyout\",\"link\":\"/guide/components/menu-flyout/\"},{\"text\":\"SwipeControl\",\"link\":\"/guide/components/swipe-control/\"}]},{\"text\":\"Navigation\",\"collapsed\":true,\"items\":[{\"text\":\"Breadcrumb\",\"link\":\"/guide/components/breadcrumb/\"},{\"text\":\"NavigationPanel\",\"link\":\"/guide/components/navigation-panel/\"},{\"text\":\"NavigationView\",\"link\":\"/guide/components/navigation-view/\"},{\"text\":\"Pivot\",\"link\":\"/guide/components/pivot/\"},{\"text\":\"Pagination\",\"link\":\"/guide/components/pagination/\"}]},{\"text\":\"Scrolling\",\"collapsed\":true,\"items\":[{\"text\":\"InfiniteScrollView\",\"link\":\"/guide/components/infinite-scroll-view/\"},{\"text\":\"ScrollStory\",\"link\":\"/guide/components/scroll-story/\"}]},{\"text\":\"Status & info\",\"collapsed\":true,\"items\":[{\"text\":\"Badge\",\"link\":\"/guide/components/badge/\"},{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"ProgressBar\",\"link\":\"/guide/components/progress-bar/\"},{\"text\":\"ProgressRing\",\"link\":\"/guide/components/progress-ring/\"}]},{\"text\":\"Styles\",\"collapsed\":true,\"items\":[{\"text\":\"AnimatedIcon\",\"link\":\"/guide/components/animated-icon/\"},{\"text\":\"IconElement\",\"link\":\"/guide/components/icon-element/\"},{\"text\":\"RevealContainer\",\"link\":\"/guide/components/reveal-container/\"},{\"text\":\"Shimmer\",\"link\":\"/guide/components/shimmer/\"}]},{\"text\":\"Text\",\"collapsed\":true,\"items\":[{\"text\":\"SearchBox\",\"link\":\"/guide/components/search-box/\"},{\"text\":\"TextBox\",\"link\":\"/guide/components/text-box/\"},{\"text\":\"TextField\",\"link\":\"/guide/components/text-field/\"},{\"text\":\"VerifyBox\",\"link\":\"/guide/components/verify-box/\"}]},{\"text\":\"Windowing\",\"collapsed\":true,\"items\":[{\"text\":\"WebWindow\",\"link\":\"/guide/components/web-window/\"}]},{\"text\":\"Global\",\"collapsed\":true,\"items\":[{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Advance\",\"collapsed\":true,\"items\":[{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
     
   </body>
 </html>
\ No newline at end of file
diff --git a/guide/components/img/index.html b/guide/components/img/index.html
index 37f6b7e..e44339f 100644
--- a/guide/components/img/index.html
+++ b/guide/components/img/index.html
@@ -1,46 +1,24 @@
 <!DOCTYPE html>
-<html lang="en-US">
+<html lang="en-US" dir="ltr">
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1">
     <title>Img | vfluent3</title>
     <meta name="description" content="A Vue3 component library for Fluent UI">
-    <link rel="stylesheet" href="/VFluent3/assets/style.0a1d87af.css">
-    <link rel="modulepreload" href="/VFluent3/assets/chunks/index.9dba9c16.js">
-    <link rel="modulepreload" href="/VFluent3/assets/app.d60fa8c3.js">
-    <link rel="modulepreload" href="/VFluent3/assets/guide_components_img_index.md.fa51a3a1.lean.js">
+    <meta name="generator" content="VitePress v1.0.0-rc.45">
+    <link rel="preload stylesheet" href="/VFluent3/assets/style.BabQegKX.css" as="style">
     
-    <script>(()=>{const e=localStorage.getItem("vitepress-theme-appearance"),a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script type="module" src="/VFluent3/assets/app.CSutcJ2E.js"></script>
+    <link rel="preload" href="/VFluent3/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/framework.DvIFzl91.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/theme.CgqFBnN_.js">
+    <link rel="modulepreload" href="/VFluent3/assets/guide_components_img_index.md.Bm9FiuU4.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
   </head>
   <body>
-    <div id="app"><div class="Layout" data-v-058b7495><!--[--><!--]--><!--[--><span tabindex="-1" data-v-bea91388></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-bea91388> Skip to content </a><!--]--><!----><header class="VPNav" data-v-058b7495 data-v-2a0a2738><div class="VPNavBar has-sidebar" data-v-2a0a2738 data-v-45c9f423><div class="container" data-v-45c9f423><div class="VPNavBarTitle has-sidebar" data-v-45c9f423 data-v-011600ce><a class="title" href="/VFluent3/" data-v-011600ce><!----><!--[-->VFluent3<!--]--></a></div><div class="content" data-v-45c9f423><!----><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-45c9f423 data-v-4da4371d><span id="main-nav-aria-label" class="visually-hidden" data-v-4da4371d>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" data-v-4da4371d data-v-66f8d518 data-v-4d08dd3a><!--[-->Home<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" data-v-4da4371d data-v-66f8d518 data-v-4d08dd3a><!--[-->Guide<!--]--><!----></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-45c9f423 data-v-bf1c94ca><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" data-v-bf1c94ca data-v-d0ee0df2 data-v-55b931a0><span class="check" data-v-55b931a0><span class="icon" data-v-55b931a0><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-d0ee0df2><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-d0ee0df2><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-45c9f423 data-v-7cece6ac data-v-37af1650><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-37af1650><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-37af1650><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-37af1650><div class="VPMenu" data-v-37af1650 data-v-17dc081b><!----><!--[--><!--[--><!----><div class="group" data-v-7cece6ac><div class="item appearance" data-v-7cece6ac><p class="label" data-v-7cece6ac>Appearance</p><div class="appearance-action" data-v-7cece6ac><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" data-v-7cece6ac data-v-d0ee0df2 data-v-55b931a0><span class="check" data-v-55b931a0><span class="icon" data-v-55b931a0><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-d0ee0df2><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-d0ee0df2><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-45c9f423 data-v-5484e669><span class="container" data-v-5484e669><span class="top" data-v-5484e669></span><span class="middle" data-v-5484e669></span><span class="bottom" data-v-5484e669></span></span></button></div></div></div><!----></header><div class="VPLocalNav" data-v-058b7495 data-v-f623cd72><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-f623cd72><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-f623cd72><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-f623cd72>Menu</span></button><a class="top-link" href="#" data-v-f623cd72> Return to top </a></div><aside class="VPSidebar" data-v-058b7495 data-v-3b8ec0c7><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-3b8ec0c7><span class="visually-hidden" id="sidebar-aria-label" data-v-3b8ec0c7> Sidebar Navigation </span><!--[--><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Basic</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/button/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Button</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/check-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>CheckBox</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/radio/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Radio</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/progress-bar/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ProgressBar</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/progress-ring/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ProgressRing</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/toggle-switch/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ToggleSwitch</span><!--]--><!----></a><a class="VPLink link active" href="/VFluent3/guide/components/img/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Img</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/text-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>TextBox</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/combo-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ComboBox</span><!--]--><!----></a><!--]--></div></section></div><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Global</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/message-bar/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>MessageBar</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/info-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>InfoBox</span><!--]--><!----></a><!--]--></div></section></div><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Advance</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/color-picker/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ColorPicker</span><!--]--><!----></a><!--]--></div></section></div><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-058b7495 data-v-564173e9><div class="VPDoc has-sidebar" data-v-564173e9 data-v-32b7ddf4><div class="container" data-v-32b7ddf4><div class="aside" data-v-32b7ddf4><div class="aside-curtain" data-v-32b7ddf4></div><div class="aside-container" data-v-32b7ddf4><div class="aside-content" data-v-32b7ddf4><div class="VPDocAside" data-v-32b7ddf4 data-v-35c1bae1><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline has-outline" data-v-35c1bae1 data-v-123cce62><div class="content" data-v-123cce62><div class="outline-marker" data-v-123cce62></div><div class="outline-title" data-v-123cce62>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-123cce62><span class="visually-hidden" id="doc-outline-aria-label" data-v-123cce62> Table of Contents for current page </span><ul class="root" data-v-123cce62><!--[--><li style="" data-v-123cce62><a class="outline-link" href="#quick-start" data-v-123cce62>Quick Start</a><!----></li><li style="" data-v-123cce62><a class="outline-link" href="#properties" data-v-123cce62>Properties</a><!----></li><li style="" data-v-123cce62><a class="outline-link" href="#emits" data-v-123cce62>Emits</a><!----></li><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-35c1bae1></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-32b7ddf4><div class="content-container" data-v-32b7ddf4><!--[--><!--]--><main class="main" data-v-32b7ddf4><div style="position:relative;" class="vp-doc _VFluent3_guide_components_img_index" data-v-32b7ddf4><div><h1 id="img" tabindex="-1">Img <a class="header-anchor" href="#img" aria-hidden="true">#</a></h1><h2 id="quick-start" tabindex="-1">Quick Start <a class="header-anchor" href="#quick-start" aria-hidden="true">#</a></h2><h3 id="default" tabindex="-1">Default <a class="header-anchor" href="#default" aria-hidden="true">#</a></h3><hr><div class="fv-img light" style="--fv-img-fit:cover;width:350px;height:350px;"><div class="loading-container" style=""><div class="bg"></div><div class="fv-progress-ring light indeterminate running" style="--fv-progress-ring-size:60px;--fv-progress-ring-border-width:5px;"><label class="label"><progress class="progress" value="0" max="100"></progress><svg class="svg"><circle cx="50%" cy="50%" r="calc(50% - 5px)" class="bar"></circle></svg></label></div></div><div style="display:none;" class="container"></div></div><div class="language-vue-html"><span class="copy"></span><div class="highlight-lines"><br><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><br><br></div><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-img</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">style</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">width:350px;height:350px;</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">fit</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">cover</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">alt</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">An image</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">src</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">https://rescreator.blob.core.windows.net/slider/01277a52-2379-475e-b5f6-7c8788dac898.jpg</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-img</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h3 id="cached-cross-origin" tabindex="-1">Cached cross origin <a class="header-anchor" href="#cached-cross-origin" aria-hidden="true">#</a></h3><hr><div class="fv-button light"><button type="button" class="button-container" style="border-width:2px;border-radius:3px;"><span class="content-block" style="font-weight:normal;"><!----><!--[-->Add Image<!--]--></span></button></div><hr><div style="height:390px;overflow:auto;"><!--[--><div><div class="fv-img light" style="--fv-img-fit:cover;width:350px;height:350px;"><div class="loading-container" style=""><div class="bg"></div><div class="fv-progress-ring light indeterminate running" style="--fv-progress-ring-size:60px;--fv-progress-ring-border-width:5px;"><label class="label"><progress class="progress" value="0" max="100"></progress><svg class="svg"><circle cx="50%" cy="50%" r="calc(50% - 5px)" class="bar"></circle></svg></label></div></div><div style="display:none;" class="container"></div></div><hr></div><!--]--></div><div class="language-vue-html"><span class="copy"></span><div class="highlight-lines"><br><div class="highlighted"> </div><div class="highlighted"> </div><br><br><br><br><br><br><br></div><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-img</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">cache</span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">crossorigin</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">anonymous</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">alt</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">An image</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">style</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">width:350px;height:350px;</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">fit</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">cover</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">src</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">item</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-img</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>The server response header Access-Control-Allow-Origin must allow the current origin</p></div><h3 id="lazy-load" tabindex="-1">Lazy load <a class="header-anchor" href="#lazy-load" aria-hidden="true">#</a></h3><hr><div style="height:390px;overflow:auto;"><!--[--><div><div class="fv-img light" style="--fv-img-fit:cover;width:350px;height:350px;"><div class="loading-container" style=""><div class="bg"></div><div class="fv-progress-ring light indeterminate running" style="--fv-progress-ring-size:60px;--fv-progress-ring-border-width:5px;"><label class="label"><progress class="progress" value="0" max="100"></progress><svg class="svg"><circle cx="50%" cy="50%" r="calc(50% - 5px)" class="bar"></circle></svg></label></div></div><div style="display:none;" class="container"></div></div><hr></div><!--]--></div><div class="language-vue-html"><span class="copy"></span><div class="highlight-lines"><br><div class="highlighted"> </div><br><br><br><br><br><br><br><br></div><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-img</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">lazy</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">alt</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">An image</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">style</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">width:350px; height:350px;</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">fit</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">cover</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">src</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">item</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">loaded</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">onLoad</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-img</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">alt</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;&#39;</td><td style="text-align:center;">same as img alt property</td></tr><tr><td style="text-align:center;">cache</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">cache image via dataurl</td></tr><tr><td style="text-align:center;">crossorigin</td><td style="text-align:center;">[&#39;anonymous&#39;,&#39;use-credentials&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as img <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin" target="_blank" rel="noopener noreferrer">crossorigin</a></td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">disabled</td></tr><tr><td style="text-align:center;">fit</td><td style="text-align:center;">[&#39;cover&#39;,&#39;contain&#39;,&#39;fill&#39;,&#39;scale-down&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as img object-fit style</td></tr><tr><td style="text-align:center;">lang</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">i18n</td></tr><tr><td style="text-align:center;">lazy</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">load image when visible inside view</td></tr><tr><td style="text-align:center;">src</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as img src</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">[&#39;light&#39;,&#39;dark&#39;,&#39;global&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">theme</td></tr></tbody></table><h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">error</td><td style="text-align:center;">evt[Event]</td><td style="text-align:center;">onerror</td></tr><tr><td style="text-align:center;">loaded</td><td style="text-align:center;">evt[Event]</td><td style="text-align:center;">onload</td></tr></tbody></table></div></div></main><footer class="VPDocFooter" data-v-32b7ddf4 data-v-cfaa3a6c><div class="edit-info" data-v-cfaa3a6c><!----><!----></div><div class="prev-next" data-v-cfaa3a6c><div class="pager" data-v-cfaa3a6c><a class="pager-link prev" href="/VFluent3/guide/components/toggle-switch/" data-v-cfaa3a6c><span class="desc" data-v-cfaa3a6c>Previous page</span><span class="title" data-v-cfaa3a6c>ToggleSwitch</span></a></div><div class="has-prev pager" data-v-cfaa3a6c><a class="pager-link next" href="/VFluent3/guide/components/text-box/" data-v-cfaa3a6c><span class="desc" data-v-cfaa3a6c>Next page</span><span class="title" data-v-cfaa3a6c>TextBox</span></a></div></div></footer><!--[--><!--]--></div></div></div></div></div><footer class="VPFooter has-sidebar" data-v-058b7495 data-v-a6c8dde4><div class="container" data-v-a6c8dde4><p class="message" data-v-a6c8dde4>MIT Licensed</p><p class="copyright" data-v-a6c8dde4>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
-    <script>__VP_HASH_MAP__ = JSON.parse("{\"guide_components_button_emits.md\":\"d682bf18\",\"guide_components_button_index.md\":\"23a8eb54\",\"guide_components_button_properties.md\":\"cd4004b6\",\"guide_components_check-box_emits.md\":\"31609794\",\"guide_components_check-box_index.md\":\"32046814\",\"guide_components_check-box_properties.md\":\"8f33ac0c\",\"guide_components_color-picker_emits.md\":\"00983cd0\",\"guide_components_color-picker_index.md\":\"b2d62612\",\"guide_components_color-picker_properties.md\":\"5466ba72\",\"guide_components_combo-box_emits.md\":\"d5ffda50\",\"guide_components_combo-box_index.md\":\"1c4364f5\",\"guide_components_combo-box_properties.md\":\"2e1d6060\",\"guide_components_img_emits.md\":\"6237adb4\",\"guide_components_img_index.md\":\"fa51a3a1\",\"guide_components_img_properties.md\":\"8d321b5e\",\"guide_components_info-box_emits.md\":\"c2e71eec\",\"guide_components_info-box_index.md\":\"06175fed\",\"guide_components_info-box_properties.md\":\"314dbb00\",\"guide_components_message-bar_emits.md\":\"e89a5a22\",\"guide_components_message-bar_index.md\":\"3f0b01d6\",\"guide_components_message-bar_properties.md\":\"ee3838d9\",\"guide_components_progress-bar_emits.md\":\"5b611e3b\",\"guide_components_progress-bar_index.md\":\"689c3241\",\"guide_components_progress-bar_properties.md\":\"39af7fb2\",\"guide_components_progress-ring_emits.md\":\"67e4644e\",\"guide_components_progress-ring_index.md\":\"9a33542b\",\"guide_components_progress-ring_properties.md\":\"c897c4bb\",\"guide_components_radio_emits.md\":\"28506857\",\"guide_components_radio_index.md\":\"e5a479ce\",\"guide_components_radio_properties.md\":\"f8e55d2f\",\"guide_components_text-box_emits.md\":\"0bf89ef8\",\"guide_components_text-box_index.md\":\"7ccfc637\",\"guide_components_text-box_properties.md\":\"aab3a89e\",\"guide_components_toggle-switch_emits.md\":\"5146435f\",\"guide_components_toggle-switch_index.md\":\"8be48081\",\"guide_components_toggle-switch_properties.md\":\"54984c3a\",\"guide_index.md\":\"e3dca1d7\",\"index.md\":\"1e9773d5\"}")</script>
-    <script type="module" async src="/VFluent3/assets/app.d60fa8c3.js"></script>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-19c990f1><div class="wrapper" data-v-19c990f1><div class="container" data-v-19c990f1><div class="title" data-v-19c990f1><div class="VPNavBarTitle has-sidebar" data-v-19c990f1 data-v-ab179fa1><a class="title" href="/VFluent3/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>VFluent3</span><!--[--><!--]--></a></div></div><div class="content" data-v-19c990f1><div class="content-body" data-v-19c990f1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-19c990f1><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-19c990f1 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Guide</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-19c990f1 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-19c990f1 data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-19c990f1 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-19c990f1><div class="divider-line" data-v-19c990f1></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-d2ecc192><button data-v-d2ecc192>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-575e6a36><div class="curtain" data-v-575e6a36></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-575e6a36><span class="visually-hidden" id="sidebar-aria-label" data-v-575e6a36> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Basic input</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/button/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/check-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CheckBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/combobox/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Combobox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/details-list/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DetailsList</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drop-down/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DropDown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio-group/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RadioGroup</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/rating-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RatingControl</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/slider/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/toggle-switch/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ToggleSwitch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tag/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Tag</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Collections</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/flip-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>FlipView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/list-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ListView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tree-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TreeView</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Date & Time</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarDatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/time-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TimePicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Dialogs & flyouts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/callout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Callout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Layout</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/collapse/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Collapse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/expander/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Expander</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drawer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Panel</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible has-active" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Media</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/image/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Img</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ImgBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/persona/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Persona</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Menu & toolbars</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/command-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CommandBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/menu-flyout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MenuFlyout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/swipe-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SwipeControl</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Navigation</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/breadcrumb/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationPanel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pivot/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pivot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pagination/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pagination</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Scrolling</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/infinite-scroll-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfiniteScrollView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/scroll-story/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ScrollStory</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Status & info</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/badge/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-ring/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressRing</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Styles</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/animated-icon/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>AnimatedIcon</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/icon-element/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>IconElement</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/reveal-container/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RevealContainer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/shimmer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Shimmer</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Text</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/search-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SearchBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-field/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextField</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/verify-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>VerifyBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Windowing</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/web-window/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>WebWindow</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Global</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Advance</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-935f8a84><div class="content" data-v-935f8a84><div class="outline-marker" data-v-935f8a84></div><div class="outline-title" role="heading" aria-level="2" data-v-935f8a84>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-935f8a84><span class="visually-hidden" id="doc-outline-aria-label" data-v-935f8a84> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-935f8a84 data-v-b933a997><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _VFluent3_guide_components_img_" data-v-39a288b8><div><h3 id="img-demo" tabindex="-1">Img-DEMO <a class="header-anchor" href="#img-demo" aria-label="Permalink to &quot;Img-DEMO&quot;">​</a></h3><hr><div style="width:100%;height:500px;"><!----></div><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Img</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> src</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;https://github.com/aleversn/VFluent/blob/master/examples/assert/sample/1.jpg?raw=true&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">500</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">300</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Img</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div style="width:100%;height:500px;"><!----></div><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Img</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> src</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;https://github.com/aleversn/VFluent/blob/master/examples/assert/sample/2.jpg?raw=true&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">500</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">300</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Img</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="img-lazy-load" tabindex="-1">Img-Lazy Load <a class="header-anchor" href="#img-lazy-load" aria-label="Permalink to &quot;Img-Lazy Load&quot;">​</a></h3><hr><div style="width:100%;height:500px;"><!----></div><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Img</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> src</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;https://github.com/aleversn/VFluent/blob/master/examples/assert/sample/3.jpg?raw=true&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">onlazy</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">500</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">300</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Img</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">src</td><td style="text-align:center;">String</td><td style="text-align:center;">Yes</td><td style="text-align:center;">N/A</td><td style="text-align:center;">图像资源路径, 支持跨域和本域, 本域下将默认启用ImgBox进行缓存管理, 跨域时启用Image进行加载, 但无法实现缓存</td></tr><tr><td style="text-align:center;">onlazy</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">Lazy load image</td></tr><tr><td style="text-align:center;">loadingColor</td><td style="text-align:center;">[string(color)] No</td><td style="text-align:center;">rgba(0, 90, 158, 1)</td><td style="text-align:center;">The foreground of the progress-ring or progress-bar.</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">onbackground</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">Show as background</td></tr></tbody></table></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-09de1c0f><!--[--><!--]--><!----><nav class="prev-next" data-v-09de1c0f><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link prev" href="/VFluent3/guide/components/image/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Previous page</span><span class="title" data-v-09de1c0f>Image</span><!--]--></a></div><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link next" href="/VFluent3/guide/components/img-box/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Next page</span><span class="title" data-v-09de1c0f>ImgBox</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>MIT Licensed</p><p class="copyright" data-v-e315a0ad>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_calendar-date-picker_properties.md\":\"DXRjmMG8\",\"guide_components_image_properties.md\":\"DGanRzCb\",\"guide_components_img-box_index.md\":\"DYtggkf_\",\"guide_components_img_emits.md\":\"BlE7jvZQ\",\"guide_components_img_index.md\":\"Bm9FiuU4\",\"guide_components_icon-element_properties.md\":\"8Oakruwc\",\"guide_components_img_properties.md\":\"B42YSocI\",\"guide_components_drawer_index.md\":\"D_vpnCpE\",\"guide_components_verify-box_emits.md\":\"DT17Iazx\",\"guide_components_calendar-date-picker_index.md\":\"BdHjrurh\",\"guide_components_rating-control_index.md\":\"Q9l5Lfrr\",\"guide_components_rating-control_properties.md\":\"DKprnl0i\",\"guide_components_calendar-view_index.md\":\"zdoRYVx1\",\"guide_components_animated-icon_index.md\":\"yZDMzCFe\",\"guide_components_calendar-date-picker_emits.md\":\"D5OkfR8j\",\"guide_components_badge_index.md\":\"Bb4crrJn\",\"guide_components_image_index.md\":\"B7X6cWAZ\",\"guide_components_slider_index.md\":\"C7zZ2d-W\",\"guide_components_radio-group_index.md\":\"CVfh3h5H\",\"guide_components_swipe-control_index.md\":\"DwrDVPc1\",\"guide_components_color-picker_emits.md\":\"BHDXVtBQ\",\"guide_components_radio_index.md\":\"90as5QGp\",\"guide_components_pagination_properties.md\":\"JUAPvcTL\",\"guide_components_persona_properties.md\":\"DUTPhPMp\",\"guide_components_combo-box_emits.md\":\"Dh5R-qEv\",\"guide_components_pivot_emits.md\":\"BTJPgNpy\",\"guide_components_pagination_index.md\":\"CnW2zAht\",\"guide_components_flip-view_properties.md\":\"BqZ4hhgU\",\"guide_components_icon-element_emits.md\":\"D5TXFdTZ\",\"guide_components_flip-view_index.md\":\"DefnDOv6\",\"guide_components_navigation-panel_index.md\":\"6mO__sSK\",\"guide_components_rating-control_emits.md\":\"blvomSeC\",\"guide_components_icon-element_index.md\":\"DQ8K7JNn\",\"guide_components_navigation-view_index.md\":\"4AQRiz1k\",\"guide_components_toggle-switch_emits.md\":\"CLGzrNut\",\"guide_components_toggle-switch_index.md\":\"61en_q9-\",\"guide_components_scroll-story_index.md\":\"Vpgb1HSV\",\"guide_components_reveal-container_index.md\":\"Cut2r4tV\",\"guide_components_search-box_emits.md\":\"-d9sWNNt\",\"guide_components_search-box_properties.md\":\"DEKFfPFw\",\"guide_components_shimmer_emits.md\":\"CTMInlI3\",\"guide_components_tag_index.md\":\"BhhxkcHn\",\"guide_components_search-box_index.md\":\"DgkrY0oY\",\"guide_components_shimmer_index.md\":\"iZlHuTxw\",\"guide_components_shimmer_properties.md\":\"CdkU1o6H\",\"guide_components_tree-view_index.md\":\"CUrwan4q\",\"guide_components_text-field_index.md\":\"CXSimJtj\",\"guide_components_text-box_index.md\":\"C5moAPfB\",\"guide_components_progress-ring_properties.md\":\"Dc08Uiff\",\"guide_components_toggle-switch_properties.md\":\"tFppK_IS\",\"guide_components_radio-group_emits.md\":\"cEDzKVnN\",\"guide_components_collapse_index.md\":\"N9Iu5-2v\",\"guide_components_image_emits.md\":\"lmlz2xJd\",\"guide_components_callout_index.md\":\"D9RU33w6\",\"guide_components_pivot_index.md\":\"B_vwQL-5\",\"guide_components_command-bar_index.md\":\"Cp4_rrGB\",\"guide_components_pagination_emits.md\":\"Dng86A22\",\"guide_components_button_index.md\":\"7sqT2MQP\",\"guide_components_info-box_properties.md\":\"BI7Nvk-E\",\"guide_components_drop-down_emits.md\":\"BE95TdKW\",\"guide_components_expander_index.md\":\"BKgcUJzQ\",\"guide_components_message-bar_index.md\":\"AEtAWlF8\",\"guide_components_menu-flyout_index.md\":\"Csa7irPj\",\"guide_components_panel_index.md\":\"CsTu0bXo\",\"guide_components_panel_properties.md\":\"BaxoCYKq\",\"guide_components_progress-bar_emits.md\":\"BcwXUpsF\",\"guide_components_progress-bar_properties.md\":\"TxiS9ZMA\",\"guide_components_progress-ring_emits.md\":\"D2Y6hIZ9\",\"guide_components_color-picker_index.md\":\"DCc4ixcU\",\"guide_components_progress-ring_index.md\":\"CPb-ZEPE\",\"guide_components_color-picker_properties.md\":\"wcXK29Vl\",\"guide_components_time-picker_index.md\":\"CQJdRRaG\",\"guide_components_drop-down_properties.md\":\"Bwlkpr1q\",\"guide_components_infinite-scroll-view_index.md\":\"yAuD807x\",\"guide_components_check-box_index.md\":\"FYgdu4oq\",\"guide_components_progress-bar_index.md\":\"D8vHQw5V\",\"guide_components_combo-box_index.md\":\"DTyu3eNd\",\"guide_components_info-box_emits.md\":\"DlEwpkkq\",\"guide_components_drop-down_index.md\":\"BZzJZQWq\",\"guide_components_list-view_index.md\":\"BoYvMzb0\",\"guide_components_verify-box_properties.md\":\"CW6W8fFf\",\"guide_components_verify-box_index.md\":\"DwSB40wR\",\"guide_index.md\":\"Bndlt3sL\",\"guide_components_web-window_index.md\":\"Bxc8vEeI\",\"index.md\":\"MTRqI42u\",\"guide_components_combo-box_properties.md\":\"AWfHzV6x\",\"guide_components_combobox_emits.md\":\"CGB6WLt8\",\"guide_components_combobox_properties.md\":\"Bja0hMou\",\"guide_components_details-list_index.md\":\"CcgOCIyt\",\"guide_components_info-box_index.md\":\"vXh-_DsL\",\"guide_components_combobox_index.md\":\"CsPkY6YB\",\"guide_components_date-picker_index.md\":\"12vmUIup\",\"guide_components_flip-view_emits.md\":\"DCheHjDj\",\"guide_components_panel_emits.md\":\"DG0REDq8\",\"guide_components_breadcrumb_index.md\":\"DyDm7PeP\",\"guide_components_radio-group_properties.md\":\"BnPxoKsQ\",\"guide_components_persona_emits.md\":\"CnsDPKRU\",\"guide_components_pivot_properties.md\":\"BmoLpPi1\",\"guide_components_persona_index.md\":\"DT00jby4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vfluent3\",\"description\":\"A Vue3 component library for Fluent UI\",\"base\":\"/VFluent3/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"VFluent3\",\"footer\":{\"message\":\"MIT Licensed\",\"copyright\":\"Copyright © Creator SN - 2022\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/\"}],\"sidebar\":[{\"text\":\"Basic input\",\"collapsed\":true,\"items\":[{\"text\":\"Button\",\"link\":\"/guide/components/button/\"},{\"text\":\"CheckBox\",\"link\":\"/guide/components/check-box/\"},{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"},{\"text\":\"Combobox\",\"link\":\"/guide/components/combobox/\"},{\"text\":\"DetailsList\",\"link\":\"/guide/components/details-list/\"},{\"text\":\"DropDown\",\"link\":\"/guide/components/drop-down/\"},{\"text\":\"Radio\",\"link\":\"/guide/components/radio/\"},{\"text\":\"RadioGroup\",\"link\":\"/guide/components/radio-group/\"},{\"text\":\"RatingControl\",\"link\":\"/guide/components/rating-control/\"},{\"text\":\"Slider\",\"link\":\"/guide/components/slider/\"},{\"text\":\"ToggleSwitch\",\"link\":\"/guide/components/toggle-switch/\"},{\"text\":\"Tag\",\"link\":\"/guide/components/tag/\"}]},{\"text\":\"Collections\",\"collapsed\":true,\"items\":[{\"text\":\"FlipView\",\"link\":\"/guide/components/flip-view/\"},{\"text\":\"ListView\",\"link\":\"/guide/components/list-view/\"},{\"text\":\"TreeView\",\"link\":\"/guide/components/tree-view/\"}]},{\"text\":\"Date & Time\",\"collapsed\":true,\"items\":[{\"text\":\"CalendarDatePicker\",\"link\":\"/guide/components/calendar-date-picker/\"},{\"text\":\"CalendarView\",\"link\":\"/guide/components/calendar-view/\"},{\"text\":\"DatePicker\",\"link\":\"/guide/components/date-picker/\"},{\"text\":\"TimePicker\",\"link\":\"/guide/components/time-picker/\"}]},{\"text\":\"Dialogs & flyouts\",\"collapsed\":true,\"items\":[{\"text\":\"Callout\",\"link\":\"/guide/components/callout/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Layout\",\"collapsed\":true,\"items\":[{\"text\":\"Collapse\",\"link\":\"/guide/components/collapse/\"},{\"text\":\"Expander\",\"link\":\"/guide/components/expander/\"},{\"text\":\"Drawer\",\"link\":\"/guide/components/drawer/\"},{\"text\":\"Panel\",\"link\":\"/guide/components/panel/\"}]},{\"text\":\"Media\",\"collapsed\":true,\"items\":[{\"text\":\"Image\",\"link\":\"/guide/components/image/\"},{\"text\":\"Img\",\"link\":\"/guide/components/img/\"},{\"text\":\"ImgBox\",\"link\":\"/guide/components/img-box/\"},{\"text\":\"Persona\",\"link\":\"/guide/components/persona/\"}]},{\"text\":\"Menu & toolbars\",\"collapsed\":true,\"items\":[{\"text\":\"CommandBar\",\"link\":\"/guide/components/command-bar/\"},{\"text\":\"MenuFlyout\",\"link\":\"/guide/components/menu-flyout/\"},{\"text\":\"SwipeControl\",\"link\":\"/guide/components/swipe-control/\"}]},{\"text\":\"Navigation\",\"collapsed\":true,\"items\":[{\"text\":\"Breadcrumb\",\"link\":\"/guide/components/breadcrumb/\"},{\"text\":\"NavigationPanel\",\"link\":\"/guide/components/navigation-panel/\"},{\"text\":\"NavigationView\",\"link\":\"/guide/components/navigation-view/\"},{\"text\":\"Pivot\",\"link\":\"/guide/components/pivot/\"},{\"text\":\"Pagination\",\"link\":\"/guide/components/pagination/\"}]},{\"text\":\"Scrolling\",\"collapsed\":true,\"items\":[{\"text\":\"InfiniteScrollView\",\"link\":\"/guide/components/infinite-scroll-view/\"},{\"text\":\"ScrollStory\",\"link\":\"/guide/components/scroll-story/\"}]},{\"text\":\"Status & info\",\"collapsed\":true,\"items\":[{\"text\":\"Badge\",\"link\":\"/guide/components/badge/\"},{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"ProgressBar\",\"link\":\"/guide/components/progress-bar/\"},{\"text\":\"ProgressRing\",\"link\":\"/guide/components/progress-ring/\"}]},{\"text\":\"Styles\",\"collapsed\":true,\"items\":[{\"text\":\"AnimatedIcon\",\"link\":\"/guide/components/animated-icon/\"},{\"text\":\"IconElement\",\"link\":\"/guide/components/icon-element/\"},{\"text\":\"RevealContainer\",\"link\":\"/guide/components/reveal-container/\"},{\"text\":\"Shimmer\",\"link\":\"/guide/components/shimmer/\"}]},{\"text\":\"Text\",\"collapsed\":true,\"items\":[{\"text\":\"SearchBox\",\"link\":\"/guide/components/search-box/\"},{\"text\":\"TextBox\",\"link\":\"/guide/components/text-box/\"},{\"text\":\"TextField\",\"link\":\"/guide/components/text-field/\"},{\"text\":\"VerifyBox\",\"link\":\"/guide/components/verify-box/\"}]},{\"text\":\"Windowing\",\"collapsed\":true,\"items\":[{\"text\":\"WebWindow\",\"link\":\"/guide/components/web-window/\"}]},{\"text\":\"Global\",\"collapsed\":true,\"items\":[{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Advance\",\"collapsed\":true,\"items\":[{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
     
   </body>
 </html>
\ No newline at end of file
diff --git a/guide/components/img/properties.html b/guide/components/img/properties.html
index fe639bc..df87d58 100644
--- a/guide/components/img/properties.html
+++ b/guide/components/img/properties.html
@@ -1,20 +1,24 @@
 <!DOCTYPE html>
-<html lang="en-US">
+<html lang="en-US" dir="ltr">
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>Properties | vfluent3</title>
+    <title>vfluent3</title>
     <meta name="description" content="A Vue3 component library for Fluent UI">
-    <link rel="stylesheet" href="/VFluent3/assets/style.0a1d87af.css">
-    <link rel="modulepreload" href="/VFluent3/assets/app.d60fa8c3.js">
-    <link rel="modulepreload" href="/VFluent3/assets/guide_components_img_properties.md.8d321b5e.lean.js">
+    <meta name="generator" content="VitePress v1.0.0-rc.45">
+    <link rel="preload stylesheet" href="/VFluent3/assets/style.BabQegKX.css" as="style">
     
-    <script>(()=>{const e=localStorage.getItem("vitepress-theme-appearance"),a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script type="module" src="/VFluent3/assets/app.CSutcJ2E.js"></script>
+    <link rel="preload" href="/VFluent3/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/framework.DvIFzl91.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/theme.CgqFBnN_.js">
+    <link rel="modulepreload" href="/VFluent3/assets/guide_components_img_properties.md.B42YSocI.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
   </head>
   <body>
-    <div id="app"><div class="Layout" data-v-058b7495><!--[--><!--]--><!--[--><span tabindex="-1" data-v-bea91388></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-bea91388> Skip to content </a><!--]--><!----><header class="VPNav" data-v-058b7495 data-v-2a0a2738><div class="VPNavBar has-sidebar" data-v-2a0a2738 data-v-45c9f423><div class="container" data-v-45c9f423><div class="VPNavBarTitle has-sidebar" data-v-45c9f423 data-v-011600ce><a class="title" href="/VFluent3/" data-v-011600ce><!----><!--[-->VFluent3<!--]--></a></div><div class="content" data-v-45c9f423><!----><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-45c9f423 data-v-4da4371d><span id="main-nav-aria-label" class="visually-hidden" data-v-4da4371d>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" data-v-4da4371d data-v-66f8d518 data-v-4d08dd3a><!--[-->Home<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" data-v-4da4371d data-v-66f8d518 data-v-4d08dd3a><!--[-->Guide<!--]--><!----></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-45c9f423 data-v-bf1c94ca><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" data-v-bf1c94ca data-v-d0ee0df2 data-v-55b931a0><span class="check" data-v-55b931a0><span class="icon" data-v-55b931a0><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-d0ee0df2><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-d0ee0df2><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-45c9f423 data-v-7cece6ac data-v-37af1650><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-37af1650><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-37af1650><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-37af1650><div class="VPMenu" data-v-37af1650 data-v-17dc081b><!----><!--[--><!--[--><!----><div class="group" data-v-7cece6ac><div class="item appearance" data-v-7cece6ac><p class="label" data-v-7cece6ac>Appearance</p><div class="appearance-action" data-v-7cece6ac><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" data-v-7cece6ac data-v-d0ee0df2 data-v-55b931a0><span class="check" data-v-55b931a0><span class="icon" data-v-55b931a0><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-d0ee0df2><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-d0ee0df2><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-45c9f423 data-v-5484e669><span class="container" data-v-5484e669><span class="top" data-v-5484e669></span><span class="middle" data-v-5484e669></span><span class="bottom" data-v-5484e669></span></span></button></div></div></div><!----></header><div class="VPLocalNav" data-v-058b7495 data-v-f623cd72><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-f623cd72><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-f623cd72><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-f623cd72>Menu</span></button><a class="top-link" href="#" data-v-f623cd72> Return to top </a></div><aside class="VPSidebar" data-v-058b7495 data-v-3b8ec0c7><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-3b8ec0c7><span class="visually-hidden" id="sidebar-aria-label" data-v-3b8ec0c7> Sidebar Navigation </span><!--[--><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Basic</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/button/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Button</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/check-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>CheckBox</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/radio/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Radio</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/progress-bar/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ProgressBar</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/progress-ring/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ProgressRing</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/toggle-switch/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ToggleSwitch</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/img/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Img</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/text-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>TextBox</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/combo-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ComboBox</span><!--]--><!----></a><!--]--></div></section></div><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Global</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/message-bar/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>MessageBar</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/info-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>InfoBox</span><!--]--><!----></a><!--]--></div></section></div><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Advance</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/color-picker/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ColorPicker</span><!--]--><!----></a><!--]--></div></section></div><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-058b7495 data-v-564173e9><div class="VPDoc has-sidebar" data-v-564173e9 data-v-32b7ddf4><div class="container" data-v-32b7ddf4><div class="aside" data-v-32b7ddf4><div class="aside-curtain" data-v-32b7ddf4></div><div class="aside-container" data-v-32b7ddf4><div class="aside-content" data-v-32b7ddf4><div class="VPDocAside" data-v-32b7ddf4 data-v-35c1bae1><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline has-outline" data-v-35c1bae1 data-v-123cce62><div class="content" data-v-123cce62><div class="outline-marker" data-v-123cce62></div><div class="outline-title" data-v-123cce62>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-123cce62><span class="visually-hidden" id="doc-outline-aria-label" data-v-123cce62> Table of Contents for current page </span><ul class="root" data-v-123cce62><!--[--><li style="" data-v-123cce62><a class="outline-link" href="#properties" data-v-123cce62>Properties</a><!----></li><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-35c1bae1></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-32b7ddf4><div class="content-container" data-v-32b7ddf4><!--[--><!--]--><main class="main" data-v-32b7ddf4><div style="position:relative;" class="vp-doc _VFluent3_guide_components_img_properties" data-v-32b7ddf4><div><h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">alt</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;&#39;</td><td style="text-align:center;">same as img alt property</td></tr><tr><td style="text-align:center;">cache</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">cache image via dataurl</td></tr><tr><td style="text-align:center;">crossorigin</td><td style="text-align:center;">[&#39;anonymous&#39;,&#39;use-credentials&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as img <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin" target="_blank" rel="noopener noreferrer">crossorigin</a></td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">disabled</td></tr><tr><td style="text-align:center;">fit</td><td style="text-align:center;">[&#39;cover&#39;,&#39;contain&#39;,&#39;fill&#39;,&#39;scale-down&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as img object-fit style</td></tr><tr><td style="text-align:center;">lang</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">i18n</td></tr><tr><td style="text-align:center;">lazy</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">load image when visible inside view</td></tr><tr><td style="text-align:center;">src</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as img src</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">[&#39;light&#39;,&#39;dark&#39;,&#39;global&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">theme</td></tr></tbody></table></div></div></main><footer class="VPDocFooter" data-v-32b7ddf4 data-v-cfaa3a6c><div class="edit-info" data-v-cfaa3a6c><!----><!----></div><div class="prev-next" data-v-cfaa3a6c><div class="pager" data-v-cfaa3a6c><!----></div><div class="pager" data-v-cfaa3a6c><a class="pager-link next" href="/VFluent3/guide/components/button/" data-v-cfaa3a6c><span class="desc" data-v-cfaa3a6c>Next page</span><span class="title" data-v-cfaa3a6c>Button</span></a></div></div></footer><!--[--><!--]--></div></div></div></div></div><footer class="VPFooter has-sidebar" data-v-058b7495 data-v-a6c8dde4><div class="container" data-v-a6c8dde4><p class="message" data-v-a6c8dde4>MIT Licensed</p><p class="copyright" data-v-a6c8dde4>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
-    <script>__VP_HASH_MAP__ = JSON.parse("{\"guide_components_button_emits.md\":\"d682bf18\",\"guide_components_button_index.md\":\"23a8eb54\",\"guide_components_button_properties.md\":\"cd4004b6\",\"guide_components_check-box_emits.md\":\"31609794\",\"guide_components_check-box_index.md\":\"32046814\",\"guide_components_check-box_properties.md\":\"8f33ac0c\",\"guide_components_color-picker_emits.md\":\"00983cd0\",\"guide_components_color-picker_index.md\":\"b2d62612\",\"guide_components_color-picker_properties.md\":\"5466ba72\",\"guide_components_combo-box_emits.md\":\"d5ffda50\",\"guide_components_combo-box_index.md\":\"1c4364f5\",\"guide_components_combo-box_properties.md\":\"2e1d6060\",\"guide_components_img_emits.md\":\"6237adb4\",\"guide_components_img_index.md\":\"fa51a3a1\",\"guide_components_img_properties.md\":\"8d321b5e\",\"guide_components_info-box_emits.md\":\"c2e71eec\",\"guide_components_info-box_index.md\":\"06175fed\",\"guide_components_info-box_properties.md\":\"314dbb00\",\"guide_components_message-bar_emits.md\":\"e89a5a22\",\"guide_components_message-bar_index.md\":\"3f0b01d6\",\"guide_components_message-bar_properties.md\":\"ee3838d9\",\"guide_components_progress-bar_emits.md\":\"5b611e3b\",\"guide_components_progress-bar_index.md\":\"689c3241\",\"guide_components_progress-bar_properties.md\":\"39af7fb2\",\"guide_components_progress-ring_emits.md\":\"67e4644e\",\"guide_components_progress-ring_index.md\":\"9a33542b\",\"guide_components_progress-ring_properties.md\":\"c897c4bb\",\"guide_components_radio_emits.md\":\"28506857\",\"guide_components_radio_index.md\":\"e5a479ce\",\"guide_components_radio_properties.md\":\"f8e55d2f\",\"guide_components_text-box_emits.md\":\"0bf89ef8\",\"guide_components_text-box_index.md\":\"7ccfc637\",\"guide_components_text-box_properties.md\":\"aab3a89e\",\"guide_components_toggle-switch_emits.md\":\"5146435f\",\"guide_components_toggle-switch_index.md\":\"8be48081\",\"guide_components_toggle-switch_properties.md\":\"54984c3a\",\"guide_index.md\":\"e3dca1d7\",\"index.md\":\"1e9773d5\"}")</script>
-    <script type="module" async src="/VFluent3/assets/app.d60fa8c3.js"></script>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-19c990f1><div class="wrapper" data-v-19c990f1><div class="container" data-v-19c990f1><div class="title" data-v-19c990f1><div class="VPNavBarTitle has-sidebar" data-v-19c990f1 data-v-ab179fa1><a class="title" href="/VFluent3/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>VFluent3</span><!--[--><!--]--></a></div></div><div class="content" data-v-19c990f1><div class="content-body" data-v-19c990f1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-19c990f1><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-19c990f1 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Guide</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-19c990f1 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-19c990f1 data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-19c990f1 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-19c990f1><div class="divider-line" data-v-19c990f1></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-d2ecc192><button data-v-d2ecc192>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-575e6a36><div class="curtain" data-v-575e6a36></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-575e6a36><span class="visually-hidden" id="sidebar-aria-label" data-v-575e6a36> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Basic input</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/button/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/check-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CheckBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/combobox/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Combobox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/details-list/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DetailsList</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drop-down/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DropDown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio-group/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RadioGroup</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/rating-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RatingControl</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/slider/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/toggle-switch/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ToggleSwitch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tag/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Tag</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Collections</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/flip-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>FlipView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/list-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ListView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tree-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TreeView</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Date & Time</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarDatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/time-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TimePicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Dialogs & flyouts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/callout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Callout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Layout</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/collapse/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Collapse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/expander/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Expander</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drawer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Panel</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Media</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/image/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Img</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ImgBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/persona/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Persona</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Menu & toolbars</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/command-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CommandBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/menu-flyout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MenuFlyout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/swipe-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SwipeControl</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Navigation</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/breadcrumb/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationPanel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pivot/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pivot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pagination/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pagination</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Scrolling</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/infinite-scroll-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfiniteScrollView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/scroll-story/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ScrollStory</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Status & info</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/badge/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-ring/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressRing</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Styles</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/animated-icon/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>AnimatedIcon</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/icon-element/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>IconElement</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/reveal-container/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RevealContainer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/shimmer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Shimmer</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Text</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/search-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SearchBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-field/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextField</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/verify-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>VerifyBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Windowing</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/web-window/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>WebWindow</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Global</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Advance</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-935f8a84><div class="content" data-v-935f8a84><div class="outline-marker" data-v-935f8a84></div><div class="outline-title" role="heading" aria-level="2" data-v-935f8a84>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-935f8a84><span class="visually-hidden" id="doc-outline-aria-label" data-v-935f8a84> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-935f8a84 data-v-b933a997><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _VFluent3_guide_components_img_properties" data-v-39a288b8><div><h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-label="Permalink to &quot;Properties&quot;">​</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead></table></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-09de1c0f><!--[--><!--]--><!----><nav class="prev-next" data-v-09de1c0f><div class="pager" data-v-09de1c0f><!----></div><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link next" href="/VFluent3/guide/components/button/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Next page</span><span class="title" data-v-09de1c0f>Button</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>MIT Licensed</p><p class="copyright" data-v-e315a0ad>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_calendar-date-picker_properties.md\":\"DXRjmMG8\",\"guide_components_image_properties.md\":\"DGanRzCb\",\"guide_components_img-box_index.md\":\"DYtggkf_\",\"guide_components_img_emits.md\":\"BlE7jvZQ\",\"guide_components_img_index.md\":\"Bm9FiuU4\",\"guide_components_icon-element_properties.md\":\"8Oakruwc\",\"guide_components_img_properties.md\":\"B42YSocI\",\"guide_components_drawer_index.md\":\"D_vpnCpE\",\"guide_components_verify-box_emits.md\":\"DT17Iazx\",\"guide_components_calendar-date-picker_index.md\":\"BdHjrurh\",\"guide_components_rating-control_index.md\":\"Q9l5Lfrr\",\"guide_components_rating-control_properties.md\":\"DKprnl0i\",\"guide_components_calendar-view_index.md\":\"zdoRYVx1\",\"guide_components_animated-icon_index.md\":\"yZDMzCFe\",\"guide_components_calendar-date-picker_emits.md\":\"D5OkfR8j\",\"guide_components_badge_index.md\":\"Bb4crrJn\",\"guide_components_image_index.md\":\"B7X6cWAZ\",\"guide_components_slider_index.md\":\"C7zZ2d-W\",\"guide_components_radio-group_index.md\":\"CVfh3h5H\",\"guide_components_swipe-control_index.md\":\"DwrDVPc1\",\"guide_components_color-picker_emits.md\":\"BHDXVtBQ\",\"guide_components_radio_index.md\":\"90as5QGp\",\"guide_components_pagination_properties.md\":\"JUAPvcTL\",\"guide_components_persona_properties.md\":\"DUTPhPMp\",\"guide_components_combo-box_emits.md\":\"Dh5R-qEv\",\"guide_components_pivot_emits.md\":\"BTJPgNpy\",\"guide_components_pagination_index.md\":\"CnW2zAht\",\"guide_components_flip-view_properties.md\":\"BqZ4hhgU\",\"guide_components_icon-element_emits.md\":\"D5TXFdTZ\",\"guide_components_flip-view_index.md\":\"DefnDOv6\",\"guide_components_navigation-panel_index.md\":\"6mO__sSK\",\"guide_components_rating-control_emits.md\":\"blvomSeC\",\"guide_components_icon-element_index.md\":\"DQ8K7JNn\",\"guide_components_navigation-view_index.md\":\"4AQRiz1k\",\"guide_components_toggle-switch_emits.md\":\"CLGzrNut\",\"guide_components_toggle-switch_index.md\":\"61en_q9-\",\"guide_components_scroll-story_index.md\":\"Vpgb1HSV\",\"guide_components_reveal-container_index.md\":\"Cut2r4tV\",\"guide_components_search-box_emits.md\":\"-d9sWNNt\",\"guide_components_search-box_properties.md\":\"DEKFfPFw\",\"guide_components_shimmer_emits.md\":\"CTMInlI3\",\"guide_components_tag_index.md\":\"BhhxkcHn\",\"guide_components_search-box_index.md\":\"DgkrY0oY\",\"guide_components_shimmer_index.md\":\"iZlHuTxw\",\"guide_components_shimmer_properties.md\":\"CdkU1o6H\",\"guide_components_tree-view_index.md\":\"CUrwan4q\",\"guide_components_text-field_index.md\":\"CXSimJtj\",\"guide_components_text-box_index.md\":\"C5moAPfB\",\"guide_components_progress-ring_properties.md\":\"Dc08Uiff\",\"guide_components_toggle-switch_properties.md\":\"tFppK_IS\",\"guide_components_radio-group_emits.md\":\"cEDzKVnN\",\"guide_components_collapse_index.md\":\"N9Iu5-2v\",\"guide_components_image_emits.md\":\"lmlz2xJd\",\"guide_components_callout_index.md\":\"D9RU33w6\",\"guide_components_pivot_index.md\":\"B_vwQL-5\",\"guide_components_command-bar_index.md\":\"Cp4_rrGB\",\"guide_components_pagination_emits.md\":\"Dng86A22\",\"guide_components_button_index.md\":\"7sqT2MQP\",\"guide_components_info-box_properties.md\":\"BI7Nvk-E\",\"guide_components_drop-down_emits.md\":\"BE95TdKW\",\"guide_components_expander_index.md\":\"BKgcUJzQ\",\"guide_components_message-bar_index.md\":\"AEtAWlF8\",\"guide_components_menu-flyout_index.md\":\"Csa7irPj\",\"guide_components_panel_index.md\":\"CsTu0bXo\",\"guide_components_panel_properties.md\":\"BaxoCYKq\",\"guide_components_progress-bar_emits.md\":\"BcwXUpsF\",\"guide_components_progress-bar_properties.md\":\"TxiS9ZMA\",\"guide_components_progress-ring_emits.md\":\"D2Y6hIZ9\",\"guide_components_color-picker_index.md\":\"DCc4ixcU\",\"guide_components_progress-ring_index.md\":\"CPb-ZEPE\",\"guide_components_color-picker_properties.md\":\"wcXK29Vl\",\"guide_components_time-picker_index.md\":\"CQJdRRaG\",\"guide_components_drop-down_properties.md\":\"Bwlkpr1q\",\"guide_components_infinite-scroll-view_index.md\":\"yAuD807x\",\"guide_components_check-box_index.md\":\"FYgdu4oq\",\"guide_components_progress-bar_index.md\":\"D8vHQw5V\",\"guide_components_combo-box_index.md\":\"DTyu3eNd\",\"guide_components_info-box_emits.md\":\"DlEwpkkq\",\"guide_components_drop-down_index.md\":\"BZzJZQWq\",\"guide_components_list-view_index.md\":\"BoYvMzb0\",\"guide_components_verify-box_properties.md\":\"CW6W8fFf\",\"guide_components_verify-box_index.md\":\"DwSB40wR\",\"guide_index.md\":\"Bndlt3sL\",\"guide_components_web-window_index.md\":\"Bxc8vEeI\",\"index.md\":\"MTRqI42u\",\"guide_components_combo-box_properties.md\":\"AWfHzV6x\",\"guide_components_combobox_emits.md\":\"CGB6WLt8\",\"guide_components_combobox_properties.md\":\"Bja0hMou\",\"guide_components_details-list_index.md\":\"CcgOCIyt\",\"guide_components_info-box_index.md\":\"vXh-_DsL\",\"guide_components_combobox_index.md\":\"CsPkY6YB\",\"guide_components_date-picker_index.md\":\"12vmUIup\",\"guide_components_flip-view_emits.md\":\"DCheHjDj\",\"guide_components_panel_emits.md\":\"DG0REDq8\",\"guide_components_breadcrumb_index.md\":\"DyDm7PeP\",\"guide_components_radio-group_properties.md\":\"BnPxoKsQ\",\"guide_components_persona_emits.md\":\"CnsDPKRU\",\"guide_components_pivot_properties.md\":\"BmoLpPi1\",\"guide_components_persona_index.md\":\"DT00jby4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vfluent3\",\"description\":\"A Vue3 component library for Fluent UI\",\"base\":\"/VFluent3/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"VFluent3\",\"footer\":{\"message\":\"MIT Licensed\",\"copyright\":\"Copyright © Creator SN - 2022\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/\"}],\"sidebar\":[{\"text\":\"Basic input\",\"collapsed\":true,\"items\":[{\"text\":\"Button\",\"link\":\"/guide/components/button/\"},{\"text\":\"CheckBox\",\"link\":\"/guide/components/check-box/\"},{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"},{\"text\":\"Combobox\",\"link\":\"/guide/components/combobox/\"},{\"text\":\"DetailsList\",\"link\":\"/guide/components/details-list/\"},{\"text\":\"DropDown\",\"link\":\"/guide/components/drop-down/\"},{\"text\":\"Radio\",\"link\":\"/guide/components/radio/\"},{\"text\":\"RadioGroup\",\"link\":\"/guide/components/radio-group/\"},{\"text\":\"RatingControl\",\"link\":\"/guide/components/rating-control/\"},{\"text\":\"Slider\",\"link\":\"/guide/components/slider/\"},{\"text\":\"ToggleSwitch\",\"link\":\"/guide/components/toggle-switch/\"},{\"text\":\"Tag\",\"link\":\"/guide/components/tag/\"}]},{\"text\":\"Collections\",\"collapsed\":true,\"items\":[{\"text\":\"FlipView\",\"link\":\"/guide/components/flip-view/\"},{\"text\":\"ListView\",\"link\":\"/guide/components/list-view/\"},{\"text\":\"TreeView\",\"link\":\"/guide/components/tree-view/\"}]},{\"text\":\"Date & Time\",\"collapsed\":true,\"items\":[{\"text\":\"CalendarDatePicker\",\"link\":\"/guide/components/calendar-date-picker/\"},{\"text\":\"CalendarView\",\"link\":\"/guide/components/calendar-view/\"},{\"text\":\"DatePicker\",\"link\":\"/guide/components/date-picker/\"},{\"text\":\"TimePicker\",\"link\":\"/guide/components/time-picker/\"}]},{\"text\":\"Dialogs & flyouts\",\"collapsed\":true,\"items\":[{\"text\":\"Callout\",\"link\":\"/guide/components/callout/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Layout\",\"collapsed\":true,\"items\":[{\"text\":\"Collapse\",\"link\":\"/guide/components/collapse/\"},{\"text\":\"Expander\",\"link\":\"/guide/components/expander/\"},{\"text\":\"Drawer\",\"link\":\"/guide/components/drawer/\"},{\"text\":\"Panel\",\"link\":\"/guide/components/panel/\"}]},{\"text\":\"Media\",\"collapsed\":true,\"items\":[{\"text\":\"Image\",\"link\":\"/guide/components/image/\"},{\"text\":\"Img\",\"link\":\"/guide/components/img/\"},{\"text\":\"ImgBox\",\"link\":\"/guide/components/img-box/\"},{\"text\":\"Persona\",\"link\":\"/guide/components/persona/\"}]},{\"text\":\"Menu & toolbars\",\"collapsed\":true,\"items\":[{\"text\":\"CommandBar\",\"link\":\"/guide/components/command-bar/\"},{\"text\":\"MenuFlyout\",\"link\":\"/guide/components/menu-flyout/\"},{\"text\":\"SwipeControl\",\"link\":\"/guide/components/swipe-control/\"}]},{\"text\":\"Navigation\",\"collapsed\":true,\"items\":[{\"text\":\"Breadcrumb\",\"link\":\"/guide/components/breadcrumb/\"},{\"text\":\"NavigationPanel\",\"link\":\"/guide/components/navigation-panel/\"},{\"text\":\"NavigationView\",\"link\":\"/guide/components/navigation-view/\"},{\"text\":\"Pivot\",\"link\":\"/guide/components/pivot/\"},{\"text\":\"Pagination\",\"link\":\"/guide/components/pagination/\"}]},{\"text\":\"Scrolling\",\"collapsed\":true,\"items\":[{\"text\":\"InfiniteScrollView\",\"link\":\"/guide/components/infinite-scroll-view/\"},{\"text\":\"ScrollStory\",\"link\":\"/guide/components/scroll-story/\"}]},{\"text\":\"Status & info\",\"collapsed\":true,\"items\":[{\"text\":\"Badge\",\"link\":\"/guide/components/badge/\"},{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"ProgressBar\",\"link\":\"/guide/components/progress-bar/\"},{\"text\":\"ProgressRing\",\"link\":\"/guide/components/progress-ring/\"}]},{\"text\":\"Styles\",\"collapsed\":true,\"items\":[{\"text\":\"AnimatedIcon\",\"link\":\"/guide/components/animated-icon/\"},{\"text\":\"IconElement\",\"link\":\"/guide/components/icon-element/\"},{\"text\":\"RevealContainer\",\"link\":\"/guide/components/reveal-container/\"},{\"text\":\"Shimmer\",\"link\":\"/guide/components/shimmer/\"}]},{\"text\":\"Text\",\"collapsed\":true,\"items\":[{\"text\":\"SearchBox\",\"link\":\"/guide/components/search-box/\"},{\"text\":\"TextBox\",\"link\":\"/guide/components/text-box/\"},{\"text\":\"TextField\",\"link\":\"/guide/components/text-field/\"},{\"text\":\"VerifyBox\",\"link\":\"/guide/components/verify-box/\"}]},{\"text\":\"Windowing\",\"collapsed\":true,\"items\":[{\"text\":\"WebWindow\",\"link\":\"/guide/components/web-window/\"}]},{\"text\":\"Global\",\"collapsed\":true,\"items\":[{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Advance\",\"collapsed\":true,\"items\":[{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
     
   </body>
 </html>
\ No newline at end of file
diff --git a/guide/components/infinite-scroll-view/index.html b/guide/components/infinite-scroll-view/index.html
new file mode 100644
index 0000000..01145ad
--- /dev/null
+++ b/guide/components/infinite-scroll-view/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>InfiniteScrollView | vfluent3</title>
+    <meta name="description" content="A Vue3 component library for Fluent UI">
+    <meta name="generator" content="VitePress v1.0.0-rc.45">
+    <link rel="preload stylesheet" href="/VFluent3/assets/style.BabQegKX.css" as="style">
+    
+    <script type="module" src="/VFluent3/assets/app.CSutcJ2E.js"></script>
+    <link rel="preload" href="/VFluent3/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/framework.DvIFzl91.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/theme.CgqFBnN_.js">
+    <link rel="modulepreload" href="/VFluent3/assets/guide_components_infinite-scroll-view_index.md.yAuD807x.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-19c990f1><div class="wrapper" data-v-19c990f1><div class="container" data-v-19c990f1><div class="title" data-v-19c990f1><div class="VPNavBarTitle has-sidebar" data-v-19c990f1 data-v-ab179fa1><a class="title" href="/VFluent3/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>VFluent3</span><!--[--><!--]--></a></div></div><div class="content" data-v-19c990f1><div class="content-body" data-v-19c990f1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-19c990f1><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-19c990f1 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Guide</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-19c990f1 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-19c990f1 data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-19c990f1 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-19c990f1><div class="divider-line" data-v-19c990f1></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-d2ecc192><button data-v-d2ecc192>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-575e6a36><div class="curtain" data-v-575e6a36></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-575e6a36><span class="visually-hidden" id="sidebar-aria-label" data-v-575e6a36> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Basic input</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/button/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/check-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CheckBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/combobox/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Combobox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/details-list/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DetailsList</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drop-down/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DropDown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio-group/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RadioGroup</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/rating-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RatingControl</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/slider/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/toggle-switch/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ToggleSwitch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tag/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Tag</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Collections</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/flip-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>FlipView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/list-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ListView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tree-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TreeView</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Date & Time</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarDatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/time-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TimePicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Dialogs & flyouts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/callout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Callout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Layout</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/collapse/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Collapse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/expander/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Expander</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drawer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Panel</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Media</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/image/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Img</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ImgBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/persona/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Persona</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Menu & toolbars</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/command-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CommandBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/menu-flyout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MenuFlyout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/swipe-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SwipeControl</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Navigation</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/breadcrumb/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationPanel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pivot/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pivot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pagination/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pagination</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible has-active" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Scrolling</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/infinite-scroll-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfiniteScrollView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/scroll-story/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ScrollStory</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Status & info</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/badge/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-ring/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressRing</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Styles</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/animated-icon/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>AnimatedIcon</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/icon-element/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>IconElement</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/reveal-container/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RevealContainer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/shimmer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Shimmer</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Text</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/search-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SearchBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-field/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextField</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/verify-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>VerifyBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Windowing</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/web-window/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>WebWindow</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Global</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Advance</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-935f8a84><div class="content" data-v-935f8a84><div class="outline-marker" data-v-935f8a84></div><div class="outline-title" role="heading" aria-level="2" data-v-935f8a84>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-935f8a84><span class="visually-hidden" id="doc-outline-aria-label" data-v-935f8a84> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-935f8a84 data-v-b933a997><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _VFluent3_guide_components_infinite-scroll-view_" data-v-39a288b8><div><h3 id="infinitescrollview-demo" tabindex="-1">InfiniteScrollView-DEMO <a class="header-anchor" href="#infinitescrollview-demo" aria-label="Permalink to &quot;InfiniteScrollView-DEMO&quot;">​</a></h3><hr><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-InfiniteScrollView</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">value</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-InfiniteScrollView</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">value</td><td style="text-align:center;">Array</td><td style="text-align:center;">No</td><td style="text-align:center;">[]</td><td style="text-align:center;">要装载的数组</td></tr><tr><td style="text-align:center;">batchSize</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">30</td><td style="text-align:center;">动态加载的每一批次大小</td></tr><tr><td style="text-align:center;">offset</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">100</td><td style="text-align:center;">滚动加载偏移量</td></tr><tr><td style="text-align:center;">static</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否取消动态加载</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">system</td><td style="text-align:center;">主题样式, 包含<code>light</code>, <code>dark</code>, <code>system</code>, <code>custom</code>几种样式</td></tr></tbody></table><h3 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to &quot;Events&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">事件名(Name)</th><th style="text-align:center;">参数类型(args)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">lazyload</td><td style="text-align:center;">boolean</td><td style="text-align:center;">动态加载时触发此事件, 返回当前加载批次数据是否为空</td></tr><tr><td style="text-align:center;">init-start</td><td style="text-align:center;">N/A</td><td style="text-align:center;">初始化加载开始</td></tr><tr><td style="text-align:center;">init-end</td><td style="text-align:center;">N/A</td><td style="text-align:center;">初始化加载结束</td></tr></tbody></table><h3 id="slot" tabindex="-1">Slot <a class="header-anchor" href="#slot" aria-label="Permalink to &quot;Slot&quot;">​</a></h3><hr><ol><li>Default</li></ol><p>默认模板, 可将<code>InfiniteScrollView</code>当作<code>Div</code>来使用</p><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">thisValue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">thisValue</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">dynamicValue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">dynamicValue</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;p v-for=&quot;(item, index) in dynamicValue&quot; :key=&quot;index&quot;&gt;{{item}}&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ul><li>thisValue: 传入数组</li><li>dynamicValue: 已动态加载的数组</li></ul><div class="language- vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span>&lt;template v-slot:default=&quot;x&quot;&gt;</span></span>
+<span class="line"><span>    &lt;p v-for=&quot;(item, index) in x.dynamicValue&quot; :key=&quot;index&quot;&gt;{{item}}&lt;/p&gt;</span></span>
+<span class="line"><span>&lt;/template&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-09de1c0f><!--[--><!--]--><!----><nav class="prev-next" data-v-09de1c0f><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link prev" href="/VFluent3/guide/components/pagination/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Previous page</span><span class="title" data-v-09de1c0f>Pagination</span><!--]--></a></div><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link next" href="/VFluent3/guide/components/scroll-story/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Next page</span><span class="title" data-v-09de1c0f>ScrollStory</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>MIT Licensed</p><p class="copyright" data-v-e315a0ad>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_calendar-date-picker_properties.md\":\"DXRjmMG8\",\"guide_components_image_properties.md\":\"DGanRzCb\",\"guide_components_img-box_index.md\":\"DYtggkf_\",\"guide_components_img_emits.md\":\"BlE7jvZQ\",\"guide_components_img_index.md\":\"Bm9FiuU4\",\"guide_components_icon-element_properties.md\":\"8Oakruwc\",\"guide_components_img_properties.md\":\"B42YSocI\",\"guide_components_drawer_index.md\":\"D_vpnCpE\",\"guide_components_verify-box_emits.md\":\"DT17Iazx\",\"guide_components_calendar-date-picker_index.md\":\"BdHjrurh\",\"guide_components_rating-control_index.md\":\"Q9l5Lfrr\",\"guide_components_rating-control_properties.md\":\"DKprnl0i\",\"guide_components_calendar-view_index.md\":\"zdoRYVx1\",\"guide_components_animated-icon_index.md\":\"yZDMzCFe\",\"guide_components_calendar-date-picker_emits.md\":\"D5OkfR8j\",\"guide_components_badge_index.md\":\"Bb4crrJn\",\"guide_components_image_index.md\":\"B7X6cWAZ\",\"guide_components_slider_index.md\":\"C7zZ2d-W\",\"guide_components_radio-group_index.md\":\"CVfh3h5H\",\"guide_components_swipe-control_index.md\":\"DwrDVPc1\",\"guide_components_color-picker_emits.md\":\"BHDXVtBQ\",\"guide_components_radio_index.md\":\"90as5QGp\",\"guide_components_pagination_properties.md\":\"JUAPvcTL\",\"guide_components_persona_properties.md\":\"DUTPhPMp\",\"guide_components_combo-box_emits.md\":\"Dh5R-qEv\",\"guide_components_pivot_emits.md\":\"BTJPgNpy\",\"guide_components_pagination_index.md\":\"CnW2zAht\",\"guide_components_flip-view_properties.md\":\"BqZ4hhgU\",\"guide_components_icon-element_emits.md\":\"D5TXFdTZ\",\"guide_components_flip-view_index.md\":\"DefnDOv6\",\"guide_components_navigation-panel_index.md\":\"6mO__sSK\",\"guide_components_rating-control_emits.md\":\"blvomSeC\",\"guide_components_icon-element_index.md\":\"DQ8K7JNn\",\"guide_components_navigation-view_index.md\":\"4AQRiz1k\",\"guide_components_toggle-switch_emits.md\":\"CLGzrNut\",\"guide_components_toggle-switch_index.md\":\"61en_q9-\",\"guide_components_scroll-story_index.md\":\"Vpgb1HSV\",\"guide_components_reveal-container_index.md\":\"Cut2r4tV\",\"guide_components_search-box_emits.md\":\"-d9sWNNt\",\"guide_components_search-box_properties.md\":\"DEKFfPFw\",\"guide_components_shimmer_emits.md\":\"CTMInlI3\",\"guide_components_tag_index.md\":\"BhhxkcHn\",\"guide_components_search-box_index.md\":\"DgkrY0oY\",\"guide_components_shimmer_index.md\":\"iZlHuTxw\",\"guide_components_shimmer_properties.md\":\"CdkU1o6H\",\"guide_components_tree-view_index.md\":\"CUrwan4q\",\"guide_components_text-field_index.md\":\"CXSimJtj\",\"guide_components_text-box_index.md\":\"C5moAPfB\",\"guide_components_progress-ring_properties.md\":\"Dc08Uiff\",\"guide_components_toggle-switch_properties.md\":\"tFppK_IS\",\"guide_components_radio-group_emits.md\":\"cEDzKVnN\",\"guide_components_collapse_index.md\":\"N9Iu5-2v\",\"guide_components_image_emits.md\":\"lmlz2xJd\",\"guide_components_callout_index.md\":\"D9RU33w6\",\"guide_components_pivot_index.md\":\"B_vwQL-5\",\"guide_components_command-bar_index.md\":\"Cp4_rrGB\",\"guide_components_pagination_emits.md\":\"Dng86A22\",\"guide_components_button_index.md\":\"7sqT2MQP\",\"guide_components_info-box_properties.md\":\"BI7Nvk-E\",\"guide_components_drop-down_emits.md\":\"BE95TdKW\",\"guide_components_expander_index.md\":\"BKgcUJzQ\",\"guide_components_message-bar_index.md\":\"AEtAWlF8\",\"guide_components_menu-flyout_index.md\":\"Csa7irPj\",\"guide_components_panel_index.md\":\"CsTu0bXo\",\"guide_components_panel_properties.md\":\"BaxoCYKq\",\"guide_components_progress-bar_emits.md\":\"BcwXUpsF\",\"guide_components_progress-bar_properties.md\":\"TxiS9ZMA\",\"guide_components_progress-ring_emits.md\":\"D2Y6hIZ9\",\"guide_components_color-picker_index.md\":\"DCc4ixcU\",\"guide_components_progress-ring_index.md\":\"CPb-ZEPE\",\"guide_components_color-picker_properties.md\":\"wcXK29Vl\",\"guide_components_time-picker_index.md\":\"CQJdRRaG\",\"guide_components_drop-down_properties.md\":\"Bwlkpr1q\",\"guide_components_infinite-scroll-view_index.md\":\"yAuD807x\",\"guide_components_check-box_index.md\":\"FYgdu4oq\",\"guide_components_progress-bar_index.md\":\"D8vHQw5V\",\"guide_components_combo-box_index.md\":\"DTyu3eNd\",\"guide_components_info-box_emits.md\":\"DlEwpkkq\",\"guide_components_drop-down_index.md\":\"BZzJZQWq\",\"guide_components_list-view_index.md\":\"BoYvMzb0\",\"guide_components_verify-box_properties.md\":\"CW6W8fFf\",\"guide_components_verify-box_index.md\":\"DwSB40wR\",\"guide_index.md\":\"Bndlt3sL\",\"guide_components_web-window_index.md\":\"Bxc8vEeI\",\"index.md\":\"MTRqI42u\",\"guide_components_combo-box_properties.md\":\"AWfHzV6x\",\"guide_components_combobox_emits.md\":\"CGB6WLt8\",\"guide_components_combobox_properties.md\":\"Bja0hMou\",\"guide_components_details-list_index.md\":\"CcgOCIyt\",\"guide_components_info-box_index.md\":\"vXh-_DsL\",\"guide_components_combobox_index.md\":\"CsPkY6YB\",\"guide_components_date-picker_index.md\":\"12vmUIup\",\"guide_components_flip-view_emits.md\":\"DCheHjDj\",\"guide_components_panel_emits.md\":\"DG0REDq8\",\"guide_components_breadcrumb_index.md\":\"DyDm7PeP\",\"guide_components_radio-group_properties.md\":\"BnPxoKsQ\",\"guide_components_persona_emits.md\":\"CnsDPKRU\",\"guide_components_pivot_properties.md\":\"BmoLpPi1\",\"guide_components_persona_index.md\":\"DT00jby4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vfluent3\",\"description\":\"A Vue3 component library for Fluent UI\",\"base\":\"/VFluent3/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"VFluent3\",\"footer\":{\"message\":\"MIT Licensed\",\"copyright\":\"Copyright © Creator SN - 2022\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/\"}],\"sidebar\":[{\"text\":\"Basic input\",\"collapsed\":true,\"items\":[{\"text\":\"Button\",\"link\":\"/guide/components/button/\"},{\"text\":\"CheckBox\",\"link\":\"/guide/components/check-box/\"},{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"},{\"text\":\"Combobox\",\"link\":\"/guide/components/combobox/\"},{\"text\":\"DetailsList\",\"link\":\"/guide/components/details-list/\"},{\"text\":\"DropDown\",\"link\":\"/guide/components/drop-down/\"},{\"text\":\"Radio\",\"link\":\"/guide/components/radio/\"},{\"text\":\"RadioGroup\",\"link\":\"/guide/components/radio-group/\"},{\"text\":\"RatingControl\",\"link\":\"/guide/components/rating-control/\"},{\"text\":\"Slider\",\"link\":\"/guide/components/slider/\"},{\"text\":\"ToggleSwitch\",\"link\":\"/guide/components/toggle-switch/\"},{\"text\":\"Tag\",\"link\":\"/guide/components/tag/\"}]},{\"text\":\"Collections\",\"collapsed\":true,\"items\":[{\"text\":\"FlipView\",\"link\":\"/guide/components/flip-view/\"},{\"text\":\"ListView\",\"link\":\"/guide/components/list-view/\"},{\"text\":\"TreeView\",\"link\":\"/guide/components/tree-view/\"}]},{\"text\":\"Date & Time\",\"collapsed\":true,\"items\":[{\"text\":\"CalendarDatePicker\",\"link\":\"/guide/components/calendar-date-picker/\"},{\"text\":\"CalendarView\",\"link\":\"/guide/components/calendar-view/\"},{\"text\":\"DatePicker\",\"link\":\"/guide/components/date-picker/\"},{\"text\":\"TimePicker\",\"link\":\"/guide/components/time-picker/\"}]},{\"text\":\"Dialogs & flyouts\",\"collapsed\":true,\"items\":[{\"text\":\"Callout\",\"link\":\"/guide/components/callout/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Layout\",\"collapsed\":true,\"items\":[{\"text\":\"Collapse\",\"link\":\"/guide/components/collapse/\"},{\"text\":\"Expander\",\"link\":\"/guide/components/expander/\"},{\"text\":\"Drawer\",\"link\":\"/guide/components/drawer/\"},{\"text\":\"Panel\",\"link\":\"/guide/components/panel/\"}]},{\"text\":\"Media\",\"collapsed\":true,\"items\":[{\"text\":\"Image\",\"link\":\"/guide/components/image/\"},{\"text\":\"Img\",\"link\":\"/guide/components/img/\"},{\"text\":\"ImgBox\",\"link\":\"/guide/components/img-box/\"},{\"text\":\"Persona\",\"link\":\"/guide/components/persona/\"}]},{\"text\":\"Menu & toolbars\",\"collapsed\":true,\"items\":[{\"text\":\"CommandBar\",\"link\":\"/guide/components/command-bar/\"},{\"text\":\"MenuFlyout\",\"link\":\"/guide/components/menu-flyout/\"},{\"text\":\"SwipeControl\",\"link\":\"/guide/components/swipe-control/\"}]},{\"text\":\"Navigation\",\"collapsed\":true,\"items\":[{\"text\":\"Breadcrumb\",\"link\":\"/guide/components/breadcrumb/\"},{\"text\":\"NavigationPanel\",\"link\":\"/guide/components/navigation-panel/\"},{\"text\":\"NavigationView\",\"link\":\"/guide/components/navigation-view/\"},{\"text\":\"Pivot\",\"link\":\"/guide/components/pivot/\"},{\"text\":\"Pagination\",\"link\":\"/guide/components/pagination/\"}]},{\"text\":\"Scrolling\",\"collapsed\":true,\"items\":[{\"text\":\"InfiniteScrollView\",\"link\":\"/guide/components/infinite-scroll-view/\"},{\"text\":\"ScrollStory\",\"link\":\"/guide/components/scroll-story/\"}]},{\"text\":\"Status & info\",\"collapsed\":true,\"items\":[{\"text\":\"Badge\",\"link\":\"/guide/components/badge/\"},{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"ProgressBar\",\"link\":\"/guide/components/progress-bar/\"},{\"text\":\"ProgressRing\",\"link\":\"/guide/components/progress-ring/\"}]},{\"text\":\"Styles\",\"collapsed\":true,\"items\":[{\"text\":\"AnimatedIcon\",\"link\":\"/guide/components/animated-icon/\"},{\"text\":\"IconElement\",\"link\":\"/guide/components/icon-element/\"},{\"text\":\"RevealContainer\",\"link\":\"/guide/components/reveal-container/\"},{\"text\":\"Shimmer\",\"link\":\"/guide/components/shimmer/\"}]},{\"text\":\"Text\",\"collapsed\":true,\"items\":[{\"text\":\"SearchBox\",\"link\":\"/guide/components/search-box/\"},{\"text\":\"TextBox\",\"link\":\"/guide/components/text-box/\"},{\"text\":\"TextField\",\"link\":\"/guide/components/text-field/\"},{\"text\":\"VerifyBox\",\"link\":\"/guide/components/verify-box/\"}]},{\"text\":\"Windowing\",\"collapsed\":true,\"items\":[{\"text\":\"WebWindow\",\"link\":\"/guide/components/web-window/\"}]},{\"text\":\"Global\",\"collapsed\":true,\"items\":[{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Advance\",\"collapsed\":true,\"items\":[{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git a/guide/components/info-box/emits.html b/guide/components/info-box/emits.html
index 48aecf1..3761492 100644
--- a/guide/components/info-box/emits.html
+++ b/guide/components/info-box/emits.html
@@ -1,20 +1,24 @@
 <!DOCTYPE html>
-<html lang="en-US">
+<html lang="en-US" dir="ltr">
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>Emits | vfluent3</title>
+    <title>vfluent3</title>
     <meta name="description" content="A Vue3 component library for Fluent UI">
-    <link rel="stylesheet" href="/VFluent3/assets/style.0a1d87af.css">
-    <link rel="modulepreload" href="/VFluent3/assets/app.d60fa8c3.js">
-    <link rel="modulepreload" href="/VFluent3/assets/guide_components_info-box_emits.md.c2e71eec.lean.js">
+    <meta name="generator" content="VitePress v1.0.0-rc.45">
+    <link rel="preload stylesheet" href="/VFluent3/assets/style.BabQegKX.css" as="style">
     
-    <script>(()=>{const e=localStorage.getItem("vitepress-theme-appearance"),a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script type="module" src="/VFluent3/assets/app.CSutcJ2E.js"></script>
+    <link rel="preload" href="/VFluent3/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/framework.DvIFzl91.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/theme.CgqFBnN_.js">
+    <link rel="modulepreload" href="/VFluent3/assets/guide_components_info-box_emits.md.DlEwpkkq.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
   </head>
   <body>
-    <div id="app"><div class="Layout" data-v-058b7495><!--[--><!--]--><!--[--><span tabindex="-1" data-v-bea91388></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-bea91388> Skip to content </a><!--]--><!----><header class="VPNav" data-v-058b7495 data-v-2a0a2738><div class="VPNavBar has-sidebar" data-v-2a0a2738 data-v-45c9f423><div class="container" data-v-45c9f423><div class="VPNavBarTitle has-sidebar" data-v-45c9f423 data-v-011600ce><a class="title" href="/VFluent3/" data-v-011600ce><!----><!--[-->VFluent3<!--]--></a></div><div class="content" data-v-45c9f423><!----><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-45c9f423 data-v-4da4371d><span id="main-nav-aria-label" class="visually-hidden" data-v-4da4371d>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" data-v-4da4371d data-v-66f8d518 data-v-4d08dd3a><!--[-->Home<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" data-v-4da4371d data-v-66f8d518 data-v-4d08dd3a><!--[-->Guide<!--]--><!----></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-45c9f423 data-v-bf1c94ca><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" data-v-bf1c94ca data-v-d0ee0df2 data-v-55b931a0><span class="check" data-v-55b931a0><span class="icon" data-v-55b931a0><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-d0ee0df2><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-d0ee0df2><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-45c9f423 data-v-7cece6ac data-v-37af1650><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-37af1650><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-37af1650><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-37af1650><div class="VPMenu" data-v-37af1650 data-v-17dc081b><!----><!--[--><!--[--><!----><div class="group" data-v-7cece6ac><div class="item appearance" data-v-7cece6ac><p class="label" data-v-7cece6ac>Appearance</p><div class="appearance-action" data-v-7cece6ac><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" data-v-7cece6ac data-v-d0ee0df2 data-v-55b931a0><span class="check" data-v-55b931a0><span class="icon" data-v-55b931a0><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-d0ee0df2><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-d0ee0df2><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-45c9f423 data-v-5484e669><span class="container" data-v-5484e669><span class="top" data-v-5484e669></span><span class="middle" data-v-5484e669></span><span class="bottom" data-v-5484e669></span></span></button></div></div></div><!----></header><div class="VPLocalNav" data-v-058b7495 data-v-f623cd72><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-f623cd72><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-f623cd72><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-f623cd72>Menu</span></button><a class="top-link" href="#" data-v-f623cd72> Return to top </a></div><aside class="VPSidebar" data-v-058b7495 data-v-3b8ec0c7><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-3b8ec0c7><span class="visually-hidden" id="sidebar-aria-label" data-v-3b8ec0c7> Sidebar Navigation </span><!--[--><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Basic</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/button/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Button</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/check-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>CheckBox</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/radio/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Radio</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/progress-bar/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ProgressBar</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/progress-ring/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ProgressRing</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/toggle-switch/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ToggleSwitch</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/img/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Img</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/text-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>TextBox</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/combo-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ComboBox</span><!--]--><!----></a><!--]--></div></section></div><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Global</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/message-bar/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>MessageBar</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/info-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>InfoBox</span><!--]--><!----></a><!--]--></div></section></div><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Advance</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/color-picker/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ColorPicker</span><!--]--><!----></a><!--]--></div></section></div><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-058b7495 data-v-564173e9><div class="VPDoc has-sidebar" data-v-564173e9 data-v-32b7ddf4><div class="container" data-v-32b7ddf4><div class="aside" data-v-32b7ddf4><div class="aside-curtain" data-v-32b7ddf4></div><div class="aside-container" data-v-32b7ddf4><div class="aside-content" data-v-32b7ddf4><div class="VPDocAside" data-v-32b7ddf4 data-v-35c1bae1><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline has-outline" data-v-35c1bae1 data-v-123cce62><div class="content" data-v-123cce62><div class="outline-marker" data-v-123cce62></div><div class="outline-title" data-v-123cce62>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-123cce62><span class="visually-hidden" id="doc-outline-aria-label" data-v-123cce62> Table of Contents for current page </span><ul class="root" data-v-123cce62><!--[--><li style="" data-v-123cce62><a class="outline-link" href="#emits" data-v-123cce62>Emits</a><!----></li><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-35c1bae1></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-32b7ddf4><div class="content-container" data-v-32b7ddf4><!--[--><!--]--><main class="main" data-v-32b7ddf4><div style="position:relative;" class="vp-doc _VFluent3_guide_components_info-box_emits" data-v-32b7ddf4><div><h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">cancel</td><td style="text-align:center;"></td><td style="text-align:center;">oncancel</td></tr><tr><td style="text-align:center;">confirm</td><td style="text-align:center;"></td><td style="text-align:center;">onconfirm</td></tr></tbody></table></div></div></main><footer class="VPDocFooter" data-v-32b7ddf4 data-v-cfaa3a6c><div class="edit-info" data-v-cfaa3a6c><!----><!----></div><div class="prev-next" data-v-cfaa3a6c><div class="pager" data-v-cfaa3a6c><!----></div><div class="pager" data-v-cfaa3a6c><a class="pager-link next" href="/VFluent3/guide/components/button/" data-v-cfaa3a6c><span class="desc" data-v-cfaa3a6c>Next page</span><span class="title" data-v-cfaa3a6c>Button</span></a></div></div></footer><!--[--><!--]--></div></div></div></div></div><footer class="VPFooter has-sidebar" data-v-058b7495 data-v-a6c8dde4><div class="container" data-v-a6c8dde4><p class="message" data-v-a6c8dde4>MIT Licensed</p><p class="copyright" data-v-a6c8dde4>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
-    <script>__VP_HASH_MAP__ = JSON.parse("{\"guide_components_button_emits.md\":\"d682bf18\",\"guide_components_button_index.md\":\"23a8eb54\",\"guide_components_button_properties.md\":\"cd4004b6\",\"guide_components_check-box_emits.md\":\"31609794\",\"guide_components_check-box_index.md\":\"32046814\",\"guide_components_check-box_properties.md\":\"8f33ac0c\",\"guide_components_color-picker_emits.md\":\"00983cd0\",\"guide_components_color-picker_index.md\":\"b2d62612\",\"guide_components_color-picker_properties.md\":\"5466ba72\",\"guide_components_combo-box_emits.md\":\"d5ffda50\",\"guide_components_combo-box_index.md\":\"1c4364f5\",\"guide_components_combo-box_properties.md\":\"2e1d6060\",\"guide_components_img_emits.md\":\"6237adb4\",\"guide_components_img_index.md\":\"fa51a3a1\",\"guide_components_img_properties.md\":\"8d321b5e\",\"guide_components_info-box_emits.md\":\"c2e71eec\",\"guide_components_info-box_index.md\":\"06175fed\",\"guide_components_info-box_properties.md\":\"314dbb00\",\"guide_components_message-bar_emits.md\":\"e89a5a22\",\"guide_components_message-bar_index.md\":\"3f0b01d6\",\"guide_components_message-bar_properties.md\":\"ee3838d9\",\"guide_components_progress-bar_emits.md\":\"5b611e3b\",\"guide_components_progress-bar_index.md\":\"689c3241\",\"guide_components_progress-bar_properties.md\":\"39af7fb2\",\"guide_components_progress-ring_emits.md\":\"67e4644e\",\"guide_components_progress-ring_index.md\":\"9a33542b\",\"guide_components_progress-ring_properties.md\":\"c897c4bb\",\"guide_components_radio_emits.md\":\"28506857\",\"guide_components_radio_index.md\":\"e5a479ce\",\"guide_components_radio_properties.md\":\"f8e55d2f\",\"guide_components_text-box_emits.md\":\"0bf89ef8\",\"guide_components_text-box_index.md\":\"7ccfc637\",\"guide_components_text-box_properties.md\":\"aab3a89e\",\"guide_components_toggle-switch_emits.md\":\"5146435f\",\"guide_components_toggle-switch_index.md\":\"8be48081\",\"guide_components_toggle-switch_properties.md\":\"54984c3a\",\"guide_index.md\":\"e3dca1d7\",\"index.md\":\"1e9773d5\"}")</script>
-    <script type="module" async src="/VFluent3/assets/app.d60fa8c3.js"></script>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-19c990f1><div class="wrapper" data-v-19c990f1><div class="container" data-v-19c990f1><div class="title" data-v-19c990f1><div class="VPNavBarTitle has-sidebar" data-v-19c990f1 data-v-ab179fa1><a class="title" href="/VFluent3/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>VFluent3</span><!--[--><!--]--></a></div></div><div class="content" data-v-19c990f1><div class="content-body" data-v-19c990f1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-19c990f1><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-19c990f1 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Guide</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-19c990f1 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-19c990f1 data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-19c990f1 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-19c990f1><div class="divider-line" data-v-19c990f1></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-d2ecc192><button data-v-d2ecc192>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-575e6a36><div class="curtain" data-v-575e6a36></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-575e6a36><span class="visually-hidden" id="sidebar-aria-label" data-v-575e6a36> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Basic input</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/button/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/check-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CheckBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/combobox/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Combobox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/details-list/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DetailsList</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drop-down/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DropDown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio-group/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RadioGroup</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/rating-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RatingControl</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/slider/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/toggle-switch/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ToggleSwitch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tag/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Tag</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Collections</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/flip-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>FlipView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/list-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ListView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tree-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TreeView</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Date & Time</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarDatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/time-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TimePicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Dialogs & flyouts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/callout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Callout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Layout</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/collapse/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Collapse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/expander/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Expander</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drawer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Panel</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Media</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/image/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Img</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ImgBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/persona/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Persona</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Menu & toolbars</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/command-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CommandBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/menu-flyout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MenuFlyout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/swipe-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SwipeControl</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Navigation</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/breadcrumb/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationPanel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pivot/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pivot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pagination/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pagination</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Scrolling</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/infinite-scroll-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfiniteScrollView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/scroll-story/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ScrollStory</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Status & info</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/badge/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-ring/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressRing</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Styles</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/animated-icon/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>AnimatedIcon</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/icon-element/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>IconElement</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/reveal-container/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RevealContainer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/shimmer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Shimmer</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Text</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/search-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SearchBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-field/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextField</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/verify-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>VerifyBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Windowing</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/web-window/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>WebWindow</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Global</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Advance</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-935f8a84><div class="content" data-v-935f8a84><div class="outline-marker" data-v-935f8a84></div><div class="outline-title" role="heading" aria-level="2" data-v-935f8a84>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-935f8a84><span class="visually-hidden" id="doc-outline-aria-label" data-v-935f8a84> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-935f8a84 data-v-b933a997><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _VFluent3_guide_components_info-box_emits" data-v-39a288b8><div><h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-label="Permalink to &quot;Emits&quot;">​</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead></table></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-09de1c0f><!--[--><!--]--><!----><nav class="prev-next" data-v-09de1c0f><div class="pager" data-v-09de1c0f><!----></div><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link next" href="/VFluent3/guide/components/button/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Next page</span><span class="title" data-v-09de1c0f>Button</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>MIT Licensed</p><p class="copyright" data-v-e315a0ad>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_calendar-date-picker_properties.md\":\"DXRjmMG8\",\"guide_components_image_properties.md\":\"DGanRzCb\",\"guide_components_img-box_index.md\":\"DYtggkf_\",\"guide_components_img_emits.md\":\"BlE7jvZQ\",\"guide_components_img_index.md\":\"Bm9FiuU4\",\"guide_components_icon-element_properties.md\":\"8Oakruwc\",\"guide_components_img_properties.md\":\"B42YSocI\",\"guide_components_drawer_index.md\":\"D_vpnCpE\",\"guide_components_verify-box_emits.md\":\"DT17Iazx\",\"guide_components_calendar-date-picker_index.md\":\"BdHjrurh\",\"guide_components_rating-control_index.md\":\"Q9l5Lfrr\",\"guide_components_rating-control_properties.md\":\"DKprnl0i\",\"guide_components_calendar-view_index.md\":\"zdoRYVx1\",\"guide_components_animated-icon_index.md\":\"yZDMzCFe\",\"guide_components_calendar-date-picker_emits.md\":\"D5OkfR8j\",\"guide_components_badge_index.md\":\"Bb4crrJn\",\"guide_components_image_index.md\":\"B7X6cWAZ\",\"guide_components_slider_index.md\":\"C7zZ2d-W\",\"guide_components_radio-group_index.md\":\"CVfh3h5H\",\"guide_components_swipe-control_index.md\":\"DwrDVPc1\",\"guide_components_color-picker_emits.md\":\"BHDXVtBQ\",\"guide_components_radio_index.md\":\"90as5QGp\",\"guide_components_pagination_properties.md\":\"JUAPvcTL\",\"guide_components_persona_properties.md\":\"DUTPhPMp\",\"guide_components_combo-box_emits.md\":\"Dh5R-qEv\",\"guide_components_pivot_emits.md\":\"BTJPgNpy\",\"guide_components_pagination_index.md\":\"CnW2zAht\",\"guide_components_flip-view_properties.md\":\"BqZ4hhgU\",\"guide_components_icon-element_emits.md\":\"D5TXFdTZ\",\"guide_components_flip-view_index.md\":\"DefnDOv6\",\"guide_components_navigation-panel_index.md\":\"6mO__sSK\",\"guide_components_rating-control_emits.md\":\"blvomSeC\",\"guide_components_icon-element_index.md\":\"DQ8K7JNn\",\"guide_components_navigation-view_index.md\":\"4AQRiz1k\",\"guide_components_toggle-switch_emits.md\":\"CLGzrNut\",\"guide_components_toggle-switch_index.md\":\"61en_q9-\",\"guide_components_scroll-story_index.md\":\"Vpgb1HSV\",\"guide_components_reveal-container_index.md\":\"Cut2r4tV\",\"guide_components_search-box_emits.md\":\"-d9sWNNt\",\"guide_components_search-box_properties.md\":\"DEKFfPFw\",\"guide_components_shimmer_emits.md\":\"CTMInlI3\",\"guide_components_tag_index.md\":\"BhhxkcHn\",\"guide_components_search-box_index.md\":\"DgkrY0oY\",\"guide_components_shimmer_index.md\":\"iZlHuTxw\",\"guide_components_shimmer_properties.md\":\"CdkU1o6H\",\"guide_components_tree-view_index.md\":\"CUrwan4q\",\"guide_components_text-field_index.md\":\"CXSimJtj\",\"guide_components_text-box_index.md\":\"C5moAPfB\",\"guide_components_progress-ring_properties.md\":\"Dc08Uiff\",\"guide_components_toggle-switch_properties.md\":\"tFppK_IS\",\"guide_components_radio-group_emits.md\":\"cEDzKVnN\",\"guide_components_collapse_index.md\":\"N9Iu5-2v\",\"guide_components_image_emits.md\":\"lmlz2xJd\",\"guide_components_callout_index.md\":\"D9RU33w6\",\"guide_components_pivot_index.md\":\"B_vwQL-5\",\"guide_components_command-bar_index.md\":\"Cp4_rrGB\",\"guide_components_pagination_emits.md\":\"Dng86A22\",\"guide_components_button_index.md\":\"7sqT2MQP\",\"guide_components_info-box_properties.md\":\"BI7Nvk-E\",\"guide_components_drop-down_emits.md\":\"BE95TdKW\",\"guide_components_expander_index.md\":\"BKgcUJzQ\",\"guide_components_message-bar_index.md\":\"AEtAWlF8\",\"guide_components_menu-flyout_index.md\":\"Csa7irPj\",\"guide_components_panel_index.md\":\"CsTu0bXo\",\"guide_components_panel_properties.md\":\"BaxoCYKq\",\"guide_components_progress-bar_emits.md\":\"BcwXUpsF\",\"guide_components_progress-bar_properties.md\":\"TxiS9ZMA\",\"guide_components_progress-ring_emits.md\":\"D2Y6hIZ9\",\"guide_components_color-picker_index.md\":\"DCc4ixcU\",\"guide_components_progress-ring_index.md\":\"CPb-ZEPE\",\"guide_components_color-picker_properties.md\":\"wcXK29Vl\",\"guide_components_time-picker_index.md\":\"CQJdRRaG\",\"guide_components_drop-down_properties.md\":\"Bwlkpr1q\",\"guide_components_infinite-scroll-view_index.md\":\"yAuD807x\",\"guide_components_check-box_index.md\":\"FYgdu4oq\",\"guide_components_progress-bar_index.md\":\"D8vHQw5V\",\"guide_components_combo-box_index.md\":\"DTyu3eNd\",\"guide_components_info-box_emits.md\":\"DlEwpkkq\",\"guide_components_drop-down_index.md\":\"BZzJZQWq\",\"guide_components_list-view_index.md\":\"BoYvMzb0\",\"guide_components_verify-box_properties.md\":\"CW6W8fFf\",\"guide_components_verify-box_index.md\":\"DwSB40wR\",\"guide_index.md\":\"Bndlt3sL\",\"guide_components_web-window_index.md\":\"Bxc8vEeI\",\"index.md\":\"MTRqI42u\",\"guide_components_combo-box_properties.md\":\"AWfHzV6x\",\"guide_components_combobox_emits.md\":\"CGB6WLt8\",\"guide_components_combobox_properties.md\":\"Bja0hMou\",\"guide_components_details-list_index.md\":\"CcgOCIyt\",\"guide_components_info-box_index.md\":\"vXh-_DsL\",\"guide_components_combobox_index.md\":\"CsPkY6YB\",\"guide_components_date-picker_index.md\":\"12vmUIup\",\"guide_components_flip-view_emits.md\":\"DCheHjDj\",\"guide_components_panel_emits.md\":\"DG0REDq8\",\"guide_components_breadcrumb_index.md\":\"DyDm7PeP\",\"guide_components_radio-group_properties.md\":\"BnPxoKsQ\",\"guide_components_persona_emits.md\":\"CnsDPKRU\",\"guide_components_pivot_properties.md\":\"BmoLpPi1\",\"guide_components_persona_index.md\":\"DT00jby4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vfluent3\",\"description\":\"A Vue3 component library for Fluent UI\",\"base\":\"/VFluent3/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"VFluent3\",\"footer\":{\"message\":\"MIT Licensed\",\"copyright\":\"Copyright © Creator SN - 2022\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/\"}],\"sidebar\":[{\"text\":\"Basic input\",\"collapsed\":true,\"items\":[{\"text\":\"Button\",\"link\":\"/guide/components/button/\"},{\"text\":\"CheckBox\",\"link\":\"/guide/components/check-box/\"},{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"},{\"text\":\"Combobox\",\"link\":\"/guide/components/combobox/\"},{\"text\":\"DetailsList\",\"link\":\"/guide/components/details-list/\"},{\"text\":\"DropDown\",\"link\":\"/guide/components/drop-down/\"},{\"text\":\"Radio\",\"link\":\"/guide/components/radio/\"},{\"text\":\"RadioGroup\",\"link\":\"/guide/components/radio-group/\"},{\"text\":\"RatingControl\",\"link\":\"/guide/components/rating-control/\"},{\"text\":\"Slider\",\"link\":\"/guide/components/slider/\"},{\"text\":\"ToggleSwitch\",\"link\":\"/guide/components/toggle-switch/\"},{\"text\":\"Tag\",\"link\":\"/guide/components/tag/\"}]},{\"text\":\"Collections\",\"collapsed\":true,\"items\":[{\"text\":\"FlipView\",\"link\":\"/guide/components/flip-view/\"},{\"text\":\"ListView\",\"link\":\"/guide/components/list-view/\"},{\"text\":\"TreeView\",\"link\":\"/guide/components/tree-view/\"}]},{\"text\":\"Date & Time\",\"collapsed\":true,\"items\":[{\"text\":\"CalendarDatePicker\",\"link\":\"/guide/components/calendar-date-picker/\"},{\"text\":\"CalendarView\",\"link\":\"/guide/components/calendar-view/\"},{\"text\":\"DatePicker\",\"link\":\"/guide/components/date-picker/\"},{\"text\":\"TimePicker\",\"link\":\"/guide/components/time-picker/\"}]},{\"text\":\"Dialogs & flyouts\",\"collapsed\":true,\"items\":[{\"text\":\"Callout\",\"link\":\"/guide/components/callout/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Layout\",\"collapsed\":true,\"items\":[{\"text\":\"Collapse\",\"link\":\"/guide/components/collapse/\"},{\"text\":\"Expander\",\"link\":\"/guide/components/expander/\"},{\"text\":\"Drawer\",\"link\":\"/guide/components/drawer/\"},{\"text\":\"Panel\",\"link\":\"/guide/components/panel/\"}]},{\"text\":\"Media\",\"collapsed\":true,\"items\":[{\"text\":\"Image\",\"link\":\"/guide/components/image/\"},{\"text\":\"Img\",\"link\":\"/guide/components/img/\"},{\"text\":\"ImgBox\",\"link\":\"/guide/components/img-box/\"},{\"text\":\"Persona\",\"link\":\"/guide/components/persona/\"}]},{\"text\":\"Menu & toolbars\",\"collapsed\":true,\"items\":[{\"text\":\"CommandBar\",\"link\":\"/guide/components/command-bar/\"},{\"text\":\"MenuFlyout\",\"link\":\"/guide/components/menu-flyout/\"},{\"text\":\"SwipeControl\",\"link\":\"/guide/components/swipe-control/\"}]},{\"text\":\"Navigation\",\"collapsed\":true,\"items\":[{\"text\":\"Breadcrumb\",\"link\":\"/guide/components/breadcrumb/\"},{\"text\":\"NavigationPanel\",\"link\":\"/guide/components/navigation-panel/\"},{\"text\":\"NavigationView\",\"link\":\"/guide/components/navigation-view/\"},{\"text\":\"Pivot\",\"link\":\"/guide/components/pivot/\"},{\"text\":\"Pagination\",\"link\":\"/guide/components/pagination/\"}]},{\"text\":\"Scrolling\",\"collapsed\":true,\"items\":[{\"text\":\"InfiniteScrollView\",\"link\":\"/guide/components/infinite-scroll-view/\"},{\"text\":\"ScrollStory\",\"link\":\"/guide/components/scroll-story/\"}]},{\"text\":\"Status & info\",\"collapsed\":true,\"items\":[{\"text\":\"Badge\",\"link\":\"/guide/components/badge/\"},{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"ProgressBar\",\"link\":\"/guide/components/progress-bar/\"},{\"text\":\"ProgressRing\",\"link\":\"/guide/components/progress-ring/\"}]},{\"text\":\"Styles\",\"collapsed\":true,\"items\":[{\"text\":\"AnimatedIcon\",\"link\":\"/guide/components/animated-icon/\"},{\"text\":\"IconElement\",\"link\":\"/guide/components/icon-element/\"},{\"text\":\"RevealContainer\",\"link\":\"/guide/components/reveal-container/\"},{\"text\":\"Shimmer\",\"link\":\"/guide/components/shimmer/\"}]},{\"text\":\"Text\",\"collapsed\":true,\"items\":[{\"text\":\"SearchBox\",\"link\":\"/guide/components/search-box/\"},{\"text\":\"TextBox\",\"link\":\"/guide/components/text-box/\"},{\"text\":\"TextField\",\"link\":\"/guide/components/text-field/\"},{\"text\":\"VerifyBox\",\"link\":\"/guide/components/verify-box/\"}]},{\"text\":\"Windowing\",\"collapsed\":true,\"items\":[{\"text\":\"WebWindow\",\"link\":\"/guide/components/web-window/\"}]},{\"text\":\"Global\",\"collapsed\":true,\"items\":[{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Advance\",\"collapsed\":true,\"items\":[{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
     
   </body>
 </html>
\ No newline at end of file
diff --git a/guide/components/info-box/index.html b/guide/components/info-box/index.html
index e80480c..371b0a0 100644
--- a/guide/components/info-box/index.html
+++ b/guide/components/info-box/index.html
@@ -1,89 +1,108 @@
 <!DOCTYPE html>
-<html lang="en-US">
+<html lang="en-US" dir="ltr">
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1">
     <title>InfoBox | vfluent3</title>
     <meta name="description" content="A Vue3 component library for Fluent UI">
-    <link rel="stylesheet" href="/VFluent3/assets/style.0a1d87af.css">
-    <link rel="modulepreload" href="/VFluent3/assets/app.d60fa8c3.js">
-    <link rel="modulepreload" href="/VFluent3/assets/chunks/index.9dba9c16.js">
-    <link rel="modulepreload" href="/VFluent3/assets/guide_components_info-box_index.md.06175fed.lean.js">
+    <meta name="generator" content="VitePress v1.0.0-rc.45">
+    <link rel="preload stylesheet" href="/VFluent3/assets/style.BabQegKX.css" as="style">
     
-    <script>(()=>{const e=localStorage.getItem("vitepress-theme-appearance"),a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script type="module" src="/VFluent3/assets/app.CSutcJ2E.js"></script>
+    <link rel="preload" href="/VFluent3/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/framework.DvIFzl91.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/theme.CgqFBnN_.js">
+    <link rel="modulepreload" href="/VFluent3/assets/guide_components_info-box_index.md.vXh-_DsL.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
   </head>
   <body>
-    <div id="app"><div class="Layout" data-v-058b7495><!--[--><!--]--><!--[--><span tabindex="-1" data-v-bea91388></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-bea91388> Skip to content </a><!--]--><!----><header class="VPNav" data-v-058b7495 data-v-2a0a2738><div class="VPNavBar has-sidebar" data-v-2a0a2738 data-v-45c9f423><div class="container" data-v-45c9f423><div class="VPNavBarTitle has-sidebar" data-v-45c9f423 data-v-011600ce><a class="title" href="/VFluent3/" data-v-011600ce><!----><!--[-->VFluent3<!--]--></a></div><div class="content" data-v-45c9f423><!----><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-45c9f423 data-v-4da4371d><span id="main-nav-aria-label" class="visually-hidden" data-v-4da4371d>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" data-v-4da4371d data-v-66f8d518 data-v-4d08dd3a><!--[-->Home<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" data-v-4da4371d data-v-66f8d518 data-v-4d08dd3a><!--[-->Guide<!--]--><!----></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-45c9f423 data-v-bf1c94ca><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" data-v-bf1c94ca data-v-d0ee0df2 data-v-55b931a0><span class="check" data-v-55b931a0><span class="icon" data-v-55b931a0><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-d0ee0df2><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-d0ee0df2><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-45c9f423 data-v-7cece6ac data-v-37af1650><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-37af1650><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-37af1650><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-37af1650><div class="VPMenu" data-v-37af1650 data-v-17dc081b><!----><!--[--><!--[--><!----><div class="group" data-v-7cece6ac><div class="item appearance" data-v-7cece6ac><p class="label" data-v-7cece6ac>Appearance</p><div class="appearance-action" data-v-7cece6ac><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" data-v-7cece6ac data-v-d0ee0df2 data-v-55b931a0><span class="check" data-v-55b931a0><span class="icon" data-v-55b931a0><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-d0ee0df2><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-d0ee0df2><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-45c9f423 data-v-5484e669><span class="container" data-v-5484e669><span class="top" data-v-5484e669></span><span class="middle" data-v-5484e669></span><span class="bottom" data-v-5484e669></span></span></button></div></div></div><!----></header><div class="VPLocalNav" data-v-058b7495 data-v-f623cd72><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-f623cd72><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-f623cd72><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-f623cd72>Menu</span></button><a class="top-link" href="#" data-v-f623cd72> Return to top </a></div><aside class="VPSidebar" data-v-058b7495 data-v-3b8ec0c7><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-3b8ec0c7><span class="visually-hidden" id="sidebar-aria-label" data-v-3b8ec0c7> Sidebar Navigation </span><!--[--><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Basic</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/button/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Button</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/check-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>CheckBox</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/radio/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Radio</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/progress-bar/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ProgressBar</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/progress-ring/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ProgressRing</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/toggle-switch/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ToggleSwitch</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/img/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Img</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/text-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>TextBox</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/combo-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ComboBox</span><!--]--><!----></a><!--]--></div></section></div><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Global</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/message-bar/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>MessageBar</span><!--]--><!----></a><a class="VPLink link active" href="/VFluent3/guide/components/info-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>InfoBox</span><!--]--><!----></a><!--]--></div></section></div><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Advance</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/color-picker/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ColorPicker</span><!--]--><!----></a><!--]--></div></section></div><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-058b7495 data-v-564173e9><div class="VPDoc has-sidebar" data-v-564173e9 data-v-32b7ddf4><div class="container" data-v-32b7ddf4><div class="aside" data-v-32b7ddf4><div class="aside-curtain" data-v-32b7ddf4></div><div class="aside-container" data-v-32b7ddf4><div class="aside-content" data-v-32b7ddf4><div class="VPDocAside" data-v-32b7ddf4 data-v-35c1bae1><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline has-outline" data-v-35c1bae1 data-v-123cce62><div class="content" data-v-123cce62><div class="outline-marker" data-v-123cce62></div><div class="outline-title" data-v-123cce62>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-123cce62><span class="visually-hidden" id="doc-outline-aria-label" data-v-123cce62> Table of Contents for current page </span><ul class="root" data-v-123cce62><!--[--><li style="" data-v-123cce62><a class="outline-link" href="#quick-start" data-v-123cce62>Quick Start</a><!----></li><li style="" data-v-123cce62><a class="outline-link" href="#properties" data-v-123cce62>Properties</a><!----></li><li style="" data-v-123cce62><a class="outline-link" href="#emits" data-v-123cce62>Emits</a><!----></li><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-35c1bae1></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-32b7ddf4><div class="content-container" data-v-32b7ddf4><!--[--><!--]--><main class="main" data-v-32b7ddf4><div style="position:relative;" class="vp-doc _VFluent3_guide_components_info-box_index" data-v-32b7ddf4><div><h1 id="infobox" tabindex="-1">InfoBox <a class="header-anchor" href="#infobox" aria-hidden="true">#</a></h1><h2 id="quick-start" tabindex="-1">Quick Start <a class="header-anchor" href="#quick-start" aria-hidden="true">#</a></h2><h3 id="default" tabindex="-1">Default <a class="header-anchor" href="#default" aria-hidden="true">#</a></h3><hr><ol><li>info</li></ol><div class="fv-info-box light info"><div class="title-bar"><i class="icon ms-Icon ms-Icon--Error"></i><span class="text">Tip</span></div><div class="content"><!--[--> Info here... <!--]--></div><div class="control-panel"><!--[--><div class="fv-button light button confirm"><button type="button" class="button-container shadow" style="color:white;background:rgb(var(--fv-primary-color));border-width:2px;border-radius:6px;"><span class="content-block" style="font-weight:normal;"><!----><!--[-->Confirm<!--]--></span></button></div><div class="fv-button light button cancel"><button type="button" class="button-container shadow" style="border-width:2px;border-radius:6px;"><span class="content-block" style="font-weight:normal;"><!----><!--[-->Cancel<!--]--></span></button></div><!--]--></div></div><div class="language-vue-html"><span class="copy"></span><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-info-box</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">status</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">info</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> @</span><span style="color:#C792EA;">confirm</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">onConfirm</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> @</span><span style="color:#C792EA;">cancel</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">onCancel</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">        Info here...</span></span>
-<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-info-box</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ol start="2"><li>correct</li></ol><div class="fv-info-box light correct"><div class="title-bar"><i class="icon ms-Icon ms-Icon--Completed"></i><span class="text">Tip</span></div><div class="content"><!--[--> Info here... <!--]--></div><div class="control-panel"><!--[--><div class="fv-button light button confirm"><button type="button" class="button-container shadow" style="color:white;background:rgb(var(--fv-success-color));border-width:2px;border-radius:6px;"><span class="content-block" style="font-weight:normal;"><!----><!--[-->Confirm<!--]--></span></button></div><div class="fv-button light button cancel"><button type="button" class="button-container shadow" style="border-width:2px;border-radius:6px;"><span class="content-block" style="font-weight:normal;"><!----><!--[-->Cancel<!--]--></span></button></div><!--]--></div></div><div class="language-vue-html"><span class="copy"></span><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-info-box</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">status</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">correct</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> @</span><span style="color:#C792EA;">confirm</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">onConfirm</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> @</span><span style="color:#C792EA;">cancel</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">onCancel</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">        Info here...</span></span>
-<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-info-box</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ol start="3"><li>warning</li></ol><div class="fv-info-box light warning"><div class="title-bar"><i class="icon ms-Icon ms-Icon--Warning"></i><span class="text">Tip</span></div><div class="content"><!--[--> Info here... <!--]--></div><div class="control-panel"><!--[--><div class="fv-button light button confirm"><button type="button" class="button-container shadow" style="color:white;background:rgb(var(--fv-warning-color));border-width:2px;border-radius:6px;"><span class="content-block" style="font-weight:normal;"><!----><!--[-->Confirm<!--]--></span></button></div><div class="fv-button light button cancel"><button type="button" class="button-container shadow" style="border-width:2px;border-radius:6px;"><span class="content-block" style="font-weight:normal;"><!----><!--[-->Cancel<!--]--></span></button></div><!--]--></div></div><div class="language-vue-html"><span class="copy"></span><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-info-box</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">status</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">warning</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> @</span><span style="color:#C792EA;">confirm</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">onConfirm</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> @</span><span style="color:#C792EA;">cancel</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">onCancel</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">        Info here...</span></span>
-<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-info-box</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ol start="4"><li>error</li></ol><div class="fv-info-box light error"><div class="title-bar"><i class="icon ms-Icon ms-Icon--ErrorBadge"></i><span class="text">Tip</span></div><div class="content"><!--[--> Info here... <!--]--></div><div class="control-panel"><!--[--><div class="fv-button light button confirm"><button type="button" class="button-container shadow" style="color:white;background:rgb(var(--fv-error-color));border-width:2px;border-radius:6px;"><span class="content-block" style="font-weight:normal;"><!----><!--[-->Confirm<!--]--></span></button></div><div class="fv-button light button cancel"><button type="button" class="button-container shadow" style="border-width:2px;border-radius:6px;"><span class="content-block" style="font-weight:normal;"><!----><!--[-->Cancel<!--]--></span></button></div><!--]--></div></div><div class="language-vue-html"><span class="copy"></span><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-info-box</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">status</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">error</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> @</span><span style="color:#C792EA;">confirm</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">onConfirm</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> @</span><span style="color:#C792EA;">cancel</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">onCancel</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">        Info here...</span></span>
-<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-info-box</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ol start="4"><li>blocked</li></ol><div class="fv-info-box light blocked"><div class="title-bar"><i class="icon ms-Icon ms-Icon--Blocked12"></i><span class="text">Tip</span></div><div class="content"><!--[--> Info here... <!--]--></div><div class="control-panel"><!--[--><div class="fv-button light button confirm"><button type="button" class="button-container shadow" style="color:white;background:rgb(var(--fv-error-color));border-width:2px;border-radius:6px;"><span class="content-block" style="font-weight:normal;"><!----><!--[-->Confirm<!--]--></span></button></div><div class="fv-button light button cancel"><button type="button" class="button-container shadow" style="border-width:2px;border-radius:6px;"><span class="content-block" style="font-weight:normal;"><!----><!--[-->Cancel<!--]--></span></button></div><!--]--></div></div><div class="language-vue-html"><span class="copy"></span><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-info-box</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">status</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">blocked</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> @</span><span style="color:#C792EA;">confirm</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">onConfirm</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> @</span><span style="color:#C792EA;">cancel</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">onCancel</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">        Info here...</span></span>
-<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-info-box</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="global-function" tabindex="-1">Global Function <a class="header-anchor" href="#global-function" aria-hidden="true">#</a></h3><ol><li>use setup (recommend)</li></ol><div class="language-vue line-numbers-mode"><span class="copy"></span><pre><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">script</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">lang</span><span style="color:#A6ACCD;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">ts</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">setup</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;">InfoBoxMethod</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">InfoBoxKey</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">InfoBoxParams</span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">@/packages</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">inject</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">vue</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> </span></span>
-<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">useTheme</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">../common/index.js</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> </span></span>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-19c990f1><div class="wrapper" data-v-19c990f1><div class="container" data-v-19c990f1><div class="title" data-v-19c990f1><div class="VPNavBarTitle has-sidebar" data-v-19c990f1 data-v-ab179fa1><a class="title" href="/VFluent3/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>VFluent3</span><!--[--><!--]--></a></div></div><div class="content" data-v-19c990f1><div class="content-body" data-v-19c990f1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-19c990f1><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-19c990f1 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Guide</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-19c990f1 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-19c990f1 data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-19c990f1 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-19c990f1><div class="divider-line" data-v-19c990f1></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-d2ecc192><button data-v-d2ecc192>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-575e6a36><div class="curtain" data-v-575e6a36></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-575e6a36><span class="visually-hidden" id="sidebar-aria-label" data-v-575e6a36> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Basic input</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/button/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/check-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CheckBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/combobox/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Combobox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/details-list/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DetailsList</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drop-down/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DropDown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio-group/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RadioGroup</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/rating-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RatingControl</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/slider/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/toggle-switch/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ToggleSwitch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tag/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Tag</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Collections</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/flip-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>FlipView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/list-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ListView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tree-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TreeView</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Date & Time</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarDatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/time-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TimePicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible has-active" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Dialogs & flyouts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/callout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Callout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Layout</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/collapse/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Collapse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/expander/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Expander</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drawer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Panel</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Media</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/image/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Img</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ImgBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/persona/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Persona</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Menu & toolbars</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/command-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CommandBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/menu-flyout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MenuFlyout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/swipe-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SwipeControl</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Navigation</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/breadcrumb/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationPanel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pivot/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pivot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pagination/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pagination</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Scrolling</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/infinite-scroll-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfiniteScrollView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/scroll-story/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ScrollStory</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Status & info</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/badge/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-ring/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressRing</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Styles</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/animated-icon/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>AnimatedIcon</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/icon-element/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>IconElement</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/reveal-container/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RevealContainer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/shimmer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Shimmer</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Text</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/search-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SearchBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-field/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextField</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/verify-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>VerifyBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Windowing</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/web-window/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>WebWindow</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible has-active" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Global</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Advance</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-935f8a84><div class="content" data-v-935f8a84><div class="outline-marker" data-v-935f8a84></div><div class="outline-title" role="heading" aria-level="2" data-v-935f8a84>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-935f8a84><span class="visually-hidden" id="doc-outline-aria-label" data-v-935f8a84> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-935f8a84 data-v-b933a997><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _VFluent3_guide_components_info-box_" data-v-39a288b8><div><h3 id="infobox-demo" tabindex="-1">InfoBox-DEMO <a class="header-anchor" href="#infobox-demo" aria-label="Permalink to &quot;InfoBox-DEMO&quot;">​</a></h3><hr><p>Default</p><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-InfoBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-InfoBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>Error</p><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-InfoBox</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> status</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;error&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-InfoBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>Blocked</p><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-InfoBox</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> status</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;blocked&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-InfoBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>Correct</p><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-InfoBox</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> status</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;correct&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-InfoBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>Warning</p><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-InfoBox</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> status</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;warning&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-InfoBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>Without TitleBar</p><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-InfoBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">showTitleBar</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-InfoBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="infobox-dark-theme" tabindex="-1">InfoBox-Dark Theme <a class="header-anchor" href="#infobox-dark-theme" aria-label="Permalink to &quot;InfoBox-Dark Theme&quot;">​</a></h3><hr><p>Default</p><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-InfoBox</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;dark&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-InfoBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>Error</p><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-InfoBox</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> status</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;error&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;dark&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-InfoBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>Blocked</p><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-InfoBox</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> status</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;blocked&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;dark&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-InfoBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>Correct</p><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-InfoBox</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> status</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;correct&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;dark&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-InfoBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>Warning</p><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-InfoBox</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> status</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;warning&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;dark&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-InfoBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>Without TitleBar</p><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-InfoBox</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;dark&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">showTitleBar</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-InfoBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="infobox-toast" tabindex="-1">InfoBox-Toast <a class="header-anchor" href="#infobox-toast" aria-label="Permalink to &quot;InfoBox-Toast&quot;">​</a></h3><hr><ol><li>Standard</li></ol><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">200</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> @</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">click</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">show1</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Show InfoBox&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-javascript vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$infoBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;This is a toast info.&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    status: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;correct&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    title: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Toast Info&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    confirm</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">alert</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Confirm&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">); },</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    cancel</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">alert</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Cancel&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">); }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><ol start="2"><li>Customize Message Template</li></ol><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">200</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> @</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">click</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">show2</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Show InfoBox&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-javascript vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$infoBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">h</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;div&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, [</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    h</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;span&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, { class: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;header&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Message&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">),</span></span>
+<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">    &#39;This is a toast info.&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    h</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;a&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        style: {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            fontWeight: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;bold&#39;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    }, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Visit our website.&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]), {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    status: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;correct&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    confirmTitle: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Confirm&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    cancelTitle: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Cancel&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    confirm</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">alert</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Confirm&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">); },</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    cancel</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">alert</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Cancel&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">); }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><ol start="3"><li>Customize Control Panel</li></ol><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">200</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> @</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">click</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">show3</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Show InfoBox&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-javascript vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$infoBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">h</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;div&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, [</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    h</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;span&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, { class: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;header&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Message&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">),</span></span>
+<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">    &#39;This is a toast info.&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    h</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;a&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        style: {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            fontWeight: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;bold&#39;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    }, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Visit our website.&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]), {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    status: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;correct&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    confirmTitle: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Confirm&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    cancelTitle: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Cancel&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    showTitleBar: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    control_panel</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">x</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">    return</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> h</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">resolveComponent</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;fv-button&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">), {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            style: {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                width: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;200px&#39;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            background: x.iconList[</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;correct&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">].backgroundColor,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            theme: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;dark&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">            onClick</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                x.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">confirm</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        }, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Custom Control Button&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    },</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    confirm</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">alert</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Confirm&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">); },</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    cancel</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">alert</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Cancel&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">); }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br></div></div><h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">title</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">Tip</td><td style="text-align:center;"><code>InfoBox</code>窗口标题</td></tr><tr><td style="text-align:center;">status</td><td style="text-align:center;">[&#39;default&#39;,&#39;warning&#39;,&#39;correct&#39;,&#39;blocked&#39;,&#39;error&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">default</td><td style="text-align:center;">显示状态, 一共有5种</td></tr><tr><td style="text-align:center;">mode</td><td style="text-align:center;">[&#39;relative&#39;,&#39;absolute&#39;,&#39;fixed&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">relative</td><td style="text-align:center;">显示定位模式</td></tr><tr><td style="text-align:center;">toast</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">点击按钮后是否采用<code>toast</code>模式</td></tr><tr><td style="text-align:center;">confirmTitle</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">确定</td><td style="text-align:center;">确定按钮标题</td></tr><tr><td style="text-align:center;">cancelTitle</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">取消</td><td style="text-align:center;">取消按钮标题</td></tr><tr><td style="text-align:center;">acrylic</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否开启背景毛玻璃</td></tr><tr><td style="text-align:center;">showTitleBar</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">true</td><td style="text-align:center;">是否显示标题栏</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">system</td><td style="text-align:center;">主题样式, 包含<code>light</code>, <code>dark</code>, <code>system</code>, <code>custom</code>几种样式</td></tr></tbody></table><h3 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to &quot;Events&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">事件名(Name)</th><th style="text-align:center;">参数类型(args)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">confirm</td><td style="text-align:center;"></td><td style="text-align:center;">确认<code>InfoBox</code>时触发事件</td></tr><tr><td style="text-align:center;">close</td><td style="text-align:center;"></td><td style="text-align:center;">取消<code>InfoBox</code>时触发事件</td></tr></tbody></table><h3 id="slot" tabindex="-1">Slot <a class="header-anchor" href="#slot" aria-label="Permalink to &quot;Slot&quot;">​</a></h3><hr><ol><li>Msg</li></ol><ul><li>默认为正常标题</li><li><code>class=&quot;header&quot;</code> 加粗标题</li><li><code>&lt;a&gt;&lt;/a&gt;</code> 链接</li></ul><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">msg</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Normal content &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;header&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Header content&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">a</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Link&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">a</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ol start="2"><li>Control Panel</li></ol><ul><li>confirm: 确认函数</li><li>cancel: 取消函数</li><li>theme: 当前主题</li><li>iconList: 图标列表及颜色数组</li></ul><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">control-panel</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;&#39;dark&#39;&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x.iconList[status].backgroundColor</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">isBoxShadow</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">borderRadius</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">6</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">50</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">35</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">margin-right</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">2.5</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> @</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">click</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x.confirm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Confirm&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x.theme</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">isBoxShadow</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">borderRadius</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">6</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">50</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">35</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">margin-left</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">2.5</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> @</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">click</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x.cancel</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Cancel&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
 <span class="line"></span>
-<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> infoBox </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">inject</span><span style="color:#89DDFF;">&lt;</span><span style="color:#FFCB6B;">InfoBoxMethod</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">(InfoBoxKey)</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">### Toast</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">---</span></span>
 <span class="line"></span>
-<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">useTheme</span><span style="color:#A6ACCD;">()</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">```javascript</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">this.$infoBox(msg, options = {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    title: &#39;Tip&#39;,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    status: &#39;default&#39;,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    mode: &#39;fixed&#39;,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    toast: true,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    confirmTitle: &#39;确定&#39;,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    cancelTitle: &#39;取消&#39;,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    acrylic: false,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    confirm: async () =&gt; {},</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    cancel: async () =&gt; {},</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    control_panel: null,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    theme: &#39;global&#39;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span>
 <span class="line"></span>
-<span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> instance</span><span style="color:#89DDFF;">:</span><span style="color:#FFCB6B;">InfoBoxParams</span><span style="color:#89DDFF;">;</span></span>
-<span class="line"></span>
-<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> onConfirm </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#89DDFF;">(){</span></span>
-<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">instance</span><span style="color:#89DDFF;">!==undefined</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">{</span></span>
-<span class="line"><span style="color:#F07178;">        </span><span style="color:#A6ACCD;">instance</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">close</span><span style="color:#F07178;">()</span></span>
-<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">}</span></span>
-<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">infoBox</span><span style="color:#89DDFF;">!==undefined</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">{</span></span>
-<span class="line"><span style="color:#F07178;">        </span><span style="color:#A6ACCD;">instance</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">infoBox</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
-<span class="line"><span style="color:#F07178;">            title</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">Confirm</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
-<span class="line"><span style="color:#F07178;">            message</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">You click the confirm button</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
-<span class="line"><span style="color:#F07178;">            status</span><span style="color:#89DDFF;">:</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">correct</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
-<span class="line"><span style="color:#F07178;">            theme</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">value</span></span>
-<span class="line"><span style="color:#F07178;">        </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span></span>
-<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">}</span></span>
-<span class="line"><span style="color:#89DDFF;">}</span></span>
-<span class="line"></span>
-<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> onCancel </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#89DDFF;">(){</span></span>
-<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">instance</span><span style="color:#89DDFF;">!==undefined</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">{</span></span>
-<span class="line"><span style="color:#F07178;">        </span><span style="color:#A6ACCD;">instance</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">close</span><span style="color:#F07178;">()</span></span>
-<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">}</span></span>
-<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">infoBox</span><span style="color:#89DDFF;">!==undefined</span><span style="color:#F07178;">)</span></span>
-<span class="line"><span style="color:#F07178;">        </span><span style="color:#A6ACCD;">instance</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">infoBox</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
-<span class="line"><span style="color:#F07178;">            title</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">Cancel</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
-<span class="line"><span style="color:#F07178;">            message</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">You click the cancel button</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
-<span class="line"><span style="color:#F07178;">            status</span><span style="color:#89DDFF;">:</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">blocked</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
-<span class="line"><span style="color:#F07178;">            theme</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">value</span></span>
-<span class="line"><span style="color:#F07178;">        </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span></span>
-<span class="line"><span style="color:#89DDFF;">}</span></span>
-<span class="line"></span>
-<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br></div></div><ol start="2"><li>use options</li></ol><div class="language-vue line-numbers-mode"><span class="copy"></span><pre><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#C792EA;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#89DDFF;">{</span></span>
-<span class="line"><span style="color:#F07178;">    </span><span style="color:#FFCB6B;">methods</span><span style="color:#89DDFF;">:{</span></span>
-<span class="line"><span style="color:#F07178;">        </span><span style="color:#82AAFF;">infoBox</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">{</span></span>
-<span class="line"><span style="color:#F07178;">            </span><span style="color:#89DDFF;">this.</span><span style="color:#82AAFF;">$infoBox</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
-<span class="line"><span style="color:#F07178;">                title</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">Confirm</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
-<span class="line"><span style="color:#F07178;">                message</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">You click the confirm button</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
-<span class="line"><span style="color:#F07178;">                status</span><span style="color:#89DDFF;">:</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">correct</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
-<span class="line"><span style="color:#F07178;">                theme</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">theme</span></span>
-<span class="line"><span style="color:#F07178;">            </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span></span>
-<span class="line"><span style="color:#F07178;">        </span><span style="color:#89DDFF;">}</span></span>
-<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">}</span></span>
-<span class="line"><span style="color:#89DDFF;">}</span></span>
-<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">cancel-title</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;Cancel&#39;</td><td style="text-align:center;">cancel text</td></tr><tr><td style="text-align:center;">confirm-title</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;Confirm&#39;</td><td style="text-align:center;">confirm text</td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">disabled</td></tr><tr><td style="text-align:center;">icon</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">title icon</td></tr><tr><td style="text-align:center;">lang</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">i18n</td></tr><tr><td style="text-align:center;">status</td><td style="text-align:center;">[&#39;info&#39;,&#39;error&#39;,&#39;warning&#39;,&#39;correct&#39;,&#39;blocked&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;info&#39;</td><td style="text-align:center;">status</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">[&#39;light&#39;,&#39;dark&#39;,&#39;global&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">theme</td></tr><tr><td style="text-align:center;">title</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;Tip&#39;</td><td style="text-align:center;">title</td></tr></tbody></table><h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">cancel</td><td style="text-align:center;"></td><td style="text-align:center;">oncancel</td></tr><tr><td style="text-align:center;">confirm</td><td style="text-align:center;"></td><td style="text-align:center;">onconfirm</td></tr></tbody></table></div></div></main><footer class="VPDocFooter" data-v-32b7ddf4 data-v-cfaa3a6c><div class="edit-info" data-v-cfaa3a6c><!----><!----></div><div class="prev-next" data-v-cfaa3a6c><div class="pager" data-v-cfaa3a6c><a class="pager-link prev" href="/VFluent3/guide/components/message-bar/" data-v-cfaa3a6c><span class="desc" data-v-cfaa3a6c>Previous page</span><span class="title" data-v-cfaa3a6c>MessageBar</span></a></div><div class="has-prev pager" data-v-cfaa3a6c><a class="pager-link next" href="/VFluent3/guide/components/color-picker/" data-v-cfaa3a6c><span class="desc" data-v-cfaa3a6c>Next page</span><span class="title" data-v-cfaa3a6c>ColorPicker</span></a></div></div></footer><!--[--><!--]--></div></div></div></div></div><footer class="VPFooter has-sidebar" data-v-058b7495 data-v-a6c8dde4><div class="container" data-v-a6c8dde4><p class="message" data-v-a6c8dde4>MIT Licensed</p><p class="copyright" data-v-a6c8dde4>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
-    <script>__VP_HASH_MAP__ = JSON.parse("{\"guide_components_button_emits.md\":\"d682bf18\",\"guide_components_button_index.md\":\"23a8eb54\",\"guide_components_button_properties.md\":\"cd4004b6\",\"guide_components_check-box_emits.md\":\"31609794\",\"guide_components_check-box_index.md\":\"32046814\",\"guide_components_check-box_properties.md\":\"8f33ac0c\",\"guide_components_color-picker_emits.md\":\"00983cd0\",\"guide_components_color-picker_index.md\":\"b2d62612\",\"guide_components_color-picker_properties.md\":\"5466ba72\",\"guide_components_combo-box_emits.md\":\"d5ffda50\",\"guide_components_combo-box_index.md\":\"1c4364f5\",\"guide_components_combo-box_properties.md\":\"2e1d6060\",\"guide_components_img_emits.md\":\"6237adb4\",\"guide_components_img_index.md\":\"fa51a3a1\",\"guide_components_img_properties.md\":\"8d321b5e\",\"guide_components_info-box_emits.md\":\"c2e71eec\",\"guide_components_info-box_index.md\":\"06175fed\",\"guide_components_info-box_properties.md\":\"314dbb00\",\"guide_components_message-bar_emits.md\":\"e89a5a22\",\"guide_components_message-bar_index.md\":\"3f0b01d6\",\"guide_components_message-bar_properties.md\":\"ee3838d9\",\"guide_components_progress-bar_emits.md\":\"5b611e3b\",\"guide_components_progress-bar_index.md\":\"689c3241\",\"guide_components_progress-bar_properties.md\":\"39af7fb2\",\"guide_components_progress-ring_emits.md\":\"67e4644e\",\"guide_components_progress-ring_index.md\":\"9a33542b\",\"guide_components_progress-ring_properties.md\":\"c897c4bb\",\"guide_components_radio_emits.md\":\"28506857\",\"guide_components_radio_index.md\":\"e5a479ce\",\"guide_components_radio_properties.md\":\"f8e55d2f\",\"guide_components_text-box_emits.md\":\"0bf89ef8\",\"guide_components_text-box_index.md\":\"7ccfc637\",\"guide_components_text-box_properties.md\":\"aab3a89e\",\"guide_components_toggle-switch_emits.md\":\"5146435f\",\"guide_components_toggle-switch_index.md\":\"8be48081\",\"guide_components_toggle-switch_properties.md\":\"54984c3a\",\"guide_index.md\":\"e3dca1d7\",\"index.md\":\"1e9773d5\"}")</script>
-    <script type="module" async src="/VFluent3/assets/app.d60fa8c3.js"></script>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">msg: h() // 传入$createElement函数</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">control_panel: x =&gt; h() // 传入具名插槽属性参数的函数, 函数返回值为$createElement函数</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br></div></div></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-09de1c0f><!--[--><!--]--><!----><nav class="prev-next" data-v-09de1c0f><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link prev" href="/VFluent3/guide/components/callout/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Previous page</span><span class="title" data-v-09de1c0f>Callout</span><!--]--></a></div><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link next" href="/VFluent3/guide/components/collapse/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Next page</span><span class="title" data-v-09de1c0f>Collapse</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>MIT Licensed</p><p class="copyright" data-v-e315a0ad>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_calendar-date-picker_properties.md\":\"DXRjmMG8\",\"guide_components_image_properties.md\":\"DGanRzCb\",\"guide_components_img-box_index.md\":\"DYtggkf_\",\"guide_components_img_emits.md\":\"BlE7jvZQ\",\"guide_components_img_index.md\":\"Bm9FiuU4\",\"guide_components_icon-element_properties.md\":\"8Oakruwc\",\"guide_components_img_properties.md\":\"B42YSocI\",\"guide_components_drawer_index.md\":\"D_vpnCpE\",\"guide_components_verify-box_emits.md\":\"DT17Iazx\",\"guide_components_calendar-date-picker_index.md\":\"BdHjrurh\",\"guide_components_rating-control_index.md\":\"Q9l5Lfrr\",\"guide_components_rating-control_properties.md\":\"DKprnl0i\",\"guide_components_calendar-view_index.md\":\"zdoRYVx1\",\"guide_components_animated-icon_index.md\":\"yZDMzCFe\",\"guide_components_calendar-date-picker_emits.md\":\"D5OkfR8j\",\"guide_components_badge_index.md\":\"Bb4crrJn\",\"guide_components_image_index.md\":\"B7X6cWAZ\",\"guide_components_slider_index.md\":\"C7zZ2d-W\",\"guide_components_radio-group_index.md\":\"CVfh3h5H\",\"guide_components_swipe-control_index.md\":\"DwrDVPc1\",\"guide_components_color-picker_emits.md\":\"BHDXVtBQ\",\"guide_components_radio_index.md\":\"90as5QGp\",\"guide_components_pagination_properties.md\":\"JUAPvcTL\",\"guide_components_persona_properties.md\":\"DUTPhPMp\",\"guide_components_combo-box_emits.md\":\"Dh5R-qEv\",\"guide_components_pivot_emits.md\":\"BTJPgNpy\",\"guide_components_pagination_index.md\":\"CnW2zAht\",\"guide_components_flip-view_properties.md\":\"BqZ4hhgU\",\"guide_components_icon-element_emits.md\":\"D5TXFdTZ\",\"guide_components_flip-view_index.md\":\"DefnDOv6\",\"guide_components_navigation-panel_index.md\":\"6mO__sSK\",\"guide_components_rating-control_emits.md\":\"blvomSeC\",\"guide_components_icon-element_index.md\":\"DQ8K7JNn\",\"guide_components_navigation-view_index.md\":\"4AQRiz1k\",\"guide_components_toggle-switch_emits.md\":\"CLGzrNut\",\"guide_components_toggle-switch_index.md\":\"61en_q9-\",\"guide_components_scroll-story_index.md\":\"Vpgb1HSV\",\"guide_components_reveal-container_index.md\":\"Cut2r4tV\",\"guide_components_search-box_emits.md\":\"-d9sWNNt\",\"guide_components_search-box_properties.md\":\"DEKFfPFw\",\"guide_components_shimmer_emits.md\":\"CTMInlI3\",\"guide_components_tag_index.md\":\"BhhxkcHn\",\"guide_components_search-box_index.md\":\"DgkrY0oY\",\"guide_components_shimmer_index.md\":\"iZlHuTxw\",\"guide_components_shimmer_properties.md\":\"CdkU1o6H\",\"guide_components_tree-view_index.md\":\"CUrwan4q\",\"guide_components_text-field_index.md\":\"CXSimJtj\",\"guide_components_text-box_index.md\":\"C5moAPfB\",\"guide_components_progress-ring_properties.md\":\"Dc08Uiff\",\"guide_components_toggle-switch_properties.md\":\"tFppK_IS\",\"guide_components_radio-group_emits.md\":\"cEDzKVnN\",\"guide_components_collapse_index.md\":\"N9Iu5-2v\",\"guide_components_image_emits.md\":\"lmlz2xJd\",\"guide_components_callout_index.md\":\"D9RU33w6\",\"guide_components_pivot_index.md\":\"B_vwQL-5\",\"guide_components_command-bar_index.md\":\"Cp4_rrGB\",\"guide_components_pagination_emits.md\":\"Dng86A22\",\"guide_components_button_index.md\":\"7sqT2MQP\",\"guide_components_info-box_properties.md\":\"BI7Nvk-E\",\"guide_components_drop-down_emits.md\":\"BE95TdKW\",\"guide_components_expander_index.md\":\"BKgcUJzQ\",\"guide_components_message-bar_index.md\":\"AEtAWlF8\",\"guide_components_menu-flyout_index.md\":\"Csa7irPj\",\"guide_components_panel_index.md\":\"CsTu0bXo\",\"guide_components_panel_properties.md\":\"BaxoCYKq\",\"guide_components_progress-bar_emits.md\":\"BcwXUpsF\",\"guide_components_progress-bar_properties.md\":\"TxiS9ZMA\",\"guide_components_progress-ring_emits.md\":\"D2Y6hIZ9\",\"guide_components_color-picker_index.md\":\"DCc4ixcU\",\"guide_components_progress-ring_index.md\":\"CPb-ZEPE\",\"guide_components_color-picker_properties.md\":\"wcXK29Vl\",\"guide_components_time-picker_index.md\":\"CQJdRRaG\",\"guide_components_drop-down_properties.md\":\"Bwlkpr1q\",\"guide_components_infinite-scroll-view_index.md\":\"yAuD807x\",\"guide_components_check-box_index.md\":\"FYgdu4oq\",\"guide_components_progress-bar_index.md\":\"D8vHQw5V\",\"guide_components_combo-box_index.md\":\"DTyu3eNd\",\"guide_components_info-box_emits.md\":\"DlEwpkkq\",\"guide_components_drop-down_index.md\":\"BZzJZQWq\",\"guide_components_list-view_index.md\":\"BoYvMzb0\",\"guide_components_verify-box_properties.md\":\"CW6W8fFf\",\"guide_components_verify-box_index.md\":\"DwSB40wR\",\"guide_index.md\":\"Bndlt3sL\",\"guide_components_web-window_index.md\":\"Bxc8vEeI\",\"index.md\":\"MTRqI42u\",\"guide_components_combo-box_properties.md\":\"AWfHzV6x\",\"guide_components_combobox_emits.md\":\"CGB6WLt8\",\"guide_components_combobox_properties.md\":\"Bja0hMou\",\"guide_components_details-list_index.md\":\"CcgOCIyt\",\"guide_components_info-box_index.md\":\"vXh-_DsL\",\"guide_components_combobox_index.md\":\"CsPkY6YB\",\"guide_components_date-picker_index.md\":\"12vmUIup\",\"guide_components_flip-view_emits.md\":\"DCheHjDj\",\"guide_components_panel_emits.md\":\"DG0REDq8\",\"guide_components_breadcrumb_index.md\":\"DyDm7PeP\",\"guide_components_radio-group_properties.md\":\"BnPxoKsQ\",\"guide_components_persona_emits.md\":\"CnsDPKRU\",\"guide_components_pivot_properties.md\":\"BmoLpPi1\",\"guide_components_persona_index.md\":\"DT00jby4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vfluent3\",\"description\":\"A Vue3 component library for Fluent UI\",\"base\":\"/VFluent3/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"VFluent3\",\"footer\":{\"message\":\"MIT Licensed\",\"copyright\":\"Copyright © Creator SN - 2022\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/\"}],\"sidebar\":[{\"text\":\"Basic input\",\"collapsed\":true,\"items\":[{\"text\":\"Button\",\"link\":\"/guide/components/button/\"},{\"text\":\"CheckBox\",\"link\":\"/guide/components/check-box/\"},{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"},{\"text\":\"Combobox\",\"link\":\"/guide/components/combobox/\"},{\"text\":\"DetailsList\",\"link\":\"/guide/components/details-list/\"},{\"text\":\"DropDown\",\"link\":\"/guide/components/drop-down/\"},{\"text\":\"Radio\",\"link\":\"/guide/components/radio/\"},{\"text\":\"RadioGroup\",\"link\":\"/guide/components/radio-group/\"},{\"text\":\"RatingControl\",\"link\":\"/guide/components/rating-control/\"},{\"text\":\"Slider\",\"link\":\"/guide/components/slider/\"},{\"text\":\"ToggleSwitch\",\"link\":\"/guide/components/toggle-switch/\"},{\"text\":\"Tag\",\"link\":\"/guide/components/tag/\"}]},{\"text\":\"Collections\",\"collapsed\":true,\"items\":[{\"text\":\"FlipView\",\"link\":\"/guide/components/flip-view/\"},{\"text\":\"ListView\",\"link\":\"/guide/components/list-view/\"},{\"text\":\"TreeView\",\"link\":\"/guide/components/tree-view/\"}]},{\"text\":\"Date & Time\",\"collapsed\":true,\"items\":[{\"text\":\"CalendarDatePicker\",\"link\":\"/guide/components/calendar-date-picker/\"},{\"text\":\"CalendarView\",\"link\":\"/guide/components/calendar-view/\"},{\"text\":\"DatePicker\",\"link\":\"/guide/components/date-picker/\"},{\"text\":\"TimePicker\",\"link\":\"/guide/components/time-picker/\"}]},{\"text\":\"Dialogs & flyouts\",\"collapsed\":true,\"items\":[{\"text\":\"Callout\",\"link\":\"/guide/components/callout/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Layout\",\"collapsed\":true,\"items\":[{\"text\":\"Collapse\",\"link\":\"/guide/components/collapse/\"},{\"text\":\"Expander\",\"link\":\"/guide/components/expander/\"},{\"text\":\"Drawer\",\"link\":\"/guide/components/drawer/\"},{\"text\":\"Panel\",\"link\":\"/guide/components/panel/\"}]},{\"text\":\"Media\",\"collapsed\":true,\"items\":[{\"text\":\"Image\",\"link\":\"/guide/components/image/\"},{\"text\":\"Img\",\"link\":\"/guide/components/img/\"},{\"text\":\"ImgBox\",\"link\":\"/guide/components/img-box/\"},{\"text\":\"Persona\",\"link\":\"/guide/components/persona/\"}]},{\"text\":\"Menu & toolbars\",\"collapsed\":true,\"items\":[{\"text\":\"CommandBar\",\"link\":\"/guide/components/command-bar/\"},{\"text\":\"MenuFlyout\",\"link\":\"/guide/components/menu-flyout/\"},{\"text\":\"SwipeControl\",\"link\":\"/guide/components/swipe-control/\"}]},{\"text\":\"Navigation\",\"collapsed\":true,\"items\":[{\"text\":\"Breadcrumb\",\"link\":\"/guide/components/breadcrumb/\"},{\"text\":\"NavigationPanel\",\"link\":\"/guide/components/navigation-panel/\"},{\"text\":\"NavigationView\",\"link\":\"/guide/components/navigation-view/\"},{\"text\":\"Pivot\",\"link\":\"/guide/components/pivot/\"},{\"text\":\"Pagination\",\"link\":\"/guide/components/pagination/\"}]},{\"text\":\"Scrolling\",\"collapsed\":true,\"items\":[{\"text\":\"InfiniteScrollView\",\"link\":\"/guide/components/infinite-scroll-view/\"},{\"text\":\"ScrollStory\",\"link\":\"/guide/components/scroll-story/\"}]},{\"text\":\"Status & info\",\"collapsed\":true,\"items\":[{\"text\":\"Badge\",\"link\":\"/guide/components/badge/\"},{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"ProgressBar\",\"link\":\"/guide/components/progress-bar/\"},{\"text\":\"ProgressRing\",\"link\":\"/guide/components/progress-ring/\"}]},{\"text\":\"Styles\",\"collapsed\":true,\"items\":[{\"text\":\"AnimatedIcon\",\"link\":\"/guide/components/animated-icon/\"},{\"text\":\"IconElement\",\"link\":\"/guide/components/icon-element/\"},{\"text\":\"RevealContainer\",\"link\":\"/guide/components/reveal-container/\"},{\"text\":\"Shimmer\",\"link\":\"/guide/components/shimmer/\"}]},{\"text\":\"Text\",\"collapsed\":true,\"items\":[{\"text\":\"SearchBox\",\"link\":\"/guide/components/search-box/\"},{\"text\":\"TextBox\",\"link\":\"/guide/components/text-box/\"},{\"text\":\"TextField\",\"link\":\"/guide/components/text-field/\"},{\"text\":\"VerifyBox\",\"link\":\"/guide/components/verify-box/\"}]},{\"text\":\"Windowing\",\"collapsed\":true,\"items\":[{\"text\":\"WebWindow\",\"link\":\"/guide/components/web-window/\"}]},{\"text\":\"Global\",\"collapsed\":true,\"items\":[{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Advance\",\"collapsed\":true,\"items\":[{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
     
   </body>
 </html>
\ No newline at end of file
diff --git a/guide/components/info-box/properties.html b/guide/components/info-box/properties.html
index 7656afe..7e4e923 100644
--- a/guide/components/info-box/properties.html
+++ b/guide/components/info-box/properties.html
@@ -1,20 +1,24 @@
 <!DOCTYPE html>
-<html lang="en-US">
+<html lang="en-US" dir="ltr">
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>Properties | vfluent3</title>
+    <title>vfluent3</title>
     <meta name="description" content="A Vue3 component library for Fluent UI">
-    <link rel="stylesheet" href="/VFluent3/assets/style.0a1d87af.css">
-    <link rel="modulepreload" href="/VFluent3/assets/app.d60fa8c3.js">
-    <link rel="modulepreload" href="/VFluent3/assets/guide_components_info-box_properties.md.314dbb00.lean.js">
+    <meta name="generator" content="VitePress v1.0.0-rc.45">
+    <link rel="preload stylesheet" href="/VFluent3/assets/style.BabQegKX.css" as="style">
     
-    <script>(()=>{const e=localStorage.getItem("vitepress-theme-appearance"),a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script type="module" src="/VFluent3/assets/app.CSutcJ2E.js"></script>
+    <link rel="preload" href="/VFluent3/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/framework.DvIFzl91.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/theme.CgqFBnN_.js">
+    <link rel="modulepreload" href="/VFluent3/assets/guide_components_info-box_properties.md.BI7Nvk-E.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
   </head>
   <body>
-    <div id="app"><div class="Layout" data-v-058b7495><!--[--><!--]--><!--[--><span tabindex="-1" data-v-bea91388></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-bea91388> Skip to content </a><!--]--><!----><header class="VPNav" data-v-058b7495 data-v-2a0a2738><div class="VPNavBar has-sidebar" data-v-2a0a2738 data-v-45c9f423><div class="container" data-v-45c9f423><div class="VPNavBarTitle has-sidebar" data-v-45c9f423 data-v-011600ce><a class="title" href="/VFluent3/" data-v-011600ce><!----><!--[-->VFluent3<!--]--></a></div><div class="content" data-v-45c9f423><!----><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-45c9f423 data-v-4da4371d><span id="main-nav-aria-label" class="visually-hidden" data-v-4da4371d>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" data-v-4da4371d data-v-66f8d518 data-v-4d08dd3a><!--[-->Home<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" data-v-4da4371d data-v-66f8d518 data-v-4d08dd3a><!--[-->Guide<!--]--><!----></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-45c9f423 data-v-bf1c94ca><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" data-v-bf1c94ca data-v-d0ee0df2 data-v-55b931a0><span class="check" data-v-55b931a0><span class="icon" data-v-55b931a0><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-d0ee0df2><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-d0ee0df2><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-45c9f423 data-v-7cece6ac data-v-37af1650><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-37af1650><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-37af1650><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-37af1650><div class="VPMenu" data-v-37af1650 data-v-17dc081b><!----><!--[--><!--[--><!----><div class="group" data-v-7cece6ac><div class="item appearance" data-v-7cece6ac><p class="label" data-v-7cece6ac>Appearance</p><div class="appearance-action" data-v-7cece6ac><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" data-v-7cece6ac data-v-d0ee0df2 data-v-55b931a0><span class="check" data-v-55b931a0><span class="icon" data-v-55b931a0><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-d0ee0df2><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-d0ee0df2><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-45c9f423 data-v-5484e669><span class="container" data-v-5484e669><span class="top" data-v-5484e669></span><span class="middle" data-v-5484e669></span><span class="bottom" data-v-5484e669></span></span></button></div></div></div><!----></header><div class="VPLocalNav" data-v-058b7495 data-v-f623cd72><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-f623cd72><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-f623cd72><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-f623cd72>Menu</span></button><a class="top-link" href="#" data-v-f623cd72> Return to top </a></div><aside class="VPSidebar" data-v-058b7495 data-v-3b8ec0c7><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-3b8ec0c7><span class="visually-hidden" id="sidebar-aria-label" data-v-3b8ec0c7> Sidebar Navigation </span><!--[--><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Basic</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/button/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Button</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/check-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>CheckBox</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/radio/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Radio</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/progress-bar/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ProgressBar</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/progress-ring/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ProgressRing</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/toggle-switch/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ToggleSwitch</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/img/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Img</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/text-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>TextBox</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/combo-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ComboBox</span><!--]--><!----></a><!--]--></div></section></div><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Global</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/message-bar/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>MessageBar</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/info-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>InfoBox</span><!--]--><!----></a><!--]--></div></section></div><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Advance</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/color-picker/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ColorPicker</span><!--]--><!----></a><!--]--></div></section></div><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-058b7495 data-v-564173e9><div class="VPDoc has-sidebar" data-v-564173e9 data-v-32b7ddf4><div class="container" data-v-32b7ddf4><div class="aside" data-v-32b7ddf4><div class="aside-curtain" data-v-32b7ddf4></div><div class="aside-container" data-v-32b7ddf4><div class="aside-content" data-v-32b7ddf4><div class="VPDocAside" data-v-32b7ddf4 data-v-35c1bae1><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline has-outline" data-v-35c1bae1 data-v-123cce62><div class="content" data-v-123cce62><div class="outline-marker" data-v-123cce62></div><div class="outline-title" data-v-123cce62>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-123cce62><span class="visually-hidden" id="doc-outline-aria-label" data-v-123cce62> Table of Contents for current page </span><ul class="root" data-v-123cce62><!--[--><li style="" data-v-123cce62><a class="outline-link" href="#properties" data-v-123cce62>Properties</a><!----></li><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-35c1bae1></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-32b7ddf4><div class="content-container" data-v-32b7ddf4><!--[--><!--]--><main class="main" data-v-32b7ddf4><div style="position:relative;" class="vp-doc _VFluent3_guide_components_info-box_properties" data-v-32b7ddf4><div><h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">cancel-title</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;Cancel&#39;</td><td style="text-align:center;">cancel text</td></tr><tr><td style="text-align:center;">confirm-title</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;Confirm&#39;</td><td style="text-align:center;">confirm text</td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">disabled</td></tr><tr><td style="text-align:center;">icon</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">title icon</td></tr><tr><td style="text-align:center;">lang</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">i18n</td></tr><tr><td style="text-align:center;">status</td><td style="text-align:center;">[&#39;info&#39;,&#39;error&#39;,&#39;warning&#39;,&#39;correct&#39;,&#39;blocked&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;info&#39;</td><td style="text-align:center;">status</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">[&#39;light&#39;,&#39;dark&#39;,&#39;global&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">theme</td></tr><tr><td style="text-align:center;">title</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;Tip&#39;</td><td style="text-align:center;">title</td></tr></tbody></table></div></div></main><footer class="VPDocFooter" data-v-32b7ddf4 data-v-cfaa3a6c><div class="edit-info" data-v-cfaa3a6c><!----><!----></div><div class="prev-next" data-v-cfaa3a6c><div class="pager" data-v-cfaa3a6c><!----></div><div class="pager" data-v-cfaa3a6c><a class="pager-link next" href="/VFluent3/guide/components/button/" data-v-cfaa3a6c><span class="desc" data-v-cfaa3a6c>Next page</span><span class="title" data-v-cfaa3a6c>Button</span></a></div></div></footer><!--[--><!--]--></div></div></div></div></div><footer class="VPFooter has-sidebar" data-v-058b7495 data-v-a6c8dde4><div class="container" data-v-a6c8dde4><p class="message" data-v-a6c8dde4>MIT Licensed</p><p class="copyright" data-v-a6c8dde4>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
-    <script>__VP_HASH_MAP__ = JSON.parse("{\"guide_components_button_emits.md\":\"d682bf18\",\"guide_components_button_index.md\":\"23a8eb54\",\"guide_components_button_properties.md\":\"cd4004b6\",\"guide_components_check-box_emits.md\":\"31609794\",\"guide_components_check-box_index.md\":\"32046814\",\"guide_components_check-box_properties.md\":\"8f33ac0c\",\"guide_components_color-picker_emits.md\":\"00983cd0\",\"guide_components_color-picker_index.md\":\"b2d62612\",\"guide_components_color-picker_properties.md\":\"5466ba72\",\"guide_components_combo-box_emits.md\":\"d5ffda50\",\"guide_components_combo-box_index.md\":\"1c4364f5\",\"guide_components_combo-box_properties.md\":\"2e1d6060\",\"guide_components_img_emits.md\":\"6237adb4\",\"guide_components_img_index.md\":\"fa51a3a1\",\"guide_components_img_properties.md\":\"8d321b5e\",\"guide_components_info-box_emits.md\":\"c2e71eec\",\"guide_components_info-box_index.md\":\"06175fed\",\"guide_components_info-box_properties.md\":\"314dbb00\",\"guide_components_message-bar_emits.md\":\"e89a5a22\",\"guide_components_message-bar_index.md\":\"3f0b01d6\",\"guide_components_message-bar_properties.md\":\"ee3838d9\",\"guide_components_progress-bar_emits.md\":\"5b611e3b\",\"guide_components_progress-bar_index.md\":\"689c3241\",\"guide_components_progress-bar_properties.md\":\"39af7fb2\",\"guide_components_progress-ring_emits.md\":\"67e4644e\",\"guide_components_progress-ring_index.md\":\"9a33542b\",\"guide_components_progress-ring_properties.md\":\"c897c4bb\",\"guide_components_radio_emits.md\":\"28506857\",\"guide_components_radio_index.md\":\"e5a479ce\",\"guide_components_radio_properties.md\":\"f8e55d2f\",\"guide_components_text-box_emits.md\":\"0bf89ef8\",\"guide_components_text-box_index.md\":\"7ccfc637\",\"guide_components_text-box_properties.md\":\"aab3a89e\",\"guide_components_toggle-switch_emits.md\":\"5146435f\",\"guide_components_toggle-switch_index.md\":\"8be48081\",\"guide_components_toggle-switch_properties.md\":\"54984c3a\",\"guide_index.md\":\"e3dca1d7\",\"index.md\":\"1e9773d5\"}")</script>
-    <script type="module" async src="/VFluent3/assets/app.d60fa8c3.js"></script>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-19c990f1><div class="wrapper" data-v-19c990f1><div class="container" data-v-19c990f1><div class="title" data-v-19c990f1><div class="VPNavBarTitle has-sidebar" data-v-19c990f1 data-v-ab179fa1><a class="title" href="/VFluent3/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>VFluent3</span><!--[--><!--]--></a></div></div><div class="content" data-v-19c990f1><div class="content-body" data-v-19c990f1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-19c990f1><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-19c990f1 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Guide</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-19c990f1 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-19c990f1 data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-19c990f1 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-19c990f1><div class="divider-line" data-v-19c990f1></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-d2ecc192><button data-v-d2ecc192>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-575e6a36><div class="curtain" data-v-575e6a36></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-575e6a36><span class="visually-hidden" id="sidebar-aria-label" data-v-575e6a36> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Basic input</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/button/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/check-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CheckBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/combobox/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Combobox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/details-list/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DetailsList</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drop-down/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DropDown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio-group/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RadioGroup</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/rating-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RatingControl</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/slider/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/toggle-switch/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ToggleSwitch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tag/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Tag</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Collections</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/flip-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>FlipView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/list-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ListView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tree-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TreeView</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Date & Time</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarDatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/time-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TimePicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Dialogs & flyouts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/callout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Callout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Layout</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/collapse/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Collapse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/expander/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Expander</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drawer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Panel</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Media</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/image/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Img</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ImgBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/persona/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Persona</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Menu & toolbars</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/command-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CommandBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/menu-flyout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MenuFlyout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/swipe-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SwipeControl</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Navigation</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/breadcrumb/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationPanel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pivot/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pivot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pagination/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pagination</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Scrolling</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/infinite-scroll-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfiniteScrollView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/scroll-story/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ScrollStory</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Status & info</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/badge/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-ring/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressRing</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Styles</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/animated-icon/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>AnimatedIcon</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/icon-element/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>IconElement</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/reveal-container/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RevealContainer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/shimmer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Shimmer</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Text</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/search-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SearchBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-field/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextField</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/verify-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>VerifyBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Windowing</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/web-window/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>WebWindow</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Global</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Advance</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-935f8a84><div class="content" data-v-935f8a84><div class="outline-marker" data-v-935f8a84></div><div class="outline-title" role="heading" aria-level="2" data-v-935f8a84>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-935f8a84><span class="visually-hidden" id="doc-outline-aria-label" data-v-935f8a84> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-935f8a84 data-v-b933a997><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _VFluent3_guide_components_info-box_properties" data-v-39a288b8><div><h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-label="Permalink to &quot;Properties&quot;">​</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead></table></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-09de1c0f><!--[--><!--]--><!----><nav class="prev-next" data-v-09de1c0f><div class="pager" data-v-09de1c0f><!----></div><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link next" href="/VFluent3/guide/components/button/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Next page</span><span class="title" data-v-09de1c0f>Button</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>MIT Licensed</p><p class="copyright" data-v-e315a0ad>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_calendar-date-picker_properties.md\":\"DXRjmMG8\",\"guide_components_image_properties.md\":\"DGanRzCb\",\"guide_components_img-box_index.md\":\"DYtggkf_\",\"guide_components_img_emits.md\":\"BlE7jvZQ\",\"guide_components_img_index.md\":\"Bm9FiuU4\",\"guide_components_icon-element_properties.md\":\"8Oakruwc\",\"guide_components_img_properties.md\":\"B42YSocI\",\"guide_components_drawer_index.md\":\"D_vpnCpE\",\"guide_components_verify-box_emits.md\":\"DT17Iazx\",\"guide_components_calendar-date-picker_index.md\":\"BdHjrurh\",\"guide_components_rating-control_index.md\":\"Q9l5Lfrr\",\"guide_components_rating-control_properties.md\":\"DKprnl0i\",\"guide_components_calendar-view_index.md\":\"zdoRYVx1\",\"guide_components_animated-icon_index.md\":\"yZDMzCFe\",\"guide_components_calendar-date-picker_emits.md\":\"D5OkfR8j\",\"guide_components_badge_index.md\":\"Bb4crrJn\",\"guide_components_image_index.md\":\"B7X6cWAZ\",\"guide_components_slider_index.md\":\"C7zZ2d-W\",\"guide_components_radio-group_index.md\":\"CVfh3h5H\",\"guide_components_swipe-control_index.md\":\"DwrDVPc1\",\"guide_components_color-picker_emits.md\":\"BHDXVtBQ\",\"guide_components_radio_index.md\":\"90as5QGp\",\"guide_components_pagination_properties.md\":\"JUAPvcTL\",\"guide_components_persona_properties.md\":\"DUTPhPMp\",\"guide_components_combo-box_emits.md\":\"Dh5R-qEv\",\"guide_components_pivot_emits.md\":\"BTJPgNpy\",\"guide_components_pagination_index.md\":\"CnW2zAht\",\"guide_components_flip-view_properties.md\":\"BqZ4hhgU\",\"guide_components_icon-element_emits.md\":\"D5TXFdTZ\",\"guide_components_flip-view_index.md\":\"DefnDOv6\",\"guide_components_navigation-panel_index.md\":\"6mO__sSK\",\"guide_components_rating-control_emits.md\":\"blvomSeC\",\"guide_components_icon-element_index.md\":\"DQ8K7JNn\",\"guide_components_navigation-view_index.md\":\"4AQRiz1k\",\"guide_components_toggle-switch_emits.md\":\"CLGzrNut\",\"guide_components_toggle-switch_index.md\":\"61en_q9-\",\"guide_components_scroll-story_index.md\":\"Vpgb1HSV\",\"guide_components_reveal-container_index.md\":\"Cut2r4tV\",\"guide_components_search-box_emits.md\":\"-d9sWNNt\",\"guide_components_search-box_properties.md\":\"DEKFfPFw\",\"guide_components_shimmer_emits.md\":\"CTMInlI3\",\"guide_components_tag_index.md\":\"BhhxkcHn\",\"guide_components_search-box_index.md\":\"DgkrY0oY\",\"guide_components_shimmer_index.md\":\"iZlHuTxw\",\"guide_components_shimmer_properties.md\":\"CdkU1o6H\",\"guide_components_tree-view_index.md\":\"CUrwan4q\",\"guide_components_text-field_index.md\":\"CXSimJtj\",\"guide_components_text-box_index.md\":\"C5moAPfB\",\"guide_components_progress-ring_properties.md\":\"Dc08Uiff\",\"guide_components_toggle-switch_properties.md\":\"tFppK_IS\",\"guide_components_radio-group_emits.md\":\"cEDzKVnN\",\"guide_components_collapse_index.md\":\"N9Iu5-2v\",\"guide_components_image_emits.md\":\"lmlz2xJd\",\"guide_components_callout_index.md\":\"D9RU33w6\",\"guide_components_pivot_index.md\":\"B_vwQL-5\",\"guide_components_command-bar_index.md\":\"Cp4_rrGB\",\"guide_components_pagination_emits.md\":\"Dng86A22\",\"guide_components_button_index.md\":\"7sqT2MQP\",\"guide_components_info-box_properties.md\":\"BI7Nvk-E\",\"guide_components_drop-down_emits.md\":\"BE95TdKW\",\"guide_components_expander_index.md\":\"BKgcUJzQ\",\"guide_components_message-bar_index.md\":\"AEtAWlF8\",\"guide_components_menu-flyout_index.md\":\"Csa7irPj\",\"guide_components_panel_index.md\":\"CsTu0bXo\",\"guide_components_panel_properties.md\":\"BaxoCYKq\",\"guide_components_progress-bar_emits.md\":\"BcwXUpsF\",\"guide_components_progress-bar_properties.md\":\"TxiS9ZMA\",\"guide_components_progress-ring_emits.md\":\"D2Y6hIZ9\",\"guide_components_color-picker_index.md\":\"DCc4ixcU\",\"guide_components_progress-ring_index.md\":\"CPb-ZEPE\",\"guide_components_color-picker_properties.md\":\"wcXK29Vl\",\"guide_components_time-picker_index.md\":\"CQJdRRaG\",\"guide_components_drop-down_properties.md\":\"Bwlkpr1q\",\"guide_components_infinite-scroll-view_index.md\":\"yAuD807x\",\"guide_components_check-box_index.md\":\"FYgdu4oq\",\"guide_components_progress-bar_index.md\":\"D8vHQw5V\",\"guide_components_combo-box_index.md\":\"DTyu3eNd\",\"guide_components_info-box_emits.md\":\"DlEwpkkq\",\"guide_components_drop-down_index.md\":\"BZzJZQWq\",\"guide_components_list-view_index.md\":\"BoYvMzb0\",\"guide_components_verify-box_properties.md\":\"CW6W8fFf\",\"guide_components_verify-box_index.md\":\"DwSB40wR\",\"guide_index.md\":\"Bndlt3sL\",\"guide_components_web-window_index.md\":\"Bxc8vEeI\",\"index.md\":\"MTRqI42u\",\"guide_components_combo-box_properties.md\":\"AWfHzV6x\",\"guide_components_combobox_emits.md\":\"CGB6WLt8\",\"guide_components_combobox_properties.md\":\"Bja0hMou\",\"guide_components_details-list_index.md\":\"CcgOCIyt\",\"guide_components_info-box_index.md\":\"vXh-_DsL\",\"guide_components_combobox_index.md\":\"CsPkY6YB\",\"guide_components_date-picker_index.md\":\"12vmUIup\",\"guide_components_flip-view_emits.md\":\"DCheHjDj\",\"guide_components_panel_emits.md\":\"DG0REDq8\",\"guide_components_breadcrumb_index.md\":\"DyDm7PeP\",\"guide_components_radio-group_properties.md\":\"BnPxoKsQ\",\"guide_components_persona_emits.md\":\"CnsDPKRU\",\"guide_components_pivot_properties.md\":\"BmoLpPi1\",\"guide_components_persona_index.md\":\"DT00jby4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vfluent3\",\"description\":\"A Vue3 component library for Fluent UI\",\"base\":\"/VFluent3/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"VFluent3\",\"footer\":{\"message\":\"MIT Licensed\",\"copyright\":\"Copyright © Creator SN - 2022\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/\"}],\"sidebar\":[{\"text\":\"Basic input\",\"collapsed\":true,\"items\":[{\"text\":\"Button\",\"link\":\"/guide/components/button/\"},{\"text\":\"CheckBox\",\"link\":\"/guide/components/check-box/\"},{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"},{\"text\":\"Combobox\",\"link\":\"/guide/components/combobox/\"},{\"text\":\"DetailsList\",\"link\":\"/guide/components/details-list/\"},{\"text\":\"DropDown\",\"link\":\"/guide/components/drop-down/\"},{\"text\":\"Radio\",\"link\":\"/guide/components/radio/\"},{\"text\":\"RadioGroup\",\"link\":\"/guide/components/radio-group/\"},{\"text\":\"RatingControl\",\"link\":\"/guide/components/rating-control/\"},{\"text\":\"Slider\",\"link\":\"/guide/components/slider/\"},{\"text\":\"ToggleSwitch\",\"link\":\"/guide/components/toggle-switch/\"},{\"text\":\"Tag\",\"link\":\"/guide/components/tag/\"}]},{\"text\":\"Collections\",\"collapsed\":true,\"items\":[{\"text\":\"FlipView\",\"link\":\"/guide/components/flip-view/\"},{\"text\":\"ListView\",\"link\":\"/guide/components/list-view/\"},{\"text\":\"TreeView\",\"link\":\"/guide/components/tree-view/\"}]},{\"text\":\"Date & Time\",\"collapsed\":true,\"items\":[{\"text\":\"CalendarDatePicker\",\"link\":\"/guide/components/calendar-date-picker/\"},{\"text\":\"CalendarView\",\"link\":\"/guide/components/calendar-view/\"},{\"text\":\"DatePicker\",\"link\":\"/guide/components/date-picker/\"},{\"text\":\"TimePicker\",\"link\":\"/guide/components/time-picker/\"}]},{\"text\":\"Dialogs & flyouts\",\"collapsed\":true,\"items\":[{\"text\":\"Callout\",\"link\":\"/guide/components/callout/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Layout\",\"collapsed\":true,\"items\":[{\"text\":\"Collapse\",\"link\":\"/guide/components/collapse/\"},{\"text\":\"Expander\",\"link\":\"/guide/components/expander/\"},{\"text\":\"Drawer\",\"link\":\"/guide/components/drawer/\"},{\"text\":\"Panel\",\"link\":\"/guide/components/panel/\"}]},{\"text\":\"Media\",\"collapsed\":true,\"items\":[{\"text\":\"Image\",\"link\":\"/guide/components/image/\"},{\"text\":\"Img\",\"link\":\"/guide/components/img/\"},{\"text\":\"ImgBox\",\"link\":\"/guide/components/img-box/\"},{\"text\":\"Persona\",\"link\":\"/guide/components/persona/\"}]},{\"text\":\"Menu & toolbars\",\"collapsed\":true,\"items\":[{\"text\":\"CommandBar\",\"link\":\"/guide/components/command-bar/\"},{\"text\":\"MenuFlyout\",\"link\":\"/guide/components/menu-flyout/\"},{\"text\":\"SwipeControl\",\"link\":\"/guide/components/swipe-control/\"}]},{\"text\":\"Navigation\",\"collapsed\":true,\"items\":[{\"text\":\"Breadcrumb\",\"link\":\"/guide/components/breadcrumb/\"},{\"text\":\"NavigationPanel\",\"link\":\"/guide/components/navigation-panel/\"},{\"text\":\"NavigationView\",\"link\":\"/guide/components/navigation-view/\"},{\"text\":\"Pivot\",\"link\":\"/guide/components/pivot/\"},{\"text\":\"Pagination\",\"link\":\"/guide/components/pagination/\"}]},{\"text\":\"Scrolling\",\"collapsed\":true,\"items\":[{\"text\":\"InfiniteScrollView\",\"link\":\"/guide/components/infinite-scroll-view/\"},{\"text\":\"ScrollStory\",\"link\":\"/guide/components/scroll-story/\"}]},{\"text\":\"Status & info\",\"collapsed\":true,\"items\":[{\"text\":\"Badge\",\"link\":\"/guide/components/badge/\"},{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"ProgressBar\",\"link\":\"/guide/components/progress-bar/\"},{\"text\":\"ProgressRing\",\"link\":\"/guide/components/progress-ring/\"}]},{\"text\":\"Styles\",\"collapsed\":true,\"items\":[{\"text\":\"AnimatedIcon\",\"link\":\"/guide/components/animated-icon/\"},{\"text\":\"IconElement\",\"link\":\"/guide/components/icon-element/\"},{\"text\":\"RevealContainer\",\"link\":\"/guide/components/reveal-container/\"},{\"text\":\"Shimmer\",\"link\":\"/guide/components/shimmer/\"}]},{\"text\":\"Text\",\"collapsed\":true,\"items\":[{\"text\":\"SearchBox\",\"link\":\"/guide/components/search-box/\"},{\"text\":\"TextBox\",\"link\":\"/guide/components/text-box/\"},{\"text\":\"TextField\",\"link\":\"/guide/components/text-field/\"},{\"text\":\"VerifyBox\",\"link\":\"/guide/components/verify-box/\"}]},{\"text\":\"Windowing\",\"collapsed\":true,\"items\":[{\"text\":\"WebWindow\",\"link\":\"/guide/components/web-window/\"}]},{\"text\":\"Global\",\"collapsed\":true,\"items\":[{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Advance\",\"collapsed\":true,\"items\":[{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
     
   </body>
 </html>
\ No newline at end of file
diff --git a/guide/components/list-view/index.html b/guide/components/list-view/index.html
new file mode 100644
index 0000000..5929f61
--- /dev/null
+++ b/guide/components/list-view/index.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>ListView | vfluent3</title>
+    <meta name="description" content="A Vue3 component library for Fluent UI">
+    <meta name="generator" content="VitePress v1.0.0-rc.45">
+    <link rel="preload stylesheet" href="/VFluent3/assets/style.BabQegKX.css" as="style">
+    
+    <script type="module" src="/VFluent3/assets/app.CSutcJ2E.js"></script>
+    <link rel="preload" href="/VFluent3/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/framework.DvIFzl91.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/theme.CgqFBnN_.js">
+    <link rel="modulepreload" href="/VFluent3/assets/guide_components_list-view_index.md.BoYvMzb0.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-19c990f1><div class="wrapper" data-v-19c990f1><div class="container" data-v-19c990f1><div class="title" data-v-19c990f1><div class="VPNavBarTitle has-sidebar" data-v-19c990f1 data-v-ab179fa1><a class="title" href="/VFluent3/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>VFluent3</span><!--[--><!--]--></a></div></div><div class="content" data-v-19c990f1><div class="content-body" data-v-19c990f1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-19c990f1><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-19c990f1 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Guide</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-19c990f1 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-19c990f1 data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-19c990f1 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-19c990f1><div class="divider-line" data-v-19c990f1></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-d2ecc192><button data-v-d2ecc192>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-575e6a36><div class="curtain" data-v-575e6a36></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-575e6a36><span class="visually-hidden" id="sidebar-aria-label" data-v-575e6a36> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Basic input</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/button/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/check-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CheckBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/combobox/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Combobox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/details-list/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DetailsList</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drop-down/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DropDown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio-group/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RadioGroup</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/rating-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RatingControl</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/slider/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/toggle-switch/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ToggleSwitch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tag/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Tag</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible has-active" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Collections</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/flip-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>FlipView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/list-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ListView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tree-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TreeView</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Date & Time</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarDatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/time-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TimePicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Dialogs & flyouts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/callout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Callout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Layout</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/collapse/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Collapse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/expander/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Expander</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drawer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Panel</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Media</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/image/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Img</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ImgBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/persona/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Persona</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Menu & toolbars</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/command-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CommandBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/menu-flyout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MenuFlyout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/swipe-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SwipeControl</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Navigation</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/breadcrumb/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationPanel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pivot/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pivot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pagination/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pagination</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Scrolling</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/infinite-scroll-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfiniteScrollView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/scroll-story/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ScrollStory</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Status & info</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/badge/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-ring/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressRing</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Styles</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/animated-icon/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>AnimatedIcon</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/icon-element/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>IconElement</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/reveal-container/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RevealContainer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/shimmer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Shimmer</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Text</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/search-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SearchBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-field/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextField</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/verify-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>VerifyBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Windowing</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/web-window/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>WebWindow</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Global</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Advance</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-935f8a84><div class="content" data-v-935f8a84><div class="outline-marker" data-v-935f8a84></div><div class="outline-title" role="heading" aria-level="2" data-v-935f8a84>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-935f8a84><span class="visually-hidden" id="doc-outline-aria-label" data-v-935f8a84> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-935f8a84 data-v-b933a997><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _VFluent3_guide_components_list-view_" data-v-39a288b8><div><h3 id="listview-demo" tabindex="-1">ListView-DEMO <a class="header-anchor" href="#listview-demo" aria-label="Permalink to &quot;ListView-DEMO&quot;">​</a></h3><hr><div style="width:100%;height:500px;padding:15px;"><!----></div><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">500</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">padding</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">15</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;fv-ListView v-model=&quot;items&quot; :showSlider=&quot;true&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/fv-ListView&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h3 id="listview-multiple" tabindex="-1">ListView-Multiple <a class="header-anchor" href="#listview-multiple" aria-label="Permalink to &quot;ListView-Multiple&quot;">​</a></h3><hr><div style="width:100%;height:500px;padding:15px;"><!----></div><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">500</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">padding</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">15</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;fv-ListView v-model=&quot;items&quot; :multiple=&quot;true&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/fv-ListView&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h3 id="listview-dark-theme" tabindex="-1">ListView-Dark Theme <a class="header-anchor" href="#listview-dark-theme" aria-label="Permalink to &quot;ListView-Dark Theme&quot;">​</a></h3><hr><div style="width:100%;height:500px;padding:15px;background:black;"><!----></div><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">500</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">padding</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">15</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">black</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;fv-ListView v-model=&quot;items&quot; theme=&quot;dark&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/fv-ListView&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h3 id="listview-custom-choosen-background" tabindex="-1">ListView-Custom Choosen Background <a class="header-anchor" href="#listview-custom-choosen-background" aria-label="Permalink to &quot;ListView-Custom Choosen Background&quot;">​</a></h3><hr><div style="width:100%;height:500px;padding:15px;background:black;"><!----></div><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">500</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">padding</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">15</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">black</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;fv-ListView v-model=&quot;items&quot; theme=&quot;dark&quot; choosenBackground=&quot;rgba(0, 204, 153, 0.6)&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/fv-ListView&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">value</td><td style="text-align:center;">Array</td><td style="text-align:center;">Yes</td><td style="text-align:center;">N/A</td><td style="text-align:center;">ListView数据绑定</td></tr><tr><td style="text-align:center;">choosen</td><td style="text-align:center;">Array</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">外部设置ListView选中项</td></tr><tr><td style="text-align:center;">multiple</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否开启多选</td></tr><tr><td style="text-align:center;">rowHeight</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">每一项高度</td></tr><tr><td style="text-align:center;">headerForeground</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">标题前景色</td></tr><tr><td style="text-align:center;">choosenBackground</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">选中项背景色</td></tr><tr><td style="text-align:center;">itemPadding</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">每一项的<code>padding</code>值</td></tr><tr><td style="text-align:center;">itemBorderRadius</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">每一项的边框圆角</td></tr><tr><td style="text-align:center;">revealBorderColor</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">Reveal边框颜色</td></tr><tr><td style="text-align:center;">revealBackgroundColor</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">Reveal背景颜色</td></tr><tr><td style="text-align:center;">showSlider</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否显示选中项滑动条</td></tr><tr><td style="text-align:center;">sliderTarget</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">修改滑动条绑定元素, 可通过<code>sync</code>方法同步, 注意元素需要存在于<code>ListView</code>中</td></tr><tr><td style="text-align:center;">sliderIndex</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">修改滑动条绑定元素索引, 可通过<code>sync</code>方法同步</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">system</td><td style="text-align:center;">主题样式, 包含<code>light</code>, <code>dark</code>, <code>system</code>, <code>custom</code>几种样式</td></tr></tbody></table><h3 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to &quot;Events&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">事件名(Name)</th><th style="text-align:center;">参数类型(args)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">item-click</td><td style="text-align:center;">object</td><td style="text-align:center;">选中项点击后返回选项</td></tr><tr><td style="text-align:center;">chooseItem</td><td style="text-align:center;">object</td><td style="text-align:center;">选中项点击后返回选项</td></tr><tr><td style="text-align:center;">choosen-items</td><td style="text-align:center;">array</td><td style="text-align:center;">选中项点击后返回所有被选中项</td></tr><tr><td style="text-align:center;">selection-change</td><td style="text-align:center;">object</td><td style="text-align:center;">光标选择某一项后返回选中项</td></tr><tr><td style="text-align:center;">item-drag-over</td><td style="text-align:center;">{root, drop}</td><td style="text-align:center;">当前项被放置进入</td></tr><tr><td style="text-align:center;">item-drag-leave</td><td style="text-align:center;">{root, drop}</td><td style="text-align:center;">当前项被放置离开</td></tr><tr><td style="text-align:center;">item-drop</td><td style="text-align:center;">{root, drop}</td><td style="text-align:center;">当前项被放置</td></tr></tbody></table><h3 id="slot" tabindex="-1">Slot <a class="header-anchor" href="#slot" aria-label="Permalink to &quot;Slot&quot;">​</a></h3><hr><ol><li>ListItem</li></ol><p>默认以value中每一项的属性name作为默认显示, 包含以下可选属性</p><ul><li>item: 当前项</li><li>index: 当前项索引</li></ul><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">listItem</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ol start="2"><li>Header</li></ol><p>ListView前置内容</p><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">header</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ol start="3"><li>Footer</li></ol><p>ListView后置内容</p><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">footer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="data" tabindex="-1">Data <a class="header-anchor" href="#data" aria-label="Permalink to &quot;Data&quot;">​</a></h3><hr><ol><li>items</li></ol><p>其中<code>key</code>字段建议开发者在有重复名称和类型字段时声明用来区别项目</p><div class="language-javascript vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">items </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [{key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, disabled: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, show: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}]</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">//e.g.//</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">items</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: [</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;fruitsHeader&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Fruits&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;header&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;apple&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Apple&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;banana&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Banana&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;orange&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Orange&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, disabled: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;grape&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Grape&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;divider_1&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;divider&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;vegetablesHeader&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Vegetables&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;header&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;broccoli&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Broccoli&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;carrot&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Carrot&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;lettuce&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Lettuce&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><h3 id="appendix" tabindex="-1">Appendix <a class="header-anchor" href="#appendix" aria-label="Permalink to &quot;Appendix&quot;">​</a></h3><hr><ol><li>获取<code>ListView</code>中第<code>index</code>项<code>item</code>的<code>dom</code>方法(其中<code>&lt;index&gt;</code>代表<code>items</code>索引):</li></ol><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-ListView</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">items</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ref</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;list&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-ListView</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">let item = this.$refs.list.$refs[&#39;list_item_&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">index</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;]&#39;];</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p><strong>特别地</strong> 0.1.32版本后支持采用函数式字段, 其中支持的字段包括<code>name</code>, <code>disabled</code>, <code>choosen</code>, <code>type</code> 0.1.54版本后支持<code>show</code></p></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-09de1c0f><!--[--><!--]--><!----><nav class="prev-next" data-v-09de1c0f><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link prev" href="/VFluent3/guide/components/flip-view/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Previous page</span><span class="title" data-v-09de1c0f>FlipView</span><!--]--></a></div><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link next" href="/VFluent3/guide/components/tree-view/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Next page</span><span class="title" data-v-09de1c0f>TreeView</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>MIT Licensed</p><p class="copyright" data-v-e315a0ad>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_calendar-date-picker_properties.md\":\"DXRjmMG8\",\"guide_components_image_properties.md\":\"DGanRzCb\",\"guide_components_img-box_index.md\":\"DYtggkf_\",\"guide_components_img_emits.md\":\"BlE7jvZQ\",\"guide_components_img_index.md\":\"Bm9FiuU4\",\"guide_components_icon-element_properties.md\":\"8Oakruwc\",\"guide_components_img_properties.md\":\"B42YSocI\",\"guide_components_drawer_index.md\":\"D_vpnCpE\",\"guide_components_verify-box_emits.md\":\"DT17Iazx\",\"guide_components_calendar-date-picker_index.md\":\"BdHjrurh\",\"guide_components_rating-control_index.md\":\"Q9l5Lfrr\",\"guide_components_rating-control_properties.md\":\"DKprnl0i\",\"guide_components_calendar-view_index.md\":\"zdoRYVx1\",\"guide_components_animated-icon_index.md\":\"yZDMzCFe\",\"guide_components_calendar-date-picker_emits.md\":\"D5OkfR8j\",\"guide_components_badge_index.md\":\"Bb4crrJn\",\"guide_components_image_index.md\":\"B7X6cWAZ\",\"guide_components_slider_index.md\":\"C7zZ2d-W\",\"guide_components_radio-group_index.md\":\"CVfh3h5H\",\"guide_components_swipe-control_index.md\":\"DwrDVPc1\",\"guide_components_color-picker_emits.md\":\"BHDXVtBQ\",\"guide_components_radio_index.md\":\"90as5QGp\",\"guide_components_pagination_properties.md\":\"JUAPvcTL\",\"guide_components_persona_properties.md\":\"DUTPhPMp\",\"guide_components_combo-box_emits.md\":\"Dh5R-qEv\",\"guide_components_pivot_emits.md\":\"BTJPgNpy\",\"guide_components_pagination_index.md\":\"CnW2zAht\",\"guide_components_flip-view_properties.md\":\"BqZ4hhgU\",\"guide_components_icon-element_emits.md\":\"D5TXFdTZ\",\"guide_components_flip-view_index.md\":\"DefnDOv6\",\"guide_components_navigation-panel_index.md\":\"6mO__sSK\",\"guide_components_rating-control_emits.md\":\"blvomSeC\",\"guide_components_icon-element_index.md\":\"DQ8K7JNn\",\"guide_components_navigation-view_index.md\":\"4AQRiz1k\",\"guide_components_toggle-switch_emits.md\":\"CLGzrNut\",\"guide_components_toggle-switch_index.md\":\"61en_q9-\",\"guide_components_scroll-story_index.md\":\"Vpgb1HSV\",\"guide_components_reveal-container_index.md\":\"Cut2r4tV\",\"guide_components_search-box_emits.md\":\"-d9sWNNt\",\"guide_components_search-box_properties.md\":\"DEKFfPFw\",\"guide_components_shimmer_emits.md\":\"CTMInlI3\",\"guide_components_tag_index.md\":\"BhhxkcHn\",\"guide_components_search-box_index.md\":\"DgkrY0oY\",\"guide_components_shimmer_index.md\":\"iZlHuTxw\",\"guide_components_shimmer_properties.md\":\"CdkU1o6H\",\"guide_components_tree-view_index.md\":\"CUrwan4q\",\"guide_components_text-field_index.md\":\"CXSimJtj\",\"guide_components_text-box_index.md\":\"C5moAPfB\",\"guide_components_progress-ring_properties.md\":\"Dc08Uiff\",\"guide_components_toggle-switch_properties.md\":\"tFppK_IS\",\"guide_components_radio-group_emits.md\":\"cEDzKVnN\",\"guide_components_collapse_index.md\":\"N9Iu5-2v\",\"guide_components_image_emits.md\":\"lmlz2xJd\",\"guide_components_callout_index.md\":\"D9RU33w6\",\"guide_components_pivot_index.md\":\"B_vwQL-5\",\"guide_components_command-bar_index.md\":\"Cp4_rrGB\",\"guide_components_pagination_emits.md\":\"Dng86A22\",\"guide_components_button_index.md\":\"7sqT2MQP\",\"guide_components_info-box_properties.md\":\"BI7Nvk-E\",\"guide_components_drop-down_emits.md\":\"BE95TdKW\",\"guide_components_expander_index.md\":\"BKgcUJzQ\",\"guide_components_message-bar_index.md\":\"AEtAWlF8\",\"guide_components_menu-flyout_index.md\":\"Csa7irPj\",\"guide_components_panel_index.md\":\"CsTu0bXo\",\"guide_components_panel_properties.md\":\"BaxoCYKq\",\"guide_components_progress-bar_emits.md\":\"BcwXUpsF\",\"guide_components_progress-bar_properties.md\":\"TxiS9ZMA\",\"guide_components_progress-ring_emits.md\":\"D2Y6hIZ9\",\"guide_components_color-picker_index.md\":\"DCc4ixcU\",\"guide_components_progress-ring_index.md\":\"CPb-ZEPE\",\"guide_components_color-picker_properties.md\":\"wcXK29Vl\",\"guide_components_time-picker_index.md\":\"CQJdRRaG\",\"guide_components_drop-down_properties.md\":\"Bwlkpr1q\",\"guide_components_infinite-scroll-view_index.md\":\"yAuD807x\",\"guide_components_check-box_index.md\":\"FYgdu4oq\",\"guide_components_progress-bar_index.md\":\"D8vHQw5V\",\"guide_components_combo-box_index.md\":\"DTyu3eNd\",\"guide_components_info-box_emits.md\":\"DlEwpkkq\",\"guide_components_drop-down_index.md\":\"BZzJZQWq\",\"guide_components_list-view_index.md\":\"BoYvMzb0\",\"guide_components_verify-box_properties.md\":\"CW6W8fFf\",\"guide_components_verify-box_index.md\":\"DwSB40wR\",\"guide_index.md\":\"Bndlt3sL\",\"guide_components_web-window_index.md\":\"Bxc8vEeI\",\"index.md\":\"MTRqI42u\",\"guide_components_combo-box_properties.md\":\"AWfHzV6x\",\"guide_components_combobox_emits.md\":\"CGB6WLt8\",\"guide_components_combobox_properties.md\":\"Bja0hMou\",\"guide_components_details-list_index.md\":\"CcgOCIyt\",\"guide_components_info-box_index.md\":\"vXh-_DsL\",\"guide_components_combobox_index.md\":\"CsPkY6YB\",\"guide_components_date-picker_index.md\":\"12vmUIup\",\"guide_components_flip-view_emits.md\":\"DCheHjDj\",\"guide_components_panel_emits.md\":\"DG0REDq8\",\"guide_components_breadcrumb_index.md\":\"DyDm7PeP\",\"guide_components_radio-group_properties.md\":\"BnPxoKsQ\",\"guide_components_persona_emits.md\":\"CnsDPKRU\",\"guide_components_pivot_properties.md\":\"BmoLpPi1\",\"guide_components_persona_index.md\":\"DT00jby4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vfluent3\",\"description\":\"A Vue3 component library for Fluent UI\",\"base\":\"/VFluent3/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"VFluent3\",\"footer\":{\"message\":\"MIT Licensed\",\"copyright\":\"Copyright © Creator SN - 2022\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/\"}],\"sidebar\":[{\"text\":\"Basic input\",\"collapsed\":true,\"items\":[{\"text\":\"Button\",\"link\":\"/guide/components/button/\"},{\"text\":\"CheckBox\",\"link\":\"/guide/components/check-box/\"},{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"},{\"text\":\"Combobox\",\"link\":\"/guide/components/combobox/\"},{\"text\":\"DetailsList\",\"link\":\"/guide/components/details-list/\"},{\"text\":\"DropDown\",\"link\":\"/guide/components/drop-down/\"},{\"text\":\"Radio\",\"link\":\"/guide/components/radio/\"},{\"text\":\"RadioGroup\",\"link\":\"/guide/components/radio-group/\"},{\"text\":\"RatingControl\",\"link\":\"/guide/components/rating-control/\"},{\"text\":\"Slider\",\"link\":\"/guide/components/slider/\"},{\"text\":\"ToggleSwitch\",\"link\":\"/guide/components/toggle-switch/\"},{\"text\":\"Tag\",\"link\":\"/guide/components/tag/\"}]},{\"text\":\"Collections\",\"collapsed\":true,\"items\":[{\"text\":\"FlipView\",\"link\":\"/guide/components/flip-view/\"},{\"text\":\"ListView\",\"link\":\"/guide/components/list-view/\"},{\"text\":\"TreeView\",\"link\":\"/guide/components/tree-view/\"}]},{\"text\":\"Date & Time\",\"collapsed\":true,\"items\":[{\"text\":\"CalendarDatePicker\",\"link\":\"/guide/components/calendar-date-picker/\"},{\"text\":\"CalendarView\",\"link\":\"/guide/components/calendar-view/\"},{\"text\":\"DatePicker\",\"link\":\"/guide/components/date-picker/\"},{\"text\":\"TimePicker\",\"link\":\"/guide/components/time-picker/\"}]},{\"text\":\"Dialogs & flyouts\",\"collapsed\":true,\"items\":[{\"text\":\"Callout\",\"link\":\"/guide/components/callout/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Layout\",\"collapsed\":true,\"items\":[{\"text\":\"Collapse\",\"link\":\"/guide/components/collapse/\"},{\"text\":\"Expander\",\"link\":\"/guide/components/expander/\"},{\"text\":\"Drawer\",\"link\":\"/guide/components/drawer/\"},{\"text\":\"Panel\",\"link\":\"/guide/components/panel/\"}]},{\"text\":\"Media\",\"collapsed\":true,\"items\":[{\"text\":\"Image\",\"link\":\"/guide/components/image/\"},{\"text\":\"Img\",\"link\":\"/guide/components/img/\"},{\"text\":\"ImgBox\",\"link\":\"/guide/components/img-box/\"},{\"text\":\"Persona\",\"link\":\"/guide/components/persona/\"}]},{\"text\":\"Menu & toolbars\",\"collapsed\":true,\"items\":[{\"text\":\"CommandBar\",\"link\":\"/guide/components/command-bar/\"},{\"text\":\"MenuFlyout\",\"link\":\"/guide/components/menu-flyout/\"},{\"text\":\"SwipeControl\",\"link\":\"/guide/components/swipe-control/\"}]},{\"text\":\"Navigation\",\"collapsed\":true,\"items\":[{\"text\":\"Breadcrumb\",\"link\":\"/guide/components/breadcrumb/\"},{\"text\":\"NavigationPanel\",\"link\":\"/guide/components/navigation-panel/\"},{\"text\":\"NavigationView\",\"link\":\"/guide/components/navigation-view/\"},{\"text\":\"Pivot\",\"link\":\"/guide/components/pivot/\"},{\"text\":\"Pagination\",\"link\":\"/guide/components/pagination/\"}]},{\"text\":\"Scrolling\",\"collapsed\":true,\"items\":[{\"text\":\"InfiniteScrollView\",\"link\":\"/guide/components/infinite-scroll-view/\"},{\"text\":\"ScrollStory\",\"link\":\"/guide/components/scroll-story/\"}]},{\"text\":\"Status & info\",\"collapsed\":true,\"items\":[{\"text\":\"Badge\",\"link\":\"/guide/components/badge/\"},{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"ProgressBar\",\"link\":\"/guide/components/progress-bar/\"},{\"text\":\"ProgressRing\",\"link\":\"/guide/components/progress-ring/\"}]},{\"text\":\"Styles\",\"collapsed\":true,\"items\":[{\"text\":\"AnimatedIcon\",\"link\":\"/guide/components/animated-icon/\"},{\"text\":\"IconElement\",\"link\":\"/guide/components/icon-element/\"},{\"text\":\"RevealContainer\",\"link\":\"/guide/components/reveal-container/\"},{\"text\":\"Shimmer\",\"link\":\"/guide/components/shimmer/\"}]},{\"text\":\"Text\",\"collapsed\":true,\"items\":[{\"text\":\"SearchBox\",\"link\":\"/guide/components/search-box/\"},{\"text\":\"TextBox\",\"link\":\"/guide/components/text-box/\"},{\"text\":\"TextField\",\"link\":\"/guide/components/text-field/\"},{\"text\":\"VerifyBox\",\"link\":\"/guide/components/verify-box/\"}]},{\"text\":\"Windowing\",\"collapsed\":true,\"items\":[{\"text\":\"WebWindow\",\"link\":\"/guide/components/web-window/\"}]},{\"text\":\"Global\",\"collapsed\":true,\"items\":[{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Advance\",\"collapsed\":true,\"items\":[{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git a/guide/components/menu-flyout/index.html b/guide/components/menu-flyout/index.html
new file mode 100644
index 0000000..2e123f0
--- /dev/null
+++ b/guide/components/menu-flyout/index.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>MenuFlyout | vfluent3</title>
+    <meta name="description" content="A Vue3 component library for Fluent UI">
+    <meta name="generator" content="VitePress v1.0.0-rc.45">
+    <link rel="preload stylesheet" href="/VFluent3/assets/style.BabQegKX.css" as="style">
+    
+    <script type="module" src="/VFluent3/assets/app.CSutcJ2E.js"></script>
+    <link rel="preload" href="/VFluent3/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/framework.DvIFzl91.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/theme.CgqFBnN_.js">
+    <link rel="modulepreload" href="/VFluent3/assets/guide_components_menu-flyout_index.md.Csa7irPj.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-19c990f1><div class="wrapper" data-v-19c990f1><div class="container" data-v-19c990f1><div class="title" data-v-19c990f1><div class="VPNavBarTitle has-sidebar" data-v-19c990f1 data-v-ab179fa1><a class="title" href="/VFluent3/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>VFluent3</span><!--[--><!--]--></a></div></div><div class="content" data-v-19c990f1><div class="content-body" data-v-19c990f1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-19c990f1><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-19c990f1 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Guide</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-19c990f1 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-19c990f1 data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-19c990f1 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-19c990f1><div class="divider-line" data-v-19c990f1></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-d2ecc192><button data-v-d2ecc192>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-575e6a36><div class="curtain" data-v-575e6a36></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-575e6a36><span class="visually-hidden" id="sidebar-aria-label" data-v-575e6a36> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Basic input</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/button/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/check-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CheckBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/combobox/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Combobox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/details-list/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DetailsList</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drop-down/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DropDown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio-group/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RadioGroup</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/rating-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RatingControl</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/slider/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/toggle-switch/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ToggleSwitch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tag/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Tag</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Collections</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/flip-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>FlipView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/list-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ListView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tree-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TreeView</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Date & Time</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarDatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/time-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TimePicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Dialogs & flyouts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/callout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Callout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Layout</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/collapse/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Collapse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/expander/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Expander</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drawer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Panel</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Media</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/image/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Img</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ImgBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/persona/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Persona</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible has-active" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Menu & toolbars</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/command-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CommandBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/menu-flyout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MenuFlyout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/swipe-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SwipeControl</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Navigation</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/breadcrumb/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationPanel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pivot/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pivot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pagination/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pagination</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Scrolling</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/infinite-scroll-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfiniteScrollView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/scroll-story/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ScrollStory</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Status & info</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/badge/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-ring/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressRing</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Styles</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/animated-icon/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>AnimatedIcon</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/icon-element/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>IconElement</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/reveal-container/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RevealContainer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/shimmer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Shimmer</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Text</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/search-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SearchBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-field/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextField</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/verify-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>VerifyBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Windowing</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/web-window/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>WebWindow</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Global</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Advance</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-935f8a84><div class="content" data-v-935f8a84><div class="outline-marker" data-v-935f8a84></div><div class="outline-title" role="heading" aria-level="2" data-v-935f8a84>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-935f8a84><span class="visually-hidden" id="doc-outline-aria-label" data-v-935f8a84> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-935f8a84 data-v-b933a997><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _VFluent3_guide_components_menu-flyout_" data-v-39a288b8><div><h3 id="menuflyout" tabindex="-1">MenuFlyout <a class="header-anchor" href="#menuflyout" aria-label="Permalink to &quot;MenuFlyout&quot;">​</a></h3><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-menuFlyout</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">value</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">options</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">options</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Pick a option&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-menuFlyout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="menuflyout-disabled" tabindex="-1">menuFlyout-Disabled <a class="header-anchor" href="#menuflyout-disabled" aria-label="Permalink to &quot;menuFlyout-Disabled&quot;">​</a></h3><hr><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-menuFlyout</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">value</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">options</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">options</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Pick a option&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> disabled</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-menuFlyout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="menuflyout-dark-theme" tabindex="-1">menuFlyout-Dark Theme <a class="header-anchor" href="#menuflyout-dark-theme" aria-label="Permalink to &quot;menuFlyout-Dark Theme&quot;">​</a></h3><hr><div style="width:100%;background:black;"><!----></div><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-menuFlyout</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">value</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">options</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">options</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Pick a option&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;dark&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-menuFlyout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">value/v-model</td><td style="text-align:center;">Object</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">Combobox当前项绑定</td></tr><tr><td style="text-align:center;">options</td><td style="text-align:center;">Array</td><td style="text-align:center;">Yes</td><td style="text-align:center;">N/A</td><td style="text-align:center;">Combobox数据</td></tr><tr><td style="text-align:center;">borderWidth</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">2</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">placeholder</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">Combobox</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">borderRadius</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">3</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">background</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">choosenBackground</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">choosenSliderBackground</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">inputForeground</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">inputBackground</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">titleForeground</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">ChevronDown</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">dropDownIcon</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">dropDownIconForeground</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">revealBorderColor</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">revealBackgroundColor</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">pivotPlaceholder</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">Please Choose</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">system</td><td style="text-align:center;">主题样式, 包含<code>light</code>, <code>dark</code>, <code>system</code>, <code>custom</code>几种样式</td></tr></tbody></table><h3 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to &quot;Events&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">事件名(Name)</th><th style="text-align:center;">参数类型(args)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">choose-item</td><td style="text-align:center;">value/object</td><td style="text-align:center;">Combobox choose item</td></tr></tbody></table><h3 id="slot" tabindex="-1">Slot <a class="header-anchor" href="#slot" aria-label="Permalink to &quot;Slot&quot;">​</a></h3><hr><ol><li>Default</li></ol><p>用户可自定义 MenuFlyout Item 内容</p><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">item</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">item</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    {{valueTrigger(item.type) !== &#39;divider&#39; ? valueTrigger(item.text) : &#39;&#39;}}</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>用户自定义样式时, 包含以下可选属性</p><ul><li>item: 当前组数据</li></ul><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">i</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;{{x.item.text}}&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">i</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="data" tabindex="-1">Data <a class="header-anchor" href="#data" aria-label="Permalink to &quot;Data&quot;">​</a></h3><hr><ol><li>options</li></ol><div class="language-javascript vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">options </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [{key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, disabled: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}]</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">//e.g.//</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">options</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: [</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;fruitsHeader&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Fruits&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;header&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;apple&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Apple&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, children: [</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;A&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;A&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;B&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;B&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Apple C&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Apple C&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, children: [</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;A&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;A&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;B&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;B&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Apple C-C&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Apple C-C&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, children: [</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;A&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;A&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;B&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;B&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Apple C-C-C&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Apple C-C-C&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            ] }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        ] }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    ] },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;banana&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Banana&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;orange&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Orange&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, disabled: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;grape&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Grape&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, children: [</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;A&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;A&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;B&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;B&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;C&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;C&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    ] },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;divider_1&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;-&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;divider&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;vegetablesHeader&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Vegetables&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;header&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;broccoli&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Broccoli&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;carrot&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Carrot&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;lettuce&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Lettuce&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br></div></div><p><strong>其中</strong> <code>text</code>, <code>disabled</code>, <code>type</code>属性支持函数式声明.</p></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-09de1c0f><!--[--><!--]--><!----><nav class="prev-next" data-v-09de1c0f><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link prev" href="/VFluent3/guide/components/command-bar/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Previous page</span><span class="title" data-v-09de1c0f>CommandBar</span><!--]--></a></div><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link next" href="/VFluent3/guide/components/swipe-control/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Next page</span><span class="title" data-v-09de1c0f>SwipeControl</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>MIT Licensed</p><p class="copyright" data-v-e315a0ad>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_calendar-date-picker_properties.md\":\"DXRjmMG8\",\"guide_components_image_properties.md\":\"DGanRzCb\",\"guide_components_img-box_index.md\":\"DYtggkf_\",\"guide_components_img_emits.md\":\"BlE7jvZQ\",\"guide_components_img_index.md\":\"Bm9FiuU4\",\"guide_components_icon-element_properties.md\":\"8Oakruwc\",\"guide_components_img_properties.md\":\"B42YSocI\",\"guide_components_drawer_index.md\":\"D_vpnCpE\",\"guide_components_verify-box_emits.md\":\"DT17Iazx\",\"guide_components_calendar-date-picker_index.md\":\"BdHjrurh\",\"guide_components_rating-control_index.md\":\"Q9l5Lfrr\",\"guide_components_rating-control_properties.md\":\"DKprnl0i\",\"guide_components_calendar-view_index.md\":\"zdoRYVx1\",\"guide_components_animated-icon_index.md\":\"yZDMzCFe\",\"guide_components_calendar-date-picker_emits.md\":\"D5OkfR8j\",\"guide_components_badge_index.md\":\"Bb4crrJn\",\"guide_components_image_index.md\":\"B7X6cWAZ\",\"guide_components_slider_index.md\":\"C7zZ2d-W\",\"guide_components_radio-group_index.md\":\"CVfh3h5H\",\"guide_components_swipe-control_index.md\":\"DwrDVPc1\",\"guide_components_color-picker_emits.md\":\"BHDXVtBQ\",\"guide_components_radio_index.md\":\"90as5QGp\",\"guide_components_pagination_properties.md\":\"JUAPvcTL\",\"guide_components_persona_properties.md\":\"DUTPhPMp\",\"guide_components_combo-box_emits.md\":\"Dh5R-qEv\",\"guide_components_pivot_emits.md\":\"BTJPgNpy\",\"guide_components_pagination_index.md\":\"CnW2zAht\",\"guide_components_flip-view_properties.md\":\"BqZ4hhgU\",\"guide_components_icon-element_emits.md\":\"D5TXFdTZ\",\"guide_components_flip-view_index.md\":\"DefnDOv6\",\"guide_components_navigation-panel_index.md\":\"6mO__sSK\",\"guide_components_rating-control_emits.md\":\"blvomSeC\",\"guide_components_icon-element_index.md\":\"DQ8K7JNn\",\"guide_components_navigation-view_index.md\":\"4AQRiz1k\",\"guide_components_toggle-switch_emits.md\":\"CLGzrNut\",\"guide_components_toggle-switch_index.md\":\"61en_q9-\",\"guide_components_scroll-story_index.md\":\"Vpgb1HSV\",\"guide_components_reveal-container_index.md\":\"Cut2r4tV\",\"guide_components_search-box_emits.md\":\"-d9sWNNt\",\"guide_components_search-box_properties.md\":\"DEKFfPFw\",\"guide_components_shimmer_emits.md\":\"CTMInlI3\",\"guide_components_tag_index.md\":\"BhhxkcHn\",\"guide_components_search-box_index.md\":\"DgkrY0oY\",\"guide_components_shimmer_index.md\":\"iZlHuTxw\",\"guide_components_shimmer_properties.md\":\"CdkU1o6H\",\"guide_components_tree-view_index.md\":\"CUrwan4q\",\"guide_components_text-field_index.md\":\"CXSimJtj\",\"guide_components_text-box_index.md\":\"C5moAPfB\",\"guide_components_progress-ring_properties.md\":\"Dc08Uiff\",\"guide_components_toggle-switch_properties.md\":\"tFppK_IS\",\"guide_components_radio-group_emits.md\":\"cEDzKVnN\",\"guide_components_collapse_index.md\":\"N9Iu5-2v\",\"guide_components_image_emits.md\":\"lmlz2xJd\",\"guide_components_callout_index.md\":\"D9RU33w6\",\"guide_components_pivot_index.md\":\"B_vwQL-5\",\"guide_components_command-bar_index.md\":\"Cp4_rrGB\",\"guide_components_pagination_emits.md\":\"Dng86A22\",\"guide_components_button_index.md\":\"7sqT2MQP\",\"guide_components_info-box_properties.md\":\"BI7Nvk-E\",\"guide_components_drop-down_emits.md\":\"BE95TdKW\",\"guide_components_expander_index.md\":\"BKgcUJzQ\",\"guide_components_message-bar_index.md\":\"AEtAWlF8\",\"guide_components_menu-flyout_index.md\":\"Csa7irPj\",\"guide_components_panel_index.md\":\"CsTu0bXo\",\"guide_components_panel_properties.md\":\"BaxoCYKq\",\"guide_components_progress-bar_emits.md\":\"BcwXUpsF\",\"guide_components_progress-bar_properties.md\":\"TxiS9ZMA\",\"guide_components_progress-ring_emits.md\":\"D2Y6hIZ9\",\"guide_components_color-picker_index.md\":\"DCc4ixcU\",\"guide_components_progress-ring_index.md\":\"CPb-ZEPE\",\"guide_components_color-picker_properties.md\":\"wcXK29Vl\",\"guide_components_time-picker_index.md\":\"CQJdRRaG\",\"guide_components_drop-down_properties.md\":\"Bwlkpr1q\",\"guide_components_infinite-scroll-view_index.md\":\"yAuD807x\",\"guide_components_check-box_index.md\":\"FYgdu4oq\",\"guide_components_progress-bar_index.md\":\"D8vHQw5V\",\"guide_components_combo-box_index.md\":\"DTyu3eNd\",\"guide_components_info-box_emits.md\":\"DlEwpkkq\",\"guide_components_drop-down_index.md\":\"BZzJZQWq\",\"guide_components_list-view_index.md\":\"BoYvMzb0\",\"guide_components_verify-box_properties.md\":\"CW6W8fFf\",\"guide_components_verify-box_index.md\":\"DwSB40wR\",\"guide_index.md\":\"Bndlt3sL\",\"guide_components_web-window_index.md\":\"Bxc8vEeI\",\"index.md\":\"MTRqI42u\",\"guide_components_combo-box_properties.md\":\"AWfHzV6x\",\"guide_components_combobox_emits.md\":\"CGB6WLt8\",\"guide_components_combobox_properties.md\":\"Bja0hMou\",\"guide_components_details-list_index.md\":\"CcgOCIyt\",\"guide_components_info-box_index.md\":\"vXh-_DsL\",\"guide_components_combobox_index.md\":\"CsPkY6YB\",\"guide_components_date-picker_index.md\":\"12vmUIup\",\"guide_components_flip-view_emits.md\":\"DCheHjDj\",\"guide_components_panel_emits.md\":\"DG0REDq8\",\"guide_components_breadcrumb_index.md\":\"DyDm7PeP\",\"guide_components_radio-group_properties.md\":\"BnPxoKsQ\",\"guide_components_persona_emits.md\":\"CnsDPKRU\",\"guide_components_pivot_properties.md\":\"BmoLpPi1\",\"guide_components_persona_index.md\":\"DT00jby4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vfluent3\",\"description\":\"A Vue3 component library for Fluent UI\",\"base\":\"/VFluent3/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"VFluent3\",\"footer\":{\"message\":\"MIT Licensed\",\"copyright\":\"Copyright © Creator SN - 2022\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/\"}],\"sidebar\":[{\"text\":\"Basic input\",\"collapsed\":true,\"items\":[{\"text\":\"Button\",\"link\":\"/guide/components/button/\"},{\"text\":\"CheckBox\",\"link\":\"/guide/components/check-box/\"},{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"},{\"text\":\"Combobox\",\"link\":\"/guide/components/combobox/\"},{\"text\":\"DetailsList\",\"link\":\"/guide/components/details-list/\"},{\"text\":\"DropDown\",\"link\":\"/guide/components/drop-down/\"},{\"text\":\"Radio\",\"link\":\"/guide/components/radio/\"},{\"text\":\"RadioGroup\",\"link\":\"/guide/components/radio-group/\"},{\"text\":\"RatingControl\",\"link\":\"/guide/components/rating-control/\"},{\"text\":\"Slider\",\"link\":\"/guide/components/slider/\"},{\"text\":\"ToggleSwitch\",\"link\":\"/guide/components/toggle-switch/\"},{\"text\":\"Tag\",\"link\":\"/guide/components/tag/\"}]},{\"text\":\"Collections\",\"collapsed\":true,\"items\":[{\"text\":\"FlipView\",\"link\":\"/guide/components/flip-view/\"},{\"text\":\"ListView\",\"link\":\"/guide/components/list-view/\"},{\"text\":\"TreeView\",\"link\":\"/guide/components/tree-view/\"}]},{\"text\":\"Date & Time\",\"collapsed\":true,\"items\":[{\"text\":\"CalendarDatePicker\",\"link\":\"/guide/components/calendar-date-picker/\"},{\"text\":\"CalendarView\",\"link\":\"/guide/components/calendar-view/\"},{\"text\":\"DatePicker\",\"link\":\"/guide/components/date-picker/\"},{\"text\":\"TimePicker\",\"link\":\"/guide/components/time-picker/\"}]},{\"text\":\"Dialogs & flyouts\",\"collapsed\":true,\"items\":[{\"text\":\"Callout\",\"link\":\"/guide/components/callout/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Layout\",\"collapsed\":true,\"items\":[{\"text\":\"Collapse\",\"link\":\"/guide/components/collapse/\"},{\"text\":\"Expander\",\"link\":\"/guide/components/expander/\"},{\"text\":\"Drawer\",\"link\":\"/guide/components/drawer/\"},{\"text\":\"Panel\",\"link\":\"/guide/components/panel/\"}]},{\"text\":\"Media\",\"collapsed\":true,\"items\":[{\"text\":\"Image\",\"link\":\"/guide/components/image/\"},{\"text\":\"Img\",\"link\":\"/guide/components/img/\"},{\"text\":\"ImgBox\",\"link\":\"/guide/components/img-box/\"},{\"text\":\"Persona\",\"link\":\"/guide/components/persona/\"}]},{\"text\":\"Menu & toolbars\",\"collapsed\":true,\"items\":[{\"text\":\"CommandBar\",\"link\":\"/guide/components/command-bar/\"},{\"text\":\"MenuFlyout\",\"link\":\"/guide/components/menu-flyout/\"},{\"text\":\"SwipeControl\",\"link\":\"/guide/components/swipe-control/\"}]},{\"text\":\"Navigation\",\"collapsed\":true,\"items\":[{\"text\":\"Breadcrumb\",\"link\":\"/guide/components/breadcrumb/\"},{\"text\":\"NavigationPanel\",\"link\":\"/guide/components/navigation-panel/\"},{\"text\":\"NavigationView\",\"link\":\"/guide/components/navigation-view/\"},{\"text\":\"Pivot\",\"link\":\"/guide/components/pivot/\"},{\"text\":\"Pagination\",\"link\":\"/guide/components/pagination/\"}]},{\"text\":\"Scrolling\",\"collapsed\":true,\"items\":[{\"text\":\"InfiniteScrollView\",\"link\":\"/guide/components/infinite-scroll-view/\"},{\"text\":\"ScrollStory\",\"link\":\"/guide/components/scroll-story/\"}]},{\"text\":\"Status & info\",\"collapsed\":true,\"items\":[{\"text\":\"Badge\",\"link\":\"/guide/components/badge/\"},{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"ProgressBar\",\"link\":\"/guide/components/progress-bar/\"},{\"text\":\"ProgressRing\",\"link\":\"/guide/components/progress-ring/\"}]},{\"text\":\"Styles\",\"collapsed\":true,\"items\":[{\"text\":\"AnimatedIcon\",\"link\":\"/guide/components/animated-icon/\"},{\"text\":\"IconElement\",\"link\":\"/guide/components/icon-element/\"},{\"text\":\"RevealContainer\",\"link\":\"/guide/components/reveal-container/\"},{\"text\":\"Shimmer\",\"link\":\"/guide/components/shimmer/\"}]},{\"text\":\"Text\",\"collapsed\":true,\"items\":[{\"text\":\"SearchBox\",\"link\":\"/guide/components/search-box/\"},{\"text\":\"TextBox\",\"link\":\"/guide/components/text-box/\"},{\"text\":\"TextField\",\"link\":\"/guide/components/text-field/\"},{\"text\":\"VerifyBox\",\"link\":\"/guide/components/verify-box/\"}]},{\"text\":\"Windowing\",\"collapsed\":true,\"items\":[{\"text\":\"WebWindow\",\"link\":\"/guide/components/web-window/\"}]},{\"text\":\"Global\",\"collapsed\":true,\"items\":[{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Advance\",\"collapsed\":true,\"items\":[{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git a/guide/components/message-bar/emits.html b/guide/components/message-bar/emits.html
deleted file mode 100644
index 38c64cc..0000000
--- a/guide/components/message-bar/emits.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<!DOCTYPE html>
-<html lang="en-US">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>Emits | vfluent3</title>
-    <meta name="description" content="A Vue3 component library for Fluent UI">
-    <link rel="stylesheet" href="/VFluent3/assets/style.0a1d87af.css">
-    <link rel="modulepreload" href="/VFluent3/assets/app.d60fa8c3.js">
-    <link rel="modulepreload" href="/VFluent3/assets/guide_components_message-bar_emits.md.e89a5a22.lean.js">
-    
-    <script>(()=>{const e=localStorage.getItem("vitepress-theme-appearance"),a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
-  </head>
-  <body>
-    <div id="app"><div class="Layout" data-v-058b7495><!--[--><!--]--><!--[--><span tabindex="-1" data-v-bea91388></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-bea91388> Skip to content </a><!--]--><!----><header class="VPNav" data-v-058b7495 data-v-2a0a2738><div class="VPNavBar has-sidebar" data-v-2a0a2738 data-v-45c9f423><div class="container" data-v-45c9f423><div class="VPNavBarTitle has-sidebar" data-v-45c9f423 data-v-011600ce><a class="title" href="/VFluent3/" data-v-011600ce><!----><!--[-->VFluent3<!--]--></a></div><div class="content" data-v-45c9f423><!----><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-45c9f423 data-v-4da4371d><span id="main-nav-aria-label" class="visually-hidden" data-v-4da4371d>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" data-v-4da4371d data-v-66f8d518 data-v-4d08dd3a><!--[-->Home<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" data-v-4da4371d data-v-66f8d518 data-v-4d08dd3a><!--[-->Guide<!--]--><!----></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-45c9f423 data-v-bf1c94ca><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" data-v-bf1c94ca data-v-d0ee0df2 data-v-55b931a0><span class="check" data-v-55b931a0><span class="icon" data-v-55b931a0><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-d0ee0df2><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-d0ee0df2><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-45c9f423 data-v-7cece6ac data-v-37af1650><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-37af1650><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-37af1650><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-37af1650><div class="VPMenu" data-v-37af1650 data-v-17dc081b><!----><!--[--><!--[--><!----><div class="group" data-v-7cece6ac><div class="item appearance" data-v-7cece6ac><p class="label" data-v-7cece6ac>Appearance</p><div class="appearance-action" data-v-7cece6ac><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" data-v-7cece6ac data-v-d0ee0df2 data-v-55b931a0><span class="check" data-v-55b931a0><span class="icon" data-v-55b931a0><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-d0ee0df2><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-d0ee0df2><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-45c9f423 data-v-5484e669><span class="container" data-v-5484e669><span class="top" data-v-5484e669></span><span class="middle" data-v-5484e669></span><span class="bottom" data-v-5484e669></span></span></button></div></div></div><!----></header><div class="VPLocalNav" data-v-058b7495 data-v-f623cd72><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-f623cd72><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-f623cd72><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-f623cd72>Menu</span></button><a class="top-link" href="#" data-v-f623cd72> Return to top </a></div><aside class="VPSidebar" data-v-058b7495 data-v-3b8ec0c7><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-3b8ec0c7><span class="visually-hidden" id="sidebar-aria-label" data-v-3b8ec0c7> Sidebar Navigation </span><!--[--><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Basic</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/button/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Button</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/check-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>CheckBox</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/radio/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Radio</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/progress-bar/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ProgressBar</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/progress-ring/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ProgressRing</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/toggle-switch/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ToggleSwitch</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/img/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Img</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/text-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>TextBox</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/combo-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ComboBox</span><!--]--><!----></a><!--]--></div></section></div><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Global</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/message-bar/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>MessageBar</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/info-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>InfoBox</span><!--]--><!----></a><!--]--></div></section></div><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Advance</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/color-picker/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ColorPicker</span><!--]--><!----></a><!--]--></div></section></div><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-058b7495 data-v-564173e9><div class="VPDoc has-sidebar" data-v-564173e9 data-v-32b7ddf4><div class="container" data-v-32b7ddf4><div class="aside" data-v-32b7ddf4><div class="aside-curtain" data-v-32b7ddf4></div><div class="aside-container" data-v-32b7ddf4><div class="aside-content" data-v-32b7ddf4><div class="VPDocAside" data-v-32b7ddf4 data-v-35c1bae1><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline has-outline" data-v-35c1bae1 data-v-123cce62><div class="content" data-v-123cce62><div class="outline-marker" data-v-123cce62></div><div class="outline-title" data-v-123cce62>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-123cce62><span class="visually-hidden" id="doc-outline-aria-label" data-v-123cce62> Table of Contents for current page </span><ul class="root" data-v-123cce62><!--[--><li style="" data-v-123cce62><a class="outline-link" href="#emits" data-v-123cce62>Emits</a><!----></li><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-35c1bae1></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-32b7ddf4><div class="content-container" data-v-32b7ddf4><!--[--><!--]--><main class="main" data-v-32b7ddf4><div style="position:relative;" class="vp-doc _VFluent3_guide_components_message-bar_emits" data-v-32b7ddf4><div><h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">cancel</td><td style="text-align:center;"></td><td style="text-align:center;">oncancel</td></tr><tr><td style="text-align:center;">close</td><td style="text-align:center;"></td><td style="text-align:center;">onclose</td></tr><tr><td style="text-align:center;">confirm</td><td style="text-align:center;"></td><td style="text-align:center;">onconfirm</td></tr></tbody></table></div></div></main><footer class="VPDocFooter" data-v-32b7ddf4 data-v-cfaa3a6c><div class="edit-info" data-v-cfaa3a6c><!----><!----></div><div class="prev-next" data-v-cfaa3a6c><div class="pager" data-v-cfaa3a6c><!----></div><div class="pager" data-v-cfaa3a6c><a class="pager-link next" href="/VFluent3/guide/components/button/" data-v-cfaa3a6c><span class="desc" data-v-cfaa3a6c>Next page</span><span class="title" data-v-cfaa3a6c>Button</span></a></div></div></footer><!--[--><!--]--></div></div></div></div></div><footer class="VPFooter has-sidebar" data-v-058b7495 data-v-a6c8dde4><div class="container" data-v-a6c8dde4><p class="message" data-v-a6c8dde4>MIT Licensed</p><p class="copyright" data-v-a6c8dde4>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
-    <script>__VP_HASH_MAP__ = JSON.parse("{\"guide_components_button_emits.md\":\"d682bf18\",\"guide_components_button_index.md\":\"23a8eb54\",\"guide_components_button_properties.md\":\"cd4004b6\",\"guide_components_check-box_emits.md\":\"31609794\",\"guide_components_check-box_index.md\":\"32046814\",\"guide_components_check-box_properties.md\":\"8f33ac0c\",\"guide_components_color-picker_emits.md\":\"00983cd0\",\"guide_components_color-picker_index.md\":\"b2d62612\",\"guide_components_color-picker_properties.md\":\"5466ba72\",\"guide_components_combo-box_emits.md\":\"d5ffda50\",\"guide_components_combo-box_index.md\":\"1c4364f5\",\"guide_components_combo-box_properties.md\":\"2e1d6060\",\"guide_components_img_emits.md\":\"6237adb4\",\"guide_components_img_index.md\":\"fa51a3a1\",\"guide_components_img_properties.md\":\"8d321b5e\",\"guide_components_info-box_emits.md\":\"c2e71eec\",\"guide_components_info-box_index.md\":\"06175fed\",\"guide_components_info-box_properties.md\":\"314dbb00\",\"guide_components_message-bar_emits.md\":\"e89a5a22\",\"guide_components_message-bar_index.md\":\"3f0b01d6\",\"guide_components_message-bar_properties.md\":\"ee3838d9\",\"guide_components_progress-bar_emits.md\":\"5b611e3b\",\"guide_components_progress-bar_index.md\":\"689c3241\",\"guide_components_progress-bar_properties.md\":\"39af7fb2\",\"guide_components_progress-ring_emits.md\":\"67e4644e\",\"guide_components_progress-ring_index.md\":\"9a33542b\",\"guide_components_progress-ring_properties.md\":\"c897c4bb\",\"guide_components_radio_emits.md\":\"28506857\",\"guide_components_radio_index.md\":\"e5a479ce\",\"guide_components_radio_properties.md\":\"f8e55d2f\",\"guide_components_text-box_emits.md\":\"0bf89ef8\",\"guide_components_text-box_index.md\":\"7ccfc637\",\"guide_components_text-box_properties.md\":\"aab3a89e\",\"guide_components_toggle-switch_emits.md\":\"5146435f\",\"guide_components_toggle-switch_index.md\":\"8be48081\",\"guide_components_toggle-switch_properties.md\":\"54984c3a\",\"guide_index.md\":\"e3dca1d7\",\"index.md\":\"1e9773d5\"}")</script>
-    <script type="module" async src="/VFluent3/assets/app.d60fa8c3.js"></script>
-    
-  </body>
-</html>
\ No newline at end of file
diff --git a/guide/components/message-bar/index.html b/guide/components/message-bar/index.html
index 3eadd26..c4828cb 100644
--- a/guide/components/message-bar/index.html
+++ b/guide/components/message-bar/index.html
@@ -1,111 +1,105 @@
 <!DOCTYPE html>
-<html lang="en-US">
+<html lang="en-US" dir="ltr">
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1">
     <title>MessageBar | vfluent3</title>
     <meta name="description" content="A Vue3 component library for Fluent UI">
-    <link rel="stylesheet" href="/VFluent3/assets/style.0a1d87af.css">
-    <link rel="modulepreload" href="/VFluent3/assets/app.d60fa8c3.js">
-    <link rel="modulepreload" href="/VFluent3/assets/chunks/index.9dba9c16.js">
-    <link rel="modulepreload" href="/VFluent3/assets/guide_components_message-bar_index.md.3f0b01d6.lean.js">
+    <meta name="generator" content="VitePress v1.0.0-rc.45">
+    <link rel="preload stylesheet" href="/VFluent3/assets/style.BabQegKX.css" as="style">
     
-    <script>(()=>{const e=localStorage.getItem("vitepress-theme-appearance"),a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script type="module" src="/VFluent3/assets/app.CSutcJ2E.js"></script>
+    <link rel="preload" href="/VFluent3/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/framework.DvIFzl91.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/theme.CgqFBnN_.js">
+    <link rel="modulepreload" href="/VFluent3/assets/guide_components_message-bar_index.md.AEtAWlF8.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
   </head>
   <body>
-    <div id="app"><div class="Layout" data-v-058b7495><!--[--><!--]--><!--[--><span tabindex="-1" data-v-bea91388></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-bea91388> Skip to content </a><!--]--><!----><header class="VPNav" data-v-058b7495 data-v-2a0a2738><div class="VPNavBar has-sidebar" data-v-2a0a2738 data-v-45c9f423><div class="container" data-v-45c9f423><div class="VPNavBarTitle has-sidebar" data-v-45c9f423 data-v-011600ce><a class="title" href="/VFluent3/" data-v-011600ce><!----><!--[-->VFluent3<!--]--></a></div><div class="content" data-v-45c9f423><!----><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-45c9f423 data-v-4da4371d><span id="main-nav-aria-label" class="visually-hidden" data-v-4da4371d>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" data-v-4da4371d data-v-66f8d518 data-v-4d08dd3a><!--[-->Home<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" data-v-4da4371d data-v-66f8d518 data-v-4d08dd3a><!--[-->Guide<!--]--><!----></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-45c9f423 data-v-bf1c94ca><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" data-v-bf1c94ca data-v-d0ee0df2 data-v-55b931a0><span class="check" data-v-55b931a0><span class="icon" data-v-55b931a0><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-d0ee0df2><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-d0ee0df2><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-45c9f423 data-v-7cece6ac data-v-37af1650><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-37af1650><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-37af1650><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-37af1650><div class="VPMenu" data-v-37af1650 data-v-17dc081b><!----><!--[--><!--[--><!----><div class="group" data-v-7cece6ac><div class="item appearance" data-v-7cece6ac><p class="label" data-v-7cece6ac>Appearance</p><div class="appearance-action" data-v-7cece6ac><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" data-v-7cece6ac data-v-d0ee0df2 data-v-55b931a0><span class="check" data-v-55b931a0><span class="icon" data-v-55b931a0><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-d0ee0df2><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-d0ee0df2><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-45c9f423 data-v-5484e669><span class="container" data-v-5484e669><span class="top" data-v-5484e669></span><span class="middle" data-v-5484e669></span><span class="bottom" data-v-5484e669></span></span></button></div></div></div><!----></header><div class="VPLocalNav" data-v-058b7495 data-v-f623cd72><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-f623cd72><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-f623cd72><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-f623cd72>Menu</span></button><a class="top-link" href="#" data-v-f623cd72> Return to top </a></div><aside class="VPSidebar" data-v-058b7495 data-v-3b8ec0c7><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-3b8ec0c7><span class="visually-hidden" id="sidebar-aria-label" data-v-3b8ec0c7> Sidebar Navigation </span><!--[--><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Basic</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/button/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Button</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/check-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>CheckBox</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/radio/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Radio</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/progress-bar/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ProgressBar</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/progress-ring/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ProgressRing</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/toggle-switch/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ToggleSwitch</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/img/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Img</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/text-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>TextBox</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/combo-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ComboBox</span><!--]--><!----></a><!--]--></div></section></div><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Global</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link active" href="/VFluent3/guide/components/message-bar/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>MessageBar</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/info-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>InfoBox</span><!--]--><!----></a><!--]--></div></section></div><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Advance</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/color-picker/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ColorPicker</span><!--]--><!----></a><!--]--></div></section></div><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-058b7495 data-v-564173e9><div class="VPDoc has-sidebar" data-v-564173e9 data-v-32b7ddf4><div class="container" data-v-32b7ddf4><div class="aside" data-v-32b7ddf4><div class="aside-curtain" data-v-32b7ddf4></div><div class="aside-container" data-v-32b7ddf4><div class="aside-content" data-v-32b7ddf4><div class="VPDocAside" data-v-32b7ddf4 data-v-35c1bae1><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline has-outline" data-v-35c1bae1 data-v-123cce62><div class="content" data-v-123cce62><div class="outline-marker" data-v-123cce62></div><div class="outline-title" data-v-123cce62>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-123cce62><span class="visually-hidden" id="doc-outline-aria-label" data-v-123cce62> Table of Contents for current page </span><ul class="root" data-v-123cce62><!--[--><li style="" data-v-123cce62><a class="outline-link" href="#quick-start" data-v-123cce62>Quick Start</a><!----></li><li style="" data-v-123cce62><a class="outline-link" href="#properties" data-v-123cce62>Properties</a><!----></li><li style="" data-v-123cce62><a class="outline-link" href="#emits" data-v-123cce62>Emits</a><!----></li><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-35c1bae1></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-32b7ddf4><div class="content-container" data-v-32b7ddf4><!--[--><!--]--><main class="main" data-v-32b7ddf4><div style="position:relative;" class="vp-doc _VFluent3_guide_components_message-bar_index" data-v-32b7ddf4><div><h1 id="messagebar" tabindex="-1">MessageBar <a class="header-anchor" href="#messagebar" aria-hidden="true">#</a></h1><h2 id="quick-start" tabindex="-1">Quick Start <a class="header-anchor" href="#quick-start" aria-hidden="true">#</a></h2><h3 id="default" tabindex="-1">Default <a class="header-anchor" href="#default" aria-hidden="true">#</a></h3><hr><ol><li>info</li></ol><div class="fv-message-bar light info"><div class="header"><i style="" class="ms-Icon icon ms-Icon--Error"></i><div class="text close"><!--[--> Message Bar. <!--]--></div><i class="ms-Icon ms-Icon--Cancel close-icon"></i></div><!----></div><div class="language-vue-html"><span class="copy"></span><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-message-bar</span><span style="color:#89DDFF;"> @</span><span style="color:#C792EA;">close</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#82AAFF;">onClose</span><span style="color:#89DDFF;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">info</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">)</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">status</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">info</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-message-bar</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><ol start="2"><li>correct</li></ol><div class="fv-message-bar light correct"><div class="header"><i style="" class="ms-Icon icon ms-Icon--Completed"></i><div class="text close"><!--[--> Message Bar. <!--]--></div><i class="ms-Icon ms-Icon--Cancel close-icon"></i></div><!----></div><div class="language-vue-html"><span class="copy"></span><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-message-bar</span><span style="color:#89DDFF;"> @</span><span style="color:#C792EA;">close</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#82AAFF;">onClose</span><span style="color:#89DDFF;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">correct</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">)</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">status</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">correct</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-message-bar</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><ol start="3"><li>warning</li></ol><div class="fv-message-bar light warning"><div class="header"><i style="" class="ms-Icon icon ms-Icon--Warning"></i><div class="text close"><!--[--> Message Bar. <!--]--></div><i class="ms-Icon ms-Icon--Cancel close-icon"></i></div><!----></div><div class="language-vue-html"><span class="copy"></span><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-message-bar</span><span style="color:#89DDFF;"> @</span><span style="color:#C792EA;">close</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#82AAFF;">onClose</span><span style="color:#89DDFF;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">warning</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">)</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">status</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">warning</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-message-bar</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><ol start="4"><li>error</li></ol><div class="fv-message-bar light error"><div class="header"><i style="" class="ms-Icon icon ms-Icon--ErrorBadge"></i><div class="text close"><!--[--> Message Bar. <!--]--></div><i class="ms-Icon ms-Icon--Cancel close-icon"></i></div><!----></div><div class="language-vue-html"><span class="copy"></span><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-message-bar</span><span style="color:#89DDFF;"> @</span><span style="color:#C792EA;">close</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#82AAFF;">onClose</span><span style="color:#89DDFF;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">error</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">)</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">status</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">error</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-message-bar</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><ol start="5"><li>blocked</li></ol><div class="fv-message-bar light blocked"><div class="header"><i style="" class="ms-Icon icon ms-Icon--Blocked12"></i><div class="text close"><!--[--> Message Bar. <!--]--></div><i class="ms-Icon ms-Icon--Cancel close-icon"></i></div><!----></div><div class="language-vue-html"><span class="copy"></span><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-message-bar</span><span style="color:#89DDFF;"> @</span><span style="color:#C792EA;">close</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#82AAFF;">onClose</span><span style="color:#89DDFF;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">blocked</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">)</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">status</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">blocked</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-message-bar</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="global-function" tabindex="-1">Global Function <a class="header-anchor" href="#global-function" aria-hidden="true">#</a></h3><ol><li>use setup (recommend)</li></ol><div class="language-vue line-numbers-mode"><span class="copy"></span><pre><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">script</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">lang</span><span style="color:#A6ACCD;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">ts</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">setup</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">useTheme</span><span style="color:#A6ACCD;">()</span></span>
-<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> message </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">inject</span><span style="color:#89DDFF;">&lt;</span><span style="color:#FFCB6B;">MessageBarMethod</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">(MessageBarKey)</span></span>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-19c990f1><div class="wrapper" data-v-19c990f1><div class="container" data-v-19c990f1><div class="title" data-v-19c990f1><div class="VPNavBarTitle has-sidebar" data-v-19c990f1 data-v-ab179fa1><a class="title" href="/VFluent3/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>VFluent3</span><!--[--><!--]--></a></div></div><div class="content" data-v-19c990f1><div class="content-body" data-v-19c990f1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-19c990f1><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-19c990f1 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Guide</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-19c990f1 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-19c990f1 data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-19c990f1 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-19c990f1><div class="divider-line" data-v-19c990f1></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-d2ecc192><button data-v-d2ecc192>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-575e6a36><div class="curtain" data-v-575e6a36></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-575e6a36><span class="visually-hidden" id="sidebar-aria-label" data-v-575e6a36> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Basic input</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/button/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/check-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CheckBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/combobox/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Combobox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/details-list/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DetailsList</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drop-down/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DropDown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio-group/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RadioGroup</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/rating-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RatingControl</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/slider/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/toggle-switch/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ToggleSwitch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tag/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Tag</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Collections</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/flip-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>FlipView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/list-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ListView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tree-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TreeView</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Date & Time</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarDatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/time-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TimePicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Dialogs & flyouts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/callout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Callout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Layout</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/collapse/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Collapse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/expander/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Expander</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drawer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Panel</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Media</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/image/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Img</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ImgBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/persona/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Persona</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Menu & toolbars</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/command-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CommandBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/menu-flyout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MenuFlyout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/swipe-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SwipeControl</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Navigation</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/breadcrumb/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationPanel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pivot/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pivot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pagination/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pagination</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Scrolling</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/infinite-scroll-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfiniteScrollView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/scroll-story/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ScrollStory</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible has-active" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Status & info</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/badge/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-ring/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressRing</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Styles</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/animated-icon/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>AnimatedIcon</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/icon-element/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>IconElement</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/reveal-container/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RevealContainer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/shimmer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Shimmer</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Text</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/search-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SearchBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-field/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextField</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/verify-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>VerifyBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Windowing</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/web-window/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>WebWindow</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible has-active" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Global</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Advance</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-935f8a84><div class="content" data-v-935f8a84><div class="outline-marker" data-v-935f8a84></div><div class="outline-title" role="heading" aria-level="2" data-v-935f8a84>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-935f8a84><span class="visually-hidden" id="doc-outline-aria-label" data-v-935f8a84> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-935f8a84 data-v-b933a997><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _VFluent3_guide_components_message-bar_" data-v-39a288b8><div><h3 id="messagebar-demo" tabindex="-1">MessageBar-DEMO <a class="header-anchor" href="#messagebar-demo" aria-label="Permalink to &quot;MessageBar-DEMO&quot;">​</a></h3><hr><p>Default</p><!----><p>Error</p><!----><p>Blocked</p><!----><p>Correct</p><!----><p>Warning</p><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">Default</span></span>
 <span class="line"></span>
-<span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> instance</span><span style="color:#89DDFF;">:</span><span style="color:#FFCB6B;">MessageBarParams</span><span style="color:#89DDFF;">;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-MessageBar</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-MessageBar</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
 <span class="line"></span>
-<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> onClose </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">type</span><span style="color:#89DDFF;">?:</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">info</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">|</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">warning</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">|</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">correct</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">|</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">blocked</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">|</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">error</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">)</span><span style="color:#C792EA;">=&gt;</span><span style="color:#89DDFF;">{</span></span>
-<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">message</span><span style="color:#89DDFF;">!==undefined</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">{</span></span>
-<span class="line"><span style="color:#F07178;">        </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">instance</span><span style="color:#89DDFF;">!==undefined</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">{</span></span>
-<span class="line"><span style="color:#F07178;">            </span><span style="color:#A6ACCD;">instance</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">close</span><span style="color:#F07178;">()</span></span>
-<span class="line"><span style="color:#F07178;">        </span><span style="color:#89DDFF;">}</span></span>
-<span class="line"><span style="color:#F07178;">        </span><span style="color:#A6ACCD;">instance</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">message</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
-<span class="line"><span style="color:#F07178;">            status</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">type</span><span style="color:#89DDFF;">,</span></span>
-<span class="line"><span style="color:#F07178;">            message</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">`</span><span style="color:#C3E88D;">close </span><span style="color:#89DDFF;">${</span><span style="color:#A6ACCD;">type</span><span style="color:#89DDFF;">}</span><span style="color:#C3E88D;"> message bar </span><span style="color:#89DDFF;">`</span><span style="color:#89DDFF;">,</span></span>
-<span class="line"><span style="color:#F07178;">            autoClose</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">,</span></span>
-<span class="line"><span style="color:#F07178;">            theme</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">,</span></span>
-<span class="line"><span style="color:#F07178;">            showControl</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
-<span class="line"><span style="color:#F07178;">            </span><span style="color:#82AAFF;">confirm</span><span style="color:#89DDFF;">:()</span><span style="color:#C792EA;">=&gt;</span><span style="color:#89DDFF;">{</span></span>
-<span class="line"><span style="color:#F07178;">                </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">instance</span><span style="color:#89DDFF;">!==undefined</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">{</span></span>
-<span class="line"><span style="color:#F07178;">                    </span><span style="color:#A6ACCD;">instance</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">close</span><span style="color:#F07178;">()</span></span>
-<span class="line"><span style="color:#F07178;">                </span><span style="color:#89DDFF;">}</span></span>
-<span class="line"><span style="color:#F07178;">                </span><span style="color:#A6ACCD;">instance</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">message</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
-<span class="line"><span style="color:#F07178;">                    status</span><span style="color:#89DDFF;">:</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">correct</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
-<span class="line"><span style="color:#F07178;">                    message</span><span style="color:#89DDFF;">:</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">Confirm</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
-<span class="line"><span style="color:#F07178;">                    theme</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">,</span></span>
-<span class="line"><span style="color:#F07178;">                    autoClose</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">0</span></span>
-<span class="line"><span style="color:#F07178;">                </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span></span>
-<span class="line"><span style="color:#F07178;">            </span><span style="color:#89DDFF;">},</span></span>
-<span class="line"><span style="color:#F07178;">            </span><span style="color:#82AAFF;">cancel</span><span style="color:#89DDFF;">:()</span><span style="color:#C792EA;">=&gt;</span><span style="color:#89DDFF;">{</span></span>
-<span class="line"><span style="color:#F07178;">                </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">instance</span><span style="color:#89DDFF;">!==undefined</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">{</span></span>
-<span class="line"><span style="color:#F07178;">                    </span><span style="color:#A6ACCD;">instance</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">close</span><span style="color:#F07178;">()</span></span>
-<span class="line"><span style="color:#F07178;">                </span><span style="color:#89DDFF;">}</span></span>
-<span class="line"><span style="color:#F07178;">                </span><span style="color:#A6ACCD;">instance</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">message</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
-<span class="line"><span style="color:#F07178;">                    status</span><span style="color:#89DDFF;">:</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">blocked</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
-<span class="line"><span style="color:#F07178;">                    message</span><span style="color:#89DDFF;">:</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">Cancel</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
-<span class="line"><span style="color:#F07178;">                    theme</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">,</span></span>
-<span class="line"><span style="color:#F07178;">                    autoClose</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">0</span></span>
-<span class="line"><span style="color:#F07178;">                </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span></span>
-<span class="line"><span style="color:#F07178;">            </span><span style="color:#89DDFF;">}</span></span>
-<span class="line"><span style="color:#F07178;">        </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span></span>
-<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">}</span></span>
-<span class="line"><span style="color:#89DDFF;">}</span></span>
-<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br></div></div><ol start="2"><li>use options</li></ol><div class="language-vue line-numbers-mode"><span class="copy"></span><pre><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">script</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">lang</span><span style="color:#A6ACCD;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">ts</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#C792EA;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#89DDFF;">{</span></span>
-<span class="line"><span style="color:#F07178;">    </span><span style="color:#FFCB6B;">methods</span><span style="color:#89DDFF;">:{</span></span>
-<span class="line"><span style="color:#F07178;">        </span><span style="color:#82AAFF;">message</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">{</span></span>
-<span class="line"><span style="color:#F07178;">            </span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">instance</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">this.</span><span style="color:#82AAFF;">$barWarning</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
-<span class="line"><span style="color:#F07178;">                status</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">type</span><span style="color:#89DDFF;">,</span></span>
-<span class="line"><span style="color:#F07178;">                message</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">`</span><span style="color:#C3E88D;">close </span><span style="color:#89DDFF;">${</span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">type</span><span style="color:#89DDFF;">}</span><span style="color:#C3E88D;"> message bar</span><span style="color:#89DDFF;">`</span><span style="color:#89DDFF;">,</span></span>
-<span class="line"><span style="color:#F07178;">                autoClose</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">,</span></span>
-<span class="line"><span style="color:#F07178;">                theme</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">,</span></span>
-<span class="line"><span style="color:#F07178;">                showControl</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
-<span class="line"><span style="color:#F07178;">                </span><span style="color:#82AAFF;">confirm</span><span style="color:#89DDFF;">:()</span><span style="color:#C792EA;">=&gt;</span><span style="color:#89DDFF;">{</span></span>
-<span class="line"><span style="color:#F07178;">                    </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">instance</span><span style="color:#89DDFF;">!==undefined</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">{</span></span>
-<span class="line"><span style="color:#F07178;">                        </span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">instance</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">close</span><span style="color:#F07178;">()</span></span>
-<span class="line"><span style="color:#F07178;">                    </span><span style="color:#89DDFF;">}</span></span>
-<span class="line"><span style="color:#F07178;">                    </span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">instance</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">this.</span><span style="color:#82AAFF;">$barWarning</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
-<span class="line"><span style="color:#F07178;">                        status</span><span style="color:#89DDFF;">:</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">correct</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
-<span class="line"><span style="color:#F07178;">                        message</span><span style="color:#89DDFF;">:</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">Confirm</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
-<span class="line"><span style="color:#F07178;">                        theme</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">,</span></span>
-<span class="line"><span style="color:#F07178;">                        autoClose</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">0</span></span>
-<span class="line"><span style="color:#F07178;">                    </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span></span>
-<span class="line"><span style="color:#F07178;">                </span><span style="color:#89DDFF;">},</span></span>
-<span class="line"><span style="color:#F07178;">                </span><span style="color:#82AAFF;">cancel</span><span style="color:#89DDFF;">:()</span><span style="color:#C792EA;">=&gt;</span><span style="color:#89DDFF;">{</span></span>
-<span class="line"><span style="color:#F07178;">                    </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">instance</span><span style="color:#89DDFF;">!==undefined</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">{</span></span>
-<span class="line"><span style="color:#F07178;">                        </span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">instance</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">close</span><span style="color:#F07178;">()</span></span>
-<span class="line"><span style="color:#F07178;">                    </span><span style="color:#89DDFF;">}</span></span>
-<span class="line"><span style="color:#F07178;">                    </span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">instance</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">this.</span><span style="color:#82AAFF;">$barWarning</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
-<span class="line"><span style="color:#F07178;">                        status</span><span style="color:#89DDFF;">:</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">blocked</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
-<span class="line"><span style="color:#F07178;">                        message</span><span style="color:#89DDFF;">:</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">Cancel</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
-<span class="line"><span style="color:#F07178;">                        theme</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">,</span></span>
-<span class="line"><span style="color:#F07178;">                        autoClose</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">0</span></span>
-<span class="line"><span style="color:#F07178;">                    </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span></span>
-<span class="line"><span style="color:#F07178;">                </span><span style="color:#89DDFF;">}</span></span>
-<span class="line"><span style="color:#F07178;">            </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span></span>
-<span class="line"><span style="color:#F07178;">        </span><span style="color:#89DDFF;">}</span></span>
-<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">}</span></span>
-<span class="line"><span style="color:#89DDFF;">}</span></span>
-<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br></div></div><h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">cancel-title</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;Cancel&#39;</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">confirm-title</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;Confirm&#39;</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">disabled</td></tr><tr><td style="text-align:center;">icon</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">icon</td></tr><tr><td style="text-align:center;">lang</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">i18n</td></tr><tr><td style="text-align:center;">show-close</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">true</td><td style="text-align:center;">show close icon</td></tr><tr><td style="text-align:center;">show-control</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">show confirm and cancel button</td></tr><tr><td style="text-align:center;">status</td><td style="text-align:center;">[&#39;info&#39;,&#39;correct&#39;,&#39;warning&#39;,&#39;error&#39;,&#39;blocked&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;info&#39;</td><td style="text-align:center;">message bar status</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">[&#39;light&#39;,&#39;dark&#39;,&#39;global&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">theme</td></tr></tbody></table><h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">cancel</td><td style="text-align:center;"></td><td style="text-align:center;">oncancel</td></tr><tr><td style="text-align:center;">close</td><td style="text-align:center;"></td><td style="text-align:center;">onclose</td></tr><tr><td style="text-align:center;">confirm</td><td style="text-align:center;"></td><td style="text-align:center;">onconfirm</td></tr></tbody></table></div></div></main><footer class="VPDocFooter" data-v-32b7ddf4 data-v-cfaa3a6c><div class="edit-info" data-v-cfaa3a6c><!----><!----></div><div class="prev-next" data-v-cfaa3a6c><div class="pager" data-v-cfaa3a6c><a class="pager-link prev" href="/VFluent3/guide/components/combo-box/" data-v-cfaa3a6c><span class="desc" data-v-cfaa3a6c>Previous page</span><span class="title" data-v-cfaa3a6c>ComboBox</span></a></div><div class="has-prev pager" data-v-cfaa3a6c><a class="pager-link next" href="/VFluent3/guide/components/info-box/" data-v-cfaa3a6c><span class="desc" data-v-cfaa3a6c>Next page</span><span class="title" data-v-cfaa3a6c>InfoBox</span></a></div></div></footer><!--[--><!--]--></div></div></div></div></div><footer class="VPFooter has-sidebar" data-v-058b7495 data-v-a6c8dde4><div class="container" data-v-a6c8dde4><p class="message" data-v-a6c8dde4>MIT Licensed</p><p class="copyright" data-v-a6c8dde4>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
-    <script>__VP_HASH_MAP__ = JSON.parse("{\"guide_components_button_emits.md\":\"d682bf18\",\"guide_components_button_index.md\":\"23a8eb54\",\"guide_components_button_properties.md\":\"cd4004b6\",\"guide_components_check-box_emits.md\":\"31609794\",\"guide_components_check-box_index.md\":\"32046814\",\"guide_components_check-box_properties.md\":\"8f33ac0c\",\"guide_components_color-picker_emits.md\":\"00983cd0\",\"guide_components_color-picker_index.md\":\"b2d62612\",\"guide_components_color-picker_properties.md\":\"5466ba72\",\"guide_components_combo-box_emits.md\":\"d5ffda50\",\"guide_components_combo-box_index.md\":\"1c4364f5\",\"guide_components_combo-box_properties.md\":\"2e1d6060\",\"guide_components_img_emits.md\":\"6237adb4\",\"guide_components_img_index.md\":\"fa51a3a1\",\"guide_components_img_properties.md\":\"8d321b5e\",\"guide_components_info-box_emits.md\":\"c2e71eec\",\"guide_components_info-box_index.md\":\"06175fed\",\"guide_components_info-box_properties.md\":\"314dbb00\",\"guide_components_message-bar_emits.md\":\"e89a5a22\",\"guide_components_message-bar_index.md\":\"3f0b01d6\",\"guide_components_message-bar_properties.md\":\"ee3838d9\",\"guide_components_progress-bar_emits.md\":\"5b611e3b\",\"guide_components_progress-bar_index.md\":\"689c3241\",\"guide_components_progress-bar_properties.md\":\"39af7fb2\",\"guide_components_progress-ring_emits.md\":\"67e4644e\",\"guide_components_progress-ring_index.md\":\"9a33542b\",\"guide_components_progress-ring_properties.md\":\"c897c4bb\",\"guide_components_radio_emits.md\":\"28506857\",\"guide_components_radio_index.md\":\"e5a479ce\",\"guide_components_radio_properties.md\":\"f8e55d2f\",\"guide_components_text-box_emits.md\":\"0bf89ef8\",\"guide_components_text-box_index.md\":\"7ccfc637\",\"guide_components_text-box_properties.md\":\"aab3a89e\",\"guide_components_toggle-switch_emits.md\":\"5146435f\",\"guide_components_toggle-switch_index.md\":\"8be48081\",\"guide_components_toggle-switch_properties.md\":\"54984c3a\",\"guide_index.md\":\"e3dca1d7\",\"index.md\":\"1e9773d5\"}")</script>
-    <script type="module" async src="/VFluent3/assets/app.d60fa8c3.js"></script>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">Error</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-MessageBar</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> status</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;error&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-MessageBar</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">Blocked</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-MessageBar</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> status</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;blocked&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-MessageBar</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">Correct</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-MessageBar</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> status</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;correct&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-MessageBar</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">Warning</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-MessageBar</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> status</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;warning&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-MessageBar</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br></div></div><h3 id="messagebar-dark-theme" tabindex="-1">MessageBar-Dark Theme <a class="header-anchor" href="#messagebar-dark-theme" aria-label="Permalink to &quot;MessageBar-Dark Theme&quot;">​</a></h3><hr><p>Default</p><!----><p>Error</p><!----><p>Blocked</p><!----><p>Correct</p><!----><p>Warning</p><!----><h3 id="messagebar-toast" tabindex="-1">MessageBar-Toast <a class="header-anchor" href="#messagebar-toast" aria-label="Permalink to &quot;MessageBar-Toast&quot;">​</a></h3><hr><ol><li>Standard</li></ol><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">200</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> @</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">click</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">show1</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Show MessageBar&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-javascript vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$barWarning</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;This is a toast message.&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    status: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;correct&#39;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ol start="2"><li>Customize Message Template</li></ol><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">200</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> @</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">click</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">show2</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Show MessageBar&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-javascript vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$barWarning</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">h</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;div&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, [</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    h</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;span&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, { class: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;header&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Message&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">),</span></span>
+<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">    &#39;This is a toast message.&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    h</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;a&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Visit our website.&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]), {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    status: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;correct&#39;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><ol start="3"><li>Customize Control Template</li></ol><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">200</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> @</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">click</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">show3</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Show MessageBar&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-javascript vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$barWarning</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">h</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;div&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, [</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    h</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;span&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, { class: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;header&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Message&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">),</span></span>
+<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">    &#39;This is a toast message.&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    h</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;a&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Visit our website.&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]), {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    status: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;correct&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    showControl: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    autoClose: </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">-</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    control</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">x</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">        return</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> h</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;div&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            style: {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                display: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;flex&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                alignItems: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;center&quot;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        }, [</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">            h</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">resolveComponent</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;fv-button&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">), {</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">                onClick</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">                    alert</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Yes&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                    x.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">cancel</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            }, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Yes&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">),</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">            h</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">resolveComponent</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;fv-button&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">), {</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">                onClick</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">                    alert</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;No&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                    x.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">cancel</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                style: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;margin-left: 5px;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;No&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        ]);</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br></div></div><h3 id="swiftwarning" tabindex="-1">SwiftWarning <a class="header-anchor" href="#swiftwarning" aria-label="Permalink to &quot;SwiftWarning&quot;">​</a></h3><p id="example">Swift Warning</p><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;example&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Swift Warning&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">200</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> @</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">click</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">showSwiftWarning</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Click to Show SwiftWarning&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><div class="language-javascript vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$swiftWarning</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(document.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getElementById</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;example&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">), {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    color: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rgba(173, 38, 45, 1)&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    replaceTitle: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;You clicked Swift Warning.&quot;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">status</td><td style="text-align:center;">[&#39;default&#39;,&#39;warning&#39;,&#39;correct&#39;,&#39;blocked&#39;,&#39;error&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">default</td><td style="text-align:center;">显示状态, 一共有5种</td></tr><tr><td style="text-align:center;">showControl</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否显示控制按钮</td></tr><tr><td style="text-align:center;">showClose</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">true</td><td style="text-align:center;">是否显示关闭按钮</td></tr><tr><td style="text-align:center;">mode</td><td style="text-align:center;">[&#39;relative&#39;,&#39;fixed&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">relative</td><td style="text-align:center;">显示模式<code>relative</code>下位相对定位, <code>fixed</code>下为悬浮固定定位</td></tr><tr><td style="text-align:center;">autoClose</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">3000</td><td style="text-align:center;">MessageBar自动关闭时间, 单位为<code>ms</code>, 设为<code>-1</code>时永远不自动消失</td></tr></tbody></table><h3 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to &quot;Events&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">事件名(Name)</th><th style="text-align:center;">参数类型(args)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">close</td><td style="text-align:center;"></td><td style="text-align:center;">关闭<code>MessageBar</code>时触发事件</td></tr></tbody></table><h3 id="slot" tabindex="-1">Slot <a class="header-anchor" href="#slot" aria-label="Permalink to &quot;Slot&quot;">​</a></h3><hr><ol><li>Msg</li></ol><ul><li>默认为正常标题</li><li><code>class=&quot;header&quot;</code> 加粗标题</li><li><code>&lt;a&gt;&lt;/a&gt;</code> 链接</li></ul><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">msg</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Normal content &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;header&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Header content&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">a</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Link&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">a</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ol start="2"><li>Control</li></ol><ul><li>cancel: 取消函数</li><li>theme: 当前主题</li></ul><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">control</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> @</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">click</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">cancel</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Yes&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="toast" tabindex="-1">Toast <a class="header-anchor" href="#toast" aria-label="Permalink to &quot;Toast&quot;">​</a></h3><hr><div class="language-javascript vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$barWarning</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(msg, options </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    status: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;default&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    showControl: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    showClose: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    control: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">null</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    mode: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;fixed&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    autoClose: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">3000</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">control_panel</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">x</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =&gt;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> h</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 传入具名插槽属性参数的函数, 函数返回值为$createElement函数</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><div class="language-javascript vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$swiftWarning</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(element, options </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    color: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rgba(173, 38, 45, 1)&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    replaceTitle: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Swift Warning&quot;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-09de1c0f><!--[--><!--]--><!----><nav class="prev-next" data-v-09de1c0f><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link prev" href="/VFluent3/guide/components/badge/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Previous page</span><span class="title" data-v-09de1c0f>Badge</span><!--]--></a></div><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link next" href="/VFluent3/guide/components/progress-bar/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Next page</span><span class="title" data-v-09de1c0f>ProgressBar</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>MIT Licensed</p><p class="copyright" data-v-e315a0ad>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_calendar-date-picker_properties.md\":\"DXRjmMG8\",\"guide_components_image_properties.md\":\"DGanRzCb\",\"guide_components_img-box_index.md\":\"DYtggkf_\",\"guide_components_img_emits.md\":\"BlE7jvZQ\",\"guide_components_img_index.md\":\"Bm9FiuU4\",\"guide_components_icon-element_properties.md\":\"8Oakruwc\",\"guide_components_img_properties.md\":\"B42YSocI\",\"guide_components_drawer_index.md\":\"D_vpnCpE\",\"guide_components_verify-box_emits.md\":\"DT17Iazx\",\"guide_components_calendar-date-picker_index.md\":\"BdHjrurh\",\"guide_components_rating-control_index.md\":\"Q9l5Lfrr\",\"guide_components_rating-control_properties.md\":\"DKprnl0i\",\"guide_components_calendar-view_index.md\":\"zdoRYVx1\",\"guide_components_animated-icon_index.md\":\"yZDMzCFe\",\"guide_components_calendar-date-picker_emits.md\":\"D5OkfR8j\",\"guide_components_badge_index.md\":\"Bb4crrJn\",\"guide_components_image_index.md\":\"B7X6cWAZ\",\"guide_components_slider_index.md\":\"C7zZ2d-W\",\"guide_components_radio-group_index.md\":\"CVfh3h5H\",\"guide_components_swipe-control_index.md\":\"DwrDVPc1\",\"guide_components_color-picker_emits.md\":\"BHDXVtBQ\",\"guide_components_radio_index.md\":\"90as5QGp\",\"guide_components_pagination_properties.md\":\"JUAPvcTL\",\"guide_components_persona_properties.md\":\"DUTPhPMp\",\"guide_components_combo-box_emits.md\":\"Dh5R-qEv\",\"guide_components_pivot_emits.md\":\"BTJPgNpy\",\"guide_components_pagination_index.md\":\"CnW2zAht\",\"guide_components_flip-view_properties.md\":\"BqZ4hhgU\",\"guide_components_icon-element_emits.md\":\"D5TXFdTZ\",\"guide_components_flip-view_index.md\":\"DefnDOv6\",\"guide_components_navigation-panel_index.md\":\"6mO__sSK\",\"guide_components_rating-control_emits.md\":\"blvomSeC\",\"guide_components_icon-element_index.md\":\"DQ8K7JNn\",\"guide_components_navigation-view_index.md\":\"4AQRiz1k\",\"guide_components_toggle-switch_emits.md\":\"CLGzrNut\",\"guide_components_toggle-switch_index.md\":\"61en_q9-\",\"guide_components_scroll-story_index.md\":\"Vpgb1HSV\",\"guide_components_reveal-container_index.md\":\"Cut2r4tV\",\"guide_components_search-box_emits.md\":\"-d9sWNNt\",\"guide_components_search-box_properties.md\":\"DEKFfPFw\",\"guide_components_shimmer_emits.md\":\"CTMInlI3\",\"guide_components_tag_index.md\":\"BhhxkcHn\",\"guide_components_search-box_index.md\":\"DgkrY0oY\",\"guide_components_shimmer_index.md\":\"iZlHuTxw\",\"guide_components_shimmer_properties.md\":\"CdkU1o6H\",\"guide_components_tree-view_index.md\":\"CUrwan4q\",\"guide_components_text-field_index.md\":\"CXSimJtj\",\"guide_components_text-box_index.md\":\"C5moAPfB\",\"guide_components_progress-ring_properties.md\":\"Dc08Uiff\",\"guide_components_toggle-switch_properties.md\":\"tFppK_IS\",\"guide_components_radio-group_emits.md\":\"cEDzKVnN\",\"guide_components_collapse_index.md\":\"N9Iu5-2v\",\"guide_components_image_emits.md\":\"lmlz2xJd\",\"guide_components_callout_index.md\":\"D9RU33w6\",\"guide_components_pivot_index.md\":\"B_vwQL-5\",\"guide_components_command-bar_index.md\":\"Cp4_rrGB\",\"guide_components_pagination_emits.md\":\"Dng86A22\",\"guide_components_button_index.md\":\"7sqT2MQP\",\"guide_components_info-box_properties.md\":\"BI7Nvk-E\",\"guide_components_drop-down_emits.md\":\"BE95TdKW\",\"guide_components_expander_index.md\":\"BKgcUJzQ\",\"guide_components_message-bar_index.md\":\"AEtAWlF8\",\"guide_components_menu-flyout_index.md\":\"Csa7irPj\",\"guide_components_panel_index.md\":\"CsTu0bXo\",\"guide_components_panel_properties.md\":\"BaxoCYKq\",\"guide_components_progress-bar_emits.md\":\"BcwXUpsF\",\"guide_components_progress-bar_properties.md\":\"TxiS9ZMA\",\"guide_components_progress-ring_emits.md\":\"D2Y6hIZ9\",\"guide_components_color-picker_index.md\":\"DCc4ixcU\",\"guide_components_progress-ring_index.md\":\"CPb-ZEPE\",\"guide_components_color-picker_properties.md\":\"wcXK29Vl\",\"guide_components_time-picker_index.md\":\"CQJdRRaG\",\"guide_components_drop-down_properties.md\":\"Bwlkpr1q\",\"guide_components_infinite-scroll-view_index.md\":\"yAuD807x\",\"guide_components_check-box_index.md\":\"FYgdu4oq\",\"guide_components_progress-bar_index.md\":\"D8vHQw5V\",\"guide_components_combo-box_index.md\":\"DTyu3eNd\",\"guide_components_info-box_emits.md\":\"DlEwpkkq\",\"guide_components_drop-down_index.md\":\"BZzJZQWq\",\"guide_components_list-view_index.md\":\"BoYvMzb0\",\"guide_components_verify-box_properties.md\":\"CW6W8fFf\",\"guide_components_verify-box_index.md\":\"DwSB40wR\",\"guide_index.md\":\"Bndlt3sL\",\"guide_components_web-window_index.md\":\"Bxc8vEeI\",\"index.md\":\"MTRqI42u\",\"guide_components_combo-box_properties.md\":\"AWfHzV6x\",\"guide_components_combobox_emits.md\":\"CGB6WLt8\",\"guide_components_combobox_properties.md\":\"Bja0hMou\",\"guide_components_details-list_index.md\":\"CcgOCIyt\",\"guide_components_info-box_index.md\":\"vXh-_DsL\",\"guide_components_combobox_index.md\":\"CsPkY6YB\",\"guide_components_date-picker_index.md\":\"12vmUIup\",\"guide_components_flip-view_emits.md\":\"DCheHjDj\",\"guide_components_panel_emits.md\":\"DG0REDq8\",\"guide_components_breadcrumb_index.md\":\"DyDm7PeP\",\"guide_components_radio-group_properties.md\":\"BnPxoKsQ\",\"guide_components_persona_emits.md\":\"CnsDPKRU\",\"guide_components_pivot_properties.md\":\"BmoLpPi1\",\"guide_components_persona_index.md\":\"DT00jby4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vfluent3\",\"description\":\"A Vue3 component library for Fluent UI\",\"base\":\"/VFluent3/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"VFluent3\",\"footer\":{\"message\":\"MIT Licensed\",\"copyright\":\"Copyright © Creator SN - 2022\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/\"}],\"sidebar\":[{\"text\":\"Basic input\",\"collapsed\":true,\"items\":[{\"text\":\"Button\",\"link\":\"/guide/components/button/\"},{\"text\":\"CheckBox\",\"link\":\"/guide/components/check-box/\"},{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"},{\"text\":\"Combobox\",\"link\":\"/guide/components/combobox/\"},{\"text\":\"DetailsList\",\"link\":\"/guide/components/details-list/\"},{\"text\":\"DropDown\",\"link\":\"/guide/components/drop-down/\"},{\"text\":\"Radio\",\"link\":\"/guide/components/radio/\"},{\"text\":\"RadioGroup\",\"link\":\"/guide/components/radio-group/\"},{\"text\":\"RatingControl\",\"link\":\"/guide/components/rating-control/\"},{\"text\":\"Slider\",\"link\":\"/guide/components/slider/\"},{\"text\":\"ToggleSwitch\",\"link\":\"/guide/components/toggle-switch/\"},{\"text\":\"Tag\",\"link\":\"/guide/components/tag/\"}]},{\"text\":\"Collections\",\"collapsed\":true,\"items\":[{\"text\":\"FlipView\",\"link\":\"/guide/components/flip-view/\"},{\"text\":\"ListView\",\"link\":\"/guide/components/list-view/\"},{\"text\":\"TreeView\",\"link\":\"/guide/components/tree-view/\"}]},{\"text\":\"Date & Time\",\"collapsed\":true,\"items\":[{\"text\":\"CalendarDatePicker\",\"link\":\"/guide/components/calendar-date-picker/\"},{\"text\":\"CalendarView\",\"link\":\"/guide/components/calendar-view/\"},{\"text\":\"DatePicker\",\"link\":\"/guide/components/date-picker/\"},{\"text\":\"TimePicker\",\"link\":\"/guide/components/time-picker/\"}]},{\"text\":\"Dialogs & flyouts\",\"collapsed\":true,\"items\":[{\"text\":\"Callout\",\"link\":\"/guide/components/callout/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Layout\",\"collapsed\":true,\"items\":[{\"text\":\"Collapse\",\"link\":\"/guide/components/collapse/\"},{\"text\":\"Expander\",\"link\":\"/guide/components/expander/\"},{\"text\":\"Drawer\",\"link\":\"/guide/components/drawer/\"},{\"text\":\"Panel\",\"link\":\"/guide/components/panel/\"}]},{\"text\":\"Media\",\"collapsed\":true,\"items\":[{\"text\":\"Image\",\"link\":\"/guide/components/image/\"},{\"text\":\"Img\",\"link\":\"/guide/components/img/\"},{\"text\":\"ImgBox\",\"link\":\"/guide/components/img-box/\"},{\"text\":\"Persona\",\"link\":\"/guide/components/persona/\"}]},{\"text\":\"Menu & toolbars\",\"collapsed\":true,\"items\":[{\"text\":\"CommandBar\",\"link\":\"/guide/components/command-bar/\"},{\"text\":\"MenuFlyout\",\"link\":\"/guide/components/menu-flyout/\"},{\"text\":\"SwipeControl\",\"link\":\"/guide/components/swipe-control/\"}]},{\"text\":\"Navigation\",\"collapsed\":true,\"items\":[{\"text\":\"Breadcrumb\",\"link\":\"/guide/components/breadcrumb/\"},{\"text\":\"NavigationPanel\",\"link\":\"/guide/components/navigation-panel/\"},{\"text\":\"NavigationView\",\"link\":\"/guide/components/navigation-view/\"},{\"text\":\"Pivot\",\"link\":\"/guide/components/pivot/\"},{\"text\":\"Pagination\",\"link\":\"/guide/components/pagination/\"}]},{\"text\":\"Scrolling\",\"collapsed\":true,\"items\":[{\"text\":\"InfiniteScrollView\",\"link\":\"/guide/components/infinite-scroll-view/\"},{\"text\":\"ScrollStory\",\"link\":\"/guide/components/scroll-story/\"}]},{\"text\":\"Status & info\",\"collapsed\":true,\"items\":[{\"text\":\"Badge\",\"link\":\"/guide/components/badge/\"},{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"ProgressBar\",\"link\":\"/guide/components/progress-bar/\"},{\"text\":\"ProgressRing\",\"link\":\"/guide/components/progress-ring/\"}]},{\"text\":\"Styles\",\"collapsed\":true,\"items\":[{\"text\":\"AnimatedIcon\",\"link\":\"/guide/components/animated-icon/\"},{\"text\":\"IconElement\",\"link\":\"/guide/components/icon-element/\"},{\"text\":\"RevealContainer\",\"link\":\"/guide/components/reveal-container/\"},{\"text\":\"Shimmer\",\"link\":\"/guide/components/shimmer/\"}]},{\"text\":\"Text\",\"collapsed\":true,\"items\":[{\"text\":\"SearchBox\",\"link\":\"/guide/components/search-box/\"},{\"text\":\"TextBox\",\"link\":\"/guide/components/text-box/\"},{\"text\":\"TextField\",\"link\":\"/guide/components/text-field/\"},{\"text\":\"VerifyBox\",\"link\":\"/guide/components/verify-box/\"}]},{\"text\":\"Windowing\",\"collapsed\":true,\"items\":[{\"text\":\"WebWindow\",\"link\":\"/guide/components/web-window/\"}]},{\"text\":\"Global\",\"collapsed\":true,\"items\":[{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Advance\",\"collapsed\":true,\"items\":[{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
     
   </body>
 </html>
\ No newline at end of file
diff --git a/guide/components/message-bar/properties.html b/guide/components/message-bar/properties.html
deleted file mode 100644
index b31887f..0000000
--- a/guide/components/message-bar/properties.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<!DOCTYPE html>
-<html lang="en-US">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>Properties | vfluent3</title>
-    <meta name="description" content="A Vue3 component library for Fluent UI">
-    <link rel="stylesheet" href="/VFluent3/assets/style.0a1d87af.css">
-    <link rel="modulepreload" href="/VFluent3/assets/app.d60fa8c3.js">
-    <link rel="modulepreload" href="/VFluent3/assets/guide_components_message-bar_properties.md.ee3838d9.lean.js">
-    
-    <script>(()=>{const e=localStorage.getItem("vitepress-theme-appearance"),a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
-  </head>
-  <body>
-    <div id="app"><div class="Layout" data-v-058b7495><!--[--><!--]--><!--[--><span tabindex="-1" data-v-bea91388></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-bea91388> Skip to content </a><!--]--><!----><header class="VPNav" data-v-058b7495 data-v-2a0a2738><div class="VPNavBar has-sidebar" data-v-2a0a2738 data-v-45c9f423><div class="container" data-v-45c9f423><div class="VPNavBarTitle has-sidebar" data-v-45c9f423 data-v-011600ce><a class="title" href="/VFluent3/" data-v-011600ce><!----><!--[-->VFluent3<!--]--></a></div><div class="content" data-v-45c9f423><!----><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-45c9f423 data-v-4da4371d><span id="main-nav-aria-label" class="visually-hidden" data-v-4da4371d>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" data-v-4da4371d data-v-66f8d518 data-v-4d08dd3a><!--[-->Home<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" data-v-4da4371d data-v-66f8d518 data-v-4d08dd3a><!--[-->Guide<!--]--><!----></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-45c9f423 data-v-bf1c94ca><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" data-v-bf1c94ca data-v-d0ee0df2 data-v-55b931a0><span class="check" data-v-55b931a0><span class="icon" data-v-55b931a0><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-d0ee0df2><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-d0ee0df2><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-45c9f423 data-v-7cece6ac data-v-37af1650><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-37af1650><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-37af1650><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-37af1650><div class="VPMenu" data-v-37af1650 data-v-17dc081b><!----><!--[--><!--[--><!----><div class="group" data-v-7cece6ac><div class="item appearance" data-v-7cece6ac><p class="label" data-v-7cece6ac>Appearance</p><div class="appearance-action" data-v-7cece6ac><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" data-v-7cece6ac data-v-d0ee0df2 data-v-55b931a0><span class="check" data-v-55b931a0><span class="icon" data-v-55b931a0><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-d0ee0df2><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-d0ee0df2><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-45c9f423 data-v-5484e669><span class="container" data-v-5484e669><span class="top" data-v-5484e669></span><span class="middle" data-v-5484e669></span><span class="bottom" data-v-5484e669></span></span></button></div></div></div><!----></header><div class="VPLocalNav" data-v-058b7495 data-v-f623cd72><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-f623cd72><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-f623cd72><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-f623cd72>Menu</span></button><a class="top-link" href="#" data-v-f623cd72> Return to top </a></div><aside class="VPSidebar" data-v-058b7495 data-v-3b8ec0c7><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-3b8ec0c7><span class="visually-hidden" id="sidebar-aria-label" data-v-3b8ec0c7> Sidebar Navigation </span><!--[--><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Basic</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/button/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Button</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/check-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>CheckBox</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/radio/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Radio</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/progress-bar/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ProgressBar</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/progress-ring/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ProgressRing</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/toggle-switch/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ToggleSwitch</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/img/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Img</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/text-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>TextBox</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/combo-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ComboBox</span><!--]--><!----></a><!--]--></div></section></div><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Global</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/message-bar/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>MessageBar</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/info-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>InfoBox</span><!--]--><!----></a><!--]--></div></section></div><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Advance</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/color-picker/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ColorPicker</span><!--]--><!----></a><!--]--></div></section></div><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-058b7495 data-v-564173e9><div class="VPDoc has-sidebar" data-v-564173e9 data-v-32b7ddf4><div class="container" data-v-32b7ddf4><div class="aside" data-v-32b7ddf4><div class="aside-curtain" data-v-32b7ddf4></div><div class="aside-container" data-v-32b7ddf4><div class="aside-content" data-v-32b7ddf4><div class="VPDocAside" data-v-32b7ddf4 data-v-35c1bae1><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline has-outline" data-v-35c1bae1 data-v-123cce62><div class="content" data-v-123cce62><div class="outline-marker" data-v-123cce62></div><div class="outline-title" data-v-123cce62>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-123cce62><span class="visually-hidden" id="doc-outline-aria-label" data-v-123cce62> Table of Contents for current page </span><ul class="root" data-v-123cce62><!--[--><li style="" data-v-123cce62><a class="outline-link" href="#properties" data-v-123cce62>Properties</a><!----></li><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-35c1bae1></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-32b7ddf4><div class="content-container" data-v-32b7ddf4><!--[--><!--]--><main class="main" data-v-32b7ddf4><div style="position:relative;" class="vp-doc _VFluent3_guide_components_message-bar_properties" data-v-32b7ddf4><div><h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">cancel-title</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;Cancel&#39;</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">confirm-title</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;Confirm&#39;</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">disabled</td></tr><tr><td style="text-align:center;">icon</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">icon</td></tr><tr><td style="text-align:center;">lang</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">i18n</td></tr><tr><td style="text-align:center;">show-close</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">true</td><td style="text-align:center;">show close icon</td></tr><tr><td style="text-align:center;">show-control</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">show confirm and cancel button</td></tr><tr><td style="text-align:center;">status</td><td style="text-align:center;">[&#39;info&#39;,&#39;correct&#39;,&#39;warning&#39;,&#39;error&#39;,&#39;blocked&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;info&#39;</td><td style="text-align:center;">message bar status</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">[&#39;light&#39;,&#39;dark&#39;,&#39;global&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">theme</td></tr></tbody></table></div></div></main><footer class="VPDocFooter" data-v-32b7ddf4 data-v-cfaa3a6c><div class="edit-info" data-v-cfaa3a6c><!----><!----></div><div class="prev-next" data-v-cfaa3a6c><div class="pager" data-v-cfaa3a6c><!----></div><div class="pager" data-v-cfaa3a6c><a class="pager-link next" href="/VFluent3/guide/components/button/" data-v-cfaa3a6c><span class="desc" data-v-cfaa3a6c>Next page</span><span class="title" data-v-cfaa3a6c>Button</span></a></div></div></footer><!--[--><!--]--></div></div></div></div></div><footer class="VPFooter has-sidebar" data-v-058b7495 data-v-a6c8dde4><div class="container" data-v-a6c8dde4><p class="message" data-v-a6c8dde4>MIT Licensed</p><p class="copyright" data-v-a6c8dde4>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
-    <script>__VP_HASH_MAP__ = JSON.parse("{\"guide_components_button_emits.md\":\"d682bf18\",\"guide_components_button_index.md\":\"23a8eb54\",\"guide_components_button_properties.md\":\"cd4004b6\",\"guide_components_check-box_emits.md\":\"31609794\",\"guide_components_check-box_index.md\":\"32046814\",\"guide_components_check-box_properties.md\":\"8f33ac0c\",\"guide_components_color-picker_emits.md\":\"00983cd0\",\"guide_components_color-picker_index.md\":\"b2d62612\",\"guide_components_color-picker_properties.md\":\"5466ba72\",\"guide_components_combo-box_emits.md\":\"d5ffda50\",\"guide_components_combo-box_index.md\":\"1c4364f5\",\"guide_components_combo-box_properties.md\":\"2e1d6060\",\"guide_components_img_emits.md\":\"6237adb4\",\"guide_components_img_index.md\":\"fa51a3a1\",\"guide_components_img_properties.md\":\"8d321b5e\",\"guide_components_info-box_emits.md\":\"c2e71eec\",\"guide_components_info-box_index.md\":\"06175fed\",\"guide_components_info-box_properties.md\":\"314dbb00\",\"guide_components_message-bar_emits.md\":\"e89a5a22\",\"guide_components_message-bar_index.md\":\"3f0b01d6\",\"guide_components_message-bar_properties.md\":\"ee3838d9\",\"guide_components_progress-bar_emits.md\":\"5b611e3b\",\"guide_components_progress-bar_index.md\":\"689c3241\",\"guide_components_progress-bar_properties.md\":\"39af7fb2\",\"guide_components_progress-ring_emits.md\":\"67e4644e\",\"guide_components_progress-ring_index.md\":\"9a33542b\",\"guide_components_progress-ring_properties.md\":\"c897c4bb\",\"guide_components_radio_emits.md\":\"28506857\",\"guide_components_radio_index.md\":\"e5a479ce\",\"guide_components_radio_properties.md\":\"f8e55d2f\",\"guide_components_text-box_emits.md\":\"0bf89ef8\",\"guide_components_text-box_index.md\":\"7ccfc637\",\"guide_components_text-box_properties.md\":\"aab3a89e\",\"guide_components_toggle-switch_emits.md\":\"5146435f\",\"guide_components_toggle-switch_index.md\":\"8be48081\",\"guide_components_toggle-switch_properties.md\":\"54984c3a\",\"guide_index.md\":\"e3dca1d7\",\"index.md\":\"1e9773d5\"}")</script>
-    <script type="module" async src="/VFluent3/assets/app.d60fa8c3.js"></script>
-    
-  </body>
-</html>
\ No newline at end of file
diff --git a/guide/components/navigation-panel/index.html b/guide/components/navigation-panel/index.html
new file mode 100644
index 0000000..a3bc5d6
--- /dev/null
+++ b/guide/components/navigation-panel/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>NavigationPanel | vfluent3</title>
+    <meta name="description" content="A Vue3 component library for Fluent UI">
+    <meta name="generator" content="VitePress v1.0.0-rc.45">
+    <link rel="preload stylesheet" href="/VFluent3/assets/style.BabQegKX.css" as="style">
+    
+    <script type="module" src="/VFluent3/assets/app.CSutcJ2E.js"></script>
+    <link rel="preload" href="/VFluent3/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/framework.DvIFzl91.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/theme.CgqFBnN_.js">
+    <link rel="modulepreload" href="/VFluent3/assets/guide_components_navigation-panel_index.md.6mO__sSK.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-19c990f1><div class="wrapper" data-v-19c990f1><div class="container" data-v-19c990f1><div class="title" data-v-19c990f1><div class="VPNavBarTitle has-sidebar" data-v-19c990f1 data-v-ab179fa1><a class="title" href="/VFluent3/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>VFluent3</span><!--[--><!--]--></a></div></div><div class="content" data-v-19c990f1><div class="content-body" data-v-19c990f1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-19c990f1><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-19c990f1 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Guide</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-19c990f1 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-19c990f1 data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-19c990f1 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-19c990f1><div class="divider-line" data-v-19c990f1></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-d2ecc192><button data-v-d2ecc192>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-575e6a36><div class="curtain" data-v-575e6a36></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-575e6a36><span class="visually-hidden" id="sidebar-aria-label" data-v-575e6a36> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Basic input</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/button/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/check-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CheckBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/combobox/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Combobox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/details-list/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DetailsList</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drop-down/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DropDown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio-group/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RadioGroup</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/rating-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RatingControl</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/slider/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/toggle-switch/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ToggleSwitch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tag/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Tag</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Collections</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/flip-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>FlipView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/list-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ListView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tree-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TreeView</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Date & Time</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarDatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/time-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TimePicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Dialogs & flyouts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/callout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Callout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Layout</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/collapse/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Collapse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/expander/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Expander</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drawer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Panel</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Media</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/image/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Img</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ImgBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/persona/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Persona</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Menu & toolbars</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/command-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CommandBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/menu-flyout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MenuFlyout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/swipe-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SwipeControl</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible has-active" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Navigation</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/breadcrumb/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationPanel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pivot/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pivot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pagination/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pagination</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Scrolling</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/infinite-scroll-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfiniteScrollView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/scroll-story/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ScrollStory</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Status & info</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/badge/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-ring/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressRing</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Styles</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/animated-icon/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>AnimatedIcon</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/icon-element/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>IconElement</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/reveal-container/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RevealContainer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/shimmer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Shimmer</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Text</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/search-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SearchBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-field/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextField</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/verify-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>VerifyBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Windowing</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/web-window/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>WebWindow</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Global</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Advance</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-935f8a84><div class="content" data-v-935f8a84><div class="outline-marker" data-v-935f8a84></div><div class="outline-title" role="heading" aria-level="2" data-v-935f8a84>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-935f8a84><span class="visually-hidden" id="doc-outline-aria-label" data-v-935f8a84> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-935f8a84 data-v-b933a997><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _VFluent3_guide_components_navigation-panel_" data-v-39a288b8><div><h3 id="navigationpanel-demo" tabindex="-1">NavigationPanel-DEMO <a class="header-anchor" href="#navigationpanel-demo" aria-label="Permalink to &quot;NavigationPanel-DEMO&quot;">​</a></h3><hr><div style="position:relative;width:100%;height:800px;display:flex;"><!----></div><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">position</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">relative</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">800</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">display</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">flex</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;fv-NavigationPanel&gt;&lt;/fv-NavigationPanel&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="navigationpanel-flyout" tabindex="-1">NavigationPanel-Flyout <a class="header-anchor" href="#navigationpanel-flyout" aria-label="Permalink to &quot;NavigationPanel-Flyout&quot;">​</a></h3><hr><div style="position:relative;width:100%;height:800px;display:flex;"><!----></div><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">position</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">relative</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">800</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">display</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">flex</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;fv-NavigationPanel expandMode=&quot;flyout&quot;&gt;&lt;/fv-NavigationPanel&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="navigationpanel-mobile-display" tabindex="-1">NavigationPanel-Mobile Display <a class="header-anchor" href="#navigationpanel-mobile-display" aria-label="Permalink to &quot;NavigationPanel-Mobile Display&quot;">​</a></h3><hr><div style="position:relative;width:100%;height:800px;display:flex;"><!----></div><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">position</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">relative</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">800</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">display</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">flex</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;fv-NavigationPanel mobileDisplay=&quot;100000000&quot; flyoutDisplay=&quot;500&quot;&gt;&lt;/fv-NavigationPanel&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="navigationpanel-dark-theme" tabindex="-1">NavigationPanel-Dark Theme <a class="header-anchor" href="#navigationpanel-dark-theme" aria-label="Permalink to &quot;NavigationPanel-Dark Theme&quot;">​</a></h3><hr><ol><li>Standard</li></ol><div style="position:relative;width:100%;height:800px;background:black;display:flex;"><!----></div><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-NavigationPanel</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;dark&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-NavigationPanel</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><ol start="2"><li>Flyout</li></ol><div style="position:relative;width:100%;height:800px;background:black;display:flex;"><!----></div><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-NavigationPanel</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> expandMode</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;flyout&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;dark&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-NavigationPanel</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><ol start="3"><li>Mobile</li></ol><div style="position:relative;width:100%;height:800px;background:black;display:flex;"><!----></div><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-NavigationPanel</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> mobileDisplay</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;100000000&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> flyoutDisplay</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;500&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;dark&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-NavigationPanel</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">title</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">NavigationPanel</td><td style="text-align:center;">NavigationPanel 标题</td></tr><tr><td style="text-align:center;">expand</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">true</td><td style="text-align:center;">初始是否展开, 可通过 sync 方法来同步状态</td></tr><tr><td style="text-align:center;">expandMode</td><td style="text-align:center;">[&#39;relative&#39;,&#39;flyout&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">relative</td><td style="text-align:center;">展开模式, 有占位和浮动两种</td></tr><tr><td style="text-align:center;">expandWidth</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">350</td><td style="text-align:center;">展开宽度, 以<code>px</code>为单位</td></tr><tr><td style="text-align:center;">expandDisplay</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">1024</td><td style="text-align:center;">浏览器宽度大于多少时展开</td></tr><tr><td style="text-align:center;">compactWidth</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">50</td><td style="text-align:center;">折叠宽度, 以<code>px</code>为单位</td></tr><tr><td style="text-align:center;">flyoutDisplay</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">0</td><td style="text-align:center;">浏览器宽度小于多少时开启浮动模式, 若<code>expandMode</code>设为<code>flyout</code>, 则始终为浮动模式</td></tr><tr><td style="text-align:center;">fullSizeDisplay</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">800</td><td style="text-align:center;">浏览器宽度小于多少时全屏显示</td></tr><tr><td style="text-align:center;">mobileDisplay</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">0</td><td style="text-align:center;">浏览器宽度小于多少时开启移动端模式</td></tr><tr><td style="text-align:center;">showBack</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">true</td><td style="text-align:center;">是否显示后退按钮</td></tr><tr><td style="text-align:center;">showSearch</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">true</td><td style="text-align:center;">是否显示搜索框</td></tr><tr><td style="text-align:center;">settingTitle</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">Settings</td><td style="text-align:center;">设置选项的标题</td></tr><tr><td style="text-align:center;">showSetting</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">true</td><td style="text-align:center;">是否显示设置选项</td></tr><tr><td style="text-align:center;">background</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">NavigationPanel 背景色</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">system</td><td style="text-align:center;">主题样式, 包含<code>light</code>, <code>dark</code>, <code>system</code>, <code>custom</code>几种样式</td></tr></tbody></table><h3 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to &quot;Events&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">事件名(Name)</th><th style="text-align:center;">参数类型(args)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">setting-click</td><td style="text-align:center;">Object</td><td style="text-align:center;">设置选项被点击后触发事件, 返回<code>{ event: MouseEvent }</code></td></tr><tr><td style="text-align:center;">update:expand</td><td style="text-align:center;">boolean</td><td style="text-align:center;">当折叠或展开时同步外界传入的<code>expand</code></td></tr><tr><td style="text-align:center;">expand-change</td><td style="text-align:center;">boolean</td><td style="text-align:center;">当折叠或展开时触发事件并提供当前状态</td></tr><tr><td style="text-align:center;">expand-click</td><td style="text-align:center;"></td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">back</td><td style="text-align:center;">MouseEvent</td><td style="text-align:center;">返回选项被点击后触发事件</td></tr></tbody></table><h3 id="slot" tabindex="-1">Slot <a class="header-anchor" href="#slot" aria-label="Permalink to &quot;Slot&quot;">​</a></h3><hr><ol><li>SearchBlock</li></ol><p>自定义搜索框区域内容, 默认的搜索框无实际作用</p><div class="language-javascript vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">searchBlock</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><ol start="2"><li>Panel</li></ol><p>自定义<code>NavigationPanel</code>中的内容</p><div class="language-javascript vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">panel</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="appendix" tabindex="-1">Appendix <a class="header-anchor" href="#appendix" aria-label="Permalink to &quot;Appendix&quot;">​</a></h3><hr><ol><li>获取<code>NavigationPanel</code>中<code>setting</code>的<code>dom</code>方法:</li></ol><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-NavigationPanel</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">items</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ref</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;nav&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-NavigationPanel</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">let setting = this.$refs.nav.setting;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-09de1c0f><!--[--><!--]--><!----><nav class="prev-next" data-v-09de1c0f><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link prev" href="/VFluent3/guide/components/breadcrumb/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Previous page</span><span class="title" data-v-09de1c0f>Breadcrumb</span><!--]--></a></div><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link next" href="/VFluent3/guide/components/navigation-view/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Next page</span><span class="title" data-v-09de1c0f>NavigationView</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>MIT Licensed</p><p class="copyright" data-v-e315a0ad>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_calendar-date-picker_properties.md\":\"DXRjmMG8\",\"guide_components_image_properties.md\":\"DGanRzCb\",\"guide_components_img-box_index.md\":\"DYtggkf_\",\"guide_components_img_emits.md\":\"BlE7jvZQ\",\"guide_components_img_index.md\":\"Bm9FiuU4\",\"guide_components_icon-element_properties.md\":\"8Oakruwc\",\"guide_components_img_properties.md\":\"B42YSocI\",\"guide_components_drawer_index.md\":\"D_vpnCpE\",\"guide_components_verify-box_emits.md\":\"DT17Iazx\",\"guide_components_calendar-date-picker_index.md\":\"BdHjrurh\",\"guide_components_rating-control_index.md\":\"Q9l5Lfrr\",\"guide_components_rating-control_properties.md\":\"DKprnl0i\",\"guide_components_calendar-view_index.md\":\"zdoRYVx1\",\"guide_components_animated-icon_index.md\":\"yZDMzCFe\",\"guide_components_calendar-date-picker_emits.md\":\"D5OkfR8j\",\"guide_components_badge_index.md\":\"Bb4crrJn\",\"guide_components_image_index.md\":\"B7X6cWAZ\",\"guide_components_slider_index.md\":\"C7zZ2d-W\",\"guide_components_radio-group_index.md\":\"CVfh3h5H\",\"guide_components_swipe-control_index.md\":\"DwrDVPc1\",\"guide_components_color-picker_emits.md\":\"BHDXVtBQ\",\"guide_components_radio_index.md\":\"90as5QGp\",\"guide_components_pagination_properties.md\":\"JUAPvcTL\",\"guide_components_persona_properties.md\":\"DUTPhPMp\",\"guide_components_combo-box_emits.md\":\"Dh5R-qEv\",\"guide_components_pivot_emits.md\":\"BTJPgNpy\",\"guide_components_pagination_index.md\":\"CnW2zAht\",\"guide_components_flip-view_properties.md\":\"BqZ4hhgU\",\"guide_components_icon-element_emits.md\":\"D5TXFdTZ\",\"guide_components_flip-view_index.md\":\"DefnDOv6\",\"guide_components_navigation-panel_index.md\":\"6mO__sSK\",\"guide_components_rating-control_emits.md\":\"blvomSeC\",\"guide_components_icon-element_index.md\":\"DQ8K7JNn\",\"guide_components_navigation-view_index.md\":\"4AQRiz1k\",\"guide_components_toggle-switch_emits.md\":\"CLGzrNut\",\"guide_components_toggle-switch_index.md\":\"61en_q9-\",\"guide_components_scroll-story_index.md\":\"Vpgb1HSV\",\"guide_components_reveal-container_index.md\":\"Cut2r4tV\",\"guide_components_search-box_emits.md\":\"-d9sWNNt\",\"guide_components_search-box_properties.md\":\"DEKFfPFw\",\"guide_components_shimmer_emits.md\":\"CTMInlI3\",\"guide_components_tag_index.md\":\"BhhxkcHn\",\"guide_components_search-box_index.md\":\"DgkrY0oY\",\"guide_components_shimmer_index.md\":\"iZlHuTxw\",\"guide_components_shimmer_properties.md\":\"CdkU1o6H\",\"guide_components_tree-view_index.md\":\"CUrwan4q\",\"guide_components_text-field_index.md\":\"CXSimJtj\",\"guide_components_text-box_index.md\":\"C5moAPfB\",\"guide_components_progress-ring_properties.md\":\"Dc08Uiff\",\"guide_components_toggle-switch_properties.md\":\"tFppK_IS\",\"guide_components_radio-group_emits.md\":\"cEDzKVnN\",\"guide_components_collapse_index.md\":\"N9Iu5-2v\",\"guide_components_image_emits.md\":\"lmlz2xJd\",\"guide_components_callout_index.md\":\"D9RU33w6\",\"guide_components_pivot_index.md\":\"B_vwQL-5\",\"guide_components_command-bar_index.md\":\"Cp4_rrGB\",\"guide_components_pagination_emits.md\":\"Dng86A22\",\"guide_components_button_index.md\":\"7sqT2MQP\",\"guide_components_info-box_properties.md\":\"BI7Nvk-E\",\"guide_components_drop-down_emits.md\":\"BE95TdKW\",\"guide_components_expander_index.md\":\"BKgcUJzQ\",\"guide_components_message-bar_index.md\":\"AEtAWlF8\",\"guide_components_menu-flyout_index.md\":\"Csa7irPj\",\"guide_components_panel_index.md\":\"CsTu0bXo\",\"guide_components_panel_properties.md\":\"BaxoCYKq\",\"guide_components_progress-bar_emits.md\":\"BcwXUpsF\",\"guide_components_progress-bar_properties.md\":\"TxiS9ZMA\",\"guide_components_progress-ring_emits.md\":\"D2Y6hIZ9\",\"guide_components_color-picker_index.md\":\"DCc4ixcU\",\"guide_components_progress-ring_index.md\":\"CPb-ZEPE\",\"guide_components_color-picker_properties.md\":\"wcXK29Vl\",\"guide_components_time-picker_index.md\":\"CQJdRRaG\",\"guide_components_drop-down_properties.md\":\"Bwlkpr1q\",\"guide_components_infinite-scroll-view_index.md\":\"yAuD807x\",\"guide_components_check-box_index.md\":\"FYgdu4oq\",\"guide_components_progress-bar_index.md\":\"D8vHQw5V\",\"guide_components_combo-box_index.md\":\"DTyu3eNd\",\"guide_components_info-box_emits.md\":\"DlEwpkkq\",\"guide_components_drop-down_index.md\":\"BZzJZQWq\",\"guide_components_list-view_index.md\":\"BoYvMzb0\",\"guide_components_verify-box_properties.md\":\"CW6W8fFf\",\"guide_components_verify-box_index.md\":\"DwSB40wR\",\"guide_index.md\":\"Bndlt3sL\",\"guide_components_web-window_index.md\":\"Bxc8vEeI\",\"index.md\":\"MTRqI42u\",\"guide_components_combo-box_properties.md\":\"AWfHzV6x\",\"guide_components_combobox_emits.md\":\"CGB6WLt8\",\"guide_components_combobox_properties.md\":\"Bja0hMou\",\"guide_components_details-list_index.md\":\"CcgOCIyt\",\"guide_components_info-box_index.md\":\"vXh-_DsL\",\"guide_components_combobox_index.md\":\"CsPkY6YB\",\"guide_components_date-picker_index.md\":\"12vmUIup\",\"guide_components_flip-view_emits.md\":\"DCheHjDj\",\"guide_components_panel_emits.md\":\"DG0REDq8\",\"guide_components_breadcrumb_index.md\":\"DyDm7PeP\",\"guide_components_radio-group_properties.md\":\"BnPxoKsQ\",\"guide_components_persona_emits.md\":\"CnsDPKRU\",\"guide_components_pivot_properties.md\":\"BmoLpPi1\",\"guide_components_persona_index.md\":\"DT00jby4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vfluent3\",\"description\":\"A Vue3 component library for Fluent UI\",\"base\":\"/VFluent3/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"VFluent3\",\"footer\":{\"message\":\"MIT Licensed\",\"copyright\":\"Copyright © Creator SN - 2022\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/\"}],\"sidebar\":[{\"text\":\"Basic input\",\"collapsed\":true,\"items\":[{\"text\":\"Button\",\"link\":\"/guide/components/button/\"},{\"text\":\"CheckBox\",\"link\":\"/guide/components/check-box/\"},{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"},{\"text\":\"Combobox\",\"link\":\"/guide/components/combobox/\"},{\"text\":\"DetailsList\",\"link\":\"/guide/components/details-list/\"},{\"text\":\"DropDown\",\"link\":\"/guide/components/drop-down/\"},{\"text\":\"Radio\",\"link\":\"/guide/components/radio/\"},{\"text\":\"RadioGroup\",\"link\":\"/guide/components/radio-group/\"},{\"text\":\"RatingControl\",\"link\":\"/guide/components/rating-control/\"},{\"text\":\"Slider\",\"link\":\"/guide/components/slider/\"},{\"text\":\"ToggleSwitch\",\"link\":\"/guide/components/toggle-switch/\"},{\"text\":\"Tag\",\"link\":\"/guide/components/tag/\"}]},{\"text\":\"Collections\",\"collapsed\":true,\"items\":[{\"text\":\"FlipView\",\"link\":\"/guide/components/flip-view/\"},{\"text\":\"ListView\",\"link\":\"/guide/components/list-view/\"},{\"text\":\"TreeView\",\"link\":\"/guide/components/tree-view/\"}]},{\"text\":\"Date & Time\",\"collapsed\":true,\"items\":[{\"text\":\"CalendarDatePicker\",\"link\":\"/guide/components/calendar-date-picker/\"},{\"text\":\"CalendarView\",\"link\":\"/guide/components/calendar-view/\"},{\"text\":\"DatePicker\",\"link\":\"/guide/components/date-picker/\"},{\"text\":\"TimePicker\",\"link\":\"/guide/components/time-picker/\"}]},{\"text\":\"Dialogs & flyouts\",\"collapsed\":true,\"items\":[{\"text\":\"Callout\",\"link\":\"/guide/components/callout/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Layout\",\"collapsed\":true,\"items\":[{\"text\":\"Collapse\",\"link\":\"/guide/components/collapse/\"},{\"text\":\"Expander\",\"link\":\"/guide/components/expander/\"},{\"text\":\"Drawer\",\"link\":\"/guide/components/drawer/\"},{\"text\":\"Panel\",\"link\":\"/guide/components/panel/\"}]},{\"text\":\"Media\",\"collapsed\":true,\"items\":[{\"text\":\"Image\",\"link\":\"/guide/components/image/\"},{\"text\":\"Img\",\"link\":\"/guide/components/img/\"},{\"text\":\"ImgBox\",\"link\":\"/guide/components/img-box/\"},{\"text\":\"Persona\",\"link\":\"/guide/components/persona/\"}]},{\"text\":\"Menu & toolbars\",\"collapsed\":true,\"items\":[{\"text\":\"CommandBar\",\"link\":\"/guide/components/command-bar/\"},{\"text\":\"MenuFlyout\",\"link\":\"/guide/components/menu-flyout/\"},{\"text\":\"SwipeControl\",\"link\":\"/guide/components/swipe-control/\"}]},{\"text\":\"Navigation\",\"collapsed\":true,\"items\":[{\"text\":\"Breadcrumb\",\"link\":\"/guide/components/breadcrumb/\"},{\"text\":\"NavigationPanel\",\"link\":\"/guide/components/navigation-panel/\"},{\"text\":\"NavigationView\",\"link\":\"/guide/components/navigation-view/\"},{\"text\":\"Pivot\",\"link\":\"/guide/components/pivot/\"},{\"text\":\"Pagination\",\"link\":\"/guide/components/pagination/\"}]},{\"text\":\"Scrolling\",\"collapsed\":true,\"items\":[{\"text\":\"InfiniteScrollView\",\"link\":\"/guide/components/infinite-scroll-view/\"},{\"text\":\"ScrollStory\",\"link\":\"/guide/components/scroll-story/\"}]},{\"text\":\"Status & info\",\"collapsed\":true,\"items\":[{\"text\":\"Badge\",\"link\":\"/guide/components/badge/\"},{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"ProgressBar\",\"link\":\"/guide/components/progress-bar/\"},{\"text\":\"ProgressRing\",\"link\":\"/guide/components/progress-ring/\"}]},{\"text\":\"Styles\",\"collapsed\":true,\"items\":[{\"text\":\"AnimatedIcon\",\"link\":\"/guide/components/animated-icon/\"},{\"text\":\"IconElement\",\"link\":\"/guide/components/icon-element/\"},{\"text\":\"RevealContainer\",\"link\":\"/guide/components/reveal-container/\"},{\"text\":\"Shimmer\",\"link\":\"/guide/components/shimmer/\"}]},{\"text\":\"Text\",\"collapsed\":true,\"items\":[{\"text\":\"SearchBox\",\"link\":\"/guide/components/search-box/\"},{\"text\":\"TextBox\",\"link\":\"/guide/components/text-box/\"},{\"text\":\"TextField\",\"link\":\"/guide/components/text-field/\"},{\"text\":\"VerifyBox\",\"link\":\"/guide/components/verify-box/\"}]},{\"text\":\"Windowing\",\"collapsed\":true,\"items\":[{\"text\":\"WebWindow\",\"link\":\"/guide/components/web-window/\"}]},{\"text\":\"Global\",\"collapsed\":true,\"items\":[{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Advance\",\"collapsed\":true,\"items\":[{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git a/guide/components/navigation-view/index.html b/guide/components/navigation-view/index.html
new file mode 100644
index 0000000..727b551
--- /dev/null
+++ b/guide/components/navigation-view/index.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>NavigationView | vfluent3</title>
+    <meta name="description" content="A Vue3 component library for Fluent UI">
+    <meta name="generator" content="VitePress v1.0.0-rc.45">
+    <link rel="preload stylesheet" href="/VFluent3/assets/style.BabQegKX.css" as="style">
+    
+    <script type="module" src="/VFluent3/assets/app.CSutcJ2E.js"></script>
+    <link rel="preload" href="/VFluent3/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/framework.DvIFzl91.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/theme.CgqFBnN_.js">
+    <link rel="modulepreload" href="/VFluent3/assets/guide_components_navigation-view_index.md.4AQRiz1k.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-19c990f1><div class="wrapper" data-v-19c990f1><div class="container" data-v-19c990f1><div class="title" data-v-19c990f1><div class="VPNavBarTitle has-sidebar" data-v-19c990f1 data-v-ab179fa1><a class="title" href="/VFluent3/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>VFluent3</span><!--[--><!--]--></a></div></div><div class="content" data-v-19c990f1><div class="content-body" data-v-19c990f1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-19c990f1><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-19c990f1 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Guide</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-19c990f1 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-19c990f1 data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-19c990f1 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-19c990f1><div class="divider-line" data-v-19c990f1></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-d2ecc192><button data-v-d2ecc192>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-575e6a36><div class="curtain" data-v-575e6a36></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-575e6a36><span class="visually-hidden" id="sidebar-aria-label" data-v-575e6a36> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Basic input</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/button/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/check-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CheckBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/combobox/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Combobox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/details-list/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DetailsList</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drop-down/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DropDown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio-group/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RadioGroup</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/rating-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RatingControl</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/slider/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/toggle-switch/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ToggleSwitch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tag/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Tag</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Collections</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/flip-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>FlipView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/list-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ListView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tree-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TreeView</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Date & Time</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarDatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/time-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TimePicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Dialogs & flyouts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/callout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Callout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Layout</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/collapse/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Collapse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/expander/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Expander</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drawer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Panel</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Media</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/image/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Img</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ImgBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/persona/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Persona</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Menu & toolbars</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/command-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CommandBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/menu-flyout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MenuFlyout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/swipe-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SwipeControl</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible has-active" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Navigation</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/breadcrumb/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationPanel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pivot/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pivot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pagination/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pagination</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Scrolling</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/infinite-scroll-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfiniteScrollView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/scroll-story/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ScrollStory</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Status & info</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/badge/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-ring/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressRing</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Styles</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/animated-icon/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>AnimatedIcon</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/icon-element/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>IconElement</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/reveal-container/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RevealContainer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/shimmer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Shimmer</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Text</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/search-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SearchBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-field/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextField</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/verify-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>VerifyBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Windowing</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/web-window/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>WebWindow</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Global</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Advance</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-935f8a84><div class="content" data-v-935f8a84><div class="outline-marker" data-v-935f8a84></div><div class="outline-title" role="heading" aria-level="2" data-v-935f8a84>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-935f8a84><span class="visually-hidden" id="doc-outline-aria-label" data-v-935f8a84> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-935f8a84 data-v-b933a997><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _VFluent3_guide_components_navigation-view_" data-v-39a288b8><div><h3 id="navigationview-demo" tabindex="-1">NavigationView-DEMO <a class="header-anchor" href="#navigationview-demo" aria-label="Permalink to &quot;NavigationView-DEMO&quot;">​</a></h3><hr><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">position</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">relative</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">800</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">display</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">flex</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;fv-NavigationView :options=&quot;options&quot;&gt;&lt;/fv-NavigationView&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;fv-img src=&quot;https://rescreator.blob.core.windows.net/slider/1444a25f-3e33-44a2-878f-a628342ad88f.jpg&quot; style=&quot;width: 350px; height: 100%; flex: 1;&quot;&gt;&lt;/fv-img&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h3 id="navigationview-flyout" tabindex="-1">NavigationView-Flyout <a class="header-anchor" href="#navigationview-flyout" aria-label="Permalink to &quot;NavigationView-Flyout&quot;">​</a></h3><hr><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">position</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">relative</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">800</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">display</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">flex</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;fv-NavigationView :options=&quot;options&quot; expandMode=&quot;flyout&quot;&gt;&lt;/fv-NavigationView&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;fv-img src=&quot;https://rescreator.blob.core.windows.net/slider/1444a25f-3e33-44a2-878f-a628342ad88f.jpg&quot; style=&quot;width: 350px; height: 100%; flex: 1;&quot;&gt;&lt;/fv-img&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h3 id="navigationview-mobile-display" tabindex="-1">NavigationView-Mobile Display <a class="header-anchor" href="#navigationview-mobile-display" aria-label="Permalink to &quot;NavigationView-Mobile Display&quot;">​</a></h3><hr><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">position</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">relative</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">800</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">display</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">flex</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;fv-NavigationView :options=&quot;options&quot; mobileDisplay=&quot;100000000&quot; flyoutDisplay=&quot;500&quot;&gt;&lt;/fv-NavigationView&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;fv-img src=&quot;https://rescreator.blob.core.windows.net/slider/f2fcea9e-e31b-4a1e-87be-9241531c7dc6.jpg&quot; style=&quot;width: 350px; height: 100%; flex: 1;&quot;&gt;&lt;/fv-img&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h3 id="navigationview-flyout-1" tabindex="-1">NavigationView-Flyout <a class="header-anchor" href="#navigationview-flyout-1" aria-label="Permalink to &quot;NavigationView-Flyout&quot;">​</a></h3><hr><ol><li>Standard</li></ol><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">position</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">relative</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">800</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">black</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">display</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">flex</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;fv-NavigationView :options=&quot;options&quot; theme=&quot;dark&quot;&gt;&lt;/fv-NavigationView&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;fv-img src=&quot;https://rescreator.blob.core.windows.net/slider/f2fcea9e-e31b-4a1e-87be-9241531c7dc6.jpg&quot; style=&quot;width: 350px; height: 100%; flex: 1;&quot;&gt;&lt;/fv-img&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><ol start="2"><li>Flyout</li></ol><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">position</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">relative</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">800</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">black</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">display</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">flex</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;fv-NavigationView :options=&quot;options&quot; expandMode=&quot;flyout&quot; theme=&quot;dark&quot;&gt;&lt;/fv-NavigationView&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;fv-img src=&quot;https://rescreator.blob.core.windows.net/slider/f2fcea9e-e31b-4a1e-87be-9241531c7dc6.jpg&quot; style=&quot;width: 350px; height: 100%; flex: 1;&quot;&gt;&lt;/fv-img&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><ol start="3"><li>Mobile</li></ol><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">position</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">relative</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">800</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">black</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">display</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">flex</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;fv-NavigationView :options=&quot;options&quot; mobileDisplay=&quot;100000000&quot; flyoutDisplay=&quot;500&quot; theme=&quot;dark&quot;&gt;&lt;/fv-NavigationView&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;fv-img src=&quot;https://rescreator.blob.core.windows.net/slider/f2fcea9e-e31b-4a1e-87be-9241531c7dc6.jpg&quot; style=&quot;width: 350px; height: 100%; flex: 1;&quot;&gt;&lt;/fv-img&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">value</td><td style="text-align:center;">Array</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">当前选中项, 用<code>v-model</code>绑定</td></tr><tr><td style="text-align:center;">options</td><td style="text-align:center;">Array</td><td style="text-align:center;">Yes</td><td style="text-align:center;">N/A</td><td style="text-align:center;">选项数据, 参照<code>ListView</code>中的<code>items</code>数据格式</td></tr><tr><td style="text-align:center;">title</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">NavigationView</td><td style="text-align:center;">NavigationView 标题</td></tr><tr><td style="text-align:center;">expand</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">true</td><td style="text-align:center;">初始是否展开, 可通过 sync 方法来同步状态</td></tr><tr><td style="text-align:center;">expandMode</td><td style="text-align:center;">[&#39;relative&#39;,&#39;flyout&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">relative</td><td style="text-align:center;">展开模式, 有占位和浮动两种</td></tr><tr><td style="text-align:center;">expandWidth</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">350</td><td style="text-align:center;">展开宽度, 以<code>px</code>为单位</td></tr><tr><td style="text-align:center;">expandDisplay</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">1024</td><td style="text-align:center;">浏览器宽度大于多少时展开</td></tr><tr><td style="text-align:center;">compactWidth</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">50</td><td style="text-align:center;">折叠宽度, 以<code>px</code>为单位</td></tr><tr><td style="text-align:center;">flyoutDisplay</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">0</td><td style="text-align:center;">浏览器宽度小于多少时开启浮动模式, 若<code>expandMode</code>设为<code>flyout</code>, 则始终为浮动模式</td></tr><tr><td style="text-align:center;">fullSizeDisplay</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">800</td><td style="text-align:center;">浏览器宽度小于多少时全屏显示</td></tr><tr><td style="text-align:center;">mobileDisplay</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">0</td><td style="text-align:center;">浏览器宽度小于多少时开启移动端模式</td></tr><tr><td style="text-align:center;">showBack</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">true</td><td style="text-align:center;">是否显示后退按钮</td></tr><tr><td style="text-align:center;">showSearch</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">true</td><td style="text-align:center;">是否显示搜索框</td></tr><tr><td style="text-align:center;">settingTitle</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">Settings</td><td style="text-align:center;">设置选项的标题</td></tr><tr><td style="text-align:center;">showSetting</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">true</td><td style="text-align:center;">是否显示设置选项</td></tr><tr><td style="text-align:center;">searchPlaceholder</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">Search</td><td style="text-align:center;">搜索框的占位符</td></tr><tr><td style="text-align:center;">foreground</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">NavigationView 前景色</td></tr><tr><td style="text-align:center;">background</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">NavigationView 背景色</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">system</td><td style="text-align:center;">主题样式, 包含<code>light</code>, <code>dark</code>, <code>system</code>, <code>custom</code>几种样式</td></tr></tbody></table><h3 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to &quot;Events&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">事件名(Name)</th><th style="text-align:center;">参数类型(args)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">item-click</td><td style="text-align:center;">object</td><td style="text-align:center;">选项点击后触发</td></tr><tr><td style="text-align:center;">setting-click</td><td style="text-align:center;">Object</td><td style="text-align:center;">设置选项被点击后触发事件, 返回<code>{ event: MouseEvent }</code></td></tr><tr><td style="text-align:center;">update:expand</td><td style="text-align:center;">boolean</td><td style="text-align:center;">当折叠或展开时同步外界传入的<code>expand</code></td></tr><tr><td style="text-align:center;">expand-change</td><td style="text-align:center;">boolean</td><td style="text-align:center;">当折叠或展开时触发事件并提供当前状态</td></tr><tr><td style="text-align:center;">expand-click</td><td style="text-align:center;"></td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">back</td><td style="text-align:center;">MouseEvent</td><td style="text-align:center;">返回选项被点击后触发事件</td></tr></tbody></table><h3 id="slot" tabindex="-1">Slot <a class="header-anchor" href="#slot" aria-label="Permalink to &quot;Slot&quot;">​</a></h3><hr><ol><li>ListItem</li></ol><p>默认以value中每一项的属性name作为默认显示, 参考<code>ListView</code>, 包含以下可选属性</p><ul><li>item: 当前项</li><li>index: 当前项索引</li></ul><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">listItem</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">i</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-show</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">valueTrigger</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(x.item.icon) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">!==</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> undefined</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ms-Icon icon&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">`ms-Icon--${</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">valueTrigger</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">(</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">.</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">item</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">.</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">icon</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">)</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">}`</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">i</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;name&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{ </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: x.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">valueTrigger</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(x.item.type) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">==</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;header&#39;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> ?</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> foreground </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;{{x.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">valueTrigger</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(x.item.name)}}&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>注意在收缩时要隐藏<code>&lt;p&gt;</code>标签的话一定要将其类型加上<code>name</code>.</p><h3 id="data" tabindex="-1">Data <a class="header-anchor" href="#data" aria-label="Permalink to &quot;Data&quot;">​</a></h3><hr><ol><li>options</li></ol><ul><li>数据格式参考<code>ListView</code>中<code>items</code>的形式, 其中<code>key</code>字段建议开发者在有重复名称和类型字段时声明用来区别项目</li><li>开发者可利用<code>icon</code>字段来应用<code>Fabric Icon</code></li></ul><div class="language-javascript vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">options </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [{ key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, disabled: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }];</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">//e.g.//</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">options</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: [</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Fruits&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;header&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">},</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Apple&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;WindowsLogo&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">},</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Banana&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;DelveAnalyticsLogo&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">},</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">3</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Orange&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Guitar&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">},</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">4</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Grape&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;HailDay&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">},</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">5</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;divider&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">6</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Vegetables&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;header&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">},</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">7</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Broccoli&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;QuadColumn&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">},</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">8</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Carrot&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Quantity&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">},</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">9</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Lettuce&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;TestBeaker&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">];</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><h3 id="appendix" tabindex="-1">Appendix <a class="header-anchor" href="#appendix" aria-label="Permalink to &quot;Appendix&quot;">​</a></h3><hr><ol><li><code>NavigationView</code>中的<code>setting</code>项由于不包含在<code>options</code>中, 故无法在<code>options</code>中找到<code>setting</code>项. 但是当选中<code>setting</code>项时, <code>value</code>值会改变为<code>{ name: &quot;&gt;setting&quot;, type: &quot;setting&quot; }</code>, 你也可以通过在外部赋值的方式将当前选项更改为<code>setting</code>项.</li></ol><p><strong>特别地</strong> 0.1.54版本后支持采用函数式字段, 其中支持的字段包括<code>name</code>, <code>disabled</code>, <code>choosen</code>, <code>type</code>, <code>icon</code>, <code>show</code></p></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-09de1c0f><!--[--><!--]--><!----><nav class="prev-next" data-v-09de1c0f><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link prev" href="/VFluent3/guide/components/navigation-panel/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Previous page</span><span class="title" data-v-09de1c0f>NavigationPanel</span><!--]--></a></div><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link next" href="/VFluent3/guide/components/pivot/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Next page</span><span class="title" data-v-09de1c0f>Pivot</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>MIT Licensed</p><p class="copyright" data-v-e315a0ad>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_calendar-date-picker_properties.md\":\"DXRjmMG8\",\"guide_components_image_properties.md\":\"DGanRzCb\",\"guide_components_img-box_index.md\":\"DYtggkf_\",\"guide_components_img_emits.md\":\"BlE7jvZQ\",\"guide_components_img_index.md\":\"Bm9FiuU4\",\"guide_components_icon-element_properties.md\":\"8Oakruwc\",\"guide_components_img_properties.md\":\"B42YSocI\",\"guide_components_drawer_index.md\":\"D_vpnCpE\",\"guide_components_verify-box_emits.md\":\"DT17Iazx\",\"guide_components_calendar-date-picker_index.md\":\"BdHjrurh\",\"guide_components_rating-control_index.md\":\"Q9l5Lfrr\",\"guide_components_rating-control_properties.md\":\"DKprnl0i\",\"guide_components_calendar-view_index.md\":\"zdoRYVx1\",\"guide_components_animated-icon_index.md\":\"yZDMzCFe\",\"guide_components_calendar-date-picker_emits.md\":\"D5OkfR8j\",\"guide_components_badge_index.md\":\"Bb4crrJn\",\"guide_components_image_index.md\":\"B7X6cWAZ\",\"guide_components_slider_index.md\":\"C7zZ2d-W\",\"guide_components_radio-group_index.md\":\"CVfh3h5H\",\"guide_components_swipe-control_index.md\":\"DwrDVPc1\",\"guide_components_color-picker_emits.md\":\"BHDXVtBQ\",\"guide_components_radio_index.md\":\"90as5QGp\",\"guide_components_pagination_properties.md\":\"JUAPvcTL\",\"guide_components_persona_properties.md\":\"DUTPhPMp\",\"guide_components_combo-box_emits.md\":\"Dh5R-qEv\",\"guide_components_pivot_emits.md\":\"BTJPgNpy\",\"guide_components_pagination_index.md\":\"CnW2zAht\",\"guide_components_flip-view_properties.md\":\"BqZ4hhgU\",\"guide_components_icon-element_emits.md\":\"D5TXFdTZ\",\"guide_components_flip-view_index.md\":\"DefnDOv6\",\"guide_components_navigation-panel_index.md\":\"6mO__sSK\",\"guide_components_rating-control_emits.md\":\"blvomSeC\",\"guide_components_icon-element_index.md\":\"DQ8K7JNn\",\"guide_components_navigation-view_index.md\":\"4AQRiz1k\",\"guide_components_toggle-switch_emits.md\":\"CLGzrNut\",\"guide_components_toggle-switch_index.md\":\"61en_q9-\",\"guide_components_scroll-story_index.md\":\"Vpgb1HSV\",\"guide_components_reveal-container_index.md\":\"Cut2r4tV\",\"guide_components_search-box_emits.md\":\"-d9sWNNt\",\"guide_components_search-box_properties.md\":\"DEKFfPFw\",\"guide_components_shimmer_emits.md\":\"CTMInlI3\",\"guide_components_tag_index.md\":\"BhhxkcHn\",\"guide_components_search-box_index.md\":\"DgkrY0oY\",\"guide_components_shimmer_index.md\":\"iZlHuTxw\",\"guide_components_shimmer_properties.md\":\"CdkU1o6H\",\"guide_components_tree-view_index.md\":\"CUrwan4q\",\"guide_components_text-field_index.md\":\"CXSimJtj\",\"guide_components_text-box_index.md\":\"C5moAPfB\",\"guide_components_progress-ring_properties.md\":\"Dc08Uiff\",\"guide_components_toggle-switch_properties.md\":\"tFppK_IS\",\"guide_components_radio-group_emits.md\":\"cEDzKVnN\",\"guide_components_collapse_index.md\":\"N9Iu5-2v\",\"guide_components_image_emits.md\":\"lmlz2xJd\",\"guide_components_callout_index.md\":\"D9RU33w6\",\"guide_components_pivot_index.md\":\"B_vwQL-5\",\"guide_components_command-bar_index.md\":\"Cp4_rrGB\",\"guide_components_pagination_emits.md\":\"Dng86A22\",\"guide_components_button_index.md\":\"7sqT2MQP\",\"guide_components_info-box_properties.md\":\"BI7Nvk-E\",\"guide_components_drop-down_emits.md\":\"BE95TdKW\",\"guide_components_expander_index.md\":\"BKgcUJzQ\",\"guide_components_message-bar_index.md\":\"AEtAWlF8\",\"guide_components_menu-flyout_index.md\":\"Csa7irPj\",\"guide_components_panel_index.md\":\"CsTu0bXo\",\"guide_components_panel_properties.md\":\"BaxoCYKq\",\"guide_components_progress-bar_emits.md\":\"BcwXUpsF\",\"guide_components_progress-bar_properties.md\":\"TxiS9ZMA\",\"guide_components_progress-ring_emits.md\":\"D2Y6hIZ9\",\"guide_components_color-picker_index.md\":\"DCc4ixcU\",\"guide_components_progress-ring_index.md\":\"CPb-ZEPE\",\"guide_components_color-picker_properties.md\":\"wcXK29Vl\",\"guide_components_time-picker_index.md\":\"CQJdRRaG\",\"guide_components_drop-down_properties.md\":\"Bwlkpr1q\",\"guide_components_infinite-scroll-view_index.md\":\"yAuD807x\",\"guide_components_check-box_index.md\":\"FYgdu4oq\",\"guide_components_progress-bar_index.md\":\"D8vHQw5V\",\"guide_components_combo-box_index.md\":\"DTyu3eNd\",\"guide_components_info-box_emits.md\":\"DlEwpkkq\",\"guide_components_drop-down_index.md\":\"BZzJZQWq\",\"guide_components_list-view_index.md\":\"BoYvMzb0\",\"guide_components_verify-box_properties.md\":\"CW6W8fFf\",\"guide_components_verify-box_index.md\":\"DwSB40wR\",\"guide_index.md\":\"Bndlt3sL\",\"guide_components_web-window_index.md\":\"Bxc8vEeI\",\"index.md\":\"MTRqI42u\",\"guide_components_combo-box_properties.md\":\"AWfHzV6x\",\"guide_components_combobox_emits.md\":\"CGB6WLt8\",\"guide_components_combobox_properties.md\":\"Bja0hMou\",\"guide_components_details-list_index.md\":\"CcgOCIyt\",\"guide_components_info-box_index.md\":\"vXh-_DsL\",\"guide_components_combobox_index.md\":\"CsPkY6YB\",\"guide_components_date-picker_index.md\":\"12vmUIup\",\"guide_components_flip-view_emits.md\":\"DCheHjDj\",\"guide_components_panel_emits.md\":\"DG0REDq8\",\"guide_components_breadcrumb_index.md\":\"DyDm7PeP\",\"guide_components_radio-group_properties.md\":\"BnPxoKsQ\",\"guide_components_persona_emits.md\":\"CnsDPKRU\",\"guide_components_pivot_properties.md\":\"BmoLpPi1\",\"guide_components_persona_index.md\":\"DT00jby4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vfluent3\",\"description\":\"A Vue3 component library for Fluent UI\",\"base\":\"/VFluent3/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"VFluent3\",\"footer\":{\"message\":\"MIT Licensed\",\"copyright\":\"Copyright © Creator SN - 2022\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/\"}],\"sidebar\":[{\"text\":\"Basic input\",\"collapsed\":true,\"items\":[{\"text\":\"Button\",\"link\":\"/guide/components/button/\"},{\"text\":\"CheckBox\",\"link\":\"/guide/components/check-box/\"},{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"},{\"text\":\"Combobox\",\"link\":\"/guide/components/combobox/\"},{\"text\":\"DetailsList\",\"link\":\"/guide/components/details-list/\"},{\"text\":\"DropDown\",\"link\":\"/guide/components/drop-down/\"},{\"text\":\"Radio\",\"link\":\"/guide/components/radio/\"},{\"text\":\"RadioGroup\",\"link\":\"/guide/components/radio-group/\"},{\"text\":\"RatingControl\",\"link\":\"/guide/components/rating-control/\"},{\"text\":\"Slider\",\"link\":\"/guide/components/slider/\"},{\"text\":\"ToggleSwitch\",\"link\":\"/guide/components/toggle-switch/\"},{\"text\":\"Tag\",\"link\":\"/guide/components/tag/\"}]},{\"text\":\"Collections\",\"collapsed\":true,\"items\":[{\"text\":\"FlipView\",\"link\":\"/guide/components/flip-view/\"},{\"text\":\"ListView\",\"link\":\"/guide/components/list-view/\"},{\"text\":\"TreeView\",\"link\":\"/guide/components/tree-view/\"}]},{\"text\":\"Date & Time\",\"collapsed\":true,\"items\":[{\"text\":\"CalendarDatePicker\",\"link\":\"/guide/components/calendar-date-picker/\"},{\"text\":\"CalendarView\",\"link\":\"/guide/components/calendar-view/\"},{\"text\":\"DatePicker\",\"link\":\"/guide/components/date-picker/\"},{\"text\":\"TimePicker\",\"link\":\"/guide/components/time-picker/\"}]},{\"text\":\"Dialogs & flyouts\",\"collapsed\":true,\"items\":[{\"text\":\"Callout\",\"link\":\"/guide/components/callout/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Layout\",\"collapsed\":true,\"items\":[{\"text\":\"Collapse\",\"link\":\"/guide/components/collapse/\"},{\"text\":\"Expander\",\"link\":\"/guide/components/expander/\"},{\"text\":\"Drawer\",\"link\":\"/guide/components/drawer/\"},{\"text\":\"Panel\",\"link\":\"/guide/components/panel/\"}]},{\"text\":\"Media\",\"collapsed\":true,\"items\":[{\"text\":\"Image\",\"link\":\"/guide/components/image/\"},{\"text\":\"Img\",\"link\":\"/guide/components/img/\"},{\"text\":\"ImgBox\",\"link\":\"/guide/components/img-box/\"},{\"text\":\"Persona\",\"link\":\"/guide/components/persona/\"}]},{\"text\":\"Menu & toolbars\",\"collapsed\":true,\"items\":[{\"text\":\"CommandBar\",\"link\":\"/guide/components/command-bar/\"},{\"text\":\"MenuFlyout\",\"link\":\"/guide/components/menu-flyout/\"},{\"text\":\"SwipeControl\",\"link\":\"/guide/components/swipe-control/\"}]},{\"text\":\"Navigation\",\"collapsed\":true,\"items\":[{\"text\":\"Breadcrumb\",\"link\":\"/guide/components/breadcrumb/\"},{\"text\":\"NavigationPanel\",\"link\":\"/guide/components/navigation-panel/\"},{\"text\":\"NavigationView\",\"link\":\"/guide/components/navigation-view/\"},{\"text\":\"Pivot\",\"link\":\"/guide/components/pivot/\"},{\"text\":\"Pagination\",\"link\":\"/guide/components/pagination/\"}]},{\"text\":\"Scrolling\",\"collapsed\":true,\"items\":[{\"text\":\"InfiniteScrollView\",\"link\":\"/guide/components/infinite-scroll-view/\"},{\"text\":\"ScrollStory\",\"link\":\"/guide/components/scroll-story/\"}]},{\"text\":\"Status & info\",\"collapsed\":true,\"items\":[{\"text\":\"Badge\",\"link\":\"/guide/components/badge/\"},{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"ProgressBar\",\"link\":\"/guide/components/progress-bar/\"},{\"text\":\"ProgressRing\",\"link\":\"/guide/components/progress-ring/\"}]},{\"text\":\"Styles\",\"collapsed\":true,\"items\":[{\"text\":\"AnimatedIcon\",\"link\":\"/guide/components/animated-icon/\"},{\"text\":\"IconElement\",\"link\":\"/guide/components/icon-element/\"},{\"text\":\"RevealContainer\",\"link\":\"/guide/components/reveal-container/\"},{\"text\":\"Shimmer\",\"link\":\"/guide/components/shimmer/\"}]},{\"text\":\"Text\",\"collapsed\":true,\"items\":[{\"text\":\"SearchBox\",\"link\":\"/guide/components/search-box/\"},{\"text\":\"TextBox\",\"link\":\"/guide/components/text-box/\"},{\"text\":\"TextField\",\"link\":\"/guide/components/text-field/\"},{\"text\":\"VerifyBox\",\"link\":\"/guide/components/verify-box/\"}]},{\"text\":\"Windowing\",\"collapsed\":true,\"items\":[{\"text\":\"WebWindow\",\"link\":\"/guide/components/web-window/\"}]},{\"text\":\"Global\",\"collapsed\":true,\"items\":[{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Advance\",\"collapsed\":true,\"items\":[{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git a/guide/components/pagination/emits.html b/guide/components/pagination/emits.html
new file mode 100644
index 0000000..d8ede18
--- /dev/null
+++ b/guide/components/pagination/emits.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>vfluent3</title>
+    <meta name="description" content="A Vue3 component library for Fluent UI">
+    <meta name="generator" content="VitePress v1.0.0-rc.45">
+    <link rel="preload stylesheet" href="/VFluent3/assets/style.BabQegKX.css" as="style">
+    
+    <script type="module" src="/VFluent3/assets/app.CSutcJ2E.js"></script>
+    <link rel="preload" href="/VFluent3/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/framework.DvIFzl91.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/theme.CgqFBnN_.js">
+    <link rel="modulepreload" href="/VFluent3/assets/guide_components_pagination_emits.md.Dng86A22.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-19c990f1><div class="wrapper" data-v-19c990f1><div class="container" data-v-19c990f1><div class="title" data-v-19c990f1><div class="VPNavBarTitle has-sidebar" data-v-19c990f1 data-v-ab179fa1><a class="title" href="/VFluent3/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>VFluent3</span><!--[--><!--]--></a></div></div><div class="content" data-v-19c990f1><div class="content-body" data-v-19c990f1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-19c990f1><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-19c990f1 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Guide</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-19c990f1 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-19c990f1 data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-19c990f1 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-19c990f1><div class="divider-line" data-v-19c990f1></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-d2ecc192><button data-v-d2ecc192>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-575e6a36><div class="curtain" data-v-575e6a36></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-575e6a36><span class="visually-hidden" id="sidebar-aria-label" data-v-575e6a36> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Basic input</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/button/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/check-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CheckBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/combobox/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Combobox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/details-list/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DetailsList</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drop-down/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DropDown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio-group/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RadioGroup</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/rating-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RatingControl</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/slider/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/toggle-switch/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ToggleSwitch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tag/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Tag</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Collections</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/flip-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>FlipView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/list-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ListView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tree-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TreeView</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Date & Time</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarDatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/time-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TimePicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Dialogs & flyouts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/callout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Callout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Layout</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/collapse/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Collapse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/expander/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Expander</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drawer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Panel</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Media</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/image/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Img</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ImgBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/persona/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Persona</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Menu & toolbars</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/command-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CommandBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/menu-flyout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MenuFlyout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/swipe-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SwipeControl</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Navigation</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/breadcrumb/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationPanel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pivot/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pivot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pagination/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pagination</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Scrolling</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/infinite-scroll-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfiniteScrollView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/scroll-story/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ScrollStory</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Status & info</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/badge/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-ring/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressRing</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Styles</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/animated-icon/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>AnimatedIcon</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/icon-element/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>IconElement</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/reveal-container/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RevealContainer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/shimmer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Shimmer</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Text</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/search-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SearchBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-field/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextField</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/verify-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>VerifyBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Windowing</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/web-window/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>WebWindow</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Global</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Advance</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-935f8a84><div class="content" data-v-935f8a84><div class="outline-marker" data-v-935f8a84></div><div class="outline-title" role="heading" aria-level="2" data-v-935f8a84>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-935f8a84><span class="visually-hidden" id="doc-outline-aria-label" data-v-935f8a84> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-935f8a84 data-v-b933a997><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _VFluent3_guide_components_pagination_emits" data-v-39a288b8><div><h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-label="Permalink to &quot;Emits&quot;">​</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead></table></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-09de1c0f><!--[--><!--]--><!----><nav class="prev-next" data-v-09de1c0f><div class="pager" data-v-09de1c0f><!----></div><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link next" href="/VFluent3/guide/components/button/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Next page</span><span class="title" data-v-09de1c0f>Button</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>MIT Licensed</p><p class="copyright" data-v-e315a0ad>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_calendar-date-picker_properties.md\":\"DXRjmMG8\",\"guide_components_image_properties.md\":\"DGanRzCb\",\"guide_components_img-box_index.md\":\"DYtggkf_\",\"guide_components_img_emits.md\":\"BlE7jvZQ\",\"guide_components_img_index.md\":\"Bm9FiuU4\",\"guide_components_icon-element_properties.md\":\"8Oakruwc\",\"guide_components_img_properties.md\":\"B42YSocI\",\"guide_components_drawer_index.md\":\"D_vpnCpE\",\"guide_components_verify-box_emits.md\":\"DT17Iazx\",\"guide_components_calendar-date-picker_index.md\":\"BdHjrurh\",\"guide_components_rating-control_index.md\":\"Q9l5Lfrr\",\"guide_components_rating-control_properties.md\":\"DKprnl0i\",\"guide_components_calendar-view_index.md\":\"zdoRYVx1\",\"guide_components_animated-icon_index.md\":\"yZDMzCFe\",\"guide_components_calendar-date-picker_emits.md\":\"D5OkfR8j\",\"guide_components_badge_index.md\":\"Bb4crrJn\",\"guide_components_image_index.md\":\"B7X6cWAZ\",\"guide_components_slider_index.md\":\"C7zZ2d-W\",\"guide_components_radio-group_index.md\":\"CVfh3h5H\",\"guide_components_swipe-control_index.md\":\"DwrDVPc1\",\"guide_components_color-picker_emits.md\":\"BHDXVtBQ\",\"guide_components_radio_index.md\":\"90as5QGp\",\"guide_components_pagination_properties.md\":\"JUAPvcTL\",\"guide_components_persona_properties.md\":\"DUTPhPMp\",\"guide_components_combo-box_emits.md\":\"Dh5R-qEv\",\"guide_components_pivot_emits.md\":\"BTJPgNpy\",\"guide_components_pagination_index.md\":\"CnW2zAht\",\"guide_components_flip-view_properties.md\":\"BqZ4hhgU\",\"guide_components_icon-element_emits.md\":\"D5TXFdTZ\",\"guide_components_flip-view_index.md\":\"DefnDOv6\",\"guide_components_navigation-panel_index.md\":\"6mO__sSK\",\"guide_components_rating-control_emits.md\":\"blvomSeC\",\"guide_components_icon-element_index.md\":\"DQ8K7JNn\",\"guide_components_navigation-view_index.md\":\"4AQRiz1k\",\"guide_components_toggle-switch_emits.md\":\"CLGzrNut\",\"guide_components_toggle-switch_index.md\":\"61en_q9-\",\"guide_components_scroll-story_index.md\":\"Vpgb1HSV\",\"guide_components_reveal-container_index.md\":\"Cut2r4tV\",\"guide_components_search-box_emits.md\":\"-d9sWNNt\",\"guide_components_search-box_properties.md\":\"DEKFfPFw\",\"guide_components_shimmer_emits.md\":\"CTMInlI3\",\"guide_components_tag_index.md\":\"BhhxkcHn\",\"guide_components_search-box_index.md\":\"DgkrY0oY\",\"guide_components_shimmer_index.md\":\"iZlHuTxw\",\"guide_components_shimmer_properties.md\":\"CdkU1o6H\",\"guide_components_tree-view_index.md\":\"CUrwan4q\",\"guide_components_text-field_index.md\":\"CXSimJtj\",\"guide_components_text-box_index.md\":\"C5moAPfB\",\"guide_components_progress-ring_properties.md\":\"Dc08Uiff\",\"guide_components_toggle-switch_properties.md\":\"tFppK_IS\",\"guide_components_radio-group_emits.md\":\"cEDzKVnN\",\"guide_components_collapse_index.md\":\"N9Iu5-2v\",\"guide_components_image_emits.md\":\"lmlz2xJd\",\"guide_components_callout_index.md\":\"D9RU33w6\",\"guide_components_pivot_index.md\":\"B_vwQL-5\",\"guide_components_command-bar_index.md\":\"Cp4_rrGB\",\"guide_components_pagination_emits.md\":\"Dng86A22\",\"guide_components_button_index.md\":\"7sqT2MQP\",\"guide_components_info-box_properties.md\":\"BI7Nvk-E\",\"guide_components_drop-down_emits.md\":\"BE95TdKW\",\"guide_components_expander_index.md\":\"BKgcUJzQ\",\"guide_components_message-bar_index.md\":\"AEtAWlF8\",\"guide_components_menu-flyout_index.md\":\"Csa7irPj\",\"guide_components_panel_index.md\":\"CsTu0bXo\",\"guide_components_panel_properties.md\":\"BaxoCYKq\",\"guide_components_progress-bar_emits.md\":\"BcwXUpsF\",\"guide_components_progress-bar_properties.md\":\"TxiS9ZMA\",\"guide_components_progress-ring_emits.md\":\"D2Y6hIZ9\",\"guide_components_color-picker_index.md\":\"DCc4ixcU\",\"guide_components_progress-ring_index.md\":\"CPb-ZEPE\",\"guide_components_color-picker_properties.md\":\"wcXK29Vl\",\"guide_components_time-picker_index.md\":\"CQJdRRaG\",\"guide_components_drop-down_properties.md\":\"Bwlkpr1q\",\"guide_components_infinite-scroll-view_index.md\":\"yAuD807x\",\"guide_components_check-box_index.md\":\"FYgdu4oq\",\"guide_components_progress-bar_index.md\":\"D8vHQw5V\",\"guide_components_combo-box_index.md\":\"DTyu3eNd\",\"guide_components_info-box_emits.md\":\"DlEwpkkq\",\"guide_components_drop-down_index.md\":\"BZzJZQWq\",\"guide_components_list-view_index.md\":\"BoYvMzb0\",\"guide_components_verify-box_properties.md\":\"CW6W8fFf\",\"guide_components_verify-box_index.md\":\"DwSB40wR\",\"guide_index.md\":\"Bndlt3sL\",\"guide_components_web-window_index.md\":\"Bxc8vEeI\",\"index.md\":\"MTRqI42u\",\"guide_components_combo-box_properties.md\":\"AWfHzV6x\",\"guide_components_combobox_emits.md\":\"CGB6WLt8\",\"guide_components_combobox_properties.md\":\"Bja0hMou\",\"guide_components_details-list_index.md\":\"CcgOCIyt\",\"guide_components_info-box_index.md\":\"vXh-_DsL\",\"guide_components_combobox_index.md\":\"CsPkY6YB\",\"guide_components_date-picker_index.md\":\"12vmUIup\",\"guide_components_flip-view_emits.md\":\"DCheHjDj\",\"guide_components_panel_emits.md\":\"DG0REDq8\",\"guide_components_breadcrumb_index.md\":\"DyDm7PeP\",\"guide_components_radio-group_properties.md\":\"BnPxoKsQ\",\"guide_components_persona_emits.md\":\"CnsDPKRU\",\"guide_components_pivot_properties.md\":\"BmoLpPi1\",\"guide_components_persona_index.md\":\"DT00jby4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vfluent3\",\"description\":\"A Vue3 component library for Fluent UI\",\"base\":\"/VFluent3/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"VFluent3\",\"footer\":{\"message\":\"MIT Licensed\",\"copyright\":\"Copyright © Creator SN - 2022\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/\"}],\"sidebar\":[{\"text\":\"Basic input\",\"collapsed\":true,\"items\":[{\"text\":\"Button\",\"link\":\"/guide/components/button/\"},{\"text\":\"CheckBox\",\"link\":\"/guide/components/check-box/\"},{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"},{\"text\":\"Combobox\",\"link\":\"/guide/components/combobox/\"},{\"text\":\"DetailsList\",\"link\":\"/guide/components/details-list/\"},{\"text\":\"DropDown\",\"link\":\"/guide/components/drop-down/\"},{\"text\":\"Radio\",\"link\":\"/guide/components/radio/\"},{\"text\":\"RadioGroup\",\"link\":\"/guide/components/radio-group/\"},{\"text\":\"RatingControl\",\"link\":\"/guide/components/rating-control/\"},{\"text\":\"Slider\",\"link\":\"/guide/components/slider/\"},{\"text\":\"ToggleSwitch\",\"link\":\"/guide/components/toggle-switch/\"},{\"text\":\"Tag\",\"link\":\"/guide/components/tag/\"}]},{\"text\":\"Collections\",\"collapsed\":true,\"items\":[{\"text\":\"FlipView\",\"link\":\"/guide/components/flip-view/\"},{\"text\":\"ListView\",\"link\":\"/guide/components/list-view/\"},{\"text\":\"TreeView\",\"link\":\"/guide/components/tree-view/\"}]},{\"text\":\"Date & Time\",\"collapsed\":true,\"items\":[{\"text\":\"CalendarDatePicker\",\"link\":\"/guide/components/calendar-date-picker/\"},{\"text\":\"CalendarView\",\"link\":\"/guide/components/calendar-view/\"},{\"text\":\"DatePicker\",\"link\":\"/guide/components/date-picker/\"},{\"text\":\"TimePicker\",\"link\":\"/guide/components/time-picker/\"}]},{\"text\":\"Dialogs & flyouts\",\"collapsed\":true,\"items\":[{\"text\":\"Callout\",\"link\":\"/guide/components/callout/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Layout\",\"collapsed\":true,\"items\":[{\"text\":\"Collapse\",\"link\":\"/guide/components/collapse/\"},{\"text\":\"Expander\",\"link\":\"/guide/components/expander/\"},{\"text\":\"Drawer\",\"link\":\"/guide/components/drawer/\"},{\"text\":\"Panel\",\"link\":\"/guide/components/panel/\"}]},{\"text\":\"Media\",\"collapsed\":true,\"items\":[{\"text\":\"Image\",\"link\":\"/guide/components/image/\"},{\"text\":\"Img\",\"link\":\"/guide/components/img/\"},{\"text\":\"ImgBox\",\"link\":\"/guide/components/img-box/\"},{\"text\":\"Persona\",\"link\":\"/guide/components/persona/\"}]},{\"text\":\"Menu & toolbars\",\"collapsed\":true,\"items\":[{\"text\":\"CommandBar\",\"link\":\"/guide/components/command-bar/\"},{\"text\":\"MenuFlyout\",\"link\":\"/guide/components/menu-flyout/\"},{\"text\":\"SwipeControl\",\"link\":\"/guide/components/swipe-control/\"}]},{\"text\":\"Navigation\",\"collapsed\":true,\"items\":[{\"text\":\"Breadcrumb\",\"link\":\"/guide/components/breadcrumb/\"},{\"text\":\"NavigationPanel\",\"link\":\"/guide/components/navigation-panel/\"},{\"text\":\"NavigationView\",\"link\":\"/guide/components/navigation-view/\"},{\"text\":\"Pivot\",\"link\":\"/guide/components/pivot/\"},{\"text\":\"Pagination\",\"link\":\"/guide/components/pagination/\"}]},{\"text\":\"Scrolling\",\"collapsed\":true,\"items\":[{\"text\":\"InfiniteScrollView\",\"link\":\"/guide/components/infinite-scroll-view/\"},{\"text\":\"ScrollStory\",\"link\":\"/guide/components/scroll-story/\"}]},{\"text\":\"Status & info\",\"collapsed\":true,\"items\":[{\"text\":\"Badge\",\"link\":\"/guide/components/badge/\"},{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"ProgressBar\",\"link\":\"/guide/components/progress-bar/\"},{\"text\":\"ProgressRing\",\"link\":\"/guide/components/progress-ring/\"}]},{\"text\":\"Styles\",\"collapsed\":true,\"items\":[{\"text\":\"AnimatedIcon\",\"link\":\"/guide/components/animated-icon/\"},{\"text\":\"IconElement\",\"link\":\"/guide/components/icon-element/\"},{\"text\":\"RevealContainer\",\"link\":\"/guide/components/reveal-container/\"},{\"text\":\"Shimmer\",\"link\":\"/guide/components/shimmer/\"}]},{\"text\":\"Text\",\"collapsed\":true,\"items\":[{\"text\":\"SearchBox\",\"link\":\"/guide/components/search-box/\"},{\"text\":\"TextBox\",\"link\":\"/guide/components/text-box/\"},{\"text\":\"TextField\",\"link\":\"/guide/components/text-field/\"},{\"text\":\"VerifyBox\",\"link\":\"/guide/components/verify-box/\"}]},{\"text\":\"Windowing\",\"collapsed\":true,\"items\":[{\"text\":\"WebWindow\",\"link\":\"/guide/components/web-window/\"}]},{\"text\":\"Global\",\"collapsed\":true,\"items\":[{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Advance\",\"collapsed\":true,\"items\":[{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git a/guide/components/pagination/index.html b/guide/components/pagination/index.html
new file mode 100644
index 0000000..990dc19
--- /dev/null
+++ b/guide/components/pagination/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>Pagination | vfluent3</title>
+    <meta name="description" content="A Vue3 component library for Fluent UI">
+    <meta name="generator" content="VitePress v1.0.0-rc.45">
+    <link rel="preload stylesheet" href="/VFluent3/assets/style.BabQegKX.css" as="style">
+    
+    <script type="module" src="/VFluent3/assets/app.CSutcJ2E.js"></script>
+    <link rel="preload" href="/VFluent3/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/framework.DvIFzl91.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/theme.CgqFBnN_.js">
+    <link rel="modulepreload" href="/VFluent3/assets/guide_components_pagination_index.md.CnW2zAht.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-19c990f1><div class="wrapper" data-v-19c990f1><div class="container" data-v-19c990f1><div class="title" data-v-19c990f1><div class="VPNavBarTitle has-sidebar" data-v-19c990f1 data-v-ab179fa1><a class="title" href="/VFluent3/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>VFluent3</span><!--[--><!--]--></a></div></div><div class="content" data-v-19c990f1><div class="content-body" data-v-19c990f1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-19c990f1><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-19c990f1 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Guide</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-19c990f1 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-19c990f1 data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-19c990f1 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-19c990f1><div class="divider-line" data-v-19c990f1></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-d2ecc192><button data-v-d2ecc192>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-575e6a36><div class="curtain" data-v-575e6a36></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-575e6a36><span class="visually-hidden" id="sidebar-aria-label" data-v-575e6a36> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Basic input</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/button/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/check-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CheckBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/combobox/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Combobox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/details-list/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DetailsList</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drop-down/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DropDown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio-group/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RadioGroup</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/rating-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RatingControl</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/slider/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/toggle-switch/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ToggleSwitch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tag/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Tag</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Collections</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/flip-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>FlipView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/list-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ListView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tree-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TreeView</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Date & Time</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarDatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/time-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TimePicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Dialogs & flyouts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/callout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Callout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Layout</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/collapse/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Collapse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/expander/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Expander</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drawer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Panel</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Media</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/image/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Img</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ImgBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/persona/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Persona</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Menu & toolbars</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/command-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CommandBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/menu-flyout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MenuFlyout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/swipe-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SwipeControl</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible has-active" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Navigation</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/breadcrumb/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationPanel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pivot/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pivot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pagination/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pagination</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Scrolling</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/infinite-scroll-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfiniteScrollView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/scroll-story/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ScrollStory</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Status & info</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/badge/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-ring/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressRing</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Styles</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/animated-icon/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>AnimatedIcon</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/icon-element/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>IconElement</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/reveal-container/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RevealContainer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/shimmer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Shimmer</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Text</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/search-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SearchBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-field/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextField</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/verify-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>VerifyBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Windowing</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/web-window/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>WebWindow</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Global</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Advance</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-935f8a84><div class="content" data-v-935f8a84><div class="outline-marker" data-v-935f8a84></div><div class="outline-title" role="heading" aria-level="2" data-v-935f8a84>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-935f8a84><span class="visually-hidden" id="doc-outline-aria-label" data-v-935f8a84> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-935f8a84 data-v-b933a997><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _VFluent3_guide_components_pagination_" data-v-39a288b8><div><h3 id="pagination-demo" tabindex="-1">Pagination-DEMO <a class="header-anchor" href="#pagination-demo" aria-label="Permalink to &quot;Pagination-DEMO&quot;">​</a></h3><hr><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Pagination</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Pagination</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="pagination-with-background" tabindex="-1">Pagination With Background <a class="header-anchor" href="#pagination-with-background" aria-label="Permalink to &quot;Pagination With Background&quot;">​</a></h3><hr><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Pagination</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;whitesmoke&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Pagination</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="pagination-with-boxshadow" tabindex="-1">Pagination With Boxshadow <a class="header-anchor" href="#pagination-with-boxshadow" aria-label="Permalink to &quot;Pagination With Boxshadow&quot;">​</a></h3><hr><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Pagination</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">total</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;whitesmoke&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">shadow</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Pagination</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="pagination-small-size" tabindex="-1">Pagination Small Size <a class="header-anchor" href="#pagination-small-size" aria-label="Permalink to &quot;Pagination Small Size&quot;">​</a></h3><hr><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Pagination</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">small</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Pagination</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="pagination-disabled" tabindex="-1">Pagination Disabled <a class="header-anchor" href="#pagination-disabled" aria-label="Permalink to &quot;Pagination Disabled&quot;">​</a></h3><hr><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Pagination</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> disabled</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Pagination</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="pagination-dark-theme" tabindex="-1">Pagination Dark Theme <a class="header-anchor" href="#pagination-dark-theme" aria-label="Permalink to &quot;Pagination Dark Theme&quot;">​</a></h3><hr><div style="padding:10px 0px;background:black;"><!----></div><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Pagination</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;dark&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;black&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Pagination</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">value</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">1</td><td style="text-align:center;">当前页码数</td></tr><tr><td style="text-align:center;">foreground</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">rgba(0, 90, 158, 1)</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">background</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">transparent</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">total</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">10</td><td style="text-align:center;">总页码数</td></tr><tr><td style="text-align:center;">maxVisual</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">7</td><td style="text-align:center;">最大可视按钮</td></tr><tr><td style="text-align:center;">small</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">小型分页按钮</td></tr><tr><td style="text-align:center;">shadow</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">system</td><td style="text-align:center;">主题样式, 包含<code>light</code>, <code>dark</code>, <code>system</code>, <code>custom</code>几种样式</td></tr></tbody></table><h3 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to &quot;Events&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">事件名(Name)</th><th style="text-align:center;">参数类型(args)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">next-click</td><td style="text-align:center;">number</td><td style="text-align:center;">下一页按钮点击</td></tr><tr><td style="text-align:center;">prev-click</td><td style="text-align:center;">number</td><td style="text-align:center;">上一页按钮点击</td></tr><tr><td style="text-align:center;">page-click</td><td style="text-align:center;">number</td><td style="text-align:center;">翻页按钮点击</td></tr></tbody></table></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-09de1c0f><!--[--><!--]--><!----><nav class="prev-next" data-v-09de1c0f><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link prev" href="/VFluent3/guide/components/pivot/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Previous page</span><span class="title" data-v-09de1c0f>Pivot</span><!--]--></a></div><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link next" href="/VFluent3/guide/components/infinite-scroll-view/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Next page</span><span class="title" data-v-09de1c0f>InfiniteScrollView</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>MIT Licensed</p><p class="copyright" data-v-e315a0ad>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_calendar-date-picker_properties.md\":\"DXRjmMG8\",\"guide_components_image_properties.md\":\"DGanRzCb\",\"guide_components_img-box_index.md\":\"DYtggkf_\",\"guide_components_img_emits.md\":\"BlE7jvZQ\",\"guide_components_img_index.md\":\"Bm9FiuU4\",\"guide_components_icon-element_properties.md\":\"8Oakruwc\",\"guide_components_img_properties.md\":\"B42YSocI\",\"guide_components_drawer_index.md\":\"D_vpnCpE\",\"guide_components_verify-box_emits.md\":\"DT17Iazx\",\"guide_components_calendar-date-picker_index.md\":\"BdHjrurh\",\"guide_components_rating-control_index.md\":\"Q9l5Lfrr\",\"guide_components_rating-control_properties.md\":\"DKprnl0i\",\"guide_components_calendar-view_index.md\":\"zdoRYVx1\",\"guide_components_animated-icon_index.md\":\"yZDMzCFe\",\"guide_components_calendar-date-picker_emits.md\":\"D5OkfR8j\",\"guide_components_badge_index.md\":\"Bb4crrJn\",\"guide_components_image_index.md\":\"B7X6cWAZ\",\"guide_components_slider_index.md\":\"C7zZ2d-W\",\"guide_components_radio-group_index.md\":\"CVfh3h5H\",\"guide_components_swipe-control_index.md\":\"DwrDVPc1\",\"guide_components_color-picker_emits.md\":\"BHDXVtBQ\",\"guide_components_radio_index.md\":\"90as5QGp\",\"guide_components_pagination_properties.md\":\"JUAPvcTL\",\"guide_components_persona_properties.md\":\"DUTPhPMp\",\"guide_components_combo-box_emits.md\":\"Dh5R-qEv\",\"guide_components_pivot_emits.md\":\"BTJPgNpy\",\"guide_components_pagination_index.md\":\"CnW2zAht\",\"guide_components_flip-view_properties.md\":\"BqZ4hhgU\",\"guide_components_icon-element_emits.md\":\"D5TXFdTZ\",\"guide_components_flip-view_index.md\":\"DefnDOv6\",\"guide_components_navigation-panel_index.md\":\"6mO__sSK\",\"guide_components_rating-control_emits.md\":\"blvomSeC\",\"guide_components_icon-element_index.md\":\"DQ8K7JNn\",\"guide_components_navigation-view_index.md\":\"4AQRiz1k\",\"guide_components_toggle-switch_emits.md\":\"CLGzrNut\",\"guide_components_toggle-switch_index.md\":\"61en_q9-\",\"guide_components_scroll-story_index.md\":\"Vpgb1HSV\",\"guide_components_reveal-container_index.md\":\"Cut2r4tV\",\"guide_components_search-box_emits.md\":\"-d9sWNNt\",\"guide_components_search-box_properties.md\":\"DEKFfPFw\",\"guide_components_shimmer_emits.md\":\"CTMInlI3\",\"guide_components_tag_index.md\":\"BhhxkcHn\",\"guide_components_search-box_index.md\":\"DgkrY0oY\",\"guide_components_shimmer_index.md\":\"iZlHuTxw\",\"guide_components_shimmer_properties.md\":\"CdkU1o6H\",\"guide_components_tree-view_index.md\":\"CUrwan4q\",\"guide_components_text-field_index.md\":\"CXSimJtj\",\"guide_components_text-box_index.md\":\"C5moAPfB\",\"guide_components_progress-ring_properties.md\":\"Dc08Uiff\",\"guide_components_toggle-switch_properties.md\":\"tFppK_IS\",\"guide_components_radio-group_emits.md\":\"cEDzKVnN\",\"guide_components_collapse_index.md\":\"N9Iu5-2v\",\"guide_components_image_emits.md\":\"lmlz2xJd\",\"guide_components_callout_index.md\":\"D9RU33w6\",\"guide_components_pivot_index.md\":\"B_vwQL-5\",\"guide_components_command-bar_index.md\":\"Cp4_rrGB\",\"guide_components_pagination_emits.md\":\"Dng86A22\",\"guide_components_button_index.md\":\"7sqT2MQP\",\"guide_components_info-box_properties.md\":\"BI7Nvk-E\",\"guide_components_drop-down_emits.md\":\"BE95TdKW\",\"guide_components_expander_index.md\":\"BKgcUJzQ\",\"guide_components_message-bar_index.md\":\"AEtAWlF8\",\"guide_components_menu-flyout_index.md\":\"Csa7irPj\",\"guide_components_panel_index.md\":\"CsTu0bXo\",\"guide_components_panel_properties.md\":\"BaxoCYKq\",\"guide_components_progress-bar_emits.md\":\"BcwXUpsF\",\"guide_components_progress-bar_properties.md\":\"TxiS9ZMA\",\"guide_components_progress-ring_emits.md\":\"D2Y6hIZ9\",\"guide_components_color-picker_index.md\":\"DCc4ixcU\",\"guide_components_progress-ring_index.md\":\"CPb-ZEPE\",\"guide_components_color-picker_properties.md\":\"wcXK29Vl\",\"guide_components_time-picker_index.md\":\"CQJdRRaG\",\"guide_components_drop-down_properties.md\":\"Bwlkpr1q\",\"guide_components_infinite-scroll-view_index.md\":\"yAuD807x\",\"guide_components_check-box_index.md\":\"FYgdu4oq\",\"guide_components_progress-bar_index.md\":\"D8vHQw5V\",\"guide_components_combo-box_index.md\":\"DTyu3eNd\",\"guide_components_info-box_emits.md\":\"DlEwpkkq\",\"guide_components_drop-down_index.md\":\"BZzJZQWq\",\"guide_components_list-view_index.md\":\"BoYvMzb0\",\"guide_components_verify-box_properties.md\":\"CW6W8fFf\",\"guide_components_verify-box_index.md\":\"DwSB40wR\",\"guide_index.md\":\"Bndlt3sL\",\"guide_components_web-window_index.md\":\"Bxc8vEeI\",\"index.md\":\"MTRqI42u\",\"guide_components_combo-box_properties.md\":\"AWfHzV6x\",\"guide_components_combobox_emits.md\":\"CGB6WLt8\",\"guide_components_combobox_properties.md\":\"Bja0hMou\",\"guide_components_details-list_index.md\":\"CcgOCIyt\",\"guide_components_info-box_index.md\":\"vXh-_DsL\",\"guide_components_combobox_index.md\":\"CsPkY6YB\",\"guide_components_date-picker_index.md\":\"12vmUIup\",\"guide_components_flip-view_emits.md\":\"DCheHjDj\",\"guide_components_panel_emits.md\":\"DG0REDq8\",\"guide_components_breadcrumb_index.md\":\"DyDm7PeP\",\"guide_components_radio-group_properties.md\":\"BnPxoKsQ\",\"guide_components_persona_emits.md\":\"CnsDPKRU\",\"guide_components_pivot_properties.md\":\"BmoLpPi1\",\"guide_components_persona_index.md\":\"DT00jby4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vfluent3\",\"description\":\"A Vue3 component library for Fluent UI\",\"base\":\"/VFluent3/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"VFluent3\",\"footer\":{\"message\":\"MIT Licensed\",\"copyright\":\"Copyright © Creator SN - 2022\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/\"}],\"sidebar\":[{\"text\":\"Basic input\",\"collapsed\":true,\"items\":[{\"text\":\"Button\",\"link\":\"/guide/components/button/\"},{\"text\":\"CheckBox\",\"link\":\"/guide/components/check-box/\"},{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"},{\"text\":\"Combobox\",\"link\":\"/guide/components/combobox/\"},{\"text\":\"DetailsList\",\"link\":\"/guide/components/details-list/\"},{\"text\":\"DropDown\",\"link\":\"/guide/components/drop-down/\"},{\"text\":\"Radio\",\"link\":\"/guide/components/radio/\"},{\"text\":\"RadioGroup\",\"link\":\"/guide/components/radio-group/\"},{\"text\":\"RatingControl\",\"link\":\"/guide/components/rating-control/\"},{\"text\":\"Slider\",\"link\":\"/guide/components/slider/\"},{\"text\":\"ToggleSwitch\",\"link\":\"/guide/components/toggle-switch/\"},{\"text\":\"Tag\",\"link\":\"/guide/components/tag/\"}]},{\"text\":\"Collections\",\"collapsed\":true,\"items\":[{\"text\":\"FlipView\",\"link\":\"/guide/components/flip-view/\"},{\"text\":\"ListView\",\"link\":\"/guide/components/list-view/\"},{\"text\":\"TreeView\",\"link\":\"/guide/components/tree-view/\"}]},{\"text\":\"Date & Time\",\"collapsed\":true,\"items\":[{\"text\":\"CalendarDatePicker\",\"link\":\"/guide/components/calendar-date-picker/\"},{\"text\":\"CalendarView\",\"link\":\"/guide/components/calendar-view/\"},{\"text\":\"DatePicker\",\"link\":\"/guide/components/date-picker/\"},{\"text\":\"TimePicker\",\"link\":\"/guide/components/time-picker/\"}]},{\"text\":\"Dialogs & flyouts\",\"collapsed\":true,\"items\":[{\"text\":\"Callout\",\"link\":\"/guide/components/callout/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Layout\",\"collapsed\":true,\"items\":[{\"text\":\"Collapse\",\"link\":\"/guide/components/collapse/\"},{\"text\":\"Expander\",\"link\":\"/guide/components/expander/\"},{\"text\":\"Drawer\",\"link\":\"/guide/components/drawer/\"},{\"text\":\"Panel\",\"link\":\"/guide/components/panel/\"}]},{\"text\":\"Media\",\"collapsed\":true,\"items\":[{\"text\":\"Image\",\"link\":\"/guide/components/image/\"},{\"text\":\"Img\",\"link\":\"/guide/components/img/\"},{\"text\":\"ImgBox\",\"link\":\"/guide/components/img-box/\"},{\"text\":\"Persona\",\"link\":\"/guide/components/persona/\"}]},{\"text\":\"Menu & toolbars\",\"collapsed\":true,\"items\":[{\"text\":\"CommandBar\",\"link\":\"/guide/components/command-bar/\"},{\"text\":\"MenuFlyout\",\"link\":\"/guide/components/menu-flyout/\"},{\"text\":\"SwipeControl\",\"link\":\"/guide/components/swipe-control/\"}]},{\"text\":\"Navigation\",\"collapsed\":true,\"items\":[{\"text\":\"Breadcrumb\",\"link\":\"/guide/components/breadcrumb/\"},{\"text\":\"NavigationPanel\",\"link\":\"/guide/components/navigation-panel/\"},{\"text\":\"NavigationView\",\"link\":\"/guide/components/navigation-view/\"},{\"text\":\"Pivot\",\"link\":\"/guide/components/pivot/\"},{\"text\":\"Pagination\",\"link\":\"/guide/components/pagination/\"}]},{\"text\":\"Scrolling\",\"collapsed\":true,\"items\":[{\"text\":\"InfiniteScrollView\",\"link\":\"/guide/components/infinite-scroll-view/\"},{\"text\":\"ScrollStory\",\"link\":\"/guide/components/scroll-story/\"}]},{\"text\":\"Status & info\",\"collapsed\":true,\"items\":[{\"text\":\"Badge\",\"link\":\"/guide/components/badge/\"},{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"ProgressBar\",\"link\":\"/guide/components/progress-bar/\"},{\"text\":\"ProgressRing\",\"link\":\"/guide/components/progress-ring/\"}]},{\"text\":\"Styles\",\"collapsed\":true,\"items\":[{\"text\":\"AnimatedIcon\",\"link\":\"/guide/components/animated-icon/\"},{\"text\":\"IconElement\",\"link\":\"/guide/components/icon-element/\"},{\"text\":\"RevealContainer\",\"link\":\"/guide/components/reveal-container/\"},{\"text\":\"Shimmer\",\"link\":\"/guide/components/shimmer/\"}]},{\"text\":\"Text\",\"collapsed\":true,\"items\":[{\"text\":\"SearchBox\",\"link\":\"/guide/components/search-box/\"},{\"text\":\"TextBox\",\"link\":\"/guide/components/text-box/\"},{\"text\":\"TextField\",\"link\":\"/guide/components/text-field/\"},{\"text\":\"VerifyBox\",\"link\":\"/guide/components/verify-box/\"}]},{\"text\":\"Windowing\",\"collapsed\":true,\"items\":[{\"text\":\"WebWindow\",\"link\":\"/guide/components/web-window/\"}]},{\"text\":\"Global\",\"collapsed\":true,\"items\":[{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Advance\",\"collapsed\":true,\"items\":[{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git a/guide/components/pagination/properties.html b/guide/components/pagination/properties.html
new file mode 100644
index 0000000..d8bf518
--- /dev/null
+++ b/guide/components/pagination/properties.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>vfluent3</title>
+    <meta name="description" content="A Vue3 component library for Fluent UI">
+    <meta name="generator" content="VitePress v1.0.0-rc.45">
+    <link rel="preload stylesheet" href="/VFluent3/assets/style.BabQegKX.css" as="style">
+    
+    <script type="module" src="/VFluent3/assets/app.CSutcJ2E.js"></script>
+    <link rel="preload" href="/VFluent3/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/framework.DvIFzl91.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/theme.CgqFBnN_.js">
+    <link rel="modulepreload" href="/VFluent3/assets/guide_components_pagination_properties.md.JUAPvcTL.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-19c990f1><div class="wrapper" data-v-19c990f1><div class="container" data-v-19c990f1><div class="title" data-v-19c990f1><div class="VPNavBarTitle has-sidebar" data-v-19c990f1 data-v-ab179fa1><a class="title" href="/VFluent3/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>VFluent3</span><!--[--><!--]--></a></div></div><div class="content" data-v-19c990f1><div class="content-body" data-v-19c990f1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-19c990f1><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-19c990f1 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Guide</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-19c990f1 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-19c990f1 data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-19c990f1 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-19c990f1><div class="divider-line" data-v-19c990f1></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-d2ecc192><button data-v-d2ecc192>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-575e6a36><div class="curtain" data-v-575e6a36></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-575e6a36><span class="visually-hidden" id="sidebar-aria-label" data-v-575e6a36> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Basic input</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/button/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/check-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CheckBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/combobox/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Combobox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/details-list/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DetailsList</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drop-down/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DropDown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio-group/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RadioGroup</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/rating-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RatingControl</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/slider/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/toggle-switch/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ToggleSwitch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tag/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Tag</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Collections</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/flip-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>FlipView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/list-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ListView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tree-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TreeView</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Date & Time</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarDatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/time-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TimePicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Dialogs & flyouts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/callout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Callout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Layout</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/collapse/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Collapse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/expander/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Expander</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drawer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Panel</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Media</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/image/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Img</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ImgBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/persona/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Persona</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Menu & toolbars</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/command-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CommandBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/menu-flyout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MenuFlyout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/swipe-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SwipeControl</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Navigation</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/breadcrumb/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationPanel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pivot/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pivot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pagination/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pagination</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Scrolling</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/infinite-scroll-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfiniteScrollView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/scroll-story/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ScrollStory</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Status & info</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/badge/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-ring/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressRing</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Styles</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/animated-icon/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>AnimatedIcon</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/icon-element/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>IconElement</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/reveal-container/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RevealContainer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/shimmer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Shimmer</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Text</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/search-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SearchBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-field/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextField</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/verify-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>VerifyBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Windowing</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/web-window/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>WebWindow</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Global</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Advance</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-935f8a84><div class="content" data-v-935f8a84><div class="outline-marker" data-v-935f8a84></div><div class="outline-title" role="heading" aria-level="2" data-v-935f8a84>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-935f8a84><span class="visually-hidden" id="doc-outline-aria-label" data-v-935f8a84> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-935f8a84 data-v-b933a997><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _VFluent3_guide_components_pagination_properties" data-v-39a288b8><div><h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-label="Permalink to &quot;Properties&quot;">​</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead></table></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-09de1c0f><!--[--><!--]--><!----><nav class="prev-next" data-v-09de1c0f><div class="pager" data-v-09de1c0f><!----></div><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link next" href="/VFluent3/guide/components/button/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Next page</span><span class="title" data-v-09de1c0f>Button</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>MIT Licensed</p><p class="copyright" data-v-e315a0ad>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_calendar-date-picker_properties.md\":\"DXRjmMG8\",\"guide_components_image_properties.md\":\"DGanRzCb\",\"guide_components_img-box_index.md\":\"DYtggkf_\",\"guide_components_img_emits.md\":\"BlE7jvZQ\",\"guide_components_img_index.md\":\"Bm9FiuU4\",\"guide_components_icon-element_properties.md\":\"8Oakruwc\",\"guide_components_img_properties.md\":\"B42YSocI\",\"guide_components_drawer_index.md\":\"D_vpnCpE\",\"guide_components_verify-box_emits.md\":\"DT17Iazx\",\"guide_components_calendar-date-picker_index.md\":\"BdHjrurh\",\"guide_components_rating-control_index.md\":\"Q9l5Lfrr\",\"guide_components_rating-control_properties.md\":\"DKprnl0i\",\"guide_components_calendar-view_index.md\":\"zdoRYVx1\",\"guide_components_animated-icon_index.md\":\"yZDMzCFe\",\"guide_components_calendar-date-picker_emits.md\":\"D5OkfR8j\",\"guide_components_badge_index.md\":\"Bb4crrJn\",\"guide_components_image_index.md\":\"B7X6cWAZ\",\"guide_components_slider_index.md\":\"C7zZ2d-W\",\"guide_components_radio-group_index.md\":\"CVfh3h5H\",\"guide_components_swipe-control_index.md\":\"DwrDVPc1\",\"guide_components_color-picker_emits.md\":\"BHDXVtBQ\",\"guide_components_radio_index.md\":\"90as5QGp\",\"guide_components_pagination_properties.md\":\"JUAPvcTL\",\"guide_components_persona_properties.md\":\"DUTPhPMp\",\"guide_components_combo-box_emits.md\":\"Dh5R-qEv\",\"guide_components_pivot_emits.md\":\"BTJPgNpy\",\"guide_components_pagination_index.md\":\"CnW2zAht\",\"guide_components_flip-view_properties.md\":\"BqZ4hhgU\",\"guide_components_icon-element_emits.md\":\"D5TXFdTZ\",\"guide_components_flip-view_index.md\":\"DefnDOv6\",\"guide_components_navigation-panel_index.md\":\"6mO__sSK\",\"guide_components_rating-control_emits.md\":\"blvomSeC\",\"guide_components_icon-element_index.md\":\"DQ8K7JNn\",\"guide_components_navigation-view_index.md\":\"4AQRiz1k\",\"guide_components_toggle-switch_emits.md\":\"CLGzrNut\",\"guide_components_toggle-switch_index.md\":\"61en_q9-\",\"guide_components_scroll-story_index.md\":\"Vpgb1HSV\",\"guide_components_reveal-container_index.md\":\"Cut2r4tV\",\"guide_components_search-box_emits.md\":\"-d9sWNNt\",\"guide_components_search-box_properties.md\":\"DEKFfPFw\",\"guide_components_shimmer_emits.md\":\"CTMInlI3\",\"guide_components_tag_index.md\":\"BhhxkcHn\",\"guide_components_search-box_index.md\":\"DgkrY0oY\",\"guide_components_shimmer_index.md\":\"iZlHuTxw\",\"guide_components_shimmer_properties.md\":\"CdkU1o6H\",\"guide_components_tree-view_index.md\":\"CUrwan4q\",\"guide_components_text-field_index.md\":\"CXSimJtj\",\"guide_components_text-box_index.md\":\"C5moAPfB\",\"guide_components_progress-ring_properties.md\":\"Dc08Uiff\",\"guide_components_toggle-switch_properties.md\":\"tFppK_IS\",\"guide_components_radio-group_emits.md\":\"cEDzKVnN\",\"guide_components_collapse_index.md\":\"N9Iu5-2v\",\"guide_components_image_emits.md\":\"lmlz2xJd\",\"guide_components_callout_index.md\":\"D9RU33w6\",\"guide_components_pivot_index.md\":\"B_vwQL-5\",\"guide_components_command-bar_index.md\":\"Cp4_rrGB\",\"guide_components_pagination_emits.md\":\"Dng86A22\",\"guide_components_button_index.md\":\"7sqT2MQP\",\"guide_components_info-box_properties.md\":\"BI7Nvk-E\",\"guide_components_drop-down_emits.md\":\"BE95TdKW\",\"guide_components_expander_index.md\":\"BKgcUJzQ\",\"guide_components_message-bar_index.md\":\"AEtAWlF8\",\"guide_components_menu-flyout_index.md\":\"Csa7irPj\",\"guide_components_panel_index.md\":\"CsTu0bXo\",\"guide_components_panel_properties.md\":\"BaxoCYKq\",\"guide_components_progress-bar_emits.md\":\"BcwXUpsF\",\"guide_components_progress-bar_properties.md\":\"TxiS9ZMA\",\"guide_components_progress-ring_emits.md\":\"D2Y6hIZ9\",\"guide_components_color-picker_index.md\":\"DCc4ixcU\",\"guide_components_progress-ring_index.md\":\"CPb-ZEPE\",\"guide_components_color-picker_properties.md\":\"wcXK29Vl\",\"guide_components_time-picker_index.md\":\"CQJdRRaG\",\"guide_components_drop-down_properties.md\":\"Bwlkpr1q\",\"guide_components_infinite-scroll-view_index.md\":\"yAuD807x\",\"guide_components_check-box_index.md\":\"FYgdu4oq\",\"guide_components_progress-bar_index.md\":\"D8vHQw5V\",\"guide_components_combo-box_index.md\":\"DTyu3eNd\",\"guide_components_info-box_emits.md\":\"DlEwpkkq\",\"guide_components_drop-down_index.md\":\"BZzJZQWq\",\"guide_components_list-view_index.md\":\"BoYvMzb0\",\"guide_components_verify-box_properties.md\":\"CW6W8fFf\",\"guide_components_verify-box_index.md\":\"DwSB40wR\",\"guide_index.md\":\"Bndlt3sL\",\"guide_components_web-window_index.md\":\"Bxc8vEeI\",\"index.md\":\"MTRqI42u\",\"guide_components_combo-box_properties.md\":\"AWfHzV6x\",\"guide_components_combobox_emits.md\":\"CGB6WLt8\",\"guide_components_combobox_properties.md\":\"Bja0hMou\",\"guide_components_details-list_index.md\":\"CcgOCIyt\",\"guide_components_info-box_index.md\":\"vXh-_DsL\",\"guide_components_combobox_index.md\":\"CsPkY6YB\",\"guide_components_date-picker_index.md\":\"12vmUIup\",\"guide_components_flip-view_emits.md\":\"DCheHjDj\",\"guide_components_panel_emits.md\":\"DG0REDq8\",\"guide_components_breadcrumb_index.md\":\"DyDm7PeP\",\"guide_components_radio-group_properties.md\":\"BnPxoKsQ\",\"guide_components_persona_emits.md\":\"CnsDPKRU\",\"guide_components_pivot_properties.md\":\"BmoLpPi1\",\"guide_components_persona_index.md\":\"DT00jby4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vfluent3\",\"description\":\"A Vue3 component library for Fluent UI\",\"base\":\"/VFluent3/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"VFluent3\",\"footer\":{\"message\":\"MIT Licensed\",\"copyright\":\"Copyright © Creator SN - 2022\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/\"}],\"sidebar\":[{\"text\":\"Basic input\",\"collapsed\":true,\"items\":[{\"text\":\"Button\",\"link\":\"/guide/components/button/\"},{\"text\":\"CheckBox\",\"link\":\"/guide/components/check-box/\"},{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"},{\"text\":\"Combobox\",\"link\":\"/guide/components/combobox/\"},{\"text\":\"DetailsList\",\"link\":\"/guide/components/details-list/\"},{\"text\":\"DropDown\",\"link\":\"/guide/components/drop-down/\"},{\"text\":\"Radio\",\"link\":\"/guide/components/radio/\"},{\"text\":\"RadioGroup\",\"link\":\"/guide/components/radio-group/\"},{\"text\":\"RatingControl\",\"link\":\"/guide/components/rating-control/\"},{\"text\":\"Slider\",\"link\":\"/guide/components/slider/\"},{\"text\":\"ToggleSwitch\",\"link\":\"/guide/components/toggle-switch/\"},{\"text\":\"Tag\",\"link\":\"/guide/components/tag/\"}]},{\"text\":\"Collections\",\"collapsed\":true,\"items\":[{\"text\":\"FlipView\",\"link\":\"/guide/components/flip-view/\"},{\"text\":\"ListView\",\"link\":\"/guide/components/list-view/\"},{\"text\":\"TreeView\",\"link\":\"/guide/components/tree-view/\"}]},{\"text\":\"Date & Time\",\"collapsed\":true,\"items\":[{\"text\":\"CalendarDatePicker\",\"link\":\"/guide/components/calendar-date-picker/\"},{\"text\":\"CalendarView\",\"link\":\"/guide/components/calendar-view/\"},{\"text\":\"DatePicker\",\"link\":\"/guide/components/date-picker/\"},{\"text\":\"TimePicker\",\"link\":\"/guide/components/time-picker/\"}]},{\"text\":\"Dialogs & flyouts\",\"collapsed\":true,\"items\":[{\"text\":\"Callout\",\"link\":\"/guide/components/callout/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Layout\",\"collapsed\":true,\"items\":[{\"text\":\"Collapse\",\"link\":\"/guide/components/collapse/\"},{\"text\":\"Expander\",\"link\":\"/guide/components/expander/\"},{\"text\":\"Drawer\",\"link\":\"/guide/components/drawer/\"},{\"text\":\"Panel\",\"link\":\"/guide/components/panel/\"}]},{\"text\":\"Media\",\"collapsed\":true,\"items\":[{\"text\":\"Image\",\"link\":\"/guide/components/image/\"},{\"text\":\"Img\",\"link\":\"/guide/components/img/\"},{\"text\":\"ImgBox\",\"link\":\"/guide/components/img-box/\"},{\"text\":\"Persona\",\"link\":\"/guide/components/persona/\"}]},{\"text\":\"Menu & toolbars\",\"collapsed\":true,\"items\":[{\"text\":\"CommandBar\",\"link\":\"/guide/components/command-bar/\"},{\"text\":\"MenuFlyout\",\"link\":\"/guide/components/menu-flyout/\"},{\"text\":\"SwipeControl\",\"link\":\"/guide/components/swipe-control/\"}]},{\"text\":\"Navigation\",\"collapsed\":true,\"items\":[{\"text\":\"Breadcrumb\",\"link\":\"/guide/components/breadcrumb/\"},{\"text\":\"NavigationPanel\",\"link\":\"/guide/components/navigation-panel/\"},{\"text\":\"NavigationView\",\"link\":\"/guide/components/navigation-view/\"},{\"text\":\"Pivot\",\"link\":\"/guide/components/pivot/\"},{\"text\":\"Pagination\",\"link\":\"/guide/components/pagination/\"}]},{\"text\":\"Scrolling\",\"collapsed\":true,\"items\":[{\"text\":\"InfiniteScrollView\",\"link\":\"/guide/components/infinite-scroll-view/\"},{\"text\":\"ScrollStory\",\"link\":\"/guide/components/scroll-story/\"}]},{\"text\":\"Status & info\",\"collapsed\":true,\"items\":[{\"text\":\"Badge\",\"link\":\"/guide/components/badge/\"},{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"ProgressBar\",\"link\":\"/guide/components/progress-bar/\"},{\"text\":\"ProgressRing\",\"link\":\"/guide/components/progress-ring/\"}]},{\"text\":\"Styles\",\"collapsed\":true,\"items\":[{\"text\":\"AnimatedIcon\",\"link\":\"/guide/components/animated-icon/\"},{\"text\":\"IconElement\",\"link\":\"/guide/components/icon-element/\"},{\"text\":\"RevealContainer\",\"link\":\"/guide/components/reveal-container/\"},{\"text\":\"Shimmer\",\"link\":\"/guide/components/shimmer/\"}]},{\"text\":\"Text\",\"collapsed\":true,\"items\":[{\"text\":\"SearchBox\",\"link\":\"/guide/components/search-box/\"},{\"text\":\"TextBox\",\"link\":\"/guide/components/text-box/\"},{\"text\":\"TextField\",\"link\":\"/guide/components/text-field/\"},{\"text\":\"VerifyBox\",\"link\":\"/guide/components/verify-box/\"}]},{\"text\":\"Windowing\",\"collapsed\":true,\"items\":[{\"text\":\"WebWindow\",\"link\":\"/guide/components/web-window/\"}]},{\"text\":\"Global\",\"collapsed\":true,\"items\":[{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Advance\",\"collapsed\":true,\"items\":[{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git a/guide/components/panel/emits.html b/guide/components/panel/emits.html
new file mode 100644
index 0000000..afda289
--- /dev/null
+++ b/guide/components/panel/emits.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>vfluent3</title>
+    <meta name="description" content="A Vue3 component library for Fluent UI">
+    <meta name="generator" content="VitePress v1.0.0-rc.45">
+    <link rel="preload stylesheet" href="/VFluent3/assets/style.BabQegKX.css" as="style">
+    
+    <script type="module" src="/VFluent3/assets/app.CSutcJ2E.js"></script>
+    <link rel="preload" href="/VFluent3/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/framework.DvIFzl91.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/theme.CgqFBnN_.js">
+    <link rel="modulepreload" href="/VFluent3/assets/guide_components_panel_emits.md.DG0REDq8.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-19c990f1><div class="wrapper" data-v-19c990f1><div class="container" data-v-19c990f1><div class="title" data-v-19c990f1><div class="VPNavBarTitle has-sidebar" data-v-19c990f1 data-v-ab179fa1><a class="title" href="/VFluent3/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>VFluent3</span><!--[--><!--]--></a></div></div><div class="content" data-v-19c990f1><div class="content-body" data-v-19c990f1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-19c990f1><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-19c990f1 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Guide</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-19c990f1 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-19c990f1 data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-19c990f1 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-19c990f1><div class="divider-line" data-v-19c990f1></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-d2ecc192><button data-v-d2ecc192>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-575e6a36><div class="curtain" data-v-575e6a36></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-575e6a36><span class="visually-hidden" id="sidebar-aria-label" data-v-575e6a36> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Basic input</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/button/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/check-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CheckBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/combobox/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Combobox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/details-list/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DetailsList</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drop-down/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DropDown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio-group/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RadioGroup</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/rating-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RatingControl</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/slider/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/toggle-switch/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ToggleSwitch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tag/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Tag</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Collections</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/flip-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>FlipView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/list-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ListView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tree-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TreeView</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Date & Time</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarDatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/time-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TimePicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Dialogs & flyouts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/callout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Callout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Layout</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/collapse/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Collapse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/expander/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Expander</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drawer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Panel</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Media</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/image/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Img</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ImgBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/persona/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Persona</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Menu & toolbars</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/command-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CommandBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/menu-flyout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MenuFlyout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/swipe-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SwipeControl</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Navigation</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/breadcrumb/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationPanel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pivot/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pivot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pagination/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pagination</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Scrolling</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/infinite-scroll-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfiniteScrollView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/scroll-story/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ScrollStory</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Status & info</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/badge/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-ring/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressRing</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Styles</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/animated-icon/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>AnimatedIcon</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/icon-element/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>IconElement</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/reveal-container/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RevealContainer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/shimmer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Shimmer</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Text</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/search-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SearchBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-field/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextField</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/verify-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>VerifyBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Windowing</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/web-window/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>WebWindow</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Global</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Advance</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-935f8a84><div class="content" data-v-935f8a84><div class="outline-marker" data-v-935f8a84></div><div class="outline-title" role="heading" aria-level="2" data-v-935f8a84>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-935f8a84><span class="visually-hidden" id="doc-outline-aria-label" data-v-935f8a84> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-935f8a84 data-v-b933a997><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _VFluent3_guide_components_panel_emits" data-v-39a288b8><div><h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-label="Permalink to &quot;Emits&quot;">​</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead></table></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-09de1c0f><!--[--><!--]--><!----><nav class="prev-next" data-v-09de1c0f><div class="pager" data-v-09de1c0f><!----></div><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link next" href="/VFluent3/guide/components/button/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Next page</span><span class="title" data-v-09de1c0f>Button</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>MIT Licensed</p><p class="copyright" data-v-e315a0ad>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_calendar-date-picker_properties.md\":\"DXRjmMG8\",\"guide_components_image_properties.md\":\"DGanRzCb\",\"guide_components_img-box_index.md\":\"DYtggkf_\",\"guide_components_img_emits.md\":\"BlE7jvZQ\",\"guide_components_img_index.md\":\"Bm9FiuU4\",\"guide_components_icon-element_properties.md\":\"8Oakruwc\",\"guide_components_img_properties.md\":\"B42YSocI\",\"guide_components_drawer_index.md\":\"D_vpnCpE\",\"guide_components_verify-box_emits.md\":\"DT17Iazx\",\"guide_components_calendar-date-picker_index.md\":\"BdHjrurh\",\"guide_components_rating-control_index.md\":\"Q9l5Lfrr\",\"guide_components_rating-control_properties.md\":\"DKprnl0i\",\"guide_components_calendar-view_index.md\":\"zdoRYVx1\",\"guide_components_animated-icon_index.md\":\"yZDMzCFe\",\"guide_components_calendar-date-picker_emits.md\":\"D5OkfR8j\",\"guide_components_badge_index.md\":\"Bb4crrJn\",\"guide_components_image_index.md\":\"B7X6cWAZ\",\"guide_components_slider_index.md\":\"C7zZ2d-W\",\"guide_components_radio-group_index.md\":\"CVfh3h5H\",\"guide_components_swipe-control_index.md\":\"DwrDVPc1\",\"guide_components_color-picker_emits.md\":\"BHDXVtBQ\",\"guide_components_radio_index.md\":\"90as5QGp\",\"guide_components_pagination_properties.md\":\"JUAPvcTL\",\"guide_components_persona_properties.md\":\"DUTPhPMp\",\"guide_components_combo-box_emits.md\":\"Dh5R-qEv\",\"guide_components_pivot_emits.md\":\"BTJPgNpy\",\"guide_components_pagination_index.md\":\"CnW2zAht\",\"guide_components_flip-view_properties.md\":\"BqZ4hhgU\",\"guide_components_icon-element_emits.md\":\"D5TXFdTZ\",\"guide_components_flip-view_index.md\":\"DefnDOv6\",\"guide_components_navigation-panel_index.md\":\"6mO__sSK\",\"guide_components_rating-control_emits.md\":\"blvomSeC\",\"guide_components_icon-element_index.md\":\"DQ8K7JNn\",\"guide_components_navigation-view_index.md\":\"4AQRiz1k\",\"guide_components_toggle-switch_emits.md\":\"CLGzrNut\",\"guide_components_toggle-switch_index.md\":\"61en_q9-\",\"guide_components_scroll-story_index.md\":\"Vpgb1HSV\",\"guide_components_reveal-container_index.md\":\"Cut2r4tV\",\"guide_components_search-box_emits.md\":\"-d9sWNNt\",\"guide_components_search-box_properties.md\":\"DEKFfPFw\",\"guide_components_shimmer_emits.md\":\"CTMInlI3\",\"guide_components_tag_index.md\":\"BhhxkcHn\",\"guide_components_search-box_index.md\":\"DgkrY0oY\",\"guide_components_shimmer_index.md\":\"iZlHuTxw\",\"guide_components_shimmer_properties.md\":\"CdkU1o6H\",\"guide_components_tree-view_index.md\":\"CUrwan4q\",\"guide_components_text-field_index.md\":\"CXSimJtj\",\"guide_components_text-box_index.md\":\"C5moAPfB\",\"guide_components_progress-ring_properties.md\":\"Dc08Uiff\",\"guide_components_toggle-switch_properties.md\":\"tFppK_IS\",\"guide_components_radio-group_emits.md\":\"cEDzKVnN\",\"guide_components_collapse_index.md\":\"N9Iu5-2v\",\"guide_components_image_emits.md\":\"lmlz2xJd\",\"guide_components_callout_index.md\":\"D9RU33w6\",\"guide_components_pivot_index.md\":\"B_vwQL-5\",\"guide_components_command-bar_index.md\":\"Cp4_rrGB\",\"guide_components_pagination_emits.md\":\"Dng86A22\",\"guide_components_button_index.md\":\"7sqT2MQP\",\"guide_components_info-box_properties.md\":\"BI7Nvk-E\",\"guide_components_drop-down_emits.md\":\"BE95TdKW\",\"guide_components_expander_index.md\":\"BKgcUJzQ\",\"guide_components_message-bar_index.md\":\"AEtAWlF8\",\"guide_components_menu-flyout_index.md\":\"Csa7irPj\",\"guide_components_panel_index.md\":\"CsTu0bXo\",\"guide_components_panel_properties.md\":\"BaxoCYKq\",\"guide_components_progress-bar_emits.md\":\"BcwXUpsF\",\"guide_components_progress-bar_properties.md\":\"TxiS9ZMA\",\"guide_components_progress-ring_emits.md\":\"D2Y6hIZ9\",\"guide_components_color-picker_index.md\":\"DCc4ixcU\",\"guide_components_progress-ring_index.md\":\"CPb-ZEPE\",\"guide_components_color-picker_properties.md\":\"wcXK29Vl\",\"guide_components_time-picker_index.md\":\"CQJdRRaG\",\"guide_components_drop-down_properties.md\":\"Bwlkpr1q\",\"guide_components_infinite-scroll-view_index.md\":\"yAuD807x\",\"guide_components_check-box_index.md\":\"FYgdu4oq\",\"guide_components_progress-bar_index.md\":\"D8vHQw5V\",\"guide_components_combo-box_index.md\":\"DTyu3eNd\",\"guide_components_info-box_emits.md\":\"DlEwpkkq\",\"guide_components_drop-down_index.md\":\"BZzJZQWq\",\"guide_components_list-view_index.md\":\"BoYvMzb0\",\"guide_components_verify-box_properties.md\":\"CW6W8fFf\",\"guide_components_verify-box_index.md\":\"DwSB40wR\",\"guide_index.md\":\"Bndlt3sL\",\"guide_components_web-window_index.md\":\"Bxc8vEeI\",\"index.md\":\"MTRqI42u\",\"guide_components_combo-box_properties.md\":\"AWfHzV6x\",\"guide_components_combobox_emits.md\":\"CGB6WLt8\",\"guide_components_combobox_properties.md\":\"Bja0hMou\",\"guide_components_details-list_index.md\":\"CcgOCIyt\",\"guide_components_info-box_index.md\":\"vXh-_DsL\",\"guide_components_combobox_index.md\":\"CsPkY6YB\",\"guide_components_date-picker_index.md\":\"12vmUIup\",\"guide_components_flip-view_emits.md\":\"DCheHjDj\",\"guide_components_panel_emits.md\":\"DG0REDq8\",\"guide_components_breadcrumb_index.md\":\"DyDm7PeP\",\"guide_components_radio-group_properties.md\":\"BnPxoKsQ\",\"guide_components_persona_emits.md\":\"CnsDPKRU\",\"guide_components_pivot_properties.md\":\"BmoLpPi1\",\"guide_components_persona_index.md\":\"DT00jby4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vfluent3\",\"description\":\"A Vue3 component library for Fluent UI\",\"base\":\"/VFluent3/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"VFluent3\",\"footer\":{\"message\":\"MIT Licensed\",\"copyright\":\"Copyright © Creator SN - 2022\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/\"}],\"sidebar\":[{\"text\":\"Basic input\",\"collapsed\":true,\"items\":[{\"text\":\"Button\",\"link\":\"/guide/components/button/\"},{\"text\":\"CheckBox\",\"link\":\"/guide/components/check-box/\"},{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"},{\"text\":\"Combobox\",\"link\":\"/guide/components/combobox/\"},{\"text\":\"DetailsList\",\"link\":\"/guide/components/details-list/\"},{\"text\":\"DropDown\",\"link\":\"/guide/components/drop-down/\"},{\"text\":\"Radio\",\"link\":\"/guide/components/radio/\"},{\"text\":\"RadioGroup\",\"link\":\"/guide/components/radio-group/\"},{\"text\":\"RatingControl\",\"link\":\"/guide/components/rating-control/\"},{\"text\":\"Slider\",\"link\":\"/guide/components/slider/\"},{\"text\":\"ToggleSwitch\",\"link\":\"/guide/components/toggle-switch/\"},{\"text\":\"Tag\",\"link\":\"/guide/components/tag/\"}]},{\"text\":\"Collections\",\"collapsed\":true,\"items\":[{\"text\":\"FlipView\",\"link\":\"/guide/components/flip-view/\"},{\"text\":\"ListView\",\"link\":\"/guide/components/list-view/\"},{\"text\":\"TreeView\",\"link\":\"/guide/components/tree-view/\"}]},{\"text\":\"Date & Time\",\"collapsed\":true,\"items\":[{\"text\":\"CalendarDatePicker\",\"link\":\"/guide/components/calendar-date-picker/\"},{\"text\":\"CalendarView\",\"link\":\"/guide/components/calendar-view/\"},{\"text\":\"DatePicker\",\"link\":\"/guide/components/date-picker/\"},{\"text\":\"TimePicker\",\"link\":\"/guide/components/time-picker/\"}]},{\"text\":\"Dialogs & flyouts\",\"collapsed\":true,\"items\":[{\"text\":\"Callout\",\"link\":\"/guide/components/callout/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Layout\",\"collapsed\":true,\"items\":[{\"text\":\"Collapse\",\"link\":\"/guide/components/collapse/\"},{\"text\":\"Expander\",\"link\":\"/guide/components/expander/\"},{\"text\":\"Drawer\",\"link\":\"/guide/components/drawer/\"},{\"text\":\"Panel\",\"link\":\"/guide/components/panel/\"}]},{\"text\":\"Media\",\"collapsed\":true,\"items\":[{\"text\":\"Image\",\"link\":\"/guide/components/image/\"},{\"text\":\"Img\",\"link\":\"/guide/components/img/\"},{\"text\":\"ImgBox\",\"link\":\"/guide/components/img-box/\"},{\"text\":\"Persona\",\"link\":\"/guide/components/persona/\"}]},{\"text\":\"Menu & toolbars\",\"collapsed\":true,\"items\":[{\"text\":\"CommandBar\",\"link\":\"/guide/components/command-bar/\"},{\"text\":\"MenuFlyout\",\"link\":\"/guide/components/menu-flyout/\"},{\"text\":\"SwipeControl\",\"link\":\"/guide/components/swipe-control/\"}]},{\"text\":\"Navigation\",\"collapsed\":true,\"items\":[{\"text\":\"Breadcrumb\",\"link\":\"/guide/components/breadcrumb/\"},{\"text\":\"NavigationPanel\",\"link\":\"/guide/components/navigation-panel/\"},{\"text\":\"NavigationView\",\"link\":\"/guide/components/navigation-view/\"},{\"text\":\"Pivot\",\"link\":\"/guide/components/pivot/\"},{\"text\":\"Pagination\",\"link\":\"/guide/components/pagination/\"}]},{\"text\":\"Scrolling\",\"collapsed\":true,\"items\":[{\"text\":\"InfiniteScrollView\",\"link\":\"/guide/components/infinite-scroll-view/\"},{\"text\":\"ScrollStory\",\"link\":\"/guide/components/scroll-story/\"}]},{\"text\":\"Status & info\",\"collapsed\":true,\"items\":[{\"text\":\"Badge\",\"link\":\"/guide/components/badge/\"},{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"ProgressBar\",\"link\":\"/guide/components/progress-bar/\"},{\"text\":\"ProgressRing\",\"link\":\"/guide/components/progress-ring/\"}]},{\"text\":\"Styles\",\"collapsed\":true,\"items\":[{\"text\":\"AnimatedIcon\",\"link\":\"/guide/components/animated-icon/\"},{\"text\":\"IconElement\",\"link\":\"/guide/components/icon-element/\"},{\"text\":\"RevealContainer\",\"link\":\"/guide/components/reveal-container/\"},{\"text\":\"Shimmer\",\"link\":\"/guide/components/shimmer/\"}]},{\"text\":\"Text\",\"collapsed\":true,\"items\":[{\"text\":\"SearchBox\",\"link\":\"/guide/components/search-box/\"},{\"text\":\"TextBox\",\"link\":\"/guide/components/text-box/\"},{\"text\":\"TextField\",\"link\":\"/guide/components/text-field/\"},{\"text\":\"VerifyBox\",\"link\":\"/guide/components/verify-box/\"}]},{\"text\":\"Windowing\",\"collapsed\":true,\"items\":[{\"text\":\"WebWindow\",\"link\":\"/guide/components/web-window/\"}]},{\"text\":\"Global\",\"collapsed\":true,\"items\":[{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Advance\",\"collapsed\":true,\"items\":[{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git a/guide/components/panel/index.html b/guide/components/panel/index.html
new file mode 100644
index 0000000..3330fe1
--- /dev/null
+++ b/guide/components/panel/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>Panel | vfluent3</title>
+    <meta name="description" content="A Vue3 component library for Fluent UI">
+    <meta name="generator" content="VitePress v1.0.0-rc.45">
+    <link rel="preload stylesheet" href="/VFluent3/assets/style.BabQegKX.css" as="style">
+    
+    <script type="module" src="/VFluent3/assets/app.CSutcJ2E.js"></script>
+    <link rel="preload" href="/VFluent3/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/framework.DvIFzl91.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/theme.CgqFBnN_.js">
+    <link rel="modulepreload" href="/VFluent3/assets/guide_components_panel_index.md.CsTu0bXo.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-19c990f1><div class="wrapper" data-v-19c990f1><div class="container" data-v-19c990f1><div class="title" data-v-19c990f1><div class="VPNavBarTitle has-sidebar" data-v-19c990f1 data-v-ab179fa1><a class="title" href="/VFluent3/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>VFluent3</span><!--[--><!--]--></a></div></div><div class="content" data-v-19c990f1><div class="content-body" data-v-19c990f1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-19c990f1><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-19c990f1 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Guide</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-19c990f1 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-19c990f1 data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-19c990f1 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-19c990f1><div class="divider-line" data-v-19c990f1></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-d2ecc192><button data-v-d2ecc192>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-575e6a36><div class="curtain" data-v-575e6a36></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-575e6a36><span class="visually-hidden" id="sidebar-aria-label" data-v-575e6a36> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Basic input</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/button/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/check-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CheckBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/combobox/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Combobox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/details-list/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DetailsList</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drop-down/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DropDown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio-group/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RadioGroup</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/rating-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RatingControl</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/slider/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/toggle-switch/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ToggleSwitch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tag/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Tag</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Collections</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/flip-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>FlipView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/list-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ListView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tree-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TreeView</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Date & Time</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarDatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/time-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TimePicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Dialogs & flyouts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/callout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Callout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible has-active" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Layout</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/collapse/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Collapse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/expander/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Expander</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drawer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Panel</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Media</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/image/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Img</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ImgBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/persona/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Persona</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Menu & toolbars</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/command-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CommandBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/menu-flyout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MenuFlyout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/swipe-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SwipeControl</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Navigation</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/breadcrumb/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationPanel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pivot/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pivot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pagination/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pagination</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Scrolling</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/infinite-scroll-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfiniteScrollView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/scroll-story/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ScrollStory</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Status & info</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/badge/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-ring/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressRing</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Styles</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/animated-icon/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>AnimatedIcon</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/icon-element/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>IconElement</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/reveal-container/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RevealContainer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/shimmer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Shimmer</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Text</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/search-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SearchBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-field/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextField</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/verify-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>VerifyBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Windowing</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/web-window/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>WebWindow</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Global</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Advance</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-935f8a84><div class="content" data-v-935f8a84><div class="outline-marker" data-v-935f8a84></div><div class="outline-title" role="heading" aria-level="2" data-v-935f8a84>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-935f8a84><span class="visually-hidden" id="doc-outline-aria-label" data-v-935f8a84> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-935f8a84 data-v-b933a997><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _VFluent3_guide_components_panel_" data-v-39a288b8><div><h3 id="panel-demo" tabindex="-1">Panel-DEMO <a class="header-anchor" href="#panel-demo" aria-label="Permalink to &quot;Panel-DEMO&quot;">​</a></h3><hr><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Panel</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">basic</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Panel</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="panel-near-side" tabindex="-1">Panel Near Side <a class="header-anchor" href="#panel-near-side" aria-label="Permalink to &quot;Panel Near Side&quot;">​</a></h3><hr><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Panel</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">nearSide</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">isNearSide</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Panel</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="panel-central-side" tabindex="-1">Panel Central Side <a class="header-anchor" href="#panel-central-side" aria-label="Permalink to &quot;Panel Central Side&quot;">​</a></h3><hr><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Panel</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">centralSide</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">isCentralSide</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;calc(90% - 50px)&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;calc(90% - 50px)&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Panel</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="panel-light-dismiss" tabindex="-1">Panel Light Dismiss <a class="header-anchor" href="#panel-light-dismiss" aria-label="Permalink to &quot;Panel Light Dismiss&quot;">​</a></h3><hr><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Panel</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">lightDismiss</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">isLightDismiss</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Panel</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="panel-acrylic" tabindex="-1">Panel Acrylic <a class="header-anchor" href="#panel-acrylic" aria-label="Permalink to &quot;Panel Acrylic&quot;">​</a></h3><hr><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Panel</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">acrylic</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">isLightDismiss</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">isAcrylic</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Panel</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="panel-footer" tabindex="-1">Panel Footer <a class="header-anchor" href="#panel-footer" aria-label="Permalink to &quot;Panel Footer&quot;">​</a></h3><hr><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Panel</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">footer</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">isFooter</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">isAcrylic</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;template v-slot:footer&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;fv-button theme=&quot;dark&quot; background=&quot;rgba(0, 90, 158, 1)&quot;&gt;OK&lt;/fv-button&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;fv-button&gt;Cancel&lt;/fv-button&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Panel</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h3 id="panel-dark-theme" tabindex="-1">Panel Dark Theme <a class="header-anchor" href="#panel-dark-theme" aria-label="Permalink to &quot;Panel Dark Theme&quot;">​</a></h3><hr><p>Standard</p><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Panel</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">dark</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">isLightDismiss</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;dark&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Panel</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>Acrylic</p><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Panel</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">acrylicDark</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">isLightDismiss</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">isAcrylic</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;dark&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Panel</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">value</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">显示/隐藏<code>Panel</code></td></tr><tr><td style="text-align:center;">title</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">Sample Panel</td><td style="text-align:center;">标题</td></tr><tr><td style="text-align:center;">titleSize</td><td style="text-align:center;">[number,string]</td><td style="text-align:center;">No</td><td style="text-align:center;">20</td><td style="text-align:center;">标题字体大小</td></tr><tr><td style="text-align:center;">titleWeight</td><td style="text-align:center;">[number,string]</td><td style="text-align:center;">No</td><td style="text-align:center;">600</td><td style="text-align:center;">标题字体粗细</td></tr><tr><td style="text-align:center;">titleColor</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">标题字体颜色</td></tr><tr><td style="text-align:center;">width</td><td style="text-align:center;">[number,string]</td><td style="text-align:center;">No</td><td style="text-align:center;">340</td><td style="text-align:center;">宽度</td></tr><tr><td style="text-align:center;">height</td><td style="text-align:center;">[number,string]</td><td style="text-align:center;">No</td><td style="text-align:center;">100%</td><td style="text-align:center;">宽度</td></tr><tr><td style="text-align:center;">background</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"><code>Panel</code>背景色</td></tr><tr><td style="text-align:center;">isNearSide</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否从左侧显示</td></tr><tr><td style="text-align:center;">isCentralSide</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否从中央显示</td></tr><tr><td style="text-align:center;">isLightDismiss</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否单击空白处关闭</td></tr><tr><td style="text-align:center;">showTitleBar</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否显示标题栏</td></tr><tr><td style="text-align:center;">isFooter</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否显示底部控制</td></tr><tr><td style="text-align:center;">isAcrylic</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否开启<code>Acrylic</code>效果</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">system</td><td style="text-align:center;">主题样式, 包含<code>light</code>, <code>dark</code>, <code>system</code>, <code>custom</code>几种样式</td></tr></tbody></table><h3 id="slot" tabindex="-1">Slot <a class="header-anchor" href="#slot" aria-label="Permalink to &quot;Slot&quot;">​</a></h3><hr><ol><li>Container</li></ol><p>自定义容器内容</p><div class="language-javascript vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">container</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><ol start="2"><li>Header</li></ol><p>自定义标题栏内容</p><div class="language-javascript vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">header</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><ol start="3"><li>Footer</li></ol><p>自定义<code>Footer</code>内容</p><div class="language-javascript vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">footer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-09de1c0f><!--[--><!--]--><!----><nav class="prev-next" data-v-09de1c0f><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link prev" href="/VFluent3/guide/components/drawer/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Previous page</span><span class="title" data-v-09de1c0f>Drawer</span><!--]--></a></div><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link next" href="/VFluent3/guide/components/image/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Next page</span><span class="title" data-v-09de1c0f>Image</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>MIT Licensed</p><p class="copyright" data-v-e315a0ad>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_calendar-date-picker_properties.md\":\"DXRjmMG8\",\"guide_components_image_properties.md\":\"DGanRzCb\",\"guide_components_img-box_index.md\":\"DYtggkf_\",\"guide_components_img_emits.md\":\"BlE7jvZQ\",\"guide_components_img_index.md\":\"Bm9FiuU4\",\"guide_components_icon-element_properties.md\":\"8Oakruwc\",\"guide_components_img_properties.md\":\"B42YSocI\",\"guide_components_drawer_index.md\":\"D_vpnCpE\",\"guide_components_verify-box_emits.md\":\"DT17Iazx\",\"guide_components_calendar-date-picker_index.md\":\"BdHjrurh\",\"guide_components_rating-control_index.md\":\"Q9l5Lfrr\",\"guide_components_rating-control_properties.md\":\"DKprnl0i\",\"guide_components_calendar-view_index.md\":\"zdoRYVx1\",\"guide_components_animated-icon_index.md\":\"yZDMzCFe\",\"guide_components_calendar-date-picker_emits.md\":\"D5OkfR8j\",\"guide_components_badge_index.md\":\"Bb4crrJn\",\"guide_components_image_index.md\":\"B7X6cWAZ\",\"guide_components_slider_index.md\":\"C7zZ2d-W\",\"guide_components_radio-group_index.md\":\"CVfh3h5H\",\"guide_components_swipe-control_index.md\":\"DwrDVPc1\",\"guide_components_color-picker_emits.md\":\"BHDXVtBQ\",\"guide_components_radio_index.md\":\"90as5QGp\",\"guide_components_pagination_properties.md\":\"JUAPvcTL\",\"guide_components_persona_properties.md\":\"DUTPhPMp\",\"guide_components_combo-box_emits.md\":\"Dh5R-qEv\",\"guide_components_pivot_emits.md\":\"BTJPgNpy\",\"guide_components_pagination_index.md\":\"CnW2zAht\",\"guide_components_flip-view_properties.md\":\"BqZ4hhgU\",\"guide_components_icon-element_emits.md\":\"D5TXFdTZ\",\"guide_components_flip-view_index.md\":\"DefnDOv6\",\"guide_components_navigation-panel_index.md\":\"6mO__sSK\",\"guide_components_rating-control_emits.md\":\"blvomSeC\",\"guide_components_icon-element_index.md\":\"DQ8K7JNn\",\"guide_components_navigation-view_index.md\":\"4AQRiz1k\",\"guide_components_toggle-switch_emits.md\":\"CLGzrNut\",\"guide_components_toggle-switch_index.md\":\"61en_q9-\",\"guide_components_scroll-story_index.md\":\"Vpgb1HSV\",\"guide_components_reveal-container_index.md\":\"Cut2r4tV\",\"guide_components_search-box_emits.md\":\"-d9sWNNt\",\"guide_components_search-box_properties.md\":\"DEKFfPFw\",\"guide_components_shimmer_emits.md\":\"CTMInlI3\",\"guide_components_tag_index.md\":\"BhhxkcHn\",\"guide_components_search-box_index.md\":\"DgkrY0oY\",\"guide_components_shimmer_index.md\":\"iZlHuTxw\",\"guide_components_shimmer_properties.md\":\"CdkU1o6H\",\"guide_components_tree-view_index.md\":\"CUrwan4q\",\"guide_components_text-field_index.md\":\"CXSimJtj\",\"guide_components_text-box_index.md\":\"C5moAPfB\",\"guide_components_progress-ring_properties.md\":\"Dc08Uiff\",\"guide_components_toggle-switch_properties.md\":\"tFppK_IS\",\"guide_components_radio-group_emits.md\":\"cEDzKVnN\",\"guide_components_collapse_index.md\":\"N9Iu5-2v\",\"guide_components_image_emits.md\":\"lmlz2xJd\",\"guide_components_callout_index.md\":\"D9RU33w6\",\"guide_components_pivot_index.md\":\"B_vwQL-5\",\"guide_components_command-bar_index.md\":\"Cp4_rrGB\",\"guide_components_pagination_emits.md\":\"Dng86A22\",\"guide_components_button_index.md\":\"7sqT2MQP\",\"guide_components_info-box_properties.md\":\"BI7Nvk-E\",\"guide_components_drop-down_emits.md\":\"BE95TdKW\",\"guide_components_expander_index.md\":\"BKgcUJzQ\",\"guide_components_message-bar_index.md\":\"AEtAWlF8\",\"guide_components_menu-flyout_index.md\":\"Csa7irPj\",\"guide_components_panel_index.md\":\"CsTu0bXo\",\"guide_components_panel_properties.md\":\"BaxoCYKq\",\"guide_components_progress-bar_emits.md\":\"BcwXUpsF\",\"guide_components_progress-bar_properties.md\":\"TxiS9ZMA\",\"guide_components_progress-ring_emits.md\":\"D2Y6hIZ9\",\"guide_components_color-picker_index.md\":\"DCc4ixcU\",\"guide_components_progress-ring_index.md\":\"CPb-ZEPE\",\"guide_components_color-picker_properties.md\":\"wcXK29Vl\",\"guide_components_time-picker_index.md\":\"CQJdRRaG\",\"guide_components_drop-down_properties.md\":\"Bwlkpr1q\",\"guide_components_infinite-scroll-view_index.md\":\"yAuD807x\",\"guide_components_check-box_index.md\":\"FYgdu4oq\",\"guide_components_progress-bar_index.md\":\"D8vHQw5V\",\"guide_components_combo-box_index.md\":\"DTyu3eNd\",\"guide_components_info-box_emits.md\":\"DlEwpkkq\",\"guide_components_drop-down_index.md\":\"BZzJZQWq\",\"guide_components_list-view_index.md\":\"BoYvMzb0\",\"guide_components_verify-box_properties.md\":\"CW6W8fFf\",\"guide_components_verify-box_index.md\":\"DwSB40wR\",\"guide_index.md\":\"Bndlt3sL\",\"guide_components_web-window_index.md\":\"Bxc8vEeI\",\"index.md\":\"MTRqI42u\",\"guide_components_combo-box_properties.md\":\"AWfHzV6x\",\"guide_components_combobox_emits.md\":\"CGB6WLt8\",\"guide_components_combobox_properties.md\":\"Bja0hMou\",\"guide_components_details-list_index.md\":\"CcgOCIyt\",\"guide_components_info-box_index.md\":\"vXh-_DsL\",\"guide_components_combobox_index.md\":\"CsPkY6YB\",\"guide_components_date-picker_index.md\":\"12vmUIup\",\"guide_components_flip-view_emits.md\":\"DCheHjDj\",\"guide_components_panel_emits.md\":\"DG0REDq8\",\"guide_components_breadcrumb_index.md\":\"DyDm7PeP\",\"guide_components_radio-group_properties.md\":\"BnPxoKsQ\",\"guide_components_persona_emits.md\":\"CnsDPKRU\",\"guide_components_pivot_properties.md\":\"BmoLpPi1\",\"guide_components_persona_index.md\":\"DT00jby4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vfluent3\",\"description\":\"A Vue3 component library for Fluent UI\",\"base\":\"/VFluent3/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"VFluent3\",\"footer\":{\"message\":\"MIT Licensed\",\"copyright\":\"Copyright © Creator SN - 2022\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/\"}],\"sidebar\":[{\"text\":\"Basic input\",\"collapsed\":true,\"items\":[{\"text\":\"Button\",\"link\":\"/guide/components/button/\"},{\"text\":\"CheckBox\",\"link\":\"/guide/components/check-box/\"},{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"},{\"text\":\"Combobox\",\"link\":\"/guide/components/combobox/\"},{\"text\":\"DetailsList\",\"link\":\"/guide/components/details-list/\"},{\"text\":\"DropDown\",\"link\":\"/guide/components/drop-down/\"},{\"text\":\"Radio\",\"link\":\"/guide/components/radio/\"},{\"text\":\"RadioGroup\",\"link\":\"/guide/components/radio-group/\"},{\"text\":\"RatingControl\",\"link\":\"/guide/components/rating-control/\"},{\"text\":\"Slider\",\"link\":\"/guide/components/slider/\"},{\"text\":\"ToggleSwitch\",\"link\":\"/guide/components/toggle-switch/\"},{\"text\":\"Tag\",\"link\":\"/guide/components/tag/\"}]},{\"text\":\"Collections\",\"collapsed\":true,\"items\":[{\"text\":\"FlipView\",\"link\":\"/guide/components/flip-view/\"},{\"text\":\"ListView\",\"link\":\"/guide/components/list-view/\"},{\"text\":\"TreeView\",\"link\":\"/guide/components/tree-view/\"}]},{\"text\":\"Date & Time\",\"collapsed\":true,\"items\":[{\"text\":\"CalendarDatePicker\",\"link\":\"/guide/components/calendar-date-picker/\"},{\"text\":\"CalendarView\",\"link\":\"/guide/components/calendar-view/\"},{\"text\":\"DatePicker\",\"link\":\"/guide/components/date-picker/\"},{\"text\":\"TimePicker\",\"link\":\"/guide/components/time-picker/\"}]},{\"text\":\"Dialogs & flyouts\",\"collapsed\":true,\"items\":[{\"text\":\"Callout\",\"link\":\"/guide/components/callout/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Layout\",\"collapsed\":true,\"items\":[{\"text\":\"Collapse\",\"link\":\"/guide/components/collapse/\"},{\"text\":\"Expander\",\"link\":\"/guide/components/expander/\"},{\"text\":\"Drawer\",\"link\":\"/guide/components/drawer/\"},{\"text\":\"Panel\",\"link\":\"/guide/components/panel/\"}]},{\"text\":\"Media\",\"collapsed\":true,\"items\":[{\"text\":\"Image\",\"link\":\"/guide/components/image/\"},{\"text\":\"Img\",\"link\":\"/guide/components/img/\"},{\"text\":\"ImgBox\",\"link\":\"/guide/components/img-box/\"},{\"text\":\"Persona\",\"link\":\"/guide/components/persona/\"}]},{\"text\":\"Menu & toolbars\",\"collapsed\":true,\"items\":[{\"text\":\"CommandBar\",\"link\":\"/guide/components/command-bar/\"},{\"text\":\"MenuFlyout\",\"link\":\"/guide/components/menu-flyout/\"},{\"text\":\"SwipeControl\",\"link\":\"/guide/components/swipe-control/\"}]},{\"text\":\"Navigation\",\"collapsed\":true,\"items\":[{\"text\":\"Breadcrumb\",\"link\":\"/guide/components/breadcrumb/\"},{\"text\":\"NavigationPanel\",\"link\":\"/guide/components/navigation-panel/\"},{\"text\":\"NavigationView\",\"link\":\"/guide/components/navigation-view/\"},{\"text\":\"Pivot\",\"link\":\"/guide/components/pivot/\"},{\"text\":\"Pagination\",\"link\":\"/guide/components/pagination/\"}]},{\"text\":\"Scrolling\",\"collapsed\":true,\"items\":[{\"text\":\"InfiniteScrollView\",\"link\":\"/guide/components/infinite-scroll-view/\"},{\"text\":\"ScrollStory\",\"link\":\"/guide/components/scroll-story/\"}]},{\"text\":\"Status & info\",\"collapsed\":true,\"items\":[{\"text\":\"Badge\",\"link\":\"/guide/components/badge/\"},{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"ProgressBar\",\"link\":\"/guide/components/progress-bar/\"},{\"text\":\"ProgressRing\",\"link\":\"/guide/components/progress-ring/\"}]},{\"text\":\"Styles\",\"collapsed\":true,\"items\":[{\"text\":\"AnimatedIcon\",\"link\":\"/guide/components/animated-icon/\"},{\"text\":\"IconElement\",\"link\":\"/guide/components/icon-element/\"},{\"text\":\"RevealContainer\",\"link\":\"/guide/components/reveal-container/\"},{\"text\":\"Shimmer\",\"link\":\"/guide/components/shimmer/\"}]},{\"text\":\"Text\",\"collapsed\":true,\"items\":[{\"text\":\"SearchBox\",\"link\":\"/guide/components/search-box/\"},{\"text\":\"TextBox\",\"link\":\"/guide/components/text-box/\"},{\"text\":\"TextField\",\"link\":\"/guide/components/text-field/\"},{\"text\":\"VerifyBox\",\"link\":\"/guide/components/verify-box/\"}]},{\"text\":\"Windowing\",\"collapsed\":true,\"items\":[{\"text\":\"WebWindow\",\"link\":\"/guide/components/web-window/\"}]},{\"text\":\"Global\",\"collapsed\":true,\"items\":[{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Advance\",\"collapsed\":true,\"items\":[{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git a/guide/components/panel/properties.html b/guide/components/panel/properties.html
new file mode 100644
index 0000000..4249551
--- /dev/null
+++ b/guide/components/panel/properties.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>vfluent3</title>
+    <meta name="description" content="A Vue3 component library for Fluent UI">
+    <meta name="generator" content="VitePress v1.0.0-rc.45">
+    <link rel="preload stylesheet" href="/VFluent3/assets/style.BabQegKX.css" as="style">
+    
+    <script type="module" src="/VFluent3/assets/app.CSutcJ2E.js"></script>
+    <link rel="preload" href="/VFluent3/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/framework.DvIFzl91.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/theme.CgqFBnN_.js">
+    <link rel="modulepreload" href="/VFluent3/assets/guide_components_panel_properties.md.BaxoCYKq.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-19c990f1><div class="wrapper" data-v-19c990f1><div class="container" data-v-19c990f1><div class="title" data-v-19c990f1><div class="VPNavBarTitle has-sidebar" data-v-19c990f1 data-v-ab179fa1><a class="title" href="/VFluent3/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>VFluent3</span><!--[--><!--]--></a></div></div><div class="content" data-v-19c990f1><div class="content-body" data-v-19c990f1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-19c990f1><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-19c990f1 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Guide</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-19c990f1 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-19c990f1 data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-19c990f1 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-19c990f1><div class="divider-line" data-v-19c990f1></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-d2ecc192><button data-v-d2ecc192>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-575e6a36><div class="curtain" data-v-575e6a36></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-575e6a36><span class="visually-hidden" id="sidebar-aria-label" data-v-575e6a36> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Basic input</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/button/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/check-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CheckBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/combobox/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Combobox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/details-list/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DetailsList</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drop-down/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DropDown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio-group/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RadioGroup</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/rating-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RatingControl</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/slider/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/toggle-switch/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ToggleSwitch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tag/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Tag</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Collections</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/flip-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>FlipView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/list-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ListView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tree-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TreeView</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Date & Time</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarDatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/time-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TimePicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Dialogs & flyouts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/callout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Callout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Layout</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/collapse/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Collapse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/expander/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Expander</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drawer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Panel</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Media</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/image/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Img</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ImgBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/persona/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Persona</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Menu & toolbars</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/command-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CommandBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/menu-flyout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MenuFlyout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/swipe-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SwipeControl</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Navigation</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/breadcrumb/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationPanel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pivot/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pivot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pagination/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pagination</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Scrolling</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/infinite-scroll-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfiniteScrollView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/scroll-story/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ScrollStory</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Status & info</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/badge/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-ring/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressRing</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Styles</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/animated-icon/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>AnimatedIcon</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/icon-element/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>IconElement</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/reveal-container/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RevealContainer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/shimmer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Shimmer</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Text</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/search-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SearchBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-field/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextField</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/verify-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>VerifyBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Windowing</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/web-window/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>WebWindow</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Global</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Advance</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-935f8a84><div class="content" data-v-935f8a84><div class="outline-marker" data-v-935f8a84></div><div class="outline-title" role="heading" aria-level="2" data-v-935f8a84>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-935f8a84><span class="visually-hidden" id="doc-outline-aria-label" data-v-935f8a84> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-935f8a84 data-v-b933a997><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _VFluent3_guide_components_panel_properties" data-v-39a288b8><div><h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-label="Permalink to &quot;Properties&quot;">​</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead></table></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-09de1c0f><!--[--><!--]--><!----><nav class="prev-next" data-v-09de1c0f><div class="pager" data-v-09de1c0f><!----></div><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link next" href="/VFluent3/guide/components/button/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Next page</span><span class="title" data-v-09de1c0f>Button</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>MIT Licensed</p><p class="copyright" data-v-e315a0ad>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_calendar-date-picker_properties.md\":\"DXRjmMG8\",\"guide_components_image_properties.md\":\"DGanRzCb\",\"guide_components_img-box_index.md\":\"DYtggkf_\",\"guide_components_img_emits.md\":\"BlE7jvZQ\",\"guide_components_img_index.md\":\"Bm9FiuU4\",\"guide_components_icon-element_properties.md\":\"8Oakruwc\",\"guide_components_img_properties.md\":\"B42YSocI\",\"guide_components_drawer_index.md\":\"D_vpnCpE\",\"guide_components_verify-box_emits.md\":\"DT17Iazx\",\"guide_components_calendar-date-picker_index.md\":\"BdHjrurh\",\"guide_components_rating-control_index.md\":\"Q9l5Lfrr\",\"guide_components_rating-control_properties.md\":\"DKprnl0i\",\"guide_components_calendar-view_index.md\":\"zdoRYVx1\",\"guide_components_animated-icon_index.md\":\"yZDMzCFe\",\"guide_components_calendar-date-picker_emits.md\":\"D5OkfR8j\",\"guide_components_badge_index.md\":\"Bb4crrJn\",\"guide_components_image_index.md\":\"B7X6cWAZ\",\"guide_components_slider_index.md\":\"C7zZ2d-W\",\"guide_components_radio-group_index.md\":\"CVfh3h5H\",\"guide_components_swipe-control_index.md\":\"DwrDVPc1\",\"guide_components_color-picker_emits.md\":\"BHDXVtBQ\",\"guide_components_radio_index.md\":\"90as5QGp\",\"guide_components_pagination_properties.md\":\"JUAPvcTL\",\"guide_components_persona_properties.md\":\"DUTPhPMp\",\"guide_components_combo-box_emits.md\":\"Dh5R-qEv\",\"guide_components_pivot_emits.md\":\"BTJPgNpy\",\"guide_components_pagination_index.md\":\"CnW2zAht\",\"guide_components_flip-view_properties.md\":\"BqZ4hhgU\",\"guide_components_icon-element_emits.md\":\"D5TXFdTZ\",\"guide_components_flip-view_index.md\":\"DefnDOv6\",\"guide_components_navigation-panel_index.md\":\"6mO__sSK\",\"guide_components_rating-control_emits.md\":\"blvomSeC\",\"guide_components_icon-element_index.md\":\"DQ8K7JNn\",\"guide_components_navigation-view_index.md\":\"4AQRiz1k\",\"guide_components_toggle-switch_emits.md\":\"CLGzrNut\",\"guide_components_toggle-switch_index.md\":\"61en_q9-\",\"guide_components_scroll-story_index.md\":\"Vpgb1HSV\",\"guide_components_reveal-container_index.md\":\"Cut2r4tV\",\"guide_components_search-box_emits.md\":\"-d9sWNNt\",\"guide_components_search-box_properties.md\":\"DEKFfPFw\",\"guide_components_shimmer_emits.md\":\"CTMInlI3\",\"guide_components_tag_index.md\":\"BhhxkcHn\",\"guide_components_search-box_index.md\":\"DgkrY0oY\",\"guide_components_shimmer_index.md\":\"iZlHuTxw\",\"guide_components_shimmer_properties.md\":\"CdkU1o6H\",\"guide_components_tree-view_index.md\":\"CUrwan4q\",\"guide_components_text-field_index.md\":\"CXSimJtj\",\"guide_components_text-box_index.md\":\"C5moAPfB\",\"guide_components_progress-ring_properties.md\":\"Dc08Uiff\",\"guide_components_toggle-switch_properties.md\":\"tFppK_IS\",\"guide_components_radio-group_emits.md\":\"cEDzKVnN\",\"guide_components_collapse_index.md\":\"N9Iu5-2v\",\"guide_components_image_emits.md\":\"lmlz2xJd\",\"guide_components_callout_index.md\":\"D9RU33w6\",\"guide_components_pivot_index.md\":\"B_vwQL-5\",\"guide_components_command-bar_index.md\":\"Cp4_rrGB\",\"guide_components_pagination_emits.md\":\"Dng86A22\",\"guide_components_button_index.md\":\"7sqT2MQP\",\"guide_components_info-box_properties.md\":\"BI7Nvk-E\",\"guide_components_drop-down_emits.md\":\"BE95TdKW\",\"guide_components_expander_index.md\":\"BKgcUJzQ\",\"guide_components_message-bar_index.md\":\"AEtAWlF8\",\"guide_components_menu-flyout_index.md\":\"Csa7irPj\",\"guide_components_panel_index.md\":\"CsTu0bXo\",\"guide_components_panel_properties.md\":\"BaxoCYKq\",\"guide_components_progress-bar_emits.md\":\"BcwXUpsF\",\"guide_components_progress-bar_properties.md\":\"TxiS9ZMA\",\"guide_components_progress-ring_emits.md\":\"D2Y6hIZ9\",\"guide_components_color-picker_index.md\":\"DCc4ixcU\",\"guide_components_progress-ring_index.md\":\"CPb-ZEPE\",\"guide_components_color-picker_properties.md\":\"wcXK29Vl\",\"guide_components_time-picker_index.md\":\"CQJdRRaG\",\"guide_components_drop-down_properties.md\":\"Bwlkpr1q\",\"guide_components_infinite-scroll-view_index.md\":\"yAuD807x\",\"guide_components_check-box_index.md\":\"FYgdu4oq\",\"guide_components_progress-bar_index.md\":\"D8vHQw5V\",\"guide_components_combo-box_index.md\":\"DTyu3eNd\",\"guide_components_info-box_emits.md\":\"DlEwpkkq\",\"guide_components_drop-down_index.md\":\"BZzJZQWq\",\"guide_components_list-view_index.md\":\"BoYvMzb0\",\"guide_components_verify-box_properties.md\":\"CW6W8fFf\",\"guide_components_verify-box_index.md\":\"DwSB40wR\",\"guide_index.md\":\"Bndlt3sL\",\"guide_components_web-window_index.md\":\"Bxc8vEeI\",\"index.md\":\"MTRqI42u\",\"guide_components_combo-box_properties.md\":\"AWfHzV6x\",\"guide_components_combobox_emits.md\":\"CGB6WLt8\",\"guide_components_combobox_properties.md\":\"Bja0hMou\",\"guide_components_details-list_index.md\":\"CcgOCIyt\",\"guide_components_info-box_index.md\":\"vXh-_DsL\",\"guide_components_combobox_index.md\":\"CsPkY6YB\",\"guide_components_date-picker_index.md\":\"12vmUIup\",\"guide_components_flip-view_emits.md\":\"DCheHjDj\",\"guide_components_panel_emits.md\":\"DG0REDq8\",\"guide_components_breadcrumb_index.md\":\"DyDm7PeP\",\"guide_components_radio-group_properties.md\":\"BnPxoKsQ\",\"guide_components_persona_emits.md\":\"CnsDPKRU\",\"guide_components_pivot_properties.md\":\"BmoLpPi1\",\"guide_components_persona_index.md\":\"DT00jby4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vfluent3\",\"description\":\"A Vue3 component library for Fluent UI\",\"base\":\"/VFluent3/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"VFluent3\",\"footer\":{\"message\":\"MIT Licensed\",\"copyright\":\"Copyright © Creator SN - 2022\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/\"}],\"sidebar\":[{\"text\":\"Basic input\",\"collapsed\":true,\"items\":[{\"text\":\"Button\",\"link\":\"/guide/components/button/\"},{\"text\":\"CheckBox\",\"link\":\"/guide/components/check-box/\"},{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"},{\"text\":\"Combobox\",\"link\":\"/guide/components/combobox/\"},{\"text\":\"DetailsList\",\"link\":\"/guide/components/details-list/\"},{\"text\":\"DropDown\",\"link\":\"/guide/components/drop-down/\"},{\"text\":\"Radio\",\"link\":\"/guide/components/radio/\"},{\"text\":\"RadioGroup\",\"link\":\"/guide/components/radio-group/\"},{\"text\":\"RatingControl\",\"link\":\"/guide/components/rating-control/\"},{\"text\":\"Slider\",\"link\":\"/guide/components/slider/\"},{\"text\":\"ToggleSwitch\",\"link\":\"/guide/components/toggle-switch/\"},{\"text\":\"Tag\",\"link\":\"/guide/components/tag/\"}]},{\"text\":\"Collections\",\"collapsed\":true,\"items\":[{\"text\":\"FlipView\",\"link\":\"/guide/components/flip-view/\"},{\"text\":\"ListView\",\"link\":\"/guide/components/list-view/\"},{\"text\":\"TreeView\",\"link\":\"/guide/components/tree-view/\"}]},{\"text\":\"Date & Time\",\"collapsed\":true,\"items\":[{\"text\":\"CalendarDatePicker\",\"link\":\"/guide/components/calendar-date-picker/\"},{\"text\":\"CalendarView\",\"link\":\"/guide/components/calendar-view/\"},{\"text\":\"DatePicker\",\"link\":\"/guide/components/date-picker/\"},{\"text\":\"TimePicker\",\"link\":\"/guide/components/time-picker/\"}]},{\"text\":\"Dialogs & flyouts\",\"collapsed\":true,\"items\":[{\"text\":\"Callout\",\"link\":\"/guide/components/callout/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Layout\",\"collapsed\":true,\"items\":[{\"text\":\"Collapse\",\"link\":\"/guide/components/collapse/\"},{\"text\":\"Expander\",\"link\":\"/guide/components/expander/\"},{\"text\":\"Drawer\",\"link\":\"/guide/components/drawer/\"},{\"text\":\"Panel\",\"link\":\"/guide/components/panel/\"}]},{\"text\":\"Media\",\"collapsed\":true,\"items\":[{\"text\":\"Image\",\"link\":\"/guide/components/image/\"},{\"text\":\"Img\",\"link\":\"/guide/components/img/\"},{\"text\":\"ImgBox\",\"link\":\"/guide/components/img-box/\"},{\"text\":\"Persona\",\"link\":\"/guide/components/persona/\"}]},{\"text\":\"Menu & toolbars\",\"collapsed\":true,\"items\":[{\"text\":\"CommandBar\",\"link\":\"/guide/components/command-bar/\"},{\"text\":\"MenuFlyout\",\"link\":\"/guide/components/menu-flyout/\"},{\"text\":\"SwipeControl\",\"link\":\"/guide/components/swipe-control/\"}]},{\"text\":\"Navigation\",\"collapsed\":true,\"items\":[{\"text\":\"Breadcrumb\",\"link\":\"/guide/components/breadcrumb/\"},{\"text\":\"NavigationPanel\",\"link\":\"/guide/components/navigation-panel/\"},{\"text\":\"NavigationView\",\"link\":\"/guide/components/navigation-view/\"},{\"text\":\"Pivot\",\"link\":\"/guide/components/pivot/\"},{\"text\":\"Pagination\",\"link\":\"/guide/components/pagination/\"}]},{\"text\":\"Scrolling\",\"collapsed\":true,\"items\":[{\"text\":\"InfiniteScrollView\",\"link\":\"/guide/components/infinite-scroll-view/\"},{\"text\":\"ScrollStory\",\"link\":\"/guide/components/scroll-story/\"}]},{\"text\":\"Status & info\",\"collapsed\":true,\"items\":[{\"text\":\"Badge\",\"link\":\"/guide/components/badge/\"},{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"ProgressBar\",\"link\":\"/guide/components/progress-bar/\"},{\"text\":\"ProgressRing\",\"link\":\"/guide/components/progress-ring/\"}]},{\"text\":\"Styles\",\"collapsed\":true,\"items\":[{\"text\":\"AnimatedIcon\",\"link\":\"/guide/components/animated-icon/\"},{\"text\":\"IconElement\",\"link\":\"/guide/components/icon-element/\"},{\"text\":\"RevealContainer\",\"link\":\"/guide/components/reveal-container/\"},{\"text\":\"Shimmer\",\"link\":\"/guide/components/shimmer/\"}]},{\"text\":\"Text\",\"collapsed\":true,\"items\":[{\"text\":\"SearchBox\",\"link\":\"/guide/components/search-box/\"},{\"text\":\"TextBox\",\"link\":\"/guide/components/text-box/\"},{\"text\":\"TextField\",\"link\":\"/guide/components/text-field/\"},{\"text\":\"VerifyBox\",\"link\":\"/guide/components/verify-box/\"}]},{\"text\":\"Windowing\",\"collapsed\":true,\"items\":[{\"text\":\"WebWindow\",\"link\":\"/guide/components/web-window/\"}]},{\"text\":\"Global\",\"collapsed\":true,\"items\":[{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Advance\",\"collapsed\":true,\"items\":[{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git a/guide/components/persona/emits.html b/guide/components/persona/emits.html
new file mode 100644
index 0000000..fffb853
--- /dev/null
+++ b/guide/components/persona/emits.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>vfluent3</title>
+    <meta name="description" content="A Vue3 component library for Fluent UI">
+    <meta name="generator" content="VitePress v1.0.0-rc.45">
+    <link rel="preload stylesheet" href="/VFluent3/assets/style.BabQegKX.css" as="style">
+    
+    <script type="module" src="/VFluent3/assets/app.CSutcJ2E.js"></script>
+    <link rel="preload" href="/VFluent3/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/framework.DvIFzl91.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/theme.CgqFBnN_.js">
+    <link rel="modulepreload" href="/VFluent3/assets/guide_components_persona_emits.md.CnsDPKRU.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-19c990f1><div class="wrapper" data-v-19c990f1><div class="container" data-v-19c990f1><div class="title" data-v-19c990f1><div class="VPNavBarTitle has-sidebar" data-v-19c990f1 data-v-ab179fa1><a class="title" href="/VFluent3/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>VFluent3</span><!--[--><!--]--></a></div></div><div class="content" data-v-19c990f1><div class="content-body" data-v-19c990f1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-19c990f1><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-19c990f1 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Guide</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-19c990f1 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-19c990f1 data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-19c990f1 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-19c990f1><div class="divider-line" data-v-19c990f1></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-d2ecc192><button data-v-d2ecc192>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-575e6a36><div class="curtain" data-v-575e6a36></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-575e6a36><span class="visually-hidden" id="sidebar-aria-label" data-v-575e6a36> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Basic input</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/button/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/check-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CheckBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/combobox/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Combobox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/details-list/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DetailsList</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drop-down/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DropDown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio-group/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RadioGroup</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/rating-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RatingControl</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/slider/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/toggle-switch/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ToggleSwitch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tag/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Tag</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Collections</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/flip-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>FlipView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/list-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ListView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tree-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TreeView</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Date & Time</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarDatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/time-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TimePicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Dialogs & flyouts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/callout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Callout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Layout</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/collapse/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Collapse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/expander/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Expander</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drawer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Panel</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Media</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/image/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Img</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ImgBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/persona/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Persona</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Menu & toolbars</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/command-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CommandBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/menu-flyout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MenuFlyout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/swipe-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SwipeControl</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Navigation</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/breadcrumb/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationPanel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pivot/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pivot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pagination/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pagination</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Scrolling</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/infinite-scroll-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfiniteScrollView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/scroll-story/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ScrollStory</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Status & info</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/badge/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-ring/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressRing</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Styles</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/animated-icon/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>AnimatedIcon</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/icon-element/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>IconElement</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/reveal-container/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RevealContainer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/shimmer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Shimmer</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Text</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/search-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SearchBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-field/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextField</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/verify-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>VerifyBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Windowing</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/web-window/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>WebWindow</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Global</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Advance</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-935f8a84><div class="content" data-v-935f8a84><div class="outline-marker" data-v-935f8a84></div><div class="outline-title" role="heading" aria-level="2" data-v-935f8a84>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-935f8a84><span class="visually-hidden" id="doc-outline-aria-label" data-v-935f8a84> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-935f8a84 data-v-b933a997><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _VFluent3_guide_components_persona_emits" data-v-39a288b8><div><h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-label="Permalink to &quot;Emits&quot;">​</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead></table></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-09de1c0f><!--[--><!--]--><!----><nav class="prev-next" data-v-09de1c0f><div class="pager" data-v-09de1c0f><!----></div><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link next" href="/VFluent3/guide/components/button/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Next page</span><span class="title" data-v-09de1c0f>Button</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>MIT Licensed</p><p class="copyright" data-v-e315a0ad>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_calendar-date-picker_properties.md\":\"DXRjmMG8\",\"guide_components_image_properties.md\":\"DGanRzCb\",\"guide_components_img-box_index.md\":\"DYtggkf_\",\"guide_components_img_emits.md\":\"BlE7jvZQ\",\"guide_components_img_index.md\":\"Bm9FiuU4\",\"guide_components_icon-element_properties.md\":\"8Oakruwc\",\"guide_components_img_properties.md\":\"B42YSocI\",\"guide_components_drawer_index.md\":\"D_vpnCpE\",\"guide_components_verify-box_emits.md\":\"DT17Iazx\",\"guide_components_calendar-date-picker_index.md\":\"BdHjrurh\",\"guide_components_rating-control_index.md\":\"Q9l5Lfrr\",\"guide_components_rating-control_properties.md\":\"DKprnl0i\",\"guide_components_calendar-view_index.md\":\"zdoRYVx1\",\"guide_components_animated-icon_index.md\":\"yZDMzCFe\",\"guide_components_calendar-date-picker_emits.md\":\"D5OkfR8j\",\"guide_components_badge_index.md\":\"Bb4crrJn\",\"guide_components_image_index.md\":\"B7X6cWAZ\",\"guide_components_slider_index.md\":\"C7zZ2d-W\",\"guide_components_radio-group_index.md\":\"CVfh3h5H\",\"guide_components_swipe-control_index.md\":\"DwrDVPc1\",\"guide_components_color-picker_emits.md\":\"BHDXVtBQ\",\"guide_components_radio_index.md\":\"90as5QGp\",\"guide_components_pagination_properties.md\":\"JUAPvcTL\",\"guide_components_persona_properties.md\":\"DUTPhPMp\",\"guide_components_combo-box_emits.md\":\"Dh5R-qEv\",\"guide_components_pivot_emits.md\":\"BTJPgNpy\",\"guide_components_pagination_index.md\":\"CnW2zAht\",\"guide_components_flip-view_properties.md\":\"BqZ4hhgU\",\"guide_components_icon-element_emits.md\":\"D5TXFdTZ\",\"guide_components_flip-view_index.md\":\"DefnDOv6\",\"guide_components_navigation-panel_index.md\":\"6mO__sSK\",\"guide_components_rating-control_emits.md\":\"blvomSeC\",\"guide_components_icon-element_index.md\":\"DQ8K7JNn\",\"guide_components_navigation-view_index.md\":\"4AQRiz1k\",\"guide_components_toggle-switch_emits.md\":\"CLGzrNut\",\"guide_components_toggle-switch_index.md\":\"61en_q9-\",\"guide_components_scroll-story_index.md\":\"Vpgb1HSV\",\"guide_components_reveal-container_index.md\":\"Cut2r4tV\",\"guide_components_search-box_emits.md\":\"-d9sWNNt\",\"guide_components_search-box_properties.md\":\"DEKFfPFw\",\"guide_components_shimmer_emits.md\":\"CTMInlI3\",\"guide_components_tag_index.md\":\"BhhxkcHn\",\"guide_components_search-box_index.md\":\"DgkrY0oY\",\"guide_components_shimmer_index.md\":\"iZlHuTxw\",\"guide_components_shimmer_properties.md\":\"CdkU1o6H\",\"guide_components_tree-view_index.md\":\"CUrwan4q\",\"guide_components_text-field_index.md\":\"CXSimJtj\",\"guide_components_text-box_index.md\":\"C5moAPfB\",\"guide_components_progress-ring_properties.md\":\"Dc08Uiff\",\"guide_components_toggle-switch_properties.md\":\"tFppK_IS\",\"guide_components_radio-group_emits.md\":\"cEDzKVnN\",\"guide_components_collapse_index.md\":\"N9Iu5-2v\",\"guide_components_image_emits.md\":\"lmlz2xJd\",\"guide_components_callout_index.md\":\"D9RU33w6\",\"guide_components_pivot_index.md\":\"B_vwQL-5\",\"guide_components_command-bar_index.md\":\"Cp4_rrGB\",\"guide_components_pagination_emits.md\":\"Dng86A22\",\"guide_components_button_index.md\":\"7sqT2MQP\",\"guide_components_info-box_properties.md\":\"BI7Nvk-E\",\"guide_components_drop-down_emits.md\":\"BE95TdKW\",\"guide_components_expander_index.md\":\"BKgcUJzQ\",\"guide_components_message-bar_index.md\":\"AEtAWlF8\",\"guide_components_menu-flyout_index.md\":\"Csa7irPj\",\"guide_components_panel_index.md\":\"CsTu0bXo\",\"guide_components_panel_properties.md\":\"BaxoCYKq\",\"guide_components_progress-bar_emits.md\":\"BcwXUpsF\",\"guide_components_progress-bar_properties.md\":\"TxiS9ZMA\",\"guide_components_progress-ring_emits.md\":\"D2Y6hIZ9\",\"guide_components_color-picker_index.md\":\"DCc4ixcU\",\"guide_components_progress-ring_index.md\":\"CPb-ZEPE\",\"guide_components_color-picker_properties.md\":\"wcXK29Vl\",\"guide_components_time-picker_index.md\":\"CQJdRRaG\",\"guide_components_drop-down_properties.md\":\"Bwlkpr1q\",\"guide_components_infinite-scroll-view_index.md\":\"yAuD807x\",\"guide_components_check-box_index.md\":\"FYgdu4oq\",\"guide_components_progress-bar_index.md\":\"D8vHQw5V\",\"guide_components_combo-box_index.md\":\"DTyu3eNd\",\"guide_components_info-box_emits.md\":\"DlEwpkkq\",\"guide_components_drop-down_index.md\":\"BZzJZQWq\",\"guide_components_list-view_index.md\":\"BoYvMzb0\",\"guide_components_verify-box_properties.md\":\"CW6W8fFf\",\"guide_components_verify-box_index.md\":\"DwSB40wR\",\"guide_index.md\":\"Bndlt3sL\",\"guide_components_web-window_index.md\":\"Bxc8vEeI\",\"index.md\":\"MTRqI42u\",\"guide_components_combo-box_properties.md\":\"AWfHzV6x\",\"guide_components_combobox_emits.md\":\"CGB6WLt8\",\"guide_components_combobox_properties.md\":\"Bja0hMou\",\"guide_components_details-list_index.md\":\"CcgOCIyt\",\"guide_components_info-box_index.md\":\"vXh-_DsL\",\"guide_components_combobox_index.md\":\"CsPkY6YB\",\"guide_components_date-picker_index.md\":\"12vmUIup\",\"guide_components_flip-view_emits.md\":\"DCheHjDj\",\"guide_components_panel_emits.md\":\"DG0REDq8\",\"guide_components_breadcrumb_index.md\":\"DyDm7PeP\",\"guide_components_radio-group_properties.md\":\"BnPxoKsQ\",\"guide_components_persona_emits.md\":\"CnsDPKRU\",\"guide_components_pivot_properties.md\":\"BmoLpPi1\",\"guide_components_persona_index.md\":\"DT00jby4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vfluent3\",\"description\":\"A Vue3 component library for Fluent UI\",\"base\":\"/VFluent3/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"VFluent3\",\"footer\":{\"message\":\"MIT Licensed\",\"copyright\":\"Copyright © Creator SN - 2022\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/\"}],\"sidebar\":[{\"text\":\"Basic input\",\"collapsed\":true,\"items\":[{\"text\":\"Button\",\"link\":\"/guide/components/button/\"},{\"text\":\"CheckBox\",\"link\":\"/guide/components/check-box/\"},{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"},{\"text\":\"Combobox\",\"link\":\"/guide/components/combobox/\"},{\"text\":\"DetailsList\",\"link\":\"/guide/components/details-list/\"},{\"text\":\"DropDown\",\"link\":\"/guide/components/drop-down/\"},{\"text\":\"Radio\",\"link\":\"/guide/components/radio/\"},{\"text\":\"RadioGroup\",\"link\":\"/guide/components/radio-group/\"},{\"text\":\"RatingControl\",\"link\":\"/guide/components/rating-control/\"},{\"text\":\"Slider\",\"link\":\"/guide/components/slider/\"},{\"text\":\"ToggleSwitch\",\"link\":\"/guide/components/toggle-switch/\"},{\"text\":\"Tag\",\"link\":\"/guide/components/tag/\"}]},{\"text\":\"Collections\",\"collapsed\":true,\"items\":[{\"text\":\"FlipView\",\"link\":\"/guide/components/flip-view/\"},{\"text\":\"ListView\",\"link\":\"/guide/components/list-view/\"},{\"text\":\"TreeView\",\"link\":\"/guide/components/tree-view/\"}]},{\"text\":\"Date & Time\",\"collapsed\":true,\"items\":[{\"text\":\"CalendarDatePicker\",\"link\":\"/guide/components/calendar-date-picker/\"},{\"text\":\"CalendarView\",\"link\":\"/guide/components/calendar-view/\"},{\"text\":\"DatePicker\",\"link\":\"/guide/components/date-picker/\"},{\"text\":\"TimePicker\",\"link\":\"/guide/components/time-picker/\"}]},{\"text\":\"Dialogs & flyouts\",\"collapsed\":true,\"items\":[{\"text\":\"Callout\",\"link\":\"/guide/components/callout/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Layout\",\"collapsed\":true,\"items\":[{\"text\":\"Collapse\",\"link\":\"/guide/components/collapse/\"},{\"text\":\"Expander\",\"link\":\"/guide/components/expander/\"},{\"text\":\"Drawer\",\"link\":\"/guide/components/drawer/\"},{\"text\":\"Panel\",\"link\":\"/guide/components/panel/\"}]},{\"text\":\"Media\",\"collapsed\":true,\"items\":[{\"text\":\"Image\",\"link\":\"/guide/components/image/\"},{\"text\":\"Img\",\"link\":\"/guide/components/img/\"},{\"text\":\"ImgBox\",\"link\":\"/guide/components/img-box/\"},{\"text\":\"Persona\",\"link\":\"/guide/components/persona/\"}]},{\"text\":\"Menu & toolbars\",\"collapsed\":true,\"items\":[{\"text\":\"CommandBar\",\"link\":\"/guide/components/command-bar/\"},{\"text\":\"MenuFlyout\",\"link\":\"/guide/components/menu-flyout/\"},{\"text\":\"SwipeControl\",\"link\":\"/guide/components/swipe-control/\"}]},{\"text\":\"Navigation\",\"collapsed\":true,\"items\":[{\"text\":\"Breadcrumb\",\"link\":\"/guide/components/breadcrumb/\"},{\"text\":\"NavigationPanel\",\"link\":\"/guide/components/navigation-panel/\"},{\"text\":\"NavigationView\",\"link\":\"/guide/components/navigation-view/\"},{\"text\":\"Pivot\",\"link\":\"/guide/components/pivot/\"},{\"text\":\"Pagination\",\"link\":\"/guide/components/pagination/\"}]},{\"text\":\"Scrolling\",\"collapsed\":true,\"items\":[{\"text\":\"InfiniteScrollView\",\"link\":\"/guide/components/infinite-scroll-view/\"},{\"text\":\"ScrollStory\",\"link\":\"/guide/components/scroll-story/\"}]},{\"text\":\"Status & info\",\"collapsed\":true,\"items\":[{\"text\":\"Badge\",\"link\":\"/guide/components/badge/\"},{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"ProgressBar\",\"link\":\"/guide/components/progress-bar/\"},{\"text\":\"ProgressRing\",\"link\":\"/guide/components/progress-ring/\"}]},{\"text\":\"Styles\",\"collapsed\":true,\"items\":[{\"text\":\"AnimatedIcon\",\"link\":\"/guide/components/animated-icon/\"},{\"text\":\"IconElement\",\"link\":\"/guide/components/icon-element/\"},{\"text\":\"RevealContainer\",\"link\":\"/guide/components/reveal-container/\"},{\"text\":\"Shimmer\",\"link\":\"/guide/components/shimmer/\"}]},{\"text\":\"Text\",\"collapsed\":true,\"items\":[{\"text\":\"SearchBox\",\"link\":\"/guide/components/search-box/\"},{\"text\":\"TextBox\",\"link\":\"/guide/components/text-box/\"},{\"text\":\"TextField\",\"link\":\"/guide/components/text-field/\"},{\"text\":\"VerifyBox\",\"link\":\"/guide/components/verify-box/\"}]},{\"text\":\"Windowing\",\"collapsed\":true,\"items\":[{\"text\":\"WebWindow\",\"link\":\"/guide/components/web-window/\"}]},{\"text\":\"Global\",\"collapsed\":true,\"items\":[{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Advance\",\"collapsed\":true,\"items\":[{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git a/guide/components/persona/index.html b/guide/components/persona/index.html
new file mode 100644
index 0000000..c89d5ab
--- /dev/null
+++ b/guide/components/persona/index.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>Persona | vfluent3</title>
+    <meta name="description" content="A Vue3 component library for Fluent UI">
+    <meta name="generator" content="VitePress v1.0.0-rc.45">
+    <link rel="preload stylesheet" href="/VFluent3/assets/style.BabQegKX.css" as="style">
+    
+    <script type="module" src="/VFluent3/assets/app.CSutcJ2E.js"></script>
+    <link rel="preload" href="/VFluent3/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/framework.DvIFzl91.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/theme.CgqFBnN_.js">
+    <link rel="modulepreload" href="/VFluent3/assets/guide_components_persona_index.md.DT00jby4.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-19c990f1><div class="wrapper" data-v-19c990f1><div class="container" data-v-19c990f1><div class="title" data-v-19c990f1><div class="VPNavBarTitle has-sidebar" data-v-19c990f1 data-v-ab179fa1><a class="title" href="/VFluent3/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>VFluent3</span><!--[--><!--]--></a></div></div><div class="content" data-v-19c990f1><div class="content-body" data-v-19c990f1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-19c990f1><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-19c990f1 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Guide</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-19c990f1 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-19c990f1 data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-19c990f1 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-19c990f1><div class="divider-line" data-v-19c990f1></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-d2ecc192><button data-v-d2ecc192>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-575e6a36><div class="curtain" data-v-575e6a36></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-575e6a36><span class="visually-hidden" id="sidebar-aria-label" data-v-575e6a36> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Basic input</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/button/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/check-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CheckBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/combobox/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Combobox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/details-list/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DetailsList</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drop-down/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DropDown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio-group/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RadioGroup</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/rating-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RatingControl</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/slider/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/toggle-switch/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ToggleSwitch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tag/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Tag</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Collections</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/flip-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>FlipView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/list-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ListView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tree-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TreeView</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Date & Time</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarDatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/time-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TimePicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Dialogs & flyouts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/callout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Callout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Layout</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/collapse/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Collapse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/expander/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Expander</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drawer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Panel</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible has-active" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Media</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/image/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Img</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ImgBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/persona/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Persona</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Menu & toolbars</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/command-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CommandBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/menu-flyout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MenuFlyout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/swipe-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SwipeControl</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Navigation</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/breadcrumb/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationPanel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pivot/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pivot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pagination/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pagination</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Scrolling</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/infinite-scroll-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfiniteScrollView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/scroll-story/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ScrollStory</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Status & info</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/badge/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-ring/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressRing</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Styles</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/animated-icon/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>AnimatedIcon</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/icon-element/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>IconElement</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/reveal-container/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RevealContainer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/shimmer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Shimmer</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Text</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/search-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SearchBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-field/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextField</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/verify-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>VerifyBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Windowing</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/web-window/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>WebWindow</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Global</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Advance</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-935f8a84><div class="content" data-v-935f8a84><div class="outline-marker" data-v-935f8a84></div><div class="outline-title" role="heading" aria-level="2" data-v-935f8a84>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-935f8a84><span class="visually-hidden" id="doc-outline-aria-label" data-v-935f8a84> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-935f8a84 data-v-b933a997><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _VFluent3_guide_components_persona_" data-v-39a288b8><div><h3 id="persona-demo" tabindex="-1">Persona-DEMO <a class="header-anchor" href="#persona-demo" aria-label="Permalink to &quot;Persona-DEMO&quot;">​</a></h3><hr><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Persona</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">src</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">src</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">theme </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;dark&#39;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> :</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;light&#39;&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> size</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;24&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">showInfo</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;template v-slot:name&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;p&gt;Annie Lindqvist&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Persona</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Persona</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">src</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">src</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">theme </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;dark&#39;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> :</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;light&#39;&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> size</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;32&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">showInfo</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;template v-slot:name&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;p&gt;Annie Lindqvist&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Persona</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Persona</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">src</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">src</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">theme </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;dark&#39;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> :</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;light&#39;&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> status</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;away&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">showInfo</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;template v-slot:name&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;p&gt;Annie Lindqvist&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;template v-slot:secondary&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;p&gt;Software Engineer&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Persona</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Persona</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">src</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">src</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">theme </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;dark&#39;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> :</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;light&#39;&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> size</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;48&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> status</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;busy&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">showInfo</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;template v-slot:name&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;p&gt;Annie Lindqvist&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;template v-slot:secondary&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;p&gt;Software Engineer&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Persona</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Persona</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">src</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">src</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">theme </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;dark&#39;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> :</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;light&#39;&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> size</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;56&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> status</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;offline&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">showInfo</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;template v-slot:name&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;p&gt;Annie Lindqvist&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;template v-slot:secondary&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;p&gt;Software Engineer&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Persona</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Persona</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">src</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">src</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">theme </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;dark&#39;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> :</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;light&#39;&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> size</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;72&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> status</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ok&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">showInfo</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;template v-slot:name&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;p&gt;Annie Lindqvist&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;template v-slot:secondary&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;p&gt;Software Engineer&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;p&gt;In a meeting&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Persona</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Persona</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">src</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">src</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">theme </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;dark&#39;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> :</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;light&#39;&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> size</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;100&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> status</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;dnd&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">showInfo</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;template v-slot:name&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;p&gt;Annie Lindqvist&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;template v-slot:secondary&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;p&gt;Software Engineer&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;p&gt;In a meeting&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;p&gt;Available at 4:00pm&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Persona</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Persona</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">src</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">src</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">theme </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;dark&#39;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> :</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;light&#39;&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> size</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;120&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> status</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;blocked&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">showInfo</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;template v-slot:name&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;p&gt;Annie Lindqvist&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;template v-slot:secondary&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;p&gt;Software Engineer&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;p&gt;In a meeting&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;p&gt;Available at 4:00pm&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Persona</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Persona</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">theme </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;dark&#39;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> :</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;light&#39;&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> size</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;120&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Annie Lindqvist&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">showInfo</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;template v-slot:secondary&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;p&gt;Software Engineer&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;p&gt;In a meeting&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;p&gt;Available at 4:00pm&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Persona</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">src</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">Persona图像资源链接</td></tr><tr><td style="text-align:center;">name</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">名称</td></tr><tr><td style="text-align:center;">size</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">40</td><td style="text-align:center;">Persona头像大小</td></tr><tr><td style="text-align:center;">status</td><td style="text-align:center;">[online,offline,away,busy,dnd,blocked]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">Persona状态</td></tr><tr><td style="text-align:center;">icon</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">自定义状态图标</td></tr><tr><td style="text-align:center;">iconColor</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">自定义状态图标前景色</td></tr><tr><td style="text-align:center;">background</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">自定义状态图标背景色</td></tr><tr><td style="text-align:center;">showInfo</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否显示信息</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">system</td><td style="text-align:center;">主题样式, 包含<code>light</code>, <code>dark</code>, <code>system</code>, <code>custom</code>几种样式</td></tr></tbody></table><h3 id="slot" tabindex="-1">Slot <a class="header-anchor" href="#slot" aria-label="Permalink to &quot;Slot&quot;">​</a></h3><hr><ol><li>Name</li></ol><p>你可以直接在属性中指定<code>name</code>, 当使用模板时Persona将检测不到名称缩写</p><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ol start="2"><li>Secondary</li></ol><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">secondary</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-09de1c0f><!--[--><!--]--><!----><nav class="prev-next" data-v-09de1c0f><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link prev" href="/VFluent3/guide/components/img-box/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Previous page</span><span class="title" data-v-09de1c0f>ImgBox</span><!--]--></a></div><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link next" href="/VFluent3/guide/components/command-bar/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Next page</span><span class="title" data-v-09de1c0f>CommandBar</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>MIT Licensed</p><p class="copyright" data-v-e315a0ad>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_calendar-date-picker_properties.md\":\"DXRjmMG8\",\"guide_components_image_properties.md\":\"DGanRzCb\",\"guide_components_img-box_index.md\":\"DYtggkf_\",\"guide_components_img_emits.md\":\"BlE7jvZQ\",\"guide_components_img_index.md\":\"Bm9FiuU4\",\"guide_components_icon-element_properties.md\":\"8Oakruwc\",\"guide_components_img_properties.md\":\"B42YSocI\",\"guide_components_drawer_index.md\":\"D_vpnCpE\",\"guide_components_verify-box_emits.md\":\"DT17Iazx\",\"guide_components_calendar-date-picker_index.md\":\"BdHjrurh\",\"guide_components_rating-control_index.md\":\"Q9l5Lfrr\",\"guide_components_rating-control_properties.md\":\"DKprnl0i\",\"guide_components_calendar-view_index.md\":\"zdoRYVx1\",\"guide_components_animated-icon_index.md\":\"yZDMzCFe\",\"guide_components_calendar-date-picker_emits.md\":\"D5OkfR8j\",\"guide_components_badge_index.md\":\"Bb4crrJn\",\"guide_components_image_index.md\":\"B7X6cWAZ\",\"guide_components_slider_index.md\":\"C7zZ2d-W\",\"guide_components_radio-group_index.md\":\"CVfh3h5H\",\"guide_components_swipe-control_index.md\":\"DwrDVPc1\",\"guide_components_color-picker_emits.md\":\"BHDXVtBQ\",\"guide_components_radio_index.md\":\"90as5QGp\",\"guide_components_pagination_properties.md\":\"JUAPvcTL\",\"guide_components_persona_properties.md\":\"DUTPhPMp\",\"guide_components_combo-box_emits.md\":\"Dh5R-qEv\",\"guide_components_pivot_emits.md\":\"BTJPgNpy\",\"guide_components_pagination_index.md\":\"CnW2zAht\",\"guide_components_flip-view_properties.md\":\"BqZ4hhgU\",\"guide_components_icon-element_emits.md\":\"D5TXFdTZ\",\"guide_components_flip-view_index.md\":\"DefnDOv6\",\"guide_components_navigation-panel_index.md\":\"6mO__sSK\",\"guide_components_rating-control_emits.md\":\"blvomSeC\",\"guide_components_icon-element_index.md\":\"DQ8K7JNn\",\"guide_components_navigation-view_index.md\":\"4AQRiz1k\",\"guide_components_toggle-switch_emits.md\":\"CLGzrNut\",\"guide_components_toggle-switch_index.md\":\"61en_q9-\",\"guide_components_scroll-story_index.md\":\"Vpgb1HSV\",\"guide_components_reveal-container_index.md\":\"Cut2r4tV\",\"guide_components_search-box_emits.md\":\"-d9sWNNt\",\"guide_components_search-box_properties.md\":\"DEKFfPFw\",\"guide_components_shimmer_emits.md\":\"CTMInlI3\",\"guide_components_tag_index.md\":\"BhhxkcHn\",\"guide_components_search-box_index.md\":\"DgkrY0oY\",\"guide_components_shimmer_index.md\":\"iZlHuTxw\",\"guide_components_shimmer_properties.md\":\"CdkU1o6H\",\"guide_components_tree-view_index.md\":\"CUrwan4q\",\"guide_components_text-field_index.md\":\"CXSimJtj\",\"guide_components_text-box_index.md\":\"C5moAPfB\",\"guide_components_progress-ring_properties.md\":\"Dc08Uiff\",\"guide_components_toggle-switch_properties.md\":\"tFppK_IS\",\"guide_components_radio-group_emits.md\":\"cEDzKVnN\",\"guide_components_collapse_index.md\":\"N9Iu5-2v\",\"guide_components_image_emits.md\":\"lmlz2xJd\",\"guide_components_callout_index.md\":\"D9RU33w6\",\"guide_components_pivot_index.md\":\"B_vwQL-5\",\"guide_components_command-bar_index.md\":\"Cp4_rrGB\",\"guide_components_pagination_emits.md\":\"Dng86A22\",\"guide_components_button_index.md\":\"7sqT2MQP\",\"guide_components_info-box_properties.md\":\"BI7Nvk-E\",\"guide_components_drop-down_emits.md\":\"BE95TdKW\",\"guide_components_expander_index.md\":\"BKgcUJzQ\",\"guide_components_message-bar_index.md\":\"AEtAWlF8\",\"guide_components_menu-flyout_index.md\":\"Csa7irPj\",\"guide_components_panel_index.md\":\"CsTu0bXo\",\"guide_components_panel_properties.md\":\"BaxoCYKq\",\"guide_components_progress-bar_emits.md\":\"BcwXUpsF\",\"guide_components_progress-bar_properties.md\":\"TxiS9ZMA\",\"guide_components_progress-ring_emits.md\":\"D2Y6hIZ9\",\"guide_components_color-picker_index.md\":\"DCc4ixcU\",\"guide_components_progress-ring_index.md\":\"CPb-ZEPE\",\"guide_components_color-picker_properties.md\":\"wcXK29Vl\",\"guide_components_time-picker_index.md\":\"CQJdRRaG\",\"guide_components_drop-down_properties.md\":\"Bwlkpr1q\",\"guide_components_infinite-scroll-view_index.md\":\"yAuD807x\",\"guide_components_check-box_index.md\":\"FYgdu4oq\",\"guide_components_progress-bar_index.md\":\"D8vHQw5V\",\"guide_components_combo-box_index.md\":\"DTyu3eNd\",\"guide_components_info-box_emits.md\":\"DlEwpkkq\",\"guide_components_drop-down_index.md\":\"BZzJZQWq\",\"guide_components_list-view_index.md\":\"BoYvMzb0\",\"guide_components_verify-box_properties.md\":\"CW6W8fFf\",\"guide_components_verify-box_index.md\":\"DwSB40wR\",\"guide_index.md\":\"Bndlt3sL\",\"guide_components_web-window_index.md\":\"Bxc8vEeI\",\"index.md\":\"MTRqI42u\",\"guide_components_combo-box_properties.md\":\"AWfHzV6x\",\"guide_components_combobox_emits.md\":\"CGB6WLt8\",\"guide_components_combobox_properties.md\":\"Bja0hMou\",\"guide_components_details-list_index.md\":\"CcgOCIyt\",\"guide_components_info-box_index.md\":\"vXh-_DsL\",\"guide_components_combobox_index.md\":\"CsPkY6YB\",\"guide_components_date-picker_index.md\":\"12vmUIup\",\"guide_components_flip-view_emits.md\":\"DCheHjDj\",\"guide_components_panel_emits.md\":\"DG0REDq8\",\"guide_components_breadcrumb_index.md\":\"DyDm7PeP\",\"guide_components_radio-group_properties.md\":\"BnPxoKsQ\",\"guide_components_persona_emits.md\":\"CnsDPKRU\",\"guide_components_pivot_properties.md\":\"BmoLpPi1\",\"guide_components_persona_index.md\":\"DT00jby4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vfluent3\",\"description\":\"A Vue3 component library for Fluent UI\",\"base\":\"/VFluent3/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"VFluent3\",\"footer\":{\"message\":\"MIT Licensed\",\"copyright\":\"Copyright © Creator SN - 2022\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/\"}],\"sidebar\":[{\"text\":\"Basic input\",\"collapsed\":true,\"items\":[{\"text\":\"Button\",\"link\":\"/guide/components/button/\"},{\"text\":\"CheckBox\",\"link\":\"/guide/components/check-box/\"},{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"},{\"text\":\"Combobox\",\"link\":\"/guide/components/combobox/\"},{\"text\":\"DetailsList\",\"link\":\"/guide/components/details-list/\"},{\"text\":\"DropDown\",\"link\":\"/guide/components/drop-down/\"},{\"text\":\"Radio\",\"link\":\"/guide/components/radio/\"},{\"text\":\"RadioGroup\",\"link\":\"/guide/components/radio-group/\"},{\"text\":\"RatingControl\",\"link\":\"/guide/components/rating-control/\"},{\"text\":\"Slider\",\"link\":\"/guide/components/slider/\"},{\"text\":\"ToggleSwitch\",\"link\":\"/guide/components/toggle-switch/\"},{\"text\":\"Tag\",\"link\":\"/guide/components/tag/\"}]},{\"text\":\"Collections\",\"collapsed\":true,\"items\":[{\"text\":\"FlipView\",\"link\":\"/guide/components/flip-view/\"},{\"text\":\"ListView\",\"link\":\"/guide/components/list-view/\"},{\"text\":\"TreeView\",\"link\":\"/guide/components/tree-view/\"}]},{\"text\":\"Date & Time\",\"collapsed\":true,\"items\":[{\"text\":\"CalendarDatePicker\",\"link\":\"/guide/components/calendar-date-picker/\"},{\"text\":\"CalendarView\",\"link\":\"/guide/components/calendar-view/\"},{\"text\":\"DatePicker\",\"link\":\"/guide/components/date-picker/\"},{\"text\":\"TimePicker\",\"link\":\"/guide/components/time-picker/\"}]},{\"text\":\"Dialogs & flyouts\",\"collapsed\":true,\"items\":[{\"text\":\"Callout\",\"link\":\"/guide/components/callout/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Layout\",\"collapsed\":true,\"items\":[{\"text\":\"Collapse\",\"link\":\"/guide/components/collapse/\"},{\"text\":\"Expander\",\"link\":\"/guide/components/expander/\"},{\"text\":\"Drawer\",\"link\":\"/guide/components/drawer/\"},{\"text\":\"Panel\",\"link\":\"/guide/components/panel/\"}]},{\"text\":\"Media\",\"collapsed\":true,\"items\":[{\"text\":\"Image\",\"link\":\"/guide/components/image/\"},{\"text\":\"Img\",\"link\":\"/guide/components/img/\"},{\"text\":\"ImgBox\",\"link\":\"/guide/components/img-box/\"},{\"text\":\"Persona\",\"link\":\"/guide/components/persona/\"}]},{\"text\":\"Menu & toolbars\",\"collapsed\":true,\"items\":[{\"text\":\"CommandBar\",\"link\":\"/guide/components/command-bar/\"},{\"text\":\"MenuFlyout\",\"link\":\"/guide/components/menu-flyout/\"},{\"text\":\"SwipeControl\",\"link\":\"/guide/components/swipe-control/\"}]},{\"text\":\"Navigation\",\"collapsed\":true,\"items\":[{\"text\":\"Breadcrumb\",\"link\":\"/guide/components/breadcrumb/\"},{\"text\":\"NavigationPanel\",\"link\":\"/guide/components/navigation-panel/\"},{\"text\":\"NavigationView\",\"link\":\"/guide/components/navigation-view/\"},{\"text\":\"Pivot\",\"link\":\"/guide/components/pivot/\"},{\"text\":\"Pagination\",\"link\":\"/guide/components/pagination/\"}]},{\"text\":\"Scrolling\",\"collapsed\":true,\"items\":[{\"text\":\"InfiniteScrollView\",\"link\":\"/guide/components/infinite-scroll-view/\"},{\"text\":\"ScrollStory\",\"link\":\"/guide/components/scroll-story/\"}]},{\"text\":\"Status & info\",\"collapsed\":true,\"items\":[{\"text\":\"Badge\",\"link\":\"/guide/components/badge/\"},{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"ProgressBar\",\"link\":\"/guide/components/progress-bar/\"},{\"text\":\"ProgressRing\",\"link\":\"/guide/components/progress-ring/\"}]},{\"text\":\"Styles\",\"collapsed\":true,\"items\":[{\"text\":\"AnimatedIcon\",\"link\":\"/guide/components/animated-icon/\"},{\"text\":\"IconElement\",\"link\":\"/guide/components/icon-element/\"},{\"text\":\"RevealContainer\",\"link\":\"/guide/components/reveal-container/\"},{\"text\":\"Shimmer\",\"link\":\"/guide/components/shimmer/\"}]},{\"text\":\"Text\",\"collapsed\":true,\"items\":[{\"text\":\"SearchBox\",\"link\":\"/guide/components/search-box/\"},{\"text\":\"TextBox\",\"link\":\"/guide/components/text-box/\"},{\"text\":\"TextField\",\"link\":\"/guide/components/text-field/\"},{\"text\":\"VerifyBox\",\"link\":\"/guide/components/verify-box/\"}]},{\"text\":\"Windowing\",\"collapsed\":true,\"items\":[{\"text\":\"WebWindow\",\"link\":\"/guide/components/web-window/\"}]},{\"text\":\"Global\",\"collapsed\":true,\"items\":[{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Advance\",\"collapsed\":true,\"items\":[{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git a/guide/components/persona/properties.html b/guide/components/persona/properties.html
new file mode 100644
index 0000000..57a64c1
--- /dev/null
+++ b/guide/components/persona/properties.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>vfluent3</title>
+    <meta name="description" content="A Vue3 component library for Fluent UI">
+    <meta name="generator" content="VitePress v1.0.0-rc.45">
+    <link rel="preload stylesheet" href="/VFluent3/assets/style.BabQegKX.css" as="style">
+    
+    <script type="module" src="/VFluent3/assets/app.CSutcJ2E.js"></script>
+    <link rel="preload" href="/VFluent3/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/framework.DvIFzl91.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/theme.CgqFBnN_.js">
+    <link rel="modulepreload" href="/VFluent3/assets/guide_components_persona_properties.md.DUTPhPMp.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-19c990f1><div class="wrapper" data-v-19c990f1><div class="container" data-v-19c990f1><div class="title" data-v-19c990f1><div class="VPNavBarTitle has-sidebar" data-v-19c990f1 data-v-ab179fa1><a class="title" href="/VFluent3/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>VFluent3</span><!--[--><!--]--></a></div></div><div class="content" data-v-19c990f1><div class="content-body" data-v-19c990f1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-19c990f1><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-19c990f1 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Guide</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-19c990f1 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-19c990f1 data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-19c990f1 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-19c990f1><div class="divider-line" data-v-19c990f1></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-d2ecc192><button data-v-d2ecc192>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-575e6a36><div class="curtain" data-v-575e6a36></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-575e6a36><span class="visually-hidden" id="sidebar-aria-label" data-v-575e6a36> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Basic input</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/button/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/check-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CheckBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/combobox/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Combobox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/details-list/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DetailsList</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drop-down/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DropDown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio-group/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RadioGroup</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/rating-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RatingControl</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/slider/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/toggle-switch/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ToggleSwitch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tag/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Tag</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Collections</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/flip-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>FlipView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/list-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ListView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tree-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TreeView</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Date & Time</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarDatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/time-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TimePicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Dialogs & flyouts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/callout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Callout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Layout</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/collapse/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Collapse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/expander/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Expander</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drawer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Panel</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Media</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/image/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Img</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ImgBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/persona/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Persona</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Menu & toolbars</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/command-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CommandBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/menu-flyout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MenuFlyout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/swipe-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SwipeControl</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Navigation</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/breadcrumb/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationPanel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pivot/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pivot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pagination/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pagination</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Scrolling</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/infinite-scroll-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfiniteScrollView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/scroll-story/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ScrollStory</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Status & info</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/badge/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-ring/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressRing</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Styles</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/animated-icon/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>AnimatedIcon</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/icon-element/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>IconElement</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/reveal-container/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RevealContainer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/shimmer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Shimmer</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Text</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/search-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SearchBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-field/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextField</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/verify-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>VerifyBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Windowing</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/web-window/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>WebWindow</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Global</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Advance</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-935f8a84><div class="content" data-v-935f8a84><div class="outline-marker" data-v-935f8a84></div><div class="outline-title" role="heading" aria-level="2" data-v-935f8a84>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-935f8a84><span class="visually-hidden" id="doc-outline-aria-label" data-v-935f8a84> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-935f8a84 data-v-b933a997><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _VFluent3_guide_components_persona_properties" data-v-39a288b8><div><h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-label="Permalink to &quot;Properties&quot;">​</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead></table></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-09de1c0f><!--[--><!--]--><!----><nav class="prev-next" data-v-09de1c0f><div class="pager" data-v-09de1c0f><!----></div><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link next" href="/VFluent3/guide/components/button/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Next page</span><span class="title" data-v-09de1c0f>Button</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>MIT Licensed</p><p class="copyright" data-v-e315a0ad>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_calendar-date-picker_properties.md\":\"DXRjmMG8\",\"guide_components_image_properties.md\":\"DGanRzCb\",\"guide_components_img-box_index.md\":\"DYtggkf_\",\"guide_components_img_emits.md\":\"BlE7jvZQ\",\"guide_components_img_index.md\":\"Bm9FiuU4\",\"guide_components_icon-element_properties.md\":\"8Oakruwc\",\"guide_components_img_properties.md\":\"B42YSocI\",\"guide_components_drawer_index.md\":\"D_vpnCpE\",\"guide_components_verify-box_emits.md\":\"DT17Iazx\",\"guide_components_calendar-date-picker_index.md\":\"BdHjrurh\",\"guide_components_rating-control_index.md\":\"Q9l5Lfrr\",\"guide_components_rating-control_properties.md\":\"DKprnl0i\",\"guide_components_calendar-view_index.md\":\"zdoRYVx1\",\"guide_components_animated-icon_index.md\":\"yZDMzCFe\",\"guide_components_calendar-date-picker_emits.md\":\"D5OkfR8j\",\"guide_components_badge_index.md\":\"Bb4crrJn\",\"guide_components_image_index.md\":\"B7X6cWAZ\",\"guide_components_slider_index.md\":\"C7zZ2d-W\",\"guide_components_radio-group_index.md\":\"CVfh3h5H\",\"guide_components_swipe-control_index.md\":\"DwrDVPc1\",\"guide_components_color-picker_emits.md\":\"BHDXVtBQ\",\"guide_components_radio_index.md\":\"90as5QGp\",\"guide_components_pagination_properties.md\":\"JUAPvcTL\",\"guide_components_persona_properties.md\":\"DUTPhPMp\",\"guide_components_combo-box_emits.md\":\"Dh5R-qEv\",\"guide_components_pivot_emits.md\":\"BTJPgNpy\",\"guide_components_pagination_index.md\":\"CnW2zAht\",\"guide_components_flip-view_properties.md\":\"BqZ4hhgU\",\"guide_components_icon-element_emits.md\":\"D5TXFdTZ\",\"guide_components_flip-view_index.md\":\"DefnDOv6\",\"guide_components_navigation-panel_index.md\":\"6mO__sSK\",\"guide_components_rating-control_emits.md\":\"blvomSeC\",\"guide_components_icon-element_index.md\":\"DQ8K7JNn\",\"guide_components_navigation-view_index.md\":\"4AQRiz1k\",\"guide_components_toggle-switch_emits.md\":\"CLGzrNut\",\"guide_components_toggle-switch_index.md\":\"61en_q9-\",\"guide_components_scroll-story_index.md\":\"Vpgb1HSV\",\"guide_components_reveal-container_index.md\":\"Cut2r4tV\",\"guide_components_search-box_emits.md\":\"-d9sWNNt\",\"guide_components_search-box_properties.md\":\"DEKFfPFw\",\"guide_components_shimmer_emits.md\":\"CTMInlI3\",\"guide_components_tag_index.md\":\"BhhxkcHn\",\"guide_components_search-box_index.md\":\"DgkrY0oY\",\"guide_components_shimmer_index.md\":\"iZlHuTxw\",\"guide_components_shimmer_properties.md\":\"CdkU1o6H\",\"guide_components_tree-view_index.md\":\"CUrwan4q\",\"guide_components_text-field_index.md\":\"CXSimJtj\",\"guide_components_text-box_index.md\":\"C5moAPfB\",\"guide_components_progress-ring_properties.md\":\"Dc08Uiff\",\"guide_components_toggle-switch_properties.md\":\"tFppK_IS\",\"guide_components_radio-group_emits.md\":\"cEDzKVnN\",\"guide_components_collapse_index.md\":\"N9Iu5-2v\",\"guide_components_image_emits.md\":\"lmlz2xJd\",\"guide_components_callout_index.md\":\"D9RU33w6\",\"guide_components_pivot_index.md\":\"B_vwQL-5\",\"guide_components_command-bar_index.md\":\"Cp4_rrGB\",\"guide_components_pagination_emits.md\":\"Dng86A22\",\"guide_components_button_index.md\":\"7sqT2MQP\",\"guide_components_info-box_properties.md\":\"BI7Nvk-E\",\"guide_components_drop-down_emits.md\":\"BE95TdKW\",\"guide_components_expander_index.md\":\"BKgcUJzQ\",\"guide_components_message-bar_index.md\":\"AEtAWlF8\",\"guide_components_menu-flyout_index.md\":\"Csa7irPj\",\"guide_components_panel_index.md\":\"CsTu0bXo\",\"guide_components_panel_properties.md\":\"BaxoCYKq\",\"guide_components_progress-bar_emits.md\":\"BcwXUpsF\",\"guide_components_progress-bar_properties.md\":\"TxiS9ZMA\",\"guide_components_progress-ring_emits.md\":\"D2Y6hIZ9\",\"guide_components_color-picker_index.md\":\"DCc4ixcU\",\"guide_components_progress-ring_index.md\":\"CPb-ZEPE\",\"guide_components_color-picker_properties.md\":\"wcXK29Vl\",\"guide_components_time-picker_index.md\":\"CQJdRRaG\",\"guide_components_drop-down_properties.md\":\"Bwlkpr1q\",\"guide_components_infinite-scroll-view_index.md\":\"yAuD807x\",\"guide_components_check-box_index.md\":\"FYgdu4oq\",\"guide_components_progress-bar_index.md\":\"D8vHQw5V\",\"guide_components_combo-box_index.md\":\"DTyu3eNd\",\"guide_components_info-box_emits.md\":\"DlEwpkkq\",\"guide_components_drop-down_index.md\":\"BZzJZQWq\",\"guide_components_list-view_index.md\":\"BoYvMzb0\",\"guide_components_verify-box_properties.md\":\"CW6W8fFf\",\"guide_components_verify-box_index.md\":\"DwSB40wR\",\"guide_index.md\":\"Bndlt3sL\",\"guide_components_web-window_index.md\":\"Bxc8vEeI\",\"index.md\":\"MTRqI42u\",\"guide_components_combo-box_properties.md\":\"AWfHzV6x\",\"guide_components_combobox_emits.md\":\"CGB6WLt8\",\"guide_components_combobox_properties.md\":\"Bja0hMou\",\"guide_components_details-list_index.md\":\"CcgOCIyt\",\"guide_components_info-box_index.md\":\"vXh-_DsL\",\"guide_components_combobox_index.md\":\"CsPkY6YB\",\"guide_components_date-picker_index.md\":\"12vmUIup\",\"guide_components_flip-view_emits.md\":\"DCheHjDj\",\"guide_components_panel_emits.md\":\"DG0REDq8\",\"guide_components_breadcrumb_index.md\":\"DyDm7PeP\",\"guide_components_radio-group_properties.md\":\"BnPxoKsQ\",\"guide_components_persona_emits.md\":\"CnsDPKRU\",\"guide_components_pivot_properties.md\":\"BmoLpPi1\",\"guide_components_persona_index.md\":\"DT00jby4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vfluent3\",\"description\":\"A Vue3 component library for Fluent UI\",\"base\":\"/VFluent3/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"VFluent3\",\"footer\":{\"message\":\"MIT Licensed\",\"copyright\":\"Copyright © Creator SN - 2022\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/\"}],\"sidebar\":[{\"text\":\"Basic input\",\"collapsed\":true,\"items\":[{\"text\":\"Button\",\"link\":\"/guide/components/button/\"},{\"text\":\"CheckBox\",\"link\":\"/guide/components/check-box/\"},{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"},{\"text\":\"Combobox\",\"link\":\"/guide/components/combobox/\"},{\"text\":\"DetailsList\",\"link\":\"/guide/components/details-list/\"},{\"text\":\"DropDown\",\"link\":\"/guide/components/drop-down/\"},{\"text\":\"Radio\",\"link\":\"/guide/components/radio/\"},{\"text\":\"RadioGroup\",\"link\":\"/guide/components/radio-group/\"},{\"text\":\"RatingControl\",\"link\":\"/guide/components/rating-control/\"},{\"text\":\"Slider\",\"link\":\"/guide/components/slider/\"},{\"text\":\"ToggleSwitch\",\"link\":\"/guide/components/toggle-switch/\"},{\"text\":\"Tag\",\"link\":\"/guide/components/tag/\"}]},{\"text\":\"Collections\",\"collapsed\":true,\"items\":[{\"text\":\"FlipView\",\"link\":\"/guide/components/flip-view/\"},{\"text\":\"ListView\",\"link\":\"/guide/components/list-view/\"},{\"text\":\"TreeView\",\"link\":\"/guide/components/tree-view/\"}]},{\"text\":\"Date & Time\",\"collapsed\":true,\"items\":[{\"text\":\"CalendarDatePicker\",\"link\":\"/guide/components/calendar-date-picker/\"},{\"text\":\"CalendarView\",\"link\":\"/guide/components/calendar-view/\"},{\"text\":\"DatePicker\",\"link\":\"/guide/components/date-picker/\"},{\"text\":\"TimePicker\",\"link\":\"/guide/components/time-picker/\"}]},{\"text\":\"Dialogs & flyouts\",\"collapsed\":true,\"items\":[{\"text\":\"Callout\",\"link\":\"/guide/components/callout/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Layout\",\"collapsed\":true,\"items\":[{\"text\":\"Collapse\",\"link\":\"/guide/components/collapse/\"},{\"text\":\"Expander\",\"link\":\"/guide/components/expander/\"},{\"text\":\"Drawer\",\"link\":\"/guide/components/drawer/\"},{\"text\":\"Panel\",\"link\":\"/guide/components/panel/\"}]},{\"text\":\"Media\",\"collapsed\":true,\"items\":[{\"text\":\"Image\",\"link\":\"/guide/components/image/\"},{\"text\":\"Img\",\"link\":\"/guide/components/img/\"},{\"text\":\"ImgBox\",\"link\":\"/guide/components/img-box/\"},{\"text\":\"Persona\",\"link\":\"/guide/components/persona/\"}]},{\"text\":\"Menu & toolbars\",\"collapsed\":true,\"items\":[{\"text\":\"CommandBar\",\"link\":\"/guide/components/command-bar/\"},{\"text\":\"MenuFlyout\",\"link\":\"/guide/components/menu-flyout/\"},{\"text\":\"SwipeControl\",\"link\":\"/guide/components/swipe-control/\"}]},{\"text\":\"Navigation\",\"collapsed\":true,\"items\":[{\"text\":\"Breadcrumb\",\"link\":\"/guide/components/breadcrumb/\"},{\"text\":\"NavigationPanel\",\"link\":\"/guide/components/navigation-panel/\"},{\"text\":\"NavigationView\",\"link\":\"/guide/components/navigation-view/\"},{\"text\":\"Pivot\",\"link\":\"/guide/components/pivot/\"},{\"text\":\"Pagination\",\"link\":\"/guide/components/pagination/\"}]},{\"text\":\"Scrolling\",\"collapsed\":true,\"items\":[{\"text\":\"InfiniteScrollView\",\"link\":\"/guide/components/infinite-scroll-view/\"},{\"text\":\"ScrollStory\",\"link\":\"/guide/components/scroll-story/\"}]},{\"text\":\"Status & info\",\"collapsed\":true,\"items\":[{\"text\":\"Badge\",\"link\":\"/guide/components/badge/\"},{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"ProgressBar\",\"link\":\"/guide/components/progress-bar/\"},{\"text\":\"ProgressRing\",\"link\":\"/guide/components/progress-ring/\"}]},{\"text\":\"Styles\",\"collapsed\":true,\"items\":[{\"text\":\"AnimatedIcon\",\"link\":\"/guide/components/animated-icon/\"},{\"text\":\"IconElement\",\"link\":\"/guide/components/icon-element/\"},{\"text\":\"RevealContainer\",\"link\":\"/guide/components/reveal-container/\"},{\"text\":\"Shimmer\",\"link\":\"/guide/components/shimmer/\"}]},{\"text\":\"Text\",\"collapsed\":true,\"items\":[{\"text\":\"SearchBox\",\"link\":\"/guide/components/search-box/\"},{\"text\":\"TextBox\",\"link\":\"/guide/components/text-box/\"},{\"text\":\"TextField\",\"link\":\"/guide/components/text-field/\"},{\"text\":\"VerifyBox\",\"link\":\"/guide/components/verify-box/\"}]},{\"text\":\"Windowing\",\"collapsed\":true,\"items\":[{\"text\":\"WebWindow\",\"link\":\"/guide/components/web-window/\"}]},{\"text\":\"Global\",\"collapsed\":true,\"items\":[{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Advance\",\"collapsed\":true,\"items\":[{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git a/guide/components/pivot/emits.html b/guide/components/pivot/emits.html
new file mode 100644
index 0000000..2b3fe1b
--- /dev/null
+++ b/guide/components/pivot/emits.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>vfluent3</title>
+    <meta name="description" content="A Vue3 component library for Fluent UI">
+    <meta name="generator" content="VitePress v1.0.0-rc.45">
+    <link rel="preload stylesheet" href="/VFluent3/assets/style.BabQegKX.css" as="style">
+    
+    <script type="module" src="/VFluent3/assets/app.CSutcJ2E.js"></script>
+    <link rel="preload" href="/VFluent3/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/framework.DvIFzl91.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/theme.CgqFBnN_.js">
+    <link rel="modulepreload" href="/VFluent3/assets/guide_components_pivot_emits.md.BTJPgNpy.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-19c990f1><div class="wrapper" data-v-19c990f1><div class="container" data-v-19c990f1><div class="title" data-v-19c990f1><div class="VPNavBarTitle has-sidebar" data-v-19c990f1 data-v-ab179fa1><a class="title" href="/VFluent3/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>VFluent3</span><!--[--><!--]--></a></div></div><div class="content" data-v-19c990f1><div class="content-body" data-v-19c990f1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-19c990f1><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-19c990f1 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Guide</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-19c990f1 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-19c990f1 data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-19c990f1 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-19c990f1><div class="divider-line" data-v-19c990f1></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-d2ecc192><button data-v-d2ecc192>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-575e6a36><div class="curtain" data-v-575e6a36></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-575e6a36><span class="visually-hidden" id="sidebar-aria-label" data-v-575e6a36> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Basic input</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/button/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/check-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CheckBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/combobox/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Combobox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/details-list/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DetailsList</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drop-down/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DropDown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio-group/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RadioGroup</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/rating-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RatingControl</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/slider/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/toggle-switch/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ToggleSwitch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tag/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Tag</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Collections</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/flip-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>FlipView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/list-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ListView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tree-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TreeView</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Date & Time</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarDatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/time-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TimePicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Dialogs & flyouts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/callout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Callout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Layout</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/collapse/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Collapse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/expander/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Expander</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drawer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Panel</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Media</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/image/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Img</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ImgBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/persona/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Persona</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Menu & toolbars</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/command-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CommandBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/menu-flyout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MenuFlyout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/swipe-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SwipeControl</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Navigation</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/breadcrumb/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationPanel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pivot/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pivot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pagination/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pagination</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Scrolling</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/infinite-scroll-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfiniteScrollView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/scroll-story/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ScrollStory</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Status & info</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/badge/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-ring/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressRing</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Styles</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/animated-icon/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>AnimatedIcon</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/icon-element/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>IconElement</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/reveal-container/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RevealContainer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/shimmer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Shimmer</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Text</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/search-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SearchBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-field/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextField</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/verify-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>VerifyBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Windowing</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/web-window/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>WebWindow</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Global</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Advance</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-935f8a84><div class="content" data-v-935f8a84><div class="outline-marker" data-v-935f8a84></div><div class="outline-title" role="heading" aria-level="2" data-v-935f8a84>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-935f8a84><span class="visually-hidden" id="doc-outline-aria-label" data-v-935f8a84> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-935f8a84 data-v-b933a997><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _VFluent3_guide_components_pivot_emits" data-v-39a288b8><div><h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-label="Permalink to &quot;Emits&quot;">​</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead></table></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-09de1c0f><!--[--><!--]--><!----><nav class="prev-next" data-v-09de1c0f><div class="pager" data-v-09de1c0f><!----></div><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link next" href="/VFluent3/guide/components/button/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Next page</span><span class="title" data-v-09de1c0f>Button</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>MIT Licensed</p><p class="copyright" data-v-e315a0ad>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_calendar-date-picker_properties.md\":\"DXRjmMG8\",\"guide_components_image_properties.md\":\"DGanRzCb\",\"guide_components_img-box_index.md\":\"DYtggkf_\",\"guide_components_img_emits.md\":\"BlE7jvZQ\",\"guide_components_img_index.md\":\"Bm9FiuU4\",\"guide_components_icon-element_properties.md\":\"8Oakruwc\",\"guide_components_img_properties.md\":\"B42YSocI\",\"guide_components_drawer_index.md\":\"D_vpnCpE\",\"guide_components_verify-box_emits.md\":\"DT17Iazx\",\"guide_components_calendar-date-picker_index.md\":\"BdHjrurh\",\"guide_components_rating-control_index.md\":\"Q9l5Lfrr\",\"guide_components_rating-control_properties.md\":\"DKprnl0i\",\"guide_components_calendar-view_index.md\":\"zdoRYVx1\",\"guide_components_animated-icon_index.md\":\"yZDMzCFe\",\"guide_components_calendar-date-picker_emits.md\":\"D5OkfR8j\",\"guide_components_badge_index.md\":\"Bb4crrJn\",\"guide_components_image_index.md\":\"B7X6cWAZ\",\"guide_components_slider_index.md\":\"C7zZ2d-W\",\"guide_components_radio-group_index.md\":\"CVfh3h5H\",\"guide_components_swipe-control_index.md\":\"DwrDVPc1\",\"guide_components_color-picker_emits.md\":\"BHDXVtBQ\",\"guide_components_radio_index.md\":\"90as5QGp\",\"guide_components_pagination_properties.md\":\"JUAPvcTL\",\"guide_components_persona_properties.md\":\"DUTPhPMp\",\"guide_components_combo-box_emits.md\":\"Dh5R-qEv\",\"guide_components_pivot_emits.md\":\"BTJPgNpy\",\"guide_components_pagination_index.md\":\"CnW2zAht\",\"guide_components_flip-view_properties.md\":\"BqZ4hhgU\",\"guide_components_icon-element_emits.md\":\"D5TXFdTZ\",\"guide_components_flip-view_index.md\":\"DefnDOv6\",\"guide_components_navigation-panel_index.md\":\"6mO__sSK\",\"guide_components_rating-control_emits.md\":\"blvomSeC\",\"guide_components_icon-element_index.md\":\"DQ8K7JNn\",\"guide_components_navigation-view_index.md\":\"4AQRiz1k\",\"guide_components_toggle-switch_emits.md\":\"CLGzrNut\",\"guide_components_toggle-switch_index.md\":\"61en_q9-\",\"guide_components_scroll-story_index.md\":\"Vpgb1HSV\",\"guide_components_reveal-container_index.md\":\"Cut2r4tV\",\"guide_components_search-box_emits.md\":\"-d9sWNNt\",\"guide_components_search-box_properties.md\":\"DEKFfPFw\",\"guide_components_shimmer_emits.md\":\"CTMInlI3\",\"guide_components_tag_index.md\":\"BhhxkcHn\",\"guide_components_search-box_index.md\":\"DgkrY0oY\",\"guide_components_shimmer_index.md\":\"iZlHuTxw\",\"guide_components_shimmer_properties.md\":\"CdkU1o6H\",\"guide_components_tree-view_index.md\":\"CUrwan4q\",\"guide_components_text-field_index.md\":\"CXSimJtj\",\"guide_components_text-box_index.md\":\"C5moAPfB\",\"guide_components_progress-ring_properties.md\":\"Dc08Uiff\",\"guide_components_toggle-switch_properties.md\":\"tFppK_IS\",\"guide_components_radio-group_emits.md\":\"cEDzKVnN\",\"guide_components_collapse_index.md\":\"N9Iu5-2v\",\"guide_components_image_emits.md\":\"lmlz2xJd\",\"guide_components_callout_index.md\":\"D9RU33w6\",\"guide_components_pivot_index.md\":\"B_vwQL-5\",\"guide_components_command-bar_index.md\":\"Cp4_rrGB\",\"guide_components_pagination_emits.md\":\"Dng86A22\",\"guide_components_button_index.md\":\"7sqT2MQP\",\"guide_components_info-box_properties.md\":\"BI7Nvk-E\",\"guide_components_drop-down_emits.md\":\"BE95TdKW\",\"guide_components_expander_index.md\":\"BKgcUJzQ\",\"guide_components_message-bar_index.md\":\"AEtAWlF8\",\"guide_components_menu-flyout_index.md\":\"Csa7irPj\",\"guide_components_panel_index.md\":\"CsTu0bXo\",\"guide_components_panel_properties.md\":\"BaxoCYKq\",\"guide_components_progress-bar_emits.md\":\"BcwXUpsF\",\"guide_components_progress-bar_properties.md\":\"TxiS9ZMA\",\"guide_components_progress-ring_emits.md\":\"D2Y6hIZ9\",\"guide_components_color-picker_index.md\":\"DCc4ixcU\",\"guide_components_progress-ring_index.md\":\"CPb-ZEPE\",\"guide_components_color-picker_properties.md\":\"wcXK29Vl\",\"guide_components_time-picker_index.md\":\"CQJdRRaG\",\"guide_components_drop-down_properties.md\":\"Bwlkpr1q\",\"guide_components_infinite-scroll-view_index.md\":\"yAuD807x\",\"guide_components_check-box_index.md\":\"FYgdu4oq\",\"guide_components_progress-bar_index.md\":\"D8vHQw5V\",\"guide_components_combo-box_index.md\":\"DTyu3eNd\",\"guide_components_info-box_emits.md\":\"DlEwpkkq\",\"guide_components_drop-down_index.md\":\"BZzJZQWq\",\"guide_components_list-view_index.md\":\"BoYvMzb0\",\"guide_components_verify-box_properties.md\":\"CW6W8fFf\",\"guide_components_verify-box_index.md\":\"DwSB40wR\",\"guide_index.md\":\"Bndlt3sL\",\"guide_components_web-window_index.md\":\"Bxc8vEeI\",\"index.md\":\"MTRqI42u\",\"guide_components_combo-box_properties.md\":\"AWfHzV6x\",\"guide_components_combobox_emits.md\":\"CGB6WLt8\",\"guide_components_combobox_properties.md\":\"Bja0hMou\",\"guide_components_details-list_index.md\":\"CcgOCIyt\",\"guide_components_info-box_index.md\":\"vXh-_DsL\",\"guide_components_combobox_index.md\":\"CsPkY6YB\",\"guide_components_date-picker_index.md\":\"12vmUIup\",\"guide_components_flip-view_emits.md\":\"DCheHjDj\",\"guide_components_panel_emits.md\":\"DG0REDq8\",\"guide_components_breadcrumb_index.md\":\"DyDm7PeP\",\"guide_components_radio-group_properties.md\":\"BnPxoKsQ\",\"guide_components_persona_emits.md\":\"CnsDPKRU\",\"guide_components_pivot_properties.md\":\"BmoLpPi1\",\"guide_components_persona_index.md\":\"DT00jby4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vfluent3\",\"description\":\"A Vue3 component library for Fluent UI\",\"base\":\"/VFluent3/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"VFluent3\",\"footer\":{\"message\":\"MIT Licensed\",\"copyright\":\"Copyright © Creator SN - 2022\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/\"}],\"sidebar\":[{\"text\":\"Basic input\",\"collapsed\":true,\"items\":[{\"text\":\"Button\",\"link\":\"/guide/components/button/\"},{\"text\":\"CheckBox\",\"link\":\"/guide/components/check-box/\"},{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"},{\"text\":\"Combobox\",\"link\":\"/guide/components/combobox/\"},{\"text\":\"DetailsList\",\"link\":\"/guide/components/details-list/\"},{\"text\":\"DropDown\",\"link\":\"/guide/components/drop-down/\"},{\"text\":\"Radio\",\"link\":\"/guide/components/radio/\"},{\"text\":\"RadioGroup\",\"link\":\"/guide/components/radio-group/\"},{\"text\":\"RatingControl\",\"link\":\"/guide/components/rating-control/\"},{\"text\":\"Slider\",\"link\":\"/guide/components/slider/\"},{\"text\":\"ToggleSwitch\",\"link\":\"/guide/components/toggle-switch/\"},{\"text\":\"Tag\",\"link\":\"/guide/components/tag/\"}]},{\"text\":\"Collections\",\"collapsed\":true,\"items\":[{\"text\":\"FlipView\",\"link\":\"/guide/components/flip-view/\"},{\"text\":\"ListView\",\"link\":\"/guide/components/list-view/\"},{\"text\":\"TreeView\",\"link\":\"/guide/components/tree-view/\"}]},{\"text\":\"Date & Time\",\"collapsed\":true,\"items\":[{\"text\":\"CalendarDatePicker\",\"link\":\"/guide/components/calendar-date-picker/\"},{\"text\":\"CalendarView\",\"link\":\"/guide/components/calendar-view/\"},{\"text\":\"DatePicker\",\"link\":\"/guide/components/date-picker/\"},{\"text\":\"TimePicker\",\"link\":\"/guide/components/time-picker/\"}]},{\"text\":\"Dialogs & flyouts\",\"collapsed\":true,\"items\":[{\"text\":\"Callout\",\"link\":\"/guide/components/callout/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Layout\",\"collapsed\":true,\"items\":[{\"text\":\"Collapse\",\"link\":\"/guide/components/collapse/\"},{\"text\":\"Expander\",\"link\":\"/guide/components/expander/\"},{\"text\":\"Drawer\",\"link\":\"/guide/components/drawer/\"},{\"text\":\"Panel\",\"link\":\"/guide/components/panel/\"}]},{\"text\":\"Media\",\"collapsed\":true,\"items\":[{\"text\":\"Image\",\"link\":\"/guide/components/image/\"},{\"text\":\"Img\",\"link\":\"/guide/components/img/\"},{\"text\":\"ImgBox\",\"link\":\"/guide/components/img-box/\"},{\"text\":\"Persona\",\"link\":\"/guide/components/persona/\"}]},{\"text\":\"Menu & toolbars\",\"collapsed\":true,\"items\":[{\"text\":\"CommandBar\",\"link\":\"/guide/components/command-bar/\"},{\"text\":\"MenuFlyout\",\"link\":\"/guide/components/menu-flyout/\"},{\"text\":\"SwipeControl\",\"link\":\"/guide/components/swipe-control/\"}]},{\"text\":\"Navigation\",\"collapsed\":true,\"items\":[{\"text\":\"Breadcrumb\",\"link\":\"/guide/components/breadcrumb/\"},{\"text\":\"NavigationPanel\",\"link\":\"/guide/components/navigation-panel/\"},{\"text\":\"NavigationView\",\"link\":\"/guide/components/navigation-view/\"},{\"text\":\"Pivot\",\"link\":\"/guide/components/pivot/\"},{\"text\":\"Pagination\",\"link\":\"/guide/components/pagination/\"}]},{\"text\":\"Scrolling\",\"collapsed\":true,\"items\":[{\"text\":\"InfiniteScrollView\",\"link\":\"/guide/components/infinite-scroll-view/\"},{\"text\":\"ScrollStory\",\"link\":\"/guide/components/scroll-story/\"}]},{\"text\":\"Status & info\",\"collapsed\":true,\"items\":[{\"text\":\"Badge\",\"link\":\"/guide/components/badge/\"},{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"ProgressBar\",\"link\":\"/guide/components/progress-bar/\"},{\"text\":\"ProgressRing\",\"link\":\"/guide/components/progress-ring/\"}]},{\"text\":\"Styles\",\"collapsed\":true,\"items\":[{\"text\":\"AnimatedIcon\",\"link\":\"/guide/components/animated-icon/\"},{\"text\":\"IconElement\",\"link\":\"/guide/components/icon-element/\"},{\"text\":\"RevealContainer\",\"link\":\"/guide/components/reveal-container/\"},{\"text\":\"Shimmer\",\"link\":\"/guide/components/shimmer/\"}]},{\"text\":\"Text\",\"collapsed\":true,\"items\":[{\"text\":\"SearchBox\",\"link\":\"/guide/components/search-box/\"},{\"text\":\"TextBox\",\"link\":\"/guide/components/text-box/\"},{\"text\":\"TextField\",\"link\":\"/guide/components/text-field/\"},{\"text\":\"VerifyBox\",\"link\":\"/guide/components/verify-box/\"}]},{\"text\":\"Windowing\",\"collapsed\":true,\"items\":[{\"text\":\"WebWindow\",\"link\":\"/guide/components/web-window/\"}]},{\"text\":\"Global\",\"collapsed\":true,\"items\":[{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Advance\",\"collapsed\":true,\"items\":[{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git a/guide/components/pivot/index.html b/guide/components/pivot/index.html
new file mode 100644
index 0000000..6261156
--- /dev/null
+++ b/guide/components/pivot/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>Pivot | vfluent3</title>
+    <meta name="description" content="A Vue3 component library for Fluent UI">
+    <meta name="generator" content="VitePress v1.0.0-rc.45">
+    <link rel="preload stylesheet" href="/VFluent3/assets/style.BabQegKX.css" as="style">
+    
+    <script type="module" src="/VFluent3/assets/app.CSutcJ2E.js"></script>
+    <link rel="preload" href="/VFluent3/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/framework.DvIFzl91.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/theme.CgqFBnN_.js">
+    <link rel="modulepreload" href="/VFluent3/assets/guide_components_pivot_index.md.B_vwQL-5.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-19c990f1><div class="wrapper" data-v-19c990f1><div class="container" data-v-19c990f1><div class="title" data-v-19c990f1><div class="VPNavBarTitle has-sidebar" data-v-19c990f1 data-v-ab179fa1><a class="title" href="/VFluent3/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>VFluent3</span><!--[--><!--]--></a></div></div><div class="content" data-v-19c990f1><div class="content-body" data-v-19c990f1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-19c990f1><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-19c990f1 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Guide</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-19c990f1 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-19c990f1 data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-19c990f1 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-19c990f1><div class="divider-line" data-v-19c990f1></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-d2ecc192><button data-v-d2ecc192>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-575e6a36><div class="curtain" data-v-575e6a36></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-575e6a36><span class="visually-hidden" id="sidebar-aria-label" data-v-575e6a36> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Basic input</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/button/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/check-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CheckBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/combobox/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Combobox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/details-list/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DetailsList</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drop-down/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DropDown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio-group/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RadioGroup</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/rating-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RatingControl</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/slider/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/toggle-switch/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ToggleSwitch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tag/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Tag</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Collections</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/flip-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>FlipView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/list-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ListView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tree-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TreeView</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Date & Time</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarDatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/time-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TimePicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Dialogs & flyouts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/callout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Callout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Layout</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/collapse/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Collapse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/expander/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Expander</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drawer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Panel</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Media</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/image/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Img</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ImgBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/persona/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Persona</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Menu & toolbars</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/command-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CommandBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/menu-flyout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MenuFlyout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/swipe-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SwipeControl</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible has-active" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Navigation</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/breadcrumb/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationPanel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pivot/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pivot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pagination/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pagination</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Scrolling</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/infinite-scroll-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfiniteScrollView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/scroll-story/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ScrollStory</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Status & info</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/badge/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-ring/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressRing</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Styles</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/animated-icon/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>AnimatedIcon</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/icon-element/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>IconElement</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/reveal-container/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RevealContainer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/shimmer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Shimmer</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Text</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/search-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SearchBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-field/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextField</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/verify-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>VerifyBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Windowing</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/web-window/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>WebWindow</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Global</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Advance</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-935f8a84><div class="content" data-v-935f8a84><div class="outline-marker" data-v-935f8a84></div><div class="outline-title" role="heading" aria-level="2" data-v-935f8a84>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-935f8a84><span class="visually-hidden" id="doc-outline-aria-label" data-v-935f8a84> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-935f8a84 data-v-b933a997><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _VFluent3_guide_components_pivot_" data-v-39a288b8><div><h3 id="pivot-demo" tabindex="-1">Pivot-DEMO <a class="header-anchor" href="#pivot-demo" aria-label="Permalink to &quot;Pivot-DEMO&quot;">​</a></h3><hr><!----><h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">value</td><td style="text-align:center;">Object</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">当前选中项值</td></tr><tr><td style="text-align:center;">items</td><td style="text-align:center;">Array</td><td style="text-align:center;">No</td><td style="text-align:center;">[{ name: &quot;Pivot&quot;, width: 80 }]</td><td style="text-align:center;">选项卡数据</td></tr><tr><td style="text-align:center;">tab</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否开启tab样式</td></tr><tr><td style="text-align:center;">fontSize</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">默认字体大小</td></tr><tr><td style="text-align:center;">foreground</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">前景色</td></tr><tr><td style="text-align:center;">sliderBackground</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">滑块背景色</td></tr><tr><td style="text-align:center;">sliderBoxshadow</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否开启滑块阴影</td></tr><tr><td style="text-align:center;">background</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">背景色</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">system</td><td style="text-align:center;">主题样式, 包含<code>light</code>, <code>dark</code>, <code>system</code>, <code>custom</code>几种样式</td></tr></tbody></table><h3 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to &quot;Events&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">事件名(Name)</th><th style="text-align:center;">参数类型(args)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">input</td><td style="text-align:center;">value</td><td style="text-align:center;">当选中项发生改变时, 返回value</td></tr><tr><td style="text-align:center;">change</td><td style="text-align:center;">object</td><td style="text-align:center;">当选中项发生改变时, 返回value</td></tr></tbody></table><h3 id="slot" tabindex="-1">Slot <a class="header-anchor" href="#slot" aria-label="Permalink to &quot;Slot&quot;">​</a></h3><hr><ol><li>Container</li></ol><p>自定义项目内的内容, 包含以下属性:</p><ul><li>item: 当前项目数据</li><li>index: 当前项目索引</li></ul><div class="language-javascript vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">container</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;x&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="data" tabindex="-1">Data <a class="header-anchor" href="#data" aria-label="Permalink to &quot;Data&quot;">​</a></h3><hr><ol><li>items</li></ol><p>Pivot只针对对象的<code>key</code>和<code>name</code>进行匹配, 当<code>value</code>传入的这两个属性能够在<code>options</code>中匹配时, 选中项即为被匹配项.</p><div class="language-javascript vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">items </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [{ key: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Pivot&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, width: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">80</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, show: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, disabled: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }]</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">//e.g.//</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">items</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: [{ key: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Pivot&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, width: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">80</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }]</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p><strong>特别地</strong> 1.0.3版本后支持采用函数式字段, 其中支持的字段包括<code>name</code>, <code>disabled</code>, <code>show</code>, <code>width</code> 1.1.0版本后<code>width</code>支持数值和CSS字符串赋值</p></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-09de1c0f><!--[--><!--]--><!----><nav class="prev-next" data-v-09de1c0f><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link prev" href="/VFluent3/guide/components/navigation-view/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Previous page</span><span class="title" data-v-09de1c0f>NavigationView</span><!--]--></a></div><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link next" href="/VFluent3/guide/components/pagination/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Next page</span><span class="title" data-v-09de1c0f>Pagination</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>MIT Licensed</p><p class="copyright" data-v-e315a0ad>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_calendar-date-picker_properties.md\":\"DXRjmMG8\",\"guide_components_image_properties.md\":\"DGanRzCb\",\"guide_components_img-box_index.md\":\"DYtggkf_\",\"guide_components_img_emits.md\":\"BlE7jvZQ\",\"guide_components_img_index.md\":\"Bm9FiuU4\",\"guide_components_icon-element_properties.md\":\"8Oakruwc\",\"guide_components_img_properties.md\":\"B42YSocI\",\"guide_components_drawer_index.md\":\"D_vpnCpE\",\"guide_components_verify-box_emits.md\":\"DT17Iazx\",\"guide_components_calendar-date-picker_index.md\":\"BdHjrurh\",\"guide_components_rating-control_index.md\":\"Q9l5Lfrr\",\"guide_components_rating-control_properties.md\":\"DKprnl0i\",\"guide_components_calendar-view_index.md\":\"zdoRYVx1\",\"guide_components_animated-icon_index.md\":\"yZDMzCFe\",\"guide_components_calendar-date-picker_emits.md\":\"D5OkfR8j\",\"guide_components_badge_index.md\":\"Bb4crrJn\",\"guide_components_image_index.md\":\"B7X6cWAZ\",\"guide_components_slider_index.md\":\"C7zZ2d-W\",\"guide_components_radio-group_index.md\":\"CVfh3h5H\",\"guide_components_swipe-control_index.md\":\"DwrDVPc1\",\"guide_components_color-picker_emits.md\":\"BHDXVtBQ\",\"guide_components_radio_index.md\":\"90as5QGp\",\"guide_components_pagination_properties.md\":\"JUAPvcTL\",\"guide_components_persona_properties.md\":\"DUTPhPMp\",\"guide_components_combo-box_emits.md\":\"Dh5R-qEv\",\"guide_components_pivot_emits.md\":\"BTJPgNpy\",\"guide_components_pagination_index.md\":\"CnW2zAht\",\"guide_components_flip-view_properties.md\":\"BqZ4hhgU\",\"guide_components_icon-element_emits.md\":\"D5TXFdTZ\",\"guide_components_flip-view_index.md\":\"DefnDOv6\",\"guide_components_navigation-panel_index.md\":\"6mO__sSK\",\"guide_components_rating-control_emits.md\":\"blvomSeC\",\"guide_components_icon-element_index.md\":\"DQ8K7JNn\",\"guide_components_navigation-view_index.md\":\"4AQRiz1k\",\"guide_components_toggle-switch_emits.md\":\"CLGzrNut\",\"guide_components_toggle-switch_index.md\":\"61en_q9-\",\"guide_components_scroll-story_index.md\":\"Vpgb1HSV\",\"guide_components_reveal-container_index.md\":\"Cut2r4tV\",\"guide_components_search-box_emits.md\":\"-d9sWNNt\",\"guide_components_search-box_properties.md\":\"DEKFfPFw\",\"guide_components_shimmer_emits.md\":\"CTMInlI3\",\"guide_components_tag_index.md\":\"BhhxkcHn\",\"guide_components_search-box_index.md\":\"DgkrY0oY\",\"guide_components_shimmer_index.md\":\"iZlHuTxw\",\"guide_components_shimmer_properties.md\":\"CdkU1o6H\",\"guide_components_tree-view_index.md\":\"CUrwan4q\",\"guide_components_text-field_index.md\":\"CXSimJtj\",\"guide_components_text-box_index.md\":\"C5moAPfB\",\"guide_components_progress-ring_properties.md\":\"Dc08Uiff\",\"guide_components_toggle-switch_properties.md\":\"tFppK_IS\",\"guide_components_radio-group_emits.md\":\"cEDzKVnN\",\"guide_components_collapse_index.md\":\"N9Iu5-2v\",\"guide_components_image_emits.md\":\"lmlz2xJd\",\"guide_components_callout_index.md\":\"D9RU33w6\",\"guide_components_pivot_index.md\":\"B_vwQL-5\",\"guide_components_command-bar_index.md\":\"Cp4_rrGB\",\"guide_components_pagination_emits.md\":\"Dng86A22\",\"guide_components_button_index.md\":\"7sqT2MQP\",\"guide_components_info-box_properties.md\":\"BI7Nvk-E\",\"guide_components_drop-down_emits.md\":\"BE95TdKW\",\"guide_components_expander_index.md\":\"BKgcUJzQ\",\"guide_components_message-bar_index.md\":\"AEtAWlF8\",\"guide_components_menu-flyout_index.md\":\"Csa7irPj\",\"guide_components_panel_index.md\":\"CsTu0bXo\",\"guide_components_panel_properties.md\":\"BaxoCYKq\",\"guide_components_progress-bar_emits.md\":\"BcwXUpsF\",\"guide_components_progress-bar_properties.md\":\"TxiS9ZMA\",\"guide_components_progress-ring_emits.md\":\"D2Y6hIZ9\",\"guide_components_color-picker_index.md\":\"DCc4ixcU\",\"guide_components_progress-ring_index.md\":\"CPb-ZEPE\",\"guide_components_color-picker_properties.md\":\"wcXK29Vl\",\"guide_components_time-picker_index.md\":\"CQJdRRaG\",\"guide_components_drop-down_properties.md\":\"Bwlkpr1q\",\"guide_components_infinite-scroll-view_index.md\":\"yAuD807x\",\"guide_components_check-box_index.md\":\"FYgdu4oq\",\"guide_components_progress-bar_index.md\":\"D8vHQw5V\",\"guide_components_combo-box_index.md\":\"DTyu3eNd\",\"guide_components_info-box_emits.md\":\"DlEwpkkq\",\"guide_components_drop-down_index.md\":\"BZzJZQWq\",\"guide_components_list-view_index.md\":\"BoYvMzb0\",\"guide_components_verify-box_properties.md\":\"CW6W8fFf\",\"guide_components_verify-box_index.md\":\"DwSB40wR\",\"guide_index.md\":\"Bndlt3sL\",\"guide_components_web-window_index.md\":\"Bxc8vEeI\",\"index.md\":\"MTRqI42u\",\"guide_components_combo-box_properties.md\":\"AWfHzV6x\",\"guide_components_combobox_emits.md\":\"CGB6WLt8\",\"guide_components_combobox_properties.md\":\"Bja0hMou\",\"guide_components_details-list_index.md\":\"CcgOCIyt\",\"guide_components_info-box_index.md\":\"vXh-_DsL\",\"guide_components_combobox_index.md\":\"CsPkY6YB\",\"guide_components_date-picker_index.md\":\"12vmUIup\",\"guide_components_flip-view_emits.md\":\"DCheHjDj\",\"guide_components_panel_emits.md\":\"DG0REDq8\",\"guide_components_breadcrumb_index.md\":\"DyDm7PeP\",\"guide_components_radio-group_properties.md\":\"BnPxoKsQ\",\"guide_components_persona_emits.md\":\"CnsDPKRU\",\"guide_components_pivot_properties.md\":\"BmoLpPi1\",\"guide_components_persona_index.md\":\"DT00jby4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vfluent3\",\"description\":\"A Vue3 component library for Fluent UI\",\"base\":\"/VFluent3/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"VFluent3\",\"footer\":{\"message\":\"MIT Licensed\",\"copyright\":\"Copyright © Creator SN - 2022\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/\"}],\"sidebar\":[{\"text\":\"Basic input\",\"collapsed\":true,\"items\":[{\"text\":\"Button\",\"link\":\"/guide/components/button/\"},{\"text\":\"CheckBox\",\"link\":\"/guide/components/check-box/\"},{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"},{\"text\":\"Combobox\",\"link\":\"/guide/components/combobox/\"},{\"text\":\"DetailsList\",\"link\":\"/guide/components/details-list/\"},{\"text\":\"DropDown\",\"link\":\"/guide/components/drop-down/\"},{\"text\":\"Radio\",\"link\":\"/guide/components/radio/\"},{\"text\":\"RadioGroup\",\"link\":\"/guide/components/radio-group/\"},{\"text\":\"RatingControl\",\"link\":\"/guide/components/rating-control/\"},{\"text\":\"Slider\",\"link\":\"/guide/components/slider/\"},{\"text\":\"ToggleSwitch\",\"link\":\"/guide/components/toggle-switch/\"},{\"text\":\"Tag\",\"link\":\"/guide/components/tag/\"}]},{\"text\":\"Collections\",\"collapsed\":true,\"items\":[{\"text\":\"FlipView\",\"link\":\"/guide/components/flip-view/\"},{\"text\":\"ListView\",\"link\":\"/guide/components/list-view/\"},{\"text\":\"TreeView\",\"link\":\"/guide/components/tree-view/\"}]},{\"text\":\"Date & Time\",\"collapsed\":true,\"items\":[{\"text\":\"CalendarDatePicker\",\"link\":\"/guide/components/calendar-date-picker/\"},{\"text\":\"CalendarView\",\"link\":\"/guide/components/calendar-view/\"},{\"text\":\"DatePicker\",\"link\":\"/guide/components/date-picker/\"},{\"text\":\"TimePicker\",\"link\":\"/guide/components/time-picker/\"}]},{\"text\":\"Dialogs & flyouts\",\"collapsed\":true,\"items\":[{\"text\":\"Callout\",\"link\":\"/guide/components/callout/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Layout\",\"collapsed\":true,\"items\":[{\"text\":\"Collapse\",\"link\":\"/guide/components/collapse/\"},{\"text\":\"Expander\",\"link\":\"/guide/components/expander/\"},{\"text\":\"Drawer\",\"link\":\"/guide/components/drawer/\"},{\"text\":\"Panel\",\"link\":\"/guide/components/panel/\"}]},{\"text\":\"Media\",\"collapsed\":true,\"items\":[{\"text\":\"Image\",\"link\":\"/guide/components/image/\"},{\"text\":\"Img\",\"link\":\"/guide/components/img/\"},{\"text\":\"ImgBox\",\"link\":\"/guide/components/img-box/\"},{\"text\":\"Persona\",\"link\":\"/guide/components/persona/\"}]},{\"text\":\"Menu & toolbars\",\"collapsed\":true,\"items\":[{\"text\":\"CommandBar\",\"link\":\"/guide/components/command-bar/\"},{\"text\":\"MenuFlyout\",\"link\":\"/guide/components/menu-flyout/\"},{\"text\":\"SwipeControl\",\"link\":\"/guide/components/swipe-control/\"}]},{\"text\":\"Navigation\",\"collapsed\":true,\"items\":[{\"text\":\"Breadcrumb\",\"link\":\"/guide/components/breadcrumb/\"},{\"text\":\"NavigationPanel\",\"link\":\"/guide/components/navigation-panel/\"},{\"text\":\"NavigationView\",\"link\":\"/guide/components/navigation-view/\"},{\"text\":\"Pivot\",\"link\":\"/guide/components/pivot/\"},{\"text\":\"Pagination\",\"link\":\"/guide/components/pagination/\"}]},{\"text\":\"Scrolling\",\"collapsed\":true,\"items\":[{\"text\":\"InfiniteScrollView\",\"link\":\"/guide/components/infinite-scroll-view/\"},{\"text\":\"ScrollStory\",\"link\":\"/guide/components/scroll-story/\"}]},{\"text\":\"Status & info\",\"collapsed\":true,\"items\":[{\"text\":\"Badge\",\"link\":\"/guide/components/badge/\"},{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"ProgressBar\",\"link\":\"/guide/components/progress-bar/\"},{\"text\":\"ProgressRing\",\"link\":\"/guide/components/progress-ring/\"}]},{\"text\":\"Styles\",\"collapsed\":true,\"items\":[{\"text\":\"AnimatedIcon\",\"link\":\"/guide/components/animated-icon/\"},{\"text\":\"IconElement\",\"link\":\"/guide/components/icon-element/\"},{\"text\":\"RevealContainer\",\"link\":\"/guide/components/reveal-container/\"},{\"text\":\"Shimmer\",\"link\":\"/guide/components/shimmer/\"}]},{\"text\":\"Text\",\"collapsed\":true,\"items\":[{\"text\":\"SearchBox\",\"link\":\"/guide/components/search-box/\"},{\"text\":\"TextBox\",\"link\":\"/guide/components/text-box/\"},{\"text\":\"TextField\",\"link\":\"/guide/components/text-field/\"},{\"text\":\"VerifyBox\",\"link\":\"/guide/components/verify-box/\"}]},{\"text\":\"Windowing\",\"collapsed\":true,\"items\":[{\"text\":\"WebWindow\",\"link\":\"/guide/components/web-window/\"}]},{\"text\":\"Global\",\"collapsed\":true,\"items\":[{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Advance\",\"collapsed\":true,\"items\":[{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git a/guide/components/pivot/properties.html b/guide/components/pivot/properties.html
new file mode 100644
index 0000000..c534c64
--- /dev/null
+++ b/guide/components/pivot/properties.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>vfluent3</title>
+    <meta name="description" content="A Vue3 component library for Fluent UI">
+    <meta name="generator" content="VitePress v1.0.0-rc.45">
+    <link rel="preload stylesheet" href="/VFluent3/assets/style.BabQegKX.css" as="style">
+    
+    <script type="module" src="/VFluent3/assets/app.CSutcJ2E.js"></script>
+    <link rel="preload" href="/VFluent3/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/framework.DvIFzl91.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/theme.CgqFBnN_.js">
+    <link rel="modulepreload" href="/VFluent3/assets/guide_components_pivot_properties.md.BmoLpPi1.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-19c990f1><div class="wrapper" data-v-19c990f1><div class="container" data-v-19c990f1><div class="title" data-v-19c990f1><div class="VPNavBarTitle has-sidebar" data-v-19c990f1 data-v-ab179fa1><a class="title" href="/VFluent3/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>VFluent3</span><!--[--><!--]--></a></div></div><div class="content" data-v-19c990f1><div class="content-body" data-v-19c990f1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-19c990f1><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-19c990f1 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Guide</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-19c990f1 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-19c990f1 data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-19c990f1 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-19c990f1><div class="divider-line" data-v-19c990f1></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-d2ecc192><button data-v-d2ecc192>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-575e6a36><div class="curtain" data-v-575e6a36></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-575e6a36><span class="visually-hidden" id="sidebar-aria-label" data-v-575e6a36> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Basic input</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/button/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/check-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CheckBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/combobox/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Combobox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/details-list/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DetailsList</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drop-down/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DropDown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio-group/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RadioGroup</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/rating-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RatingControl</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/slider/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/toggle-switch/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ToggleSwitch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tag/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Tag</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Collections</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/flip-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>FlipView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/list-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ListView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tree-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TreeView</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Date & Time</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarDatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/time-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TimePicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Dialogs & flyouts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/callout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Callout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Layout</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/collapse/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Collapse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/expander/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Expander</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drawer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Panel</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Media</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/image/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Img</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ImgBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/persona/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Persona</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Menu & toolbars</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/command-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CommandBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/menu-flyout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MenuFlyout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/swipe-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SwipeControl</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Navigation</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/breadcrumb/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationPanel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pivot/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pivot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pagination/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pagination</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Scrolling</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/infinite-scroll-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfiniteScrollView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/scroll-story/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ScrollStory</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Status & info</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/badge/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-ring/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressRing</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Styles</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/animated-icon/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>AnimatedIcon</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/icon-element/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>IconElement</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/reveal-container/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RevealContainer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/shimmer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Shimmer</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Text</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/search-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SearchBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-field/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextField</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/verify-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>VerifyBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Windowing</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/web-window/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>WebWindow</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Global</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Advance</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-935f8a84><div class="content" data-v-935f8a84><div class="outline-marker" data-v-935f8a84></div><div class="outline-title" role="heading" aria-level="2" data-v-935f8a84>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-935f8a84><span class="visually-hidden" id="doc-outline-aria-label" data-v-935f8a84> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-935f8a84 data-v-b933a997><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _VFluent3_guide_components_pivot_properties" data-v-39a288b8><div><h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-label="Permalink to &quot;Properties&quot;">​</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead></table></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-09de1c0f><!--[--><!--]--><!----><nav class="prev-next" data-v-09de1c0f><div class="pager" data-v-09de1c0f><!----></div><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link next" href="/VFluent3/guide/components/button/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Next page</span><span class="title" data-v-09de1c0f>Button</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>MIT Licensed</p><p class="copyright" data-v-e315a0ad>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_calendar-date-picker_properties.md\":\"DXRjmMG8\",\"guide_components_image_properties.md\":\"DGanRzCb\",\"guide_components_img-box_index.md\":\"DYtggkf_\",\"guide_components_img_emits.md\":\"BlE7jvZQ\",\"guide_components_img_index.md\":\"Bm9FiuU4\",\"guide_components_icon-element_properties.md\":\"8Oakruwc\",\"guide_components_img_properties.md\":\"B42YSocI\",\"guide_components_drawer_index.md\":\"D_vpnCpE\",\"guide_components_verify-box_emits.md\":\"DT17Iazx\",\"guide_components_calendar-date-picker_index.md\":\"BdHjrurh\",\"guide_components_rating-control_index.md\":\"Q9l5Lfrr\",\"guide_components_rating-control_properties.md\":\"DKprnl0i\",\"guide_components_calendar-view_index.md\":\"zdoRYVx1\",\"guide_components_animated-icon_index.md\":\"yZDMzCFe\",\"guide_components_calendar-date-picker_emits.md\":\"D5OkfR8j\",\"guide_components_badge_index.md\":\"Bb4crrJn\",\"guide_components_image_index.md\":\"B7X6cWAZ\",\"guide_components_slider_index.md\":\"C7zZ2d-W\",\"guide_components_radio-group_index.md\":\"CVfh3h5H\",\"guide_components_swipe-control_index.md\":\"DwrDVPc1\",\"guide_components_color-picker_emits.md\":\"BHDXVtBQ\",\"guide_components_radio_index.md\":\"90as5QGp\",\"guide_components_pagination_properties.md\":\"JUAPvcTL\",\"guide_components_persona_properties.md\":\"DUTPhPMp\",\"guide_components_combo-box_emits.md\":\"Dh5R-qEv\",\"guide_components_pivot_emits.md\":\"BTJPgNpy\",\"guide_components_pagination_index.md\":\"CnW2zAht\",\"guide_components_flip-view_properties.md\":\"BqZ4hhgU\",\"guide_components_icon-element_emits.md\":\"D5TXFdTZ\",\"guide_components_flip-view_index.md\":\"DefnDOv6\",\"guide_components_navigation-panel_index.md\":\"6mO__sSK\",\"guide_components_rating-control_emits.md\":\"blvomSeC\",\"guide_components_icon-element_index.md\":\"DQ8K7JNn\",\"guide_components_navigation-view_index.md\":\"4AQRiz1k\",\"guide_components_toggle-switch_emits.md\":\"CLGzrNut\",\"guide_components_toggle-switch_index.md\":\"61en_q9-\",\"guide_components_scroll-story_index.md\":\"Vpgb1HSV\",\"guide_components_reveal-container_index.md\":\"Cut2r4tV\",\"guide_components_search-box_emits.md\":\"-d9sWNNt\",\"guide_components_search-box_properties.md\":\"DEKFfPFw\",\"guide_components_shimmer_emits.md\":\"CTMInlI3\",\"guide_components_tag_index.md\":\"BhhxkcHn\",\"guide_components_search-box_index.md\":\"DgkrY0oY\",\"guide_components_shimmer_index.md\":\"iZlHuTxw\",\"guide_components_shimmer_properties.md\":\"CdkU1o6H\",\"guide_components_tree-view_index.md\":\"CUrwan4q\",\"guide_components_text-field_index.md\":\"CXSimJtj\",\"guide_components_text-box_index.md\":\"C5moAPfB\",\"guide_components_progress-ring_properties.md\":\"Dc08Uiff\",\"guide_components_toggle-switch_properties.md\":\"tFppK_IS\",\"guide_components_radio-group_emits.md\":\"cEDzKVnN\",\"guide_components_collapse_index.md\":\"N9Iu5-2v\",\"guide_components_image_emits.md\":\"lmlz2xJd\",\"guide_components_callout_index.md\":\"D9RU33w6\",\"guide_components_pivot_index.md\":\"B_vwQL-5\",\"guide_components_command-bar_index.md\":\"Cp4_rrGB\",\"guide_components_pagination_emits.md\":\"Dng86A22\",\"guide_components_button_index.md\":\"7sqT2MQP\",\"guide_components_info-box_properties.md\":\"BI7Nvk-E\",\"guide_components_drop-down_emits.md\":\"BE95TdKW\",\"guide_components_expander_index.md\":\"BKgcUJzQ\",\"guide_components_message-bar_index.md\":\"AEtAWlF8\",\"guide_components_menu-flyout_index.md\":\"Csa7irPj\",\"guide_components_panel_index.md\":\"CsTu0bXo\",\"guide_components_panel_properties.md\":\"BaxoCYKq\",\"guide_components_progress-bar_emits.md\":\"BcwXUpsF\",\"guide_components_progress-bar_properties.md\":\"TxiS9ZMA\",\"guide_components_progress-ring_emits.md\":\"D2Y6hIZ9\",\"guide_components_color-picker_index.md\":\"DCc4ixcU\",\"guide_components_progress-ring_index.md\":\"CPb-ZEPE\",\"guide_components_color-picker_properties.md\":\"wcXK29Vl\",\"guide_components_time-picker_index.md\":\"CQJdRRaG\",\"guide_components_drop-down_properties.md\":\"Bwlkpr1q\",\"guide_components_infinite-scroll-view_index.md\":\"yAuD807x\",\"guide_components_check-box_index.md\":\"FYgdu4oq\",\"guide_components_progress-bar_index.md\":\"D8vHQw5V\",\"guide_components_combo-box_index.md\":\"DTyu3eNd\",\"guide_components_info-box_emits.md\":\"DlEwpkkq\",\"guide_components_drop-down_index.md\":\"BZzJZQWq\",\"guide_components_list-view_index.md\":\"BoYvMzb0\",\"guide_components_verify-box_properties.md\":\"CW6W8fFf\",\"guide_components_verify-box_index.md\":\"DwSB40wR\",\"guide_index.md\":\"Bndlt3sL\",\"guide_components_web-window_index.md\":\"Bxc8vEeI\",\"index.md\":\"MTRqI42u\",\"guide_components_combo-box_properties.md\":\"AWfHzV6x\",\"guide_components_combobox_emits.md\":\"CGB6WLt8\",\"guide_components_combobox_properties.md\":\"Bja0hMou\",\"guide_components_details-list_index.md\":\"CcgOCIyt\",\"guide_components_info-box_index.md\":\"vXh-_DsL\",\"guide_components_combobox_index.md\":\"CsPkY6YB\",\"guide_components_date-picker_index.md\":\"12vmUIup\",\"guide_components_flip-view_emits.md\":\"DCheHjDj\",\"guide_components_panel_emits.md\":\"DG0REDq8\",\"guide_components_breadcrumb_index.md\":\"DyDm7PeP\",\"guide_components_radio-group_properties.md\":\"BnPxoKsQ\",\"guide_components_persona_emits.md\":\"CnsDPKRU\",\"guide_components_pivot_properties.md\":\"BmoLpPi1\",\"guide_components_persona_index.md\":\"DT00jby4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vfluent3\",\"description\":\"A Vue3 component library for Fluent UI\",\"base\":\"/VFluent3/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"VFluent3\",\"footer\":{\"message\":\"MIT Licensed\",\"copyright\":\"Copyright © Creator SN - 2022\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/\"}],\"sidebar\":[{\"text\":\"Basic input\",\"collapsed\":true,\"items\":[{\"text\":\"Button\",\"link\":\"/guide/components/button/\"},{\"text\":\"CheckBox\",\"link\":\"/guide/components/check-box/\"},{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"},{\"text\":\"Combobox\",\"link\":\"/guide/components/combobox/\"},{\"text\":\"DetailsList\",\"link\":\"/guide/components/details-list/\"},{\"text\":\"DropDown\",\"link\":\"/guide/components/drop-down/\"},{\"text\":\"Radio\",\"link\":\"/guide/components/radio/\"},{\"text\":\"RadioGroup\",\"link\":\"/guide/components/radio-group/\"},{\"text\":\"RatingControl\",\"link\":\"/guide/components/rating-control/\"},{\"text\":\"Slider\",\"link\":\"/guide/components/slider/\"},{\"text\":\"ToggleSwitch\",\"link\":\"/guide/components/toggle-switch/\"},{\"text\":\"Tag\",\"link\":\"/guide/components/tag/\"}]},{\"text\":\"Collections\",\"collapsed\":true,\"items\":[{\"text\":\"FlipView\",\"link\":\"/guide/components/flip-view/\"},{\"text\":\"ListView\",\"link\":\"/guide/components/list-view/\"},{\"text\":\"TreeView\",\"link\":\"/guide/components/tree-view/\"}]},{\"text\":\"Date & Time\",\"collapsed\":true,\"items\":[{\"text\":\"CalendarDatePicker\",\"link\":\"/guide/components/calendar-date-picker/\"},{\"text\":\"CalendarView\",\"link\":\"/guide/components/calendar-view/\"},{\"text\":\"DatePicker\",\"link\":\"/guide/components/date-picker/\"},{\"text\":\"TimePicker\",\"link\":\"/guide/components/time-picker/\"}]},{\"text\":\"Dialogs & flyouts\",\"collapsed\":true,\"items\":[{\"text\":\"Callout\",\"link\":\"/guide/components/callout/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Layout\",\"collapsed\":true,\"items\":[{\"text\":\"Collapse\",\"link\":\"/guide/components/collapse/\"},{\"text\":\"Expander\",\"link\":\"/guide/components/expander/\"},{\"text\":\"Drawer\",\"link\":\"/guide/components/drawer/\"},{\"text\":\"Panel\",\"link\":\"/guide/components/panel/\"}]},{\"text\":\"Media\",\"collapsed\":true,\"items\":[{\"text\":\"Image\",\"link\":\"/guide/components/image/\"},{\"text\":\"Img\",\"link\":\"/guide/components/img/\"},{\"text\":\"ImgBox\",\"link\":\"/guide/components/img-box/\"},{\"text\":\"Persona\",\"link\":\"/guide/components/persona/\"}]},{\"text\":\"Menu & toolbars\",\"collapsed\":true,\"items\":[{\"text\":\"CommandBar\",\"link\":\"/guide/components/command-bar/\"},{\"text\":\"MenuFlyout\",\"link\":\"/guide/components/menu-flyout/\"},{\"text\":\"SwipeControl\",\"link\":\"/guide/components/swipe-control/\"}]},{\"text\":\"Navigation\",\"collapsed\":true,\"items\":[{\"text\":\"Breadcrumb\",\"link\":\"/guide/components/breadcrumb/\"},{\"text\":\"NavigationPanel\",\"link\":\"/guide/components/navigation-panel/\"},{\"text\":\"NavigationView\",\"link\":\"/guide/components/navigation-view/\"},{\"text\":\"Pivot\",\"link\":\"/guide/components/pivot/\"},{\"text\":\"Pagination\",\"link\":\"/guide/components/pagination/\"}]},{\"text\":\"Scrolling\",\"collapsed\":true,\"items\":[{\"text\":\"InfiniteScrollView\",\"link\":\"/guide/components/infinite-scroll-view/\"},{\"text\":\"ScrollStory\",\"link\":\"/guide/components/scroll-story/\"}]},{\"text\":\"Status & info\",\"collapsed\":true,\"items\":[{\"text\":\"Badge\",\"link\":\"/guide/components/badge/\"},{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"ProgressBar\",\"link\":\"/guide/components/progress-bar/\"},{\"text\":\"ProgressRing\",\"link\":\"/guide/components/progress-ring/\"}]},{\"text\":\"Styles\",\"collapsed\":true,\"items\":[{\"text\":\"AnimatedIcon\",\"link\":\"/guide/components/animated-icon/\"},{\"text\":\"IconElement\",\"link\":\"/guide/components/icon-element/\"},{\"text\":\"RevealContainer\",\"link\":\"/guide/components/reveal-container/\"},{\"text\":\"Shimmer\",\"link\":\"/guide/components/shimmer/\"}]},{\"text\":\"Text\",\"collapsed\":true,\"items\":[{\"text\":\"SearchBox\",\"link\":\"/guide/components/search-box/\"},{\"text\":\"TextBox\",\"link\":\"/guide/components/text-box/\"},{\"text\":\"TextField\",\"link\":\"/guide/components/text-field/\"},{\"text\":\"VerifyBox\",\"link\":\"/guide/components/verify-box/\"}]},{\"text\":\"Windowing\",\"collapsed\":true,\"items\":[{\"text\":\"WebWindow\",\"link\":\"/guide/components/web-window/\"}]},{\"text\":\"Global\",\"collapsed\":true,\"items\":[{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Advance\",\"collapsed\":true,\"items\":[{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git a/guide/components/progress-bar/emits.html b/guide/components/progress-bar/emits.html
index ccdc104..515425a 100644
--- a/guide/components/progress-bar/emits.html
+++ b/guide/components/progress-bar/emits.html
@@ -1,20 +1,24 @@
 <!DOCTYPE html>
-<html lang="en-US">
+<html lang="en-US" dir="ltr">
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>Emits | vfluent3</title>
+    <title>vfluent3</title>
     <meta name="description" content="A Vue3 component library for Fluent UI">
-    <link rel="stylesheet" href="/VFluent3/assets/style.0a1d87af.css">
-    <link rel="modulepreload" href="/VFluent3/assets/app.d60fa8c3.js">
-    <link rel="modulepreload" href="/VFluent3/assets/guide_components_progress-bar_emits.md.5b611e3b.lean.js">
+    <meta name="generator" content="VitePress v1.0.0-rc.45">
+    <link rel="preload stylesheet" href="/VFluent3/assets/style.BabQegKX.css" as="style">
     
-    <script>(()=>{const e=localStorage.getItem("vitepress-theme-appearance"),a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script type="module" src="/VFluent3/assets/app.CSutcJ2E.js"></script>
+    <link rel="preload" href="/VFluent3/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/framework.DvIFzl91.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/theme.CgqFBnN_.js">
+    <link rel="modulepreload" href="/VFluent3/assets/guide_components_progress-bar_emits.md.BcwXUpsF.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
   </head>
   <body>
-    <div id="app"><div class="Layout" data-v-058b7495><!--[--><!--]--><!--[--><span tabindex="-1" data-v-bea91388></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-bea91388> Skip to content </a><!--]--><!----><header class="VPNav" data-v-058b7495 data-v-2a0a2738><div class="VPNavBar has-sidebar" data-v-2a0a2738 data-v-45c9f423><div class="container" data-v-45c9f423><div class="VPNavBarTitle has-sidebar" data-v-45c9f423 data-v-011600ce><a class="title" href="/VFluent3/" data-v-011600ce><!----><!--[-->VFluent3<!--]--></a></div><div class="content" data-v-45c9f423><!----><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-45c9f423 data-v-4da4371d><span id="main-nav-aria-label" class="visually-hidden" data-v-4da4371d>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" data-v-4da4371d data-v-66f8d518 data-v-4d08dd3a><!--[-->Home<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" data-v-4da4371d data-v-66f8d518 data-v-4d08dd3a><!--[-->Guide<!--]--><!----></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-45c9f423 data-v-bf1c94ca><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" data-v-bf1c94ca data-v-d0ee0df2 data-v-55b931a0><span class="check" data-v-55b931a0><span class="icon" data-v-55b931a0><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-d0ee0df2><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-d0ee0df2><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-45c9f423 data-v-7cece6ac data-v-37af1650><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-37af1650><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-37af1650><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-37af1650><div class="VPMenu" data-v-37af1650 data-v-17dc081b><!----><!--[--><!--[--><!----><div class="group" data-v-7cece6ac><div class="item appearance" data-v-7cece6ac><p class="label" data-v-7cece6ac>Appearance</p><div class="appearance-action" data-v-7cece6ac><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" data-v-7cece6ac data-v-d0ee0df2 data-v-55b931a0><span class="check" data-v-55b931a0><span class="icon" data-v-55b931a0><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-d0ee0df2><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-d0ee0df2><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-45c9f423 data-v-5484e669><span class="container" data-v-5484e669><span class="top" data-v-5484e669></span><span class="middle" data-v-5484e669></span><span class="bottom" data-v-5484e669></span></span></button></div></div></div><!----></header><div class="VPLocalNav" data-v-058b7495 data-v-f623cd72><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-f623cd72><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-f623cd72><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-f623cd72>Menu</span></button><a class="top-link" href="#" data-v-f623cd72> Return to top </a></div><aside class="VPSidebar" data-v-058b7495 data-v-3b8ec0c7><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-3b8ec0c7><span class="visually-hidden" id="sidebar-aria-label" data-v-3b8ec0c7> Sidebar Navigation </span><!--[--><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Basic</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/button/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Button</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/check-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>CheckBox</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/radio/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Radio</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/progress-bar/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ProgressBar</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/progress-ring/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ProgressRing</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/toggle-switch/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ToggleSwitch</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/img/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Img</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/text-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>TextBox</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/combo-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ComboBox</span><!--]--><!----></a><!--]--></div></section></div><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Global</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/message-bar/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>MessageBar</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/info-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>InfoBox</span><!--]--><!----></a><!--]--></div></section></div><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Advance</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/color-picker/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ColorPicker</span><!--]--><!----></a><!--]--></div></section></div><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-058b7495 data-v-564173e9><div class="VPDoc has-sidebar" data-v-564173e9 data-v-32b7ddf4><div class="container" data-v-32b7ddf4><div class="aside" data-v-32b7ddf4><div class="aside-curtain" data-v-32b7ddf4></div><div class="aside-container" data-v-32b7ddf4><div class="aside-content" data-v-32b7ddf4><div class="VPDocAside" data-v-32b7ddf4 data-v-35c1bae1><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline has-outline" data-v-35c1bae1 data-v-123cce62><div class="content" data-v-123cce62><div class="outline-marker" data-v-123cce62></div><div class="outline-title" data-v-123cce62>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-123cce62><span class="visually-hidden" id="doc-outline-aria-label" data-v-123cce62> Table of Contents for current page </span><ul class="root" data-v-123cce62><!--[--><li style="" data-v-123cce62><a class="outline-link" href="#emits" data-v-123cce62>Emits</a><!----></li><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-35c1bae1></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-32b7ddf4><div class="content-container" data-v-32b7ddf4><!--[--><!--]--><main class="main" data-v-32b7ddf4><div style="position:relative;" class="vp-doc _VFluent3_guide_components_progress-bar_emits" data-v-32b7ddf4><div><h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">change</td><td style="text-align:center;">val[number]</td><td style="text-align:center;">onchange</td></tr><tr><td style="text-align:center;">loaded</td><td style="text-align:center;">val[number]</td><td style="text-align:center;">onloaded</td></tr><tr><td style="text-align:center;">update:model-value</td><td style="text-align:center;">val[number]</td><td style="text-align:center;">v-model</td></tr></tbody></table></div></div></main><footer class="VPDocFooter" data-v-32b7ddf4 data-v-cfaa3a6c><div class="edit-info" data-v-cfaa3a6c><!----><!----></div><div class="prev-next" data-v-cfaa3a6c><div class="pager" data-v-cfaa3a6c><!----></div><div class="pager" data-v-cfaa3a6c><a class="pager-link next" href="/VFluent3/guide/components/button/" data-v-cfaa3a6c><span class="desc" data-v-cfaa3a6c>Next page</span><span class="title" data-v-cfaa3a6c>Button</span></a></div></div></footer><!--[--><!--]--></div></div></div></div></div><footer class="VPFooter has-sidebar" data-v-058b7495 data-v-a6c8dde4><div class="container" data-v-a6c8dde4><p class="message" data-v-a6c8dde4>MIT Licensed</p><p class="copyright" data-v-a6c8dde4>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
-    <script>__VP_HASH_MAP__ = JSON.parse("{\"guide_components_button_emits.md\":\"d682bf18\",\"guide_components_button_index.md\":\"23a8eb54\",\"guide_components_button_properties.md\":\"cd4004b6\",\"guide_components_check-box_emits.md\":\"31609794\",\"guide_components_check-box_index.md\":\"32046814\",\"guide_components_check-box_properties.md\":\"8f33ac0c\",\"guide_components_color-picker_emits.md\":\"00983cd0\",\"guide_components_color-picker_index.md\":\"b2d62612\",\"guide_components_color-picker_properties.md\":\"5466ba72\",\"guide_components_combo-box_emits.md\":\"d5ffda50\",\"guide_components_combo-box_index.md\":\"1c4364f5\",\"guide_components_combo-box_properties.md\":\"2e1d6060\",\"guide_components_img_emits.md\":\"6237adb4\",\"guide_components_img_index.md\":\"fa51a3a1\",\"guide_components_img_properties.md\":\"8d321b5e\",\"guide_components_info-box_emits.md\":\"c2e71eec\",\"guide_components_info-box_index.md\":\"06175fed\",\"guide_components_info-box_properties.md\":\"314dbb00\",\"guide_components_message-bar_emits.md\":\"e89a5a22\",\"guide_components_message-bar_index.md\":\"3f0b01d6\",\"guide_components_message-bar_properties.md\":\"ee3838d9\",\"guide_components_progress-bar_emits.md\":\"5b611e3b\",\"guide_components_progress-bar_index.md\":\"689c3241\",\"guide_components_progress-bar_properties.md\":\"39af7fb2\",\"guide_components_progress-ring_emits.md\":\"67e4644e\",\"guide_components_progress-ring_index.md\":\"9a33542b\",\"guide_components_progress-ring_properties.md\":\"c897c4bb\",\"guide_components_radio_emits.md\":\"28506857\",\"guide_components_radio_index.md\":\"e5a479ce\",\"guide_components_radio_properties.md\":\"f8e55d2f\",\"guide_components_text-box_emits.md\":\"0bf89ef8\",\"guide_components_text-box_index.md\":\"7ccfc637\",\"guide_components_text-box_properties.md\":\"aab3a89e\",\"guide_components_toggle-switch_emits.md\":\"5146435f\",\"guide_components_toggle-switch_index.md\":\"8be48081\",\"guide_components_toggle-switch_properties.md\":\"54984c3a\",\"guide_index.md\":\"e3dca1d7\",\"index.md\":\"1e9773d5\"}")</script>
-    <script type="module" async src="/VFluent3/assets/app.d60fa8c3.js"></script>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-19c990f1><div class="wrapper" data-v-19c990f1><div class="container" data-v-19c990f1><div class="title" data-v-19c990f1><div class="VPNavBarTitle has-sidebar" data-v-19c990f1 data-v-ab179fa1><a class="title" href="/VFluent3/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>VFluent3</span><!--[--><!--]--></a></div></div><div class="content" data-v-19c990f1><div class="content-body" data-v-19c990f1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-19c990f1><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-19c990f1 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Guide</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-19c990f1 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-19c990f1 data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-19c990f1 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-19c990f1><div class="divider-line" data-v-19c990f1></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-d2ecc192><button data-v-d2ecc192>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-575e6a36><div class="curtain" data-v-575e6a36></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-575e6a36><span class="visually-hidden" id="sidebar-aria-label" data-v-575e6a36> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Basic input</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/button/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/check-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CheckBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/combobox/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Combobox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/details-list/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DetailsList</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drop-down/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DropDown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio-group/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RadioGroup</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/rating-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RatingControl</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/slider/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/toggle-switch/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ToggleSwitch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tag/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Tag</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Collections</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/flip-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>FlipView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/list-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ListView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tree-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TreeView</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Date & Time</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarDatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/time-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TimePicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Dialogs & flyouts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/callout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Callout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Layout</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/collapse/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Collapse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/expander/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Expander</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drawer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Panel</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Media</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/image/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Img</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ImgBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/persona/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Persona</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Menu & toolbars</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/command-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CommandBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/menu-flyout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MenuFlyout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/swipe-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SwipeControl</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Navigation</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/breadcrumb/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationPanel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pivot/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pivot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pagination/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pagination</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Scrolling</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/infinite-scroll-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfiniteScrollView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/scroll-story/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ScrollStory</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Status & info</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/badge/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-ring/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressRing</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Styles</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/animated-icon/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>AnimatedIcon</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/icon-element/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>IconElement</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/reveal-container/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RevealContainer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/shimmer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Shimmer</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Text</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/search-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SearchBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-field/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextField</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/verify-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>VerifyBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Windowing</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/web-window/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>WebWindow</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Global</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Advance</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-935f8a84><div class="content" data-v-935f8a84><div class="outline-marker" data-v-935f8a84></div><div class="outline-title" role="heading" aria-level="2" data-v-935f8a84>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-935f8a84><span class="visually-hidden" id="doc-outline-aria-label" data-v-935f8a84> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-935f8a84 data-v-b933a997><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _VFluent3_guide_components_progress-bar_emits" data-v-39a288b8><div><h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-label="Permalink to &quot;Emits&quot;">​</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">change</td><td style="text-align:center;">val[number]</td><td style="text-align:center;">onchange</td></tr><tr><td style="text-align:center;">loaded</td><td style="text-align:center;">val[number]</td><td style="text-align:center;">onloaded</td></tr><tr><td style="text-align:center;">update:model-value</td><td style="text-align:center;">val[number]</td><td style="text-align:center;">v-model</td></tr></tbody></table></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-09de1c0f><!--[--><!--]--><!----><nav class="prev-next" data-v-09de1c0f><div class="pager" data-v-09de1c0f><!----></div><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link next" href="/VFluent3/guide/components/button/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Next page</span><span class="title" data-v-09de1c0f>Button</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>MIT Licensed</p><p class="copyright" data-v-e315a0ad>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_calendar-date-picker_properties.md\":\"DXRjmMG8\",\"guide_components_image_properties.md\":\"DGanRzCb\",\"guide_components_img-box_index.md\":\"DYtggkf_\",\"guide_components_img_emits.md\":\"BlE7jvZQ\",\"guide_components_img_index.md\":\"Bm9FiuU4\",\"guide_components_icon-element_properties.md\":\"8Oakruwc\",\"guide_components_img_properties.md\":\"B42YSocI\",\"guide_components_drawer_index.md\":\"D_vpnCpE\",\"guide_components_verify-box_emits.md\":\"DT17Iazx\",\"guide_components_calendar-date-picker_index.md\":\"BdHjrurh\",\"guide_components_rating-control_index.md\":\"Q9l5Lfrr\",\"guide_components_rating-control_properties.md\":\"DKprnl0i\",\"guide_components_calendar-view_index.md\":\"zdoRYVx1\",\"guide_components_animated-icon_index.md\":\"yZDMzCFe\",\"guide_components_calendar-date-picker_emits.md\":\"D5OkfR8j\",\"guide_components_badge_index.md\":\"Bb4crrJn\",\"guide_components_image_index.md\":\"B7X6cWAZ\",\"guide_components_slider_index.md\":\"C7zZ2d-W\",\"guide_components_radio-group_index.md\":\"CVfh3h5H\",\"guide_components_swipe-control_index.md\":\"DwrDVPc1\",\"guide_components_color-picker_emits.md\":\"BHDXVtBQ\",\"guide_components_radio_index.md\":\"90as5QGp\",\"guide_components_pagination_properties.md\":\"JUAPvcTL\",\"guide_components_persona_properties.md\":\"DUTPhPMp\",\"guide_components_combo-box_emits.md\":\"Dh5R-qEv\",\"guide_components_pivot_emits.md\":\"BTJPgNpy\",\"guide_components_pagination_index.md\":\"CnW2zAht\",\"guide_components_flip-view_properties.md\":\"BqZ4hhgU\",\"guide_components_icon-element_emits.md\":\"D5TXFdTZ\",\"guide_components_flip-view_index.md\":\"DefnDOv6\",\"guide_components_navigation-panel_index.md\":\"6mO__sSK\",\"guide_components_rating-control_emits.md\":\"blvomSeC\",\"guide_components_icon-element_index.md\":\"DQ8K7JNn\",\"guide_components_navigation-view_index.md\":\"4AQRiz1k\",\"guide_components_toggle-switch_emits.md\":\"CLGzrNut\",\"guide_components_toggle-switch_index.md\":\"61en_q9-\",\"guide_components_scroll-story_index.md\":\"Vpgb1HSV\",\"guide_components_reveal-container_index.md\":\"Cut2r4tV\",\"guide_components_search-box_emits.md\":\"-d9sWNNt\",\"guide_components_search-box_properties.md\":\"DEKFfPFw\",\"guide_components_shimmer_emits.md\":\"CTMInlI3\",\"guide_components_tag_index.md\":\"BhhxkcHn\",\"guide_components_search-box_index.md\":\"DgkrY0oY\",\"guide_components_shimmer_index.md\":\"iZlHuTxw\",\"guide_components_shimmer_properties.md\":\"CdkU1o6H\",\"guide_components_tree-view_index.md\":\"CUrwan4q\",\"guide_components_text-field_index.md\":\"CXSimJtj\",\"guide_components_text-box_index.md\":\"C5moAPfB\",\"guide_components_progress-ring_properties.md\":\"Dc08Uiff\",\"guide_components_toggle-switch_properties.md\":\"tFppK_IS\",\"guide_components_radio-group_emits.md\":\"cEDzKVnN\",\"guide_components_collapse_index.md\":\"N9Iu5-2v\",\"guide_components_image_emits.md\":\"lmlz2xJd\",\"guide_components_callout_index.md\":\"D9RU33w6\",\"guide_components_pivot_index.md\":\"B_vwQL-5\",\"guide_components_command-bar_index.md\":\"Cp4_rrGB\",\"guide_components_pagination_emits.md\":\"Dng86A22\",\"guide_components_button_index.md\":\"7sqT2MQP\",\"guide_components_info-box_properties.md\":\"BI7Nvk-E\",\"guide_components_drop-down_emits.md\":\"BE95TdKW\",\"guide_components_expander_index.md\":\"BKgcUJzQ\",\"guide_components_message-bar_index.md\":\"AEtAWlF8\",\"guide_components_menu-flyout_index.md\":\"Csa7irPj\",\"guide_components_panel_index.md\":\"CsTu0bXo\",\"guide_components_panel_properties.md\":\"BaxoCYKq\",\"guide_components_progress-bar_emits.md\":\"BcwXUpsF\",\"guide_components_progress-bar_properties.md\":\"TxiS9ZMA\",\"guide_components_progress-ring_emits.md\":\"D2Y6hIZ9\",\"guide_components_color-picker_index.md\":\"DCc4ixcU\",\"guide_components_progress-ring_index.md\":\"CPb-ZEPE\",\"guide_components_color-picker_properties.md\":\"wcXK29Vl\",\"guide_components_time-picker_index.md\":\"CQJdRRaG\",\"guide_components_drop-down_properties.md\":\"Bwlkpr1q\",\"guide_components_infinite-scroll-view_index.md\":\"yAuD807x\",\"guide_components_check-box_index.md\":\"FYgdu4oq\",\"guide_components_progress-bar_index.md\":\"D8vHQw5V\",\"guide_components_combo-box_index.md\":\"DTyu3eNd\",\"guide_components_info-box_emits.md\":\"DlEwpkkq\",\"guide_components_drop-down_index.md\":\"BZzJZQWq\",\"guide_components_list-view_index.md\":\"BoYvMzb0\",\"guide_components_verify-box_properties.md\":\"CW6W8fFf\",\"guide_components_verify-box_index.md\":\"DwSB40wR\",\"guide_index.md\":\"Bndlt3sL\",\"guide_components_web-window_index.md\":\"Bxc8vEeI\",\"index.md\":\"MTRqI42u\",\"guide_components_combo-box_properties.md\":\"AWfHzV6x\",\"guide_components_combobox_emits.md\":\"CGB6WLt8\",\"guide_components_combobox_properties.md\":\"Bja0hMou\",\"guide_components_details-list_index.md\":\"CcgOCIyt\",\"guide_components_info-box_index.md\":\"vXh-_DsL\",\"guide_components_combobox_index.md\":\"CsPkY6YB\",\"guide_components_date-picker_index.md\":\"12vmUIup\",\"guide_components_flip-view_emits.md\":\"DCheHjDj\",\"guide_components_panel_emits.md\":\"DG0REDq8\",\"guide_components_breadcrumb_index.md\":\"DyDm7PeP\",\"guide_components_radio-group_properties.md\":\"BnPxoKsQ\",\"guide_components_persona_emits.md\":\"CnsDPKRU\",\"guide_components_pivot_properties.md\":\"BmoLpPi1\",\"guide_components_persona_index.md\":\"DT00jby4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vfluent3\",\"description\":\"A Vue3 component library for Fluent UI\",\"base\":\"/VFluent3/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"VFluent3\",\"footer\":{\"message\":\"MIT Licensed\",\"copyright\":\"Copyright © Creator SN - 2022\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/\"}],\"sidebar\":[{\"text\":\"Basic input\",\"collapsed\":true,\"items\":[{\"text\":\"Button\",\"link\":\"/guide/components/button/\"},{\"text\":\"CheckBox\",\"link\":\"/guide/components/check-box/\"},{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"},{\"text\":\"Combobox\",\"link\":\"/guide/components/combobox/\"},{\"text\":\"DetailsList\",\"link\":\"/guide/components/details-list/\"},{\"text\":\"DropDown\",\"link\":\"/guide/components/drop-down/\"},{\"text\":\"Radio\",\"link\":\"/guide/components/radio/\"},{\"text\":\"RadioGroup\",\"link\":\"/guide/components/radio-group/\"},{\"text\":\"RatingControl\",\"link\":\"/guide/components/rating-control/\"},{\"text\":\"Slider\",\"link\":\"/guide/components/slider/\"},{\"text\":\"ToggleSwitch\",\"link\":\"/guide/components/toggle-switch/\"},{\"text\":\"Tag\",\"link\":\"/guide/components/tag/\"}]},{\"text\":\"Collections\",\"collapsed\":true,\"items\":[{\"text\":\"FlipView\",\"link\":\"/guide/components/flip-view/\"},{\"text\":\"ListView\",\"link\":\"/guide/components/list-view/\"},{\"text\":\"TreeView\",\"link\":\"/guide/components/tree-view/\"}]},{\"text\":\"Date & Time\",\"collapsed\":true,\"items\":[{\"text\":\"CalendarDatePicker\",\"link\":\"/guide/components/calendar-date-picker/\"},{\"text\":\"CalendarView\",\"link\":\"/guide/components/calendar-view/\"},{\"text\":\"DatePicker\",\"link\":\"/guide/components/date-picker/\"},{\"text\":\"TimePicker\",\"link\":\"/guide/components/time-picker/\"}]},{\"text\":\"Dialogs & flyouts\",\"collapsed\":true,\"items\":[{\"text\":\"Callout\",\"link\":\"/guide/components/callout/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Layout\",\"collapsed\":true,\"items\":[{\"text\":\"Collapse\",\"link\":\"/guide/components/collapse/\"},{\"text\":\"Expander\",\"link\":\"/guide/components/expander/\"},{\"text\":\"Drawer\",\"link\":\"/guide/components/drawer/\"},{\"text\":\"Panel\",\"link\":\"/guide/components/panel/\"}]},{\"text\":\"Media\",\"collapsed\":true,\"items\":[{\"text\":\"Image\",\"link\":\"/guide/components/image/\"},{\"text\":\"Img\",\"link\":\"/guide/components/img/\"},{\"text\":\"ImgBox\",\"link\":\"/guide/components/img-box/\"},{\"text\":\"Persona\",\"link\":\"/guide/components/persona/\"}]},{\"text\":\"Menu & toolbars\",\"collapsed\":true,\"items\":[{\"text\":\"CommandBar\",\"link\":\"/guide/components/command-bar/\"},{\"text\":\"MenuFlyout\",\"link\":\"/guide/components/menu-flyout/\"},{\"text\":\"SwipeControl\",\"link\":\"/guide/components/swipe-control/\"}]},{\"text\":\"Navigation\",\"collapsed\":true,\"items\":[{\"text\":\"Breadcrumb\",\"link\":\"/guide/components/breadcrumb/\"},{\"text\":\"NavigationPanel\",\"link\":\"/guide/components/navigation-panel/\"},{\"text\":\"NavigationView\",\"link\":\"/guide/components/navigation-view/\"},{\"text\":\"Pivot\",\"link\":\"/guide/components/pivot/\"},{\"text\":\"Pagination\",\"link\":\"/guide/components/pagination/\"}]},{\"text\":\"Scrolling\",\"collapsed\":true,\"items\":[{\"text\":\"InfiniteScrollView\",\"link\":\"/guide/components/infinite-scroll-view/\"},{\"text\":\"ScrollStory\",\"link\":\"/guide/components/scroll-story/\"}]},{\"text\":\"Status & info\",\"collapsed\":true,\"items\":[{\"text\":\"Badge\",\"link\":\"/guide/components/badge/\"},{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"ProgressBar\",\"link\":\"/guide/components/progress-bar/\"},{\"text\":\"ProgressRing\",\"link\":\"/guide/components/progress-ring/\"}]},{\"text\":\"Styles\",\"collapsed\":true,\"items\":[{\"text\":\"AnimatedIcon\",\"link\":\"/guide/components/animated-icon/\"},{\"text\":\"IconElement\",\"link\":\"/guide/components/icon-element/\"},{\"text\":\"RevealContainer\",\"link\":\"/guide/components/reveal-container/\"},{\"text\":\"Shimmer\",\"link\":\"/guide/components/shimmer/\"}]},{\"text\":\"Text\",\"collapsed\":true,\"items\":[{\"text\":\"SearchBox\",\"link\":\"/guide/components/search-box/\"},{\"text\":\"TextBox\",\"link\":\"/guide/components/text-box/\"},{\"text\":\"TextField\",\"link\":\"/guide/components/text-field/\"},{\"text\":\"VerifyBox\",\"link\":\"/guide/components/verify-box/\"}]},{\"text\":\"Windowing\",\"collapsed\":true,\"items\":[{\"text\":\"WebWindow\",\"link\":\"/guide/components/web-window/\"}]},{\"text\":\"Global\",\"collapsed\":true,\"items\":[{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Advance\",\"collapsed\":true,\"items\":[{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
     
   </body>
 </html>
\ No newline at end of file
diff --git a/guide/components/progress-bar/index.html b/guide/components/progress-bar/index.html
index 1859f08..6a40fc4 100644
--- a/guide/components/progress-bar/index.html
+++ b/guide/components/progress-bar/index.html
@@ -1,56 +1,31 @@
 <!DOCTYPE html>
-<html lang="en-US">
+<html lang="en-US" dir="ltr">
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1">
     <title>ProgressBar | vfluent3</title>
     <meta name="description" content="A Vue3 component library for Fluent UI">
-    <link rel="stylesheet" href="/VFluent3/assets/style.0a1d87af.css">
-    <link rel="modulepreload" href="/VFluent3/assets/chunks/index.9dba9c16.js">
-    <link rel="modulepreload" href="/VFluent3/assets/app.d60fa8c3.js">
-    <link rel="modulepreload" href="/VFluent3/assets/guide_components_progress-bar_index.md.689c3241.lean.js">
+    <meta name="generator" content="VitePress v1.0.0-rc.45">
+    <link rel="preload stylesheet" href="/VFluent3/assets/style.BabQegKX.css" as="style">
     
-    <script>(()=>{const e=localStorage.getItem("vitepress-theme-appearance"),a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script type="module" src="/VFluent3/assets/app.CSutcJ2E.js"></script>
+    <link rel="preload" href="/VFluent3/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/framework.DvIFzl91.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/theme.CgqFBnN_.js">
+    <link rel="modulepreload" href="/VFluent3/assets/guide_components_progress-bar_index.md.D8vHQw5V.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
   </head>
   <body>
-    <div id="app"><div class="Layout" data-v-058b7495><!--[--><!--]--><!--[--><span tabindex="-1" data-v-bea91388></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-bea91388> Skip to content </a><!--]--><!----><header class="VPNav" data-v-058b7495 data-v-2a0a2738><div class="VPNavBar has-sidebar" data-v-2a0a2738 data-v-45c9f423><div class="container" data-v-45c9f423><div class="VPNavBarTitle has-sidebar" data-v-45c9f423 data-v-011600ce><a class="title" href="/VFluent3/" data-v-011600ce><!----><!--[-->VFluent3<!--]--></a></div><div class="content" data-v-45c9f423><!----><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-45c9f423 data-v-4da4371d><span id="main-nav-aria-label" class="visually-hidden" data-v-4da4371d>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" data-v-4da4371d data-v-66f8d518 data-v-4d08dd3a><!--[-->Home<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" data-v-4da4371d data-v-66f8d518 data-v-4d08dd3a><!--[-->Guide<!--]--><!----></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-45c9f423 data-v-bf1c94ca><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" data-v-bf1c94ca data-v-d0ee0df2 data-v-55b931a0><span class="check" data-v-55b931a0><span class="icon" data-v-55b931a0><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-d0ee0df2><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-d0ee0df2><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-45c9f423 data-v-7cece6ac data-v-37af1650><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-37af1650><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-37af1650><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-37af1650><div class="VPMenu" data-v-37af1650 data-v-17dc081b><!----><!--[--><!--[--><!----><div class="group" data-v-7cece6ac><div class="item appearance" data-v-7cece6ac><p class="label" data-v-7cece6ac>Appearance</p><div class="appearance-action" data-v-7cece6ac><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" data-v-7cece6ac data-v-d0ee0df2 data-v-55b931a0><span class="check" data-v-55b931a0><span class="icon" data-v-55b931a0><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-d0ee0df2><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-d0ee0df2><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-45c9f423 data-v-5484e669><span class="container" data-v-5484e669><span class="top" data-v-5484e669></span><span class="middle" data-v-5484e669></span><span class="bottom" data-v-5484e669></span></span></button></div></div></div><!----></header><div class="VPLocalNav" data-v-058b7495 data-v-f623cd72><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-f623cd72><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-f623cd72><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-f623cd72>Menu</span></button><a class="top-link" href="#" data-v-f623cd72> Return to top </a></div><aside class="VPSidebar" data-v-058b7495 data-v-3b8ec0c7><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-3b8ec0c7><span class="visually-hidden" id="sidebar-aria-label" data-v-3b8ec0c7> Sidebar Navigation </span><!--[--><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Basic</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/button/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Button</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/check-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>CheckBox</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/radio/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Radio</span><!--]--><!----></a><a class="VPLink link active" href="/VFluent3/guide/components/progress-bar/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ProgressBar</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/progress-ring/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ProgressRing</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/toggle-switch/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ToggleSwitch</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/img/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Img</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/text-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>TextBox</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/combo-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ComboBox</span><!--]--><!----></a><!--]--></div></section></div><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Global</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/message-bar/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>MessageBar</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/info-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>InfoBox</span><!--]--><!----></a><!--]--></div></section></div><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Advance</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/color-picker/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ColorPicker</span><!--]--><!----></a><!--]--></div></section></div><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-058b7495 data-v-564173e9><div class="VPDoc has-sidebar" data-v-564173e9 data-v-32b7ddf4><div class="container" data-v-32b7ddf4><div class="aside" data-v-32b7ddf4><div class="aside-curtain" data-v-32b7ddf4></div><div class="aside-container" data-v-32b7ddf4><div class="aside-content" data-v-32b7ddf4><div class="VPDocAside" data-v-32b7ddf4 data-v-35c1bae1><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline has-outline" data-v-35c1bae1 data-v-123cce62><div class="content" data-v-123cce62><div class="outline-marker" data-v-123cce62></div><div class="outline-title" data-v-123cce62>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-123cce62><span class="visually-hidden" id="doc-outline-aria-label" data-v-123cce62> Table of Contents for current page </span><ul class="root" data-v-123cce62><!--[--><li style="" data-v-123cce62><a class="outline-link" href="#quick-start" data-v-123cce62>Quick Start</a><!----></li><li style="" data-v-123cce62><a class="outline-link" href="#properties" data-v-123cce62>Properties</a><!----></li><li style="" data-v-123cce62><a class="outline-link" href="#emits" data-v-123cce62>Emits</a><!----></li><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-35c1bae1></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-32b7ddf4><div class="content-container" data-v-32b7ddf4><!--[--><!--]--><main class="main" data-v-32b7ddf4><div style="position:relative;" class="vp-doc _VFluent3_guide_components_progress-bar_index" data-v-32b7ddf4><div><h1 id="progressbar" tabindex="-1">ProgressBar <a class="header-anchor" href="#progressbar" aria-hidden="true">#</a></h1><h2 id="quick-start" tabindex="-1">Quick Start <a class="header-anchor" href="#quick-start" aria-hidden="true">#</a></h2><p>STATE: running</p><hr><div class="fv-radio light active"><label class="label"><!----><input checked type="radio" class="radio" value="running" name="state" checked><div class="icon" style="border-width:1.5px;"><div style="" class="dot"></div></div><span class="text" style=""><!--[-->Running<!--]--></span></label></div><div class="fv-radio light"><label class="label"><!----><input type="radio" class="radio" value="pause" name="state"><div class="icon" style="border-width:1.5px;"><div style="display:none;" class="dot"></div></div><span class="text" style=""><!--[-->Pause<!--]--></span></label></div><div class="fv-radio light"><label class="label"><!----><input type="radio" class="radio" value="error" name="state"><div class="icon" style="border-width:1.5px;"><div style="display:none;" class="dot"></div></div><span class="text" style=""><!--[-->Error<!--]--></span></label></div><h3 id="default" tabindex="-1">Default <a class="header-anchor" href="#default" aria-hidden="true">#</a></h3><hr><div class="fv-progress-bar light" style="--fv-progress-value:-30%;"><label class="label"><progress class="progress" value="70" max="100"></progress><div class="container determinate running"><div class="bg"><div class="bg-bar"></div></div><div class="bar"></div></div></label></div> 70% <div class="language-vue-html"><span class="copy"></span><div class="highlight-lines"><br><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><br><br><br><br></div><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-progress-bar</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">v-model</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">change</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">onChange</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">loaded</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">onLoaded</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">max</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#F78C6C;">100</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">pause</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">state</span><span style="color:#89DDFF;">===</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">pause</span><span style="color:#89DDFF;">&#39;&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">error</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">state</span><span style="color:#89DDFF;">===</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">error</span><span style="color:#89DDFF;">&#39;&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    /&gt;</span><span style="color:#A6ACCD;"> </span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><h3 id="indeterminate" tabindex="-1">Indeterminate <a class="header-anchor" href="#indeterminate" aria-hidden="true">#</a></h3><hr><div class="fv-progress-bar light" style="--fv-progress-value:-100%;"><label class="label"><progress class="progress" value="0" max="100"></progress><div class="container indeterminate running"><div class="bg"><div class="bg-bar"></div></div><div class="bar"></div></div></label></div><div class="language-vue-html"><span class="copy"></span><div class="highlight-lines"><br><div class="highlighted"> </div><br><br><br><br><br></div><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-progress-bar</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">indeterminate</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">pause</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">state</span><span style="color:#89DDFF;">===</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">pause</span><span style="color:#89DDFF;">&#39;&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">error</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">state</span><span style="color:#89DDFF;">===</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">error</span><span style="color:#89DDFF;">&#39;&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">    /&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h3 id="custom" tabindex="-1">Custom <a class="header-anchor" href="#custom" aria-hidden="true">#</a></h3><hr><ol><li>indeterminate</li></ol><div class="fv-progress-bar light" style="--fv-progress-value:-100%;--fv-progress-bar-normal-color:rgba(0, 204, 153, 1);--fv-progress-bar-warning-color:rgba(229, 0, 249, 1);--fv-progress-bar-error-color:rgba(249, 201, 0, 1);"><label class="label"><progress class="progress" value="0" max="100"></progress><div class="container indeterminate running"><div class="bg"><div class="bg-bar"></div></div><div class="bar"></div></div></label></div><div class="language-vue-html"><span class="copy"></span><div class="highlight-lines"><br><br><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><br><br><br><br><br></div><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-progress-bar</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">indeterminate</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">pause-foreground</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">rgba(229, 0, 249, 1)</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">error-foreground</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">rgba(249, 201, 0, 1)</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">foreground</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">rgba(0, 204, 153, 1)</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">pause</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">state</span><span style="color:#89DDFF;">===</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">pause</span><span style="color:#89DDFF;">&#39;&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">error</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">state</span><span style="color:#89DDFF;">===</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">error</span><span style="color:#89DDFF;">&#39;&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">    /&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><ol start="2"><li>determinate</li></ol><div class="fv-progress-bar light" style="--fv-progress-value:-30%;--fv-progress-bar-normal-color:rgba(0, 204, 153, 1);--fv-progress-bar-warning-color:rgba(229, 0, 249, 1);--fv-progress-bar-error-color:rgba(249, 201, 0, 1);--fv-progress-bgcolor:rgba(0,0,0,1);"><label class="label"><progress class="progress" value="70" max="100"></progress><div class="container determinate running"><div class="bg"><div class="bg-bar"></div></div><div class="bar"></div></div></label></div> 70% <div class="language-vue-html"><span class="copy"></span><div class="highlight-lines"><br><br><br><br><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><br><br><br><br></div><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-progress-bar</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">v-model</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">max</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#F78C6C;">100</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">pause-foreground</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">rgba(229, 0, 249, 1)</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">error-foreground</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">rgba(249, 201, 0, 1)</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">foreground</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">rgba(0, 204, 153, 1)</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">background</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">rgba(0,0,0,1)</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">pause</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">state</span><span style="color:#89DDFF;">===</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">pause</span><span style="color:#89DDFF;">&#39;&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">error</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">state</span><span style="color:#89DDFF;">===</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">error</span><span style="color:#89DDFF;">&#39;&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    /&gt;</span><span style="color:#A6ACCD;"> </span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">background</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">background color</td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">disabled</td></tr><tr><td style="text-align:center;">error</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">error state</td></tr><tr><td style="text-align:center;">error-foreground</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">error foreground color</td></tr><tr><td style="text-align:center;">foreground</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">foreground color</td></tr><tr><td style="text-align:center;">indeterminate</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">indeterminate status</td></tr><tr><td style="text-align:center;">lang</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">i18n</td></tr><tr><td style="text-align:center;">max</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">100</td><td style="text-align:center;">same as HTML progress element</td></tr><tr><td style="text-align:center;">model-value</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">0</td><td style="text-align:center;">v-model</td></tr><tr><td style="text-align:center;">pause</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">pause state</td></tr><tr><td style="text-align:center;">pause-foreground</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">pause foreground color</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">[&#39;light&#39;, &#39;dark&#39;, &#39;global&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&quot;global&quot;</td><td style="text-align:center;">theme</td></tr></tbody></table><h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">change</td><td style="text-align:center;">val[number]</td><td style="text-align:center;">onchange</td></tr><tr><td style="text-align:center;">loaded</td><td style="text-align:center;">val[number]</td><td style="text-align:center;">onloaded</td></tr><tr><td style="text-align:center;">update:model-value</td><td style="text-align:center;">val[number]</td><td style="text-align:center;">v-model</td></tr></tbody></table></div></div></main><footer class="VPDocFooter" data-v-32b7ddf4 data-v-cfaa3a6c><div class="edit-info" data-v-cfaa3a6c><!----><!----></div><div class="prev-next" data-v-cfaa3a6c><div class="pager" data-v-cfaa3a6c><a class="pager-link prev" href="/VFluent3/guide/components/radio/" data-v-cfaa3a6c><span class="desc" data-v-cfaa3a6c>Previous page</span><span class="title" data-v-cfaa3a6c>Radio</span></a></div><div class="has-prev pager" data-v-cfaa3a6c><a class="pager-link next" href="/VFluent3/guide/components/progress-ring/" data-v-cfaa3a6c><span class="desc" data-v-cfaa3a6c>Next page</span><span class="title" data-v-cfaa3a6c>ProgressRing</span></a></div></div></footer><!--[--><!--]--></div></div></div></div></div><footer class="VPFooter has-sidebar" data-v-058b7495 data-v-a6c8dde4><div class="container" data-v-a6c8dde4><p class="message" data-v-a6c8dde4>MIT Licensed</p><p class="copyright" data-v-a6c8dde4>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
-    <script>__VP_HASH_MAP__ = JSON.parse("{\"guide_components_button_emits.md\":\"d682bf18\",\"guide_components_button_index.md\":\"23a8eb54\",\"guide_components_button_properties.md\":\"cd4004b6\",\"guide_components_check-box_emits.md\":\"31609794\",\"guide_components_check-box_index.md\":\"32046814\",\"guide_components_check-box_properties.md\":\"8f33ac0c\",\"guide_components_color-picker_emits.md\":\"00983cd0\",\"guide_components_color-picker_index.md\":\"b2d62612\",\"guide_components_color-picker_properties.md\":\"5466ba72\",\"guide_components_combo-box_emits.md\":\"d5ffda50\",\"guide_components_combo-box_index.md\":\"1c4364f5\",\"guide_components_combo-box_properties.md\":\"2e1d6060\",\"guide_components_img_emits.md\":\"6237adb4\",\"guide_components_img_index.md\":\"fa51a3a1\",\"guide_components_img_properties.md\":\"8d321b5e\",\"guide_components_info-box_emits.md\":\"c2e71eec\",\"guide_components_info-box_index.md\":\"06175fed\",\"guide_components_info-box_properties.md\":\"314dbb00\",\"guide_components_message-bar_emits.md\":\"e89a5a22\",\"guide_components_message-bar_index.md\":\"3f0b01d6\",\"guide_components_message-bar_properties.md\":\"ee3838d9\",\"guide_components_progress-bar_emits.md\":\"5b611e3b\",\"guide_components_progress-bar_index.md\":\"689c3241\",\"guide_components_progress-bar_properties.md\":\"39af7fb2\",\"guide_components_progress-ring_emits.md\":\"67e4644e\",\"guide_components_progress-ring_index.md\":\"9a33542b\",\"guide_components_progress-ring_properties.md\":\"c897c4bb\",\"guide_components_radio_emits.md\":\"28506857\",\"guide_components_radio_index.md\":\"e5a479ce\",\"guide_components_radio_properties.md\":\"f8e55d2f\",\"guide_components_text-box_emits.md\":\"0bf89ef8\",\"guide_components_text-box_index.md\":\"7ccfc637\",\"guide_components_text-box_properties.md\":\"aab3a89e\",\"guide_components_toggle-switch_emits.md\":\"5146435f\",\"guide_components_toggle-switch_index.md\":\"8be48081\",\"guide_components_toggle-switch_properties.md\":\"54984c3a\",\"guide_index.md\":\"e3dca1d7\",\"index.md\":\"1e9773d5\"}")</script>
-    <script type="module" async src="/VFluent3/assets/app.d60fa8c3.js"></script>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-19c990f1><div class="wrapper" data-v-19c990f1><div class="container" data-v-19c990f1><div class="title" data-v-19c990f1><div class="VPNavBarTitle has-sidebar" data-v-19c990f1 data-v-ab179fa1><a class="title" href="/VFluent3/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>VFluent3</span><!--[--><!--]--></a></div></div><div class="content" data-v-19c990f1><div class="content-body" data-v-19c990f1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-19c990f1><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-19c990f1 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Guide</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-19c990f1 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-19c990f1 data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-19c990f1 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-19c990f1><div class="divider-line" data-v-19c990f1></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-d2ecc192><button data-v-d2ecc192>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-575e6a36><div class="curtain" data-v-575e6a36></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-575e6a36><span class="visually-hidden" id="sidebar-aria-label" data-v-575e6a36> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Basic input</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/button/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/check-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CheckBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/combobox/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Combobox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/details-list/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DetailsList</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drop-down/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DropDown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio-group/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RadioGroup</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/rating-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RatingControl</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/slider/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/toggle-switch/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ToggleSwitch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tag/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Tag</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Collections</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/flip-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>FlipView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/list-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ListView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tree-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TreeView</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Date & Time</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarDatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/time-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TimePicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Dialogs & flyouts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/callout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Callout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Layout</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/collapse/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Collapse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/expander/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Expander</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drawer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Panel</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Media</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/image/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Img</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ImgBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/persona/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Persona</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Menu & toolbars</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/command-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CommandBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/menu-flyout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MenuFlyout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/swipe-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SwipeControl</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Navigation</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/breadcrumb/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationPanel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pivot/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pivot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pagination/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pagination</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Scrolling</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/infinite-scroll-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfiniteScrollView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/scroll-story/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ScrollStory</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible has-active" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Status & info</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/badge/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-ring/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressRing</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Styles</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/animated-icon/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>AnimatedIcon</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/icon-element/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>IconElement</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/reveal-container/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RevealContainer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/shimmer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Shimmer</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Text</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/search-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SearchBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-field/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextField</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/verify-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>VerifyBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Windowing</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/web-window/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>WebWindow</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Global</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Advance</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-935f8a84><div class="content" data-v-935f8a84><div class="outline-marker" data-v-935f8a84></div><div class="outline-title" role="heading" aria-level="2" data-v-935f8a84>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-935f8a84><span class="visually-hidden" id="doc-outline-aria-label" data-v-935f8a84> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-935f8a84 data-v-b933a997><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _VFluent3_guide_components_progress-bar_" data-v-39a288b8><div><h3 id="progressbar-demo" tabindex="-1">ProgressBar-DEMO <a class="header-anchor" href="#progressbar-demo" aria-label="Permalink to &quot;ProgressBar-DEMO&quot;">​</a></h3><hr><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-ProgressBar</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-ProgressBar</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="default-progressbar" tabindex="-1">Default ProgressBar <a class="header-anchor" href="#default-progressbar" aria-label="Permalink to &quot;Default ProgressBar&quot;">​</a></h3><hr><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-ProgressBar</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">percent[</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-ProgressBar</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="indeterminate-progressbar" tabindex="-1">Indeterminate ProgressBar <a class="header-anchor" href="#indeterminate-progressbar" aria-label="Permalink to &quot;Indeterminate ProgressBar&quot;">​</a></h3><hr><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-ProgressBar</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> loading</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;true&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-ProgressBar</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="progressbar-disabled" tabindex="-1">ProgressBar Disabled <a class="header-anchor" href="#progressbar-disabled" aria-label="Permalink to &quot;ProgressBar Disabled&quot;">​</a></h3><hr><ol><li>Default</li></ol><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-ProgressBar</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">percent[</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> disabled</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-ProgressBar</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><ol start="2"><li>Indeterminate</li></ol><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-ProgressBar</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> loading</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;true&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> disabled</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-ProgressBar</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="progressbar-custom-style" tabindex="-1">ProgressBar Custom Style <a class="header-anchor" href="#progressbar-custom-style" aria-label="Permalink to &quot;ProgressBar Custom Style&quot;">​</a></h3><hr><ol><li>Custom Foreground</li></ol><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-ProgressBar</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">percent[</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> foreground</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rgba(0,204,153,1)&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-ProgressBar</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><ol start="2"><li>Custom Background</li></ol><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-ProgressBar</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">percent[</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">3</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rgba(0,204,153,0.6)&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-ProgressBar</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">value</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">0</td><td style="text-align:center;">Progressbar value</td></tr><tr><td style="text-align:center;">loading</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">Is progressbar indeterminate</td></tr><tr><td style="text-align:center;">foreground</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">background</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;"></td></tr></tbody></table><h3 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to &quot;Events&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">事件名(Name)</th><th style="text-align:center;">参数类型(args)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">progress-change</td><td style="text-align:center;">percent</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">progress-finished</td><td style="text-align:center;">percent</td><td style="text-align:center;"></td></tr></tbody></table></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-09de1c0f><!--[--><!--]--><!----><nav class="prev-next" data-v-09de1c0f><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link prev" href="/VFluent3/guide/components/message-bar/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Previous page</span><span class="title" data-v-09de1c0f>MessageBar</span><!--]--></a></div><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link next" href="/VFluent3/guide/components/progress-ring/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Next page</span><span class="title" data-v-09de1c0f>ProgressRing</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>MIT Licensed</p><p class="copyright" data-v-e315a0ad>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_calendar-date-picker_properties.md\":\"DXRjmMG8\",\"guide_components_image_properties.md\":\"DGanRzCb\",\"guide_components_img-box_index.md\":\"DYtggkf_\",\"guide_components_img_emits.md\":\"BlE7jvZQ\",\"guide_components_img_index.md\":\"Bm9FiuU4\",\"guide_components_icon-element_properties.md\":\"8Oakruwc\",\"guide_components_img_properties.md\":\"B42YSocI\",\"guide_components_drawer_index.md\":\"D_vpnCpE\",\"guide_components_verify-box_emits.md\":\"DT17Iazx\",\"guide_components_calendar-date-picker_index.md\":\"BdHjrurh\",\"guide_components_rating-control_index.md\":\"Q9l5Lfrr\",\"guide_components_rating-control_properties.md\":\"DKprnl0i\",\"guide_components_calendar-view_index.md\":\"zdoRYVx1\",\"guide_components_animated-icon_index.md\":\"yZDMzCFe\",\"guide_components_calendar-date-picker_emits.md\":\"D5OkfR8j\",\"guide_components_badge_index.md\":\"Bb4crrJn\",\"guide_components_image_index.md\":\"B7X6cWAZ\",\"guide_components_slider_index.md\":\"C7zZ2d-W\",\"guide_components_radio-group_index.md\":\"CVfh3h5H\",\"guide_components_swipe-control_index.md\":\"DwrDVPc1\",\"guide_components_color-picker_emits.md\":\"BHDXVtBQ\",\"guide_components_radio_index.md\":\"90as5QGp\",\"guide_components_pagination_properties.md\":\"JUAPvcTL\",\"guide_components_persona_properties.md\":\"DUTPhPMp\",\"guide_components_combo-box_emits.md\":\"Dh5R-qEv\",\"guide_components_pivot_emits.md\":\"BTJPgNpy\",\"guide_components_pagination_index.md\":\"CnW2zAht\",\"guide_components_flip-view_properties.md\":\"BqZ4hhgU\",\"guide_components_icon-element_emits.md\":\"D5TXFdTZ\",\"guide_components_flip-view_index.md\":\"DefnDOv6\",\"guide_components_navigation-panel_index.md\":\"6mO__sSK\",\"guide_components_rating-control_emits.md\":\"blvomSeC\",\"guide_components_icon-element_index.md\":\"DQ8K7JNn\",\"guide_components_navigation-view_index.md\":\"4AQRiz1k\",\"guide_components_toggle-switch_emits.md\":\"CLGzrNut\",\"guide_components_toggle-switch_index.md\":\"61en_q9-\",\"guide_components_scroll-story_index.md\":\"Vpgb1HSV\",\"guide_components_reveal-container_index.md\":\"Cut2r4tV\",\"guide_components_search-box_emits.md\":\"-d9sWNNt\",\"guide_components_search-box_properties.md\":\"DEKFfPFw\",\"guide_components_shimmer_emits.md\":\"CTMInlI3\",\"guide_components_tag_index.md\":\"BhhxkcHn\",\"guide_components_search-box_index.md\":\"DgkrY0oY\",\"guide_components_shimmer_index.md\":\"iZlHuTxw\",\"guide_components_shimmer_properties.md\":\"CdkU1o6H\",\"guide_components_tree-view_index.md\":\"CUrwan4q\",\"guide_components_text-field_index.md\":\"CXSimJtj\",\"guide_components_text-box_index.md\":\"C5moAPfB\",\"guide_components_progress-ring_properties.md\":\"Dc08Uiff\",\"guide_components_toggle-switch_properties.md\":\"tFppK_IS\",\"guide_components_radio-group_emits.md\":\"cEDzKVnN\",\"guide_components_collapse_index.md\":\"N9Iu5-2v\",\"guide_components_image_emits.md\":\"lmlz2xJd\",\"guide_components_callout_index.md\":\"D9RU33w6\",\"guide_components_pivot_index.md\":\"B_vwQL-5\",\"guide_components_command-bar_index.md\":\"Cp4_rrGB\",\"guide_components_pagination_emits.md\":\"Dng86A22\",\"guide_components_button_index.md\":\"7sqT2MQP\",\"guide_components_info-box_properties.md\":\"BI7Nvk-E\",\"guide_components_drop-down_emits.md\":\"BE95TdKW\",\"guide_components_expander_index.md\":\"BKgcUJzQ\",\"guide_components_message-bar_index.md\":\"AEtAWlF8\",\"guide_components_menu-flyout_index.md\":\"Csa7irPj\",\"guide_components_panel_index.md\":\"CsTu0bXo\",\"guide_components_panel_properties.md\":\"BaxoCYKq\",\"guide_components_progress-bar_emits.md\":\"BcwXUpsF\",\"guide_components_progress-bar_properties.md\":\"TxiS9ZMA\",\"guide_components_progress-ring_emits.md\":\"D2Y6hIZ9\",\"guide_components_color-picker_index.md\":\"DCc4ixcU\",\"guide_components_progress-ring_index.md\":\"CPb-ZEPE\",\"guide_components_color-picker_properties.md\":\"wcXK29Vl\",\"guide_components_time-picker_index.md\":\"CQJdRRaG\",\"guide_components_drop-down_properties.md\":\"Bwlkpr1q\",\"guide_components_infinite-scroll-view_index.md\":\"yAuD807x\",\"guide_components_check-box_index.md\":\"FYgdu4oq\",\"guide_components_progress-bar_index.md\":\"D8vHQw5V\",\"guide_components_combo-box_index.md\":\"DTyu3eNd\",\"guide_components_info-box_emits.md\":\"DlEwpkkq\",\"guide_components_drop-down_index.md\":\"BZzJZQWq\",\"guide_components_list-view_index.md\":\"BoYvMzb0\",\"guide_components_verify-box_properties.md\":\"CW6W8fFf\",\"guide_components_verify-box_index.md\":\"DwSB40wR\",\"guide_index.md\":\"Bndlt3sL\",\"guide_components_web-window_index.md\":\"Bxc8vEeI\",\"index.md\":\"MTRqI42u\",\"guide_components_combo-box_properties.md\":\"AWfHzV6x\",\"guide_components_combobox_emits.md\":\"CGB6WLt8\",\"guide_components_combobox_properties.md\":\"Bja0hMou\",\"guide_components_details-list_index.md\":\"CcgOCIyt\",\"guide_components_info-box_index.md\":\"vXh-_DsL\",\"guide_components_combobox_index.md\":\"CsPkY6YB\",\"guide_components_date-picker_index.md\":\"12vmUIup\",\"guide_components_flip-view_emits.md\":\"DCheHjDj\",\"guide_components_panel_emits.md\":\"DG0REDq8\",\"guide_components_breadcrumb_index.md\":\"DyDm7PeP\",\"guide_components_radio-group_properties.md\":\"BnPxoKsQ\",\"guide_components_persona_emits.md\":\"CnsDPKRU\",\"guide_components_pivot_properties.md\":\"BmoLpPi1\",\"guide_components_persona_index.md\":\"DT00jby4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vfluent3\",\"description\":\"A Vue3 component library for Fluent UI\",\"base\":\"/VFluent3/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"VFluent3\",\"footer\":{\"message\":\"MIT Licensed\",\"copyright\":\"Copyright © Creator SN - 2022\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/\"}],\"sidebar\":[{\"text\":\"Basic input\",\"collapsed\":true,\"items\":[{\"text\":\"Button\",\"link\":\"/guide/components/button/\"},{\"text\":\"CheckBox\",\"link\":\"/guide/components/check-box/\"},{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"},{\"text\":\"Combobox\",\"link\":\"/guide/components/combobox/\"},{\"text\":\"DetailsList\",\"link\":\"/guide/components/details-list/\"},{\"text\":\"DropDown\",\"link\":\"/guide/components/drop-down/\"},{\"text\":\"Radio\",\"link\":\"/guide/components/radio/\"},{\"text\":\"RadioGroup\",\"link\":\"/guide/components/radio-group/\"},{\"text\":\"RatingControl\",\"link\":\"/guide/components/rating-control/\"},{\"text\":\"Slider\",\"link\":\"/guide/components/slider/\"},{\"text\":\"ToggleSwitch\",\"link\":\"/guide/components/toggle-switch/\"},{\"text\":\"Tag\",\"link\":\"/guide/components/tag/\"}]},{\"text\":\"Collections\",\"collapsed\":true,\"items\":[{\"text\":\"FlipView\",\"link\":\"/guide/components/flip-view/\"},{\"text\":\"ListView\",\"link\":\"/guide/components/list-view/\"},{\"text\":\"TreeView\",\"link\":\"/guide/components/tree-view/\"}]},{\"text\":\"Date & Time\",\"collapsed\":true,\"items\":[{\"text\":\"CalendarDatePicker\",\"link\":\"/guide/components/calendar-date-picker/\"},{\"text\":\"CalendarView\",\"link\":\"/guide/components/calendar-view/\"},{\"text\":\"DatePicker\",\"link\":\"/guide/components/date-picker/\"},{\"text\":\"TimePicker\",\"link\":\"/guide/components/time-picker/\"}]},{\"text\":\"Dialogs & flyouts\",\"collapsed\":true,\"items\":[{\"text\":\"Callout\",\"link\":\"/guide/components/callout/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Layout\",\"collapsed\":true,\"items\":[{\"text\":\"Collapse\",\"link\":\"/guide/components/collapse/\"},{\"text\":\"Expander\",\"link\":\"/guide/components/expander/\"},{\"text\":\"Drawer\",\"link\":\"/guide/components/drawer/\"},{\"text\":\"Panel\",\"link\":\"/guide/components/panel/\"}]},{\"text\":\"Media\",\"collapsed\":true,\"items\":[{\"text\":\"Image\",\"link\":\"/guide/components/image/\"},{\"text\":\"Img\",\"link\":\"/guide/components/img/\"},{\"text\":\"ImgBox\",\"link\":\"/guide/components/img-box/\"},{\"text\":\"Persona\",\"link\":\"/guide/components/persona/\"}]},{\"text\":\"Menu & toolbars\",\"collapsed\":true,\"items\":[{\"text\":\"CommandBar\",\"link\":\"/guide/components/command-bar/\"},{\"text\":\"MenuFlyout\",\"link\":\"/guide/components/menu-flyout/\"},{\"text\":\"SwipeControl\",\"link\":\"/guide/components/swipe-control/\"}]},{\"text\":\"Navigation\",\"collapsed\":true,\"items\":[{\"text\":\"Breadcrumb\",\"link\":\"/guide/components/breadcrumb/\"},{\"text\":\"NavigationPanel\",\"link\":\"/guide/components/navigation-panel/\"},{\"text\":\"NavigationView\",\"link\":\"/guide/components/navigation-view/\"},{\"text\":\"Pivot\",\"link\":\"/guide/components/pivot/\"},{\"text\":\"Pagination\",\"link\":\"/guide/components/pagination/\"}]},{\"text\":\"Scrolling\",\"collapsed\":true,\"items\":[{\"text\":\"InfiniteScrollView\",\"link\":\"/guide/components/infinite-scroll-view/\"},{\"text\":\"ScrollStory\",\"link\":\"/guide/components/scroll-story/\"}]},{\"text\":\"Status & info\",\"collapsed\":true,\"items\":[{\"text\":\"Badge\",\"link\":\"/guide/components/badge/\"},{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"ProgressBar\",\"link\":\"/guide/components/progress-bar/\"},{\"text\":\"ProgressRing\",\"link\":\"/guide/components/progress-ring/\"}]},{\"text\":\"Styles\",\"collapsed\":true,\"items\":[{\"text\":\"AnimatedIcon\",\"link\":\"/guide/components/animated-icon/\"},{\"text\":\"IconElement\",\"link\":\"/guide/components/icon-element/\"},{\"text\":\"RevealContainer\",\"link\":\"/guide/components/reveal-container/\"},{\"text\":\"Shimmer\",\"link\":\"/guide/components/shimmer/\"}]},{\"text\":\"Text\",\"collapsed\":true,\"items\":[{\"text\":\"SearchBox\",\"link\":\"/guide/components/search-box/\"},{\"text\":\"TextBox\",\"link\":\"/guide/components/text-box/\"},{\"text\":\"TextField\",\"link\":\"/guide/components/text-field/\"},{\"text\":\"VerifyBox\",\"link\":\"/guide/components/verify-box/\"}]},{\"text\":\"Windowing\",\"collapsed\":true,\"items\":[{\"text\":\"WebWindow\",\"link\":\"/guide/components/web-window/\"}]},{\"text\":\"Global\",\"collapsed\":true,\"items\":[{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Advance\",\"collapsed\":true,\"items\":[{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
     
   </body>
 </html>
\ No newline at end of file
diff --git a/guide/components/progress-bar/properties.html b/guide/components/progress-bar/properties.html
index b5b6b0a..79ee849 100644
--- a/guide/components/progress-bar/properties.html
+++ b/guide/components/progress-bar/properties.html
@@ -1,20 +1,24 @@
 <!DOCTYPE html>
-<html lang="en-US">
+<html lang="en-US" dir="ltr">
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>Properties | vfluent3</title>
+    <title>vfluent3</title>
     <meta name="description" content="A Vue3 component library for Fluent UI">
-    <link rel="stylesheet" href="/VFluent3/assets/style.0a1d87af.css">
-    <link rel="modulepreload" href="/VFluent3/assets/app.d60fa8c3.js">
-    <link rel="modulepreload" href="/VFluent3/assets/guide_components_progress-bar_properties.md.39af7fb2.lean.js">
+    <meta name="generator" content="VitePress v1.0.0-rc.45">
+    <link rel="preload stylesheet" href="/VFluent3/assets/style.BabQegKX.css" as="style">
     
-    <script>(()=>{const e=localStorage.getItem("vitepress-theme-appearance"),a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script type="module" src="/VFluent3/assets/app.CSutcJ2E.js"></script>
+    <link rel="preload" href="/VFluent3/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/framework.DvIFzl91.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/theme.CgqFBnN_.js">
+    <link rel="modulepreload" href="/VFluent3/assets/guide_components_progress-bar_properties.md.TxiS9ZMA.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
   </head>
   <body>
-    <div id="app"><div class="Layout" data-v-058b7495><!--[--><!--]--><!--[--><span tabindex="-1" data-v-bea91388></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-bea91388> Skip to content </a><!--]--><!----><header class="VPNav" data-v-058b7495 data-v-2a0a2738><div class="VPNavBar has-sidebar" data-v-2a0a2738 data-v-45c9f423><div class="container" data-v-45c9f423><div class="VPNavBarTitle has-sidebar" data-v-45c9f423 data-v-011600ce><a class="title" href="/VFluent3/" data-v-011600ce><!----><!--[-->VFluent3<!--]--></a></div><div class="content" data-v-45c9f423><!----><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-45c9f423 data-v-4da4371d><span id="main-nav-aria-label" class="visually-hidden" data-v-4da4371d>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" data-v-4da4371d data-v-66f8d518 data-v-4d08dd3a><!--[-->Home<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" data-v-4da4371d data-v-66f8d518 data-v-4d08dd3a><!--[-->Guide<!--]--><!----></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-45c9f423 data-v-bf1c94ca><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" data-v-bf1c94ca data-v-d0ee0df2 data-v-55b931a0><span class="check" data-v-55b931a0><span class="icon" data-v-55b931a0><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-d0ee0df2><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-d0ee0df2><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-45c9f423 data-v-7cece6ac data-v-37af1650><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-37af1650><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-37af1650><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-37af1650><div class="VPMenu" data-v-37af1650 data-v-17dc081b><!----><!--[--><!--[--><!----><div class="group" data-v-7cece6ac><div class="item appearance" data-v-7cece6ac><p class="label" data-v-7cece6ac>Appearance</p><div class="appearance-action" data-v-7cece6ac><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" data-v-7cece6ac data-v-d0ee0df2 data-v-55b931a0><span class="check" data-v-55b931a0><span class="icon" data-v-55b931a0><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-d0ee0df2><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-d0ee0df2><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-45c9f423 data-v-5484e669><span class="container" data-v-5484e669><span class="top" data-v-5484e669></span><span class="middle" data-v-5484e669></span><span class="bottom" data-v-5484e669></span></span></button></div></div></div><!----></header><div class="VPLocalNav" data-v-058b7495 data-v-f623cd72><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-f623cd72><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-f623cd72><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-f623cd72>Menu</span></button><a class="top-link" href="#" data-v-f623cd72> Return to top </a></div><aside class="VPSidebar" data-v-058b7495 data-v-3b8ec0c7><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-3b8ec0c7><span class="visually-hidden" id="sidebar-aria-label" data-v-3b8ec0c7> Sidebar Navigation </span><!--[--><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Basic</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/button/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Button</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/check-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>CheckBox</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/radio/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Radio</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/progress-bar/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ProgressBar</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/progress-ring/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ProgressRing</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/toggle-switch/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ToggleSwitch</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/img/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Img</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/text-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>TextBox</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/combo-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ComboBox</span><!--]--><!----></a><!--]--></div></section></div><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Global</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/message-bar/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>MessageBar</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/info-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>InfoBox</span><!--]--><!----></a><!--]--></div></section></div><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Advance</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/color-picker/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ColorPicker</span><!--]--><!----></a><!--]--></div></section></div><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-058b7495 data-v-564173e9><div class="VPDoc has-sidebar" data-v-564173e9 data-v-32b7ddf4><div class="container" data-v-32b7ddf4><div class="aside" data-v-32b7ddf4><div class="aside-curtain" data-v-32b7ddf4></div><div class="aside-container" data-v-32b7ddf4><div class="aside-content" data-v-32b7ddf4><div class="VPDocAside" data-v-32b7ddf4 data-v-35c1bae1><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline has-outline" data-v-35c1bae1 data-v-123cce62><div class="content" data-v-123cce62><div class="outline-marker" data-v-123cce62></div><div class="outline-title" data-v-123cce62>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-123cce62><span class="visually-hidden" id="doc-outline-aria-label" data-v-123cce62> Table of Contents for current page </span><ul class="root" data-v-123cce62><!--[--><li style="" data-v-123cce62><a class="outline-link" href="#properties" data-v-123cce62>Properties</a><!----></li><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-35c1bae1></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-32b7ddf4><div class="content-container" data-v-32b7ddf4><!--[--><!--]--><main class="main" data-v-32b7ddf4><div style="position:relative;" class="vp-doc _VFluent3_guide_components_progress-bar_properties" data-v-32b7ddf4><div><h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">background</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">background color</td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">disabled</td></tr><tr><td style="text-align:center;">error</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">error state</td></tr><tr><td style="text-align:center;">error-foreground</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">error foreground color</td></tr><tr><td style="text-align:center;">foreground</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">foreground color</td></tr><tr><td style="text-align:center;">indeterminate</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">indeterminate status</td></tr><tr><td style="text-align:center;">lang</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">i18n</td></tr><tr><td style="text-align:center;">max</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">100</td><td style="text-align:center;">same as HTML progress element</td></tr><tr><td style="text-align:center;">model-value</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">0</td><td style="text-align:center;">v-model</td></tr><tr><td style="text-align:center;">pause</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">pause state</td></tr><tr><td style="text-align:center;">pause-foreground</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">pause foreground color</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">[&#39;light&#39;, &#39;dark&#39;, &#39;global&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&quot;global&quot;</td><td style="text-align:center;">theme</td></tr></tbody></table></div></div></main><footer class="VPDocFooter" data-v-32b7ddf4 data-v-cfaa3a6c><div class="edit-info" data-v-cfaa3a6c><!----><!----></div><div class="prev-next" data-v-cfaa3a6c><div class="pager" data-v-cfaa3a6c><!----></div><div class="pager" data-v-cfaa3a6c><a class="pager-link next" href="/VFluent3/guide/components/button/" data-v-cfaa3a6c><span class="desc" data-v-cfaa3a6c>Next page</span><span class="title" data-v-cfaa3a6c>Button</span></a></div></div></footer><!--[--><!--]--></div></div></div></div></div><footer class="VPFooter has-sidebar" data-v-058b7495 data-v-a6c8dde4><div class="container" data-v-a6c8dde4><p class="message" data-v-a6c8dde4>MIT Licensed</p><p class="copyright" data-v-a6c8dde4>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
-    <script>__VP_HASH_MAP__ = JSON.parse("{\"guide_components_button_emits.md\":\"d682bf18\",\"guide_components_button_index.md\":\"23a8eb54\",\"guide_components_button_properties.md\":\"cd4004b6\",\"guide_components_check-box_emits.md\":\"31609794\",\"guide_components_check-box_index.md\":\"32046814\",\"guide_components_check-box_properties.md\":\"8f33ac0c\",\"guide_components_color-picker_emits.md\":\"00983cd0\",\"guide_components_color-picker_index.md\":\"b2d62612\",\"guide_components_color-picker_properties.md\":\"5466ba72\",\"guide_components_combo-box_emits.md\":\"d5ffda50\",\"guide_components_combo-box_index.md\":\"1c4364f5\",\"guide_components_combo-box_properties.md\":\"2e1d6060\",\"guide_components_img_emits.md\":\"6237adb4\",\"guide_components_img_index.md\":\"fa51a3a1\",\"guide_components_img_properties.md\":\"8d321b5e\",\"guide_components_info-box_emits.md\":\"c2e71eec\",\"guide_components_info-box_index.md\":\"06175fed\",\"guide_components_info-box_properties.md\":\"314dbb00\",\"guide_components_message-bar_emits.md\":\"e89a5a22\",\"guide_components_message-bar_index.md\":\"3f0b01d6\",\"guide_components_message-bar_properties.md\":\"ee3838d9\",\"guide_components_progress-bar_emits.md\":\"5b611e3b\",\"guide_components_progress-bar_index.md\":\"689c3241\",\"guide_components_progress-bar_properties.md\":\"39af7fb2\",\"guide_components_progress-ring_emits.md\":\"67e4644e\",\"guide_components_progress-ring_index.md\":\"9a33542b\",\"guide_components_progress-ring_properties.md\":\"c897c4bb\",\"guide_components_radio_emits.md\":\"28506857\",\"guide_components_radio_index.md\":\"e5a479ce\",\"guide_components_radio_properties.md\":\"f8e55d2f\",\"guide_components_text-box_emits.md\":\"0bf89ef8\",\"guide_components_text-box_index.md\":\"7ccfc637\",\"guide_components_text-box_properties.md\":\"aab3a89e\",\"guide_components_toggle-switch_emits.md\":\"5146435f\",\"guide_components_toggle-switch_index.md\":\"8be48081\",\"guide_components_toggle-switch_properties.md\":\"54984c3a\",\"guide_index.md\":\"e3dca1d7\",\"index.md\":\"1e9773d5\"}")</script>
-    <script type="module" async src="/VFluent3/assets/app.d60fa8c3.js"></script>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-19c990f1><div class="wrapper" data-v-19c990f1><div class="container" data-v-19c990f1><div class="title" data-v-19c990f1><div class="VPNavBarTitle has-sidebar" data-v-19c990f1 data-v-ab179fa1><a class="title" href="/VFluent3/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>VFluent3</span><!--[--><!--]--></a></div></div><div class="content" data-v-19c990f1><div class="content-body" data-v-19c990f1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-19c990f1><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-19c990f1 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Guide</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-19c990f1 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-19c990f1 data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-19c990f1 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-19c990f1><div class="divider-line" data-v-19c990f1></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-d2ecc192><button data-v-d2ecc192>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-575e6a36><div class="curtain" data-v-575e6a36></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-575e6a36><span class="visually-hidden" id="sidebar-aria-label" data-v-575e6a36> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Basic input</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/button/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/check-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CheckBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/combobox/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Combobox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/details-list/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DetailsList</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drop-down/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DropDown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio-group/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RadioGroup</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/rating-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RatingControl</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/slider/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/toggle-switch/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ToggleSwitch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tag/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Tag</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Collections</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/flip-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>FlipView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/list-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ListView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tree-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TreeView</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Date & Time</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarDatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/time-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TimePicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Dialogs & flyouts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/callout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Callout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Layout</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/collapse/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Collapse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/expander/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Expander</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drawer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Panel</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Media</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/image/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Img</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ImgBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/persona/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Persona</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Menu & toolbars</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/command-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CommandBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/menu-flyout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MenuFlyout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/swipe-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SwipeControl</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Navigation</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/breadcrumb/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationPanel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pivot/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pivot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pagination/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pagination</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Scrolling</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/infinite-scroll-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfiniteScrollView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/scroll-story/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ScrollStory</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Status & info</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/badge/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-ring/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressRing</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Styles</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/animated-icon/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>AnimatedIcon</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/icon-element/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>IconElement</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/reveal-container/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RevealContainer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/shimmer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Shimmer</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Text</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/search-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SearchBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-field/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextField</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/verify-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>VerifyBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Windowing</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/web-window/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>WebWindow</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Global</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Advance</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-935f8a84><div class="content" data-v-935f8a84><div class="outline-marker" data-v-935f8a84></div><div class="outline-title" role="heading" aria-level="2" data-v-935f8a84>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-935f8a84><span class="visually-hidden" id="doc-outline-aria-label" data-v-935f8a84> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-935f8a84 data-v-b933a997><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _VFluent3_guide_components_progress-bar_properties" data-v-39a288b8><div><h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-label="Permalink to &quot;Properties&quot;">​</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">background</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">background color</td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">disabled</td></tr><tr><td style="text-align:center;">error</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">error state</td></tr><tr><td style="text-align:center;">error-foreground</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">error foreground color</td></tr><tr><td style="text-align:center;">foreground</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">foreground color</td></tr><tr><td style="text-align:center;">indeterminate</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">indeterminate status</td></tr><tr><td style="text-align:center;">lang</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">i18n</td></tr><tr><td style="text-align:center;">max</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">100</td><td style="text-align:center;">same as HTML progress element</td></tr><tr><td style="text-align:center;">model-value</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">0</td><td style="text-align:center;">v-model</td></tr><tr><td style="text-align:center;">pause</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">pause state</td></tr><tr><td style="text-align:center;">pause-foreground</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">pause foreground color</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">[&#39;light&#39;, &#39;dark&#39;, &#39;global&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&quot;global&quot;</td><td style="text-align:center;">theme</td></tr></tbody></table></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-09de1c0f><!--[--><!--]--><!----><nav class="prev-next" data-v-09de1c0f><div class="pager" data-v-09de1c0f><!----></div><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link next" href="/VFluent3/guide/components/button/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Next page</span><span class="title" data-v-09de1c0f>Button</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>MIT Licensed</p><p class="copyright" data-v-e315a0ad>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_calendar-date-picker_properties.md\":\"DXRjmMG8\",\"guide_components_image_properties.md\":\"DGanRzCb\",\"guide_components_img-box_index.md\":\"DYtggkf_\",\"guide_components_img_emits.md\":\"BlE7jvZQ\",\"guide_components_img_index.md\":\"Bm9FiuU4\",\"guide_components_icon-element_properties.md\":\"8Oakruwc\",\"guide_components_img_properties.md\":\"B42YSocI\",\"guide_components_drawer_index.md\":\"D_vpnCpE\",\"guide_components_verify-box_emits.md\":\"DT17Iazx\",\"guide_components_calendar-date-picker_index.md\":\"BdHjrurh\",\"guide_components_rating-control_index.md\":\"Q9l5Lfrr\",\"guide_components_rating-control_properties.md\":\"DKprnl0i\",\"guide_components_calendar-view_index.md\":\"zdoRYVx1\",\"guide_components_animated-icon_index.md\":\"yZDMzCFe\",\"guide_components_calendar-date-picker_emits.md\":\"D5OkfR8j\",\"guide_components_badge_index.md\":\"Bb4crrJn\",\"guide_components_image_index.md\":\"B7X6cWAZ\",\"guide_components_slider_index.md\":\"C7zZ2d-W\",\"guide_components_radio-group_index.md\":\"CVfh3h5H\",\"guide_components_swipe-control_index.md\":\"DwrDVPc1\",\"guide_components_color-picker_emits.md\":\"BHDXVtBQ\",\"guide_components_radio_index.md\":\"90as5QGp\",\"guide_components_pagination_properties.md\":\"JUAPvcTL\",\"guide_components_persona_properties.md\":\"DUTPhPMp\",\"guide_components_combo-box_emits.md\":\"Dh5R-qEv\",\"guide_components_pivot_emits.md\":\"BTJPgNpy\",\"guide_components_pagination_index.md\":\"CnW2zAht\",\"guide_components_flip-view_properties.md\":\"BqZ4hhgU\",\"guide_components_icon-element_emits.md\":\"D5TXFdTZ\",\"guide_components_flip-view_index.md\":\"DefnDOv6\",\"guide_components_navigation-panel_index.md\":\"6mO__sSK\",\"guide_components_rating-control_emits.md\":\"blvomSeC\",\"guide_components_icon-element_index.md\":\"DQ8K7JNn\",\"guide_components_navigation-view_index.md\":\"4AQRiz1k\",\"guide_components_toggle-switch_emits.md\":\"CLGzrNut\",\"guide_components_toggle-switch_index.md\":\"61en_q9-\",\"guide_components_scroll-story_index.md\":\"Vpgb1HSV\",\"guide_components_reveal-container_index.md\":\"Cut2r4tV\",\"guide_components_search-box_emits.md\":\"-d9sWNNt\",\"guide_components_search-box_properties.md\":\"DEKFfPFw\",\"guide_components_shimmer_emits.md\":\"CTMInlI3\",\"guide_components_tag_index.md\":\"BhhxkcHn\",\"guide_components_search-box_index.md\":\"DgkrY0oY\",\"guide_components_shimmer_index.md\":\"iZlHuTxw\",\"guide_components_shimmer_properties.md\":\"CdkU1o6H\",\"guide_components_tree-view_index.md\":\"CUrwan4q\",\"guide_components_text-field_index.md\":\"CXSimJtj\",\"guide_components_text-box_index.md\":\"C5moAPfB\",\"guide_components_progress-ring_properties.md\":\"Dc08Uiff\",\"guide_components_toggle-switch_properties.md\":\"tFppK_IS\",\"guide_components_radio-group_emits.md\":\"cEDzKVnN\",\"guide_components_collapse_index.md\":\"N9Iu5-2v\",\"guide_components_image_emits.md\":\"lmlz2xJd\",\"guide_components_callout_index.md\":\"D9RU33w6\",\"guide_components_pivot_index.md\":\"B_vwQL-5\",\"guide_components_command-bar_index.md\":\"Cp4_rrGB\",\"guide_components_pagination_emits.md\":\"Dng86A22\",\"guide_components_button_index.md\":\"7sqT2MQP\",\"guide_components_info-box_properties.md\":\"BI7Nvk-E\",\"guide_components_drop-down_emits.md\":\"BE95TdKW\",\"guide_components_expander_index.md\":\"BKgcUJzQ\",\"guide_components_message-bar_index.md\":\"AEtAWlF8\",\"guide_components_menu-flyout_index.md\":\"Csa7irPj\",\"guide_components_panel_index.md\":\"CsTu0bXo\",\"guide_components_panel_properties.md\":\"BaxoCYKq\",\"guide_components_progress-bar_emits.md\":\"BcwXUpsF\",\"guide_components_progress-bar_properties.md\":\"TxiS9ZMA\",\"guide_components_progress-ring_emits.md\":\"D2Y6hIZ9\",\"guide_components_color-picker_index.md\":\"DCc4ixcU\",\"guide_components_progress-ring_index.md\":\"CPb-ZEPE\",\"guide_components_color-picker_properties.md\":\"wcXK29Vl\",\"guide_components_time-picker_index.md\":\"CQJdRRaG\",\"guide_components_drop-down_properties.md\":\"Bwlkpr1q\",\"guide_components_infinite-scroll-view_index.md\":\"yAuD807x\",\"guide_components_check-box_index.md\":\"FYgdu4oq\",\"guide_components_progress-bar_index.md\":\"D8vHQw5V\",\"guide_components_combo-box_index.md\":\"DTyu3eNd\",\"guide_components_info-box_emits.md\":\"DlEwpkkq\",\"guide_components_drop-down_index.md\":\"BZzJZQWq\",\"guide_components_list-view_index.md\":\"BoYvMzb0\",\"guide_components_verify-box_properties.md\":\"CW6W8fFf\",\"guide_components_verify-box_index.md\":\"DwSB40wR\",\"guide_index.md\":\"Bndlt3sL\",\"guide_components_web-window_index.md\":\"Bxc8vEeI\",\"index.md\":\"MTRqI42u\",\"guide_components_combo-box_properties.md\":\"AWfHzV6x\",\"guide_components_combobox_emits.md\":\"CGB6WLt8\",\"guide_components_combobox_properties.md\":\"Bja0hMou\",\"guide_components_details-list_index.md\":\"CcgOCIyt\",\"guide_components_info-box_index.md\":\"vXh-_DsL\",\"guide_components_combobox_index.md\":\"CsPkY6YB\",\"guide_components_date-picker_index.md\":\"12vmUIup\",\"guide_components_flip-view_emits.md\":\"DCheHjDj\",\"guide_components_panel_emits.md\":\"DG0REDq8\",\"guide_components_breadcrumb_index.md\":\"DyDm7PeP\",\"guide_components_radio-group_properties.md\":\"BnPxoKsQ\",\"guide_components_persona_emits.md\":\"CnsDPKRU\",\"guide_components_pivot_properties.md\":\"BmoLpPi1\",\"guide_components_persona_index.md\":\"DT00jby4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vfluent3\",\"description\":\"A Vue3 component library for Fluent UI\",\"base\":\"/VFluent3/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"VFluent3\",\"footer\":{\"message\":\"MIT Licensed\",\"copyright\":\"Copyright © Creator SN - 2022\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/\"}],\"sidebar\":[{\"text\":\"Basic input\",\"collapsed\":true,\"items\":[{\"text\":\"Button\",\"link\":\"/guide/components/button/\"},{\"text\":\"CheckBox\",\"link\":\"/guide/components/check-box/\"},{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"},{\"text\":\"Combobox\",\"link\":\"/guide/components/combobox/\"},{\"text\":\"DetailsList\",\"link\":\"/guide/components/details-list/\"},{\"text\":\"DropDown\",\"link\":\"/guide/components/drop-down/\"},{\"text\":\"Radio\",\"link\":\"/guide/components/radio/\"},{\"text\":\"RadioGroup\",\"link\":\"/guide/components/radio-group/\"},{\"text\":\"RatingControl\",\"link\":\"/guide/components/rating-control/\"},{\"text\":\"Slider\",\"link\":\"/guide/components/slider/\"},{\"text\":\"ToggleSwitch\",\"link\":\"/guide/components/toggle-switch/\"},{\"text\":\"Tag\",\"link\":\"/guide/components/tag/\"}]},{\"text\":\"Collections\",\"collapsed\":true,\"items\":[{\"text\":\"FlipView\",\"link\":\"/guide/components/flip-view/\"},{\"text\":\"ListView\",\"link\":\"/guide/components/list-view/\"},{\"text\":\"TreeView\",\"link\":\"/guide/components/tree-view/\"}]},{\"text\":\"Date & Time\",\"collapsed\":true,\"items\":[{\"text\":\"CalendarDatePicker\",\"link\":\"/guide/components/calendar-date-picker/\"},{\"text\":\"CalendarView\",\"link\":\"/guide/components/calendar-view/\"},{\"text\":\"DatePicker\",\"link\":\"/guide/components/date-picker/\"},{\"text\":\"TimePicker\",\"link\":\"/guide/components/time-picker/\"}]},{\"text\":\"Dialogs & flyouts\",\"collapsed\":true,\"items\":[{\"text\":\"Callout\",\"link\":\"/guide/components/callout/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Layout\",\"collapsed\":true,\"items\":[{\"text\":\"Collapse\",\"link\":\"/guide/components/collapse/\"},{\"text\":\"Expander\",\"link\":\"/guide/components/expander/\"},{\"text\":\"Drawer\",\"link\":\"/guide/components/drawer/\"},{\"text\":\"Panel\",\"link\":\"/guide/components/panel/\"}]},{\"text\":\"Media\",\"collapsed\":true,\"items\":[{\"text\":\"Image\",\"link\":\"/guide/components/image/\"},{\"text\":\"Img\",\"link\":\"/guide/components/img/\"},{\"text\":\"ImgBox\",\"link\":\"/guide/components/img-box/\"},{\"text\":\"Persona\",\"link\":\"/guide/components/persona/\"}]},{\"text\":\"Menu & toolbars\",\"collapsed\":true,\"items\":[{\"text\":\"CommandBar\",\"link\":\"/guide/components/command-bar/\"},{\"text\":\"MenuFlyout\",\"link\":\"/guide/components/menu-flyout/\"},{\"text\":\"SwipeControl\",\"link\":\"/guide/components/swipe-control/\"}]},{\"text\":\"Navigation\",\"collapsed\":true,\"items\":[{\"text\":\"Breadcrumb\",\"link\":\"/guide/components/breadcrumb/\"},{\"text\":\"NavigationPanel\",\"link\":\"/guide/components/navigation-panel/\"},{\"text\":\"NavigationView\",\"link\":\"/guide/components/navigation-view/\"},{\"text\":\"Pivot\",\"link\":\"/guide/components/pivot/\"},{\"text\":\"Pagination\",\"link\":\"/guide/components/pagination/\"}]},{\"text\":\"Scrolling\",\"collapsed\":true,\"items\":[{\"text\":\"InfiniteScrollView\",\"link\":\"/guide/components/infinite-scroll-view/\"},{\"text\":\"ScrollStory\",\"link\":\"/guide/components/scroll-story/\"}]},{\"text\":\"Status & info\",\"collapsed\":true,\"items\":[{\"text\":\"Badge\",\"link\":\"/guide/components/badge/\"},{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"ProgressBar\",\"link\":\"/guide/components/progress-bar/\"},{\"text\":\"ProgressRing\",\"link\":\"/guide/components/progress-ring/\"}]},{\"text\":\"Styles\",\"collapsed\":true,\"items\":[{\"text\":\"AnimatedIcon\",\"link\":\"/guide/components/animated-icon/\"},{\"text\":\"IconElement\",\"link\":\"/guide/components/icon-element/\"},{\"text\":\"RevealContainer\",\"link\":\"/guide/components/reveal-container/\"},{\"text\":\"Shimmer\",\"link\":\"/guide/components/shimmer/\"}]},{\"text\":\"Text\",\"collapsed\":true,\"items\":[{\"text\":\"SearchBox\",\"link\":\"/guide/components/search-box/\"},{\"text\":\"TextBox\",\"link\":\"/guide/components/text-box/\"},{\"text\":\"TextField\",\"link\":\"/guide/components/text-field/\"},{\"text\":\"VerifyBox\",\"link\":\"/guide/components/verify-box/\"}]},{\"text\":\"Windowing\",\"collapsed\":true,\"items\":[{\"text\":\"WebWindow\",\"link\":\"/guide/components/web-window/\"}]},{\"text\":\"Global\",\"collapsed\":true,\"items\":[{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Advance\",\"collapsed\":true,\"items\":[{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
     
   </body>
 </html>
\ No newline at end of file
diff --git a/guide/components/progress-ring/emits.html b/guide/components/progress-ring/emits.html
index 47bc4cb..05feb24 100644
--- a/guide/components/progress-ring/emits.html
+++ b/guide/components/progress-ring/emits.html
@@ -1,20 +1,24 @@
 <!DOCTYPE html>
-<html lang="en-US">
+<html lang="en-US" dir="ltr">
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>Emits | vfluent3</title>
+    <title>vfluent3</title>
     <meta name="description" content="A Vue3 component library for Fluent UI">
-    <link rel="stylesheet" href="/VFluent3/assets/style.0a1d87af.css">
-    <link rel="modulepreload" href="/VFluent3/assets/app.d60fa8c3.js">
-    <link rel="modulepreload" href="/VFluent3/assets/guide_components_progress-ring_emits.md.67e4644e.lean.js">
+    <meta name="generator" content="VitePress v1.0.0-rc.45">
+    <link rel="preload stylesheet" href="/VFluent3/assets/style.BabQegKX.css" as="style">
     
-    <script>(()=>{const e=localStorage.getItem("vitepress-theme-appearance"),a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script type="module" src="/VFluent3/assets/app.CSutcJ2E.js"></script>
+    <link rel="preload" href="/VFluent3/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/framework.DvIFzl91.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/theme.CgqFBnN_.js">
+    <link rel="modulepreload" href="/VFluent3/assets/guide_components_progress-ring_emits.md.D2Y6hIZ9.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
   </head>
   <body>
-    <div id="app"><div class="Layout" data-v-058b7495><!--[--><!--]--><!--[--><span tabindex="-1" data-v-bea91388></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-bea91388> Skip to content </a><!--]--><!----><header class="VPNav" data-v-058b7495 data-v-2a0a2738><div class="VPNavBar has-sidebar" data-v-2a0a2738 data-v-45c9f423><div class="container" data-v-45c9f423><div class="VPNavBarTitle has-sidebar" data-v-45c9f423 data-v-011600ce><a class="title" href="/VFluent3/" data-v-011600ce><!----><!--[-->VFluent3<!--]--></a></div><div class="content" data-v-45c9f423><!----><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-45c9f423 data-v-4da4371d><span id="main-nav-aria-label" class="visually-hidden" data-v-4da4371d>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" data-v-4da4371d data-v-66f8d518 data-v-4d08dd3a><!--[-->Home<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" data-v-4da4371d data-v-66f8d518 data-v-4d08dd3a><!--[-->Guide<!--]--><!----></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-45c9f423 data-v-bf1c94ca><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" data-v-bf1c94ca data-v-d0ee0df2 data-v-55b931a0><span class="check" data-v-55b931a0><span class="icon" data-v-55b931a0><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-d0ee0df2><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-d0ee0df2><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-45c9f423 data-v-7cece6ac data-v-37af1650><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-37af1650><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-37af1650><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-37af1650><div class="VPMenu" data-v-37af1650 data-v-17dc081b><!----><!--[--><!--[--><!----><div class="group" data-v-7cece6ac><div class="item appearance" data-v-7cece6ac><p class="label" data-v-7cece6ac>Appearance</p><div class="appearance-action" data-v-7cece6ac><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" data-v-7cece6ac data-v-d0ee0df2 data-v-55b931a0><span class="check" data-v-55b931a0><span class="icon" data-v-55b931a0><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-d0ee0df2><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-d0ee0df2><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-45c9f423 data-v-5484e669><span class="container" data-v-5484e669><span class="top" data-v-5484e669></span><span class="middle" data-v-5484e669></span><span class="bottom" data-v-5484e669></span></span></button></div></div></div><!----></header><div class="VPLocalNav" data-v-058b7495 data-v-f623cd72><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-f623cd72><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-f623cd72><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-f623cd72>Menu</span></button><a class="top-link" href="#" data-v-f623cd72> Return to top </a></div><aside class="VPSidebar" data-v-058b7495 data-v-3b8ec0c7><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-3b8ec0c7><span class="visually-hidden" id="sidebar-aria-label" data-v-3b8ec0c7> Sidebar Navigation </span><!--[--><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Basic</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/button/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Button</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/check-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>CheckBox</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/radio/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Radio</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/progress-bar/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ProgressBar</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/progress-ring/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ProgressRing</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/toggle-switch/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ToggleSwitch</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/img/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Img</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/text-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>TextBox</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/combo-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ComboBox</span><!--]--><!----></a><!--]--></div></section></div><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Global</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/message-bar/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>MessageBar</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/info-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>InfoBox</span><!--]--><!----></a><!--]--></div></section></div><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Advance</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/color-picker/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ColorPicker</span><!--]--><!----></a><!--]--></div></section></div><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-058b7495 data-v-564173e9><div class="VPDoc has-sidebar" data-v-564173e9 data-v-32b7ddf4><div class="container" data-v-32b7ddf4><div class="aside" data-v-32b7ddf4><div class="aside-curtain" data-v-32b7ddf4></div><div class="aside-container" data-v-32b7ddf4><div class="aside-content" data-v-32b7ddf4><div class="VPDocAside" data-v-32b7ddf4 data-v-35c1bae1><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline has-outline" data-v-35c1bae1 data-v-123cce62><div class="content" data-v-123cce62><div class="outline-marker" data-v-123cce62></div><div class="outline-title" data-v-123cce62>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-123cce62><span class="visually-hidden" id="doc-outline-aria-label" data-v-123cce62> Table of Contents for current page </span><ul class="root" data-v-123cce62><!--[--><li style="" data-v-123cce62><a class="outline-link" href="#emits" data-v-123cce62>Emits</a><!----></li><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-35c1bae1></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-32b7ddf4><div class="content-container" data-v-32b7ddf4><!--[--><!--]--><main class="main" data-v-32b7ddf4><div style="position:relative;" class="vp-doc _VFluent3_guide_components_progress-ring_emits" data-v-32b7ddf4><div><h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">change</td><td style="text-align:center;">val[number]</td><td style="text-align:center;">onchange</td></tr><tr><td style="text-align:center;">loaded</td><td style="text-align:center;">val[number]</td><td style="text-align:center;">onloaded</td></tr><tr><td style="text-align:center;">update:model-value</td><td style="text-align:center;">val[number]</td><td style="text-align:center;">v-model</td></tr></tbody></table></div></div></main><footer class="VPDocFooter" data-v-32b7ddf4 data-v-cfaa3a6c><div class="edit-info" data-v-cfaa3a6c><!----><!----></div><div class="prev-next" data-v-cfaa3a6c><div class="pager" data-v-cfaa3a6c><!----></div><div class="pager" data-v-cfaa3a6c><a class="pager-link next" href="/VFluent3/guide/components/button/" data-v-cfaa3a6c><span class="desc" data-v-cfaa3a6c>Next page</span><span class="title" data-v-cfaa3a6c>Button</span></a></div></div></footer><!--[--><!--]--></div></div></div></div></div><footer class="VPFooter has-sidebar" data-v-058b7495 data-v-a6c8dde4><div class="container" data-v-a6c8dde4><p class="message" data-v-a6c8dde4>MIT Licensed</p><p class="copyright" data-v-a6c8dde4>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
-    <script>__VP_HASH_MAP__ = JSON.parse("{\"guide_components_button_emits.md\":\"d682bf18\",\"guide_components_button_index.md\":\"23a8eb54\",\"guide_components_button_properties.md\":\"cd4004b6\",\"guide_components_check-box_emits.md\":\"31609794\",\"guide_components_check-box_index.md\":\"32046814\",\"guide_components_check-box_properties.md\":\"8f33ac0c\",\"guide_components_color-picker_emits.md\":\"00983cd0\",\"guide_components_color-picker_index.md\":\"b2d62612\",\"guide_components_color-picker_properties.md\":\"5466ba72\",\"guide_components_combo-box_emits.md\":\"d5ffda50\",\"guide_components_combo-box_index.md\":\"1c4364f5\",\"guide_components_combo-box_properties.md\":\"2e1d6060\",\"guide_components_img_emits.md\":\"6237adb4\",\"guide_components_img_index.md\":\"fa51a3a1\",\"guide_components_img_properties.md\":\"8d321b5e\",\"guide_components_info-box_emits.md\":\"c2e71eec\",\"guide_components_info-box_index.md\":\"06175fed\",\"guide_components_info-box_properties.md\":\"314dbb00\",\"guide_components_message-bar_emits.md\":\"e89a5a22\",\"guide_components_message-bar_index.md\":\"3f0b01d6\",\"guide_components_message-bar_properties.md\":\"ee3838d9\",\"guide_components_progress-bar_emits.md\":\"5b611e3b\",\"guide_components_progress-bar_index.md\":\"689c3241\",\"guide_components_progress-bar_properties.md\":\"39af7fb2\",\"guide_components_progress-ring_emits.md\":\"67e4644e\",\"guide_components_progress-ring_index.md\":\"9a33542b\",\"guide_components_progress-ring_properties.md\":\"c897c4bb\",\"guide_components_radio_emits.md\":\"28506857\",\"guide_components_radio_index.md\":\"e5a479ce\",\"guide_components_radio_properties.md\":\"f8e55d2f\",\"guide_components_text-box_emits.md\":\"0bf89ef8\",\"guide_components_text-box_index.md\":\"7ccfc637\",\"guide_components_text-box_properties.md\":\"aab3a89e\",\"guide_components_toggle-switch_emits.md\":\"5146435f\",\"guide_components_toggle-switch_index.md\":\"8be48081\",\"guide_components_toggle-switch_properties.md\":\"54984c3a\",\"guide_index.md\":\"e3dca1d7\",\"index.md\":\"1e9773d5\"}")</script>
-    <script type="module" async src="/VFluent3/assets/app.d60fa8c3.js"></script>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-19c990f1><div class="wrapper" data-v-19c990f1><div class="container" data-v-19c990f1><div class="title" data-v-19c990f1><div class="VPNavBarTitle has-sidebar" data-v-19c990f1 data-v-ab179fa1><a class="title" href="/VFluent3/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>VFluent3</span><!--[--><!--]--></a></div></div><div class="content" data-v-19c990f1><div class="content-body" data-v-19c990f1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-19c990f1><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-19c990f1 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Guide</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-19c990f1 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-19c990f1 data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-19c990f1 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-19c990f1><div class="divider-line" data-v-19c990f1></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-d2ecc192><button data-v-d2ecc192>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-575e6a36><div class="curtain" data-v-575e6a36></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-575e6a36><span class="visually-hidden" id="sidebar-aria-label" data-v-575e6a36> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Basic input</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/button/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/check-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CheckBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/combobox/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Combobox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/details-list/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DetailsList</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drop-down/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DropDown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio-group/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RadioGroup</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/rating-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RatingControl</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/slider/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/toggle-switch/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ToggleSwitch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tag/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Tag</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Collections</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/flip-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>FlipView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/list-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ListView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tree-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TreeView</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Date & Time</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarDatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/time-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TimePicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Dialogs & flyouts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/callout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Callout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Layout</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/collapse/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Collapse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/expander/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Expander</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drawer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Panel</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Media</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/image/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Img</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ImgBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/persona/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Persona</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Menu & toolbars</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/command-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CommandBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/menu-flyout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MenuFlyout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/swipe-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SwipeControl</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Navigation</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/breadcrumb/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationPanel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pivot/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pivot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pagination/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pagination</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Scrolling</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/infinite-scroll-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfiniteScrollView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/scroll-story/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ScrollStory</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Status & info</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/badge/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-ring/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressRing</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Styles</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/animated-icon/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>AnimatedIcon</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/icon-element/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>IconElement</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/reveal-container/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RevealContainer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/shimmer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Shimmer</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Text</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/search-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SearchBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-field/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextField</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/verify-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>VerifyBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Windowing</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/web-window/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>WebWindow</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Global</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Advance</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-935f8a84><div class="content" data-v-935f8a84><div class="outline-marker" data-v-935f8a84></div><div class="outline-title" role="heading" aria-level="2" data-v-935f8a84>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-935f8a84><span class="visually-hidden" id="doc-outline-aria-label" data-v-935f8a84> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-935f8a84 data-v-b933a997><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _VFluent3_guide_components_progress-ring_emits" data-v-39a288b8><div><h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-label="Permalink to &quot;Emits&quot;">​</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">change</td><td style="text-align:center;">val[number]</td><td style="text-align:center;">onchange</td></tr><tr><td style="text-align:center;">loaded</td><td style="text-align:center;">val[number]</td><td style="text-align:center;">onloaded</td></tr><tr><td style="text-align:center;">update:model-value</td><td style="text-align:center;">val[number]</td><td style="text-align:center;">v-model</td></tr></tbody></table></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-09de1c0f><!--[--><!--]--><!----><nav class="prev-next" data-v-09de1c0f><div class="pager" data-v-09de1c0f><!----></div><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link next" href="/VFluent3/guide/components/button/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Next page</span><span class="title" data-v-09de1c0f>Button</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>MIT Licensed</p><p class="copyright" data-v-e315a0ad>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_calendar-date-picker_properties.md\":\"DXRjmMG8\",\"guide_components_image_properties.md\":\"DGanRzCb\",\"guide_components_img-box_index.md\":\"DYtggkf_\",\"guide_components_img_emits.md\":\"BlE7jvZQ\",\"guide_components_img_index.md\":\"Bm9FiuU4\",\"guide_components_icon-element_properties.md\":\"8Oakruwc\",\"guide_components_img_properties.md\":\"B42YSocI\",\"guide_components_drawer_index.md\":\"D_vpnCpE\",\"guide_components_verify-box_emits.md\":\"DT17Iazx\",\"guide_components_calendar-date-picker_index.md\":\"BdHjrurh\",\"guide_components_rating-control_index.md\":\"Q9l5Lfrr\",\"guide_components_rating-control_properties.md\":\"DKprnl0i\",\"guide_components_calendar-view_index.md\":\"zdoRYVx1\",\"guide_components_animated-icon_index.md\":\"yZDMzCFe\",\"guide_components_calendar-date-picker_emits.md\":\"D5OkfR8j\",\"guide_components_badge_index.md\":\"Bb4crrJn\",\"guide_components_image_index.md\":\"B7X6cWAZ\",\"guide_components_slider_index.md\":\"C7zZ2d-W\",\"guide_components_radio-group_index.md\":\"CVfh3h5H\",\"guide_components_swipe-control_index.md\":\"DwrDVPc1\",\"guide_components_color-picker_emits.md\":\"BHDXVtBQ\",\"guide_components_radio_index.md\":\"90as5QGp\",\"guide_components_pagination_properties.md\":\"JUAPvcTL\",\"guide_components_persona_properties.md\":\"DUTPhPMp\",\"guide_components_combo-box_emits.md\":\"Dh5R-qEv\",\"guide_components_pivot_emits.md\":\"BTJPgNpy\",\"guide_components_pagination_index.md\":\"CnW2zAht\",\"guide_components_flip-view_properties.md\":\"BqZ4hhgU\",\"guide_components_icon-element_emits.md\":\"D5TXFdTZ\",\"guide_components_flip-view_index.md\":\"DefnDOv6\",\"guide_components_navigation-panel_index.md\":\"6mO__sSK\",\"guide_components_rating-control_emits.md\":\"blvomSeC\",\"guide_components_icon-element_index.md\":\"DQ8K7JNn\",\"guide_components_navigation-view_index.md\":\"4AQRiz1k\",\"guide_components_toggle-switch_emits.md\":\"CLGzrNut\",\"guide_components_toggle-switch_index.md\":\"61en_q9-\",\"guide_components_scroll-story_index.md\":\"Vpgb1HSV\",\"guide_components_reveal-container_index.md\":\"Cut2r4tV\",\"guide_components_search-box_emits.md\":\"-d9sWNNt\",\"guide_components_search-box_properties.md\":\"DEKFfPFw\",\"guide_components_shimmer_emits.md\":\"CTMInlI3\",\"guide_components_tag_index.md\":\"BhhxkcHn\",\"guide_components_search-box_index.md\":\"DgkrY0oY\",\"guide_components_shimmer_index.md\":\"iZlHuTxw\",\"guide_components_shimmer_properties.md\":\"CdkU1o6H\",\"guide_components_tree-view_index.md\":\"CUrwan4q\",\"guide_components_text-field_index.md\":\"CXSimJtj\",\"guide_components_text-box_index.md\":\"C5moAPfB\",\"guide_components_progress-ring_properties.md\":\"Dc08Uiff\",\"guide_components_toggle-switch_properties.md\":\"tFppK_IS\",\"guide_components_radio-group_emits.md\":\"cEDzKVnN\",\"guide_components_collapse_index.md\":\"N9Iu5-2v\",\"guide_components_image_emits.md\":\"lmlz2xJd\",\"guide_components_callout_index.md\":\"D9RU33w6\",\"guide_components_pivot_index.md\":\"B_vwQL-5\",\"guide_components_command-bar_index.md\":\"Cp4_rrGB\",\"guide_components_pagination_emits.md\":\"Dng86A22\",\"guide_components_button_index.md\":\"7sqT2MQP\",\"guide_components_info-box_properties.md\":\"BI7Nvk-E\",\"guide_components_drop-down_emits.md\":\"BE95TdKW\",\"guide_components_expander_index.md\":\"BKgcUJzQ\",\"guide_components_message-bar_index.md\":\"AEtAWlF8\",\"guide_components_menu-flyout_index.md\":\"Csa7irPj\",\"guide_components_panel_index.md\":\"CsTu0bXo\",\"guide_components_panel_properties.md\":\"BaxoCYKq\",\"guide_components_progress-bar_emits.md\":\"BcwXUpsF\",\"guide_components_progress-bar_properties.md\":\"TxiS9ZMA\",\"guide_components_progress-ring_emits.md\":\"D2Y6hIZ9\",\"guide_components_color-picker_index.md\":\"DCc4ixcU\",\"guide_components_progress-ring_index.md\":\"CPb-ZEPE\",\"guide_components_color-picker_properties.md\":\"wcXK29Vl\",\"guide_components_time-picker_index.md\":\"CQJdRRaG\",\"guide_components_drop-down_properties.md\":\"Bwlkpr1q\",\"guide_components_infinite-scroll-view_index.md\":\"yAuD807x\",\"guide_components_check-box_index.md\":\"FYgdu4oq\",\"guide_components_progress-bar_index.md\":\"D8vHQw5V\",\"guide_components_combo-box_index.md\":\"DTyu3eNd\",\"guide_components_info-box_emits.md\":\"DlEwpkkq\",\"guide_components_drop-down_index.md\":\"BZzJZQWq\",\"guide_components_list-view_index.md\":\"BoYvMzb0\",\"guide_components_verify-box_properties.md\":\"CW6W8fFf\",\"guide_components_verify-box_index.md\":\"DwSB40wR\",\"guide_index.md\":\"Bndlt3sL\",\"guide_components_web-window_index.md\":\"Bxc8vEeI\",\"index.md\":\"MTRqI42u\",\"guide_components_combo-box_properties.md\":\"AWfHzV6x\",\"guide_components_combobox_emits.md\":\"CGB6WLt8\",\"guide_components_combobox_properties.md\":\"Bja0hMou\",\"guide_components_details-list_index.md\":\"CcgOCIyt\",\"guide_components_info-box_index.md\":\"vXh-_DsL\",\"guide_components_combobox_index.md\":\"CsPkY6YB\",\"guide_components_date-picker_index.md\":\"12vmUIup\",\"guide_components_flip-view_emits.md\":\"DCheHjDj\",\"guide_components_panel_emits.md\":\"DG0REDq8\",\"guide_components_breadcrumb_index.md\":\"DyDm7PeP\",\"guide_components_radio-group_properties.md\":\"BnPxoKsQ\",\"guide_components_persona_emits.md\":\"CnsDPKRU\",\"guide_components_pivot_properties.md\":\"BmoLpPi1\",\"guide_components_persona_index.md\":\"DT00jby4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vfluent3\",\"description\":\"A Vue3 component library for Fluent UI\",\"base\":\"/VFluent3/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"VFluent3\",\"footer\":{\"message\":\"MIT Licensed\",\"copyright\":\"Copyright © Creator SN - 2022\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/\"}],\"sidebar\":[{\"text\":\"Basic input\",\"collapsed\":true,\"items\":[{\"text\":\"Button\",\"link\":\"/guide/components/button/\"},{\"text\":\"CheckBox\",\"link\":\"/guide/components/check-box/\"},{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"},{\"text\":\"Combobox\",\"link\":\"/guide/components/combobox/\"},{\"text\":\"DetailsList\",\"link\":\"/guide/components/details-list/\"},{\"text\":\"DropDown\",\"link\":\"/guide/components/drop-down/\"},{\"text\":\"Radio\",\"link\":\"/guide/components/radio/\"},{\"text\":\"RadioGroup\",\"link\":\"/guide/components/radio-group/\"},{\"text\":\"RatingControl\",\"link\":\"/guide/components/rating-control/\"},{\"text\":\"Slider\",\"link\":\"/guide/components/slider/\"},{\"text\":\"ToggleSwitch\",\"link\":\"/guide/components/toggle-switch/\"},{\"text\":\"Tag\",\"link\":\"/guide/components/tag/\"}]},{\"text\":\"Collections\",\"collapsed\":true,\"items\":[{\"text\":\"FlipView\",\"link\":\"/guide/components/flip-view/\"},{\"text\":\"ListView\",\"link\":\"/guide/components/list-view/\"},{\"text\":\"TreeView\",\"link\":\"/guide/components/tree-view/\"}]},{\"text\":\"Date & Time\",\"collapsed\":true,\"items\":[{\"text\":\"CalendarDatePicker\",\"link\":\"/guide/components/calendar-date-picker/\"},{\"text\":\"CalendarView\",\"link\":\"/guide/components/calendar-view/\"},{\"text\":\"DatePicker\",\"link\":\"/guide/components/date-picker/\"},{\"text\":\"TimePicker\",\"link\":\"/guide/components/time-picker/\"}]},{\"text\":\"Dialogs & flyouts\",\"collapsed\":true,\"items\":[{\"text\":\"Callout\",\"link\":\"/guide/components/callout/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Layout\",\"collapsed\":true,\"items\":[{\"text\":\"Collapse\",\"link\":\"/guide/components/collapse/\"},{\"text\":\"Expander\",\"link\":\"/guide/components/expander/\"},{\"text\":\"Drawer\",\"link\":\"/guide/components/drawer/\"},{\"text\":\"Panel\",\"link\":\"/guide/components/panel/\"}]},{\"text\":\"Media\",\"collapsed\":true,\"items\":[{\"text\":\"Image\",\"link\":\"/guide/components/image/\"},{\"text\":\"Img\",\"link\":\"/guide/components/img/\"},{\"text\":\"ImgBox\",\"link\":\"/guide/components/img-box/\"},{\"text\":\"Persona\",\"link\":\"/guide/components/persona/\"}]},{\"text\":\"Menu & toolbars\",\"collapsed\":true,\"items\":[{\"text\":\"CommandBar\",\"link\":\"/guide/components/command-bar/\"},{\"text\":\"MenuFlyout\",\"link\":\"/guide/components/menu-flyout/\"},{\"text\":\"SwipeControl\",\"link\":\"/guide/components/swipe-control/\"}]},{\"text\":\"Navigation\",\"collapsed\":true,\"items\":[{\"text\":\"Breadcrumb\",\"link\":\"/guide/components/breadcrumb/\"},{\"text\":\"NavigationPanel\",\"link\":\"/guide/components/navigation-panel/\"},{\"text\":\"NavigationView\",\"link\":\"/guide/components/navigation-view/\"},{\"text\":\"Pivot\",\"link\":\"/guide/components/pivot/\"},{\"text\":\"Pagination\",\"link\":\"/guide/components/pagination/\"}]},{\"text\":\"Scrolling\",\"collapsed\":true,\"items\":[{\"text\":\"InfiniteScrollView\",\"link\":\"/guide/components/infinite-scroll-view/\"},{\"text\":\"ScrollStory\",\"link\":\"/guide/components/scroll-story/\"}]},{\"text\":\"Status & info\",\"collapsed\":true,\"items\":[{\"text\":\"Badge\",\"link\":\"/guide/components/badge/\"},{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"ProgressBar\",\"link\":\"/guide/components/progress-bar/\"},{\"text\":\"ProgressRing\",\"link\":\"/guide/components/progress-ring/\"}]},{\"text\":\"Styles\",\"collapsed\":true,\"items\":[{\"text\":\"AnimatedIcon\",\"link\":\"/guide/components/animated-icon/\"},{\"text\":\"IconElement\",\"link\":\"/guide/components/icon-element/\"},{\"text\":\"RevealContainer\",\"link\":\"/guide/components/reveal-container/\"},{\"text\":\"Shimmer\",\"link\":\"/guide/components/shimmer/\"}]},{\"text\":\"Text\",\"collapsed\":true,\"items\":[{\"text\":\"SearchBox\",\"link\":\"/guide/components/search-box/\"},{\"text\":\"TextBox\",\"link\":\"/guide/components/text-box/\"},{\"text\":\"TextField\",\"link\":\"/guide/components/text-field/\"},{\"text\":\"VerifyBox\",\"link\":\"/guide/components/verify-box/\"}]},{\"text\":\"Windowing\",\"collapsed\":true,\"items\":[{\"text\":\"WebWindow\",\"link\":\"/guide/components/web-window/\"}]},{\"text\":\"Global\",\"collapsed\":true,\"items\":[{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Advance\",\"collapsed\":true,\"items\":[{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
     
   </body>
 </html>
\ No newline at end of file
diff --git a/guide/components/progress-ring/index.html b/guide/components/progress-ring/index.html
index c359084..48cb7ae 100644
--- a/guide/components/progress-ring/index.html
+++ b/guide/components/progress-ring/index.html
@@ -1,64 +1,50 @@
 <!DOCTYPE html>
-<html lang="en-US">
+<html lang="en-US" dir="ltr">
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1">
     <title>ProgressRing | vfluent3</title>
     <meta name="description" content="A Vue3 component library for Fluent UI">
-    <link rel="stylesheet" href="/VFluent3/assets/style.0a1d87af.css">
-    <link rel="modulepreload" href="/VFluent3/assets/chunks/index.9dba9c16.js">
-    <link rel="modulepreload" href="/VFluent3/assets/app.d60fa8c3.js">
-    <link rel="modulepreload" href="/VFluent3/assets/guide_components_progress-ring_index.md.9a33542b.lean.js">
+    <meta name="generator" content="VitePress v1.0.0-rc.45">
+    <link rel="preload stylesheet" href="/VFluent3/assets/style.BabQegKX.css" as="style">
     
-    <script>(()=>{const e=localStorage.getItem("vitepress-theme-appearance"),a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script type="module" src="/VFluent3/assets/app.CSutcJ2E.js"></script>
+    <link rel="preload" href="/VFluent3/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/framework.DvIFzl91.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/theme.CgqFBnN_.js">
+    <link rel="modulepreload" href="/VFluent3/assets/guide_components_progress-ring_index.md.CPb-ZEPE.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
   </head>
   <body>
-    <div id="app"><div class="Layout" data-v-058b7495><!--[--><!--]--><!--[--><span tabindex="-1" data-v-bea91388></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-bea91388> Skip to content </a><!--]--><!----><header class="VPNav" data-v-058b7495 data-v-2a0a2738><div class="VPNavBar has-sidebar" data-v-2a0a2738 data-v-45c9f423><div class="container" data-v-45c9f423><div class="VPNavBarTitle has-sidebar" data-v-45c9f423 data-v-011600ce><a class="title" href="/VFluent3/" data-v-011600ce><!----><!--[-->VFluent3<!--]--></a></div><div class="content" data-v-45c9f423><!----><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-45c9f423 data-v-4da4371d><span id="main-nav-aria-label" class="visually-hidden" data-v-4da4371d>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" data-v-4da4371d data-v-66f8d518 data-v-4d08dd3a><!--[-->Home<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" data-v-4da4371d data-v-66f8d518 data-v-4d08dd3a><!--[-->Guide<!--]--><!----></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-45c9f423 data-v-bf1c94ca><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" data-v-bf1c94ca data-v-d0ee0df2 data-v-55b931a0><span class="check" data-v-55b931a0><span class="icon" data-v-55b931a0><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-d0ee0df2><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-d0ee0df2><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-45c9f423 data-v-7cece6ac data-v-37af1650><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-37af1650><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-37af1650><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-37af1650><div class="VPMenu" data-v-37af1650 data-v-17dc081b><!----><!--[--><!--[--><!----><div class="group" data-v-7cece6ac><div class="item appearance" data-v-7cece6ac><p class="label" data-v-7cece6ac>Appearance</p><div class="appearance-action" data-v-7cece6ac><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" data-v-7cece6ac data-v-d0ee0df2 data-v-55b931a0><span class="check" data-v-55b931a0><span class="icon" data-v-55b931a0><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-d0ee0df2><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-d0ee0df2><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-45c9f423 data-v-5484e669><span class="container" data-v-5484e669><span class="top" data-v-5484e669></span><span class="middle" data-v-5484e669></span><span class="bottom" data-v-5484e669></span></span></button></div></div></div><!----></header><div class="VPLocalNav" data-v-058b7495 data-v-f623cd72><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-f623cd72><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-f623cd72><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-f623cd72>Menu</span></button><a class="top-link" href="#" data-v-f623cd72> Return to top </a></div><aside class="VPSidebar" data-v-058b7495 data-v-3b8ec0c7><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-3b8ec0c7><span class="visually-hidden" id="sidebar-aria-label" data-v-3b8ec0c7> Sidebar Navigation </span><!--[--><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Basic</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/button/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Button</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/check-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>CheckBox</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/radio/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Radio</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/progress-bar/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ProgressBar</span><!--]--><!----></a><a class="VPLink link active" href="/VFluent3/guide/components/progress-ring/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ProgressRing</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/toggle-switch/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ToggleSwitch</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/img/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Img</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/text-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>TextBox</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/combo-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ComboBox</span><!--]--><!----></a><!--]--></div></section></div><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Global</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/message-bar/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>MessageBar</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/info-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>InfoBox</span><!--]--><!----></a><!--]--></div></section></div><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Advance</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/color-picker/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ColorPicker</span><!--]--><!----></a><!--]--></div></section></div><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-058b7495 data-v-564173e9><div class="VPDoc has-sidebar" data-v-564173e9 data-v-32b7ddf4><div class="container" data-v-32b7ddf4><div class="aside" data-v-32b7ddf4><div class="aside-curtain" data-v-32b7ddf4></div><div class="aside-container" data-v-32b7ddf4><div class="aside-content" data-v-32b7ddf4><div class="VPDocAside" data-v-32b7ddf4 data-v-35c1bae1><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline has-outline" data-v-35c1bae1 data-v-123cce62><div class="content" data-v-123cce62><div class="outline-marker" data-v-123cce62></div><div class="outline-title" data-v-123cce62>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-123cce62><span class="visually-hidden" id="doc-outline-aria-label" data-v-123cce62> Table of Contents for current page </span><ul class="root" data-v-123cce62><!--[--><li style="" data-v-123cce62><a class="outline-link" href="#quick-start" data-v-123cce62>Quick Start</a><!----></li><li style="" data-v-123cce62><a class="outline-link" href="#properties" data-v-123cce62>Properties</a><!----></li><li style="" data-v-123cce62><a class="outline-link" href="#emits" data-v-123cce62>Emits</a><!----></li><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-35c1bae1></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-32b7ddf4><div class="content-container" data-v-32b7ddf4><!--[--><!--]--><main class="main" data-v-32b7ddf4><div style="position:relative;" class="vp-doc _VFluent3_guide_components_progress-ring_index" data-v-32b7ddf4><div><h1 id="progressring" tabindex="-1">ProgressRing <a class="header-anchor" href="#progressring" aria-hidden="true">#</a></h1><h2 id="quick-start" tabindex="-1">Quick Start <a class="header-anchor" href="#quick-start" aria-hidden="true">#</a></h2><p>STATE: running</p><hr><div class="fv-radio light active"><label class="label"><!----><input checked type="radio" class="radio" value="running" name="state" checked><div class="icon" style="border-width:1.5px;"><div style="" class="dot"></div></div><span class="text" style=""><!--[-->Running<!--]--></span></label></div><div class="fv-radio light"><label class="label"><!----><input type="radio" class="radio" value="pause" name="state"><div class="icon" style="border-width:1.5px;"><div style="display:none;" class="dot"></div></div><span class="text" style=""><!--[-->Pause<!--]--></span></label></div><div class="fv-radio light"><label class="label"><!----><input type="radio" class="radio" value="error" name="state"><div class="icon" style="border-width:1.5px;"><div style="display:none;" class="dot"></div></div><span class="text" style=""><!--[-->Error<!--]--></span></label></div><h3 id="default" tabindex="-1">Default <a class="header-anchor" href="#default" aria-hidden="true">#</a></h3><hr><div class="fv-progress-ring light determinate running" style="--fv-progress-ring-value:0.7000000000000001;--fv-progress-ring-size:60px;--fv-progress-ring-border-width:5px;"><label class="label"><progress class="progress" value="70" max="100"></progress><svg class="svg"><circle cx="50%" cy="50%" r="calc(50% - 5px)" class="bar"></circle></svg></label></div> 70% <div class="language-vue-html"><span class="copy"></span><div class="highlight-lines"><br><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><br><br><br><br></div><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-progress-ring</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">v-model</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">change</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">onChange</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">loaded</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">onLoaded</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">max</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#F78C6C;">100</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">pause</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">state</span><span style="color:#89DDFF;">===</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">pause</span><span style="color:#89DDFF;">&#39;&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">error</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">state</span><span style="color:#89DDFF;">===</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">error</span><span style="color:#89DDFF;">&#39;&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    /&gt;</span><span style="color:#A6ACCD;"> </span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><h3 id="indeterminate" tabindex="-1">Indeterminate <a class="header-anchor" href="#indeterminate" aria-hidden="true">#</a></h3><hr><div class="fv-progress-ring light indeterminate running" style="--fv-progress-ring-size:60px;--fv-progress-ring-border-width:5px;"><label class="label"><progress class="progress" value="0" max="100"></progress><svg class="svg"><circle cx="50%" cy="50%" r="calc(50% - 5px)" class="bar"></circle></svg></label></div><div class="language-vue-html"><span class="copy"></span><div class="highlight-lines"><br><div class="highlighted"> </div><br><br><br><br><br></div><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-progress-ring</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">indeterminate</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">pause</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">state</span><span style="color:#89DDFF;">===</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">pause</span><span style="color:#89DDFF;">&#39;&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">error</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">state</span><span style="color:#89DDFF;">===</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">error</span><span style="color:#89DDFF;">&#39;&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">    /&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h3 id="custom" tabindex="-1">Custom <a class="header-anchor" href="#custom" aria-hidden="true">#</a></h3><hr><ol><li>indeterminate</li></ol><div class="fv-progress-ring light indeterminate running" style="--fv-progress-ring-size:60px;--fv-progress-ring-border-width:5px;--fv-progress-ring-primary-color:rgba(0, 204, 153, 1);--fv-progress-ring-pause-color:rgba(229, 0, 249, 1);--fv-progress-ring-error-color:rgba(249, 201, 0, 1);"><label class="label"><progress class="progress" value="0" max="100"></progress><svg class="svg"><circle cx="50%" cy="50%" r="calc(50% - 5px)" class="bar"></circle></svg></label></div><div class="language-vue-html"><span class="copy"></span><div class="highlight-lines"><br><br><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><br><br><br><br><br></div><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-progress-ring</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">indeterminate</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">pause-foreground</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">rgba(229, 0, 249, 1)</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">error-foreground</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">rgba(249, 201, 0, 1)</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">foreground</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">rgba(0, 204, 153, 1)</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">pause</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">state</span><span style="color:#89DDFF;">===</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">pause</span><span style="color:#89DDFF;">&#39;&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">error</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">state</span><span style="color:#89DDFF;">===</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">error</span><span style="color:#89DDFF;">&#39;&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">    /&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><ol start="2"><li>determinate</li></ol><div class="fv-progress-ring light determinate running" style="--fv-progress-ring-value:0.7000000000000001;--fv-progress-ring-size:60px;--fv-progress-ring-border-width:5px;--fv-progress-ring-primary-color:rgba(0, 204, 153, 1);--fv-progress-ring-pause-color:rgba(229, 0, 249, 1);--fv-progress-ring-error-color:rgba(249, 201, 0, 1);" background="rgba(0,0,0,1)"><label class="label"><progress class="progress" value="70" max="100"></progress><svg class="svg"><circle cx="50%" cy="50%" r="calc(50% - 5px)" class="bar"></circle></svg></label></div> 70% <div class="language-vue-html"><span class="copy"></span><div class="highlight-lines"><br><br><br><br><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><br><br><br><br></div><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-progress-ring</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">v-model</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">max</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#F78C6C;">100</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">pause-foreground</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">rgba(229, 0, 249, 1)</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">error-foreground</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">rgba(249, 201, 0, 1)</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">foreground</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">rgba(0, 204, 153, 1)</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">background</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">rgba(0,0,0,1)</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">pause</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">state</span><span style="color:#89DDFF;">===</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">pause</span><span style="color:#89DDFF;">&#39;&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">error</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">state</span><span style="color:#89DDFF;">===</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">error</span><span style="color:#89DDFF;">&#39;&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    /&gt;</span><span style="color:#A6ACCD;"> </span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><ol start="3"><li>max size</li></ol><div class="fv-progress-ring light indeterminate running" style="--fv-progress-ring-size:100px;--fv-progress-ring-border-width:8px;"><label class="label"><progress class="progress" value="0" max="100"></progress><svg class="svg"><circle cx="50%" cy="50%" r="calc(50% - 8px)" class="bar"></circle></svg></label></div><div class="language-vue-html"><span class="copy"></span><div class="highlight-lines"><br><div class="highlighted"> </div><div class="highlighted"> </div><br><br><br><br><br><br></div><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-progress-ring</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">width</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#F78C6C;">100</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">border-width</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#F78C6C;">8</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">indeterminate</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">pause</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">state</span><span style="color:#89DDFF;">===</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">pause</span><span style="color:#89DDFF;">&#39;&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">error</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">state</span><span style="color:#89DDFF;">===</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">error</span><span style="color:#89DDFF;">&#39;&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">  </span></span>
-<span class="line"><span style="color:#89DDFF;">    /&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">border-width</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">5</td><td style="text-align:center;">circle border width</td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">disabled</td></tr><tr><td style="text-align:center;">error</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">error state</td></tr><tr><td style="text-align:center;">error-foreground</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">error state circle color</td></tr><tr><td style="text-align:center;">foreground</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">circle color</td></tr><tr><td style="text-align:center;">indeterminate</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">indeterminate state</td></tr><tr><td style="text-align:center;">lang</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">i18n</td></tr><tr><td style="text-align:center;">max</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">100</td><td style="text-align:center;">same as progress max property</td></tr><tr><td style="text-align:center;">model-value</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">v-model</td></tr><tr><td style="text-align:center;">pause</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">pause state</td></tr><tr><td style="text-align:center;">pause-foreground</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">pause state circle color</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">[&#39;light&#39;, &#39;dark&#39;, &#39;global&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">theme</td></tr><tr><td style="text-align:center;">width</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">60</td><td style="text-align:center;">circle width</td></tr></tbody></table><h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">change</td><td style="text-align:center;">val[number]</td><td style="text-align:center;">onchange</td></tr><tr><td style="text-align:center;">loaded</td><td style="text-align:center;">val[number]</td><td style="text-align:center;">onloaded</td></tr><tr><td style="text-align:center;">update:model-value</td><td style="text-align:center;">val[number]</td><td style="text-align:center;">v-model</td></tr></tbody></table></div></div></main><footer class="VPDocFooter" data-v-32b7ddf4 data-v-cfaa3a6c><div class="edit-info" data-v-cfaa3a6c><!----><!----></div><div class="prev-next" data-v-cfaa3a6c><div class="pager" data-v-cfaa3a6c><a class="pager-link prev" href="/VFluent3/guide/components/progress-bar/" data-v-cfaa3a6c><span class="desc" data-v-cfaa3a6c>Previous page</span><span class="title" data-v-cfaa3a6c>ProgressBar</span></a></div><div class="has-prev pager" data-v-cfaa3a6c><a class="pager-link next" href="/VFluent3/guide/components/toggle-switch/" data-v-cfaa3a6c><span class="desc" data-v-cfaa3a6c>Next page</span><span class="title" data-v-cfaa3a6c>ToggleSwitch</span></a></div></div></footer><!--[--><!--]--></div></div></div></div></div><footer class="VPFooter has-sidebar" data-v-058b7495 data-v-a6c8dde4><div class="container" data-v-a6c8dde4><p class="message" data-v-a6c8dde4>MIT Licensed</p><p class="copyright" data-v-a6c8dde4>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
-    <script>__VP_HASH_MAP__ = JSON.parse("{\"guide_components_button_emits.md\":\"d682bf18\",\"guide_components_button_index.md\":\"23a8eb54\",\"guide_components_button_properties.md\":\"cd4004b6\",\"guide_components_check-box_emits.md\":\"31609794\",\"guide_components_check-box_index.md\":\"32046814\",\"guide_components_check-box_properties.md\":\"8f33ac0c\",\"guide_components_color-picker_emits.md\":\"00983cd0\",\"guide_components_color-picker_index.md\":\"b2d62612\",\"guide_components_color-picker_properties.md\":\"5466ba72\",\"guide_components_combo-box_emits.md\":\"d5ffda50\",\"guide_components_combo-box_index.md\":\"1c4364f5\",\"guide_components_combo-box_properties.md\":\"2e1d6060\",\"guide_components_img_emits.md\":\"6237adb4\",\"guide_components_img_index.md\":\"fa51a3a1\",\"guide_components_img_properties.md\":\"8d321b5e\",\"guide_components_info-box_emits.md\":\"c2e71eec\",\"guide_components_info-box_index.md\":\"06175fed\",\"guide_components_info-box_properties.md\":\"314dbb00\",\"guide_components_message-bar_emits.md\":\"e89a5a22\",\"guide_components_message-bar_index.md\":\"3f0b01d6\",\"guide_components_message-bar_properties.md\":\"ee3838d9\",\"guide_components_progress-bar_emits.md\":\"5b611e3b\",\"guide_components_progress-bar_index.md\":\"689c3241\",\"guide_components_progress-bar_properties.md\":\"39af7fb2\",\"guide_components_progress-ring_emits.md\":\"67e4644e\",\"guide_components_progress-ring_index.md\":\"9a33542b\",\"guide_components_progress-ring_properties.md\":\"c897c4bb\",\"guide_components_radio_emits.md\":\"28506857\",\"guide_components_radio_index.md\":\"e5a479ce\",\"guide_components_radio_properties.md\":\"f8e55d2f\",\"guide_components_text-box_emits.md\":\"0bf89ef8\",\"guide_components_text-box_index.md\":\"7ccfc637\",\"guide_components_text-box_properties.md\":\"aab3a89e\",\"guide_components_toggle-switch_emits.md\":\"5146435f\",\"guide_components_toggle-switch_index.md\":\"8be48081\",\"guide_components_toggle-switch_properties.md\":\"54984c3a\",\"guide_index.md\":\"e3dca1d7\",\"index.md\":\"1e9773d5\"}")</script>
-    <script type="module" async src="/VFluent3/assets/app.d60fa8c3.js"></script>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-19c990f1><div class="wrapper" data-v-19c990f1><div class="container" data-v-19c990f1><div class="title" data-v-19c990f1><div class="VPNavBarTitle has-sidebar" data-v-19c990f1 data-v-ab179fa1><a class="title" href="/VFluent3/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>VFluent3</span><!--[--><!--]--></a></div></div><div class="content" data-v-19c990f1><div class="content-body" data-v-19c990f1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-19c990f1><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-19c990f1 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Guide</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-19c990f1 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-19c990f1 data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-19c990f1 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-19c990f1><div class="divider-line" data-v-19c990f1></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-d2ecc192><button data-v-d2ecc192>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-575e6a36><div class="curtain" data-v-575e6a36></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-575e6a36><span class="visually-hidden" id="sidebar-aria-label" data-v-575e6a36> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Basic input</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/button/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/check-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CheckBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/combobox/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Combobox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/details-list/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DetailsList</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drop-down/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DropDown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio-group/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RadioGroup</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/rating-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RatingControl</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/slider/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/toggle-switch/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ToggleSwitch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tag/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Tag</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Collections</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/flip-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>FlipView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/list-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ListView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tree-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TreeView</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Date & Time</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarDatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/time-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TimePicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Dialogs & flyouts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/callout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Callout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Layout</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/collapse/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Collapse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/expander/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Expander</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drawer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Panel</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Media</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/image/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Img</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ImgBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/persona/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Persona</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Menu & toolbars</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/command-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CommandBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/menu-flyout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MenuFlyout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/swipe-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SwipeControl</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Navigation</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/breadcrumb/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationPanel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pivot/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pivot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pagination/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pagination</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Scrolling</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/infinite-scroll-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfiniteScrollView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/scroll-story/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ScrollStory</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible has-active" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Status & info</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/badge/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-ring/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressRing</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Styles</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/animated-icon/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>AnimatedIcon</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/icon-element/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>IconElement</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/reveal-container/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RevealContainer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/shimmer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Shimmer</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Text</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/search-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SearchBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-field/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextField</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/verify-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>VerifyBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Windowing</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/web-window/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>WebWindow</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Global</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Advance</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-935f8a84><div class="content" data-v-935f8a84><div class="outline-marker" data-v-935f8a84></div><div class="outline-title" role="heading" aria-level="2" data-v-935f8a84>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-935f8a84><span class="visually-hidden" id="doc-outline-aria-label" data-v-935f8a84> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-935f8a84 data-v-b933a997><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _VFluent3_guide_components_progress-ring_" data-v-39a288b8><div><h3 id="progressring-demo" tabindex="-1">ProgressRing-DEMO <a class="header-anchor" href="#progressring-demo" aria-label="Permalink to &quot;ProgressRing-DEMO&quot;">​</a></h3><hr><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-progressRing</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> loading</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;true&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-progressRing</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-progressRing</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> loading</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;true&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> r</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;20&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> borderWidth</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;5&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-progressRing</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-progressRing</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> loading</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;true&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> r</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;10&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> borderWidth</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;2&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-progressRing</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="default-progressring" tabindex="-1">Default ProgressRing <a class="header-anchor" href="#default-progressring" aria-label="Permalink to &quot;Default ProgressRing&quot;">​</a></h3><hr><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-progressRing</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">percent[</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-progressRing</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-progressRing</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">percent[</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> r</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;20&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> borderWidth</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;5&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-progressRing</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-progressRing</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">percent[</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> r</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;10&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> borderWidth</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;2&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-progressRing</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="indeterminate-progressring" tabindex="-1">Indeterminate ProgressRing <a class="header-anchor" href="#indeterminate-progressring" aria-label="Permalink to &quot;Indeterminate ProgressRing&quot;">​</a></h3><hr><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-progressRing</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> loading</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;true&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-progressRing</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="progressring-legacy" tabindex="-1">ProgressRing Legacy <a class="header-anchor" href="#progressring-legacy" aria-label="Permalink to &quot;ProgressRing Legacy&quot;">​</a></h3><hr><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-progressRing</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">legacy</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-progressRing</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="different-size-legacy" tabindex="-1">Different Size(Legacy) <a class="header-anchor" href="#different-size-legacy" aria-label="Permalink to &quot;Different Size(Legacy)&quot;">​</a></h3><hr><!----><div class="fv-ProgressRing light" style="width:80px;height:80px;"><svg style="display:none;" width="80px" height="80px" class="svg"><circle r="32" cy="40" cx="40" stroke-width="8" stroke="rgba(204, 204, 204, 1)" stroke-linejoin="round" stroke-linecap="round" fill="none"></circle><circle class="progress-rotate" r="32" cy="40" cx="40" stroke-width="8" stroke="rgba(0, 90, 158, 1)" stroke-linejoin="round" stroke-linecap="round" fill="none" stroke-dashoffset="201.06px" stroke-dasharray="201.06px" style="transform:rotate(-90deg);"></circle></svg><div class="fv-progressRing-legacy s" style=""><!--[--><p style="background:;"></p><p style="background:;"></p><p style="background:;"></p><p style="background:;"></p><p style="background:;"></p><!--]--></div></div><!----><div class="fv-ProgressRing light" style="width:80px;height:80px;"><svg style="display:none;" width="80px" height="80px" class="svg"><circle r="32" cy="40" cx="40" stroke-width="8" stroke="rgba(204, 204, 204, 1)" stroke-linejoin="round" stroke-linecap="round" fill="none"></circle><circle class="progress-rotate" r="32" cy="40" cx="40" stroke-width="8" stroke="rgba(0, 90, 158, 1)" stroke-linejoin="round" stroke-linecap="round" fill="none" stroke-dashoffset="201.06px" stroke-dasharray="201.06px" style="transform:rotate(-90deg);"></circle></svg><div class="fv-progressRing-legacy l" style=""><!--[--><p style="background:;"></p><p style="background:;"></p><p style="background:;"></p><p style="background:;"></p><p style="background:;"></p><!--]--></div></div><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">ClientOnly</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;fv-progressRing size=&quot;xs&quot; :legacy=&quot;true&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/fv-progressRing&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">ClientOnly</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-progressRing</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> size</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;s&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">legacy</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-progressRing</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">ClientOnly</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;fv-progressRing size=&quot;m&quot; :legacy=&quot;true&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/fv-progressRing&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">ClientOnly</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-progressRing</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> size</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;l&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">legacy</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-progressRing</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br></div></div><h3 id="progressbar-custom-style" tabindex="-1">ProgressBar Custom Style <a class="header-anchor" href="#progressbar-custom-style" aria-label="Permalink to &quot;ProgressBar Custom Style&quot;">​</a></h3><hr><ol><li>Custom Foreground</li></ol><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-progressRing</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">percent[</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rgba(0, 204, 153, 1)&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-progressRing</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><ol start="2"><li>Custom Background</li></ol><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-progressRing</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">percent[</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">3</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rgba(0, 204, 153, 0.6)&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-progressRing</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">value</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">0</td><td style="text-align:center;">progressRing value</td></tr><tr><td style="text-align:center;">size</td><td style="text-align:center;">[&#39;l&#39;,&#39;m&#39;,&#39;s&#39;,&#39;xs&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">xs</td><td style="text-align:center;">The size of progress ring, only works on legacy versions</td></tr><tr><td style="text-align:center;">r</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">40</td><td style="text-align:center;">Radius of the ProgressRing</td></tr><tr><td style="text-align:center;">loading</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">Is progressRing indeterminate</td></tr><tr><td style="text-align:center;">color</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">rgba(0, 90, 158, 1)</td><td style="text-align:center;">The color of progress ring</td></tr><tr><td style="text-align:center;">background</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">rgba(204, 204, 204, 1)</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">borderWidth</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">8</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">legacy</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">Use the legacy version of ProgressRing</td></tr></tbody></table></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-09de1c0f><!--[--><!--]--><!----><nav class="prev-next" data-v-09de1c0f><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link prev" href="/VFluent3/guide/components/progress-bar/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Previous page</span><span class="title" data-v-09de1c0f>ProgressBar</span><!--]--></a></div><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link next" href="/VFluent3/guide/components/animated-icon/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Next page</span><span class="title" data-v-09de1c0f>AnimatedIcon</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>MIT Licensed</p><p class="copyright" data-v-e315a0ad>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_calendar-date-picker_properties.md\":\"DXRjmMG8\",\"guide_components_image_properties.md\":\"DGanRzCb\",\"guide_components_img-box_index.md\":\"DYtggkf_\",\"guide_components_img_emits.md\":\"BlE7jvZQ\",\"guide_components_img_index.md\":\"Bm9FiuU4\",\"guide_components_icon-element_properties.md\":\"8Oakruwc\",\"guide_components_img_properties.md\":\"B42YSocI\",\"guide_components_drawer_index.md\":\"D_vpnCpE\",\"guide_components_verify-box_emits.md\":\"DT17Iazx\",\"guide_components_calendar-date-picker_index.md\":\"BdHjrurh\",\"guide_components_rating-control_index.md\":\"Q9l5Lfrr\",\"guide_components_rating-control_properties.md\":\"DKprnl0i\",\"guide_components_calendar-view_index.md\":\"zdoRYVx1\",\"guide_components_animated-icon_index.md\":\"yZDMzCFe\",\"guide_components_calendar-date-picker_emits.md\":\"D5OkfR8j\",\"guide_components_badge_index.md\":\"Bb4crrJn\",\"guide_components_image_index.md\":\"B7X6cWAZ\",\"guide_components_slider_index.md\":\"C7zZ2d-W\",\"guide_components_radio-group_index.md\":\"CVfh3h5H\",\"guide_components_swipe-control_index.md\":\"DwrDVPc1\",\"guide_components_color-picker_emits.md\":\"BHDXVtBQ\",\"guide_components_radio_index.md\":\"90as5QGp\",\"guide_components_pagination_properties.md\":\"JUAPvcTL\",\"guide_components_persona_properties.md\":\"DUTPhPMp\",\"guide_components_combo-box_emits.md\":\"Dh5R-qEv\",\"guide_components_pivot_emits.md\":\"BTJPgNpy\",\"guide_components_pagination_index.md\":\"CnW2zAht\",\"guide_components_flip-view_properties.md\":\"BqZ4hhgU\",\"guide_components_icon-element_emits.md\":\"D5TXFdTZ\",\"guide_components_flip-view_index.md\":\"DefnDOv6\",\"guide_components_navigation-panel_index.md\":\"6mO__sSK\",\"guide_components_rating-control_emits.md\":\"blvomSeC\",\"guide_components_icon-element_index.md\":\"DQ8K7JNn\",\"guide_components_navigation-view_index.md\":\"4AQRiz1k\",\"guide_components_toggle-switch_emits.md\":\"CLGzrNut\",\"guide_components_toggle-switch_index.md\":\"61en_q9-\",\"guide_components_scroll-story_index.md\":\"Vpgb1HSV\",\"guide_components_reveal-container_index.md\":\"Cut2r4tV\",\"guide_components_search-box_emits.md\":\"-d9sWNNt\",\"guide_components_search-box_properties.md\":\"DEKFfPFw\",\"guide_components_shimmer_emits.md\":\"CTMInlI3\",\"guide_components_tag_index.md\":\"BhhxkcHn\",\"guide_components_search-box_index.md\":\"DgkrY0oY\",\"guide_components_shimmer_index.md\":\"iZlHuTxw\",\"guide_components_shimmer_properties.md\":\"CdkU1o6H\",\"guide_components_tree-view_index.md\":\"CUrwan4q\",\"guide_components_text-field_index.md\":\"CXSimJtj\",\"guide_components_text-box_index.md\":\"C5moAPfB\",\"guide_components_progress-ring_properties.md\":\"Dc08Uiff\",\"guide_components_toggle-switch_properties.md\":\"tFppK_IS\",\"guide_components_radio-group_emits.md\":\"cEDzKVnN\",\"guide_components_collapse_index.md\":\"N9Iu5-2v\",\"guide_components_image_emits.md\":\"lmlz2xJd\",\"guide_components_callout_index.md\":\"D9RU33w6\",\"guide_components_pivot_index.md\":\"B_vwQL-5\",\"guide_components_command-bar_index.md\":\"Cp4_rrGB\",\"guide_components_pagination_emits.md\":\"Dng86A22\",\"guide_components_button_index.md\":\"7sqT2MQP\",\"guide_components_info-box_properties.md\":\"BI7Nvk-E\",\"guide_components_drop-down_emits.md\":\"BE95TdKW\",\"guide_components_expander_index.md\":\"BKgcUJzQ\",\"guide_components_message-bar_index.md\":\"AEtAWlF8\",\"guide_components_menu-flyout_index.md\":\"Csa7irPj\",\"guide_components_panel_index.md\":\"CsTu0bXo\",\"guide_components_panel_properties.md\":\"BaxoCYKq\",\"guide_components_progress-bar_emits.md\":\"BcwXUpsF\",\"guide_components_progress-bar_properties.md\":\"TxiS9ZMA\",\"guide_components_progress-ring_emits.md\":\"D2Y6hIZ9\",\"guide_components_color-picker_index.md\":\"DCc4ixcU\",\"guide_components_progress-ring_index.md\":\"CPb-ZEPE\",\"guide_components_color-picker_properties.md\":\"wcXK29Vl\",\"guide_components_time-picker_index.md\":\"CQJdRRaG\",\"guide_components_drop-down_properties.md\":\"Bwlkpr1q\",\"guide_components_infinite-scroll-view_index.md\":\"yAuD807x\",\"guide_components_check-box_index.md\":\"FYgdu4oq\",\"guide_components_progress-bar_index.md\":\"D8vHQw5V\",\"guide_components_combo-box_index.md\":\"DTyu3eNd\",\"guide_components_info-box_emits.md\":\"DlEwpkkq\",\"guide_components_drop-down_index.md\":\"BZzJZQWq\",\"guide_components_list-view_index.md\":\"BoYvMzb0\",\"guide_components_verify-box_properties.md\":\"CW6W8fFf\",\"guide_components_verify-box_index.md\":\"DwSB40wR\",\"guide_index.md\":\"Bndlt3sL\",\"guide_components_web-window_index.md\":\"Bxc8vEeI\",\"index.md\":\"MTRqI42u\",\"guide_components_combo-box_properties.md\":\"AWfHzV6x\",\"guide_components_combobox_emits.md\":\"CGB6WLt8\",\"guide_components_combobox_properties.md\":\"Bja0hMou\",\"guide_components_details-list_index.md\":\"CcgOCIyt\",\"guide_components_info-box_index.md\":\"vXh-_DsL\",\"guide_components_combobox_index.md\":\"CsPkY6YB\",\"guide_components_date-picker_index.md\":\"12vmUIup\",\"guide_components_flip-view_emits.md\":\"DCheHjDj\",\"guide_components_panel_emits.md\":\"DG0REDq8\",\"guide_components_breadcrumb_index.md\":\"DyDm7PeP\",\"guide_components_radio-group_properties.md\":\"BnPxoKsQ\",\"guide_components_persona_emits.md\":\"CnsDPKRU\",\"guide_components_pivot_properties.md\":\"BmoLpPi1\",\"guide_components_persona_index.md\":\"DT00jby4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vfluent3\",\"description\":\"A Vue3 component library for Fluent UI\",\"base\":\"/VFluent3/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"VFluent3\",\"footer\":{\"message\":\"MIT Licensed\",\"copyright\":\"Copyright © Creator SN - 2022\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/\"}],\"sidebar\":[{\"text\":\"Basic input\",\"collapsed\":true,\"items\":[{\"text\":\"Button\",\"link\":\"/guide/components/button/\"},{\"text\":\"CheckBox\",\"link\":\"/guide/components/check-box/\"},{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"},{\"text\":\"Combobox\",\"link\":\"/guide/components/combobox/\"},{\"text\":\"DetailsList\",\"link\":\"/guide/components/details-list/\"},{\"text\":\"DropDown\",\"link\":\"/guide/components/drop-down/\"},{\"text\":\"Radio\",\"link\":\"/guide/components/radio/\"},{\"text\":\"RadioGroup\",\"link\":\"/guide/components/radio-group/\"},{\"text\":\"RatingControl\",\"link\":\"/guide/components/rating-control/\"},{\"text\":\"Slider\",\"link\":\"/guide/components/slider/\"},{\"text\":\"ToggleSwitch\",\"link\":\"/guide/components/toggle-switch/\"},{\"text\":\"Tag\",\"link\":\"/guide/components/tag/\"}]},{\"text\":\"Collections\",\"collapsed\":true,\"items\":[{\"text\":\"FlipView\",\"link\":\"/guide/components/flip-view/\"},{\"text\":\"ListView\",\"link\":\"/guide/components/list-view/\"},{\"text\":\"TreeView\",\"link\":\"/guide/components/tree-view/\"}]},{\"text\":\"Date & Time\",\"collapsed\":true,\"items\":[{\"text\":\"CalendarDatePicker\",\"link\":\"/guide/components/calendar-date-picker/\"},{\"text\":\"CalendarView\",\"link\":\"/guide/components/calendar-view/\"},{\"text\":\"DatePicker\",\"link\":\"/guide/components/date-picker/\"},{\"text\":\"TimePicker\",\"link\":\"/guide/components/time-picker/\"}]},{\"text\":\"Dialogs & flyouts\",\"collapsed\":true,\"items\":[{\"text\":\"Callout\",\"link\":\"/guide/components/callout/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Layout\",\"collapsed\":true,\"items\":[{\"text\":\"Collapse\",\"link\":\"/guide/components/collapse/\"},{\"text\":\"Expander\",\"link\":\"/guide/components/expander/\"},{\"text\":\"Drawer\",\"link\":\"/guide/components/drawer/\"},{\"text\":\"Panel\",\"link\":\"/guide/components/panel/\"}]},{\"text\":\"Media\",\"collapsed\":true,\"items\":[{\"text\":\"Image\",\"link\":\"/guide/components/image/\"},{\"text\":\"Img\",\"link\":\"/guide/components/img/\"},{\"text\":\"ImgBox\",\"link\":\"/guide/components/img-box/\"},{\"text\":\"Persona\",\"link\":\"/guide/components/persona/\"}]},{\"text\":\"Menu & toolbars\",\"collapsed\":true,\"items\":[{\"text\":\"CommandBar\",\"link\":\"/guide/components/command-bar/\"},{\"text\":\"MenuFlyout\",\"link\":\"/guide/components/menu-flyout/\"},{\"text\":\"SwipeControl\",\"link\":\"/guide/components/swipe-control/\"}]},{\"text\":\"Navigation\",\"collapsed\":true,\"items\":[{\"text\":\"Breadcrumb\",\"link\":\"/guide/components/breadcrumb/\"},{\"text\":\"NavigationPanel\",\"link\":\"/guide/components/navigation-panel/\"},{\"text\":\"NavigationView\",\"link\":\"/guide/components/navigation-view/\"},{\"text\":\"Pivot\",\"link\":\"/guide/components/pivot/\"},{\"text\":\"Pagination\",\"link\":\"/guide/components/pagination/\"}]},{\"text\":\"Scrolling\",\"collapsed\":true,\"items\":[{\"text\":\"InfiniteScrollView\",\"link\":\"/guide/components/infinite-scroll-view/\"},{\"text\":\"ScrollStory\",\"link\":\"/guide/components/scroll-story/\"}]},{\"text\":\"Status & info\",\"collapsed\":true,\"items\":[{\"text\":\"Badge\",\"link\":\"/guide/components/badge/\"},{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"ProgressBar\",\"link\":\"/guide/components/progress-bar/\"},{\"text\":\"ProgressRing\",\"link\":\"/guide/components/progress-ring/\"}]},{\"text\":\"Styles\",\"collapsed\":true,\"items\":[{\"text\":\"AnimatedIcon\",\"link\":\"/guide/components/animated-icon/\"},{\"text\":\"IconElement\",\"link\":\"/guide/components/icon-element/\"},{\"text\":\"RevealContainer\",\"link\":\"/guide/components/reveal-container/\"},{\"text\":\"Shimmer\",\"link\":\"/guide/components/shimmer/\"}]},{\"text\":\"Text\",\"collapsed\":true,\"items\":[{\"text\":\"SearchBox\",\"link\":\"/guide/components/search-box/\"},{\"text\":\"TextBox\",\"link\":\"/guide/components/text-box/\"},{\"text\":\"TextField\",\"link\":\"/guide/components/text-field/\"},{\"text\":\"VerifyBox\",\"link\":\"/guide/components/verify-box/\"}]},{\"text\":\"Windowing\",\"collapsed\":true,\"items\":[{\"text\":\"WebWindow\",\"link\":\"/guide/components/web-window/\"}]},{\"text\":\"Global\",\"collapsed\":true,\"items\":[{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Advance\",\"collapsed\":true,\"items\":[{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
     
   </body>
 </html>
\ No newline at end of file
diff --git a/guide/components/progress-ring/properties.html b/guide/components/progress-ring/properties.html
index d123c63..f400cb3 100644
--- a/guide/components/progress-ring/properties.html
+++ b/guide/components/progress-ring/properties.html
@@ -1,20 +1,24 @@
 <!DOCTYPE html>
-<html lang="en-US">
+<html lang="en-US" dir="ltr">
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>Properties | vfluent3</title>
+    <title>vfluent3</title>
     <meta name="description" content="A Vue3 component library for Fluent UI">
-    <link rel="stylesheet" href="/VFluent3/assets/style.0a1d87af.css">
-    <link rel="modulepreload" href="/VFluent3/assets/app.d60fa8c3.js">
-    <link rel="modulepreload" href="/VFluent3/assets/guide_components_progress-ring_properties.md.c897c4bb.lean.js">
+    <meta name="generator" content="VitePress v1.0.0-rc.45">
+    <link rel="preload stylesheet" href="/VFluent3/assets/style.BabQegKX.css" as="style">
     
-    <script>(()=>{const e=localStorage.getItem("vitepress-theme-appearance"),a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script type="module" src="/VFluent3/assets/app.CSutcJ2E.js"></script>
+    <link rel="preload" href="/VFluent3/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/framework.DvIFzl91.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/theme.CgqFBnN_.js">
+    <link rel="modulepreload" href="/VFluent3/assets/guide_components_progress-ring_properties.md.Dc08Uiff.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
   </head>
   <body>
-    <div id="app"><div class="Layout" data-v-058b7495><!--[--><!--]--><!--[--><span tabindex="-1" data-v-bea91388></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-bea91388> Skip to content </a><!--]--><!----><header class="VPNav" data-v-058b7495 data-v-2a0a2738><div class="VPNavBar has-sidebar" data-v-2a0a2738 data-v-45c9f423><div class="container" data-v-45c9f423><div class="VPNavBarTitle has-sidebar" data-v-45c9f423 data-v-011600ce><a class="title" href="/VFluent3/" data-v-011600ce><!----><!--[-->VFluent3<!--]--></a></div><div class="content" data-v-45c9f423><!----><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-45c9f423 data-v-4da4371d><span id="main-nav-aria-label" class="visually-hidden" data-v-4da4371d>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" data-v-4da4371d data-v-66f8d518 data-v-4d08dd3a><!--[-->Home<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" data-v-4da4371d data-v-66f8d518 data-v-4d08dd3a><!--[-->Guide<!--]--><!----></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-45c9f423 data-v-bf1c94ca><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" data-v-bf1c94ca data-v-d0ee0df2 data-v-55b931a0><span class="check" data-v-55b931a0><span class="icon" data-v-55b931a0><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-d0ee0df2><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-d0ee0df2><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-45c9f423 data-v-7cece6ac data-v-37af1650><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-37af1650><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-37af1650><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-37af1650><div class="VPMenu" data-v-37af1650 data-v-17dc081b><!----><!--[--><!--[--><!----><div class="group" data-v-7cece6ac><div class="item appearance" data-v-7cece6ac><p class="label" data-v-7cece6ac>Appearance</p><div class="appearance-action" data-v-7cece6ac><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" data-v-7cece6ac data-v-d0ee0df2 data-v-55b931a0><span class="check" data-v-55b931a0><span class="icon" data-v-55b931a0><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-d0ee0df2><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-d0ee0df2><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-45c9f423 data-v-5484e669><span class="container" data-v-5484e669><span class="top" data-v-5484e669></span><span class="middle" data-v-5484e669></span><span class="bottom" data-v-5484e669></span></span></button></div></div></div><!----></header><div class="VPLocalNav" data-v-058b7495 data-v-f623cd72><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-f623cd72><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-f623cd72><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-f623cd72>Menu</span></button><a class="top-link" href="#" data-v-f623cd72> Return to top </a></div><aside class="VPSidebar" data-v-058b7495 data-v-3b8ec0c7><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-3b8ec0c7><span class="visually-hidden" id="sidebar-aria-label" data-v-3b8ec0c7> Sidebar Navigation </span><!--[--><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Basic</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/button/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Button</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/check-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>CheckBox</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/radio/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Radio</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/progress-bar/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ProgressBar</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/progress-ring/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ProgressRing</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/toggle-switch/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ToggleSwitch</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/img/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Img</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/text-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>TextBox</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/combo-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ComboBox</span><!--]--><!----></a><!--]--></div></section></div><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Global</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/message-bar/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>MessageBar</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/info-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>InfoBox</span><!--]--><!----></a><!--]--></div></section></div><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Advance</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/color-picker/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ColorPicker</span><!--]--><!----></a><!--]--></div></section></div><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-058b7495 data-v-564173e9><div class="VPDoc has-sidebar" data-v-564173e9 data-v-32b7ddf4><div class="container" data-v-32b7ddf4><div class="aside" data-v-32b7ddf4><div class="aside-curtain" data-v-32b7ddf4></div><div class="aside-container" data-v-32b7ddf4><div class="aside-content" data-v-32b7ddf4><div class="VPDocAside" data-v-32b7ddf4 data-v-35c1bae1><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline has-outline" data-v-35c1bae1 data-v-123cce62><div class="content" data-v-123cce62><div class="outline-marker" data-v-123cce62></div><div class="outline-title" data-v-123cce62>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-123cce62><span class="visually-hidden" id="doc-outline-aria-label" data-v-123cce62> Table of Contents for current page </span><ul class="root" data-v-123cce62><!--[--><li style="" data-v-123cce62><a class="outline-link" href="#properties" data-v-123cce62>Properties</a><!----></li><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-35c1bae1></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-32b7ddf4><div class="content-container" data-v-32b7ddf4><!--[--><!--]--><main class="main" data-v-32b7ddf4><div style="position:relative;" class="vp-doc _VFluent3_guide_components_progress-ring_properties" data-v-32b7ddf4><div><h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">border-width</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">5</td><td style="text-align:center;">circle border width</td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">disabled</td></tr><tr><td style="text-align:center;">error</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">error state</td></tr><tr><td style="text-align:center;">error-foreground</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">error state circle color</td></tr><tr><td style="text-align:center;">foreground</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">circle color</td></tr><tr><td style="text-align:center;">indeterminate</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">indeterminate state</td></tr><tr><td style="text-align:center;">lang</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">i18n</td></tr><tr><td style="text-align:center;">max</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">100</td><td style="text-align:center;">same as progress max property</td></tr><tr><td style="text-align:center;">model-value</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">v-model</td></tr><tr><td style="text-align:center;">pause</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">pause state</td></tr><tr><td style="text-align:center;">pause-foreground</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">pause state circle color</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">[&#39;light&#39;, &#39;dark&#39;, &#39;global&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">theme</td></tr><tr><td style="text-align:center;">width</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">60</td><td style="text-align:center;">circle width</td></tr></tbody></table></div></div></main><footer class="VPDocFooter" data-v-32b7ddf4 data-v-cfaa3a6c><div class="edit-info" data-v-cfaa3a6c><!----><!----></div><div class="prev-next" data-v-cfaa3a6c><div class="pager" data-v-cfaa3a6c><!----></div><div class="pager" data-v-cfaa3a6c><a class="pager-link next" href="/VFluent3/guide/components/button/" data-v-cfaa3a6c><span class="desc" data-v-cfaa3a6c>Next page</span><span class="title" data-v-cfaa3a6c>Button</span></a></div></div></footer><!--[--><!--]--></div></div></div></div></div><footer class="VPFooter has-sidebar" data-v-058b7495 data-v-a6c8dde4><div class="container" data-v-a6c8dde4><p class="message" data-v-a6c8dde4>MIT Licensed</p><p class="copyright" data-v-a6c8dde4>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
-    <script>__VP_HASH_MAP__ = JSON.parse("{\"guide_components_button_emits.md\":\"d682bf18\",\"guide_components_button_index.md\":\"23a8eb54\",\"guide_components_button_properties.md\":\"cd4004b6\",\"guide_components_check-box_emits.md\":\"31609794\",\"guide_components_check-box_index.md\":\"32046814\",\"guide_components_check-box_properties.md\":\"8f33ac0c\",\"guide_components_color-picker_emits.md\":\"00983cd0\",\"guide_components_color-picker_index.md\":\"b2d62612\",\"guide_components_color-picker_properties.md\":\"5466ba72\",\"guide_components_combo-box_emits.md\":\"d5ffda50\",\"guide_components_combo-box_index.md\":\"1c4364f5\",\"guide_components_combo-box_properties.md\":\"2e1d6060\",\"guide_components_img_emits.md\":\"6237adb4\",\"guide_components_img_index.md\":\"fa51a3a1\",\"guide_components_img_properties.md\":\"8d321b5e\",\"guide_components_info-box_emits.md\":\"c2e71eec\",\"guide_components_info-box_index.md\":\"06175fed\",\"guide_components_info-box_properties.md\":\"314dbb00\",\"guide_components_message-bar_emits.md\":\"e89a5a22\",\"guide_components_message-bar_index.md\":\"3f0b01d6\",\"guide_components_message-bar_properties.md\":\"ee3838d9\",\"guide_components_progress-bar_emits.md\":\"5b611e3b\",\"guide_components_progress-bar_index.md\":\"689c3241\",\"guide_components_progress-bar_properties.md\":\"39af7fb2\",\"guide_components_progress-ring_emits.md\":\"67e4644e\",\"guide_components_progress-ring_index.md\":\"9a33542b\",\"guide_components_progress-ring_properties.md\":\"c897c4bb\",\"guide_components_radio_emits.md\":\"28506857\",\"guide_components_radio_index.md\":\"e5a479ce\",\"guide_components_radio_properties.md\":\"f8e55d2f\",\"guide_components_text-box_emits.md\":\"0bf89ef8\",\"guide_components_text-box_index.md\":\"7ccfc637\",\"guide_components_text-box_properties.md\":\"aab3a89e\",\"guide_components_toggle-switch_emits.md\":\"5146435f\",\"guide_components_toggle-switch_index.md\":\"8be48081\",\"guide_components_toggle-switch_properties.md\":\"54984c3a\",\"guide_index.md\":\"e3dca1d7\",\"index.md\":\"1e9773d5\"}")</script>
-    <script type="module" async src="/VFluent3/assets/app.d60fa8c3.js"></script>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-19c990f1><div class="wrapper" data-v-19c990f1><div class="container" data-v-19c990f1><div class="title" data-v-19c990f1><div class="VPNavBarTitle has-sidebar" data-v-19c990f1 data-v-ab179fa1><a class="title" href="/VFluent3/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>VFluent3</span><!--[--><!--]--></a></div></div><div class="content" data-v-19c990f1><div class="content-body" data-v-19c990f1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-19c990f1><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-19c990f1 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Guide</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-19c990f1 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-19c990f1 data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-19c990f1 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-19c990f1><div class="divider-line" data-v-19c990f1></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-d2ecc192><button data-v-d2ecc192>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-575e6a36><div class="curtain" data-v-575e6a36></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-575e6a36><span class="visually-hidden" id="sidebar-aria-label" data-v-575e6a36> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Basic input</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/button/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/check-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CheckBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/combobox/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Combobox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/details-list/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DetailsList</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drop-down/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DropDown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio-group/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RadioGroup</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/rating-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RatingControl</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/slider/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/toggle-switch/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ToggleSwitch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tag/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Tag</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Collections</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/flip-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>FlipView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/list-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ListView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tree-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TreeView</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Date & Time</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarDatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/time-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TimePicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Dialogs & flyouts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/callout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Callout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Layout</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/collapse/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Collapse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/expander/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Expander</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drawer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Panel</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Media</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/image/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Img</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ImgBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/persona/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Persona</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Menu & toolbars</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/command-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CommandBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/menu-flyout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MenuFlyout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/swipe-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SwipeControl</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Navigation</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/breadcrumb/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationPanel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pivot/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pivot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pagination/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pagination</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Scrolling</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/infinite-scroll-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfiniteScrollView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/scroll-story/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ScrollStory</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Status & info</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/badge/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-ring/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressRing</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Styles</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/animated-icon/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>AnimatedIcon</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/icon-element/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>IconElement</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/reveal-container/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RevealContainer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/shimmer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Shimmer</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Text</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/search-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SearchBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-field/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextField</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/verify-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>VerifyBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Windowing</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/web-window/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>WebWindow</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Global</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Advance</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-935f8a84><div class="content" data-v-935f8a84><div class="outline-marker" data-v-935f8a84></div><div class="outline-title" role="heading" aria-level="2" data-v-935f8a84>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-935f8a84><span class="visually-hidden" id="doc-outline-aria-label" data-v-935f8a84> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-935f8a84 data-v-b933a997><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _VFluent3_guide_components_progress-ring_properties" data-v-39a288b8><div><h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-label="Permalink to &quot;Properties&quot;">​</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">border-width</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">5</td><td style="text-align:center;">circle border width</td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">disabled</td></tr><tr><td style="text-align:center;">error</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">error state</td></tr><tr><td style="text-align:center;">error-foreground</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">error state circle color</td></tr><tr><td style="text-align:center;">foreground</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">circle color</td></tr><tr><td style="text-align:center;">indeterminate</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">indeterminate state</td></tr><tr><td style="text-align:center;">lang</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">i18n</td></tr><tr><td style="text-align:center;">max</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">100</td><td style="text-align:center;">same as progress max property</td></tr><tr><td style="text-align:center;">model-value</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">v-model</td></tr><tr><td style="text-align:center;">pause</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">pause state</td></tr><tr><td style="text-align:center;">pause-foreground</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">pause state circle color</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">[&#39;light&#39;, &#39;dark&#39;, &#39;global&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">theme</td></tr><tr><td style="text-align:center;">width</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">60</td><td style="text-align:center;">circle width</td></tr></tbody></table></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-09de1c0f><!--[--><!--]--><!----><nav class="prev-next" data-v-09de1c0f><div class="pager" data-v-09de1c0f><!----></div><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link next" href="/VFluent3/guide/components/button/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Next page</span><span class="title" data-v-09de1c0f>Button</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>MIT Licensed</p><p class="copyright" data-v-e315a0ad>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_calendar-date-picker_properties.md\":\"DXRjmMG8\",\"guide_components_image_properties.md\":\"DGanRzCb\",\"guide_components_img-box_index.md\":\"DYtggkf_\",\"guide_components_img_emits.md\":\"BlE7jvZQ\",\"guide_components_img_index.md\":\"Bm9FiuU4\",\"guide_components_icon-element_properties.md\":\"8Oakruwc\",\"guide_components_img_properties.md\":\"B42YSocI\",\"guide_components_drawer_index.md\":\"D_vpnCpE\",\"guide_components_verify-box_emits.md\":\"DT17Iazx\",\"guide_components_calendar-date-picker_index.md\":\"BdHjrurh\",\"guide_components_rating-control_index.md\":\"Q9l5Lfrr\",\"guide_components_rating-control_properties.md\":\"DKprnl0i\",\"guide_components_calendar-view_index.md\":\"zdoRYVx1\",\"guide_components_animated-icon_index.md\":\"yZDMzCFe\",\"guide_components_calendar-date-picker_emits.md\":\"D5OkfR8j\",\"guide_components_badge_index.md\":\"Bb4crrJn\",\"guide_components_image_index.md\":\"B7X6cWAZ\",\"guide_components_slider_index.md\":\"C7zZ2d-W\",\"guide_components_radio-group_index.md\":\"CVfh3h5H\",\"guide_components_swipe-control_index.md\":\"DwrDVPc1\",\"guide_components_color-picker_emits.md\":\"BHDXVtBQ\",\"guide_components_radio_index.md\":\"90as5QGp\",\"guide_components_pagination_properties.md\":\"JUAPvcTL\",\"guide_components_persona_properties.md\":\"DUTPhPMp\",\"guide_components_combo-box_emits.md\":\"Dh5R-qEv\",\"guide_components_pivot_emits.md\":\"BTJPgNpy\",\"guide_components_pagination_index.md\":\"CnW2zAht\",\"guide_components_flip-view_properties.md\":\"BqZ4hhgU\",\"guide_components_icon-element_emits.md\":\"D5TXFdTZ\",\"guide_components_flip-view_index.md\":\"DefnDOv6\",\"guide_components_navigation-panel_index.md\":\"6mO__sSK\",\"guide_components_rating-control_emits.md\":\"blvomSeC\",\"guide_components_icon-element_index.md\":\"DQ8K7JNn\",\"guide_components_navigation-view_index.md\":\"4AQRiz1k\",\"guide_components_toggle-switch_emits.md\":\"CLGzrNut\",\"guide_components_toggle-switch_index.md\":\"61en_q9-\",\"guide_components_scroll-story_index.md\":\"Vpgb1HSV\",\"guide_components_reveal-container_index.md\":\"Cut2r4tV\",\"guide_components_search-box_emits.md\":\"-d9sWNNt\",\"guide_components_search-box_properties.md\":\"DEKFfPFw\",\"guide_components_shimmer_emits.md\":\"CTMInlI3\",\"guide_components_tag_index.md\":\"BhhxkcHn\",\"guide_components_search-box_index.md\":\"DgkrY0oY\",\"guide_components_shimmer_index.md\":\"iZlHuTxw\",\"guide_components_shimmer_properties.md\":\"CdkU1o6H\",\"guide_components_tree-view_index.md\":\"CUrwan4q\",\"guide_components_text-field_index.md\":\"CXSimJtj\",\"guide_components_text-box_index.md\":\"C5moAPfB\",\"guide_components_progress-ring_properties.md\":\"Dc08Uiff\",\"guide_components_toggle-switch_properties.md\":\"tFppK_IS\",\"guide_components_radio-group_emits.md\":\"cEDzKVnN\",\"guide_components_collapse_index.md\":\"N9Iu5-2v\",\"guide_components_image_emits.md\":\"lmlz2xJd\",\"guide_components_callout_index.md\":\"D9RU33w6\",\"guide_components_pivot_index.md\":\"B_vwQL-5\",\"guide_components_command-bar_index.md\":\"Cp4_rrGB\",\"guide_components_pagination_emits.md\":\"Dng86A22\",\"guide_components_button_index.md\":\"7sqT2MQP\",\"guide_components_info-box_properties.md\":\"BI7Nvk-E\",\"guide_components_drop-down_emits.md\":\"BE95TdKW\",\"guide_components_expander_index.md\":\"BKgcUJzQ\",\"guide_components_message-bar_index.md\":\"AEtAWlF8\",\"guide_components_menu-flyout_index.md\":\"Csa7irPj\",\"guide_components_panel_index.md\":\"CsTu0bXo\",\"guide_components_panel_properties.md\":\"BaxoCYKq\",\"guide_components_progress-bar_emits.md\":\"BcwXUpsF\",\"guide_components_progress-bar_properties.md\":\"TxiS9ZMA\",\"guide_components_progress-ring_emits.md\":\"D2Y6hIZ9\",\"guide_components_color-picker_index.md\":\"DCc4ixcU\",\"guide_components_progress-ring_index.md\":\"CPb-ZEPE\",\"guide_components_color-picker_properties.md\":\"wcXK29Vl\",\"guide_components_time-picker_index.md\":\"CQJdRRaG\",\"guide_components_drop-down_properties.md\":\"Bwlkpr1q\",\"guide_components_infinite-scroll-view_index.md\":\"yAuD807x\",\"guide_components_check-box_index.md\":\"FYgdu4oq\",\"guide_components_progress-bar_index.md\":\"D8vHQw5V\",\"guide_components_combo-box_index.md\":\"DTyu3eNd\",\"guide_components_info-box_emits.md\":\"DlEwpkkq\",\"guide_components_drop-down_index.md\":\"BZzJZQWq\",\"guide_components_list-view_index.md\":\"BoYvMzb0\",\"guide_components_verify-box_properties.md\":\"CW6W8fFf\",\"guide_components_verify-box_index.md\":\"DwSB40wR\",\"guide_index.md\":\"Bndlt3sL\",\"guide_components_web-window_index.md\":\"Bxc8vEeI\",\"index.md\":\"MTRqI42u\",\"guide_components_combo-box_properties.md\":\"AWfHzV6x\",\"guide_components_combobox_emits.md\":\"CGB6WLt8\",\"guide_components_combobox_properties.md\":\"Bja0hMou\",\"guide_components_details-list_index.md\":\"CcgOCIyt\",\"guide_components_info-box_index.md\":\"vXh-_DsL\",\"guide_components_combobox_index.md\":\"CsPkY6YB\",\"guide_components_date-picker_index.md\":\"12vmUIup\",\"guide_components_flip-view_emits.md\":\"DCheHjDj\",\"guide_components_panel_emits.md\":\"DG0REDq8\",\"guide_components_breadcrumb_index.md\":\"DyDm7PeP\",\"guide_components_radio-group_properties.md\":\"BnPxoKsQ\",\"guide_components_persona_emits.md\":\"CnsDPKRU\",\"guide_components_pivot_properties.md\":\"BmoLpPi1\",\"guide_components_persona_index.md\":\"DT00jby4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vfluent3\",\"description\":\"A Vue3 component library for Fluent UI\",\"base\":\"/VFluent3/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"VFluent3\",\"footer\":{\"message\":\"MIT Licensed\",\"copyright\":\"Copyright © Creator SN - 2022\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/\"}],\"sidebar\":[{\"text\":\"Basic input\",\"collapsed\":true,\"items\":[{\"text\":\"Button\",\"link\":\"/guide/components/button/\"},{\"text\":\"CheckBox\",\"link\":\"/guide/components/check-box/\"},{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"},{\"text\":\"Combobox\",\"link\":\"/guide/components/combobox/\"},{\"text\":\"DetailsList\",\"link\":\"/guide/components/details-list/\"},{\"text\":\"DropDown\",\"link\":\"/guide/components/drop-down/\"},{\"text\":\"Radio\",\"link\":\"/guide/components/radio/\"},{\"text\":\"RadioGroup\",\"link\":\"/guide/components/radio-group/\"},{\"text\":\"RatingControl\",\"link\":\"/guide/components/rating-control/\"},{\"text\":\"Slider\",\"link\":\"/guide/components/slider/\"},{\"text\":\"ToggleSwitch\",\"link\":\"/guide/components/toggle-switch/\"},{\"text\":\"Tag\",\"link\":\"/guide/components/tag/\"}]},{\"text\":\"Collections\",\"collapsed\":true,\"items\":[{\"text\":\"FlipView\",\"link\":\"/guide/components/flip-view/\"},{\"text\":\"ListView\",\"link\":\"/guide/components/list-view/\"},{\"text\":\"TreeView\",\"link\":\"/guide/components/tree-view/\"}]},{\"text\":\"Date & Time\",\"collapsed\":true,\"items\":[{\"text\":\"CalendarDatePicker\",\"link\":\"/guide/components/calendar-date-picker/\"},{\"text\":\"CalendarView\",\"link\":\"/guide/components/calendar-view/\"},{\"text\":\"DatePicker\",\"link\":\"/guide/components/date-picker/\"},{\"text\":\"TimePicker\",\"link\":\"/guide/components/time-picker/\"}]},{\"text\":\"Dialogs & flyouts\",\"collapsed\":true,\"items\":[{\"text\":\"Callout\",\"link\":\"/guide/components/callout/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Layout\",\"collapsed\":true,\"items\":[{\"text\":\"Collapse\",\"link\":\"/guide/components/collapse/\"},{\"text\":\"Expander\",\"link\":\"/guide/components/expander/\"},{\"text\":\"Drawer\",\"link\":\"/guide/components/drawer/\"},{\"text\":\"Panel\",\"link\":\"/guide/components/panel/\"}]},{\"text\":\"Media\",\"collapsed\":true,\"items\":[{\"text\":\"Image\",\"link\":\"/guide/components/image/\"},{\"text\":\"Img\",\"link\":\"/guide/components/img/\"},{\"text\":\"ImgBox\",\"link\":\"/guide/components/img-box/\"},{\"text\":\"Persona\",\"link\":\"/guide/components/persona/\"}]},{\"text\":\"Menu & toolbars\",\"collapsed\":true,\"items\":[{\"text\":\"CommandBar\",\"link\":\"/guide/components/command-bar/\"},{\"text\":\"MenuFlyout\",\"link\":\"/guide/components/menu-flyout/\"},{\"text\":\"SwipeControl\",\"link\":\"/guide/components/swipe-control/\"}]},{\"text\":\"Navigation\",\"collapsed\":true,\"items\":[{\"text\":\"Breadcrumb\",\"link\":\"/guide/components/breadcrumb/\"},{\"text\":\"NavigationPanel\",\"link\":\"/guide/components/navigation-panel/\"},{\"text\":\"NavigationView\",\"link\":\"/guide/components/navigation-view/\"},{\"text\":\"Pivot\",\"link\":\"/guide/components/pivot/\"},{\"text\":\"Pagination\",\"link\":\"/guide/components/pagination/\"}]},{\"text\":\"Scrolling\",\"collapsed\":true,\"items\":[{\"text\":\"InfiniteScrollView\",\"link\":\"/guide/components/infinite-scroll-view/\"},{\"text\":\"ScrollStory\",\"link\":\"/guide/components/scroll-story/\"}]},{\"text\":\"Status & info\",\"collapsed\":true,\"items\":[{\"text\":\"Badge\",\"link\":\"/guide/components/badge/\"},{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"ProgressBar\",\"link\":\"/guide/components/progress-bar/\"},{\"text\":\"ProgressRing\",\"link\":\"/guide/components/progress-ring/\"}]},{\"text\":\"Styles\",\"collapsed\":true,\"items\":[{\"text\":\"AnimatedIcon\",\"link\":\"/guide/components/animated-icon/\"},{\"text\":\"IconElement\",\"link\":\"/guide/components/icon-element/\"},{\"text\":\"RevealContainer\",\"link\":\"/guide/components/reveal-container/\"},{\"text\":\"Shimmer\",\"link\":\"/guide/components/shimmer/\"}]},{\"text\":\"Text\",\"collapsed\":true,\"items\":[{\"text\":\"SearchBox\",\"link\":\"/guide/components/search-box/\"},{\"text\":\"TextBox\",\"link\":\"/guide/components/text-box/\"},{\"text\":\"TextField\",\"link\":\"/guide/components/text-field/\"},{\"text\":\"VerifyBox\",\"link\":\"/guide/components/verify-box/\"}]},{\"text\":\"Windowing\",\"collapsed\":true,\"items\":[{\"text\":\"WebWindow\",\"link\":\"/guide/components/web-window/\"}]},{\"text\":\"Global\",\"collapsed\":true,\"items\":[{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Advance\",\"collapsed\":true,\"items\":[{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
     
   </body>
 </html>
\ No newline at end of file
diff --git a/guide/components/radio-group/emits.html b/guide/components/radio-group/emits.html
new file mode 100644
index 0000000..ca51203
--- /dev/null
+++ b/guide/components/radio-group/emits.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>vfluent3</title>
+    <meta name="description" content="A Vue3 component library for Fluent UI">
+    <meta name="generator" content="VitePress v1.0.0-rc.45">
+    <link rel="preload stylesheet" href="/VFluent3/assets/style.BabQegKX.css" as="style">
+    
+    <script type="module" src="/VFluent3/assets/app.CSutcJ2E.js"></script>
+    <link rel="preload" href="/VFluent3/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/framework.DvIFzl91.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/theme.CgqFBnN_.js">
+    <link rel="modulepreload" href="/VFluent3/assets/guide_components_radio-group_emits.md.cEDzKVnN.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-19c990f1><div class="wrapper" data-v-19c990f1><div class="container" data-v-19c990f1><div class="title" data-v-19c990f1><div class="VPNavBarTitle has-sidebar" data-v-19c990f1 data-v-ab179fa1><a class="title" href="/VFluent3/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>VFluent3</span><!--[--><!--]--></a></div></div><div class="content" data-v-19c990f1><div class="content-body" data-v-19c990f1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-19c990f1><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-19c990f1 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Guide</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-19c990f1 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-19c990f1 data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-19c990f1 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-19c990f1><div class="divider-line" data-v-19c990f1></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-d2ecc192><button data-v-d2ecc192>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-575e6a36><div class="curtain" data-v-575e6a36></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-575e6a36><span class="visually-hidden" id="sidebar-aria-label" data-v-575e6a36> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Basic input</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/button/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/check-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CheckBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/combobox/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Combobox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/details-list/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DetailsList</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drop-down/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DropDown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio-group/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RadioGroup</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/rating-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RatingControl</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/slider/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/toggle-switch/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ToggleSwitch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tag/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Tag</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Collections</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/flip-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>FlipView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/list-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ListView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tree-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TreeView</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Date & Time</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarDatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/time-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TimePicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Dialogs & flyouts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/callout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Callout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Layout</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/collapse/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Collapse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/expander/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Expander</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drawer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Panel</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Media</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/image/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Img</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ImgBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/persona/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Persona</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Menu & toolbars</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/command-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CommandBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/menu-flyout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MenuFlyout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/swipe-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SwipeControl</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Navigation</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/breadcrumb/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationPanel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pivot/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pivot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pagination/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pagination</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Scrolling</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/infinite-scroll-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfiniteScrollView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/scroll-story/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ScrollStory</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Status & info</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/badge/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-ring/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressRing</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Styles</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/animated-icon/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>AnimatedIcon</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/icon-element/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>IconElement</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/reveal-container/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RevealContainer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/shimmer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Shimmer</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Text</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/search-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SearchBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-field/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextField</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/verify-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>VerifyBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Windowing</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/web-window/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>WebWindow</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Global</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Advance</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-935f8a84><div class="content" data-v-935f8a84><div class="outline-marker" data-v-935f8a84></div><div class="outline-title" role="heading" aria-level="2" data-v-935f8a84>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-935f8a84><span class="visually-hidden" id="doc-outline-aria-label" data-v-935f8a84> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-935f8a84 data-v-b933a997><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _VFluent3_guide_components_radio-group_emits" data-v-39a288b8><div><h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-label="Permalink to &quot;Emits&quot;">​</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead></table></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-09de1c0f><!--[--><!--]--><!----><nav class="prev-next" data-v-09de1c0f><div class="pager" data-v-09de1c0f><!----></div><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link next" href="/VFluent3/guide/components/button/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Next page</span><span class="title" data-v-09de1c0f>Button</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>MIT Licensed</p><p class="copyright" data-v-e315a0ad>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_calendar-date-picker_properties.md\":\"DXRjmMG8\",\"guide_components_image_properties.md\":\"DGanRzCb\",\"guide_components_img-box_index.md\":\"DYtggkf_\",\"guide_components_img_emits.md\":\"BlE7jvZQ\",\"guide_components_img_index.md\":\"Bm9FiuU4\",\"guide_components_icon-element_properties.md\":\"8Oakruwc\",\"guide_components_img_properties.md\":\"B42YSocI\",\"guide_components_drawer_index.md\":\"D_vpnCpE\",\"guide_components_verify-box_emits.md\":\"DT17Iazx\",\"guide_components_calendar-date-picker_index.md\":\"BdHjrurh\",\"guide_components_rating-control_index.md\":\"Q9l5Lfrr\",\"guide_components_rating-control_properties.md\":\"DKprnl0i\",\"guide_components_calendar-view_index.md\":\"zdoRYVx1\",\"guide_components_animated-icon_index.md\":\"yZDMzCFe\",\"guide_components_calendar-date-picker_emits.md\":\"D5OkfR8j\",\"guide_components_badge_index.md\":\"Bb4crrJn\",\"guide_components_image_index.md\":\"B7X6cWAZ\",\"guide_components_slider_index.md\":\"C7zZ2d-W\",\"guide_components_radio-group_index.md\":\"CVfh3h5H\",\"guide_components_swipe-control_index.md\":\"DwrDVPc1\",\"guide_components_color-picker_emits.md\":\"BHDXVtBQ\",\"guide_components_radio_index.md\":\"90as5QGp\",\"guide_components_pagination_properties.md\":\"JUAPvcTL\",\"guide_components_persona_properties.md\":\"DUTPhPMp\",\"guide_components_combo-box_emits.md\":\"Dh5R-qEv\",\"guide_components_pivot_emits.md\":\"BTJPgNpy\",\"guide_components_pagination_index.md\":\"CnW2zAht\",\"guide_components_flip-view_properties.md\":\"BqZ4hhgU\",\"guide_components_icon-element_emits.md\":\"D5TXFdTZ\",\"guide_components_flip-view_index.md\":\"DefnDOv6\",\"guide_components_navigation-panel_index.md\":\"6mO__sSK\",\"guide_components_rating-control_emits.md\":\"blvomSeC\",\"guide_components_icon-element_index.md\":\"DQ8K7JNn\",\"guide_components_navigation-view_index.md\":\"4AQRiz1k\",\"guide_components_toggle-switch_emits.md\":\"CLGzrNut\",\"guide_components_toggle-switch_index.md\":\"61en_q9-\",\"guide_components_scroll-story_index.md\":\"Vpgb1HSV\",\"guide_components_reveal-container_index.md\":\"Cut2r4tV\",\"guide_components_search-box_emits.md\":\"-d9sWNNt\",\"guide_components_search-box_properties.md\":\"DEKFfPFw\",\"guide_components_shimmer_emits.md\":\"CTMInlI3\",\"guide_components_tag_index.md\":\"BhhxkcHn\",\"guide_components_search-box_index.md\":\"DgkrY0oY\",\"guide_components_shimmer_index.md\":\"iZlHuTxw\",\"guide_components_shimmer_properties.md\":\"CdkU1o6H\",\"guide_components_tree-view_index.md\":\"CUrwan4q\",\"guide_components_text-field_index.md\":\"CXSimJtj\",\"guide_components_text-box_index.md\":\"C5moAPfB\",\"guide_components_progress-ring_properties.md\":\"Dc08Uiff\",\"guide_components_toggle-switch_properties.md\":\"tFppK_IS\",\"guide_components_radio-group_emits.md\":\"cEDzKVnN\",\"guide_components_collapse_index.md\":\"N9Iu5-2v\",\"guide_components_image_emits.md\":\"lmlz2xJd\",\"guide_components_callout_index.md\":\"D9RU33w6\",\"guide_components_pivot_index.md\":\"B_vwQL-5\",\"guide_components_command-bar_index.md\":\"Cp4_rrGB\",\"guide_components_pagination_emits.md\":\"Dng86A22\",\"guide_components_button_index.md\":\"7sqT2MQP\",\"guide_components_info-box_properties.md\":\"BI7Nvk-E\",\"guide_components_drop-down_emits.md\":\"BE95TdKW\",\"guide_components_expander_index.md\":\"BKgcUJzQ\",\"guide_components_message-bar_index.md\":\"AEtAWlF8\",\"guide_components_menu-flyout_index.md\":\"Csa7irPj\",\"guide_components_panel_index.md\":\"CsTu0bXo\",\"guide_components_panel_properties.md\":\"BaxoCYKq\",\"guide_components_progress-bar_emits.md\":\"BcwXUpsF\",\"guide_components_progress-bar_properties.md\":\"TxiS9ZMA\",\"guide_components_progress-ring_emits.md\":\"D2Y6hIZ9\",\"guide_components_color-picker_index.md\":\"DCc4ixcU\",\"guide_components_progress-ring_index.md\":\"CPb-ZEPE\",\"guide_components_color-picker_properties.md\":\"wcXK29Vl\",\"guide_components_time-picker_index.md\":\"CQJdRRaG\",\"guide_components_drop-down_properties.md\":\"Bwlkpr1q\",\"guide_components_infinite-scroll-view_index.md\":\"yAuD807x\",\"guide_components_check-box_index.md\":\"FYgdu4oq\",\"guide_components_progress-bar_index.md\":\"D8vHQw5V\",\"guide_components_combo-box_index.md\":\"DTyu3eNd\",\"guide_components_info-box_emits.md\":\"DlEwpkkq\",\"guide_components_drop-down_index.md\":\"BZzJZQWq\",\"guide_components_list-view_index.md\":\"BoYvMzb0\",\"guide_components_verify-box_properties.md\":\"CW6W8fFf\",\"guide_components_verify-box_index.md\":\"DwSB40wR\",\"guide_index.md\":\"Bndlt3sL\",\"guide_components_web-window_index.md\":\"Bxc8vEeI\",\"index.md\":\"MTRqI42u\",\"guide_components_combo-box_properties.md\":\"AWfHzV6x\",\"guide_components_combobox_emits.md\":\"CGB6WLt8\",\"guide_components_combobox_properties.md\":\"Bja0hMou\",\"guide_components_details-list_index.md\":\"CcgOCIyt\",\"guide_components_info-box_index.md\":\"vXh-_DsL\",\"guide_components_combobox_index.md\":\"CsPkY6YB\",\"guide_components_date-picker_index.md\":\"12vmUIup\",\"guide_components_flip-view_emits.md\":\"DCheHjDj\",\"guide_components_panel_emits.md\":\"DG0REDq8\",\"guide_components_breadcrumb_index.md\":\"DyDm7PeP\",\"guide_components_radio-group_properties.md\":\"BnPxoKsQ\",\"guide_components_persona_emits.md\":\"CnsDPKRU\",\"guide_components_pivot_properties.md\":\"BmoLpPi1\",\"guide_components_persona_index.md\":\"DT00jby4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vfluent3\",\"description\":\"A Vue3 component library for Fluent UI\",\"base\":\"/VFluent3/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"VFluent3\",\"footer\":{\"message\":\"MIT Licensed\",\"copyright\":\"Copyright © Creator SN - 2022\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/\"}],\"sidebar\":[{\"text\":\"Basic input\",\"collapsed\":true,\"items\":[{\"text\":\"Button\",\"link\":\"/guide/components/button/\"},{\"text\":\"CheckBox\",\"link\":\"/guide/components/check-box/\"},{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"},{\"text\":\"Combobox\",\"link\":\"/guide/components/combobox/\"},{\"text\":\"DetailsList\",\"link\":\"/guide/components/details-list/\"},{\"text\":\"DropDown\",\"link\":\"/guide/components/drop-down/\"},{\"text\":\"Radio\",\"link\":\"/guide/components/radio/\"},{\"text\":\"RadioGroup\",\"link\":\"/guide/components/radio-group/\"},{\"text\":\"RatingControl\",\"link\":\"/guide/components/rating-control/\"},{\"text\":\"Slider\",\"link\":\"/guide/components/slider/\"},{\"text\":\"ToggleSwitch\",\"link\":\"/guide/components/toggle-switch/\"},{\"text\":\"Tag\",\"link\":\"/guide/components/tag/\"}]},{\"text\":\"Collections\",\"collapsed\":true,\"items\":[{\"text\":\"FlipView\",\"link\":\"/guide/components/flip-view/\"},{\"text\":\"ListView\",\"link\":\"/guide/components/list-view/\"},{\"text\":\"TreeView\",\"link\":\"/guide/components/tree-view/\"}]},{\"text\":\"Date & Time\",\"collapsed\":true,\"items\":[{\"text\":\"CalendarDatePicker\",\"link\":\"/guide/components/calendar-date-picker/\"},{\"text\":\"CalendarView\",\"link\":\"/guide/components/calendar-view/\"},{\"text\":\"DatePicker\",\"link\":\"/guide/components/date-picker/\"},{\"text\":\"TimePicker\",\"link\":\"/guide/components/time-picker/\"}]},{\"text\":\"Dialogs & flyouts\",\"collapsed\":true,\"items\":[{\"text\":\"Callout\",\"link\":\"/guide/components/callout/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Layout\",\"collapsed\":true,\"items\":[{\"text\":\"Collapse\",\"link\":\"/guide/components/collapse/\"},{\"text\":\"Expander\",\"link\":\"/guide/components/expander/\"},{\"text\":\"Drawer\",\"link\":\"/guide/components/drawer/\"},{\"text\":\"Panel\",\"link\":\"/guide/components/panel/\"}]},{\"text\":\"Media\",\"collapsed\":true,\"items\":[{\"text\":\"Image\",\"link\":\"/guide/components/image/\"},{\"text\":\"Img\",\"link\":\"/guide/components/img/\"},{\"text\":\"ImgBox\",\"link\":\"/guide/components/img-box/\"},{\"text\":\"Persona\",\"link\":\"/guide/components/persona/\"}]},{\"text\":\"Menu & toolbars\",\"collapsed\":true,\"items\":[{\"text\":\"CommandBar\",\"link\":\"/guide/components/command-bar/\"},{\"text\":\"MenuFlyout\",\"link\":\"/guide/components/menu-flyout/\"},{\"text\":\"SwipeControl\",\"link\":\"/guide/components/swipe-control/\"}]},{\"text\":\"Navigation\",\"collapsed\":true,\"items\":[{\"text\":\"Breadcrumb\",\"link\":\"/guide/components/breadcrumb/\"},{\"text\":\"NavigationPanel\",\"link\":\"/guide/components/navigation-panel/\"},{\"text\":\"NavigationView\",\"link\":\"/guide/components/navigation-view/\"},{\"text\":\"Pivot\",\"link\":\"/guide/components/pivot/\"},{\"text\":\"Pagination\",\"link\":\"/guide/components/pagination/\"}]},{\"text\":\"Scrolling\",\"collapsed\":true,\"items\":[{\"text\":\"InfiniteScrollView\",\"link\":\"/guide/components/infinite-scroll-view/\"},{\"text\":\"ScrollStory\",\"link\":\"/guide/components/scroll-story/\"}]},{\"text\":\"Status & info\",\"collapsed\":true,\"items\":[{\"text\":\"Badge\",\"link\":\"/guide/components/badge/\"},{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"ProgressBar\",\"link\":\"/guide/components/progress-bar/\"},{\"text\":\"ProgressRing\",\"link\":\"/guide/components/progress-ring/\"}]},{\"text\":\"Styles\",\"collapsed\":true,\"items\":[{\"text\":\"AnimatedIcon\",\"link\":\"/guide/components/animated-icon/\"},{\"text\":\"IconElement\",\"link\":\"/guide/components/icon-element/\"},{\"text\":\"RevealContainer\",\"link\":\"/guide/components/reveal-container/\"},{\"text\":\"Shimmer\",\"link\":\"/guide/components/shimmer/\"}]},{\"text\":\"Text\",\"collapsed\":true,\"items\":[{\"text\":\"SearchBox\",\"link\":\"/guide/components/search-box/\"},{\"text\":\"TextBox\",\"link\":\"/guide/components/text-box/\"},{\"text\":\"TextField\",\"link\":\"/guide/components/text-field/\"},{\"text\":\"VerifyBox\",\"link\":\"/guide/components/verify-box/\"}]},{\"text\":\"Windowing\",\"collapsed\":true,\"items\":[{\"text\":\"WebWindow\",\"link\":\"/guide/components/web-window/\"}]},{\"text\":\"Global\",\"collapsed\":true,\"items\":[{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Advance\",\"collapsed\":true,\"items\":[{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git a/guide/components/radio-group/index.html b/guide/components/radio-group/index.html
new file mode 100644
index 0000000..c55be58
--- /dev/null
+++ b/guide/components/radio-group/index.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>RadioGroup | vfluent3</title>
+    <meta name="description" content="A Vue3 component library for Fluent UI">
+    <meta name="generator" content="VitePress v1.0.0-rc.45">
+    <link rel="preload stylesheet" href="/VFluent3/assets/style.BabQegKX.css" as="style">
+    
+    <script type="module" src="/VFluent3/assets/app.CSutcJ2E.js"></script>
+    <link rel="preload" href="/VFluent3/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/framework.DvIFzl91.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/theme.CgqFBnN_.js">
+    <link rel="modulepreload" href="/VFluent3/assets/guide_components_radio-group_index.md.CVfh3h5H.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-19c990f1><div class="wrapper" data-v-19c990f1><div class="container" data-v-19c990f1><div class="title" data-v-19c990f1><div class="VPNavBarTitle has-sidebar" data-v-19c990f1 data-v-ab179fa1><a class="title" href="/VFluent3/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>VFluent3</span><!--[--><!--]--></a></div></div><div class="content" data-v-19c990f1><div class="content-body" data-v-19c990f1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-19c990f1><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-19c990f1 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Guide</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-19c990f1 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-19c990f1 data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-19c990f1 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-19c990f1><div class="divider-line" data-v-19c990f1></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-d2ecc192><button data-v-d2ecc192>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-575e6a36><div class="curtain" data-v-575e6a36></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-575e6a36><span class="visually-hidden" id="sidebar-aria-label" data-v-575e6a36> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible has-active" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Basic input</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/button/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/check-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CheckBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/combobox/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Combobox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/details-list/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DetailsList</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drop-down/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DropDown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio-group/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RadioGroup</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/rating-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RatingControl</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/slider/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/toggle-switch/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ToggleSwitch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tag/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Tag</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Collections</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/flip-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>FlipView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/list-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ListView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tree-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TreeView</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Date & Time</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarDatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/time-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TimePicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Dialogs & flyouts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/callout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Callout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Layout</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/collapse/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Collapse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/expander/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Expander</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drawer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Panel</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Media</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/image/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Img</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ImgBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/persona/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Persona</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Menu & toolbars</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/command-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CommandBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/menu-flyout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MenuFlyout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/swipe-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SwipeControl</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Navigation</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/breadcrumb/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationPanel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pivot/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pivot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pagination/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pagination</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Scrolling</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/infinite-scroll-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfiniteScrollView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/scroll-story/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ScrollStory</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Status & info</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/badge/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-ring/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressRing</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Styles</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/animated-icon/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>AnimatedIcon</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/icon-element/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>IconElement</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/reveal-container/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RevealContainer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/shimmer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Shimmer</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Text</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/search-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SearchBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-field/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextField</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/verify-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>VerifyBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Windowing</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/web-window/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>WebWindow</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Global</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Advance</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-935f8a84><div class="content" data-v-935f8a84><div class="outline-marker" data-v-935f8a84></div><div class="outline-title" role="heading" aria-level="2" data-v-935f8a84>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-935f8a84><span class="visually-hidden" id="doc-outline-aria-label" data-v-935f8a84> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-935f8a84 data-v-b933a997><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _VFluent3_guide_components_radio-group_" data-v-39a288b8><div><h3 id="radiogroup-demo" tabindex="-1">RadioGroup-DEMO <a class="header-anchor" href="#radiogroup-demo" aria-label="Permalink to &quot;RadioGroup-DEMO&quot;">​</a></h3><hr><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-radioGroup</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">value</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Options:&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;div class=&quot;row-block&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;fv-radio label=&quot;option1&quot;&gt;Option1&lt;/fv-radio&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;fv-radio label=&quot;option2&quot;&gt;Option2&lt;/fv-radio&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/div&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;div class=&quot;row-block&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;fv-radio label=&quot;option3&quot;&gt;Option3&lt;/fv-radio&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/div&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-radioGroup</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><h3 id="radiogroup-inline" tabindex="-1">RadioGroup inline <a class="header-anchor" href="#radiogroup-inline" aria-label="Permalink to &quot;RadioGroup inline&quot;">​</a></h3><hr><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-radioGroup</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">value</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Options:&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> inline</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;fv-radio label=&quot;option1&quot;&gt;Option1&lt;/fv-radio&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;fv-radio label=&quot;option2&quot;&gt;Option2&lt;/fv-radio&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-radioGroup</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h3 id="radio-icon" tabindex="-1">Radio Icon <a class="header-anchor" href="#radio-icon" aria-label="Permalink to &quot;Radio Icon&quot;">​</a></h3><hr><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-radio-group</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">value</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Options:&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;div class=&quot;row-block&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;fv-radio label=&quot;option1&quot; icon=&quot;QuickNote&quot;&gt;Option1&lt;/fv-radio&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;fv-radio label=&quot;option2&quot; icon=&quot;QuickNote&quot;&gt;Option2&lt;/fv-radio&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;fv-radio label=&quot;option3&quot; icon=&quot;QuickNote&quot;&gt;Option3&lt;/fv-radio&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/div&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-radio-group</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h3 id="radio-icon-dark-inline" tabindex="-1">Radio Icon Dark inline <a class="header-anchor" href="#radio-icon-dark-inline" aria-label="Permalink to &quot;Radio Icon Dark inline&quot;">​</a></h3><hr><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-radio-group</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">value</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Options:&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;dark&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> inline</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> @</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">change</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">change</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;fv-radio label=&quot;option1&quot; icon=&quot;QuickNote&quot;&gt;Option1&lt;/fv-radio&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;fv-radio label=&quot;option2&quot; icon=&quot;QuickNote&quot;&gt;Option2&lt;/fv-radio&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;fv-radio label=&quot;option3&quot; icon=&quot;QuickNote&quot;&gt;Option3&lt;/fv-radio&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-radio-group</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p></p><h3 id="radio-icon-dark-disabled" tabindex="-1">Radio Icon Dark Disabled <a class="header-anchor" href="#radio-icon-dark-disabled" aria-label="Permalink to &quot;Radio Icon Dark Disabled&quot;">​</a></h3><hr><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-radio-group</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">value</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Options:&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  disabled</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;div class=&quot;row-block&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;fv-radio label=&quot;option1&quot; icon=&quot;QuickNote&quot;&gt;Option1&lt;/fv-radio&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;fv-radio label=&quot;option2&quot; icon=&quot;QuickNote&quot;&gt;Option2&lt;/fv-radio&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;fv-radio label=&quot;option3&quot; icon=&quot;QuickNote&quot;&gt;Option3&lt;/fv-radio&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/div&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;div class=&quot;row-block&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;fv-radio label=&quot;option4&quot; icon=&quot;QuickNote&quot;&gt;Option4&lt;/fv-radio&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;fv-radio label=&quot;option5&quot; icon=&quot;QuickNote&quot;&gt;Option5&lt;/fv-radio&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;fv-radio label=&quot;option6&quot; icon=&quot;QuickNote&quot;&gt;Option6&lt;/fv-radio&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/div&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-radio-group</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">v-model</td><td style="text-align:center;">Object</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">选中值</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">[&#39;system&#39;,&#39;dark&#39;,&#39;light&#39;,&#39;custom&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;system&#39;</td><td style="text-align:center;">主题色</td></tr><tr><td style="text-align:center;">label</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">标签</td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否禁用</td></tr><tr><td style="text-align:center;">inline</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;"></td></tr></tbody></table><h3 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to &quot;Events&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">事件名(Name)</th><th style="text-align:center;">参数类型(args)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">change</td><td style="text-align:center;">event(value,...)</td><td style="text-align:center;">选项值改变时触发</td></tr></tbody></table></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-09de1c0f><!--[--><!--]--><!----><nav class="prev-next" data-v-09de1c0f><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link prev" href="/VFluent3/guide/components/radio/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Previous page</span><span class="title" data-v-09de1c0f>Radio</span><!--]--></a></div><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link next" href="/VFluent3/guide/components/rating-control/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Next page</span><span class="title" data-v-09de1c0f>RatingControl</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>MIT Licensed</p><p class="copyright" data-v-e315a0ad>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_calendar-date-picker_properties.md\":\"DXRjmMG8\",\"guide_components_image_properties.md\":\"DGanRzCb\",\"guide_components_img-box_index.md\":\"DYtggkf_\",\"guide_components_img_emits.md\":\"BlE7jvZQ\",\"guide_components_img_index.md\":\"Bm9FiuU4\",\"guide_components_icon-element_properties.md\":\"8Oakruwc\",\"guide_components_img_properties.md\":\"B42YSocI\",\"guide_components_drawer_index.md\":\"D_vpnCpE\",\"guide_components_verify-box_emits.md\":\"DT17Iazx\",\"guide_components_calendar-date-picker_index.md\":\"BdHjrurh\",\"guide_components_rating-control_index.md\":\"Q9l5Lfrr\",\"guide_components_rating-control_properties.md\":\"DKprnl0i\",\"guide_components_calendar-view_index.md\":\"zdoRYVx1\",\"guide_components_animated-icon_index.md\":\"yZDMzCFe\",\"guide_components_calendar-date-picker_emits.md\":\"D5OkfR8j\",\"guide_components_badge_index.md\":\"Bb4crrJn\",\"guide_components_image_index.md\":\"B7X6cWAZ\",\"guide_components_slider_index.md\":\"C7zZ2d-W\",\"guide_components_radio-group_index.md\":\"CVfh3h5H\",\"guide_components_swipe-control_index.md\":\"DwrDVPc1\",\"guide_components_color-picker_emits.md\":\"BHDXVtBQ\",\"guide_components_radio_index.md\":\"90as5QGp\",\"guide_components_pagination_properties.md\":\"JUAPvcTL\",\"guide_components_persona_properties.md\":\"DUTPhPMp\",\"guide_components_combo-box_emits.md\":\"Dh5R-qEv\",\"guide_components_pivot_emits.md\":\"BTJPgNpy\",\"guide_components_pagination_index.md\":\"CnW2zAht\",\"guide_components_flip-view_properties.md\":\"BqZ4hhgU\",\"guide_components_icon-element_emits.md\":\"D5TXFdTZ\",\"guide_components_flip-view_index.md\":\"DefnDOv6\",\"guide_components_navigation-panel_index.md\":\"6mO__sSK\",\"guide_components_rating-control_emits.md\":\"blvomSeC\",\"guide_components_icon-element_index.md\":\"DQ8K7JNn\",\"guide_components_navigation-view_index.md\":\"4AQRiz1k\",\"guide_components_toggle-switch_emits.md\":\"CLGzrNut\",\"guide_components_toggle-switch_index.md\":\"61en_q9-\",\"guide_components_scroll-story_index.md\":\"Vpgb1HSV\",\"guide_components_reveal-container_index.md\":\"Cut2r4tV\",\"guide_components_search-box_emits.md\":\"-d9sWNNt\",\"guide_components_search-box_properties.md\":\"DEKFfPFw\",\"guide_components_shimmer_emits.md\":\"CTMInlI3\",\"guide_components_tag_index.md\":\"BhhxkcHn\",\"guide_components_search-box_index.md\":\"DgkrY0oY\",\"guide_components_shimmer_index.md\":\"iZlHuTxw\",\"guide_components_shimmer_properties.md\":\"CdkU1o6H\",\"guide_components_tree-view_index.md\":\"CUrwan4q\",\"guide_components_text-field_index.md\":\"CXSimJtj\",\"guide_components_text-box_index.md\":\"C5moAPfB\",\"guide_components_progress-ring_properties.md\":\"Dc08Uiff\",\"guide_components_toggle-switch_properties.md\":\"tFppK_IS\",\"guide_components_radio-group_emits.md\":\"cEDzKVnN\",\"guide_components_collapse_index.md\":\"N9Iu5-2v\",\"guide_components_image_emits.md\":\"lmlz2xJd\",\"guide_components_callout_index.md\":\"D9RU33w6\",\"guide_components_pivot_index.md\":\"B_vwQL-5\",\"guide_components_command-bar_index.md\":\"Cp4_rrGB\",\"guide_components_pagination_emits.md\":\"Dng86A22\",\"guide_components_button_index.md\":\"7sqT2MQP\",\"guide_components_info-box_properties.md\":\"BI7Nvk-E\",\"guide_components_drop-down_emits.md\":\"BE95TdKW\",\"guide_components_expander_index.md\":\"BKgcUJzQ\",\"guide_components_message-bar_index.md\":\"AEtAWlF8\",\"guide_components_menu-flyout_index.md\":\"Csa7irPj\",\"guide_components_panel_index.md\":\"CsTu0bXo\",\"guide_components_panel_properties.md\":\"BaxoCYKq\",\"guide_components_progress-bar_emits.md\":\"BcwXUpsF\",\"guide_components_progress-bar_properties.md\":\"TxiS9ZMA\",\"guide_components_progress-ring_emits.md\":\"D2Y6hIZ9\",\"guide_components_color-picker_index.md\":\"DCc4ixcU\",\"guide_components_progress-ring_index.md\":\"CPb-ZEPE\",\"guide_components_color-picker_properties.md\":\"wcXK29Vl\",\"guide_components_time-picker_index.md\":\"CQJdRRaG\",\"guide_components_drop-down_properties.md\":\"Bwlkpr1q\",\"guide_components_infinite-scroll-view_index.md\":\"yAuD807x\",\"guide_components_check-box_index.md\":\"FYgdu4oq\",\"guide_components_progress-bar_index.md\":\"D8vHQw5V\",\"guide_components_combo-box_index.md\":\"DTyu3eNd\",\"guide_components_info-box_emits.md\":\"DlEwpkkq\",\"guide_components_drop-down_index.md\":\"BZzJZQWq\",\"guide_components_list-view_index.md\":\"BoYvMzb0\",\"guide_components_verify-box_properties.md\":\"CW6W8fFf\",\"guide_components_verify-box_index.md\":\"DwSB40wR\",\"guide_index.md\":\"Bndlt3sL\",\"guide_components_web-window_index.md\":\"Bxc8vEeI\",\"index.md\":\"MTRqI42u\",\"guide_components_combo-box_properties.md\":\"AWfHzV6x\",\"guide_components_combobox_emits.md\":\"CGB6WLt8\",\"guide_components_combobox_properties.md\":\"Bja0hMou\",\"guide_components_details-list_index.md\":\"CcgOCIyt\",\"guide_components_info-box_index.md\":\"vXh-_DsL\",\"guide_components_combobox_index.md\":\"CsPkY6YB\",\"guide_components_date-picker_index.md\":\"12vmUIup\",\"guide_components_flip-view_emits.md\":\"DCheHjDj\",\"guide_components_panel_emits.md\":\"DG0REDq8\",\"guide_components_breadcrumb_index.md\":\"DyDm7PeP\",\"guide_components_radio-group_properties.md\":\"BnPxoKsQ\",\"guide_components_persona_emits.md\":\"CnsDPKRU\",\"guide_components_pivot_properties.md\":\"BmoLpPi1\",\"guide_components_persona_index.md\":\"DT00jby4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vfluent3\",\"description\":\"A Vue3 component library for Fluent UI\",\"base\":\"/VFluent3/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"VFluent3\",\"footer\":{\"message\":\"MIT Licensed\",\"copyright\":\"Copyright © Creator SN - 2022\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/\"}],\"sidebar\":[{\"text\":\"Basic input\",\"collapsed\":true,\"items\":[{\"text\":\"Button\",\"link\":\"/guide/components/button/\"},{\"text\":\"CheckBox\",\"link\":\"/guide/components/check-box/\"},{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"},{\"text\":\"Combobox\",\"link\":\"/guide/components/combobox/\"},{\"text\":\"DetailsList\",\"link\":\"/guide/components/details-list/\"},{\"text\":\"DropDown\",\"link\":\"/guide/components/drop-down/\"},{\"text\":\"Radio\",\"link\":\"/guide/components/radio/\"},{\"text\":\"RadioGroup\",\"link\":\"/guide/components/radio-group/\"},{\"text\":\"RatingControl\",\"link\":\"/guide/components/rating-control/\"},{\"text\":\"Slider\",\"link\":\"/guide/components/slider/\"},{\"text\":\"ToggleSwitch\",\"link\":\"/guide/components/toggle-switch/\"},{\"text\":\"Tag\",\"link\":\"/guide/components/tag/\"}]},{\"text\":\"Collections\",\"collapsed\":true,\"items\":[{\"text\":\"FlipView\",\"link\":\"/guide/components/flip-view/\"},{\"text\":\"ListView\",\"link\":\"/guide/components/list-view/\"},{\"text\":\"TreeView\",\"link\":\"/guide/components/tree-view/\"}]},{\"text\":\"Date & Time\",\"collapsed\":true,\"items\":[{\"text\":\"CalendarDatePicker\",\"link\":\"/guide/components/calendar-date-picker/\"},{\"text\":\"CalendarView\",\"link\":\"/guide/components/calendar-view/\"},{\"text\":\"DatePicker\",\"link\":\"/guide/components/date-picker/\"},{\"text\":\"TimePicker\",\"link\":\"/guide/components/time-picker/\"}]},{\"text\":\"Dialogs & flyouts\",\"collapsed\":true,\"items\":[{\"text\":\"Callout\",\"link\":\"/guide/components/callout/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Layout\",\"collapsed\":true,\"items\":[{\"text\":\"Collapse\",\"link\":\"/guide/components/collapse/\"},{\"text\":\"Expander\",\"link\":\"/guide/components/expander/\"},{\"text\":\"Drawer\",\"link\":\"/guide/components/drawer/\"},{\"text\":\"Panel\",\"link\":\"/guide/components/panel/\"}]},{\"text\":\"Media\",\"collapsed\":true,\"items\":[{\"text\":\"Image\",\"link\":\"/guide/components/image/\"},{\"text\":\"Img\",\"link\":\"/guide/components/img/\"},{\"text\":\"ImgBox\",\"link\":\"/guide/components/img-box/\"},{\"text\":\"Persona\",\"link\":\"/guide/components/persona/\"}]},{\"text\":\"Menu & toolbars\",\"collapsed\":true,\"items\":[{\"text\":\"CommandBar\",\"link\":\"/guide/components/command-bar/\"},{\"text\":\"MenuFlyout\",\"link\":\"/guide/components/menu-flyout/\"},{\"text\":\"SwipeControl\",\"link\":\"/guide/components/swipe-control/\"}]},{\"text\":\"Navigation\",\"collapsed\":true,\"items\":[{\"text\":\"Breadcrumb\",\"link\":\"/guide/components/breadcrumb/\"},{\"text\":\"NavigationPanel\",\"link\":\"/guide/components/navigation-panel/\"},{\"text\":\"NavigationView\",\"link\":\"/guide/components/navigation-view/\"},{\"text\":\"Pivot\",\"link\":\"/guide/components/pivot/\"},{\"text\":\"Pagination\",\"link\":\"/guide/components/pagination/\"}]},{\"text\":\"Scrolling\",\"collapsed\":true,\"items\":[{\"text\":\"InfiniteScrollView\",\"link\":\"/guide/components/infinite-scroll-view/\"},{\"text\":\"ScrollStory\",\"link\":\"/guide/components/scroll-story/\"}]},{\"text\":\"Status & info\",\"collapsed\":true,\"items\":[{\"text\":\"Badge\",\"link\":\"/guide/components/badge/\"},{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"ProgressBar\",\"link\":\"/guide/components/progress-bar/\"},{\"text\":\"ProgressRing\",\"link\":\"/guide/components/progress-ring/\"}]},{\"text\":\"Styles\",\"collapsed\":true,\"items\":[{\"text\":\"AnimatedIcon\",\"link\":\"/guide/components/animated-icon/\"},{\"text\":\"IconElement\",\"link\":\"/guide/components/icon-element/\"},{\"text\":\"RevealContainer\",\"link\":\"/guide/components/reveal-container/\"},{\"text\":\"Shimmer\",\"link\":\"/guide/components/shimmer/\"}]},{\"text\":\"Text\",\"collapsed\":true,\"items\":[{\"text\":\"SearchBox\",\"link\":\"/guide/components/search-box/\"},{\"text\":\"TextBox\",\"link\":\"/guide/components/text-box/\"},{\"text\":\"TextField\",\"link\":\"/guide/components/text-field/\"},{\"text\":\"VerifyBox\",\"link\":\"/guide/components/verify-box/\"}]},{\"text\":\"Windowing\",\"collapsed\":true,\"items\":[{\"text\":\"WebWindow\",\"link\":\"/guide/components/web-window/\"}]},{\"text\":\"Global\",\"collapsed\":true,\"items\":[{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Advance\",\"collapsed\":true,\"items\":[{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git a/guide/components/radio-group/properties.html b/guide/components/radio-group/properties.html
new file mode 100644
index 0000000..4fcf019
--- /dev/null
+++ b/guide/components/radio-group/properties.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>vfluent3</title>
+    <meta name="description" content="A Vue3 component library for Fluent UI">
+    <meta name="generator" content="VitePress v1.0.0-rc.45">
+    <link rel="preload stylesheet" href="/VFluent3/assets/style.BabQegKX.css" as="style">
+    
+    <script type="module" src="/VFluent3/assets/app.CSutcJ2E.js"></script>
+    <link rel="preload" href="/VFluent3/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/framework.DvIFzl91.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/theme.CgqFBnN_.js">
+    <link rel="modulepreload" href="/VFluent3/assets/guide_components_radio-group_properties.md.BnPxoKsQ.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-19c990f1><div class="wrapper" data-v-19c990f1><div class="container" data-v-19c990f1><div class="title" data-v-19c990f1><div class="VPNavBarTitle has-sidebar" data-v-19c990f1 data-v-ab179fa1><a class="title" href="/VFluent3/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>VFluent3</span><!--[--><!--]--></a></div></div><div class="content" data-v-19c990f1><div class="content-body" data-v-19c990f1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-19c990f1><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-19c990f1 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Guide</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-19c990f1 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-19c990f1 data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-19c990f1 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-19c990f1><div class="divider-line" data-v-19c990f1></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-d2ecc192><button data-v-d2ecc192>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-575e6a36><div class="curtain" data-v-575e6a36></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-575e6a36><span class="visually-hidden" id="sidebar-aria-label" data-v-575e6a36> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Basic input</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/button/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/check-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CheckBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/combobox/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Combobox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/details-list/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DetailsList</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drop-down/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DropDown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio-group/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RadioGroup</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/rating-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RatingControl</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/slider/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/toggle-switch/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ToggleSwitch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tag/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Tag</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Collections</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/flip-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>FlipView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/list-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ListView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tree-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TreeView</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Date & Time</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarDatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/time-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TimePicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Dialogs & flyouts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/callout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Callout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Layout</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/collapse/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Collapse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/expander/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Expander</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drawer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Panel</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Media</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/image/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Img</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ImgBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/persona/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Persona</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Menu & toolbars</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/command-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CommandBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/menu-flyout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MenuFlyout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/swipe-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SwipeControl</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Navigation</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/breadcrumb/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationPanel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pivot/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pivot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pagination/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pagination</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Scrolling</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/infinite-scroll-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfiniteScrollView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/scroll-story/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ScrollStory</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Status & info</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/badge/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-ring/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressRing</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Styles</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/animated-icon/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>AnimatedIcon</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/icon-element/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>IconElement</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/reveal-container/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RevealContainer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/shimmer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Shimmer</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Text</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/search-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SearchBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-field/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextField</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/verify-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>VerifyBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Windowing</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/web-window/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>WebWindow</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Global</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Advance</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-935f8a84><div class="content" data-v-935f8a84><div class="outline-marker" data-v-935f8a84></div><div class="outline-title" role="heading" aria-level="2" data-v-935f8a84>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-935f8a84><span class="visually-hidden" id="doc-outline-aria-label" data-v-935f8a84> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-935f8a84 data-v-b933a997><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _VFluent3_guide_components_radio-group_properties" data-v-39a288b8><div><h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-label="Permalink to &quot;Properties&quot;">​</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead></table></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-09de1c0f><!--[--><!--]--><!----><nav class="prev-next" data-v-09de1c0f><div class="pager" data-v-09de1c0f><!----></div><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link next" href="/VFluent3/guide/components/button/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Next page</span><span class="title" data-v-09de1c0f>Button</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>MIT Licensed</p><p class="copyright" data-v-e315a0ad>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_calendar-date-picker_properties.md\":\"DXRjmMG8\",\"guide_components_image_properties.md\":\"DGanRzCb\",\"guide_components_img-box_index.md\":\"DYtggkf_\",\"guide_components_img_emits.md\":\"BlE7jvZQ\",\"guide_components_img_index.md\":\"Bm9FiuU4\",\"guide_components_icon-element_properties.md\":\"8Oakruwc\",\"guide_components_img_properties.md\":\"B42YSocI\",\"guide_components_drawer_index.md\":\"D_vpnCpE\",\"guide_components_verify-box_emits.md\":\"DT17Iazx\",\"guide_components_calendar-date-picker_index.md\":\"BdHjrurh\",\"guide_components_rating-control_index.md\":\"Q9l5Lfrr\",\"guide_components_rating-control_properties.md\":\"DKprnl0i\",\"guide_components_calendar-view_index.md\":\"zdoRYVx1\",\"guide_components_animated-icon_index.md\":\"yZDMzCFe\",\"guide_components_calendar-date-picker_emits.md\":\"D5OkfR8j\",\"guide_components_badge_index.md\":\"Bb4crrJn\",\"guide_components_image_index.md\":\"B7X6cWAZ\",\"guide_components_slider_index.md\":\"C7zZ2d-W\",\"guide_components_radio-group_index.md\":\"CVfh3h5H\",\"guide_components_swipe-control_index.md\":\"DwrDVPc1\",\"guide_components_color-picker_emits.md\":\"BHDXVtBQ\",\"guide_components_radio_index.md\":\"90as5QGp\",\"guide_components_pagination_properties.md\":\"JUAPvcTL\",\"guide_components_persona_properties.md\":\"DUTPhPMp\",\"guide_components_combo-box_emits.md\":\"Dh5R-qEv\",\"guide_components_pivot_emits.md\":\"BTJPgNpy\",\"guide_components_pagination_index.md\":\"CnW2zAht\",\"guide_components_flip-view_properties.md\":\"BqZ4hhgU\",\"guide_components_icon-element_emits.md\":\"D5TXFdTZ\",\"guide_components_flip-view_index.md\":\"DefnDOv6\",\"guide_components_navigation-panel_index.md\":\"6mO__sSK\",\"guide_components_rating-control_emits.md\":\"blvomSeC\",\"guide_components_icon-element_index.md\":\"DQ8K7JNn\",\"guide_components_navigation-view_index.md\":\"4AQRiz1k\",\"guide_components_toggle-switch_emits.md\":\"CLGzrNut\",\"guide_components_toggle-switch_index.md\":\"61en_q9-\",\"guide_components_scroll-story_index.md\":\"Vpgb1HSV\",\"guide_components_reveal-container_index.md\":\"Cut2r4tV\",\"guide_components_search-box_emits.md\":\"-d9sWNNt\",\"guide_components_search-box_properties.md\":\"DEKFfPFw\",\"guide_components_shimmer_emits.md\":\"CTMInlI3\",\"guide_components_tag_index.md\":\"BhhxkcHn\",\"guide_components_search-box_index.md\":\"DgkrY0oY\",\"guide_components_shimmer_index.md\":\"iZlHuTxw\",\"guide_components_shimmer_properties.md\":\"CdkU1o6H\",\"guide_components_tree-view_index.md\":\"CUrwan4q\",\"guide_components_text-field_index.md\":\"CXSimJtj\",\"guide_components_text-box_index.md\":\"C5moAPfB\",\"guide_components_progress-ring_properties.md\":\"Dc08Uiff\",\"guide_components_toggle-switch_properties.md\":\"tFppK_IS\",\"guide_components_radio-group_emits.md\":\"cEDzKVnN\",\"guide_components_collapse_index.md\":\"N9Iu5-2v\",\"guide_components_image_emits.md\":\"lmlz2xJd\",\"guide_components_callout_index.md\":\"D9RU33w6\",\"guide_components_pivot_index.md\":\"B_vwQL-5\",\"guide_components_command-bar_index.md\":\"Cp4_rrGB\",\"guide_components_pagination_emits.md\":\"Dng86A22\",\"guide_components_button_index.md\":\"7sqT2MQP\",\"guide_components_info-box_properties.md\":\"BI7Nvk-E\",\"guide_components_drop-down_emits.md\":\"BE95TdKW\",\"guide_components_expander_index.md\":\"BKgcUJzQ\",\"guide_components_message-bar_index.md\":\"AEtAWlF8\",\"guide_components_menu-flyout_index.md\":\"Csa7irPj\",\"guide_components_panel_index.md\":\"CsTu0bXo\",\"guide_components_panel_properties.md\":\"BaxoCYKq\",\"guide_components_progress-bar_emits.md\":\"BcwXUpsF\",\"guide_components_progress-bar_properties.md\":\"TxiS9ZMA\",\"guide_components_progress-ring_emits.md\":\"D2Y6hIZ9\",\"guide_components_color-picker_index.md\":\"DCc4ixcU\",\"guide_components_progress-ring_index.md\":\"CPb-ZEPE\",\"guide_components_color-picker_properties.md\":\"wcXK29Vl\",\"guide_components_time-picker_index.md\":\"CQJdRRaG\",\"guide_components_drop-down_properties.md\":\"Bwlkpr1q\",\"guide_components_infinite-scroll-view_index.md\":\"yAuD807x\",\"guide_components_check-box_index.md\":\"FYgdu4oq\",\"guide_components_progress-bar_index.md\":\"D8vHQw5V\",\"guide_components_combo-box_index.md\":\"DTyu3eNd\",\"guide_components_info-box_emits.md\":\"DlEwpkkq\",\"guide_components_drop-down_index.md\":\"BZzJZQWq\",\"guide_components_list-view_index.md\":\"BoYvMzb0\",\"guide_components_verify-box_properties.md\":\"CW6W8fFf\",\"guide_components_verify-box_index.md\":\"DwSB40wR\",\"guide_index.md\":\"Bndlt3sL\",\"guide_components_web-window_index.md\":\"Bxc8vEeI\",\"index.md\":\"MTRqI42u\",\"guide_components_combo-box_properties.md\":\"AWfHzV6x\",\"guide_components_combobox_emits.md\":\"CGB6WLt8\",\"guide_components_combobox_properties.md\":\"Bja0hMou\",\"guide_components_details-list_index.md\":\"CcgOCIyt\",\"guide_components_info-box_index.md\":\"vXh-_DsL\",\"guide_components_combobox_index.md\":\"CsPkY6YB\",\"guide_components_date-picker_index.md\":\"12vmUIup\",\"guide_components_flip-view_emits.md\":\"DCheHjDj\",\"guide_components_panel_emits.md\":\"DG0REDq8\",\"guide_components_breadcrumb_index.md\":\"DyDm7PeP\",\"guide_components_radio-group_properties.md\":\"BnPxoKsQ\",\"guide_components_persona_emits.md\":\"CnsDPKRU\",\"guide_components_pivot_properties.md\":\"BmoLpPi1\",\"guide_components_persona_index.md\":\"DT00jby4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vfluent3\",\"description\":\"A Vue3 component library for Fluent UI\",\"base\":\"/VFluent3/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"VFluent3\",\"footer\":{\"message\":\"MIT Licensed\",\"copyright\":\"Copyright © Creator SN - 2022\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/\"}],\"sidebar\":[{\"text\":\"Basic input\",\"collapsed\":true,\"items\":[{\"text\":\"Button\",\"link\":\"/guide/components/button/\"},{\"text\":\"CheckBox\",\"link\":\"/guide/components/check-box/\"},{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"},{\"text\":\"Combobox\",\"link\":\"/guide/components/combobox/\"},{\"text\":\"DetailsList\",\"link\":\"/guide/components/details-list/\"},{\"text\":\"DropDown\",\"link\":\"/guide/components/drop-down/\"},{\"text\":\"Radio\",\"link\":\"/guide/components/radio/\"},{\"text\":\"RadioGroup\",\"link\":\"/guide/components/radio-group/\"},{\"text\":\"RatingControl\",\"link\":\"/guide/components/rating-control/\"},{\"text\":\"Slider\",\"link\":\"/guide/components/slider/\"},{\"text\":\"ToggleSwitch\",\"link\":\"/guide/components/toggle-switch/\"},{\"text\":\"Tag\",\"link\":\"/guide/components/tag/\"}]},{\"text\":\"Collections\",\"collapsed\":true,\"items\":[{\"text\":\"FlipView\",\"link\":\"/guide/components/flip-view/\"},{\"text\":\"ListView\",\"link\":\"/guide/components/list-view/\"},{\"text\":\"TreeView\",\"link\":\"/guide/components/tree-view/\"}]},{\"text\":\"Date & Time\",\"collapsed\":true,\"items\":[{\"text\":\"CalendarDatePicker\",\"link\":\"/guide/components/calendar-date-picker/\"},{\"text\":\"CalendarView\",\"link\":\"/guide/components/calendar-view/\"},{\"text\":\"DatePicker\",\"link\":\"/guide/components/date-picker/\"},{\"text\":\"TimePicker\",\"link\":\"/guide/components/time-picker/\"}]},{\"text\":\"Dialogs & flyouts\",\"collapsed\":true,\"items\":[{\"text\":\"Callout\",\"link\":\"/guide/components/callout/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Layout\",\"collapsed\":true,\"items\":[{\"text\":\"Collapse\",\"link\":\"/guide/components/collapse/\"},{\"text\":\"Expander\",\"link\":\"/guide/components/expander/\"},{\"text\":\"Drawer\",\"link\":\"/guide/components/drawer/\"},{\"text\":\"Panel\",\"link\":\"/guide/components/panel/\"}]},{\"text\":\"Media\",\"collapsed\":true,\"items\":[{\"text\":\"Image\",\"link\":\"/guide/components/image/\"},{\"text\":\"Img\",\"link\":\"/guide/components/img/\"},{\"text\":\"ImgBox\",\"link\":\"/guide/components/img-box/\"},{\"text\":\"Persona\",\"link\":\"/guide/components/persona/\"}]},{\"text\":\"Menu & toolbars\",\"collapsed\":true,\"items\":[{\"text\":\"CommandBar\",\"link\":\"/guide/components/command-bar/\"},{\"text\":\"MenuFlyout\",\"link\":\"/guide/components/menu-flyout/\"},{\"text\":\"SwipeControl\",\"link\":\"/guide/components/swipe-control/\"}]},{\"text\":\"Navigation\",\"collapsed\":true,\"items\":[{\"text\":\"Breadcrumb\",\"link\":\"/guide/components/breadcrumb/\"},{\"text\":\"NavigationPanel\",\"link\":\"/guide/components/navigation-panel/\"},{\"text\":\"NavigationView\",\"link\":\"/guide/components/navigation-view/\"},{\"text\":\"Pivot\",\"link\":\"/guide/components/pivot/\"},{\"text\":\"Pagination\",\"link\":\"/guide/components/pagination/\"}]},{\"text\":\"Scrolling\",\"collapsed\":true,\"items\":[{\"text\":\"InfiniteScrollView\",\"link\":\"/guide/components/infinite-scroll-view/\"},{\"text\":\"ScrollStory\",\"link\":\"/guide/components/scroll-story/\"}]},{\"text\":\"Status & info\",\"collapsed\":true,\"items\":[{\"text\":\"Badge\",\"link\":\"/guide/components/badge/\"},{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"ProgressBar\",\"link\":\"/guide/components/progress-bar/\"},{\"text\":\"ProgressRing\",\"link\":\"/guide/components/progress-ring/\"}]},{\"text\":\"Styles\",\"collapsed\":true,\"items\":[{\"text\":\"AnimatedIcon\",\"link\":\"/guide/components/animated-icon/\"},{\"text\":\"IconElement\",\"link\":\"/guide/components/icon-element/\"},{\"text\":\"RevealContainer\",\"link\":\"/guide/components/reveal-container/\"},{\"text\":\"Shimmer\",\"link\":\"/guide/components/shimmer/\"}]},{\"text\":\"Text\",\"collapsed\":true,\"items\":[{\"text\":\"SearchBox\",\"link\":\"/guide/components/search-box/\"},{\"text\":\"TextBox\",\"link\":\"/guide/components/text-box/\"},{\"text\":\"TextField\",\"link\":\"/guide/components/text-field/\"},{\"text\":\"VerifyBox\",\"link\":\"/guide/components/verify-box/\"}]},{\"text\":\"Windowing\",\"collapsed\":true,\"items\":[{\"text\":\"WebWindow\",\"link\":\"/guide/components/web-window/\"}]},{\"text\":\"Global\",\"collapsed\":true,\"items\":[{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Advance\",\"collapsed\":true,\"items\":[{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git a/guide/components/radio/emits.html b/guide/components/radio/emits.html
deleted file mode 100644
index 332bccc..0000000
--- a/guide/components/radio/emits.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<!DOCTYPE html>
-<html lang="en-US">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>Emits | vfluent3</title>
-    <meta name="description" content="A Vue3 component library for Fluent UI">
-    <link rel="stylesheet" href="/VFluent3/assets/style.0a1d87af.css">
-    <link rel="modulepreload" href="/VFluent3/assets/app.d60fa8c3.js">
-    <link rel="modulepreload" href="/VFluent3/assets/guide_components_radio_emits.md.28506857.lean.js">
-    
-    <script>(()=>{const e=localStorage.getItem("vitepress-theme-appearance"),a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
-  </head>
-  <body>
-    <div id="app"><div class="Layout" data-v-058b7495><!--[--><!--]--><!--[--><span tabindex="-1" data-v-bea91388></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-bea91388> Skip to content </a><!--]--><!----><header class="VPNav" data-v-058b7495 data-v-2a0a2738><div class="VPNavBar has-sidebar" data-v-2a0a2738 data-v-45c9f423><div class="container" data-v-45c9f423><div class="VPNavBarTitle has-sidebar" data-v-45c9f423 data-v-011600ce><a class="title" href="/VFluent3/" data-v-011600ce><!----><!--[-->VFluent3<!--]--></a></div><div class="content" data-v-45c9f423><!----><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-45c9f423 data-v-4da4371d><span id="main-nav-aria-label" class="visually-hidden" data-v-4da4371d>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" data-v-4da4371d data-v-66f8d518 data-v-4d08dd3a><!--[-->Home<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" data-v-4da4371d data-v-66f8d518 data-v-4d08dd3a><!--[-->Guide<!--]--><!----></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-45c9f423 data-v-bf1c94ca><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" data-v-bf1c94ca data-v-d0ee0df2 data-v-55b931a0><span class="check" data-v-55b931a0><span class="icon" data-v-55b931a0><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-d0ee0df2><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-d0ee0df2><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-45c9f423 data-v-7cece6ac data-v-37af1650><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-37af1650><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-37af1650><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-37af1650><div class="VPMenu" data-v-37af1650 data-v-17dc081b><!----><!--[--><!--[--><!----><div class="group" data-v-7cece6ac><div class="item appearance" data-v-7cece6ac><p class="label" data-v-7cece6ac>Appearance</p><div class="appearance-action" data-v-7cece6ac><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" data-v-7cece6ac data-v-d0ee0df2 data-v-55b931a0><span class="check" data-v-55b931a0><span class="icon" data-v-55b931a0><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-d0ee0df2><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-d0ee0df2><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-45c9f423 data-v-5484e669><span class="container" data-v-5484e669><span class="top" data-v-5484e669></span><span class="middle" data-v-5484e669></span><span class="bottom" data-v-5484e669></span></span></button></div></div></div><!----></header><div class="VPLocalNav" data-v-058b7495 data-v-f623cd72><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-f623cd72><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-f623cd72><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-f623cd72>Menu</span></button><a class="top-link" href="#" data-v-f623cd72> Return to top </a></div><aside class="VPSidebar" data-v-058b7495 data-v-3b8ec0c7><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-3b8ec0c7><span class="visually-hidden" id="sidebar-aria-label" data-v-3b8ec0c7> Sidebar Navigation </span><!--[--><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Basic</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/button/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Button</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/check-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>CheckBox</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/radio/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Radio</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/progress-bar/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ProgressBar</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/progress-ring/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ProgressRing</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/toggle-switch/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ToggleSwitch</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/img/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Img</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/text-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>TextBox</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/combo-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ComboBox</span><!--]--><!----></a><!--]--></div></section></div><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Global</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/message-bar/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>MessageBar</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/info-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>InfoBox</span><!--]--><!----></a><!--]--></div></section></div><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Advance</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/color-picker/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ColorPicker</span><!--]--><!----></a><!--]--></div></section></div><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-058b7495 data-v-564173e9><div class="VPDoc has-sidebar" data-v-564173e9 data-v-32b7ddf4><div class="container" data-v-32b7ddf4><div class="aside" data-v-32b7ddf4><div class="aside-curtain" data-v-32b7ddf4></div><div class="aside-container" data-v-32b7ddf4><div class="aside-content" data-v-32b7ddf4><div class="VPDocAside" data-v-32b7ddf4 data-v-35c1bae1><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline has-outline" data-v-35c1bae1 data-v-123cce62><div class="content" data-v-123cce62><div class="outline-marker" data-v-123cce62></div><div class="outline-title" data-v-123cce62>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-123cce62><span class="visually-hidden" id="doc-outline-aria-label" data-v-123cce62> Table of Contents for current page </span><ul class="root" data-v-123cce62><!--[--><li style="" data-v-123cce62><a class="outline-link" href="#emits" data-v-123cce62>Emits</a><!----></li><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-35c1bae1></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-32b7ddf4><div class="content-container" data-v-32b7ddf4><!--[--><!--]--><main class="main" data-v-32b7ddf4><div style="position:relative;" class="vp-doc _VFluent3_guide_components_radio_emits" data-v-32b7ddf4><div><h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">blur</td><td style="text-align:center;">evt[FocusEvent]</td><td style="text-align:center;">onblur</td></tr><tr><td style="text-align:center;">change</td><td style="text-align:center;">val[boolean, null]</td><td style="text-align:center;">onchange</td></tr><tr><td style="text-align:center;">click</td><td style="text-align:center;">val[boolean, null]</td><td style="text-align:center;">onclick</td></tr><tr><td style="text-align:center;">focus</td><td style="text-align:center;">evt[FocusEvent]</td><td style="text-align:center;">onfocus</td></tr><tr><td style="text-align:center;">update:model-value</td><td style="text-align:center;">val[boolean]</td><td style="text-align:center;">v-model</td></tr></tbody></table></div></div></main><footer class="VPDocFooter" data-v-32b7ddf4 data-v-cfaa3a6c><div class="edit-info" data-v-cfaa3a6c><!----><!----></div><div class="prev-next" data-v-cfaa3a6c><div class="pager" data-v-cfaa3a6c><!----></div><div class="pager" data-v-cfaa3a6c><a class="pager-link next" href="/VFluent3/guide/components/button/" data-v-cfaa3a6c><span class="desc" data-v-cfaa3a6c>Next page</span><span class="title" data-v-cfaa3a6c>Button</span></a></div></div></footer><!--[--><!--]--></div></div></div></div></div><footer class="VPFooter has-sidebar" data-v-058b7495 data-v-a6c8dde4><div class="container" data-v-a6c8dde4><p class="message" data-v-a6c8dde4>MIT Licensed</p><p class="copyright" data-v-a6c8dde4>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
-    <script>__VP_HASH_MAP__ = JSON.parse("{\"guide_components_button_emits.md\":\"d682bf18\",\"guide_components_button_index.md\":\"23a8eb54\",\"guide_components_button_properties.md\":\"cd4004b6\",\"guide_components_check-box_emits.md\":\"31609794\",\"guide_components_check-box_index.md\":\"32046814\",\"guide_components_check-box_properties.md\":\"8f33ac0c\",\"guide_components_color-picker_emits.md\":\"00983cd0\",\"guide_components_color-picker_index.md\":\"b2d62612\",\"guide_components_color-picker_properties.md\":\"5466ba72\",\"guide_components_combo-box_emits.md\":\"d5ffda50\",\"guide_components_combo-box_index.md\":\"1c4364f5\",\"guide_components_combo-box_properties.md\":\"2e1d6060\",\"guide_components_img_emits.md\":\"6237adb4\",\"guide_components_img_index.md\":\"fa51a3a1\",\"guide_components_img_properties.md\":\"8d321b5e\",\"guide_components_info-box_emits.md\":\"c2e71eec\",\"guide_components_info-box_index.md\":\"06175fed\",\"guide_components_info-box_properties.md\":\"314dbb00\",\"guide_components_message-bar_emits.md\":\"e89a5a22\",\"guide_components_message-bar_index.md\":\"3f0b01d6\",\"guide_components_message-bar_properties.md\":\"ee3838d9\",\"guide_components_progress-bar_emits.md\":\"5b611e3b\",\"guide_components_progress-bar_index.md\":\"689c3241\",\"guide_components_progress-bar_properties.md\":\"39af7fb2\",\"guide_components_progress-ring_emits.md\":\"67e4644e\",\"guide_components_progress-ring_index.md\":\"9a33542b\",\"guide_components_progress-ring_properties.md\":\"c897c4bb\",\"guide_components_radio_emits.md\":\"28506857\",\"guide_components_radio_index.md\":\"e5a479ce\",\"guide_components_radio_properties.md\":\"f8e55d2f\",\"guide_components_text-box_emits.md\":\"0bf89ef8\",\"guide_components_text-box_index.md\":\"7ccfc637\",\"guide_components_text-box_properties.md\":\"aab3a89e\",\"guide_components_toggle-switch_emits.md\":\"5146435f\",\"guide_components_toggle-switch_index.md\":\"8be48081\",\"guide_components_toggle-switch_properties.md\":\"54984c3a\",\"guide_index.md\":\"e3dca1d7\",\"index.md\":\"1e9773d5\"}")</script>
-    <script type="module" async src="/VFluent3/assets/app.d60fa8c3.js"></script>
-    
-  </body>
-</html>
\ No newline at end of file
diff --git a/guide/components/radio/index.html b/guide/components/radio/index.html
index babf28e..966275b 100644
--- a/guide/components/radio/index.html
+++ b/guide/components/radio/index.html
@@ -1,116 +1,49 @@
 <!DOCTYPE html>
-<html lang="en-US">
+<html lang="en-US" dir="ltr">
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1">
     <title>Radio | vfluent3</title>
     <meta name="description" content="A Vue3 component library for Fluent UI">
-    <link rel="stylesheet" href="/VFluent3/assets/style.0a1d87af.css">
-    <link rel="modulepreload" href="/VFluent3/assets/chunks/index.9dba9c16.js">
-    <link rel="modulepreload" href="/VFluent3/assets/app.d60fa8c3.js">
-    <link rel="modulepreload" href="/VFluent3/assets/guide_components_radio_index.md.e5a479ce.lean.js">
+    <meta name="generator" content="VitePress v1.0.0-rc.45">
+    <link rel="preload stylesheet" href="/VFluent3/assets/style.BabQegKX.css" as="style">
     
-    <script>(()=>{const e=localStorage.getItem("vitepress-theme-appearance"),a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script type="module" src="/VFluent3/assets/app.CSutcJ2E.js"></script>
+    <link rel="preload" href="/VFluent3/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/framework.DvIFzl91.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/theme.CgqFBnN_.js">
+    <link rel="modulepreload" href="/VFluent3/assets/guide_components_radio_index.md.90as5QGp.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
   </head>
   <body>
-    <div id="app"><div class="Layout" data-v-058b7495><!--[--><!--]--><!--[--><span tabindex="-1" data-v-bea91388></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-bea91388> Skip to content </a><!--]--><!----><header class="VPNav" data-v-058b7495 data-v-2a0a2738><div class="VPNavBar has-sidebar" data-v-2a0a2738 data-v-45c9f423><div class="container" data-v-45c9f423><div class="VPNavBarTitle has-sidebar" data-v-45c9f423 data-v-011600ce><a class="title" href="/VFluent3/" data-v-011600ce><!----><!--[-->VFluent3<!--]--></a></div><div class="content" data-v-45c9f423><!----><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-45c9f423 data-v-4da4371d><span id="main-nav-aria-label" class="visually-hidden" data-v-4da4371d>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" data-v-4da4371d data-v-66f8d518 data-v-4d08dd3a><!--[-->Home<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" data-v-4da4371d data-v-66f8d518 data-v-4d08dd3a><!--[-->Guide<!--]--><!----></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-45c9f423 data-v-bf1c94ca><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" data-v-bf1c94ca data-v-d0ee0df2 data-v-55b931a0><span class="check" data-v-55b931a0><span class="icon" data-v-55b931a0><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-d0ee0df2><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-d0ee0df2><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-45c9f423 data-v-7cece6ac data-v-37af1650><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-37af1650><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-37af1650><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-37af1650><div class="VPMenu" data-v-37af1650 data-v-17dc081b><!----><!--[--><!--[--><!----><div class="group" data-v-7cece6ac><div class="item appearance" data-v-7cece6ac><p class="label" data-v-7cece6ac>Appearance</p><div class="appearance-action" data-v-7cece6ac><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" data-v-7cece6ac data-v-d0ee0df2 data-v-55b931a0><span class="check" data-v-55b931a0><span class="icon" data-v-55b931a0><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-d0ee0df2><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-d0ee0df2><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-45c9f423 data-v-5484e669><span class="container" data-v-5484e669><span class="top" data-v-5484e669></span><span class="middle" data-v-5484e669></span><span class="bottom" data-v-5484e669></span></span></button></div></div></div><!----></header><div class="VPLocalNav" data-v-058b7495 data-v-f623cd72><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-f623cd72><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-f623cd72><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-f623cd72>Menu</span></button><a class="top-link" href="#" data-v-f623cd72> Return to top </a></div><aside class="VPSidebar" data-v-058b7495 data-v-3b8ec0c7><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-3b8ec0c7><span class="visually-hidden" id="sidebar-aria-label" data-v-3b8ec0c7> Sidebar Navigation </span><!--[--><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Basic</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/button/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Button</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/check-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>CheckBox</span><!--]--><!----></a><a class="VPLink link active" href="/VFluent3/guide/components/radio/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Radio</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/progress-bar/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ProgressBar</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/progress-ring/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ProgressRing</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/toggle-switch/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ToggleSwitch</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/img/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Img</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/text-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>TextBox</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/combo-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ComboBox</span><!--]--><!----></a><!--]--></div></section></div><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Global</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/message-bar/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>MessageBar</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/info-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>InfoBox</span><!--]--><!----></a><!--]--></div></section></div><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Advance</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/color-picker/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ColorPicker</span><!--]--><!----></a><!--]--></div></section></div><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-058b7495 data-v-564173e9><div class="VPDoc has-sidebar" data-v-564173e9 data-v-32b7ddf4><div class="container" data-v-32b7ddf4><div class="aside" data-v-32b7ddf4><div class="aside-curtain" data-v-32b7ddf4></div><div class="aside-container" data-v-32b7ddf4><div class="aside-content" data-v-32b7ddf4><div class="VPDocAside" data-v-32b7ddf4 data-v-35c1bae1><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline has-outline" data-v-35c1bae1 data-v-123cce62><div class="content" data-v-123cce62><div class="outline-marker" data-v-123cce62></div><div class="outline-title" data-v-123cce62>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-123cce62><span class="visually-hidden" id="doc-outline-aria-label" data-v-123cce62> Table of Contents for current page </span><ul class="root" data-v-123cce62><!--[--><li style="" data-v-123cce62><a class="outline-link" href="#quick-start" data-v-123cce62>Quick Start</a><!----></li><li style="" data-v-123cce62><a class="outline-link" href="#properties" data-v-123cce62>Properties</a><!----></li><li style="" data-v-123cce62><a class="outline-link" href="#emits" data-v-123cce62>Emits</a><!----></li><li style="" data-v-123cce62><a class="outline-link" href="#slot" data-v-123cce62>Slot</a><!----></li><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-35c1bae1></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-32b7ddf4><div class="content-container" data-v-32b7ddf4><!--[--><!--]--><main class="main" data-v-32b7ddf4><div style="position:relative;" class="vp-doc _VFluent3_guide_components_radio_index" data-v-32b7ddf4><div><h2 id="quick-start" tabindex="-1">Quick Start <a class="header-anchor" href="#quick-start" aria-hidden="true">#</a></h2><h3 id="default" tabindex="-1">Default <a class="header-anchor" href="#default" aria-hidden="true">#</a></h3><br> Value:    <hr><div class="fv-radio light"><label class="label"><!----><input type="radio" class="radio" value="Microsoft" name="radio"><div class="icon" style="border-width:1.5px;"><div style="display:none;" class="dot"></div></div><span class="text" style=""><!--[--> Microsoft <!--]--></span></label></div><div class="fv-radio light"><label class="label"><!----><input type="radio" class="radio" value="Google" name="radio"><div class="icon" style="border-width:1.5px;"><div style="display:none;" class="dot"></div></div><span class="text" style=""><!--[--> Google <!--]--></span></label></div><div class="fv-radio light"><label class="label"><!----><input type="radio" class="radio" value="Apple" name="radio"><div class="icon" style="border-width:1.5px;"><div style="display:none;" class="dot"></div></div><span class="text" style=""><!--[--> Apple <!--]--></span></label></div><div class="language-vue-html"><span class="copy"></span><pre><code><span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-radio</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">v-model</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">    :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">group</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">radio</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">label</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">Microsoft</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">  </span></span>
-<span class="line"><span style="color:#89DDFF;">    @</span><span style="color:#C792EA;">click</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">click</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    @</span><span style="color:#C792EA;">change</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">change</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">  Microsoft</span></span>
-<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-radio</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-radio</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">v-model</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">    :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">group</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">radio</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">label</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">Google</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">  </span></span>
-<span class="line"><span style="color:#89DDFF;">    @</span><span style="color:#C792EA;">click</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">click</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    @</span><span style="color:#C792EA;">change</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">change</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">  Google</span></span>
-<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-radio</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-radio</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">v-model</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">    :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">group</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">radio</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">label</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">Apple</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">  </span></span>
-<span class="line"><span style="color:#89DDFF;">    @</span><span style="color:#C792EA;">click</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">click</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    @</span><span style="color:#C792EA;">change</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">change</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">  Apple</span></span>
-<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-radio</span><span style="color:#89DDFF;">&gt;</span></span>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-19c990f1><div class="wrapper" data-v-19c990f1><div class="container" data-v-19c990f1><div class="title" data-v-19c990f1><div class="VPNavBarTitle has-sidebar" data-v-19c990f1 data-v-ab179fa1><a class="title" href="/VFluent3/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>VFluent3</span><!--[--><!--]--></a></div></div><div class="content" data-v-19c990f1><div class="content-body" data-v-19c990f1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-19c990f1><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-19c990f1 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Guide</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-19c990f1 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-19c990f1 data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-19c990f1 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-19c990f1><div class="divider-line" data-v-19c990f1></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-d2ecc192><button data-v-d2ecc192>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-575e6a36><div class="curtain" data-v-575e6a36></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-575e6a36><span class="visually-hidden" id="sidebar-aria-label" data-v-575e6a36> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible has-active" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Basic input</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/button/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/check-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CheckBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/combobox/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Combobox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/details-list/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DetailsList</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drop-down/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DropDown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio-group/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RadioGroup</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/rating-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RatingControl</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/slider/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/toggle-switch/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ToggleSwitch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tag/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Tag</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Collections</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/flip-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>FlipView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/list-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ListView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tree-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TreeView</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Date & Time</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarDatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/time-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TimePicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Dialogs & flyouts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/callout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Callout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Layout</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/collapse/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Collapse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/expander/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Expander</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drawer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Panel</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Media</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/image/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Img</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ImgBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/persona/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Persona</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Menu & toolbars</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/command-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CommandBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/menu-flyout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MenuFlyout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/swipe-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SwipeControl</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Navigation</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/breadcrumb/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationPanel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pivot/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pivot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pagination/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pagination</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Scrolling</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/infinite-scroll-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfiniteScrollView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/scroll-story/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ScrollStory</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Status & info</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/badge/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-ring/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressRing</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Styles</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/animated-icon/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>AnimatedIcon</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/icon-element/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>IconElement</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/reveal-container/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RevealContainer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/shimmer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Shimmer</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Text</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/search-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SearchBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-field/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextField</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/verify-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>VerifyBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Windowing</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/web-window/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>WebWindow</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Global</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Advance</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-935f8a84><div class="content" data-v-935f8a84><div class="outline-marker" data-v-935f8a84></div><div class="outline-title" role="heading" aria-level="2" data-v-935f8a84>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-935f8a84><span class="visually-hidden" id="doc-outline-aria-label" data-v-935f8a84> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-935f8a84 data-v-b933a997><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _VFluent3_guide_components_radio_" data-v-39a288b8><div><nav class="table-of-contents"><ul><li><a href="#radio">Radio</a></li><li><a href="#radio-dark">Radio-Dark</a></li><li><a href="#radio-with-icon">Radio With Icon</a></li><li><a href="#radio-with-image">Radio With Image</a></li><li><a href="#radio-dark-with-icon">Radio-Dark With Icon</a></li><li><a href="#radio-custom-color">Radio Custom Color</a></li><li><a href="#propoties">Propoties</a></li><li><a href="#events">Events</a></li></ul></nav><h3 id="radio" tabindex="-1">Radio <a class="header-anchor" href="#radio" aria-label="Permalink to &quot;Radio&quot;">​</a></h3><hr><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;fv-radio v-model=&quot;value&quot; label=&quot;Option&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">Option</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/fv-radio&gt; </span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;fv-radio v-model=&quot;value&quot; label=&quot;Option2&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">Option2</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/fv-radio&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;fv-radio label=&quot;Option3&quot; disabled&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">Disabled</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/fv-radio&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><h3 id="radio-dark" tabindex="-1">Radio-Dark <a class="header-anchor" href="#radio-dark" aria-label="Permalink to &quot;Radio-Dark&quot;">​</a></h3><hr><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#000</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">30</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">padding</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">20</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;fv-radio v-model=&quot;value&quot; label=&quot;Option&quot; theme=&quot;dark&quot;&gt;Option&lt;/fv-radio&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;fv-radio v-model=&quot;value&quot; label=&quot;Option2&quot; theme=&quot;dark&quot; disabled&gt;Disabled&lt;/fv-radio&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h3 id="radio-with-icon" tabindex="-1">Radio With Icon <a class="header-anchor" href="#radio-with-icon" aria-label="Permalink to &quot;Radio With Icon&quot;">​</a></h3><hr><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;fv-radio v-model=&quot;value&quot; label=&quot;NUIIris&quot; icon=&quot;NUIIris&quot;&gt;NUIIris&lt;/fv-radio&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;fv-radio v-model=&quot;value&quot; label=&quot;MSN&quot; icon=&quot;NUIFace&quot; &gt;MSN&lt;/fv-radio&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;fv-radio v-model=&quot;value&quot; label=&quot;MSN&quot; icon=&quot;NUIFace&quot; disabled &gt;Disabled&lt;/fv-radio&gt;</span></span>
 <span class="line"></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br></div></div><h3 id="disabled" tabindex="-1">Disabled <a class="header-anchor" href="#disabled" aria-hidden="true">#</a></h3><hr><div class="fv-radio light disabled"><label class="label"><!----><input disabled type="radio" class="radio" value="Microsoft" name="radio"><div class="icon" style="border-width:1.5px;"><div style="display:none;" class="dot"></div></div><span class="text" style=""><!--[-->Microsoft<!--]--></span></label></div><div class="fv-radio light disabled"><label class="label"><!----><input disabled type="radio" class="radio" value="Google" name="radio"><div class="icon" style="border-width:1.5px;"><div style="display:none;" class="dot"></div></div><span class="text" style=""><!--[-->Google<!--]--></span></label></div><div class="fv-radio light disabled"><label class="label"><!----><input disabled type="radio" class="radio" value="Apple" name="radio"><div class="icon" style="border-width:1.5px;"><div style="display:none;" class="dot"></div></div><span class="text" style=""><!--[-->Apple<!--]--></span></label></div><div class="language-vue-html"><span class="copy"></span><pre><code><span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-radio</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">group</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">radio</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">label</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">Microsoft</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">v-model</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    @</span><span style="color:#C792EA;">click</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">click</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">disabled</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">  Microsoft</span></span>
-<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-radio</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-radio</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">group</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">radio</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">label</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">Google</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">v-model</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    @</span><span style="color:#C792EA;">click</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">click</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">disabled</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">  Google</span></span>
-<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-radio</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-radio</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">group</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">radio</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">label</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">Apple</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">v-model</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    @</span><span style="color:#C792EA;">click</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">click</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">disabled</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">  Apple</span></span>
-<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-radio</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br></div></div><h3 id="box-side" tabindex="-1">Box Side <a class="header-anchor" href="#box-side" aria-hidden="true">#</a></h3><hr><div class="fv-radio light"><label class="label"><span class="text" style=""><!--[-->Microsoft<!--]--></span><input type="radio" class="radio" value="Microsoft" name="radio"><div class="icon" style="border-width:1.5px;"><div style="display:none;" class="dot"></div></div><!----></label></div><div class="fv-radio light"><label class="label"><span class="text" style=""><!--[-->Google<!--]--></span><input type="radio" class="radio" value="Google" name="radio"><div class="icon" style="border-width:1.5px;"><div style="display:none;" class="dot"></div></div><!----></label></div><div class="fv-radio light"><label class="label"><span class="text" style=""><!--[-->Apple<!--]--></span><input type="radio" class="radio" value="Apple" name="radio"><div class="icon" style="border-width:1.5px;"><div style="display:none;" class="dot"></div></div><!----></label></div><div class="language-vue-html"><span class="copy"></span><pre><code><span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-radio</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">group</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">radio</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">label</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">Microsoft</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">v-model</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    @</span><span style="color:#C792EA;">click</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">click</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">box-side</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">end</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">  Microsoft</span></span>
-<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-radio</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-radio</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">group</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">radio</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">label</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">Google</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">v-model</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    @</span><span style="color:#C792EA;">click</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">click</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">box-side</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">end</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">  Google</span></span>
-<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-radio</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-radio</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">group</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">radio</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">label</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">Apple</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">v-model</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    @</span><span style="color:#C792EA;">click</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">click</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">box-side</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">end</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">  Apple</span></span>
-<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-radio</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br></div></div><h3 id="custom" tabindex="-1">Custom <a class="header-anchor" href="#custom" aria-hidden="true">#</a></h3><hr><ol><li>Set border width. <div class="fv-radio light active"><label class="label"><!----><input checked type="radio" class="radio" checked><div class="icon" style="border-width:2px;"><div style="" class="dot"></div></div><span class="text" style=""><!--[--> Radio rendered with borderWidth &quot;2&quot; <!--]--></span></label></div></li></ol><div class="language-vue-html"><span class="copy"></span><pre><code><span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-radio</span><span style="color:#89DDFF;"> :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> :</span><span style="color:#C792EA;">border-width</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#F78C6C;">2</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">v-model</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">    Radio rendered with borderWidth &quot;2&quot;</span></span>
-<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-radio</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ol start="2"><li>Set background and border color. <div class="fv-radio light active"><label class="label"><!----><input checked type="radio" class="radio" checked><div class="icon" style="background:rgba(0, 204, 153, 1);border-width:1.5px;border-color:rgba(0, 204, 153, 1);"><div style="" class="dot"></div></div><span class="text" style="color:rgba(0, 204, 153, 1);"><!--[--> Radio <!--]--></span></label></div></li></ol><div class="language-vue-html"><span class="copy"></span><pre><code><span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-radio</span></span>
-<span class="line"><span style="color:#89DDFF;">    :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">border-color</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">rgba(0, 204, 153, 1)</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">foreground</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">rgba(0, 204, 153, 1)</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">background</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">rgba(0, 204, 153, 1)</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">    Radio</span></span>
-<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-radio</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">background</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">background</td></tr><tr><td style="text-align:center;">border-color</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">borderColor</td></tr><tr><td style="text-align:center;">border-width</td><td style="text-align:center;">[number, string]</td><td style="text-align:center;">No</td><td style="text-align:center;">1.5</td><td style="text-align:center;">border width</td></tr><tr><td style="text-align:center;">box-side</td><td style="text-align:center;">[&#39;start&#39;, &#39;end&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">start</td><td style="text-align:center;">position</td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">disabled</td></tr><tr><td style="text-align:center;">foreground</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">foreground</td></tr><tr><td style="text-align:center;">group</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as input radio name property</td></tr><tr><td style="text-align:center;">hover-color</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">false status hover color</td></tr><tr><td style="text-align:center;">label</td><td style="text-align:center;">[boolean, string, number]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as input radio value property</td></tr><tr><td style="text-align:center;">lang</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">i18n</td></tr><tr><td style="text-align:center;">model-value</td><td style="text-align:center;">[boolean, string, number]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">value</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">[&#39;light&#39;, &#39;dark&#39;, &#39;global&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&quot;global&quot;</td><td style="text-align:center;">theme</td></tr></tbody></table><h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">blur</td><td style="text-align:center;">evt[FocusEvent]</td><td style="text-align:center;">onblur</td></tr><tr><td style="text-align:center;">change</td><td style="text-align:center;">val[boolean, null]</td><td style="text-align:center;">onchange</td></tr><tr><td style="text-align:center;">click</td><td style="text-align:center;">val[boolean, null]</td><td style="text-align:center;">onclick</td></tr><tr><td style="text-align:center;">focus</td><td style="text-align:center;">evt[FocusEvent]</td><td style="text-align:center;">onfocus</td></tr><tr><td style="text-align:center;">update:model-value</td><td style="text-align:center;">val[boolean]</td><td style="text-align:center;">v-model</td></tr></tbody></table><h2 id="slot" tabindex="-1">Slot <a class="header-anchor" href="#slot" aria-hidden="true">#</a></h2><hr><h3 id="default-1" tabindex="-1">Default <a class="header-anchor" href="#default-1" aria-hidden="true">#</a></h3><div class="language-vue-html"><span class="copy"></span><pre><code><span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-radio</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">{{</span><span style="color:#A6ACCD;">label here</span><span style="color:#89DDFF;">}}</span></span>
-<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-radio</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div></div></div></main><footer class="VPDocFooter" data-v-32b7ddf4 data-v-cfaa3a6c><div class="edit-info" data-v-cfaa3a6c><!----><!----></div><div class="prev-next" data-v-cfaa3a6c><div class="pager" data-v-cfaa3a6c><a class="pager-link prev" href="/VFluent3/guide/components/check-box/" data-v-cfaa3a6c><span class="desc" data-v-cfaa3a6c>Previous page</span><span class="title" data-v-cfaa3a6c>CheckBox</span></a></div><div class="has-prev pager" data-v-cfaa3a6c><a class="pager-link next" href="/VFluent3/guide/components/progress-bar/" data-v-cfaa3a6c><span class="desc" data-v-cfaa3a6c>Next page</span><span class="title" data-v-cfaa3a6c>ProgressBar</span></a></div></div></footer><!--[--><!--]--></div></div></div></div></div><footer class="VPFooter has-sidebar" data-v-058b7495 data-v-a6c8dde4><div class="container" data-v-a6c8dde4><p class="message" data-v-a6c8dde4>MIT Licensed</p><p class="copyright" data-v-a6c8dde4>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
-    <script>__VP_HASH_MAP__ = JSON.parse("{\"guide_components_button_emits.md\":\"d682bf18\",\"guide_components_button_index.md\":\"23a8eb54\",\"guide_components_button_properties.md\":\"cd4004b6\",\"guide_components_check-box_emits.md\":\"31609794\",\"guide_components_check-box_index.md\":\"32046814\",\"guide_components_check-box_properties.md\":\"8f33ac0c\",\"guide_components_color-picker_emits.md\":\"00983cd0\",\"guide_components_color-picker_index.md\":\"b2d62612\",\"guide_components_color-picker_properties.md\":\"5466ba72\",\"guide_components_combo-box_emits.md\":\"d5ffda50\",\"guide_components_combo-box_index.md\":\"1c4364f5\",\"guide_components_combo-box_properties.md\":\"2e1d6060\",\"guide_components_img_emits.md\":\"6237adb4\",\"guide_components_img_index.md\":\"fa51a3a1\",\"guide_components_img_properties.md\":\"8d321b5e\",\"guide_components_info-box_emits.md\":\"c2e71eec\",\"guide_components_info-box_index.md\":\"06175fed\",\"guide_components_info-box_properties.md\":\"314dbb00\",\"guide_components_message-bar_emits.md\":\"e89a5a22\",\"guide_components_message-bar_index.md\":\"3f0b01d6\",\"guide_components_message-bar_properties.md\":\"ee3838d9\",\"guide_components_progress-bar_emits.md\":\"5b611e3b\",\"guide_components_progress-bar_index.md\":\"689c3241\",\"guide_components_progress-bar_properties.md\":\"39af7fb2\",\"guide_components_progress-ring_emits.md\":\"67e4644e\",\"guide_components_progress-ring_index.md\":\"9a33542b\",\"guide_components_progress-ring_properties.md\":\"c897c4bb\",\"guide_components_radio_emits.md\":\"28506857\",\"guide_components_radio_index.md\":\"e5a479ce\",\"guide_components_radio_properties.md\":\"f8e55d2f\",\"guide_components_text-box_emits.md\":\"0bf89ef8\",\"guide_components_text-box_index.md\":\"7ccfc637\",\"guide_components_text-box_properties.md\":\"aab3a89e\",\"guide_components_toggle-switch_emits.md\":\"5146435f\",\"guide_components_toggle-switch_index.md\":\"8be48081\",\"guide_components_toggle-switch_properties.md\":\"54984c3a\",\"guide_index.md\":\"e3dca1d7\",\"index.md\":\"1e9773d5\"}")</script>
-    <script type="module" async src="/VFluent3/assets/app.d60fa8c3.js"></script>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h3 id="radio-with-image" tabindex="-1">Radio With Image <a class="header-anchor" href="#radio-with-image" aria-label="Permalink to &quot;Radio With Image&quot;">​</a></h3><hr><div><!----></div><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;fv-radio image=&quot;https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/choicegroup-bar-unselected.png&quot; activeImage=&quot;https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/choicegroup-bar-selected.png&quot; v-model=&quot;value&quot; label=&quot;chart&quot; &gt;Chart&lt;/fv-radio&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="radio-dark-with-icon" tabindex="-1">Radio-Dark With Icon <a class="header-anchor" href="#radio-dark-with-icon" aria-label="Permalink to &quot;Radio-Dark With Icon&quot;">​</a></h3><hr><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#000</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">padding</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">20</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;fv-radio v-model=&quot;value&quot; label=&quot;NUIIris&quot; icon=&quot;NUIIris&quot; theme=&quot;dark&quot;&gt;NUIIris&lt;/fv-radio&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;fv-radio v-model=&quot;value&quot; label=&quot;NUIIris&quot; icon=&quot;NUIIris&quot; theme=&quot;dark&quot; disabled&gt;disabled&lt;/fv-radio&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;fv-radio v-model=&quot;value&quot; label=&quot;MSN&quot; icon=&quot;NUIFace&quot; theme=&quot;dark&quot;&gt;MSN&lt;/fv-radio&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h3 id="radio-custom-color" tabindex="-1">Radio Custom Color <a class="header-anchor" href="#radio-custom-color" aria-label="Permalink to &quot;Radio Custom Color&quot;">​</a></h3><hr><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-radio</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  icon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;NUIIris&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">value</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;NUIIris&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#00cc99</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;dark&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &gt;NUIIris&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-radio</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-radio</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> icon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;NUIIris&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">value</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;NUIIris&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#00cc99</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;dark&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> disabled</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Disabled&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-radio</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">v-model/value</td><td style="text-align:center;">Object</td><td style="text-align:center;">Yes</td><td style="text-align:center;">undefined</td><td style="text-align:center;">选项值</td></tr><tr><td style="text-align:center;">label</td><td style="text-align:center;">Object</td><td style="text-align:center;">Yes</td><td style="text-align:center;">undefined</td><td style="text-align:center;">选项值</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">[&#39;system&#39;,&#39;dark&#39;,&#39;light&#39;,&#39;custom&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;system&#39;</td><td style="text-align:center;">主题色</td></tr><tr><td style="text-align:center;">icon</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">null</td><td style="text-align:center;">MS-ICON</td></tr><tr><td style="text-align:center;">color</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">null</td><td style="text-align:center;">文字和图标前景色</td></tr><tr><td style="text-align:center;">foreground</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">rgba(0, 120, 212, 0.829)</td><td style="text-align:center;">Radio前景色</td></tr><tr><td style="text-align:center;">iconBlockBorderRadius</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">3</td><td style="text-align:center;">带图标样式圆角大小</td></tr><tr><td style="text-align:center;">iconBlockBorderWidth</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">2</td><td style="text-align:center;">带图标样式边框大小</td></tr><tr><td style="text-align:center;">image</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">null</td><td style="text-align:center;">32*32 图像链接</td></tr><tr><td style="text-align:center;">activeImage</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">null</td><td style="text-align:center;">32*32 选中时的图像链接</td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否禁用</td></tr></tbody></table><h3 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to &quot;Events&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">事件名(Name)</th><th style="text-align:center;">参数类型(args)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">click</td><td style="text-align:center;">event</td><td style="text-align:center;">点击</td></tr><tr><td style="text-align:center;">actived</td><td style="text-align:center;">event</td><td style="text-align:center;">选中时触发</td></tr></tbody></table></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-09de1c0f><!--[--><!--]--><!----><nav class="prev-next" data-v-09de1c0f><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link prev" href="/VFluent3/guide/components/drop-down/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Previous page</span><span class="title" data-v-09de1c0f>DropDown</span><!--]--></a></div><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link next" href="/VFluent3/guide/components/radio-group/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Next page</span><span class="title" data-v-09de1c0f>RadioGroup</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>MIT Licensed</p><p class="copyright" data-v-e315a0ad>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_calendar-date-picker_properties.md\":\"DXRjmMG8\",\"guide_components_image_properties.md\":\"DGanRzCb\",\"guide_components_img-box_index.md\":\"DYtggkf_\",\"guide_components_img_emits.md\":\"BlE7jvZQ\",\"guide_components_img_index.md\":\"Bm9FiuU4\",\"guide_components_icon-element_properties.md\":\"8Oakruwc\",\"guide_components_img_properties.md\":\"B42YSocI\",\"guide_components_drawer_index.md\":\"D_vpnCpE\",\"guide_components_verify-box_emits.md\":\"DT17Iazx\",\"guide_components_calendar-date-picker_index.md\":\"BdHjrurh\",\"guide_components_rating-control_index.md\":\"Q9l5Lfrr\",\"guide_components_rating-control_properties.md\":\"DKprnl0i\",\"guide_components_calendar-view_index.md\":\"zdoRYVx1\",\"guide_components_animated-icon_index.md\":\"yZDMzCFe\",\"guide_components_calendar-date-picker_emits.md\":\"D5OkfR8j\",\"guide_components_badge_index.md\":\"Bb4crrJn\",\"guide_components_image_index.md\":\"B7X6cWAZ\",\"guide_components_slider_index.md\":\"C7zZ2d-W\",\"guide_components_radio-group_index.md\":\"CVfh3h5H\",\"guide_components_swipe-control_index.md\":\"DwrDVPc1\",\"guide_components_color-picker_emits.md\":\"BHDXVtBQ\",\"guide_components_radio_index.md\":\"90as5QGp\",\"guide_components_pagination_properties.md\":\"JUAPvcTL\",\"guide_components_persona_properties.md\":\"DUTPhPMp\",\"guide_components_combo-box_emits.md\":\"Dh5R-qEv\",\"guide_components_pivot_emits.md\":\"BTJPgNpy\",\"guide_components_pagination_index.md\":\"CnW2zAht\",\"guide_components_flip-view_properties.md\":\"BqZ4hhgU\",\"guide_components_icon-element_emits.md\":\"D5TXFdTZ\",\"guide_components_flip-view_index.md\":\"DefnDOv6\",\"guide_components_navigation-panel_index.md\":\"6mO__sSK\",\"guide_components_rating-control_emits.md\":\"blvomSeC\",\"guide_components_icon-element_index.md\":\"DQ8K7JNn\",\"guide_components_navigation-view_index.md\":\"4AQRiz1k\",\"guide_components_toggle-switch_emits.md\":\"CLGzrNut\",\"guide_components_toggle-switch_index.md\":\"61en_q9-\",\"guide_components_scroll-story_index.md\":\"Vpgb1HSV\",\"guide_components_reveal-container_index.md\":\"Cut2r4tV\",\"guide_components_search-box_emits.md\":\"-d9sWNNt\",\"guide_components_search-box_properties.md\":\"DEKFfPFw\",\"guide_components_shimmer_emits.md\":\"CTMInlI3\",\"guide_components_tag_index.md\":\"BhhxkcHn\",\"guide_components_search-box_index.md\":\"DgkrY0oY\",\"guide_components_shimmer_index.md\":\"iZlHuTxw\",\"guide_components_shimmer_properties.md\":\"CdkU1o6H\",\"guide_components_tree-view_index.md\":\"CUrwan4q\",\"guide_components_text-field_index.md\":\"CXSimJtj\",\"guide_components_text-box_index.md\":\"C5moAPfB\",\"guide_components_progress-ring_properties.md\":\"Dc08Uiff\",\"guide_components_toggle-switch_properties.md\":\"tFppK_IS\",\"guide_components_radio-group_emits.md\":\"cEDzKVnN\",\"guide_components_collapse_index.md\":\"N9Iu5-2v\",\"guide_components_image_emits.md\":\"lmlz2xJd\",\"guide_components_callout_index.md\":\"D9RU33w6\",\"guide_components_pivot_index.md\":\"B_vwQL-5\",\"guide_components_command-bar_index.md\":\"Cp4_rrGB\",\"guide_components_pagination_emits.md\":\"Dng86A22\",\"guide_components_button_index.md\":\"7sqT2MQP\",\"guide_components_info-box_properties.md\":\"BI7Nvk-E\",\"guide_components_drop-down_emits.md\":\"BE95TdKW\",\"guide_components_expander_index.md\":\"BKgcUJzQ\",\"guide_components_message-bar_index.md\":\"AEtAWlF8\",\"guide_components_menu-flyout_index.md\":\"Csa7irPj\",\"guide_components_panel_index.md\":\"CsTu0bXo\",\"guide_components_panel_properties.md\":\"BaxoCYKq\",\"guide_components_progress-bar_emits.md\":\"BcwXUpsF\",\"guide_components_progress-bar_properties.md\":\"TxiS9ZMA\",\"guide_components_progress-ring_emits.md\":\"D2Y6hIZ9\",\"guide_components_color-picker_index.md\":\"DCc4ixcU\",\"guide_components_progress-ring_index.md\":\"CPb-ZEPE\",\"guide_components_color-picker_properties.md\":\"wcXK29Vl\",\"guide_components_time-picker_index.md\":\"CQJdRRaG\",\"guide_components_drop-down_properties.md\":\"Bwlkpr1q\",\"guide_components_infinite-scroll-view_index.md\":\"yAuD807x\",\"guide_components_check-box_index.md\":\"FYgdu4oq\",\"guide_components_progress-bar_index.md\":\"D8vHQw5V\",\"guide_components_combo-box_index.md\":\"DTyu3eNd\",\"guide_components_info-box_emits.md\":\"DlEwpkkq\",\"guide_components_drop-down_index.md\":\"BZzJZQWq\",\"guide_components_list-view_index.md\":\"BoYvMzb0\",\"guide_components_verify-box_properties.md\":\"CW6W8fFf\",\"guide_components_verify-box_index.md\":\"DwSB40wR\",\"guide_index.md\":\"Bndlt3sL\",\"guide_components_web-window_index.md\":\"Bxc8vEeI\",\"index.md\":\"MTRqI42u\",\"guide_components_combo-box_properties.md\":\"AWfHzV6x\",\"guide_components_combobox_emits.md\":\"CGB6WLt8\",\"guide_components_combobox_properties.md\":\"Bja0hMou\",\"guide_components_details-list_index.md\":\"CcgOCIyt\",\"guide_components_info-box_index.md\":\"vXh-_DsL\",\"guide_components_combobox_index.md\":\"CsPkY6YB\",\"guide_components_date-picker_index.md\":\"12vmUIup\",\"guide_components_flip-view_emits.md\":\"DCheHjDj\",\"guide_components_panel_emits.md\":\"DG0REDq8\",\"guide_components_breadcrumb_index.md\":\"DyDm7PeP\",\"guide_components_radio-group_properties.md\":\"BnPxoKsQ\",\"guide_components_persona_emits.md\":\"CnsDPKRU\",\"guide_components_pivot_properties.md\":\"BmoLpPi1\",\"guide_components_persona_index.md\":\"DT00jby4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vfluent3\",\"description\":\"A Vue3 component library for Fluent UI\",\"base\":\"/VFluent3/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"VFluent3\",\"footer\":{\"message\":\"MIT Licensed\",\"copyright\":\"Copyright © Creator SN - 2022\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/\"}],\"sidebar\":[{\"text\":\"Basic input\",\"collapsed\":true,\"items\":[{\"text\":\"Button\",\"link\":\"/guide/components/button/\"},{\"text\":\"CheckBox\",\"link\":\"/guide/components/check-box/\"},{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"},{\"text\":\"Combobox\",\"link\":\"/guide/components/combobox/\"},{\"text\":\"DetailsList\",\"link\":\"/guide/components/details-list/\"},{\"text\":\"DropDown\",\"link\":\"/guide/components/drop-down/\"},{\"text\":\"Radio\",\"link\":\"/guide/components/radio/\"},{\"text\":\"RadioGroup\",\"link\":\"/guide/components/radio-group/\"},{\"text\":\"RatingControl\",\"link\":\"/guide/components/rating-control/\"},{\"text\":\"Slider\",\"link\":\"/guide/components/slider/\"},{\"text\":\"ToggleSwitch\",\"link\":\"/guide/components/toggle-switch/\"},{\"text\":\"Tag\",\"link\":\"/guide/components/tag/\"}]},{\"text\":\"Collections\",\"collapsed\":true,\"items\":[{\"text\":\"FlipView\",\"link\":\"/guide/components/flip-view/\"},{\"text\":\"ListView\",\"link\":\"/guide/components/list-view/\"},{\"text\":\"TreeView\",\"link\":\"/guide/components/tree-view/\"}]},{\"text\":\"Date & Time\",\"collapsed\":true,\"items\":[{\"text\":\"CalendarDatePicker\",\"link\":\"/guide/components/calendar-date-picker/\"},{\"text\":\"CalendarView\",\"link\":\"/guide/components/calendar-view/\"},{\"text\":\"DatePicker\",\"link\":\"/guide/components/date-picker/\"},{\"text\":\"TimePicker\",\"link\":\"/guide/components/time-picker/\"}]},{\"text\":\"Dialogs & flyouts\",\"collapsed\":true,\"items\":[{\"text\":\"Callout\",\"link\":\"/guide/components/callout/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Layout\",\"collapsed\":true,\"items\":[{\"text\":\"Collapse\",\"link\":\"/guide/components/collapse/\"},{\"text\":\"Expander\",\"link\":\"/guide/components/expander/\"},{\"text\":\"Drawer\",\"link\":\"/guide/components/drawer/\"},{\"text\":\"Panel\",\"link\":\"/guide/components/panel/\"}]},{\"text\":\"Media\",\"collapsed\":true,\"items\":[{\"text\":\"Image\",\"link\":\"/guide/components/image/\"},{\"text\":\"Img\",\"link\":\"/guide/components/img/\"},{\"text\":\"ImgBox\",\"link\":\"/guide/components/img-box/\"},{\"text\":\"Persona\",\"link\":\"/guide/components/persona/\"}]},{\"text\":\"Menu & toolbars\",\"collapsed\":true,\"items\":[{\"text\":\"CommandBar\",\"link\":\"/guide/components/command-bar/\"},{\"text\":\"MenuFlyout\",\"link\":\"/guide/components/menu-flyout/\"},{\"text\":\"SwipeControl\",\"link\":\"/guide/components/swipe-control/\"}]},{\"text\":\"Navigation\",\"collapsed\":true,\"items\":[{\"text\":\"Breadcrumb\",\"link\":\"/guide/components/breadcrumb/\"},{\"text\":\"NavigationPanel\",\"link\":\"/guide/components/navigation-panel/\"},{\"text\":\"NavigationView\",\"link\":\"/guide/components/navigation-view/\"},{\"text\":\"Pivot\",\"link\":\"/guide/components/pivot/\"},{\"text\":\"Pagination\",\"link\":\"/guide/components/pagination/\"}]},{\"text\":\"Scrolling\",\"collapsed\":true,\"items\":[{\"text\":\"InfiniteScrollView\",\"link\":\"/guide/components/infinite-scroll-view/\"},{\"text\":\"ScrollStory\",\"link\":\"/guide/components/scroll-story/\"}]},{\"text\":\"Status & info\",\"collapsed\":true,\"items\":[{\"text\":\"Badge\",\"link\":\"/guide/components/badge/\"},{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"ProgressBar\",\"link\":\"/guide/components/progress-bar/\"},{\"text\":\"ProgressRing\",\"link\":\"/guide/components/progress-ring/\"}]},{\"text\":\"Styles\",\"collapsed\":true,\"items\":[{\"text\":\"AnimatedIcon\",\"link\":\"/guide/components/animated-icon/\"},{\"text\":\"IconElement\",\"link\":\"/guide/components/icon-element/\"},{\"text\":\"RevealContainer\",\"link\":\"/guide/components/reveal-container/\"},{\"text\":\"Shimmer\",\"link\":\"/guide/components/shimmer/\"}]},{\"text\":\"Text\",\"collapsed\":true,\"items\":[{\"text\":\"SearchBox\",\"link\":\"/guide/components/search-box/\"},{\"text\":\"TextBox\",\"link\":\"/guide/components/text-box/\"},{\"text\":\"TextField\",\"link\":\"/guide/components/text-field/\"},{\"text\":\"VerifyBox\",\"link\":\"/guide/components/verify-box/\"}]},{\"text\":\"Windowing\",\"collapsed\":true,\"items\":[{\"text\":\"WebWindow\",\"link\":\"/guide/components/web-window/\"}]},{\"text\":\"Global\",\"collapsed\":true,\"items\":[{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Advance\",\"collapsed\":true,\"items\":[{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
     
   </body>
 </html>
\ No newline at end of file
diff --git a/guide/components/radio/properties.html b/guide/components/radio/properties.html
deleted file mode 100644
index 6cef7f2..0000000
--- a/guide/components/radio/properties.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<!DOCTYPE html>
-<html lang="en-US">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>Properties | vfluent3</title>
-    <meta name="description" content="A Vue3 component library for Fluent UI">
-    <link rel="stylesheet" href="/VFluent3/assets/style.0a1d87af.css">
-    <link rel="modulepreload" href="/VFluent3/assets/app.d60fa8c3.js">
-    <link rel="modulepreload" href="/VFluent3/assets/guide_components_radio_properties.md.f8e55d2f.lean.js">
-    
-    <script>(()=>{const e=localStorage.getItem("vitepress-theme-appearance"),a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
-  </head>
-  <body>
-    <div id="app"><div class="Layout" data-v-058b7495><!--[--><!--]--><!--[--><span tabindex="-1" data-v-bea91388></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-bea91388> Skip to content </a><!--]--><!----><header class="VPNav" data-v-058b7495 data-v-2a0a2738><div class="VPNavBar has-sidebar" data-v-2a0a2738 data-v-45c9f423><div class="container" data-v-45c9f423><div class="VPNavBarTitle has-sidebar" data-v-45c9f423 data-v-011600ce><a class="title" href="/VFluent3/" data-v-011600ce><!----><!--[-->VFluent3<!--]--></a></div><div class="content" data-v-45c9f423><!----><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-45c9f423 data-v-4da4371d><span id="main-nav-aria-label" class="visually-hidden" data-v-4da4371d>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" data-v-4da4371d data-v-66f8d518 data-v-4d08dd3a><!--[-->Home<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" data-v-4da4371d data-v-66f8d518 data-v-4d08dd3a><!--[-->Guide<!--]--><!----></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-45c9f423 data-v-bf1c94ca><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" data-v-bf1c94ca data-v-d0ee0df2 data-v-55b931a0><span class="check" data-v-55b931a0><span class="icon" data-v-55b931a0><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-d0ee0df2><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-d0ee0df2><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-45c9f423 data-v-7cece6ac data-v-37af1650><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-37af1650><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-37af1650><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-37af1650><div class="VPMenu" data-v-37af1650 data-v-17dc081b><!----><!--[--><!--[--><!----><div class="group" data-v-7cece6ac><div class="item appearance" data-v-7cece6ac><p class="label" data-v-7cece6ac>Appearance</p><div class="appearance-action" data-v-7cece6ac><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" data-v-7cece6ac data-v-d0ee0df2 data-v-55b931a0><span class="check" data-v-55b931a0><span class="icon" data-v-55b931a0><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-d0ee0df2><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-d0ee0df2><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-45c9f423 data-v-5484e669><span class="container" data-v-5484e669><span class="top" data-v-5484e669></span><span class="middle" data-v-5484e669></span><span class="bottom" data-v-5484e669></span></span></button></div></div></div><!----></header><div class="VPLocalNav" data-v-058b7495 data-v-f623cd72><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-f623cd72><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-f623cd72><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-f623cd72>Menu</span></button><a class="top-link" href="#" data-v-f623cd72> Return to top </a></div><aside class="VPSidebar" data-v-058b7495 data-v-3b8ec0c7><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-3b8ec0c7><span class="visually-hidden" id="sidebar-aria-label" data-v-3b8ec0c7> Sidebar Navigation </span><!--[--><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Basic</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/button/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Button</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/check-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>CheckBox</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/radio/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Radio</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/progress-bar/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ProgressBar</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/progress-ring/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ProgressRing</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/toggle-switch/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ToggleSwitch</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/img/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Img</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/text-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>TextBox</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/combo-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ComboBox</span><!--]--><!----></a><!--]--></div></section></div><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Global</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/message-bar/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>MessageBar</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/info-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>InfoBox</span><!--]--><!----></a><!--]--></div></section></div><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Advance</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/color-picker/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ColorPicker</span><!--]--><!----></a><!--]--></div></section></div><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-058b7495 data-v-564173e9><div class="VPDoc has-sidebar" data-v-564173e9 data-v-32b7ddf4><div class="container" data-v-32b7ddf4><div class="aside" data-v-32b7ddf4><div class="aside-curtain" data-v-32b7ddf4></div><div class="aside-container" data-v-32b7ddf4><div class="aside-content" data-v-32b7ddf4><div class="VPDocAside" data-v-32b7ddf4 data-v-35c1bae1><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline has-outline" data-v-35c1bae1 data-v-123cce62><div class="content" data-v-123cce62><div class="outline-marker" data-v-123cce62></div><div class="outline-title" data-v-123cce62>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-123cce62><span class="visually-hidden" id="doc-outline-aria-label" data-v-123cce62> Table of Contents for current page </span><ul class="root" data-v-123cce62><!--[--><li style="" data-v-123cce62><a class="outline-link" href="#properties" data-v-123cce62>Properties</a><!----></li><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-35c1bae1></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-32b7ddf4><div class="content-container" data-v-32b7ddf4><!--[--><!--]--><main class="main" data-v-32b7ddf4><div style="position:relative;" class="vp-doc _VFluent3_guide_components_radio_properties" data-v-32b7ddf4><div><h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">background</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">background</td></tr><tr><td style="text-align:center;">border-color</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">borderColor</td></tr><tr><td style="text-align:center;">border-width</td><td style="text-align:center;">[number, string]</td><td style="text-align:center;">No</td><td style="text-align:center;">1.5</td><td style="text-align:center;">border width</td></tr><tr><td style="text-align:center;">box-side</td><td style="text-align:center;">[&#39;start&#39;, &#39;end&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">start</td><td style="text-align:center;">position</td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">disabled</td></tr><tr><td style="text-align:center;">foreground</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">foreground</td></tr><tr><td style="text-align:center;">group</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as input radio name property</td></tr><tr><td style="text-align:center;">hover-color</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">false status hover color</td></tr><tr><td style="text-align:center;">label</td><td style="text-align:center;">[boolean, string, number]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as input radio value property</td></tr><tr><td style="text-align:center;">lang</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">i18n</td></tr><tr><td style="text-align:center;">model-value</td><td style="text-align:center;">[boolean, string, number]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">value</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">[&#39;light&#39;, &#39;dark&#39;, &#39;global&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&quot;global&quot;</td><td style="text-align:center;">theme</td></tr></tbody></table></div></div></main><footer class="VPDocFooter" data-v-32b7ddf4 data-v-cfaa3a6c><div class="edit-info" data-v-cfaa3a6c><!----><!----></div><div class="prev-next" data-v-cfaa3a6c><div class="pager" data-v-cfaa3a6c><!----></div><div class="pager" data-v-cfaa3a6c><a class="pager-link next" href="/VFluent3/guide/components/button/" data-v-cfaa3a6c><span class="desc" data-v-cfaa3a6c>Next page</span><span class="title" data-v-cfaa3a6c>Button</span></a></div></div></footer><!--[--><!--]--></div></div></div></div></div><footer class="VPFooter has-sidebar" data-v-058b7495 data-v-a6c8dde4><div class="container" data-v-a6c8dde4><p class="message" data-v-a6c8dde4>MIT Licensed</p><p class="copyright" data-v-a6c8dde4>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
-    <script>__VP_HASH_MAP__ = JSON.parse("{\"guide_components_button_emits.md\":\"d682bf18\",\"guide_components_button_index.md\":\"23a8eb54\",\"guide_components_button_properties.md\":\"cd4004b6\",\"guide_components_check-box_emits.md\":\"31609794\",\"guide_components_check-box_index.md\":\"32046814\",\"guide_components_check-box_properties.md\":\"8f33ac0c\",\"guide_components_color-picker_emits.md\":\"00983cd0\",\"guide_components_color-picker_index.md\":\"b2d62612\",\"guide_components_color-picker_properties.md\":\"5466ba72\",\"guide_components_combo-box_emits.md\":\"d5ffda50\",\"guide_components_combo-box_index.md\":\"1c4364f5\",\"guide_components_combo-box_properties.md\":\"2e1d6060\",\"guide_components_img_emits.md\":\"6237adb4\",\"guide_components_img_index.md\":\"fa51a3a1\",\"guide_components_img_properties.md\":\"8d321b5e\",\"guide_components_info-box_emits.md\":\"c2e71eec\",\"guide_components_info-box_index.md\":\"06175fed\",\"guide_components_info-box_properties.md\":\"314dbb00\",\"guide_components_message-bar_emits.md\":\"e89a5a22\",\"guide_components_message-bar_index.md\":\"3f0b01d6\",\"guide_components_message-bar_properties.md\":\"ee3838d9\",\"guide_components_progress-bar_emits.md\":\"5b611e3b\",\"guide_components_progress-bar_index.md\":\"689c3241\",\"guide_components_progress-bar_properties.md\":\"39af7fb2\",\"guide_components_progress-ring_emits.md\":\"67e4644e\",\"guide_components_progress-ring_index.md\":\"9a33542b\",\"guide_components_progress-ring_properties.md\":\"c897c4bb\",\"guide_components_radio_emits.md\":\"28506857\",\"guide_components_radio_index.md\":\"e5a479ce\",\"guide_components_radio_properties.md\":\"f8e55d2f\",\"guide_components_text-box_emits.md\":\"0bf89ef8\",\"guide_components_text-box_index.md\":\"7ccfc637\",\"guide_components_text-box_properties.md\":\"aab3a89e\",\"guide_components_toggle-switch_emits.md\":\"5146435f\",\"guide_components_toggle-switch_index.md\":\"8be48081\",\"guide_components_toggle-switch_properties.md\":\"54984c3a\",\"guide_index.md\":\"e3dca1d7\",\"index.md\":\"1e9773d5\"}")</script>
-    <script type="module" async src="/VFluent3/assets/app.d60fa8c3.js"></script>
-    
-  </body>
-</html>
\ No newline at end of file
diff --git a/guide/components/rating-control/emits.html b/guide/components/rating-control/emits.html
new file mode 100644
index 0000000..9ccd993
--- /dev/null
+++ b/guide/components/rating-control/emits.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>vfluent3</title>
+    <meta name="description" content="A Vue3 component library for Fluent UI">
+    <meta name="generator" content="VitePress v1.0.0-rc.45">
+    <link rel="preload stylesheet" href="/VFluent3/assets/style.BabQegKX.css" as="style">
+    
+    <script type="module" src="/VFluent3/assets/app.CSutcJ2E.js"></script>
+    <link rel="preload" href="/VFluent3/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/framework.DvIFzl91.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/theme.CgqFBnN_.js">
+    <link rel="modulepreload" href="/VFluent3/assets/guide_components_rating-control_emits.md.blvomSeC.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-19c990f1><div class="wrapper" data-v-19c990f1><div class="container" data-v-19c990f1><div class="title" data-v-19c990f1><div class="VPNavBarTitle has-sidebar" data-v-19c990f1 data-v-ab179fa1><a class="title" href="/VFluent3/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>VFluent3</span><!--[--><!--]--></a></div></div><div class="content" data-v-19c990f1><div class="content-body" data-v-19c990f1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-19c990f1><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-19c990f1 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Guide</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-19c990f1 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-19c990f1 data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-19c990f1 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-19c990f1><div class="divider-line" data-v-19c990f1></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-d2ecc192><button data-v-d2ecc192>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-575e6a36><div class="curtain" data-v-575e6a36></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-575e6a36><span class="visually-hidden" id="sidebar-aria-label" data-v-575e6a36> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Basic input</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/button/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/check-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CheckBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/combobox/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Combobox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/details-list/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DetailsList</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drop-down/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DropDown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio-group/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RadioGroup</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/rating-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RatingControl</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/slider/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/toggle-switch/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ToggleSwitch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tag/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Tag</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Collections</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/flip-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>FlipView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/list-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ListView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tree-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TreeView</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Date & Time</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarDatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/time-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TimePicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Dialogs & flyouts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/callout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Callout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Layout</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/collapse/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Collapse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/expander/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Expander</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drawer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Panel</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Media</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/image/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Img</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ImgBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/persona/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Persona</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Menu & toolbars</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/command-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CommandBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/menu-flyout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MenuFlyout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/swipe-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SwipeControl</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Navigation</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/breadcrumb/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationPanel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pivot/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pivot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pagination/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pagination</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Scrolling</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/infinite-scroll-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfiniteScrollView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/scroll-story/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ScrollStory</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Status & info</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/badge/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-ring/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressRing</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Styles</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/animated-icon/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>AnimatedIcon</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/icon-element/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>IconElement</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/reveal-container/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RevealContainer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/shimmer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Shimmer</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Text</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/search-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SearchBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-field/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextField</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/verify-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>VerifyBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Windowing</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/web-window/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>WebWindow</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Global</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Advance</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-935f8a84><div class="content" data-v-935f8a84><div class="outline-marker" data-v-935f8a84></div><div class="outline-title" role="heading" aria-level="2" data-v-935f8a84>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-935f8a84><span class="visually-hidden" id="doc-outline-aria-label" data-v-935f8a84> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-935f8a84 data-v-b933a997><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _VFluent3_guide_components_rating-control_emits" data-v-39a288b8><div><h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-label="Permalink to &quot;Emits&quot;">​</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead></table></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-09de1c0f><!--[--><!--]--><!----><nav class="prev-next" data-v-09de1c0f><div class="pager" data-v-09de1c0f><!----></div><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link next" href="/VFluent3/guide/components/button/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Next page</span><span class="title" data-v-09de1c0f>Button</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>MIT Licensed</p><p class="copyright" data-v-e315a0ad>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_calendar-date-picker_properties.md\":\"DXRjmMG8\",\"guide_components_image_properties.md\":\"DGanRzCb\",\"guide_components_img-box_index.md\":\"DYtggkf_\",\"guide_components_img_emits.md\":\"BlE7jvZQ\",\"guide_components_img_index.md\":\"Bm9FiuU4\",\"guide_components_icon-element_properties.md\":\"8Oakruwc\",\"guide_components_img_properties.md\":\"B42YSocI\",\"guide_components_drawer_index.md\":\"D_vpnCpE\",\"guide_components_verify-box_emits.md\":\"DT17Iazx\",\"guide_components_calendar-date-picker_index.md\":\"BdHjrurh\",\"guide_components_rating-control_index.md\":\"Q9l5Lfrr\",\"guide_components_rating-control_properties.md\":\"DKprnl0i\",\"guide_components_calendar-view_index.md\":\"zdoRYVx1\",\"guide_components_animated-icon_index.md\":\"yZDMzCFe\",\"guide_components_calendar-date-picker_emits.md\":\"D5OkfR8j\",\"guide_components_badge_index.md\":\"Bb4crrJn\",\"guide_components_image_index.md\":\"B7X6cWAZ\",\"guide_components_slider_index.md\":\"C7zZ2d-W\",\"guide_components_radio-group_index.md\":\"CVfh3h5H\",\"guide_components_swipe-control_index.md\":\"DwrDVPc1\",\"guide_components_color-picker_emits.md\":\"BHDXVtBQ\",\"guide_components_radio_index.md\":\"90as5QGp\",\"guide_components_pagination_properties.md\":\"JUAPvcTL\",\"guide_components_persona_properties.md\":\"DUTPhPMp\",\"guide_components_combo-box_emits.md\":\"Dh5R-qEv\",\"guide_components_pivot_emits.md\":\"BTJPgNpy\",\"guide_components_pagination_index.md\":\"CnW2zAht\",\"guide_components_flip-view_properties.md\":\"BqZ4hhgU\",\"guide_components_icon-element_emits.md\":\"D5TXFdTZ\",\"guide_components_flip-view_index.md\":\"DefnDOv6\",\"guide_components_navigation-panel_index.md\":\"6mO__sSK\",\"guide_components_rating-control_emits.md\":\"blvomSeC\",\"guide_components_icon-element_index.md\":\"DQ8K7JNn\",\"guide_components_navigation-view_index.md\":\"4AQRiz1k\",\"guide_components_toggle-switch_emits.md\":\"CLGzrNut\",\"guide_components_toggle-switch_index.md\":\"61en_q9-\",\"guide_components_scroll-story_index.md\":\"Vpgb1HSV\",\"guide_components_reveal-container_index.md\":\"Cut2r4tV\",\"guide_components_search-box_emits.md\":\"-d9sWNNt\",\"guide_components_search-box_properties.md\":\"DEKFfPFw\",\"guide_components_shimmer_emits.md\":\"CTMInlI3\",\"guide_components_tag_index.md\":\"BhhxkcHn\",\"guide_components_search-box_index.md\":\"DgkrY0oY\",\"guide_components_shimmer_index.md\":\"iZlHuTxw\",\"guide_components_shimmer_properties.md\":\"CdkU1o6H\",\"guide_components_tree-view_index.md\":\"CUrwan4q\",\"guide_components_text-field_index.md\":\"CXSimJtj\",\"guide_components_text-box_index.md\":\"C5moAPfB\",\"guide_components_progress-ring_properties.md\":\"Dc08Uiff\",\"guide_components_toggle-switch_properties.md\":\"tFppK_IS\",\"guide_components_radio-group_emits.md\":\"cEDzKVnN\",\"guide_components_collapse_index.md\":\"N9Iu5-2v\",\"guide_components_image_emits.md\":\"lmlz2xJd\",\"guide_components_callout_index.md\":\"D9RU33w6\",\"guide_components_pivot_index.md\":\"B_vwQL-5\",\"guide_components_command-bar_index.md\":\"Cp4_rrGB\",\"guide_components_pagination_emits.md\":\"Dng86A22\",\"guide_components_button_index.md\":\"7sqT2MQP\",\"guide_components_info-box_properties.md\":\"BI7Nvk-E\",\"guide_components_drop-down_emits.md\":\"BE95TdKW\",\"guide_components_expander_index.md\":\"BKgcUJzQ\",\"guide_components_message-bar_index.md\":\"AEtAWlF8\",\"guide_components_menu-flyout_index.md\":\"Csa7irPj\",\"guide_components_panel_index.md\":\"CsTu0bXo\",\"guide_components_panel_properties.md\":\"BaxoCYKq\",\"guide_components_progress-bar_emits.md\":\"BcwXUpsF\",\"guide_components_progress-bar_properties.md\":\"TxiS9ZMA\",\"guide_components_progress-ring_emits.md\":\"D2Y6hIZ9\",\"guide_components_color-picker_index.md\":\"DCc4ixcU\",\"guide_components_progress-ring_index.md\":\"CPb-ZEPE\",\"guide_components_color-picker_properties.md\":\"wcXK29Vl\",\"guide_components_time-picker_index.md\":\"CQJdRRaG\",\"guide_components_drop-down_properties.md\":\"Bwlkpr1q\",\"guide_components_infinite-scroll-view_index.md\":\"yAuD807x\",\"guide_components_check-box_index.md\":\"FYgdu4oq\",\"guide_components_progress-bar_index.md\":\"D8vHQw5V\",\"guide_components_combo-box_index.md\":\"DTyu3eNd\",\"guide_components_info-box_emits.md\":\"DlEwpkkq\",\"guide_components_drop-down_index.md\":\"BZzJZQWq\",\"guide_components_list-view_index.md\":\"BoYvMzb0\",\"guide_components_verify-box_properties.md\":\"CW6W8fFf\",\"guide_components_verify-box_index.md\":\"DwSB40wR\",\"guide_index.md\":\"Bndlt3sL\",\"guide_components_web-window_index.md\":\"Bxc8vEeI\",\"index.md\":\"MTRqI42u\",\"guide_components_combo-box_properties.md\":\"AWfHzV6x\",\"guide_components_combobox_emits.md\":\"CGB6WLt8\",\"guide_components_combobox_properties.md\":\"Bja0hMou\",\"guide_components_details-list_index.md\":\"CcgOCIyt\",\"guide_components_info-box_index.md\":\"vXh-_DsL\",\"guide_components_combobox_index.md\":\"CsPkY6YB\",\"guide_components_date-picker_index.md\":\"12vmUIup\",\"guide_components_flip-view_emits.md\":\"DCheHjDj\",\"guide_components_panel_emits.md\":\"DG0REDq8\",\"guide_components_breadcrumb_index.md\":\"DyDm7PeP\",\"guide_components_radio-group_properties.md\":\"BnPxoKsQ\",\"guide_components_persona_emits.md\":\"CnsDPKRU\",\"guide_components_pivot_properties.md\":\"BmoLpPi1\",\"guide_components_persona_index.md\":\"DT00jby4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vfluent3\",\"description\":\"A Vue3 component library for Fluent UI\",\"base\":\"/VFluent3/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"VFluent3\",\"footer\":{\"message\":\"MIT Licensed\",\"copyright\":\"Copyright © Creator SN - 2022\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/\"}],\"sidebar\":[{\"text\":\"Basic input\",\"collapsed\":true,\"items\":[{\"text\":\"Button\",\"link\":\"/guide/components/button/\"},{\"text\":\"CheckBox\",\"link\":\"/guide/components/check-box/\"},{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"},{\"text\":\"Combobox\",\"link\":\"/guide/components/combobox/\"},{\"text\":\"DetailsList\",\"link\":\"/guide/components/details-list/\"},{\"text\":\"DropDown\",\"link\":\"/guide/components/drop-down/\"},{\"text\":\"Radio\",\"link\":\"/guide/components/radio/\"},{\"text\":\"RadioGroup\",\"link\":\"/guide/components/radio-group/\"},{\"text\":\"RatingControl\",\"link\":\"/guide/components/rating-control/\"},{\"text\":\"Slider\",\"link\":\"/guide/components/slider/\"},{\"text\":\"ToggleSwitch\",\"link\":\"/guide/components/toggle-switch/\"},{\"text\":\"Tag\",\"link\":\"/guide/components/tag/\"}]},{\"text\":\"Collections\",\"collapsed\":true,\"items\":[{\"text\":\"FlipView\",\"link\":\"/guide/components/flip-view/\"},{\"text\":\"ListView\",\"link\":\"/guide/components/list-view/\"},{\"text\":\"TreeView\",\"link\":\"/guide/components/tree-view/\"}]},{\"text\":\"Date & Time\",\"collapsed\":true,\"items\":[{\"text\":\"CalendarDatePicker\",\"link\":\"/guide/components/calendar-date-picker/\"},{\"text\":\"CalendarView\",\"link\":\"/guide/components/calendar-view/\"},{\"text\":\"DatePicker\",\"link\":\"/guide/components/date-picker/\"},{\"text\":\"TimePicker\",\"link\":\"/guide/components/time-picker/\"}]},{\"text\":\"Dialogs & flyouts\",\"collapsed\":true,\"items\":[{\"text\":\"Callout\",\"link\":\"/guide/components/callout/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Layout\",\"collapsed\":true,\"items\":[{\"text\":\"Collapse\",\"link\":\"/guide/components/collapse/\"},{\"text\":\"Expander\",\"link\":\"/guide/components/expander/\"},{\"text\":\"Drawer\",\"link\":\"/guide/components/drawer/\"},{\"text\":\"Panel\",\"link\":\"/guide/components/panel/\"}]},{\"text\":\"Media\",\"collapsed\":true,\"items\":[{\"text\":\"Image\",\"link\":\"/guide/components/image/\"},{\"text\":\"Img\",\"link\":\"/guide/components/img/\"},{\"text\":\"ImgBox\",\"link\":\"/guide/components/img-box/\"},{\"text\":\"Persona\",\"link\":\"/guide/components/persona/\"}]},{\"text\":\"Menu & toolbars\",\"collapsed\":true,\"items\":[{\"text\":\"CommandBar\",\"link\":\"/guide/components/command-bar/\"},{\"text\":\"MenuFlyout\",\"link\":\"/guide/components/menu-flyout/\"},{\"text\":\"SwipeControl\",\"link\":\"/guide/components/swipe-control/\"}]},{\"text\":\"Navigation\",\"collapsed\":true,\"items\":[{\"text\":\"Breadcrumb\",\"link\":\"/guide/components/breadcrumb/\"},{\"text\":\"NavigationPanel\",\"link\":\"/guide/components/navigation-panel/\"},{\"text\":\"NavigationView\",\"link\":\"/guide/components/navigation-view/\"},{\"text\":\"Pivot\",\"link\":\"/guide/components/pivot/\"},{\"text\":\"Pagination\",\"link\":\"/guide/components/pagination/\"}]},{\"text\":\"Scrolling\",\"collapsed\":true,\"items\":[{\"text\":\"InfiniteScrollView\",\"link\":\"/guide/components/infinite-scroll-view/\"},{\"text\":\"ScrollStory\",\"link\":\"/guide/components/scroll-story/\"}]},{\"text\":\"Status & info\",\"collapsed\":true,\"items\":[{\"text\":\"Badge\",\"link\":\"/guide/components/badge/\"},{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"ProgressBar\",\"link\":\"/guide/components/progress-bar/\"},{\"text\":\"ProgressRing\",\"link\":\"/guide/components/progress-ring/\"}]},{\"text\":\"Styles\",\"collapsed\":true,\"items\":[{\"text\":\"AnimatedIcon\",\"link\":\"/guide/components/animated-icon/\"},{\"text\":\"IconElement\",\"link\":\"/guide/components/icon-element/\"},{\"text\":\"RevealContainer\",\"link\":\"/guide/components/reveal-container/\"},{\"text\":\"Shimmer\",\"link\":\"/guide/components/shimmer/\"}]},{\"text\":\"Text\",\"collapsed\":true,\"items\":[{\"text\":\"SearchBox\",\"link\":\"/guide/components/search-box/\"},{\"text\":\"TextBox\",\"link\":\"/guide/components/text-box/\"},{\"text\":\"TextField\",\"link\":\"/guide/components/text-field/\"},{\"text\":\"VerifyBox\",\"link\":\"/guide/components/verify-box/\"}]},{\"text\":\"Windowing\",\"collapsed\":true,\"items\":[{\"text\":\"WebWindow\",\"link\":\"/guide/components/web-window/\"}]},{\"text\":\"Global\",\"collapsed\":true,\"items\":[{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Advance\",\"collapsed\":true,\"items\":[{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git a/guide/components/rating-control/index.html b/guide/components/rating-control/index.html
new file mode 100644
index 0000000..8f1b4c8
--- /dev/null
+++ b/guide/components/rating-control/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>RatingControl | vfluent3</title>
+    <meta name="description" content="A Vue3 component library for Fluent UI">
+    <meta name="generator" content="VitePress v1.0.0-rc.45">
+    <link rel="preload stylesheet" href="/VFluent3/assets/style.BabQegKX.css" as="style">
+    
+    <script type="module" src="/VFluent3/assets/app.CSutcJ2E.js"></script>
+    <link rel="preload" href="/VFluent3/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/framework.DvIFzl91.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/theme.CgqFBnN_.js">
+    <link rel="modulepreload" href="/VFluent3/assets/guide_components_rating-control_index.md.Q9l5Lfrr.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-19c990f1><div class="wrapper" data-v-19c990f1><div class="container" data-v-19c990f1><div class="title" data-v-19c990f1><div class="VPNavBarTitle has-sidebar" data-v-19c990f1 data-v-ab179fa1><a class="title" href="/VFluent3/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>VFluent3</span><!--[--><!--]--></a></div></div><div class="content" data-v-19c990f1><div class="content-body" data-v-19c990f1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-19c990f1><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-19c990f1 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Guide</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-19c990f1 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-19c990f1 data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-19c990f1 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-19c990f1><div class="divider-line" data-v-19c990f1></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-d2ecc192><button data-v-d2ecc192>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-575e6a36><div class="curtain" data-v-575e6a36></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-575e6a36><span class="visually-hidden" id="sidebar-aria-label" data-v-575e6a36> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible has-active" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Basic input</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/button/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/check-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CheckBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/combobox/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Combobox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/details-list/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DetailsList</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drop-down/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DropDown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio-group/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RadioGroup</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/rating-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RatingControl</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/slider/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/toggle-switch/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ToggleSwitch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tag/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Tag</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Collections</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/flip-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>FlipView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/list-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ListView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tree-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TreeView</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Date & Time</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarDatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/time-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TimePicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Dialogs & flyouts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/callout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Callout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Layout</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/collapse/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Collapse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/expander/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Expander</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drawer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Panel</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Media</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/image/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Img</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ImgBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/persona/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Persona</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Menu & toolbars</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/command-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CommandBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/menu-flyout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MenuFlyout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/swipe-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SwipeControl</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Navigation</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/breadcrumb/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationPanel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pivot/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pivot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pagination/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pagination</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Scrolling</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/infinite-scroll-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfiniteScrollView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/scroll-story/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ScrollStory</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Status & info</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/badge/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-ring/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressRing</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Styles</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/animated-icon/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>AnimatedIcon</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/icon-element/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>IconElement</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/reveal-container/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RevealContainer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/shimmer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Shimmer</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Text</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/search-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SearchBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-field/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextField</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/verify-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>VerifyBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Windowing</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/web-window/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>WebWindow</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Global</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Advance</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-935f8a84><div class="content" data-v-935f8a84><div class="outline-marker" data-v-935f8a84></div><div class="outline-title" role="heading" aria-level="2" data-v-935f8a84>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-935f8a84><span class="visually-hidden" id="doc-outline-aria-label" data-v-935f8a84> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-935f8a84 data-v-b933a997><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _VFluent3_guide_components_rating-control_" data-v-39a288b8><div><h3 id="ratingcontrol-demo" tabindex="-1">RatingControl-DEMO <a class="header-anchor" href="#ratingcontrol-demo" aria-label="Permalink to &quot;RatingControl-DEMO&quot;">​</a></h3><hr><div class="fv-RatingControl light" value="3"><div class="fv-rating-container"><!--[--><div class="fv-rating-unit"><i class="ms-Icon--FavoriteStar ms-Icon background" style="color:;"></i><div style="display:none;width:0%;" class="fv-rating-mask"><i class="ms-Icon--FavoriteStarFill ms-Icon foreground" style="color:;"></i></div></div><div class="fv-rating-unit"><i class="ms-Icon--FavoriteStar ms-Icon background" style="color:;"></i><div style="display:none;width:0%;" class="fv-rating-mask"><i class="ms-Icon--FavoriteStarFill ms-Icon foreground" style="color:;"></i></div></div><div class="fv-rating-unit"><i class="ms-Icon--FavoriteStar ms-Icon background" style="color:;"></i><div style="display:none;width:0%;" class="fv-rating-mask"><i class="ms-Icon--FavoriteStarFill ms-Icon foreground" style="color:;"></i></div></div><div class="fv-rating-unit"><i class="ms-Icon--FavoriteStar ms-Icon background" style="color:;"></i><div style="display:none;width:0%;" class="fv-rating-mask"><i class="ms-Icon--FavoriteStarFill ms-Icon foreground" style="color:;"></i></div></div><div class="fv-rating-unit"><i class="ms-Icon--FavoriteStar ms-Icon background" style="color:;"></i><div style="display:none;width:0%;" class="fv-rating-mask"><i class="ms-Icon--FavoriteStarFill ms-Icon foreground" style="color:;"></i></div></div><!--]--></div></div><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-RatingControl</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;3&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-RatingControl</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="ratingcontrol-half-rate" tabindex="-1">RatingControl-Half Rate <a class="header-anchor" href="#ratingcontrol-half-rate" aria-label="Permalink to &quot;RatingControl-Half Rate&quot;">​</a></h3><hr><div class="fv-RatingControl light" value="2.5"><div class="fv-rating-container"><!--[--><div class="fv-rating-unit"><i class="ms-Icon--FavoriteStar ms-Icon background" style="color:;"></i><div style="display:none;width:0%;" class="fv-rating-mask"><i class="ms-Icon--FavoriteStarFill ms-Icon foreground" style="color:;"></i></div></div><div class="fv-rating-unit"><i class="ms-Icon--FavoriteStar ms-Icon background" style="color:;"></i><div style="display:none;width:0%;" class="fv-rating-mask"><i class="ms-Icon--FavoriteStarFill ms-Icon foreground" style="color:;"></i></div></div><div class="fv-rating-unit"><i class="ms-Icon--FavoriteStar ms-Icon background" style="color:;"></i><div style="display:none;width:0%;" class="fv-rating-mask"><i class="ms-Icon--FavoriteStarFill ms-Icon foreground" style="color:;"></i></div></div><div class="fv-rating-unit"><i class="ms-Icon--FavoriteStar ms-Icon background" style="color:;"></i><div style="display:none;width:0%;" class="fv-rating-mask"><i class="ms-Icon--FavoriteStarFill ms-Icon foreground" style="color:;"></i></div></div><div class="fv-rating-unit"><i class="ms-Icon--FavoriteStar ms-Icon background" style="color:;"></i><div style="display:none;width:0%;" class="fv-rating-mask"><i class="ms-Icon--FavoriteStarFill ms-Icon foreground" style="color:;"></i></div></div><!--]--></div></div><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-RatingControl</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;2.5&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">halfRate</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-RatingControl</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="ratingcontrol-clearable" tabindex="-1">RatingControl-Clearable <a class="header-anchor" href="#ratingcontrol-clearable" aria-label="Permalink to &quot;RatingControl-Clearable&quot;">​</a></h3><hr><div class="fv-RatingControl light" value="2.5"><div class="fv-rating-container"><!--[--><div class="fv-rating-unit"><i class="ms-Icon--FavoriteStar ms-Icon background" style="color:;"></i><div style="display:none;width:0%;" class="fv-rating-mask"><i class="ms-Icon--FavoriteStarFill ms-Icon foreground" style="color:;"></i></div></div><div class="fv-rating-unit"><i class="ms-Icon--FavoriteStar ms-Icon background" style="color:;"></i><div style="display:none;width:0%;" class="fv-rating-mask"><i class="ms-Icon--FavoriteStarFill ms-Icon foreground" style="color:;"></i></div></div><div class="fv-rating-unit"><i class="ms-Icon--FavoriteStar ms-Icon background" style="color:;"></i><div style="display:none;width:0%;" class="fv-rating-mask"><i class="ms-Icon--FavoriteStarFill ms-Icon foreground" style="color:;"></i></div></div><div class="fv-rating-unit"><i class="ms-Icon--FavoriteStar ms-Icon background" style="color:;"></i><div style="display:none;width:0%;" class="fv-rating-mask"><i class="ms-Icon--FavoriteStarFill ms-Icon foreground" style="color:;"></i></div></div><div class="fv-rating-unit"><i class="ms-Icon--FavoriteStar ms-Icon background" style="color:;"></i><div style="display:none;width:0%;" class="fv-rating-mask"><i class="ms-Icon--FavoriteStarFill ms-Icon foreground" style="color:;"></i></div></div><!--]--></div></div><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-RatingControl</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;2.5&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">halfRate</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">isClear</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-RatingControl</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="ratingcontrol-readonly" tabindex="-1">RatingControl-Readonly <a class="header-anchor" href="#ratingcontrol-readonly" aria-label="Permalink to &quot;RatingControl-Readonly&quot;">​</a></h3><hr><div class="fv-RatingControl light" value="3.5"><div class="fv-rating-container"><!--[--><div class="fv-rating-unit"><i class="ms-Icon--FavoriteStar ms-Icon background" style="color:;"></i><div style="display:none;width:0%;" class="fv-rating-mask"><i class="ms-Icon--FavoriteStarFill ms-Icon foreground" style="color:;"></i></div></div><div class="fv-rating-unit"><i class="ms-Icon--FavoriteStar ms-Icon background" style="color:;"></i><div style="display:none;width:0%;" class="fv-rating-mask"><i class="ms-Icon--FavoriteStarFill ms-Icon foreground" style="color:;"></i></div></div><div class="fv-rating-unit"><i class="ms-Icon--FavoriteStar ms-Icon background" style="color:;"></i><div style="display:none;width:0%;" class="fv-rating-mask"><i class="ms-Icon--FavoriteStarFill ms-Icon foreground" style="color:;"></i></div></div><div class="fv-rating-unit"><i class="ms-Icon--FavoriteStar ms-Icon background" style="color:;"></i><div style="display:none;width:0%;" class="fv-rating-mask"><i class="ms-Icon--FavoriteStarFill ms-Icon foreground" style="color:;"></i></div></div><div class="fv-rating-unit"><i class="ms-Icon--FavoriteStar ms-Icon background" style="color:;"></i><div style="display:none;width:0%;" class="fv-rating-mask"><i class="ms-Icon--FavoriteStarFill ms-Icon foreground" style="color:;"></i></div></div><!--]--></div></div><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-RatingControl</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;3.5&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">halfRate</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">isClear</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> readonly</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-RatingControl</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="ratingcontrol-customize" tabindex="-1">RatingControl-Customize <a class="header-anchor" href="#ratingcontrol-customize" aria-label="Permalink to &quot;RatingControl-Customize&quot;">​</a></h3><hr><div class="fv-RatingControl light" value="1.5"><div class="fv-rating-container"><!--[--><div class="fv-rating-unit"><i class="ms-Icon--Heart ms-Icon background" style="color:rgba(200, 200, 200, 1);"></i><div style="display:none;width:0%;" class="fv-rating-mask"><i class="ms-Icon--HeartFill ms-Icon foreground" style="color:rgba(173, 38, 45, 1);"></i></div></div><div class="fv-rating-unit"><i class="ms-Icon--Heart ms-Icon background" style="color:rgba(200, 200, 200, 1);"></i><div style="display:none;width:0%;" class="fv-rating-mask"><i class="ms-Icon--HeartFill ms-Icon foreground" style="color:rgba(173, 38, 45, 1);"></i></div></div><div class="fv-rating-unit"><i class="ms-Icon--Heart ms-Icon background" style="color:rgba(200, 200, 200, 1);"></i><div style="display:none;width:0%;" class="fv-rating-mask"><i class="ms-Icon--HeartFill ms-Icon foreground" style="color:rgba(173, 38, 45, 1);"></i></div></div><div class="fv-rating-unit"><i class="ms-Icon--Heart ms-Icon background" style="color:rgba(200, 200, 200, 1);"></i><div style="display:none;width:0%;" class="fv-rating-mask"><i class="ms-Icon--HeartFill ms-Icon foreground" style="color:rgba(173, 38, 45, 1);"></i></div></div><div class="fv-rating-unit"><i class="ms-Icon--Heart ms-Icon background" style="color:rgba(200, 200, 200, 1);"></i><div style="display:none;width:0%;" class="fv-rating-mask"><i class="ms-Icon--HeartFill ms-Icon foreground" style="color:rgba(173, 38, 45, 1);"></i></div></div><!--]--></div></div><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-RatingControl</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;1.5&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> defaultIcon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Heart&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> selectedIcon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;HeartFill&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> borderColor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rgba(200, 200, 200, 1)&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> selectedColor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rgba(173, 38, 45, 1)&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">halfRate</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">isClear</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-RatingControl</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">value</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">0</td><td style="text-align:center;">分值</td></tr><tr><td style="text-align:center;">maxRate</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">5</td><td style="text-align:center;">最大值</td></tr><tr><td style="text-align:center;">halfRate</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否允许半分</td></tr><tr><td style="text-align:center;">defaultIcon</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">FavoriteStar</td><td style="text-align:center;">默认图标</td></tr><tr><td style="text-align:center;">selectedIcon</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">FavoriteStarFill</td><td style="text-align:center;">选中图标</td></tr><tr><td style="text-align:center;">borderColor</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">rgba(200, 200, 200, 1)</td><td style="text-align:center;">边框颜色</td></tr><tr><td style="text-align:center;">selectedColor</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">rgba(255, 149, 0, 1)</td><td style="text-align:center;">选中颜色</td></tr><tr><td style="text-align:center;">isClear</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否允许清除</td></tr><tr><td style="text-align:center;">readonly</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">只读</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">[&#39;system&#39;,&#39;dark&#39;,&#39;light&#39;,&#39;custom&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;system&#39;</td><td style="text-align:center;">主题色</td></tr></tbody></table><h3 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to &quot;Events&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">事件名(Name)</th><th style="text-align:center;">参数类型(args)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">change</td><td style="text-align:center;">Number</td><td style="text-align:center;">分值改变时触发</td></tr></tbody></table></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-09de1c0f><!--[--><!--]--><!----><nav class="prev-next" data-v-09de1c0f><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link prev" href="/VFluent3/guide/components/radio-group/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Previous page</span><span class="title" data-v-09de1c0f>RadioGroup</span><!--]--></a></div><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link next" href="/VFluent3/guide/components/slider/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Next page</span><span class="title" data-v-09de1c0f>Slider</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>MIT Licensed</p><p class="copyright" data-v-e315a0ad>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_calendar-date-picker_properties.md\":\"DXRjmMG8\",\"guide_components_image_properties.md\":\"DGanRzCb\",\"guide_components_img-box_index.md\":\"DYtggkf_\",\"guide_components_img_emits.md\":\"BlE7jvZQ\",\"guide_components_img_index.md\":\"Bm9FiuU4\",\"guide_components_icon-element_properties.md\":\"8Oakruwc\",\"guide_components_img_properties.md\":\"B42YSocI\",\"guide_components_drawer_index.md\":\"D_vpnCpE\",\"guide_components_verify-box_emits.md\":\"DT17Iazx\",\"guide_components_calendar-date-picker_index.md\":\"BdHjrurh\",\"guide_components_rating-control_index.md\":\"Q9l5Lfrr\",\"guide_components_rating-control_properties.md\":\"DKprnl0i\",\"guide_components_calendar-view_index.md\":\"zdoRYVx1\",\"guide_components_animated-icon_index.md\":\"yZDMzCFe\",\"guide_components_calendar-date-picker_emits.md\":\"D5OkfR8j\",\"guide_components_badge_index.md\":\"Bb4crrJn\",\"guide_components_image_index.md\":\"B7X6cWAZ\",\"guide_components_slider_index.md\":\"C7zZ2d-W\",\"guide_components_radio-group_index.md\":\"CVfh3h5H\",\"guide_components_swipe-control_index.md\":\"DwrDVPc1\",\"guide_components_color-picker_emits.md\":\"BHDXVtBQ\",\"guide_components_radio_index.md\":\"90as5QGp\",\"guide_components_pagination_properties.md\":\"JUAPvcTL\",\"guide_components_persona_properties.md\":\"DUTPhPMp\",\"guide_components_combo-box_emits.md\":\"Dh5R-qEv\",\"guide_components_pivot_emits.md\":\"BTJPgNpy\",\"guide_components_pagination_index.md\":\"CnW2zAht\",\"guide_components_flip-view_properties.md\":\"BqZ4hhgU\",\"guide_components_icon-element_emits.md\":\"D5TXFdTZ\",\"guide_components_flip-view_index.md\":\"DefnDOv6\",\"guide_components_navigation-panel_index.md\":\"6mO__sSK\",\"guide_components_rating-control_emits.md\":\"blvomSeC\",\"guide_components_icon-element_index.md\":\"DQ8K7JNn\",\"guide_components_navigation-view_index.md\":\"4AQRiz1k\",\"guide_components_toggle-switch_emits.md\":\"CLGzrNut\",\"guide_components_toggle-switch_index.md\":\"61en_q9-\",\"guide_components_scroll-story_index.md\":\"Vpgb1HSV\",\"guide_components_reveal-container_index.md\":\"Cut2r4tV\",\"guide_components_search-box_emits.md\":\"-d9sWNNt\",\"guide_components_search-box_properties.md\":\"DEKFfPFw\",\"guide_components_shimmer_emits.md\":\"CTMInlI3\",\"guide_components_tag_index.md\":\"BhhxkcHn\",\"guide_components_search-box_index.md\":\"DgkrY0oY\",\"guide_components_shimmer_index.md\":\"iZlHuTxw\",\"guide_components_shimmer_properties.md\":\"CdkU1o6H\",\"guide_components_tree-view_index.md\":\"CUrwan4q\",\"guide_components_text-field_index.md\":\"CXSimJtj\",\"guide_components_text-box_index.md\":\"C5moAPfB\",\"guide_components_progress-ring_properties.md\":\"Dc08Uiff\",\"guide_components_toggle-switch_properties.md\":\"tFppK_IS\",\"guide_components_radio-group_emits.md\":\"cEDzKVnN\",\"guide_components_collapse_index.md\":\"N9Iu5-2v\",\"guide_components_image_emits.md\":\"lmlz2xJd\",\"guide_components_callout_index.md\":\"D9RU33w6\",\"guide_components_pivot_index.md\":\"B_vwQL-5\",\"guide_components_command-bar_index.md\":\"Cp4_rrGB\",\"guide_components_pagination_emits.md\":\"Dng86A22\",\"guide_components_button_index.md\":\"7sqT2MQP\",\"guide_components_info-box_properties.md\":\"BI7Nvk-E\",\"guide_components_drop-down_emits.md\":\"BE95TdKW\",\"guide_components_expander_index.md\":\"BKgcUJzQ\",\"guide_components_message-bar_index.md\":\"AEtAWlF8\",\"guide_components_menu-flyout_index.md\":\"Csa7irPj\",\"guide_components_panel_index.md\":\"CsTu0bXo\",\"guide_components_panel_properties.md\":\"BaxoCYKq\",\"guide_components_progress-bar_emits.md\":\"BcwXUpsF\",\"guide_components_progress-bar_properties.md\":\"TxiS9ZMA\",\"guide_components_progress-ring_emits.md\":\"D2Y6hIZ9\",\"guide_components_color-picker_index.md\":\"DCc4ixcU\",\"guide_components_progress-ring_index.md\":\"CPb-ZEPE\",\"guide_components_color-picker_properties.md\":\"wcXK29Vl\",\"guide_components_time-picker_index.md\":\"CQJdRRaG\",\"guide_components_drop-down_properties.md\":\"Bwlkpr1q\",\"guide_components_infinite-scroll-view_index.md\":\"yAuD807x\",\"guide_components_check-box_index.md\":\"FYgdu4oq\",\"guide_components_progress-bar_index.md\":\"D8vHQw5V\",\"guide_components_combo-box_index.md\":\"DTyu3eNd\",\"guide_components_info-box_emits.md\":\"DlEwpkkq\",\"guide_components_drop-down_index.md\":\"BZzJZQWq\",\"guide_components_list-view_index.md\":\"BoYvMzb0\",\"guide_components_verify-box_properties.md\":\"CW6W8fFf\",\"guide_components_verify-box_index.md\":\"DwSB40wR\",\"guide_index.md\":\"Bndlt3sL\",\"guide_components_web-window_index.md\":\"Bxc8vEeI\",\"index.md\":\"MTRqI42u\",\"guide_components_combo-box_properties.md\":\"AWfHzV6x\",\"guide_components_combobox_emits.md\":\"CGB6WLt8\",\"guide_components_combobox_properties.md\":\"Bja0hMou\",\"guide_components_details-list_index.md\":\"CcgOCIyt\",\"guide_components_info-box_index.md\":\"vXh-_DsL\",\"guide_components_combobox_index.md\":\"CsPkY6YB\",\"guide_components_date-picker_index.md\":\"12vmUIup\",\"guide_components_flip-view_emits.md\":\"DCheHjDj\",\"guide_components_panel_emits.md\":\"DG0REDq8\",\"guide_components_breadcrumb_index.md\":\"DyDm7PeP\",\"guide_components_radio-group_properties.md\":\"BnPxoKsQ\",\"guide_components_persona_emits.md\":\"CnsDPKRU\",\"guide_components_pivot_properties.md\":\"BmoLpPi1\",\"guide_components_persona_index.md\":\"DT00jby4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vfluent3\",\"description\":\"A Vue3 component library for Fluent UI\",\"base\":\"/VFluent3/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"VFluent3\",\"footer\":{\"message\":\"MIT Licensed\",\"copyright\":\"Copyright © Creator SN - 2022\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/\"}],\"sidebar\":[{\"text\":\"Basic input\",\"collapsed\":true,\"items\":[{\"text\":\"Button\",\"link\":\"/guide/components/button/\"},{\"text\":\"CheckBox\",\"link\":\"/guide/components/check-box/\"},{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"},{\"text\":\"Combobox\",\"link\":\"/guide/components/combobox/\"},{\"text\":\"DetailsList\",\"link\":\"/guide/components/details-list/\"},{\"text\":\"DropDown\",\"link\":\"/guide/components/drop-down/\"},{\"text\":\"Radio\",\"link\":\"/guide/components/radio/\"},{\"text\":\"RadioGroup\",\"link\":\"/guide/components/radio-group/\"},{\"text\":\"RatingControl\",\"link\":\"/guide/components/rating-control/\"},{\"text\":\"Slider\",\"link\":\"/guide/components/slider/\"},{\"text\":\"ToggleSwitch\",\"link\":\"/guide/components/toggle-switch/\"},{\"text\":\"Tag\",\"link\":\"/guide/components/tag/\"}]},{\"text\":\"Collections\",\"collapsed\":true,\"items\":[{\"text\":\"FlipView\",\"link\":\"/guide/components/flip-view/\"},{\"text\":\"ListView\",\"link\":\"/guide/components/list-view/\"},{\"text\":\"TreeView\",\"link\":\"/guide/components/tree-view/\"}]},{\"text\":\"Date & Time\",\"collapsed\":true,\"items\":[{\"text\":\"CalendarDatePicker\",\"link\":\"/guide/components/calendar-date-picker/\"},{\"text\":\"CalendarView\",\"link\":\"/guide/components/calendar-view/\"},{\"text\":\"DatePicker\",\"link\":\"/guide/components/date-picker/\"},{\"text\":\"TimePicker\",\"link\":\"/guide/components/time-picker/\"}]},{\"text\":\"Dialogs & flyouts\",\"collapsed\":true,\"items\":[{\"text\":\"Callout\",\"link\":\"/guide/components/callout/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Layout\",\"collapsed\":true,\"items\":[{\"text\":\"Collapse\",\"link\":\"/guide/components/collapse/\"},{\"text\":\"Expander\",\"link\":\"/guide/components/expander/\"},{\"text\":\"Drawer\",\"link\":\"/guide/components/drawer/\"},{\"text\":\"Panel\",\"link\":\"/guide/components/panel/\"}]},{\"text\":\"Media\",\"collapsed\":true,\"items\":[{\"text\":\"Image\",\"link\":\"/guide/components/image/\"},{\"text\":\"Img\",\"link\":\"/guide/components/img/\"},{\"text\":\"ImgBox\",\"link\":\"/guide/components/img-box/\"},{\"text\":\"Persona\",\"link\":\"/guide/components/persona/\"}]},{\"text\":\"Menu & toolbars\",\"collapsed\":true,\"items\":[{\"text\":\"CommandBar\",\"link\":\"/guide/components/command-bar/\"},{\"text\":\"MenuFlyout\",\"link\":\"/guide/components/menu-flyout/\"},{\"text\":\"SwipeControl\",\"link\":\"/guide/components/swipe-control/\"}]},{\"text\":\"Navigation\",\"collapsed\":true,\"items\":[{\"text\":\"Breadcrumb\",\"link\":\"/guide/components/breadcrumb/\"},{\"text\":\"NavigationPanel\",\"link\":\"/guide/components/navigation-panel/\"},{\"text\":\"NavigationView\",\"link\":\"/guide/components/navigation-view/\"},{\"text\":\"Pivot\",\"link\":\"/guide/components/pivot/\"},{\"text\":\"Pagination\",\"link\":\"/guide/components/pagination/\"}]},{\"text\":\"Scrolling\",\"collapsed\":true,\"items\":[{\"text\":\"InfiniteScrollView\",\"link\":\"/guide/components/infinite-scroll-view/\"},{\"text\":\"ScrollStory\",\"link\":\"/guide/components/scroll-story/\"}]},{\"text\":\"Status & info\",\"collapsed\":true,\"items\":[{\"text\":\"Badge\",\"link\":\"/guide/components/badge/\"},{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"ProgressBar\",\"link\":\"/guide/components/progress-bar/\"},{\"text\":\"ProgressRing\",\"link\":\"/guide/components/progress-ring/\"}]},{\"text\":\"Styles\",\"collapsed\":true,\"items\":[{\"text\":\"AnimatedIcon\",\"link\":\"/guide/components/animated-icon/\"},{\"text\":\"IconElement\",\"link\":\"/guide/components/icon-element/\"},{\"text\":\"RevealContainer\",\"link\":\"/guide/components/reveal-container/\"},{\"text\":\"Shimmer\",\"link\":\"/guide/components/shimmer/\"}]},{\"text\":\"Text\",\"collapsed\":true,\"items\":[{\"text\":\"SearchBox\",\"link\":\"/guide/components/search-box/\"},{\"text\":\"TextBox\",\"link\":\"/guide/components/text-box/\"},{\"text\":\"TextField\",\"link\":\"/guide/components/text-field/\"},{\"text\":\"VerifyBox\",\"link\":\"/guide/components/verify-box/\"}]},{\"text\":\"Windowing\",\"collapsed\":true,\"items\":[{\"text\":\"WebWindow\",\"link\":\"/guide/components/web-window/\"}]},{\"text\":\"Global\",\"collapsed\":true,\"items\":[{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Advance\",\"collapsed\":true,\"items\":[{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git a/guide/components/rating-control/properties.html b/guide/components/rating-control/properties.html
new file mode 100644
index 0000000..5d4a2e0
--- /dev/null
+++ b/guide/components/rating-control/properties.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>vfluent3</title>
+    <meta name="description" content="A Vue3 component library for Fluent UI">
+    <meta name="generator" content="VitePress v1.0.0-rc.45">
+    <link rel="preload stylesheet" href="/VFluent3/assets/style.BabQegKX.css" as="style">
+    
+    <script type="module" src="/VFluent3/assets/app.CSutcJ2E.js"></script>
+    <link rel="preload" href="/VFluent3/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/framework.DvIFzl91.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/theme.CgqFBnN_.js">
+    <link rel="modulepreload" href="/VFluent3/assets/guide_components_rating-control_properties.md.DKprnl0i.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-19c990f1><div class="wrapper" data-v-19c990f1><div class="container" data-v-19c990f1><div class="title" data-v-19c990f1><div class="VPNavBarTitle has-sidebar" data-v-19c990f1 data-v-ab179fa1><a class="title" href="/VFluent3/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>VFluent3</span><!--[--><!--]--></a></div></div><div class="content" data-v-19c990f1><div class="content-body" data-v-19c990f1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-19c990f1><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-19c990f1 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Guide</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-19c990f1 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-19c990f1 data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-19c990f1 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-19c990f1><div class="divider-line" data-v-19c990f1></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-d2ecc192><button data-v-d2ecc192>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-575e6a36><div class="curtain" data-v-575e6a36></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-575e6a36><span class="visually-hidden" id="sidebar-aria-label" data-v-575e6a36> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Basic input</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/button/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/check-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CheckBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/combobox/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Combobox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/details-list/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DetailsList</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drop-down/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DropDown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio-group/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RadioGroup</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/rating-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RatingControl</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/slider/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/toggle-switch/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ToggleSwitch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tag/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Tag</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Collections</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/flip-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>FlipView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/list-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ListView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tree-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TreeView</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Date & Time</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarDatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/time-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TimePicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Dialogs & flyouts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/callout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Callout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Layout</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/collapse/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Collapse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/expander/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Expander</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drawer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Panel</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Media</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/image/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Img</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ImgBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/persona/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Persona</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Menu & toolbars</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/command-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CommandBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/menu-flyout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MenuFlyout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/swipe-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SwipeControl</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Navigation</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/breadcrumb/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationPanel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pivot/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pivot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pagination/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pagination</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Scrolling</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/infinite-scroll-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfiniteScrollView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/scroll-story/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ScrollStory</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Status & info</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/badge/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-ring/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressRing</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Styles</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/animated-icon/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>AnimatedIcon</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/icon-element/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>IconElement</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/reveal-container/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RevealContainer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/shimmer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Shimmer</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Text</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/search-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SearchBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-field/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextField</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/verify-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>VerifyBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Windowing</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/web-window/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>WebWindow</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Global</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Advance</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-935f8a84><div class="content" data-v-935f8a84><div class="outline-marker" data-v-935f8a84></div><div class="outline-title" role="heading" aria-level="2" data-v-935f8a84>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-935f8a84><span class="visually-hidden" id="doc-outline-aria-label" data-v-935f8a84> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-935f8a84 data-v-b933a997><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _VFluent3_guide_components_rating-control_properties" data-v-39a288b8><div><h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-label="Permalink to &quot;Properties&quot;">​</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead></table></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-09de1c0f><!--[--><!--]--><!----><nav class="prev-next" data-v-09de1c0f><div class="pager" data-v-09de1c0f><!----></div><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link next" href="/VFluent3/guide/components/button/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Next page</span><span class="title" data-v-09de1c0f>Button</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>MIT Licensed</p><p class="copyright" data-v-e315a0ad>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_calendar-date-picker_properties.md\":\"DXRjmMG8\",\"guide_components_image_properties.md\":\"DGanRzCb\",\"guide_components_img-box_index.md\":\"DYtggkf_\",\"guide_components_img_emits.md\":\"BlE7jvZQ\",\"guide_components_img_index.md\":\"Bm9FiuU4\",\"guide_components_icon-element_properties.md\":\"8Oakruwc\",\"guide_components_img_properties.md\":\"B42YSocI\",\"guide_components_drawer_index.md\":\"D_vpnCpE\",\"guide_components_verify-box_emits.md\":\"DT17Iazx\",\"guide_components_calendar-date-picker_index.md\":\"BdHjrurh\",\"guide_components_rating-control_index.md\":\"Q9l5Lfrr\",\"guide_components_rating-control_properties.md\":\"DKprnl0i\",\"guide_components_calendar-view_index.md\":\"zdoRYVx1\",\"guide_components_animated-icon_index.md\":\"yZDMzCFe\",\"guide_components_calendar-date-picker_emits.md\":\"D5OkfR8j\",\"guide_components_badge_index.md\":\"Bb4crrJn\",\"guide_components_image_index.md\":\"B7X6cWAZ\",\"guide_components_slider_index.md\":\"C7zZ2d-W\",\"guide_components_radio-group_index.md\":\"CVfh3h5H\",\"guide_components_swipe-control_index.md\":\"DwrDVPc1\",\"guide_components_color-picker_emits.md\":\"BHDXVtBQ\",\"guide_components_radio_index.md\":\"90as5QGp\",\"guide_components_pagination_properties.md\":\"JUAPvcTL\",\"guide_components_persona_properties.md\":\"DUTPhPMp\",\"guide_components_combo-box_emits.md\":\"Dh5R-qEv\",\"guide_components_pivot_emits.md\":\"BTJPgNpy\",\"guide_components_pagination_index.md\":\"CnW2zAht\",\"guide_components_flip-view_properties.md\":\"BqZ4hhgU\",\"guide_components_icon-element_emits.md\":\"D5TXFdTZ\",\"guide_components_flip-view_index.md\":\"DefnDOv6\",\"guide_components_navigation-panel_index.md\":\"6mO__sSK\",\"guide_components_rating-control_emits.md\":\"blvomSeC\",\"guide_components_icon-element_index.md\":\"DQ8K7JNn\",\"guide_components_navigation-view_index.md\":\"4AQRiz1k\",\"guide_components_toggle-switch_emits.md\":\"CLGzrNut\",\"guide_components_toggle-switch_index.md\":\"61en_q9-\",\"guide_components_scroll-story_index.md\":\"Vpgb1HSV\",\"guide_components_reveal-container_index.md\":\"Cut2r4tV\",\"guide_components_search-box_emits.md\":\"-d9sWNNt\",\"guide_components_search-box_properties.md\":\"DEKFfPFw\",\"guide_components_shimmer_emits.md\":\"CTMInlI3\",\"guide_components_tag_index.md\":\"BhhxkcHn\",\"guide_components_search-box_index.md\":\"DgkrY0oY\",\"guide_components_shimmer_index.md\":\"iZlHuTxw\",\"guide_components_shimmer_properties.md\":\"CdkU1o6H\",\"guide_components_tree-view_index.md\":\"CUrwan4q\",\"guide_components_text-field_index.md\":\"CXSimJtj\",\"guide_components_text-box_index.md\":\"C5moAPfB\",\"guide_components_progress-ring_properties.md\":\"Dc08Uiff\",\"guide_components_toggle-switch_properties.md\":\"tFppK_IS\",\"guide_components_radio-group_emits.md\":\"cEDzKVnN\",\"guide_components_collapse_index.md\":\"N9Iu5-2v\",\"guide_components_image_emits.md\":\"lmlz2xJd\",\"guide_components_callout_index.md\":\"D9RU33w6\",\"guide_components_pivot_index.md\":\"B_vwQL-5\",\"guide_components_command-bar_index.md\":\"Cp4_rrGB\",\"guide_components_pagination_emits.md\":\"Dng86A22\",\"guide_components_button_index.md\":\"7sqT2MQP\",\"guide_components_info-box_properties.md\":\"BI7Nvk-E\",\"guide_components_drop-down_emits.md\":\"BE95TdKW\",\"guide_components_expander_index.md\":\"BKgcUJzQ\",\"guide_components_message-bar_index.md\":\"AEtAWlF8\",\"guide_components_menu-flyout_index.md\":\"Csa7irPj\",\"guide_components_panel_index.md\":\"CsTu0bXo\",\"guide_components_panel_properties.md\":\"BaxoCYKq\",\"guide_components_progress-bar_emits.md\":\"BcwXUpsF\",\"guide_components_progress-bar_properties.md\":\"TxiS9ZMA\",\"guide_components_progress-ring_emits.md\":\"D2Y6hIZ9\",\"guide_components_color-picker_index.md\":\"DCc4ixcU\",\"guide_components_progress-ring_index.md\":\"CPb-ZEPE\",\"guide_components_color-picker_properties.md\":\"wcXK29Vl\",\"guide_components_time-picker_index.md\":\"CQJdRRaG\",\"guide_components_drop-down_properties.md\":\"Bwlkpr1q\",\"guide_components_infinite-scroll-view_index.md\":\"yAuD807x\",\"guide_components_check-box_index.md\":\"FYgdu4oq\",\"guide_components_progress-bar_index.md\":\"D8vHQw5V\",\"guide_components_combo-box_index.md\":\"DTyu3eNd\",\"guide_components_info-box_emits.md\":\"DlEwpkkq\",\"guide_components_drop-down_index.md\":\"BZzJZQWq\",\"guide_components_list-view_index.md\":\"BoYvMzb0\",\"guide_components_verify-box_properties.md\":\"CW6W8fFf\",\"guide_components_verify-box_index.md\":\"DwSB40wR\",\"guide_index.md\":\"Bndlt3sL\",\"guide_components_web-window_index.md\":\"Bxc8vEeI\",\"index.md\":\"MTRqI42u\",\"guide_components_combo-box_properties.md\":\"AWfHzV6x\",\"guide_components_combobox_emits.md\":\"CGB6WLt8\",\"guide_components_combobox_properties.md\":\"Bja0hMou\",\"guide_components_details-list_index.md\":\"CcgOCIyt\",\"guide_components_info-box_index.md\":\"vXh-_DsL\",\"guide_components_combobox_index.md\":\"CsPkY6YB\",\"guide_components_date-picker_index.md\":\"12vmUIup\",\"guide_components_flip-view_emits.md\":\"DCheHjDj\",\"guide_components_panel_emits.md\":\"DG0REDq8\",\"guide_components_breadcrumb_index.md\":\"DyDm7PeP\",\"guide_components_radio-group_properties.md\":\"BnPxoKsQ\",\"guide_components_persona_emits.md\":\"CnsDPKRU\",\"guide_components_pivot_properties.md\":\"BmoLpPi1\",\"guide_components_persona_index.md\":\"DT00jby4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vfluent3\",\"description\":\"A Vue3 component library for Fluent UI\",\"base\":\"/VFluent3/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"VFluent3\",\"footer\":{\"message\":\"MIT Licensed\",\"copyright\":\"Copyright © Creator SN - 2022\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/\"}],\"sidebar\":[{\"text\":\"Basic input\",\"collapsed\":true,\"items\":[{\"text\":\"Button\",\"link\":\"/guide/components/button/\"},{\"text\":\"CheckBox\",\"link\":\"/guide/components/check-box/\"},{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"},{\"text\":\"Combobox\",\"link\":\"/guide/components/combobox/\"},{\"text\":\"DetailsList\",\"link\":\"/guide/components/details-list/\"},{\"text\":\"DropDown\",\"link\":\"/guide/components/drop-down/\"},{\"text\":\"Radio\",\"link\":\"/guide/components/radio/\"},{\"text\":\"RadioGroup\",\"link\":\"/guide/components/radio-group/\"},{\"text\":\"RatingControl\",\"link\":\"/guide/components/rating-control/\"},{\"text\":\"Slider\",\"link\":\"/guide/components/slider/\"},{\"text\":\"ToggleSwitch\",\"link\":\"/guide/components/toggle-switch/\"},{\"text\":\"Tag\",\"link\":\"/guide/components/tag/\"}]},{\"text\":\"Collections\",\"collapsed\":true,\"items\":[{\"text\":\"FlipView\",\"link\":\"/guide/components/flip-view/\"},{\"text\":\"ListView\",\"link\":\"/guide/components/list-view/\"},{\"text\":\"TreeView\",\"link\":\"/guide/components/tree-view/\"}]},{\"text\":\"Date & Time\",\"collapsed\":true,\"items\":[{\"text\":\"CalendarDatePicker\",\"link\":\"/guide/components/calendar-date-picker/\"},{\"text\":\"CalendarView\",\"link\":\"/guide/components/calendar-view/\"},{\"text\":\"DatePicker\",\"link\":\"/guide/components/date-picker/\"},{\"text\":\"TimePicker\",\"link\":\"/guide/components/time-picker/\"}]},{\"text\":\"Dialogs & flyouts\",\"collapsed\":true,\"items\":[{\"text\":\"Callout\",\"link\":\"/guide/components/callout/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Layout\",\"collapsed\":true,\"items\":[{\"text\":\"Collapse\",\"link\":\"/guide/components/collapse/\"},{\"text\":\"Expander\",\"link\":\"/guide/components/expander/\"},{\"text\":\"Drawer\",\"link\":\"/guide/components/drawer/\"},{\"text\":\"Panel\",\"link\":\"/guide/components/panel/\"}]},{\"text\":\"Media\",\"collapsed\":true,\"items\":[{\"text\":\"Image\",\"link\":\"/guide/components/image/\"},{\"text\":\"Img\",\"link\":\"/guide/components/img/\"},{\"text\":\"ImgBox\",\"link\":\"/guide/components/img-box/\"},{\"text\":\"Persona\",\"link\":\"/guide/components/persona/\"}]},{\"text\":\"Menu & toolbars\",\"collapsed\":true,\"items\":[{\"text\":\"CommandBar\",\"link\":\"/guide/components/command-bar/\"},{\"text\":\"MenuFlyout\",\"link\":\"/guide/components/menu-flyout/\"},{\"text\":\"SwipeControl\",\"link\":\"/guide/components/swipe-control/\"}]},{\"text\":\"Navigation\",\"collapsed\":true,\"items\":[{\"text\":\"Breadcrumb\",\"link\":\"/guide/components/breadcrumb/\"},{\"text\":\"NavigationPanel\",\"link\":\"/guide/components/navigation-panel/\"},{\"text\":\"NavigationView\",\"link\":\"/guide/components/navigation-view/\"},{\"text\":\"Pivot\",\"link\":\"/guide/components/pivot/\"},{\"text\":\"Pagination\",\"link\":\"/guide/components/pagination/\"}]},{\"text\":\"Scrolling\",\"collapsed\":true,\"items\":[{\"text\":\"InfiniteScrollView\",\"link\":\"/guide/components/infinite-scroll-view/\"},{\"text\":\"ScrollStory\",\"link\":\"/guide/components/scroll-story/\"}]},{\"text\":\"Status & info\",\"collapsed\":true,\"items\":[{\"text\":\"Badge\",\"link\":\"/guide/components/badge/\"},{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"ProgressBar\",\"link\":\"/guide/components/progress-bar/\"},{\"text\":\"ProgressRing\",\"link\":\"/guide/components/progress-ring/\"}]},{\"text\":\"Styles\",\"collapsed\":true,\"items\":[{\"text\":\"AnimatedIcon\",\"link\":\"/guide/components/animated-icon/\"},{\"text\":\"IconElement\",\"link\":\"/guide/components/icon-element/\"},{\"text\":\"RevealContainer\",\"link\":\"/guide/components/reveal-container/\"},{\"text\":\"Shimmer\",\"link\":\"/guide/components/shimmer/\"}]},{\"text\":\"Text\",\"collapsed\":true,\"items\":[{\"text\":\"SearchBox\",\"link\":\"/guide/components/search-box/\"},{\"text\":\"TextBox\",\"link\":\"/guide/components/text-box/\"},{\"text\":\"TextField\",\"link\":\"/guide/components/text-field/\"},{\"text\":\"VerifyBox\",\"link\":\"/guide/components/verify-box/\"}]},{\"text\":\"Windowing\",\"collapsed\":true,\"items\":[{\"text\":\"WebWindow\",\"link\":\"/guide/components/web-window/\"}]},{\"text\":\"Global\",\"collapsed\":true,\"items\":[{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Advance\",\"collapsed\":true,\"items\":[{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git a/guide/components/reveal-container/index.html b/guide/components/reveal-container/index.html
new file mode 100644
index 0000000..2e1d1e4
--- /dev/null
+++ b/guide/components/reveal-container/index.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>RevealContainer | vfluent3</title>
+    <meta name="description" content="A Vue3 component library for Fluent UI">
+    <meta name="generator" content="VitePress v1.0.0-rc.45">
+    <link rel="preload stylesheet" href="/VFluent3/assets/style.BabQegKX.css" as="style">
+    
+    <script type="module" src="/VFluent3/assets/app.CSutcJ2E.js"></script>
+    <link rel="preload" href="/VFluent3/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/framework.DvIFzl91.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/theme.CgqFBnN_.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/index.CvzShnhD.js">
+    <link rel="modulepreload" href="/VFluent3/assets/guide_components_reveal-container_index.md.Cut2r4tV.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-19c990f1><div class="wrapper" data-v-19c990f1><div class="container" data-v-19c990f1><div class="title" data-v-19c990f1><div class="VPNavBarTitle has-sidebar" data-v-19c990f1 data-v-ab179fa1><a class="title" href="/VFluent3/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>VFluent3</span><!--[--><!--]--></a></div></div><div class="content" data-v-19c990f1><div class="content-body" data-v-19c990f1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-19c990f1><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-19c990f1 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Guide</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-19c990f1 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-19c990f1 data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-19c990f1 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-19c990f1><div class="divider-line" data-v-19c990f1></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-d2ecc192><button data-v-d2ecc192>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-575e6a36><div class="curtain" data-v-575e6a36></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-575e6a36><span class="visually-hidden" id="sidebar-aria-label" data-v-575e6a36> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Basic input</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/button/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/check-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CheckBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/combobox/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Combobox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/details-list/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DetailsList</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drop-down/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DropDown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio-group/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RadioGroup</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/rating-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RatingControl</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/slider/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/toggle-switch/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ToggleSwitch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tag/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Tag</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Collections</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/flip-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>FlipView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/list-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ListView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tree-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TreeView</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Date & Time</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarDatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/time-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TimePicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Dialogs & flyouts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/callout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Callout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Layout</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/collapse/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Collapse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/expander/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Expander</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drawer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Panel</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Media</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/image/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Img</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ImgBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/persona/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Persona</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Menu & toolbars</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/command-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CommandBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/menu-flyout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MenuFlyout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/swipe-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SwipeControl</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Navigation</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/breadcrumb/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationPanel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pivot/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pivot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pagination/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pagination</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Scrolling</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/infinite-scroll-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfiniteScrollView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/scroll-story/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ScrollStory</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Status & info</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/badge/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-ring/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressRing</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible has-active" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Styles</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/animated-icon/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>AnimatedIcon</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/icon-element/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>IconElement</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/reveal-container/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RevealContainer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/shimmer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Shimmer</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Text</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/search-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SearchBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-field/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextField</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/verify-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>VerifyBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Windowing</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/web-window/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>WebWindow</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Global</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Advance</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-935f8a84><div class="content" data-v-935f8a84><div class="outline-marker" data-v-935f8a84></div><div class="outline-title" role="heading" aria-level="2" data-v-935f8a84>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-935f8a84><span class="visually-hidden" id="doc-outline-aria-label" data-v-935f8a84> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-935f8a84 data-v-b933a997><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _VFluent3_guide_components_reveal-container_" data-v-39a288b8><div><h3 id="revealcontainer-demo" tabindex="-1">RevealContainer-DEMO <a class="header-anchor" href="#revealcontainer-demo" aria-label="Permalink to &quot;RevealContainer-DEMO&quot;">​</a></h3><hr><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-RevealContainer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-RevealContainer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>Disabled</p><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-RevealContainer</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> disabled</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-RevealContainer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="revealcontainer-customize" tabindex="-1">RevealContainer-Customize <a class="header-anchor" href="#revealcontainer-customize" aria-label="Permalink to &quot;RevealContainer-Customize&quot;">​</a></h3><hr><p>Single Color</p><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-RevealContainer</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> backgroundColor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rgba(0, 98, 158, 0.3)&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> borderColor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rgba(0, 98, 158, 0.3)&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-RevealContainer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>Gradient Color</p><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-RevealContainer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">backgroundGradientList</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;rgba(0, 0, 0, 0.1)&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;rgba(255, 255, 255, 0)&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">borderGradientList</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;#40e0d0&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;#40e0d0&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;#ff8c00&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;#ff8c00&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;#ff0080&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;rgba(255, 255, 255, 0)&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> borderGradientSize</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;120&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-RevealContainer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">revealContainer</td><td style="text-align:center;">Object</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">parent</td><td style="text-align:center;">[function]</td><td style="text-align:center;">No</td><td style="text-align:center;">null</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">borderWidth</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">1</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">borderRadius</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">6</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">backgroundColor</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">rgba(121, 119, 117, 0.6)</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">backgroundGradientList</td><td style="text-align:center;">Array</td><td style="text-align:center;">No</td><td style="text-align:center;">[]</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">backgroundGradientSize</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">120</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">borderColor</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">rgba(121, 119, 117, 0.6)</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">borderGradientList</td><td style="text-align:center;">Array</td><td style="text-align:center;">No</td><td style="text-align:center;">[]</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">borderGradientSize</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">60</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">debounceDistance</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">300</td><td style="text-align:center;">节流, 超过此距离时, 不去计算渲染</td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">[&#39;system&#39;,&#39;light&#39;,&#39;dark&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">system</td><td style="text-align:center;"></td></tr></tbody></table><h3 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to &quot;Events&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">事件名(Name)</th><th style="text-align:center;">参数类型(args)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">click</td><td style="text-align:center;">event</td><td style="text-align:center;">Click Event</td></tr></tbody></table><h3 id="data" tabindex="-1">Data <a class="header-anchor" href="#data" aria-label="Permalink to &quot;Data&quot;">​</a></h3><ol><li>revealContainer</li></ol><p>若要将Reveal事件监听器绑定在某个元素上以节省性能, 请使用此属性并且需要指定三个属性<code>init</code>, <code>el</code>和<code>revealHandlerList</code>. 默认值为false时, 将会在window上监听, 并在全局状态管理下的<code>revealHandlerList</code>下维护所有的RevealContainer组件.</p><div class="language-javascript vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    init</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,    </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 默认值为false, 定义了一个包含RevealContainer的组件后, init会自行修改, 不需要手动修改其值.</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    el</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> HTMLElement, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 此为要绑定的对象, 必须采用函数式声明.</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    revealHandlerList</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: []   </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 所有被侦听的RevealContainer对象.</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><ol start="2"><li>parent</li></ol><p>当RevealContainer被定义在父元素的底层时, 无法触发到click事件, 因此可以利用parent来显式定义被监听的click对象. 需要说明的是, parent必须用函数式定义.</p><div class="language-javascript vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">parent</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> HTMLElement</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-09de1c0f><!--[--><!--]--><!----><nav class="prev-next" data-v-09de1c0f><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link prev" href="/VFluent3/guide/components/icon-element/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Previous page</span><span class="title" data-v-09de1c0f>IconElement</span><!--]--></a></div><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link next" href="/VFluent3/guide/components/shimmer/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Next page</span><span class="title" data-v-09de1c0f>Shimmer</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>MIT Licensed</p><p class="copyright" data-v-e315a0ad>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_calendar-date-picker_properties.md\":\"DXRjmMG8\",\"guide_components_image_properties.md\":\"DGanRzCb\",\"guide_components_img-box_index.md\":\"DYtggkf_\",\"guide_components_img_emits.md\":\"BlE7jvZQ\",\"guide_components_img_index.md\":\"Bm9FiuU4\",\"guide_components_icon-element_properties.md\":\"8Oakruwc\",\"guide_components_img_properties.md\":\"B42YSocI\",\"guide_components_drawer_index.md\":\"D_vpnCpE\",\"guide_components_verify-box_emits.md\":\"DT17Iazx\",\"guide_components_calendar-date-picker_index.md\":\"BdHjrurh\",\"guide_components_rating-control_index.md\":\"Q9l5Lfrr\",\"guide_components_rating-control_properties.md\":\"DKprnl0i\",\"guide_components_calendar-view_index.md\":\"zdoRYVx1\",\"guide_components_animated-icon_index.md\":\"yZDMzCFe\",\"guide_components_calendar-date-picker_emits.md\":\"D5OkfR8j\",\"guide_components_badge_index.md\":\"Bb4crrJn\",\"guide_components_image_index.md\":\"B7X6cWAZ\",\"guide_components_slider_index.md\":\"C7zZ2d-W\",\"guide_components_radio-group_index.md\":\"CVfh3h5H\",\"guide_components_swipe-control_index.md\":\"DwrDVPc1\",\"guide_components_color-picker_emits.md\":\"BHDXVtBQ\",\"guide_components_radio_index.md\":\"90as5QGp\",\"guide_components_pagination_properties.md\":\"JUAPvcTL\",\"guide_components_persona_properties.md\":\"DUTPhPMp\",\"guide_components_combo-box_emits.md\":\"Dh5R-qEv\",\"guide_components_pivot_emits.md\":\"BTJPgNpy\",\"guide_components_pagination_index.md\":\"CnW2zAht\",\"guide_components_flip-view_properties.md\":\"BqZ4hhgU\",\"guide_components_icon-element_emits.md\":\"D5TXFdTZ\",\"guide_components_flip-view_index.md\":\"DefnDOv6\",\"guide_components_navigation-panel_index.md\":\"6mO__sSK\",\"guide_components_rating-control_emits.md\":\"blvomSeC\",\"guide_components_icon-element_index.md\":\"DQ8K7JNn\",\"guide_components_navigation-view_index.md\":\"4AQRiz1k\",\"guide_components_toggle-switch_emits.md\":\"CLGzrNut\",\"guide_components_toggle-switch_index.md\":\"61en_q9-\",\"guide_components_scroll-story_index.md\":\"Vpgb1HSV\",\"guide_components_reveal-container_index.md\":\"Cut2r4tV\",\"guide_components_search-box_emits.md\":\"-d9sWNNt\",\"guide_components_search-box_properties.md\":\"DEKFfPFw\",\"guide_components_shimmer_emits.md\":\"CTMInlI3\",\"guide_components_tag_index.md\":\"BhhxkcHn\",\"guide_components_search-box_index.md\":\"DgkrY0oY\",\"guide_components_shimmer_index.md\":\"iZlHuTxw\",\"guide_components_shimmer_properties.md\":\"CdkU1o6H\",\"guide_components_tree-view_index.md\":\"CUrwan4q\",\"guide_components_text-field_index.md\":\"CXSimJtj\",\"guide_components_text-box_index.md\":\"C5moAPfB\",\"guide_components_progress-ring_properties.md\":\"Dc08Uiff\",\"guide_components_toggle-switch_properties.md\":\"tFppK_IS\",\"guide_components_radio-group_emits.md\":\"cEDzKVnN\",\"guide_components_collapse_index.md\":\"N9Iu5-2v\",\"guide_components_image_emits.md\":\"lmlz2xJd\",\"guide_components_callout_index.md\":\"D9RU33w6\",\"guide_components_pivot_index.md\":\"B_vwQL-5\",\"guide_components_command-bar_index.md\":\"Cp4_rrGB\",\"guide_components_pagination_emits.md\":\"Dng86A22\",\"guide_components_button_index.md\":\"7sqT2MQP\",\"guide_components_info-box_properties.md\":\"BI7Nvk-E\",\"guide_components_drop-down_emits.md\":\"BE95TdKW\",\"guide_components_expander_index.md\":\"BKgcUJzQ\",\"guide_components_message-bar_index.md\":\"AEtAWlF8\",\"guide_components_menu-flyout_index.md\":\"Csa7irPj\",\"guide_components_panel_index.md\":\"CsTu0bXo\",\"guide_components_panel_properties.md\":\"BaxoCYKq\",\"guide_components_progress-bar_emits.md\":\"BcwXUpsF\",\"guide_components_progress-bar_properties.md\":\"TxiS9ZMA\",\"guide_components_progress-ring_emits.md\":\"D2Y6hIZ9\",\"guide_components_color-picker_index.md\":\"DCc4ixcU\",\"guide_components_progress-ring_index.md\":\"CPb-ZEPE\",\"guide_components_color-picker_properties.md\":\"wcXK29Vl\",\"guide_components_time-picker_index.md\":\"CQJdRRaG\",\"guide_components_drop-down_properties.md\":\"Bwlkpr1q\",\"guide_components_infinite-scroll-view_index.md\":\"yAuD807x\",\"guide_components_check-box_index.md\":\"FYgdu4oq\",\"guide_components_progress-bar_index.md\":\"D8vHQw5V\",\"guide_components_combo-box_index.md\":\"DTyu3eNd\",\"guide_components_info-box_emits.md\":\"DlEwpkkq\",\"guide_components_drop-down_index.md\":\"BZzJZQWq\",\"guide_components_list-view_index.md\":\"BoYvMzb0\",\"guide_components_verify-box_properties.md\":\"CW6W8fFf\",\"guide_components_verify-box_index.md\":\"DwSB40wR\",\"guide_index.md\":\"Bndlt3sL\",\"guide_components_web-window_index.md\":\"Bxc8vEeI\",\"index.md\":\"MTRqI42u\",\"guide_components_combo-box_properties.md\":\"AWfHzV6x\",\"guide_components_combobox_emits.md\":\"CGB6WLt8\",\"guide_components_combobox_properties.md\":\"Bja0hMou\",\"guide_components_details-list_index.md\":\"CcgOCIyt\",\"guide_components_info-box_index.md\":\"vXh-_DsL\",\"guide_components_combobox_index.md\":\"CsPkY6YB\",\"guide_components_date-picker_index.md\":\"12vmUIup\",\"guide_components_flip-view_emits.md\":\"DCheHjDj\",\"guide_components_panel_emits.md\":\"DG0REDq8\",\"guide_components_breadcrumb_index.md\":\"DyDm7PeP\",\"guide_components_radio-group_properties.md\":\"BnPxoKsQ\",\"guide_components_persona_emits.md\":\"CnsDPKRU\",\"guide_components_pivot_properties.md\":\"BmoLpPi1\",\"guide_components_persona_index.md\":\"DT00jby4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vfluent3\",\"description\":\"A Vue3 component library for Fluent UI\",\"base\":\"/VFluent3/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"VFluent3\",\"footer\":{\"message\":\"MIT Licensed\",\"copyright\":\"Copyright © Creator SN - 2022\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/\"}],\"sidebar\":[{\"text\":\"Basic input\",\"collapsed\":true,\"items\":[{\"text\":\"Button\",\"link\":\"/guide/components/button/\"},{\"text\":\"CheckBox\",\"link\":\"/guide/components/check-box/\"},{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"},{\"text\":\"Combobox\",\"link\":\"/guide/components/combobox/\"},{\"text\":\"DetailsList\",\"link\":\"/guide/components/details-list/\"},{\"text\":\"DropDown\",\"link\":\"/guide/components/drop-down/\"},{\"text\":\"Radio\",\"link\":\"/guide/components/radio/\"},{\"text\":\"RadioGroup\",\"link\":\"/guide/components/radio-group/\"},{\"text\":\"RatingControl\",\"link\":\"/guide/components/rating-control/\"},{\"text\":\"Slider\",\"link\":\"/guide/components/slider/\"},{\"text\":\"ToggleSwitch\",\"link\":\"/guide/components/toggle-switch/\"},{\"text\":\"Tag\",\"link\":\"/guide/components/tag/\"}]},{\"text\":\"Collections\",\"collapsed\":true,\"items\":[{\"text\":\"FlipView\",\"link\":\"/guide/components/flip-view/\"},{\"text\":\"ListView\",\"link\":\"/guide/components/list-view/\"},{\"text\":\"TreeView\",\"link\":\"/guide/components/tree-view/\"}]},{\"text\":\"Date & Time\",\"collapsed\":true,\"items\":[{\"text\":\"CalendarDatePicker\",\"link\":\"/guide/components/calendar-date-picker/\"},{\"text\":\"CalendarView\",\"link\":\"/guide/components/calendar-view/\"},{\"text\":\"DatePicker\",\"link\":\"/guide/components/date-picker/\"},{\"text\":\"TimePicker\",\"link\":\"/guide/components/time-picker/\"}]},{\"text\":\"Dialogs & flyouts\",\"collapsed\":true,\"items\":[{\"text\":\"Callout\",\"link\":\"/guide/components/callout/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Layout\",\"collapsed\":true,\"items\":[{\"text\":\"Collapse\",\"link\":\"/guide/components/collapse/\"},{\"text\":\"Expander\",\"link\":\"/guide/components/expander/\"},{\"text\":\"Drawer\",\"link\":\"/guide/components/drawer/\"},{\"text\":\"Panel\",\"link\":\"/guide/components/panel/\"}]},{\"text\":\"Media\",\"collapsed\":true,\"items\":[{\"text\":\"Image\",\"link\":\"/guide/components/image/\"},{\"text\":\"Img\",\"link\":\"/guide/components/img/\"},{\"text\":\"ImgBox\",\"link\":\"/guide/components/img-box/\"},{\"text\":\"Persona\",\"link\":\"/guide/components/persona/\"}]},{\"text\":\"Menu & toolbars\",\"collapsed\":true,\"items\":[{\"text\":\"CommandBar\",\"link\":\"/guide/components/command-bar/\"},{\"text\":\"MenuFlyout\",\"link\":\"/guide/components/menu-flyout/\"},{\"text\":\"SwipeControl\",\"link\":\"/guide/components/swipe-control/\"}]},{\"text\":\"Navigation\",\"collapsed\":true,\"items\":[{\"text\":\"Breadcrumb\",\"link\":\"/guide/components/breadcrumb/\"},{\"text\":\"NavigationPanel\",\"link\":\"/guide/components/navigation-panel/\"},{\"text\":\"NavigationView\",\"link\":\"/guide/components/navigation-view/\"},{\"text\":\"Pivot\",\"link\":\"/guide/components/pivot/\"},{\"text\":\"Pagination\",\"link\":\"/guide/components/pagination/\"}]},{\"text\":\"Scrolling\",\"collapsed\":true,\"items\":[{\"text\":\"InfiniteScrollView\",\"link\":\"/guide/components/infinite-scroll-view/\"},{\"text\":\"ScrollStory\",\"link\":\"/guide/components/scroll-story/\"}]},{\"text\":\"Status & info\",\"collapsed\":true,\"items\":[{\"text\":\"Badge\",\"link\":\"/guide/components/badge/\"},{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"ProgressBar\",\"link\":\"/guide/components/progress-bar/\"},{\"text\":\"ProgressRing\",\"link\":\"/guide/components/progress-ring/\"}]},{\"text\":\"Styles\",\"collapsed\":true,\"items\":[{\"text\":\"AnimatedIcon\",\"link\":\"/guide/components/animated-icon/\"},{\"text\":\"IconElement\",\"link\":\"/guide/components/icon-element/\"},{\"text\":\"RevealContainer\",\"link\":\"/guide/components/reveal-container/\"},{\"text\":\"Shimmer\",\"link\":\"/guide/components/shimmer/\"}]},{\"text\":\"Text\",\"collapsed\":true,\"items\":[{\"text\":\"SearchBox\",\"link\":\"/guide/components/search-box/\"},{\"text\":\"TextBox\",\"link\":\"/guide/components/text-box/\"},{\"text\":\"TextField\",\"link\":\"/guide/components/text-field/\"},{\"text\":\"VerifyBox\",\"link\":\"/guide/components/verify-box/\"}]},{\"text\":\"Windowing\",\"collapsed\":true,\"items\":[{\"text\":\"WebWindow\",\"link\":\"/guide/components/web-window/\"}]},{\"text\":\"Global\",\"collapsed\":true,\"items\":[{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Advance\",\"collapsed\":true,\"items\":[{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git a/guide/components/scroll-story/index.html b/guide/components/scroll-story/index.html
new file mode 100644
index 0000000..2d7a05f
--- /dev/null
+++ b/guide/components/scroll-story/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>ScrollStory | vfluent3</title>
+    <meta name="description" content="A Vue3 component library for Fluent UI">
+    <meta name="generator" content="VitePress v1.0.0-rc.45">
+    <link rel="preload stylesheet" href="/VFluent3/assets/style.BabQegKX.css" as="style">
+    
+    <script type="module" src="/VFluent3/assets/app.CSutcJ2E.js"></script>
+    <link rel="preload" href="/VFluent3/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/framework.DvIFzl91.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/theme.CgqFBnN_.js">
+    <link rel="modulepreload" href="/VFluent3/assets/guide_components_scroll-story_index.md.Vpgb1HSV.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-19c990f1><div class="wrapper" data-v-19c990f1><div class="container" data-v-19c990f1><div class="title" data-v-19c990f1><div class="VPNavBarTitle has-sidebar" data-v-19c990f1 data-v-ab179fa1><a class="title" href="/VFluent3/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>VFluent3</span><!--[--><!--]--></a></div></div><div class="content" data-v-19c990f1><div class="content-body" data-v-19c990f1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-19c990f1><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-19c990f1 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Guide</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-19c990f1 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-19c990f1 data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-19c990f1 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-19c990f1><div class="divider-line" data-v-19c990f1></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-d2ecc192><button data-v-d2ecc192>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-575e6a36><div class="curtain" data-v-575e6a36></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-575e6a36><span class="visually-hidden" id="sidebar-aria-label" data-v-575e6a36> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Basic input</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/button/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/check-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CheckBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/combobox/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Combobox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/details-list/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DetailsList</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drop-down/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DropDown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio-group/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RadioGroup</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/rating-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RatingControl</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/slider/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/toggle-switch/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ToggleSwitch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tag/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Tag</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Collections</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/flip-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>FlipView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/list-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ListView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tree-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TreeView</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Date & Time</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarDatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/time-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TimePicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Dialogs & flyouts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/callout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Callout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Layout</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/collapse/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Collapse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/expander/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Expander</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drawer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Panel</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Media</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/image/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Img</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ImgBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/persona/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Persona</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Menu & toolbars</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/command-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CommandBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/menu-flyout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MenuFlyout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/swipe-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SwipeControl</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Navigation</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/breadcrumb/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationPanel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pivot/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pivot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pagination/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pagination</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible has-active" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Scrolling</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/infinite-scroll-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfiniteScrollView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/scroll-story/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ScrollStory</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Status & info</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/badge/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-ring/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressRing</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Styles</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/animated-icon/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>AnimatedIcon</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/icon-element/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>IconElement</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/reveal-container/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RevealContainer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/shimmer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Shimmer</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Text</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/search-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SearchBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-field/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextField</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/verify-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>VerifyBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Windowing</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/web-window/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>WebWindow</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Global</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Advance</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-935f8a84><div class="content" data-v-935f8a84><div class="outline-marker" data-v-935f8a84></div><div class="outline-title" role="heading" aria-level="2" data-v-935f8a84>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-935f8a84><span class="visually-hidden" id="doc-outline-aria-label" data-v-935f8a84> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-935f8a84 data-v-b933a997><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _VFluent3_guide_components_scroll-story_" data-v-39a288b8><div><h3 id="scrollstory-demo" tabindex="-1">ScrollStory-DEMO <a class="header-anchor" href="#scrollstory-demo" aria-label="Permalink to &quot;ScrollStory-DEMO&quot;">​</a></h3><hr><div style="height:500px;"></div><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-ScrollStory</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;scale-up-to-up&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;fv-colorPicker&gt;&lt;/fv-colorPicker&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-ScrollStory</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="scrollstory-infinite-show" tabindex="-1">ScrollStory-Infinite Show <a class="header-anchor" href="#scrollstory-infinite-show" aria-label="Permalink to &quot;ScrollStory-Infinite Show&quot;">​</a></h3><hr><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-ScrollStory</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;scale-down-to-down&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">infinite</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;fv-colorPicker&gt;&lt;/fv-colorPicker&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-ScrollStory</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="scrollstory-over-collapse" tabindex="-1">ScrollStory-Over Collapse <a class="header-anchor" href="#scrollstory-over-collapse" aria-label="Permalink to &quot;ScrollStory-Over Collapse&quot;">​</a></h3><hr><!----><div style="height:500px;"></div><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-ScrollStory</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;scale-down-to-down&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">overCollapse</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;fv-colorPicker&gt;&lt;/fv-colorPicker&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-ScrollStory</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">name</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">Vue transition css name</td></tr><tr><td style="text-align:center;">infinite</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">Infinite show</td></tr><tr><td style="text-align:center;">overCollapse</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">Scroll over collapse</td></tr><tr><td style="text-align:center;">trueRender</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">Only render when show</td></tr></tbody></table><h3 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to &quot;Events&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">事件名(Name)</th><th style="text-align:center;">参数类型(args)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">show-changed</td><td style="text-align:center;">show</td><td style="text-align:center;"></td></tr></tbody></table></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-09de1c0f><!--[--><!--]--><!----><nav class="prev-next" data-v-09de1c0f><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link prev" href="/VFluent3/guide/components/infinite-scroll-view/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Previous page</span><span class="title" data-v-09de1c0f>InfiniteScrollView</span><!--]--></a></div><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link next" href="/VFluent3/guide/components/badge/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Next page</span><span class="title" data-v-09de1c0f>Badge</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>MIT Licensed</p><p class="copyright" data-v-e315a0ad>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_calendar-date-picker_properties.md\":\"DXRjmMG8\",\"guide_components_image_properties.md\":\"DGanRzCb\",\"guide_components_img-box_index.md\":\"DYtggkf_\",\"guide_components_img_emits.md\":\"BlE7jvZQ\",\"guide_components_img_index.md\":\"Bm9FiuU4\",\"guide_components_icon-element_properties.md\":\"8Oakruwc\",\"guide_components_img_properties.md\":\"B42YSocI\",\"guide_components_drawer_index.md\":\"D_vpnCpE\",\"guide_components_verify-box_emits.md\":\"DT17Iazx\",\"guide_components_calendar-date-picker_index.md\":\"BdHjrurh\",\"guide_components_rating-control_index.md\":\"Q9l5Lfrr\",\"guide_components_rating-control_properties.md\":\"DKprnl0i\",\"guide_components_calendar-view_index.md\":\"zdoRYVx1\",\"guide_components_animated-icon_index.md\":\"yZDMzCFe\",\"guide_components_calendar-date-picker_emits.md\":\"D5OkfR8j\",\"guide_components_badge_index.md\":\"Bb4crrJn\",\"guide_components_image_index.md\":\"B7X6cWAZ\",\"guide_components_slider_index.md\":\"C7zZ2d-W\",\"guide_components_radio-group_index.md\":\"CVfh3h5H\",\"guide_components_swipe-control_index.md\":\"DwrDVPc1\",\"guide_components_color-picker_emits.md\":\"BHDXVtBQ\",\"guide_components_radio_index.md\":\"90as5QGp\",\"guide_components_pagination_properties.md\":\"JUAPvcTL\",\"guide_components_persona_properties.md\":\"DUTPhPMp\",\"guide_components_combo-box_emits.md\":\"Dh5R-qEv\",\"guide_components_pivot_emits.md\":\"BTJPgNpy\",\"guide_components_pagination_index.md\":\"CnW2zAht\",\"guide_components_flip-view_properties.md\":\"BqZ4hhgU\",\"guide_components_icon-element_emits.md\":\"D5TXFdTZ\",\"guide_components_flip-view_index.md\":\"DefnDOv6\",\"guide_components_navigation-panel_index.md\":\"6mO__sSK\",\"guide_components_rating-control_emits.md\":\"blvomSeC\",\"guide_components_icon-element_index.md\":\"DQ8K7JNn\",\"guide_components_navigation-view_index.md\":\"4AQRiz1k\",\"guide_components_toggle-switch_emits.md\":\"CLGzrNut\",\"guide_components_toggle-switch_index.md\":\"61en_q9-\",\"guide_components_scroll-story_index.md\":\"Vpgb1HSV\",\"guide_components_reveal-container_index.md\":\"Cut2r4tV\",\"guide_components_search-box_emits.md\":\"-d9sWNNt\",\"guide_components_search-box_properties.md\":\"DEKFfPFw\",\"guide_components_shimmer_emits.md\":\"CTMInlI3\",\"guide_components_tag_index.md\":\"BhhxkcHn\",\"guide_components_search-box_index.md\":\"DgkrY0oY\",\"guide_components_shimmer_index.md\":\"iZlHuTxw\",\"guide_components_shimmer_properties.md\":\"CdkU1o6H\",\"guide_components_tree-view_index.md\":\"CUrwan4q\",\"guide_components_text-field_index.md\":\"CXSimJtj\",\"guide_components_text-box_index.md\":\"C5moAPfB\",\"guide_components_progress-ring_properties.md\":\"Dc08Uiff\",\"guide_components_toggle-switch_properties.md\":\"tFppK_IS\",\"guide_components_radio-group_emits.md\":\"cEDzKVnN\",\"guide_components_collapse_index.md\":\"N9Iu5-2v\",\"guide_components_image_emits.md\":\"lmlz2xJd\",\"guide_components_callout_index.md\":\"D9RU33w6\",\"guide_components_pivot_index.md\":\"B_vwQL-5\",\"guide_components_command-bar_index.md\":\"Cp4_rrGB\",\"guide_components_pagination_emits.md\":\"Dng86A22\",\"guide_components_button_index.md\":\"7sqT2MQP\",\"guide_components_info-box_properties.md\":\"BI7Nvk-E\",\"guide_components_drop-down_emits.md\":\"BE95TdKW\",\"guide_components_expander_index.md\":\"BKgcUJzQ\",\"guide_components_message-bar_index.md\":\"AEtAWlF8\",\"guide_components_menu-flyout_index.md\":\"Csa7irPj\",\"guide_components_panel_index.md\":\"CsTu0bXo\",\"guide_components_panel_properties.md\":\"BaxoCYKq\",\"guide_components_progress-bar_emits.md\":\"BcwXUpsF\",\"guide_components_progress-bar_properties.md\":\"TxiS9ZMA\",\"guide_components_progress-ring_emits.md\":\"D2Y6hIZ9\",\"guide_components_color-picker_index.md\":\"DCc4ixcU\",\"guide_components_progress-ring_index.md\":\"CPb-ZEPE\",\"guide_components_color-picker_properties.md\":\"wcXK29Vl\",\"guide_components_time-picker_index.md\":\"CQJdRRaG\",\"guide_components_drop-down_properties.md\":\"Bwlkpr1q\",\"guide_components_infinite-scroll-view_index.md\":\"yAuD807x\",\"guide_components_check-box_index.md\":\"FYgdu4oq\",\"guide_components_progress-bar_index.md\":\"D8vHQw5V\",\"guide_components_combo-box_index.md\":\"DTyu3eNd\",\"guide_components_info-box_emits.md\":\"DlEwpkkq\",\"guide_components_drop-down_index.md\":\"BZzJZQWq\",\"guide_components_list-view_index.md\":\"BoYvMzb0\",\"guide_components_verify-box_properties.md\":\"CW6W8fFf\",\"guide_components_verify-box_index.md\":\"DwSB40wR\",\"guide_index.md\":\"Bndlt3sL\",\"guide_components_web-window_index.md\":\"Bxc8vEeI\",\"index.md\":\"MTRqI42u\",\"guide_components_combo-box_properties.md\":\"AWfHzV6x\",\"guide_components_combobox_emits.md\":\"CGB6WLt8\",\"guide_components_combobox_properties.md\":\"Bja0hMou\",\"guide_components_details-list_index.md\":\"CcgOCIyt\",\"guide_components_info-box_index.md\":\"vXh-_DsL\",\"guide_components_combobox_index.md\":\"CsPkY6YB\",\"guide_components_date-picker_index.md\":\"12vmUIup\",\"guide_components_flip-view_emits.md\":\"DCheHjDj\",\"guide_components_panel_emits.md\":\"DG0REDq8\",\"guide_components_breadcrumb_index.md\":\"DyDm7PeP\",\"guide_components_radio-group_properties.md\":\"BnPxoKsQ\",\"guide_components_persona_emits.md\":\"CnsDPKRU\",\"guide_components_pivot_properties.md\":\"BmoLpPi1\",\"guide_components_persona_index.md\":\"DT00jby4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vfluent3\",\"description\":\"A Vue3 component library for Fluent UI\",\"base\":\"/VFluent3/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"VFluent3\",\"footer\":{\"message\":\"MIT Licensed\",\"copyright\":\"Copyright © Creator SN - 2022\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/\"}],\"sidebar\":[{\"text\":\"Basic input\",\"collapsed\":true,\"items\":[{\"text\":\"Button\",\"link\":\"/guide/components/button/\"},{\"text\":\"CheckBox\",\"link\":\"/guide/components/check-box/\"},{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"},{\"text\":\"Combobox\",\"link\":\"/guide/components/combobox/\"},{\"text\":\"DetailsList\",\"link\":\"/guide/components/details-list/\"},{\"text\":\"DropDown\",\"link\":\"/guide/components/drop-down/\"},{\"text\":\"Radio\",\"link\":\"/guide/components/radio/\"},{\"text\":\"RadioGroup\",\"link\":\"/guide/components/radio-group/\"},{\"text\":\"RatingControl\",\"link\":\"/guide/components/rating-control/\"},{\"text\":\"Slider\",\"link\":\"/guide/components/slider/\"},{\"text\":\"ToggleSwitch\",\"link\":\"/guide/components/toggle-switch/\"},{\"text\":\"Tag\",\"link\":\"/guide/components/tag/\"}]},{\"text\":\"Collections\",\"collapsed\":true,\"items\":[{\"text\":\"FlipView\",\"link\":\"/guide/components/flip-view/\"},{\"text\":\"ListView\",\"link\":\"/guide/components/list-view/\"},{\"text\":\"TreeView\",\"link\":\"/guide/components/tree-view/\"}]},{\"text\":\"Date & Time\",\"collapsed\":true,\"items\":[{\"text\":\"CalendarDatePicker\",\"link\":\"/guide/components/calendar-date-picker/\"},{\"text\":\"CalendarView\",\"link\":\"/guide/components/calendar-view/\"},{\"text\":\"DatePicker\",\"link\":\"/guide/components/date-picker/\"},{\"text\":\"TimePicker\",\"link\":\"/guide/components/time-picker/\"}]},{\"text\":\"Dialogs & flyouts\",\"collapsed\":true,\"items\":[{\"text\":\"Callout\",\"link\":\"/guide/components/callout/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Layout\",\"collapsed\":true,\"items\":[{\"text\":\"Collapse\",\"link\":\"/guide/components/collapse/\"},{\"text\":\"Expander\",\"link\":\"/guide/components/expander/\"},{\"text\":\"Drawer\",\"link\":\"/guide/components/drawer/\"},{\"text\":\"Panel\",\"link\":\"/guide/components/panel/\"}]},{\"text\":\"Media\",\"collapsed\":true,\"items\":[{\"text\":\"Image\",\"link\":\"/guide/components/image/\"},{\"text\":\"Img\",\"link\":\"/guide/components/img/\"},{\"text\":\"ImgBox\",\"link\":\"/guide/components/img-box/\"},{\"text\":\"Persona\",\"link\":\"/guide/components/persona/\"}]},{\"text\":\"Menu & toolbars\",\"collapsed\":true,\"items\":[{\"text\":\"CommandBar\",\"link\":\"/guide/components/command-bar/\"},{\"text\":\"MenuFlyout\",\"link\":\"/guide/components/menu-flyout/\"},{\"text\":\"SwipeControl\",\"link\":\"/guide/components/swipe-control/\"}]},{\"text\":\"Navigation\",\"collapsed\":true,\"items\":[{\"text\":\"Breadcrumb\",\"link\":\"/guide/components/breadcrumb/\"},{\"text\":\"NavigationPanel\",\"link\":\"/guide/components/navigation-panel/\"},{\"text\":\"NavigationView\",\"link\":\"/guide/components/navigation-view/\"},{\"text\":\"Pivot\",\"link\":\"/guide/components/pivot/\"},{\"text\":\"Pagination\",\"link\":\"/guide/components/pagination/\"}]},{\"text\":\"Scrolling\",\"collapsed\":true,\"items\":[{\"text\":\"InfiniteScrollView\",\"link\":\"/guide/components/infinite-scroll-view/\"},{\"text\":\"ScrollStory\",\"link\":\"/guide/components/scroll-story/\"}]},{\"text\":\"Status & info\",\"collapsed\":true,\"items\":[{\"text\":\"Badge\",\"link\":\"/guide/components/badge/\"},{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"ProgressBar\",\"link\":\"/guide/components/progress-bar/\"},{\"text\":\"ProgressRing\",\"link\":\"/guide/components/progress-ring/\"}]},{\"text\":\"Styles\",\"collapsed\":true,\"items\":[{\"text\":\"AnimatedIcon\",\"link\":\"/guide/components/animated-icon/\"},{\"text\":\"IconElement\",\"link\":\"/guide/components/icon-element/\"},{\"text\":\"RevealContainer\",\"link\":\"/guide/components/reveal-container/\"},{\"text\":\"Shimmer\",\"link\":\"/guide/components/shimmer/\"}]},{\"text\":\"Text\",\"collapsed\":true,\"items\":[{\"text\":\"SearchBox\",\"link\":\"/guide/components/search-box/\"},{\"text\":\"TextBox\",\"link\":\"/guide/components/text-box/\"},{\"text\":\"TextField\",\"link\":\"/guide/components/text-field/\"},{\"text\":\"VerifyBox\",\"link\":\"/guide/components/verify-box/\"}]},{\"text\":\"Windowing\",\"collapsed\":true,\"items\":[{\"text\":\"WebWindow\",\"link\":\"/guide/components/web-window/\"}]},{\"text\":\"Global\",\"collapsed\":true,\"items\":[{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Advance\",\"collapsed\":true,\"items\":[{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git a/guide/components/search-box/emits.html b/guide/components/search-box/emits.html
new file mode 100644
index 0000000..7a8cf12
--- /dev/null
+++ b/guide/components/search-box/emits.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>vfluent3</title>
+    <meta name="description" content="A Vue3 component library for Fluent UI">
+    <meta name="generator" content="VitePress v1.0.0-rc.45">
+    <link rel="preload stylesheet" href="/VFluent3/assets/style.BabQegKX.css" as="style">
+    
+    <script type="module" src="/VFluent3/assets/app.CSutcJ2E.js"></script>
+    <link rel="preload" href="/VFluent3/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/framework.DvIFzl91.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/theme.CgqFBnN_.js">
+    <link rel="modulepreload" href="/VFluent3/assets/guide_components_search-box_emits.md.-d9sWNNt.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-19c990f1><div class="wrapper" data-v-19c990f1><div class="container" data-v-19c990f1><div class="title" data-v-19c990f1><div class="VPNavBarTitle has-sidebar" data-v-19c990f1 data-v-ab179fa1><a class="title" href="/VFluent3/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>VFluent3</span><!--[--><!--]--></a></div></div><div class="content" data-v-19c990f1><div class="content-body" data-v-19c990f1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-19c990f1><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-19c990f1 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Guide</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-19c990f1 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-19c990f1 data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-19c990f1 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-19c990f1><div class="divider-line" data-v-19c990f1></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-d2ecc192><button data-v-d2ecc192>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-575e6a36><div class="curtain" data-v-575e6a36></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-575e6a36><span class="visually-hidden" id="sidebar-aria-label" data-v-575e6a36> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Basic input</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/button/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/check-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CheckBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/combobox/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Combobox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/details-list/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DetailsList</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drop-down/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DropDown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio-group/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RadioGroup</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/rating-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RatingControl</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/slider/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/toggle-switch/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ToggleSwitch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tag/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Tag</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Collections</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/flip-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>FlipView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/list-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ListView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tree-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TreeView</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Date & Time</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarDatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/time-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TimePicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Dialogs & flyouts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/callout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Callout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Layout</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/collapse/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Collapse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/expander/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Expander</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drawer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Panel</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Media</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/image/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Img</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ImgBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/persona/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Persona</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Menu & toolbars</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/command-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CommandBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/menu-flyout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MenuFlyout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/swipe-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SwipeControl</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Navigation</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/breadcrumb/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationPanel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pivot/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pivot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pagination/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pagination</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Scrolling</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/infinite-scroll-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfiniteScrollView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/scroll-story/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ScrollStory</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Status & info</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/badge/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-ring/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressRing</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Styles</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/animated-icon/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>AnimatedIcon</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/icon-element/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>IconElement</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/reveal-container/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RevealContainer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/shimmer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Shimmer</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Text</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/search-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SearchBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-field/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextField</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/verify-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>VerifyBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Windowing</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/web-window/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>WebWindow</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Global</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Advance</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-935f8a84><div class="content" data-v-935f8a84><div class="outline-marker" data-v-935f8a84></div><div class="outline-title" role="heading" aria-level="2" data-v-935f8a84>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-935f8a84><span class="visually-hidden" id="doc-outline-aria-label" data-v-935f8a84> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-935f8a84 data-v-b933a997><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _VFluent3_guide_components_search-box_emits" data-v-39a288b8><div><h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-label="Permalink to &quot;Emits&quot;">​</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead></table></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-09de1c0f><!--[--><!--]--><!----><nav class="prev-next" data-v-09de1c0f><div class="pager" data-v-09de1c0f><!----></div><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link next" href="/VFluent3/guide/components/button/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Next page</span><span class="title" data-v-09de1c0f>Button</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>MIT Licensed</p><p class="copyright" data-v-e315a0ad>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_calendar-date-picker_properties.md\":\"DXRjmMG8\",\"guide_components_image_properties.md\":\"DGanRzCb\",\"guide_components_img-box_index.md\":\"DYtggkf_\",\"guide_components_img_emits.md\":\"BlE7jvZQ\",\"guide_components_img_index.md\":\"Bm9FiuU4\",\"guide_components_icon-element_properties.md\":\"8Oakruwc\",\"guide_components_img_properties.md\":\"B42YSocI\",\"guide_components_drawer_index.md\":\"D_vpnCpE\",\"guide_components_verify-box_emits.md\":\"DT17Iazx\",\"guide_components_calendar-date-picker_index.md\":\"BdHjrurh\",\"guide_components_rating-control_index.md\":\"Q9l5Lfrr\",\"guide_components_rating-control_properties.md\":\"DKprnl0i\",\"guide_components_calendar-view_index.md\":\"zdoRYVx1\",\"guide_components_animated-icon_index.md\":\"yZDMzCFe\",\"guide_components_calendar-date-picker_emits.md\":\"D5OkfR8j\",\"guide_components_badge_index.md\":\"Bb4crrJn\",\"guide_components_image_index.md\":\"B7X6cWAZ\",\"guide_components_slider_index.md\":\"C7zZ2d-W\",\"guide_components_radio-group_index.md\":\"CVfh3h5H\",\"guide_components_swipe-control_index.md\":\"DwrDVPc1\",\"guide_components_color-picker_emits.md\":\"BHDXVtBQ\",\"guide_components_radio_index.md\":\"90as5QGp\",\"guide_components_pagination_properties.md\":\"JUAPvcTL\",\"guide_components_persona_properties.md\":\"DUTPhPMp\",\"guide_components_combo-box_emits.md\":\"Dh5R-qEv\",\"guide_components_pivot_emits.md\":\"BTJPgNpy\",\"guide_components_pagination_index.md\":\"CnW2zAht\",\"guide_components_flip-view_properties.md\":\"BqZ4hhgU\",\"guide_components_icon-element_emits.md\":\"D5TXFdTZ\",\"guide_components_flip-view_index.md\":\"DefnDOv6\",\"guide_components_navigation-panel_index.md\":\"6mO__sSK\",\"guide_components_rating-control_emits.md\":\"blvomSeC\",\"guide_components_icon-element_index.md\":\"DQ8K7JNn\",\"guide_components_navigation-view_index.md\":\"4AQRiz1k\",\"guide_components_toggle-switch_emits.md\":\"CLGzrNut\",\"guide_components_toggle-switch_index.md\":\"61en_q9-\",\"guide_components_scroll-story_index.md\":\"Vpgb1HSV\",\"guide_components_reveal-container_index.md\":\"Cut2r4tV\",\"guide_components_search-box_emits.md\":\"-d9sWNNt\",\"guide_components_search-box_properties.md\":\"DEKFfPFw\",\"guide_components_shimmer_emits.md\":\"CTMInlI3\",\"guide_components_tag_index.md\":\"BhhxkcHn\",\"guide_components_search-box_index.md\":\"DgkrY0oY\",\"guide_components_shimmer_index.md\":\"iZlHuTxw\",\"guide_components_shimmer_properties.md\":\"CdkU1o6H\",\"guide_components_tree-view_index.md\":\"CUrwan4q\",\"guide_components_text-field_index.md\":\"CXSimJtj\",\"guide_components_text-box_index.md\":\"C5moAPfB\",\"guide_components_progress-ring_properties.md\":\"Dc08Uiff\",\"guide_components_toggle-switch_properties.md\":\"tFppK_IS\",\"guide_components_radio-group_emits.md\":\"cEDzKVnN\",\"guide_components_collapse_index.md\":\"N9Iu5-2v\",\"guide_components_image_emits.md\":\"lmlz2xJd\",\"guide_components_callout_index.md\":\"D9RU33w6\",\"guide_components_pivot_index.md\":\"B_vwQL-5\",\"guide_components_command-bar_index.md\":\"Cp4_rrGB\",\"guide_components_pagination_emits.md\":\"Dng86A22\",\"guide_components_button_index.md\":\"7sqT2MQP\",\"guide_components_info-box_properties.md\":\"BI7Nvk-E\",\"guide_components_drop-down_emits.md\":\"BE95TdKW\",\"guide_components_expander_index.md\":\"BKgcUJzQ\",\"guide_components_message-bar_index.md\":\"AEtAWlF8\",\"guide_components_menu-flyout_index.md\":\"Csa7irPj\",\"guide_components_panel_index.md\":\"CsTu0bXo\",\"guide_components_panel_properties.md\":\"BaxoCYKq\",\"guide_components_progress-bar_emits.md\":\"BcwXUpsF\",\"guide_components_progress-bar_properties.md\":\"TxiS9ZMA\",\"guide_components_progress-ring_emits.md\":\"D2Y6hIZ9\",\"guide_components_color-picker_index.md\":\"DCc4ixcU\",\"guide_components_progress-ring_index.md\":\"CPb-ZEPE\",\"guide_components_color-picker_properties.md\":\"wcXK29Vl\",\"guide_components_time-picker_index.md\":\"CQJdRRaG\",\"guide_components_drop-down_properties.md\":\"Bwlkpr1q\",\"guide_components_infinite-scroll-view_index.md\":\"yAuD807x\",\"guide_components_check-box_index.md\":\"FYgdu4oq\",\"guide_components_progress-bar_index.md\":\"D8vHQw5V\",\"guide_components_combo-box_index.md\":\"DTyu3eNd\",\"guide_components_info-box_emits.md\":\"DlEwpkkq\",\"guide_components_drop-down_index.md\":\"BZzJZQWq\",\"guide_components_list-view_index.md\":\"BoYvMzb0\",\"guide_components_verify-box_properties.md\":\"CW6W8fFf\",\"guide_components_verify-box_index.md\":\"DwSB40wR\",\"guide_index.md\":\"Bndlt3sL\",\"guide_components_web-window_index.md\":\"Bxc8vEeI\",\"index.md\":\"MTRqI42u\",\"guide_components_combo-box_properties.md\":\"AWfHzV6x\",\"guide_components_combobox_emits.md\":\"CGB6WLt8\",\"guide_components_combobox_properties.md\":\"Bja0hMou\",\"guide_components_details-list_index.md\":\"CcgOCIyt\",\"guide_components_info-box_index.md\":\"vXh-_DsL\",\"guide_components_combobox_index.md\":\"CsPkY6YB\",\"guide_components_date-picker_index.md\":\"12vmUIup\",\"guide_components_flip-view_emits.md\":\"DCheHjDj\",\"guide_components_panel_emits.md\":\"DG0REDq8\",\"guide_components_breadcrumb_index.md\":\"DyDm7PeP\",\"guide_components_radio-group_properties.md\":\"BnPxoKsQ\",\"guide_components_persona_emits.md\":\"CnsDPKRU\",\"guide_components_pivot_properties.md\":\"BmoLpPi1\",\"guide_components_persona_index.md\":\"DT00jby4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vfluent3\",\"description\":\"A Vue3 component library for Fluent UI\",\"base\":\"/VFluent3/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"VFluent3\",\"footer\":{\"message\":\"MIT Licensed\",\"copyright\":\"Copyright © Creator SN - 2022\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/\"}],\"sidebar\":[{\"text\":\"Basic input\",\"collapsed\":true,\"items\":[{\"text\":\"Button\",\"link\":\"/guide/components/button/\"},{\"text\":\"CheckBox\",\"link\":\"/guide/components/check-box/\"},{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"},{\"text\":\"Combobox\",\"link\":\"/guide/components/combobox/\"},{\"text\":\"DetailsList\",\"link\":\"/guide/components/details-list/\"},{\"text\":\"DropDown\",\"link\":\"/guide/components/drop-down/\"},{\"text\":\"Radio\",\"link\":\"/guide/components/radio/\"},{\"text\":\"RadioGroup\",\"link\":\"/guide/components/radio-group/\"},{\"text\":\"RatingControl\",\"link\":\"/guide/components/rating-control/\"},{\"text\":\"Slider\",\"link\":\"/guide/components/slider/\"},{\"text\":\"ToggleSwitch\",\"link\":\"/guide/components/toggle-switch/\"},{\"text\":\"Tag\",\"link\":\"/guide/components/tag/\"}]},{\"text\":\"Collections\",\"collapsed\":true,\"items\":[{\"text\":\"FlipView\",\"link\":\"/guide/components/flip-view/\"},{\"text\":\"ListView\",\"link\":\"/guide/components/list-view/\"},{\"text\":\"TreeView\",\"link\":\"/guide/components/tree-view/\"}]},{\"text\":\"Date & Time\",\"collapsed\":true,\"items\":[{\"text\":\"CalendarDatePicker\",\"link\":\"/guide/components/calendar-date-picker/\"},{\"text\":\"CalendarView\",\"link\":\"/guide/components/calendar-view/\"},{\"text\":\"DatePicker\",\"link\":\"/guide/components/date-picker/\"},{\"text\":\"TimePicker\",\"link\":\"/guide/components/time-picker/\"}]},{\"text\":\"Dialogs & flyouts\",\"collapsed\":true,\"items\":[{\"text\":\"Callout\",\"link\":\"/guide/components/callout/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Layout\",\"collapsed\":true,\"items\":[{\"text\":\"Collapse\",\"link\":\"/guide/components/collapse/\"},{\"text\":\"Expander\",\"link\":\"/guide/components/expander/\"},{\"text\":\"Drawer\",\"link\":\"/guide/components/drawer/\"},{\"text\":\"Panel\",\"link\":\"/guide/components/panel/\"}]},{\"text\":\"Media\",\"collapsed\":true,\"items\":[{\"text\":\"Image\",\"link\":\"/guide/components/image/\"},{\"text\":\"Img\",\"link\":\"/guide/components/img/\"},{\"text\":\"ImgBox\",\"link\":\"/guide/components/img-box/\"},{\"text\":\"Persona\",\"link\":\"/guide/components/persona/\"}]},{\"text\":\"Menu & toolbars\",\"collapsed\":true,\"items\":[{\"text\":\"CommandBar\",\"link\":\"/guide/components/command-bar/\"},{\"text\":\"MenuFlyout\",\"link\":\"/guide/components/menu-flyout/\"},{\"text\":\"SwipeControl\",\"link\":\"/guide/components/swipe-control/\"}]},{\"text\":\"Navigation\",\"collapsed\":true,\"items\":[{\"text\":\"Breadcrumb\",\"link\":\"/guide/components/breadcrumb/\"},{\"text\":\"NavigationPanel\",\"link\":\"/guide/components/navigation-panel/\"},{\"text\":\"NavigationView\",\"link\":\"/guide/components/navigation-view/\"},{\"text\":\"Pivot\",\"link\":\"/guide/components/pivot/\"},{\"text\":\"Pagination\",\"link\":\"/guide/components/pagination/\"}]},{\"text\":\"Scrolling\",\"collapsed\":true,\"items\":[{\"text\":\"InfiniteScrollView\",\"link\":\"/guide/components/infinite-scroll-view/\"},{\"text\":\"ScrollStory\",\"link\":\"/guide/components/scroll-story/\"}]},{\"text\":\"Status & info\",\"collapsed\":true,\"items\":[{\"text\":\"Badge\",\"link\":\"/guide/components/badge/\"},{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"ProgressBar\",\"link\":\"/guide/components/progress-bar/\"},{\"text\":\"ProgressRing\",\"link\":\"/guide/components/progress-ring/\"}]},{\"text\":\"Styles\",\"collapsed\":true,\"items\":[{\"text\":\"AnimatedIcon\",\"link\":\"/guide/components/animated-icon/\"},{\"text\":\"IconElement\",\"link\":\"/guide/components/icon-element/\"},{\"text\":\"RevealContainer\",\"link\":\"/guide/components/reveal-container/\"},{\"text\":\"Shimmer\",\"link\":\"/guide/components/shimmer/\"}]},{\"text\":\"Text\",\"collapsed\":true,\"items\":[{\"text\":\"SearchBox\",\"link\":\"/guide/components/search-box/\"},{\"text\":\"TextBox\",\"link\":\"/guide/components/text-box/\"},{\"text\":\"TextField\",\"link\":\"/guide/components/text-field/\"},{\"text\":\"VerifyBox\",\"link\":\"/guide/components/verify-box/\"}]},{\"text\":\"Windowing\",\"collapsed\":true,\"items\":[{\"text\":\"WebWindow\",\"link\":\"/guide/components/web-window/\"}]},{\"text\":\"Global\",\"collapsed\":true,\"items\":[{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Advance\",\"collapsed\":true,\"items\":[{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git a/guide/components/search-box/index.html b/guide/components/search-box/index.html
new file mode 100644
index 0000000..da5cf4f
--- /dev/null
+++ b/guide/components/search-box/index.html
@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>SearchBox | vfluent3</title>
+    <meta name="description" content="A Vue3 component library for Fluent UI">
+    <meta name="generator" content="VitePress v1.0.0-rc.45">
+    <link rel="preload stylesheet" href="/VFluent3/assets/style.BabQegKX.css" as="style">
+    
+    <script type="module" src="/VFluent3/assets/app.CSutcJ2E.js"></script>
+    <link rel="preload" href="/VFluent3/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/framework.DvIFzl91.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/theme.CgqFBnN_.js">
+    <link rel="modulepreload" href="/VFluent3/assets/guide_components_search-box_index.md.DgkrY0oY.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-19c990f1><div class="wrapper" data-v-19c990f1><div class="container" data-v-19c990f1><div class="title" data-v-19c990f1><div class="VPNavBarTitle has-sidebar" data-v-19c990f1 data-v-ab179fa1><a class="title" href="/VFluent3/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>VFluent3</span><!--[--><!--]--></a></div></div><div class="content" data-v-19c990f1><div class="content-body" data-v-19c990f1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-19c990f1><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-19c990f1 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Guide</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-19c990f1 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-19c990f1 data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-19c990f1 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-19c990f1><div class="divider-line" data-v-19c990f1></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-d2ecc192><button data-v-d2ecc192>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-575e6a36><div class="curtain" data-v-575e6a36></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-575e6a36><span class="visually-hidden" id="sidebar-aria-label" data-v-575e6a36> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Basic input</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/button/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/check-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CheckBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/combobox/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Combobox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/details-list/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DetailsList</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drop-down/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DropDown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio-group/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RadioGroup</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/rating-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RatingControl</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/slider/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/toggle-switch/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ToggleSwitch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tag/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Tag</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Collections</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/flip-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>FlipView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/list-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ListView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tree-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TreeView</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Date & Time</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarDatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/time-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TimePicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Dialogs & flyouts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/callout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Callout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Layout</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/collapse/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Collapse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/expander/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Expander</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drawer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Panel</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Media</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/image/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Img</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ImgBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/persona/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Persona</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Menu & toolbars</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/command-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CommandBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/menu-flyout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MenuFlyout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/swipe-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SwipeControl</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Navigation</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/breadcrumb/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationPanel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pivot/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pivot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pagination/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pagination</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Scrolling</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/infinite-scroll-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfiniteScrollView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/scroll-story/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ScrollStory</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Status & info</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/badge/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-ring/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressRing</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Styles</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/animated-icon/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>AnimatedIcon</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/icon-element/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>IconElement</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/reveal-container/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RevealContainer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/shimmer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Shimmer</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible has-active" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Text</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/search-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SearchBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-field/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextField</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/verify-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>VerifyBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Windowing</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/web-window/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>WebWindow</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Global</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Advance</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-935f8a84><div class="content" data-v-935f8a84><div class="outline-marker" data-v-935f8a84></div><div class="outline-title" role="heading" aria-level="2" data-v-935f8a84>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-935f8a84><span class="visually-hidden" id="doc-outline-aria-label" data-v-935f8a84> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-935f8a84 data-v-b933a997><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _VFluent3_guide_components_search-box_" data-v-39a288b8><div><h3 id="searchbox-demo" tabindex="-1">SearchBox-DEMO <a class="header-anchor" href="#searchbox-demo" aria-label="Permalink to &quot;SearchBox-DEMO&quot;">​</a></h3><hr><p>Standard</p><div class="fv-SearchBox light" style="background:;border-radius:3px;"><div class="fv-RevealContainer light fv-search-box-reveal-container" style="border-radius:3px;"><svg style="display:none;" width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> &gt; <defs><radialGradient cx="50%" cy="50%" r="120" gradientUnits="userSpaceOnUse" spreadMethod="pad" id="backgroundG_0ac18ee3794ddb20df3f2ad76892545b" gradientTransform="matrix(1 0 0 1 0.000 0.000)"><stop offset="0" stop-color="rgba(121, 119, 117, 0.3)"></stop><stop offset="1" stop-color="rgba(255, 255, 255, 0)"></stop><!--[--><!--]--></radialGradient><radialGradient cx="50%" cy="50%" r="60" gradientUnits="userSpaceOnUse" spreadMethod="pad" id="borderG_0ac18ee3794ddb20df3f2ad76892545b" gradientTransform="matrix(1 0 0 1 0.000 0.000)"><stop offset="0" stop-color="rgba(121, 119, 117, 0.6)"></stop><stop offset="1" stop-color="rgba(255, 255, 255, 0)"></stop><!--[--><!--]--></radialGradient><radialGradient cx="50%" cy="50%" r="0" gradientUnits="userSpaceOnUse" spreadMethod="pad" id="clickG_0ac18ee3794ddb20df3f2ad76892545b" gradientTransform="matrix(1 0 0 1 0.000 0.000)"><stop offset="0" stop-color="rgba(255, 255, 255, 0)"></stop><stop offset="0.33" stop-color="rgba(121, 119, 117, 0.3)"></stop><stop offset="0.66" stop-color="rgba(255, 255, 255, 0)"></stop><stop offset="1" stop-color="rgba(255, 255, 255, 0)"></stop></radialGradient></defs><rect x="0.5" y="0.5" rx="3" ry="3" style="box-sizing:border-box;width:-1px;height:-1px;stroke:url(#borderG_0ac18ee3794ddb20df3f2ad76892545b);fill:transparent;stroke-width:1;"></rect><rect style="display:none;stroke:transparent;box-sizing:border-box;width:-1px;height:-1px;fill:transparent;stroke-width:1;" x="0.5" y="0.5" rx="3" ry="3"></rect></svg></div><div class="search-box-wrapper-container" style="border-color:;background:;border-radius:3px;border-width:1px;"><i style="display:none;" class="ms-Icon-- ms-Icon icon-block"></i><div style="display:none;" class="search-box-placeholder"><!--[--><!--]--></div><div class="search-box-container"><input value="" type="text" placeholder="Search" class="input" maxlength="" style="font-size:13.3px;font-weight:normal;color:;text-align:left;"></div><i style="display:none;" class="ms-Icon ms-Icon--Cancel icon-block"></i><i style="" class="ms-Icon--Search ms-Icon icon-block"></i></div><div style="display:none;" class="search-result-container"><!--[--><div class="fv-ListView global" style="width:100%;height:auto;"><div class="list-view-header"><!--[--><!--]--></div><div class="list-view-container"><!--[--><!--]--></div><div class="list-view-footer"><!--[--><!--]--></div><!----></div><!--]--></div></div><p>Disabled</p><div class="fv-SearchBox light disabled" style="background:;border-radius:3px;"><div class="fv-RevealContainer light fv-search-box-reveal-container" style="border-radius:3px;"><svg style="display:none;" width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> &gt; <defs><radialGradient cx="50%" cy="50%" r="120" gradientUnits="userSpaceOnUse" spreadMethod="pad" id="backgroundG_a488bfec88b9f6b98a6679b03054a97d" gradientTransform="matrix(1 0 0 1 0.000 0.000)"><stop offset="0" stop-color="rgba(121, 119, 117, 0.3)"></stop><stop offset="1" stop-color="rgba(255, 255, 255, 0)"></stop><!--[--><!--]--></radialGradient><radialGradient cx="50%" cy="50%" r="60" gradientUnits="userSpaceOnUse" spreadMethod="pad" id="borderG_a488bfec88b9f6b98a6679b03054a97d" gradientTransform="matrix(1 0 0 1 0.000 0.000)"><stop offset="0" stop-color="rgba(121, 119, 117, 0.6)"></stop><stop offset="1" stop-color="rgba(255, 255, 255, 0)"></stop><!--[--><!--]--></radialGradient><radialGradient cx="50%" cy="50%" r="0" gradientUnits="userSpaceOnUse" spreadMethod="pad" id="clickG_a488bfec88b9f6b98a6679b03054a97d" gradientTransform="matrix(1 0 0 1 0.000 0.000)"><stop offset="0" stop-color="rgba(255, 255, 255, 0)"></stop><stop offset="0.33" stop-color="rgba(121, 119, 117, 0.3)"></stop><stop offset="0.66" stop-color="rgba(255, 255, 255, 0)"></stop><stop offset="1" stop-color="rgba(255, 255, 255, 0)"></stop></radialGradient></defs><rect x="0.5" y="0.5" rx="3" ry="3" style="box-sizing:border-box;width:-1px;height:-1px;stroke:url(#borderG_a488bfec88b9f6b98a6679b03054a97d);fill:transparent;stroke-width:1;"></rect><rect style="display:none;stroke:transparent;box-sizing:border-box;width:-1px;height:-1px;fill:transparent;stroke-width:1;" x="0.5" y="0.5" rx="3" ry="3"></rect></svg></div><div class="search-box-wrapper-container" style="border-color:;background:;border-radius:3px;border-width:1px;"><i style="display:none;" class="ms-Icon-- ms-Icon icon-block"></i><div style="display:none;" class="search-box-placeholder"><!--[--><!--]--></div><div class="search-box-container"><input value="" type="text" placeholder="Search" class="input" disabled maxlength="" style="font-size:13.3px;font-weight:normal;color:;text-align:left;"></div><i style="display:none;" class="ms-Icon ms-Icon--Cancel icon-block"></i><i style="" class="ms-Icon--Search ms-Icon icon-block"></i></div><div style="display:none;" class="search-result-container"><!--[--><div class="fv-ListView global" style="width:100%;height:auto;"><div class="list-view-header"><!--[--><!--]--></div><div class="list-view-container"><!--[--><!--]--></div><div class="list-view-footer"><!--[--><!--]--></div><!----></div><!--]--></div></div><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">Standard</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-SearchBox</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> icon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Search&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Search&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">options</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">items</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-SearchBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">Disabled</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-SearchBox</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> icon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Search&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Search&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">options</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">items</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> disabled</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-SearchBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h3 id="searchbox-revealborder" tabindex="-1">SearchBox-RevealBorder <a class="header-anchor" href="#searchbox-revealborder" aria-label="Permalink to &quot;SearchBox-RevealBorder&quot;">​</a></h3><div class="fv-SearchBox light shadow" style="background:;border-radius:3px;"><div class="fv-RevealContainer light fv-search-box-reveal-container" style="border-radius:3px;"><svg style="display:none;" width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> &gt; <defs><radialGradient cx="50%" cy="50%" r="120" gradientUnits="userSpaceOnUse" spreadMethod="pad" id="backgroundG_dab85195f531a05ba7d3badd43631686" gradientTransform="matrix(1 0 0 1 0.000 0.000)"><stop offset="0" stop-color="rgba(121, 119, 117, 0.3)"></stop><stop offset="1" stop-color="rgba(255, 255, 255, 0)"></stop><!--[--><!--]--></radialGradient><radialGradient cx="50%" cy="50%" r="60" gradientUnits="userSpaceOnUse" spreadMethod="pad" id="borderG_dab85195f531a05ba7d3badd43631686" gradientTransform="matrix(1 0 0 1 0.000 0.000)"><stop offset="0" stop-color="rgba(121, 119, 117, 0.6)"></stop><stop offset="1" stop-color="rgba(255, 255, 255, 0)"></stop><!--[--><!--]--></radialGradient><radialGradient cx="50%" cy="50%" r="0" gradientUnits="userSpaceOnUse" spreadMethod="pad" id="clickG_dab85195f531a05ba7d3badd43631686" gradientTransform="matrix(1 0 0 1 0.000 0.000)"><stop offset="0" stop-color="rgba(255, 255, 255, 0)"></stop><stop offset="0.33" stop-color="rgba(121, 119, 117, 0.3)"></stop><stop offset="0.66" stop-color="rgba(255, 255, 255, 0)"></stop><stop offset="1" stop-color="rgba(255, 255, 255, 0)"></stop></radialGradient></defs><rect x="0.5" y="0.5" rx="3" ry="3" style="box-sizing:border-box;width:-1px;height:-1px;stroke:url(#borderG_dab85195f531a05ba7d3badd43631686);fill:transparent;stroke-width:1;"></rect><rect style="display:none;stroke:transparent;box-sizing:border-box;width:-1px;height:-1px;fill:transparent;stroke-width:1;" x="0.5" y="0.5" rx="3" ry="3"></rect></svg></div><div class="search-box-wrapper-container" style="border-color:rgba(0, 0, 0, 0.01);background:;border-radius:3px;border-width:1px;"><i style="display:none;" class="ms-Icon-- ms-Icon icon-block"></i><div style="display:none;" class="search-box-placeholder"><!--[--><!--]--></div><div class="search-box-container"><input value="" type="text" placeholder="Please enter the text here." class="input" maxlength="" style="font-size:13.3px;font-weight:normal;color:;text-align:left;"></div><i style="display:none;" class="ms-Icon ms-Icon--Cancel icon-block"></i><i style="" class="ms-Icon--Search ms-Icon icon-block"></i></div><div style="display:none;" class="search-result-container"><!--[--><div class="fv-ListView global" style="width:100%;height:auto;"><div class="list-view-header"><!--[--><!--]--></div><div class="list-view-container"><!--[--><!--]--></div><div class="list-view-footer"><!--[--><!--]--></div><!----></div><!--]--></div></div><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-SearchBox</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Please enter the text here.&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> icon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Search&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">options</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">items</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">revealBorder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> borderColor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rgba(0, 0, 0, 0.01)&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> borderRadius</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;3&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">isBoxShadow</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-SearchBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="searchbox-custom-search-result" tabindex="-1">SearchBox-Custom Search Result <a class="header-anchor" href="#searchbox-custom-search-result" aria-label="Permalink to &quot;SearchBox-Custom Search Result&quot;">​</a></h3><hr><div><div class="fv-SearchBox light" style="background:;border-radius:3px;"><div class="fv-RevealContainer light fv-search-box-reveal-container" style="border-radius:3px;"><svg style="display:none;" width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> &gt; <defs><radialGradient cx="50%" cy="50%" r="120" gradientUnits="userSpaceOnUse" spreadMethod="pad" id="backgroundG_fcf6356ad20b38c1f9b3249864c94e73" gradientTransform="matrix(1 0 0 1 0.000 0.000)"><stop offset="0" stop-color="rgba(121, 119, 117, 0.3)"></stop><stop offset="1" stop-color="rgba(255, 255, 255, 0)"></stop><!--[--><!--]--></radialGradient><radialGradient cx="50%" cy="50%" r="60" gradientUnits="userSpaceOnUse" spreadMethod="pad" id="borderG_fcf6356ad20b38c1f9b3249864c94e73" gradientTransform="matrix(1 0 0 1 0.000 0.000)"><stop offset="0" stop-color="rgba(121, 119, 117, 0.6)"></stop><stop offset="1" stop-color="rgba(255, 255, 255, 0)"></stop><!--[--><!--]--></radialGradient><radialGradient cx="50%" cy="50%" r="0" gradientUnits="userSpaceOnUse" spreadMethod="pad" id="clickG_fcf6356ad20b38c1f9b3249864c94e73" gradientTransform="matrix(1 0 0 1 0.000 0.000)"><stop offset="0" stop-color="rgba(255, 255, 255, 0)"></stop><stop offset="0.33" stop-color="rgba(121, 119, 117, 0.3)"></stop><stop offset="0.66" stop-color="rgba(255, 255, 255, 0)"></stop><stop offset="1" stop-color="rgba(255, 255, 255, 0)"></stop></radialGradient></defs><rect x="0.5" y="0.5" rx="3" ry="3" style="box-sizing:border-box;width:-1px;height:-1px;stroke:url(#borderG_fcf6356ad20b38c1f9b3249864c94e73);fill:transparent;stroke-width:1;"></rect><rect style="display:none;stroke:transparent;box-sizing:border-box;width:-1px;height:-1px;fill:transparent;stroke-width:1;" x="0.5" y="0.5" rx="3" ry="3"></rect></svg></div><div class="search-box-wrapper-container" style="border-color:;background:;border-radius:3px;border-width:1px;"><i style="display:none;" class="ms-Icon-- ms-Icon icon-block"></i><div style="display:none;" class="search-box-placeholder"><!--[--><!--]--></div><div class="search-box-container"><input value="" type="text" placeholder="Search" class="input" maxlength="" style="font-size:13.3px;font-weight:normal;color:;text-align:left;"></div><i style="display:none;" class="ms-Icon ms-Icon--Cancel icon-block"></i><i style="" class="ms-Icon--Search ms-Icon icon-block"></i></div><div style="display:none;" class="search-result-container"><!--[--><div style="position:relative;width:100%;height:auto;display:flex;flex-direction:column;"><span class="list-item list-title">人物</span><div style="position:relative;width:100%;height:60px;display:flex;"><!--[--><div class="fv-Img light" style="width:50px;height:50px;margin:5px;border-radius:50%;"><div class="fv-ImgBox light" style="background:;width:100%;height:100%;"><div style="" class="fv-img-box-content"><div class="fv-ProgressRing light" style="width:4px;height:4px;display:none;" value="0"><svg style="" width="4px" height="4px" class="svg"><circle r="0" cy="2" cx="2" stroke-width="2" stroke="transparent" stroke-linejoin="round" stroke-linecap="round" fill="none"></circle><circle class="progress-rotate" r="0" cy="2" cx="2" stroke-width="2" stroke="rgba(36, 36, 36, 1)" stroke-linejoin="round" stroke-linecap="round" fill="none" stroke-dashoffset="0px" stroke-dasharray="0.00px" style="transform:rotate(-90deg);"></circle></svg><div class="fv-progressRing-legacy xs" style="display:none;"><!--[--><p style="background:;"></p><p style="background:;"></p><p style="background:;"></p><p style="background:;"></p><p style="background:;"></p><!--]--></div></div></div><!----></div><!----></div><div class="fv-Img light" style="width:50px;height:50px;margin:5px;border-radius:50%;"><div class="fv-ImgBox light" style="background:;width:100%;height:100%;"><div style="" class="fv-img-box-content"><div class="fv-ProgressRing light" style="width:4px;height:4px;display:none;" value="0"><svg style="" width="4px" height="4px" class="svg"><circle r="0" cy="2" cx="2" stroke-width="2" stroke="transparent" stroke-linejoin="round" stroke-linecap="round" fill="none"></circle><circle class="progress-rotate" r="0" cy="2" cx="2" stroke-width="2" stroke="rgba(36, 36, 36, 1)" stroke-linejoin="round" stroke-linecap="round" fill="none" stroke-dashoffset="0px" stroke-dasharray="0.00px" style="transform:rotate(-90deg);"></circle></svg><div class="fv-progressRing-legacy xs" style="display:none;"><!--[--><p style="background:;"></p><p style="background:;"></p><p style="background:;"></p><p style="background:;"></p><p style="background:;"></p><!--]--></div></div></div><!----></div><!----></div><div class="fv-Img light" style="width:50px;height:50px;margin:5px;border-radius:50%;"><div class="fv-ImgBox light" style="background:;width:100%;height:100%;"><div style="" class="fv-img-box-content"><div class="fv-ProgressRing light" style="width:4px;height:4px;display:none;" value="0"><svg style="" width="4px" height="4px" class="svg"><circle r="0" cy="2" cx="2" stroke-width="2" stroke="transparent" stroke-linejoin="round" stroke-linecap="round" fill="none"></circle><circle class="progress-rotate" r="0" cy="2" cx="2" stroke-width="2" stroke="rgba(36, 36, 36, 1)" stroke-linejoin="round" stroke-linecap="round" fill="none" stroke-dashoffset="0px" stroke-dasharray="0.00px" style="transform:rotate(-90deg);"></circle></svg><div class="fv-progressRing-legacy xs" style="display:none;"><!--[--><p style="background:;"></p><p style="background:;"></p><p style="background:;"></p><p style="background:;"></p><p style="background:;"></p><!--]--></div></div></div><!----></div><!----></div><!--]--></div><span class="list-item list-title">位置</span><span><!--[--><p class="list-item">Beijing</p><p class="list-item">Shanghai</p><p class="list-item">Shenzhen</p><!--]--></span><span class="list-item list-title">职业</span><span><!--[--><p class="list-item">IT</p><p class="list-item">Doctor</p><p class="list-item">Artist</p><!--]--></span></div><!--]--></div></div></div><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;fv-SearchBox v-model=&quot;value&quot; icon=&quot;Search&quot; placeholder=&quot;Search&quot; :options=&quot;custom_items&quot; :focusShow=&quot;true&quot; :customFilter=&quot;customFilterFunc&quot; :resultPlaceholder.sync=&quot;resultPlaceholder&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;template v-slot:resultPlaceholder=&quot;x&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            &lt;fv-img v-for=&quot;(item, index) in resultPlaceholder&quot; :key=&quot;index&quot; :src=&quot;item&quot; style=&quot;width: 25px; height: 25px; margin: 0px 3px; border-radius: 50%;&quot;/&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;template v-slot:searchResult=&quot;x&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            &lt;div style=&quot;position: relative; width: 100%; height: auto; display: flex; flex-direction: column;&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                &lt;span class=&quot;list-item list-title&quot;&gt;人物&lt;/span&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                &lt;div style=&quot;position: relative; width: 100%; height: 60px; display: flex;&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                    &lt;fv-img v-for=&quot;(item, index) in x.data.people&quot; :key=&quot;index&quot; :src=&quot;item&quot; style=&quot;width: 50px; height: 50px; margin: 5px; border-radius: 50%;&quot; @click.native=&quot;resultPlaceholder.push(item)&quot;/&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;list-item list-title&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;位置&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                    &lt;p v-for=&quot;(item, index) in x.data.pos&quot; class=&quot;list-item&quot; :key=&quot;index&quot;&gt;{{item}}&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;list-item list-title&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;职业&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                    &lt;p v-for=&quot;(item, index) in x.data.pro&quot; class=&quot;list-item&quot; :key=&quot;index&quot;&gt;{{item}}&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/fv-SearchBox&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br></div></div><h3 id="textbox-with-underline-and-borderless" tabindex="-1">TextBox-With Underline And Borderless <a class="header-anchor" href="#textbox-with-underline-and-borderless" aria-label="Permalink to &quot;TextBox-With Underline And Borderless&quot;">​</a></h3><hr><ol><li>Light</li></ol><div class="fv-SearchBox light underline" style="background:;border-radius:3px;"><div class="fv-RevealContainer light fv-search-box-reveal-container" style="border-radius:3px;"><svg style="display:none;" width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> &gt; <defs><radialGradient cx="50%" cy="50%" r="120" gradientUnits="userSpaceOnUse" spreadMethod="pad" id="backgroundG_3184c332e82983b7d2da796404bf6650" gradientTransform="matrix(1 0 0 1 0.000 0.000)"><stop offset="0" stop-color="rgba(121, 119, 117, 0.3)"></stop><stop offset="1" stop-color="rgba(255, 255, 255, 0)"></stop><!--[--><!--]--></radialGradient><radialGradient cx="50%" cy="50%" r="60" gradientUnits="userSpaceOnUse" spreadMethod="pad" id="borderG_3184c332e82983b7d2da796404bf6650" gradientTransform="matrix(1 0 0 1 0.000 0.000)"><stop offset="0" stop-color="rgba(121, 119, 117, 0.6)"></stop><stop offset="1" stop-color="rgba(255, 255, 255, 0)"></stop><!--[--><!--]--></radialGradient><radialGradient cx="50%" cy="50%" r="0" gradientUnits="userSpaceOnUse" spreadMethod="pad" id="clickG_3184c332e82983b7d2da796404bf6650" gradientTransform="matrix(1 0 0 1 0.000 0.000)"><stop offset="0" stop-color="rgba(255, 255, 255, 0)"></stop><stop offset="0.33" stop-color="rgba(121, 119, 117, 0.3)"></stop><stop offset="0.66" stop-color="rgba(255, 255, 255, 0)"></stop><stop offset="1" stop-color="rgba(255, 255, 255, 0)"></stop></radialGradient></defs><rect x="0.5" y="0.5" rx="3" ry="3" style="box-sizing:border-box;width:-1px;height:-1px;stroke:url(#borderG_3184c332e82983b7d2da796404bf6650);fill:transparent;stroke-width:1;"></rect><rect style="display:none;stroke:transparent;box-sizing:border-box;width:-1px;height:-1px;fill:transparent;stroke-width:1;" x="0.5" y="0.5" rx="3" ry="3"></rect></svg></div><div class="search-box-wrapper-container" style="border-bottom-color:;background:;border-radius:3px;border-width:1px;"><i style="display:none;" class="ms-Icon-- ms-Icon icon-block"></i><div style="display:none;" class="search-box-placeholder"><!--[--><!--]--></div><div class="search-box-container"><input value="" type="text" placeholder="Search" class="input" maxlength="" style="font-size:13.3px;font-weight:normal;color:;text-align:left;"></div><i style="display:none;" class="ms-Icon ms-Icon--Cancel icon-block"></i><i style="" class="ms-Icon--Search ms-Icon icon-block"></i></div><div style="display:none;" class="search-result-container"><!--[--><div class="fv-ListView global" style="width:100%;height:auto;"><div class="list-view-header"><!--[--><!--]--></div><div class="list-view-container"><!--[--><!--]--></div><div class="list-view-footer"><!--[--><!--]--></div><!----></div><!--]--></div></div><ol start="2"><li>Dark</li></ol><div style="width:100%;padding:25px;background:black;"><div class="fv-SearchBox dark underline" style="background:;border-radius:3px;"><div class="fv-RevealContainer light fv-search-box-reveal-container" style="border-radius:3px;"><svg style="display:none;" width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> &gt; <defs><radialGradient cx="50%" cy="50%" r="120" gradientUnits="userSpaceOnUse" spreadMethod="pad" id="backgroundG_d2423245d2587c8b50eb74f586036458" gradientTransform="matrix(1 0 0 1 0.000 0.000)"><stop offset="0" stop-color="rgba(255, 255, 255, 0.3)"></stop><stop offset="1" stop-color="rgba(255, 255, 255, 0)"></stop><!--[--><!--]--></radialGradient><radialGradient cx="50%" cy="50%" r="60" gradientUnits="userSpaceOnUse" spreadMethod="pad" id="borderG_d2423245d2587c8b50eb74f586036458" gradientTransform="matrix(1 0 0 1 0.000 0.000)"><stop offset="0" stop-color="rgba(255, 255, 255, 0.6)"></stop><stop offset="1" stop-color="rgba(255, 255, 255, 0)"></stop><!--[--><!--]--></radialGradient><radialGradient cx="50%" cy="50%" r="0" gradientUnits="userSpaceOnUse" spreadMethod="pad" id="clickG_d2423245d2587c8b50eb74f586036458" gradientTransform="matrix(1 0 0 1 0.000 0.000)"><stop offset="0" stop-color="rgba(255, 255, 255, 0)"></stop><stop offset="0.33" stop-color="rgba(255, 255, 255, 0.3)"></stop><stop offset="0.66" stop-color="rgba(255, 255, 255, 0)"></stop><stop offset="1" stop-color="rgba(255, 255, 255, 0)"></stop></radialGradient></defs><rect x="0.5" y="0.5" rx="3" ry="3" style="box-sizing:border-box;width:-1px;height:-1px;stroke:url(#borderG_d2423245d2587c8b50eb74f586036458);fill:transparent;stroke-width:1;"></rect><rect style="display:none;stroke:transparent;box-sizing:border-box;width:-1px;height:-1px;fill:transparent;stroke-width:1;" x="0.5" y="0.5" rx="3" ry="3"></rect></svg></div><div class="search-box-wrapper-container" style="border-bottom-color:;background:;border-radius:3px;border-width:1px;"><i style="display:none;" class="ms-Icon-- ms-Icon icon-block"></i><div style="display:none;" class="search-box-placeholder"><!--[--><!--]--></div><div class="search-box-container"><input value="" type="text" placeholder="Search" class="input" maxlength="" style="font-size:13.3px;font-weight:normal;color:;text-align:left;"></div><i style="display:none;" class="ms-Icon ms-Icon--Cancel icon-block"></i><i style="" class="ms-Icon--Search ms-Icon icon-block"></i></div><div style="display:none;" class="search-result-container"><!--[--><div class="fv-ListView dark" style="width:100%;height:auto;"><div class="list-view-header"><!--[--><!--]--></div><div class="list-view-container"><!--[--><!--]--></div><div class="list-view-footer"><!--[--><!--]--></div><!----></div><!--]--></div></div></div><ol start="3"><li>Underline with Reveal</li></ol><div class="fv-SearchBox light underline" style="background:;border-radius:3px;"><div class="fv-RevealContainer light fv-search-box-reveal-container" style="border-radius:3px;"><svg style="display:none;" width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> &gt; <defs><radialGradient cx="50%" cy="50%" r="120" gradientUnits="userSpaceOnUse" spreadMethod="pad" id="backgroundG_a332d918b96f5580f8651cf04836d7d8" gradientTransform="matrix(1 0 0 1 0.000 0.000)"><stop offset="0" stop-color="rgba(121, 119, 117, 0.3)"></stop><stop offset="1" stop-color="rgba(255, 255, 255, 0)"></stop><!--[--><!--]--></radialGradient><radialGradient cx="50%" cy="50%" r="60" gradientUnits="userSpaceOnUse" spreadMethod="pad" id="borderG_a332d918b96f5580f8651cf04836d7d8" gradientTransform="matrix(1 0 0 1 0.000 0.000)"><stop offset="0" stop-color="rgba(121, 119, 117, 0.6)"></stop><stop offset="1" stop-color="rgba(255, 255, 255, 0)"></stop><!--[--><!--]--></radialGradient><radialGradient cx="50%" cy="50%" r="0" gradientUnits="userSpaceOnUse" spreadMethod="pad" id="clickG_a332d918b96f5580f8651cf04836d7d8" gradientTransform="matrix(1 0 0 1 0.000 0.000)"><stop offset="0" stop-color="rgba(255, 255, 255, 0)"></stop><stop offset="0.33" stop-color="rgba(121, 119, 117, 0.3)"></stop><stop offset="0.66" stop-color="rgba(255, 255, 255, 0)"></stop><stop offset="1" stop-color="rgba(255, 255, 255, 0)"></stop></radialGradient></defs><rect x="0.5" y="0.5" rx="3" ry="3" style="box-sizing:border-box;width:-1px;height:-1px;stroke:url(#borderG_a332d918b96f5580f8651cf04836d7d8);fill:transparent;stroke-width:1;"></rect><rect style="display:none;stroke:transparent;box-sizing:border-box;width:-1px;height:-1px;fill:transparent;stroke-width:1;" x="0.5" y="0.5" rx="3" ry="3"></rect></svg></div><div class="search-box-wrapper-container" style="border-bottom-color:;background:;border-radius:3px;border-width:1px;"><i style="display:none;" class="ms-Icon-- ms-Icon icon-block"></i><div style="display:none;" class="search-box-placeholder"><!--[--><!--]--></div><div class="search-box-container"><input value="" type="text" placeholder="Search" class="input" maxlength="" style="font-size:13.3px;font-weight:normal;color:;text-align:left;"></div><i style="display:none;" class="ms-Icon ms-Icon--Cancel icon-block"></i><i style="" class="ms-Icon--Search ms-Icon icon-block"></i></div><div style="display:none;" class="search-result-container"><!--[--><div class="fv-ListView global" style="width:100%;height:auto;"><div class="list-view-header"><!--[--><!--]--></div><div class="list-view-container"><!--[--><!--]--></div><div class="list-view-footer"><!--[--><!--]--></div><!----></div><!--]--></div></div><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">1. Light</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-SearchBox</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> icon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Search&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Search&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">options</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">items</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> underline</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-SearchBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">2. Dark</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-SearchBox</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> icon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Search&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Search&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;dark&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">options</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">items</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> underline</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-SearchBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">3. Underline with Reveal</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-SearchBox</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> icon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Search&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Search&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">options</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">items</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">revealBorder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> underline</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-SearchBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><h3 id="searchbox-dark-theme" tabindex="-1">SearchBox-Dark Theme <a class="header-anchor" href="#searchbox-dark-theme" aria-label="Permalink to &quot;SearchBox-Dark Theme&quot;">​</a></h3><hr><ol><li>Original Template</li></ol><div style="width:100%;padding:25px;background:black;"><div class="fv-SearchBox dark" style="background:;border-radius:3px;"><div class="fv-RevealContainer light fv-search-box-reveal-container" style="border-radius:3px;"><svg style="display:none;" width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> &gt; <defs><radialGradient cx="50%" cy="50%" r="120" gradientUnits="userSpaceOnUse" spreadMethod="pad" id="backgroundG_378aa2b0879814d6ab33028cce28b375" gradientTransform="matrix(1 0 0 1 0.000 0.000)"><stop offset="0" stop-color="rgba(255, 255, 255, 0.3)"></stop><stop offset="1" stop-color="rgba(255, 255, 255, 0)"></stop><!--[--><!--]--></radialGradient><radialGradient cx="50%" cy="50%" r="60" gradientUnits="userSpaceOnUse" spreadMethod="pad" id="borderG_378aa2b0879814d6ab33028cce28b375" gradientTransform="matrix(1 0 0 1 0.000 0.000)"><stop offset="0" stop-color="rgba(255, 255, 255, 0.6)"></stop><stop offset="1" stop-color="rgba(255, 255, 255, 0)"></stop><!--[--><!--]--></radialGradient><radialGradient cx="50%" cy="50%" r="0" gradientUnits="userSpaceOnUse" spreadMethod="pad" id="clickG_378aa2b0879814d6ab33028cce28b375" gradientTransform="matrix(1 0 0 1 0.000 0.000)"><stop offset="0" stop-color="rgba(255, 255, 255, 0)"></stop><stop offset="0.33" stop-color="rgba(255, 255, 255, 0.3)"></stop><stop offset="0.66" stop-color="rgba(255, 255, 255, 0)"></stop><stop offset="1" stop-color="rgba(255, 255, 255, 0)"></stop></radialGradient></defs><rect x="0.5" y="0.5" rx="3" ry="3" style="box-sizing:border-box;width:-1px;height:-1px;stroke:url(#borderG_378aa2b0879814d6ab33028cce28b375);fill:transparent;stroke-width:1;"></rect><rect style="display:none;stroke:transparent;box-sizing:border-box;width:-1px;height:-1px;fill:transparent;stroke-width:1;" x="0.5" y="0.5" rx="3" ry="3"></rect></svg></div><div class="search-box-wrapper-container" style="border-color:;background:;border-radius:3px;border-width:1px;"><i style="display:none;" class="ms-Icon-- ms-Icon icon-block"></i><div style="display:none;" class="search-box-placeholder"><!--[--><!--]--></div><div class="search-box-container"><input value="" type="text" placeholder="Search" class="input" maxlength="" style="font-size:13.3px;font-weight:normal;color:;text-align:left;"></div><i style="display:none;" class="ms-Icon ms-Icon--Cancel icon-block"></i><i style="" class="ms-Icon--Search ms-Icon icon-block"></i></div><div style="display:none;" class="search-result-container"><!--[--><div class="fv-ListView dark" style="width:100%;height:auto;"><div class="list-view-header"><!--[--><!--]--></div><div class="list-view-container"><!--[--><!--]--></div><div class="list-view-footer"><!--[--><!--]--></div><!----></div><!--]--></div></div></div><ol start="2"><li>Custom Template</li></ol><div style="width:100%;padding:25px;background:black;"><div class="fv-SearchBox dark" style="background:;border-radius:3px;"><div class="fv-RevealContainer light fv-search-box-reveal-container" style="border-radius:3px;"><svg style="display:none;" width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> &gt; <defs><radialGradient cx="50%" cy="50%" r="120" gradientUnits="userSpaceOnUse" spreadMethod="pad" id="backgroundG_28782d19078aa643f7f7593199f3a5d1" gradientTransform="matrix(1 0 0 1 0.000 0.000)"><stop offset="0" stop-color="rgba(255, 255, 255, 0.3)"></stop><stop offset="1" stop-color="rgba(255, 255, 255, 0)"></stop><!--[--><!--]--></radialGradient><radialGradient cx="50%" cy="50%" r="60" gradientUnits="userSpaceOnUse" spreadMethod="pad" id="borderG_28782d19078aa643f7f7593199f3a5d1" gradientTransform="matrix(1 0 0 1 0.000 0.000)"><stop offset="0" stop-color="rgba(255, 255, 255, 0.6)"></stop><stop offset="1" stop-color="rgba(255, 255, 255, 0)"></stop><!--[--><!--]--></radialGradient><radialGradient cx="50%" cy="50%" r="0" gradientUnits="userSpaceOnUse" spreadMethod="pad" id="clickG_28782d19078aa643f7f7593199f3a5d1" gradientTransform="matrix(1 0 0 1 0.000 0.000)"><stop offset="0" stop-color="rgba(255, 255, 255, 0)"></stop><stop offset="0.33" stop-color="rgba(255, 255, 255, 0.3)"></stop><stop offset="0.66" stop-color="rgba(255, 255, 255, 0)"></stop><stop offset="1" stop-color="rgba(255, 255, 255, 0)"></stop></radialGradient></defs><rect x="0.5" y="0.5" rx="3" ry="3" style="box-sizing:border-box;width:-1px;height:-1px;stroke:url(#borderG_28782d19078aa643f7f7593199f3a5d1);fill:transparent;stroke-width:1;"></rect><rect style="display:none;stroke:transparent;box-sizing:border-box;width:-1px;height:-1px;fill:transparent;stroke-width:1;" x="0.5" y="0.5" rx="3" ry="3"></rect></svg></div><div class="search-box-wrapper-container" style="border-color:;background:;border-radius:3px;border-width:1px;"><i style="display:none;" class="ms-Icon-- ms-Icon icon-block"></i><div style="display:none;" class="search-box-placeholder"><!--[--><!--]--></div><div class="search-box-container"><input value="" type="text" placeholder="Search" class="input" maxlength="" style="font-size:13.3px;font-weight:normal;color:;text-align:left;"></div><i style="display:none;" class="ms-Icon ms-Icon--Cancel icon-block"></i><i style="" class="ms-Icon--Search ms-Icon icon-block"></i></div><div style="display:none;" class="search-result-container"><!--[--><div style="position:relative;width:100%;height:auto;display:flex;flex-direction:column;"><span class="list-item list-title">人物</span><div style="position:relative;width:100%;height:60px;display:flex;"><!--[--><div class="fv-Img light" style="width:50px;height:50px;margin:5px;border-radius:50%;"><div class="fv-ImgBox light" style="background:;width:100%;height:100%;"><div style="" class="fv-img-box-content"><div class="fv-ProgressRing light" style="width:4px;height:4px;display:none;" value="0"><svg style="" width="4px" height="4px" class="svg"><circle r="0" cy="2" cx="2" stroke-width="2" stroke="transparent" stroke-linejoin="round" stroke-linecap="round" fill="none"></circle><circle class="progress-rotate" r="0" cy="2" cx="2" stroke-width="2" stroke="rgba(36, 36, 36, 1)" stroke-linejoin="round" stroke-linecap="round" fill="none" stroke-dashoffset="0px" stroke-dasharray="0.00px" style="transform:rotate(-90deg);"></circle></svg><div class="fv-progressRing-legacy xs" style="display:none;"><!--[--><p style="background:;"></p><p style="background:;"></p><p style="background:;"></p><p style="background:;"></p><p style="background:;"></p><!--]--></div></div></div><!----></div><!----></div><div class="fv-Img light" style="width:50px;height:50px;margin:5px;border-radius:50%;"><div class="fv-ImgBox light" style="background:;width:100%;height:100%;"><div style="" class="fv-img-box-content"><div class="fv-ProgressRing light" style="width:4px;height:4px;display:none;" value="0"><svg style="" width="4px" height="4px" class="svg"><circle r="0" cy="2" cx="2" stroke-width="2" stroke="transparent" stroke-linejoin="round" stroke-linecap="round" fill="none"></circle><circle class="progress-rotate" r="0" cy="2" cx="2" stroke-width="2" stroke="rgba(36, 36, 36, 1)" stroke-linejoin="round" stroke-linecap="round" fill="none" stroke-dashoffset="0px" stroke-dasharray="0.00px" style="transform:rotate(-90deg);"></circle></svg><div class="fv-progressRing-legacy xs" style="display:none;"><!--[--><p style="background:;"></p><p style="background:;"></p><p style="background:;"></p><p style="background:;"></p><p style="background:;"></p><!--]--></div></div></div><!----></div><!----></div><div class="fv-Img light" style="width:50px;height:50px;margin:5px;border-radius:50%;"><div class="fv-ImgBox light" style="background:;width:100%;height:100%;"><div style="" class="fv-img-box-content"><div class="fv-ProgressRing light" style="width:4px;height:4px;display:none;" value="0"><svg style="" width="4px" height="4px" class="svg"><circle r="0" cy="2" cx="2" stroke-width="2" stroke="transparent" stroke-linejoin="round" stroke-linecap="round" fill="none"></circle><circle class="progress-rotate" r="0" cy="2" cx="2" stroke-width="2" stroke="rgba(36, 36, 36, 1)" stroke-linejoin="round" stroke-linecap="round" fill="none" stroke-dashoffset="0px" stroke-dasharray="0.00px" style="transform:rotate(-90deg);"></circle></svg><div class="fv-progressRing-legacy xs" style="display:none;"><!--[--><p style="background:;"></p><p style="background:;"></p><p style="background:;"></p><p style="background:;"></p><p style="background:;"></p><!--]--></div></div></div><!----></div><!----></div><!--]--></div><span class="list-item list-title">位置</span><span><!--[--><p class="list-item">Beijing</p><p class="list-item">Shanghai</p><p class="list-item">Shenzhen</p><!--]--></span><span class="list-item list-title">职业</span><span><!--[--><p class="list-item">IT</p><p class="list-item">Doctor</p><p class="list-item">Artist</p><!--]--></span></div><!--]--></div></div></div><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">1. Original Template</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">padding</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">25</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">black</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;fv-SearchBox icon=&quot;Search&quot; placeholder=&quot;Search&quot; theme=&quot;dark&quot; :options=&quot;items&quot;&gt;&lt;/fv-SearchBox&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><ol start="2"><li>Custom Template</li></ol><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">padding</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">25</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">black</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;fv-SearchBox v-model=&quot;value&quot; icon=&quot;Search&quot; placeholder=&quot;Search&quot; theme=&quot;dark&quot; :options=&quot;custom_items&quot; :focusShow=&quot;true&quot; :customFilter=&quot;customFilterFunc&quot; :resultPlaceholder.sync=&quot;resultPlaceholder&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;template v-slot:resultPlaceholder=&quot;x&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            &lt;fv-img v-for=&quot;(item, index) in resultPlaceholder&quot; :key=&quot;index&quot; :src=&quot;item&quot; style=&quot;width: 25px; height: 25px; margin: 0px 3px; border-radius: 50%;&quot;/&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;template v-slot:searchResult=&quot;x&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            &lt;div style=&quot;position: relative; width: 100%; height: auto; display: flex; flex-direction: column;&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                &lt;span class=&quot;list-item list-title&quot;&gt;人物&lt;/span&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                &lt;div style=&quot;position: relative; width: 100%; height: 60px; display: flex;&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                    &lt;fv-img v-for=&quot;(item, index) in x.data.people&quot; :key=&quot;index&quot; :src=&quot;item&quot; style=&quot;width: 50px; height: 50px; margin: 5px; border-radius: 50%;&quot; @click.native=&quot;resultPlaceholder.push(item)&quot;/&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;list-item list-title&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;位置&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                    &lt;p v-for=&quot;(item, index) in x.data.pos&quot; class=&quot;list-item&quot; :key=&quot;index&quot;&gt;{{item}}&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;list-item list-title&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;职业&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                    &lt;p v-for=&quot;(item, index) in x.data.pro&quot; class=&quot;list-item&quot; :key=&quot;index&quot;&gt;{{item}}&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/fv-SearchBox&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br></div></div><h3 id="textbox-customize" tabindex="-1">TextBox-Customize <a class="header-anchor" href="#textbox-customize" aria-label="Permalink to &quot;TextBox-Customize&quot;">​</a></h3><hr><p>Customize border color</p><div style="width:100%;padding:25px;background:black;"><div class="fv-SearchBox dark" style="background:;border-radius:3px;"><div class="fv-RevealContainer light fv-search-box-reveal-container" style="border-radius:3px;"><svg style="display:none;" width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> &gt; <defs><radialGradient cx="50%" cy="50%" r="120" gradientUnits="userSpaceOnUse" spreadMethod="pad" id="backgroundG_7a6ef4fadaf5070bf8d7d007d2c5981b" gradientTransform="matrix(1 0 0 1 0.000 0.000)"><stop offset="0" stop-color="rgba(255, 255, 255, 0.3)"></stop><stop offset="1" stop-color="rgba(255, 255, 255, 0)"></stop><!--[--><!--]--></radialGradient><radialGradient cx="50%" cy="50%" r="60" gradientUnits="userSpaceOnUse" spreadMethod="pad" id="borderG_7a6ef4fadaf5070bf8d7d007d2c5981b" gradientTransform="matrix(1 0 0 1 0.000 0.000)"><stop offset="0" stop-color="rgba(255, 255, 255, 0.6)"></stop><stop offset="1" stop-color="rgba(255, 255, 255, 0)"></stop><!--[--><!--]--></radialGradient><radialGradient cx="50%" cy="50%" r="0" gradientUnits="userSpaceOnUse" spreadMethod="pad" id="clickG_7a6ef4fadaf5070bf8d7d007d2c5981b" gradientTransform="matrix(1 0 0 1 0.000 0.000)"><stop offset="0" stop-color="rgba(255, 255, 255, 0)"></stop><stop offset="0.33" stop-color="rgba(255, 255, 255, 0.3)"></stop><stop offset="0.66" stop-color="rgba(255, 255, 255, 0)"></stop><stop offset="1" stop-color="rgba(255, 255, 255, 0)"></stop></radialGradient></defs><rect x="0.5" y="0.5" rx="3" ry="3" style="box-sizing:border-box;width:-1px;height:-1px;stroke:url(#borderG_7a6ef4fadaf5070bf8d7d007d2c5981b);fill:transparent;stroke-width:1;"></rect><rect style="display:none;stroke:transparent;box-sizing:border-box;width:-1px;height:-1px;fill:transparent;stroke-width:1;" x="0.5" y="0.5" rx="3" ry="3"></rect></svg></div><div class="search-box-wrapper-container" style="border-color:rgba(0,153,204,1);background:;border-radius:3px;border-width:1px;"><i style="display:none;" class="ms-Icon-- ms-Icon icon-block"></i><div style="display:none;" class="search-box-placeholder"><!--[--><!--]--></div><div class="search-box-container"><input value="" type="text" placeholder="Search" class="input" maxlength="" style="font-size:13.3px;font-weight:normal;color:;text-align:left;"></div><i style="display:none;" class="ms-Icon ms-Icon--Cancel icon-block"></i><i style="" class="ms-Icon--Search ms-Icon icon-block"></i></div><div style="display:none;" class="search-result-container"><!--[--><div class="fv-ListView dark" style="width:100%;height:auto;"><div class="list-view-header"><!--[--><!--]--></div><div class="list-view-container"><!--[--><!--]--></div><div class="list-view-footer"><!--[--><!--]--></div><!----></div><!--]--></div></div></div><p>Customize background</p><div style="width:100%;padding:25px;background:black;"><div class="fv-SearchBox dark" style="background:rgba(0,153,204,1);border-radius:3px;"><div class="fv-RevealContainer light fv-search-box-reveal-container" style="border-radius:3px;"><svg style="display:none;" width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> &gt; <defs><radialGradient cx="50%" cy="50%" r="120" gradientUnits="userSpaceOnUse" spreadMethod="pad" id="backgroundG_718971dde98b7167a9ecf952255cf653" gradientTransform="matrix(1 0 0 1 0.000 0.000)"><stop offset="0" stop-color="rgba(255, 255, 255, 0.3)"></stop><stop offset="1" stop-color="rgba(255, 255, 255, 0)"></stop><!--[--><!--]--></radialGradient><radialGradient cx="50%" cy="50%" r="60" gradientUnits="userSpaceOnUse" spreadMethod="pad" id="borderG_718971dde98b7167a9ecf952255cf653" gradientTransform="matrix(1 0 0 1 0.000 0.000)"><stop offset="0" stop-color="rgba(255, 255, 255, 0.6)"></stop><stop offset="1" stop-color="rgba(255, 255, 255, 0)"></stop><!--[--><!--]--></radialGradient><radialGradient cx="50%" cy="50%" r="0" gradientUnits="userSpaceOnUse" spreadMethod="pad" id="clickG_718971dde98b7167a9ecf952255cf653" gradientTransform="matrix(1 0 0 1 0.000 0.000)"><stop offset="0" stop-color="rgba(255, 255, 255, 0)"></stop><stop offset="0.33" stop-color="rgba(255, 255, 255, 0.3)"></stop><stop offset="0.66" stop-color="rgba(255, 255, 255, 0)"></stop><stop offset="1" stop-color="rgba(255, 255, 255, 0)"></stop></radialGradient></defs><rect x="0.5" y="0.5" rx="3" ry="3" style="box-sizing:border-box;width:-1px;height:-1px;stroke:url(#borderG_718971dde98b7167a9ecf952255cf653);fill:transparent;stroke-width:1;"></rect><rect style="display:none;stroke:transparent;box-sizing:border-box;width:-1px;height:-1px;fill:transparent;stroke-width:1;" x="0.5" y="0.5" rx="3" ry="3"></rect></svg></div><div class="search-box-wrapper-container" style="border-color:rgba(0,153,204,1);background:rgba(0,153,204,1);border-radius:3px;border-width:1px;"><i style="display:none;" class="ms-Icon-- ms-Icon icon-block"></i><div style="display:none;" class="search-box-placeholder"><!--[--><!--]--></div><div class="search-box-container"><input value="" type="text" placeholder="Search" class="input" maxlength="" style="font-size:13.3px;font-weight:normal;color:;text-align:left;"></div><i style="display:none;" class="ms-Icon ms-Icon--Cancel icon-block"></i><i style="" class="ms-Icon--Search ms-Icon icon-block"></i></div><div style="display:none;" class="search-result-container"><!--[--><div class="fv-ListView dark" style="width:100%;height:auto;"><div class="list-view-header"><!--[--><!--]--></div><div class="list-view-container"><!--[--><!--]--></div><div class="list-view-footer"><!--[--><!--]--></div><!----></div><!--]--></div></div></div><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">Customize border color</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">padding</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">25</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">black</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;fv-SearchBox icon=&quot;Search&quot; placeholder=&quot;Search&quot; theme=&quot;dark&quot; :options=&quot;items&quot; borderColor=&quot;rgba(0,153,204,1)&quot; focusBorderColor=&quot;rgba(0,204,153,1)&quot;&gt;&lt;/fv-SearchBox&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">Customize background</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">padding</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">25</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">black</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;fv-SearchBox icon=&quot;Search&quot; placeholder=&quot;Search&quot; theme=&quot;dark&quot; :options=&quot;items&quot; background=&quot;rgba(0,153,204,1)&quot; borderColor=&quot;rgba(0,153,204,1)&quot;&gt;&lt;/fv-SearchBox&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">value</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;"></td><td style="text-align:center;">Using v-model binding input value</td></tr><tr><td style="text-align:center;">options</td><td style="text-align:center;">[array or object]</td><td style="text-align:center;">Yes</td><td style="text-align:center;">N/A</td><td style="text-align:center;">SearchBox搜索候选数据</td></tr><tr><td style="text-align:center;">placeholder</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">等同HTML[input]</td></tr><tr><td style="text-align:center;">type</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">text</td><td style="text-align:center;">等同HTML[input]</td></tr><tr><td style="text-align:center;">readonly</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">等同HTML[input]</td></tr><tr><td style="text-align:center;">maxlength</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">等同HTML[input]</td></tr><tr><td style="text-align:center;">customFilter</td><td style="text-align:center;">[object(function)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">客制化搜索筛选函数</td></tr><tr><td style="text-align:center;">resultPlaceholder</td><td style="text-align:center;">Array</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">结果占位数据, 显示在SearchBox左端</td></tr><tr><td style="text-align:center;">focusShow</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否开启获取焦点时显示结果框</td></tr><tr><td style="text-align:center;">leftIcon</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">左图标</td></tr><tr><td style="text-align:center;">icon</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">右图标</td></tr><tr><td style="text-align:center;">underline</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否开启Underline风格的SearchBox</td></tr><tr><td style="text-align:center;">background</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">背景色</td></tr><tr><td style="text-align:center;">borderWidth</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">1</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">borderColor</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">focusBorderColor</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">fontSize</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">13.3</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">fontWeight</td><td style="text-align:center;">[string,number]</td><td style="text-align:center;">No</td><td style="text-align:center;">normal</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">foreground</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">textAlign</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">left</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">borderRadius</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">Textbox圆角大小, 启用revealBorder时将失效</td></tr><tr><td style="text-align:center;">revealBorder</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">status</td><td style="text-align:center;">[&#39;warn&#39;,&#39;correct&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">状态边框预设, 默认有警告和正确两种</td></tr><tr><td style="text-align:center;">debounceDelay</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">300</td><td style="text-align:center;">搜索节流延迟时间</td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">system</td><td style="text-align:center;">主题样式, 包含<code>light</code>, <code>dark</code>, <code>system</code>, <code>custom</code>几种样式</td></tr></tbody></table><h3 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to &quot;Events&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">事件名(Name)</th><th style="text-align:center;">参数类型(args)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">keydown</td><td style="text-align:center;">event</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">keyup</td><td style="text-align:center;">event</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">change</td><td style="text-align:center;">event</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">paste</td><td style="text-align:center;">event</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">left-icon-click</td><td style="text-align:center;">event</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">icon-click</td><td style="text-align:center;">event</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">lazyload</td><td style="text-align:center;">array</td><td style="text-align:center;">搜索结果框滚动加载事件, 滑动到最底部时触发, 返回当前搜索筛选数据</td></tr><tr><td style="text-align:center;">update:resultPlaceholder</td><td style="text-align:center;">array</td><td style="text-align:center;">更新搜索占位数组, 在清除搜索框时触发清除搜索占位数组, 再按下退格键时若文本为空, 清除最后一个搜索占位数据项</td></tr><tr><td style="text-align:center;">clear-click</td><td style="text-align:center;">array</td><td style="text-align:center;">清除搜索框文本时触发</td></tr><tr><td style="text-align:center;">choose-result</td><td style="text-align:center;">object</td><td style="text-align:center;">搜索结果框选中项目后返回当前项</td></tr><tr><td style="text-align:center;">debounce-input</td><td style="text-align:center;">string</td><td style="text-align:center;">搜索节流内容反馈</td></tr></tbody></table><h3 id="slot" tabindex="-1">Slot <a class="header-anchor" href="#slot" aria-label="Permalink to &quot;Slot&quot;">​</a></h3><hr><ol><li>SearchResult</li></ol><p>默认情况下用户可直接在<code>options</code>中定义<code>name</code>来应用默认样式, 不需要修改此模板, 可缺省 用户自定义样式时, 包含以下可选属性</p><ul><li>data: 传入的<code>filterOptions</code></li><li>chooseResult: 用于回调的选择出发函数, 需要传入一个对象, 包含<code>item</code>和<code>item.name</code>属性</li></ul><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">searchResult</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-list-view</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x.data</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">theme</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">auto</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> @</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">chooseItem</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x.chooseResult</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-list-view</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ol start="2"><li>ResultPlaceholder</li></ol><p>用户根据自己的需要在搜索框选择结果后将值显示在<code>SearchBox</code>左侧显示相应数据, 数据模板即为<code>ResultPlaceholder</code></p><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">resultPlaceholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="data" tabindex="-1">Data <a class="header-anchor" href="#data" aria-label="Permalink to &quot;Data&quot;">​</a></h3><hr><ol><li>options</li></ol><p>数据格式参考<code>ListView</code>中<code>items</code>的形式, 其中<code>key</code>字段建议开发者在有重复名称和类型字段时声明用来区别项目</p><div class="language-javascript vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">options </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [{key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, disabled: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}]</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">//e.g.//</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">options</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: [</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;fruitsHeader&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Fruits&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;header&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;apple&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Apple&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;banana&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Banana&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;orange&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Orange&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, disabled: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;grape&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Grape&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;divider_1&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;divider&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;vegetablesHeader&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Vegetables&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;header&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;broccoli&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Broccoli&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;carrot&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Carrot&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;lettuce&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Lettuce&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-09de1c0f><!--[--><!--]--><!----><nav class="prev-next" data-v-09de1c0f><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link prev" href="/VFluent3/guide/components/shimmer/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Previous page</span><span class="title" data-v-09de1c0f>Shimmer</span><!--]--></a></div><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link next" href="/VFluent3/guide/components/text-box/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Next page</span><span class="title" data-v-09de1c0f>TextBox</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>MIT Licensed</p><p class="copyright" data-v-e315a0ad>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_calendar-date-picker_properties.md\":\"DXRjmMG8\",\"guide_components_image_properties.md\":\"DGanRzCb\",\"guide_components_img-box_index.md\":\"DYtggkf_\",\"guide_components_img_emits.md\":\"BlE7jvZQ\",\"guide_components_img_index.md\":\"Bm9FiuU4\",\"guide_components_icon-element_properties.md\":\"8Oakruwc\",\"guide_components_img_properties.md\":\"B42YSocI\",\"guide_components_drawer_index.md\":\"D_vpnCpE\",\"guide_components_verify-box_emits.md\":\"DT17Iazx\",\"guide_components_calendar-date-picker_index.md\":\"BdHjrurh\",\"guide_components_rating-control_index.md\":\"Q9l5Lfrr\",\"guide_components_rating-control_properties.md\":\"DKprnl0i\",\"guide_components_calendar-view_index.md\":\"zdoRYVx1\",\"guide_components_animated-icon_index.md\":\"yZDMzCFe\",\"guide_components_calendar-date-picker_emits.md\":\"D5OkfR8j\",\"guide_components_badge_index.md\":\"Bb4crrJn\",\"guide_components_image_index.md\":\"B7X6cWAZ\",\"guide_components_slider_index.md\":\"C7zZ2d-W\",\"guide_components_radio-group_index.md\":\"CVfh3h5H\",\"guide_components_swipe-control_index.md\":\"DwrDVPc1\",\"guide_components_color-picker_emits.md\":\"BHDXVtBQ\",\"guide_components_radio_index.md\":\"90as5QGp\",\"guide_components_pagination_properties.md\":\"JUAPvcTL\",\"guide_components_persona_properties.md\":\"DUTPhPMp\",\"guide_components_combo-box_emits.md\":\"Dh5R-qEv\",\"guide_components_pivot_emits.md\":\"BTJPgNpy\",\"guide_components_pagination_index.md\":\"CnW2zAht\",\"guide_components_flip-view_properties.md\":\"BqZ4hhgU\",\"guide_components_icon-element_emits.md\":\"D5TXFdTZ\",\"guide_components_flip-view_index.md\":\"DefnDOv6\",\"guide_components_navigation-panel_index.md\":\"6mO__sSK\",\"guide_components_rating-control_emits.md\":\"blvomSeC\",\"guide_components_icon-element_index.md\":\"DQ8K7JNn\",\"guide_components_navigation-view_index.md\":\"4AQRiz1k\",\"guide_components_toggle-switch_emits.md\":\"CLGzrNut\",\"guide_components_toggle-switch_index.md\":\"61en_q9-\",\"guide_components_scroll-story_index.md\":\"Vpgb1HSV\",\"guide_components_reveal-container_index.md\":\"Cut2r4tV\",\"guide_components_search-box_emits.md\":\"-d9sWNNt\",\"guide_components_search-box_properties.md\":\"DEKFfPFw\",\"guide_components_shimmer_emits.md\":\"CTMInlI3\",\"guide_components_tag_index.md\":\"BhhxkcHn\",\"guide_components_search-box_index.md\":\"DgkrY0oY\",\"guide_components_shimmer_index.md\":\"iZlHuTxw\",\"guide_components_shimmer_properties.md\":\"CdkU1o6H\",\"guide_components_tree-view_index.md\":\"CUrwan4q\",\"guide_components_text-field_index.md\":\"CXSimJtj\",\"guide_components_text-box_index.md\":\"C5moAPfB\",\"guide_components_progress-ring_properties.md\":\"Dc08Uiff\",\"guide_components_toggle-switch_properties.md\":\"tFppK_IS\",\"guide_components_radio-group_emits.md\":\"cEDzKVnN\",\"guide_components_collapse_index.md\":\"N9Iu5-2v\",\"guide_components_image_emits.md\":\"lmlz2xJd\",\"guide_components_callout_index.md\":\"D9RU33w6\",\"guide_components_pivot_index.md\":\"B_vwQL-5\",\"guide_components_command-bar_index.md\":\"Cp4_rrGB\",\"guide_components_pagination_emits.md\":\"Dng86A22\",\"guide_components_button_index.md\":\"7sqT2MQP\",\"guide_components_info-box_properties.md\":\"BI7Nvk-E\",\"guide_components_drop-down_emits.md\":\"BE95TdKW\",\"guide_components_expander_index.md\":\"BKgcUJzQ\",\"guide_components_message-bar_index.md\":\"AEtAWlF8\",\"guide_components_menu-flyout_index.md\":\"Csa7irPj\",\"guide_components_panel_index.md\":\"CsTu0bXo\",\"guide_components_panel_properties.md\":\"BaxoCYKq\",\"guide_components_progress-bar_emits.md\":\"BcwXUpsF\",\"guide_components_progress-bar_properties.md\":\"TxiS9ZMA\",\"guide_components_progress-ring_emits.md\":\"D2Y6hIZ9\",\"guide_components_color-picker_index.md\":\"DCc4ixcU\",\"guide_components_progress-ring_index.md\":\"CPb-ZEPE\",\"guide_components_color-picker_properties.md\":\"wcXK29Vl\",\"guide_components_time-picker_index.md\":\"CQJdRRaG\",\"guide_components_drop-down_properties.md\":\"Bwlkpr1q\",\"guide_components_infinite-scroll-view_index.md\":\"yAuD807x\",\"guide_components_check-box_index.md\":\"FYgdu4oq\",\"guide_components_progress-bar_index.md\":\"D8vHQw5V\",\"guide_components_combo-box_index.md\":\"DTyu3eNd\",\"guide_components_info-box_emits.md\":\"DlEwpkkq\",\"guide_components_drop-down_index.md\":\"BZzJZQWq\",\"guide_components_list-view_index.md\":\"BoYvMzb0\",\"guide_components_verify-box_properties.md\":\"CW6W8fFf\",\"guide_components_verify-box_index.md\":\"DwSB40wR\",\"guide_index.md\":\"Bndlt3sL\",\"guide_components_web-window_index.md\":\"Bxc8vEeI\",\"index.md\":\"MTRqI42u\",\"guide_components_combo-box_properties.md\":\"AWfHzV6x\",\"guide_components_combobox_emits.md\":\"CGB6WLt8\",\"guide_components_combobox_properties.md\":\"Bja0hMou\",\"guide_components_details-list_index.md\":\"CcgOCIyt\",\"guide_components_info-box_index.md\":\"vXh-_DsL\",\"guide_components_combobox_index.md\":\"CsPkY6YB\",\"guide_components_date-picker_index.md\":\"12vmUIup\",\"guide_components_flip-view_emits.md\":\"DCheHjDj\",\"guide_components_panel_emits.md\":\"DG0REDq8\",\"guide_components_breadcrumb_index.md\":\"DyDm7PeP\",\"guide_components_radio-group_properties.md\":\"BnPxoKsQ\",\"guide_components_persona_emits.md\":\"CnsDPKRU\",\"guide_components_pivot_properties.md\":\"BmoLpPi1\",\"guide_components_persona_index.md\":\"DT00jby4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vfluent3\",\"description\":\"A Vue3 component library for Fluent UI\",\"base\":\"/VFluent3/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"VFluent3\",\"footer\":{\"message\":\"MIT Licensed\",\"copyright\":\"Copyright © Creator SN - 2022\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/\"}],\"sidebar\":[{\"text\":\"Basic input\",\"collapsed\":true,\"items\":[{\"text\":\"Button\",\"link\":\"/guide/components/button/\"},{\"text\":\"CheckBox\",\"link\":\"/guide/components/check-box/\"},{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"},{\"text\":\"Combobox\",\"link\":\"/guide/components/combobox/\"},{\"text\":\"DetailsList\",\"link\":\"/guide/components/details-list/\"},{\"text\":\"DropDown\",\"link\":\"/guide/components/drop-down/\"},{\"text\":\"Radio\",\"link\":\"/guide/components/radio/\"},{\"text\":\"RadioGroup\",\"link\":\"/guide/components/radio-group/\"},{\"text\":\"RatingControl\",\"link\":\"/guide/components/rating-control/\"},{\"text\":\"Slider\",\"link\":\"/guide/components/slider/\"},{\"text\":\"ToggleSwitch\",\"link\":\"/guide/components/toggle-switch/\"},{\"text\":\"Tag\",\"link\":\"/guide/components/tag/\"}]},{\"text\":\"Collections\",\"collapsed\":true,\"items\":[{\"text\":\"FlipView\",\"link\":\"/guide/components/flip-view/\"},{\"text\":\"ListView\",\"link\":\"/guide/components/list-view/\"},{\"text\":\"TreeView\",\"link\":\"/guide/components/tree-view/\"}]},{\"text\":\"Date & Time\",\"collapsed\":true,\"items\":[{\"text\":\"CalendarDatePicker\",\"link\":\"/guide/components/calendar-date-picker/\"},{\"text\":\"CalendarView\",\"link\":\"/guide/components/calendar-view/\"},{\"text\":\"DatePicker\",\"link\":\"/guide/components/date-picker/\"},{\"text\":\"TimePicker\",\"link\":\"/guide/components/time-picker/\"}]},{\"text\":\"Dialogs & flyouts\",\"collapsed\":true,\"items\":[{\"text\":\"Callout\",\"link\":\"/guide/components/callout/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Layout\",\"collapsed\":true,\"items\":[{\"text\":\"Collapse\",\"link\":\"/guide/components/collapse/\"},{\"text\":\"Expander\",\"link\":\"/guide/components/expander/\"},{\"text\":\"Drawer\",\"link\":\"/guide/components/drawer/\"},{\"text\":\"Panel\",\"link\":\"/guide/components/panel/\"}]},{\"text\":\"Media\",\"collapsed\":true,\"items\":[{\"text\":\"Image\",\"link\":\"/guide/components/image/\"},{\"text\":\"Img\",\"link\":\"/guide/components/img/\"},{\"text\":\"ImgBox\",\"link\":\"/guide/components/img-box/\"},{\"text\":\"Persona\",\"link\":\"/guide/components/persona/\"}]},{\"text\":\"Menu & toolbars\",\"collapsed\":true,\"items\":[{\"text\":\"CommandBar\",\"link\":\"/guide/components/command-bar/\"},{\"text\":\"MenuFlyout\",\"link\":\"/guide/components/menu-flyout/\"},{\"text\":\"SwipeControl\",\"link\":\"/guide/components/swipe-control/\"}]},{\"text\":\"Navigation\",\"collapsed\":true,\"items\":[{\"text\":\"Breadcrumb\",\"link\":\"/guide/components/breadcrumb/\"},{\"text\":\"NavigationPanel\",\"link\":\"/guide/components/navigation-panel/\"},{\"text\":\"NavigationView\",\"link\":\"/guide/components/navigation-view/\"},{\"text\":\"Pivot\",\"link\":\"/guide/components/pivot/\"},{\"text\":\"Pagination\",\"link\":\"/guide/components/pagination/\"}]},{\"text\":\"Scrolling\",\"collapsed\":true,\"items\":[{\"text\":\"InfiniteScrollView\",\"link\":\"/guide/components/infinite-scroll-view/\"},{\"text\":\"ScrollStory\",\"link\":\"/guide/components/scroll-story/\"}]},{\"text\":\"Status & info\",\"collapsed\":true,\"items\":[{\"text\":\"Badge\",\"link\":\"/guide/components/badge/\"},{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"ProgressBar\",\"link\":\"/guide/components/progress-bar/\"},{\"text\":\"ProgressRing\",\"link\":\"/guide/components/progress-ring/\"}]},{\"text\":\"Styles\",\"collapsed\":true,\"items\":[{\"text\":\"AnimatedIcon\",\"link\":\"/guide/components/animated-icon/\"},{\"text\":\"IconElement\",\"link\":\"/guide/components/icon-element/\"},{\"text\":\"RevealContainer\",\"link\":\"/guide/components/reveal-container/\"},{\"text\":\"Shimmer\",\"link\":\"/guide/components/shimmer/\"}]},{\"text\":\"Text\",\"collapsed\":true,\"items\":[{\"text\":\"SearchBox\",\"link\":\"/guide/components/search-box/\"},{\"text\":\"TextBox\",\"link\":\"/guide/components/text-box/\"},{\"text\":\"TextField\",\"link\":\"/guide/components/text-field/\"},{\"text\":\"VerifyBox\",\"link\":\"/guide/components/verify-box/\"}]},{\"text\":\"Windowing\",\"collapsed\":true,\"items\":[{\"text\":\"WebWindow\",\"link\":\"/guide/components/web-window/\"}]},{\"text\":\"Global\",\"collapsed\":true,\"items\":[{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Advance\",\"collapsed\":true,\"items\":[{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git a/guide/components/search-box/properties.html b/guide/components/search-box/properties.html
new file mode 100644
index 0000000..7942c02
--- /dev/null
+++ b/guide/components/search-box/properties.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>vfluent3</title>
+    <meta name="description" content="A Vue3 component library for Fluent UI">
+    <meta name="generator" content="VitePress v1.0.0-rc.45">
+    <link rel="preload stylesheet" href="/VFluent3/assets/style.BabQegKX.css" as="style">
+    
+    <script type="module" src="/VFluent3/assets/app.CSutcJ2E.js"></script>
+    <link rel="preload" href="/VFluent3/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/framework.DvIFzl91.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/theme.CgqFBnN_.js">
+    <link rel="modulepreload" href="/VFluent3/assets/guide_components_search-box_properties.md.DEKFfPFw.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-19c990f1><div class="wrapper" data-v-19c990f1><div class="container" data-v-19c990f1><div class="title" data-v-19c990f1><div class="VPNavBarTitle has-sidebar" data-v-19c990f1 data-v-ab179fa1><a class="title" href="/VFluent3/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>VFluent3</span><!--[--><!--]--></a></div></div><div class="content" data-v-19c990f1><div class="content-body" data-v-19c990f1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-19c990f1><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-19c990f1 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Guide</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-19c990f1 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-19c990f1 data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-19c990f1 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-19c990f1><div class="divider-line" data-v-19c990f1></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-d2ecc192><button data-v-d2ecc192>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-575e6a36><div class="curtain" data-v-575e6a36></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-575e6a36><span class="visually-hidden" id="sidebar-aria-label" data-v-575e6a36> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Basic input</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/button/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/check-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CheckBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/combobox/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Combobox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/details-list/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DetailsList</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drop-down/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DropDown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio-group/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RadioGroup</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/rating-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RatingControl</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/slider/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/toggle-switch/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ToggleSwitch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tag/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Tag</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Collections</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/flip-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>FlipView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/list-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ListView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tree-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TreeView</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Date & Time</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarDatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/time-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TimePicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Dialogs & flyouts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/callout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Callout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Layout</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/collapse/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Collapse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/expander/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Expander</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drawer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Panel</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Media</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/image/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Img</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ImgBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/persona/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Persona</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Menu & toolbars</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/command-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CommandBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/menu-flyout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MenuFlyout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/swipe-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SwipeControl</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Navigation</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/breadcrumb/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationPanel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pivot/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pivot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pagination/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pagination</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Scrolling</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/infinite-scroll-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfiniteScrollView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/scroll-story/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ScrollStory</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Status & info</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/badge/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-ring/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressRing</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Styles</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/animated-icon/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>AnimatedIcon</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/icon-element/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>IconElement</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/reveal-container/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RevealContainer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/shimmer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Shimmer</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Text</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/search-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SearchBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-field/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextField</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/verify-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>VerifyBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Windowing</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/web-window/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>WebWindow</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Global</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Advance</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-935f8a84><div class="content" data-v-935f8a84><div class="outline-marker" data-v-935f8a84></div><div class="outline-title" role="heading" aria-level="2" data-v-935f8a84>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-935f8a84><span class="visually-hidden" id="doc-outline-aria-label" data-v-935f8a84> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-935f8a84 data-v-b933a997><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _VFluent3_guide_components_search-box_properties" data-v-39a288b8><div><h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-label="Permalink to &quot;Properties&quot;">​</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead></table></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-09de1c0f><!--[--><!--]--><!----><nav class="prev-next" data-v-09de1c0f><div class="pager" data-v-09de1c0f><!----></div><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link next" href="/VFluent3/guide/components/button/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Next page</span><span class="title" data-v-09de1c0f>Button</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>MIT Licensed</p><p class="copyright" data-v-e315a0ad>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_calendar-date-picker_properties.md\":\"DXRjmMG8\",\"guide_components_image_properties.md\":\"DGanRzCb\",\"guide_components_img-box_index.md\":\"DYtggkf_\",\"guide_components_img_emits.md\":\"BlE7jvZQ\",\"guide_components_img_index.md\":\"Bm9FiuU4\",\"guide_components_icon-element_properties.md\":\"8Oakruwc\",\"guide_components_img_properties.md\":\"B42YSocI\",\"guide_components_drawer_index.md\":\"D_vpnCpE\",\"guide_components_verify-box_emits.md\":\"DT17Iazx\",\"guide_components_calendar-date-picker_index.md\":\"BdHjrurh\",\"guide_components_rating-control_index.md\":\"Q9l5Lfrr\",\"guide_components_rating-control_properties.md\":\"DKprnl0i\",\"guide_components_calendar-view_index.md\":\"zdoRYVx1\",\"guide_components_animated-icon_index.md\":\"yZDMzCFe\",\"guide_components_calendar-date-picker_emits.md\":\"D5OkfR8j\",\"guide_components_badge_index.md\":\"Bb4crrJn\",\"guide_components_image_index.md\":\"B7X6cWAZ\",\"guide_components_slider_index.md\":\"C7zZ2d-W\",\"guide_components_radio-group_index.md\":\"CVfh3h5H\",\"guide_components_swipe-control_index.md\":\"DwrDVPc1\",\"guide_components_color-picker_emits.md\":\"BHDXVtBQ\",\"guide_components_radio_index.md\":\"90as5QGp\",\"guide_components_pagination_properties.md\":\"JUAPvcTL\",\"guide_components_persona_properties.md\":\"DUTPhPMp\",\"guide_components_combo-box_emits.md\":\"Dh5R-qEv\",\"guide_components_pivot_emits.md\":\"BTJPgNpy\",\"guide_components_pagination_index.md\":\"CnW2zAht\",\"guide_components_flip-view_properties.md\":\"BqZ4hhgU\",\"guide_components_icon-element_emits.md\":\"D5TXFdTZ\",\"guide_components_flip-view_index.md\":\"DefnDOv6\",\"guide_components_navigation-panel_index.md\":\"6mO__sSK\",\"guide_components_rating-control_emits.md\":\"blvomSeC\",\"guide_components_icon-element_index.md\":\"DQ8K7JNn\",\"guide_components_navigation-view_index.md\":\"4AQRiz1k\",\"guide_components_toggle-switch_emits.md\":\"CLGzrNut\",\"guide_components_toggle-switch_index.md\":\"61en_q9-\",\"guide_components_scroll-story_index.md\":\"Vpgb1HSV\",\"guide_components_reveal-container_index.md\":\"Cut2r4tV\",\"guide_components_search-box_emits.md\":\"-d9sWNNt\",\"guide_components_search-box_properties.md\":\"DEKFfPFw\",\"guide_components_shimmer_emits.md\":\"CTMInlI3\",\"guide_components_tag_index.md\":\"BhhxkcHn\",\"guide_components_search-box_index.md\":\"DgkrY0oY\",\"guide_components_shimmer_index.md\":\"iZlHuTxw\",\"guide_components_shimmer_properties.md\":\"CdkU1o6H\",\"guide_components_tree-view_index.md\":\"CUrwan4q\",\"guide_components_text-field_index.md\":\"CXSimJtj\",\"guide_components_text-box_index.md\":\"C5moAPfB\",\"guide_components_progress-ring_properties.md\":\"Dc08Uiff\",\"guide_components_toggle-switch_properties.md\":\"tFppK_IS\",\"guide_components_radio-group_emits.md\":\"cEDzKVnN\",\"guide_components_collapse_index.md\":\"N9Iu5-2v\",\"guide_components_image_emits.md\":\"lmlz2xJd\",\"guide_components_callout_index.md\":\"D9RU33w6\",\"guide_components_pivot_index.md\":\"B_vwQL-5\",\"guide_components_command-bar_index.md\":\"Cp4_rrGB\",\"guide_components_pagination_emits.md\":\"Dng86A22\",\"guide_components_button_index.md\":\"7sqT2MQP\",\"guide_components_info-box_properties.md\":\"BI7Nvk-E\",\"guide_components_drop-down_emits.md\":\"BE95TdKW\",\"guide_components_expander_index.md\":\"BKgcUJzQ\",\"guide_components_message-bar_index.md\":\"AEtAWlF8\",\"guide_components_menu-flyout_index.md\":\"Csa7irPj\",\"guide_components_panel_index.md\":\"CsTu0bXo\",\"guide_components_panel_properties.md\":\"BaxoCYKq\",\"guide_components_progress-bar_emits.md\":\"BcwXUpsF\",\"guide_components_progress-bar_properties.md\":\"TxiS9ZMA\",\"guide_components_progress-ring_emits.md\":\"D2Y6hIZ9\",\"guide_components_color-picker_index.md\":\"DCc4ixcU\",\"guide_components_progress-ring_index.md\":\"CPb-ZEPE\",\"guide_components_color-picker_properties.md\":\"wcXK29Vl\",\"guide_components_time-picker_index.md\":\"CQJdRRaG\",\"guide_components_drop-down_properties.md\":\"Bwlkpr1q\",\"guide_components_infinite-scroll-view_index.md\":\"yAuD807x\",\"guide_components_check-box_index.md\":\"FYgdu4oq\",\"guide_components_progress-bar_index.md\":\"D8vHQw5V\",\"guide_components_combo-box_index.md\":\"DTyu3eNd\",\"guide_components_info-box_emits.md\":\"DlEwpkkq\",\"guide_components_drop-down_index.md\":\"BZzJZQWq\",\"guide_components_list-view_index.md\":\"BoYvMzb0\",\"guide_components_verify-box_properties.md\":\"CW6W8fFf\",\"guide_components_verify-box_index.md\":\"DwSB40wR\",\"guide_index.md\":\"Bndlt3sL\",\"guide_components_web-window_index.md\":\"Bxc8vEeI\",\"index.md\":\"MTRqI42u\",\"guide_components_combo-box_properties.md\":\"AWfHzV6x\",\"guide_components_combobox_emits.md\":\"CGB6WLt8\",\"guide_components_combobox_properties.md\":\"Bja0hMou\",\"guide_components_details-list_index.md\":\"CcgOCIyt\",\"guide_components_info-box_index.md\":\"vXh-_DsL\",\"guide_components_combobox_index.md\":\"CsPkY6YB\",\"guide_components_date-picker_index.md\":\"12vmUIup\",\"guide_components_flip-view_emits.md\":\"DCheHjDj\",\"guide_components_panel_emits.md\":\"DG0REDq8\",\"guide_components_breadcrumb_index.md\":\"DyDm7PeP\",\"guide_components_radio-group_properties.md\":\"BnPxoKsQ\",\"guide_components_persona_emits.md\":\"CnsDPKRU\",\"guide_components_pivot_properties.md\":\"BmoLpPi1\",\"guide_components_persona_index.md\":\"DT00jby4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vfluent3\",\"description\":\"A Vue3 component library for Fluent UI\",\"base\":\"/VFluent3/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"VFluent3\",\"footer\":{\"message\":\"MIT Licensed\",\"copyright\":\"Copyright © Creator SN - 2022\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/\"}],\"sidebar\":[{\"text\":\"Basic input\",\"collapsed\":true,\"items\":[{\"text\":\"Button\",\"link\":\"/guide/components/button/\"},{\"text\":\"CheckBox\",\"link\":\"/guide/components/check-box/\"},{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"},{\"text\":\"Combobox\",\"link\":\"/guide/components/combobox/\"},{\"text\":\"DetailsList\",\"link\":\"/guide/components/details-list/\"},{\"text\":\"DropDown\",\"link\":\"/guide/components/drop-down/\"},{\"text\":\"Radio\",\"link\":\"/guide/components/radio/\"},{\"text\":\"RadioGroup\",\"link\":\"/guide/components/radio-group/\"},{\"text\":\"RatingControl\",\"link\":\"/guide/components/rating-control/\"},{\"text\":\"Slider\",\"link\":\"/guide/components/slider/\"},{\"text\":\"ToggleSwitch\",\"link\":\"/guide/components/toggle-switch/\"},{\"text\":\"Tag\",\"link\":\"/guide/components/tag/\"}]},{\"text\":\"Collections\",\"collapsed\":true,\"items\":[{\"text\":\"FlipView\",\"link\":\"/guide/components/flip-view/\"},{\"text\":\"ListView\",\"link\":\"/guide/components/list-view/\"},{\"text\":\"TreeView\",\"link\":\"/guide/components/tree-view/\"}]},{\"text\":\"Date & Time\",\"collapsed\":true,\"items\":[{\"text\":\"CalendarDatePicker\",\"link\":\"/guide/components/calendar-date-picker/\"},{\"text\":\"CalendarView\",\"link\":\"/guide/components/calendar-view/\"},{\"text\":\"DatePicker\",\"link\":\"/guide/components/date-picker/\"},{\"text\":\"TimePicker\",\"link\":\"/guide/components/time-picker/\"}]},{\"text\":\"Dialogs & flyouts\",\"collapsed\":true,\"items\":[{\"text\":\"Callout\",\"link\":\"/guide/components/callout/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Layout\",\"collapsed\":true,\"items\":[{\"text\":\"Collapse\",\"link\":\"/guide/components/collapse/\"},{\"text\":\"Expander\",\"link\":\"/guide/components/expander/\"},{\"text\":\"Drawer\",\"link\":\"/guide/components/drawer/\"},{\"text\":\"Panel\",\"link\":\"/guide/components/panel/\"}]},{\"text\":\"Media\",\"collapsed\":true,\"items\":[{\"text\":\"Image\",\"link\":\"/guide/components/image/\"},{\"text\":\"Img\",\"link\":\"/guide/components/img/\"},{\"text\":\"ImgBox\",\"link\":\"/guide/components/img-box/\"},{\"text\":\"Persona\",\"link\":\"/guide/components/persona/\"}]},{\"text\":\"Menu & toolbars\",\"collapsed\":true,\"items\":[{\"text\":\"CommandBar\",\"link\":\"/guide/components/command-bar/\"},{\"text\":\"MenuFlyout\",\"link\":\"/guide/components/menu-flyout/\"},{\"text\":\"SwipeControl\",\"link\":\"/guide/components/swipe-control/\"}]},{\"text\":\"Navigation\",\"collapsed\":true,\"items\":[{\"text\":\"Breadcrumb\",\"link\":\"/guide/components/breadcrumb/\"},{\"text\":\"NavigationPanel\",\"link\":\"/guide/components/navigation-panel/\"},{\"text\":\"NavigationView\",\"link\":\"/guide/components/navigation-view/\"},{\"text\":\"Pivot\",\"link\":\"/guide/components/pivot/\"},{\"text\":\"Pagination\",\"link\":\"/guide/components/pagination/\"}]},{\"text\":\"Scrolling\",\"collapsed\":true,\"items\":[{\"text\":\"InfiniteScrollView\",\"link\":\"/guide/components/infinite-scroll-view/\"},{\"text\":\"ScrollStory\",\"link\":\"/guide/components/scroll-story/\"}]},{\"text\":\"Status & info\",\"collapsed\":true,\"items\":[{\"text\":\"Badge\",\"link\":\"/guide/components/badge/\"},{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"ProgressBar\",\"link\":\"/guide/components/progress-bar/\"},{\"text\":\"ProgressRing\",\"link\":\"/guide/components/progress-ring/\"}]},{\"text\":\"Styles\",\"collapsed\":true,\"items\":[{\"text\":\"AnimatedIcon\",\"link\":\"/guide/components/animated-icon/\"},{\"text\":\"IconElement\",\"link\":\"/guide/components/icon-element/\"},{\"text\":\"RevealContainer\",\"link\":\"/guide/components/reveal-container/\"},{\"text\":\"Shimmer\",\"link\":\"/guide/components/shimmer/\"}]},{\"text\":\"Text\",\"collapsed\":true,\"items\":[{\"text\":\"SearchBox\",\"link\":\"/guide/components/search-box/\"},{\"text\":\"TextBox\",\"link\":\"/guide/components/text-box/\"},{\"text\":\"TextField\",\"link\":\"/guide/components/text-field/\"},{\"text\":\"VerifyBox\",\"link\":\"/guide/components/verify-box/\"}]},{\"text\":\"Windowing\",\"collapsed\":true,\"items\":[{\"text\":\"WebWindow\",\"link\":\"/guide/components/web-window/\"}]},{\"text\":\"Global\",\"collapsed\":true,\"items\":[{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Advance\",\"collapsed\":true,\"items\":[{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git a/guide/components/shimmer/emits.html b/guide/components/shimmer/emits.html
new file mode 100644
index 0000000..2892eb2
--- /dev/null
+++ b/guide/components/shimmer/emits.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>vfluent3</title>
+    <meta name="description" content="A Vue3 component library for Fluent UI">
+    <meta name="generator" content="VitePress v1.0.0-rc.45">
+    <link rel="preload stylesheet" href="/VFluent3/assets/style.BabQegKX.css" as="style">
+    
+    <script type="module" src="/VFluent3/assets/app.CSutcJ2E.js"></script>
+    <link rel="preload" href="/VFluent3/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/framework.DvIFzl91.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/theme.CgqFBnN_.js">
+    <link rel="modulepreload" href="/VFluent3/assets/guide_components_shimmer_emits.md.CTMInlI3.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-19c990f1><div class="wrapper" data-v-19c990f1><div class="container" data-v-19c990f1><div class="title" data-v-19c990f1><div class="VPNavBarTitle has-sidebar" data-v-19c990f1 data-v-ab179fa1><a class="title" href="/VFluent3/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>VFluent3</span><!--[--><!--]--></a></div></div><div class="content" data-v-19c990f1><div class="content-body" data-v-19c990f1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-19c990f1><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-19c990f1 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Guide</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-19c990f1 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-19c990f1 data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-19c990f1 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-19c990f1><div class="divider-line" data-v-19c990f1></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-d2ecc192><button data-v-d2ecc192>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-575e6a36><div class="curtain" data-v-575e6a36></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-575e6a36><span class="visually-hidden" id="sidebar-aria-label" data-v-575e6a36> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Basic input</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/button/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/check-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CheckBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/combobox/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Combobox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/details-list/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DetailsList</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drop-down/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DropDown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio-group/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RadioGroup</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/rating-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RatingControl</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/slider/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/toggle-switch/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ToggleSwitch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tag/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Tag</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Collections</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/flip-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>FlipView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/list-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ListView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tree-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TreeView</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Date & Time</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarDatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/time-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TimePicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Dialogs & flyouts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/callout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Callout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Layout</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/collapse/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Collapse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/expander/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Expander</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drawer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Panel</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Media</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/image/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Img</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ImgBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/persona/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Persona</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Menu & toolbars</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/command-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CommandBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/menu-flyout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MenuFlyout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/swipe-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SwipeControl</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Navigation</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/breadcrumb/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationPanel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pivot/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pivot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pagination/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pagination</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Scrolling</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/infinite-scroll-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfiniteScrollView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/scroll-story/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ScrollStory</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Status & info</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/badge/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-ring/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressRing</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Styles</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/animated-icon/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>AnimatedIcon</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/icon-element/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>IconElement</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/reveal-container/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RevealContainer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/shimmer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Shimmer</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Text</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/search-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SearchBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-field/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextField</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/verify-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>VerifyBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Windowing</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/web-window/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>WebWindow</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Global</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Advance</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-935f8a84><div class="content" data-v-935f8a84><div class="outline-marker" data-v-935f8a84></div><div class="outline-title" role="heading" aria-level="2" data-v-935f8a84>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-935f8a84><span class="visually-hidden" id="doc-outline-aria-label" data-v-935f8a84> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-935f8a84 data-v-b933a997><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _VFluent3_guide_components_shimmer_emits" data-v-39a288b8><div><h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-label="Permalink to &quot;Emits&quot;">​</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead></table></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-09de1c0f><!--[--><!--]--><!----><nav class="prev-next" data-v-09de1c0f><div class="pager" data-v-09de1c0f><!----></div><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link next" href="/VFluent3/guide/components/button/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Next page</span><span class="title" data-v-09de1c0f>Button</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>MIT Licensed</p><p class="copyright" data-v-e315a0ad>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_calendar-date-picker_properties.md\":\"DXRjmMG8\",\"guide_components_image_properties.md\":\"DGanRzCb\",\"guide_components_img-box_index.md\":\"DYtggkf_\",\"guide_components_img_emits.md\":\"BlE7jvZQ\",\"guide_components_img_index.md\":\"Bm9FiuU4\",\"guide_components_icon-element_properties.md\":\"8Oakruwc\",\"guide_components_img_properties.md\":\"B42YSocI\",\"guide_components_drawer_index.md\":\"D_vpnCpE\",\"guide_components_verify-box_emits.md\":\"DT17Iazx\",\"guide_components_calendar-date-picker_index.md\":\"BdHjrurh\",\"guide_components_rating-control_index.md\":\"Q9l5Lfrr\",\"guide_components_rating-control_properties.md\":\"DKprnl0i\",\"guide_components_calendar-view_index.md\":\"zdoRYVx1\",\"guide_components_animated-icon_index.md\":\"yZDMzCFe\",\"guide_components_calendar-date-picker_emits.md\":\"D5OkfR8j\",\"guide_components_badge_index.md\":\"Bb4crrJn\",\"guide_components_image_index.md\":\"B7X6cWAZ\",\"guide_components_slider_index.md\":\"C7zZ2d-W\",\"guide_components_radio-group_index.md\":\"CVfh3h5H\",\"guide_components_swipe-control_index.md\":\"DwrDVPc1\",\"guide_components_color-picker_emits.md\":\"BHDXVtBQ\",\"guide_components_radio_index.md\":\"90as5QGp\",\"guide_components_pagination_properties.md\":\"JUAPvcTL\",\"guide_components_persona_properties.md\":\"DUTPhPMp\",\"guide_components_combo-box_emits.md\":\"Dh5R-qEv\",\"guide_components_pivot_emits.md\":\"BTJPgNpy\",\"guide_components_pagination_index.md\":\"CnW2zAht\",\"guide_components_flip-view_properties.md\":\"BqZ4hhgU\",\"guide_components_icon-element_emits.md\":\"D5TXFdTZ\",\"guide_components_flip-view_index.md\":\"DefnDOv6\",\"guide_components_navigation-panel_index.md\":\"6mO__sSK\",\"guide_components_rating-control_emits.md\":\"blvomSeC\",\"guide_components_icon-element_index.md\":\"DQ8K7JNn\",\"guide_components_navigation-view_index.md\":\"4AQRiz1k\",\"guide_components_toggle-switch_emits.md\":\"CLGzrNut\",\"guide_components_toggle-switch_index.md\":\"61en_q9-\",\"guide_components_scroll-story_index.md\":\"Vpgb1HSV\",\"guide_components_reveal-container_index.md\":\"Cut2r4tV\",\"guide_components_search-box_emits.md\":\"-d9sWNNt\",\"guide_components_search-box_properties.md\":\"DEKFfPFw\",\"guide_components_shimmer_emits.md\":\"CTMInlI3\",\"guide_components_tag_index.md\":\"BhhxkcHn\",\"guide_components_search-box_index.md\":\"DgkrY0oY\",\"guide_components_shimmer_index.md\":\"iZlHuTxw\",\"guide_components_shimmer_properties.md\":\"CdkU1o6H\",\"guide_components_tree-view_index.md\":\"CUrwan4q\",\"guide_components_text-field_index.md\":\"CXSimJtj\",\"guide_components_text-box_index.md\":\"C5moAPfB\",\"guide_components_progress-ring_properties.md\":\"Dc08Uiff\",\"guide_components_toggle-switch_properties.md\":\"tFppK_IS\",\"guide_components_radio-group_emits.md\":\"cEDzKVnN\",\"guide_components_collapse_index.md\":\"N9Iu5-2v\",\"guide_components_image_emits.md\":\"lmlz2xJd\",\"guide_components_callout_index.md\":\"D9RU33w6\",\"guide_components_pivot_index.md\":\"B_vwQL-5\",\"guide_components_command-bar_index.md\":\"Cp4_rrGB\",\"guide_components_pagination_emits.md\":\"Dng86A22\",\"guide_components_button_index.md\":\"7sqT2MQP\",\"guide_components_info-box_properties.md\":\"BI7Nvk-E\",\"guide_components_drop-down_emits.md\":\"BE95TdKW\",\"guide_components_expander_index.md\":\"BKgcUJzQ\",\"guide_components_message-bar_index.md\":\"AEtAWlF8\",\"guide_components_menu-flyout_index.md\":\"Csa7irPj\",\"guide_components_panel_index.md\":\"CsTu0bXo\",\"guide_components_panel_properties.md\":\"BaxoCYKq\",\"guide_components_progress-bar_emits.md\":\"BcwXUpsF\",\"guide_components_progress-bar_properties.md\":\"TxiS9ZMA\",\"guide_components_progress-ring_emits.md\":\"D2Y6hIZ9\",\"guide_components_color-picker_index.md\":\"DCc4ixcU\",\"guide_components_progress-ring_index.md\":\"CPb-ZEPE\",\"guide_components_color-picker_properties.md\":\"wcXK29Vl\",\"guide_components_time-picker_index.md\":\"CQJdRRaG\",\"guide_components_drop-down_properties.md\":\"Bwlkpr1q\",\"guide_components_infinite-scroll-view_index.md\":\"yAuD807x\",\"guide_components_check-box_index.md\":\"FYgdu4oq\",\"guide_components_progress-bar_index.md\":\"D8vHQw5V\",\"guide_components_combo-box_index.md\":\"DTyu3eNd\",\"guide_components_info-box_emits.md\":\"DlEwpkkq\",\"guide_components_drop-down_index.md\":\"BZzJZQWq\",\"guide_components_list-view_index.md\":\"BoYvMzb0\",\"guide_components_verify-box_properties.md\":\"CW6W8fFf\",\"guide_components_verify-box_index.md\":\"DwSB40wR\",\"guide_index.md\":\"Bndlt3sL\",\"guide_components_web-window_index.md\":\"Bxc8vEeI\",\"index.md\":\"MTRqI42u\",\"guide_components_combo-box_properties.md\":\"AWfHzV6x\",\"guide_components_combobox_emits.md\":\"CGB6WLt8\",\"guide_components_combobox_properties.md\":\"Bja0hMou\",\"guide_components_details-list_index.md\":\"CcgOCIyt\",\"guide_components_info-box_index.md\":\"vXh-_DsL\",\"guide_components_combobox_index.md\":\"CsPkY6YB\",\"guide_components_date-picker_index.md\":\"12vmUIup\",\"guide_components_flip-view_emits.md\":\"DCheHjDj\",\"guide_components_panel_emits.md\":\"DG0REDq8\",\"guide_components_breadcrumb_index.md\":\"DyDm7PeP\",\"guide_components_radio-group_properties.md\":\"BnPxoKsQ\",\"guide_components_persona_emits.md\":\"CnsDPKRU\",\"guide_components_pivot_properties.md\":\"BmoLpPi1\",\"guide_components_persona_index.md\":\"DT00jby4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vfluent3\",\"description\":\"A Vue3 component library for Fluent UI\",\"base\":\"/VFluent3/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"VFluent3\",\"footer\":{\"message\":\"MIT Licensed\",\"copyright\":\"Copyright © Creator SN - 2022\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/\"}],\"sidebar\":[{\"text\":\"Basic input\",\"collapsed\":true,\"items\":[{\"text\":\"Button\",\"link\":\"/guide/components/button/\"},{\"text\":\"CheckBox\",\"link\":\"/guide/components/check-box/\"},{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"},{\"text\":\"Combobox\",\"link\":\"/guide/components/combobox/\"},{\"text\":\"DetailsList\",\"link\":\"/guide/components/details-list/\"},{\"text\":\"DropDown\",\"link\":\"/guide/components/drop-down/\"},{\"text\":\"Radio\",\"link\":\"/guide/components/radio/\"},{\"text\":\"RadioGroup\",\"link\":\"/guide/components/radio-group/\"},{\"text\":\"RatingControl\",\"link\":\"/guide/components/rating-control/\"},{\"text\":\"Slider\",\"link\":\"/guide/components/slider/\"},{\"text\":\"ToggleSwitch\",\"link\":\"/guide/components/toggle-switch/\"},{\"text\":\"Tag\",\"link\":\"/guide/components/tag/\"}]},{\"text\":\"Collections\",\"collapsed\":true,\"items\":[{\"text\":\"FlipView\",\"link\":\"/guide/components/flip-view/\"},{\"text\":\"ListView\",\"link\":\"/guide/components/list-view/\"},{\"text\":\"TreeView\",\"link\":\"/guide/components/tree-view/\"}]},{\"text\":\"Date & Time\",\"collapsed\":true,\"items\":[{\"text\":\"CalendarDatePicker\",\"link\":\"/guide/components/calendar-date-picker/\"},{\"text\":\"CalendarView\",\"link\":\"/guide/components/calendar-view/\"},{\"text\":\"DatePicker\",\"link\":\"/guide/components/date-picker/\"},{\"text\":\"TimePicker\",\"link\":\"/guide/components/time-picker/\"}]},{\"text\":\"Dialogs & flyouts\",\"collapsed\":true,\"items\":[{\"text\":\"Callout\",\"link\":\"/guide/components/callout/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Layout\",\"collapsed\":true,\"items\":[{\"text\":\"Collapse\",\"link\":\"/guide/components/collapse/\"},{\"text\":\"Expander\",\"link\":\"/guide/components/expander/\"},{\"text\":\"Drawer\",\"link\":\"/guide/components/drawer/\"},{\"text\":\"Panel\",\"link\":\"/guide/components/panel/\"}]},{\"text\":\"Media\",\"collapsed\":true,\"items\":[{\"text\":\"Image\",\"link\":\"/guide/components/image/\"},{\"text\":\"Img\",\"link\":\"/guide/components/img/\"},{\"text\":\"ImgBox\",\"link\":\"/guide/components/img-box/\"},{\"text\":\"Persona\",\"link\":\"/guide/components/persona/\"}]},{\"text\":\"Menu & toolbars\",\"collapsed\":true,\"items\":[{\"text\":\"CommandBar\",\"link\":\"/guide/components/command-bar/\"},{\"text\":\"MenuFlyout\",\"link\":\"/guide/components/menu-flyout/\"},{\"text\":\"SwipeControl\",\"link\":\"/guide/components/swipe-control/\"}]},{\"text\":\"Navigation\",\"collapsed\":true,\"items\":[{\"text\":\"Breadcrumb\",\"link\":\"/guide/components/breadcrumb/\"},{\"text\":\"NavigationPanel\",\"link\":\"/guide/components/navigation-panel/\"},{\"text\":\"NavigationView\",\"link\":\"/guide/components/navigation-view/\"},{\"text\":\"Pivot\",\"link\":\"/guide/components/pivot/\"},{\"text\":\"Pagination\",\"link\":\"/guide/components/pagination/\"}]},{\"text\":\"Scrolling\",\"collapsed\":true,\"items\":[{\"text\":\"InfiniteScrollView\",\"link\":\"/guide/components/infinite-scroll-view/\"},{\"text\":\"ScrollStory\",\"link\":\"/guide/components/scroll-story/\"}]},{\"text\":\"Status & info\",\"collapsed\":true,\"items\":[{\"text\":\"Badge\",\"link\":\"/guide/components/badge/\"},{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"ProgressBar\",\"link\":\"/guide/components/progress-bar/\"},{\"text\":\"ProgressRing\",\"link\":\"/guide/components/progress-ring/\"}]},{\"text\":\"Styles\",\"collapsed\":true,\"items\":[{\"text\":\"AnimatedIcon\",\"link\":\"/guide/components/animated-icon/\"},{\"text\":\"IconElement\",\"link\":\"/guide/components/icon-element/\"},{\"text\":\"RevealContainer\",\"link\":\"/guide/components/reveal-container/\"},{\"text\":\"Shimmer\",\"link\":\"/guide/components/shimmer/\"}]},{\"text\":\"Text\",\"collapsed\":true,\"items\":[{\"text\":\"SearchBox\",\"link\":\"/guide/components/search-box/\"},{\"text\":\"TextBox\",\"link\":\"/guide/components/text-box/\"},{\"text\":\"TextField\",\"link\":\"/guide/components/text-field/\"},{\"text\":\"VerifyBox\",\"link\":\"/guide/components/verify-box/\"}]},{\"text\":\"Windowing\",\"collapsed\":true,\"items\":[{\"text\":\"WebWindow\",\"link\":\"/guide/components/web-window/\"}]},{\"text\":\"Global\",\"collapsed\":true,\"items\":[{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Advance\",\"collapsed\":true,\"items\":[{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git a/guide/components/shimmer/index.html b/guide/components/shimmer/index.html
new file mode 100644
index 0000000..e83a07f
--- /dev/null
+++ b/guide/components/shimmer/index.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>Shimmer | vfluent3</title>
+    <meta name="description" content="A Vue3 component library for Fluent UI">
+    <meta name="generator" content="VitePress v1.0.0-rc.45">
+    <link rel="preload stylesheet" href="/VFluent3/assets/style.BabQegKX.css" as="style">
+    
+    <script type="module" src="/VFluent3/assets/app.CSutcJ2E.js"></script>
+    <link rel="preload" href="/VFluent3/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/framework.DvIFzl91.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/theme.CgqFBnN_.js">
+    <link rel="modulepreload" href="/VFluent3/assets/guide_components_shimmer_index.md.iZlHuTxw.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-19c990f1><div class="wrapper" data-v-19c990f1><div class="container" data-v-19c990f1><div class="title" data-v-19c990f1><div class="VPNavBarTitle has-sidebar" data-v-19c990f1 data-v-ab179fa1><a class="title" href="/VFluent3/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>VFluent3</span><!--[--><!--]--></a></div></div><div class="content" data-v-19c990f1><div class="content-body" data-v-19c990f1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-19c990f1><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-19c990f1 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Guide</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-19c990f1 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-19c990f1 data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-19c990f1 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-19c990f1><div class="divider-line" data-v-19c990f1></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-d2ecc192><button data-v-d2ecc192>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-575e6a36><div class="curtain" data-v-575e6a36></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-575e6a36><span class="visually-hidden" id="sidebar-aria-label" data-v-575e6a36> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Basic input</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/button/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/check-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CheckBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/combobox/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Combobox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/details-list/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DetailsList</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drop-down/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DropDown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio-group/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RadioGroup</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/rating-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RatingControl</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/slider/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/toggle-switch/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ToggleSwitch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tag/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Tag</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Collections</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/flip-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>FlipView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/list-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ListView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tree-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TreeView</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Date & Time</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarDatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/time-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TimePicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Dialogs & flyouts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/callout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Callout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Layout</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/collapse/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Collapse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/expander/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Expander</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drawer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Panel</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Media</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/image/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Img</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ImgBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/persona/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Persona</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Menu & toolbars</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/command-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CommandBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/menu-flyout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MenuFlyout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/swipe-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SwipeControl</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Navigation</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/breadcrumb/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationPanel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pivot/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pivot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pagination/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pagination</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Scrolling</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/infinite-scroll-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfiniteScrollView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/scroll-story/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ScrollStory</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Status & info</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/badge/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-ring/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressRing</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible has-active" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Styles</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/animated-icon/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>AnimatedIcon</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/icon-element/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>IconElement</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/reveal-container/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RevealContainer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/shimmer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Shimmer</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Text</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/search-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SearchBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-field/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextField</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/verify-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>VerifyBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Windowing</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/web-window/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>WebWindow</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Global</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Advance</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-935f8a84><div class="content" data-v-935f8a84><div class="outline-marker" data-v-935f8a84></div><div class="outline-title" role="heading" aria-level="2" data-v-935f8a84>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-935f8a84><span class="visually-hidden" id="doc-outline-aria-label" data-v-935f8a84> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-935f8a84 data-v-b933a997><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _VFluent3_guide_components_shimmer_" data-v-39a288b8><div><h3 id="shimmer-demo" tabindex="-1">Shimmer-DEMO <a class="header-anchor" href="#shimmer-demo" aria-label="Permalink to &quot;Shimmer-DEMO&quot;">​</a></h3><hr><p>Avatar with item</p><div><!----></div><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Shimmer</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">auto</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;div style=&quot;width: 100%; height: 100%; display: flex; flex-direction: column;&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;div v-for=&quot;(item, index) in 5&quot; :key=&quot;index&quot; style=&quot;margin-top: 5px; display: flex; align-items: center;&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            &lt;div class=&quot;sample&quot; style=&quot;width: 35px; height: 35px; border-radius: 50%;&quot;&gt;&lt;/div&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            &lt;div class=&quot;sample&quot; style=&quot;width: 80%; margin-left: 15px;&quot;&gt;&lt;/div&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;/div&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/div&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Shimmer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><p>List items</p><div><!----></div><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Shimmer</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">auto</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;div style=&quot;width: 100%; height: 100%; display: flex; flex-direction: column;&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;div v-for=&quot;(item, index) in 3&quot; :key=&quot;index&quot; style=&quot;margin-top: 5px; display: flex; align-items: center;&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            &lt;div class=&quot;sample&quot; style=&quot;width: 80%; height: 15px;&quot; :style=&quot;{width: `${100 - index * 10}%`}&quot;&gt;&lt;/div&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;/div&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/div&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Shimmer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p>List items with two column</p><div><!----></div><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Shimmer</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">auto</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;div style=&quot;width: 100%; height: 100%; display: flex; flex-direction: column;&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;div v-for=&quot;(item, index) in 3&quot; :key=&quot;index&quot; style=&quot;margin-top: 5px; display: flex; align-items: center;&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            &lt;div class=&quot;sample&quot; style=&quot;width: 80%; height: 15px;&quot; :style=&quot;{width: `${50 - index * 10}%`}&quot;&gt;&lt;/div&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            &lt;div class=&quot;sample&quot; style=&quot;width: 80%; height: 15px; margin-left: 15px;&quot; :style=&quot;{width: `${50 - index * 10}%`}&quot;&gt;&lt;/div&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;/div&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/div&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Shimmer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h3 id="shimmer-dark-theme" tabindex="-1">Shimmer-Dark Theme <a class="header-anchor" href="#shimmer-dark-theme" aria-label="Permalink to &quot;Shimmer-Dark Theme&quot;">​</a></h3><hr><p>Avatar with item</p><div style="background:black;"><!----></div><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Shimmer</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;dark&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">auto</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;div style=&quot;width: 100%; height: 100%; display: flex; flex-direction: column;&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;div v-for=&quot;(item, index) in 5&quot; :key=&quot;index&quot; style=&quot;margin-top: 5px; display: flex; align-items: center;&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            &lt;div class=&quot;sample&quot; style=&quot;width: 35px; height: 35px; border-radius: 50%;&quot;&gt;&lt;/div&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            &lt;div class=&quot;sample&quot; style=&quot;width: 80%; margin-left: 15px;&quot;&gt;&lt;/div&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;/div&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/div&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Shimmer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><p>List items</p><div style="background:black;"><!----></div><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Shimmer</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;dark&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">auto</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;div style=&quot;width: 100%; height: 100%; display: flex; flex-direction: column;&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;div v-for=&quot;(item, index) in 3&quot; :key=&quot;index&quot; style=&quot;margin-top: 5px; display: flex; align-items: center;&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            &lt;div class=&quot;sample&quot; style=&quot;width: 80%; height: 15px;&quot; :style=&quot;{width: `${100 - index * 10}%`}&quot;&gt;&lt;/div&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;/div&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/div&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Shimmer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p>List items with two column</p><div style="background:black;"><!----></div><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Shimmer</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;dark&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">auto</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;div style=&quot;width: 100%; height: 100%; display: flex; flex-direction: column;&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;div v-for=&quot;(item, index) in 3&quot; :key=&quot;index&quot; style=&quot;margin-top: 5px; display: flex; align-items: center;&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            &lt;div class=&quot;sample&quot; style=&quot;width: 80%; height: 15px;&quot; :style=&quot;{width: `${50 - index * 10}%`}&quot;&gt;&lt;/div&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            &lt;div class=&quot;sample&quot; style=&quot;width: 80%; height: 15px; margin-left: 15px;&quot; :style=&quot;{width: `${50 - index * 10}%`}&quot;&gt;&lt;/div&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;/div&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/div&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Shimmer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">theme</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">system</td><td style="text-align:center;">主题样式, 包含<code>light</code>, <code>dark</code>, <code>system</code>, <code>custom</code>几种样式</td></tr></tbody></table><h3 id="slot" tabindex="-1">Slot <a class="header-anchor" href="#slot" aria-label="Permalink to &quot;Slot&quot;">​</a></h3><hr><ol><li>Default</li></ol><p>默认样式为:</p><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;sample&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>自定义<code>Shimmer</code>内容时, 将要呈现Skeleton效果的元素加上<code>sample</code>类.</p><div class="language-javascript vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">fv-shimmer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;sample&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">fv-shimmer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-09de1c0f><!--[--><!--]--><!----><nav class="prev-next" data-v-09de1c0f><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link prev" href="/VFluent3/guide/components/reveal-container/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Previous page</span><span class="title" data-v-09de1c0f>RevealContainer</span><!--]--></a></div><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link next" href="/VFluent3/guide/components/search-box/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Next page</span><span class="title" data-v-09de1c0f>SearchBox</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>MIT Licensed</p><p class="copyright" data-v-e315a0ad>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_calendar-date-picker_properties.md\":\"DXRjmMG8\",\"guide_components_image_properties.md\":\"DGanRzCb\",\"guide_components_img-box_index.md\":\"DYtggkf_\",\"guide_components_img_emits.md\":\"BlE7jvZQ\",\"guide_components_img_index.md\":\"Bm9FiuU4\",\"guide_components_icon-element_properties.md\":\"8Oakruwc\",\"guide_components_img_properties.md\":\"B42YSocI\",\"guide_components_drawer_index.md\":\"D_vpnCpE\",\"guide_components_verify-box_emits.md\":\"DT17Iazx\",\"guide_components_calendar-date-picker_index.md\":\"BdHjrurh\",\"guide_components_rating-control_index.md\":\"Q9l5Lfrr\",\"guide_components_rating-control_properties.md\":\"DKprnl0i\",\"guide_components_calendar-view_index.md\":\"zdoRYVx1\",\"guide_components_animated-icon_index.md\":\"yZDMzCFe\",\"guide_components_calendar-date-picker_emits.md\":\"D5OkfR8j\",\"guide_components_badge_index.md\":\"Bb4crrJn\",\"guide_components_image_index.md\":\"B7X6cWAZ\",\"guide_components_slider_index.md\":\"C7zZ2d-W\",\"guide_components_radio-group_index.md\":\"CVfh3h5H\",\"guide_components_swipe-control_index.md\":\"DwrDVPc1\",\"guide_components_color-picker_emits.md\":\"BHDXVtBQ\",\"guide_components_radio_index.md\":\"90as5QGp\",\"guide_components_pagination_properties.md\":\"JUAPvcTL\",\"guide_components_persona_properties.md\":\"DUTPhPMp\",\"guide_components_combo-box_emits.md\":\"Dh5R-qEv\",\"guide_components_pivot_emits.md\":\"BTJPgNpy\",\"guide_components_pagination_index.md\":\"CnW2zAht\",\"guide_components_flip-view_properties.md\":\"BqZ4hhgU\",\"guide_components_icon-element_emits.md\":\"D5TXFdTZ\",\"guide_components_flip-view_index.md\":\"DefnDOv6\",\"guide_components_navigation-panel_index.md\":\"6mO__sSK\",\"guide_components_rating-control_emits.md\":\"blvomSeC\",\"guide_components_icon-element_index.md\":\"DQ8K7JNn\",\"guide_components_navigation-view_index.md\":\"4AQRiz1k\",\"guide_components_toggle-switch_emits.md\":\"CLGzrNut\",\"guide_components_toggle-switch_index.md\":\"61en_q9-\",\"guide_components_scroll-story_index.md\":\"Vpgb1HSV\",\"guide_components_reveal-container_index.md\":\"Cut2r4tV\",\"guide_components_search-box_emits.md\":\"-d9sWNNt\",\"guide_components_search-box_properties.md\":\"DEKFfPFw\",\"guide_components_shimmer_emits.md\":\"CTMInlI3\",\"guide_components_tag_index.md\":\"BhhxkcHn\",\"guide_components_search-box_index.md\":\"DgkrY0oY\",\"guide_components_shimmer_index.md\":\"iZlHuTxw\",\"guide_components_shimmer_properties.md\":\"CdkU1o6H\",\"guide_components_tree-view_index.md\":\"CUrwan4q\",\"guide_components_text-field_index.md\":\"CXSimJtj\",\"guide_components_text-box_index.md\":\"C5moAPfB\",\"guide_components_progress-ring_properties.md\":\"Dc08Uiff\",\"guide_components_toggle-switch_properties.md\":\"tFppK_IS\",\"guide_components_radio-group_emits.md\":\"cEDzKVnN\",\"guide_components_collapse_index.md\":\"N9Iu5-2v\",\"guide_components_image_emits.md\":\"lmlz2xJd\",\"guide_components_callout_index.md\":\"D9RU33w6\",\"guide_components_pivot_index.md\":\"B_vwQL-5\",\"guide_components_command-bar_index.md\":\"Cp4_rrGB\",\"guide_components_pagination_emits.md\":\"Dng86A22\",\"guide_components_button_index.md\":\"7sqT2MQP\",\"guide_components_info-box_properties.md\":\"BI7Nvk-E\",\"guide_components_drop-down_emits.md\":\"BE95TdKW\",\"guide_components_expander_index.md\":\"BKgcUJzQ\",\"guide_components_message-bar_index.md\":\"AEtAWlF8\",\"guide_components_menu-flyout_index.md\":\"Csa7irPj\",\"guide_components_panel_index.md\":\"CsTu0bXo\",\"guide_components_panel_properties.md\":\"BaxoCYKq\",\"guide_components_progress-bar_emits.md\":\"BcwXUpsF\",\"guide_components_progress-bar_properties.md\":\"TxiS9ZMA\",\"guide_components_progress-ring_emits.md\":\"D2Y6hIZ9\",\"guide_components_color-picker_index.md\":\"DCc4ixcU\",\"guide_components_progress-ring_index.md\":\"CPb-ZEPE\",\"guide_components_color-picker_properties.md\":\"wcXK29Vl\",\"guide_components_time-picker_index.md\":\"CQJdRRaG\",\"guide_components_drop-down_properties.md\":\"Bwlkpr1q\",\"guide_components_infinite-scroll-view_index.md\":\"yAuD807x\",\"guide_components_check-box_index.md\":\"FYgdu4oq\",\"guide_components_progress-bar_index.md\":\"D8vHQw5V\",\"guide_components_combo-box_index.md\":\"DTyu3eNd\",\"guide_components_info-box_emits.md\":\"DlEwpkkq\",\"guide_components_drop-down_index.md\":\"BZzJZQWq\",\"guide_components_list-view_index.md\":\"BoYvMzb0\",\"guide_components_verify-box_properties.md\":\"CW6W8fFf\",\"guide_components_verify-box_index.md\":\"DwSB40wR\",\"guide_index.md\":\"Bndlt3sL\",\"guide_components_web-window_index.md\":\"Bxc8vEeI\",\"index.md\":\"MTRqI42u\",\"guide_components_combo-box_properties.md\":\"AWfHzV6x\",\"guide_components_combobox_emits.md\":\"CGB6WLt8\",\"guide_components_combobox_properties.md\":\"Bja0hMou\",\"guide_components_details-list_index.md\":\"CcgOCIyt\",\"guide_components_info-box_index.md\":\"vXh-_DsL\",\"guide_components_combobox_index.md\":\"CsPkY6YB\",\"guide_components_date-picker_index.md\":\"12vmUIup\",\"guide_components_flip-view_emits.md\":\"DCheHjDj\",\"guide_components_panel_emits.md\":\"DG0REDq8\",\"guide_components_breadcrumb_index.md\":\"DyDm7PeP\",\"guide_components_radio-group_properties.md\":\"BnPxoKsQ\",\"guide_components_persona_emits.md\":\"CnsDPKRU\",\"guide_components_pivot_properties.md\":\"BmoLpPi1\",\"guide_components_persona_index.md\":\"DT00jby4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vfluent3\",\"description\":\"A Vue3 component library for Fluent UI\",\"base\":\"/VFluent3/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"VFluent3\",\"footer\":{\"message\":\"MIT Licensed\",\"copyright\":\"Copyright © Creator SN - 2022\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/\"}],\"sidebar\":[{\"text\":\"Basic input\",\"collapsed\":true,\"items\":[{\"text\":\"Button\",\"link\":\"/guide/components/button/\"},{\"text\":\"CheckBox\",\"link\":\"/guide/components/check-box/\"},{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"},{\"text\":\"Combobox\",\"link\":\"/guide/components/combobox/\"},{\"text\":\"DetailsList\",\"link\":\"/guide/components/details-list/\"},{\"text\":\"DropDown\",\"link\":\"/guide/components/drop-down/\"},{\"text\":\"Radio\",\"link\":\"/guide/components/radio/\"},{\"text\":\"RadioGroup\",\"link\":\"/guide/components/radio-group/\"},{\"text\":\"RatingControl\",\"link\":\"/guide/components/rating-control/\"},{\"text\":\"Slider\",\"link\":\"/guide/components/slider/\"},{\"text\":\"ToggleSwitch\",\"link\":\"/guide/components/toggle-switch/\"},{\"text\":\"Tag\",\"link\":\"/guide/components/tag/\"}]},{\"text\":\"Collections\",\"collapsed\":true,\"items\":[{\"text\":\"FlipView\",\"link\":\"/guide/components/flip-view/\"},{\"text\":\"ListView\",\"link\":\"/guide/components/list-view/\"},{\"text\":\"TreeView\",\"link\":\"/guide/components/tree-view/\"}]},{\"text\":\"Date & Time\",\"collapsed\":true,\"items\":[{\"text\":\"CalendarDatePicker\",\"link\":\"/guide/components/calendar-date-picker/\"},{\"text\":\"CalendarView\",\"link\":\"/guide/components/calendar-view/\"},{\"text\":\"DatePicker\",\"link\":\"/guide/components/date-picker/\"},{\"text\":\"TimePicker\",\"link\":\"/guide/components/time-picker/\"}]},{\"text\":\"Dialogs & flyouts\",\"collapsed\":true,\"items\":[{\"text\":\"Callout\",\"link\":\"/guide/components/callout/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Layout\",\"collapsed\":true,\"items\":[{\"text\":\"Collapse\",\"link\":\"/guide/components/collapse/\"},{\"text\":\"Expander\",\"link\":\"/guide/components/expander/\"},{\"text\":\"Drawer\",\"link\":\"/guide/components/drawer/\"},{\"text\":\"Panel\",\"link\":\"/guide/components/panel/\"}]},{\"text\":\"Media\",\"collapsed\":true,\"items\":[{\"text\":\"Image\",\"link\":\"/guide/components/image/\"},{\"text\":\"Img\",\"link\":\"/guide/components/img/\"},{\"text\":\"ImgBox\",\"link\":\"/guide/components/img-box/\"},{\"text\":\"Persona\",\"link\":\"/guide/components/persona/\"}]},{\"text\":\"Menu & toolbars\",\"collapsed\":true,\"items\":[{\"text\":\"CommandBar\",\"link\":\"/guide/components/command-bar/\"},{\"text\":\"MenuFlyout\",\"link\":\"/guide/components/menu-flyout/\"},{\"text\":\"SwipeControl\",\"link\":\"/guide/components/swipe-control/\"}]},{\"text\":\"Navigation\",\"collapsed\":true,\"items\":[{\"text\":\"Breadcrumb\",\"link\":\"/guide/components/breadcrumb/\"},{\"text\":\"NavigationPanel\",\"link\":\"/guide/components/navigation-panel/\"},{\"text\":\"NavigationView\",\"link\":\"/guide/components/navigation-view/\"},{\"text\":\"Pivot\",\"link\":\"/guide/components/pivot/\"},{\"text\":\"Pagination\",\"link\":\"/guide/components/pagination/\"}]},{\"text\":\"Scrolling\",\"collapsed\":true,\"items\":[{\"text\":\"InfiniteScrollView\",\"link\":\"/guide/components/infinite-scroll-view/\"},{\"text\":\"ScrollStory\",\"link\":\"/guide/components/scroll-story/\"}]},{\"text\":\"Status & info\",\"collapsed\":true,\"items\":[{\"text\":\"Badge\",\"link\":\"/guide/components/badge/\"},{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"ProgressBar\",\"link\":\"/guide/components/progress-bar/\"},{\"text\":\"ProgressRing\",\"link\":\"/guide/components/progress-ring/\"}]},{\"text\":\"Styles\",\"collapsed\":true,\"items\":[{\"text\":\"AnimatedIcon\",\"link\":\"/guide/components/animated-icon/\"},{\"text\":\"IconElement\",\"link\":\"/guide/components/icon-element/\"},{\"text\":\"RevealContainer\",\"link\":\"/guide/components/reveal-container/\"},{\"text\":\"Shimmer\",\"link\":\"/guide/components/shimmer/\"}]},{\"text\":\"Text\",\"collapsed\":true,\"items\":[{\"text\":\"SearchBox\",\"link\":\"/guide/components/search-box/\"},{\"text\":\"TextBox\",\"link\":\"/guide/components/text-box/\"},{\"text\":\"TextField\",\"link\":\"/guide/components/text-field/\"},{\"text\":\"VerifyBox\",\"link\":\"/guide/components/verify-box/\"}]},{\"text\":\"Windowing\",\"collapsed\":true,\"items\":[{\"text\":\"WebWindow\",\"link\":\"/guide/components/web-window/\"}]},{\"text\":\"Global\",\"collapsed\":true,\"items\":[{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Advance\",\"collapsed\":true,\"items\":[{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git a/guide/components/shimmer/properties.html b/guide/components/shimmer/properties.html
new file mode 100644
index 0000000..eddd34e
--- /dev/null
+++ b/guide/components/shimmer/properties.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>vfluent3</title>
+    <meta name="description" content="A Vue3 component library for Fluent UI">
+    <meta name="generator" content="VitePress v1.0.0-rc.45">
+    <link rel="preload stylesheet" href="/VFluent3/assets/style.BabQegKX.css" as="style">
+    
+    <script type="module" src="/VFluent3/assets/app.CSutcJ2E.js"></script>
+    <link rel="preload" href="/VFluent3/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/framework.DvIFzl91.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/theme.CgqFBnN_.js">
+    <link rel="modulepreload" href="/VFluent3/assets/guide_components_shimmer_properties.md.CdkU1o6H.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-19c990f1><div class="wrapper" data-v-19c990f1><div class="container" data-v-19c990f1><div class="title" data-v-19c990f1><div class="VPNavBarTitle has-sidebar" data-v-19c990f1 data-v-ab179fa1><a class="title" href="/VFluent3/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>VFluent3</span><!--[--><!--]--></a></div></div><div class="content" data-v-19c990f1><div class="content-body" data-v-19c990f1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-19c990f1><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-19c990f1 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Guide</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-19c990f1 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-19c990f1 data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-19c990f1 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-19c990f1><div class="divider-line" data-v-19c990f1></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-d2ecc192><button data-v-d2ecc192>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-575e6a36><div class="curtain" data-v-575e6a36></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-575e6a36><span class="visually-hidden" id="sidebar-aria-label" data-v-575e6a36> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Basic input</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/button/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/check-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CheckBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/combobox/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Combobox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/details-list/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DetailsList</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drop-down/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DropDown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio-group/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RadioGroup</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/rating-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RatingControl</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/slider/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/toggle-switch/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ToggleSwitch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tag/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Tag</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Collections</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/flip-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>FlipView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/list-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ListView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tree-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TreeView</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Date & Time</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarDatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/time-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TimePicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Dialogs & flyouts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/callout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Callout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Layout</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/collapse/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Collapse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/expander/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Expander</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drawer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Panel</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Media</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/image/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Img</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ImgBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/persona/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Persona</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Menu & toolbars</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/command-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CommandBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/menu-flyout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MenuFlyout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/swipe-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SwipeControl</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Navigation</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/breadcrumb/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationPanel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pivot/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pivot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pagination/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pagination</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Scrolling</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/infinite-scroll-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfiniteScrollView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/scroll-story/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ScrollStory</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Status & info</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/badge/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-ring/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressRing</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Styles</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/animated-icon/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>AnimatedIcon</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/icon-element/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>IconElement</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/reveal-container/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RevealContainer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/shimmer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Shimmer</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Text</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/search-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SearchBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-field/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextField</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/verify-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>VerifyBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Windowing</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/web-window/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>WebWindow</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Global</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Advance</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-935f8a84><div class="content" data-v-935f8a84><div class="outline-marker" data-v-935f8a84></div><div class="outline-title" role="heading" aria-level="2" data-v-935f8a84>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-935f8a84><span class="visually-hidden" id="doc-outline-aria-label" data-v-935f8a84> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-935f8a84 data-v-b933a997><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _VFluent3_guide_components_shimmer_properties" data-v-39a288b8><div><h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-label="Permalink to &quot;Properties&quot;">​</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead></table></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-09de1c0f><!--[--><!--]--><!----><nav class="prev-next" data-v-09de1c0f><div class="pager" data-v-09de1c0f><!----></div><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link next" href="/VFluent3/guide/components/button/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Next page</span><span class="title" data-v-09de1c0f>Button</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>MIT Licensed</p><p class="copyright" data-v-e315a0ad>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_calendar-date-picker_properties.md\":\"DXRjmMG8\",\"guide_components_image_properties.md\":\"DGanRzCb\",\"guide_components_img-box_index.md\":\"DYtggkf_\",\"guide_components_img_emits.md\":\"BlE7jvZQ\",\"guide_components_img_index.md\":\"Bm9FiuU4\",\"guide_components_icon-element_properties.md\":\"8Oakruwc\",\"guide_components_img_properties.md\":\"B42YSocI\",\"guide_components_drawer_index.md\":\"D_vpnCpE\",\"guide_components_verify-box_emits.md\":\"DT17Iazx\",\"guide_components_calendar-date-picker_index.md\":\"BdHjrurh\",\"guide_components_rating-control_index.md\":\"Q9l5Lfrr\",\"guide_components_rating-control_properties.md\":\"DKprnl0i\",\"guide_components_calendar-view_index.md\":\"zdoRYVx1\",\"guide_components_animated-icon_index.md\":\"yZDMzCFe\",\"guide_components_calendar-date-picker_emits.md\":\"D5OkfR8j\",\"guide_components_badge_index.md\":\"Bb4crrJn\",\"guide_components_image_index.md\":\"B7X6cWAZ\",\"guide_components_slider_index.md\":\"C7zZ2d-W\",\"guide_components_radio-group_index.md\":\"CVfh3h5H\",\"guide_components_swipe-control_index.md\":\"DwrDVPc1\",\"guide_components_color-picker_emits.md\":\"BHDXVtBQ\",\"guide_components_radio_index.md\":\"90as5QGp\",\"guide_components_pagination_properties.md\":\"JUAPvcTL\",\"guide_components_persona_properties.md\":\"DUTPhPMp\",\"guide_components_combo-box_emits.md\":\"Dh5R-qEv\",\"guide_components_pivot_emits.md\":\"BTJPgNpy\",\"guide_components_pagination_index.md\":\"CnW2zAht\",\"guide_components_flip-view_properties.md\":\"BqZ4hhgU\",\"guide_components_icon-element_emits.md\":\"D5TXFdTZ\",\"guide_components_flip-view_index.md\":\"DefnDOv6\",\"guide_components_navigation-panel_index.md\":\"6mO__sSK\",\"guide_components_rating-control_emits.md\":\"blvomSeC\",\"guide_components_icon-element_index.md\":\"DQ8K7JNn\",\"guide_components_navigation-view_index.md\":\"4AQRiz1k\",\"guide_components_toggle-switch_emits.md\":\"CLGzrNut\",\"guide_components_toggle-switch_index.md\":\"61en_q9-\",\"guide_components_scroll-story_index.md\":\"Vpgb1HSV\",\"guide_components_reveal-container_index.md\":\"Cut2r4tV\",\"guide_components_search-box_emits.md\":\"-d9sWNNt\",\"guide_components_search-box_properties.md\":\"DEKFfPFw\",\"guide_components_shimmer_emits.md\":\"CTMInlI3\",\"guide_components_tag_index.md\":\"BhhxkcHn\",\"guide_components_search-box_index.md\":\"DgkrY0oY\",\"guide_components_shimmer_index.md\":\"iZlHuTxw\",\"guide_components_shimmer_properties.md\":\"CdkU1o6H\",\"guide_components_tree-view_index.md\":\"CUrwan4q\",\"guide_components_text-field_index.md\":\"CXSimJtj\",\"guide_components_text-box_index.md\":\"C5moAPfB\",\"guide_components_progress-ring_properties.md\":\"Dc08Uiff\",\"guide_components_toggle-switch_properties.md\":\"tFppK_IS\",\"guide_components_radio-group_emits.md\":\"cEDzKVnN\",\"guide_components_collapse_index.md\":\"N9Iu5-2v\",\"guide_components_image_emits.md\":\"lmlz2xJd\",\"guide_components_callout_index.md\":\"D9RU33w6\",\"guide_components_pivot_index.md\":\"B_vwQL-5\",\"guide_components_command-bar_index.md\":\"Cp4_rrGB\",\"guide_components_pagination_emits.md\":\"Dng86A22\",\"guide_components_button_index.md\":\"7sqT2MQP\",\"guide_components_info-box_properties.md\":\"BI7Nvk-E\",\"guide_components_drop-down_emits.md\":\"BE95TdKW\",\"guide_components_expander_index.md\":\"BKgcUJzQ\",\"guide_components_message-bar_index.md\":\"AEtAWlF8\",\"guide_components_menu-flyout_index.md\":\"Csa7irPj\",\"guide_components_panel_index.md\":\"CsTu0bXo\",\"guide_components_panel_properties.md\":\"BaxoCYKq\",\"guide_components_progress-bar_emits.md\":\"BcwXUpsF\",\"guide_components_progress-bar_properties.md\":\"TxiS9ZMA\",\"guide_components_progress-ring_emits.md\":\"D2Y6hIZ9\",\"guide_components_color-picker_index.md\":\"DCc4ixcU\",\"guide_components_progress-ring_index.md\":\"CPb-ZEPE\",\"guide_components_color-picker_properties.md\":\"wcXK29Vl\",\"guide_components_time-picker_index.md\":\"CQJdRRaG\",\"guide_components_drop-down_properties.md\":\"Bwlkpr1q\",\"guide_components_infinite-scroll-view_index.md\":\"yAuD807x\",\"guide_components_check-box_index.md\":\"FYgdu4oq\",\"guide_components_progress-bar_index.md\":\"D8vHQw5V\",\"guide_components_combo-box_index.md\":\"DTyu3eNd\",\"guide_components_info-box_emits.md\":\"DlEwpkkq\",\"guide_components_drop-down_index.md\":\"BZzJZQWq\",\"guide_components_list-view_index.md\":\"BoYvMzb0\",\"guide_components_verify-box_properties.md\":\"CW6W8fFf\",\"guide_components_verify-box_index.md\":\"DwSB40wR\",\"guide_index.md\":\"Bndlt3sL\",\"guide_components_web-window_index.md\":\"Bxc8vEeI\",\"index.md\":\"MTRqI42u\",\"guide_components_combo-box_properties.md\":\"AWfHzV6x\",\"guide_components_combobox_emits.md\":\"CGB6WLt8\",\"guide_components_combobox_properties.md\":\"Bja0hMou\",\"guide_components_details-list_index.md\":\"CcgOCIyt\",\"guide_components_info-box_index.md\":\"vXh-_DsL\",\"guide_components_combobox_index.md\":\"CsPkY6YB\",\"guide_components_date-picker_index.md\":\"12vmUIup\",\"guide_components_flip-view_emits.md\":\"DCheHjDj\",\"guide_components_panel_emits.md\":\"DG0REDq8\",\"guide_components_breadcrumb_index.md\":\"DyDm7PeP\",\"guide_components_radio-group_properties.md\":\"BnPxoKsQ\",\"guide_components_persona_emits.md\":\"CnsDPKRU\",\"guide_components_pivot_properties.md\":\"BmoLpPi1\",\"guide_components_persona_index.md\":\"DT00jby4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vfluent3\",\"description\":\"A Vue3 component library for Fluent UI\",\"base\":\"/VFluent3/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"VFluent3\",\"footer\":{\"message\":\"MIT Licensed\",\"copyright\":\"Copyright © Creator SN - 2022\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/\"}],\"sidebar\":[{\"text\":\"Basic input\",\"collapsed\":true,\"items\":[{\"text\":\"Button\",\"link\":\"/guide/components/button/\"},{\"text\":\"CheckBox\",\"link\":\"/guide/components/check-box/\"},{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"},{\"text\":\"Combobox\",\"link\":\"/guide/components/combobox/\"},{\"text\":\"DetailsList\",\"link\":\"/guide/components/details-list/\"},{\"text\":\"DropDown\",\"link\":\"/guide/components/drop-down/\"},{\"text\":\"Radio\",\"link\":\"/guide/components/radio/\"},{\"text\":\"RadioGroup\",\"link\":\"/guide/components/radio-group/\"},{\"text\":\"RatingControl\",\"link\":\"/guide/components/rating-control/\"},{\"text\":\"Slider\",\"link\":\"/guide/components/slider/\"},{\"text\":\"ToggleSwitch\",\"link\":\"/guide/components/toggle-switch/\"},{\"text\":\"Tag\",\"link\":\"/guide/components/tag/\"}]},{\"text\":\"Collections\",\"collapsed\":true,\"items\":[{\"text\":\"FlipView\",\"link\":\"/guide/components/flip-view/\"},{\"text\":\"ListView\",\"link\":\"/guide/components/list-view/\"},{\"text\":\"TreeView\",\"link\":\"/guide/components/tree-view/\"}]},{\"text\":\"Date & Time\",\"collapsed\":true,\"items\":[{\"text\":\"CalendarDatePicker\",\"link\":\"/guide/components/calendar-date-picker/\"},{\"text\":\"CalendarView\",\"link\":\"/guide/components/calendar-view/\"},{\"text\":\"DatePicker\",\"link\":\"/guide/components/date-picker/\"},{\"text\":\"TimePicker\",\"link\":\"/guide/components/time-picker/\"}]},{\"text\":\"Dialogs & flyouts\",\"collapsed\":true,\"items\":[{\"text\":\"Callout\",\"link\":\"/guide/components/callout/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Layout\",\"collapsed\":true,\"items\":[{\"text\":\"Collapse\",\"link\":\"/guide/components/collapse/\"},{\"text\":\"Expander\",\"link\":\"/guide/components/expander/\"},{\"text\":\"Drawer\",\"link\":\"/guide/components/drawer/\"},{\"text\":\"Panel\",\"link\":\"/guide/components/panel/\"}]},{\"text\":\"Media\",\"collapsed\":true,\"items\":[{\"text\":\"Image\",\"link\":\"/guide/components/image/\"},{\"text\":\"Img\",\"link\":\"/guide/components/img/\"},{\"text\":\"ImgBox\",\"link\":\"/guide/components/img-box/\"},{\"text\":\"Persona\",\"link\":\"/guide/components/persona/\"}]},{\"text\":\"Menu & toolbars\",\"collapsed\":true,\"items\":[{\"text\":\"CommandBar\",\"link\":\"/guide/components/command-bar/\"},{\"text\":\"MenuFlyout\",\"link\":\"/guide/components/menu-flyout/\"},{\"text\":\"SwipeControl\",\"link\":\"/guide/components/swipe-control/\"}]},{\"text\":\"Navigation\",\"collapsed\":true,\"items\":[{\"text\":\"Breadcrumb\",\"link\":\"/guide/components/breadcrumb/\"},{\"text\":\"NavigationPanel\",\"link\":\"/guide/components/navigation-panel/\"},{\"text\":\"NavigationView\",\"link\":\"/guide/components/navigation-view/\"},{\"text\":\"Pivot\",\"link\":\"/guide/components/pivot/\"},{\"text\":\"Pagination\",\"link\":\"/guide/components/pagination/\"}]},{\"text\":\"Scrolling\",\"collapsed\":true,\"items\":[{\"text\":\"InfiniteScrollView\",\"link\":\"/guide/components/infinite-scroll-view/\"},{\"text\":\"ScrollStory\",\"link\":\"/guide/components/scroll-story/\"}]},{\"text\":\"Status & info\",\"collapsed\":true,\"items\":[{\"text\":\"Badge\",\"link\":\"/guide/components/badge/\"},{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"ProgressBar\",\"link\":\"/guide/components/progress-bar/\"},{\"text\":\"ProgressRing\",\"link\":\"/guide/components/progress-ring/\"}]},{\"text\":\"Styles\",\"collapsed\":true,\"items\":[{\"text\":\"AnimatedIcon\",\"link\":\"/guide/components/animated-icon/\"},{\"text\":\"IconElement\",\"link\":\"/guide/components/icon-element/\"},{\"text\":\"RevealContainer\",\"link\":\"/guide/components/reveal-container/\"},{\"text\":\"Shimmer\",\"link\":\"/guide/components/shimmer/\"}]},{\"text\":\"Text\",\"collapsed\":true,\"items\":[{\"text\":\"SearchBox\",\"link\":\"/guide/components/search-box/\"},{\"text\":\"TextBox\",\"link\":\"/guide/components/text-box/\"},{\"text\":\"TextField\",\"link\":\"/guide/components/text-field/\"},{\"text\":\"VerifyBox\",\"link\":\"/guide/components/verify-box/\"}]},{\"text\":\"Windowing\",\"collapsed\":true,\"items\":[{\"text\":\"WebWindow\",\"link\":\"/guide/components/web-window/\"}]},{\"text\":\"Global\",\"collapsed\":true,\"items\":[{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Advance\",\"collapsed\":true,\"items\":[{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git a/guide/components/slider/index.html b/guide/components/slider/index.html
new file mode 100644
index 0000000..a6738dd
--- /dev/null
+++ b/guide/components/slider/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>Slider | vfluent3</title>
+    <meta name="description" content="A Vue3 component library for Fluent UI">
+    <meta name="generator" content="VitePress v1.0.0-rc.45">
+    <link rel="preload stylesheet" href="/VFluent3/assets/style.BabQegKX.css" as="style">
+    
+    <script type="module" src="/VFluent3/assets/app.CSutcJ2E.js"></script>
+    <link rel="preload" href="/VFluent3/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/framework.DvIFzl91.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/theme.CgqFBnN_.js">
+    <link rel="modulepreload" href="/VFluent3/assets/guide_components_slider_index.md.C7zZ2d-W.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-19c990f1><div class="wrapper" data-v-19c990f1><div class="container" data-v-19c990f1><div class="title" data-v-19c990f1><div class="VPNavBarTitle has-sidebar" data-v-19c990f1 data-v-ab179fa1><a class="title" href="/VFluent3/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>VFluent3</span><!--[--><!--]--></a></div></div><div class="content" data-v-19c990f1><div class="content-body" data-v-19c990f1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-19c990f1><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-19c990f1 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Guide</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-19c990f1 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-19c990f1 data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-19c990f1 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-19c990f1><div class="divider-line" data-v-19c990f1></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-d2ecc192><button data-v-d2ecc192>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-575e6a36><div class="curtain" data-v-575e6a36></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-575e6a36><span class="visually-hidden" id="sidebar-aria-label" data-v-575e6a36> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible has-active" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Basic input</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/button/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/check-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CheckBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/combobox/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Combobox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/details-list/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DetailsList</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drop-down/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DropDown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio-group/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RadioGroup</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/rating-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RatingControl</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/slider/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/toggle-switch/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ToggleSwitch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tag/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Tag</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Collections</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/flip-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>FlipView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/list-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ListView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tree-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TreeView</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Date & Time</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarDatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/time-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TimePicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Dialogs & flyouts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/callout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Callout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Layout</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/collapse/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Collapse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/expander/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Expander</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drawer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Panel</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Media</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/image/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Img</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ImgBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/persona/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Persona</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Menu & toolbars</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/command-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CommandBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/menu-flyout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MenuFlyout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/swipe-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SwipeControl</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Navigation</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/breadcrumb/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationPanel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pivot/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pivot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pagination/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pagination</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Scrolling</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/infinite-scroll-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfiniteScrollView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/scroll-story/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ScrollStory</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Status & info</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/badge/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-ring/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressRing</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Styles</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/animated-icon/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>AnimatedIcon</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/icon-element/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>IconElement</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/reveal-container/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RevealContainer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/shimmer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Shimmer</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Text</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/search-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SearchBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-field/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextField</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/verify-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>VerifyBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Windowing</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/web-window/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>WebWindow</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Global</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Advance</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-935f8a84><div class="content" data-v-935f8a84><div class="outline-marker" data-v-935f8a84></div><div class="outline-title" role="heading" aria-level="2" data-v-935f8a84>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-935f8a84><span class="visually-hidden" id="doc-outline-aria-label" data-v-935f8a84> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-935f8a84 data-v-b933a997><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _VFluent3_guide_components_slider_" data-v-39a288b8><div><h3 id="slider-light" tabindex="-1">Slider-Light <a class="header-anchor" href="#slider-light" aria-label="Permalink to &quot;Slider-Light&quot;">​</a></h3><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-slider</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">mininum</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">9</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">maxinum</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">30</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">showLabel</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;template v-slot=&quot;prop&quot; &gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;span&gt;{{prop.value}}&lt;/span&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-slider</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h3 id="slider-dark" tabindex="-1">Slider-Dark <a class="header-anchor" href="#slider-dark" aria-label="Permalink to &quot;Slider-Dark&quot;">​</a></h3><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-slider</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;dark&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-slider</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="slider-with-tick-mark" tabindex="-1">Slider-With-Tick-Mark <a class="header-anchor" href="#slider-with-tick-mark" aria-label="Permalink to &quot;Slider-With-Tick-Mark&quot;">​</a></h3><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-slider</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">scale</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">20</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">unit</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">2</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-slider</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="slider-with-label" tabindex="-1">Slider-With-Label <a class="header-anchor" href="#slider-with-label" aria-label="Permalink to &quot;Slider-With-Label&quot;">​</a></h3><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-slider</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">scale</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">20</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">showLabel</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">unit</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">20</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;template v-slot=&quot;prop&quot; &gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;span&gt;{{prop.value}}&lt;/span&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-slider</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h3 id="slider-with-vertical" tabindex="-1">Slider-With-Vertical <a class="header-anchor" href="#slider-with-vertical" aria-label="Permalink to &quot;Slider-With-Vertical&quot;">​</a></h3><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-slider</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">value</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">unit</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">20</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">vertical</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> @</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">change</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">change</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> @</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">click</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">click</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-slider</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>Slider: 50% Change: 0 Click: 0</p><h3 id="silder-disabled" tabindex="-1">Silder-Disabled <a class="header-anchor" href="#silder-disabled" aria-label="Permalink to &quot;Silder-Disabled&quot;">​</a></h3><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-slider</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> disabled</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-slider</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="silder-custom-style" tabindex="-1">Silder-Custom-Style <a class="header-anchor" href="#silder-custom-style" aria-label="Permalink to &quot;Silder-Custom-Style&quot;">​</a></h3><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-slider</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">value</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">150</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> showLabel</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;#2ed573&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;template v-slot=&quot;prop&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{{prop.value}}</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-slider</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">v-model/value</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">0</td><td style="text-align:center;">绑定的值</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">String(dark | light | custom)</td><td style="text-align:center;">No</td><td style="text-align:center;">system</td><td style="text-align:center;">主题颜色</td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否禁用</td></tr><tr><td style="text-align:center;">unit</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">1</td><td style="text-align:center;">一格的间隔</td></tr><tr><td style="text-align:center;">mininum</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">0</td><td style="text-align:center;">最小值</td></tr><tr><td style="text-align:center;">maxinum</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">100</td><td style="text-align:center;">最大值</td></tr><tr><td style="text-align:center;">icon</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">LocationFill</td><td style="text-align:center;">MS-icon</td></tr><tr><td style="text-align:center;">vertical</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否垂直</td></tr><tr><td style="text-align:center;">showLabel</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否显示标签</td></tr><tr><td style="text-align:center;">scale</td><td style="text-align:center;">Boolean | Number</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否显示刻度，刻度长度，如果为真则跟随unit大小</td></tr><tr><td style="text-align:center;">color</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">按钮的颜色</td></tr></tbody></table><h3 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to &quot;Events&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">事件名(Name)</th><th style="text-align:center;">参数类型(args)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">click</td><td style="text-align:center;">event</td><td style="text-align:center;">按动按钮触发函数</td></tr><tr><td style="text-align:center;">change</td><td style="text-align:center;">event</td><td style="text-align:center;">当value值改变时触发函数，默认第一个参数为value</td></tr></tbody></table><h3 id="slot" tabindex="-1">Slot <a class="header-anchor" href="#slot" aria-label="Permalink to &quot;Slot&quot;">​</a></h3><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">prop</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;{{prop.value}}&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-09de1c0f><!--[--><!--]--><!----><nav class="prev-next" data-v-09de1c0f><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link prev" href="/VFluent3/guide/components/rating-control/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Previous page</span><span class="title" data-v-09de1c0f>RatingControl</span><!--]--></a></div><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link next" href="/VFluent3/guide/components/toggle-switch/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Next page</span><span class="title" data-v-09de1c0f>ToggleSwitch</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>MIT Licensed</p><p class="copyright" data-v-e315a0ad>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_calendar-date-picker_properties.md\":\"DXRjmMG8\",\"guide_components_image_properties.md\":\"DGanRzCb\",\"guide_components_img-box_index.md\":\"DYtggkf_\",\"guide_components_img_emits.md\":\"BlE7jvZQ\",\"guide_components_img_index.md\":\"Bm9FiuU4\",\"guide_components_icon-element_properties.md\":\"8Oakruwc\",\"guide_components_img_properties.md\":\"B42YSocI\",\"guide_components_drawer_index.md\":\"D_vpnCpE\",\"guide_components_verify-box_emits.md\":\"DT17Iazx\",\"guide_components_calendar-date-picker_index.md\":\"BdHjrurh\",\"guide_components_rating-control_index.md\":\"Q9l5Lfrr\",\"guide_components_rating-control_properties.md\":\"DKprnl0i\",\"guide_components_calendar-view_index.md\":\"zdoRYVx1\",\"guide_components_animated-icon_index.md\":\"yZDMzCFe\",\"guide_components_calendar-date-picker_emits.md\":\"D5OkfR8j\",\"guide_components_badge_index.md\":\"Bb4crrJn\",\"guide_components_image_index.md\":\"B7X6cWAZ\",\"guide_components_slider_index.md\":\"C7zZ2d-W\",\"guide_components_radio-group_index.md\":\"CVfh3h5H\",\"guide_components_swipe-control_index.md\":\"DwrDVPc1\",\"guide_components_color-picker_emits.md\":\"BHDXVtBQ\",\"guide_components_radio_index.md\":\"90as5QGp\",\"guide_components_pagination_properties.md\":\"JUAPvcTL\",\"guide_components_persona_properties.md\":\"DUTPhPMp\",\"guide_components_combo-box_emits.md\":\"Dh5R-qEv\",\"guide_components_pivot_emits.md\":\"BTJPgNpy\",\"guide_components_pagination_index.md\":\"CnW2zAht\",\"guide_components_flip-view_properties.md\":\"BqZ4hhgU\",\"guide_components_icon-element_emits.md\":\"D5TXFdTZ\",\"guide_components_flip-view_index.md\":\"DefnDOv6\",\"guide_components_navigation-panel_index.md\":\"6mO__sSK\",\"guide_components_rating-control_emits.md\":\"blvomSeC\",\"guide_components_icon-element_index.md\":\"DQ8K7JNn\",\"guide_components_navigation-view_index.md\":\"4AQRiz1k\",\"guide_components_toggle-switch_emits.md\":\"CLGzrNut\",\"guide_components_toggle-switch_index.md\":\"61en_q9-\",\"guide_components_scroll-story_index.md\":\"Vpgb1HSV\",\"guide_components_reveal-container_index.md\":\"Cut2r4tV\",\"guide_components_search-box_emits.md\":\"-d9sWNNt\",\"guide_components_search-box_properties.md\":\"DEKFfPFw\",\"guide_components_shimmer_emits.md\":\"CTMInlI3\",\"guide_components_tag_index.md\":\"BhhxkcHn\",\"guide_components_search-box_index.md\":\"DgkrY0oY\",\"guide_components_shimmer_index.md\":\"iZlHuTxw\",\"guide_components_shimmer_properties.md\":\"CdkU1o6H\",\"guide_components_tree-view_index.md\":\"CUrwan4q\",\"guide_components_text-field_index.md\":\"CXSimJtj\",\"guide_components_text-box_index.md\":\"C5moAPfB\",\"guide_components_progress-ring_properties.md\":\"Dc08Uiff\",\"guide_components_toggle-switch_properties.md\":\"tFppK_IS\",\"guide_components_radio-group_emits.md\":\"cEDzKVnN\",\"guide_components_collapse_index.md\":\"N9Iu5-2v\",\"guide_components_image_emits.md\":\"lmlz2xJd\",\"guide_components_callout_index.md\":\"D9RU33w6\",\"guide_components_pivot_index.md\":\"B_vwQL-5\",\"guide_components_command-bar_index.md\":\"Cp4_rrGB\",\"guide_components_pagination_emits.md\":\"Dng86A22\",\"guide_components_button_index.md\":\"7sqT2MQP\",\"guide_components_info-box_properties.md\":\"BI7Nvk-E\",\"guide_components_drop-down_emits.md\":\"BE95TdKW\",\"guide_components_expander_index.md\":\"BKgcUJzQ\",\"guide_components_message-bar_index.md\":\"AEtAWlF8\",\"guide_components_menu-flyout_index.md\":\"Csa7irPj\",\"guide_components_panel_index.md\":\"CsTu0bXo\",\"guide_components_panel_properties.md\":\"BaxoCYKq\",\"guide_components_progress-bar_emits.md\":\"BcwXUpsF\",\"guide_components_progress-bar_properties.md\":\"TxiS9ZMA\",\"guide_components_progress-ring_emits.md\":\"D2Y6hIZ9\",\"guide_components_color-picker_index.md\":\"DCc4ixcU\",\"guide_components_progress-ring_index.md\":\"CPb-ZEPE\",\"guide_components_color-picker_properties.md\":\"wcXK29Vl\",\"guide_components_time-picker_index.md\":\"CQJdRRaG\",\"guide_components_drop-down_properties.md\":\"Bwlkpr1q\",\"guide_components_infinite-scroll-view_index.md\":\"yAuD807x\",\"guide_components_check-box_index.md\":\"FYgdu4oq\",\"guide_components_progress-bar_index.md\":\"D8vHQw5V\",\"guide_components_combo-box_index.md\":\"DTyu3eNd\",\"guide_components_info-box_emits.md\":\"DlEwpkkq\",\"guide_components_drop-down_index.md\":\"BZzJZQWq\",\"guide_components_list-view_index.md\":\"BoYvMzb0\",\"guide_components_verify-box_properties.md\":\"CW6W8fFf\",\"guide_components_verify-box_index.md\":\"DwSB40wR\",\"guide_index.md\":\"Bndlt3sL\",\"guide_components_web-window_index.md\":\"Bxc8vEeI\",\"index.md\":\"MTRqI42u\",\"guide_components_combo-box_properties.md\":\"AWfHzV6x\",\"guide_components_combobox_emits.md\":\"CGB6WLt8\",\"guide_components_combobox_properties.md\":\"Bja0hMou\",\"guide_components_details-list_index.md\":\"CcgOCIyt\",\"guide_components_info-box_index.md\":\"vXh-_DsL\",\"guide_components_combobox_index.md\":\"CsPkY6YB\",\"guide_components_date-picker_index.md\":\"12vmUIup\",\"guide_components_flip-view_emits.md\":\"DCheHjDj\",\"guide_components_panel_emits.md\":\"DG0REDq8\",\"guide_components_breadcrumb_index.md\":\"DyDm7PeP\",\"guide_components_radio-group_properties.md\":\"BnPxoKsQ\",\"guide_components_persona_emits.md\":\"CnsDPKRU\",\"guide_components_pivot_properties.md\":\"BmoLpPi1\",\"guide_components_persona_index.md\":\"DT00jby4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vfluent3\",\"description\":\"A Vue3 component library for Fluent UI\",\"base\":\"/VFluent3/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"VFluent3\",\"footer\":{\"message\":\"MIT Licensed\",\"copyright\":\"Copyright © Creator SN - 2022\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/\"}],\"sidebar\":[{\"text\":\"Basic input\",\"collapsed\":true,\"items\":[{\"text\":\"Button\",\"link\":\"/guide/components/button/\"},{\"text\":\"CheckBox\",\"link\":\"/guide/components/check-box/\"},{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"},{\"text\":\"Combobox\",\"link\":\"/guide/components/combobox/\"},{\"text\":\"DetailsList\",\"link\":\"/guide/components/details-list/\"},{\"text\":\"DropDown\",\"link\":\"/guide/components/drop-down/\"},{\"text\":\"Radio\",\"link\":\"/guide/components/radio/\"},{\"text\":\"RadioGroup\",\"link\":\"/guide/components/radio-group/\"},{\"text\":\"RatingControl\",\"link\":\"/guide/components/rating-control/\"},{\"text\":\"Slider\",\"link\":\"/guide/components/slider/\"},{\"text\":\"ToggleSwitch\",\"link\":\"/guide/components/toggle-switch/\"},{\"text\":\"Tag\",\"link\":\"/guide/components/tag/\"}]},{\"text\":\"Collections\",\"collapsed\":true,\"items\":[{\"text\":\"FlipView\",\"link\":\"/guide/components/flip-view/\"},{\"text\":\"ListView\",\"link\":\"/guide/components/list-view/\"},{\"text\":\"TreeView\",\"link\":\"/guide/components/tree-view/\"}]},{\"text\":\"Date & Time\",\"collapsed\":true,\"items\":[{\"text\":\"CalendarDatePicker\",\"link\":\"/guide/components/calendar-date-picker/\"},{\"text\":\"CalendarView\",\"link\":\"/guide/components/calendar-view/\"},{\"text\":\"DatePicker\",\"link\":\"/guide/components/date-picker/\"},{\"text\":\"TimePicker\",\"link\":\"/guide/components/time-picker/\"}]},{\"text\":\"Dialogs & flyouts\",\"collapsed\":true,\"items\":[{\"text\":\"Callout\",\"link\":\"/guide/components/callout/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Layout\",\"collapsed\":true,\"items\":[{\"text\":\"Collapse\",\"link\":\"/guide/components/collapse/\"},{\"text\":\"Expander\",\"link\":\"/guide/components/expander/\"},{\"text\":\"Drawer\",\"link\":\"/guide/components/drawer/\"},{\"text\":\"Panel\",\"link\":\"/guide/components/panel/\"}]},{\"text\":\"Media\",\"collapsed\":true,\"items\":[{\"text\":\"Image\",\"link\":\"/guide/components/image/\"},{\"text\":\"Img\",\"link\":\"/guide/components/img/\"},{\"text\":\"ImgBox\",\"link\":\"/guide/components/img-box/\"},{\"text\":\"Persona\",\"link\":\"/guide/components/persona/\"}]},{\"text\":\"Menu & toolbars\",\"collapsed\":true,\"items\":[{\"text\":\"CommandBar\",\"link\":\"/guide/components/command-bar/\"},{\"text\":\"MenuFlyout\",\"link\":\"/guide/components/menu-flyout/\"},{\"text\":\"SwipeControl\",\"link\":\"/guide/components/swipe-control/\"}]},{\"text\":\"Navigation\",\"collapsed\":true,\"items\":[{\"text\":\"Breadcrumb\",\"link\":\"/guide/components/breadcrumb/\"},{\"text\":\"NavigationPanel\",\"link\":\"/guide/components/navigation-panel/\"},{\"text\":\"NavigationView\",\"link\":\"/guide/components/navigation-view/\"},{\"text\":\"Pivot\",\"link\":\"/guide/components/pivot/\"},{\"text\":\"Pagination\",\"link\":\"/guide/components/pagination/\"}]},{\"text\":\"Scrolling\",\"collapsed\":true,\"items\":[{\"text\":\"InfiniteScrollView\",\"link\":\"/guide/components/infinite-scroll-view/\"},{\"text\":\"ScrollStory\",\"link\":\"/guide/components/scroll-story/\"}]},{\"text\":\"Status & info\",\"collapsed\":true,\"items\":[{\"text\":\"Badge\",\"link\":\"/guide/components/badge/\"},{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"ProgressBar\",\"link\":\"/guide/components/progress-bar/\"},{\"text\":\"ProgressRing\",\"link\":\"/guide/components/progress-ring/\"}]},{\"text\":\"Styles\",\"collapsed\":true,\"items\":[{\"text\":\"AnimatedIcon\",\"link\":\"/guide/components/animated-icon/\"},{\"text\":\"IconElement\",\"link\":\"/guide/components/icon-element/\"},{\"text\":\"RevealContainer\",\"link\":\"/guide/components/reveal-container/\"},{\"text\":\"Shimmer\",\"link\":\"/guide/components/shimmer/\"}]},{\"text\":\"Text\",\"collapsed\":true,\"items\":[{\"text\":\"SearchBox\",\"link\":\"/guide/components/search-box/\"},{\"text\":\"TextBox\",\"link\":\"/guide/components/text-box/\"},{\"text\":\"TextField\",\"link\":\"/guide/components/text-field/\"},{\"text\":\"VerifyBox\",\"link\":\"/guide/components/verify-box/\"}]},{\"text\":\"Windowing\",\"collapsed\":true,\"items\":[{\"text\":\"WebWindow\",\"link\":\"/guide/components/web-window/\"}]},{\"text\":\"Global\",\"collapsed\":true,\"items\":[{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Advance\",\"collapsed\":true,\"items\":[{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git a/guide/components/swipe-control/index.html b/guide/components/swipe-control/index.html
new file mode 100644
index 0000000..de93031
--- /dev/null
+++ b/guide/components/swipe-control/index.html
@@ -0,0 +1,148 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>SwipeControl | vfluent3</title>
+    <meta name="description" content="A Vue3 component library for Fluent UI">
+    <meta name="generator" content="VitePress v1.0.0-rc.45">
+    <link rel="preload stylesheet" href="/VFluent3/assets/style.BabQegKX.css" as="style">
+    
+    <script type="module" src="/VFluent3/assets/app.CSutcJ2E.js"></script>
+    <link rel="preload" href="/VFluent3/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/framework.DvIFzl91.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/theme.CgqFBnN_.js">
+    <link rel="modulepreload" href="/VFluent3/assets/guide_components_swipe-control_index.md.DwrDVPc1.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-19c990f1><div class="wrapper" data-v-19c990f1><div class="container" data-v-19c990f1><div class="title" data-v-19c990f1><div class="VPNavBarTitle has-sidebar" data-v-19c990f1 data-v-ab179fa1><a class="title" href="/VFluent3/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>VFluent3</span><!--[--><!--]--></a></div></div><div class="content" data-v-19c990f1><div class="content-body" data-v-19c990f1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-19c990f1><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-19c990f1 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Guide</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-19c990f1 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-19c990f1 data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-19c990f1 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-19c990f1><div class="divider-line" data-v-19c990f1></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-d2ecc192><button data-v-d2ecc192>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-575e6a36><div class="curtain" data-v-575e6a36></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-575e6a36><span class="visually-hidden" id="sidebar-aria-label" data-v-575e6a36> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Basic input</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/button/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/check-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CheckBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/combobox/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Combobox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/details-list/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DetailsList</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drop-down/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DropDown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio-group/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RadioGroup</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/rating-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RatingControl</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/slider/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/toggle-switch/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ToggleSwitch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tag/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Tag</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Collections</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/flip-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>FlipView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/list-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ListView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tree-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TreeView</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Date & Time</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarDatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/time-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TimePicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Dialogs & flyouts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/callout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Callout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Layout</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/collapse/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Collapse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/expander/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Expander</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drawer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Panel</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Media</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/image/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Img</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ImgBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/persona/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Persona</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible has-active" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Menu & toolbars</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/command-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CommandBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/menu-flyout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MenuFlyout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/swipe-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SwipeControl</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Navigation</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/breadcrumb/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationPanel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pivot/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pivot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pagination/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pagination</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Scrolling</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/infinite-scroll-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfiniteScrollView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/scroll-story/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ScrollStory</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Status & info</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/badge/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-ring/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressRing</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Styles</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/animated-icon/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>AnimatedIcon</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/icon-element/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>IconElement</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/reveal-container/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RevealContainer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/shimmer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Shimmer</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Text</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/search-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SearchBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-field/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextField</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/verify-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>VerifyBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Windowing</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/web-window/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>WebWindow</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Global</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Advance</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-935f8a84><div class="content" data-v-935f8a84><div class="outline-marker" data-v-935f8a84></div><div class="outline-title" role="heading" aria-level="2" data-v-935f8a84>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-935f8a84><span class="visually-hidden" id="doc-outline-aria-label" data-v-935f8a84> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-935f8a84 data-v-b933a997><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _VFluent3_guide_components_swipe-control_" data-v-39a288b8><div><h3 id="swipecontrol-demo" tabindex="-1">SwipeControl-DEMO <a class="header-anchor" href="#swipecontrol-demo" aria-label="Permalink to &quot;SwipeControl-DEMO&quot;">​</a></h3><hr><div class="fv-SwipeControl light"><div class="fv-swiper-container swiper-container"><div class="swiper-wrapper"><div class="fv-SwipeControl-left swiper-slide"><!--[--><!--]--></div><div class="fv-SwipeControl-main swiper-slide" style="padding:0 10px;"><!--[--> Swipe Control <!--]--></div><div class="fv-SwipeControl-right swiper-slide"><!--[--><div class="delete fv-SwipeControl-btn" style="width:;"><div class="fv-SwipeControl-btn-content-block" style="width:60px;"><i style="" class="ms-Icon--Delete ms-Icon"></i><p style="display:none;margin-left:5px;"></p></div></div><!--]--></div></div></div></div><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-SwipeControl</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-SwipeControl</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>Slide Side</p><div><div class="fv-SwipeControl light" style="width:80%;border:white solid thin;"><div class="fv-swiper-container swiper-container"><div class="swiper-wrapper"><div class="fv-SwipeControl-left swiper-slide"><!--[--><div class="tool fv-SwipeControl-btn" style="width:30px;"><div class="fv-SwipeControl-btn-content-block" style="width:30px;"><i style="" class="ms-Icon--QuietHours ms-Icon"></i><p style="display:none;margin-left:5px;"></p></div></div><div class="info fv-SwipeControl-btn" style="width:;"><div class="fv-SwipeControl-btn-content-block" style="width:30px;"><i style="" class="ms-Icon--Info ms-Icon"></i><p style="display:none;margin-left:5px;"></p></div></div><!--]--></div><div class="fv-SwipeControl-main swiper-slide" style="padding:0 10px;"><!--[--><strong style="color:rgba(0, 98, 158, 1);">Only Right Side</strong><!--]--></div><div class="fv-SwipeControl-right swiper-slide"><!--[--><div class="delete fv-SwipeControl-btn" style="width:;"><div class="fv-SwipeControl-btn-content-block" style="width:60px;"><i style="" class="ms-Icon--Delete ms-Icon"></i><p style="display:none;margin-left:5px;"></p></div></div><!--]--></div></div></div></div></div><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-SwipeControl</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">disabledLeft</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">disabledLeft</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">leftOptions</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">leftOptions</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">80</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">border</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">white</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> solid</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> thin</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;strong :style=&quot;{color: disabledLeft ? &#39;rgba(0, 98, 158, 1)&#39; : &#39;rgba(248, 176, 75, 1)&#39;}&quot;&gt;{{disabledLeft ? &#39;Only Right Side&#39; : &#39;Both Side&#39;}}&lt;/strong&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-SwipeControl</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ul><li>leftOptions</li></ul><div class="language-javascript vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    data</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> () {</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">        return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            leftOptions: [</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                    icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;QuietHours&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">                    func</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {},</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                    type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;tool&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                    icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Info&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">                    func</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {},</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                    type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;info&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            ]</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br></div></div><div class="fv-Button light" style="width:200px;margin-top:5px;"><div class="shadow fv-button-main-container" style="border-radius:3px;"><div class="fv-RevealContainer light fv-button-reveal-container" style="border-radius:3px;"><svg style="display:none;" width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> &gt; <defs><radialGradient cx="50%" cy="50%" r="120" gradientUnits="userSpaceOnUse" spreadMethod="pad" id="backgroundG_dadf72d7e0bef6bd761947532142fb82" gradientTransform="matrix(1 0 0 1 0.000 0.000)"><stop offset="0" stop-color="rgba(121, 119, 117, 0.1)"></stop><stop offset="1" stop-color="rgba(255, 255, 255, 0)"></stop><!--[--><!--]--></radialGradient><radialGradient cx="50%" cy="50%" r="80" gradientUnits="userSpaceOnUse" spreadMethod="pad" id="borderG_dadf72d7e0bef6bd761947532142fb82" gradientTransform="matrix(1 0 0 1 0.000 0.000)"><stop offset="0" stop-color="rgba(121, 119, 117, 0.6)"></stop><stop offset="1" stop-color="rgba(255, 255, 255, 0)"></stop><!--[--><!--]--></radialGradient><radialGradient cx="50%" cy="50%" r="0" gradientUnits="userSpaceOnUse" spreadMethod="pad" id="clickG_dadf72d7e0bef6bd761947532142fb82" gradientTransform="matrix(1 0 0 1 0.000 0.000)"><stop offset="0" stop-color="rgba(255, 255, 255, 0)"></stop><stop offset="0.33" stop-color="rgba(121, 119, 117, 0.1)"></stop><stop offset="0.66" stop-color="rgba(255, 255, 255, 0)"></stop><stop offset="1" stop-color="rgba(255, 255, 255, 0)"></stop></radialGradient></defs><rect x="0.5" y="0.5" rx="3" ry="3" style="box-sizing:border-box;width:-1px;height:-1px;stroke:url(#borderG_dadf72d7e0bef6bd761947532142fb82);fill:transparent;stroke-width:1;"></rect><rect style="display:none;stroke:transparent;box-sizing:border-box;width:-1px;height:-1px;fill:transparent;stroke-width:1;" x="0.5" y="0.5" rx="3" ry="3"></rect></svg></div><div class="fv-button-container" style="background:;background-repeat:no-repeat;background-clip:content-box;border-color:;border-width:1px;border-radius:3px;"><span class="fv-btn-content-block" style="color:;font-size:13.3px;font-weight:normal;"><i class="ms-Icon-- ms-Icon" style="margin-right:;"></i><!--[-->Only Right Side<!--]--></span></div></div></div><h3 id="swipecontrol-customize-options" tabindex="-1">SwipeControl-Customize Options <a class="header-anchor" href="#swipecontrol-customize-options" aria-label="Permalink to &quot;SwipeControl-Customize Options&quot;">​</a></h3><hr><div class="fv-SwipeControl light" style="width:100%;border:white solid thin;"><div class="fv-swiper-container swiper-container"><div class="swiper-wrapper"><div class="fv-SwipeControl-left swiper-slide"><!--[--><div class="tool fv-SwipeControl-btn" style="width:30px;"><div class="fv-SwipeControl-btn-content-block" style="width:30px;"><i style="" class="ms-Icon--QuietHours ms-Icon"></i><p style="display:none;margin-left:5px;"></p></div></div><div class="info fv-SwipeControl-btn" style="width:;"><div class="fv-SwipeControl-btn-content-block" style="width:30px;"><i style="" class="ms-Icon--Info ms-Icon"></i><p style="display:none;margin-left:5px;"></p></div></div><!--]--></div><div class="fv-SwipeControl-main swiper-slide" style="padding:0 10px;"><!--[--> Swipe Control <!--]--></div><div class="fv-SwipeControl-right swiper-slide"><!--[--><div class="warning fv-SwipeControl-btn" style="width:30px;"><div class="fv-SwipeControl-btn-content-block" style="width:30px;"><i style="" class="ms-Icon--Pin ms-Icon"></i><p style="display:none;margin-left:5px;"></p></div></div><div class="delete fv-SwipeControl-btn" style="width:;"><div class="fv-SwipeControl-btn-content-block" style="width:30px;"><i style="" class="ms-Icon--Delete ms-Icon"></i><p style="display:none;margin-left:5px;"></p></div></div><!--]--></div></div></div></div><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-SwipeControl</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">leftOptions</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">leftOptions</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">options</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">options</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">disabledLeft</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">border</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">white</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> solid</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> thin</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-SwipeControl</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><ul><li>options</li><li>leftOptions</li></ul><div class="language-javascript vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    data</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> () {</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">        return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            options: [</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                    icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Pin&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">                    func</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {},</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                    type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;warning&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                    icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Delete&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">                    func</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {},</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                    type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;delete&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            ],</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            leftOptions: [</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                    icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;QuietHours&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">                    func</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {},</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                    type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;tool&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                    icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Info&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">                    func</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {},</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                    type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;info&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            ]</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br></div></div><h3 id="swipecontrol-with-listview" tabindex="-1">SwipeControl-With ListView <a class="header-anchor" href="#swipecontrol-with-listview" aria-label="Permalink to &quot;SwipeControl-With ListView&quot;">​</a></h3><hr><div style="width:100%;height:300px;padding:15px;"><div class="fv-ListView global"><div class="list-view-header"><!--[--><!--]--></div><div class="list-view-container"><!--[--><!--]--></div><div class="list-view-footer"><!--[--><!--]--></div><!----></div></div><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-ListView</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">items</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> itemPadding</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;0&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;template v-slot:listItem=&quot;x&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;fv-swipe-control v-if=&quot;x.item.type != &#39;header&#39;&quot; :value=&quot;x.item&quot; :leftOptions=&quot;leftOptions&quot; :options=&quot;listOptions&quot; :disabledLeft=&quot;false&quot; style=&quot;width: 100%; height: 100%;&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            {{x.item.name}}</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;/fv-swipe-control&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        &lt;p v-else style=&quot;padding-left: 10px;&quot;&gt;{{x.item.name}}&lt;/p&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-ListView</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><ul><li>items</li><li>options</li><li>leftOptions</li></ul><div class="language-javascript vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    data</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> () {</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">        return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            items: [</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;fruitsHeader&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Fruits&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;header&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;apple&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Apple&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;banana&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Banana&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;orange&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Orange&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, disabled: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;grape&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Grape&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;divider_1&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;divider&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;vegetablesHeader&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Vegetables&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;header&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;broccoli&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Broccoli&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;carrot&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Carrot&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                { key: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;lettuce&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Lettuce&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            ],</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            leftOptions: [</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                    icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;QuietHours&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">                    func</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {},</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                    type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;tool&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                    icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Info&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">                    func</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {},</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                    type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;info&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            ],</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            listOptions: [</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                    icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Pin&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">                    func</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {},</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                    type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;warning&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                    icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Delete&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                    func: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.deleteItem,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                    type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;delete&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            ],</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    methods: {</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">        deleteItem</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">item</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">            let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> index </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.items.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">findIndex</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">it</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> it.key </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">===</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> item.key);</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(index, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.items[index].key, item.key);</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">            if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">!</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">item.disabled)</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">                this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.items.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">splice</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(index, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br></div></div><h3 id="swipecontrol-disabled" tabindex="-1">SwipeControl-Disabled <a class="header-anchor" href="#swipecontrol-disabled" aria-label="Permalink to &quot;SwipeControl-Disabled&quot;">​</a></h3><hr><div class="fv-SwipeControl light" style="width:100%;border:white solid thin;"><div class="fv-swiper-container swiper-container"><div class="swiper-wrapper"><div class="fv-SwipeControl-left swiper-slide"><!--[--><div class="tool fv-SwipeControl-btn" style="width:30px;"><div class="fv-SwipeControl-btn-content-block" style="width:30px;"><i style="" class="ms-Icon--QuietHours ms-Icon"></i><p style="display:none;margin-left:5px;"></p></div></div><div class="info fv-SwipeControl-btn" style="width:;"><div class="fv-SwipeControl-btn-content-block" style="width:30px;"><i style="" class="ms-Icon--Info ms-Icon"></i><p style="display:none;margin-left:5px;"></p></div></div><!--]--></div><div class="fv-SwipeControl-main swiper-slide" style="padding:0 10px;"><!--[--> Swipe Control <!--]--></div><div class="fv-SwipeControl-right swiper-slide"><!--[--><div class="warning fv-SwipeControl-btn" style="width:30px;"><div class="fv-SwipeControl-btn-content-block" style="width:30px;"><i style="" class="ms-Icon--Pin ms-Icon"></i><p style="display:none;margin-left:5px;"></p></div></div><div class="delete fv-SwipeControl-btn" style="width:;"><div class="fv-SwipeControl-btn-content-block" style="width:30px;"><i style="" class="ms-Icon--Delete ms-Icon"></i><p style="display:none;margin-left:5px;"></p></div></div><!--]--></div></div></div></div><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-SwipeControl</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">leftOptions</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">leftOptions</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">options</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">options</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">disabledLeft</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> disabled</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">border</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">white</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> solid</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> thin</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-SwipeControl</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">value</td><td style="text-align:center;">Object</td><td style="text-align:center;">No</td><td style="text-align:center;">{}</td><td style="text-align:center;">当前绑定的项目, 作为<code>options</code>中的<code>func</code>参数</td></tr><tr><td style="text-align:center;">minOpWidth</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">60</td><td style="text-align:center;">操作按钮区域最小宽度</td></tr><tr><td style="text-align:center;">maxOpWidth</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">300</td><td style="text-align:center;">操作按钮区域最大宽度</td></tr><tr><td style="text-align:center;">leftOptions</td><td style="text-align:center;">Array</td><td style="text-align:center;">No</td><td style="text-align:center;">[]</td><td style="text-align:center;">左侧操作按钮选项</td></tr><tr><td style="text-align:center;">options</td><td style="text-align:center;">Array</td><td style="text-align:center;">No</td><td style="text-align:center;">[{icon: &#39;Delete&#39;}]</td><td style="text-align:center;">右侧操作按钮选项</td></tr><tr><td style="text-align:center;">itemPadding</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">0 10px</td><td style="text-align:center;">主体内容内边距</td></tr><tr><td style="text-align:center;">disabledLeft</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">true</td><td style="text-align:center;">禁用左侧操作按钮</td></tr><tr><td style="text-align:center;">disabledRight</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">禁用右侧操作按钮</td></tr><tr><td style="text-align:center;">disabledLeftFull</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">true</td><td style="text-align:center;">禁用左滑到底</td></tr><tr><td style="text-align:center;">disabledRightFull</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">禁用右滑到底</td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">禁用</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">system</td><td style="text-align:center;">主题样式, 包含<code>light</code>, <code>dark</code>, <code>system</code>, <code>custom</code>几种样式</td></tr></tbody></table><h3 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to &quot;Events&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">事件名(Name)</th><th style="text-align:center;">参数类型(args)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">status-change</td><td style="text-align:center;">String</td><td style="text-align:center;">内部滑动状态, 包含<code>normal</code>, <code>left</code>, <code>right</code>, <code>leftFull</code>, <code>rightFull</code></td></tr></tbody></table><h3 id="slot" tabindex="-1">Slot <a class="header-anchor" href="#slot" aria-label="Permalink to &quot;Slot&quot;">​</a></h3><hr><ol><li>Default</li></ol><p>自定义主体内容</p><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="data" tabindex="-1">Data <a class="header-anchor" href="#data" aria-label="Permalink to &quot;Data&quot;">​</a></h3><hr><ol><li>options 及 leftOptions</li></ol><p>其中<code>type</code>包含<code>info</code>, <code>correct</code>, <code>warning</code>, <code>tool</code>, <code>delete</code>几种预设样式.</p><div class="language-javascript vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">options </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [{icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, disabled: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}]</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">//e.g.//</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">options</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: [</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;QuietHours&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">        func</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {},</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;tool&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Info&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">        func</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {},</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;info&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><p><strong>其中</strong> <code>icon</code>, <code>text</code>, <code>disabled</code>, <code>type</code>属性支持函数式声明.</p></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-09de1c0f><!--[--><!--]--><!----><nav class="prev-next" data-v-09de1c0f><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link prev" href="/VFluent3/guide/components/menu-flyout/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Previous page</span><span class="title" data-v-09de1c0f>MenuFlyout</span><!--]--></a></div><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link next" href="/VFluent3/guide/components/breadcrumb/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Next page</span><span class="title" data-v-09de1c0f>Breadcrumb</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>MIT Licensed</p><p class="copyright" data-v-e315a0ad>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_calendar-date-picker_properties.md\":\"DXRjmMG8\",\"guide_components_image_properties.md\":\"DGanRzCb\",\"guide_components_img-box_index.md\":\"DYtggkf_\",\"guide_components_img_emits.md\":\"BlE7jvZQ\",\"guide_components_img_index.md\":\"Bm9FiuU4\",\"guide_components_icon-element_properties.md\":\"8Oakruwc\",\"guide_components_img_properties.md\":\"B42YSocI\",\"guide_components_drawer_index.md\":\"D_vpnCpE\",\"guide_components_verify-box_emits.md\":\"DT17Iazx\",\"guide_components_calendar-date-picker_index.md\":\"BdHjrurh\",\"guide_components_rating-control_index.md\":\"Q9l5Lfrr\",\"guide_components_rating-control_properties.md\":\"DKprnl0i\",\"guide_components_calendar-view_index.md\":\"zdoRYVx1\",\"guide_components_animated-icon_index.md\":\"yZDMzCFe\",\"guide_components_calendar-date-picker_emits.md\":\"D5OkfR8j\",\"guide_components_badge_index.md\":\"Bb4crrJn\",\"guide_components_image_index.md\":\"B7X6cWAZ\",\"guide_components_slider_index.md\":\"C7zZ2d-W\",\"guide_components_radio-group_index.md\":\"CVfh3h5H\",\"guide_components_swipe-control_index.md\":\"DwrDVPc1\",\"guide_components_color-picker_emits.md\":\"BHDXVtBQ\",\"guide_components_radio_index.md\":\"90as5QGp\",\"guide_components_pagination_properties.md\":\"JUAPvcTL\",\"guide_components_persona_properties.md\":\"DUTPhPMp\",\"guide_components_combo-box_emits.md\":\"Dh5R-qEv\",\"guide_components_pivot_emits.md\":\"BTJPgNpy\",\"guide_components_pagination_index.md\":\"CnW2zAht\",\"guide_components_flip-view_properties.md\":\"BqZ4hhgU\",\"guide_components_icon-element_emits.md\":\"D5TXFdTZ\",\"guide_components_flip-view_index.md\":\"DefnDOv6\",\"guide_components_navigation-panel_index.md\":\"6mO__sSK\",\"guide_components_rating-control_emits.md\":\"blvomSeC\",\"guide_components_icon-element_index.md\":\"DQ8K7JNn\",\"guide_components_navigation-view_index.md\":\"4AQRiz1k\",\"guide_components_toggle-switch_emits.md\":\"CLGzrNut\",\"guide_components_toggle-switch_index.md\":\"61en_q9-\",\"guide_components_scroll-story_index.md\":\"Vpgb1HSV\",\"guide_components_reveal-container_index.md\":\"Cut2r4tV\",\"guide_components_search-box_emits.md\":\"-d9sWNNt\",\"guide_components_search-box_properties.md\":\"DEKFfPFw\",\"guide_components_shimmer_emits.md\":\"CTMInlI3\",\"guide_components_tag_index.md\":\"BhhxkcHn\",\"guide_components_search-box_index.md\":\"DgkrY0oY\",\"guide_components_shimmer_index.md\":\"iZlHuTxw\",\"guide_components_shimmer_properties.md\":\"CdkU1o6H\",\"guide_components_tree-view_index.md\":\"CUrwan4q\",\"guide_components_text-field_index.md\":\"CXSimJtj\",\"guide_components_text-box_index.md\":\"C5moAPfB\",\"guide_components_progress-ring_properties.md\":\"Dc08Uiff\",\"guide_components_toggle-switch_properties.md\":\"tFppK_IS\",\"guide_components_radio-group_emits.md\":\"cEDzKVnN\",\"guide_components_collapse_index.md\":\"N9Iu5-2v\",\"guide_components_image_emits.md\":\"lmlz2xJd\",\"guide_components_callout_index.md\":\"D9RU33w6\",\"guide_components_pivot_index.md\":\"B_vwQL-5\",\"guide_components_command-bar_index.md\":\"Cp4_rrGB\",\"guide_components_pagination_emits.md\":\"Dng86A22\",\"guide_components_button_index.md\":\"7sqT2MQP\",\"guide_components_info-box_properties.md\":\"BI7Nvk-E\",\"guide_components_drop-down_emits.md\":\"BE95TdKW\",\"guide_components_expander_index.md\":\"BKgcUJzQ\",\"guide_components_message-bar_index.md\":\"AEtAWlF8\",\"guide_components_menu-flyout_index.md\":\"Csa7irPj\",\"guide_components_panel_index.md\":\"CsTu0bXo\",\"guide_components_panel_properties.md\":\"BaxoCYKq\",\"guide_components_progress-bar_emits.md\":\"BcwXUpsF\",\"guide_components_progress-bar_properties.md\":\"TxiS9ZMA\",\"guide_components_progress-ring_emits.md\":\"D2Y6hIZ9\",\"guide_components_color-picker_index.md\":\"DCc4ixcU\",\"guide_components_progress-ring_index.md\":\"CPb-ZEPE\",\"guide_components_color-picker_properties.md\":\"wcXK29Vl\",\"guide_components_time-picker_index.md\":\"CQJdRRaG\",\"guide_components_drop-down_properties.md\":\"Bwlkpr1q\",\"guide_components_infinite-scroll-view_index.md\":\"yAuD807x\",\"guide_components_check-box_index.md\":\"FYgdu4oq\",\"guide_components_progress-bar_index.md\":\"D8vHQw5V\",\"guide_components_combo-box_index.md\":\"DTyu3eNd\",\"guide_components_info-box_emits.md\":\"DlEwpkkq\",\"guide_components_drop-down_index.md\":\"BZzJZQWq\",\"guide_components_list-view_index.md\":\"BoYvMzb0\",\"guide_components_verify-box_properties.md\":\"CW6W8fFf\",\"guide_components_verify-box_index.md\":\"DwSB40wR\",\"guide_index.md\":\"Bndlt3sL\",\"guide_components_web-window_index.md\":\"Bxc8vEeI\",\"index.md\":\"MTRqI42u\",\"guide_components_combo-box_properties.md\":\"AWfHzV6x\",\"guide_components_combobox_emits.md\":\"CGB6WLt8\",\"guide_components_combobox_properties.md\":\"Bja0hMou\",\"guide_components_details-list_index.md\":\"CcgOCIyt\",\"guide_components_info-box_index.md\":\"vXh-_DsL\",\"guide_components_combobox_index.md\":\"CsPkY6YB\",\"guide_components_date-picker_index.md\":\"12vmUIup\",\"guide_components_flip-view_emits.md\":\"DCheHjDj\",\"guide_components_panel_emits.md\":\"DG0REDq8\",\"guide_components_breadcrumb_index.md\":\"DyDm7PeP\",\"guide_components_radio-group_properties.md\":\"BnPxoKsQ\",\"guide_components_persona_emits.md\":\"CnsDPKRU\",\"guide_components_pivot_properties.md\":\"BmoLpPi1\",\"guide_components_persona_index.md\":\"DT00jby4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vfluent3\",\"description\":\"A Vue3 component library for Fluent UI\",\"base\":\"/VFluent3/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"VFluent3\",\"footer\":{\"message\":\"MIT Licensed\",\"copyright\":\"Copyright © Creator SN - 2022\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/\"}],\"sidebar\":[{\"text\":\"Basic input\",\"collapsed\":true,\"items\":[{\"text\":\"Button\",\"link\":\"/guide/components/button/\"},{\"text\":\"CheckBox\",\"link\":\"/guide/components/check-box/\"},{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"},{\"text\":\"Combobox\",\"link\":\"/guide/components/combobox/\"},{\"text\":\"DetailsList\",\"link\":\"/guide/components/details-list/\"},{\"text\":\"DropDown\",\"link\":\"/guide/components/drop-down/\"},{\"text\":\"Radio\",\"link\":\"/guide/components/radio/\"},{\"text\":\"RadioGroup\",\"link\":\"/guide/components/radio-group/\"},{\"text\":\"RatingControl\",\"link\":\"/guide/components/rating-control/\"},{\"text\":\"Slider\",\"link\":\"/guide/components/slider/\"},{\"text\":\"ToggleSwitch\",\"link\":\"/guide/components/toggle-switch/\"},{\"text\":\"Tag\",\"link\":\"/guide/components/tag/\"}]},{\"text\":\"Collections\",\"collapsed\":true,\"items\":[{\"text\":\"FlipView\",\"link\":\"/guide/components/flip-view/\"},{\"text\":\"ListView\",\"link\":\"/guide/components/list-view/\"},{\"text\":\"TreeView\",\"link\":\"/guide/components/tree-view/\"}]},{\"text\":\"Date & Time\",\"collapsed\":true,\"items\":[{\"text\":\"CalendarDatePicker\",\"link\":\"/guide/components/calendar-date-picker/\"},{\"text\":\"CalendarView\",\"link\":\"/guide/components/calendar-view/\"},{\"text\":\"DatePicker\",\"link\":\"/guide/components/date-picker/\"},{\"text\":\"TimePicker\",\"link\":\"/guide/components/time-picker/\"}]},{\"text\":\"Dialogs & flyouts\",\"collapsed\":true,\"items\":[{\"text\":\"Callout\",\"link\":\"/guide/components/callout/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Layout\",\"collapsed\":true,\"items\":[{\"text\":\"Collapse\",\"link\":\"/guide/components/collapse/\"},{\"text\":\"Expander\",\"link\":\"/guide/components/expander/\"},{\"text\":\"Drawer\",\"link\":\"/guide/components/drawer/\"},{\"text\":\"Panel\",\"link\":\"/guide/components/panel/\"}]},{\"text\":\"Media\",\"collapsed\":true,\"items\":[{\"text\":\"Image\",\"link\":\"/guide/components/image/\"},{\"text\":\"Img\",\"link\":\"/guide/components/img/\"},{\"text\":\"ImgBox\",\"link\":\"/guide/components/img-box/\"},{\"text\":\"Persona\",\"link\":\"/guide/components/persona/\"}]},{\"text\":\"Menu & toolbars\",\"collapsed\":true,\"items\":[{\"text\":\"CommandBar\",\"link\":\"/guide/components/command-bar/\"},{\"text\":\"MenuFlyout\",\"link\":\"/guide/components/menu-flyout/\"},{\"text\":\"SwipeControl\",\"link\":\"/guide/components/swipe-control/\"}]},{\"text\":\"Navigation\",\"collapsed\":true,\"items\":[{\"text\":\"Breadcrumb\",\"link\":\"/guide/components/breadcrumb/\"},{\"text\":\"NavigationPanel\",\"link\":\"/guide/components/navigation-panel/\"},{\"text\":\"NavigationView\",\"link\":\"/guide/components/navigation-view/\"},{\"text\":\"Pivot\",\"link\":\"/guide/components/pivot/\"},{\"text\":\"Pagination\",\"link\":\"/guide/components/pagination/\"}]},{\"text\":\"Scrolling\",\"collapsed\":true,\"items\":[{\"text\":\"InfiniteScrollView\",\"link\":\"/guide/components/infinite-scroll-view/\"},{\"text\":\"ScrollStory\",\"link\":\"/guide/components/scroll-story/\"}]},{\"text\":\"Status & info\",\"collapsed\":true,\"items\":[{\"text\":\"Badge\",\"link\":\"/guide/components/badge/\"},{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"ProgressBar\",\"link\":\"/guide/components/progress-bar/\"},{\"text\":\"ProgressRing\",\"link\":\"/guide/components/progress-ring/\"}]},{\"text\":\"Styles\",\"collapsed\":true,\"items\":[{\"text\":\"AnimatedIcon\",\"link\":\"/guide/components/animated-icon/\"},{\"text\":\"IconElement\",\"link\":\"/guide/components/icon-element/\"},{\"text\":\"RevealContainer\",\"link\":\"/guide/components/reveal-container/\"},{\"text\":\"Shimmer\",\"link\":\"/guide/components/shimmer/\"}]},{\"text\":\"Text\",\"collapsed\":true,\"items\":[{\"text\":\"SearchBox\",\"link\":\"/guide/components/search-box/\"},{\"text\":\"TextBox\",\"link\":\"/guide/components/text-box/\"},{\"text\":\"TextField\",\"link\":\"/guide/components/text-field/\"},{\"text\":\"VerifyBox\",\"link\":\"/guide/components/verify-box/\"}]},{\"text\":\"Windowing\",\"collapsed\":true,\"items\":[{\"text\":\"WebWindow\",\"link\":\"/guide/components/web-window/\"}]},{\"text\":\"Global\",\"collapsed\":true,\"items\":[{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Advance\",\"collapsed\":true,\"items\":[{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git a/guide/components/tag/index.html b/guide/components/tag/index.html
new file mode 100644
index 0000000..e988cb6
--- /dev/null
+++ b/guide/components/tag/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>Tag | vfluent3</title>
+    <meta name="description" content="A Vue3 component library for Fluent UI">
+    <meta name="generator" content="VitePress v1.0.0-rc.45">
+    <link rel="preload stylesheet" href="/VFluent3/assets/style.BabQegKX.css" as="style">
+    
+    <script type="module" src="/VFluent3/assets/app.CSutcJ2E.js"></script>
+    <link rel="preload" href="/VFluent3/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/framework.DvIFzl91.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/theme.CgqFBnN_.js">
+    <link rel="modulepreload" href="/VFluent3/assets/guide_components_tag_index.md.BhhxkcHn.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-19c990f1><div class="wrapper" data-v-19c990f1><div class="container" data-v-19c990f1><div class="title" data-v-19c990f1><div class="VPNavBarTitle has-sidebar" data-v-19c990f1 data-v-ab179fa1><a class="title" href="/VFluent3/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>VFluent3</span><!--[--><!--]--></a></div></div><div class="content" data-v-19c990f1><div class="content-body" data-v-19c990f1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-19c990f1><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-19c990f1 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Guide</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-19c990f1 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-19c990f1 data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-19c990f1 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-19c990f1><div class="divider-line" data-v-19c990f1></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-d2ecc192><button data-v-d2ecc192>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-575e6a36><div class="curtain" data-v-575e6a36></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-575e6a36><span class="visually-hidden" id="sidebar-aria-label" data-v-575e6a36> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible has-active" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Basic input</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/button/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/check-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CheckBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/combobox/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Combobox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/details-list/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DetailsList</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drop-down/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DropDown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio-group/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RadioGroup</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/rating-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RatingControl</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/slider/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/toggle-switch/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ToggleSwitch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tag/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Tag</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Collections</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/flip-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>FlipView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/list-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ListView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tree-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TreeView</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Date & Time</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarDatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/time-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TimePicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Dialogs & flyouts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/callout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Callout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Layout</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/collapse/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Collapse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/expander/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Expander</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drawer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Panel</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Media</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/image/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Img</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ImgBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/persona/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Persona</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Menu & toolbars</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/command-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CommandBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/menu-flyout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MenuFlyout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/swipe-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SwipeControl</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Navigation</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/breadcrumb/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationPanel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pivot/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pivot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pagination/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pagination</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Scrolling</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/infinite-scroll-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfiniteScrollView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/scroll-story/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ScrollStory</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Status & info</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/badge/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-ring/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressRing</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Styles</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/animated-icon/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>AnimatedIcon</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/icon-element/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>IconElement</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/reveal-container/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RevealContainer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/shimmer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Shimmer</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Text</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/search-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SearchBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-field/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextField</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/verify-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>VerifyBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Windowing</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/web-window/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>WebWindow</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Global</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Advance</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-935f8a84><div class="content" data-v-935f8a84><div class="outline-marker" data-v-935f8a84></div><div class="outline-title" role="heading" aria-level="2" data-v-935f8a84>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-935f8a84><span class="visually-hidden" id="doc-outline-aria-label" data-v-935f8a84> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-935f8a84 data-v-b933a997><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _VFluent3_guide_components_tag_" data-v-39a288b8><div><h3 id="tag-demo" tabindex="-1">Tag-DEMO <a class="header-anchor" href="#tag-demo" aria-label="Permalink to &quot;Tag-DEMO&quot;">​</a></h3><hr><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Tag</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">modelValue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[{text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;default&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;default&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }]</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Tag</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="tag-different-types" tabindex="-1">Tag Different Types <a class="header-anchor" href="#tag-different-types" aria-label="Permalink to &quot;Tag Different Types&quot;">​</a></h3><hr><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Tag</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">modelValue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[{text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;default&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;default&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, {text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;success&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;success&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, {text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;warning&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;warning&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, {text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;error&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;error&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }]</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">isDel</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">isNewTag</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Tag</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="tag-customize-color" tabindex="-1">Tag Customize Color <a class="header-anchor" href="#tag-customize-color" aria-label="Permalink to &quot;Tag Customize Color&quot;">​</a></h3><hr><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Tag</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">modelValue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[{text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;blue&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;default&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, background: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;rgba(0, 98, 158, 1)&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, {text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;black&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;success&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, background: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;rgba(0, 0, 0, 1)&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, {text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;pink&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;warning&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, background: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;pink&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }]</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Tag</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="tag-disabled" tabindex="-1">Tag-Disabled <a class="header-anchor" href="#tag-disabled" aria-label="Permalink to &quot;Tag-Disabled&quot;">​</a></h3><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Tag</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">modelValue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[{text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;default&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;default&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, {text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;disabled&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;success&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,  disabled: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, {text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;warning&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;warning&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }]</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">isDel</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">isNewTag</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Tag</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="tag-dark-theme" tabindex="-1">Tag Dark Theme <a class="header-anchor" href="#tag-dark-theme" aria-label="Permalink to &quot;Tag Dark Theme&quot;">​</a></h3><hr><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Tag</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">modelValue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[{text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;default&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;default&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, {text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;success&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;success&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, {text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;warning&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;warning&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, {text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;error&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;error&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }]</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;dark&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-Tag</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">value</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">[]</td><td style="text-align:center;">标签数组</td></tr><tr><td style="text-align:center;">newTagPlaceholder</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">New Tag</td><td style="text-align:center;">NewTag Placeholder</td></tr><tr><td style="text-align:center;">size</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">尺寸<code>normal</code>, <code>medium</code>, <code>small</code>, <code>xsmall</code></td></tr><tr><td style="text-align:center;">newTagBackground</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">null</td><td style="text-align:center;">NewTag按钮背景色</td></tr><tr><td style="text-align:center;">isNewTag</td><td style="text-align:center;">[bool]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否启用NewTag</td></tr><tr><td style="text-align:center;">isDel</td><td style="text-align:center;">[bool]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否启用删除按钮</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">system</td><td style="text-align:center;">主题样式, 包含<code>light</code>, <code>dark</code>, <code>system</code>, <code>custom</code>几种样式</td></tr></tbody></table><h3 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to &quot;Events&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">事件名(Name)</th><th style="text-align:center;">参数类型(args)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">tag-click</td><td style="text-align:center;">object</td><td style="text-align:center;">标签点击时触发并返回点击项</td></tr><tr><td style="text-align:center;">add-item</td><td style="text-align:center;">object</td><td style="text-align:center;">添加标签时触发并返回添加项</td></tr><tr><td style="text-align:center;">del-item</td><td style="text-align:center;">object</td><td style="text-align:center;">删除标签时触发并返回删除项</td></tr></tbody></table><h3 id="slot" tabindex="-1">Slot <a class="header-anchor" href="#slot" aria-label="Permalink to &quot;Slot&quot;">​</a></h3><hr><ol><li>Default</li></ol><div class="language-javascript vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">fv-tag</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    Content</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">fv-tag</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-09de1c0f><!--[--><!--]--><!----><nav class="prev-next" data-v-09de1c0f><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link prev" href="/VFluent3/guide/components/toggle-switch/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Previous page</span><span class="title" data-v-09de1c0f>ToggleSwitch</span><!--]--></a></div><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link next" href="/VFluent3/guide/components/flip-view/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Next page</span><span class="title" data-v-09de1c0f>FlipView</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>MIT Licensed</p><p class="copyright" data-v-e315a0ad>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_calendar-date-picker_properties.md\":\"DXRjmMG8\",\"guide_components_image_properties.md\":\"DGanRzCb\",\"guide_components_img-box_index.md\":\"DYtggkf_\",\"guide_components_img_emits.md\":\"BlE7jvZQ\",\"guide_components_img_index.md\":\"Bm9FiuU4\",\"guide_components_icon-element_properties.md\":\"8Oakruwc\",\"guide_components_img_properties.md\":\"B42YSocI\",\"guide_components_drawer_index.md\":\"D_vpnCpE\",\"guide_components_verify-box_emits.md\":\"DT17Iazx\",\"guide_components_calendar-date-picker_index.md\":\"BdHjrurh\",\"guide_components_rating-control_index.md\":\"Q9l5Lfrr\",\"guide_components_rating-control_properties.md\":\"DKprnl0i\",\"guide_components_calendar-view_index.md\":\"zdoRYVx1\",\"guide_components_animated-icon_index.md\":\"yZDMzCFe\",\"guide_components_calendar-date-picker_emits.md\":\"D5OkfR8j\",\"guide_components_badge_index.md\":\"Bb4crrJn\",\"guide_components_image_index.md\":\"B7X6cWAZ\",\"guide_components_slider_index.md\":\"C7zZ2d-W\",\"guide_components_radio-group_index.md\":\"CVfh3h5H\",\"guide_components_swipe-control_index.md\":\"DwrDVPc1\",\"guide_components_color-picker_emits.md\":\"BHDXVtBQ\",\"guide_components_radio_index.md\":\"90as5QGp\",\"guide_components_pagination_properties.md\":\"JUAPvcTL\",\"guide_components_persona_properties.md\":\"DUTPhPMp\",\"guide_components_combo-box_emits.md\":\"Dh5R-qEv\",\"guide_components_pivot_emits.md\":\"BTJPgNpy\",\"guide_components_pagination_index.md\":\"CnW2zAht\",\"guide_components_flip-view_properties.md\":\"BqZ4hhgU\",\"guide_components_icon-element_emits.md\":\"D5TXFdTZ\",\"guide_components_flip-view_index.md\":\"DefnDOv6\",\"guide_components_navigation-panel_index.md\":\"6mO__sSK\",\"guide_components_rating-control_emits.md\":\"blvomSeC\",\"guide_components_icon-element_index.md\":\"DQ8K7JNn\",\"guide_components_navigation-view_index.md\":\"4AQRiz1k\",\"guide_components_toggle-switch_emits.md\":\"CLGzrNut\",\"guide_components_toggle-switch_index.md\":\"61en_q9-\",\"guide_components_scroll-story_index.md\":\"Vpgb1HSV\",\"guide_components_reveal-container_index.md\":\"Cut2r4tV\",\"guide_components_search-box_emits.md\":\"-d9sWNNt\",\"guide_components_search-box_properties.md\":\"DEKFfPFw\",\"guide_components_shimmer_emits.md\":\"CTMInlI3\",\"guide_components_tag_index.md\":\"BhhxkcHn\",\"guide_components_search-box_index.md\":\"DgkrY0oY\",\"guide_components_shimmer_index.md\":\"iZlHuTxw\",\"guide_components_shimmer_properties.md\":\"CdkU1o6H\",\"guide_components_tree-view_index.md\":\"CUrwan4q\",\"guide_components_text-field_index.md\":\"CXSimJtj\",\"guide_components_text-box_index.md\":\"C5moAPfB\",\"guide_components_progress-ring_properties.md\":\"Dc08Uiff\",\"guide_components_toggle-switch_properties.md\":\"tFppK_IS\",\"guide_components_radio-group_emits.md\":\"cEDzKVnN\",\"guide_components_collapse_index.md\":\"N9Iu5-2v\",\"guide_components_image_emits.md\":\"lmlz2xJd\",\"guide_components_callout_index.md\":\"D9RU33w6\",\"guide_components_pivot_index.md\":\"B_vwQL-5\",\"guide_components_command-bar_index.md\":\"Cp4_rrGB\",\"guide_components_pagination_emits.md\":\"Dng86A22\",\"guide_components_button_index.md\":\"7sqT2MQP\",\"guide_components_info-box_properties.md\":\"BI7Nvk-E\",\"guide_components_drop-down_emits.md\":\"BE95TdKW\",\"guide_components_expander_index.md\":\"BKgcUJzQ\",\"guide_components_message-bar_index.md\":\"AEtAWlF8\",\"guide_components_menu-flyout_index.md\":\"Csa7irPj\",\"guide_components_panel_index.md\":\"CsTu0bXo\",\"guide_components_panel_properties.md\":\"BaxoCYKq\",\"guide_components_progress-bar_emits.md\":\"BcwXUpsF\",\"guide_components_progress-bar_properties.md\":\"TxiS9ZMA\",\"guide_components_progress-ring_emits.md\":\"D2Y6hIZ9\",\"guide_components_color-picker_index.md\":\"DCc4ixcU\",\"guide_components_progress-ring_index.md\":\"CPb-ZEPE\",\"guide_components_color-picker_properties.md\":\"wcXK29Vl\",\"guide_components_time-picker_index.md\":\"CQJdRRaG\",\"guide_components_drop-down_properties.md\":\"Bwlkpr1q\",\"guide_components_infinite-scroll-view_index.md\":\"yAuD807x\",\"guide_components_check-box_index.md\":\"FYgdu4oq\",\"guide_components_progress-bar_index.md\":\"D8vHQw5V\",\"guide_components_combo-box_index.md\":\"DTyu3eNd\",\"guide_components_info-box_emits.md\":\"DlEwpkkq\",\"guide_components_drop-down_index.md\":\"BZzJZQWq\",\"guide_components_list-view_index.md\":\"BoYvMzb0\",\"guide_components_verify-box_properties.md\":\"CW6W8fFf\",\"guide_components_verify-box_index.md\":\"DwSB40wR\",\"guide_index.md\":\"Bndlt3sL\",\"guide_components_web-window_index.md\":\"Bxc8vEeI\",\"index.md\":\"MTRqI42u\",\"guide_components_combo-box_properties.md\":\"AWfHzV6x\",\"guide_components_combobox_emits.md\":\"CGB6WLt8\",\"guide_components_combobox_properties.md\":\"Bja0hMou\",\"guide_components_details-list_index.md\":\"CcgOCIyt\",\"guide_components_info-box_index.md\":\"vXh-_DsL\",\"guide_components_combobox_index.md\":\"CsPkY6YB\",\"guide_components_date-picker_index.md\":\"12vmUIup\",\"guide_components_flip-view_emits.md\":\"DCheHjDj\",\"guide_components_panel_emits.md\":\"DG0REDq8\",\"guide_components_breadcrumb_index.md\":\"DyDm7PeP\",\"guide_components_radio-group_properties.md\":\"BnPxoKsQ\",\"guide_components_persona_emits.md\":\"CnsDPKRU\",\"guide_components_pivot_properties.md\":\"BmoLpPi1\",\"guide_components_persona_index.md\":\"DT00jby4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vfluent3\",\"description\":\"A Vue3 component library for Fluent UI\",\"base\":\"/VFluent3/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"VFluent3\",\"footer\":{\"message\":\"MIT Licensed\",\"copyright\":\"Copyright © Creator SN - 2022\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/\"}],\"sidebar\":[{\"text\":\"Basic input\",\"collapsed\":true,\"items\":[{\"text\":\"Button\",\"link\":\"/guide/components/button/\"},{\"text\":\"CheckBox\",\"link\":\"/guide/components/check-box/\"},{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"},{\"text\":\"Combobox\",\"link\":\"/guide/components/combobox/\"},{\"text\":\"DetailsList\",\"link\":\"/guide/components/details-list/\"},{\"text\":\"DropDown\",\"link\":\"/guide/components/drop-down/\"},{\"text\":\"Radio\",\"link\":\"/guide/components/radio/\"},{\"text\":\"RadioGroup\",\"link\":\"/guide/components/radio-group/\"},{\"text\":\"RatingControl\",\"link\":\"/guide/components/rating-control/\"},{\"text\":\"Slider\",\"link\":\"/guide/components/slider/\"},{\"text\":\"ToggleSwitch\",\"link\":\"/guide/components/toggle-switch/\"},{\"text\":\"Tag\",\"link\":\"/guide/components/tag/\"}]},{\"text\":\"Collections\",\"collapsed\":true,\"items\":[{\"text\":\"FlipView\",\"link\":\"/guide/components/flip-view/\"},{\"text\":\"ListView\",\"link\":\"/guide/components/list-view/\"},{\"text\":\"TreeView\",\"link\":\"/guide/components/tree-view/\"}]},{\"text\":\"Date & Time\",\"collapsed\":true,\"items\":[{\"text\":\"CalendarDatePicker\",\"link\":\"/guide/components/calendar-date-picker/\"},{\"text\":\"CalendarView\",\"link\":\"/guide/components/calendar-view/\"},{\"text\":\"DatePicker\",\"link\":\"/guide/components/date-picker/\"},{\"text\":\"TimePicker\",\"link\":\"/guide/components/time-picker/\"}]},{\"text\":\"Dialogs & flyouts\",\"collapsed\":true,\"items\":[{\"text\":\"Callout\",\"link\":\"/guide/components/callout/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Layout\",\"collapsed\":true,\"items\":[{\"text\":\"Collapse\",\"link\":\"/guide/components/collapse/\"},{\"text\":\"Expander\",\"link\":\"/guide/components/expander/\"},{\"text\":\"Drawer\",\"link\":\"/guide/components/drawer/\"},{\"text\":\"Panel\",\"link\":\"/guide/components/panel/\"}]},{\"text\":\"Media\",\"collapsed\":true,\"items\":[{\"text\":\"Image\",\"link\":\"/guide/components/image/\"},{\"text\":\"Img\",\"link\":\"/guide/components/img/\"},{\"text\":\"ImgBox\",\"link\":\"/guide/components/img-box/\"},{\"text\":\"Persona\",\"link\":\"/guide/components/persona/\"}]},{\"text\":\"Menu & toolbars\",\"collapsed\":true,\"items\":[{\"text\":\"CommandBar\",\"link\":\"/guide/components/command-bar/\"},{\"text\":\"MenuFlyout\",\"link\":\"/guide/components/menu-flyout/\"},{\"text\":\"SwipeControl\",\"link\":\"/guide/components/swipe-control/\"}]},{\"text\":\"Navigation\",\"collapsed\":true,\"items\":[{\"text\":\"Breadcrumb\",\"link\":\"/guide/components/breadcrumb/\"},{\"text\":\"NavigationPanel\",\"link\":\"/guide/components/navigation-panel/\"},{\"text\":\"NavigationView\",\"link\":\"/guide/components/navigation-view/\"},{\"text\":\"Pivot\",\"link\":\"/guide/components/pivot/\"},{\"text\":\"Pagination\",\"link\":\"/guide/components/pagination/\"}]},{\"text\":\"Scrolling\",\"collapsed\":true,\"items\":[{\"text\":\"InfiniteScrollView\",\"link\":\"/guide/components/infinite-scroll-view/\"},{\"text\":\"ScrollStory\",\"link\":\"/guide/components/scroll-story/\"}]},{\"text\":\"Status & info\",\"collapsed\":true,\"items\":[{\"text\":\"Badge\",\"link\":\"/guide/components/badge/\"},{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"ProgressBar\",\"link\":\"/guide/components/progress-bar/\"},{\"text\":\"ProgressRing\",\"link\":\"/guide/components/progress-ring/\"}]},{\"text\":\"Styles\",\"collapsed\":true,\"items\":[{\"text\":\"AnimatedIcon\",\"link\":\"/guide/components/animated-icon/\"},{\"text\":\"IconElement\",\"link\":\"/guide/components/icon-element/\"},{\"text\":\"RevealContainer\",\"link\":\"/guide/components/reveal-container/\"},{\"text\":\"Shimmer\",\"link\":\"/guide/components/shimmer/\"}]},{\"text\":\"Text\",\"collapsed\":true,\"items\":[{\"text\":\"SearchBox\",\"link\":\"/guide/components/search-box/\"},{\"text\":\"TextBox\",\"link\":\"/guide/components/text-box/\"},{\"text\":\"TextField\",\"link\":\"/guide/components/text-field/\"},{\"text\":\"VerifyBox\",\"link\":\"/guide/components/verify-box/\"}]},{\"text\":\"Windowing\",\"collapsed\":true,\"items\":[{\"text\":\"WebWindow\",\"link\":\"/guide/components/web-window/\"}]},{\"text\":\"Global\",\"collapsed\":true,\"items\":[{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Advance\",\"collapsed\":true,\"items\":[{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git a/guide/components/text-box/emits.html b/guide/components/text-box/emits.html
deleted file mode 100644
index 6e29f32..0000000
--- a/guide/components/text-box/emits.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<!DOCTYPE html>
-<html lang="en-US">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>Emits | vfluent3</title>
-    <meta name="description" content="A Vue3 component library for Fluent UI">
-    <link rel="stylesheet" href="/VFluent3/assets/style.0a1d87af.css">
-    <link rel="modulepreload" href="/VFluent3/assets/app.d60fa8c3.js">
-    <link rel="modulepreload" href="/VFluent3/assets/guide_components_text-box_emits.md.0bf89ef8.lean.js">
-    
-    <script>(()=>{const e=localStorage.getItem("vitepress-theme-appearance"),a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
-  </head>
-  <body>
-    <div id="app"><div class="Layout" data-v-058b7495><!--[--><!--]--><!--[--><span tabindex="-1" data-v-bea91388></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-bea91388> Skip to content </a><!--]--><!----><header class="VPNav" data-v-058b7495 data-v-2a0a2738><div class="VPNavBar has-sidebar" data-v-2a0a2738 data-v-45c9f423><div class="container" data-v-45c9f423><div class="VPNavBarTitle has-sidebar" data-v-45c9f423 data-v-011600ce><a class="title" href="/VFluent3/" data-v-011600ce><!----><!--[-->VFluent3<!--]--></a></div><div class="content" data-v-45c9f423><!----><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-45c9f423 data-v-4da4371d><span id="main-nav-aria-label" class="visually-hidden" data-v-4da4371d>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" data-v-4da4371d data-v-66f8d518 data-v-4d08dd3a><!--[-->Home<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" data-v-4da4371d data-v-66f8d518 data-v-4d08dd3a><!--[-->Guide<!--]--><!----></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-45c9f423 data-v-bf1c94ca><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" data-v-bf1c94ca data-v-d0ee0df2 data-v-55b931a0><span class="check" data-v-55b931a0><span class="icon" data-v-55b931a0><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-d0ee0df2><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-d0ee0df2><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-45c9f423 data-v-7cece6ac data-v-37af1650><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-37af1650><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-37af1650><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-37af1650><div class="VPMenu" data-v-37af1650 data-v-17dc081b><!----><!--[--><!--[--><!----><div class="group" data-v-7cece6ac><div class="item appearance" data-v-7cece6ac><p class="label" data-v-7cece6ac>Appearance</p><div class="appearance-action" data-v-7cece6ac><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" data-v-7cece6ac data-v-d0ee0df2 data-v-55b931a0><span class="check" data-v-55b931a0><span class="icon" data-v-55b931a0><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-d0ee0df2><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-d0ee0df2><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-45c9f423 data-v-5484e669><span class="container" data-v-5484e669><span class="top" data-v-5484e669></span><span class="middle" data-v-5484e669></span><span class="bottom" data-v-5484e669></span></span></button></div></div></div><!----></header><div class="VPLocalNav" data-v-058b7495 data-v-f623cd72><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-f623cd72><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-f623cd72><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-f623cd72>Menu</span></button><a class="top-link" href="#" data-v-f623cd72> Return to top </a></div><aside class="VPSidebar" data-v-058b7495 data-v-3b8ec0c7><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-3b8ec0c7><span class="visually-hidden" id="sidebar-aria-label" data-v-3b8ec0c7> Sidebar Navigation </span><!--[--><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Basic</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/button/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Button</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/check-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>CheckBox</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/radio/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Radio</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/progress-bar/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ProgressBar</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/progress-ring/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ProgressRing</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/toggle-switch/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ToggleSwitch</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/img/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Img</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/text-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>TextBox</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/combo-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ComboBox</span><!--]--><!----></a><!--]--></div></section></div><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Global</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/message-bar/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>MessageBar</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/info-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>InfoBox</span><!--]--><!----></a><!--]--></div></section></div><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Advance</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/color-picker/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ColorPicker</span><!--]--><!----></a><!--]--></div></section></div><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-058b7495 data-v-564173e9><div class="VPDoc has-sidebar" data-v-564173e9 data-v-32b7ddf4><div class="container" data-v-32b7ddf4><div class="aside" data-v-32b7ddf4><div class="aside-curtain" data-v-32b7ddf4></div><div class="aside-container" data-v-32b7ddf4><div class="aside-content" data-v-32b7ddf4><div class="VPDocAside" data-v-32b7ddf4 data-v-35c1bae1><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline has-outline" data-v-35c1bae1 data-v-123cce62><div class="content" data-v-123cce62><div class="outline-marker" data-v-123cce62></div><div class="outline-title" data-v-123cce62>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-123cce62><span class="visually-hidden" id="doc-outline-aria-label" data-v-123cce62> Table of Contents for current page </span><ul class="root" data-v-123cce62><!--[--><li style="" data-v-123cce62><a class="outline-link" href="#emits" data-v-123cce62>Emits</a><!----></li><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-35c1bae1></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-32b7ddf4><div class="content-container" data-v-32b7ddf4><!--[--><!--]--><main class="main" data-v-32b7ddf4><div style="position:relative;" class="vp-doc _VFluent3_guide_components_text-box_emits" data-v-32b7ddf4><div><h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">blur</td><td style="text-align:center;">evt[FocusEvent]</td><td style="text-align:center;">onblur</td></tr><tr><td style="text-align:center;">change</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">onchange</td></tr><tr><td style="text-align:center;">error-input</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">onerrorinput</td></tr><tr><td style="text-align:center;">focus</td><td style="text-align:center;">evt[FocusEvent]</td><td style="text-align:center;">onfocus</td></tr><tr><td style="text-align:center;">input</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">oninput</td></tr><tr><td style="text-align:center;">keydown</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">onkeydown</td></tr><tr><td style="text-align:center;">keypress</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">onkeypress</td></tr><tr><td style="text-align:center;">keyup</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">onkeyup</td></tr><tr><td style="text-align:center;">right-icon-click</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">onrighticonclick</td></tr><tr><td style="text-align:center;">success-input</td><td style="text-align:center;">val</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">update:model-value</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">v-model</td></tr><tr><td style="text-align:center;">warning-input</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">onwarninginput</td></tr></tbody></table></div></div></main><footer class="VPDocFooter" data-v-32b7ddf4 data-v-cfaa3a6c><div class="edit-info" data-v-cfaa3a6c><!----><!----></div><div class="prev-next" data-v-cfaa3a6c><div class="pager" data-v-cfaa3a6c><!----></div><div class="pager" data-v-cfaa3a6c><a class="pager-link next" href="/VFluent3/guide/components/button/" data-v-cfaa3a6c><span class="desc" data-v-cfaa3a6c>Next page</span><span class="title" data-v-cfaa3a6c>Button</span></a></div></div></footer><!--[--><!--]--></div></div></div></div></div><footer class="VPFooter has-sidebar" data-v-058b7495 data-v-a6c8dde4><div class="container" data-v-a6c8dde4><p class="message" data-v-a6c8dde4>MIT Licensed</p><p class="copyright" data-v-a6c8dde4>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
-    <script>__VP_HASH_MAP__ = JSON.parse("{\"guide_components_button_emits.md\":\"d682bf18\",\"guide_components_button_index.md\":\"23a8eb54\",\"guide_components_button_properties.md\":\"cd4004b6\",\"guide_components_check-box_emits.md\":\"31609794\",\"guide_components_check-box_index.md\":\"32046814\",\"guide_components_check-box_properties.md\":\"8f33ac0c\",\"guide_components_color-picker_emits.md\":\"00983cd0\",\"guide_components_color-picker_index.md\":\"b2d62612\",\"guide_components_color-picker_properties.md\":\"5466ba72\",\"guide_components_combo-box_emits.md\":\"d5ffda50\",\"guide_components_combo-box_index.md\":\"1c4364f5\",\"guide_components_combo-box_properties.md\":\"2e1d6060\",\"guide_components_img_emits.md\":\"6237adb4\",\"guide_components_img_index.md\":\"fa51a3a1\",\"guide_components_img_properties.md\":\"8d321b5e\",\"guide_components_info-box_emits.md\":\"c2e71eec\",\"guide_components_info-box_index.md\":\"06175fed\",\"guide_components_info-box_properties.md\":\"314dbb00\",\"guide_components_message-bar_emits.md\":\"e89a5a22\",\"guide_components_message-bar_index.md\":\"3f0b01d6\",\"guide_components_message-bar_properties.md\":\"ee3838d9\",\"guide_components_progress-bar_emits.md\":\"5b611e3b\",\"guide_components_progress-bar_index.md\":\"689c3241\",\"guide_components_progress-bar_properties.md\":\"39af7fb2\",\"guide_components_progress-ring_emits.md\":\"67e4644e\",\"guide_components_progress-ring_index.md\":\"9a33542b\",\"guide_components_progress-ring_properties.md\":\"c897c4bb\",\"guide_components_radio_emits.md\":\"28506857\",\"guide_components_radio_index.md\":\"e5a479ce\",\"guide_components_radio_properties.md\":\"f8e55d2f\",\"guide_components_text-box_emits.md\":\"0bf89ef8\",\"guide_components_text-box_index.md\":\"7ccfc637\",\"guide_components_text-box_properties.md\":\"aab3a89e\",\"guide_components_toggle-switch_emits.md\":\"5146435f\",\"guide_components_toggle-switch_index.md\":\"8be48081\",\"guide_components_toggle-switch_properties.md\":\"54984c3a\",\"guide_index.md\":\"e3dca1d7\",\"index.md\":\"1e9773d5\"}")</script>
-    <script type="module" async src="/VFluent3/assets/app.d60fa8c3.js"></script>
-    
-  </body>
-</html>
\ No newline at end of file
diff --git a/guide/components/text-box/index.html b/guide/components/text-box/index.html
index 1f98044..7fbdcc4 100644
--- a/guide/components/text-box/index.html
+++ b/guide/components/text-box/index.html
@@ -1,69 +1,32 @@
 <!DOCTYPE html>
-<html lang="en-US">
+<html lang="en-US" dir="ltr">
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1">
     <title>TextBox | vfluent3</title>
     <meta name="description" content="A Vue3 component library for Fluent UI">
-    <link rel="stylesheet" href="/VFluent3/assets/style.0a1d87af.css">
-    <link rel="modulepreload" href="/VFluent3/assets/chunks/index.9dba9c16.js">
-    <link rel="modulepreload" href="/VFluent3/assets/app.d60fa8c3.js">
-    <link rel="modulepreload" href="/VFluent3/assets/guide_components_text-box_index.md.7ccfc637.lean.js">
+    <meta name="generator" content="VitePress v1.0.0-rc.45">
+    <link rel="preload stylesheet" href="/VFluent3/assets/style.BabQegKX.css" as="style">
     
-    <script>(()=>{const e=localStorage.getItem("vitepress-theme-appearance"),a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script type="module" src="/VFluent3/assets/app.CSutcJ2E.js"></script>
+    <link rel="preload" href="/VFluent3/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/framework.DvIFzl91.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/theme.CgqFBnN_.js">
+    <link rel="modulepreload" href="/VFluent3/assets/guide_components_text-box_index.md.C5moAPfB.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
   </head>
   <body>
-    <div id="app"><div class="Layout" data-v-058b7495><!--[--><!--]--><!--[--><span tabindex="-1" data-v-bea91388></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-bea91388> Skip to content </a><!--]--><!----><header class="VPNav" data-v-058b7495 data-v-2a0a2738><div class="VPNavBar has-sidebar" data-v-2a0a2738 data-v-45c9f423><div class="container" data-v-45c9f423><div class="VPNavBarTitle has-sidebar" data-v-45c9f423 data-v-011600ce><a class="title" href="/VFluent3/" data-v-011600ce><!----><!--[-->VFluent3<!--]--></a></div><div class="content" data-v-45c9f423><!----><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-45c9f423 data-v-4da4371d><span id="main-nav-aria-label" class="visually-hidden" data-v-4da4371d>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" data-v-4da4371d data-v-66f8d518 data-v-4d08dd3a><!--[-->Home<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" data-v-4da4371d data-v-66f8d518 data-v-4d08dd3a><!--[-->Guide<!--]--><!----></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-45c9f423 data-v-bf1c94ca><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" data-v-bf1c94ca data-v-d0ee0df2 data-v-55b931a0><span class="check" data-v-55b931a0><span class="icon" data-v-55b931a0><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-d0ee0df2><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-d0ee0df2><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-45c9f423 data-v-7cece6ac data-v-37af1650><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-37af1650><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-37af1650><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-37af1650><div class="VPMenu" data-v-37af1650 data-v-17dc081b><!----><!--[--><!--[--><!----><div class="group" data-v-7cece6ac><div class="item appearance" data-v-7cece6ac><p class="label" data-v-7cece6ac>Appearance</p><div class="appearance-action" data-v-7cece6ac><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" data-v-7cece6ac data-v-d0ee0df2 data-v-55b931a0><span class="check" data-v-55b931a0><span class="icon" data-v-55b931a0><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-d0ee0df2><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-d0ee0df2><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-45c9f423 data-v-5484e669><span class="container" data-v-5484e669><span class="top" data-v-5484e669></span><span class="middle" data-v-5484e669></span><span class="bottom" data-v-5484e669></span></span></button></div></div></div><!----></header><div class="VPLocalNav" data-v-058b7495 data-v-f623cd72><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-f623cd72><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-f623cd72><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-f623cd72>Menu</span></button><a class="top-link" href="#" data-v-f623cd72> Return to top </a></div><aside class="VPSidebar" data-v-058b7495 data-v-3b8ec0c7><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-3b8ec0c7><span class="visually-hidden" id="sidebar-aria-label" data-v-3b8ec0c7> Sidebar Navigation </span><!--[--><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Basic</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/button/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Button</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/check-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>CheckBox</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/radio/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Radio</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/progress-bar/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ProgressBar</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/progress-ring/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ProgressRing</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/toggle-switch/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ToggleSwitch</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/img/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Img</span><!--]--><!----></a><a class="VPLink link active" href="/VFluent3/guide/components/text-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>TextBox</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/combo-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ComboBox</span><!--]--><!----></a><!--]--></div></section></div><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Global</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/message-bar/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>MessageBar</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/info-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>InfoBox</span><!--]--><!----></a><!--]--></div></section></div><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Advance</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/color-picker/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ColorPicker</span><!--]--><!----></a><!--]--></div></section></div><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-058b7495 data-v-564173e9><div class="VPDoc has-sidebar" data-v-564173e9 data-v-32b7ddf4><div class="container" data-v-32b7ddf4><div class="aside" data-v-32b7ddf4><div class="aside-curtain" data-v-32b7ddf4></div><div class="aside-container" data-v-32b7ddf4><div class="aside-content" data-v-32b7ddf4><div class="VPDocAside" data-v-32b7ddf4 data-v-35c1bae1><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline has-outline" data-v-35c1bae1 data-v-123cce62><div class="content" data-v-123cce62><div class="outline-marker" data-v-123cce62></div><div class="outline-title" data-v-123cce62>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-123cce62><span class="visually-hidden" id="doc-outline-aria-label" data-v-123cce62> Table of Contents for current page </span><ul class="root" data-v-123cce62><!--[--><li style="" data-v-123cce62><a class="outline-link" href="#quick-start" data-v-123cce62>Quick Start</a><!----></li><li style="" data-v-123cce62><a class="outline-link" href="#properties" data-v-123cce62>Properties</a><!----></li><li style="" data-v-123cce62><a class="outline-link" href="#emits" data-v-123cce62>Emits</a><!----></li><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-35c1bae1></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-32b7ddf4><div class="content-container" data-v-32b7ddf4><!--[--><!--]--><main class="main" data-v-32b7ddf4><div style="position:relative;" class="vp-doc _VFluent3_guide_components_text-box_index" data-v-32b7ddf4><div><h1 id="textbox" tabindex="-1">TextBox <a class="header-anchor" href="#textbox" aria-hidden="true">#</a></h1><h2 id="quick-start" tabindex="-1">Quick Start <a class="header-anchor" href="#quick-start" aria-hidden="true">#</a></h2><h3 id="default" tabindex="-1">Default <a class="header-anchor" href="#default" aria-hidden="true">#</a></h3><hr><div> Input single line: <div tabindex="-1" class="fv-text-box light fv-text-box--singleline fv-text-box--success" style="--fv-text-box-height:18px;--fv-text-box-font-size:14px;--fv-text-box-width:80px;--fv-text-box-hover-border-color:rgba(0, 204, 153, 1);"><!--[--><input title="input" class="fv-text-box--input fv-text-box--text" type="text" value="" maxlength="30"><div class="fv-text-box--icon"><i class="ms-Icon ms-Icon--Cancel"></i></div><!--]--><!----><pre class="fv-text-box--pre-hidden">0</pre></div></div><div class="language-vue-html"><span class="copy"></span><div class="highlight-lines"><br><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><br><br><br><br><br></div><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-text-box</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">input-rules</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;/</span><span style="color:#89DDFF;font-style:italic;">^</span><span style="color:#89DDFF;">[</span><span style="color:#C3E88D;">0-9</span><span style="color:#89DDFF;">]*</span><span style="color:#89DDFF;font-style:italic;">$</span><span style="color:#89DDFF;">/&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">pattern</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;/</span><span style="color:#89DDFF;font-style:italic;">^</span><span style="color:#C3E88D;">1234</span><span style="color:#89DDFF;">/&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">focus</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">focus</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">change</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">change</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">blur</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">blur</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">maxlength</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#F78C6C;">30</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">hover-border-color</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">rgba(0, 204, 153, 1)</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">error-input</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">errorInput</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">warning-input</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">warningInput</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">    &gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-text-box</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><div class="warning custom-block"><p class="custom-block-title">Warning</p><p>Only input-rules characters can be entered. If you input other characters, the border color is warning color. If the input does not match the pattern, the border color is error color. Error color will override warning color.</p></div><h3 id="width" tabindex="-1">Width <a class="header-anchor" href="#width" aria-hidden="true">#</a></h3><p>Input single line:</p><div><div tabindex="-1" class="fv-text-box light fv-text-box--singleline fv-text-box--success" style="--fv-text-box-height:18px;--fv-text-box-font-size:14px;--fv-text-box-width:80px;--fv-text-box-hover-border-color:rgba(0, 204, 153, 1);width:50%;" min-width="100%"><!--[--><input title="input" class="fv-text-box--input fv-text-box--text" placeholder="Input numbers" type="text" value=""><div class="fv-text-box--icon"><i class="ms-Icon ms-Icon--Cancel"></i></div><!--]--><!----><pre class="fv-text-box--pre-hidden">0</pre></div></div><div class="language-vue-html"><span class="copy"></span><div class="highlight-lines"><br><br><div class="highlighted"> </div><br><br><br><br><br><br><br><br><br><br></div><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-text-box</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">input-rules</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;/</span><span style="color:#89DDFF;font-style:italic;">^</span><span style="color:#89DDFF;">[</span><span style="color:#C3E88D;">0-9</span><span style="color:#A6ACCD;">\.</span><span style="color:#89DDFF;">]*</span><span style="color:#89DDFF;font-style:italic;">$</span><span style="color:#89DDFF;">/&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">style</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">width:50%;</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">focus</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">focus</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">change</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">change</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">blur</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">blur</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">placeholder</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">Input numbers</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">hover-border-color</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">rgba(0, 204, 153, 1)</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">error-input</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">errorInput</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">warning-input</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">warningInput</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">    /&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><h3 id="password" tabindex="-1">Password <a class="header-anchor" href="#password" aria-hidden="true">#</a></h3><hr><div> Input password: <div tabindex="-1" class="fv-text-box light fv-text-box--singleline fv-text-box--success" style="--fv-text-box-height:18px;--fv-text-box-font-size:14px;--fv-text-box-width:80px;min-width:200px;"><!--[--><input title="input" class="fv-text-box--input fv-text-box--text" placeholder="Input your password" type="password" value=""><div class="fv-text-box--icon"><i class="ms-Icon ms-Icon--RedEye"></i></div><!--]--><!----><pre class="fv-text-box--pre-hidden">0</pre></div></div><div class="language-vue-html"><span class="copy"></span><div class="highlight-lines"><br><br><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><br><br><br><br><br><br></div><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-text-box</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">placeholder</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">Input your password</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">style</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">min-width:200px;</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">input-rules</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;/</span><span style="color:#89DDFF;font-style:italic;">^</span><span style="color:#89DDFF;">[</span><span style="color:#C3E88D;">0-9a-zA-Z\-@!</span><span style="color:#89DDFF;">]*</span><span style="color:#89DDFF;font-style:italic;">$</span><span style="color:#89DDFF;">/&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">password</span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">focus</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">focus</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">change</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">change</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">blur</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">blur</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">    &gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-text-box</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><h3 id="multiline" tabindex="-1">Multiline <a class="header-anchor" href="#multiline" aria-hidden="true">#</a></h3><hr><div> Input multiline: <div tabindex="-1" class="fv-text-box light fv-text-box--multiline fv-text-box--success" style="--fv-text-box-height:18px;--fv-text-box-font-size:14px;--fv-text-box-width:80px;"><!----><textarea title="input" class="fv-text-box--input fv-text-box--textarea"></textarea><pre class="fv-text-box--pre-hidden">0</pre></div></div><div class="language-vue-html"><span class="copy"></span><div class="highlight-lines"><br><div class="highlighted"> </div><br><br><br><br><br><br><br></div><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-text-box</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">multiline</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">focus</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">focus</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">change</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">change</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">blur</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">blur</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">    &gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-text-box</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h3 id="readonly" tabindex="-1">Readonly <a class="header-anchor" href="#readonly" aria-hidden="true">#</a></h3><hr><div> Input multiline: <div tabindex="-1" class="fv-text-box light readonly fv-text-box--multiline fv-text-box--success" style="--fv-text-box-height:18px;--fv-text-box-font-size:14px;--fv-text-box-width:80px;"><!----><textarea title="input" class="fv-text-box--input fv-text-box--textarea" readonly autofocus></textarea><pre class="fv-text-box--pre-hidden">0</pre></div></div><div class="language-vue-html"><span class="copy"></span><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-text-box</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">multiline</span><span style="color:#89DDFF;"> :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">readonly</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-text-box</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="disabled" tabindex="-1">Disabled <a class="header-anchor" href="#disabled" aria-hidden="true">#</a></h3><hr><div> Input multiline: <div tabindex="-1" class="fv-text-box light disabled fv-text-box--multiline fv-text-box--success" style="--fv-text-box-height:18px;--fv-text-box-font-size:14px;--fv-text-box-width:80px;"><!----><textarea title="input" class="fv-text-box--input fv-text-box--textarea" disabled></textarea><pre class="fv-text-box--pre-hidden">0</pre></div></div><div class="language-vue-html"><span class="copy"></span><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-text-box</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">multiline</span><span style="color:#89DDFF;"> :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">disabled</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-text-box</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">autofocus</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">same as input/textarea autofocus property</td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">same as input/textarea disabled property</td></tr><tr><td style="text-align:center;">error-border-color</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">error status border color</td></tr><tr><td style="text-align:center;">font-size</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">14</td><td style="text-align:center;">font size</td></tr><tr><td style="text-align:center;">hover-border-color</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">normal status border color</td></tr><tr><td style="text-align:center;">input-rules</td><td style="text-align:center;">[object,string,function]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">input rules, limit input</td></tr><tr><td style="text-align:center;">lang</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">i18n</td></tr><tr><td style="text-align:center;">maxlength</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as input/textarea maxlength property</td></tr><tr><td style="text-align:center;">minlength</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as input/textarea minlength property</td></tr><tr><td style="text-align:center;">model-value</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">v-model</td></tr><tr><td style="text-align:center;">multiline</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">true use textarea, otherwise use input[type=&#39;text&#39;</td></tr><tr><td style="text-align:center;">password</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as input[type=&#39;password&#39;] (multiline=false)</td></tr><tr><td style="text-align:center;">pattern</td><td style="text-align:center;">[object,string,function]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">input match pattern, error if not match</td></tr><tr><td style="text-align:center;">placeholder</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as input/textarea placeholder property</td></tr><tr><td style="text-align:center;">readonly</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">same as input/textarea readonly property</td></tr><tr><td style="text-align:center;">required</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">same as input/textarea required property</td></tr><tr><td style="text-align:center;">right-icon</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">size</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">multiline same as textarea cols property, otherwise same as input size property</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">[&#39;light&#39;,&#39;dark&#39;,&#39;global&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">theme</td></tr><tr><td style="text-align:center;">title</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;input&#39;</td><td style="text-align:center;">same as input/textarea title property</td></tr><tr><td style="text-align:center;">warning-border-color</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">warning status border color</td></tr></tbody></table><h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">blur</td><td style="text-align:center;">evt[FocusEvent]</td><td style="text-align:center;">onblur</td></tr><tr><td style="text-align:center;">change</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">onchange</td></tr><tr><td style="text-align:center;">error-input</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">onerrorinput</td></tr><tr><td style="text-align:center;">focus</td><td style="text-align:center;">evt[FocusEvent]</td><td style="text-align:center;">onfocus</td></tr><tr><td style="text-align:center;">input</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">oninput</td></tr><tr><td style="text-align:center;">keydown</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">onkeydown</td></tr><tr><td style="text-align:center;">keypress</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">onkeypress</td></tr><tr><td style="text-align:center;">keyup</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">onkeyup</td></tr><tr><td style="text-align:center;">right-icon-click</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">onrighticonclick</td></tr><tr><td style="text-align:center;">success-input</td><td style="text-align:center;">val</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">update:model-value</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">v-model</td></tr><tr><td style="text-align:center;">warning-input</td><td style="text-align:center;">val[String]</td><td style="text-align:center;">onwarninginput</td></tr></tbody></table></div></div></main><footer class="VPDocFooter" data-v-32b7ddf4 data-v-cfaa3a6c><div class="edit-info" data-v-cfaa3a6c><!----><!----></div><div class="prev-next" data-v-cfaa3a6c><div class="pager" data-v-cfaa3a6c><a class="pager-link prev" href="/VFluent3/guide/components/img/" data-v-cfaa3a6c><span class="desc" data-v-cfaa3a6c>Previous page</span><span class="title" data-v-cfaa3a6c>Img</span></a></div><div class="has-prev pager" data-v-cfaa3a6c><a class="pager-link next" href="/VFluent3/guide/components/combo-box/" data-v-cfaa3a6c><span class="desc" data-v-cfaa3a6c>Next page</span><span class="title" data-v-cfaa3a6c>ComboBox</span></a></div></div></footer><!--[--><!--]--></div></div></div></div></div><footer class="VPFooter has-sidebar" data-v-058b7495 data-v-a6c8dde4><div class="container" data-v-a6c8dde4><p class="message" data-v-a6c8dde4>MIT Licensed</p><p class="copyright" data-v-a6c8dde4>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
-    <script>__VP_HASH_MAP__ = JSON.parse("{\"guide_components_button_emits.md\":\"d682bf18\",\"guide_components_button_index.md\":\"23a8eb54\",\"guide_components_button_properties.md\":\"cd4004b6\",\"guide_components_check-box_emits.md\":\"31609794\",\"guide_components_check-box_index.md\":\"32046814\",\"guide_components_check-box_properties.md\":\"8f33ac0c\",\"guide_components_color-picker_emits.md\":\"00983cd0\",\"guide_components_color-picker_index.md\":\"b2d62612\",\"guide_components_color-picker_properties.md\":\"5466ba72\",\"guide_components_combo-box_emits.md\":\"d5ffda50\",\"guide_components_combo-box_index.md\":\"1c4364f5\",\"guide_components_combo-box_properties.md\":\"2e1d6060\",\"guide_components_img_emits.md\":\"6237adb4\",\"guide_components_img_index.md\":\"fa51a3a1\",\"guide_components_img_properties.md\":\"8d321b5e\",\"guide_components_info-box_emits.md\":\"c2e71eec\",\"guide_components_info-box_index.md\":\"06175fed\",\"guide_components_info-box_properties.md\":\"314dbb00\",\"guide_components_message-bar_emits.md\":\"e89a5a22\",\"guide_components_message-bar_index.md\":\"3f0b01d6\",\"guide_components_message-bar_properties.md\":\"ee3838d9\",\"guide_components_progress-bar_emits.md\":\"5b611e3b\",\"guide_components_progress-bar_index.md\":\"689c3241\",\"guide_components_progress-bar_properties.md\":\"39af7fb2\",\"guide_components_progress-ring_emits.md\":\"67e4644e\",\"guide_components_progress-ring_index.md\":\"9a33542b\",\"guide_components_progress-ring_properties.md\":\"c897c4bb\",\"guide_components_radio_emits.md\":\"28506857\",\"guide_components_radio_index.md\":\"e5a479ce\",\"guide_components_radio_properties.md\":\"f8e55d2f\",\"guide_components_text-box_emits.md\":\"0bf89ef8\",\"guide_components_text-box_index.md\":\"7ccfc637\",\"guide_components_text-box_properties.md\":\"aab3a89e\",\"guide_components_toggle-switch_emits.md\":\"5146435f\",\"guide_components_toggle-switch_index.md\":\"8be48081\",\"guide_components_toggle-switch_properties.md\":\"54984c3a\",\"guide_index.md\":\"e3dca1d7\",\"index.md\":\"1e9773d5\"}")</script>
-    <script type="module" async src="/VFluent3/assets/app.d60fa8c3.js"></script>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-19c990f1><div class="wrapper" data-v-19c990f1><div class="container" data-v-19c990f1><div class="title" data-v-19c990f1><div class="VPNavBarTitle has-sidebar" data-v-19c990f1 data-v-ab179fa1><a class="title" href="/VFluent3/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>VFluent3</span><!--[--><!--]--></a></div></div><div class="content" data-v-19c990f1><div class="content-body" data-v-19c990f1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-19c990f1><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-19c990f1 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Guide</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-19c990f1 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-19c990f1 data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-19c990f1 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-19c990f1><div class="divider-line" data-v-19c990f1></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-d2ecc192><button data-v-d2ecc192>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-575e6a36><div class="curtain" data-v-575e6a36></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-575e6a36><span class="visually-hidden" id="sidebar-aria-label" data-v-575e6a36> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Basic input</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/button/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/check-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CheckBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/combobox/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Combobox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/details-list/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DetailsList</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drop-down/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DropDown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio-group/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RadioGroup</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/rating-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RatingControl</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/slider/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/toggle-switch/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ToggleSwitch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tag/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Tag</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Collections</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/flip-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>FlipView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/list-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ListView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tree-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TreeView</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Date & Time</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarDatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/time-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TimePicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Dialogs & flyouts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/callout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Callout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Layout</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/collapse/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Collapse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/expander/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Expander</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drawer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Panel</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Media</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/image/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Img</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ImgBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/persona/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Persona</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Menu & toolbars</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/command-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CommandBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/menu-flyout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MenuFlyout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/swipe-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SwipeControl</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Navigation</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/breadcrumb/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationPanel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pivot/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pivot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pagination/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pagination</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Scrolling</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/infinite-scroll-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfiniteScrollView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/scroll-story/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ScrollStory</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Status & info</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/badge/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-ring/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressRing</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Styles</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/animated-icon/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>AnimatedIcon</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/icon-element/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>IconElement</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/reveal-container/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RevealContainer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/shimmer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Shimmer</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible has-active" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Text</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/search-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SearchBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-field/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextField</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/verify-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>VerifyBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Windowing</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/web-window/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>WebWindow</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Global</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Advance</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-935f8a84><div class="content" data-v-935f8a84><div class="outline-marker" data-v-935f8a84></div><div class="outline-title" role="heading" aria-level="2" data-v-935f8a84>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-935f8a84><span class="visually-hidden" id="doc-outline-aria-label" data-v-935f8a84> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-935f8a84 data-v-b933a997><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _VFluent3_guide_components_text-box_" data-v-39a288b8><div><h3 id="textbox-demo" tabindex="-1">TextBox-DEMO <a class="header-anchor" href="#textbox-demo" aria-label="Permalink to &quot;TextBox-DEMO&quot;">​</a></h3><hr><p>Standard</p><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>Read-only</p><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextBox</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">readOnlyText</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> readonly</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>With placeholder</p><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextBox</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Please enter the text here.&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>With an icon</p><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextBox</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> icon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Search&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>With type</p><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextBox</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> icon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;RevealPasswordMedium&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;password&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>With pattern</p><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextBox</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> pattern</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;[a-zA-Z]&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="textbox-with-input-mask" tabindex="-1">TextBox-With Input Mask <a class="header-anchor" href="#textbox-with-input-mask" aria-label="Permalink to &quot;TextBox-With Input Mask&quot;">​</a></h3><hr><p>Standard</p><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextBox</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> mode</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;mask&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>Customize</p><!----><p></p><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextBox</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">maskValue</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> mode</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;mask&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> mask</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Tel: +__ ___ - ____ - ____&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> flag</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;_&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;{{maskValue}}&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>Customize Flag</p><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextBox</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">maskValue</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> mode</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;mask&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> mask</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;mask: xx-xxx-xxxx-xxxx&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> flag</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;x&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="textbox-disabled" tabindex="-1">TextBox-Disabled <a class="header-anchor" href="#textbox-disabled" aria-label="Permalink to &quot;TextBox-Disabled&quot;">​</a></h3><hr><ol><li>Standard</li></ol><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextBox</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> disabled</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><ol start="2"><li>With Input Mask</li></ol><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextBox</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> mode</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;mask&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> disabled</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><ol start="3"><li>With placeholder</li></ol><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextBox</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Please enter the text here.&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> disabled</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><ol start="4"><li>With underline</li></ol><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextBox</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> underline</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> disabled</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> prefix</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Disabled:&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="textbox-with-limit" tabindex="-1">TextBox-With Limit <a class="header-anchor" href="#textbox-with-limit" aria-label="Permalink to &quot;TextBox-With Limit&quot;">​</a></h3><hr><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextBox</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> maxlength</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;5&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">120</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="textbox-with-underline-and-borderless" tabindex="-1">TextBox-With Underline And Borderless <a class="header-anchor" href="#textbox-with-underline-and-borderless" aria-label="Permalink to &quot;TextBox-With Underline And Borderless&quot;">​</a></h3><hr><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextBox</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> underline</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> prefix</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Standard:&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> focusBorderColor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rgba(0, 90, 158, 1)&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="textbox-with-prefix-suffix" tabindex="-1">TextBox-With Prefix/Suffix <a class="header-anchor" href="#textbox-with-prefix-suffix" aria-label="Permalink to &quot;TextBox-With Prefix/Suffix&quot;">​</a></h3><hr><p>Prefix</p><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextBox</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> prefix</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;https://&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>Suffix</p><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextBox</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> suffix</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;.com&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>Prefix and Suffix</p><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextBox</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> prefix</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;https://&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> suffix</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;.com&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="textbox-with-status" tabindex="-1">TextBox-With Status <a class="header-anchor" href="#textbox-with-status" aria-label="Permalink to &quot;TextBox-With Status&quot;">​</a></h3><hr><p>Warn</p><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextBox</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Warn text.&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> status</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;warn&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>Correct</p><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextBox</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Correct text.&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> status</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;correct&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="textbox-revealborder" tabindex="-1">TextBox-RevealBorder <a class="header-anchor" href="#textbox-revealborder" aria-label="Permalink to &quot;TextBox-RevealBorder&quot;">​</a></h3><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextBox</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Please enter the text here.&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">revealBorder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> borderColor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rgba(0, 0, 0, 0.01)&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> borderRadius</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;3&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">isBoxShadow</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="textbox-customize" tabindex="-1">TextBox-Customize <a class="header-anchor" href="#textbox-customize" aria-label="Permalink to &quot;TextBox-Customize&quot;">​</a></h3><hr><p>Customize border color</p><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextBox</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Please enter the text here.&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> borderColor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rgba(0,153,204,1)&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> focusBorderColor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rgba(0,204,153,1)&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>Customize background</p><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextBox</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Please enter the text here.&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rgba(0,153,204,1)&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> borderColor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rgba(0,153,204,1)&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextBox</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="textbox-dark-theme" tabindex="-1">TextBox-Dark Theme <a class="header-anchor" href="#textbox-dark-theme" aria-label="Permalink to &quot;TextBox-Dark Theme&quot;">​</a></h3><hr><div style="padding:15px;background:black;"><!----></div><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">padding</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">15</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">black</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;fv-TextBox placeholder=&quot;Please enter the text here.&quot; theme=&quot;dark&quot;&gt;&lt;/fv-TextBox&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;fv-TextBox placeholder=&quot;Please enter the text here.&quot; disabled theme=&quot;dark&quot; value=&quot;123&quot;&gt;&lt;/fv-TextBox&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;fv-TextBox placeholder=&quot;Please enter the text here.&quot; prefix=&quot;https://&quot; suffix=&quot;.com&quot; theme=&quot;dark&quot;&gt;&lt;/fv-TextBox&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;fv-TextBox placeholder=&quot;Please enter the text here.&quot; prefix=&quot;https://&quot; suffix=&quot;.com&quot; disabled theme=&quot;dark&quot;&gt;&lt;/fv-TextBox&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;fv-TextBox underline prefix=&quot;Standard:&quot; theme=&quot;dark&quot;&gt;&lt;/fv-TextBox&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;fv-TextBox underline prefix=&quot;Standard:&quot; disabled theme=&quot;dark&quot;&gt;&lt;/fv-TextBox&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">value</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;"></td><td style="text-align:center;">Using v-model binding input value</td></tr><tr><td style="text-align:center;">mode</td><td style="text-align:center;">[&#39;default&#39;,&#39;mask&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">default</td><td style="text-align:center;">Choose TextBox mode</td></tr><tr><td style="text-align:center;">inputmode</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">输入模式, 可选值为<code>numeric</code>, <code>tel</code>, <code>text</code>, <code>decimal</code>, <code>email</code>, <code>url</code></td></tr><tr><td style="text-align:center;">placeholder</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">等同HTML[input]</td></tr><tr><td style="text-align:center;">type</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">text</td><td style="text-align:center;">等同HTML[input]</td></tr><tr><td style="text-align:center;">mask</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">mask:___</td><td style="text-align:center;">The mask mode input template</td></tr><tr><td style="text-align:center;">flag</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">_</td><td style="text-align:center;">The mask mode input flag</td></tr><tr><td style="text-align:center;">pattern</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">[\S\s]*</td><td style="text-align:center;">输入字符的正则限制</td></tr><tr><td style="text-align:center;">inputRules</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">[\S\s]*</td><td style="text-align:center;">输入文本的正则限制, 在Mask模式下无效</td></tr><tr><td style="text-align:center;">readonly</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">等同HTML[input]</td></tr><tr><td style="text-align:center;">maxlength</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">等同HTML[input]</td></tr><tr><td style="text-align:center;">prefix</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">前缀</td></tr><tr><td style="text-align:center;">suffix</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">后缀</td></tr><tr><td style="text-align:center;">leftIcon</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">左图标</td></tr><tr><td style="text-align:center;">icon</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">右图标</td></tr><tr><td style="text-align:center;">underline</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否开启Underline风格的TextBox</td></tr><tr><td style="text-align:center;">background</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">borderWidth</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">borderColor</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">focusBorderColor</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">revealBorderColor</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">revealBackgroundColor</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">fontSize</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">13.3</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">fontWeight</td><td style="text-align:center;">[string,number]</td><td style="text-align:center;">No</td><td style="text-align:center;">normal</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">foreground</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">textAlign</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">left</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">borderRadius</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">3</td><td style="text-align:center;">Textbox圆角大小, 启用revealBorder时将失效</td></tr><tr><td style="text-align:center;">isBoxShadow</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">开启<code>TextBox</code>阴影</td></tr><tr><td style="text-align:center;">revealBorder</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">status</td><td style="text-align:center;">[&#39;warn&#39;,&#39;correct&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">状态边框预设, 默认有警告和正确两种</td></tr><tr><td style="text-align:center;">debounceDelay</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">300</td><td style="text-align:center;">搜索节流延迟时间</td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">system</td><td style="text-align:center;">主题样式, 包含<code>light</code>, <code>dark</code>, <code>system</code>, <code>custom</code>几种样式</td></tr></tbody></table><h3 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to &quot;Events&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">事件名(Name)</th><th style="text-align:center;">参数类型(args)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">keydown</td><td style="text-align:center;">event</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">keyup</td><td style="text-align:center;">event</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">change</td><td style="text-align:center;">event</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">paste</td><td style="text-align:center;">event</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">left-icon-click</td><td style="text-align:center;">event</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">icon-click</td><td style="text-align:center;">event</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">debounce-input</td><td style="text-align:center;">string</td><td style="text-align:center;">搜索节流内容反馈</td></tr></tbody></table></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-09de1c0f><!--[--><!--]--><!----><nav class="prev-next" data-v-09de1c0f><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link prev" href="/VFluent3/guide/components/search-box/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Previous page</span><span class="title" data-v-09de1c0f>SearchBox</span><!--]--></a></div><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link next" href="/VFluent3/guide/components/text-field/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Next page</span><span class="title" data-v-09de1c0f>TextField</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>MIT Licensed</p><p class="copyright" data-v-e315a0ad>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_calendar-date-picker_properties.md\":\"DXRjmMG8\",\"guide_components_image_properties.md\":\"DGanRzCb\",\"guide_components_img-box_index.md\":\"DYtggkf_\",\"guide_components_img_emits.md\":\"BlE7jvZQ\",\"guide_components_img_index.md\":\"Bm9FiuU4\",\"guide_components_icon-element_properties.md\":\"8Oakruwc\",\"guide_components_img_properties.md\":\"B42YSocI\",\"guide_components_drawer_index.md\":\"D_vpnCpE\",\"guide_components_verify-box_emits.md\":\"DT17Iazx\",\"guide_components_calendar-date-picker_index.md\":\"BdHjrurh\",\"guide_components_rating-control_index.md\":\"Q9l5Lfrr\",\"guide_components_rating-control_properties.md\":\"DKprnl0i\",\"guide_components_calendar-view_index.md\":\"zdoRYVx1\",\"guide_components_animated-icon_index.md\":\"yZDMzCFe\",\"guide_components_calendar-date-picker_emits.md\":\"D5OkfR8j\",\"guide_components_badge_index.md\":\"Bb4crrJn\",\"guide_components_image_index.md\":\"B7X6cWAZ\",\"guide_components_slider_index.md\":\"C7zZ2d-W\",\"guide_components_radio-group_index.md\":\"CVfh3h5H\",\"guide_components_swipe-control_index.md\":\"DwrDVPc1\",\"guide_components_color-picker_emits.md\":\"BHDXVtBQ\",\"guide_components_radio_index.md\":\"90as5QGp\",\"guide_components_pagination_properties.md\":\"JUAPvcTL\",\"guide_components_persona_properties.md\":\"DUTPhPMp\",\"guide_components_combo-box_emits.md\":\"Dh5R-qEv\",\"guide_components_pivot_emits.md\":\"BTJPgNpy\",\"guide_components_pagination_index.md\":\"CnW2zAht\",\"guide_components_flip-view_properties.md\":\"BqZ4hhgU\",\"guide_components_icon-element_emits.md\":\"D5TXFdTZ\",\"guide_components_flip-view_index.md\":\"DefnDOv6\",\"guide_components_navigation-panel_index.md\":\"6mO__sSK\",\"guide_components_rating-control_emits.md\":\"blvomSeC\",\"guide_components_icon-element_index.md\":\"DQ8K7JNn\",\"guide_components_navigation-view_index.md\":\"4AQRiz1k\",\"guide_components_toggle-switch_emits.md\":\"CLGzrNut\",\"guide_components_toggle-switch_index.md\":\"61en_q9-\",\"guide_components_scroll-story_index.md\":\"Vpgb1HSV\",\"guide_components_reveal-container_index.md\":\"Cut2r4tV\",\"guide_components_search-box_emits.md\":\"-d9sWNNt\",\"guide_components_search-box_properties.md\":\"DEKFfPFw\",\"guide_components_shimmer_emits.md\":\"CTMInlI3\",\"guide_components_tag_index.md\":\"BhhxkcHn\",\"guide_components_search-box_index.md\":\"DgkrY0oY\",\"guide_components_shimmer_index.md\":\"iZlHuTxw\",\"guide_components_shimmer_properties.md\":\"CdkU1o6H\",\"guide_components_tree-view_index.md\":\"CUrwan4q\",\"guide_components_text-field_index.md\":\"CXSimJtj\",\"guide_components_text-box_index.md\":\"C5moAPfB\",\"guide_components_progress-ring_properties.md\":\"Dc08Uiff\",\"guide_components_toggle-switch_properties.md\":\"tFppK_IS\",\"guide_components_radio-group_emits.md\":\"cEDzKVnN\",\"guide_components_collapse_index.md\":\"N9Iu5-2v\",\"guide_components_image_emits.md\":\"lmlz2xJd\",\"guide_components_callout_index.md\":\"D9RU33w6\",\"guide_components_pivot_index.md\":\"B_vwQL-5\",\"guide_components_command-bar_index.md\":\"Cp4_rrGB\",\"guide_components_pagination_emits.md\":\"Dng86A22\",\"guide_components_button_index.md\":\"7sqT2MQP\",\"guide_components_info-box_properties.md\":\"BI7Nvk-E\",\"guide_components_drop-down_emits.md\":\"BE95TdKW\",\"guide_components_expander_index.md\":\"BKgcUJzQ\",\"guide_components_message-bar_index.md\":\"AEtAWlF8\",\"guide_components_menu-flyout_index.md\":\"Csa7irPj\",\"guide_components_panel_index.md\":\"CsTu0bXo\",\"guide_components_panel_properties.md\":\"BaxoCYKq\",\"guide_components_progress-bar_emits.md\":\"BcwXUpsF\",\"guide_components_progress-bar_properties.md\":\"TxiS9ZMA\",\"guide_components_progress-ring_emits.md\":\"D2Y6hIZ9\",\"guide_components_color-picker_index.md\":\"DCc4ixcU\",\"guide_components_progress-ring_index.md\":\"CPb-ZEPE\",\"guide_components_color-picker_properties.md\":\"wcXK29Vl\",\"guide_components_time-picker_index.md\":\"CQJdRRaG\",\"guide_components_drop-down_properties.md\":\"Bwlkpr1q\",\"guide_components_infinite-scroll-view_index.md\":\"yAuD807x\",\"guide_components_check-box_index.md\":\"FYgdu4oq\",\"guide_components_progress-bar_index.md\":\"D8vHQw5V\",\"guide_components_combo-box_index.md\":\"DTyu3eNd\",\"guide_components_info-box_emits.md\":\"DlEwpkkq\",\"guide_components_drop-down_index.md\":\"BZzJZQWq\",\"guide_components_list-view_index.md\":\"BoYvMzb0\",\"guide_components_verify-box_properties.md\":\"CW6W8fFf\",\"guide_components_verify-box_index.md\":\"DwSB40wR\",\"guide_index.md\":\"Bndlt3sL\",\"guide_components_web-window_index.md\":\"Bxc8vEeI\",\"index.md\":\"MTRqI42u\",\"guide_components_combo-box_properties.md\":\"AWfHzV6x\",\"guide_components_combobox_emits.md\":\"CGB6WLt8\",\"guide_components_combobox_properties.md\":\"Bja0hMou\",\"guide_components_details-list_index.md\":\"CcgOCIyt\",\"guide_components_info-box_index.md\":\"vXh-_DsL\",\"guide_components_combobox_index.md\":\"CsPkY6YB\",\"guide_components_date-picker_index.md\":\"12vmUIup\",\"guide_components_flip-view_emits.md\":\"DCheHjDj\",\"guide_components_panel_emits.md\":\"DG0REDq8\",\"guide_components_breadcrumb_index.md\":\"DyDm7PeP\",\"guide_components_radio-group_properties.md\":\"BnPxoKsQ\",\"guide_components_persona_emits.md\":\"CnsDPKRU\",\"guide_components_pivot_properties.md\":\"BmoLpPi1\",\"guide_components_persona_index.md\":\"DT00jby4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vfluent3\",\"description\":\"A Vue3 component library for Fluent UI\",\"base\":\"/VFluent3/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"VFluent3\",\"footer\":{\"message\":\"MIT Licensed\",\"copyright\":\"Copyright © Creator SN - 2022\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/\"}],\"sidebar\":[{\"text\":\"Basic input\",\"collapsed\":true,\"items\":[{\"text\":\"Button\",\"link\":\"/guide/components/button/\"},{\"text\":\"CheckBox\",\"link\":\"/guide/components/check-box/\"},{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"},{\"text\":\"Combobox\",\"link\":\"/guide/components/combobox/\"},{\"text\":\"DetailsList\",\"link\":\"/guide/components/details-list/\"},{\"text\":\"DropDown\",\"link\":\"/guide/components/drop-down/\"},{\"text\":\"Radio\",\"link\":\"/guide/components/radio/\"},{\"text\":\"RadioGroup\",\"link\":\"/guide/components/radio-group/\"},{\"text\":\"RatingControl\",\"link\":\"/guide/components/rating-control/\"},{\"text\":\"Slider\",\"link\":\"/guide/components/slider/\"},{\"text\":\"ToggleSwitch\",\"link\":\"/guide/components/toggle-switch/\"},{\"text\":\"Tag\",\"link\":\"/guide/components/tag/\"}]},{\"text\":\"Collections\",\"collapsed\":true,\"items\":[{\"text\":\"FlipView\",\"link\":\"/guide/components/flip-view/\"},{\"text\":\"ListView\",\"link\":\"/guide/components/list-view/\"},{\"text\":\"TreeView\",\"link\":\"/guide/components/tree-view/\"}]},{\"text\":\"Date & Time\",\"collapsed\":true,\"items\":[{\"text\":\"CalendarDatePicker\",\"link\":\"/guide/components/calendar-date-picker/\"},{\"text\":\"CalendarView\",\"link\":\"/guide/components/calendar-view/\"},{\"text\":\"DatePicker\",\"link\":\"/guide/components/date-picker/\"},{\"text\":\"TimePicker\",\"link\":\"/guide/components/time-picker/\"}]},{\"text\":\"Dialogs & flyouts\",\"collapsed\":true,\"items\":[{\"text\":\"Callout\",\"link\":\"/guide/components/callout/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Layout\",\"collapsed\":true,\"items\":[{\"text\":\"Collapse\",\"link\":\"/guide/components/collapse/\"},{\"text\":\"Expander\",\"link\":\"/guide/components/expander/\"},{\"text\":\"Drawer\",\"link\":\"/guide/components/drawer/\"},{\"text\":\"Panel\",\"link\":\"/guide/components/panel/\"}]},{\"text\":\"Media\",\"collapsed\":true,\"items\":[{\"text\":\"Image\",\"link\":\"/guide/components/image/\"},{\"text\":\"Img\",\"link\":\"/guide/components/img/\"},{\"text\":\"ImgBox\",\"link\":\"/guide/components/img-box/\"},{\"text\":\"Persona\",\"link\":\"/guide/components/persona/\"}]},{\"text\":\"Menu & toolbars\",\"collapsed\":true,\"items\":[{\"text\":\"CommandBar\",\"link\":\"/guide/components/command-bar/\"},{\"text\":\"MenuFlyout\",\"link\":\"/guide/components/menu-flyout/\"},{\"text\":\"SwipeControl\",\"link\":\"/guide/components/swipe-control/\"}]},{\"text\":\"Navigation\",\"collapsed\":true,\"items\":[{\"text\":\"Breadcrumb\",\"link\":\"/guide/components/breadcrumb/\"},{\"text\":\"NavigationPanel\",\"link\":\"/guide/components/navigation-panel/\"},{\"text\":\"NavigationView\",\"link\":\"/guide/components/navigation-view/\"},{\"text\":\"Pivot\",\"link\":\"/guide/components/pivot/\"},{\"text\":\"Pagination\",\"link\":\"/guide/components/pagination/\"}]},{\"text\":\"Scrolling\",\"collapsed\":true,\"items\":[{\"text\":\"InfiniteScrollView\",\"link\":\"/guide/components/infinite-scroll-view/\"},{\"text\":\"ScrollStory\",\"link\":\"/guide/components/scroll-story/\"}]},{\"text\":\"Status & info\",\"collapsed\":true,\"items\":[{\"text\":\"Badge\",\"link\":\"/guide/components/badge/\"},{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"ProgressBar\",\"link\":\"/guide/components/progress-bar/\"},{\"text\":\"ProgressRing\",\"link\":\"/guide/components/progress-ring/\"}]},{\"text\":\"Styles\",\"collapsed\":true,\"items\":[{\"text\":\"AnimatedIcon\",\"link\":\"/guide/components/animated-icon/\"},{\"text\":\"IconElement\",\"link\":\"/guide/components/icon-element/\"},{\"text\":\"RevealContainer\",\"link\":\"/guide/components/reveal-container/\"},{\"text\":\"Shimmer\",\"link\":\"/guide/components/shimmer/\"}]},{\"text\":\"Text\",\"collapsed\":true,\"items\":[{\"text\":\"SearchBox\",\"link\":\"/guide/components/search-box/\"},{\"text\":\"TextBox\",\"link\":\"/guide/components/text-box/\"},{\"text\":\"TextField\",\"link\":\"/guide/components/text-field/\"},{\"text\":\"VerifyBox\",\"link\":\"/guide/components/verify-box/\"}]},{\"text\":\"Windowing\",\"collapsed\":true,\"items\":[{\"text\":\"WebWindow\",\"link\":\"/guide/components/web-window/\"}]},{\"text\":\"Global\",\"collapsed\":true,\"items\":[{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Advance\",\"collapsed\":true,\"items\":[{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
     
   </body>
 </html>
\ No newline at end of file
diff --git a/guide/components/text-box/properties.html b/guide/components/text-box/properties.html
deleted file mode 100644
index 47e08d0..0000000
--- a/guide/components/text-box/properties.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<!DOCTYPE html>
-<html lang="en-US">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>Properties | vfluent3</title>
-    <meta name="description" content="A Vue3 component library for Fluent UI">
-    <link rel="stylesheet" href="/VFluent3/assets/style.0a1d87af.css">
-    <link rel="modulepreload" href="/VFluent3/assets/app.d60fa8c3.js">
-    <link rel="modulepreload" href="/VFluent3/assets/guide_components_text-box_properties.md.aab3a89e.lean.js">
-    
-    <script>(()=>{const e=localStorage.getItem("vitepress-theme-appearance"),a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
-  </head>
-  <body>
-    <div id="app"><div class="Layout" data-v-058b7495><!--[--><!--]--><!--[--><span tabindex="-1" data-v-bea91388></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-bea91388> Skip to content </a><!--]--><!----><header class="VPNav" data-v-058b7495 data-v-2a0a2738><div class="VPNavBar has-sidebar" data-v-2a0a2738 data-v-45c9f423><div class="container" data-v-45c9f423><div class="VPNavBarTitle has-sidebar" data-v-45c9f423 data-v-011600ce><a class="title" href="/VFluent3/" data-v-011600ce><!----><!--[-->VFluent3<!--]--></a></div><div class="content" data-v-45c9f423><!----><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-45c9f423 data-v-4da4371d><span id="main-nav-aria-label" class="visually-hidden" data-v-4da4371d>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" data-v-4da4371d data-v-66f8d518 data-v-4d08dd3a><!--[-->Home<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" data-v-4da4371d data-v-66f8d518 data-v-4d08dd3a><!--[-->Guide<!--]--><!----></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-45c9f423 data-v-bf1c94ca><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" data-v-bf1c94ca data-v-d0ee0df2 data-v-55b931a0><span class="check" data-v-55b931a0><span class="icon" data-v-55b931a0><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-d0ee0df2><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-d0ee0df2><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-45c9f423 data-v-7cece6ac data-v-37af1650><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-37af1650><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-37af1650><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-37af1650><div class="VPMenu" data-v-37af1650 data-v-17dc081b><!----><!--[--><!--[--><!----><div class="group" data-v-7cece6ac><div class="item appearance" data-v-7cece6ac><p class="label" data-v-7cece6ac>Appearance</p><div class="appearance-action" data-v-7cece6ac><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" data-v-7cece6ac data-v-d0ee0df2 data-v-55b931a0><span class="check" data-v-55b931a0><span class="icon" data-v-55b931a0><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-d0ee0df2><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-d0ee0df2><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-45c9f423 data-v-5484e669><span class="container" data-v-5484e669><span class="top" data-v-5484e669></span><span class="middle" data-v-5484e669></span><span class="bottom" data-v-5484e669></span></span></button></div></div></div><!----></header><div class="VPLocalNav" data-v-058b7495 data-v-f623cd72><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-f623cd72><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-f623cd72><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-f623cd72>Menu</span></button><a class="top-link" href="#" data-v-f623cd72> Return to top </a></div><aside class="VPSidebar" data-v-058b7495 data-v-3b8ec0c7><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-3b8ec0c7><span class="visually-hidden" id="sidebar-aria-label" data-v-3b8ec0c7> Sidebar Navigation </span><!--[--><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Basic</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/button/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Button</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/check-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>CheckBox</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/radio/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Radio</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/progress-bar/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ProgressBar</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/progress-ring/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ProgressRing</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/toggle-switch/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ToggleSwitch</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/img/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Img</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/text-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>TextBox</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/combo-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ComboBox</span><!--]--><!----></a><!--]--></div></section></div><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Global</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/message-bar/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>MessageBar</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/info-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>InfoBox</span><!--]--><!----></a><!--]--></div></section></div><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Advance</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/color-picker/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ColorPicker</span><!--]--><!----></a><!--]--></div></section></div><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-058b7495 data-v-564173e9><div class="VPDoc has-sidebar" data-v-564173e9 data-v-32b7ddf4><div class="container" data-v-32b7ddf4><div class="aside" data-v-32b7ddf4><div class="aside-curtain" data-v-32b7ddf4></div><div class="aside-container" data-v-32b7ddf4><div class="aside-content" data-v-32b7ddf4><div class="VPDocAside" data-v-32b7ddf4 data-v-35c1bae1><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline has-outline" data-v-35c1bae1 data-v-123cce62><div class="content" data-v-123cce62><div class="outline-marker" data-v-123cce62></div><div class="outline-title" data-v-123cce62>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-123cce62><span class="visually-hidden" id="doc-outline-aria-label" data-v-123cce62> Table of Contents for current page </span><ul class="root" data-v-123cce62><!--[--><li style="" data-v-123cce62><a class="outline-link" href="#properties" data-v-123cce62>Properties</a><!----></li><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-35c1bae1></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-32b7ddf4><div class="content-container" data-v-32b7ddf4><!--[--><!--]--><main class="main" data-v-32b7ddf4><div style="position:relative;" class="vp-doc _VFluent3_guide_components_text-box_properties" data-v-32b7ddf4><div><h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">autofocus</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">same as input/textarea autofocus property</td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">same as input/textarea disabled property</td></tr><tr><td style="text-align:center;">error-border-color</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">error status border color</td></tr><tr><td style="text-align:center;">font-size</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">14</td><td style="text-align:center;">font size</td></tr><tr><td style="text-align:center;">hover-border-color</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">normal status border color</td></tr><tr><td style="text-align:center;">input-rules</td><td style="text-align:center;">[object,string,function]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">input rules, limit input</td></tr><tr><td style="text-align:center;">lang</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">i18n</td></tr><tr><td style="text-align:center;">maxlength</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as input/textarea maxlength property</td></tr><tr><td style="text-align:center;">minlength</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as input/textarea minlength property</td></tr><tr><td style="text-align:center;">model-value</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">v-model</td></tr><tr><td style="text-align:center;">multiline</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">true use textarea, otherwise use input[type=&#39;text&#39;</td></tr><tr><td style="text-align:center;">password</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as input[type=&#39;password&#39;] (multiline=false)</td></tr><tr><td style="text-align:center;">pattern</td><td style="text-align:center;">[object,string,function]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">input match pattern, error if not match</td></tr><tr><td style="text-align:center;">placeholder</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">same as input/textarea placeholder property</td></tr><tr><td style="text-align:center;">readonly</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">same as input/textarea readonly property</td></tr><tr><td style="text-align:center;">required</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">same as input/textarea required property</td></tr><tr><td style="text-align:center;">right-icon</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">size</td><td style="text-align:center;">[number]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">multiline same as textarea cols property, otherwise same as input size property</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">[&#39;light&#39;,&#39;dark&#39;,&#39;global&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">theme</td></tr><tr><td style="text-align:center;">title</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;input&#39;</td><td style="text-align:center;">same as input/textarea title property</td></tr><tr><td style="text-align:center;">warning-border-color</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">warning status border color</td></tr></tbody></table></div></div></main><footer class="VPDocFooter" data-v-32b7ddf4 data-v-cfaa3a6c><div class="edit-info" data-v-cfaa3a6c><!----><!----></div><div class="prev-next" data-v-cfaa3a6c><div class="pager" data-v-cfaa3a6c><!----></div><div class="pager" data-v-cfaa3a6c><a class="pager-link next" href="/VFluent3/guide/components/button/" data-v-cfaa3a6c><span class="desc" data-v-cfaa3a6c>Next page</span><span class="title" data-v-cfaa3a6c>Button</span></a></div></div></footer><!--[--><!--]--></div></div></div></div></div><footer class="VPFooter has-sidebar" data-v-058b7495 data-v-a6c8dde4><div class="container" data-v-a6c8dde4><p class="message" data-v-a6c8dde4>MIT Licensed</p><p class="copyright" data-v-a6c8dde4>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
-    <script>__VP_HASH_MAP__ = JSON.parse("{\"guide_components_button_emits.md\":\"d682bf18\",\"guide_components_button_index.md\":\"23a8eb54\",\"guide_components_button_properties.md\":\"cd4004b6\",\"guide_components_check-box_emits.md\":\"31609794\",\"guide_components_check-box_index.md\":\"32046814\",\"guide_components_check-box_properties.md\":\"8f33ac0c\",\"guide_components_color-picker_emits.md\":\"00983cd0\",\"guide_components_color-picker_index.md\":\"b2d62612\",\"guide_components_color-picker_properties.md\":\"5466ba72\",\"guide_components_combo-box_emits.md\":\"d5ffda50\",\"guide_components_combo-box_index.md\":\"1c4364f5\",\"guide_components_combo-box_properties.md\":\"2e1d6060\",\"guide_components_img_emits.md\":\"6237adb4\",\"guide_components_img_index.md\":\"fa51a3a1\",\"guide_components_img_properties.md\":\"8d321b5e\",\"guide_components_info-box_emits.md\":\"c2e71eec\",\"guide_components_info-box_index.md\":\"06175fed\",\"guide_components_info-box_properties.md\":\"314dbb00\",\"guide_components_message-bar_emits.md\":\"e89a5a22\",\"guide_components_message-bar_index.md\":\"3f0b01d6\",\"guide_components_message-bar_properties.md\":\"ee3838d9\",\"guide_components_progress-bar_emits.md\":\"5b611e3b\",\"guide_components_progress-bar_index.md\":\"689c3241\",\"guide_components_progress-bar_properties.md\":\"39af7fb2\",\"guide_components_progress-ring_emits.md\":\"67e4644e\",\"guide_components_progress-ring_index.md\":\"9a33542b\",\"guide_components_progress-ring_properties.md\":\"c897c4bb\",\"guide_components_radio_emits.md\":\"28506857\",\"guide_components_radio_index.md\":\"e5a479ce\",\"guide_components_radio_properties.md\":\"f8e55d2f\",\"guide_components_text-box_emits.md\":\"0bf89ef8\",\"guide_components_text-box_index.md\":\"7ccfc637\",\"guide_components_text-box_properties.md\":\"aab3a89e\",\"guide_components_toggle-switch_emits.md\":\"5146435f\",\"guide_components_toggle-switch_index.md\":\"8be48081\",\"guide_components_toggle-switch_properties.md\":\"54984c3a\",\"guide_index.md\":\"e3dca1d7\",\"index.md\":\"1e9773d5\"}")</script>
-    <script type="module" async src="/VFluent3/assets/app.d60fa8c3.js"></script>
-    
-  </body>
-</html>
\ No newline at end of file
diff --git a/guide/components/text-field/index.html b/guide/components/text-field/index.html
new file mode 100644
index 0000000..2ac0d5e
--- /dev/null
+++ b/guide/components/text-field/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>TextField | vfluent3</title>
+    <meta name="description" content="A Vue3 component library for Fluent UI">
+    <meta name="generator" content="VitePress v1.0.0-rc.45">
+    <link rel="preload stylesheet" href="/VFluent3/assets/style.BabQegKX.css" as="style">
+    
+    <script type="module" src="/VFluent3/assets/app.CSutcJ2E.js"></script>
+    <link rel="preload" href="/VFluent3/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/framework.DvIFzl91.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/theme.CgqFBnN_.js">
+    <link rel="modulepreload" href="/VFluent3/assets/guide_components_text-field_index.md.CXSimJtj.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-19c990f1><div class="wrapper" data-v-19c990f1><div class="container" data-v-19c990f1><div class="title" data-v-19c990f1><div class="VPNavBarTitle has-sidebar" data-v-19c990f1 data-v-ab179fa1><a class="title" href="/VFluent3/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>VFluent3</span><!--[--><!--]--></a></div></div><div class="content" data-v-19c990f1><div class="content-body" data-v-19c990f1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-19c990f1><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-19c990f1 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Guide</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-19c990f1 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-19c990f1 data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-19c990f1 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-19c990f1><div class="divider-line" data-v-19c990f1></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-d2ecc192><button data-v-d2ecc192>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-575e6a36><div class="curtain" data-v-575e6a36></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-575e6a36><span class="visually-hidden" id="sidebar-aria-label" data-v-575e6a36> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Basic input</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/button/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/check-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CheckBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/combobox/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Combobox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/details-list/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DetailsList</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drop-down/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DropDown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio-group/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RadioGroup</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/rating-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RatingControl</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/slider/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/toggle-switch/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ToggleSwitch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tag/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Tag</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Collections</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/flip-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>FlipView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/list-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ListView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tree-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TreeView</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Date & Time</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarDatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/time-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TimePicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Dialogs & flyouts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/callout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Callout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Layout</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/collapse/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Collapse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/expander/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Expander</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drawer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Panel</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Media</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/image/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Img</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ImgBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/persona/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Persona</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Menu & toolbars</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/command-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CommandBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/menu-flyout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MenuFlyout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/swipe-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SwipeControl</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Navigation</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/breadcrumb/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationPanel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pivot/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pivot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pagination/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pagination</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Scrolling</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/infinite-scroll-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfiniteScrollView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/scroll-story/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ScrollStory</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Status & info</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/badge/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-ring/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressRing</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Styles</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/animated-icon/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>AnimatedIcon</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/icon-element/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>IconElement</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/reveal-container/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RevealContainer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/shimmer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Shimmer</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible has-active" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Text</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/search-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SearchBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-field/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextField</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/verify-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>VerifyBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Windowing</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/web-window/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>WebWindow</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Global</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Advance</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-935f8a84><div class="content" data-v-935f8a84><div class="outline-marker" data-v-935f8a84></div><div class="outline-title" role="heading" aria-level="2" data-v-935f8a84>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-935f8a84><span class="visually-hidden" id="doc-outline-aria-label" data-v-935f8a84> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-935f8a84 data-v-b933a997><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _VFluent3_guide_components_text-field_" data-v-39a288b8><div><h3 id="textfield-demo" tabindex="-1">TextField-DEMO <a class="header-anchor" href="#textfield-demo" aria-label="Permalink to &quot;TextField-DEMO&quot;">​</a></h3><hr><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextField</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextField</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>Read-only</p><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextField</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">readOnlyText</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> readonly</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextField</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>With placeholder</p><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextField</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Please enter the text here.&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextField</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="textfield-disabled" tabindex="-1">TextField-Disabled <a class="header-anchor" href="#textfield-disabled" aria-label="Permalink to &quot;TextField-Disabled&quot;">​</a></h3><hr><ol><li>Standard</li></ol><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextField</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> disabled</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextField</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><ol start="2"><li>With placeholder</li></ol><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextField</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Please enter the text here.&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> disabled</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextField</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><ol start="3"><li>With underline</li></ol><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextField</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> underline</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> disabled</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextField</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="textfield-with-limit" tabindex="-1">TextField-With Limit <a class="header-anchor" href="#textfield-with-limit" aria-label="Permalink to &quot;TextField-With Limit&quot;">​</a></h3><hr><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextField</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> maxlength</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;5&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">120</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextField</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="textfield-with-underline-and-borderless" tabindex="-1">TextField-With Underline And Borderless <a class="header-anchor" href="#textfield-with-underline-and-borderless" aria-label="Permalink to &quot;TextField-With Underline And Borderless&quot;">​</a></h3><hr><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextField</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> underline</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> focusBorderColor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rgba(0, 90, 158, 1)&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextField</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="textfield-with-status" tabindex="-1">TextField-With Status <a class="header-anchor" href="#textfield-with-status" aria-label="Permalink to &quot;TextField-With Status&quot;">​</a></h3><hr><p>Warn</p><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextField</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Warn text.&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> status</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;warn&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextField</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>Correct</p><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextField</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Correct text.&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> status</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;correct&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextField</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="textfield-revealborder" tabindex="-1">TextField-RevealBorder <a class="header-anchor" href="#textfield-revealborder" aria-label="Permalink to &quot;TextField-RevealBorder&quot;">​</a></h3><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextField</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Please enter the text here.&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">revealBorder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> borderColor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rgba(0, 0, 0, 0.01)&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> borderRadius</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;3&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">isBoxShadow</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextField</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="textfield-customize" tabindex="-1">TextField-Customize <a class="header-anchor" href="#textfield-customize" aria-label="Permalink to &quot;TextField-Customize&quot;">​</a></h3><hr><p>Customize border color</p><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextField</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Please enter the text here.&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> borderColor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rgba(0,153,204,1)&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> focusBorderColor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rgba(0,204,153,1)&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextField</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>Customize background</p><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextField</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Please enter the text here.&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rgba(0,153,204,1)&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> borderColor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rgba(0,153,204,1)&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextField</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="textfield-dark-theme" tabindex="-1">TextField-Dark Theme <a class="header-anchor" href="#textfield-dark-theme" aria-label="Permalink to &quot;TextField-Dark Theme&quot;">​</a></h3><hr><div style="padding:15px;background:black;"><!----></div><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextField</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Please enter the text here.&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;dark&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextField</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextField</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Please enter the text here.&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> disabled</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;dark&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;123&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextField</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextField</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> underline</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;dark&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> focusBorderColor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rgba(118, 185, 237, 1)&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextField</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextField</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> underline</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> disabled</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;dark&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TextField</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">value</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;"></td><td style="text-align:center;">Using v-model binding input value</td></tr><tr><td style="text-align:center;">placeholder</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">等同HTML[input]</td></tr><tr><td style="text-align:center;">readonly</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">等同HTML[input]</td></tr><tr><td style="text-align:center;">maxlength</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">等同HTML[input]</td></tr><tr><td style="text-align:center;">underline</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否开启Underline风格的TextField</td></tr><tr><td style="text-align:center;">background</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">borderWidth</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">borderColor</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">focusBorderColor</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">fontSize</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">13.3</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">fontWeight</td><td style="text-align:center;">[string</td><td style="text-align:center;">number]</td><td style="text-align:center;">No</td><td style="text-align:center;">normal</td></tr><tr><td style="text-align:center;">foreground</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">textAlign</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">left</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">borderRadius</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">3</td><td style="text-align:center;">TextField圆角大小, 启用revealBorder时将失效</td></tr><tr><td style="text-align:center;">isBoxShadow</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">开启<code>TextField</code>阴影</td></tr><tr><td style="text-align:center;">revealBorder</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">revealBorderColor</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">revealBackgroundColor</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">status</td><td style="text-align:center;">[&#39;warn&#39;,&#39;correct&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">状态边框预设, 默认有警告和正确两种</td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">system</td><td style="text-align:center;">主题样式, 包含<code>light</code>, <code>dark</code>, <code>system</code>, <code>custom</code>几种样式</td></tr></tbody></table><h3 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to &quot;Events&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">事件名(Name)</th><th style="text-align:center;">参数类型(args)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">keydown</td><td style="text-align:center;">event</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">keyup</td><td style="text-align:center;">event</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">change</td><td style="text-align:center;">event</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">paste</td><td style="text-align:center;">event</td><td style="text-align:center;"></td></tr></tbody></table></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-09de1c0f><!--[--><!--]--><!----><nav class="prev-next" data-v-09de1c0f><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link prev" href="/VFluent3/guide/components/text-box/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Previous page</span><span class="title" data-v-09de1c0f>TextBox</span><!--]--></a></div><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link next" href="/VFluent3/guide/components/verify-box/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Next page</span><span class="title" data-v-09de1c0f>VerifyBox</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>MIT Licensed</p><p class="copyright" data-v-e315a0ad>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_calendar-date-picker_properties.md\":\"DXRjmMG8\",\"guide_components_image_properties.md\":\"DGanRzCb\",\"guide_components_img-box_index.md\":\"DYtggkf_\",\"guide_components_img_emits.md\":\"BlE7jvZQ\",\"guide_components_img_index.md\":\"Bm9FiuU4\",\"guide_components_icon-element_properties.md\":\"8Oakruwc\",\"guide_components_img_properties.md\":\"B42YSocI\",\"guide_components_drawer_index.md\":\"D_vpnCpE\",\"guide_components_verify-box_emits.md\":\"DT17Iazx\",\"guide_components_calendar-date-picker_index.md\":\"BdHjrurh\",\"guide_components_rating-control_index.md\":\"Q9l5Lfrr\",\"guide_components_rating-control_properties.md\":\"DKprnl0i\",\"guide_components_calendar-view_index.md\":\"zdoRYVx1\",\"guide_components_animated-icon_index.md\":\"yZDMzCFe\",\"guide_components_calendar-date-picker_emits.md\":\"D5OkfR8j\",\"guide_components_badge_index.md\":\"Bb4crrJn\",\"guide_components_image_index.md\":\"B7X6cWAZ\",\"guide_components_slider_index.md\":\"C7zZ2d-W\",\"guide_components_radio-group_index.md\":\"CVfh3h5H\",\"guide_components_swipe-control_index.md\":\"DwrDVPc1\",\"guide_components_color-picker_emits.md\":\"BHDXVtBQ\",\"guide_components_radio_index.md\":\"90as5QGp\",\"guide_components_pagination_properties.md\":\"JUAPvcTL\",\"guide_components_persona_properties.md\":\"DUTPhPMp\",\"guide_components_combo-box_emits.md\":\"Dh5R-qEv\",\"guide_components_pivot_emits.md\":\"BTJPgNpy\",\"guide_components_pagination_index.md\":\"CnW2zAht\",\"guide_components_flip-view_properties.md\":\"BqZ4hhgU\",\"guide_components_icon-element_emits.md\":\"D5TXFdTZ\",\"guide_components_flip-view_index.md\":\"DefnDOv6\",\"guide_components_navigation-panel_index.md\":\"6mO__sSK\",\"guide_components_rating-control_emits.md\":\"blvomSeC\",\"guide_components_icon-element_index.md\":\"DQ8K7JNn\",\"guide_components_navigation-view_index.md\":\"4AQRiz1k\",\"guide_components_toggle-switch_emits.md\":\"CLGzrNut\",\"guide_components_toggle-switch_index.md\":\"61en_q9-\",\"guide_components_scroll-story_index.md\":\"Vpgb1HSV\",\"guide_components_reveal-container_index.md\":\"Cut2r4tV\",\"guide_components_search-box_emits.md\":\"-d9sWNNt\",\"guide_components_search-box_properties.md\":\"DEKFfPFw\",\"guide_components_shimmer_emits.md\":\"CTMInlI3\",\"guide_components_tag_index.md\":\"BhhxkcHn\",\"guide_components_search-box_index.md\":\"DgkrY0oY\",\"guide_components_shimmer_index.md\":\"iZlHuTxw\",\"guide_components_shimmer_properties.md\":\"CdkU1o6H\",\"guide_components_tree-view_index.md\":\"CUrwan4q\",\"guide_components_text-field_index.md\":\"CXSimJtj\",\"guide_components_text-box_index.md\":\"C5moAPfB\",\"guide_components_progress-ring_properties.md\":\"Dc08Uiff\",\"guide_components_toggle-switch_properties.md\":\"tFppK_IS\",\"guide_components_radio-group_emits.md\":\"cEDzKVnN\",\"guide_components_collapse_index.md\":\"N9Iu5-2v\",\"guide_components_image_emits.md\":\"lmlz2xJd\",\"guide_components_callout_index.md\":\"D9RU33w6\",\"guide_components_pivot_index.md\":\"B_vwQL-5\",\"guide_components_command-bar_index.md\":\"Cp4_rrGB\",\"guide_components_pagination_emits.md\":\"Dng86A22\",\"guide_components_button_index.md\":\"7sqT2MQP\",\"guide_components_info-box_properties.md\":\"BI7Nvk-E\",\"guide_components_drop-down_emits.md\":\"BE95TdKW\",\"guide_components_expander_index.md\":\"BKgcUJzQ\",\"guide_components_message-bar_index.md\":\"AEtAWlF8\",\"guide_components_menu-flyout_index.md\":\"Csa7irPj\",\"guide_components_panel_index.md\":\"CsTu0bXo\",\"guide_components_panel_properties.md\":\"BaxoCYKq\",\"guide_components_progress-bar_emits.md\":\"BcwXUpsF\",\"guide_components_progress-bar_properties.md\":\"TxiS9ZMA\",\"guide_components_progress-ring_emits.md\":\"D2Y6hIZ9\",\"guide_components_color-picker_index.md\":\"DCc4ixcU\",\"guide_components_progress-ring_index.md\":\"CPb-ZEPE\",\"guide_components_color-picker_properties.md\":\"wcXK29Vl\",\"guide_components_time-picker_index.md\":\"CQJdRRaG\",\"guide_components_drop-down_properties.md\":\"Bwlkpr1q\",\"guide_components_infinite-scroll-view_index.md\":\"yAuD807x\",\"guide_components_check-box_index.md\":\"FYgdu4oq\",\"guide_components_progress-bar_index.md\":\"D8vHQw5V\",\"guide_components_combo-box_index.md\":\"DTyu3eNd\",\"guide_components_info-box_emits.md\":\"DlEwpkkq\",\"guide_components_drop-down_index.md\":\"BZzJZQWq\",\"guide_components_list-view_index.md\":\"BoYvMzb0\",\"guide_components_verify-box_properties.md\":\"CW6W8fFf\",\"guide_components_verify-box_index.md\":\"DwSB40wR\",\"guide_index.md\":\"Bndlt3sL\",\"guide_components_web-window_index.md\":\"Bxc8vEeI\",\"index.md\":\"MTRqI42u\",\"guide_components_combo-box_properties.md\":\"AWfHzV6x\",\"guide_components_combobox_emits.md\":\"CGB6WLt8\",\"guide_components_combobox_properties.md\":\"Bja0hMou\",\"guide_components_details-list_index.md\":\"CcgOCIyt\",\"guide_components_info-box_index.md\":\"vXh-_DsL\",\"guide_components_combobox_index.md\":\"CsPkY6YB\",\"guide_components_date-picker_index.md\":\"12vmUIup\",\"guide_components_flip-view_emits.md\":\"DCheHjDj\",\"guide_components_panel_emits.md\":\"DG0REDq8\",\"guide_components_breadcrumb_index.md\":\"DyDm7PeP\",\"guide_components_radio-group_properties.md\":\"BnPxoKsQ\",\"guide_components_persona_emits.md\":\"CnsDPKRU\",\"guide_components_pivot_properties.md\":\"BmoLpPi1\",\"guide_components_persona_index.md\":\"DT00jby4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vfluent3\",\"description\":\"A Vue3 component library for Fluent UI\",\"base\":\"/VFluent3/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"VFluent3\",\"footer\":{\"message\":\"MIT Licensed\",\"copyright\":\"Copyright © Creator SN - 2022\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/\"}],\"sidebar\":[{\"text\":\"Basic input\",\"collapsed\":true,\"items\":[{\"text\":\"Button\",\"link\":\"/guide/components/button/\"},{\"text\":\"CheckBox\",\"link\":\"/guide/components/check-box/\"},{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"},{\"text\":\"Combobox\",\"link\":\"/guide/components/combobox/\"},{\"text\":\"DetailsList\",\"link\":\"/guide/components/details-list/\"},{\"text\":\"DropDown\",\"link\":\"/guide/components/drop-down/\"},{\"text\":\"Radio\",\"link\":\"/guide/components/radio/\"},{\"text\":\"RadioGroup\",\"link\":\"/guide/components/radio-group/\"},{\"text\":\"RatingControl\",\"link\":\"/guide/components/rating-control/\"},{\"text\":\"Slider\",\"link\":\"/guide/components/slider/\"},{\"text\":\"ToggleSwitch\",\"link\":\"/guide/components/toggle-switch/\"},{\"text\":\"Tag\",\"link\":\"/guide/components/tag/\"}]},{\"text\":\"Collections\",\"collapsed\":true,\"items\":[{\"text\":\"FlipView\",\"link\":\"/guide/components/flip-view/\"},{\"text\":\"ListView\",\"link\":\"/guide/components/list-view/\"},{\"text\":\"TreeView\",\"link\":\"/guide/components/tree-view/\"}]},{\"text\":\"Date & Time\",\"collapsed\":true,\"items\":[{\"text\":\"CalendarDatePicker\",\"link\":\"/guide/components/calendar-date-picker/\"},{\"text\":\"CalendarView\",\"link\":\"/guide/components/calendar-view/\"},{\"text\":\"DatePicker\",\"link\":\"/guide/components/date-picker/\"},{\"text\":\"TimePicker\",\"link\":\"/guide/components/time-picker/\"}]},{\"text\":\"Dialogs & flyouts\",\"collapsed\":true,\"items\":[{\"text\":\"Callout\",\"link\":\"/guide/components/callout/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Layout\",\"collapsed\":true,\"items\":[{\"text\":\"Collapse\",\"link\":\"/guide/components/collapse/\"},{\"text\":\"Expander\",\"link\":\"/guide/components/expander/\"},{\"text\":\"Drawer\",\"link\":\"/guide/components/drawer/\"},{\"text\":\"Panel\",\"link\":\"/guide/components/panel/\"}]},{\"text\":\"Media\",\"collapsed\":true,\"items\":[{\"text\":\"Image\",\"link\":\"/guide/components/image/\"},{\"text\":\"Img\",\"link\":\"/guide/components/img/\"},{\"text\":\"ImgBox\",\"link\":\"/guide/components/img-box/\"},{\"text\":\"Persona\",\"link\":\"/guide/components/persona/\"}]},{\"text\":\"Menu & toolbars\",\"collapsed\":true,\"items\":[{\"text\":\"CommandBar\",\"link\":\"/guide/components/command-bar/\"},{\"text\":\"MenuFlyout\",\"link\":\"/guide/components/menu-flyout/\"},{\"text\":\"SwipeControl\",\"link\":\"/guide/components/swipe-control/\"}]},{\"text\":\"Navigation\",\"collapsed\":true,\"items\":[{\"text\":\"Breadcrumb\",\"link\":\"/guide/components/breadcrumb/\"},{\"text\":\"NavigationPanel\",\"link\":\"/guide/components/navigation-panel/\"},{\"text\":\"NavigationView\",\"link\":\"/guide/components/navigation-view/\"},{\"text\":\"Pivot\",\"link\":\"/guide/components/pivot/\"},{\"text\":\"Pagination\",\"link\":\"/guide/components/pagination/\"}]},{\"text\":\"Scrolling\",\"collapsed\":true,\"items\":[{\"text\":\"InfiniteScrollView\",\"link\":\"/guide/components/infinite-scroll-view/\"},{\"text\":\"ScrollStory\",\"link\":\"/guide/components/scroll-story/\"}]},{\"text\":\"Status & info\",\"collapsed\":true,\"items\":[{\"text\":\"Badge\",\"link\":\"/guide/components/badge/\"},{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"ProgressBar\",\"link\":\"/guide/components/progress-bar/\"},{\"text\":\"ProgressRing\",\"link\":\"/guide/components/progress-ring/\"}]},{\"text\":\"Styles\",\"collapsed\":true,\"items\":[{\"text\":\"AnimatedIcon\",\"link\":\"/guide/components/animated-icon/\"},{\"text\":\"IconElement\",\"link\":\"/guide/components/icon-element/\"},{\"text\":\"RevealContainer\",\"link\":\"/guide/components/reveal-container/\"},{\"text\":\"Shimmer\",\"link\":\"/guide/components/shimmer/\"}]},{\"text\":\"Text\",\"collapsed\":true,\"items\":[{\"text\":\"SearchBox\",\"link\":\"/guide/components/search-box/\"},{\"text\":\"TextBox\",\"link\":\"/guide/components/text-box/\"},{\"text\":\"TextField\",\"link\":\"/guide/components/text-field/\"},{\"text\":\"VerifyBox\",\"link\":\"/guide/components/verify-box/\"}]},{\"text\":\"Windowing\",\"collapsed\":true,\"items\":[{\"text\":\"WebWindow\",\"link\":\"/guide/components/web-window/\"}]},{\"text\":\"Global\",\"collapsed\":true,\"items\":[{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Advance\",\"collapsed\":true,\"items\":[{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git a/guide/components/time-picker/index.html b/guide/components/time-picker/index.html
new file mode 100644
index 0000000..428f9e8
--- /dev/null
+++ b/guide/components/time-picker/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>TimePicker | vfluent3</title>
+    <meta name="description" content="A Vue3 component library for Fluent UI">
+    <meta name="generator" content="VitePress v1.0.0-rc.45">
+    <link rel="preload stylesheet" href="/VFluent3/assets/style.BabQegKX.css" as="style">
+    
+    <script type="module" src="/VFluent3/assets/app.CSutcJ2E.js"></script>
+    <link rel="preload" href="/VFluent3/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/framework.DvIFzl91.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/theme.CgqFBnN_.js">
+    <link rel="modulepreload" href="/VFluent3/assets/guide_components_time-picker_index.md.CQJdRRaG.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-19c990f1><div class="wrapper" data-v-19c990f1><div class="container" data-v-19c990f1><div class="title" data-v-19c990f1><div class="VPNavBarTitle has-sidebar" data-v-19c990f1 data-v-ab179fa1><a class="title" href="/VFluent3/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>VFluent3</span><!--[--><!--]--></a></div></div><div class="content" data-v-19c990f1><div class="content-body" data-v-19c990f1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-19c990f1><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-19c990f1 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Guide</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-19c990f1 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-19c990f1 data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-19c990f1 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-19c990f1><div class="divider-line" data-v-19c990f1></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-d2ecc192><button data-v-d2ecc192>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-575e6a36><div class="curtain" data-v-575e6a36></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-575e6a36><span class="visually-hidden" id="sidebar-aria-label" data-v-575e6a36> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Basic input</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/button/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/check-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CheckBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/combobox/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Combobox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/details-list/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DetailsList</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drop-down/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DropDown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio-group/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RadioGroup</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/rating-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RatingControl</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/slider/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/toggle-switch/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ToggleSwitch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tag/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Tag</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Collections</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/flip-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>FlipView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/list-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ListView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tree-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TreeView</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible has-active" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Date & Time</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarDatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/time-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TimePicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Dialogs & flyouts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/callout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Callout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Layout</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/collapse/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Collapse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/expander/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Expander</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drawer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Panel</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Media</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/image/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Img</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ImgBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/persona/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Persona</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Menu & toolbars</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/command-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CommandBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/menu-flyout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MenuFlyout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/swipe-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SwipeControl</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Navigation</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/breadcrumb/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationPanel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pivot/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pivot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pagination/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pagination</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Scrolling</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/infinite-scroll-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfiniteScrollView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/scroll-story/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ScrollStory</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Status & info</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/badge/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-ring/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressRing</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Styles</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/animated-icon/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>AnimatedIcon</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/icon-element/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>IconElement</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/reveal-container/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RevealContainer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/shimmer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Shimmer</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Text</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/search-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SearchBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-field/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextField</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/verify-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>VerifyBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Windowing</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/web-window/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>WebWindow</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Global</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Advance</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-935f8a84><div class="content" data-v-935f8a84><div class="outline-marker" data-v-935f8a84></div><div class="outline-title" role="heading" aria-level="2" data-v-935f8a84>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-935f8a84><span class="visually-hidden" id="doc-outline-aria-label" data-v-935f8a84> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-935f8a84 data-v-b933a997><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _VFluent3_guide_components_time-picker_" data-v-39a288b8><div><h3 id="timepicker-default" tabindex="-1">TimePicker-Default <a class="header-anchor" href="#timepicker-default" aria-label="Permalink to &quot;TimePicker-Default&quot;">​</a></h3><!----><h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">v-model</td><td style="text-align:center;"></td><td style="text-align:center;">No</td><td style="text-align:center;">Date()</td><td style="text-align:center;">绑定的时间</td></tr><tr><td style="text-align:center;">timeType</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">12</td><td style="text-align:center;">时间制（可选12，24）</td></tr><tr><td style="text-align:center;">period</td><td style="text-align:center;">Array</td><td style="text-align:center;">No</td><td style="text-align:center;">[&#39;A.M.&#39;,&#39;P.M.&#39;]</td><td style="text-align:center;">上午下午显示</td></tr><tr><td style="text-align:center;">inputBackground</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">输入框背景色</td></tr><tr><td style="text-align:center;">selectedBackground</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">当前选中框背景色</td></tr><tr><td style="text-align:center;">optionBackground</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">选择器背景色</td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否禁用选项框</td></tr><tr><td style="text-align:center;">hoverColor</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">选项的Hover值</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">[&#39;light&#39;, &#39;dark&#39;, &#39;custom&#39;, &#39;system&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">system</td><td style="text-align:center;">Custom theme</td></tr></tbody></table><h3 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to &quot;Events&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">事件名(Name)</th><th style="text-align:center;">参数类型(args)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">focus</td><td style="text-align:center;"></td><td style="text-align:center;">触发焦点时触发</td></tr><tr><td style="text-align:center;">change</td><td style="text-align:center;"></td><td style="text-align:center;">当选中的时间发生变化时</td></tr></tbody></table></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-09de1c0f><!--[--><!--]--><!----><nav class="prev-next" data-v-09de1c0f><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link prev" href="/VFluent3/guide/components/date-picker/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Previous page</span><span class="title" data-v-09de1c0f>DatePicker</span><!--]--></a></div><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link next" href="/VFluent3/guide/components/callout/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Next page</span><span class="title" data-v-09de1c0f>Callout</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>MIT Licensed</p><p class="copyright" data-v-e315a0ad>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_calendar-date-picker_properties.md\":\"DXRjmMG8\",\"guide_components_image_properties.md\":\"DGanRzCb\",\"guide_components_img-box_index.md\":\"DYtggkf_\",\"guide_components_img_emits.md\":\"BlE7jvZQ\",\"guide_components_img_index.md\":\"Bm9FiuU4\",\"guide_components_icon-element_properties.md\":\"8Oakruwc\",\"guide_components_img_properties.md\":\"B42YSocI\",\"guide_components_drawer_index.md\":\"D_vpnCpE\",\"guide_components_verify-box_emits.md\":\"DT17Iazx\",\"guide_components_calendar-date-picker_index.md\":\"BdHjrurh\",\"guide_components_rating-control_index.md\":\"Q9l5Lfrr\",\"guide_components_rating-control_properties.md\":\"DKprnl0i\",\"guide_components_calendar-view_index.md\":\"zdoRYVx1\",\"guide_components_animated-icon_index.md\":\"yZDMzCFe\",\"guide_components_calendar-date-picker_emits.md\":\"D5OkfR8j\",\"guide_components_badge_index.md\":\"Bb4crrJn\",\"guide_components_image_index.md\":\"B7X6cWAZ\",\"guide_components_slider_index.md\":\"C7zZ2d-W\",\"guide_components_radio-group_index.md\":\"CVfh3h5H\",\"guide_components_swipe-control_index.md\":\"DwrDVPc1\",\"guide_components_color-picker_emits.md\":\"BHDXVtBQ\",\"guide_components_radio_index.md\":\"90as5QGp\",\"guide_components_pagination_properties.md\":\"JUAPvcTL\",\"guide_components_persona_properties.md\":\"DUTPhPMp\",\"guide_components_combo-box_emits.md\":\"Dh5R-qEv\",\"guide_components_pivot_emits.md\":\"BTJPgNpy\",\"guide_components_pagination_index.md\":\"CnW2zAht\",\"guide_components_flip-view_properties.md\":\"BqZ4hhgU\",\"guide_components_icon-element_emits.md\":\"D5TXFdTZ\",\"guide_components_flip-view_index.md\":\"DefnDOv6\",\"guide_components_navigation-panel_index.md\":\"6mO__sSK\",\"guide_components_rating-control_emits.md\":\"blvomSeC\",\"guide_components_icon-element_index.md\":\"DQ8K7JNn\",\"guide_components_navigation-view_index.md\":\"4AQRiz1k\",\"guide_components_toggle-switch_emits.md\":\"CLGzrNut\",\"guide_components_toggle-switch_index.md\":\"61en_q9-\",\"guide_components_scroll-story_index.md\":\"Vpgb1HSV\",\"guide_components_reveal-container_index.md\":\"Cut2r4tV\",\"guide_components_search-box_emits.md\":\"-d9sWNNt\",\"guide_components_search-box_properties.md\":\"DEKFfPFw\",\"guide_components_shimmer_emits.md\":\"CTMInlI3\",\"guide_components_tag_index.md\":\"BhhxkcHn\",\"guide_components_search-box_index.md\":\"DgkrY0oY\",\"guide_components_shimmer_index.md\":\"iZlHuTxw\",\"guide_components_shimmer_properties.md\":\"CdkU1o6H\",\"guide_components_tree-view_index.md\":\"CUrwan4q\",\"guide_components_text-field_index.md\":\"CXSimJtj\",\"guide_components_text-box_index.md\":\"C5moAPfB\",\"guide_components_progress-ring_properties.md\":\"Dc08Uiff\",\"guide_components_toggle-switch_properties.md\":\"tFppK_IS\",\"guide_components_radio-group_emits.md\":\"cEDzKVnN\",\"guide_components_collapse_index.md\":\"N9Iu5-2v\",\"guide_components_image_emits.md\":\"lmlz2xJd\",\"guide_components_callout_index.md\":\"D9RU33w6\",\"guide_components_pivot_index.md\":\"B_vwQL-5\",\"guide_components_command-bar_index.md\":\"Cp4_rrGB\",\"guide_components_pagination_emits.md\":\"Dng86A22\",\"guide_components_button_index.md\":\"7sqT2MQP\",\"guide_components_info-box_properties.md\":\"BI7Nvk-E\",\"guide_components_drop-down_emits.md\":\"BE95TdKW\",\"guide_components_expander_index.md\":\"BKgcUJzQ\",\"guide_components_message-bar_index.md\":\"AEtAWlF8\",\"guide_components_menu-flyout_index.md\":\"Csa7irPj\",\"guide_components_panel_index.md\":\"CsTu0bXo\",\"guide_components_panel_properties.md\":\"BaxoCYKq\",\"guide_components_progress-bar_emits.md\":\"BcwXUpsF\",\"guide_components_progress-bar_properties.md\":\"TxiS9ZMA\",\"guide_components_progress-ring_emits.md\":\"D2Y6hIZ9\",\"guide_components_color-picker_index.md\":\"DCc4ixcU\",\"guide_components_progress-ring_index.md\":\"CPb-ZEPE\",\"guide_components_color-picker_properties.md\":\"wcXK29Vl\",\"guide_components_time-picker_index.md\":\"CQJdRRaG\",\"guide_components_drop-down_properties.md\":\"Bwlkpr1q\",\"guide_components_infinite-scroll-view_index.md\":\"yAuD807x\",\"guide_components_check-box_index.md\":\"FYgdu4oq\",\"guide_components_progress-bar_index.md\":\"D8vHQw5V\",\"guide_components_combo-box_index.md\":\"DTyu3eNd\",\"guide_components_info-box_emits.md\":\"DlEwpkkq\",\"guide_components_drop-down_index.md\":\"BZzJZQWq\",\"guide_components_list-view_index.md\":\"BoYvMzb0\",\"guide_components_verify-box_properties.md\":\"CW6W8fFf\",\"guide_components_verify-box_index.md\":\"DwSB40wR\",\"guide_index.md\":\"Bndlt3sL\",\"guide_components_web-window_index.md\":\"Bxc8vEeI\",\"index.md\":\"MTRqI42u\",\"guide_components_combo-box_properties.md\":\"AWfHzV6x\",\"guide_components_combobox_emits.md\":\"CGB6WLt8\",\"guide_components_combobox_properties.md\":\"Bja0hMou\",\"guide_components_details-list_index.md\":\"CcgOCIyt\",\"guide_components_info-box_index.md\":\"vXh-_DsL\",\"guide_components_combobox_index.md\":\"CsPkY6YB\",\"guide_components_date-picker_index.md\":\"12vmUIup\",\"guide_components_flip-view_emits.md\":\"DCheHjDj\",\"guide_components_panel_emits.md\":\"DG0REDq8\",\"guide_components_breadcrumb_index.md\":\"DyDm7PeP\",\"guide_components_radio-group_properties.md\":\"BnPxoKsQ\",\"guide_components_persona_emits.md\":\"CnsDPKRU\",\"guide_components_pivot_properties.md\":\"BmoLpPi1\",\"guide_components_persona_index.md\":\"DT00jby4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vfluent3\",\"description\":\"A Vue3 component library for Fluent UI\",\"base\":\"/VFluent3/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"VFluent3\",\"footer\":{\"message\":\"MIT Licensed\",\"copyright\":\"Copyright © Creator SN - 2022\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/\"}],\"sidebar\":[{\"text\":\"Basic input\",\"collapsed\":true,\"items\":[{\"text\":\"Button\",\"link\":\"/guide/components/button/\"},{\"text\":\"CheckBox\",\"link\":\"/guide/components/check-box/\"},{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"},{\"text\":\"Combobox\",\"link\":\"/guide/components/combobox/\"},{\"text\":\"DetailsList\",\"link\":\"/guide/components/details-list/\"},{\"text\":\"DropDown\",\"link\":\"/guide/components/drop-down/\"},{\"text\":\"Radio\",\"link\":\"/guide/components/radio/\"},{\"text\":\"RadioGroup\",\"link\":\"/guide/components/radio-group/\"},{\"text\":\"RatingControl\",\"link\":\"/guide/components/rating-control/\"},{\"text\":\"Slider\",\"link\":\"/guide/components/slider/\"},{\"text\":\"ToggleSwitch\",\"link\":\"/guide/components/toggle-switch/\"},{\"text\":\"Tag\",\"link\":\"/guide/components/tag/\"}]},{\"text\":\"Collections\",\"collapsed\":true,\"items\":[{\"text\":\"FlipView\",\"link\":\"/guide/components/flip-view/\"},{\"text\":\"ListView\",\"link\":\"/guide/components/list-view/\"},{\"text\":\"TreeView\",\"link\":\"/guide/components/tree-view/\"}]},{\"text\":\"Date & Time\",\"collapsed\":true,\"items\":[{\"text\":\"CalendarDatePicker\",\"link\":\"/guide/components/calendar-date-picker/\"},{\"text\":\"CalendarView\",\"link\":\"/guide/components/calendar-view/\"},{\"text\":\"DatePicker\",\"link\":\"/guide/components/date-picker/\"},{\"text\":\"TimePicker\",\"link\":\"/guide/components/time-picker/\"}]},{\"text\":\"Dialogs & flyouts\",\"collapsed\":true,\"items\":[{\"text\":\"Callout\",\"link\":\"/guide/components/callout/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Layout\",\"collapsed\":true,\"items\":[{\"text\":\"Collapse\",\"link\":\"/guide/components/collapse/\"},{\"text\":\"Expander\",\"link\":\"/guide/components/expander/\"},{\"text\":\"Drawer\",\"link\":\"/guide/components/drawer/\"},{\"text\":\"Panel\",\"link\":\"/guide/components/panel/\"}]},{\"text\":\"Media\",\"collapsed\":true,\"items\":[{\"text\":\"Image\",\"link\":\"/guide/components/image/\"},{\"text\":\"Img\",\"link\":\"/guide/components/img/\"},{\"text\":\"ImgBox\",\"link\":\"/guide/components/img-box/\"},{\"text\":\"Persona\",\"link\":\"/guide/components/persona/\"}]},{\"text\":\"Menu & toolbars\",\"collapsed\":true,\"items\":[{\"text\":\"CommandBar\",\"link\":\"/guide/components/command-bar/\"},{\"text\":\"MenuFlyout\",\"link\":\"/guide/components/menu-flyout/\"},{\"text\":\"SwipeControl\",\"link\":\"/guide/components/swipe-control/\"}]},{\"text\":\"Navigation\",\"collapsed\":true,\"items\":[{\"text\":\"Breadcrumb\",\"link\":\"/guide/components/breadcrumb/\"},{\"text\":\"NavigationPanel\",\"link\":\"/guide/components/navigation-panel/\"},{\"text\":\"NavigationView\",\"link\":\"/guide/components/navigation-view/\"},{\"text\":\"Pivot\",\"link\":\"/guide/components/pivot/\"},{\"text\":\"Pagination\",\"link\":\"/guide/components/pagination/\"}]},{\"text\":\"Scrolling\",\"collapsed\":true,\"items\":[{\"text\":\"InfiniteScrollView\",\"link\":\"/guide/components/infinite-scroll-view/\"},{\"text\":\"ScrollStory\",\"link\":\"/guide/components/scroll-story/\"}]},{\"text\":\"Status & info\",\"collapsed\":true,\"items\":[{\"text\":\"Badge\",\"link\":\"/guide/components/badge/\"},{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"ProgressBar\",\"link\":\"/guide/components/progress-bar/\"},{\"text\":\"ProgressRing\",\"link\":\"/guide/components/progress-ring/\"}]},{\"text\":\"Styles\",\"collapsed\":true,\"items\":[{\"text\":\"AnimatedIcon\",\"link\":\"/guide/components/animated-icon/\"},{\"text\":\"IconElement\",\"link\":\"/guide/components/icon-element/\"},{\"text\":\"RevealContainer\",\"link\":\"/guide/components/reveal-container/\"},{\"text\":\"Shimmer\",\"link\":\"/guide/components/shimmer/\"}]},{\"text\":\"Text\",\"collapsed\":true,\"items\":[{\"text\":\"SearchBox\",\"link\":\"/guide/components/search-box/\"},{\"text\":\"TextBox\",\"link\":\"/guide/components/text-box/\"},{\"text\":\"TextField\",\"link\":\"/guide/components/text-field/\"},{\"text\":\"VerifyBox\",\"link\":\"/guide/components/verify-box/\"}]},{\"text\":\"Windowing\",\"collapsed\":true,\"items\":[{\"text\":\"WebWindow\",\"link\":\"/guide/components/web-window/\"}]},{\"text\":\"Global\",\"collapsed\":true,\"items\":[{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Advance\",\"collapsed\":true,\"items\":[{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git a/guide/components/toggle-switch/emits.html b/guide/components/toggle-switch/emits.html
index b9b783d..c56c584 100644
--- a/guide/components/toggle-switch/emits.html
+++ b/guide/components/toggle-switch/emits.html
@@ -1,20 +1,24 @@
 <!DOCTYPE html>
-<html lang="en-US">
+<html lang="en-US" dir="ltr">
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>Emits | vfluent3</title>
+    <title>vfluent3</title>
     <meta name="description" content="A Vue3 component library for Fluent UI">
-    <link rel="stylesheet" href="/VFluent3/assets/style.0a1d87af.css">
-    <link rel="modulepreload" href="/VFluent3/assets/app.d60fa8c3.js">
-    <link rel="modulepreload" href="/VFluent3/assets/guide_components_toggle-switch_emits.md.5146435f.lean.js">
+    <meta name="generator" content="VitePress v1.0.0-rc.45">
+    <link rel="preload stylesheet" href="/VFluent3/assets/style.BabQegKX.css" as="style">
     
-    <script>(()=>{const e=localStorage.getItem("vitepress-theme-appearance"),a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script type="module" src="/VFluent3/assets/app.CSutcJ2E.js"></script>
+    <link rel="preload" href="/VFluent3/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/framework.DvIFzl91.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/theme.CgqFBnN_.js">
+    <link rel="modulepreload" href="/VFluent3/assets/guide_components_toggle-switch_emits.md.CLGzrNut.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
   </head>
   <body>
-    <div id="app"><div class="Layout" data-v-058b7495><!--[--><!--]--><!--[--><span tabindex="-1" data-v-bea91388></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-bea91388> Skip to content </a><!--]--><!----><header class="VPNav" data-v-058b7495 data-v-2a0a2738><div class="VPNavBar has-sidebar" data-v-2a0a2738 data-v-45c9f423><div class="container" data-v-45c9f423><div class="VPNavBarTitle has-sidebar" data-v-45c9f423 data-v-011600ce><a class="title" href="/VFluent3/" data-v-011600ce><!----><!--[-->VFluent3<!--]--></a></div><div class="content" data-v-45c9f423><!----><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-45c9f423 data-v-4da4371d><span id="main-nav-aria-label" class="visually-hidden" data-v-4da4371d>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" data-v-4da4371d data-v-66f8d518 data-v-4d08dd3a><!--[-->Home<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" data-v-4da4371d data-v-66f8d518 data-v-4d08dd3a><!--[-->Guide<!--]--><!----></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-45c9f423 data-v-bf1c94ca><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" data-v-bf1c94ca data-v-d0ee0df2 data-v-55b931a0><span class="check" data-v-55b931a0><span class="icon" data-v-55b931a0><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-d0ee0df2><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-d0ee0df2><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-45c9f423 data-v-7cece6ac data-v-37af1650><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-37af1650><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-37af1650><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-37af1650><div class="VPMenu" data-v-37af1650 data-v-17dc081b><!----><!--[--><!--[--><!----><div class="group" data-v-7cece6ac><div class="item appearance" data-v-7cece6ac><p class="label" data-v-7cece6ac>Appearance</p><div class="appearance-action" data-v-7cece6ac><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" data-v-7cece6ac data-v-d0ee0df2 data-v-55b931a0><span class="check" data-v-55b931a0><span class="icon" data-v-55b931a0><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-d0ee0df2><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-d0ee0df2><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-45c9f423 data-v-5484e669><span class="container" data-v-5484e669><span class="top" data-v-5484e669></span><span class="middle" data-v-5484e669></span><span class="bottom" data-v-5484e669></span></span></button></div></div></div><!----></header><div class="VPLocalNav" data-v-058b7495 data-v-f623cd72><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-f623cd72><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-f623cd72><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-f623cd72>Menu</span></button><a class="top-link" href="#" data-v-f623cd72> Return to top </a></div><aside class="VPSidebar" data-v-058b7495 data-v-3b8ec0c7><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-3b8ec0c7><span class="visually-hidden" id="sidebar-aria-label" data-v-3b8ec0c7> Sidebar Navigation </span><!--[--><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Basic</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/button/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Button</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/check-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>CheckBox</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/radio/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Radio</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/progress-bar/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ProgressBar</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/progress-ring/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ProgressRing</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/toggle-switch/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ToggleSwitch</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/img/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Img</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/text-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>TextBox</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/combo-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ComboBox</span><!--]--><!----></a><!--]--></div></section></div><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Global</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/message-bar/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>MessageBar</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/info-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>InfoBox</span><!--]--><!----></a><!--]--></div></section></div><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Advance</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/color-picker/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ColorPicker</span><!--]--><!----></a><!--]--></div></section></div><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-058b7495 data-v-564173e9><div class="VPDoc has-sidebar" data-v-564173e9 data-v-32b7ddf4><div class="container" data-v-32b7ddf4><div class="aside" data-v-32b7ddf4><div class="aside-curtain" data-v-32b7ddf4></div><div class="aside-container" data-v-32b7ddf4><div class="aside-content" data-v-32b7ddf4><div class="VPDocAside" data-v-32b7ddf4 data-v-35c1bae1><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline has-outline" data-v-35c1bae1 data-v-123cce62><div class="content" data-v-123cce62><div class="outline-marker" data-v-123cce62></div><div class="outline-title" data-v-123cce62>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-123cce62><span class="visually-hidden" id="doc-outline-aria-label" data-v-123cce62> Table of Contents for current page </span><ul class="root" data-v-123cce62><!--[--><li style="" data-v-123cce62><a class="outline-link" href="#emits" data-v-123cce62>Emits</a><!----></li><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-35c1bae1></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-32b7ddf4><div class="content-container" data-v-32b7ddf4><!--[--><!--]--><main class="main" data-v-32b7ddf4><div style="position:relative;" class="vp-doc _VFluent3_guide_components_toggle-switch_emits" data-v-32b7ddf4><div><h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">blur</td><td style="text-align:center;">evt[FocusEvent]</td><td style="text-align:center;">onblur</td></tr><tr><td style="text-align:center;">change</td><td style="text-align:center;">val[boolean]</td><td style="text-align:center;">onchange</td></tr><tr><td style="text-align:center;">click</td><td style="text-align:center;">val[boolean]</td><td style="text-align:center;">onclick</td></tr><tr><td style="text-align:center;">focus</td><td style="text-align:center;">evt[FocusEvent]</td><td style="text-align:center;">onfocus</td></tr><tr><td style="text-align:center;">update:model-value</td><td style="text-align:center;">val[boolean]</td><td style="text-align:center;">v-model</td></tr></tbody></table></div></div></main><footer class="VPDocFooter" data-v-32b7ddf4 data-v-cfaa3a6c><div class="edit-info" data-v-cfaa3a6c><!----><!----></div><div class="prev-next" data-v-cfaa3a6c><div class="pager" data-v-cfaa3a6c><!----></div><div class="pager" data-v-cfaa3a6c><a class="pager-link next" href="/VFluent3/guide/components/button/" data-v-cfaa3a6c><span class="desc" data-v-cfaa3a6c>Next page</span><span class="title" data-v-cfaa3a6c>Button</span></a></div></div></footer><!--[--><!--]--></div></div></div></div></div><footer class="VPFooter has-sidebar" data-v-058b7495 data-v-a6c8dde4><div class="container" data-v-a6c8dde4><p class="message" data-v-a6c8dde4>MIT Licensed</p><p class="copyright" data-v-a6c8dde4>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
-    <script>__VP_HASH_MAP__ = JSON.parse("{\"guide_components_button_emits.md\":\"d682bf18\",\"guide_components_button_index.md\":\"23a8eb54\",\"guide_components_button_properties.md\":\"cd4004b6\",\"guide_components_check-box_emits.md\":\"31609794\",\"guide_components_check-box_index.md\":\"32046814\",\"guide_components_check-box_properties.md\":\"8f33ac0c\",\"guide_components_color-picker_emits.md\":\"00983cd0\",\"guide_components_color-picker_index.md\":\"b2d62612\",\"guide_components_color-picker_properties.md\":\"5466ba72\",\"guide_components_combo-box_emits.md\":\"d5ffda50\",\"guide_components_combo-box_index.md\":\"1c4364f5\",\"guide_components_combo-box_properties.md\":\"2e1d6060\",\"guide_components_img_emits.md\":\"6237adb4\",\"guide_components_img_index.md\":\"fa51a3a1\",\"guide_components_img_properties.md\":\"8d321b5e\",\"guide_components_info-box_emits.md\":\"c2e71eec\",\"guide_components_info-box_index.md\":\"06175fed\",\"guide_components_info-box_properties.md\":\"314dbb00\",\"guide_components_message-bar_emits.md\":\"e89a5a22\",\"guide_components_message-bar_index.md\":\"3f0b01d6\",\"guide_components_message-bar_properties.md\":\"ee3838d9\",\"guide_components_progress-bar_emits.md\":\"5b611e3b\",\"guide_components_progress-bar_index.md\":\"689c3241\",\"guide_components_progress-bar_properties.md\":\"39af7fb2\",\"guide_components_progress-ring_emits.md\":\"67e4644e\",\"guide_components_progress-ring_index.md\":\"9a33542b\",\"guide_components_progress-ring_properties.md\":\"c897c4bb\",\"guide_components_radio_emits.md\":\"28506857\",\"guide_components_radio_index.md\":\"e5a479ce\",\"guide_components_radio_properties.md\":\"f8e55d2f\",\"guide_components_text-box_emits.md\":\"0bf89ef8\",\"guide_components_text-box_index.md\":\"7ccfc637\",\"guide_components_text-box_properties.md\":\"aab3a89e\",\"guide_components_toggle-switch_emits.md\":\"5146435f\",\"guide_components_toggle-switch_index.md\":\"8be48081\",\"guide_components_toggle-switch_properties.md\":\"54984c3a\",\"guide_index.md\":\"e3dca1d7\",\"index.md\":\"1e9773d5\"}")</script>
-    <script type="module" async src="/VFluent3/assets/app.d60fa8c3.js"></script>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-19c990f1><div class="wrapper" data-v-19c990f1><div class="container" data-v-19c990f1><div class="title" data-v-19c990f1><div class="VPNavBarTitle has-sidebar" data-v-19c990f1 data-v-ab179fa1><a class="title" href="/VFluent3/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>VFluent3</span><!--[--><!--]--></a></div></div><div class="content" data-v-19c990f1><div class="content-body" data-v-19c990f1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-19c990f1><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-19c990f1 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Guide</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-19c990f1 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-19c990f1 data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-19c990f1 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-19c990f1><div class="divider-line" data-v-19c990f1></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-d2ecc192><button data-v-d2ecc192>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-575e6a36><div class="curtain" data-v-575e6a36></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-575e6a36><span class="visually-hidden" id="sidebar-aria-label" data-v-575e6a36> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Basic input</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/button/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/check-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CheckBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/combobox/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Combobox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/details-list/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DetailsList</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drop-down/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DropDown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio-group/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RadioGroup</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/rating-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RatingControl</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/slider/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/toggle-switch/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ToggleSwitch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tag/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Tag</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Collections</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/flip-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>FlipView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/list-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ListView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tree-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TreeView</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Date & Time</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarDatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/time-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TimePicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Dialogs & flyouts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/callout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Callout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Layout</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/collapse/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Collapse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/expander/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Expander</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drawer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Panel</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Media</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/image/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Img</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ImgBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/persona/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Persona</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Menu & toolbars</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/command-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CommandBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/menu-flyout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MenuFlyout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/swipe-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SwipeControl</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Navigation</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/breadcrumb/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationPanel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pivot/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pivot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pagination/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pagination</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Scrolling</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/infinite-scroll-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfiniteScrollView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/scroll-story/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ScrollStory</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Status & info</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/badge/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-ring/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressRing</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Styles</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/animated-icon/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>AnimatedIcon</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/icon-element/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>IconElement</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/reveal-container/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RevealContainer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/shimmer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Shimmer</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Text</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/search-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SearchBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-field/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextField</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/verify-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>VerifyBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Windowing</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/web-window/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>WebWindow</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Global</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Advance</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-935f8a84><div class="content" data-v-935f8a84><div class="outline-marker" data-v-935f8a84></div><div class="outline-title" role="heading" aria-level="2" data-v-935f8a84>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-935f8a84><span class="visually-hidden" id="doc-outline-aria-label" data-v-935f8a84> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-935f8a84 data-v-b933a997><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _VFluent3_guide_components_toggle-switch_emits" data-v-39a288b8><div><h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-label="Permalink to &quot;Emits&quot;">​</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead></table></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-09de1c0f><!--[--><!--]--><!----><nav class="prev-next" data-v-09de1c0f><div class="pager" data-v-09de1c0f><!----></div><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link next" href="/VFluent3/guide/components/button/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Next page</span><span class="title" data-v-09de1c0f>Button</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>MIT Licensed</p><p class="copyright" data-v-e315a0ad>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_calendar-date-picker_properties.md\":\"DXRjmMG8\",\"guide_components_image_properties.md\":\"DGanRzCb\",\"guide_components_img-box_index.md\":\"DYtggkf_\",\"guide_components_img_emits.md\":\"BlE7jvZQ\",\"guide_components_img_index.md\":\"Bm9FiuU4\",\"guide_components_icon-element_properties.md\":\"8Oakruwc\",\"guide_components_img_properties.md\":\"B42YSocI\",\"guide_components_drawer_index.md\":\"D_vpnCpE\",\"guide_components_verify-box_emits.md\":\"DT17Iazx\",\"guide_components_calendar-date-picker_index.md\":\"BdHjrurh\",\"guide_components_rating-control_index.md\":\"Q9l5Lfrr\",\"guide_components_rating-control_properties.md\":\"DKprnl0i\",\"guide_components_calendar-view_index.md\":\"zdoRYVx1\",\"guide_components_animated-icon_index.md\":\"yZDMzCFe\",\"guide_components_calendar-date-picker_emits.md\":\"D5OkfR8j\",\"guide_components_badge_index.md\":\"Bb4crrJn\",\"guide_components_image_index.md\":\"B7X6cWAZ\",\"guide_components_slider_index.md\":\"C7zZ2d-W\",\"guide_components_radio-group_index.md\":\"CVfh3h5H\",\"guide_components_swipe-control_index.md\":\"DwrDVPc1\",\"guide_components_color-picker_emits.md\":\"BHDXVtBQ\",\"guide_components_radio_index.md\":\"90as5QGp\",\"guide_components_pagination_properties.md\":\"JUAPvcTL\",\"guide_components_persona_properties.md\":\"DUTPhPMp\",\"guide_components_combo-box_emits.md\":\"Dh5R-qEv\",\"guide_components_pivot_emits.md\":\"BTJPgNpy\",\"guide_components_pagination_index.md\":\"CnW2zAht\",\"guide_components_flip-view_properties.md\":\"BqZ4hhgU\",\"guide_components_icon-element_emits.md\":\"D5TXFdTZ\",\"guide_components_flip-view_index.md\":\"DefnDOv6\",\"guide_components_navigation-panel_index.md\":\"6mO__sSK\",\"guide_components_rating-control_emits.md\":\"blvomSeC\",\"guide_components_icon-element_index.md\":\"DQ8K7JNn\",\"guide_components_navigation-view_index.md\":\"4AQRiz1k\",\"guide_components_toggle-switch_emits.md\":\"CLGzrNut\",\"guide_components_toggle-switch_index.md\":\"61en_q9-\",\"guide_components_scroll-story_index.md\":\"Vpgb1HSV\",\"guide_components_reveal-container_index.md\":\"Cut2r4tV\",\"guide_components_search-box_emits.md\":\"-d9sWNNt\",\"guide_components_search-box_properties.md\":\"DEKFfPFw\",\"guide_components_shimmer_emits.md\":\"CTMInlI3\",\"guide_components_tag_index.md\":\"BhhxkcHn\",\"guide_components_search-box_index.md\":\"DgkrY0oY\",\"guide_components_shimmer_index.md\":\"iZlHuTxw\",\"guide_components_shimmer_properties.md\":\"CdkU1o6H\",\"guide_components_tree-view_index.md\":\"CUrwan4q\",\"guide_components_text-field_index.md\":\"CXSimJtj\",\"guide_components_text-box_index.md\":\"C5moAPfB\",\"guide_components_progress-ring_properties.md\":\"Dc08Uiff\",\"guide_components_toggle-switch_properties.md\":\"tFppK_IS\",\"guide_components_radio-group_emits.md\":\"cEDzKVnN\",\"guide_components_collapse_index.md\":\"N9Iu5-2v\",\"guide_components_image_emits.md\":\"lmlz2xJd\",\"guide_components_callout_index.md\":\"D9RU33w6\",\"guide_components_pivot_index.md\":\"B_vwQL-5\",\"guide_components_command-bar_index.md\":\"Cp4_rrGB\",\"guide_components_pagination_emits.md\":\"Dng86A22\",\"guide_components_button_index.md\":\"7sqT2MQP\",\"guide_components_info-box_properties.md\":\"BI7Nvk-E\",\"guide_components_drop-down_emits.md\":\"BE95TdKW\",\"guide_components_expander_index.md\":\"BKgcUJzQ\",\"guide_components_message-bar_index.md\":\"AEtAWlF8\",\"guide_components_menu-flyout_index.md\":\"Csa7irPj\",\"guide_components_panel_index.md\":\"CsTu0bXo\",\"guide_components_panel_properties.md\":\"BaxoCYKq\",\"guide_components_progress-bar_emits.md\":\"BcwXUpsF\",\"guide_components_progress-bar_properties.md\":\"TxiS9ZMA\",\"guide_components_progress-ring_emits.md\":\"D2Y6hIZ9\",\"guide_components_color-picker_index.md\":\"DCc4ixcU\",\"guide_components_progress-ring_index.md\":\"CPb-ZEPE\",\"guide_components_color-picker_properties.md\":\"wcXK29Vl\",\"guide_components_time-picker_index.md\":\"CQJdRRaG\",\"guide_components_drop-down_properties.md\":\"Bwlkpr1q\",\"guide_components_infinite-scroll-view_index.md\":\"yAuD807x\",\"guide_components_check-box_index.md\":\"FYgdu4oq\",\"guide_components_progress-bar_index.md\":\"D8vHQw5V\",\"guide_components_combo-box_index.md\":\"DTyu3eNd\",\"guide_components_info-box_emits.md\":\"DlEwpkkq\",\"guide_components_drop-down_index.md\":\"BZzJZQWq\",\"guide_components_list-view_index.md\":\"BoYvMzb0\",\"guide_components_verify-box_properties.md\":\"CW6W8fFf\",\"guide_components_verify-box_index.md\":\"DwSB40wR\",\"guide_index.md\":\"Bndlt3sL\",\"guide_components_web-window_index.md\":\"Bxc8vEeI\",\"index.md\":\"MTRqI42u\",\"guide_components_combo-box_properties.md\":\"AWfHzV6x\",\"guide_components_combobox_emits.md\":\"CGB6WLt8\",\"guide_components_combobox_properties.md\":\"Bja0hMou\",\"guide_components_details-list_index.md\":\"CcgOCIyt\",\"guide_components_info-box_index.md\":\"vXh-_DsL\",\"guide_components_combobox_index.md\":\"CsPkY6YB\",\"guide_components_date-picker_index.md\":\"12vmUIup\",\"guide_components_flip-view_emits.md\":\"DCheHjDj\",\"guide_components_panel_emits.md\":\"DG0REDq8\",\"guide_components_breadcrumb_index.md\":\"DyDm7PeP\",\"guide_components_radio-group_properties.md\":\"BnPxoKsQ\",\"guide_components_persona_emits.md\":\"CnsDPKRU\",\"guide_components_pivot_properties.md\":\"BmoLpPi1\",\"guide_components_persona_index.md\":\"DT00jby4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vfluent3\",\"description\":\"A Vue3 component library for Fluent UI\",\"base\":\"/VFluent3/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"VFluent3\",\"footer\":{\"message\":\"MIT Licensed\",\"copyright\":\"Copyright © Creator SN - 2022\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/\"}],\"sidebar\":[{\"text\":\"Basic input\",\"collapsed\":true,\"items\":[{\"text\":\"Button\",\"link\":\"/guide/components/button/\"},{\"text\":\"CheckBox\",\"link\":\"/guide/components/check-box/\"},{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"},{\"text\":\"Combobox\",\"link\":\"/guide/components/combobox/\"},{\"text\":\"DetailsList\",\"link\":\"/guide/components/details-list/\"},{\"text\":\"DropDown\",\"link\":\"/guide/components/drop-down/\"},{\"text\":\"Radio\",\"link\":\"/guide/components/radio/\"},{\"text\":\"RadioGroup\",\"link\":\"/guide/components/radio-group/\"},{\"text\":\"RatingControl\",\"link\":\"/guide/components/rating-control/\"},{\"text\":\"Slider\",\"link\":\"/guide/components/slider/\"},{\"text\":\"ToggleSwitch\",\"link\":\"/guide/components/toggle-switch/\"},{\"text\":\"Tag\",\"link\":\"/guide/components/tag/\"}]},{\"text\":\"Collections\",\"collapsed\":true,\"items\":[{\"text\":\"FlipView\",\"link\":\"/guide/components/flip-view/\"},{\"text\":\"ListView\",\"link\":\"/guide/components/list-view/\"},{\"text\":\"TreeView\",\"link\":\"/guide/components/tree-view/\"}]},{\"text\":\"Date & Time\",\"collapsed\":true,\"items\":[{\"text\":\"CalendarDatePicker\",\"link\":\"/guide/components/calendar-date-picker/\"},{\"text\":\"CalendarView\",\"link\":\"/guide/components/calendar-view/\"},{\"text\":\"DatePicker\",\"link\":\"/guide/components/date-picker/\"},{\"text\":\"TimePicker\",\"link\":\"/guide/components/time-picker/\"}]},{\"text\":\"Dialogs & flyouts\",\"collapsed\":true,\"items\":[{\"text\":\"Callout\",\"link\":\"/guide/components/callout/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Layout\",\"collapsed\":true,\"items\":[{\"text\":\"Collapse\",\"link\":\"/guide/components/collapse/\"},{\"text\":\"Expander\",\"link\":\"/guide/components/expander/\"},{\"text\":\"Drawer\",\"link\":\"/guide/components/drawer/\"},{\"text\":\"Panel\",\"link\":\"/guide/components/panel/\"}]},{\"text\":\"Media\",\"collapsed\":true,\"items\":[{\"text\":\"Image\",\"link\":\"/guide/components/image/\"},{\"text\":\"Img\",\"link\":\"/guide/components/img/\"},{\"text\":\"ImgBox\",\"link\":\"/guide/components/img-box/\"},{\"text\":\"Persona\",\"link\":\"/guide/components/persona/\"}]},{\"text\":\"Menu & toolbars\",\"collapsed\":true,\"items\":[{\"text\":\"CommandBar\",\"link\":\"/guide/components/command-bar/\"},{\"text\":\"MenuFlyout\",\"link\":\"/guide/components/menu-flyout/\"},{\"text\":\"SwipeControl\",\"link\":\"/guide/components/swipe-control/\"}]},{\"text\":\"Navigation\",\"collapsed\":true,\"items\":[{\"text\":\"Breadcrumb\",\"link\":\"/guide/components/breadcrumb/\"},{\"text\":\"NavigationPanel\",\"link\":\"/guide/components/navigation-panel/\"},{\"text\":\"NavigationView\",\"link\":\"/guide/components/navigation-view/\"},{\"text\":\"Pivot\",\"link\":\"/guide/components/pivot/\"},{\"text\":\"Pagination\",\"link\":\"/guide/components/pagination/\"}]},{\"text\":\"Scrolling\",\"collapsed\":true,\"items\":[{\"text\":\"InfiniteScrollView\",\"link\":\"/guide/components/infinite-scroll-view/\"},{\"text\":\"ScrollStory\",\"link\":\"/guide/components/scroll-story/\"}]},{\"text\":\"Status & info\",\"collapsed\":true,\"items\":[{\"text\":\"Badge\",\"link\":\"/guide/components/badge/\"},{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"ProgressBar\",\"link\":\"/guide/components/progress-bar/\"},{\"text\":\"ProgressRing\",\"link\":\"/guide/components/progress-ring/\"}]},{\"text\":\"Styles\",\"collapsed\":true,\"items\":[{\"text\":\"AnimatedIcon\",\"link\":\"/guide/components/animated-icon/\"},{\"text\":\"IconElement\",\"link\":\"/guide/components/icon-element/\"},{\"text\":\"RevealContainer\",\"link\":\"/guide/components/reveal-container/\"},{\"text\":\"Shimmer\",\"link\":\"/guide/components/shimmer/\"}]},{\"text\":\"Text\",\"collapsed\":true,\"items\":[{\"text\":\"SearchBox\",\"link\":\"/guide/components/search-box/\"},{\"text\":\"TextBox\",\"link\":\"/guide/components/text-box/\"},{\"text\":\"TextField\",\"link\":\"/guide/components/text-field/\"},{\"text\":\"VerifyBox\",\"link\":\"/guide/components/verify-box/\"}]},{\"text\":\"Windowing\",\"collapsed\":true,\"items\":[{\"text\":\"WebWindow\",\"link\":\"/guide/components/web-window/\"}]},{\"text\":\"Global\",\"collapsed\":true,\"items\":[{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Advance\",\"collapsed\":true,\"items\":[{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
     
   </body>
 </html>
\ No newline at end of file
diff --git a/guide/components/toggle-switch/index.html b/guide/components/toggle-switch/index.html
index 67eff60..95be8cb 100644
--- a/guide/components/toggle-switch/index.html
+++ b/guide/components/toggle-switch/index.html
@@ -1,72 +1,24 @@
 <!DOCTYPE html>
-<html lang="en-US">
+<html lang="en-US" dir="ltr">
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1">
     <title>ToggleSwitch | vfluent3</title>
     <meta name="description" content="A Vue3 component library for Fluent UI">
-    <link rel="stylesheet" href="/VFluent3/assets/style.0a1d87af.css">
-    <link rel="modulepreload" href="/VFluent3/assets/chunks/index.9dba9c16.js">
-    <link rel="modulepreload" href="/VFluent3/assets/app.d60fa8c3.js">
-    <link rel="modulepreload" href="/VFluent3/assets/guide_components_toggle-switch_index.md.8be48081.lean.js">
+    <meta name="generator" content="VitePress v1.0.0-rc.45">
+    <link rel="preload stylesheet" href="/VFluent3/assets/style.BabQegKX.css" as="style">
     
-    <script>(()=>{const e=localStorage.getItem("vitepress-theme-appearance"),a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script type="module" src="/VFluent3/assets/app.CSutcJ2E.js"></script>
+    <link rel="preload" href="/VFluent3/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/framework.DvIFzl91.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/theme.CgqFBnN_.js">
+    <link rel="modulepreload" href="/VFluent3/assets/guide_components_toggle-switch_index.md.61en_q9-.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
   </head>
   <body>
-    <div id="app"><div class="Layout" data-v-058b7495><!--[--><!--]--><!--[--><span tabindex="-1" data-v-bea91388></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-bea91388> Skip to content </a><!--]--><!----><header class="VPNav" data-v-058b7495 data-v-2a0a2738><div class="VPNavBar has-sidebar" data-v-2a0a2738 data-v-45c9f423><div class="container" data-v-45c9f423><div class="VPNavBarTitle has-sidebar" data-v-45c9f423 data-v-011600ce><a class="title" href="/VFluent3/" data-v-011600ce><!----><!--[-->VFluent3<!--]--></a></div><div class="content" data-v-45c9f423><!----><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-45c9f423 data-v-4da4371d><span id="main-nav-aria-label" class="visually-hidden" data-v-4da4371d>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" data-v-4da4371d data-v-66f8d518 data-v-4d08dd3a><!--[-->Home<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" data-v-4da4371d data-v-66f8d518 data-v-4d08dd3a><!--[-->Guide<!--]--><!----></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-45c9f423 data-v-bf1c94ca><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" data-v-bf1c94ca data-v-d0ee0df2 data-v-55b931a0><span class="check" data-v-55b931a0><span class="icon" data-v-55b931a0><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-d0ee0df2><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-d0ee0df2><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-45c9f423 data-v-7cece6ac data-v-37af1650><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-37af1650><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-37af1650><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-37af1650><div class="VPMenu" data-v-37af1650 data-v-17dc081b><!----><!--[--><!--[--><!----><div class="group" data-v-7cece6ac><div class="item appearance" data-v-7cece6ac><p class="label" data-v-7cece6ac>Appearance</p><div class="appearance-action" data-v-7cece6ac><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" data-v-7cece6ac data-v-d0ee0df2 data-v-55b931a0><span class="check" data-v-55b931a0><span class="icon" data-v-55b931a0><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-d0ee0df2><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-d0ee0df2><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-45c9f423 data-v-5484e669><span class="container" data-v-5484e669><span class="top" data-v-5484e669></span><span class="middle" data-v-5484e669></span><span class="bottom" data-v-5484e669></span></span></button></div></div></div><!----></header><div class="VPLocalNav" data-v-058b7495 data-v-f623cd72><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-f623cd72><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-f623cd72><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-f623cd72>Menu</span></button><a class="top-link" href="#" data-v-f623cd72> Return to top </a></div><aside class="VPSidebar" data-v-058b7495 data-v-3b8ec0c7><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-3b8ec0c7><span class="visually-hidden" id="sidebar-aria-label" data-v-3b8ec0c7> Sidebar Navigation </span><!--[--><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Basic</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/button/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Button</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/check-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>CheckBox</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/radio/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Radio</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/progress-bar/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ProgressBar</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/progress-ring/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ProgressRing</span><!--]--><!----></a><a class="VPLink link active" href="/VFluent3/guide/components/toggle-switch/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ToggleSwitch</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/img/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Img</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/text-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>TextBox</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/combo-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ComboBox</span><!--]--><!----></a><!--]--></div></section></div><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Global</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/message-bar/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>MessageBar</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/info-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>InfoBox</span><!--]--><!----></a><!--]--></div></section></div><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Advance</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/color-picker/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ColorPicker</span><!--]--><!----></a><!--]--></div></section></div><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-058b7495 data-v-564173e9><div class="VPDoc has-sidebar" data-v-564173e9 data-v-32b7ddf4><div class="container" data-v-32b7ddf4><div class="aside" data-v-32b7ddf4><div class="aside-curtain" data-v-32b7ddf4></div><div class="aside-container" data-v-32b7ddf4><div class="aside-content" data-v-32b7ddf4><div class="VPDocAside" data-v-32b7ddf4 data-v-35c1bae1><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline has-outline" data-v-35c1bae1 data-v-123cce62><div class="content" data-v-123cce62><div class="outline-marker" data-v-123cce62></div><div class="outline-title" data-v-123cce62>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-123cce62><span class="visually-hidden" id="doc-outline-aria-label" data-v-123cce62> Table of Contents for current page </span><ul class="root" data-v-123cce62><!--[--><li style="" data-v-123cce62><a class="outline-link" href="#quick-start" data-v-123cce62>Quick Start</a><!----></li><li style="" data-v-123cce62><a class="outline-link" href="#properties" data-v-123cce62>Properties</a><!----></li><li style="" data-v-123cce62><a class="outline-link" href="#emits" data-v-123cce62>Emits</a><!----></li><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-35c1bae1></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-32b7ddf4><div class="content-container" data-v-32b7ddf4><!--[--><!--]--><main class="main" data-v-32b7ddf4><div style="position:relative;" class="vp-doc _VFluent3_guide_components_toggle-switch_index" data-v-32b7ddf4><div><h1 id="toggleswitch" tabindex="-1">ToggleSwitch <a class="header-anchor" href="#toggleswitch" aria-hidden="true">#</a></h1><h2 id="quick-start" tabindex="-1">Quick Start <a class="header-anchor" href="#quick-start" aria-hidden="true">#</a></h2><h3 id="default" tabindex="-1">Default <a class="header-anchor" href="#default" aria-hidden="true">#</a></h3><hr><div class="fv-toggle-switch light" style=""><label class="label"><!----><input type="checkbox" class="checkbox"><div class="bg"><div class="circle"></div></div><span class="text" style="">Off</span></label></div><div class="language-vue-html"><span class="copy"></span><div class="highlight-lines"><br><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><br><br><br><br></div><pre><code><span class="line"></span>
-<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-toggle-switch</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">v-model</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">click</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">click</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">change</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">change</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">blur</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">blur</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">focus</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">focus</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">on</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">ON</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">off</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">OFF</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-toggle-switch</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><h3 id="disabled" tabindex="-1">Disabled <a class="header-anchor" href="#disabled" aria-hidden="true">#</a></h3><hr><div class="fv-toggle-switch disabled light" style=""><label class="label"><!----><input type="checkbox" class="checkbox"><div class="bg"><div class="circle"></div></div><span class="text" style="">Off</span></label></div><div class="language-vue-html"><span class="copy"></span><div class="highlight-lines"><br><br><br><br><br><br><br><br><br><div class="highlighted"> </div><br><br></div><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-toggle-switch</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">v-model</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">click</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">click</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">change</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">change</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">blur</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">blur</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">focus</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">focus</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">on</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">ON</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">off</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">OFF</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">disabled</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-toggle-switch</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><h3 id="custom" tabindex="-1">Custom <a class="header-anchor" href="#custom" aria-hidden="true">#</a></h3><hr><ol><li>custom color</li></ol><div class="fv-toggle-switch light" style="--fv-toggle-switch-off-bgcolor:rgba(0, 204, 153, 1);--fv-toggle-switch-on-bgcolor:rgba(0, 204, 153, 1);--fv-toggle-switch-color:rgba(0, 204, 153, 1);"><label class="label"><!----><input type="checkbox" class="checkbox"><div class="bg"><div class="circle"></div></div><span class="text" style="display:none;"></span></label></div><div class="language-vue-html"><span class="copy"></span><div class="highlight-lines"><br><br><br><br><br><br><br><br><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><br><br><br></div><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-toggle-switch</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">v-model</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">click</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">click</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">change</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">change</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">blur</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">blur</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">focus</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">focus</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">  </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">on</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">Yes</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">off-foreground</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">rgba(0, 204, 153, 1)</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">on-background</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">rgba(0, 204, 153, 1)</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">foreground</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">rgba(0, 204, 153, 1)</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">    &gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-toggle-switch</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><ol start="2"><li>box side</li></ol><div class="fv-toggle-switch light" style="--fv-toggle-switch-off-bgcolor:rgba(0, 204, 153, 1);--fv-toggle-switch-on-bgcolor:rgba(0, 204, 153, 1);--fv-toggle-switch-color:rgba(0, 204, 153, 1);"><label class="label"><span style="" class="text">No</span><input type="checkbox" class="checkbox"><div class="bg"><div class="circle"></div></div><!----></label></div><div class="language-vue-html"><span class="copy"></span><div class="highlight-lines"><br><br><br><br><br><br><br><br><div class="highlighted"> </div><br><br><br><div class="highlighted"> </div><br><br><br></div><pre><code><span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">fv-toggle-switch</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">v-model</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">value</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">click</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">click</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">change</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">change</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">blur</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">blur</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        @</span><span style="color:#C792EA;">focus</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">focus</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">  </span></span>
-<span class="line"><span style="color:#89DDFF;">        :</span><span style="color:#C792EA;">theme</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">theme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">on</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">Yes</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">off</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">No</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">off-foreground</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">rgba(0, 204, 153, 1)</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">on-background</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">rgba(0, 204, 153, 1)</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">foreground</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">rgba(0, 204, 153, 1)</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#C792EA;">box-side</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">end</span><span style="color:#89DDFF;">&quot;</span></span>
-<span class="line"><span style="color:#89DDFF;">    &gt;</span></span>
-<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">fv-toggle-switch</span><span style="color:#89DDFF;">&gt;</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">box-side</td><td style="text-align:center;">[&#39;start&#39;,&#39;end&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;start&#39;</td><td style="text-align:center;">box side</td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">disabled</td></tr><tr><td style="text-align:center;">foreground</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">text color</td></tr><tr><td style="text-align:center;">lang</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">i18n</td></tr><tr><td style="text-align:center;">model-value</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">v-model</td></tr><tr><td style="text-align:center;">off</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">off text</td></tr><tr><td style="text-align:center;">off-foreground</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">off circle and border color</td></tr><tr><td style="text-align:center;">on</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">on text</td></tr><tr><td style="text-align:center;">on-background</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">on background color</td></tr><tr><td style="text-align:center;">on-foreground</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">on circle color</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">[&#39;light&#39;,&#39;dark&#39;,&#39;global&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">theme</td></tr></tbody></table><h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">blur</td><td style="text-align:center;">evt[FocusEvent]</td><td style="text-align:center;">onblur</td></tr><tr><td style="text-align:center;">change</td><td style="text-align:center;">val[boolean]</td><td style="text-align:center;">onchange</td></tr><tr><td style="text-align:center;">click</td><td style="text-align:center;">val[boolean]</td><td style="text-align:center;">onclick</td></tr><tr><td style="text-align:center;">focus</td><td style="text-align:center;">evt[FocusEvent]</td><td style="text-align:center;">onfocus</td></tr><tr><td style="text-align:center;">update:model-value</td><td style="text-align:center;">val[boolean]</td><td style="text-align:center;">v-model</td></tr></tbody></table></div></div></main><footer class="VPDocFooter" data-v-32b7ddf4 data-v-cfaa3a6c><div class="edit-info" data-v-cfaa3a6c><!----><!----></div><div class="prev-next" data-v-cfaa3a6c><div class="pager" data-v-cfaa3a6c><a class="pager-link prev" href="/VFluent3/guide/components/progress-ring/" data-v-cfaa3a6c><span class="desc" data-v-cfaa3a6c>Previous page</span><span class="title" data-v-cfaa3a6c>ProgressRing</span></a></div><div class="has-prev pager" data-v-cfaa3a6c><a class="pager-link next" href="/VFluent3/guide/components/img/" data-v-cfaa3a6c><span class="desc" data-v-cfaa3a6c>Next page</span><span class="title" data-v-cfaa3a6c>Img</span></a></div></div></footer><!--[--><!--]--></div></div></div></div></div><footer class="VPFooter has-sidebar" data-v-058b7495 data-v-a6c8dde4><div class="container" data-v-a6c8dde4><p class="message" data-v-a6c8dde4>MIT Licensed</p><p class="copyright" data-v-a6c8dde4>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
-    <script>__VP_HASH_MAP__ = JSON.parse("{\"guide_components_button_emits.md\":\"d682bf18\",\"guide_components_button_index.md\":\"23a8eb54\",\"guide_components_button_properties.md\":\"cd4004b6\",\"guide_components_check-box_emits.md\":\"31609794\",\"guide_components_check-box_index.md\":\"32046814\",\"guide_components_check-box_properties.md\":\"8f33ac0c\",\"guide_components_color-picker_emits.md\":\"00983cd0\",\"guide_components_color-picker_index.md\":\"b2d62612\",\"guide_components_color-picker_properties.md\":\"5466ba72\",\"guide_components_combo-box_emits.md\":\"d5ffda50\",\"guide_components_combo-box_index.md\":\"1c4364f5\",\"guide_components_combo-box_properties.md\":\"2e1d6060\",\"guide_components_img_emits.md\":\"6237adb4\",\"guide_components_img_index.md\":\"fa51a3a1\",\"guide_components_img_properties.md\":\"8d321b5e\",\"guide_components_info-box_emits.md\":\"c2e71eec\",\"guide_components_info-box_index.md\":\"06175fed\",\"guide_components_info-box_properties.md\":\"314dbb00\",\"guide_components_message-bar_emits.md\":\"e89a5a22\",\"guide_components_message-bar_index.md\":\"3f0b01d6\",\"guide_components_message-bar_properties.md\":\"ee3838d9\",\"guide_components_progress-bar_emits.md\":\"5b611e3b\",\"guide_components_progress-bar_index.md\":\"689c3241\",\"guide_components_progress-bar_properties.md\":\"39af7fb2\",\"guide_components_progress-ring_emits.md\":\"67e4644e\",\"guide_components_progress-ring_index.md\":\"9a33542b\",\"guide_components_progress-ring_properties.md\":\"c897c4bb\",\"guide_components_radio_emits.md\":\"28506857\",\"guide_components_radio_index.md\":\"e5a479ce\",\"guide_components_radio_properties.md\":\"f8e55d2f\",\"guide_components_text-box_emits.md\":\"0bf89ef8\",\"guide_components_text-box_index.md\":\"7ccfc637\",\"guide_components_text-box_properties.md\":\"aab3a89e\",\"guide_components_toggle-switch_emits.md\":\"5146435f\",\"guide_components_toggle-switch_index.md\":\"8be48081\",\"guide_components_toggle-switch_properties.md\":\"54984c3a\",\"guide_index.md\":\"e3dca1d7\",\"index.md\":\"1e9773d5\"}")</script>
-    <script type="module" async src="/VFluent3/assets/app.d60fa8c3.js"></script>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-19c990f1><div class="wrapper" data-v-19c990f1><div class="container" data-v-19c990f1><div class="title" data-v-19c990f1><div class="VPNavBarTitle has-sidebar" data-v-19c990f1 data-v-ab179fa1><a class="title" href="/VFluent3/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>VFluent3</span><!--[--><!--]--></a></div></div><div class="content" data-v-19c990f1><div class="content-body" data-v-19c990f1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-19c990f1><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-19c990f1 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Guide</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-19c990f1 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-19c990f1 data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-19c990f1 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-19c990f1><div class="divider-line" data-v-19c990f1></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-d2ecc192><button data-v-d2ecc192>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-575e6a36><div class="curtain" data-v-575e6a36></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-575e6a36><span class="visually-hidden" id="sidebar-aria-label" data-v-575e6a36> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible has-active" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Basic input</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/button/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/check-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CheckBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/combobox/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Combobox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/details-list/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DetailsList</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drop-down/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DropDown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio-group/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RadioGroup</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/rating-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RatingControl</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/slider/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/toggle-switch/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ToggleSwitch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tag/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Tag</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Collections</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/flip-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>FlipView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/list-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ListView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tree-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TreeView</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Date & Time</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarDatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/time-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TimePicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Dialogs & flyouts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/callout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Callout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Layout</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/collapse/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Collapse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/expander/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Expander</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drawer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Panel</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Media</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/image/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Img</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ImgBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/persona/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Persona</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Menu & toolbars</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/command-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CommandBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/menu-flyout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MenuFlyout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/swipe-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SwipeControl</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Navigation</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/breadcrumb/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationPanel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pivot/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pivot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pagination/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pagination</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Scrolling</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/infinite-scroll-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfiniteScrollView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/scroll-story/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ScrollStory</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Status & info</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/badge/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-ring/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressRing</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Styles</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/animated-icon/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>AnimatedIcon</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/icon-element/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>IconElement</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/reveal-container/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RevealContainer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/shimmer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Shimmer</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Text</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/search-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SearchBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-field/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextField</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/verify-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>VerifyBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Windowing</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/web-window/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>WebWindow</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Global</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Advance</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-935f8a84><div class="content" data-v-935f8a84><div class="outline-marker" data-v-935f8a84></div><div class="outline-title" role="heading" aria-level="2" data-v-935f8a84>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-935f8a84><span class="visually-hidden" id="doc-outline-aria-label" data-v-935f8a84> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-935f8a84 data-v-b933a997><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _VFluent3_guide_components_toggle-switch_" data-v-39a288b8><div><h3 id="toggleswitch-demo" tabindex="-1">ToggleSwitch-DEMO <a class="header-anchor" href="#toggleswitch-demo" aria-label="Permalink to &quot;ToggleSwitch-DEMO&quot;">​</a></h3><hr><!----><h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">value</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">Toggleswitch value</td></tr><tr><td style="text-align:center;">on</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">On</td><td style="text-align:center;">Toggleswitch content when value is true</td></tr><tr><td style="text-align:center;">off</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">Off</td><td style="text-align:center;">Toggleswitch content when value is false</td></tr><tr><td style="text-align:center;">onForeground</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">Toggleswitch content foreground when value is true</td></tr><tr><td style="text-align:center;">offForeground</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">Toggleswitch content foreground when value is false</td></tr><tr><td style="text-align:center;">borderColor</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">width</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">40</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">height</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">20</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">insideContent</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">ringBackground</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">switchOnBackground</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">system</td><td style="text-align:center;">主题样式, 包含<code>light</code>, <code>dark</code>, <code>system</code>, <code>custom</code>几种样式</td></tr></tbody></table><h3 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to &quot;Events&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">事件名(Name)</th><th style="text-align:center;">参数类型(args)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">toggle</td><td style="text-align:center;">value</td><td style="text-align:center;"></td></tr></tbody></table></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-09de1c0f><!--[--><!--]--><!----><nav class="prev-next" data-v-09de1c0f><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link prev" href="/VFluent3/guide/components/slider/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Previous page</span><span class="title" data-v-09de1c0f>Slider</span><!--]--></a></div><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link next" href="/VFluent3/guide/components/tag/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Next page</span><span class="title" data-v-09de1c0f>Tag</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>MIT Licensed</p><p class="copyright" data-v-e315a0ad>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_calendar-date-picker_properties.md\":\"DXRjmMG8\",\"guide_components_image_properties.md\":\"DGanRzCb\",\"guide_components_img-box_index.md\":\"DYtggkf_\",\"guide_components_img_emits.md\":\"BlE7jvZQ\",\"guide_components_img_index.md\":\"Bm9FiuU4\",\"guide_components_icon-element_properties.md\":\"8Oakruwc\",\"guide_components_img_properties.md\":\"B42YSocI\",\"guide_components_drawer_index.md\":\"D_vpnCpE\",\"guide_components_verify-box_emits.md\":\"DT17Iazx\",\"guide_components_calendar-date-picker_index.md\":\"BdHjrurh\",\"guide_components_rating-control_index.md\":\"Q9l5Lfrr\",\"guide_components_rating-control_properties.md\":\"DKprnl0i\",\"guide_components_calendar-view_index.md\":\"zdoRYVx1\",\"guide_components_animated-icon_index.md\":\"yZDMzCFe\",\"guide_components_calendar-date-picker_emits.md\":\"D5OkfR8j\",\"guide_components_badge_index.md\":\"Bb4crrJn\",\"guide_components_image_index.md\":\"B7X6cWAZ\",\"guide_components_slider_index.md\":\"C7zZ2d-W\",\"guide_components_radio-group_index.md\":\"CVfh3h5H\",\"guide_components_swipe-control_index.md\":\"DwrDVPc1\",\"guide_components_color-picker_emits.md\":\"BHDXVtBQ\",\"guide_components_radio_index.md\":\"90as5QGp\",\"guide_components_pagination_properties.md\":\"JUAPvcTL\",\"guide_components_persona_properties.md\":\"DUTPhPMp\",\"guide_components_combo-box_emits.md\":\"Dh5R-qEv\",\"guide_components_pivot_emits.md\":\"BTJPgNpy\",\"guide_components_pagination_index.md\":\"CnW2zAht\",\"guide_components_flip-view_properties.md\":\"BqZ4hhgU\",\"guide_components_icon-element_emits.md\":\"D5TXFdTZ\",\"guide_components_flip-view_index.md\":\"DefnDOv6\",\"guide_components_navigation-panel_index.md\":\"6mO__sSK\",\"guide_components_rating-control_emits.md\":\"blvomSeC\",\"guide_components_icon-element_index.md\":\"DQ8K7JNn\",\"guide_components_navigation-view_index.md\":\"4AQRiz1k\",\"guide_components_toggle-switch_emits.md\":\"CLGzrNut\",\"guide_components_toggle-switch_index.md\":\"61en_q9-\",\"guide_components_scroll-story_index.md\":\"Vpgb1HSV\",\"guide_components_reveal-container_index.md\":\"Cut2r4tV\",\"guide_components_search-box_emits.md\":\"-d9sWNNt\",\"guide_components_search-box_properties.md\":\"DEKFfPFw\",\"guide_components_shimmer_emits.md\":\"CTMInlI3\",\"guide_components_tag_index.md\":\"BhhxkcHn\",\"guide_components_search-box_index.md\":\"DgkrY0oY\",\"guide_components_shimmer_index.md\":\"iZlHuTxw\",\"guide_components_shimmer_properties.md\":\"CdkU1o6H\",\"guide_components_tree-view_index.md\":\"CUrwan4q\",\"guide_components_text-field_index.md\":\"CXSimJtj\",\"guide_components_text-box_index.md\":\"C5moAPfB\",\"guide_components_progress-ring_properties.md\":\"Dc08Uiff\",\"guide_components_toggle-switch_properties.md\":\"tFppK_IS\",\"guide_components_radio-group_emits.md\":\"cEDzKVnN\",\"guide_components_collapse_index.md\":\"N9Iu5-2v\",\"guide_components_image_emits.md\":\"lmlz2xJd\",\"guide_components_callout_index.md\":\"D9RU33w6\",\"guide_components_pivot_index.md\":\"B_vwQL-5\",\"guide_components_command-bar_index.md\":\"Cp4_rrGB\",\"guide_components_pagination_emits.md\":\"Dng86A22\",\"guide_components_button_index.md\":\"7sqT2MQP\",\"guide_components_info-box_properties.md\":\"BI7Nvk-E\",\"guide_components_drop-down_emits.md\":\"BE95TdKW\",\"guide_components_expander_index.md\":\"BKgcUJzQ\",\"guide_components_message-bar_index.md\":\"AEtAWlF8\",\"guide_components_menu-flyout_index.md\":\"Csa7irPj\",\"guide_components_panel_index.md\":\"CsTu0bXo\",\"guide_components_panel_properties.md\":\"BaxoCYKq\",\"guide_components_progress-bar_emits.md\":\"BcwXUpsF\",\"guide_components_progress-bar_properties.md\":\"TxiS9ZMA\",\"guide_components_progress-ring_emits.md\":\"D2Y6hIZ9\",\"guide_components_color-picker_index.md\":\"DCc4ixcU\",\"guide_components_progress-ring_index.md\":\"CPb-ZEPE\",\"guide_components_color-picker_properties.md\":\"wcXK29Vl\",\"guide_components_time-picker_index.md\":\"CQJdRRaG\",\"guide_components_drop-down_properties.md\":\"Bwlkpr1q\",\"guide_components_infinite-scroll-view_index.md\":\"yAuD807x\",\"guide_components_check-box_index.md\":\"FYgdu4oq\",\"guide_components_progress-bar_index.md\":\"D8vHQw5V\",\"guide_components_combo-box_index.md\":\"DTyu3eNd\",\"guide_components_info-box_emits.md\":\"DlEwpkkq\",\"guide_components_drop-down_index.md\":\"BZzJZQWq\",\"guide_components_list-view_index.md\":\"BoYvMzb0\",\"guide_components_verify-box_properties.md\":\"CW6W8fFf\",\"guide_components_verify-box_index.md\":\"DwSB40wR\",\"guide_index.md\":\"Bndlt3sL\",\"guide_components_web-window_index.md\":\"Bxc8vEeI\",\"index.md\":\"MTRqI42u\",\"guide_components_combo-box_properties.md\":\"AWfHzV6x\",\"guide_components_combobox_emits.md\":\"CGB6WLt8\",\"guide_components_combobox_properties.md\":\"Bja0hMou\",\"guide_components_details-list_index.md\":\"CcgOCIyt\",\"guide_components_info-box_index.md\":\"vXh-_DsL\",\"guide_components_combobox_index.md\":\"CsPkY6YB\",\"guide_components_date-picker_index.md\":\"12vmUIup\",\"guide_components_flip-view_emits.md\":\"DCheHjDj\",\"guide_components_panel_emits.md\":\"DG0REDq8\",\"guide_components_breadcrumb_index.md\":\"DyDm7PeP\",\"guide_components_radio-group_properties.md\":\"BnPxoKsQ\",\"guide_components_persona_emits.md\":\"CnsDPKRU\",\"guide_components_pivot_properties.md\":\"BmoLpPi1\",\"guide_components_persona_index.md\":\"DT00jby4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vfluent3\",\"description\":\"A Vue3 component library for Fluent UI\",\"base\":\"/VFluent3/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"VFluent3\",\"footer\":{\"message\":\"MIT Licensed\",\"copyright\":\"Copyright © Creator SN - 2022\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/\"}],\"sidebar\":[{\"text\":\"Basic input\",\"collapsed\":true,\"items\":[{\"text\":\"Button\",\"link\":\"/guide/components/button/\"},{\"text\":\"CheckBox\",\"link\":\"/guide/components/check-box/\"},{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"},{\"text\":\"Combobox\",\"link\":\"/guide/components/combobox/\"},{\"text\":\"DetailsList\",\"link\":\"/guide/components/details-list/\"},{\"text\":\"DropDown\",\"link\":\"/guide/components/drop-down/\"},{\"text\":\"Radio\",\"link\":\"/guide/components/radio/\"},{\"text\":\"RadioGroup\",\"link\":\"/guide/components/radio-group/\"},{\"text\":\"RatingControl\",\"link\":\"/guide/components/rating-control/\"},{\"text\":\"Slider\",\"link\":\"/guide/components/slider/\"},{\"text\":\"ToggleSwitch\",\"link\":\"/guide/components/toggle-switch/\"},{\"text\":\"Tag\",\"link\":\"/guide/components/tag/\"}]},{\"text\":\"Collections\",\"collapsed\":true,\"items\":[{\"text\":\"FlipView\",\"link\":\"/guide/components/flip-view/\"},{\"text\":\"ListView\",\"link\":\"/guide/components/list-view/\"},{\"text\":\"TreeView\",\"link\":\"/guide/components/tree-view/\"}]},{\"text\":\"Date & Time\",\"collapsed\":true,\"items\":[{\"text\":\"CalendarDatePicker\",\"link\":\"/guide/components/calendar-date-picker/\"},{\"text\":\"CalendarView\",\"link\":\"/guide/components/calendar-view/\"},{\"text\":\"DatePicker\",\"link\":\"/guide/components/date-picker/\"},{\"text\":\"TimePicker\",\"link\":\"/guide/components/time-picker/\"}]},{\"text\":\"Dialogs & flyouts\",\"collapsed\":true,\"items\":[{\"text\":\"Callout\",\"link\":\"/guide/components/callout/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Layout\",\"collapsed\":true,\"items\":[{\"text\":\"Collapse\",\"link\":\"/guide/components/collapse/\"},{\"text\":\"Expander\",\"link\":\"/guide/components/expander/\"},{\"text\":\"Drawer\",\"link\":\"/guide/components/drawer/\"},{\"text\":\"Panel\",\"link\":\"/guide/components/panel/\"}]},{\"text\":\"Media\",\"collapsed\":true,\"items\":[{\"text\":\"Image\",\"link\":\"/guide/components/image/\"},{\"text\":\"Img\",\"link\":\"/guide/components/img/\"},{\"text\":\"ImgBox\",\"link\":\"/guide/components/img-box/\"},{\"text\":\"Persona\",\"link\":\"/guide/components/persona/\"}]},{\"text\":\"Menu & toolbars\",\"collapsed\":true,\"items\":[{\"text\":\"CommandBar\",\"link\":\"/guide/components/command-bar/\"},{\"text\":\"MenuFlyout\",\"link\":\"/guide/components/menu-flyout/\"},{\"text\":\"SwipeControl\",\"link\":\"/guide/components/swipe-control/\"}]},{\"text\":\"Navigation\",\"collapsed\":true,\"items\":[{\"text\":\"Breadcrumb\",\"link\":\"/guide/components/breadcrumb/\"},{\"text\":\"NavigationPanel\",\"link\":\"/guide/components/navigation-panel/\"},{\"text\":\"NavigationView\",\"link\":\"/guide/components/navigation-view/\"},{\"text\":\"Pivot\",\"link\":\"/guide/components/pivot/\"},{\"text\":\"Pagination\",\"link\":\"/guide/components/pagination/\"}]},{\"text\":\"Scrolling\",\"collapsed\":true,\"items\":[{\"text\":\"InfiniteScrollView\",\"link\":\"/guide/components/infinite-scroll-view/\"},{\"text\":\"ScrollStory\",\"link\":\"/guide/components/scroll-story/\"}]},{\"text\":\"Status & info\",\"collapsed\":true,\"items\":[{\"text\":\"Badge\",\"link\":\"/guide/components/badge/\"},{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"ProgressBar\",\"link\":\"/guide/components/progress-bar/\"},{\"text\":\"ProgressRing\",\"link\":\"/guide/components/progress-ring/\"}]},{\"text\":\"Styles\",\"collapsed\":true,\"items\":[{\"text\":\"AnimatedIcon\",\"link\":\"/guide/components/animated-icon/\"},{\"text\":\"IconElement\",\"link\":\"/guide/components/icon-element/\"},{\"text\":\"RevealContainer\",\"link\":\"/guide/components/reveal-container/\"},{\"text\":\"Shimmer\",\"link\":\"/guide/components/shimmer/\"}]},{\"text\":\"Text\",\"collapsed\":true,\"items\":[{\"text\":\"SearchBox\",\"link\":\"/guide/components/search-box/\"},{\"text\":\"TextBox\",\"link\":\"/guide/components/text-box/\"},{\"text\":\"TextField\",\"link\":\"/guide/components/text-field/\"},{\"text\":\"VerifyBox\",\"link\":\"/guide/components/verify-box/\"}]},{\"text\":\"Windowing\",\"collapsed\":true,\"items\":[{\"text\":\"WebWindow\",\"link\":\"/guide/components/web-window/\"}]},{\"text\":\"Global\",\"collapsed\":true,\"items\":[{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Advance\",\"collapsed\":true,\"items\":[{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
     
   </body>
 </html>
\ No newline at end of file
diff --git a/guide/components/toggle-switch/properties.html b/guide/components/toggle-switch/properties.html
index aa3acad..57675aa 100644
--- a/guide/components/toggle-switch/properties.html
+++ b/guide/components/toggle-switch/properties.html
@@ -1,20 +1,24 @@
 <!DOCTYPE html>
-<html lang="en-US">
+<html lang="en-US" dir="ltr">
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title>Properties | vfluent3</title>
+    <title>vfluent3</title>
     <meta name="description" content="A Vue3 component library for Fluent UI">
-    <link rel="stylesheet" href="/VFluent3/assets/style.0a1d87af.css">
-    <link rel="modulepreload" href="/VFluent3/assets/app.d60fa8c3.js">
-    <link rel="modulepreload" href="/VFluent3/assets/guide_components_toggle-switch_properties.md.54984c3a.lean.js">
+    <meta name="generator" content="VitePress v1.0.0-rc.45">
+    <link rel="preload stylesheet" href="/VFluent3/assets/style.BabQegKX.css" as="style">
     
-    <script>(()=>{const e=localStorage.getItem("vitepress-theme-appearance"),a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script type="module" src="/VFluent3/assets/app.CSutcJ2E.js"></script>
+    <link rel="preload" href="/VFluent3/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/framework.DvIFzl91.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/theme.CgqFBnN_.js">
+    <link rel="modulepreload" href="/VFluent3/assets/guide_components_toggle-switch_properties.md.tFppK_IS.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
   </head>
   <body>
-    <div id="app"><div class="Layout" data-v-058b7495><!--[--><!--]--><!--[--><span tabindex="-1" data-v-bea91388></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-bea91388> Skip to content </a><!--]--><!----><header class="VPNav" data-v-058b7495 data-v-2a0a2738><div class="VPNavBar has-sidebar" data-v-2a0a2738 data-v-45c9f423><div class="container" data-v-45c9f423><div class="VPNavBarTitle has-sidebar" data-v-45c9f423 data-v-011600ce><a class="title" href="/VFluent3/" data-v-011600ce><!----><!--[-->VFluent3<!--]--></a></div><div class="content" data-v-45c9f423><!----><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-45c9f423 data-v-4da4371d><span id="main-nav-aria-label" class="visually-hidden" data-v-4da4371d>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" data-v-4da4371d data-v-66f8d518 data-v-4d08dd3a><!--[-->Home<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" data-v-4da4371d data-v-66f8d518 data-v-4d08dd3a><!--[-->Guide<!--]--><!----></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-45c9f423 data-v-bf1c94ca><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" data-v-bf1c94ca data-v-d0ee0df2 data-v-55b931a0><span class="check" data-v-55b931a0><span class="icon" data-v-55b931a0><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-d0ee0df2><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-d0ee0df2><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-45c9f423 data-v-7cece6ac data-v-37af1650><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-37af1650><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-37af1650><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-37af1650><div class="VPMenu" data-v-37af1650 data-v-17dc081b><!----><!--[--><!--[--><!----><div class="group" data-v-7cece6ac><div class="item appearance" data-v-7cece6ac><p class="label" data-v-7cece6ac>Appearance</p><div class="appearance-action" data-v-7cece6ac><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" data-v-7cece6ac data-v-d0ee0df2 data-v-55b931a0><span class="check" data-v-55b931a0><span class="icon" data-v-55b931a0><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-d0ee0df2><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-d0ee0df2><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-45c9f423 data-v-5484e669><span class="container" data-v-5484e669><span class="top" data-v-5484e669></span><span class="middle" data-v-5484e669></span><span class="bottom" data-v-5484e669></span></span></button></div></div></div><!----></header><div class="VPLocalNav" data-v-058b7495 data-v-f623cd72><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-f623cd72><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-f623cd72><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-f623cd72>Menu</span></button><a class="top-link" href="#" data-v-f623cd72> Return to top </a></div><aside class="VPSidebar" data-v-058b7495 data-v-3b8ec0c7><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-3b8ec0c7><span class="visually-hidden" id="sidebar-aria-label" data-v-3b8ec0c7> Sidebar Navigation </span><!--[--><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Basic</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/button/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Button</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/check-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>CheckBox</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/radio/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Radio</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/progress-bar/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ProgressBar</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/progress-ring/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ProgressRing</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/toggle-switch/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ToggleSwitch</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/img/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Img</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/text-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>TextBox</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/combo-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ComboBox</span><!--]--><!----></a><!--]--></div></section></div><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Global</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/message-bar/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>MessageBar</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/info-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>InfoBox</span><!--]--><!----></a><!--]--></div></section></div><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Advance</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/color-picker/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ColorPicker</span><!--]--><!----></a><!--]--></div></section></div><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-058b7495 data-v-564173e9><div class="VPDoc has-sidebar" data-v-564173e9 data-v-32b7ddf4><div class="container" data-v-32b7ddf4><div class="aside" data-v-32b7ddf4><div class="aside-curtain" data-v-32b7ddf4></div><div class="aside-container" data-v-32b7ddf4><div class="aside-content" data-v-32b7ddf4><div class="VPDocAside" data-v-32b7ddf4 data-v-35c1bae1><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline has-outline" data-v-35c1bae1 data-v-123cce62><div class="content" data-v-123cce62><div class="outline-marker" data-v-123cce62></div><div class="outline-title" data-v-123cce62>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-123cce62><span class="visually-hidden" id="doc-outline-aria-label" data-v-123cce62> Table of Contents for current page </span><ul class="root" data-v-123cce62><!--[--><li style="" data-v-123cce62><a class="outline-link" href="#properties" data-v-123cce62>Properties</a><!----></li><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-35c1bae1></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-32b7ddf4><div class="content-container" data-v-32b7ddf4><!--[--><!--]--><main class="main" data-v-32b7ddf4><div style="position:relative;" class="vp-doc _VFluent3_guide_components_toggle-switch_properties" data-v-32b7ddf4><div><h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-hidden="true">#</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead><tbody><tr><td style="text-align:center;">box-side</td><td style="text-align:center;">[&#39;start&#39;,&#39;end&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;start&#39;</td><td style="text-align:center;">box side</td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">disabled</td></tr><tr><td style="text-align:center;">foreground</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">text color</td></tr><tr><td style="text-align:center;">lang</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">i18n</td></tr><tr><td style="text-align:center;">model-value</td><td style="text-align:center;">[boolean]</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">v-model</td></tr><tr><td style="text-align:center;">off</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">off text</td></tr><tr><td style="text-align:center;">off-foreground</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">off circle and border color</td></tr><tr><td style="text-align:center;">on</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">on text</td></tr><tr><td style="text-align:center;">on-background</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">on background color</td></tr><tr><td style="text-align:center;">on-foreground</td><td style="text-align:center;">[string]</td><td style="text-align:center;">No</td><td style="text-align:center;">undefined</td><td style="text-align:center;">on circle color</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">[&#39;light&#39;,&#39;dark&#39;,&#39;global&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;global&#39;</td><td style="text-align:center;">theme</td></tr></tbody></table></div></div></main><footer class="VPDocFooter" data-v-32b7ddf4 data-v-cfaa3a6c><div class="edit-info" data-v-cfaa3a6c><!----><!----></div><div class="prev-next" data-v-cfaa3a6c><div class="pager" data-v-cfaa3a6c><!----></div><div class="pager" data-v-cfaa3a6c><a class="pager-link next" href="/VFluent3/guide/components/button/" data-v-cfaa3a6c><span class="desc" data-v-cfaa3a6c>Next page</span><span class="title" data-v-cfaa3a6c>Button</span></a></div></div></footer><!--[--><!--]--></div></div></div></div></div><footer class="VPFooter has-sidebar" data-v-058b7495 data-v-a6c8dde4><div class="container" data-v-a6c8dde4><p class="message" data-v-a6c8dde4>MIT Licensed</p><p class="copyright" data-v-a6c8dde4>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
-    <script>__VP_HASH_MAP__ = JSON.parse("{\"guide_components_button_emits.md\":\"d682bf18\",\"guide_components_button_index.md\":\"23a8eb54\",\"guide_components_button_properties.md\":\"cd4004b6\",\"guide_components_check-box_emits.md\":\"31609794\",\"guide_components_check-box_index.md\":\"32046814\",\"guide_components_check-box_properties.md\":\"8f33ac0c\",\"guide_components_color-picker_emits.md\":\"00983cd0\",\"guide_components_color-picker_index.md\":\"b2d62612\",\"guide_components_color-picker_properties.md\":\"5466ba72\",\"guide_components_combo-box_emits.md\":\"d5ffda50\",\"guide_components_combo-box_index.md\":\"1c4364f5\",\"guide_components_combo-box_properties.md\":\"2e1d6060\",\"guide_components_img_emits.md\":\"6237adb4\",\"guide_components_img_index.md\":\"fa51a3a1\",\"guide_components_img_properties.md\":\"8d321b5e\",\"guide_components_info-box_emits.md\":\"c2e71eec\",\"guide_components_info-box_index.md\":\"06175fed\",\"guide_components_info-box_properties.md\":\"314dbb00\",\"guide_components_message-bar_emits.md\":\"e89a5a22\",\"guide_components_message-bar_index.md\":\"3f0b01d6\",\"guide_components_message-bar_properties.md\":\"ee3838d9\",\"guide_components_progress-bar_emits.md\":\"5b611e3b\",\"guide_components_progress-bar_index.md\":\"689c3241\",\"guide_components_progress-bar_properties.md\":\"39af7fb2\",\"guide_components_progress-ring_emits.md\":\"67e4644e\",\"guide_components_progress-ring_index.md\":\"9a33542b\",\"guide_components_progress-ring_properties.md\":\"c897c4bb\",\"guide_components_radio_emits.md\":\"28506857\",\"guide_components_radio_index.md\":\"e5a479ce\",\"guide_components_radio_properties.md\":\"f8e55d2f\",\"guide_components_text-box_emits.md\":\"0bf89ef8\",\"guide_components_text-box_index.md\":\"7ccfc637\",\"guide_components_text-box_properties.md\":\"aab3a89e\",\"guide_components_toggle-switch_emits.md\":\"5146435f\",\"guide_components_toggle-switch_index.md\":\"8be48081\",\"guide_components_toggle-switch_properties.md\":\"54984c3a\",\"guide_index.md\":\"e3dca1d7\",\"index.md\":\"1e9773d5\"}")</script>
-    <script type="module" async src="/VFluent3/assets/app.d60fa8c3.js"></script>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-19c990f1><div class="wrapper" data-v-19c990f1><div class="container" data-v-19c990f1><div class="title" data-v-19c990f1><div class="VPNavBarTitle has-sidebar" data-v-19c990f1 data-v-ab179fa1><a class="title" href="/VFluent3/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>VFluent3</span><!--[--><!--]--></a></div></div><div class="content" data-v-19c990f1><div class="content-body" data-v-19c990f1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-19c990f1><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-19c990f1 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Guide</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-19c990f1 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-19c990f1 data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-19c990f1 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-19c990f1><div class="divider-line" data-v-19c990f1></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-d2ecc192><button data-v-d2ecc192>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-575e6a36><div class="curtain" data-v-575e6a36></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-575e6a36><span class="visually-hidden" id="sidebar-aria-label" data-v-575e6a36> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Basic input</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/button/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/check-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CheckBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/combobox/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Combobox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/details-list/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DetailsList</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drop-down/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DropDown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio-group/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RadioGroup</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/rating-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RatingControl</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/slider/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/toggle-switch/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ToggleSwitch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tag/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Tag</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Collections</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/flip-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>FlipView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/list-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ListView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tree-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TreeView</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Date & Time</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarDatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/time-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TimePicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Dialogs & flyouts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/callout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Callout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Layout</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/collapse/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Collapse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/expander/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Expander</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drawer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Panel</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Media</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/image/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Img</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ImgBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/persona/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Persona</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Menu & toolbars</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/command-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CommandBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/menu-flyout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MenuFlyout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/swipe-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SwipeControl</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Navigation</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/breadcrumb/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationPanel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pivot/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pivot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pagination/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pagination</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Scrolling</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/infinite-scroll-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfiniteScrollView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/scroll-story/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ScrollStory</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Status & info</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/badge/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-ring/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressRing</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Styles</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/animated-icon/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>AnimatedIcon</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/icon-element/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>IconElement</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/reveal-container/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RevealContainer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/shimmer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Shimmer</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Text</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/search-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SearchBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-field/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextField</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/verify-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>VerifyBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Windowing</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/web-window/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>WebWindow</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Global</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Advance</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-935f8a84><div class="content" data-v-935f8a84><div class="outline-marker" data-v-935f8a84></div><div class="outline-title" role="heading" aria-level="2" data-v-935f8a84>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-935f8a84><span class="visually-hidden" id="doc-outline-aria-label" data-v-935f8a84> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-935f8a84 data-v-b933a997><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _VFluent3_guide_components_toggle-switch_properties" data-v-39a288b8><div><h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-label="Permalink to &quot;Properties&quot;">​</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead></table></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-09de1c0f><!--[--><!--]--><!----><nav class="prev-next" data-v-09de1c0f><div class="pager" data-v-09de1c0f><!----></div><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link next" href="/VFluent3/guide/components/button/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Next page</span><span class="title" data-v-09de1c0f>Button</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>MIT Licensed</p><p class="copyright" data-v-e315a0ad>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_calendar-date-picker_properties.md\":\"DXRjmMG8\",\"guide_components_image_properties.md\":\"DGanRzCb\",\"guide_components_img-box_index.md\":\"DYtggkf_\",\"guide_components_img_emits.md\":\"BlE7jvZQ\",\"guide_components_img_index.md\":\"Bm9FiuU4\",\"guide_components_icon-element_properties.md\":\"8Oakruwc\",\"guide_components_img_properties.md\":\"B42YSocI\",\"guide_components_drawer_index.md\":\"D_vpnCpE\",\"guide_components_verify-box_emits.md\":\"DT17Iazx\",\"guide_components_calendar-date-picker_index.md\":\"BdHjrurh\",\"guide_components_rating-control_index.md\":\"Q9l5Lfrr\",\"guide_components_rating-control_properties.md\":\"DKprnl0i\",\"guide_components_calendar-view_index.md\":\"zdoRYVx1\",\"guide_components_animated-icon_index.md\":\"yZDMzCFe\",\"guide_components_calendar-date-picker_emits.md\":\"D5OkfR8j\",\"guide_components_badge_index.md\":\"Bb4crrJn\",\"guide_components_image_index.md\":\"B7X6cWAZ\",\"guide_components_slider_index.md\":\"C7zZ2d-W\",\"guide_components_radio-group_index.md\":\"CVfh3h5H\",\"guide_components_swipe-control_index.md\":\"DwrDVPc1\",\"guide_components_color-picker_emits.md\":\"BHDXVtBQ\",\"guide_components_radio_index.md\":\"90as5QGp\",\"guide_components_pagination_properties.md\":\"JUAPvcTL\",\"guide_components_persona_properties.md\":\"DUTPhPMp\",\"guide_components_combo-box_emits.md\":\"Dh5R-qEv\",\"guide_components_pivot_emits.md\":\"BTJPgNpy\",\"guide_components_pagination_index.md\":\"CnW2zAht\",\"guide_components_flip-view_properties.md\":\"BqZ4hhgU\",\"guide_components_icon-element_emits.md\":\"D5TXFdTZ\",\"guide_components_flip-view_index.md\":\"DefnDOv6\",\"guide_components_navigation-panel_index.md\":\"6mO__sSK\",\"guide_components_rating-control_emits.md\":\"blvomSeC\",\"guide_components_icon-element_index.md\":\"DQ8K7JNn\",\"guide_components_navigation-view_index.md\":\"4AQRiz1k\",\"guide_components_toggle-switch_emits.md\":\"CLGzrNut\",\"guide_components_toggle-switch_index.md\":\"61en_q9-\",\"guide_components_scroll-story_index.md\":\"Vpgb1HSV\",\"guide_components_reveal-container_index.md\":\"Cut2r4tV\",\"guide_components_search-box_emits.md\":\"-d9sWNNt\",\"guide_components_search-box_properties.md\":\"DEKFfPFw\",\"guide_components_shimmer_emits.md\":\"CTMInlI3\",\"guide_components_tag_index.md\":\"BhhxkcHn\",\"guide_components_search-box_index.md\":\"DgkrY0oY\",\"guide_components_shimmer_index.md\":\"iZlHuTxw\",\"guide_components_shimmer_properties.md\":\"CdkU1o6H\",\"guide_components_tree-view_index.md\":\"CUrwan4q\",\"guide_components_text-field_index.md\":\"CXSimJtj\",\"guide_components_text-box_index.md\":\"C5moAPfB\",\"guide_components_progress-ring_properties.md\":\"Dc08Uiff\",\"guide_components_toggle-switch_properties.md\":\"tFppK_IS\",\"guide_components_radio-group_emits.md\":\"cEDzKVnN\",\"guide_components_collapse_index.md\":\"N9Iu5-2v\",\"guide_components_image_emits.md\":\"lmlz2xJd\",\"guide_components_callout_index.md\":\"D9RU33w6\",\"guide_components_pivot_index.md\":\"B_vwQL-5\",\"guide_components_command-bar_index.md\":\"Cp4_rrGB\",\"guide_components_pagination_emits.md\":\"Dng86A22\",\"guide_components_button_index.md\":\"7sqT2MQP\",\"guide_components_info-box_properties.md\":\"BI7Nvk-E\",\"guide_components_drop-down_emits.md\":\"BE95TdKW\",\"guide_components_expander_index.md\":\"BKgcUJzQ\",\"guide_components_message-bar_index.md\":\"AEtAWlF8\",\"guide_components_menu-flyout_index.md\":\"Csa7irPj\",\"guide_components_panel_index.md\":\"CsTu0bXo\",\"guide_components_panel_properties.md\":\"BaxoCYKq\",\"guide_components_progress-bar_emits.md\":\"BcwXUpsF\",\"guide_components_progress-bar_properties.md\":\"TxiS9ZMA\",\"guide_components_progress-ring_emits.md\":\"D2Y6hIZ9\",\"guide_components_color-picker_index.md\":\"DCc4ixcU\",\"guide_components_progress-ring_index.md\":\"CPb-ZEPE\",\"guide_components_color-picker_properties.md\":\"wcXK29Vl\",\"guide_components_time-picker_index.md\":\"CQJdRRaG\",\"guide_components_drop-down_properties.md\":\"Bwlkpr1q\",\"guide_components_infinite-scroll-view_index.md\":\"yAuD807x\",\"guide_components_check-box_index.md\":\"FYgdu4oq\",\"guide_components_progress-bar_index.md\":\"D8vHQw5V\",\"guide_components_combo-box_index.md\":\"DTyu3eNd\",\"guide_components_info-box_emits.md\":\"DlEwpkkq\",\"guide_components_drop-down_index.md\":\"BZzJZQWq\",\"guide_components_list-view_index.md\":\"BoYvMzb0\",\"guide_components_verify-box_properties.md\":\"CW6W8fFf\",\"guide_components_verify-box_index.md\":\"DwSB40wR\",\"guide_index.md\":\"Bndlt3sL\",\"guide_components_web-window_index.md\":\"Bxc8vEeI\",\"index.md\":\"MTRqI42u\",\"guide_components_combo-box_properties.md\":\"AWfHzV6x\",\"guide_components_combobox_emits.md\":\"CGB6WLt8\",\"guide_components_combobox_properties.md\":\"Bja0hMou\",\"guide_components_details-list_index.md\":\"CcgOCIyt\",\"guide_components_info-box_index.md\":\"vXh-_DsL\",\"guide_components_combobox_index.md\":\"CsPkY6YB\",\"guide_components_date-picker_index.md\":\"12vmUIup\",\"guide_components_flip-view_emits.md\":\"DCheHjDj\",\"guide_components_panel_emits.md\":\"DG0REDq8\",\"guide_components_breadcrumb_index.md\":\"DyDm7PeP\",\"guide_components_radio-group_properties.md\":\"BnPxoKsQ\",\"guide_components_persona_emits.md\":\"CnsDPKRU\",\"guide_components_pivot_properties.md\":\"BmoLpPi1\",\"guide_components_persona_index.md\":\"DT00jby4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vfluent3\",\"description\":\"A Vue3 component library for Fluent UI\",\"base\":\"/VFluent3/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"VFluent3\",\"footer\":{\"message\":\"MIT Licensed\",\"copyright\":\"Copyright © Creator SN - 2022\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/\"}],\"sidebar\":[{\"text\":\"Basic input\",\"collapsed\":true,\"items\":[{\"text\":\"Button\",\"link\":\"/guide/components/button/\"},{\"text\":\"CheckBox\",\"link\":\"/guide/components/check-box/\"},{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"},{\"text\":\"Combobox\",\"link\":\"/guide/components/combobox/\"},{\"text\":\"DetailsList\",\"link\":\"/guide/components/details-list/\"},{\"text\":\"DropDown\",\"link\":\"/guide/components/drop-down/\"},{\"text\":\"Radio\",\"link\":\"/guide/components/radio/\"},{\"text\":\"RadioGroup\",\"link\":\"/guide/components/radio-group/\"},{\"text\":\"RatingControl\",\"link\":\"/guide/components/rating-control/\"},{\"text\":\"Slider\",\"link\":\"/guide/components/slider/\"},{\"text\":\"ToggleSwitch\",\"link\":\"/guide/components/toggle-switch/\"},{\"text\":\"Tag\",\"link\":\"/guide/components/tag/\"}]},{\"text\":\"Collections\",\"collapsed\":true,\"items\":[{\"text\":\"FlipView\",\"link\":\"/guide/components/flip-view/\"},{\"text\":\"ListView\",\"link\":\"/guide/components/list-view/\"},{\"text\":\"TreeView\",\"link\":\"/guide/components/tree-view/\"}]},{\"text\":\"Date & Time\",\"collapsed\":true,\"items\":[{\"text\":\"CalendarDatePicker\",\"link\":\"/guide/components/calendar-date-picker/\"},{\"text\":\"CalendarView\",\"link\":\"/guide/components/calendar-view/\"},{\"text\":\"DatePicker\",\"link\":\"/guide/components/date-picker/\"},{\"text\":\"TimePicker\",\"link\":\"/guide/components/time-picker/\"}]},{\"text\":\"Dialogs & flyouts\",\"collapsed\":true,\"items\":[{\"text\":\"Callout\",\"link\":\"/guide/components/callout/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Layout\",\"collapsed\":true,\"items\":[{\"text\":\"Collapse\",\"link\":\"/guide/components/collapse/\"},{\"text\":\"Expander\",\"link\":\"/guide/components/expander/\"},{\"text\":\"Drawer\",\"link\":\"/guide/components/drawer/\"},{\"text\":\"Panel\",\"link\":\"/guide/components/panel/\"}]},{\"text\":\"Media\",\"collapsed\":true,\"items\":[{\"text\":\"Image\",\"link\":\"/guide/components/image/\"},{\"text\":\"Img\",\"link\":\"/guide/components/img/\"},{\"text\":\"ImgBox\",\"link\":\"/guide/components/img-box/\"},{\"text\":\"Persona\",\"link\":\"/guide/components/persona/\"}]},{\"text\":\"Menu & toolbars\",\"collapsed\":true,\"items\":[{\"text\":\"CommandBar\",\"link\":\"/guide/components/command-bar/\"},{\"text\":\"MenuFlyout\",\"link\":\"/guide/components/menu-flyout/\"},{\"text\":\"SwipeControl\",\"link\":\"/guide/components/swipe-control/\"}]},{\"text\":\"Navigation\",\"collapsed\":true,\"items\":[{\"text\":\"Breadcrumb\",\"link\":\"/guide/components/breadcrumb/\"},{\"text\":\"NavigationPanel\",\"link\":\"/guide/components/navigation-panel/\"},{\"text\":\"NavigationView\",\"link\":\"/guide/components/navigation-view/\"},{\"text\":\"Pivot\",\"link\":\"/guide/components/pivot/\"},{\"text\":\"Pagination\",\"link\":\"/guide/components/pagination/\"}]},{\"text\":\"Scrolling\",\"collapsed\":true,\"items\":[{\"text\":\"InfiniteScrollView\",\"link\":\"/guide/components/infinite-scroll-view/\"},{\"text\":\"ScrollStory\",\"link\":\"/guide/components/scroll-story/\"}]},{\"text\":\"Status & info\",\"collapsed\":true,\"items\":[{\"text\":\"Badge\",\"link\":\"/guide/components/badge/\"},{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"ProgressBar\",\"link\":\"/guide/components/progress-bar/\"},{\"text\":\"ProgressRing\",\"link\":\"/guide/components/progress-ring/\"}]},{\"text\":\"Styles\",\"collapsed\":true,\"items\":[{\"text\":\"AnimatedIcon\",\"link\":\"/guide/components/animated-icon/\"},{\"text\":\"IconElement\",\"link\":\"/guide/components/icon-element/\"},{\"text\":\"RevealContainer\",\"link\":\"/guide/components/reveal-container/\"},{\"text\":\"Shimmer\",\"link\":\"/guide/components/shimmer/\"}]},{\"text\":\"Text\",\"collapsed\":true,\"items\":[{\"text\":\"SearchBox\",\"link\":\"/guide/components/search-box/\"},{\"text\":\"TextBox\",\"link\":\"/guide/components/text-box/\"},{\"text\":\"TextField\",\"link\":\"/guide/components/text-field/\"},{\"text\":\"VerifyBox\",\"link\":\"/guide/components/verify-box/\"}]},{\"text\":\"Windowing\",\"collapsed\":true,\"items\":[{\"text\":\"WebWindow\",\"link\":\"/guide/components/web-window/\"}]},{\"text\":\"Global\",\"collapsed\":true,\"items\":[{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Advance\",\"collapsed\":true,\"items\":[{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
     
   </body>
 </html>
\ No newline at end of file
diff --git a/guide/components/tree-view/index.html b/guide/components/tree-view/index.html
new file mode 100644
index 0000000..8390ebe
--- /dev/null
+++ b/guide/components/tree-view/index.html
@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>TreeView | vfluent3</title>
+    <meta name="description" content="A Vue3 component library for Fluent UI">
+    <meta name="generator" content="VitePress v1.0.0-rc.45">
+    <link rel="preload stylesheet" href="/VFluent3/assets/style.BabQegKX.css" as="style">
+    
+    <script type="module" src="/VFluent3/assets/app.CSutcJ2E.js"></script>
+    <link rel="preload" href="/VFluent3/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/framework.DvIFzl91.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/theme.CgqFBnN_.js">
+    <link rel="modulepreload" href="/VFluent3/assets/guide_components_tree-view_index.md.CUrwan4q.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-19c990f1><div class="wrapper" data-v-19c990f1><div class="container" data-v-19c990f1><div class="title" data-v-19c990f1><div class="VPNavBarTitle has-sidebar" data-v-19c990f1 data-v-ab179fa1><a class="title" href="/VFluent3/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>VFluent3</span><!--[--><!--]--></a></div></div><div class="content" data-v-19c990f1><div class="content-body" data-v-19c990f1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-19c990f1><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-19c990f1 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Guide</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-19c990f1 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-19c990f1 data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-19c990f1 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-19c990f1><div class="divider-line" data-v-19c990f1></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-d2ecc192><button data-v-d2ecc192>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-575e6a36><div class="curtain" data-v-575e6a36></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-575e6a36><span class="visually-hidden" id="sidebar-aria-label" data-v-575e6a36> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Basic input</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/button/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/check-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CheckBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/combobox/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Combobox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/details-list/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DetailsList</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drop-down/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DropDown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio-group/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RadioGroup</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/rating-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RatingControl</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/slider/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/toggle-switch/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ToggleSwitch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tag/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Tag</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible has-active" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Collections</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/flip-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>FlipView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/list-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ListView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tree-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TreeView</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Date & Time</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarDatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/time-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TimePicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Dialogs & flyouts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/callout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Callout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Layout</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/collapse/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Collapse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/expander/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Expander</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drawer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Panel</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Media</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/image/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Img</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ImgBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/persona/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Persona</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Menu & toolbars</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/command-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CommandBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/menu-flyout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MenuFlyout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/swipe-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SwipeControl</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Navigation</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/breadcrumb/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationPanel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pivot/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pivot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pagination/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pagination</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Scrolling</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/infinite-scroll-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfiniteScrollView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/scroll-story/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ScrollStory</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Status & info</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/badge/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-ring/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressRing</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Styles</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/animated-icon/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>AnimatedIcon</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/icon-element/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>IconElement</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/reveal-container/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RevealContainer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/shimmer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Shimmer</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Text</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/search-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SearchBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-field/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextField</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/verify-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>VerifyBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Windowing</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/web-window/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>WebWindow</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Global</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Advance</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-935f8a84><div class="content" data-v-935f8a84><div class="outline-marker" data-v-935f8a84></div><div class="outline-title" role="heading" aria-level="2" data-v-935f8a84>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-935f8a84><span class="visually-hidden" id="doc-outline-aria-label" data-v-935f8a84> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-935f8a84 data-v-b933a997><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _VFluent3_guide_components_tree-view_" data-v-39a288b8><div><h3 id="treeview-demo" tabindex="-1">TreeView-DEMO <a class="header-anchor" href="#treeview-demo" aria-label="Permalink to &quot;TreeView-DEMO&quot;">​</a></h3><hr><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TreeView</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">files</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">200</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">viewStyle</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">backgroundColor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;transparent&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;transparent&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TreeView</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="treeview-draggable" tabindex="-1">TreeView Draggable <a class="header-anchor" href="#treeview-draggable" aria-label="Permalink to &quot;TreeView Draggable&quot;">​</a></h3><hr><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TreeView</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">files</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">draggable</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> @</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">click</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">click</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> @</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">drop-item</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">dropItem</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TreeView</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>默认的修改项目顺序的示例, 其中<code>dropParent</code>和<code>dragParent</code>在根下为<code>null</code></p><div class="language-javascript vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">dropItem</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (event) {</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">    let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { root, drop, dropParent, drag, dragParent, mode } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> event;</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">    if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (mode </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">===</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;enter&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">        if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">!</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">drop.children)</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            drop.children </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [];</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        drop.children.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">push</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(drag);</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">        let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> dragParentChildren </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> dragParent </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> dragParent.children </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> root;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        dragParentChildren.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">splice</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(dragParentChildren.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">indexOf</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(drag), </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">else</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">        let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> dropParentChildren </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> dropParent </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> dropParent.children </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> root;</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">        const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> index</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> dropParentChildren.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">indexOf</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(drop);</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        dropParentChildren.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">splice</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(index, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, drag);</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">        let</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> dragParentChildren </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> dragParent </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> dragParent.children </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> root;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        dragParentChildren.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">splice</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(dragParentChildren.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">indexOf</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(drag), </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><h3 id="treeview-checkable" tabindex="-1">TreeView Checkable <a class="header-anchor" href="#treeview-checkable" aria-label="Permalink to &quot;TreeView Checkable&quot;">​</a></h3><hr><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TreeView</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">files</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">checkable</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> expandedIconPosition</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;right&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> @</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">click</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">click</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TreeView</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="slot" tabindex="-1">Slot <a class="header-anchor" href="#slot" aria-label="Permalink to &quot;Slot&quot;">​</a></h3><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TreeView</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">files</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">200</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;template v-slot:default=&quot;prop&quot;&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    {{prop.item.label}}</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;/template&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TreeView</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h3 id="treeview-customize-and-draggable" tabindex="-1">TreeView Customize and Draggable <a class="header-anchor" href="#treeview-customize-and-draggable" aria-label="Permalink to &quot;TreeView Customize and Draggable&quot;">​</a></h3><hr><p>backgroundColorHover:</p><!----><p>backgroundColorActive:</p><!----> foregroundColor: <!----><!----><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TreeView</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">theme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">$theme</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">files</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">checkable</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  @</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">click</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">click</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">backgroundColorHover</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">backgroundColorHover</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">backgroundColorActive</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">backgroundColorActive</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  leftIconForeground</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;black&quot;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">foreground</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">foregroundColor</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">draggable</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  expandClickMode</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;normal&quot;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">10</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-TreeView</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">value</td><td style="text-align:center;">Array</td><td style="text-align:center;">Yes</td><td style="text-align:center;">[]</td><td style="text-align:center;">数据，详见data</td></tr><tr><td style="text-align:center;">draggable</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否可拖动</td></tr><tr><td style="text-align:center;">checkable</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否可选</td></tr><tr><td style="text-align:center;">space</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">20</td><td style="text-align:center;">树形父与子间的间距(px)</td></tr><tr><td style="text-align:center;">foreground</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">rgba(0, 90, 158, 1)</td><td style="text-align:center;">前景色</td></tr><tr><td style="text-align:center;">expandedIcon</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">ChevronDownSmall</td><td style="text-align:center;">扩展后的箭头</td></tr><tr><td style="text-align:center;">unexpandedIcon</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">ChevronRightSmall</td><td style="text-align:center;">未扩展的箭头</td></tr><tr><td style="text-align:center;">backgroundColorHover</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">子项Hover的颜色</td></tr><tr><td style="text-align:center;">backgroundColorActive</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">子项激活的颜色</td></tr><tr><td style="text-align:center;">itemHeight</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">30</td><td style="text-align:center;">子项高度</td></tr><tr><td style="text-align:center;">showLoading</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">加载时是否显示进度条</td></tr><tr><td style="text-align:center;">expandedIconPosition</td><td style="text-align:center;">[&#39;left&#39;,&#39;right&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;left&#39;</td><td style="text-align:center;">扩展箭头位置</td></tr><tr><td style="text-align:center;">expandClickMode</td><td style="text-align:center;">[&#39;icon&#39;,&#39;normal&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;normal&#39;</td><td style="text-align:center;">点击展开的方式</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">[&#39;system&#39;,&#39;dark&#39;,&#39;light&#39;,&#39;custom&#39;]</td><td style="text-align:center;">No</td><td style="text-align:center;">&#39;system&#39;</td><td style="text-align:center;">主题色</td></tr></tbody></table><h3 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to &quot;Events&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">事件名(Name)</th><th style="text-align:center;">参数类型(args)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">click</td><td style="text-align:center;">item</td><td style="text-align:center;">当点击时触发，第一个参数为点击的item</td></tr><tr><td style="text-align:center;">drop-item</td><td style="text-align:center;">{root, drop, dropParent, drag, dragParent, mode}</td><td style="text-align:center;">项目间拖动放置回调函数</td></tr><tr><td style="text-align:center;">item-drag-over</td><td style="text-align:center;">{root, drop, dropParent}</td><td style="text-align:center;">当前项被放置进入</td></tr><tr><td style="text-align:center;">item-drag-leave</td><td style="text-align:center;">{root, drop, dropParent}</td><td style="text-align:center;">当前项被放置离开</td></tr><tr><td style="text-align:center;">item-drop</td><td style="text-align:center;">{root, drop, dropParent}</td><td style="text-align:center;">当前项被放置</td></tr></tbody></table><h3 id="slots" tabindex="-1">Slots <a class="header-anchor" href="#slots" aria-label="Permalink to &quot;Slots&quot;">​</a></h3><hr><ol><li>TreeItem</li></ol><p>默认以value中每一项的属性name作为默认显示, 包含以下可选属性</p><ul><li>item: 当前项</li><li>deep: 当前深度</li></ul><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">x</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  {{x.item.label}}</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="data" tabindex="-1">Data <a class="header-anchor" href="#data" aria-label="Permalink to &quot;Data&quot;">​</a></h3><hr><ol><li>value</li></ol><p>其中<code>icon</code>表示该项图标, 支持引入图像, <code>expanded</code>表示是否展开, <code>selected</code>表示是否选中, <code>loading</code>表示该项是否在加载, <code>dropInside</code>表示是否允许拖动放置到该项内部, <code>show</code>表示是否显示该项, <code>children</code>表示子项</p><p>若想在外部控制<code>expanded</code>和<code>selected</code>, 需在传入数据前定义它们</p><div class="language-javascript vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">value </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [{label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, disabled: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, children: [], expanded: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, selected: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, loading: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, dropInside: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, show: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}]</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Img Folder&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;https://img.icons8.com/bubbles/2x/folder-invoices.png&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        children: [</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Folder&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Folder&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                expanded: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                children: [</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                    {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                        label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;File&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                        icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;FileCode&#39;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                    },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                    {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                        label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;File&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                        icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;FileCode&#39;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                    }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                ]</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;File&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;FileCode&#39;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;File&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;FileCode&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                disabled: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;No Drop Inside&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Error&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                dropInside: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        ]</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;File&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;FileCode&#39;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Cascade&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;https://img.icons8.com/bubbles/2x/folder-invoices.png&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        children: [</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Cascade2&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Folder&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                children: [</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                    {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                        label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Cascade3&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                        icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;FileCode&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                        children: [</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                        ]</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                    },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                    {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                        label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;File&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                        icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;FileCode&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                        disabled: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                    }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">                ]</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">            }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        ]</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br></div></div><p><strong>特别地</strong> 1.2.31版本后支持采用函数式字段, 其中支持的字段包括<code>label</code>, <code>icon</code>, <code>disabled</code>, <code>loading</code>, <code>dropInside</code>, <code>show</code></p></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-09de1c0f><!--[--><!--]--><!----><nav class="prev-next" data-v-09de1c0f><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link prev" href="/VFluent3/guide/components/list-view/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Previous page</span><span class="title" data-v-09de1c0f>ListView</span><!--]--></a></div><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link next" href="/VFluent3/guide/components/calendar-date-picker/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Next page</span><span class="title" data-v-09de1c0f>CalendarDatePicker</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>MIT Licensed</p><p class="copyright" data-v-e315a0ad>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_calendar-date-picker_properties.md\":\"DXRjmMG8\",\"guide_components_image_properties.md\":\"DGanRzCb\",\"guide_components_img-box_index.md\":\"DYtggkf_\",\"guide_components_img_emits.md\":\"BlE7jvZQ\",\"guide_components_img_index.md\":\"Bm9FiuU4\",\"guide_components_icon-element_properties.md\":\"8Oakruwc\",\"guide_components_img_properties.md\":\"B42YSocI\",\"guide_components_drawer_index.md\":\"D_vpnCpE\",\"guide_components_verify-box_emits.md\":\"DT17Iazx\",\"guide_components_calendar-date-picker_index.md\":\"BdHjrurh\",\"guide_components_rating-control_index.md\":\"Q9l5Lfrr\",\"guide_components_rating-control_properties.md\":\"DKprnl0i\",\"guide_components_calendar-view_index.md\":\"zdoRYVx1\",\"guide_components_animated-icon_index.md\":\"yZDMzCFe\",\"guide_components_calendar-date-picker_emits.md\":\"D5OkfR8j\",\"guide_components_badge_index.md\":\"Bb4crrJn\",\"guide_components_image_index.md\":\"B7X6cWAZ\",\"guide_components_slider_index.md\":\"C7zZ2d-W\",\"guide_components_radio-group_index.md\":\"CVfh3h5H\",\"guide_components_swipe-control_index.md\":\"DwrDVPc1\",\"guide_components_color-picker_emits.md\":\"BHDXVtBQ\",\"guide_components_radio_index.md\":\"90as5QGp\",\"guide_components_pagination_properties.md\":\"JUAPvcTL\",\"guide_components_persona_properties.md\":\"DUTPhPMp\",\"guide_components_combo-box_emits.md\":\"Dh5R-qEv\",\"guide_components_pivot_emits.md\":\"BTJPgNpy\",\"guide_components_pagination_index.md\":\"CnW2zAht\",\"guide_components_flip-view_properties.md\":\"BqZ4hhgU\",\"guide_components_icon-element_emits.md\":\"D5TXFdTZ\",\"guide_components_flip-view_index.md\":\"DefnDOv6\",\"guide_components_navigation-panel_index.md\":\"6mO__sSK\",\"guide_components_rating-control_emits.md\":\"blvomSeC\",\"guide_components_icon-element_index.md\":\"DQ8K7JNn\",\"guide_components_navigation-view_index.md\":\"4AQRiz1k\",\"guide_components_toggle-switch_emits.md\":\"CLGzrNut\",\"guide_components_toggle-switch_index.md\":\"61en_q9-\",\"guide_components_scroll-story_index.md\":\"Vpgb1HSV\",\"guide_components_reveal-container_index.md\":\"Cut2r4tV\",\"guide_components_search-box_emits.md\":\"-d9sWNNt\",\"guide_components_search-box_properties.md\":\"DEKFfPFw\",\"guide_components_shimmer_emits.md\":\"CTMInlI3\",\"guide_components_tag_index.md\":\"BhhxkcHn\",\"guide_components_search-box_index.md\":\"DgkrY0oY\",\"guide_components_shimmer_index.md\":\"iZlHuTxw\",\"guide_components_shimmer_properties.md\":\"CdkU1o6H\",\"guide_components_tree-view_index.md\":\"CUrwan4q\",\"guide_components_text-field_index.md\":\"CXSimJtj\",\"guide_components_text-box_index.md\":\"C5moAPfB\",\"guide_components_progress-ring_properties.md\":\"Dc08Uiff\",\"guide_components_toggle-switch_properties.md\":\"tFppK_IS\",\"guide_components_radio-group_emits.md\":\"cEDzKVnN\",\"guide_components_collapse_index.md\":\"N9Iu5-2v\",\"guide_components_image_emits.md\":\"lmlz2xJd\",\"guide_components_callout_index.md\":\"D9RU33w6\",\"guide_components_pivot_index.md\":\"B_vwQL-5\",\"guide_components_command-bar_index.md\":\"Cp4_rrGB\",\"guide_components_pagination_emits.md\":\"Dng86A22\",\"guide_components_button_index.md\":\"7sqT2MQP\",\"guide_components_info-box_properties.md\":\"BI7Nvk-E\",\"guide_components_drop-down_emits.md\":\"BE95TdKW\",\"guide_components_expander_index.md\":\"BKgcUJzQ\",\"guide_components_message-bar_index.md\":\"AEtAWlF8\",\"guide_components_menu-flyout_index.md\":\"Csa7irPj\",\"guide_components_panel_index.md\":\"CsTu0bXo\",\"guide_components_panel_properties.md\":\"BaxoCYKq\",\"guide_components_progress-bar_emits.md\":\"BcwXUpsF\",\"guide_components_progress-bar_properties.md\":\"TxiS9ZMA\",\"guide_components_progress-ring_emits.md\":\"D2Y6hIZ9\",\"guide_components_color-picker_index.md\":\"DCc4ixcU\",\"guide_components_progress-ring_index.md\":\"CPb-ZEPE\",\"guide_components_color-picker_properties.md\":\"wcXK29Vl\",\"guide_components_time-picker_index.md\":\"CQJdRRaG\",\"guide_components_drop-down_properties.md\":\"Bwlkpr1q\",\"guide_components_infinite-scroll-view_index.md\":\"yAuD807x\",\"guide_components_check-box_index.md\":\"FYgdu4oq\",\"guide_components_progress-bar_index.md\":\"D8vHQw5V\",\"guide_components_combo-box_index.md\":\"DTyu3eNd\",\"guide_components_info-box_emits.md\":\"DlEwpkkq\",\"guide_components_drop-down_index.md\":\"BZzJZQWq\",\"guide_components_list-view_index.md\":\"BoYvMzb0\",\"guide_components_verify-box_properties.md\":\"CW6W8fFf\",\"guide_components_verify-box_index.md\":\"DwSB40wR\",\"guide_index.md\":\"Bndlt3sL\",\"guide_components_web-window_index.md\":\"Bxc8vEeI\",\"index.md\":\"MTRqI42u\",\"guide_components_combo-box_properties.md\":\"AWfHzV6x\",\"guide_components_combobox_emits.md\":\"CGB6WLt8\",\"guide_components_combobox_properties.md\":\"Bja0hMou\",\"guide_components_details-list_index.md\":\"CcgOCIyt\",\"guide_components_info-box_index.md\":\"vXh-_DsL\",\"guide_components_combobox_index.md\":\"CsPkY6YB\",\"guide_components_date-picker_index.md\":\"12vmUIup\",\"guide_components_flip-view_emits.md\":\"DCheHjDj\",\"guide_components_panel_emits.md\":\"DG0REDq8\",\"guide_components_breadcrumb_index.md\":\"DyDm7PeP\",\"guide_components_radio-group_properties.md\":\"BnPxoKsQ\",\"guide_components_persona_emits.md\":\"CnsDPKRU\",\"guide_components_pivot_properties.md\":\"BmoLpPi1\",\"guide_components_persona_index.md\":\"DT00jby4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vfluent3\",\"description\":\"A Vue3 component library for Fluent UI\",\"base\":\"/VFluent3/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"VFluent3\",\"footer\":{\"message\":\"MIT Licensed\",\"copyright\":\"Copyright © Creator SN - 2022\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/\"}],\"sidebar\":[{\"text\":\"Basic input\",\"collapsed\":true,\"items\":[{\"text\":\"Button\",\"link\":\"/guide/components/button/\"},{\"text\":\"CheckBox\",\"link\":\"/guide/components/check-box/\"},{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"},{\"text\":\"Combobox\",\"link\":\"/guide/components/combobox/\"},{\"text\":\"DetailsList\",\"link\":\"/guide/components/details-list/\"},{\"text\":\"DropDown\",\"link\":\"/guide/components/drop-down/\"},{\"text\":\"Radio\",\"link\":\"/guide/components/radio/\"},{\"text\":\"RadioGroup\",\"link\":\"/guide/components/radio-group/\"},{\"text\":\"RatingControl\",\"link\":\"/guide/components/rating-control/\"},{\"text\":\"Slider\",\"link\":\"/guide/components/slider/\"},{\"text\":\"ToggleSwitch\",\"link\":\"/guide/components/toggle-switch/\"},{\"text\":\"Tag\",\"link\":\"/guide/components/tag/\"}]},{\"text\":\"Collections\",\"collapsed\":true,\"items\":[{\"text\":\"FlipView\",\"link\":\"/guide/components/flip-view/\"},{\"text\":\"ListView\",\"link\":\"/guide/components/list-view/\"},{\"text\":\"TreeView\",\"link\":\"/guide/components/tree-view/\"}]},{\"text\":\"Date & Time\",\"collapsed\":true,\"items\":[{\"text\":\"CalendarDatePicker\",\"link\":\"/guide/components/calendar-date-picker/\"},{\"text\":\"CalendarView\",\"link\":\"/guide/components/calendar-view/\"},{\"text\":\"DatePicker\",\"link\":\"/guide/components/date-picker/\"},{\"text\":\"TimePicker\",\"link\":\"/guide/components/time-picker/\"}]},{\"text\":\"Dialogs & flyouts\",\"collapsed\":true,\"items\":[{\"text\":\"Callout\",\"link\":\"/guide/components/callout/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Layout\",\"collapsed\":true,\"items\":[{\"text\":\"Collapse\",\"link\":\"/guide/components/collapse/\"},{\"text\":\"Expander\",\"link\":\"/guide/components/expander/\"},{\"text\":\"Drawer\",\"link\":\"/guide/components/drawer/\"},{\"text\":\"Panel\",\"link\":\"/guide/components/panel/\"}]},{\"text\":\"Media\",\"collapsed\":true,\"items\":[{\"text\":\"Image\",\"link\":\"/guide/components/image/\"},{\"text\":\"Img\",\"link\":\"/guide/components/img/\"},{\"text\":\"ImgBox\",\"link\":\"/guide/components/img-box/\"},{\"text\":\"Persona\",\"link\":\"/guide/components/persona/\"}]},{\"text\":\"Menu & toolbars\",\"collapsed\":true,\"items\":[{\"text\":\"CommandBar\",\"link\":\"/guide/components/command-bar/\"},{\"text\":\"MenuFlyout\",\"link\":\"/guide/components/menu-flyout/\"},{\"text\":\"SwipeControl\",\"link\":\"/guide/components/swipe-control/\"}]},{\"text\":\"Navigation\",\"collapsed\":true,\"items\":[{\"text\":\"Breadcrumb\",\"link\":\"/guide/components/breadcrumb/\"},{\"text\":\"NavigationPanel\",\"link\":\"/guide/components/navigation-panel/\"},{\"text\":\"NavigationView\",\"link\":\"/guide/components/navigation-view/\"},{\"text\":\"Pivot\",\"link\":\"/guide/components/pivot/\"},{\"text\":\"Pagination\",\"link\":\"/guide/components/pagination/\"}]},{\"text\":\"Scrolling\",\"collapsed\":true,\"items\":[{\"text\":\"InfiniteScrollView\",\"link\":\"/guide/components/infinite-scroll-view/\"},{\"text\":\"ScrollStory\",\"link\":\"/guide/components/scroll-story/\"}]},{\"text\":\"Status & info\",\"collapsed\":true,\"items\":[{\"text\":\"Badge\",\"link\":\"/guide/components/badge/\"},{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"ProgressBar\",\"link\":\"/guide/components/progress-bar/\"},{\"text\":\"ProgressRing\",\"link\":\"/guide/components/progress-ring/\"}]},{\"text\":\"Styles\",\"collapsed\":true,\"items\":[{\"text\":\"AnimatedIcon\",\"link\":\"/guide/components/animated-icon/\"},{\"text\":\"IconElement\",\"link\":\"/guide/components/icon-element/\"},{\"text\":\"RevealContainer\",\"link\":\"/guide/components/reveal-container/\"},{\"text\":\"Shimmer\",\"link\":\"/guide/components/shimmer/\"}]},{\"text\":\"Text\",\"collapsed\":true,\"items\":[{\"text\":\"SearchBox\",\"link\":\"/guide/components/search-box/\"},{\"text\":\"TextBox\",\"link\":\"/guide/components/text-box/\"},{\"text\":\"TextField\",\"link\":\"/guide/components/text-field/\"},{\"text\":\"VerifyBox\",\"link\":\"/guide/components/verify-box/\"}]},{\"text\":\"Windowing\",\"collapsed\":true,\"items\":[{\"text\":\"WebWindow\",\"link\":\"/guide/components/web-window/\"}]},{\"text\":\"Global\",\"collapsed\":true,\"items\":[{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Advance\",\"collapsed\":true,\"items\":[{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git a/guide/components/verify-box/emits.html b/guide/components/verify-box/emits.html
new file mode 100644
index 0000000..505fe3a
--- /dev/null
+++ b/guide/components/verify-box/emits.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>vfluent3</title>
+    <meta name="description" content="A Vue3 component library for Fluent UI">
+    <meta name="generator" content="VitePress v1.0.0-rc.45">
+    <link rel="preload stylesheet" href="/VFluent3/assets/style.BabQegKX.css" as="style">
+    
+    <script type="module" src="/VFluent3/assets/app.CSutcJ2E.js"></script>
+    <link rel="preload" href="/VFluent3/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/framework.DvIFzl91.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/theme.CgqFBnN_.js">
+    <link rel="modulepreload" href="/VFluent3/assets/guide_components_verify-box_emits.md.DT17Iazx.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-19c990f1><div class="wrapper" data-v-19c990f1><div class="container" data-v-19c990f1><div class="title" data-v-19c990f1><div class="VPNavBarTitle has-sidebar" data-v-19c990f1 data-v-ab179fa1><a class="title" href="/VFluent3/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>VFluent3</span><!--[--><!--]--></a></div></div><div class="content" data-v-19c990f1><div class="content-body" data-v-19c990f1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-19c990f1><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-19c990f1 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Guide</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-19c990f1 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-19c990f1 data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-19c990f1 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-19c990f1><div class="divider-line" data-v-19c990f1></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-d2ecc192><button data-v-d2ecc192>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-575e6a36><div class="curtain" data-v-575e6a36></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-575e6a36><span class="visually-hidden" id="sidebar-aria-label" data-v-575e6a36> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Basic input</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/button/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/check-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CheckBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/combobox/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Combobox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/details-list/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DetailsList</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drop-down/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DropDown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio-group/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RadioGroup</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/rating-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RatingControl</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/slider/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/toggle-switch/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ToggleSwitch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tag/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Tag</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Collections</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/flip-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>FlipView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/list-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ListView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tree-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TreeView</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Date & Time</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarDatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/time-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TimePicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Dialogs & flyouts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/callout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Callout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Layout</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/collapse/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Collapse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/expander/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Expander</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drawer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Panel</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Media</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/image/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Img</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ImgBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/persona/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Persona</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Menu & toolbars</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/command-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CommandBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/menu-flyout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MenuFlyout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/swipe-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SwipeControl</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Navigation</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/breadcrumb/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationPanel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pivot/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pivot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pagination/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pagination</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Scrolling</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/infinite-scroll-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfiniteScrollView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/scroll-story/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ScrollStory</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Status & info</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/badge/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-ring/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressRing</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Styles</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/animated-icon/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>AnimatedIcon</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/icon-element/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>IconElement</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/reveal-container/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RevealContainer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/shimmer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Shimmer</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Text</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/search-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SearchBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-field/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextField</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/verify-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>VerifyBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Windowing</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/web-window/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>WebWindow</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Global</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Advance</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-935f8a84><div class="content" data-v-935f8a84><div class="outline-marker" data-v-935f8a84></div><div class="outline-title" role="heading" aria-level="2" data-v-935f8a84>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-935f8a84><span class="visually-hidden" id="doc-outline-aria-label" data-v-935f8a84> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-935f8a84 data-v-b933a997><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _VFluent3_guide_components_verify-box_emits" data-v-39a288b8><div><h2 id="emits" tabindex="-1">Emits <a class="header-anchor" href="#emits" aria-label="Permalink to &quot;Emits&quot;">​</a></h2><hr><table><thead><tr><th style="text-align:center;">EmitName</th><th style="text-align:center;">Arguments</th><th style="text-align:center;">Statement</th></tr></thead></table></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-09de1c0f><!--[--><!--]--><!----><nav class="prev-next" data-v-09de1c0f><div class="pager" data-v-09de1c0f><!----></div><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link next" href="/VFluent3/guide/components/button/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Next page</span><span class="title" data-v-09de1c0f>Button</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>MIT Licensed</p><p class="copyright" data-v-e315a0ad>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_calendar-date-picker_properties.md\":\"DXRjmMG8\",\"guide_components_image_properties.md\":\"DGanRzCb\",\"guide_components_img-box_index.md\":\"DYtggkf_\",\"guide_components_img_emits.md\":\"BlE7jvZQ\",\"guide_components_img_index.md\":\"Bm9FiuU4\",\"guide_components_icon-element_properties.md\":\"8Oakruwc\",\"guide_components_img_properties.md\":\"B42YSocI\",\"guide_components_drawer_index.md\":\"D_vpnCpE\",\"guide_components_verify-box_emits.md\":\"DT17Iazx\",\"guide_components_calendar-date-picker_index.md\":\"BdHjrurh\",\"guide_components_rating-control_index.md\":\"Q9l5Lfrr\",\"guide_components_rating-control_properties.md\":\"DKprnl0i\",\"guide_components_calendar-view_index.md\":\"zdoRYVx1\",\"guide_components_animated-icon_index.md\":\"yZDMzCFe\",\"guide_components_calendar-date-picker_emits.md\":\"D5OkfR8j\",\"guide_components_badge_index.md\":\"Bb4crrJn\",\"guide_components_image_index.md\":\"B7X6cWAZ\",\"guide_components_slider_index.md\":\"C7zZ2d-W\",\"guide_components_radio-group_index.md\":\"CVfh3h5H\",\"guide_components_swipe-control_index.md\":\"DwrDVPc1\",\"guide_components_color-picker_emits.md\":\"BHDXVtBQ\",\"guide_components_radio_index.md\":\"90as5QGp\",\"guide_components_pagination_properties.md\":\"JUAPvcTL\",\"guide_components_persona_properties.md\":\"DUTPhPMp\",\"guide_components_combo-box_emits.md\":\"Dh5R-qEv\",\"guide_components_pivot_emits.md\":\"BTJPgNpy\",\"guide_components_pagination_index.md\":\"CnW2zAht\",\"guide_components_flip-view_properties.md\":\"BqZ4hhgU\",\"guide_components_icon-element_emits.md\":\"D5TXFdTZ\",\"guide_components_flip-view_index.md\":\"DefnDOv6\",\"guide_components_navigation-panel_index.md\":\"6mO__sSK\",\"guide_components_rating-control_emits.md\":\"blvomSeC\",\"guide_components_icon-element_index.md\":\"DQ8K7JNn\",\"guide_components_navigation-view_index.md\":\"4AQRiz1k\",\"guide_components_toggle-switch_emits.md\":\"CLGzrNut\",\"guide_components_toggle-switch_index.md\":\"61en_q9-\",\"guide_components_scroll-story_index.md\":\"Vpgb1HSV\",\"guide_components_reveal-container_index.md\":\"Cut2r4tV\",\"guide_components_search-box_emits.md\":\"-d9sWNNt\",\"guide_components_search-box_properties.md\":\"DEKFfPFw\",\"guide_components_shimmer_emits.md\":\"CTMInlI3\",\"guide_components_tag_index.md\":\"BhhxkcHn\",\"guide_components_search-box_index.md\":\"DgkrY0oY\",\"guide_components_shimmer_index.md\":\"iZlHuTxw\",\"guide_components_shimmer_properties.md\":\"CdkU1o6H\",\"guide_components_tree-view_index.md\":\"CUrwan4q\",\"guide_components_text-field_index.md\":\"CXSimJtj\",\"guide_components_text-box_index.md\":\"C5moAPfB\",\"guide_components_progress-ring_properties.md\":\"Dc08Uiff\",\"guide_components_toggle-switch_properties.md\":\"tFppK_IS\",\"guide_components_radio-group_emits.md\":\"cEDzKVnN\",\"guide_components_collapse_index.md\":\"N9Iu5-2v\",\"guide_components_image_emits.md\":\"lmlz2xJd\",\"guide_components_callout_index.md\":\"D9RU33w6\",\"guide_components_pivot_index.md\":\"B_vwQL-5\",\"guide_components_command-bar_index.md\":\"Cp4_rrGB\",\"guide_components_pagination_emits.md\":\"Dng86A22\",\"guide_components_button_index.md\":\"7sqT2MQP\",\"guide_components_info-box_properties.md\":\"BI7Nvk-E\",\"guide_components_drop-down_emits.md\":\"BE95TdKW\",\"guide_components_expander_index.md\":\"BKgcUJzQ\",\"guide_components_message-bar_index.md\":\"AEtAWlF8\",\"guide_components_menu-flyout_index.md\":\"Csa7irPj\",\"guide_components_panel_index.md\":\"CsTu0bXo\",\"guide_components_panel_properties.md\":\"BaxoCYKq\",\"guide_components_progress-bar_emits.md\":\"BcwXUpsF\",\"guide_components_progress-bar_properties.md\":\"TxiS9ZMA\",\"guide_components_progress-ring_emits.md\":\"D2Y6hIZ9\",\"guide_components_color-picker_index.md\":\"DCc4ixcU\",\"guide_components_progress-ring_index.md\":\"CPb-ZEPE\",\"guide_components_color-picker_properties.md\":\"wcXK29Vl\",\"guide_components_time-picker_index.md\":\"CQJdRRaG\",\"guide_components_drop-down_properties.md\":\"Bwlkpr1q\",\"guide_components_infinite-scroll-view_index.md\":\"yAuD807x\",\"guide_components_check-box_index.md\":\"FYgdu4oq\",\"guide_components_progress-bar_index.md\":\"D8vHQw5V\",\"guide_components_combo-box_index.md\":\"DTyu3eNd\",\"guide_components_info-box_emits.md\":\"DlEwpkkq\",\"guide_components_drop-down_index.md\":\"BZzJZQWq\",\"guide_components_list-view_index.md\":\"BoYvMzb0\",\"guide_components_verify-box_properties.md\":\"CW6W8fFf\",\"guide_components_verify-box_index.md\":\"DwSB40wR\",\"guide_index.md\":\"Bndlt3sL\",\"guide_components_web-window_index.md\":\"Bxc8vEeI\",\"index.md\":\"MTRqI42u\",\"guide_components_combo-box_properties.md\":\"AWfHzV6x\",\"guide_components_combobox_emits.md\":\"CGB6WLt8\",\"guide_components_combobox_properties.md\":\"Bja0hMou\",\"guide_components_details-list_index.md\":\"CcgOCIyt\",\"guide_components_info-box_index.md\":\"vXh-_DsL\",\"guide_components_combobox_index.md\":\"CsPkY6YB\",\"guide_components_date-picker_index.md\":\"12vmUIup\",\"guide_components_flip-view_emits.md\":\"DCheHjDj\",\"guide_components_panel_emits.md\":\"DG0REDq8\",\"guide_components_breadcrumb_index.md\":\"DyDm7PeP\",\"guide_components_radio-group_properties.md\":\"BnPxoKsQ\",\"guide_components_persona_emits.md\":\"CnsDPKRU\",\"guide_components_pivot_properties.md\":\"BmoLpPi1\",\"guide_components_persona_index.md\":\"DT00jby4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vfluent3\",\"description\":\"A Vue3 component library for Fluent UI\",\"base\":\"/VFluent3/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"VFluent3\",\"footer\":{\"message\":\"MIT Licensed\",\"copyright\":\"Copyright © Creator SN - 2022\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/\"}],\"sidebar\":[{\"text\":\"Basic input\",\"collapsed\":true,\"items\":[{\"text\":\"Button\",\"link\":\"/guide/components/button/\"},{\"text\":\"CheckBox\",\"link\":\"/guide/components/check-box/\"},{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"},{\"text\":\"Combobox\",\"link\":\"/guide/components/combobox/\"},{\"text\":\"DetailsList\",\"link\":\"/guide/components/details-list/\"},{\"text\":\"DropDown\",\"link\":\"/guide/components/drop-down/\"},{\"text\":\"Radio\",\"link\":\"/guide/components/radio/\"},{\"text\":\"RadioGroup\",\"link\":\"/guide/components/radio-group/\"},{\"text\":\"RatingControl\",\"link\":\"/guide/components/rating-control/\"},{\"text\":\"Slider\",\"link\":\"/guide/components/slider/\"},{\"text\":\"ToggleSwitch\",\"link\":\"/guide/components/toggle-switch/\"},{\"text\":\"Tag\",\"link\":\"/guide/components/tag/\"}]},{\"text\":\"Collections\",\"collapsed\":true,\"items\":[{\"text\":\"FlipView\",\"link\":\"/guide/components/flip-view/\"},{\"text\":\"ListView\",\"link\":\"/guide/components/list-view/\"},{\"text\":\"TreeView\",\"link\":\"/guide/components/tree-view/\"}]},{\"text\":\"Date & Time\",\"collapsed\":true,\"items\":[{\"text\":\"CalendarDatePicker\",\"link\":\"/guide/components/calendar-date-picker/\"},{\"text\":\"CalendarView\",\"link\":\"/guide/components/calendar-view/\"},{\"text\":\"DatePicker\",\"link\":\"/guide/components/date-picker/\"},{\"text\":\"TimePicker\",\"link\":\"/guide/components/time-picker/\"}]},{\"text\":\"Dialogs & flyouts\",\"collapsed\":true,\"items\":[{\"text\":\"Callout\",\"link\":\"/guide/components/callout/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Layout\",\"collapsed\":true,\"items\":[{\"text\":\"Collapse\",\"link\":\"/guide/components/collapse/\"},{\"text\":\"Expander\",\"link\":\"/guide/components/expander/\"},{\"text\":\"Drawer\",\"link\":\"/guide/components/drawer/\"},{\"text\":\"Panel\",\"link\":\"/guide/components/panel/\"}]},{\"text\":\"Media\",\"collapsed\":true,\"items\":[{\"text\":\"Image\",\"link\":\"/guide/components/image/\"},{\"text\":\"Img\",\"link\":\"/guide/components/img/\"},{\"text\":\"ImgBox\",\"link\":\"/guide/components/img-box/\"},{\"text\":\"Persona\",\"link\":\"/guide/components/persona/\"}]},{\"text\":\"Menu & toolbars\",\"collapsed\":true,\"items\":[{\"text\":\"CommandBar\",\"link\":\"/guide/components/command-bar/\"},{\"text\":\"MenuFlyout\",\"link\":\"/guide/components/menu-flyout/\"},{\"text\":\"SwipeControl\",\"link\":\"/guide/components/swipe-control/\"}]},{\"text\":\"Navigation\",\"collapsed\":true,\"items\":[{\"text\":\"Breadcrumb\",\"link\":\"/guide/components/breadcrumb/\"},{\"text\":\"NavigationPanel\",\"link\":\"/guide/components/navigation-panel/\"},{\"text\":\"NavigationView\",\"link\":\"/guide/components/navigation-view/\"},{\"text\":\"Pivot\",\"link\":\"/guide/components/pivot/\"},{\"text\":\"Pagination\",\"link\":\"/guide/components/pagination/\"}]},{\"text\":\"Scrolling\",\"collapsed\":true,\"items\":[{\"text\":\"InfiniteScrollView\",\"link\":\"/guide/components/infinite-scroll-view/\"},{\"text\":\"ScrollStory\",\"link\":\"/guide/components/scroll-story/\"}]},{\"text\":\"Status & info\",\"collapsed\":true,\"items\":[{\"text\":\"Badge\",\"link\":\"/guide/components/badge/\"},{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"ProgressBar\",\"link\":\"/guide/components/progress-bar/\"},{\"text\":\"ProgressRing\",\"link\":\"/guide/components/progress-ring/\"}]},{\"text\":\"Styles\",\"collapsed\":true,\"items\":[{\"text\":\"AnimatedIcon\",\"link\":\"/guide/components/animated-icon/\"},{\"text\":\"IconElement\",\"link\":\"/guide/components/icon-element/\"},{\"text\":\"RevealContainer\",\"link\":\"/guide/components/reveal-container/\"},{\"text\":\"Shimmer\",\"link\":\"/guide/components/shimmer/\"}]},{\"text\":\"Text\",\"collapsed\":true,\"items\":[{\"text\":\"SearchBox\",\"link\":\"/guide/components/search-box/\"},{\"text\":\"TextBox\",\"link\":\"/guide/components/text-box/\"},{\"text\":\"TextField\",\"link\":\"/guide/components/text-field/\"},{\"text\":\"VerifyBox\",\"link\":\"/guide/components/verify-box/\"}]},{\"text\":\"Windowing\",\"collapsed\":true,\"items\":[{\"text\":\"WebWindow\",\"link\":\"/guide/components/web-window/\"}]},{\"text\":\"Global\",\"collapsed\":true,\"items\":[{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Advance\",\"collapsed\":true,\"items\":[{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git a/guide/components/verify-box/index.html b/guide/components/verify-box/index.html
new file mode 100644
index 0000000..c419605
--- /dev/null
+++ b/guide/components/verify-box/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>VerifyBox | vfluent3</title>
+    <meta name="description" content="A Vue3 component library for Fluent UI">
+    <meta name="generator" content="VitePress v1.0.0-rc.45">
+    <link rel="preload stylesheet" href="/VFluent3/assets/style.BabQegKX.css" as="style">
+    
+    <script type="module" src="/VFluent3/assets/app.CSutcJ2E.js"></script>
+    <link rel="preload" href="/VFluent3/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/framework.DvIFzl91.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/theme.CgqFBnN_.js">
+    <link rel="modulepreload" href="/VFluent3/assets/guide_components_verify-box_index.md.DwSB40wR.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-19c990f1><div class="wrapper" data-v-19c990f1><div class="container" data-v-19c990f1><div class="title" data-v-19c990f1><div class="VPNavBarTitle has-sidebar" data-v-19c990f1 data-v-ab179fa1><a class="title" href="/VFluent3/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>VFluent3</span><!--[--><!--]--></a></div></div><div class="content" data-v-19c990f1><div class="content-body" data-v-19c990f1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-19c990f1><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-19c990f1 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Guide</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-19c990f1 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-19c990f1 data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-19c990f1 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-19c990f1><div class="divider-line" data-v-19c990f1></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-d2ecc192><button data-v-d2ecc192>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-575e6a36><div class="curtain" data-v-575e6a36></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-575e6a36><span class="visually-hidden" id="sidebar-aria-label" data-v-575e6a36> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Basic input</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/button/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/check-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CheckBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/combobox/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Combobox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/details-list/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DetailsList</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drop-down/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DropDown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio-group/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RadioGroup</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/rating-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RatingControl</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/slider/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/toggle-switch/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ToggleSwitch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tag/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Tag</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Collections</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/flip-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>FlipView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/list-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ListView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tree-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TreeView</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Date & Time</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarDatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/time-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TimePicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Dialogs & flyouts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/callout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Callout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Layout</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/collapse/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Collapse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/expander/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Expander</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drawer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Panel</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Media</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/image/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Img</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ImgBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/persona/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Persona</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Menu & toolbars</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/command-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CommandBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/menu-flyout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MenuFlyout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/swipe-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SwipeControl</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Navigation</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/breadcrumb/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationPanel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pivot/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pivot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pagination/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pagination</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Scrolling</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/infinite-scroll-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfiniteScrollView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/scroll-story/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ScrollStory</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Status & info</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/badge/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-ring/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressRing</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Styles</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/animated-icon/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>AnimatedIcon</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/icon-element/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>IconElement</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/reveal-container/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RevealContainer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/shimmer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Shimmer</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible has-active" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Text</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/search-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SearchBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-field/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextField</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/verify-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>VerifyBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Windowing</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/web-window/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>WebWindow</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Global</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Advance</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-935f8a84><div class="content" data-v-935f8a84><div class="outline-marker" data-v-935f8a84></div><div class="outline-title" role="heading" aria-level="2" data-v-935f8a84>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-935f8a84><span class="visually-hidden" id="doc-outline-aria-label" data-v-935f8a84> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-935f8a84 data-v-b933a997><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _VFluent3_guide_components_verify-box_" data-v-39a288b8><div><h3 id="verifybox-demo" tabindex="-1">VerifyBox-DEMO <a class="header-anchor" href="#verifybox-demo" aria-label="Permalink to &quot;VerifyBox-DEMO&quot;">​</a></h3><hr><!----><h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">value</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;"></td><td style="text-align:center;">Using v-model binding input value</td></tr><tr><td style="text-align:center;">length</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">验证码长度</td></tr><tr><td style="text-align:center;">inputmode</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">numeric</td><td style="text-align:center;">输入模式, 可选值为<code>numeric</code>, <code>tel</code>, <code>text</code>, <code>decimal</code>, <code>email</code>, <code>url</code></td></tr><tr><td style="text-align:center;">underline</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否开启Underline风格的VerifyBox</td></tr><tr><td style="text-align:center;">background</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">borderWidth</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">borderColor</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">focusBorderColor</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">fontSize</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">18</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">fontWeight</td><td style="text-align:center;">[string,number]</td><td style="text-align:center;">No</td><td style="text-align:center;">bold</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">foreground</td><td style="text-align:center;">[string(color)]</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">borderRadius</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">3</td><td style="text-align:center;">VerifyBox圆角大小, 启用revealBorder时将失效</td></tr><tr><td style="text-align:center;">isBoxShadow</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">开启<code>VerifyBox</code>阴影</td></tr><tr><td style="text-align:center;">revealBorder</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">disabled</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;"></td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">system</td><td style="text-align:center;">主题样式, 包含<code>light</code>, <code>dark</code>, <code>system</code>, <code>custom</code>几种样式</td></tr></tbody></table><h3 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to &quot;Events&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">事件名(Name)</th><th style="text-align:center;">参数类型(args)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">confirm</td><td style="text-align:center;">string</td><td style="text-align:center;">完成输入并返回结果</td></tr></tbody></table></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-09de1c0f><!--[--><!--]--><!----><nav class="prev-next" data-v-09de1c0f><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link prev" href="/VFluent3/guide/components/text-field/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Previous page</span><span class="title" data-v-09de1c0f>TextField</span><!--]--></a></div><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link next" href="/VFluent3/guide/components/web-window/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Next page</span><span class="title" data-v-09de1c0f>WebWindow</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>MIT Licensed</p><p class="copyright" data-v-e315a0ad>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_calendar-date-picker_properties.md\":\"DXRjmMG8\",\"guide_components_image_properties.md\":\"DGanRzCb\",\"guide_components_img-box_index.md\":\"DYtggkf_\",\"guide_components_img_emits.md\":\"BlE7jvZQ\",\"guide_components_img_index.md\":\"Bm9FiuU4\",\"guide_components_icon-element_properties.md\":\"8Oakruwc\",\"guide_components_img_properties.md\":\"B42YSocI\",\"guide_components_drawer_index.md\":\"D_vpnCpE\",\"guide_components_verify-box_emits.md\":\"DT17Iazx\",\"guide_components_calendar-date-picker_index.md\":\"BdHjrurh\",\"guide_components_rating-control_index.md\":\"Q9l5Lfrr\",\"guide_components_rating-control_properties.md\":\"DKprnl0i\",\"guide_components_calendar-view_index.md\":\"zdoRYVx1\",\"guide_components_animated-icon_index.md\":\"yZDMzCFe\",\"guide_components_calendar-date-picker_emits.md\":\"D5OkfR8j\",\"guide_components_badge_index.md\":\"Bb4crrJn\",\"guide_components_image_index.md\":\"B7X6cWAZ\",\"guide_components_slider_index.md\":\"C7zZ2d-W\",\"guide_components_radio-group_index.md\":\"CVfh3h5H\",\"guide_components_swipe-control_index.md\":\"DwrDVPc1\",\"guide_components_color-picker_emits.md\":\"BHDXVtBQ\",\"guide_components_radio_index.md\":\"90as5QGp\",\"guide_components_pagination_properties.md\":\"JUAPvcTL\",\"guide_components_persona_properties.md\":\"DUTPhPMp\",\"guide_components_combo-box_emits.md\":\"Dh5R-qEv\",\"guide_components_pivot_emits.md\":\"BTJPgNpy\",\"guide_components_pagination_index.md\":\"CnW2zAht\",\"guide_components_flip-view_properties.md\":\"BqZ4hhgU\",\"guide_components_icon-element_emits.md\":\"D5TXFdTZ\",\"guide_components_flip-view_index.md\":\"DefnDOv6\",\"guide_components_navigation-panel_index.md\":\"6mO__sSK\",\"guide_components_rating-control_emits.md\":\"blvomSeC\",\"guide_components_icon-element_index.md\":\"DQ8K7JNn\",\"guide_components_navigation-view_index.md\":\"4AQRiz1k\",\"guide_components_toggle-switch_emits.md\":\"CLGzrNut\",\"guide_components_toggle-switch_index.md\":\"61en_q9-\",\"guide_components_scroll-story_index.md\":\"Vpgb1HSV\",\"guide_components_reveal-container_index.md\":\"Cut2r4tV\",\"guide_components_search-box_emits.md\":\"-d9sWNNt\",\"guide_components_search-box_properties.md\":\"DEKFfPFw\",\"guide_components_shimmer_emits.md\":\"CTMInlI3\",\"guide_components_tag_index.md\":\"BhhxkcHn\",\"guide_components_search-box_index.md\":\"DgkrY0oY\",\"guide_components_shimmer_index.md\":\"iZlHuTxw\",\"guide_components_shimmer_properties.md\":\"CdkU1o6H\",\"guide_components_tree-view_index.md\":\"CUrwan4q\",\"guide_components_text-field_index.md\":\"CXSimJtj\",\"guide_components_text-box_index.md\":\"C5moAPfB\",\"guide_components_progress-ring_properties.md\":\"Dc08Uiff\",\"guide_components_toggle-switch_properties.md\":\"tFppK_IS\",\"guide_components_radio-group_emits.md\":\"cEDzKVnN\",\"guide_components_collapse_index.md\":\"N9Iu5-2v\",\"guide_components_image_emits.md\":\"lmlz2xJd\",\"guide_components_callout_index.md\":\"D9RU33w6\",\"guide_components_pivot_index.md\":\"B_vwQL-5\",\"guide_components_command-bar_index.md\":\"Cp4_rrGB\",\"guide_components_pagination_emits.md\":\"Dng86A22\",\"guide_components_button_index.md\":\"7sqT2MQP\",\"guide_components_info-box_properties.md\":\"BI7Nvk-E\",\"guide_components_drop-down_emits.md\":\"BE95TdKW\",\"guide_components_expander_index.md\":\"BKgcUJzQ\",\"guide_components_message-bar_index.md\":\"AEtAWlF8\",\"guide_components_menu-flyout_index.md\":\"Csa7irPj\",\"guide_components_panel_index.md\":\"CsTu0bXo\",\"guide_components_panel_properties.md\":\"BaxoCYKq\",\"guide_components_progress-bar_emits.md\":\"BcwXUpsF\",\"guide_components_progress-bar_properties.md\":\"TxiS9ZMA\",\"guide_components_progress-ring_emits.md\":\"D2Y6hIZ9\",\"guide_components_color-picker_index.md\":\"DCc4ixcU\",\"guide_components_progress-ring_index.md\":\"CPb-ZEPE\",\"guide_components_color-picker_properties.md\":\"wcXK29Vl\",\"guide_components_time-picker_index.md\":\"CQJdRRaG\",\"guide_components_drop-down_properties.md\":\"Bwlkpr1q\",\"guide_components_infinite-scroll-view_index.md\":\"yAuD807x\",\"guide_components_check-box_index.md\":\"FYgdu4oq\",\"guide_components_progress-bar_index.md\":\"D8vHQw5V\",\"guide_components_combo-box_index.md\":\"DTyu3eNd\",\"guide_components_info-box_emits.md\":\"DlEwpkkq\",\"guide_components_drop-down_index.md\":\"BZzJZQWq\",\"guide_components_list-view_index.md\":\"BoYvMzb0\",\"guide_components_verify-box_properties.md\":\"CW6W8fFf\",\"guide_components_verify-box_index.md\":\"DwSB40wR\",\"guide_index.md\":\"Bndlt3sL\",\"guide_components_web-window_index.md\":\"Bxc8vEeI\",\"index.md\":\"MTRqI42u\",\"guide_components_combo-box_properties.md\":\"AWfHzV6x\",\"guide_components_combobox_emits.md\":\"CGB6WLt8\",\"guide_components_combobox_properties.md\":\"Bja0hMou\",\"guide_components_details-list_index.md\":\"CcgOCIyt\",\"guide_components_info-box_index.md\":\"vXh-_DsL\",\"guide_components_combobox_index.md\":\"CsPkY6YB\",\"guide_components_date-picker_index.md\":\"12vmUIup\",\"guide_components_flip-view_emits.md\":\"DCheHjDj\",\"guide_components_panel_emits.md\":\"DG0REDq8\",\"guide_components_breadcrumb_index.md\":\"DyDm7PeP\",\"guide_components_radio-group_properties.md\":\"BnPxoKsQ\",\"guide_components_persona_emits.md\":\"CnsDPKRU\",\"guide_components_pivot_properties.md\":\"BmoLpPi1\",\"guide_components_persona_index.md\":\"DT00jby4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vfluent3\",\"description\":\"A Vue3 component library for Fluent UI\",\"base\":\"/VFluent3/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"VFluent3\",\"footer\":{\"message\":\"MIT Licensed\",\"copyright\":\"Copyright © Creator SN - 2022\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/\"}],\"sidebar\":[{\"text\":\"Basic input\",\"collapsed\":true,\"items\":[{\"text\":\"Button\",\"link\":\"/guide/components/button/\"},{\"text\":\"CheckBox\",\"link\":\"/guide/components/check-box/\"},{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"},{\"text\":\"Combobox\",\"link\":\"/guide/components/combobox/\"},{\"text\":\"DetailsList\",\"link\":\"/guide/components/details-list/\"},{\"text\":\"DropDown\",\"link\":\"/guide/components/drop-down/\"},{\"text\":\"Radio\",\"link\":\"/guide/components/radio/\"},{\"text\":\"RadioGroup\",\"link\":\"/guide/components/radio-group/\"},{\"text\":\"RatingControl\",\"link\":\"/guide/components/rating-control/\"},{\"text\":\"Slider\",\"link\":\"/guide/components/slider/\"},{\"text\":\"ToggleSwitch\",\"link\":\"/guide/components/toggle-switch/\"},{\"text\":\"Tag\",\"link\":\"/guide/components/tag/\"}]},{\"text\":\"Collections\",\"collapsed\":true,\"items\":[{\"text\":\"FlipView\",\"link\":\"/guide/components/flip-view/\"},{\"text\":\"ListView\",\"link\":\"/guide/components/list-view/\"},{\"text\":\"TreeView\",\"link\":\"/guide/components/tree-view/\"}]},{\"text\":\"Date & Time\",\"collapsed\":true,\"items\":[{\"text\":\"CalendarDatePicker\",\"link\":\"/guide/components/calendar-date-picker/\"},{\"text\":\"CalendarView\",\"link\":\"/guide/components/calendar-view/\"},{\"text\":\"DatePicker\",\"link\":\"/guide/components/date-picker/\"},{\"text\":\"TimePicker\",\"link\":\"/guide/components/time-picker/\"}]},{\"text\":\"Dialogs & flyouts\",\"collapsed\":true,\"items\":[{\"text\":\"Callout\",\"link\":\"/guide/components/callout/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Layout\",\"collapsed\":true,\"items\":[{\"text\":\"Collapse\",\"link\":\"/guide/components/collapse/\"},{\"text\":\"Expander\",\"link\":\"/guide/components/expander/\"},{\"text\":\"Drawer\",\"link\":\"/guide/components/drawer/\"},{\"text\":\"Panel\",\"link\":\"/guide/components/panel/\"}]},{\"text\":\"Media\",\"collapsed\":true,\"items\":[{\"text\":\"Image\",\"link\":\"/guide/components/image/\"},{\"text\":\"Img\",\"link\":\"/guide/components/img/\"},{\"text\":\"ImgBox\",\"link\":\"/guide/components/img-box/\"},{\"text\":\"Persona\",\"link\":\"/guide/components/persona/\"}]},{\"text\":\"Menu & toolbars\",\"collapsed\":true,\"items\":[{\"text\":\"CommandBar\",\"link\":\"/guide/components/command-bar/\"},{\"text\":\"MenuFlyout\",\"link\":\"/guide/components/menu-flyout/\"},{\"text\":\"SwipeControl\",\"link\":\"/guide/components/swipe-control/\"}]},{\"text\":\"Navigation\",\"collapsed\":true,\"items\":[{\"text\":\"Breadcrumb\",\"link\":\"/guide/components/breadcrumb/\"},{\"text\":\"NavigationPanel\",\"link\":\"/guide/components/navigation-panel/\"},{\"text\":\"NavigationView\",\"link\":\"/guide/components/navigation-view/\"},{\"text\":\"Pivot\",\"link\":\"/guide/components/pivot/\"},{\"text\":\"Pagination\",\"link\":\"/guide/components/pagination/\"}]},{\"text\":\"Scrolling\",\"collapsed\":true,\"items\":[{\"text\":\"InfiniteScrollView\",\"link\":\"/guide/components/infinite-scroll-view/\"},{\"text\":\"ScrollStory\",\"link\":\"/guide/components/scroll-story/\"}]},{\"text\":\"Status & info\",\"collapsed\":true,\"items\":[{\"text\":\"Badge\",\"link\":\"/guide/components/badge/\"},{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"ProgressBar\",\"link\":\"/guide/components/progress-bar/\"},{\"text\":\"ProgressRing\",\"link\":\"/guide/components/progress-ring/\"}]},{\"text\":\"Styles\",\"collapsed\":true,\"items\":[{\"text\":\"AnimatedIcon\",\"link\":\"/guide/components/animated-icon/\"},{\"text\":\"IconElement\",\"link\":\"/guide/components/icon-element/\"},{\"text\":\"RevealContainer\",\"link\":\"/guide/components/reveal-container/\"},{\"text\":\"Shimmer\",\"link\":\"/guide/components/shimmer/\"}]},{\"text\":\"Text\",\"collapsed\":true,\"items\":[{\"text\":\"SearchBox\",\"link\":\"/guide/components/search-box/\"},{\"text\":\"TextBox\",\"link\":\"/guide/components/text-box/\"},{\"text\":\"TextField\",\"link\":\"/guide/components/text-field/\"},{\"text\":\"VerifyBox\",\"link\":\"/guide/components/verify-box/\"}]},{\"text\":\"Windowing\",\"collapsed\":true,\"items\":[{\"text\":\"WebWindow\",\"link\":\"/guide/components/web-window/\"}]},{\"text\":\"Global\",\"collapsed\":true,\"items\":[{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Advance\",\"collapsed\":true,\"items\":[{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git a/guide/components/verify-box/properties.html b/guide/components/verify-box/properties.html
new file mode 100644
index 0000000..227fc0a
--- /dev/null
+++ b/guide/components/verify-box/properties.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>vfluent3</title>
+    <meta name="description" content="A Vue3 component library for Fluent UI">
+    <meta name="generator" content="VitePress v1.0.0-rc.45">
+    <link rel="preload stylesheet" href="/VFluent3/assets/style.BabQegKX.css" as="style">
+    
+    <script type="module" src="/VFluent3/assets/app.CSutcJ2E.js"></script>
+    <link rel="preload" href="/VFluent3/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/framework.DvIFzl91.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/theme.CgqFBnN_.js">
+    <link rel="modulepreload" href="/VFluent3/assets/guide_components_verify-box_properties.md.CW6W8fFf.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-19c990f1><div class="wrapper" data-v-19c990f1><div class="container" data-v-19c990f1><div class="title" data-v-19c990f1><div class="VPNavBarTitle has-sidebar" data-v-19c990f1 data-v-ab179fa1><a class="title" href="/VFluent3/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>VFluent3</span><!--[--><!--]--></a></div></div><div class="content" data-v-19c990f1><div class="content-body" data-v-19c990f1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-19c990f1><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-19c990f1 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Guide</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-19c990f1 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-19c990f1 data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-19c990f1 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-19c990f1><div class="divider-line" data-v-19c990f1></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-d2ecc192><button data-v-d2ecc192>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-575e6a36><div class="curtain" data-v-575e6a36></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-575e6a36><span class="visually-hidden" id="sidebar-aria-label" data-v-575e6a36> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Basic input</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/button/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/check-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CheckBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/combobox/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Combobox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/details-list/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DetailsList</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drop-down/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DropDown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio-group/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RadioGroup</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/rating-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RatingControl</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/slider/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/toggle-switch/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ToggleSwitch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tag/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Tag</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Collections</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/flip-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>FlipView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/list-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ListView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tree-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TreeView</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Date & Time</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarDatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/time-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TimePicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Dialogs & flyouts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/callout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Callout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Layout</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/collapse/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Collapse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/expander/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Expander</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drawer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Panel</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Media</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/image/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Img</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ImgBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/persona/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Persona</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Menu & toolbars</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/command-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CommandBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/menu-flyout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MenuFlyout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/swipe-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SwipeControl</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Navigation</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/breadcrumb/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationPanel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pivot/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pivot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pagination/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pagination</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Scrolling</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/infinite-scroll-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfiniteScrollView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/scroll-story/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ScrollStory</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Status & info</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/badge/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-ring/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressRing</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Styles</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/animated-icon/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>AnimatedIcon</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/icon-element/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>IconElement</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/reveal-container/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RevealContainer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/shimmer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Shimmer</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Text</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/search-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SearchBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-field/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextField</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/verify-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>VerifyBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Windowing</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/web-window/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>WebWindow</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Global</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Advance</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-935f8a84><div class="content" data-v-935f8a84><div class="outline-marker" data-v-935f8a84></div><div class="outline-title" role="heading" aria-level="2" data-v-935f8a84>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-935f8a84><span class="visually-hidden" id="doc-outline-aria-label" data-v-935f8a84> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-935f8a84 data-v-b933a997><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _VFluent3_guide_components_verify-box_properties" data-v-39a288b8><div><h2 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#properties" aria-label="Permalink to &quot;Properties&quot;">​</a></h2><hr><table><thead><tr><th style="text-align:center;">Property</th><th style="text-align:center;">Type</th><th style="text-align:center;">Required</th><th style="text-align:center;">Default</th><th style="text-align:center;">Statement</th></tr></thead></table></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-09de1c0f><!--[--><!--]--><!----><nav class="prev-next" data-v-09de1c0f><div class="pager" data-v-09de1c0f><!----></div><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link next" href="/VFluent3/guide/components/button/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Next page</span><span class="title" data-v-09de1c0f>Button</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>MIT Licensed</p><p class="copyright" data-v-e315a0ad>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_calendar-date-picker_properties.md\":\"DXRjmMG8\",\"guide_components_image_properties.md\":\"DGanRzCb\",\"guide_components_img-box_index.md\":\"DYtggkf_\",\"guide_components_img_emits.md\":\"BlE7jvZQ\",\"guide_components_img_index.md\":\"Bm9FiuU4\",\"guide_components_icon-element_properties.md\":\"8Oakruwc\",\"guide_components_img_properties.md\":\"B42YSocI\",\"guide_components_drawer_index.md\":\"D_vpnCpE\",\"guide_components_verify-box_emits.md\":\"DT17Iazx\",\"guide_components_calendar-date-picker_index.md\":\"BdHjrurh\",\"guide_components_rating-control_index.md\":\"Q9l5Lfrr\",\"guide_components_rating-control_properties.md\":\"DKprnl0i\",\"guide_components_calendar-view_index.md\":\"zdoRYVx1\",\"guide_components_animated-icon_index.md\":\"yZDMzCFe\",\"guide_components_calendar-date-picker_emits.md\":\"D5OkfR8j\",\"guide_components_badge_index.md\":\"Bb4crrJn\",\"guide_components_image_index.md\":\"B7X6cWAZ\",\"guide_components_slider_index.md\":\"C7zZ2d-W\",\"guide_components_radio-group_index.md\":\"CVfh3h5H\",\"guide_components_swipe-control_index.md\":\"DwrDVPc1\",\"guide_components_color-picker_emits.md\":\"BHDXVtBQ\",\"guide_components_radio_index.md\":\"90as5QGp\",\"guide_components_pagination_properties.md\":\"JUAPvcTL\",\"guide_components_persona_properties.md\":\"DUTPhPMp\",\"guide_components_combo-box_emits.md\":\"Dh5R-qEv\",\"guide_components_pivot_emits.md\":\"BTJPgNpy\",\"guide_components_pagination_index.md\":\"CnW2zAht\",\"guide_components_flip-view_properties.md\":\"BqZ4hhgU\",\"guide_components_icon-element_emits.md\":\"D5TXFdTZ\",\"guide_components_flip-view_index.md\":\"DefnDOv6\",\"guide_components_navigation-panel_index.md\":\"6mO__sSK\",\"guide_components_rating-control_emits.md\":\"blvomSeC\",\"guide_components_icon-element_index.md\":\"DQ8K7JNn\",\"guide_components_navigation-view_index.md\":\"4AQRiz1k\",\"guide_components_toggle-switch_emits.md\":\"CLGzrNut\",\"guide_components_toggle-switch_index.md\":\"61en_q9-\",\"guide_components_scroll-story_index.md\":\"Vpgb1HSV\",\"guide_components_reveal-container_index.md\":\"Cut2r4tV\",\"guide_components_search-box_emits.md\":\"-d9sWNNt\",\"guide_components_search-box_properties.md\":\"DEKFfPFw\",\"guide_components_shimmer_emits.md\":\"CTMInlI3\",\"guide_components_tag_index.md\":\"BhhxkcHn\",\"guide_components_search-box_index.md\":\"DgkrY0oY\",\"guide_components_shimmer_index.md\":\"iZlHuTxw\",\"guide_components_shimmer_properties.md\":\"CdkU1o6H\",\"guide_components_tree-view_index.md\":\"CUrwan4q\",\"guide_components_text-field_index.md\":\"CXSimJtj\",\"guide_components_text-box_index.md\":\"C5moAPfB\",\"guide_components_progress-ring_properties.md\":\"Dc08Uiff\",\"guide_components_toggle-switch_properties.md\":\"tFppK_IS\",\"guide_components_radio-group_emits.md\":\"cEDzKVnN\",\"guide_components_collapse_index.md\":\"N9Iu5-2v\",\"guide_components_image_emits.md\":\"lmlz2xJd\",\"guide_components_callout_index.md\":\"D9RU33w6\",\"guide_components_pivot_index.md\":\"B_vwQL-5\",\"guide_components_command-bar_index.md\":\"Cp4_rrGB\",\"guide_components_pagination_emits.md\":\"Dng86A22\",\"guide_components_button_index.md\":\"7sqT2MQP\",\"guide_components_info-box_properties.md\":\"BI7Nvk-E\",\"guide_components_drop-down_emits.md\":\"BE95TdKW\",\"guide_components_expander_index.md\":\"BKgcUJzQ\",\"guide_components_message-bar_index.md\":\"AEtAWlF8\",\"guide_components_menu-flyout_index.md\":\"Csa7irPj\",\"guide_components_panel_index.md\":\"CsTu0bXo\",\"guide_components_panel_properties.md\":\"BaxoCYKq\",\"guide_components_progress-bar_emits.md\":\"BcwXUpsF\",\"guide_components_progress-bar_properties.md\":\"TxiS9ZMA\",\"guide_components_progress-ring_emits.md\":\"D2Y6hIZ9\",\"guide_components_color-picker_index.md\":\"DCc4ixcU\",\"guide_components_progress-ring_index.md\":\"CPb-ZEPE\",\"guide_components_color-picker_properties.md\":\"wcXK29Vl\",\"guide_components_time-picker_index.md\":\"CQJdRRaG\",\"guide_components_drop-down_properties.md\":\"Bwlkpr1q\",\"guide_components_infinite-scroll-view_index.md\":\"yAuD807x\",\"guide_components_check-box_index.md\":\"FYgdu4oq\",\"guide_components_progress-bar_index.md\":\"D8vHQw5V\",\"guide_components_combo-box_index.md\":\"DTyu3eNd\",\"guide_components_info-box_emits.md\":\"DlEwpkkq\",\"guide_components_drop-down_index.md\":\"BZzJZQWq\",\"guide_components_list-view_index.md\":\"BoYvMzb0\",\"guide_components_verify-box_properties.md\":\"CW6W8fFf\",\"guide_components_verify-box_index.md\":\"DwSB40wR\",\"guide_index.md\":\"Bndlt3sL\",\"guide_components_web-window_index.md\":\"Bxc8vEeI\",\"index.md\":\"MTRqI42u\",\"guide_components_combo-box_properties.md\":\"AWfHzV6x\",\"guide_components_combobox_emits.md\":\"CGB6WLt8\",\"guide_components_combobox_properties.md\":\"Bja0hMou\",\"guide_components_details-list_index.md\":\"CcgOCIyt\",\"guide_components_info-box_index.md\":\"vXh-_DsL\",\"guide_components_combobox_index.md\":\"CsPkY6YB\",\"guide_components_date-picker_index.md\":\"12vmUIup\",\"guide_components_flip-view_emits.md\":\"DCheHjDj\",\"guide_components_panel_emits.md\":\"DG0REDq8\",\"guide_components_breadcrumb_index.md\":\"DyDm7PeP\",\"guide_components_radio-group_properties.md\":\"BnPxoKsQ\",\"guide_components_persona_emits.md\":\"CnsDPKRU\",\"guide_components_pivot_properties.md\":\"BmoLpPi1\",\"guide_components_persona_index.md\":\"DT00jby4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vfluent3\",\"description\":\"A Vue3 component library for Fluent UI\",\"base\":\"/VFluent3/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"VFluent3\",\"footer\":{\"message\":\"MIT Licensed\",\"copyright\":\"Copyright © Creator SN - 2022\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/\"}],\"sidebar\":[{\"text\":\"Basic input\",\"collapsed\":true,\"items\":[{\"text\":\"Button\",\"link\":\"/guide/components/button/\"},{\"text\":\"CheckBox\",\"link\":\"/guide/components/check-box/\"},{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"},{\"text\":\"Combobox\",\"link\":\"/guide/components/combobox/\"},{\"text\":\"DetailsList\",\"link\":\"/guide/components/details-list/\"},{\"text\":\"DropDown\",\"link\":\"/guide/components/drop-down/\"},{\"text\":\"Radio\",\"link\":\"/guide/components/radio/\"},{\"text\":\"RadioGroup\",\"link\":\"/guide/components/radio-group/\"},{\"text\":\"RatingControl\",\"link\":\"/guide/components/rating-control/\"},{\"text\":\"Slider\",\"link\":\"/guide/components/slider/\"},{\"text\":\"ToggleSwitch\",\"link\":\"/guide/components/toggle-switch/\"},{\"text\":\"Tag\",\"link\":\"/guide/components/tag/\"}]},{\"text\":\"Collections\",\"collapsed\":true,\"items\":[{\"text\":\"FlipView\",\"link\":\"/guide/components/flip-view/\"},{\"text\":\"ListView\",\"link\":\"/guide/components/list-view/\"},{\"text\":\"TreeView\",\"link\":\"/guide/components/tree-view/\"}]},{\"text\":\"Date & Time\",\"collapsed\":true,\"items\":[{\"text\":\"CalendarDatePicker\",\"link\":\"/guide/components/calendar-date-picker/\"},{\"text\":\"CalendarView\",\"link\":\"/guide/components/calendar-view/\"},{\"text\":\"DatePicker\",\"link\":\"/guide/components/date-picker/\"},{\"text\":\"TimePicker\",\"link\":\"/guide/components/time-picker/\"}]},{\"text\":\"Dialogs & flyouts\",\"collapsed\":true,\"items\":[{\"text\":\"Callout\",\"link\":\"/guide/components/callout/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Layout\",\"collapsed\":true,\"items\":[{\"text\":\"Collapse\",\"link\":\"/guide/components/collapse/\"},{\"text\":\"Expander\",\"link\":\"/guide/components/expander/\"},{\"text\":\"Drawer\",\"link\":\"/guide/components/drawer/\"},{\"text\":\"Panel\",\"link\":\"/guide/components/panel/\"}]},{\"text\":\"Media\",\"collapsed\":true,\"items\":[{\"text\":\"Image\",\"link\":\"/guide/components/image/\"},{\"text\":\"Img\",\"link\":\"/guide/components/img/\"},{\"text\":\"ImgBox\",\"link\":\"/guide/components/img-box/\"},{\"text\":\"Persona\",\"link\":\"/guide/components/persona/\"}]},{\"text\":\"Menu & toolbars\",\"collapsed\":true,\"items\":[{\"text\":\"CommandBar\",\"link\":\"/guide/components/command-bar/\"},{\"text\":\"MenuFlyout\",\"link\":\"/guide/components/menu-flyout/\"},{\"text\":\"SwipeControl\",\"link\":\"/guide/components/swipe-control/\"}]},{\"text\":\"Navigation\",\"collapsed\":true,\"items\":[{\"text\":\"Breadcrumb\",\"link\":\"/guide/components/breadcrumb/\"},{\"text\":\"NavigationPanel\",\"link\":\"/guide/components/navigation-panel/\"},{\"text\":\"NavigationView\",\"link\":\"/guide/components/navigation-view/\"},{\"text\":\"Pivot\",\"link\":\"/guide/components/pivot/\"},{\"text\":\"Pagination\",\"link\":\"/guide/components/pagination/\"}]},{\"text\":\"Scrolling\",\"collapsed\":true,\"items\":[{\"text\":\"InfiniteScrollView\",\"link\":\"/guide/components/infinite-scroll-view/\"},{\"text\":\"ScrollStory\",\"link\":\"/guide/components/scroll-story/\"}]},{\"text\":\"Status & info\",\"collapsed\":true,\"items\":[{\"text\":\"Badge\",\"link\":\"/guide/components/badge/\"},{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"ProgressBar\",\"link\":\"/guide/components/progress-bar/\"},{\"text\":\"ProgressRing\",\"link\":\"/guide/components/progress-ring/\"}]},{\"text\":\"Styles\",\"collapsed\":true,\"items\":[{\"text\":\"AnimatedIcon\",\"link\":\"/guide/components/animated-icon/\"},{\"text\":\"IconElement\",\"link\":\"/guide/components/icon-element/\"},{\"text\":\"RevealContainer\",\"link\":\"/guide/components/reveal-container/\"},{\"text\":\"Shimmer\",\"link\":\"/guide/components/shimmer/\"}]},{\"text\":\"Text\",\"collapsed\":true,\"items\":[{\"text\":\"SearchBox\",\"link\":\"/guide/components/search-box/\"},{\"text\":\"TextBox\",\"link\":\"/guide/components/text-box/\"},{\"text\":\"TextField\",\"link\":\"/guide/components/text-field/\"},{\"text\":\"VerifyBox\",\"link\":\"/guide/components/verify-box/\"}]},{\"text\":\"Windowing\",\"collapsed\":true,\"items\":[{\"text\":\"WebWindow\",\"link\":\"/guide/components/web-window/\"}]},{\"text\":\"Global\",\"collapsed\":true,\"items\":[{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Advance\",\"collapsed\":true,\"items\":[{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git a/guide/components/web-window/index.html b/guide/components/web-window/index.html
new file mode 100644
index 0000000..858a259
--- /dev/null
+++ b/guide/components/web-window/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>WebWindow | vfluent3</title>
+    <meta name="description" content="A Vue3 component library for Fluent UI">
+    <meta name="generator" content="VitePress v1.0.0-rc.45">
+    <link rel="preload stylesheet" href="/VFluent3/assets/style.BabQegKX.css" as="style">
+    
+    <script type="module" src="/VFluent3/assets/app.CSutcJ2E.js"></script>
+    <link rel="preload" href="/VFluent3/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/framework.DvIFzl91.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/theme.CgqFBnN_.js">
+    <link rel="modulepreload" href="/VFluent3/assets/guide_components_web-window_index.md.Bxc8vEeI.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-19c990f1><div class="wrapper" data-v-19c990f1><div class="container" data-v-19c990f1><div class="title" data-v-19c990f1><div class="VPNavBarTitle has-sidebar" data-v-19c990f1 data-v-ab179fa1><a class="title" href="/VFluent3/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>VFluent3</span><!--[--><!--]--></a></div></div><div class="content" data-v-19c990f1><div class="content-body" data-v-19c990f1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-19c990f1><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-19c990f1 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Guide</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-19c990f1 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-19c990f1 data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-19c990f1 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-19c990f1><div class="divider-line" data-v-19c990f1></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-d2ecc192><button data-v-d2ecc192>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-575e6a36><div class="curtain" data-v-575e6a36></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-575e6a36><span class="visually-hidden" id="sidebar-aria-label" data-v-575e6a36> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Basic input</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/button/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/check-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CheckBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/combobox/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Combobox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/details-list/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DetailsList</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drop-down/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DropDown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio-group/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RadioGroup</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/rating-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RatingControl</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/slider/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/toggle-switch/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ToggleSwitch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tag/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Tag</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Collections</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/flip-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>FlipView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/list-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ListView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tree-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TreeView</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Date & Time</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarDatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/time-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TimePicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Dialogs & flyouts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/callout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Callout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Layout</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/collapse/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Collapse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/expander/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Expander</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drawer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Panel</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Media</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/image/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Img</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ImgBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/persona/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Persona</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Menu & toolbars</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/command-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CommandBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/menu-flyout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MenuFlyout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/swipe-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SwipeControl</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Navigation</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/breadcrumb/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationPanel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pivot/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pivot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pagination/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pagination</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Scrolling</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/infinite-scroll-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfiniteScrollView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/scroll-story/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ScrollStory</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Status & info</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/badge/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-ring/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressRing</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Styles</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/animated-icon/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>AnimatedIcon</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/icon-element/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>IconElement</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/reveal-container/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RevealContainer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/shimmer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Shimmer</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Text</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/search-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SearchBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-field/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextField</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/verify-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>VerifyBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible has-active" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Windowing</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/web-window/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>WebWindow</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Global</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Advance</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-935f8a84><div class="content" data-v-935f8a84><div class="outline-marker" data-v-935f8a84></div><div class="outline-title" role="heading" aria-level="2" data-v-935f8a84>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-935f8a84><span class="visually-hidden" id="doc-outline-aria-label" data-v-935f8a84> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-935f8a84 data-v-b933a997><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _VFluent3_guide_components_web-window_" data-v-39a288b8><div><h3 id="webwindow-demo" tabindex="-1">WebWindow-DEMO <a class="header-anchor" href="#webwindow-demo" aria-label="Permalink to &quot;WebWindow-DEMO&quot;">​</a></h3><hr><!----><h3 id="propoties" tabindex="-1">Propoties <a class="header-anchor" href="#propoties" aria-label="Permalink to &quot;Propoties&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">属性(attr)</th><th style="text-align:center;">类型(type)</th><th style="text-align:center;">必填(required)</th><th style="text-align:center;">默认值(default)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">value/v-model</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">true</td><td style="text-align:center;">开启或关闭WebWindow</td></tr><tr><td style="text-align:center;">title</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">N/A</td><td style="text-align:center;">WebWindow标题</td></tr><tr><td style="text-align:center;">left</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">0</td><td style="text-align:center;">WebWindow默认距离左边的距离</td></tr><tr><td style="text-align:center;">top</td><td style="text-align:center;">Number</td><td style="text-align:center;">No</td><td style="text-align:center;">0</td><td style="text-align:center;">WebWindow默认距离顶部的距离</td></tr><tr><td style="text-align:center;">isResize</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否启用可变尺寸</td></tr><tr><td style="text-align:center;">isAcrylic</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否开启背景模糊</td></tr><tr><td style="text-align:center;">refreshPosition</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">No</td><td style="text-align:center;">false</td><td style="text-align:center;">是否在WebWindow打开时刷新位置</td></tr><tr><td style="text-align:center;">theme</td><td style="text-align:center;">String</td><td style="text-align:center;">No</td><td style="text-align:center;">system</td><td style="text-align:center;">主题样式, 包含<code>light</code>, <code>dark</code>, <code>system</code>, <code>custom</code>几种样式</td></tr></tbody></table><h3 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to &quot;Events&quot;">​</a></h3><hr><table><thead><tr><th style="text-align:center;">事件名(Name)</th><th style="text-align:center;">参数类型(args)</th><th style="text-align:center;">说明(statement)</th></tr></thead><tbody><tr><td style="text-align:center;">close</td><td style="text-align:center;"></td><td style="text-align:center;">WebWindow关闭时触发事件</td></tr></tbody></table><h3 id="slot" tabindex="-1">Slot <a class="header-anchor" href="#slot" aria-label="Permalink to &quot;Slot&quot;">​</a></h3><hr><ol><li>Default</li></ol><div class="language-vue vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-web-window</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;div&gt;&lt;/div&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">fv-web-window</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-09de1c0f><!--[--><!--]--><!----><nav class="prev-next" data-v-09de1c0f><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link prev" href="/VFluent3/guide/components/verify-box/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Previous page</span><span class="title" data-v-09de1c0f>VerifyBox</span><!--]--></a></div><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link next" href="/VFluent3/guide/components/message-bar/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Next page</span><span class="title" data-v-09de1c0f>MessageBar</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>MIT Licensed</p><p class="copyright" data-v-e315a0ad>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_calendar-date-picker_properties.md\":\"DXRjmMG8\",\"guide_components_image_properties.md\":\"DGanRzCb\",\"guide_components_img-box_index.md\":\"DYtggkf_\",\"guide_components_img_emits.md\":\"BlE7jvZQ\",\"guide_components_img_index.md\":\"Bm9FiuU4\",\"guide_components_icon-element_properties.md\":\"8Oakruwc\",\"guide_components_img_properties.md\":\"B42YSocI\",\"guide_components_drawer_index.md\":\"D_vpnCpE\",\"guide_components_verify-box_emits.md\":\"DT17Iazx\",\"guide_components_calendar-date-picker_index.md\":\"BdHjrurh\",\"guide_components_rating-control_index.md\":\"Q9l5Lfrr\",\"guide_components_rating-control_properties.md\":\"DKprnl0i\",\"guide_components_calendar-view_index.md\":\"zdoRYVx1\",\"guide_components_animated-icon_index.md\":\"yZDMzCFe\",\"guide_components_calendar-date-picker_emits.md\":\"D5OkfR8j\",\"guide_components_badge_index.md\":\"Bb4crrJn\",\"guide_components_image_index.md\":\"B7X6cWAZ\",\"guide_components_slider_index.md\":\"C7zZ2d-W\",\"guide_components_radio-group_index.md\":\"CVfh3h5H\",\"guide_components_swipe-control_index.md\":\"DwrDVPc1\",\"guide_components_color-picker_emits.md\":\"BHDXVtBQ\",\"guide_components_radio_index.md\":\"90as5QGp\",\"guide_components_pagination_properties.md\":\"JUAPvcTL\",\"guide_components_persona_properties.md\":\"DUTPhPMp\",\"guide_components_combo-box_emits.md\":\"Dh5R-qEv\",\"guide_components_pivot_emits.md\":\"BTJPgNpy\",\"guide_components_pagination_index.md\":\"CnW2zAht\",\"guide_components_flip-view_properties.md\":\"BqZ4hhgU\",\"guide_components_icon-element_emits.md\":\"D5TXFdTZ\",\"guide_components_flip-view_index.md\":\"DefnDOv6\",\"guide_components_navigation-panel_index.md\":\"6mO__sSK\",\"guide_components_rating-control_emits.md\":\"blvomSeC\",\"guide_components_icon-element_index.md\":\"DQ8K7JNn\",\"guide_components_navigation-view_index.md\":\"4AQRiz1k\",\"guide_components_toggle-switch_emits.md\":\"CLGzrNut\",\"guide_components_toggle-switch_index.md\":\"61en_q9-\",\"guide_components_scroll-story_index.md\":\"Vpgb1HSV\",\"guide_components_reveal-container_index.md\":\"Cut2r4tV\",\"guide_components_search-box_emits.md\":\"-d9sWNNt\",\"guide_components_search-box_properties.md\":\"DEKFfPFw\",\"guide_components_shimmer_emits.md\":\"CTMInlI3\",\"guide_components_tag_index.md\":\"BhhxkcHn\",\"guide_components_search-box_index.md\":\"DgkrY0oY\",\"guide_components_shimmer_index.md\":\"iZlHuTxw\",\"guide_components_shimmer_properties.md\":\"CdkU1o6H\",\"guide_components_tree-view_index.md\":\"CUrwan4q\",\"guide_components_text-field_index.md\":\"CXSimJtj\",\"guide_components_text-box_index.md\":\"C5moAPfB\",\"guide_components_progress-ring_properties.md\":\"Dc08Uiff\",\"guide_components_toggle-switch_properties.md\":\"tFppK_IS\",\"guide_components_radio-group_emits.md\":\"cEDzKVnN\",\"guide_components_collapse_index.md\":\"N9Iu5-2v\",\"guide_components_image_emits.md\":\"lmlz2xJd\",\"guide_components_callout_index.md\":\"D9RU33w6\",\"guide_components_pivot_index.md\":\"B_vwQL-5\",\"guide_components_command-bar_index.md\":\"Cp4_rrGB\",\"guide_components_pagination_emits.md\":\"Dng86A22\",\"guide_components_button_index.md\":\"7sqT2MQP\",\"guide_components_info-box_properties.md\":\"BI7Nvk-E\",\"guide_components_drop-down_emits.md\":\"BE95TdKW\",\"guide_components_expander_index.md\":\"BKgcUJzQ\",\"guide_components_message-bar_index.md\":\"AEtAWlF8\",\"guide_components_menu-flyout_index.md\":\"Csa7irPj\",\"guide_components_panel_index.md\":\"CsTu0bXo\",\"guide_components_panel_properties.md\":\"BaxoCYKq\",\"guide_components_progress-bar_emits.md\":\"BcwXUpsF\",\"guide_components_progress-bar_properties.md\":\"TxiS9ZMA\",\"guide_components_progress-ring_emits.md\":\"D2Y6hIZ9\",\"guide_components_color-picker_index.md\":\"DCc4ixcU\",\"guide_components_progress-ring_index.md\":\"CPb-ZEPE\",\"guide_components_color-picker_properties.md\":\"wcXK29Vl\",\"guide_components_time-picker_index.md\":\"CQJdRRaG\",\"guide_components_drop-down_properties.md\":\"Bwlkpr1q\",\"guide_components_infinite-scroll-view_index.md\":\"yAuD807x\",\"guide_components_check-box_index.md\":\"FYgdu4oq\",\"guide_components_progress-bar_index.md\":\"D8vHQw5V\",\"guide_components_combo-box_index.md\":\"DTyu3eNd\",\"guide_components_info-box_emits.md\":\"DlEwpkkq\",\"guide_components_drop-down_index.md\":\"BZzJZQWq\",\"guide_components_list-view_index.md\":\"BoYvMzb0\",\"guide_components_verify-box_properties.md\":\"CW6W8fFf\",\"guide_components_verify-box_index.md\":\"DwSB40wR\",\"guide_index.md\":\"Bndlt3sL\",\"guide_components_web-window_index.md\":\"Bxc8vEeI\",\"index.md\":\"MTRqI42u\",\"guide_components_combo-box_properties.md\":\"AWfHzV6x\",\"guide_components_combobox_emits.md\":\"CGB6WLt8\",\"guide_components_combobox_properties.md\":\"Bja0hMou\",\"guide_components_details-list_index.md\":\"CcgOCIyt\",\"guide_components_info-box_index.md\":\"vXh-_DsL\",\"guide_components_combobox_index.md\":\"CsPkY6YB\",\"guide_components_date-picker_index.md\":\"12vmUIup\",\"guide_components_flip-view_emits.md\":\"DCheHjDj\",\"guide_components_panel_emits.md\":\"DG0REDq8\",\"guide_components_breadcrumb_index.md\":\"DyDm7PeP\",\"guide_components_radio-group_properties.md\":\"BnPxoKsQ\",\"guide_components_persona_emits.md\":\"CnsDPKRU\",\"guide_components_pivot_properties.md\":\"BmoLpPi1\",\"guide_components_persona_index.md\":\"DT00jby4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vfluent3\",\"description\":\"A Vue3 component library for Fluent UI\",\"base\":\"/VFluent3/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"VFluent3\",\"footer\":{\"message\":\"MIT Licensed\",\"copyright\":\"Copyright © Creator SN - 2022\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/\"}],\"sidebar\":[{\"text\":\"Basic input\",\"collapsed\":true,\"items\":[{\"text\":\"Button\",\"link\":\"/guide/components/button/\"},{\"text\":\"CheckBox\",\"link\":\"/guide/components/check-box/\"},{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"},{\"text\":\"Combobox\",\"link\":\"/guide/components/combobox/\"},{\"text\":\"DetailsList\",\"link\":\"/guide/components/details-list/\"},{\"text\":\"DropDown\",\"link\":\"/guide/components/drop-down/\"},{\"text\":\"Radio\",\"link\":\"/guide/components/radio/\"},{\"text\":\"RadioGroup\",\"link\":\"/guide/components/radio-group/\"},{\"text\":\"RatingControl\",\"link\":\"/guide/components/rating-control/\"},{\"text\":\"Slider\",\"link\":\"/guide/components/slider/\"},{\"text\":\"ToggleSwitch\",\"link\":\"/guide/components/toggle-switch/\"},{\"text\":\"Tag\",\"link\":\"/guide/components/tag/\"}]},{\"text\":\"Collections\",\"collapsed\":true,\"items\":[{\"text\":\"FlipView\",\"link\":\"/guide/components/flip-view/\"},{\"text\":\"ListView\",\"link\":\"/guide/components/list-view/\"},{\"text\":\"TreeView\",\"link\":\"/guide/components/tree-view/\"}]},{\"text\":\"Date & Time\",\"collapsed\":true,\"items\":[{\"text\":\"CalendarDatePicker\",\"link\":\"/guide/components/calendar-date-picker/\"},{\"text\":\"CalendarView\",\"link\":\"/guide/components/calendar-view/\"},{\"text\":\"DatePicker\",\"link\":\"/guide/components/date-picker/\"},{\"text\":\"TimePicker\",\"link\":\"/guide/components/time-picker/\"}]},{\"text\":\"Dialogs & flyouts\",\"collapsed\":true,\"items\":[{\"text\":\"Callout\",\"link\":\"/guide/components/callout/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Layout\",\"collapsed\":true,\"items\":[{\"text\":\"Collapse\",\"link\":\"/guide/components/collapse/\"},{\"text\":\"Expander\",\"link\":\"/guide/components/expander/\"},{\"text\":\"Drawer\",\"link\":\"/guide/components/drawer/\"},{\"text\":\"Panel\",\"link\":\"/guide/components/panel/\"}]},{\"text\":\"Media\",\"collapsed\":true,\"items\":[{\"text\":\"Image\",\"link\":\"/guide/components/image/\"},{\"text\":\"Img\",\"link\":\"/guide/components/img/\"},{\"text\":\"ImgBox\",\"link\":\"/guide/components/img-box/\"},{\"text\":\"Persona\",\"link\":\"/guide/components/persona/\"}]},{\"text\":\"Menu & toolbars\",\"collapsed\":true,\"items\":[{\"text\":\"CommandBar\",\"link\":\"/guide/components/command-bar/\"},{\"text\":\"MenuFlyout\",\"link\":\"/guide/components/menu-flyout/\"},{\"text\":\"SwipeControl\",\"link\":\"/guide/components/swipe-control/\"}]},{\"text\":\"Navigation\",\"collapsed\":true,\"items\":[{\"text\":\"Breadcrumb\",\"link\":\"/guide/components/breadcrumb/\"},{\"text\":\"NavigationPanel\",\"link\":\"/guide/components/navigation-panel/\"},{\"text\":\"NavigationView\",\"link\":\"/guide/components/navigation-view/\"},{\"text\":\"Pivot\",\"link\":\"/guide/components/pivot/\"},{\"text\":\"Pagination\",\"link\":\"/guide/components/pagination/\"}]},{\"text\":\"Scrolling\",\"collapsed\":true,\"items\":[{\"text\":\"InfiniteScrollView\",\"link\":\"/guide/components/infinite-scroll-view/\"},{\"text\":\"ScrollStory\",\"link\":\"/guide/components/scroll-story/\"}]},{\"text\":\"Status & info\",\"collapsed\":true,\"items\":[{\"text\":\"Badge\",\"link\":\"/guide/components/badge/\"},{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"ProgressBar\",\"link\":\"/guide/components/progress-bar/\"},{\"text\":\"ProgressRing\",\"link\":\"/guide/components/progress-ring/\"}]},{\"text\":\"Styles\",\"collapsed\":true,\"items\":[{\"text\":\"AnimatedIcon\",\"link\":\"/guide/components/animated-icon/\"},{\"text\":\"IconElement\",\"link\":\"/guide/components/icon-element/\"},{\"text\":\"RevealContainer\",\"link\":\"/guide/components/reveal-container/\"},{\"text\":\"Shimmer\",\"link\":\"/guide/components/shimmer/\"}]},{\"text\":\"Text\",\"collapsed\":true,\"items\":[{\"text\":\"SearchBox\",\"link\":\"/guide/components/search-box/\"},{\"text\":\"TextBox\",\"link\":\"/guide/components/text-box/\"},{\"text\":\"TextField\",\"link\":\"/guide/components/text-field/\"},{\"text\":\"VerifyBox\",\"link\":\"/guide/components/verify-box/\"}]},{\"text\":\"Windowing\",\"collapsed\":true,\"items\":[{\"text\":\"WebWindow\",\"link\":\"/guide/components/web-window/\"}]},{\"text\":\"Global\",\"collapsed\":true,\"items\":[{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Advance\",\"collapsed\":true,\"items\":[{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
+    
+  </body>
+</html>
\ No newline at end of file
diff --git a/guide/index.html b/guide/index.html
index a100f1d..973d144 100644
--- a/guide/index.html
+++ b/guide/index.html
@@ -1,21 +1,24 @@
 <!DOCTYPE html>
-<html lang="en-US">
+<html lang="en-US" dir="ltr">
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1">
     <title>Guide | vfluent3</title>
     <meta name="description" content="A Vue3 component library for Fluent UI">
-    <link rel="stylesheet" href="/VFluent3/assets/style.0a1d87af.css">
-    <link rel="modulepreload" href="/VFluent3/assets/app.d60fa8c3.js">
-    <link rel="modulepreload" href="/VFluent3/assets/guide_index.md.e3dca1d7.lean.js">
+    <meta name="generator" content="VitePress v1.0.0-rc.45">
+    <link rel="preload stylesheet" href="/VFluent3/assets/style.BabQegKX.css" as="style">
     
-    <script>(()=>{const e=localStorage.getItem("vitepress-theme-appearance"),a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script type="module" src="/VFluent3/assets/app.CSutcJ2E.js"></script>
+    <link rel="preload" href="/VFluent3/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/framework.DvIFzl91.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/theme.CgqFBnN_.js">
+    <link rel="modulepreload" href="/VFluent3/assets/guide_index.md.Bndlt3sL.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
   </head>
   <body>
-    <div id="app"><div class="Layout" data-v-058b7495><!--[--><!--]--><!--[--><span tabindex="-1" data-v-bea91388></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-bea91388> Skip to content </a><!--]--><!----><header class="VPNav" data-v-058b7495 data-v-2a0a2738><div class="VPNavBar has-sidebar" data-v-2a0a2738 data-v-45c9f423><div class="container" data-v-45c9f423><div class="VPNavBarTitle has-sidebar" data-v-45c9f423 data-v-011600ce><a class="title" href="/VFluent3/" data-v-011600ce><!----><!--[-->VFluent3<!--]--></a></div><div class="content" data-v-45c9f423><!----><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-45c9f423 data-v-4da4371d><span id="main-nav-aria-label" class="visually-hidden" data-v-4da4371d>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" data-v-4da4371d data-v-66f8d518 data-v-4d08dd3a><!--[-->Home<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink active" href="/VFluent3/guide/" data-v-4da4371d data-v-66f8d518 data-v-4d08dd3a><!--[-->Guide<!--]--><!----></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-45c9f423 data-v-bf1c94ca><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" data-v-bf1c94ca data-v-d0ee0df2 data-v-55b931a0><span class="check" data-v-55b931a0><span class="icon" data-v-55b931a0><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-d0ee0df2><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-d0ee0df2><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-45c9f423 data-v-7cece6ac data-v-37af1650><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-37af1650><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-37af1650><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-37af1650><div class="VPMenu" data-v-37af1650 data-v-17dc081b><!----><!--[--><!--[--><!----><div class="group" data-v-7cece6ac><div class="item appearance" data-v-7cece6ac><p class="label" data-v-7cece6ac>Appearance</p><div class="appearance-action" data-v-7cece6ac><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" data-v-7cece6ac data-v-d0ee0df2 data-v-55b931a0><span class="check" data-v-55b931a0><span class="icon" data-v-55b931a0><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-d0ee0df2><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-d0ee0df2><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-45c9f423 data-v-5484e669><span class="container" data-v-5484e669><span class="top" data-v-5484e669></span><span class="middle" data-v-5484e669></span><span class="bottom" data-v-5484e669></span></span></button></div></div></div><!----></header><div class="VPLocalNav" data-v-058b7495 data-v-f623cd72><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-f623cd72><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-f623cd72><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-f623cd72>Menu</span></button><a class="top-link" href="#" data-v-f623cd72> Return to top </a></div><aside class="VPSidebar" data-v-058b7495 data-v-3b8ec0c7><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-3b8ec0c7><span class="visually-hidden" id="sidebar-aria-label" data-v-3b8ec0c7> Sidebar Navigation </span><!--[--><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Basic</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/button/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Button</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/check-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>CheckBox</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/radio/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Radio</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/progress-bar/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ProgressBar</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/progress-ring/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ProgressRing</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/toggle-switch/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ToggleSwitch</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/img/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>Img</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/text-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>TextBox</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/combo-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ComboBox</span><!--]--><!----></a><!--]--></div></section></div><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Global</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/message-bar/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>MessageBar</span><!--]--><!----></a><a class="VPLink link" href="/VFluent3/guide/components/info-box/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>InfoBox</span><!--]--><!----></a><!--]--></div></section></div><div class="group" data-v-3b8ec0c7><section class="VPSidebarGroup" data-v-3b8ec0c7 data-v-06b4ea4e><div class="title" data-v-06b4ea4e><h2 class="title-text" data-v-06b4ea4e>Advance</h2><div class="action" data-v-06b4ea4e><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-06b4ea4e><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-06b4ea4e><!--[--><a class="VPLink link" href="/VFluent3/guide/components/color-picker/" data-v-06b4ea4e data-v-a4e3bb86 data-v-4d08dd3a><!--[--><span class="link-text" data-v-a4e3bb86>ColorPicker</span><!--]--><!----></a><!--]--></div></section></div><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-058b7495 data-v-564173e9><div class="VPDoc has-sidebar" data-v-564173e9 data-v-32b7ddf4><div class="container" data-v-32b7ddf4><div class="aside" data-v-32b7ddf4><div class="aside-curtain" data-v-32b7ddf4></div><div class="aside-container" data-v-32b7ddf4><div class="aside-content" data-v-32b7ddf4><div class="VPDocAside" data-v-32b7ddf4 data-v-35c1bae1><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline has-outline" data-v-35c1bae1 data-v-123cce62><div class="content" data-v-123cce62><div class="outline-marker" data-v-123cce62></div><div class="outline-title" data-v-123cce62>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-123cce62><span class="visually-hidden" id="doc-outline-aria-label" data-v-123cce62> Table of Contents for current page </span><ul class="root" data-v-123cce62><!--[--><li style="" data-v-123cce62><a class="outline-link" href="#get-started" data-v-123cce62>Get Started</a><!----></li><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-35c1bae1></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-32b7ddf4><div class="content-container" data-v-32b7ddf4><!--[--><!--]--><main class="main" data-v-32b7ddf4><div style="position:relative;" class="vp-doc _VFluent3_guide_index" data-v-32b7ddf4><div><h1 id="vfluent3" tabindex="-1">VFluent3 <a class="header-anchor" href="#vfluent3" aria-hidden="true">#</a></h1><h2 id="get-started" tabindex="-1">Get Started <a class="header-anchor" href="#get-started" aria-hidden="true">#</a></h2><h3 id="install" tabindex="-1">Install <a class="header-anchor" href="#install" aria-hidden="true">#</a></h3><div class="language-sh line-numbers-mode"><span class="copy"></span><pre><code><span class="line"><span style="color:#A6ACCD;">pnpm install @creatorsn/vfluent3</span></span>
-<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div></div></div></main><footer class="VPDocFooter" data-v-32b7ddf4 data-v-cfaa3a6c><div class="edit-info" data-v-cfaa3a6c><!----><!----></div><div class="prev-next" data-v-cfaa3a6c><div class="pager" data-v-cfaa3a6c><!----></div><div class="pager" data-v-cfaa3a6c><a class="pager-link next" href="/VFluent3/guide/components/button/" data-v-cfaa3a6c><span class="desc" data-v-cfaa3a6c>Next page</span><span class="title" data-v-cfaa3a6c>Button</span></a></div></div></footer><!--[--><!--]--></div></div></div></div></div><footer class="VPFooter has-sidebar" data-v-058b7495 data-v-a6c8dde4><div class="container" data-v-a6c8dde4><p class="message" data-v-a6c8dde4>MIT Licensed</p><p class="copyright" data-v-a6c8dde4>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
-    <script>__VP_HASH_MAP__ = JSON.parse("{\"guide_components_button_emits.md\":\"d682bf18\",\"guide_components_button_index.md\":\"23a8eb54\",\"guide_components_button_properties.md\":\"cd4004b6\",\"guide_components_check-box_emits.md\":\"31609794\",\"guide_components_check-box_index.md\":\"32046814\",\"guide_components_check-box_properties.md\":\"8f33ac0c\",\"guide_components_color-picker_emits.md\":\"00983cd0\",\"guide_components_color-picker_index.md\":\"b2d62612\",\"guide_components_color-picker_properties.md\":\"5466ba72\",\"guide_components_combo-box_emits.md\":\"d5ffda50\",\"guide_components_combo-box_index.md\":\"1c4364f5\",\"guide_components_combo-box_properties.md\":\"2e1d6060\",\"guide_components_img_emits.md\":\"6237adb4\",\"guide_components_img_index.md\":\"fa51a3a1\",\"guide_components_img_properties.md\":\"8d321b5e\",\"guide_components_info-box_emits.md\":\"c2e71eec\",\"guide_components_info-box_index.md\":\"06175fed\",\"guide_components_info-box_properties.md\":\"314dbb00\",\"guide_components_message-bar_emits.md\":\"e89a5a22\",\"guide_components_message-bar_index.md\":\"3f0b01d6\",\"guide_components_message-bar_properties.md\":\"ee3838d9\",\"guide_components_progress-bar_emits.md\":\"5b611e3b\",\"guide_components_progress-bar_index.md\":\"689c3241\",\"guide_components_progress-bar_properties.md\":\"39af7fb2\",\"guide_components_progress-ring_emits.md\":\"67e4644e\",\"guide_components_progress-ring_index.md\":\"9a33542b\",\"guide_components_progress-ring_properties.md\":\"c897c4bb\",\"guide_components_radio_emits.md\":\"28506857\",\"guide_components_radio_index.md\":\"e5a479ce\",\"guide_components_radio_properties.md\":\"f8e55d2f\",\"guide_components_text-box_emits.md\":\"0bf89ef8\",\"guide_components_text-box_index.md\":\"7ccfc637\",\"guide_components_text-box_properties.md\":\"aab3a89e\",\"guide_components_toggle-switch_emits.md\":\"5146435f\",\"guide_components_toggle-switch_index.md\":\"8be48081\",\"guide_components_toggle-switch_properties.md\":\"54984c3a\",\"guide_index.md\":\"e3dca1d7\",\"index.md\":\"1e9773d5\"}")</script>
-    <script type="module" async src="/VFluent3/assets/app.d60fa8c3.js"></script>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-19c990f1><div class="wrapper" data-v-19c990f1><div class="container" data-v-19c990f1><div class="title" data-v-19c990f1><div class="VPNavBarTitle has-sidebar" data-v-19c990f1 data-v-ab179fa1><a class="title" href="/VFluent3/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>VFluent3</span><!--[--><!--]--></a></div></div><div class="content" data-v-19c990f1><div class="content-body" data-v-19c990f1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-19c990f1><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-19c990f1 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink active" href="/VFluent3/guide/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Guide</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-19c990f1 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-19c990f1 data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-19c990f1 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-19c990f1><div class="divider-line" data-v-19c990f1></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-d2ecc192><button data-v-d2ecc192>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-575e6a36><div class="curtain" data-v-575e6a36></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-575e6a36><span class="visually-hidden" id="sidebar-aria-label" data-v-575e6a36> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Basic input</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/button/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/check-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CheckBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/combobox/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Combobox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/details-list/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DetailsList</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drop-down/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DropDown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/radio-group/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RadioGroup</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/rating-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RatingControl</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/slider/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/toggle-switch/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ToggleSwitch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tag/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Tag</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Collections</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/flip-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>FlipView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/list-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ListView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/tree-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TreeView</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Date & Time</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarDatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/calendar-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CalendarView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/date-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>DatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/time-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TimePicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Dialogs & flyouts</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/callout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Callout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Layout</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/collapse/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Collapse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/expander/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Expander</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/drawer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Panel</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Media</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/image/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Img</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/img-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ImgBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/persona/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Persona</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Menu & toolbars</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/command-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>CommandBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/menu-flyout/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MenuFlyout</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/swipe-control/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SwipeControl</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Navigation</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/breadcrumb/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-panel/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationPanel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/navigation-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>NavigationView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pivot/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pivot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/pagination/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Pagination</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Scrolling</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/infinite-scroll-view/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfiniteScrollView</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/scroll-story/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ScrollStory</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Status & info</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/badge/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/progress-ring/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ProgressRing</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Styles</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/animated-icon/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>AnimatedIcon</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/icon-element/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>IconElement</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/reveal-container/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>RevealContainer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/shimmer/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>Shimmer</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Text</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/search-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>SearchBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextBox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/text-field/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>TextField</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/verify-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>VerifyBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Windowing</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/web-window/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>WebWindow</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Global</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/message-bar/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>MessageBar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/info-box/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>InfoBox</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-93e7e794><div class="item" role="button" tabindex="0" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><h2 class="text" data-v-93e7e794>Advance</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-93e7e794><span class="vpi-chevron-right caret-icon" data-v-93e7e794></span></div></div><div class="items" data-v-93e7e794><!--[--><div class="VPSidebarItem level-1 is-link" data-v-93e7e794 data-v-93e7e794><div class="item" data-v-93e7e794><div class="indicator" data-v-93e7e794></div><a class="VPLink link link" href="/VFluent3/guide/components/color-picker/" data-v-93e7e794><!--[--><p class="text" data-v-93e7e794>ColorPicker</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-935f8a84><div class="content" data-v-935f8a84><div class="outline-marker" data-v-935f8a84></div><div class="outline-title" role="heading" aria-level="2" data-v-935f8a84>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-935f8a84><span class="visually-hidden" id="doc-outline-aria-label" data-v-935f8a84> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-935f8a84 data-v-b933a997><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _VFluent3_guide_" data-v-39a288b8><div><h1 id="vfluent3" tabindex="-1">VFluent3 <a class="header-anchor" href="#vfluent3" aria-label="Permalink to &quot;VFluent3&quot;">​</a></h1><h2 id="get-started" tabindex="-1">Get Started <a class="header-anchor" href="#get-started" aria-label="Permalink to &quot;Get Started&quot;">​</a></h2><h3 id="install" tabindex="-1">Install <a class="header-anchor" href="#install" aria-label="Permalink to &quot;Install&quot;">​</a></h3><div class="language-sh vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">sh</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">pnpm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> install</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> @creatorsn/vfluent3</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-09de1c0f><!--[--><!--]--><!----><nav class="prev-next" data-v-09de1c0f><div class="pager" data-v-09de1c0f><!----></div><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link next" href="/VFluent3/guide/components/button/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>Next page</span><span class="title" data-v-09de1c0f>Button</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>MIT Licensed</p><p class="copyright" data-v-e315a0ad>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_calendar-date-picker_properties.md\":\"DXRjmMG8\",\"guide_components_image_properties.md\":\"DGanRzCb\",\"guide_components_img-box_index.md\":\"DYtggkf_\",\"guide_components_img_emits.md\":\"BlE7jvZQ\",\"guide_components_img_index.md\":\"Bm9FiuU4\",\"guide_components_icon-element_properties.md\":\"8Oakruwc\",\"guide_components_img_properties.md\":\"B42YSocI\",\"guide_components_drawer_index.md\":\"D_vpnCpE\",\"guide_components_verify-box_emits.md\":\"DT17Iazx\",\"guide_components_calendar-date-picker_index.md\":\"BdHjrurh\",\"guide_components_rating-control_index.md\":\"Q9l5Lfrr\",\"guide_components_rating-control_properties.md\":\"DKprnl0i\",\"guide_components_calendar-view_index.md\":\"zdoRYVx1\",\"guide_components_animated-icon_index.md\":\"yZDMzCFe\",\"guide_components_calendar-date-picker_emits.md\":\"D5OkfR8j\",\"guide_components_badge_index.md\":\"Bb4crrJn\",\"guide_components_image_index.md\":\"B7X6cWAZ\",\"guide_components_slider_index.md\":\"C7zZ2d-W\",\"guide_components_radio-group_index.md\":\"CVfh3h5H\",\"guide_components_swipe-control_index.md\":\"DwrDVPc1\",\"guide_components_color-picker_emits.md\":\"BHDXVtBQ\",\"guide_components_radio_index.md\":\"90as5QGp\",\"guide_components_pagination_properties.md\":\"JUAPvcTL\",\"guide_components_persona_properties.md\":\"DUTPhPMp\",\"guide_components_combo-box_emits.md\":\"Dh5R-qEv\",\"guide_components_pivot_emits.md\":\"BTJPgNpy\",\"guide_components_pagination_index.md\":\"CnW2zAht\",\"guide_components_flip-view_properties.md\":\"BqZ4hhgU\",\"guide_components_icon-element_emits.md\":\"D5TXFdTZ\",\"guide_components_flip-view_index.md\":\"DefnDOv6\",\"guide_components_navigation-panel_index.md\":\"6mO__sSK\",\"guide_components_rating-control_emits.md\":\"blvomSeC\",\"guide_components_icon-element_index.md\":\"DQ8K7JNn\",\"guide_components_navigation-view_index.md\":\"4AQRiz1k\",\"guide_components_toggle-switch_emits.md\":\"CLGzrNut\",\"guide_components_toggle-switch_index.md\":\"61en_q9-\",\"guide_components_scroll-story_index.md\":\"Vpgb1HSV\",\"guide_components_reveal-container_index.md\":\"Cut2r4tV\",\"guide_components_search-box_emits.md\":\"-d9sWNNt\",\"guide_components_search-box_properties.md\":\"DEKFfPFw\",\"guide_components_shimmer_emits.md\":\"CTMInlI3\",\"guide_components_tag_index.md\":\"BhhxkcHn\",\"guide_components_search-box_index.md\":\"DgkrY0oY\",\"guide_components_shimmer_index.md\":\"iZlHuTxw\",\"guide_components_shimmer_properties.md\":\"CdkU1o6H\",\"guide_components_tree-view_index.md\":\"CUrwan4q\",\"guide_components_text-field_index.md\":\"CXSimJtj\",\"guide_components_text-box_index.md\":\"C5moAPfB\",\"guide_components_progress-ring_properties.md\":\"Dc08Uiff\",\"guide_components_toggle-switch_properties.md\":\"tFppK_IS\",\"guide_components_radio-group_emits.md\":\"cEDzKVnN\",\"guide_components_collapse_index.md\":\"N9Iu5-2v\",\"guide_components_image_emits.md\":\"lmlz2xJd\",\"guide_components_callout_index.md\":\"D9RU33w6\",\"guide_components_pivot_index.md\":\"B_vwQL-5\",\"guide_components_command-bar_index.md\":\"Cp4_rrGB\",\"guide_components_pagination_emits.md\":\"Dng86A22\",\"guide_components_button_index.md\":\"7sqT2MQP\",\"guide_components_info-box_properties.md\":\"BI7Nvk-E\",\"guide_components_drop-down_emits.md\":\"BE95TdKW\",\"guide_components_expander_index.md\":\"BKgcUJzQ\",\"guide_components_message-bar_index.md\":\"AEtAWlF8\",\"guide_components_menu-flyout_index.md\":\"Csa7irPj\",\"guide_components_panel_index.md\":\"CsTu0bXo\",\"guide_components_panel_properties.md\":\"BaxoCYKq\",\"guide_components_progress-bar_emits.md\":\"BcwXUpsF\",\"guide_components_progress-bar_properties.md\":\"TxiS9ZMA\",\"guide_components_progress-ring_emits.md\":\"D2Y6hIZ9\",\"guide_components_color-picker_index.md\":\"DCc4ixcU\",\"guide_components_progress-ring_index.md\":\"CPb-ZEPE\",\"guide_components_color-picker_properties.md\":\"wcXK29Vl\",\"guide_components_time-picker_index.md\":\"CQJdRRaG\",\"guide_components_drop-down_properties.md\":\"Bwlkpr1q\",\"guide_components_infinite-scroll-view_index.md\":\"yAuD807x\",\"guide_components_check-box_index.md\":\"FYgdu4oq\",\"guide_components_progress-bar_index.md\":\"D8vHQw5V\",\"guide_components_combo-box_index.md\":\"DTyu3eNd\",\"guide_components_info-box_emits.md\":\"DlEwpkkq\",\"guide_components_drop-down_index.md\":\"BZzJZQWq\",\"guide_components_list-view_index.md\":\"BoYvMzb0\",\"guide_components_verify-box_properties.md\":\"CW6W8fFf\",\"guide_components_verify-box_index.md\":\"DwSB40wR\",\"guide_index.md\":\"Bndlt3sL\",\"guide_components_web-window_index.md\":\"Bxc8vEeI\",\"index.md\":\"MTRqI42u\",\"guide_components_combo-box_properties.md\":\"AWfHzV6x\",\"guide_components_combobox_emits.md\":\"CGB6WLt8\",\"guide_components_combobox_properties.md\":\"Bja0hMou\",\"guide_components_details-list_index.md\":\"CcgOCIyt\",\"guide_components_info-box_index.md\":\"vXh-_DsL\",\"guide_components_combobox_index.md\":\"CsPkY6YB\",\"guide_components_date-picker_index.md\":\"12vmUIup\",\"guide_components_flip-view_emits.md\":\"DCheHjDj\",\"guide_components_panel_emits.md\":\"DG0REDq8\",\"guide_components_breadcrumb_index.md\":\"DyDm7PeP\",\"guide_components_radio-group_properties.md\":\"BnPxoKsQ\",\"guide_components_persona_emits.md\":\"CnsDPKRU\",\"guide_components_pivot_properties.md\":\"BmoLpPi1\",\"guide_components_persona_index.md\":\"DT00jby4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vfluent3\",\"description\":\"A Vue3 component library for Fluent UI\",\"base\":\"/VFluent3/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"VFluent3\",\"footer\":{\"message\":\"MIT Licensed\",\"copyright\":\"Copyright © Creator SN - 2022\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/\"}],\"sidebar\":[{\"text\":\"Basic input\",\"collapsed\":true,\"items\":[{\"text\":\"Button\",\"link\":\"/guide/components/button/\"},{\"text\":\"CheckBox\",\"link\":\"/guide/components/check-box/\"},{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"},{\"text\":\"Combobox\",\"link\":\"/guide/components/combobox/\"},{\"text\":\"DetailsList\",\"link\":\"/guide/components/details-list/\"},{\"text\":\"DropDown\",\"link\":\"/guide/components/drop-down/\"},{\"text\":\"Radio\",\"link\":\"/guide/components/radio/\"},{\"text\":\"RadioGroup\",\"link\":\"/guide/components/radio-group/\"},{\"text\":\"RatingControl\",\"link\":\"/guide/components/rating-control/\"},{\"text\":\"Slider\",\"link\":\"/guide/components/slider/\"},{\"text\":\"ToggleSwitch\",\"link\":\"/guide/components/toggle-switch/\"},{\"text\":\"Tag\",\"link\":\"/guide/components/tag/\"}]},{\"text\":\"Collections\",\"collapsed\":true,\"items\":[{\"text\":\"FlipView\",\"link\":\"/guide/components/flip-view/\"},{\"text\":\"ListView\",\"link\":\"/guide/components/list-view/\"},{\"text\":\"TreeView\",\"link\":\"/guide/components/tree-view/\"}]},{\"text\":\"Date & Time\",\"collapsed\":true,\"items\":[{\"text\":\"CalendarDatePicker\",\"link\":\"/guide/components/calendar-date-picker/\"},{\"text\":\"CalendarView\",\"link\":\"/guide/components/calendar-view/\"},{\"text\":\"DatePicker\",\"link\":\"/guide/components/date-picker/\"},{\"text\":\"TimePicker\",\"link\":\"/guide/components/time-picker/\"}]},{\"text\":\"Dialogs & flyouts\",\"collapsed\":true,\"items\":[{\"text\":\"Callout\",\"link\":\"/guide/components/callout/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Layout\",\"collapsed\":true,\"items\":[{\"text\":\"Collapse\",\"link\":\"/guide/components/collapse/\"},{\"text\":\"Expander\",\"link\":\"/guide/components/expander/\"},{\"text\":\"Drawer\",\"link\":\"/guide/components/drawer/\"},{\"text\":\"Panel\",\"link\":\"/guide/components/panel/\"}]},{\"text\":\"Media\",\"collapsed\":true,\"items\":[{\"text\":\"Image\",\"link\":\"/guide/components/image/\"},{\"text\":\"Img\",\"link\":\"/guide/components/img/\"},{\"text\":\"ImgBox\",\"link\":\"/guide/components/img-box/\"},{\"text\":\"Persona\",\"link\":\"/guide/components/persona/\"}]},{\"text\":\"Menu & toolbars\",\"collapsed\":true,\"items\":[{\"text\":\"CommandBar\",\"link\":\"/guide/components/command-bar/\"},{\"text\":\"MenuFlyout\",\"link\":\"/guide/components/menu-flyout/\"},{\"text\":\"SwipeControl\",\"link\":\"/guide/components/swipe-control/\"}]},{\"text\":\"Navigation\",\"collapsed\":true,\"items\":[{\"text\":\"Breadcrumb\",\"link\":\"/guide/components/breadcrumb/\"},{\"text\":\"NavigationPanel\",\"link\":\"/guide/components/navigation-panel/\"},{\"text\":\"NavigationView\",\"link\":\"/guide/components/navigation-view/\"},{\"text\":\"Pivot\",\"link\":\"/guide/components/pivot/\"},{\"text\":\"Pagination\",\"link\":\"/guide/components/pagination/\"}]},{\"text\":\"Scrolling\",\"collapsed\":true,\"items\":[{\"text\":\"InfiniteScrollView\",\"link\":\"/guide/components/infinite-scroll-view/\"},{\"text\":\"ScrollStory\",\"link\":\"/guide/components/scroll-story/\"}]},{\"text\":\"Status & info\",\"collapsed\":true,\"items\":[{\"text\":\"Badge\",\"link\":\"/guide/components/badge/\"},{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"ProgressBar\",\"link\":\"/guide/components/progress-bar/\"},{\"text\":\"ProgressRing\",\"link\":\"/guide/components/progress-ring/\"}]},{\"text\":\"Styles\",\"collapsed\":true,\"items\":[{\"text\":\"AnimatedIcon\",\"link\":\"/guide/components/animated-icon/\"},{\"text\":\"IconElement\",\"link\":\"/guide/components/icon-element/\"},{\"text\":\"RevealContainer\",\"link\":\"/guide/components/reveal-container/\"},{\"text\":\"Shimmer\",\"link\":\"/guide/components/shimmer/\"}]},{\"text\":\"Text\",\"collapsed\":true,\"items\":[{\"text\":\"SearchBox\",\"link\":\"/guide/components/search-box/\"},{\"text\":\"TextBox\",\"link\":\"/guide/components/text-box/\"},{\"text\":\"TextField\",\"link\":\"/guide/components/text-field/\"},{\"text\":\"VerifyBox\",\"link\":\"/guide/components/verify-box/\"}]},{\"text\":\"Windowing\",\"collapsed\":true,\"items\":[{\"text\":\"WebWindow\",\"link\":\"/guide/components/web-window/\"}]},{\"text\":\"Global\",\"collapsed\":true,\"items\":[{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Advance\",\"collapsed\":true,\"items\":[{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
     
   </body>
 </html>
\ No newline at end of file
diff --git a/hashmap.json b/hashmap.json
index feb12b8..ee06d34 100644
--- a/hashmap.json
+++ b/hashmap.json
@@ -1 +1 @@
-{"guide_components_button_emits.md":"d682bf18","guide_components_button_index.md":"23a8eb54","guide_components_button_properties.md":"cd4004b6","guide_components_check-box_emits.md":"31609794","guide_components_check-box_index.md":"32046814","guide_components_check-box_properties.md":"8f33ac0c","guide_components_color-picker_emits.md":"00983cd0","guide_components_color-picker_index.md":"b2d62612","guide_components_color-picker_properties.md":"5466ba72","guide_components_combo-box_emits.md":"d5ffda50","guide_components_combo-box_index.md":"1c4364f5","guide_components_combo-box_properties.md":"2e1d6060","guide_components_img_emits.md":"6237adb4","guide_components_img_index.md":"fa51a3a1","guide_components_img_properties.md":"8d321b5e","guide_components_info-box_emits.md":"c2e71eec","guide_components_info-box_index.md":"06175fed","guide_components_info-box_properties.md":"314dbb00","guide_components_message-bar_emits.md":"e89a5a22","guide_components_message-bar_index.md":"3f0b01d6","guide_components_message-bar_properties.md":"ee3838d9","guide_components_progress-bar_emits.md":"5b611e3b","guide_components_progress-bar_index.md":"689c3241","guide_components_progress-bar_properties.md":"39af7fb2","guide_components_progress-ring_emits.md":"67e4644e","guide_components_progress-ring_index.md":"9a33542b","guide_components_progress-ring_properties.md":"c897c4bb","guide_components_radio_emits.md":"28506857","guide_components_radio_index.md":"e5a479ce","guide_components_radio_properties.md":"f8e55d2f","guide_components_text-box_emits.md":"0bf89ef8","guide_components_text-box_index.md":"7ccfc637","guide_components_text-box_properties.md":"aab3a89e","guide_components_toggle-switch_emits.md":"5146435f","guide_components_toggle-switch_index.md":"8be48081","guide_components_toggle-switch_properties.md":"54984c3a","guide_index.md":"e3dca1d7","index.md":"1e9773d5"}
+{"guide_components_calendar-date-picker_properties.md":"DXRjmMG8","guide_components_image_properties.md":"DGanRzCb","guide_components_img-box_index.md":"DYtggkf_","guide_components_img_emits.md":"BlE7jvZQ","guide_components_img_index.md":"Bm9FiuU4","guide_components_icon-element_properties.md":"8Oakruwc","guide_components_img_properties.md":"B42YSocI","guide_components_drawer_index.md":"D_vpnCpE","guide_components_verify-box_emits.md":"DT17Iazx","guide_components_calendar-date-picker_index.md":"BdHjrurh","guide_components_rating-control_index.md":"Q9l5Lfrr","guide_components_rating-control_properties.md":"DKprnl0i","guide_components_calendar-view_index.md":"zdoRYVx1","guide_components_animated-icon_index.md":"yZDMzCFe","guide_components_calendar-date-picker_emits.md":"D5OkfR8j","guide_components_badge_index.md":"Bb4crrJn","guide_components_image_index.md":"B7X6cWAZ","guide_components_slider_index.md":"C7zZ2d-W","guide_components_radio-group_index.md":"CVfh3h5H","guide_components_swipe-control_index.md":"DwrDVPc1","guide_components_color-picker_emits.md":"BHDXVtBQ","guide_components_radio_index.md":"90as5QGp","guide_components_pagination_properties.md":"JUAPvcTL","guide_components_persona_properties.md":"DUTPhPMp","guide_components_combo-box_emits.md":"Dh5R-qEv","guide_components_pivot_emits.md":"BTJPgNpy","guide_components_pagination_index.md":"CnW2zAht","guide_components_flip-view_properties.md":"BqZ4hhgU","guide_components_icon-element_emits.md":"D5TXFdTZ","guide_components_flip-view_index.md":"DefnDOv6","guide_components_navigation-panel_index.md":"6mO__sSK","guide_components_rating-control_emits.md":"blvomSeC","guide_components_icon-element_index.md":"DQ8K7JNn","guide_components_navigation-view_index.md":"4AQRiz1k","guide_components_toggle-switch_emits.md":"CLGzrNut","guide_components_toggle-switch_index.md":"61en_q9-","guide_components_scroll-story_index.md":"Vpgb1HSV","guide_components_reveal-container_index.md":"Cut2r4tV","guide_components_search-box_emits.md":"-d9sWNNt","guide_components_search-box_properties.md":"DEKFfPFw","guide_components_shimmer_emits.md":"CTMInlI3","guide_components_tag_index.md":"BhhxkcHn","guide_components_search-box_index.md":"DgkrY0oY","guide_components_shimmer_index.md":"iZlHuTxw","guide_components_shimmer_properties.md":"CdkU1o6H","guide_components_tree-view_index.md":"CUrwan4q","guide_components_text-field_index.md":"CXSimJtj","guide_components_text-box_index.md":"C5moAPfB","guide_components_progress-ring_properties.md":"Dc08Uiff","guide_components_toggle-switch_properties.md":"tFppK_IS","guide_components_radio-group_emits.md":"cEDzKVnN","guide_components_collapse_index.md":"N9Iu5-2v","guide_components_image_emits.md":"lmlz2xJd","guide_components_callout_index.md":"D9RU33w6","guide_components_pivot_index.md":"B_vwQL-5","guide_components_command-bar_index.md":"Cp4_rrGB","guide_components_pagination_emits.md":"Dng86A22","guide_components_button_index.md":"7sqT2MQP","guide_components_info-box_properties.md":"BI7Nvk-E","guide_components_drop-down_emits.md":"BE95TdKW","guide_components_expander_index.md":"BKgcUJzQ","guide_components_message-bar_index.md":"AEtAWlF8","guide_components_menu-flyout_index.md":"Csa7irPj","guide_components_panel_index.md":"CsTu0bXo","guide_components_panel_properties.md":"BaxoCYKq","guide_components_progress-bar_emits.md":"BcwXUpsF","guide_components_progress-bar_properties.md":"TxiS9ZMA","guide_components_progress-ring_emits.md":"D2Y6hIZ9","guide_components_color-picker_index.md":"DCc4ixcU","guide_components_progress-ring_index.md":"CPb-ZEPE","guide_components_color-picker_properties.md":"wcXK29Vl","guide_components_time-picker_index.md":"CQJdRRaG","guide_components_drop-down_properties.md":"Bwlkpr1q","guide_components_infinite-scroll-view_index.md":"yAuD807x","guide_components_check-box_index.md":"FYgdu4oq","guide_components_progress-bar_index.md":"D8vHQw5V","guide_components_combo-box_index.md":"DTyu3eNd","guide_components_info-box_emits.md":"DlEwpkkq","guide_components_drop-down_index.md":"BZzJZQWq","guide_components_list-view_index.md":"BoYvMzb0","guide_components_verify-box_properties.md":"CW6W8fFf","guide_components_verify-box_index.md":"DwSB40wR","guide_index.md":"Bndlt3sL","guide_components_web-window_index.md":"Bxc8vEeI","index.md":"MTRqI42u","guide_components_combo-box_properties.md":"AWfHzV6x","guide_components_combobox_emits.md":"CGB6WLt8","guide_components_combobox_properties.md":"Bja0hMou","guide_components_details-list_index.md":"CcgOCIyt","guide_components_info-box_index.md":"vXh-_DsL","guide_components_combobox_index.md":"CsPkY6YB","guide_components_date-picker_index.md":"12vmUIup","guide_components_flip-view_emits.md":"DCheHjDj","guide_components_panel_emits.md":"DG0REDq8","guide_components_breadcrumb_index.md":"DyDm7PeP","guide_components_radio-group_properties.md":"BnPxoKsQ","guide_components_persona_emits.md":"CnsDPKRU","guide_components_pivot_properties.md":"BmoLpPi1","guide_components_persona_index.md":"DT00jby4"}
diff --git a/index.html b/index.html
index a4a2038..31c554d 100644
--- a/index.html
+++ b/index.html
@@ -1,20 +1,24 @@
 <!DOCTYPE html>
-<html lang="en-US">
+<html lang="en-US" dir="ltr">
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1">
     <title>UI | vfluent3</title>
     <meta name="description" content="A Vue3 component library for Fluent UI">
-    <link rel="stylesheet" href="/VFluent3/assets/style.0a1d87af.css">
-    <link rel="modulepreload" href="/VFluent3/assets/app.d60fa8c3.js">
-    <link rel="modulepreload" href="/VFluent3/assets/index.md.1e9773d5.lean.js">
+    <meta name="generator" content="VitePress v1.0.0-rc.45">
+    <link rel="preload stylesheet" href="/VFluent3/assets/style.BabQegKX.css" as="style">
     
-    <script>(()=>{const e=localStorage.getItem("vitepress-theme-appearance"),a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script type="module" src="/VFluent3/assets/app.CSutcJ2E.js"></script>
+    <link rel="preload" href="/VFluent3/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/framework.DvIFzl91.js">
+    <link rel="modulepreload" href="/VFluent3/assets/chunks/theme.CgqFBnN_.js">
+    <link rel="modulepreload" href="/VFluent3/assets/index.md.MTRqI42u.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
   </head>
   <body>
-    <div id="app"><div class="Layout" data-v-058b7495><!--[--><!--]--><!--[--><span tabindex="-1" data-v-bea91388></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-bea91388> Skip to content </a><!--]--><!----><header class="VPNav no-sidebar" data-v-058b7495 data-v-2a0a2738><div class="VPNavBar" data-v-2a0a2738 data-v-45c9f423><div class="container" data-v-45c9f423><div class="VPNavBarTitle" data-v-45c9f423 data-v-011600ce><a class="title" href="/VFluent3/" data-v-011600ce><!----><!--[-->VFluent3<!--]--></a></div><div class="content" data-v-45c9f423><!----><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-45c9f423 data-v-4da4371d><span id="main-nav-aria-label" class="visually-hidden" data-v-4da4371d>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink active" href="/VFluent3/" data-v-4da4371d data-v-66f8d518 data-v-4d08dd3a><!--[-->Home<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" data-v-4da4371d data-v-66f8d518 data-v-4d08dd3a><!--[-->Guide<!--]--><!----></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-45c9f423 data-v-bf1c94ca><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" data-v-bf1c94ca data-v-d0ee0df2 data-v-55b931a0><span class="check" data-v-55b931a0><span class="icon" data-v-55b931a0><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-d0ee0df2><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-d0ee0df2><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-45c9f423 data-v-7cece6ac data-v-37af1650><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-37af1650><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-37af1650><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-37af1650><div class="VPMenu" data-v-37af1650 data-v-17dc081b><!----><!--[--><!--[--><!----><div class="group" data-v-7cece6ac><div class="item appearance" data-v-7cece6ac><p class="label" data-v-7cece6ac>Appearance</p><div class="appearance-action" data-v-7cece6ac><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" data-v-7cece6ac data-v-d0ee0df2 data-v-55b931a0><span class="check" data-v-55b931a0><span class="icon" data-v-55b931a0><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-d0ee0df2><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-d0ee0df2><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-45c9f423 data-v-5484e669><span class="container" data-v-5484e669><span class="top" data-v-5484e669></span><span class="middle" data-v-5484e669></span><span class="bottom" data-v-5484e669></span></span></button></div></div></div><!----></header><!----><!----><div class="VPContent is-home" id="VPContent" data-v-058b7495 data-v-564173e9><div class="VPHome" data-v-564173e9 data-v-17fa2fa0><!--[--><!--]--><div class="VPHero has-image VPHomeHero" data-v-17fa2fa0 data-v-4354fcca><div class="container" data-v-4354fcca><div class="main" data-v-4354fcca><h1 class="name" data-v-4354fcca><span class="clip" data-v-4354fcca>VFluent3</span></h1><p class="text" data-v-4354fcca>Inspired by Microsoft Fluent Design System</p><!----><div class="actions" data-v-4354fcca><!--[--><div class="action" data-v-4354fcca><a class="VPButton medium brand" href="/VFluent3/guide/" data-v-4354fcca data-v-5c4332d0>Get Started</a></div><div class="action" data-v-4354fcca><a class="VPButton medium alt" href="https://github.com/Creator-SN/VFluent3.git" target="_blank" rel="noopener noreferrer" data-v-4354fcca data-v-5c4332d0>View on GitHub</a></div><!--]--></div></div><div class="image" data-v-4354fcca><div class="image-container" data-v-4354fcca><div class="image-bg" data-v-4354fcca></div><!--[--><img class="VPImage image-src" src="https://raw.githubusercontent.com/aleversn/VFluent/master/examples/assert/logo/VFluent.png" data-v-1d7f37c8><!--]--></div></div></div></div><!--[--><!--]--><!--[--><!--]--><div class="VPFeatures VPHomeFeatures" data-v-17fa2fa0 data-v-2fe38425><div class="container" data-v-2fe38425><div class="items" data-v-2fe38425><!--[--><div class="grid-3 item" data-v-2fe38425><article class="VPFeature" data-v-2fe38425 data-v-31a8085a><!----><h2 class="title" data-v-31a8085a>Fluent Design</h2><p class="details" data-v-31a8085a>Based on Microsoft Fluent Design System</p></article></div><div class="grid-3 item" data-v-2fe38425><article class="VPFeature" data-v-2fe38425 data-v-31a8085a><!----><h2 class="title" data-v-31a8085a>Vue3</h2><p class="details" data-v-31a8085a>Developed by Vue3 + Vite</p></article></div><div class="grid-3 item" data-v-2fe38425><article class="VPFeature" data-v-2fe38425 data-v-31a8085a><!----><h2 class="title" data-v-31a8085a>High Performance</h2><p class="details" data-v-31a8085a>Documentation created by VitePress</p></article></div><!--]--></div></div></div><!--[--><!--]--><div style="position:relative;" data-v-17fa2fa0><div></div></div></div></div><footer class="VPFooter" data-v-058b7495 data-v-a6c8dde4><div class="container" data-v-a6c8dde4><p class="message" data-v-a6c8dde4>MIT Licensed</p><p class="copyright" data-v-a6c8dde4>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
-    <script>__VP_HASH_MAP__ = JSON.parse("{\"guide_components_button_emits.md\":\"d682bf18\",\"guide_components_button_index.md\":\"23a8eb54\",\"guide_components_button_properties.md\":\"cd4004b6\",\"guide_components_check-box_emits.md\":\"31609794\",\"guide_components_check-box_index.md\":\"32046814\",\"guide_components_check-box_properties.md\":\"8f33ac0c\",\"guide_components_color-picker_emits.md\":\"00983cd0\",\"guide_components_color-picker_index.md\":\"b2d62612\",\"guide_components_color-picker_properties.md\":\"5466ba72\",\"guide_components_combo-box_emits.md\":\"d5ffda50\",\"guide_components_combo-box_index.md\":\"1c4364f5\",\"guide_components_combo-box_properties.md\":\"2e1d6060\",\"guide_components_img_emits.md\":\"6237adb4\",\"guide_components_img_index.md\":\"fa51a3a1\",\"guide_components_img_properties.md\":\"8d321b5e\",\"guide_components_info-box_emits.md\":\"c2e71eec\",\"guide_components_info-box_index.md\":\"06175fed\",\"guide_components_info-box_properties.md\":\"314dbb00\",\"guide_components_message-bar_emits.md\":\"e89a5a22\",\"guide_components_message-bar_index.md\":\"3f0b01d6\",\"guide_components_message-bar_properties.md\":\"ee3838d9\",\"guide_components_progress-bar_emits.md\":\"5b611e3b\",\"guide_components_progress-bar_index.md\":\"689c3241\",\"guide_components_progress-bar_properties.md\":\"39af7fb2\",\"guide_components_progress-ring_emits.md\":\"67e4644e\",\"guide_components_progress-ring_index.md\":\"9a33542b\",\"guide_components_progress-ring_properties.md\":\"c897c4bb\",\"guide_components_radio_emits.md\":\"28506857\",\"guide_components_radio_index.md\":\"e5a479ce\",\"guide_components_radio_properties.md\":\"f8e55d2f\",\"guide_components_text-box_emits.md\":\"0bf89ef8\",\"guide_components_text-box_index.md\":\"7ccfc637\",\"guide_components_text-box_properties.md\":\"aab3a89e\",\"guide_components_toggle-switch_emits.md\":\"5146435f\",\"guide_components_toggle-switch_index.md\":\"8be48081\",\"guide_components_toggle-switch_properties.md\":\"54984c3a\",\"guide_index.md\":\"e3dca1d7\",\"index.md\":\"1e9773d5\"}")</script>
-    <script type="module" async src="/VFluent3/assets/app.d60fa8c3.js"></script>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar top" data-v-ae24b3ad data-v-19c990f1><div class="wrapper" data-v-19c990f1><div class="container" data-v-19c990f1><div class="title" data-v-19c990f1><div class="VPNavBarTitle" data-v-19c990f1 data-v-ab179fa1><a class="title" href="/VFluent3/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>VFluent3</span><!--[--><!--]--></a></div></div><div class="content" data-v-19c990f1><div class="content-body" data-v-19c990f1><!--[--><!--]--><div class="VPNavBarSearch search" data-v-19c990f1><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-19c990f1 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink active" href="/VFluent3/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Home</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/VFluent3/guide/" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>Guide</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-19c990f1 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-19c990f1 data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-19c990f1 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-19c990f1><div class="divider-line" data-v-19c990f1></div></div></div><!----></header><!----><!----><div class="VPContent is-home" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPHome" data-v-1428d186 data-v-686f80a6><!--[--><!--]--><div class="VPHero has-image VPHomeHero" data-v-686f80a6 data-v-303bb580><div class="container" data-v-303bb580><div class="main" data-v-303bb580><!--[--><!--]--><!--[--><h1 class="name" data-v-303bb580><span class="clip" data-v-303bb580>VFluent3</span></h1><p class="text" data-v-303bb580>Inspired by Microsoft Fluent Design System</p><!----><!--]--><!--[--><!--]--><div class="actions" data-v-303bb580><!--[--><div class="action" data-v-303bb580><a class="VPButton medium brand" href="/VFluent3/guide/" data-v-303bb580 data-v-cad61b99>Get Started</a></div><div class="action" data-v-303bb580><a class="VPButton medium alt" href="https://github.com/Creator-SN/VFluent3.git" target="_blank" rel="noreferrer" data-v-303bb580 data-v-cad61b99>View on GitHub</a></div><!--]--></div><!--[--><!--]--></div><div class="image" data-v-303bb580><div class="image-container" data-v-303bb580><div class="image-bg" data-v-303bb580></div><!--[--><!--[--><img class="VPImage image-src" src="https://raw.githubusercontent.com/aleversn/VFluent/master/examples/assert/logo/VFluent.png" alt data-v-8b020169><!--]--><!--]--></div></div></div></div><!--[--><!--]--><!--[--><!--]--><div class="VPFeatures VPHomeFeatures" data-v-686f80a6 data-v-a6181336><div class="container" data-v-a6181336><div class="items" data-v-a6181336><!--[--><div class="grid-3 item" data-v-a6181336><div class="VPLink no-icon VPFeature" data-v-a6181336 data-v-a3976bdc><!--[--><article class="box" data-v-a3976bdc><!----><h2 class="title" data-v-a3976bdc>Fluent Design</h2><p class="details" data-v-a3976bdc>Based on Microsoft Fluent Design System</p><!----></article><!--]--></div></div><div class="grid-3 item" data-v-a6181336><div class="VPLink no-icon VPFeature" data-v-a6181336 data-v-a3976bdc><!--[--><article class="box" data-v-a3976bdc><!----><h2 class="title" data-v-a3976bdc>Vue3</h2><p class="details" data-v-a3976bdc>Developed by Vue3 + Vite</p><!----></article><!--]--></div></div><div class="grid-3 item" data-v-a6181336><div class="VPLink no-icon VPFeature" data-v-a6181336 data-v-a3976bdc><!--[--><article class="box" data-v-a3976bdc><!----><h2 class="title" data-v-a3976bdc>High Performance</h2><p class="details" data-v-a3976bdc>Documentation created by VitePress</p><!----></article><!--]--></div></div><!--]--></div></div></div><!--[--><!--]--><div class="vp-doc container" style="--vp-offset:calc(50% - Infinitypx);" data-v-686f80a6 data-v-82d4af08><!--[--><div style="position:relative;" data-v-686f80a6><div></div></div><!--]--></div></div></div><footer class="VPFooter" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>MIT Licensed</p><p class="copyright" data-v-e315a0ad>Copyright © Creator SN - 2022</p></div></footer><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_calendar-date-picker_properties.md\":\"DXRjmMG8\",\"guide_components_image_properties.md\":\"DGanRzCb\",\"guide_components_img-box_index.md\":\"DYtggkf_\",\"guide_components_img_emits.md\":\"BlE7jvZQ\",\"guide_components_img_index.md\":\"Bm9FiuU4\",\"guide_components_icon-element_properties.md\":\"8Oakruwc\",\"guide_components_img_properties.md\":\"B42YSocI\",\"guide_components_drawer_index.md\":\"D_vpnCpE\",\"guide_components_verify-box_emits.md\":\"DT17Iazx\",\"guide_components_calendar-date-picker_index.md\":\"BdHjrurh\",\"guide_components_rating-control_index.md\":\"Q9l5Lfrr\",\"guide_components_rating-control_properties.md\":\"DKprnl0i\",\"guide_components_calendar-view_index.md\":\"zdoRYVx1\",\"guide_components_animated-icon_index.md\":\"yZDMzCFe\",\"guide_components_calendar-date-picker_emits.md\":\"D5OkfR8j\",\"guide_components_badge_index.md\":\"Bb4crrJn\",\"guide_components_image_index.md\":\"B7X6cWAZ\",\"guide_components_slider_index.md\":\"C7zZ2d-W\",\"guide_components_radio-group_index.md\":\"CVfh3h5H\",\"guide_components_swipe-control_index.md\":\"DwrDVPc1\",\"guide_components_color-picker_emits.md\":\"BHDXVtBQ\",\"guide_components_radio_index.md\":\"90as5QGp\",\"guide_components_pagination_properties.md\":\"JUAPvcTL\",\"guide_components_persona_properties.md\":\"DUTPhPMp\",\"guide_components_combo-box_emits.md\":\"Dh5R-qEv\",\"guide_components_pivot_emits.md\":\"BTJPgNpy\",\"guide_components_pagination_index.md\":\"CnW2zAht\",\"guide_components_flip-view_properties.md\":\"BqZ4hhgU\",\"guide_components_icon-element_emits.md\":\"D5TXFdTZ\",\"guide_components_flip-view_index.md\":\"DefnDOv6\",\"guide_components_navigation-panel_index.md\":\"6mO__sSK\",\"guide_components_rating-control_emits.md\":\"blvomSeC\",\"guide_components_icon-element_index.md\":\"DQ8K7JNn\",\"guide_components_navigation-view_index.md\":\"4AQRiz1k\",\"guide_components_toggle-switch_emits.md\":\"CLGzrNut\",\"guide_components_toggle-switch_index.md\":\"61en_q9-\",\"guide_components_scroll-story_index.md\":\"Vpgb1HSV\",\"guide_components_reveal-container_index.md\":\"Cut2r4tV\",\"guide_components_search-box_emits.md\":\"-d9sWNNt\",\"guide_components_search-box_properties.md\":\"DEKFfPFw\",\"guide_components_shimmer_emits.md\":\"CTMInlI3\",\"guide_components_tag_index.md\":\"BhhxkcHn\",\"guide_components_search-box_index.md\":\"DgkrY0oY\",\"guide_components_shimmer_index.md\":\"iZlHuTxw\",\"guide_components_shimmer_properties.md\":\"CdkU1o6H\",\"guide_components_tree-view_index.md\":\"CUrwan4q\",\"guide_components_text-field_index.md\":\"CXSimJtj\",\"guide_components_text-box_index.md\":\"C5moAPfB\",\"guide_components_progress-ring_properties.md\":\"Dc08Uiff\",\"guide_components_toggle-switch_properties.md\":\"tFppK_IS\",\"guide_components_radio-group_emits.md\":\"cEDzKVnN\",\"guide_components_collapse_index.md\":\"N9Iu5-2v\",\"guide_components_image_emits.md\":\"lmlz2xJd\",\"guide_components_callout_index.md\":\"D9RU33w6\",\"guide_components_pivot_index.md\":\"B_vwQL-5\",\"guide_components_command-bar_index.md\":\"Cp4_rrGB\",\"guide_components_pagination_emits.md\":\"Dng86A22\",\"guide_components_button_index.md\":\"7sqT2MQP\",\"guide_components_info-box_properties.md\":\"BI7Nvk-E\",\"guide_components_drop-down_emits.md\":\"BE95TdKW\",\"guide_components_expander_index.md\":\"BKgcUJzQ\",\"guide_components_message-bar_index.md\":\"AEtAWlF8\",\"guide_components_menu-flyout_index.md\":\"Csa7irPj\",\"guide_components_panel_index.md\":\"CsTu0bXo\",\"guide_components_panel_properties.md\":\"BaxoCYKq\",\"guide_components_progress-bar_emits.md\":\"BcwXUpsF\",\"guide_components_progress-bar_properties.md\":\"TxiS9ZMA\",\"guide_components_progress-ring_emits.md\":\"D2Y6hIZ9\",\"guide_components_color-picker_index.md\":\"DCc4ixcU\",\"guide_components_progress-ring_index.md\":\"CPb-ZEPE\",\"guide_components_color-picker_properties.md\":\"wcXK29Vl\",\"guide_components_time-picker_index.md\":\"CQJdRRaG\",\"guide_components_drop-down_properties.md\":\"Bwlkpr1q\",\"guide_components_infinite-scroll-view_index.md\":\"yAuD807x\",\"guide_components_check-box_index.md\":\"FYgdu4oq\",\"guide_components_progress-bar_index.md\":\"D8vHQw5V\",\"guide_components_combo-box_index.md\":\"DTyu3eNd\",\"guide_components_info-box_emits.md\":\"DlEwpkkq\",\"guide_components_drop-down_index.md\":\"BZzJZQWq\",\"guide_components_list-view_index.md\":\"BoYvMzb0\",\"guide_components_verify-box_properties.md\":\"CW6W8fFf\",\"guide_components_verify-box_index.md\":\"DwSB40wR\",\"guide_index.md\":\"Bndlt3sL\",\"guide_components_web-window_index.md\":\"Bxc8vEeI\",\"index.md\":\"MTRqI42u\",\"guide_components_combo-box_properties.md\":\"AWfHzV6x\",\"guide_components_combobox_emits.md\":\"CGB6WLt8\",\"guide_components_combobox_properties.md\":\"Bja0hMou\",\"guide_components_details-list_index.md\":\"CcgOCIyt\",\"guide_components_info-box_index.md\":\"vXh-_DsL\",\"guide_components_combobox_index.md\":\"CsPkY6YB\",\"guide_components_date-picker_index.md\":\"12vmUIup\",\"guide_components_flip-view_emits.md\":\"DCheHjDj\",\"guide_components_panel_emits.md\":\"DG0REDq8\",\"guide_components_breadcrumb_index.md\":\"DyDm7PeP\",\"guide_components_radio-group_properties.md\":\"BnPxoKsQ\",\"guide_components_persona_emits.md\":\"CnsDPKRU\",\"guide_components_pivot_properties.md\":\"BmoLpPi1\",\"guide_components_persona_index.md\":\"DT00jby4\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vfluent3\",\"description\":\"A Vue3 component library for Fluent UI\",\"base\":\"/VFluent3/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"VFluent3\",\"footer\":{\"message\":\"MIT Licensed\",\"copyright\":\"Copyright © Creator SN - 2022\"},\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Guide\",\"link\":\"/guide/\"}],\"sidebar\":[{\"text\":\"Basic input\",\"collapsed\":true,\"items\":[{\"text\":\"Button\",\"link\":\"/guide/components/button/\"},{\"text\":\"CheckBox\",\"link\":\"/guide/components/check-box/\"},{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"},{\"text\":\"Combobox\",\"link\":\"/guide/components/combobox/\"},{\"text\":\"DetailsList\",\"link\":\"/guide/components/details-list/\"},{\"text\":\"DropDown\",\"link\":\"/guide/components/drop-down/\"},{\"text\":\"Radio\",\"link\":\"/guide/components/radio/\"},{\"text\":\"RadioGroup\",\"link\":\"/guide/components/radio-group/\"},{\"text\":\"RatingControl\",\"link\":\"/guide/components/rating-control/\"},{\"text\":\"Slider\",\"link\":\"/guide/components/slider/\"},{\"text\":\"ToggleSwitch\",\"link\":\"/guide/components/toggle-switch/\"},{\"text\":\"Tag\",\"link\":\"/guide/components/tag/\"}]},{\"text\":\"Collections\",\"collapsed\":true,\"items\":[{\"text\":\"FlipView\",\"link\":\"/guide/components/flip-view/\"},{\"text\":\"ListView\",\"link\":\"/guide/components/list-view/\"},{\"text\":\"TreeView\",\"link\":\"/guide/components/tree-view/\"}]},{\"text\":\"Date & Time\",\"collapsed\":true,\"items\":[{\"text\":\"CalendarDatePicker\",\"link\":\"/guide/components/calendar-date-picker/\"},{\"text\":\"CalendarView\",\"link\":\"/guide/components/calendar-view/\"},{\"text\":\"DatePicker\",\"link\":\"/guide/components/date-picker/\"},{\"text\":\"TimePicker\",\"link\":\"/guide/components/time-picker/\"}]},{\"text\":\"Dialogs & flyouts\",\"collapsed\":true,\"items\":[{\"text\":\"Callout\",\"link\":\"/guide/components/callout/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Layout\",\"collapsed\":true,\"items\":[{\"text\":\"Collapse\",\"link\":\"/guide/components/collapse/\"},{\"text\":\"Expander\",\"link\":\"/guide/components/expander/\"},{\"text\":\"Drawer\",\"link\":\"/guide/components/drawer/\"},{\"text\":\"Panel\",\"link\":\"/guide/components/panel/\"}]},{\"text\":\"Media\",\"collapsed\":true,\"items\":[{\"text\":\"Image\",\"link\":\"/guide/components/image/\"},{\"text\":\"Img\",\"link\":\"/guide/components/img/\"},{\"text\":\"ImgBox\",\"link\":\"/guide/components/img-box/\"},{\"text\":\"Persona\",\"link\":\"/guide/components/persona/\"}]},{\"text\":\"Menu & toolbars\",\"collapsed\":true,\"items\":[{\"text\":\"CommandBar\",\"link\":\"/guide/components/command-bar/\"},{\"text\":\"MenuFlyout\",\"link\":\"/guide/components/menu-flyout/\"},{\"text\":\"SwipeControl\",\"link\":\"/guide/components/swipe-control/\"}]},{\"text\":\"Navigation\",\"collapsed\":true,\"items\":[{\"text\":\"Breadcrumb\",\"link\":\"/guide/components/breadcrumb/\"},{\"text\":\"NavigationPanel\",\"link\":\"/guide/components/navigation-panel/\"},{\"text\":\"NavigationView\",\"link\":\"/guide/components/navigation-view/\"},{\"text\":\"Pivot\",\"link\":\"/guide/components/pivot/\"},{\"text\":\"Pagination\",\"link\":\"/guide/components/pagination/\"}]},{\"text\":\"Scrolling\",\"collapsed\":true,\"items\":[{\"text\":\"InfiniteScrollView\",\"link\":\"/guide/components/infinite-scroll-view/\"},{\"text\":\"ScrollStory\",\"link\":\"/guide/components/scroll-story/\"}]},{\"text\":\"Status & info\",\"collapsed\":true,\"items\":[{\"text\":\"Badge\",\"link\":\"/guide/components/badge/\"},{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"ProgressBar\",\"link\":\"/guide/components/progress-bar/\"},{\"text\":\"ProgressRing\",\"link\":\"/guide/components/progress-ring/\"}]},{\"text\":\"Styles\",\"collapsed\":true,\"items\":[{\"text\":\"AnimatedIcon\",\"link\":\"/guide/components/animated-icon/\"},{\"text\":\"IconElement\",\"link\":\"/guide/components/icon-element/\"},{\"text\":\"RevealContainer\",\"link\":\"/guide/components/reveal-container/\"},{\"text\":\"Shimmer\",\"link\":\"/guide/components/shimmer/\"}]},{\"text\":\"Text\",\"collapsed\":true,\"items\":[{\"text\":\"SearchBox\",\"link\":\"/guide/components/search-box/\"},{\"text\":\"TextBox\",\"link\":\"/guide/components/text-box/\"},{\"text\":\"TextField\",\"link\":\"/guide/components/text-field/\"},{\"text\":\"VerifyBox\",\"link\":\"/guide/components/verify-box/\"}]},{\"text\":\"Windowing\",\"collapsed\":true,\"items\":[{\"text\":\"WebWindow\",\"link\":\"/guide/components/web-window/\"}]},{\"text\":\"Global\",\"collapsed\":true,\"items\":[{\"text\":\"MessageBar\",\"link\":\"/guide/components/message-bar/\"},{\"text\":\"InfoBox\",\"link\":\"/guide/components/info-box/\"}]},{\"text\":\"Advance\",\"collapsed\":true,\"items\":[{\"text\":\"ColorPicker\",\"link\":\"/guide/components/color-picker/\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
     
   </body>
 </html>
\ No newline at end of file